@haiilo/catalyst 10.37.0 → 11.1.0

package/dist/components/cat-dropdown2.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as autoUpdate, s as size, c as computePosition, o as offset, f as flip, b as shift } from './floating-ui.dom.esm.js';
 import { t as tabbable, a as focusable, i as isTabbable, g as getTabIndex, b as isFocusable, f as firstTabbable } from './first-tabbable.js';
 
@@ -993,11 +993,59 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   return trap;
 };
 
-const catDropdownCss = ":host{display:contents}:host([hidden]){display:none}::slotted(nav){padding:0.25rem;min-width:8rem;max-width:16rem}.content{position:fixed;background:white;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);border:1px solid rgb(var(--cat-border-color, 235, 236, 240));z-index:calc(var(--cat-z-index, 1000) + 100);display:none;opacity:0;transform:scale(0.9);transition:transform 125ms cubic-bezier(0.3, 0, 0.8, 0.15), opacity 125ms cubic-bezier(0.3, 0, 0.8, 0.15)}.content[data-placement^=top]{transform-origin:bottom}.content[data-placement^=top-start]{transform-origin:bottom left}.content[data-placement^=top-end]{transform-origin:bottom right}.content[data-placement^=left]{transform-origin:right}.content[data-placement^=left-start]{transform-origin:right top}.content[data-placement^=left-end]{transform-origin:right bottom}.content[data-placement^=right]{transform-origin:left}.content[data-placement^=right-start]{transform-origin:left top}.content[data-placement^=right-end]{transform-origin:left bottom}.content[data-placement^=bottom]{transform-origin:top}.content[data-placement^=bottom-start]{transform-origin:top left}.content[data-placement^=bottom-end]{transform-origin:top right}.content.show{opacity:1;transform:scale(1);transition:transform 250ms cubic-bezier(0.05, 0.7, 0.1, 1), opacity 250ms cubic-bezier(0.05, 0.7, 0.1, 1)}.content.overflow-auto{overflow:auto}";
+const focusableSelectors = [
+    'input',
+    'select',
+    'textarea',
+    'button',
+    'a[href]',
+    '[tabindex]',
+    'iframe',
+    '[contenteditable]',
+    'audio[controls]',
+    'video[controls]'
+];
+const findFirstTabbableIncludeHidden = (element) => {
+    if (element instanceof HTMLElement) {
+        const potentiallyTabbableElement = getPotentiallyTabbable(element);
+        if (potentiallyTabbableElement) {
+            return potentiallyTabbableElement;
+        }
+    }
+    const children = Array.from(element.querySelectorAll('*'));
+    for (const child of children) {
+        const potentiallyTabbableElement = getPotentiallyTabbable(child);
+        if (potentiallyTabbableElement) {
+            return potentiallyTabbableElement;
+        }
+    }
+    return undefined;
+};
+function couldBeTabbable(value) {
+    if (!value.matches(focusableSelectors.join(','))) {
+        return false;
+    }
+    const tabindex = value.getAttribute('tabindex');
+    return tabindex === null || Number(tabindex) >= 0;
+}
+function getPotentiallyTabbable(element) {
+    if (couldBeTabbable(element)) {
+        return element;
+    }
+    if (element.shadowRoot) {
+        const shadowTabbable = findFirstTabbableIncludeHidden(element.shadowRoot);
+        if (shadowTabbable) {
+            return shadowTabbable;
+        }
+    }
+    return undefined;
+}
+
+const catDropdownCss = ":host{display:contents}:host([hidden]){display:none}::slotted(nav){padding:0.25rem}.aligned ::slotted(nav){min-width:8rem;max-width:16rem}.justified ::slotted(nav){width:100%}.content{position:fixed;background:white;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);border:1px solid rgb(var(--cat-border-color, 235, 236, 240));z-index:calc(var(--cat-z-index, 1000) + 100);display:none;opacity:0;transform:scale(0.9);transition:transform 125ms cubic-bezier(0.3, 0, 0.8, 0.15), opacity 125ms cubic-bezier(0.3, 0, 0.8, 0.15)}.content[data-placement^=top]{transform-origin:bottom}.content[data-placement^=top-start]{transform-origin:bottom left}.content[data-placement^=top-end]{transform-origin:bottom right}.content[data-placement^=left]{transform-origin:right}.content[data-placement^=left-start]{transform-origin:right top}.content[data-placement^=left-end]{transform-origin:right bottom}.content[data-placement^=right]{transform-origin:left}.content[data-placement^=right-start]{transform-origin:left top}.content[data-placement^=right-end]{transform-origin:left bottom}.content[data-placement^=bottom]{transform-origin:top}.content[data-placement^=bottom-start]{transform-origin:top left}.content[data-placement^=bottom-end]{transform-origin:top right}.content.show{opacity:1;transform:scale(1);transition:transform 250ms cubic-bezier(0.05, 0.7, 0.1, 1), opacity 250ms cubic-bezier(0.05, 0.7, 0.1, 1)}.content.overflow-auto{overflow:auto}";
 const CatDropdownStyle0 = catDropdownCss;
 
 let nextUniqueId = 0;
