feat(ui5-shellbar-search): initial implementation

packages/fiori/cypress/specs/Search.cy.tsx

@@ -4,7 +4,6 @@ import SearchItem from "../../src/SearchItem.js";
 import SearchItemGroup from "../../src/SearchItemGroup.js";
 import history from "@ui5/webcomponents-icons/dist/history.js";
 import IllustratedMessage from "../../src/IllustratedMessage.js";
-import SearchPopupMode from "@ui5/webcomponents/dist/types/SearchPopupMode.js";
 import searchIcon from "@ui5/webcomponents-icons/dist/search.js";
 import SearchMessageArea from "../../src/SearchMessageArea.js";
 import Button from "@ui5/webcomponents/dist/Button.js";

packages/fiori/cypress/specs/ShellBarSearch.cy.tsx

@@ -0,0 +1,65 @@
+import ShellBarSearch from "../../src/ShellBarSearch.js";
+import {
+	SHELLBAR_SEARCH_COLLAPSED,
+	SEARCH_FIELD_SEARCH_ICON,
+	SHELLBAR_SEARCH_EXPANDED,
+} from "../../src/generated/i18n/i18n-defaults.js";
+
+describe("Behaviour", () => {
+	it ("Toggles collapsed property upon icon press", () => {
+		cy.mount(<ShellBarSearch />);
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-icon]")
+			.as("searchIcon");
+
+		cy.get("@searchIcon")
+			.realClick();
+
+		cy.get("[ui5-shellbar-search]")
+			.should("have.prop", "collapsed", true);
+
+		cy.get("@searchIcon")
+			.realClick();
+
+		cy.get("[ui5-shellbar-search]")
+			.should("not.have.a.property", "collapsed");
+	});
+
+	it ("Tests icon tooltips for diffrent states", () => {
+		cy.mount(<ShellBarSearch />);
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-icon]")
+			.as("searchIcon");
+
+		cy.get("@searchIcon")
+			.should("have.attr", "accessible-name", SHELLBAR_SEARCH_EXPANDED.defaultText);
+
+		cy.get("@searchIcon")
+			.realClick();
+
+		cy.get("[ui5-shellbar-search]")
+			.should("have.prop", "collapsed", true);
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-button]")
+			.should("have.attr", "accessible-name", SHELLBAR_SEARCH_COLLAPSED.defaultText);
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-button]")
+			.realClick();
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("input")
+			.type("test");
+
+		cy.get("@searchIcon")
+			.should("have.attr", "accessible-name", SEARCH_FIELD_SEARCH_ICON.defaultText);
+	});
+});

packages/fiori/cypress/specs/ShellBarSearch.mobile.cy.tsx

@@ -0,0 +1,98 @@
+import SearchItem from "../../src/SearchItem.js";
+import ShellBarSearch from "../../src/ShellBarSearch.js";
+
+describe("Mobile Behaviour", () => {
+	beforeEach(() => {
+		cy.ui5SimulateDevice();
+	});
+
+	it("Should not close dialog upong focus out", () => {
+		cy.mount(<ShellBarSearch />);
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-button]")
+			.realClick();
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-responsive-popover] header input")
+			.type("test");
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-responsive-popover] header input")
+			.blur();
+
+		cy.get("[ui5-shellbar-search]")
+			.should("have.prop", "open", true);
+	});
+
+	it("Should select typed ahead item when typing", () => {
+		cy.mount(
+			<>
+				<ShellBarSearch showClearIcon={true}>
+					<SearchItem text="Item 1" />
+					<SearchItem text="Item 2" />
+					<SearchItem text="Item 3" />
+					<SearchItem text="Item 4" />
+					<SearchItem text="Item 5" />
+					<SearchItem text="Item 6" />
+				</ShellBarSearch>
+			</>
+		);
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-button]")
+			.realClick();
+
+		cy.get("[ui5-shellbar-search]")
+			.should("have.prop", "open", true);
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-responsive-popover] header input")
+			.type("item 1");
+
+		cy.get("[ui5-search-item]:first")
+			.should("have.attr", "selected");
+	});
+
+	it("Should type ahead internal input", () => {
+		cy.mount(
+			<>
+				<ShellBarSearch showClearIcon={true}>
+					<SearchItem text="Item 1" />
+					<SearchItem text="Item 2" />
+					<SearchItem text="Item 3" />
+					<SearchItem text="Item 4" />
+					<SearchItem text="Item 5" />
+					<SearchItem text="Item 6" />
+				</ShellBarSearch>
+			</>
+		);
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-button]")
+			.realClick();
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-responsive-popover] header input")
+			.type("ite");
+
+		cy.get("[ui5-shellbar-search]")
+			.shadow()
+			.find("[ui5-responsive-popover] header input")
+			.should("have.value", "Item 1");
+	});
+
+	it("is collapsed by default", () => {
+		cy.mount(<ShellBarSearch />);
+
+		cy.get("[ui5-shellbar-search]")
+			.should("have.prop", "collapsed", true);
+	});
+});

packages/fiori/src/Search.ts

