@haiilo/catalyst 14.0.3 → 14.0.4

package/dist/esm/cat-alert_30.entry.js

@@ -7718,6 +7718,10 @@ const CatDropdown = class {
         this._isOpen = null;
         this.content.style.display = 'block';
         this.hasInitialFocus = isFocusVisible ?? this.hasInitialFocus;
+        const trigger = this.anchor || this.trigger;
+        if (trigger) {
+            this.cleanupFloatingUi = autoUpdate(trigger, this.content, () => this.update(trigger));
+        }
         // give CSS transition time to apply
         setTimeout(() => {
             this._isOpen = true;
@@ -7778,6 +7782,8 @@ const CatDropdown = class {
             this.content.classList.remove('show');
             this.content.style.display = '';
             this.trigger?.setAttribute('aria-expanded', 'false');
+            this.cleanupFloatingUi?.();
+            this.cleanupFloatingUi = undefined;
             this.catClose.emit();
         }, timeTransitionS);
     }
@@ -7790,9 +7796,11 @@ const CatDropdown = class {
     disconnectedCallback() {
         this.trap?.deactivate();
         this.trap = undefined;
+        this.cleanupFloatingUi?.();
+        this.cleanupFloatingUi = undefined;
     }
     render() {
-        return (h(Host, { key: '4e91635ab4bc80145586164ae41f48dca6198779' }, h("slot", { key: 'dc974d5f288760ed8cca3eb3b0266a6d3b6fcec2', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'd9bf7cad85fda295ccad2fadcac8776068e9da22', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '2c2c5b04e05c28e01c3eef6d641542a39ee1554b', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '6d64a56876aa01e81759a9260c8e7f9f65c20742', name: "content" }))));
+        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" }))));
     }
     get contentId() {
         return `cat-dropdown-${this.id}`;
@@ -7807,18 +7815,12 @@ const CatDropdown = class {
             this.hasInitialFocus = this.isEventOriginFromKeyboard(event);
             this.toggle();
         });
-        if (!this.anchor) {
-            autoUpdate(this.trigger, this.content, () => this.update(this.trigger));
-        }
     }
     isEventOriginFromKeyboard(event) {
         return event.detail === 0;
     }
     initAnchor() {
         this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];
