@ui5/webcomponents-fiori 0.0.0-037d08c67

package/dist/SearchField.js

@@ -0,0 +1,233 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var SearchField_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import SearchFieldTemplate from "./SearchFieldTemplate.js";
+import SearchFieldCss from "./generated/themes/SearchField.css.js";
+import { isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { SEARCH_FIELD_SCOPE_SELECT_LABEL, SEARCH_FIELD_CLEAR_ICON, SEARCH_FIELD_SEARCH_ICON, SEARCH_FIELD_LABEL, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * A `ui5-search-field` is an input field, used for user search.
+ *
+ * The `ui5-search-field` consists of several elements parts:
+ * - Scope - displays a select in the beggining of the component, used for filtering results by their scope.
+ * - Input field - for user input value
+ * - Clear button - gives the possibility for deleting the entered value
+ * - Search button - a primary button for performing search, when the user has entered a search term
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/SearchField.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @private
+ */
+let SearchField = SearchField_1 = class SearchField extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Indicates whether a loading indicator should be shown in the input field.
+         * @default false
+         * @since 2.19.0
+         * @public
+         */
+        this.fieldLoading = false;
+        /**
+         * Defines whether the clear icon of the search will be shown.
+         * @default false
+         * @public
+         */
+        this.showClearIcon = false;
+        /**
+         * Defines whether the component is collapsed.
+         *
+         * @default false
+         * @private
+         */
+        this.collapsed = false;
+        /**
+         * Defines the value of the component.
+         *
+         * **Note:** The property is updated upon typing.
+         * @default ""
+         * @public
+         */
+        this.value = "";
+        /**
+         * @private
+         */
+        this.focusedInnerInput = false;
+        /**
+         * @private
+         */
+        this._effectiveShowClearIcon = false;
+    }
+    onBeforeRendering() {
+        this._effectiveShowClearIcon = (this.showClearIcon && !!this.value);
+    }
+    _onkeydown(e) {
+        if (isEnter(e)) {
+            return this._handleEnter();
+        }
+    }
+    _onfocusin() {
+        this.focusedInnerInput = true;
+    }
+    _onfocusout() {
+        this.focusedInnerInput = false;
+    }
+    _onFocusOutSearch(e) { } // eslint-disable-line
+    _handleEnter() {
+        if (this.value.length) {
+            this._handleSearchEvent();
+        }
+    }
+    _handleInnerClick() { } // eslint-disable-line
+    _handleSearchIconPress() {
+        this._handleSearchEvent();
+        setTimeout(() => {
+            this.focus();
+        }, 0);
+    }
+    _handleSearchEvent() {
+        this.fireDecoratorEvent("search");
+    }
+    _handleInput(e) {
+        this.value = e.target.value;
+        this.fireDecoratorEvent("input");
+    }
+    _handleClear() {
+        this.value = "";
+        this.fireDecoratorEvent("input");
+        this.focus();
+    }
+    _handleScopeChange(e) {
+        const item = e.detail.selectedOption;
+        // Set the scopeValue property if the selected scope has a value defined
+        if (item.value) {
+            this.scopeValue = item.value;
+        }
+        this.fireDecoratorEvent("scope-change", {
+            scope: item.scopeOption,
+        });
+    }
+    get _isSearchIcon() {
+        return this.value.length && this.focusedInnerInput;
+    }
+    get _searchButtonAccessibilityAttributes() {
+        return {
+            expanded: !this.collapsed,
+        };
+    }
+    get _translations() {
+        return {
+            scope: SearchField_1.i18nBundle.getText(SEARCH_FIELD_SCOPE_SELECT_LABEL),
+            searchIcon: SearchField_1.i18nBundle.getText(SEARCH_FIELD_SEARCH_ICON),
+            clearIcon: SearchField_1.i18nBundle.getText(SEARCH_FIELD_CLEAR_ICON),
+            searchFieldAriaLabel: SearchField_1.i18nBundle.getText(SEARCH_FIELD_LABEL),
+        };
+    }
+    get _effectiveIconTooltip() {
+        return this._translations.searchIcon;
+    }
+    captureRef(ref) {
+        if (ref) {
+            ref.scopeOption = this;
+        }
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], SearchField.prototype, "fieldLoading", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchField.prototype, "showClearIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchField.prototype, "collapsed", void 0);
+__decorate([
+    property()
+], SearchField.prototype, "value", void 0);
+__decorate([
+    property()
+], SearchField.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], SearchField.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], SearchField.prototype, "accessibleDescription", void 0);
+__decorate([
+    property()
+], SearchField.prototype, "scopeValue", void 0);
+__decorate([
+    slot({ type: HTMLElement, individualSlots: true, invalidateOnChildChange: true })
+], SearchField.prototype, "scopes", void 0);
+__decorate([
+    slot()
+], SearchField.prototype, "filterButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchField.prototype, "focusedInnerInput", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchField.prototype, "_effectiveShowClearIcon", void 0);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], SearchField, "i18nBundle", void 0);
+SearchField = SearchField_1 = __decorate([
+    customElement({
+        tag: "ui5-search-field",
+        languageAware: true,
+        renderer: jsxRenderer,
+        template: SearchFieldTemplate,
+        styles: [
+            SearchFieldCss,
+        ],
+    })
+    /**
+     * Fired when typing in input or clear icon is pressed.
+     *
+     * @public
+     */
+    ,
+    event("input", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the scope has changed.
+     * @public
+     * @param {HTMLElement} scope The newly selected scope
+     */
+    ,
+    event("scope-change", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the user has triggered search with Enter key or Search Button press.
+     * @public
+     */
+    ,
+    event("search", {
+        bubbles: true,
+        cancelable: true,
+    })
+], SearchField);
+SearchField.define();
+export default SearchField;
+//# sourceMappingURL=SearchField.js.map

package/dist/SearchField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.js","sourceRoot":"","sources":["../src/SearchField.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport SearchFieldTemplate from \"./SearchFieldTemplate.js\";\nimport SearchFieldCss from \"./generated/themes/SearchField.css.js\";\nimport type Button from \"@ui5/webcomponents/dist/Button.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { IOption, SelectChangeEventDetail } from \"@ui5/webcomponents/dist/Select.js\";\n\nimport {\n\tisEnter,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\nimport {\n\tSEARCH_FIELD_SCOPE_SELECT_LABEL,\n\tSEARCH_FIELD_CLEAR_ICON,\n\tSEARCH_FIELD_SEARCH_ICON,\n\tSEARCH_FIELD_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * Interface for components that may be slotted inside a `ui5-search`\n * @public\n */\ninterface ISearchScope extends UI5Element {\n\ttext?: string,\n\tvalue?: string,\n\tstableDomRef: string,\n}\n\ntype SearchFieldScopeSelectionChangeDetails = {\n\tscope: ISearchScope | undefined;\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * A `ui5-search-field` is an input field, used for user search.\n *\n * The `ui5-search-field` consists of several elements parts:\n * - Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n * - Input field - for user input value\n * - Clear button - gives the possibility for deleting the entered value\n * - Search button - a primary button for performing search, when the user has entered a search term\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/SearchField.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @private\n */\n@customElement({\n\ttag: \"ui5-search-field\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: SearchFieldTemplate,\n\tstyles: [\n\t\tSearchFieldCss,\n\t],\n})\n\n/**\n * Fired when typing in input or clear icon is pressed.\n *\n * @public\n */\n@event(\"input\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the scope has changed.\n * @public\n * @param {HTMLElement} scope The newly selected scope\n */\n@event(\"scope-change\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the user has triggered search with Enter key or Search Button press.\n * @public\n */\n@event(\"search\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\nclass SearchField extends UI5Element {\n\teventDetails!: {\n\t\tsearch: object,\n\t\tinput: void,\n\t\t\"scope-change\": SearchFieldScopeSelectionChangeDetails,\n\t}\n\n\t/**\n\t * Indicates whether a loading indicator should be shown in the input field.\n\t * @default false\n\t * @since 2.19.0\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfieldLoading = false\n\n\t/**\n\t * Defines whether the clear icon of the search will be shown.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowClearIcon = false;\n\n\t/**\n\t * Defines whether the component is collapsed.\n\t *\n\t * @default false\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tcollapsed = false;\n\n\t/**\n\t * Defines the value of the component.\n\t *\n\t * **Note:** The property is updated upon typing.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tvalue = \"\";\n\n\t/**\n\t * Defines a short hint intended to aid the user with data entry when the\n\t * component has no value.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tplaceholder?: string;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @public\n\t * @default undefined\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines the accessible ARIA description of the field.\n\t * @public\n\t * @default undefined\n\t */\n\t@property()\n\taccessibleDescription?: string;\n\n\t/**\n\t * Defines the value of the component:\n\t *\n\t * Applications are responsible for setting the correct scope value.\n\t *\n\t * **Note:** If the given value does not match any existing scopes,\n\t * no scope will be selected and the SearchField scope component will be displayed as empty.\n\t * @public\n\t * @default \"\"\n\t * @since 2.18.0\n\t */\n\t@property()\n\tscopeValue?: string;\n\n\t/**\n\t * Defines the component scope options.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, individualSlots: true, invalidateOnChildChange: true })\n\tscopes!: Slot<ISearchScope>;\n\n\t/**\n\t * Defines the filter button slot, used to display an additional filtering button.\n\t * This slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\t *\n\t * **Note:** Scope button and Filter button are mutually exclusive.\n\t * @public\n\t * @since 2.11.0\n\t */\n\t@slot()\n\tfilterButton!: Slot<Button>;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocusedInnerInput = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_effectiveShowClearIcon = false;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\tthis._effectiveShowClearIcon = (this.showClearIcon && !!this.value);\n\t}\n\n\t_onkeydown(e:KeyboardEvent) {\n\t\tif (isEnter(e)) {\n\t\t\treturn this._handleEnter();\n\t\t}\n\t}\n\n\t_onfocusin() {\n\t\tthis.focusedInnerInput = true;\n\t}\n\n\t_onfocusout() {\n\t\tthis.focusedInnerInput = false;\n\t}\n\n\t_onFocusOutSearch(e: FocusEvent) {} // eslint-disable-line\n\n\t_handleEnter() {\n\t\tif (this.value.length) {\n\t\t\tthis._handleSearchEvent();\n\t\t}\n\t}\n\n\t_handleInnerClick() {} // eslint-disable-line\n\n\t_handleSearchIconPress() {\n\t\tthis._handleSearchEvent();\n\n\t\tsetTimeout(() => {\n\t\t\tthis.focus();\n\t\t}, 0);\n\t}\n\n\t_handleSearchEvent() {\n\t\tthis.fireDecoratorEvent(\"search\");\n\t}\n\n\t_handleInput(e: InputEvent) {\n\t\tthis.value = (e.target as HTMLInputElement).value;\n\n\t\tthis.fireDecoratorEvent(\"input\");\n\t}\n\n\t_handleClear() {\n\t\tthis.value = \"\";\n\t\tthis.fireDecoratorEvent(\"input\");\n\n\t\tthis.focus();\n\t}\n\n\t_handleScopeChange(e: CustomEvent<SelectChangeEventDetail>) {\n\t\tconst item = e.detail.selectedOption as IOption & { scopeOption: ISearchScope };\n\n\t\t// Set the scopeValue property if the selected scope has a value defined\n\t\tif (item.value) {\n\t\t\tthis.scopeValue = item.value;\n\t\t}\n\n\t\tthis.fireDecoratorEvent(\"scope-change\", {\n\t\t\tscope: item.scopeOption,\n\t\t});\n\t}\n\n\tget _isSearchIcon() {\n\t\treturn this.value.length && this.focusedInnerInput;\n\t}\n\n\tget _searchButtonAccessibilityAttributes() {\n\t\treturn {\n\t\t\texpanded: !this.collapsed,\n\t\t};\n\t}\n\n\tget _translations() {\n\t\treturn {\n\t\t\tscope: SearchField.i18nBundle.getText(SEARCH_FIELD_SCOPE_SELECT_LABEL),\n\t\t\tsearchIcon: SearchField.i18nBundle.getText(SEARCH_FIELD_SEARCH_ICON),\n\t\t\tclearIcon: SearchField.i18nBundle.getText(SEARCH_FIELD_CLEAR_ICON),\n\t\t\tsearchFieldAriaLabel: SearchField.i18nBundle.getText(SEARCH_FIELD_LABEL),\n\t\t};\n\t}\n\n\tget _effectiveIconTooltip() {\n\t\treturn this._translations.searchIcon;\n\t}\n\n\tcaptureRef(ref: HTMLElement & { scopeOption?: UI5Element} | null) {\n\t\tif (ref) {\n\t\t\tref.scopeOption = this;\n\t\t}\n\t}\n}\n\nSearchField.define();\n\nexport default SearchField;\n\nexport type { ISearchScope, SearchFieldScopeSelectionChangeDetails };\n"]}

package/dist/SearchFieldTemplate.d.ts

@@ -0,0 +1,8 @@
+import type SearchField from "./SearchField.js";
+export type SearchFieldTemplateOptions = {
+    /**
+     * If set to true, the search field will be expanded.
+     */
+    forceExpanded?: boolean;
+};
+export default function SearchFieldTemplate(this: SearchField, options?: SearchFieldTemplateOptions): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/SearchFieldTemplate.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Option from "@ui5/webcomponents/dist/Option.js";
+import Select from "@ui5/webcomponents/dist/Select.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 BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+export default function SearchFieldTemplate(options) {
+    return (!options?.forceExpanded && this.collapsed ? (_jsx(Button, { class: "ui5-shell-search-field-button", icon: search, design: ButtonDesign.Transparent, "data-sap-focus-ref": true, loading: this.fieldLoading, onClick: this._handleSearchIconPress, tooltip: this._effectiveIconTooltip, accessibleName: this._effectiveIconTooltip, accessibilityAttributes: this._searchButtonAccessibilityAttributes })) : (_jsx(BusyIndicator, { class: "ui5-search-field-busy-indicator", active: this.fieldLoading, children: _jsx("div", { class: "ui5-search-field-root", role: "search", onFocusOut: this._onFocusOutSearch, children: _jsxs("div", { class: "ui5-search-field-content", children: [this.scopes?.length ? (_jsxs(_Fragment, { children: [_jsx(Select, { onChange: this._handleScopeChange, class: "ui5-search-field-select", accessibleName: this._translations.scope, tooltip: this._translations.scope, value: this.scopeValue, children: this.scopes.map(scopeOption => (_jsx(Option, { value: scopeOption.value, "data-ui5-stable": scopeOption.stableDomRef, ref: this.captureRef.bind(scopeOption), children: scopeOption.text }))) }), _jsx("div", { class: "ui5-search-field-separator" })] })) : this.filterButton?.length ? (_jsxs(_Fragment, { children: [_jsx("div", { class: "ui5-filter-wrapper", style: "display: contents", children: _jsx("slot", { name: "filterButton" }) }), _jsx("div", { class: "ui5-search-field-separator" })] })) : null, _jsx("input", { class: "ui5-search-field-inner-input", role: "searchbox", "aria-description": this.accessibleDescription, "aria-label": this.accessibleName || this._translations.searchFieldAriaLabel, "aria-autocomplete": "both", "aria-controls": "ui5-search-list", value: this.value, placeholder: this.placeholder, "data-sap-focus-ref": true, onInput: this._handleInput, onFocusIn: this._onfocusin, onFocusOut: this._onfocusout, onKeyDown: this._onkeydown, onClick: this._handleInnerClick }), this._effectiveShowClearIcon &&
+                        _jsx(Icon, { class: "ui5-shell-search-field-icon", name: decline, showTooltip: true, accessibleName: this._translations.clearIcon, onClick: this._handleClear }), _jsx(Icon, { class: {
+                            "ui5-shell-search-field-icon": true,
+                            "ui5-shell-search-field-search-icon": this._isSearchIcon,
+                        }, name: search, showTooltip: true, accessibleName: this._effectiveIconTooltip, onClick: this._handleSearchIconPress })] }) }) })));
+}
+//# sourceMappingURL=SearchFieldTemplate.js.map