-const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends HTMLElement {
+const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends HTMLElement$1 {
     constructor() {
         super();
         this.__registerHost();
@@ -1020,12 +1068,10 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.overflow = false;
         this.noInitialFocus = false;
         this.noReturnFocus = false;
+        this.delayedTriggerInit = false;
     }
     clickHandler(event) {
-        // we need to delay the initialization of the trigger until first
-        // interaction because the element might still be hidden (and thus not
-        // tabbable) if contained in another Stencil web component
-        if (!this.trigger) {
+        if (!this.trigger && this.delayedTriggerInit) {
             this.hasInitialFocus = this.isEventOriginFromKeyboard(event.detail);
             this.initTrigger();
             this.toggle();
@@ -1053,10 +1099,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
      * @param isFocusVisible is dropdown should receive visible focus when it's opened.
      */
     async open(isFocusVisible) {
-        // we need to delay the initialization of the trigger until first
-        // interaction because the element might still be hidden (and thus not
-        // tabbable) if contained in another Stencil web component
-        if (!this.trigger) {
+        if (!this.trigger && this.delayedTriggerInit) {
             this.initTrigger();
         }
         if (this.isOpen === null || this.isOpen) {
@@ -1127,11 +1170,14 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
             this.catClose.emit();
         }, timeTransitionS);
     }
-    render() {
-        return (h(Host, { key: 'abd5eb8eb84977f0981113b3f7958ec2a31a47bb' }, h("slot", { key: '6049c92c9b30e3fba338fb94d17543476620fe37', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: '6eb5f52f222ad08b4a7f0d41d4ace943b371a6b7', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: 'e186f63a79fcc457bee344ee188fef37f2c27383', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: 'c0060ac95085f3794f61fd88922368c59a31b1b7', name: "content" }))));
-    }
     componentDidLoad() {
         this.initAnchor();
+        if (!this.delayedTriggerInit) {
+            this.initTrigger();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'e101b3a67fd7a0908d311b1c8bae2a999e4f3e9f' }, h("slot", { key: 'e30d1fb968a1c7b762b8932c4e8b4278fde43f30', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: '0b56ed3439417a52791ed5d98b81859cebc7189e', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '53c4a6bfe56a95e18b2931326d71fda970e2f76a', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: 'fafbbf8f1fee503f7b282e320dc76955fdf8a4c9', name: "content" }))));
     }
     get contentId() {
         return `cat-dropdown-${this.id}`;
@@ -1161,7 +1207,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
     }
     findTrigger() {
         let trigger;
-        const elems = this.triggerSlot?.assignedElements?.() || [];
+        let elems = this.triggerSlot?.assignedElements?.() || [];
         while (!trigger && elems.length) {
             const elem = elems.shift();
             trigger = elem?.hasAttribute('data-trigger')
@@ -1171,6 +1217,15 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         if (!trigger) {
             trigger = firstTabbable(this.triggerSlot);
         }
+        // if no tabbable element is still found let's attempt to search through elements with visibility:hidden styles
+        // which stencil assigns to component in prehydration state
+        if (!trigger) {
+            elems = this.triggerSlot?.assignedElements?.() || [];
+            while (!trigger && elems.length) {
+                const elem = elems.shift();
+                trigger = findFirstTabbableIncludeHidden(elem);
+            }
+        }
         if (!trigger) {
             throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');
         }
@@ -1186,13 +1241,17 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
                         apply({ rects, availableWidth, availableHeight, elements }) {
                             if (justify) {
                                 Object.assign(elements.floating.style, {
-                                    minWidth: `${rects.reference.width}px`
+                                    minWidth: `${rects.reference.width}px`,
+                                    maxWidth: `${rects.reference.width}px`,
+                                    maxHeight: `${availableHeight}px`
+                                });
+                            }
+                            else {
+                                Object.assign(elements.floating.style, {
+                                    maxWidth: `${availableWidth}px`,
+                                    maxHeight: `${availableHeight}px`
                                 });
                             }
-                            Object.assign(elements.floating.style, {
-                                maxWidth: `${availableWidth}px`,
-                                maxHeight: `${availableHeight}px`
-                            });
                         }
                     })
                 ];
@@ -1210,7 +1269,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         }
     }
     hasAttribute(elem, attr) {
-        return elem instanceof HTMLElement && elem.hasAttribute(attr);
+        return elem instanceof HTMLElement$1 && elem.hasAttribute(attr);
     }
     static get style() { return CatDropdownStyle0; }
 }, [1, "cat-dropdown", {
@@ -1222,6 +1281,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         "overflow": [4],
         "noInitialFocus": [4, "no-initial-focus"],
         "noReturnFocus": [4, "no-return-focus"],
+        "delayedTriggerInit": [4, "delayed-trigger-init"],
         "toggle": [64],
         "open": [64],
         "close": [64]