@salla.sa/twilight-components 2.14.444 → 2.14.446

package/dist/components/salla-searchable-dropdown2.js

@@ -23,6 +23,13 @@ const SallaSearchableDropdown = /*@__PURE__*/ proxyCustomElement(class SallaSear
         this.searchQuery = '';
         this.clientSearch = false;
         this.dropUp = false;
+        this.searchable = true;
+        /**
+         * When true, the dropdown will NOT override the nearest scrollable ancestor's
+         * `overflow` to `visible` while open. Use this when the host (e.g. a modal
+         * body) needs to keep its own scrolling intact while the dropdown is open.
+         */
+        this.keepParentScroll = false;
         this.isOpen = false;
         this.focusedIndex = -1;
         this.clientSearchQuery = '';
@@ -36,14 +43,18 @@ const SallaSearchableDropdown = /*@__PURE__*/ proxyCustomElement(class SallaSear
             }
         };
         this.handleTriggerKeyDown = (e) => {
-            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-                e.preventDefault();
-                if (!this.isOpen)
+            if (!this.isOpen) {
+                if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                    e.preventDefault();
                     this.open();
+                }
+                else if (e.key === 'Escape') {
+                    this.close();
+                }
+                return;
             }
-            else if (e.key === 'Escape') {
-                this.close();
-            }
+            // When open without a search input, the trigger keeps focus and drives item navigation.
+            this.navigateItems(e);
         };
         this.handleSearchInputChange = (e) => {
             const value = e.target.value;
@@ -54,34 +65,7 @@ const SallaSearchableDropdown = /*@__PURE__*/ proxyCustomElement(class SallaSear
             this.focusedIndex = -1;
         };
         this.handleSearchKeyDown = (e) => {
-            const visibleItems = this.filteredItems;
-            const itemCount = visibleItems.length;
-            switch (e.key) {
-                case 'ArrowDown':
-                    e.preventDefault();
-                    this.focusedIndex = itemCount > 0
-                        ? (this.focusedIndex + 1) % itemCount
-                        : -1;
-                    this.scrollFocusedIntoView();
-                    break;
-                case 'ArrowUp':
-                    e.preventDefault();
-                    this.focusedIndex = itemCount > 0
-                        ? (this.focusedIndex - 1 + itemCount) % itemCount
-                        : -1;
-                    this.scrollFocusedIntoView();
-                    break;
-                case 'Enter':
-                    e.preventDefault();
-                    if (this.focusedIndex >= 0 && this.focusedIndex < itemCount) {
-                        this.selectItem(visibleItems[this.focusedIndex]);
-                    }
-                    break;
-                case 'Escape':
-                    e.preventDefault();
-                    this.close();
-                    break;
-            }
+            this.navigateItems(e);
         };
     }
     connectedCallback() {
@@ -144,9 +128,11 @@ const SallaSearchableDropdown = /*@__PURE__*/ proxyCustomElement(class SallaSear
             return;
         this.isOpen = true;
         this.focusedIndex = -1;
-        this.scrollableAncestor = this.findScrollableAncestor();
-        if (this.scrollableAncestor) {
-            this.scrollableAncestor.style.overflow = 'visible';
+        if (!this.keepParentScroll) {
+            this.scrollableAncestor = this.findScrollableAncestor();
+            if (this.scrollableAncestor) {
+                this.scrollableAncestor.style.overflow = 'visible';
+            }
         }
         this.dropdownOpened.emit();
         requestAnimationFrame(() => this.searchInputRef?.focus());
@@ -163,6 +149,36 @@ const SallaSearchableDropdown = /*@__PURE__*/ proxyCustomElement(class SallaSear
         }
         this.dropdownClosed.emit();
     }
+    navigateItems(e) {
+        const visibleItems = this.filteredItems;
+        const itemCount = visibleItems.length;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this.focusedIndex = itemCount > 0
+                    ? (this.focusedIndex + 1) % itemCount
+                    : -1;
+                this.scrollFocusedIntoView();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                this.focusedIndex = itemCount > 0
+                    ? (this.focusedIndex - 1 + itemCount) % itemCount
+                    : -1;
+                this.scrollFocusedIntoView();
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (this.focusedIndex >= 0 && this.focusedIndex < itemCount) {
+                    this.selectItem(visibleItems[this.focusedIndex]);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                this.close();
+                break;
+        }
+    }
     scrollFocusedIntoView() {
         if (this.focusedIndex < 0)
             return;
@@ -179,18 +195,18 @@ const SallaSearchableDropdown = /*@__PURE__*/ proxyCustomElement(class SallaSear
     render() {
         const hasSelection = this.selectedItem != null;
         const listboxId = `${this.inputId}-listbox`;
-        return (h(Host, { key: '3545a75c07ae7c2a2c82ee54fa710f6f5d8bcfce', class: "s-searchable-dropdown" }, h("div", { key: '022fb98602228c5837cadb758f24f00956fafc22', class: { 's-searchable-dropdown': true, 's-searchable-dropdown--open': this.isOpen } }, this.label && (h("label", { key: '24e09036df24d45ce74799ec06b20b03df866866', class: "s-searchable-dropdown-label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '94277d1659f2b22c96de02a77a37920eefff13ef', class: "s-searchable-dropdown-required" }, " *"))), h("div", { key: '077e0662f0570c1bf9339577e7699d75f9b337de', class: {
+        return (h(Host, { key: 'c529f2b61adbc38aa1e5403da6fdb985fe256baa', class: "s-searchable-dropdown" }, h("div", { key: '88ab96afd36421fdf965b79298fa14f435adbcef', class: { 's-searchable-dropdown': true, 's-searchable-dropdown--open': this.isOpen } }, this.label && (h("label", { key: '6ee8a2d0428e1347e36eabec32a3129897481abc', class: "s-searchable-dropdown-label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '8473884ec18e73c72c79e7749264bd9c24c56ae9', class: "s-searchable-dropdown-required" }, " *"))), h("div", { key: 'bffbea7ff0cb9466c8a852a841a21ed8351ef92d', class: {
                 's-searchable-dropdown-trigger': true,
                 's-searchable-dropdown-trigger--disabled': this.disabled || this.loading,
                 's-searchable-dropdown-trigger--open': this.isOpen,
-            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-disabled": this.disabled || this.loading ? 'true' : 'false', tabIndex: this.disabled || this.loading ? -1 : 0, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hasSelection ? (h("span", { class: "s-searchable-dropdown-trigger-text" }, this.getDisplayName(this.selectedItem))) : (h("span", { class: "s-searchable-dropdown-trigger-placeholder" }, this.placeholder)), h("i", { key: '134a95003036f1c8a7df91a06542178e6ec12c04', class: {
+            }, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-disabled": this.disabled || this.loading ? 'true' : 'false', tabIndex: this.disabled || this.loading ? -1 : 0, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hasSelection ? (h("span", { class: "s-searchable-dropdown-trigger-text" }, this.getDisplayName(this.selectedItem))) : (h("span", { class: "s-searchable-dropdown-trigger-placeholder" }, this.placeholder)), h("i", { key: 'e3aee1ffe1b80a9ef21f4c9cca02de0a590b0825', class: {
                 'sicon-keyboard_arrow_down': true,
                 's-searchable-dropdown-trigger-icon': true,
                 's-searchable-dropdown-trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" })), this.isOpen && (h("div", { key: 'be6eb6c94d4b73c27959722ccb4bc87722035d1c', class: {
+            }, "aria-hidden": "true" })), this.isOpen && (h("div", { key: '7a19f2d6847b3e0dda5e0ea509df91a2f48fa098', class: {
                 's-searchable-dropdown-panel': true,
                 's-searchable-dropdown-panel--up': this.dropUp,
-            }, ref: (el) => (this.panelRef = el) }, h("div", { key: 'd97ce90a0fd26043a45c1a45616f8fde621e8ac5', class: "s-searchable-dropdown-search-wrap" }, h("i", { key: 'c7683e2dd873306e18afea983bb410827d883796', class: "sicon-search s-searchable-dropdown-search-icon", "aria-hidden": "true" }), h("input", { key: '64c4259b6c5453a9b1cb5985c58c65dd01ec139f', ref: (el) => (this.searchInputRef = el), id: this.inputId, type: "text", class: "s-searchable-dropdown-search-input", placeholder: this.placeholder, value: this.clientSearch ? this.clientSearchQuery : this.searchQuery, onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchKeyDown, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId })), h("div", { key: '9748f507fcb884b520ffc847800cc3543546b8ce', id: listboxId, class: "s-searchable-dropdown-list s-scrollbar", role: "listbox" }, this.renderListContent()))))));
+            }, ref: (el) => (this.panelRef = el) }, this.searchable && (h("div", { key: '601529f76a09762a57fe7b7663ecfa1505462367', class: "s-searchable-dropdown-search-wrap" }, h("i", { key: 'f91e464e7efed3759837880b5a7593daa4f84ecb', class: "sicon-search s-searchable-dropdown-search-icon", "aria-hidden": "true" }), h("input", { key: 'f72a7e12d0a6e90bab3983258c9b08aa286bc897', ref: (el) => (this.searchInputRef = el), id: this.inputId, type: "text", class: "s-searchable-dropdown-search-input", placeholder: this.placeholder, value: this.clientSearch ? this.clientSearchQuery : this.searchQuery, onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchKeyDown, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": listboxId }))), h("div", { key: '495aa88fc76d3d17956db7277cc98aff08b4c1af', id: listboxId, class: "s-searchable-dropdown-list s-scrollbar", role: "listbox" }, this.renderListContent()))))));
     }
     renderListContent() {
         if (this.searching || this.loading) {
@@ -231,6 +247,8 @@ const SallaSearchableDropdown = /*@__PURE__*/ proxyCustomElement(class SallaSear
         "searchQuery": [1, "search-query"],
         "clientSearch": [4, "client-search"],
         "dropUp": [4, "drop-up"],
+        "searchable": [4],
+        "keepParentScroll": [4, "keep-parent-scroll"],
         "isOpen": [32],
         "focusedIndex": [32],
         "clientSearchQuery": [32]

package/dist/esm/{filepond-BFX6xxhJ.js → filepond-CpYF7JQY.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CjquqEh1.js';
+import { d as getDefaultExportFromCjs } from './index-DryPCgN9.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-poster-DwMxJsyL.js → filepond-plugin-file-poster-ob6i92P3.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CjquqEh1.js';
+import { d as getDefaultExportFromCjs } from './index-DryPCgN9.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-size-BFwbB1wr.js → filepond-plugin-file-validate-size-h8AHfyQH.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CjquqEh1.js';
+import { d as getDefaultExportFromCjs } from './index-DryPCgN9.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-type-9VetG0aO.js → filepond-plugin-file-validate-type-BPLx-hfr.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CjquqEh1.js';
+import { d as getDefaultExportFromCjs } from './index-DryPCgN9.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-edit-DqIgezI-.js → filepond-plugin-image-edit-B7wPe8-3.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CjquqEh1.js';
+import { d as getDefaultExportFromCjs } from './index-DryPCgN9.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-exif-orientation-B97i5tWf.js → filepond-plugin-image-exif-orientation-e7W60Y2D.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CjquqEh1.js';
+import { d as getDefaultExportFromCjs } from './index-DryPCgN9.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-preview-eGkx8PnH.js → filepond-plugin-image-preview-DOov9hTx.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CjquqEh1.js';
+import { d as getDefaultExportFromCjs } from './index-DryPCgN9.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{functions-C1QgrjTx.js → functions-BRfvCQ-R.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h } from './index-CjquqEh1.js';
+import { h } from './index-DryPCgN9.js';
 
 function nearestLowerMultiple(number, multipleOf = window.matchMedia('(min-width: 768px)').matches ? 3 : 2) {
     return number < multipleOf ? number : number - (number % multipleOf);