@haiilo/catalyst 14.4.0 → 14.5.0

package/dist/components/cat-datepicker-inline.js

@@ -51,11 +51,11 @@ const CatDatepickerInline$1 = /*@__PURE__*/ proxyCustomElement(class CatDatepick
         this.pickr = this.initDatepicker(this.input);
     }
     render() {
-        return (h(Host, { key: '5877c910a861b8c82e32a8b636260bfccab1c57e' }, h("div", { key: '151936c5d8db28c6c7f6f602cc867c51762217aa', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
+        return (h(Host, { key: '22ff03e4cb6c74bc944e5022764308b6d2b2fe29' }, h("div", { key: '1c7e6b0beab570e1357014384ab8eaf76458858f', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
                 'datepicker-wrapper': true,
                 'datepicker-disabled': this.disabled,
                 'datepicker-readonly': this.readonly
-            } }, h("input", { key: 'edb97330b0b6146cc6cbdefe904b59681d0296b9', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
+            } }, h("input", { key: '75edfdc337ba101bd0cb9afa1ddef11571e94bf9', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
     }
     initDatepicker(input) {
         if (!input) {

package/dist/components/cat-datepicker.js

@@ -139,7 +139,7 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
     }
     render() {
         return [
-            h("cat-input", { key: 'ef465dc2e84455154dde17a4ebd1e742a5c3cd83', ref: el => (this._input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal ?? this.fallbackHorizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: e => {
+            h("cat-input", { key: 'd81f695ecf9eb3dd175a14070811b8ca99e13f67', ref: el => (this._input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal ?? this.fallbackHorizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: e => {
                     e.stopPropagation();
                     this.value = e.detail || undefined;
                 }, onCatFocus: e => {
@@ -148,8 +148,8 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
                 }, onCatBlur: e => {
                     e.stopPropagation();
                     this.catBlur.emit(e.detail);
-                } }, this.hasSlottedLabel && (h("span", { key: '99fdcacd96958d6f8f991a5fa539ee10d93918cd', slot: "label" }, h("slot", { key: '361f7fcd45fe913f1187aea3886831681272198a', name: "label" }))), this.hasSlottedHint && (h("span", { key: 'd063e6c5064c6e35781965c6fdfe792adcaf45cd', slot: "hint" }, h("slot", { key: '6f0bfa21a7c8fab7520edca8daa116376dbc2d30', name: "hint" })))),
-            h("div", { key: '1806da8cb2acf11efd58d94d24b963d69ab08923', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
+                } }, this.hasSlottedLabel && (h("span", { key: '41f0dfcbe0a7ab562a80416a109ee6283d602147', slot: "label" }, h("slot", { key: '4148dec98c036b3f7d604b16c05dfed648ec16a3', name: "label" }))), this.hasSlottedHint && (h("span", { key: '8181253f8adadc606f0d66abe5bad5a85b7a0f7f', slot: "hint" }, h("slot", { key: 'c6807aed385298a19d67e1f2652de82473ea6f16', name: "hint" })))),
+            h("div", { key: '8b0f02c5f6cf61ad89dccd831937649c6740035c', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
         ];
     }
     initDatepicker(input) {

package/dist/components/cat-dropdown2.js

@@ -1056,12 +1056,13 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.catClose = createEvent(this, "catClose", 7);
         this.id = nextUniqueId++;
         this._isOpen = false;
+        this.tabbableOptions = { getShadowRoot: true };
         /**
          * Tracking the origin of opening the dropdown and specify if initial focus should be set.
          * Currently we set it only when the origin is keyboard.
          * We might not need to track this in future when focus-visible support is improved across browsers
          */
-        this.hasInitialFocus = false;
+        this.isFocusVisible = false;
         /**
          * The placement of the dropdown.
          */
@@ -1078,6 +1079,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.noAutoClose = false;
         /**
          * Do not navigate focus inside the dropdown via vertical arrow keys.
+         * @deprecated use cat-menu
          */
         this.arrowNavigation = 'vertical';
         /**
@@ -1100,6 +1102,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.noInitialFocus = false;
         /**
          * Trigger element will not receive focus when dropdown is closed.
+         * @deprecated the property can be removed, focus is arranged internally
          */
         this.noReturnFocus = false;
         /**
@@ -1107,6 +1110,12 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
          * Can be useful when trigger is rendered dynamically.
          */
         this.delayedTriggerInit = false;
+        /**
+         * Whether the focus should be trapped inside dropdown popup.
+         * Use it only when the dropdown popup content has role dialog.
+         * @internal
+         */
+        this.focusTrap = true;
     }
     /**
      * Whether the dropdown is open.
@@ -1117,7 +1126,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
     }
     clickHandler(event) {
         if (!this.trigger && this.delayedTriggerInit) {
-            this.hasInitialFocus = this.isEventOriginFromKeyboard(event.detail);
+            this.isFocusVisible = this.isEventOriginFromKeyboard(event.detail);
             this.initTrigger();
             this.toggle();
         }
@@ -1133,6 +1142,21 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
             this.close();
         }
     }
+    keydownHandler(event) {
+        if (this.isOpen && event.key === 'Escape') {
+            this.close();
+        }
+    }
+    globalClickHandler(event) {
+        if (this.isOpen &&
+            !this.noAutoClose &&
+            // check if click was outside of the dropdown content
+            !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'))) {
+            this.close();
+        }
+    }
     /**
      * Toggles the dropdown.
      */
@@ -1152,58 +1176,55 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         }
         this._isOpen = null;
         this.content.style.display = 'block';
-        this.hasInitialFocus = isFocusVisible ?? this.hasInitialFocus;
+        this.isFocusVisible = isFocusVisible ?? this.isFocusVisible;
         const trigger = this.anchor || this.trigger;
         if (trigger) {
             this.cleanupFloatingUi = autoUpdate(trigger, this.content, () => this.update(trigger));
         }
         // give CSS transition time to apply
-        setTimeout(() => {
+        requestAnimationFrame(() => {
             this._isOpen = true;
             this.content.classList.add('show');
             this.trigger?.setAttribute('aria-expanded', 'true');
-            this.trap = this.trap
-                ? this.trap.updateContainerElements(this.content)
-                : createFocusTrap(this.content, {
-                    tabbableOptions: {
-                        getShadowRoot: true
-                    },
-                    allowOutsideClick: true,
-                    clickOutsideDeactivates: event => !this.noAutoClose &&
-                        // check if click was outside of the dropdown content
-                        !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(),
-                    onPostActivate: () => this.catOpen.emit(),
-                    setReturnFocus: elem => (this.noReturnFocus ? false : 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;
+            if (this.focusTrap) {
+                this.trap = this.trap
+                    ? this.trap.updateContainerElements(this.content)
+                    : createFocusTrap(this.content, {
+                        tabbableOptions: this.tabbableOptions,
+                        allowOutsideClick: true,
+                        onPostActivate: () => this.catOpen.emit(),
+                        setReturnFocus: elem => (!this.isFocusVisible ? false : 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;
+                        },
+                        initialFocus: () => {
+                            return this.isFocusVisible ? undefined : false;
                         }
-                        return event.key === 'Tab' && event.shiftKey;
-                    },
-                    initialFocus: () => {
-                        return this.hasInitialFocus && !this.noInitialFocus ? undefined : false;
-                    }
-                });
-            this.trap.activate();
+                    });
+                this.trap.activate();
+            }
+            else {
+                this.catOpen.emit();
+            }
         });
     }
     /**
      * Closes the dropdown.
      */
-    async close() {
+    async close(shouldReturnFocus = this.isFocusVisible) {
         if (!this._isOpen) {
             return; // busy or closed
         }
@@ -1211,6 +1232,9 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.trap?.deactivate();
         this.trap = undefined;
         this.content.classList.remove('show');
+        if (shouldReturnFocus) {
+            this.trigger?.focus();
+        }
         // give CSS transition time to apply
         setTimeout(() => {
             this._isOpen = false;
@@ -1235,7 +1259,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.cleanupFloatingUi = undefined;
     }
     render() {
-        return (h(Host, { key: '0b02719eae82077fd11262620f260c86f6ef5854' }, h("slot", { key: '809f803bad06e9b9dfab850809709191f8a3bc2e', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'b6e32999e3cb4e4e4e9a4c534a22a17ae7708486', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '47592ef2faeb4a5ba26185a98952c56c3b0804f6', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '8b6ba45f55abf7983a66550f161652e5a40205d7', name: "content" }))));
+        return (h(Host, { key: '865e31b60994932637b3530afe48b2317868ecd3' }, h("slot", { key: '393e1697e6dd728bb2f3c8294370de7deaba95d1', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: '2bd3a3528005bebf7dcba84e52f5b6f6786a7f50', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '74ae76bb604041881af0247002d6a383dc386f50', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '6fd6acedb2c4044edd8f09f1418916e5086465fc', name: "content" }))));
     }
     get contentId() {
         return `cat-dropdown-${this.id}`;
@@ -1247,7 +1271,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.trigger.setAttribute('aria-expanded', 'false');
         this.trigger.setAttribute('aria-controls', this.contentId);
         this.trigger.addEventListener('click', (event) => {
-            this.hasInitialFocus = this.isEventOriginFromKeyboard(event);
+            this.isFocusVisible = this.isEventOriginFromKeyboard(event);
             this.toggle();
         });
     }
@@ -1325,7 +1349,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
             computePosition(anchorElement, this.content, {
                 strategy: 'fixed',
                 placement: this.placement,
-                middleware: [offset(CatDropdown.OFFSET), ...middleware, ...resize]
+                middleware: [...middleware, ...resize]
             }).then(({ x, y, placement }) => {
                 this.content.dataset.placement = placement;
                 Object.assign(this.content.style, {
@@ -1350,10 +1374,11 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         "isOpen": [2052, "is-open"],
         "noReturnFocus": [4, "no-return-focus"],
         "delayedTriggerInit": [4, "delayed-trigger-init"],
+        "focusTrap": [4, "focus-trap"],
         "toggle": [64],
         "open": [64],
         "close": [64]
-    }, [[0, "catClick", "clickHandler"]]]);
+    }, [[0, "catClick", "clickHandler"], [0, "keydown", "keydownHandler"], [8, "click", "globalClickHandler"]]]);
 CatDropdown.OFFSET = 4;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {