npm - @zanichelli/zanichelli-it-frontend-kit - Versions diffs - 1.3.0-RC5 → 1.4.0-RC1 - Mend

@zanichelli/zanichelli-it-frontend-kit 1.3.0-RC5 → 1.4.0-RC1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/dist/collection/components/menubar/search-form/search-form.js CHANGED Viewed

@@ -1,45 +1,80 @@
-import { h } from "@stencil/core";
-import { containsTarget } from "../../../utils";
+import { h, Host } from "@stencil/core";
+import { containsTarget, isArrowDownKey, isArrowUpKey, isEscKey, isTabKey } from "../../../utils";
+import { getSubjectsByArea, SearchEnv } from "../../../utils/subjects.api";
+import { buildSuggestions } from "./suggestions";
 export class ZanitSearchForm {
     formElement;
+    subjectsByArea = {};
+    timer;
     host;
     /** Indicates whether the searchbar is visible and usable. */
     showSearchbar = false;
     /** Search query to apply. */
     _searchQuery = undefined;
+    /** Search suggestions to show in the autocomplete dropdown. */
+    suggestions = [];
+    /** Active suggestion - used for keyboard navigation */
+    activeSuggestion = '';
+    /** Show suggestions list */
+    showSuggestions = false;
     /** Initial search query */
     searchQuery = undefined;
+    /** Environment for search suggestions */
+    searchEnv = SearchEnv.PROD;
+    /** Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI").  */
+    searchArea;
     onSearchQueryChange() {
         this._searchQuery = this.searchQuery;
         if (this.searchQuery) {
             this.openSearchbar();
         }
+        this.resetSuggestions();
+    }
+    onSearchAreaChange() {
+        this.resetSuggestions();
+    }
+    onShowSearchbarChange() {
+        if (!this.showSearchbar) {
+            this.showSuggestions = false;
+        }
+    }
+    onShowSuggestionsChange() {
+        this.activeSuggestion = '';
     }
     /** Emitted on search form submission. */
     search;
     resetSearch;
     async connectedCallback() {
+        this.subjectsByArea = await getSubjectsByArea(this.searchEnv);
         this.showSearchbar = !!this.searchQuery;
         this._searchQuery = this.searchQuery;
     }
     /** Close open searchbar when clicking outside. */
     handleOutsideClick(event) {
-        if (this.showSearchbar && this.formElement && !containsTarget(this.formElement, event)) {
+        if (this.showSearchbar && this.host && !containsTarget(this.host, event)) {
             this.showSearchbar = false;
         }
     }
-    /** Close the menu when pressing Escape or Tab. */
-    handleKeydown(event) {
-        switch (event.key) {
-            case 'Escape':
-                this.showSearchbar = false;
-                break;
-            case 'Tab':
-                if (containsTarget(this.host, event)) {
-                    break;
-                }
-                this.showSearchbar = false;
-                break;
+    /** Close the searchbar/suggestions when pressing Escape. */
+    handleEsc(event) {
+        if (!isEscKey(event)) {
+            return;
+        }
+        if (this.showSuggestions) {
+            this.showSuggestions = false;
+        }
+        else {
+            this.showSearchbar = false;
+        }
+    }
+    /** Close the searchbar/suggestions when pressing Tab. */
+    handleTab(event) {
+        if (!isTabKey(event)) {
+            return;
+        }
+        this.showSuggestions = false;
+        if (!containsTarget(this.host, event)) {
+            this.showSearchbar = false;
         }
     }
     openSearchbar() {
@@ -53,27 +88,108 @@ export class ZanitSearchForm {
         this.searchQuery = undefined;
         this.resetSearch.emit();
     }
+    resetSuggestions() {
+        this.suggestions = [];
+        this.showSuggestions = false;
+    }
     handleInputChange(event) {
         this._searchQuery = event.target.value;
         if (!this._searchQuery) {
             this.searchQuery = undefined;
         }
+        this.updateSuggestions();
+    }
+    updateSuggestions() {
+        clearTimeout(this.timer);
+        const query = (this._searchQuery || '').trim();
+        if (query.length < 3) {
+            this.resetSuggestions();
+            return;
+        }
+        this.timer = setTimeout(() => {
+            this.resetSuggestions();
+            this.suggestions = buildSuggestions(query, this.subjectsByArea, this.searchArea?.toUpperCase());
+            this.showSuggestions = true;
+        }, 300);
     }
     onSearchSubmit(event) {
         event.preventDefault();
         if (!this._searchQuery) {
             return;
         }
+        if (this.activeSuggestion) {
+            const suggestion = this.suggestions.find((s) => s.id === this.activeSuggestion);
+            if (suggestion) {
+                this.submitSuggestionSearch(suggestion);
+                this.showSuggestions = false;
+                return;
+            }
+        }
         this.showSearchbar = false;
-        const searchEv = this.search.emit({ query: this._searchQuery });
+        const searchEv = this.search.emit({ query: this._searchQuery, area: this.searchArea });
         // do not submit the form if the event default behavior was prevented
         if (searchEv.defaultPrevented) {
             return;
         }
         this.formElement.submit();
     }
+    submitSuggestionSearch(suggestion) {
+        const ev = this.search.emit({
+            user_query: suggestion.user_query,
+            query: suggestion.query,
+            area: suggestion.area,
+            subject: suggestion.subject,
+        });
+        if (!ev.defaultPrevented) {
+            window.location.href = suggestion.url;
+        }
+    }
+    handleSuggestionsNav(event) {
+        if (!isArrowDownKey(event) && !isArrowUpKey(event)) {
+            return;
+        }
+        if (!this.suggestions.length) {
+            return;
+        }
+        const options = this.suggestions.map((o) => o.id);
+        if (!options.length) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.showSuggestions) {
+            this.showSuggestions = true;
+        }
+        let nextId = null;
+        const firstId = options[0];
+        const lastId = options[options.length - 1];
+        const currOption = options.indexOf(this.activeSuggestion);
+        if (currOption < 0) {
+            nextId = isArrowDownKey(event) ? firstId : lastId;
+        }
+        else {
+            if (isArrowDownKey(event)) {
+                nextId = options[currOption + 1] || lastId;
+            }
+            else {
+                nextId = options[currOption - 1] || firstId;
+            }
+        }
+        this.activeSuggestion = nextId;
+    }
+    renderSuggestions() {
+        return (h("div", { class: { 'suggestions-wrapper': true, 'hidden': !this.showSuggestions || !this.suggestions.length }, onPointerOver: (e) => e.preventDefault() }, h("div", { id: "search-suggestions", class: "suggestions", role: "listbox", "aria-label": "Seleziona tra i suggerimenti" }, this.suggestions.map((suggestion, k) => {
+            return (h("span", { key: k, innerHTML: suggestion.html_label, id: suggestion.id, class: "suggestion", role: "option", "aria-label": suggestion.label, "aria-selected": this.activeSuggestion === suggestion.id ? 'true' : undefined, onClick: () => this.submitSuggestionSearch(suggestion) }));
+        }))));
+    }
     render() {
-        return (h("form", { key: 'e1d177efbec2aea39cd30cfc8f02fe4e9f5e82d9', class: { 'searchbar': true, 'searchbar-open': this.showSearchbar }, ref: (el) => (this.formElement = el), role: "search", "aria-label": "Cerca nel sito", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), onReset: () => this.resetSearchQuery() }, h("div", { key: '49aeaa97516d5782e1fcf866a5526ff19f8b0c14', class: "input-wrapper", role: "none" }, this.searchQuery && (h("button", { key: '61ec6636b5efd875bcf879b28894ffd1cf8ac802', type: "reset", "aria-label": "Svuota campo di ricerca", disabled: !this.showSearchbar, "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0 }, h("z-icon", { key: 'a896ac0e6ae2762e9d5dbb0351634505b519a684', name: "multiply-circled" }))), h("input", { key: '3ab6655ef669a6c30b5bbe547884c680284d7f14', id: "searchbar-input", name: "q", type: "search", disabled: !this.showSearchbar, placeholder: "Cerca per parola chiave o ISBN", onInput: (event) => this.handleInputChange(event), value: this.searchQuery, required: true, "aria-label": "Cerca per parola chiave o ISBN", "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0 })), h("button", { key: '3df725da35664493fe70a15ea39184ab00b37e32', class: "searchbar-button", "aria-label": this.showSearchbar ? 'Esegui ricerca' : 'Apri il campo di ricerca', "aria-controls": "searchbar-input", type: this.showSearchbar ? 'submit' : 'button', onClick: () => this.openSearchbar() }, this.showSearchbar ? null : h("span", { class: "searchbar-button-label" }, "Cerca"), h("z-icon", { key: '8f6cfd25fbacbc04b7bc060470667eb9b2a45179', name: "search" }))));
+        return (h(Host, { key: '5d4462489f2dd40636fd2bb025cb468bc4c5616e' }, h("form", { key: '21b2841bb46a3a839a4e4b4443635d48f70b4ae4', class: { 'searchbar': true, 'searchbar-open': this.showSearchbar }, ref: (el) => (this.formElement = el), role: "search", "aria-label": "Cerca nel sito", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), onReset: () => this.resetSearchQuery() }, !!this.searchArea && (h("input", { key: '67a60d9d8995e2e06ce1c27e3946158e55a142b0', type: "hidden", name: "area", value: this.searchArea })), h("div", { key: '09cecaba254019023f8206fa777bda6273cbeb15', class: "input-wrapper", role: "none" }, this.searchQuery && (h("button", { key: 'b50b141eba8ced81b4c97ffb9ed4547eada6494f', type: "reset", "aria-label": "Svuota campo di ricerca", disabled: !this.showSearchbar, "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0 }, h("z-icon", { key: 'b9a46579d4ae8e7850f38758b12eb0ec1aba731f', name: "multiply-circled" }))), h("input", { key: '3fbae3a688e7c775a5c96df4d1390f89da032f5b', id: "searchbar-input", name: "q", type: "search", disabled: !this.showSearchbar, placeholder: "Cerca per parola chiave o ISBN", value: this.searchQuery, required: true, autocomplete: "off", role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.showSuggestions ? 'true' : 'false', "aria-controls": "search-suggestions", "aria-activedescendant": this.activeSuggestion, "aria-label": "Cerca per parola chiave o ISBN", "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0, onInput: (event) => this.handleInputChange(event), onKeyDown: (e) => {
+                // INFO: prevent ESC from clearing input
+                if (isEscKey(e)) {
+                    e.preventDefault();
+                }
+                this.handleSuggestionsNav(e);
+            } })), h("button", { key: '996e557aef2f19dedc0d4dc76df392336ce85af3', class: "searchbar-button", "aria-label": this.showSearchbar ? 'Esegui ricerca' : 'Apri il campo di ricerca', "aria-controls": "searchbar-input", type: this.showSearchbar ? 'submit' : 'button', onClick: () => this.openSearchbar() }, this.showSearchbar ? null : h("span", { class: "searchbar-button-label" }, "Cerca"), h("z-icon", { key: '85eac62f283fd347316f7bcdd45220e5f8c32040', name: "search" }))), this.renderSuggestions()));
     }
     static get is() { return "zanit-search-form"; }
     static get encapsulation() { return "shadow"; }
@@ -108,13 +224,61 @@ export class ZanitSearchForm {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "undefined"
+            },
+            "searchEnv": {
+                "type": "string",
+                "attribute": "search-env",
+                "mutable": false,
+                "complexType": {
+                    "original": "SearchEnv",
+                    "resolved": "SearchEnv.DEV | SearchEnv.PROD | SearchEnv.TEST",
+                    "references": {
+                        "SearchEnv": {
+                            "location": "import",
+                            "path": "../../../utils/subjects.api",
+                            "id": "src/utils/subjects.api.ts::SearchEnv"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Environment for search suggestions"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SearchEnv.PROD"
+            },
+            "searchArea": {
+                "type": "string",
+                "attribute": "search-area",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Search area (e.g. \"SCUOLA\", \"UNIVERSIT\u00C0\", \"DIZIONARI\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
             "showSearchbar": {},
-            "_searchQuery": {}
+            "_searchQuery": {},
+            "suggestions": {},
+            "activeSuggestion": {},
+            "showSuggestions": {}
         };
     }
     static get events() {
@@ -129,9 +293,15 @@ export class ZanitSearchForm {
                     "text": "Emitted on search form submission."
                 },
                 "complexType": {
-                    "original": "{ query: string }",
-                    "resolved": "{ query: string; }",
-                    "references": {}
+                    "original": "SearchEvent",
+                    "resolved": "{ query?: string; area?: string; subject?: string; user_query?: string; }",
+                    "references": {
+                        "SearchEvent": {
+                            "location": "import",
+                            "path": "../../../utils",
+                            "id": "src/utils/index.ts::SearchEvent"
+                        }
+                    }
                 }
             }, {
                 "method": "resetSearch",
@@ -155,6 +325,15 @@ export class ZanitSearchForm {
         return [{
                 "propName": "searchQuery",
                 "methodName": "onSearchQueryChange"
+            }, {
+                "propName": "searchArea",
+                "methodName": "onSearchAreaChange"
+            }, {
+                "propName": "showSearchbar",
+                "methodName": "onShowSearchbarChange"
+            }, {
+                "propName": "showSuggestions",
+                "methodName": "onShowSuggestionsChange"
             }];
     }
     static get listeners() {
@@ -166,10 +345,16 @@ export class ZanitSearchForm {
                 "passive": true
             }, {
                 "name": "keydown",
-                "method": "handleKeydown",
+                "method": "handleEsc",
                 "target": undefined,
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "keyup",
+                "method": "handleTab",
+                "target": "document",
+                "capture": false,
+                "passive": true
             }];
     }
 }

package/dist/collection/components/menubar/search-form/search-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search-form.js","sourceRoot":"","sources":["../../../../src/components/menubar/search-form/search-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { containsTarget } from '../../../utils';\n\n@Component({\n tag: 'zanit-search-form',\n styleUrl: 'search-form.css',\n shadow: true,\n})\nexport class ZanitSearchForm {\n private formElement: HTMLFormElement;\n\n @Element() host: HTMLZanitSearchFormElement;\n\n /** Indicates whether the searchbar is visible and usable. /\n @State()\n showSearchbar: boolean = false;\n\n /* Search query to apply. /\n @State()\n _searchQuery: string \| undefined = undefined;\n\n /* Initial search query /\n @Prop({ mutable: true })\n searchQuery: string \| undefined = undefined;\n\n @Watch('searchQuery')\n onSearchQueryChange() {\n this._searchQuery = this.searchQuery;\n if (this.searchQuery) {\n this.openSearchbar();\n }\n }\n\n /* Emitted on search form submission. /\n @Event({ cancelable: true }) search: EventEmitter<{ query: string }>;\n\n @Event() resetSearch: EventEmitter<void>;\n\n async connectedCallback() {\n this.showSearchbar = !!this.searchQuery;\n this._searchQuery = this.searchQuery;\n }\n\n /* Close open searchbar when clicking outside. /\n @Listen('click', { target: 'document', passive: true })\n handleOutsideClick(event: MouseEvent) {\n if (this.showSearchbar && this.formElement && !containsTarget(this.formElement, event)) {\n this.showSearchbar = false;\n }\n }\n\n /* Close the menu when pressing Escape or Tab. */\n @Listen('keydown', { passive: true })\n handleKeydown(event: KeyboardEvent) {\n switch (event.key) {\n case 'Escape':\n this.showSearchbar = false;\n break;\n case 'Tab':\n if (containsTarget(this.host, event)) {\n break;\n }\n\n this.showSearchbar = false;\n break;\n }\n }\n\n private openSearchbar() {\n this.showSearchbar = true;\n setTimeout(() => {\n const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input') as HTMLInputElement;\n searchbarInput.focus({ preventScroll: true });\n }, 500);\n }\n\n private resetSearchQuery() {\n this.searchQuery = undefined;\n this.resetSearch.emit();\n }\n\n private handleInputChange(event: Event) {\n this._searchQuery = (event.target as HTMLInputElement).value;\n if (!this._searchQuery) {\n this.searchQuery = undefined;\n }\n }\n\n private onSearchSubmit(event: Event) {\n event.preventDefault();\n if (!this._searchQuery) {\n return;\n }\n\n this.showSearchbar = false;\n const searchEv = this.search.emit({ query: this._searchQuery });\n // do not submit the form if the event default behavior was prevented\n if (searchEv.defaultPrevented) {\n return;\n }\n\n this.formElement.submit();\n }\n\n render() {\n return (\n <form\n class={{ 'searchbar': true, 'searchbar-open': this.showSearchbar }}\n ref={(el) => (this.formElement = el)}\n role=\"search\"\n aria-label=\"Cerca nel sito\"\n method=\"get\"\n action=\"/ricerca\"\n onSubmit={(event) => this.onSearchSubmit(event)}\n onReset={() => this.resetSearchQuery()}\n >\n <div\n class=\"input-wrapper\"\n role=\"none\"\n >\n {this.searchQuery && (\n <button\n type=\"reset\"\n aria-label=\"Svuota campo di ricerca\"\n disabled={!this.showSearchbar}\n aria-hidden={!this.showSearchbar ? 'true' : undefined}\n tabIndex={!this.showSearchbar ? -1 : 0}\n >\n <z-icon name=\"multiply-circled\" />\n </button>\n )}\n <input\n id=\"searchbar-input\"\n name=\"q\"\n type=\"search\"\n disabled={!this.showSearchbar}\n placeholder=\"Cerca per parola chiave o ISBN\"\n onInput={(event) => this.handleInputChange(event)}\n value={this.searchQuery}\n required\n aria-label=\"Cerca per parola chiave o ISBN\"\n aria-hidden={!this.showSearchbar ? 'true' : undefined}\n tabIndex={!this.showSearchbar ? -1 : 0}\n ></input>\n </div>\n\n <button\n class=\"searchbar-button\"\n aria-label={this.showSearchbar ? 'Esegui ricerca' : 'Apri il campo di ricerca'}\n aria-controls=\"searchbar-input\"\n type={this.showSearchbar ? 'submit' : 'button'}\n onClick={() => this.openSearchbar()}\n >\n {this.showSearchbar ? null : <span class=\"searchbar-button-label\">Cerca</span>}\n <z-icon name=\"search\"></z-icon>\n </button>\n </form>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"search-form.js","sourceRoot":"","sources":["../../../../src/components/menubar/search-form/search-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { containsTarget, isArrowDownKey, isArrowUpKey, isEscKey, isTabKey, SearchEvent } from '../../../utils';\nimport { getSubjectsByArea, SearchEnv } from '../../../utils/subjects.api';\nimport { buildSuggestions, SearchSuggestion } from './suggestions';\n\n@Component({\n tag: 'zanit-search-form',\n styleUrl: 'search-form.css',\n shadow: true,\n})\nexport class ZanitSearchForm {\n private formElement: HTMLFormElement;\n private subjectsByArea: Record<string, string[]> = {};\n private timer: NodeJS.Timeout;\n\n @Element() host: HTMLZanitSearchFormElement;\n\n /** Indicates whether the searchbar is visible and usable. /\n @State()\n showSearchbar: boolean = false;\n\n /* Search query to apply. /\n @State()\n _searchQuery: string \| undefined = undefined;\n\n /* Search suggestions to show in the autocomplete dropdown. /\n @State() suggestions: SearchSuggestion[] = [];\n\n /* Active suggestion - used for keyboard navigation /\n @State() activeSuggestion: string = '';\n\n /* Show suggestions list /\n @State() showSuggestions: boolean = false;\n\n /* Initial search query /\n @Prop({ mutable: true })\n searchQuery: string \| undefined = undefined;\n\n /* Environment for search suggestions /\n @Prop() searchEnv: SearchEnv = SearchEnv.PROD;\n\n /* Search area (e.g. \"SCUOLA\", \"UNIVERSITÀ\", \"DIZIONARI\"). /\n @Prop() searchArea?: string \| undefined;\n\n @Watch('searchQuery')\n onSearchQueryChange() {\n this._searchQuery = this.searchQuery;\n if (this.searchQuery) {\n this.openSearchbar();\n }\n this.resetSuggestions();\n }\n\n @Watch('searchArea')\n onSearchAreaChange() {\n this.resetSuggestions();\n }\n\n @Watch('showSearchbar')\n onShowSearchbarChange() {\n if (!this.showSearchbar) {\n this.showSuggestions = false;\n }\n }\n\n @Watch('showSuggestions')\n onShowSuggestionsChange() {\n this.activeSuggestion = '';\n }\n\n /* Emitted on search form submission. /\n @Event({ cancelable: true }) search: EventEmitter<SearchEvent>;\n\n @Event() resetSearch: EventEmitter<void>;\n\n async connectedCallback() {\n this.subjectsByArea = await getSubjectsByArea(this.searchEnv);\n this.showSearchbar = !!this.searchQuery;\n this._searchQuery = this.searchQuery;\n }\n\n /* Close open searchbar when clicking outside. /\n @Listen('click', { target: 'document', passive: true })\n handleOutsideClick(event: MouseEvent) {\n if (this.showSearchbar && this.host && !containsTarget(this.host, event)) {\n this.showSearchbar = false;\n }\n }\n\n /* Close the searchbar/suggestions when pressing Escape. /\n @Listen('keydown', { passive: true })\n handleEsc(event: KeyboardEvent) {\n if (!isEscKey(event)) {\n return;\n }\n\n if (this.showSuggestions) {\n this.showSuggestions = false;\n } else {\n this.showSearchbar = false;\n }\n }\n\n /* Close the searchbar/suggestions when pressing Tab. */\n @Listen('keyup', { target: 'document', passive: true })\n handleTab(event: KeyboardEvent) {\n if (!isTabKey(event)) {\n return;\n }\n\n this.showSuggestions = false;\n\n if (!containsTarget(this.host, event)) {\n this.showSearchbar = false;\n }\n }\n\n private openSearchbar() {\n this.showSearchbar = true;\n setTimeout(() => {\n const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input') as HTMLInputElement;\n searchbarInput.focus({ preventScroll: true });\n }, 500);\n }\n\n private resetSearchQuery() {\n this.searchQuery = undefined;\n this.resetSearch.emit();\n }\n\n private resetSuggestions() {\n this.suggestions = [];\n this.showSuggestions = false;\n }\n\n private handleInputChange(event: InputEvent) {\n this._searchQuery = (event.target as HTMLInputElement).value;\n if (!this._searchQuery) {\n this.searchQuery = undefined;\n }\n\n this.updateSuggestions();\n }\n\n private updateSuggestions() {\n clearTimeout(this.timer);\n\n const query = (this._searchQuery \|\| '').trim();\n\n if (query.length < 3) {\n this.resetSuggestions();\n return;\n }\n\n this.timer = setTimeout(() => {\n this.resetSuggestions();\n this.suggestions = buildSuggestions(query, this.subjectsByArea, this.searchArea?.toUpperCase());\n this.showSuggestions = true;\n }, 300);\n }\n\n private onSearchSubmit(event: Event) {\n event.preventDefault();\n if (!this._searchQuery) {\n return;\n }\n\n if (this.activeSuggestion) {\n const suggestion = this.suggestions.find((s) => s.id === this.activeSuggestion);\n if (suggestion) {\n this.submitSuggestionSearch(suggestion);\n this.showSuggestions = false;\n return;\n }\n }\n\n this.showSearchbar = false;\n\n const searchEv = this.search.emit({ query: this._searchQuery, area: this.searchArea });\n // do not submit the form if the event default behavior was prevented\n if (searchEv.defaultPrevented) {\n return;\n }\n\n this.formElement.submit();\n }\n\n private submitSuggestionSearch(suggestion: SearchSuggestion) {\n const ev = this.search.emit({\n user_query: suggestion.user_query,\n query: suggestion.query,\n area: suggestion.area,\n subject: suggestion.subject,\n });\n if (!ev.defaultPrevented) {\n window.location.href = suggestion.url;\n }\n }\n\n private handleSuggestionsNav(event: KeyboardEvent) {\n if (!isArrowDownKey(event) && !isArrowUpKey(event)) {\n return;\n }\n\n if (!this.suggestions.length) {\n return;\n }\n\n const options = this.suggestions.map((o) => o.id);\n\n if (!options.length) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n if (!this.showSuggestions) {\n this.showSuggestions = true;\n }\n\n let nextId = null;\n const firstId = options[0];\n const lastId = options[options.length - 1];\n const currOption = options.indexOf(this.activeSuggestion);\n if (currOption < 0) {\n nextId = isArrowDownKey(event) ? firstId : lastId;\n } else {\n if (isArrowDownKey(event)) {\n nextId = options[currOption + 1] \|\| lastId;\n } else {\n nextId = options[currOption - 1] \|\| firstId;\n }\n }\n this.activeSuggestion = nextId;\n }\n\n private renderSuggestions() {\n return (\n <div\n class={{ 'suggestions-wrapper': true, 'hidden': !this.showSuggestions \|\| !this.suggestions.length }}\n onPointerOver={(e) => e.preventDefault()}\n >\n <div\n id=\"search-suggestions\"\n class=\"suggestions\"\n role=\"listbox\"\n aria-label=\"Seleziona tra i suggerimenti\"\n >\n {this.suggestions.map((suggestion, k) => {\n return (\n <span\n key={k}\n innerHTML={suggestion.html_label}\n id={suggestion.id}\n class=\"suggestion\"\n role=\"option\"\n aria-label={suggestion.label}\n aria-selected={this.activeSuggestion === suggestion.id ? 'true' : undefined}\n onClick={() => this.submitSuggestionSearch(suggestion)}\n />\n );\n })}\n </div>\n </div>\n );\n }\n\n render() {\n return (\n <Host>\n <form\n class={{ 'searchbar': true, 'searchbar-open': this.showSearchbar }}\n ref={(el) => (this.formElement = el)}\n role=\"search\"\n aria-label=\"Cerca nel sito\"\n method=\"get\"\n action=\"/ricerca\"\n onSubmit={(event) => this.onSearchSubmit(event)}\n onReset={() => this.resetSearchQuery()}\n >\n {!!this.searchArea && (\n <input\n type=\"hidden\"\n name=\"area\"\n value={this.searchArea}\n />\n )}\n\n <div\n class=\"input-wrapper\"\n role=\"none\"\n >\n {this.searchQuery && (\n <button\n type=\"reset\"\n aria-label=\"Svuota campo di ricerca\"\n disabled={!this.showSearchbar}\n aria-hidden={!this.showSearchbar ? 'true' : undefined}\n tabIndex={!this.showSearchbar ? -1 : 0}\n >\n <z-icon name=\"multiply-circled\" />\n </button>\n )}\n <input\n id=\"searchbar-input\"\n name=\"q\"\n type=\"search\"\n disabled={!this.showSearchbar}\n placeholder=\"Cerca per parola chiave o ISBN\"\n value={this.searchQuery}\n required\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded={this.showSuggestions ? 'true' : 'false'}\n aria-controls=\"search-suggestions\"\n aria-activedescendant={this.activeSuggestion}\n aria-label=\"Cerca per parola chiave o ISBN\"\n aria-hidden={!this.showSearchbar ? 'true' : undefined}\n tabIndex={!this.showSearchbar ? -1 : 0}\n onInput={(event) => this.handleInputChange(event)}\n onKeyDown={(e) => {\n // INFO: prevent ESC from clearing input\n if (isEscKey(e)) {\n e.preventDefault();\n }\n\n this.handleSuggestionsNav(e);\n }}\n />\n </div>\n\n <button\n class=\"searchbar-button\"\n aria-label={this.showSearchbar ? 'Esegui ricerca' : 'Apri il campo di ricerca'}\n aria-controls=\"searchbar-input\"\n type={this.showSearchbar ? 'submit' : 'button'}\n onClick={() => this.openSearchbar()}\n >\n {this.showSearchbar ? null : <span class=\"searchbar-button-label\">Cerca</span>}\n <z-icon name=\"search\"></z-icon>\n </button>\n </form>\n\n {this.renderSuggestions()}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/menubar/search-form/suggestions.js ADDED Viewed

@@ -0,0 +1,84 @@
+var AREA_LABELS;
+(function (AREA_LABELS) {
+    AREA_LABELS["SCUOLA"] = "Scuola";
+    AREA_LABELS["UNIVERSIT\u00C0"] = "Universit\u00E0";
+    AREA_LABELS["GIURIDICO"] = "Giuridico";
+    AREA_LABELS["DIZIONARI"] = "Dizionari";
+    AREA_LABELS["SAGGISTICA"] = "Saggistica";
+})(AREA_LABELS || (AREA_LABELS = {}));
+const AREA_ORDER = Object.keys(AREA_LABELS);
+export function buildSuggestions(query, subjectsByArea, selectedArea) {
+    const matchingSubjectAreas = findSubjectAreas(query, subjectsByArea);
+    const hasSubject = matchingSubjectAreas.length > 0;
+    const subject = hasSubject ? query.toUpperCase() : undefined;
+    const suggestions = [];
+    if (selectedArea)
+        suggestions.push(buildWordSuggestion(query, selectedArea));
+    suggestions.push(buildWordSuggestion(query));
+    if (hasSubject) {
+        if (selectedArea) {
+            const orderedSubjectAreas = [
+                ...matchingSubjectAreas.filter((area) => area === selectedArea),
+                ...matchingSubjectAreas
+                    .filter((area) => area !== selectedArea)
+                    .sort((a, b) => getAreaOrder(a) - getAreaOrder(b)),
+            ];
+            orderedSubjectAreas.forEach((area) => suggestions.push(buildSubjectSuggestion(query, area, subject)));
+        }
+        else {
+            matchingSubjectAreas
+                .sort((a, b) => getAreaOrder(a) - getAreaOrder(b))
+                .forEach((subjectArea) => suggestions.push(buildSubjectSuggestion(query, subjectArea, subject)));
+        }
+    }
+    return suggestions;
+}
+const buildWordSuggestion = (user_query, area) => {
+    return {
+        id: buildId(`word-${user_query}-${area}`),
+        label: buildLabel(user_query, area, false, false),
+        html_label: buildLabel(user_query, area, false, true),
+        url: buildUrl({ q: user_query, ...(area ? { area } : {}), user_query }),
+        ...buildDetail(user_query, user_query, area),
+    };
+};
+const buildSubjectSuggestion = (user_query, area, subject) => {
+    return {
+        id: buildId(`subj-${user_query}-${area}-${subject}`),
+        label: buildLabel(user_query, area, true, false),
+        html_label: buildLabel(user_query, area, true, true),
+        url: buildUrl({ area, materia: subject, user_query }),
+        ...buildDetail(user_query, undefined, area, subject),
+    };
+};
+const buildId = (string) => string
+    .split('')
+    .map((c) => c.charCodeAt(0).toString(16))
+    .join('');
+const buildUrl = (params) => {
+    return `ricerca?${new URLSearchParams(params).toString()}`;
+};
+const buildDetail = (user_query, query, area, subject) => ({
+    user_query,
+    ...(query ? { query } : {}),
+    ...(area ? { area } : {}),
+    ...(subject ? { subject } : {}),
+});
+const buildLabel = (user_query, area, isSubject = false, isHtml = false) => {
+    const openStrong = isHtml ? `<strong>` : ``;
+    const closeStrong = isHtml ? `</strong>` : ``;
+    return `Cerca la ${isSubject ? `materia` : `parola`} ${openStrong}${user_query}${closeStrong} ${area ? `nel catalogo ${openStrong}${AREA_LABELS[area] ?? area}${closeStrong}` : `in tutto il sito`}`;
+};
+function findSubjectAreas(query, subjectsByArea) {
+    const cleanedQuery = cleanSearch(query);
+    return Object.entries(subjectsByArea)
+        .filter(([, subjects]) => subjects.some((subject) => subject.toLowerCase() === cleanedQuery))
+        .map(([area]) => area);
+}
+/** Clear search string: lowercase, remove multiple spaces */
+const cleanSearch = (s) => s.toLowerCase().replace(/\s+/g, ' ');
+const getAreaOrder = (area) => {
+    const index = AREA_ORDER.indexOf(area);
+    return index >= 0 ? index : 100;
+};
+//# sourceMappingURL=suggestions.js.map

package/dist/collection/components/menubar/search-form/suggestions.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"suggestions.js","sourceRoot":"","sources":["../../../../src/components/menubar/search-form/suggestions.ts"],"names":[],"mappings":"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","sourcesContent":["enum AREA_LABELS {\n SCUOLA = 'Scuola',\n UNIVERSITÀ = 'Università',\n GIURIDICO = 'Giuridico',\n DIZIONARI = 'Dizionari',\n SAGGISTICA = 'Saggistica',\n}\n\nconst AREA_ORDER = Object.keys(AREA_LABELS);\n\nexport type SearchSuggestion = {\n id: string;\n label: string;\n html_label: string;\n url: string;\n user_query: string;\n query?: string;\n area?: string;\n subject?: string;\n};\n\nexport function buildSuggestions(\n query: string,\n subjectsByArea: Record<string, string[]>,\n selectedArea?: string\n): SearchSuggestion[] {\n const matchingSubjectAreas = findSubjectAreas(query, subjectsByArea);\n const hasSubject = matchingSubjectAreas.length > 0;\n const subject = hasSubject ? query.toUpperCase() : undefined;\n\n const suggestions: SearchSuggestion[] = [];\n\n if (selectedArea) suggestions.push(buildWordSuggestion(query, selectedArea));\n\n suggestions.push(buildWordSuggestion(query));\n\n if (hasSubject) {\n if (selectedArea) {\n const orderedSubjectAreas = [\n ...matchingSubjectAreas.filter((area) => area === selectedArea),\n ...matchingSubjectAreas\n .filter((area) => area !== selectedArea)\n .sort((a, b) => getAreaOrder(a) - getAreaOrder(b)),\n ];\n orderedSubjectAreas.forEach((area) => suggestions.push(buildSubjectSuggestion(query, area, subject)));\n } else {\n matchingSubjectAreas\n .sort((a, b) => getAreaOrder(a) - getAreaOrder(b))\n .forEach((subjectArea) => suggestions.push(buildSubjectSuggestion(query, subjectArea, subject)));\n }\n }\n\n return suggestions;\n}\n\nconst buildWordSuggestion = (user_query: string, area?: string): SearchSuggestion => {\n return {\n id: buildId(`word-${user_query}-${area}`),\n label: buildLabel(user_query, area, false, false),\n html_label: buildLabel(user_query, area, false, true),\n url: buildUrl({ q: user_query, ...(area ? { area } : {}), user_query }),\n ...buildDetail(user_query, user_query, area),\n };\n};\n\nconst buildSubjectSuggestion = (user_query: string, area: string, subject: string): SearchSuggestion => {\n return {\n id: buildId(`subj-${user_query}-${area}-${subject}`),\n label: buildLabel(user_query, area, true, false),\n html_label: buildLabel(user_query, area, true, true),\n url: buildUrl({ area, materia: subject, user_query }),\n ...buildDetail(user_query, undefined, area, subject),\n };\n};\n\nconst buildId = (string: string) =>\n string\n .split('')\n .map((c) => c.charCodeAt(0).toString(16))\n .join('');\n\nconst buildUrl = (params: Record<string, string>): string => {\n return `ricerca?${new URLSearchParams(params).toString()}`;\n};\n\nconst buildDetail = (user_query: string, query?: string, area?: string, subject?: string) => ({\n user_query,\n ...(query ? { query } : {}),\n ...(area ? { area } : {}),\n ...(subject ? { subject } : {}),\n});\n\nconst buildLabel = (user_query: string, area?: string, isSubject: boolean = false, isHtml: boolean = false) => {\n const openStrong = isHtml ? `<strong>` : ``;\n const closeStrong = isHtml ? `</strong>` : ``;\n\n return `Cerca la ${isSubject ? `materia` : `parola`} ${openStrong}${user_query}${closeStrong} ${area ? `nel catalogo ${openStrong}${AREA_LABELS[area] ?? area}${closeStrong}` : `in tutto il sito`}`;\n};\n\nfunction findSubjectAreas(query: string, subjectsByArea: Record<string, string[]>): string[] {\n const cleanedQuery = cleanSearch(query);\n return Object.entries(subjectsByArea)\n .filter(([, subjects]) => subjects.some((subject) => subject.toLowerCase() === cleanedQuery))\n .map(([area]) => area);\n}\n\n/** Clear search string: lowercase, remove multiple spaces */\nconst cleanSearch = (s: string) => s.toLowerCase().replace(/\\s+/g, ' ');\n\nconst getAreaOrder = (area: string) => {\n const index = AREA_ORDER.indexOf(area);\n return index >= 0 ? index : 100;\n};\n"]}

package/dist/collection/utils/subjects.api.js ADDED Viewed

@@ -0,0 +1,25 @@
+export var SearchEnv;
+(function (SearchEnv) {
+    SearchEnv["DEV"] = "dev";
+    SearchEnv["TEST"] = "test";
+    SearchEnv["PROD"] = "prod";
+})(SearchEnv || (SearchEnv = {}));
+const S3_SHOP_URL = {
+    dev: 'https://zanichelli-shop-dev.s3.eu-west-1.amazonaws.com',
+    test: 'https://zanichelli-shop-test.s3.eu-west-1.amazonaws.com',
+    prod: 'https://zanichelli-shop.s3.eu-west-1.amazonaws.com',
+};
+export async function getSubjectsByArea(searchEnv) {
+    try {
+        const response = await fetch(`${S3_SHOP_URL[searchEnv]}/categories.json`);
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}`);
+        }
+        return await response.json();
+    }
+    catch (err) {
+        console.error('Error fetching subjects:', err);
+        return {};
+    }
+}
+//# sourceMappingURL=subjects.api.js.map

package/dist/collection/utils/subjects.api.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"subjects.api.js","sourceRoot":"","sources":["../../src/utils/subjects.api.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,0BAAa,CAAA;IACb,0BAAa,CAAA;AACf,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAED,MAAM,WAAW,GAA2B;IAC1C,GAAG,EAAE,wDAAwD;IAC7D,IAAI,EAAE,yDAAyD;IAC/D,IAAI,EAAE,oDAAoD;CAC3D,CAAC;AAEF,MAAM,CAAC,KAAK,UAAU,iBAAiB,CAAC,SAAoB;IAC1D,IAAI,CAAC;QACH,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,WAAW,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;QAC1E,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,QAAQ,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;QAC7C,CAAC;QACD,OAAO,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;IAC/B,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,GAAG,CAAC,CAAC;QAC/C,OAAO,EAAE,CAAC;IACZ,CAAC;AACH,CAAC","sourcesContent":["export enum SearchEnv {\n DEV = 'dev',\n TEST = 'test',\n PROD = 'prod',\n}\n\nconst S3_SHOP_URL: Record<string, string> = {\n dev: 'https://zanichelli-shop-dev.s3.eu-west-1.amazonaws.com',\n test: 'https://zanichelli-shop-test.s3.eu-west-1.amazonaws.com',\n prod: 'https://zanichelli-shop.s3.eu-west-1.amazonaws.com',\n};\n\nexport async function getSubjectsByArea(searchEnv: SearchEnv): Promise<Record<string, string[]>> {\n try {\n const response = await fetch(`${S3_SHOP_URL[searchEnv]}/categories.json`);\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}`);\n }\n return await response.json();\n } catch (err) {\n console.error('Error fetching subjects:', err);\n return {};\n }\n}\n"]}

package/dist/collection/utils/utils.js CHANGED Viewed

@@ -14,4 +14,12 @@ export const moveFocus = (current, next) => {
     next.tabIndex = 0;
     next.focus({ preventScroll: true });
 };
+/** Check if event key is ArrowUp */
+export const isArrowUpKey = (event) => event.key === 'ArrowUp';
+/** Check if event key is ArrowDown */
+export const isArrowDownKey = (event) => event.key === 'ArrowDown';
+/** Check if event key is Tab */
+export const isTabKey = (event) => event.key === 'Tab';
+/** Check if event key is Escape */
+export const isEscKey = (event) => event.key === 'Escape';
 //# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAqB,EAAE,KAAY,EAAE,EAAE;IACpE,OAAO,KAAK;SACT,YAAY,EAAE;SACd,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,QAAQ,IAAI,EAAE,KAAK,MAAM,CAAC,MAAM,CAAC;SACvD,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAiB,CAAC,CAAC,CAAC;AACxD,CAAC,CAAC;AAEF,0FAA0F;AAC1F,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,OAAoB,EAAE,IAAiB,EAAE,EAAE;IACnE,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;IACtB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IAClB,IAAI,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;AACtC,CAAC,CAAC","sourcesContent":["/*\n Check if an element contains an event target by checking its composedPath.\n * Useful when an event target may come from a component's shadow DOM.\n /\nexport const containsTarget = (ancestor: HTMLElement, event: Event) => {\n return event\n .composedPath()\n .filter((el) => el !== document && el !== window.window)\n .some((el) => ancestor.contains(el as HTMLElement));\n};\n\n/* Move the focus to `next` element, set tabindex to 0 for `next` and -1 to `current`. */\nexport const moveFocus = (current: HTMLElement, next: HTMLElement) => {\n current.tabIndex = -1;\n next.tabIndex = 0;\n next.focus({ preventScroll: true });\n};\n"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAqB,EAAE,KAAY,EAAE,EAAE;IACpE,OAAO,KAAK;SACT,YAAY,EAAE;SACd,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,QAAQ,IAAI,EAAE,KAAK,MAAM,CAAC,MAAM,CAAC;SACvD,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAiB,CAAC,CAAC,CAAC;AACxD,CAAC,CAAC;AAEF,0FAA0F;AAC1F,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,OAAoB,EAAE,IAAiB,EAAE,EAAE;IACnE,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;IACtB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IAClB,IAAI,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;AACtC,CAAC,CAAC;AAEF,oCAAoC;AACpC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC;AAE9E,sCAAsC;AACtC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC;AAElF,gCAAgC;AAChC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,KAAK,CAAC;AAEtE,mCAAmC;AACnC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC","sourcesContent":["/*\n Check if an element contains an event target by checking its composedPath.\n * Useful when an event target may come from a component's shadow DOM.\n /\nexport const containsTarget = (ancestor: HTMLElement, event: Event) => {\n return event\n .composedPath()\n .filter((el) => el !== document && el !== window.window)\n .some((el) => ancestor.contains(el as HTMLElement));\n};\n\n/* Move the focus to `next` element, set tabindex to 0 for `next` and -1 to `current`. /\nexport const moveFocus = (current: HTMLElement, next: HTMLElement) => {\n current.tabIndex = -1;\n next.tabIndex = 0;\n next.focus({ preventScroll: true });\n};\n\n/* Check if event key is ArrowUp /\nexport const isArrowUpKey = (event: KeyboardEvent) => event.key === 'ArrowUp';\n\n/* Check if event key is ArrowDown /\nexport const isArrowDownKey = (event: KeyboardEvent) => event.key === 'ArrowDown';\n\n/* Check if event key is Tab /\nexport const isTabKey = (event: KeyboardEvent) => event.key === 'Tab';\n\n/* Check if event key is Escape */\nexport const isEscKey = (event: KeyboardEvent) => event.key === 'Escape';\n"]}