@haiilo/catalyst 14.4.0 → 14.5.0

package/dist/collection/components/cat-menu/cat-menu.js

@@ -0,0 +1,652 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A menu component that provides a dropdown with a built-in configurable trigger button
+ * and proper ARIA semantics and keyboard navigation for menu items.
+ *
+ * The trigger is always a cat-button with sensible defaults but fully configurable
+ * through trigger-specific props.
+ */
+export class CatMenu {
+    constructor() {
+        this.catMenuItems = [];
+        /**
+         * The placement of the dropdown.
+         */
+        this.placement = 'bottom-start';
+        /**
+         * The arrow key navigation direction for menu items.
+         */
+        this.arrowNavigation = 'vertical';
+        /**
+         * The trigger button variant.
+         */
+        this.triggerVariant = 'text';
+        /**
+         * The trigger button size.
+         */
+        this.triggerSize = 'm';
+        /**
+         * The color palette of the trigger button.
+         */
+        this.triggerColor = 'secondary';
+        /**
+         * Disable the menu.
+         */
+        this.disabled = false;
+        /**
+         * Make the dropdown match the width of the reference regardless of its
+         * contents. Note that this only applies to the minimum width of the
+         * dropdown. The maximum width is still limited by the viewport.
+         */
+        this.justify = false;
+        /**
+         * Do not change the size of the dropdown to ensure it isn’t too big to fit
+         * in the viewport (or more specifically, its clipping context).
+         */
+        this.noResize = false;
+        /**
+         * Allow overflow when dropdown is open.
+         */
+        this.overflow = false;
+        /**
+         * Whether the dropdown trigger should be initialized only before first opening.
+         * Can be useful when trigger is rendered dynamically.
+         */
+        this.delayedTriggerInit = false;
+        this.onTriggerClick = (event) => {
+            this.catTriggerClick.emit(event.detail);
+        };
+        this.onMenuOpen = (event) => {
+            this.catOpen.emit(event.detail);
+            // Set focus to first non-disabled menu item when menu opens
+            requestAnimationFrame(() => {
+                if (!this.isMenuItemInFocus()) {
+                    const firstEnabledItem = this.catMenuItems.find(item => !item.disabled);
+                    firstEnabledItem?.doFocus();
+                }
+            });
+        };
+    }
+    onFocusOut() {
+        if (!this.dropdown?.isOpen) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            if (!this.isMenuItemInFocus()) {
+                this.dropdown?.close(false);
+            }
+        });
+    }
+    getDeepActiveElement() {
+        let active = document.activeElement;
+        while (active?.shadowRoot?.activeElement && active.nodeName !== 'CAT-MENU-ITEM') {
+            active = active.shadowRoot.activeElement;
+        }
+        return active;
+    }
+    onDocumentKeydown(event) {
+        const navigationKeys = this.arrowNavigation === 'horizontal'
+            ? ['ArrowRight', 'ArrowLeft', 'Home', 'End']
+            : ['ArrowDown', 'ArrowUp', 'Home', 'End'];
+        if (!this.dropdown?.isOpen || !navigationKeys.includes(event.key)) {
+            return;
+        }
+        const targetElements = this.catMenuItems.filter(item => !item.disabled);
+        if (!targetElements.length) {
+            return;
+        }
+        const activeIdx = targetElements.findIndex(item => this.getDeepActiveElement() === item);
+        let targetIdx;
+        if (event.key === 'Home') {
+            targetIdx = 0;
+        }
+        else if (event.key === 'End') {
+            targetIdx = targetElements.length - 1;
+        }
+        else {
+            const forwardKey = this.arrowNavigation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+            const activeOff = event.key === forwardKey ? 1 : -1;
+            targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
+        }
+        targetElements[targetIdx].doFocus();
+        event.preventDefault();
+    }
+    componentDidLoad() {
+        this.syncMenuItems();
+        this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-MENU-ITEM') && this.syncMenuItems());
+        this.mutationObserver?.observe(this.hostElement, {
+            childList: true,
+            attributes: true,
+            subtree: true
+        });
+    }
+    disconnectedCallback() {
+        this.mutationObserver?.disconnect();
+    }
+    /**
+     * Opens the menu.
+     */
+    async open() {
+        await this.dropdown?.open();
+    }
+    /**
+     * Closes the menu.
+     */
+    async close() {
+        await this.dropdown?.close();
+    }
+    /**
+     * Toggles the menu.
+     */
+    async toggle() {
+        await this.dropdown?.toggle();
+    }
+    isMenuItemInFocus() {
+        const activeElement = this.getDeepActiveElement();
+        const isInMenu = activeElement && this.catMenuItems.some(item => activeElement === item);
+        return !!(activeElement && isInMenu);
+    }
+    syncMenuItems() {
+        this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));
+    }
+    render() {
+        return (h(Host, { key: '1659f098d4d11e61119cde4f290bb89bf450f9d9' }, h("cat-dropdown", { key: 'a5ca6e28245167c0f208d1846c9f93a75991dee1', ref: el => (this.dropdown = el), focusTrap: false, placement: this.placement, justify: this.justify, arrowNavigation: "none", noResize: this.noResize, overflow: this.overflow, delayedTriggerInit: this.delayedTriggerInit, onCatOpen: this.onMenuOpen, onCatClose: () => this.catClose.emit() }, h("cat-button", { key: '63986a7d31784fdd59de48c79a5b5777cf198b94', slot: "trigger", part: "trigger", variant: this.triggerVariant, size: this.triggerSize, icon: this.triggerIcon ?? (this.triggerLabel === undefined ? 'more-horizontal-filled' : undefined), iconOnly: this.triggerIconOnly ?? this.triggerLabel === undefined, color: this.triggerColor, a11yLabel: this.triggerA11yLabel ?? this.triggerLabel, class: this.triggerClass, testId: this.triggerTestId, nativeAttributes: {
+                ...this.triggerNativeAttributes,
+                'aria-haspopup': 'menu'
+            }, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && h("slot", { key: 'c10341a8bec971b814ec88044a89aa6752f3be23', name: "trigger-label" }, this.triggerLabel)), h("nav", { key: '265da5937ea993d27ccec21f9c0bc84439208d6c', role: "menu", slot: "content", class: "cat-menu-list", "aria-orientation": this.arrowNavigation }, h("ul", { key: '9b8edcb90028b39690be08961f25ea8c7a769752' }, h("slot", { key: 'f30590ff83386f30ba4539e76d621a80b0aefffd' }))))));
+    }
+    static get is() { return "cat-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cat-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cat-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../node_modules/.pnpm/@floating-ui+dom@1.6.13/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
+            },
+            "arrowNavigation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The arrow key navigation direction for menu items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrow-navigation",
+                "defaultValue": "'vertical'"
+            },
+            "triggerVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'filled' | 'outlined' | 'text'",
+                    "resolved": "\"filled\" | \"outlined\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The trigger button variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-variant",
+                "defaultValue": "'text'"
+            },
+            "triggerSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xs' | 's' | 'm' | 'l' | 'xl'",
+                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The trigger button size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-size",
+                "defaultValue": "'m'"
+            },
+            "triggerIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The trigger button icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-icon"
+            },
+            "triggerIconOnly": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | Breakpoint",
+                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\" | boolean | undefined",
+                    "references": {
+                        "Breakpoint": {
+                            "location": "import",
+                            "path": "../../utils/breakpoints",
+                            "id": "src/utils/breakpoints.ts::Breakpoint"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show only the icon in the trigger button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-icon-only"
+            },
+            "triggerLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The trigger button label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-label"
+            },
+            "triggerColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
+                    "resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color palette of the trigger button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-color",
+                "defaultValue": "'secondary'"
+            },
+            "triggerA11yLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The trigger button accessibility label. If not set, falls back to triggerLabel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-a-1-1y-label"
+            },
+            "triggerClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional CSS class for the trigger button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-class"
+            },
+            "triggerTestId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Test ID for the trigger button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-test-id"
+            },
+            "triggerNativeAttributes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string }",
+                    "resolved": "undefined | { [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Native attributes for the trigger button."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the menu."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "justify": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make the dropdown match the width of the reference regardless of its\ncontents. Note that this only applies to the minimum width of the\ndropdown. The maximum width is still limited by the viewport."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "justify",
+                "defaultValue": "false"
+            },
+            "noResize": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Do not change the size of the dropdown to ensure it isn\u2019t too big to fit\nin the viewport (or more specifically, its clipping context)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-resize",
+                "defaultValue": "false"
+            },
+            "overflow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow overflow when dropdown is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overflow",
+                "defaultValue": "false"
+            },
+            "delayedTriggerInit": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dropdown trigger should be initialized only before first opening.\nCan be useful when trigger is rendered dynamically."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "delayed-trigger-init",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "catOpen",
+                "name": "catOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dropdown is opened."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "catClose",
+                "name": "catClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dropdown is closed."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "catTriggerClick",
+                "name": "catTriggerClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the trigger button is clicked."
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the menu.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the menu.",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the menu.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get listeners() {
+        return [{
+                "name": "focusout",
+                "method": "onFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onDocumentKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=cat-menu.js.map