@haiilo/catalyst 10.1.1 → 10.3.1

package/dist/components/cat-dropdown2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as size } from './floating-ui.dom.esm.js';
+import { a as autoUpdate, s as size, c as computePosition, o as offset, f as flip } from './floating-ui.dom.esm.js';
 
 /**
  * Auto-generated file. Do not edit directly.
@@ -1515,6 +1515,7 @@ const firstTabbable = (container) => {
 };
 
 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 CatDropdownStyle0 = catDropdownCss;
 
 let nextUniqueId = 0;
 const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends HTMLElement {
@@ -1528,6 +1529,8 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.isOpen = false;
         this.placement = 'bottom-start';
         this.noAutoClose = false;
+        this.arrowNavigation = 'vertical';
+        this.noResize = false;
         this.overflow = false;
     }
     clickHandler(event) {
@@ -1570,7 +1573,6 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
             this.isOpen = true;
             this.content.classList.add('show');
             this.trigger?.setAttribute('aria-expanded', 'true');
-            this.catOpen.emit();
             this.trap = this.trap
                 ? this.trap.updateContainerElements(this.content)
                 : createFocusTrap(this.content, {
@@ -1583,7 +1585,25 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
                         !event.composedPath().includes(this.content) &&
                         // check if click was not on an element marked with data-dropdown-no-close
                         !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')),
-                    onPostDeactivate: () => this.close()
+                    onPostDeactivate: () => this.close(),
+                    onPostActivate: () => this.catOpen.emit(),
+                    setReturnFocus: elem => this.trigger || elem,
+                    isKeyForward: event => {
+                        if ((this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||
+                            (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')) {
+                            event.preventDefault();
+                            return true;
+                        }
+                        return event.key === 'Tab';
+                    },
+                    isKeyBackward: event => {
+                        if ((this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') ||
+                            (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')) {
+                            event.preventDefault();
+                            return true;
+                        }
+                        return event.key === 'Tab' && event.shiftKey;
+                    }
                 });
             this.trap.activate();
         });
@@ -1607,27 +1627,8 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
             this.catClose.emit();
         }, timeTransitionS);
     }
-    componentDidLoad() {
-        this.keyListener = event => {
-            if (this.isOpen && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
-                const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });
-                const activeElement = firstTabbable(document.activeElement);
-                const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
-                const activeOff = event.key === 'ArrowDown' ? 1 : -1;
-                const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
-                targetElements[targetIdx].focus();
-                event.preventDefault();
-            }
-        };
-        document.addEventListener('keydown', this.keyListener);
-    }
-    disconnectedCallback() {
-        if (this.keyListener) {
-            document.removeEventListener('keydown', this.keyListener);
-        }
-    }
     render() {
-        return (h(Host, null, h("slot", { name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { name: "content" }))));
+        return (h(Host, { key: 'b9a95b9b2c0e084fe0036989f174ee1681ecfe96' }, h("slot", { key: '73d2e8b7dd4c67f95c6b9faa34142de00eb25c4e', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '6555cf3ab1b4f0cfcea0e9ba85221f3de5cede82', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: '70dab119fa43e67e1d17b558519028c0f9da60d4', name: "content" }))));
     }
     get contentId() {
         return `cat-dropdown-${this.id}`;
@@ -1659,12 +1660,9 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
     }
     update() {
         if (this.trigger) {
-            computePosition(this.trigger, this.content, {
-                strategy: 'fixed',
-                placement: this.placement,
-                middleware: [
-                    offset(CatDropdown.OFFSET),
-                    flip(),
+            const resize = this.noResize
+                ? []
+                : [
                     size({
                         padding: CatDropdown.OFFSET,
                         apply({ availableWidth, availableHeight, elements }) {
@@ -1674,7 +1672,11 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
                             });
                         }
                     })
-                ]
+                ];
+            computePosition(this.trigger, this.content, {
+                strategy: 'fixed',
+                placement: this.placement,
+                middleware: [offset(CatDropdown.OFFSET), flip(), ...resize]
             }).then(({ x, y, placement }) => {
                 this.content.dataset.placement = placement;
                 Object.assign(this.content.style, {
@@ -1687,11 +1689,15 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
     hasAttribute(elem, attr) {
         return elem instanceof HTMLElement && elem.hasAttribute(attr);
     }
-    static get style() { return catDropdownCss; }
+    static get style() { return CatDropdownStyle0; }
 }, [1, "cat-dropdown", {
         "placement": [1],
         "noAutoClose": [4, "no-auto-close"],
+        "arrowNavigation": [1, "arrow-navigation"],
+        "noResize": [4, "no-resize"],
         "overflow": [4],
+        "toggle": [64],
+        "open": [64],
         "close": [64]
     }, [[0, "catClick", "clickHandler"]]]);
 CatDropdown.OFFSET = 4;