@penn-libraries/web 1.1.0-dev.5 → 1.1.0-dev.7

package/dist/esm/pennlibs-autocomplete_3.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, a as getElement, g as getAssetPath } from './index-CE_ILdTo.js';
 
-const pennlibsAutocompleteCss = ":host {\n  display: block;\n  width: 100%;\n  border-radius: 1.25rem;\n  padding: 0;\n  border-top: 0;\n  position: relative;\n}\n\n[role=listbox] {\n  position: absolute;\n  margin-top: var(--pl-space-xs);\n  background: var(--pl-color-bg-default);\n  border-radius: 1.25rem;\n  box-shadow: rgba(140, 149, 159, 0.3) 0px 8px 24px 0px;\n  width: 100%;\n  overflow: hidden;\n  z-index: 1;\n\n  display: flex;\n  flex-direction: column;\n}\n\np {\n  margin: 0;\n  font-size: var(--pl-font-size-s);\n  color: var(--pl-color-fg-subtle);\n  padding: var(--pl-space-xs) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  font-size: var(--pl-font-size-s);\n  order: 2;\n  font-weight: 500;\n  background: var(--pl-color-bg-subtle);\n  border-radius: 0 0 1.25rem 1.25rem;\n\n  display: flex;\n  gap: var(--pl-space-s) var(--pl-space-l);\n  flex-wrap: wrap;\n}\n\nol {\n  list-style: none;\n  margin: 0;\n  padding: var(--pl-space-xs) 0;\n  order: 1;\n}\n\n[role=option] {\n  color: var(--pl-color-fg-default);\n  padding: var(--pl-space-s) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  text-decoration: none;\n  font-weight: 700; \n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:hover,\n  &:focus {\n    text-decoration-thickness: 2px;\n    text-underline-offset: 2px;\n    text-decoration: underline;\n  }\n}\n\n[aria-selected=true] {\n  text-decoration-thickness: 2px;\n  text-underline-offset: 2px;\n  text-decoration: underline;\n}\n\nmark {\n  background: none;\n  font-weight: 400;\n}\n\n.suggestion--border {\n  border-bottom: solid 1px rgb(from var(--pl-color-fg-default) r g b / 0.2);\n  padding-bottom: calc(var(--pl-space-2xs) + var(--pl-space-s));\n  margin-bottom: var(--pl-space-2xs);\n}";
+const pennlibsAutocompleteCss = ":host {\n  display: block;\n  width: 100%;\n  border-radius: 1.25rem;\n  padding: 0;\n  border-top: 0;\n  position: relative;\n}\n\n[role=listbox] {\n  position: absolute;\n  margin-top: var(--pl-space-xs);\n  background: var(--pl-color-bg-default);\n  border-radius: 1.25rem;\n  box-shadow: rgba(140, 149, 159, 0.3) 0px 8px 24px 0px;\n  width: 100%;\n  overflow: hidden;\n  z-index: 1;\n\n  display: flex;\n  flex-direction: column;\n}\n\np {\n  margin: 0;\n  font-size: var(--pl-font-size-s);\n  color: var(--pl-color-fg-subtle);\n  padding: var(--pl-space-xs) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  font-size: var(--pl-font-size-s);\n  order: 2;\n  font-weight: 500;\n  background: var(--pl-color-bg-subtle);\n  border-radius: 0 0 1.25rem 1.25rem;\n\n  display: flex;\n  gap: var(--pl-space-s) var(--pl-space-l);\n  flex-wrap: wrap;\n}\n\nol {\n  list-style: none;\n  margin: 0;\n  padding: var(--pl-space-xs) 0;\n  order: 1;\n}\n\n[role=option] {\n  color: var(--pl-color-fg-default);\n  padding: var(--pl-space-s) calc(var(--pl-space-m) + var(--pl-space-2xs));\n  text-decoration: none;\n  font-weight: 700; \n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &:hover,\n  &:focus {\n    text-decoration-thickness: 2px;\n    text-underline-offset: 2px;\n    text-decoration: underline;\n  }\n}\n\n[aria-selected=true] {\n  text-decoration-thickness: 2px;\n  text-underline-offset: 2px;\n  text-decoration: underline;\n}\n\nmark,\nb {\n  background: none;\n  font-weight: 400;\n}\n\n.suggestion--border {\n  border-bottom: solid 1px rgb(from var(--pl-color-fg-default) r g b / 0.2);\n  padding-bottom: calc(var(--pl-space-2xs) + var(--pl-space-s));\n  margin-bottom: var(--pl-space-2xs);\n}";
 
 const Autocomplete = class {
     constructor(hostRef) {
@@ -10,6 +10,12 @@ const Autocomplete = class {
         this.currentIndex = -1;
         this.originalValue = '';
         this.options = [];
+        this.keyHandlerMap = {
+            'Escape': () => this.handleEscape(),
+            'ArrowDown': () => this.handleArrowDown(),
+            'ArrowUp': () => this.handleArrowUp(),
+            'Enter': () => this.handleEnter()
+        };
         this.handleOptionClick = (index) => {
             this.currentIndex = index;
             this.selectCurrent();
@@ -61,7 +67,12 @@ const Autocomplete = class {
         if (!this.for)
             return null;
         const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="start"]');
-        const input = slot.assignedElements()[0].querySelector(`input#${this.for}`);
+        if (!slot)
+            return null;
+        const assignedElements = slot.assignedElements();
+        if (assignedElements.length === 0)
+            return null;
+        const input = assignedElements[0].querySelector(`input#${this.for}`);
         return input || null;
     }
     isInputFocused() {
@@ -120,35 +131,33 @@ const Autocomplete = class {
             return;
         if (event.metaKey || event.ctrlKey)
             return; // Ignore keyboard shortcuts
-        const handler = this.keyHandlers()[event.key];
+        const handler = this.keyHandlerMap[event.key];
         if (handler) {
-            event.preventDefault();
+            // Don't prevent default for Enter - allow form submission
+            if (event.key !== 'Enter') {
+                event.preventDefault();
+            }
             handler();
         }
     }
-    keyHandlers() {
-        return {
-            'Escape': () => this.handleEscape(),
-            'ArrowDown': () => this.handleArrowDown(),
-            'ArrowUp': () => this.handleArrowUp(),
-            'Enter': () => this.handleEnter()
-        };
-    }
     handleEscape() {
         this.reset();
         this.syncInputState();
+        this.syncInputValueToSelection();
     }
     handleArrowDown() {
         if (!this.showSuggestions)
             return;
         this.moveNext();
         this.syncInputState();
+        this.syncInputValueToSelection();
     }
     handleArrowUp() {
         if (!this.showSuggestions)
             return;
         this.movePrevious();
         this.syncInputState();
+        this.syncInputValueToSelection();
     }
     handleEnter() {
         if (this.canSelect())
@@ -188,7 +197,6 @@ const Autocomplete = class {
         if (input)
             this.originalValue = input.value;
         this.showSuggestionsPanel();
-        this.syncInputState();
     }
     showSuggestionsPanel() {
         this.showSuggestions = true;
@@ -197,8 +205,11 @@ const Autocomplete = class {
     closeSuggestions() {
         this.reset();
         this.syncInputState();
+        this.syncInputValueToSelection();
     }
     deferCloseSuggestions() {
+        if (this.blurTimeout)
+            clearTimeout(this.blurTimeout);
         this.blurTimeout = setTimeout(() => {
             if (this.isFocusOutsideComponent())
                 this.closeSuggestions();
@@ -225,30 +236,34 @@ const Autocomplete = class {
             return;
         this.updateAriaExpanded(input);
         this.updateAriaActiveDescendant(input);
-        this.updateInputValue(input);
+    }
+    syncInputValueToSelection() {
+        const input = this.getInput();
+        if (!input)
+            return;
+        input.value = this.currentIndex >= 0 && this.currentIndex < this.options.length
+            ? this.options[this.currentIndex].value
+            : this.originalValue;
     }
     updateAriaExpanded(input) {
         input.setAttribute('aria-expanded', this.showSuggestions.toString());
     }
     updateAriaActiveDescendant(input) {
-        const hasSelection = this.showSuggestions && this.currentIndex >= 0;
-        if (hasSelection && this.options[this.currentIndex]) {
+        const hasSelection = this.showSuggestions &&
+            this.currentIndex >= 0 &&
+            this.currentIndex < this.options.length;
+        if (hasSelection) {
             input.setAttribute('aria-activedescendant', this.options[this.currentIndex].id);
         }
         else {
             input.removeAttribute('aria-activedescendant');
         }
     }
-    updateInputValue(input) {
-        input.value = this.currentIndex >= 0
-            ? this.options[this.currentIndex].value
-            : this.originalValue;
-    }
     shouldShowListbox() {
         return this.showSuggestions && this.options.length > 0 && this.isInputFocused();
     }
     render() {
-        return (h("div", { key: '71422b55533372a9d8697e648e49f87fe223f4e0' }, h("slot", { key: '951511fd2090b9816c2e6c1a5a40169ea08e72fd', name: "start" }), this.shouldShowListbox() && (h("ol", { key: 'e3f6f14686bc99b6e25d34d8e053f01174f23438', role: "listbox", id: "listbox" }, this.options.map((option, index) => (h("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
+        return (h("div", { key: 'd7c11d48e354937eedc76f608ef3b3b8762ddb4b' }, h("slot", { key: 'a3c65cf477aa9f575c3310e364c1dd2a5dca9e57', name: "start" }), this.shouldShowListbox() && (h("ol", { key: 'dc035d276f14da3ad0246924c345bc86ff5c68f9', role: "listbox", id: "listbox" }, this.options.map((option, index) => (h("li", { role: "option", id: option.id, "aria-selected": this.currentIndex === index ? 'true' : 'false', tabindex: "-1", onClick: () => this.handleOptionClick(index), innerHTML: option.html })))))));
     }
     get el() { return getElement(this); }
 };