@@ -287,13 +287,11 @@ class Search extends SearchField {
 
 	_handleMobileInput(e: CustomEvent<InputEventDetail>) {
 		this.value = (e.target as Input).value;
-		this._performItemSelectionOnMobile = this._shouldPerformSelectionOnMobile(e);
+		this._performItemSelectionOnMobile = this._shouldPerformSelectionOnMobile(e.detail.inputType);
 
 		this.fireDecoratorEvent("input");
 	}
-
-	_shouldPerformSelectionOnMobile(e: CustomEvent<InputEventDetail>): boolean {
-		const eventType = e.detail.inputType;
+	_shouldPerformSelectionOnMobile(inputType: string): boolean {
 		const allowedEventTypes = [
 			"deleteWordBackward",
 			"deleteWordForward",
@@ -310,7 +308,7 @@ class Search extends SearchField {
 			"historyUndo",
 		];
 
-		return !this.noTypeahead && !allowedEventTypes.includes(eventType || "");
+		return !this.noTypeahead && !allowedEventTypes.includes(inputType || "");
 	}
 
 	_handleTypeAhead(item: ISearchSuggestionItem) {
@@ -430,7 +428,11 @@ class Search extends SearchField {
 	_handleInput(e: InputEvent) {
 		super._handleInput(e);
 
-		this.open = !isPhone() && ((e.currentTarget as HTMLInputElement).value.length > 0) && this._popoupHasAnyContent();
+		if (isPhone()) {
+			return;
+		}
+
+		this.open = ((e.currentTarget as HTMLInputElement).value.length > 0) && this._popoupHasAnyContent();
 	}
 
 	_popoupHasAnyContent() {
@@ -606,7 +608,7 @@ class Search extends SearchField {
 	get nativeInput() {
 		const domRef = this.getDomRef();
 
-		return domRef ? domRef.querySelector<HTMLInputElement>(`input`) : null;
+		return domRef?.querySelector<HTMLInputElement>(`input`);
 	}
 
 	get mobileInput() {

packages/fiori/src/SearchField.ts

@@ -111,7 +111,7 @@ class SearchField extends UI5Element {
 	 * Defines whether the component is collapsed.
 	 *
 	 * @default false
-	 * @public
+	 * @private
 	 */
 	@property({ type: Boolean })
 	collapsed = false;
@@ -143,14 +143,6 @@ class SearchField extends UI5Element {
 	@property()
 	accessibleName?: string;
 
-	/**
-	 * Defines the tooltip of the search icon component.
-	 * @public
-	 * @default undefined
-	 */
-	@property()
-	searchIconTooltip?: string;
-
 	/**
 	 * Defines the component scope options.
 	 * @public
@@ -252,7 +244,7 @@ class SearchField extends UI5Element {
 	}
 
 	get _effectiveIconTooltip() {
-		return this.searchIconTooltip || this._translations.searchIcon;
+		return this._translations.searchIcon;
 	}
 
 	captureRef(ref: HTMLElement & { scopeOption?: UI5Element} | null) {

packages/fiori/src/SearchFieldTemplate.tsx

@@ -6,10 +6,18 @@ import type SearchField from "./SearchField.js";
 import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import search from "@ui5/webcomponents-icons/dist/search.js";
 import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+import type SearchScope from "./SearchScope.js";
 
-export default function SearchFieldTemplate(this: SearchField) {
+export type SearchFieldTemplateOptions = {
+	/**
+	 * If set to true, the search field will be expanded.
+	 */
+	forceExpanded?: boolean;
+};
+
+export default function SearchFieldTemplate(this: SearchField, options?: SearchFieldTemplateOptions) {
 	return (
-		this.collapsed ? (
+		!options?.forceExpanded && this.collapsed ? (
 			<Button
 				class="ui5-shell-search-field-button"
 				icon={search}
@@ -23,14 +31,14 @@ export default function SearchFieldTemplate(this: SearchField) {
 		) : (
 			<div class="ui5-search-field-root" role="search" onFocusOut={this._onFocusOutSearch}>
 				<div class="ui5-search-field-content">
-					{!!this.scopes.length &&
+					{!!this.getSlottedNodes<SearchScope>("scopes").length &&
 						<>
 							<Select
 								onChange={this._handleScopeChange}
 								class="sapUiSizeCompact ui5-search-field-select"
 								accessibleName={this._translations.scope}
 								tooltip={this._translations.scope}>
-								{this.scopes.map(scopeOption => {
+								{this.getSlottedNodes<SearchScope>("scopes").map(scopeOption => {
 									return <Option
 										selected={scopeOption.selected}
 										data-ui5-stable={scopeOption.stableDomRef}

packages/fiori/src/SearchPopoverTemplate.tsx

@@ -12,8 +12,9 @@ import InputKeyHint from "@ui5/webcomponents/dist/types/InputKeyHint.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
 import ListAccessibleRole from "@ui5/webcomponents/dist/types/ListAccessibleRole.js";
+import type { JsxTemplate } from "@ui5/webcomponents-base/dist/index.js";
 
-export default function SearchPopoverTemplate(this: Search) {
+export default function SearchPopoverTemplate(this: Search, headerTemplate?: JsxTemplate) {
 	return (
 		<ResponsivePopover
 			hideArrow={true}
@@ -34,7 +35,7 @@ export default function SearchPopoverTemplate(this: Search) {
 			}}
 		>
 
-			{isPhone() ? (
+			{isPhone() ? (headerTemplate ? headerTemplate.call(this) : (
 				<>
 					<header slot="header" class="ui5-search-popup-searching-header">
 						<Input class="ui5-search-popover-search-field" onInput={this._handleMobileInput} showClearIcon={this.showClearIcon} noTypeahead={this.noTypeahead} hint={InputKeyHint.Search} onKeyDown={this._onMobileInputKeydown}>
@@ -45,7 +46,7 @@ export default function SearchPopoverTemplate(this: Search) {
 						<Button design={ButtonDesign.Transparent} onClick={this._handleCancel}>{this.cancelButtonText}</Button>
 					</header>
 				</>
-			) : null }
+			)) : null }
 
 			<main class="ui5-search-popover-content">
 				<slot name="messageArea"></slot>