package/dist/SearchFieldTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchFieldTemplate.js","sourceRoot":"","sources":["../src/SearchFieldTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import Button from \"@ui5/webcomponents/dist/Button.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Option from \"@ui5/webcomponents/dist/Option.js\";\nimport Select from \"@ui5/webcomponents/dist/Select.js\";\nimport type SearchField from \"./SearchField.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport search from \"@ui5/webcomponents-icons/dist/search.js\";\nimport ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\n\nexport type SearchFieldTemplateOptions = {\n\t/**\n\t * If set to true, the search field will be expanded.\n\t */\n\tforceExpanded?: boolean;\n};\n\nexport default function SearchFieldTemplate(this: SearchField, options?: SearchFieldTemplateOptions) {\n\treturn (\n\t\t!options?.forceExpanded && this.collapsed ? (\n\t\t\t<Button\n\t\t\t\tclass=\"ui5-shell-search-field-button\"\n\t\t\t\ticon={search}\n\t\t\t\tdesign={ButtonDesign.Transparent}\n\t\t\t\tdata-sap-focus-ref\n\t\t\t\tloading={this.fieldLoading}\n\t\t\t\tonClick={this._handleSearchIconPress}\n\t\t\t\ttooltip={this._effectiveIconTooltip}\n\t\t\t\taccessibleName={this._effectiveIconTooltip}\n\t\t\t\taccessibilityAttributes={this._searchButtonAccessibilityAttributes}\n\t\t\t></Button>\n\t\t) : (\n\t\t\t<BusyIndicator class=\"ui5-search-field-busy-indicator\" active={this.fieldLoading}>\n\t\t\t\t<div class=\"ui5-search-field-root\" role=\"search\" onFocusOut={this._onFocusOutSearch}>\n\t\t\t\t\t<div class=\"ui5-search-field-content\">\n\t\t\t\t\t\t{this.scopes?.length ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\t\tonChange={this._handleScopeChange}\n\t\t\t\t\t\t\t\t\tclass=\"ui5-search-field-select\"\n\t\t\t\t\t\t\t\t\taccessibleName={this._translations.scope}\n\t\t\t\t\t\t\t\t\ttooltip={this._translations.scope}\n\t\t\t\t\t\t\t\t\tvalue={this.scopeValue}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{this.scopes.map(scopeOption => (\n\t\t\t\t\t\t\t\t\t\t<Option\n\t\t\t\t\t\t\t\t\t\t\tvalue={scopeOption.value}\n\t\t\t\t\t\t\t\t\t\t\tdata-ui5-stable={scopeOption.stableDomRef}\n\t\t\t\t\t\t\t\t\t\t\tref={this.captureRef.bind(scopeOption)}\n\t\t\t\t\t\t\t\t\t\t>{scopeOption.text}\n\t\t\t\t\t\t\t\t\t\t</Option>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t<div class=\"ui5-search-field-separator\"></div>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : this.filterButton?.length ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<div class=\"ui5-filter-wrapper\" style=\"display: contents\">\n\t\t\t\t\t\t\t\t\t<slot name=\"filterButton\"></slot>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"ui5-search-field-separator\"></div>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : null}\n\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclass=\"ui5-search-field-inner-input\"\n\t\t\t\t\t\t\trole=\"searchbox\"\n\t\t\t\t\t\t\taria-description={this.accessibleDescription}\n\t\t\t\t\t\t\taria-label={this.accessibleName || this._translations.searchFieldAriaLabel}\n\t\t\t\t\t\t\taria-autocomplete=\"both\"\n\t\t\t\t\t\t\taria-controls=\"ui5-search-list\"\n\t\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t\t\t\tonInput={this._handleInput}\n\t\t\t\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\t\t\t\tonFocusOut={this._onfocusout}\n\t\t\t\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\t\t\t\tonClick={this._handleInnerClick} />\n\n\t\t\t\t\t\t{this._effectiveShowClearIcon &&\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\tclass=\"ui5-shell-search-field-icon\"\n\t\t\t\t\t\t\t\tname={decline}\n\t\t\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\t\t\taccessibleName={this._translations.clearIcon}\n\t\t\t\t\t\t\t\tonClick={this._handleClear}\n\t\t\t\t\t\t\t></Icon>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\"ui5-shell-search-field-icon\": true,\n\t\t\t\t\t\t\t\t\"ui5-shell-search-field-search-icon\": this._isSearchIcon,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tname={search}\n\t\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\t\taccessibleName={this._effectiveIconTooltip}\n\t\t\t\t\t\t\tonClick={this._handleSearchIconPress}\n\t\t\t\t\t\t></Icon>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</BusyIndicator>\n\t\t)\n\t);\n}\n"]}

package/dist/SearchItem.d.ts

@@ -0,0 +1,99 @@
+import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * A `ui5-search-item` is a list item, used for displaying search suggestions
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/SearchItem.js";`
+ *
+ * @constructor
+ * @extends ListItemBase
+ * @public
+ * @since 2.9.0
+ * @experimental
+ */
+declare class SearchItem extends ListItemBase {
+    eventDetails: ListItemBase["eventDetails"] & {
+        "delete": void;
+    };
+    /**
+     * Defines the heading text of the search item.
+     * @default undefined
+     * @public
+     */
+    text?: string;
+    /**
+     * Defines the description that appears right under the item text, if available.
+     * @default undefined
+     * @public
+     * @since 2.12.0
+     */
+    description?: string;
+    /**
+     * Defines the icon name of the search item.
+     * **Note:** If provided, the image slot will be ignored.
+     * @default undefined
+     * @public
+     */
+    icon?: string;
+    /**
+     * Defines whether the search item is selected.
+     * @default false
+     * @public
+     */
+    selected: boolean;
+    /**
+     * Defines whether the search item is deletable.
+     * @default false
+     * @public
+     */
+    deletable: boolean;
+    /**
+     * Defines the scope of the search item
+     * @default undefined
+     * @public
+     */
+    scopeName?: string;
+    highlightText: string;
+    /**
+     * **Note:** While the slot allows the option of setting a custom avatar, to comply with the
+     * design guidelines, use the `ui5-avatar` with size - XS.
+     *
+     * @public
+     * @since 2.12.0
+     */
+    image: Slot<HTMLElement>;
+    /**
+     * Defines the actionable elements.
+     * This slot allows placing additional interactive elements (such as buttons, icons, or tags)
+     * next to the delete button, providing flexible customization for various user actions.
+     *
+     * **Note:** While the slot is flexible, for consistency with design guidelines,
+     * it's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements.
+     *
+     * @public
+     * @since 2.16.0
+     */
+    actions: Slot<HTMLElement>;
+    _markupText: string;
+    static i18nBundle: I18nBundle;
+    _onfocusin(e: FocusEvent): void;
+    _onfocusout(): void;
+    _onkeydown(e: KeyboardEvent): Promise<void>;
+    /**
+     * Handles manual tab navigation between action items and delete button with focus looping
+     */
+    _handleTabNavigation(e: KeyboardEvent): boolean;
+    _onDeleteButtonClick(): void;
+    _onDeleteButtonKeyDown(e: KeyboardEvent): void;
+    onBeforeRendering(): void;
+    get _deleteButtonTooltip(): string;
+    get hasActions(): boolean;
+}
+export default SearchItem;