-        if (this.anchor) {
-            autoUpdate(this.anchor, this.content, () => this.update(this.anchor));
-        }
     }
     findTrigger() {
         let trigger;
@@ -9182,9 +9184,6 @@ const CatSelect = class {
         if (this.input) {
             autosizeInput(this.input, { minWidth: true });
         }
-        if (this.trigger && this.dropdown) {
-            autoUpdate(this.trigger, this.dropdown, () => this.update());
-        }
     }
     componentWillLoad() {
         this.onErrorsChanged(this.errors, undefined, false);
@@ -9375,18 +9374,18 @@ const CatSelect = class {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: 'cce259c5f7b06306c1f336635c270de82e98064e' }, h("div", { key: 'a2949af92f006706e687564718aa20338b3e0f63', class: {
+        return (h(Host, { key: '044a13b28c3c3d3fcb5b06efa53d489783ae9698' }, h("div", { key: 'b540d0b58849b8b401c611dfa08da42f45a7953c', class: {
                 'select-field': true,
                 'select-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false,
                 'select-multiple': this.multiple
-            } }, h("div", { key: 'eee1e60b3e1e09135935a0f7e7a093ba0ff6ee41', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '94948c264228e044642651a0d560457703e5a983', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: 'bd5ba65749fac9293d3209793f081fa9ac4a162f', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'fca2150e151340e5ef5c10616c8e8c20654adca7', name: "label" })) || this.label, h("div", { key: '37d9af2e26316942d92c89380393a21f824c6e68', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'a692a243a43360edb4787c19ce375d2b7ef2f633', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'f38a61c19e758801fc64441c574b5dc886d92b43', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: '847171f206e167b9ac20d5865b5751d057c6093c', class: "select-container" }, h("div", { key: 'ae8c24288e33761373fc40aaf4092d8fe4ad6d8e', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: 'cb17665af425a0172bb204adf6d24cc76a4bcf79', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
+            } }, h("div", { key: '3864749c06c0aa54df1912f90636094dcdd4a229', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'b2e64f375a8d2e9430007b548f468055a1a83b9b', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: '1d09f458ed23045ecbd3ca3b9bb2fa5740f6c4e1', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '7c569d0f97e2c48d6515e051dd8098003b0dc2c2', name: "label" })) || this.label, h("div", { key: 'f3c8709ea17c26d65e41ceb505af51dac81dda37', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'f2cc0d4a5fd0d815a1087b7f2b1c55c73ca36e93', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'beb3aaaf8261978be7895a1580a42f25f65ef5e7', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: '23a30b437dca6aea6d6f01156dc6c56faae3912f', class: "select-container" }, h("div", { key: '146509fd8146b3afa9c5157c7a37198c810330d7', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: 'f9f8b2cc0914ba4a7151c580f9e9eda332aad35e', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
                 pill: true,
                 'select-no-open': true,
                 'select-option-active': this.state.activeSelectionIndex === i
-            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: '9dcca82150b5b32cfd38968fc21e78b1702e58ac', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", { key: 'b270d73c72c3ca14cd74c07dd9ab62b248297c40' }), this.invalid && (h("cat-icon", { key: '928306a8eb51531aca26ad0f340c3862aef3ac26', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: 'ccf158ead3c32c1376744366ccae13d32762e150', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", { key: '8af750f50e620a73f9a35c66708293e758a2786e' }), this.invalid && (h("cat-icon", { key: '114ead7c9b473945a1fb2f5774e74d75c57819f5', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
             !this.disabled &&
             !this.state.isResolving &&
-            this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: 'ab86beed53c22a5fc93ecc3c075a872fd050a173', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? catI18nRegistry.t('select.close') : catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { key: '61657538dcaa5bfed0854ccb6a30e62d6d0b3d8a', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: 'b126aaa05a2491aaa0acd854f11aa3062b8cbafd', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: 'dc897d6566fd5bf491f11f328c2574046fddf708', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: '998a9ee7eca7f9d75d4f41b5aacc4ea4ea42251c', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
+            this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: 'ece4331f89cbb9c37d9f9693800bca1320ff7f37', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? catI18nRegistry.t('select.close') : catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { key: 'd25455be1db5404a698b35d088ba0a303215a321', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: 'c58c1914f90b0fb9a7b40c4c37e2fe7d92877ab8', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: '73a6a048ba31d8f5944d4a1aa6c8c4fb96e56df2', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: '4b86961480022fd7dd0e1641fdaed8116e320090', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
             ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
             : !this.state.options.length &&
                 !this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : catI18nRegistry.t('select.empty')))))))));
@@ -9453,6 +9452,9 @@ const CatSelect = class {
     }
     show() {
         if (!this.state.isOpen && this.connector) {
+            if (this.trigger && this.dropdown) {
+                this.cleanupFloatingUi = autoUpdate(this.trigger, this.dropdown, () => this.update());
+            }
             // reconnect to reset the connection, i.e. the pagination
             this.connect(this.connector);
             this.patchState({ isOpen: true, isFirstLoading: true, options: [] });
@@ -9464,6 +9466,8 @@ const CatSelect = class {
     hide() {
         if (this.state.isOpen) {
             this.patchState({ isOpen: false, activeOptionIndex: -1 });
+            this.cleanupFloatingUi?.();
+            this.cleanupFloatingUi = undefined;
             this.catClose.emit();
             return true;
         }

package/dist/types/components/cat-dropdown/cat-dropdown.d.ts

@@ -14,6 +14,7 @@ export declare class CatDropdown {
     private content;
     private trap?;
     private _isOpen;
+    private cleanupFloatingUi?;
     /**
      * 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.

package/dist/types/components/cat-select/cat-select.d.ts

@@ -85,6 +85,7 @@ export declare class CatSelect {
     private term$;
     private more$;
     private valueChangedBySelection;
+    private cleanupFloatingUi?;
     hostElement: HTMLElement;
     connector?: CatSelectConnector;
     state: CatSelectState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiilo/catalyst",
-  "version": "14.0.3",
+  "version": "14.0.4",
   "description": "Catalyst Design System",
   "license": "MIT",
   "repository": {
@@ -39,7 +39,7 @@
     "sanitize.css": "13.0.0",
     "tabbable": "6.2.0",
     "toastify-js": "1.12.0",
-    "@haiilo/catalyst-tokens": "14.0.3"
+    "@haiilo/catalyst-tokens": "14.0.4"
   },
   "devDependencies": {
     "@babel/core": "7.28.5",