@haiilo/catalyst 10.2.0 → 10.4.0

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.
@@ -1529,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) {
@@ -1571,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, {
@@ -1584,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();
         });
@@ -1608,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, { key: '1302105901512a7bc803b09b677403c29a7e4d0f' }, h("slot", { key: 'b99d3b3428881473ef9cc1e8060b6664287108d7', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: 'e221df97109e862d3f8af2ba83f4554ff19fff5b', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: 'bac2c0b2b1550f53e30ab34bf818f12b48706902', 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}`;
@@ -1660,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 }) {
@@ -1675,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, {
@@ -1692,7 +1693,11 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
 }, [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;