package/dist/SearchItem.js

@@ -0,0 +1,216 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var SearchItem_1;
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import SearchItemTemplate from "./SearchItemTemplate.js";
+import SearchItemCss from "./generated/themes/SearchItem.css.js";
+import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import { SEARCH_ITEM_DELETE_BUTTON_TOOLTIP, } from "./generated/i18n/i18n-defaults.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
+import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
+import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
+import { isSpace, isEnter, isF2, isTabNext, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { i18n } from "@ui5/webcomponents-base/dist/decorators.js";
+// @ts-expect-error
+import encodeXML from "@ui5/webcomponents-base/dist/sap/base/security/encodeXML.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * A `ui5-search-item` is a list item, used for displaying search suggestions
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/SearchItem.js";`
+ *
+ * @constructor
+ * @extends ListItemBase
+ * @public
+ * @since 2.9.0
+ * @experimental
+ */
+let SearchItem = SearchItem_1 = class SearchItem extends ListItemBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines whether the search item is selected.
+         * @default false
+         * @public
+         */
+        this.selected = false;
+        /**
+         * Defines whether the search item is deletable.
+         * @default false
+         * @public
+         */
+        this.deletable = false;
+        this.highlightText = "";
+        this._markupText = "";
+    }
+    _onfocusin(e) {
+        super._onfocusin(e);
+        this.selected = true;
+    }
+    _onfocusout() {
+        this.selected = false;
+    }
+    async _onkeydown(e) {
+        // Handle manual tab navigation between action items
+        if (isTabNext(e) || isTabPrevious(e)) {
+            const handled = this._handleTabNavigation(e);
+            if (handled) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+        }
+        // Call super for other key handling
+        super._onkeydown(e);
+        // Handle space/enter when focus is within action items
+        if (this.getFocusDomRef().matches(":has(:focus-within)")) {
+            if (isSpace(e) || isEnter(e)) {
+                e.preventDefault();
+                return;
+            }
+        }
+        // Handle F2 for focus navigation
+        if (isF2(e)) {
+            e.stopImmediatePropagation();
+            const activeElement = getActiveElement();
+            const focusDomRef = this.getFocusDomRef();
+            if (!focusDomRef) {
+                return;
+            }
+            if (activeElement === focusDomRef) {
+                const firstFocusable = await getFirstFocusableElement(focusDomRef);
+                firstFocusable?.focus();
+            }
+            else {
+                focusDomRef.focus();
+            }
+        }
+    }
+    /**
+     * Handles manual tab navigation between action items and delete button with focus looping
+     */
+    _handleTabNavigation(e) {
+        const focusDomRef = this.getFocusDomRef();
+        if (!focusDomRef) {
+            return false;
+        }
+        const tabbableElements = getTabbableElements(focusDomRef);
+        if (tabbableElements.length === 0) {
+            return false;
+        }
+        const activeElement = getActiveElement();
+        const currentIndex = tabbableElements.indexOf(activeElement);
+        if (currentIndex === -1) {
+            return false;
+        }
+        let nextElement = null;
+        if (isTabNext(e)) {
+            if (currentIndex < tabbableElements.length - 1) {
+                nextElement = tabbableElements[currentIndex + 1];
+            }
+            else {
+                // Loop to first element when at the last element
+                nextElement = tabbableElements[0];
+            }
+        }
+        else if (isTabPrevious(e)) {
+            if (currentIndex > 0) {
+                nextElement = tabbableElements[currentIndex - 1];
+            }
+            else {
+                // Loop to last element when at the first element
+                nextElement = tabbableElements[tabbableElements.length - 1];
+            }
+        }
+        if (nextElement) {
+            nextElement.focus();
+            return true;
+        }
+        return false;
+    }
+    _onDeleteButtonClick() {
+        this.fireDecoratorEvent("delete");
+    }
+    _onDeleteButtonKeyDown(e) {
+        if (isSpace(e) || isEnter(e)) {
+            this.fireDecoratorEvent("delete");
+        }
+    }
+    onBeforeRendering() {
+        super.onBeforeRendering();
+        // bold the matched text
+        this._markupText = this.highlightText ? generateHighlightedMarkup((this.text || ""), this.highlightText) : encodeXML(this.text || "");
+    }
+    get _deleteButtonTooltip() {
+        return SearchItem_1.i18nBundle.getText(SEARCH_ITEM_DELETE_BUTTON_TOOLTIP);
+    }
+    get hasActions() {
+        return !!this.actions.length;
+    }
+};
+__decorate([
+    property()
+], SearchItem.prototype, "text", void 0);
+__decorate([
+    property()
+], SearchItem.prototype, "description", void 0);
+__decorate([
+    property()
+], SearchItem.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchItem.prototype, "deletable", void 0);
+__decorate([
+    property()
+], SearchItem.prototype, "scopeName", void 0);
+__decorate([
+    property()
+], SearchItem.prototype, "highlightText", void 0);
+__decorate([
+    slot()
+], SearchItem.prototype, "image", void 0);
+__decorate([
+    slot()
+], SearchItem.prototype, "actions", void 0);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], SearchItem, "i18nBundle", void 0);
+SearchItem = SearchItem_1 = __decorate([
+    customElement({
+        tag: "ui5-search-item",
+        languageAware: true,
+        renderer: jsxRenderer,
+        template: SearchItemTemplate,
+        styles: [
+            ListItemBase.styles,
+            SearchItemCss,
+        ],
+    })
+    /**
+     * Fired when delete button is pressed.
+     *
+     * @public
+     */
+    ,
+    event("delete")
+], SearchItem);
+SearchItem.define();
+export default SearchItem;
+//# sourceMappingURL=SearchItem.js.map

package/dist/SearchItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchItem.js","sourceRoot":"","sources":["../src/SearchItem.ts"],"names":[],"mappings":"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","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport ListItemBase from \"@ui5/webcomponents/dist/ListItemBase.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport SearchItemTemplate from \"./SearchItemTemplate.js\";\nimport SearchItemCss from \"./generated/themes/SearchItem.css.js\";\nimport generateHighlightedMarkup from \"@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport {\n\tSEARCH_ITEM_DELETE_BUTTON_TOOLTIP,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport { getFirstFocusableElement } from \"@ui5/webcomponents-base/dist/util/FocusableElements.js\";\nimport { getTabbableElements } from \"@ui5/webcomponents-base/dist/util/TabbableElements.js\";\nimport {\n\tisSpace,\n\tisEnter,\n\tisF2,\n\tisTabNext,\n\tisTabPrevious,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { i18n } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\n// @ts-expect-error\nimport encodeXML from \"@ui5/webcomponents-base/dist/sap/base/security/encodeXML.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n/**\n * @class\n *\n * ### Overview\n *\n * A `ui5-search-item` is a list item, used for displaying search suggestions\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/SearchItem.js\";`\n *\n * @constructor\n * @extends ListItemBase\n * @public\n * @since 2.9.0\n * @experimental\n */\n@customElement({\n\ttag: \"ui5-search-item\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: SearchItemTemplate,\n\tstyles: [\n\t\tListItemBase.styles,\n\t\tSearchItemCss,\n\t],\n})\n\n/**\n * Fired when delete button is pressed.\n *\n * @public\n */\n@event(\"delete\")\n\nclass SearchItem extends ListItemBase {\n\teventDetails!: ListItemBase[\"eventDetails\"] & {\n\t\t\"delete\": void,\n\t};\n\t/**\n\t * Defines the heading text of the search item.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines the description that appears right under the item text, if available.\n\t * @default undefined\n\t * @public\n\t * @since 2.12.0\n\t */\n\t@property()\n\tdescription?: string;\n\n\t/**\n\t * Defines the icon name of the search item.\n\t * **Note:** If provided, the image slot will be ignored.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines whether the search item is selected.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n\n\t/**\n\t * Defines whether the search item is deletable.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdeletable = false;\n\n\t/**\n\t * Defines the scope of the search item\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tscopeName?: string;\n\n\t@property()\n\thighlightText = \"\";\n\n\t/**\n\t * **Note:** While the slot allows the option of setting a custom avatar, to comply with the\n\t * design guidelines, use the `ui5-avatar` with size - XS.\n\t *\n\t * @public\n\t * @since 2.12.0\n\t */\n\t@slot()\n\timage!: Slot<HTMLElement>;\n\n\t/**\n\t * Defines the actionable elements.\n\t * This slot allows placing additional interactive elements (such as buttons, icons, or tags)\n\t * next to the delete button, providing flexible customization for various user actions.\n\t *\n\t * **Note:** While the slot is flexible, for consistency with design guidelines,\n\t * it's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements.\n\t *\n\t * @public\n\t * @since 2.16.0\n\t */\n\t@slot()\n\tactions!: Slot<HTMLElement>;\n\n\t_markupText = \"\";\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_onfocusin(e: FocusEvent) {\n\t\tsuper._onfocusin(e);\n\n\t\tthis.selected = true;\n\t}\n\n\t_onfocusout() {\n\t\tthis.selected = false;\n\t}\n\n\tasync _onkeydown(e: KeyboardEvent) {\n\t\t// Handle manual tab navigation between action items\n\t\tif (isTabNext(e) || isTabPrevious(e)) {\n\t\t\tconst handled = this._handleTabNavigation(e);\n\t\t\tif (handled) {\n\t\t\t\te.preventDefault();\n\t\t\t\te.stopPropagation();\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// Call super for other key handling\n\t\tsuper._onkeydown(e);\n\n\t\t// Handle space/enter when focus is within action items\n\t\tif (this.getFocusDomRef()!.matches(\":has(:focus-within)\")) {\n\t\t\tif (isSpace(e) || isEnter(e)) {\n\t\t\t\te.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// Handle F2 for focus navigation\n\t\tif (isF2(e)) {\n\t\t\te.stopImmediatePropagation();\n\t\t\tconst activeElement = getActiveElement();\n\t\t\tconst focusDomRef = this.getFocusDomRef();\n\n\t\t\tif (!focusDomRef) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (activeElement === focusDomRef) {\n\t\t\t\tconst firstFocusable = await getFirstFocusableElement(focusDomRef);\n\t\t\t\tfirstFocusable?.focus();\n\t\t\t} else {\n\t\t\t\tfocusDomRef.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Handles manual tab navigation between action items and delete button with focus looping\n\t */\n\t_handleTabNavigation(e: KeyboardEvent): boolean {\n\t\tconst focusDomRef = this.getFocusDomRef();\n\t\tif (!focusDomRef) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst tabbableElements = getTabbableElements(focusDomRef);\n\t\tif (tabbableElements.length === 0) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst activeElement = getActiveElement() as HTMLElement;\n\t\tconst currentIndex = tabbableElements.indexOf(activeElement);\n\n\t\tif (currentIndex === -1) {\n\t\t\treturn false;\n\t\t}\n\n\t\tlet nextElement: HTMLElement | null = null;\n\n\t\tif (isTabNext(e)) {\n\t\t\tif (currentIndex < tabbableElements.length - 1) {\n\t\t\t\tnextElement = tabbableElements[currentIndex + 1];\n\t\t\t} else {\n\t\t\t\t// Loop to first element when at the last element\n\t\t\t\tnextElement = tabbableElements[0];\n\t\t\t}\n\t\t} else if (isTabPrevious(e)) {\n\t\t\tif (currentIndex > 0) {\n\t\t\t\tnextElement = tabbableElements[currentIndex - 1];\n\t\t\t} else {\n\t\t\t\t// Loop to last element when at the first element\n\t\t\t\tnextElement = tabbableElements[tabbableElements.length - 1];\n\t\t\t}\n\t\t}\n\n\t\tif (nextElement) {\n\t\t\tnextElement.focus();\n\t\t\treturn true;\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t_onDeleteButtonClick() {\n\t\tthis.fireDecoratorEvent(\"delete\");\n\t}\n\n\t_onDeleteButtonKeyDown(e: KeyboardEvent) {\n\t\tif (isSpace(e) || isEnter(e)) {\n\t\t\tthis.fireDecoratorEvent(\"delete\");\n\t\t}\n\t}\n\n\tonBeforeRendering(): void {\n\t\tsuper.onBeforeRendering();\n\n\t\t// bold the matched text\n\t\tthis._markupText = this.highlightText ? generateHighlightedMarkup((this.text || \"\"), this.highlightText) : encodeXML(this.text || \"\");\n\t}\n\n\tget _deleteButtonTooltip() {\n\t\treturn SearchItem.i18nBundle.getText(SEARCH_ITEM_DELETE_BUTTON_TOOLTIP);\n\t}\n\n\tget hasActions() {\n\t\treturn !!this.actions.length;\n\t}\n}\n\nSearchItem.define();\n\nexport default SearchItem;\n"]}

package/dist/SearchItemGroup.d.ts

@@ -0,0 +1,17 @@
+import ListItemGroup from "@ui5/webcomponents/dist/ListItemGroup.js";
+import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
+/**
+ * @class
+ * The `ui5-search-item-group` is type of suggestion item,
+ * that can be used to split the `ui5-search-item` suggestions into groups.
+ * @constructor
+ * @extends ListItemGroup
+ * @public
+ * @since 2.9.0
+ * @experimental
+ */
+declare class SearchItemGroup extends ListItemGroup {
+    get isGroupItem(): boolean;
+    getGroupHeaderWrapping(): WrappingType;
+}
+export default SearchItemGroup;