@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/esm/pds-dropdown-menu.entry.js

@@ -0,0 +1,451 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-4_RRPJTO.js';
+import { s as setAttributesIfChanged } from './attributes-CD8knu3a.js';
+import { l as limitRestores } from './keep-hydrated-BgNaWLoS.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as size } from './floating-ui.dom-Cuc0DYlm.js';
+
+const pdsDropdownMenuCss = () => `:host{display:block}.is-hidden{display:none}.pds-dropdown-menu--panel{background-color:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-xs);left:var(--pine-dimension-none);min-width:170px;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;padding:var(--pine-dimension-xs);position:fixed;z-index:var(--pine-z-index-overlay)}:host-context([data-theme=dark]) .pds-dropdown-menu--panel{border:var(--pine-border)}.pds-dropdown-menu__header{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border);-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs);margin-inline:calc(var(--pine-dimension-xs) * -1);-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs);padding-inline:calc(var(--pine-dimension-xs) * 2 + var(--pine-border-width) + 2px);text-align:start}.pds-dropdown-menu__items{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}::slotted(a:not([slot=header])),::slotted(button:not([slot=header])){-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs) !important;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text) !important;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium) !important;gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px) !important;padding:var(--pine-dimension-xs) !important;text-align:start;text-decoration:none !important;width:calc(100% - (var(--pine-border-width) + 2px) * 2)}::slotted(.destructive:not([slot=header])){color:var(--pine-color-danger) !important}::slotted([aria-disabled=true]:not([slot=header])),::slotted([disabled]:not([disabled=false]):not([slot=header])){cursor:not-allowed;opacity:0.5;pointer-events:none}`;
+
+const PdsDropdownMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isOpen = false;
+        this.menuItems = [];
+        this.cleanupAutoUpdate = null;
+        // Counts each opening, so a position worked out for an earlier opening is ignored.
+        this.openCount = 0;
+        this.triggerObserver = null;
+        this.triggerVisibility = null;
+        this.currentFocusIndex = -1;
+        this.hasHeader = false;
+        /**
+         * The placement of the dropdown panel relative to the trigger.
+         */
+        this.placement = 'bottom-start';
+        this.handleTriggerSlotChange = (event) => {
+            this.slotEl = event.target;
+            // Get all elements assigned to this slot
+            const assignedElements = this.slotEl.assignedElements();
+            this.triggerEl = assignedElements[0];
+            if (this.triggerEl) {
+                this.triggerEl.onclick = this.handleClick;
+                this.syncTriggerAria();
+            }
+            this.observeTrigger();
+        };
+        // Writes the trigger's ARIA from the menu's state, so the observer's own callback doesn't loop.
+        this.syncTriggerAria = () => {
+            if (!this.triggerEl)
+                return false;
+            return setAttributesIfChanged(this.triggerEl, { 'aria-haspopup': 'menu', 'aria-expanded': String(this.isOpen) });
+        };
+        this.handleHeaderSlotChange = (event) => {
+            this.hasHeader = event.target.assignedElements().length > 0;
+        };
+        this.handleSlotChange = (event) => {
+            this.slotEl = event.target;
+            // Get all elements assigned to this slot
+            const assignedElements = this.slotEl.assignedElements();
+            // Allowed elements: pds-dropdown-menu-item, pds-dropdown-menu-separator, <a>, <button>
+            // Raw <a> and <button> elements are allowed for edge cases requiring native browser/framework
+            // behavior (e.g., Rails UJS, Turbo) that cannot work through Shadow DOM.
+            const allowedTags = ['pds-dropdown-menu-item', 'pds-dropdown-menu-separator', 'a', 'button'];
+            const invalidElements = assignedElements.filter(el => !allowedTags.includes(el.tagName.toLowerCase()));
+            if (invalidElements.length > 0) {
+                const invalidTags = invalidElements.map(el => el.tagName.toLowerCase()).join(', ');
+                console.warn(`pds-dropdown-menu: Unexpected element(s) found: ${invalidTags}. ` +
+                    `Expected: ${allowedTags.join(', ')}`);
+            }
+            // Store all focusable items for keyboard navigation
+            // This includes pds-dropdown-menu-item components and raw <a>/<button> elements
+            this.menuItems = assignedElements.filter(el => {
+                const tag = el.tagName.toLowerCase();
+                return tag === 'pds-dropdown-menu-item' || tag === 'a' || tag === 'button';
+            });
+        };
+        // Toggle dropdown open/closed
+        this.toggleDropdown = () => {
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                this.openDropdown();
+            }
+            else {
+                this.closeDropdown();
+            }
+        };
+        // Open the dropdown and position it
+        this.openDropdown = () => {
+            var _a;
+            const opening = ++this.openCount;
+            const updatePosition = () => {
+                computePosition(this.triggerEl, this.panelEl, {
+                    placement: this.placement,
+                    strategy: 'fixed',
+                    middleware: [
+                        offset(6),
+                        flip(),
+                        shift({ padding: 5 }),
+                        size({ padding: 5, apply: ({ availableHeight, elements }) => this.capPanelHeight(elements.floating, availableHeight) }),
+                    ],
+                }).then(({ x, y }) => {
+                    if (!this.isOpen || opening !== this.openCount)
+                        return;
+                    Object.assign(this.panelEl.style, {
+                        left: `${x}px`,
+                        top: `${y}px`,
+                    });
+                });
+            };
+            // Initial position
+            updatePosition();
+            // Set up auto-update for window resize and scroll
+            this.cleanupAutoUpdate = autoUpdate(this.triggerEl, this.panelEl, updatePosition);
+            this.watchTriggerVisibility();
+            (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box').classList.remove('is-hidden');
+            this.isOpen = true;
+            this.syncTriggerAria();
+        };
+        // Close the dropdown. Closed because its trigger left the view, focus from the menu still goes back
+        // to the trigger, so it isn't lost, but without scrolling the trigger back into view. The next Tab
+        // carries on from there.
+        this.closeDropdown = ({ preventScroll = false } = {}) => {
+            var _a;
+            (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box').classList.add('is-hidden');
+            this.isOpen = false;
+            // Clean up auto-update
+            if (this.cleanupAutoUpdate) {
+                this.cleanupAutoUpdate();
+                this.cleanupAutoUpdate = null;
+            }
+            this.stopWatchingTriggerVisibility();
+            this.syncTriggerAria();
+            // Reset focus index
+            this.currentFocusIndex = -1;
+            // Return focus to trigger
+            if (this.isFocusInMenu()) {
+                this.focusTrigger(preventScroll);
+            }
+        };
+        // Handle click on the trigger element
+        this.handleClick = () => {
+            this.toggleDropdown();
+        };
+    }
+    componentWillLoad() {
+        this.hasHeader = Array.from(this.host.children).some(el => el.getAttribute('slot') === 'header');
+    }
+    componentDidRender() {
+        var _a;
+        this.panelEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box');
+    }
+    connectedCallback() {
+        // Moved within the page, the trigger slot doesn't change, so watch the same trigger again, and
+        // fix anything changed while the menu was detached and unobserved.
+        this.observeTrigger();
+        this.syncTriggerAria();
+    }
+    disconnectedCallback() {
+        var _a;
+        // Clean up auto-update when component is removed from DOM
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = null;
+        }
+        (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerObserver = null;
+        this.stopWatchingTriggerVisibility();
+        // The menu was detached, so a position still being worked out for it is dropped. The menu
+        // itself stays open.
+        this.openCount++;
+    }
+    // The trigger is the consumer's element, so anything can rewrite its attributes (a Turbo morph
+    // matches it to server HTML that has no ARIA). Put Pine's values back when that happens.
+    observeTrigger() {
+        var _a;
+        (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerObserver = null;
+        if (!this.triggerEl || typeof MutationObserver === 'undefined')
+            return;
+        // Capped against a script that keeps undoing it; opening and closing still write it directly.
+        this.triggerObserver = new MutationObserver(limitRestores(this.syncTriggerAria, 'pds-dropdown-menu: stopped restoring its trigger ARIA, as another script keeps changing it. It may be wrong until the menu opens or closes.', this.triggerEl));
+        this.triggerObserver.observe(this.triggerEl, {
+            attributes: true,
+            attributeFilter: ['aria-haspopup', 'aria-expanded'],
+        });
+    }
+    // The panel is fixed, so a menu taller than the room beside its trigger would run off the window
+    // with no way to reach its last items. It's capped to that room and scrolls inside itself. A
+    // smaller max-height set through the menu-panel part is kept. The cap is important, as a
+    // ::part() rule outside the shadow root otherwise beats the panel's own inline style.
+    //
+    // Removing `max-height` lifts the panel's own scroll constraint, so a layout read in between
+    // (`getComputedStyle`) can commit a frame with nothing left to scroll, and the browser resets
+    // `scrollTop` to 0. This runs on every `autoUpdate` pass, including a small ancestor scroll that
+    // leaves the trigger in view, so a menu scrolled partway down would otherwise jump back to the
+    // top on its own. Restoring `scrollTop` afterward keeps the user's place; the browser clamps it
+    // automatically if the new max-height is shorter than before.
+    capPanelHeight(panel, availableHeight) {
+        const { scrollTop } = panel;
+        panel.style.removeProperty('max-height');
+        const partMaxHeight = getComputedStyle(panel).maxHeight;
+        const room = `${Math.max(0, availableHeight)}px`;
+        panel.style.setProperty('max-height', partMaxHeight === 'none' ? room : `min(${partMaxHeight}, ${room})`, 'important');
+        panel.scrollTop = scrollTop;
+    }
+    // Once the trigger is fully out of view, scrolled or clipped by any container or the window, the
+    // menu closes rather than float away from it, much as a native select's list does. An
+    // IntersectionObserver measures against the layout viewport, so panning a pinch-zoomed page
+    // doesn't close it, as Floating UI's hide() would.
+    watchTriggerVisibility() {
+        this.stopWatchingTriggerVisibility();
+        if (typeof IntersectionObserver === 'undefined')
+            return;
+        // Only a trigger seen in view this opening closes the menu when it leaves.
+        let triggerSeen = false;
+        let broughtIntoView = false;
+        this.triggerVisibility = new IntersectionObserver((entries) => {
+            if (!this.isOpen)
+                return;
+            if (entries[entries.length - 1].isIntersecting) {
+                triggerSeen = true;
+            }
+            else if (triggerSeen) {
+                this.closeDropdown({ preventScroll: true });
+            }
+            else if (!broughtIntoView) {
+                // Opened with its trigger out of view, from the keyboard after an earlier close or from a
+                // script, the trigger is scrolled into view so the menu opens beside it. A trigger that
+                // still can't be seen leaves the menu open.
+                broughtIntoView = true;
+                this.triggerEl.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            }
+        });
+        this.triggerVisibility.observe(this.triggerEl);
+    }
+    stopWatchingTriggerVisibility() {
+        var _a;
+        (_a = this.triggerVisibility) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerVisibility = null;
+    }
+    // Outside clicks and scripted closes leave focus where it is; only focus in the menu or on its trigger returns.
+    isFocusInMenu() {
+        const focused = this.host.getRootNode().activeElement;
+        return focused != null && this.host.contains(focused);
+    }
+    // A trigger whose host can't take focus itself, such as pds-chip, passes it to the control inside.
+    focusTrigger(preventScroll = false) {
+        var _a, _b;
+        this.triggerEl.focus({ preventScroll });
+        if (this.host.getRootNode().activeElement === this.triggerEl)
+            return;
+        (_b = (_a = this.triggerEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [href], [tabindex]:not([tabindex="-1"])')) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll });
+    }
+    // Check if a menu item is disabled (handles both component and raw elements)
+    isItemDisabled(item) {
+        const tagName = item.tagName.toLowerCase();
+        if (tagName === 'pds-dropdown-menu-item') {
+            return item.disabled;
+        }
+        else if (tagName === 'button') {
+            return item.disabled;
+        }
+        else if (tagName === 'a') {
+            return item.getAttribute('aria-disabled') === 'true';
+        }
+        return false;
+    }
+    // Get the index of the currently focused menu item
+    getFocusedItemIndex() {
+        const activeElement = document.activeElement;
+        if (!activeElement)
+            return -1;
+        // For raw elements, check direct match
+        // For pds-dropdown-menu-item, also check if the active element is inside the shadow root
+        return this.menuItems.findIndex(item => {
+            if (item === activeElement)
+                return true;
+            // Check if activeElement is inside the item's shadow root (for pds-dropdown-menu-item)
+            if (item.tagName.toLowerCase() === 'pds-dropdown-menu-item') {
+                const shadowRoot = item.shadowRoot;
+                if (shadowRoot === null || shadowRoot === void 0 ? void 0 : shadowRoot.contains(activeElement))
+                    return true;
+            }
+            return false;
+        });
+    }
+    // Focus a specific menu item by index
+    focusItemByIndex(index) {
+        var _a, _b, _c, _d, _e;
+        if (index >= 0 && index < this.menuItems.length) {
+            this.currentFocusIndex = index;
+            const item = this.menuItems[index];
+            const tagName = item.tagName.toLowerCase();
+            if (tagName === 'pds-dropdown-menu-item') {
+                // For pds-dropdown-menu-item, focus the inner element
+                const menuItem = item;
+                const innerControl = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [role="menuitem"]');
+                const innerLink = ((_d = (_c = (_b = menuItem.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('pds-link')) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('a'))
+                    || ((_e = menuItem.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('a'));
+                if (innerControl) {
+                    innerControl.focus();
+                }
+                else if (innerLink) {
+                    innerLink.focus();
+                }
+                else {
+                    // Fallback to focusing the host
+                    menuItem.focus();
+                }
+            }
+            else {
+                // For raw <a> or <button> elements, focus directly
+                item.focus();
+            }
+        }
+    }
+    // Focus the next menu item
+    focusNextItem() {
+        let nextIndex = (this.currentFocusIndex + 1) % this.menuItems.length;
+        // Skip disabled items
+        let attempts = 0;
+        const maxAttempts = this.menuItems.length;
+        while (attempts < maxAttempts && this.isItemDisabled(this.menuItems[nextIndex])) {
+            nextIndex = (nextIndex + 1) % this.menuItems.length;
+            attempts++;
+        }
+        // Only focus if we found a non-disabled item
+        if (attempts < maxAttempts) {
+            this.focusItemByIndex(nextIndex);
+        }
+    }
+    // Focus the previous menu item
+    focusPreviousItem() {
+        let prevIndex = this.currentFocusIndex <= 0
+            ? this.menuItems.length - 1
+            : this.currentFocusIndex - 1;
+        // Skip disabled items
+        let attempts = 0;
+        const maxAttempts = this.menuItems.length;
+        while (attempts < maxAttempts && this.isItemDisabled(this.menuItems[prevIndex])) {
+            prevIndex = prevIndex <= 0 ? this.menuItems.length - 1 : prevIndex - 1;
+            attempts++;
+        }
+        // Only focus if we found a non-disabled item
+        if (attempts < maxAttempts) {
+            this.focusItemByIndex(prevIndex);
+        }
+    }
+    // Unlike the arrow keys, Tab stops at either end of the menu instead of wrapping.
+    adjacentEnabledIndex(fromIndex, step) {
+        for (let index = fromIndex + step; index >= 0 && index < this.menuItems.length; index += step) {
+            if (!this.isItemDisabled(this.menuItems[index]))
+                return index;
+        }
+        return -1;
+    }
+    // An enabled item can still refuse focus (hidden, or a link with no href), so each one is tried in turn.
+    focusAdjacentItem(fromIndex, step) {
+        for (let index = this.adjacentEnabledIndex(fromIndex, step); index !== -1; index = this.adjacentEnabledIndex(index, step)) {
+            this.focusItemByIndex(index);
+            if (this.getFocusedItemIndex() === index)
+                return true;
+        }
+        return false;
+    }
+    // Escape is taken in document's capture phase, before a modal around the menu hears it on
+    // document and closes too.
+    handleEscapeKeyDown(event) {
+        if (!this.isOpen || event.key !== 'Escape' || event.defaultPrevented)
+            return;
+        event.preventDefault();
+        this.closeDropdown();
+    }
+    // Taken in the capture phase, so a modal or popover around the menu that traps Tab finds the key
+    // already handled, or focus back on the trigger with the items hidden.
+    handleTabKeyDown(event) {
+        if (!this.isOpen || event.key !== 'Tab' || event.defaultPrevented)
+            return;
+        const currentIndex = this.getFocusedItemIndex();
+        if (currentIndex === -1) {
+            // The menu sits after the trigger, so Shift+Tab from the trigger leaves it behind. So does Shift+Tab
+            // from outside the menu, where focus stays after a mouse open in Safari.
+            if (event.shiftKey && (document.activeElement === this.triggerEl || !this.isFocusInMenu()))
+                this.closeDropdown();
+            return;
+        }
+        if (this.focusAdjacentItem(currentIndex, event.shiftKey ? -1 : 1)) {
+            event.preventDefault();
+            return;
+        }
+        // Past either end, closing moves focus to the trigger. Shift+Tab stays there; Tab carries on past it.
+        if (event.shiftKey)
+            event.preventDefault();
+        this.closeDropdown();
+    }
+    // Handle keyboard events for the dropdown
+    handleKeyDown(event) {
+        if (!this.isOpen)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusNextItem();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusPreviousItem();
+                break;
+            case 'Home':
+                event.preventDefault();
+                if (this.menuItems.length > 0) {
+                    // Find first non-disabled item
+                    let firstIndex = 0;
+                    while (firstIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstIndex])) {
+                        firstIndex++;
+                    }
+                    if (firstIndex < this.menuItems.length) {
+                        this.focusItemByIndex(firstIndex);
+                    }
+                }
+                break;
+            case 'End':
+                event.preventDefault();
+                if (this.menuItems.length > 0) {
+                    // Find last non-disabled item
+                    let lastIndex = this.menuItems.length - 1;
+                    while (lastIndex >= 0 && this.isItemDisabled(this.menuItems[lastIndex])) {
+                        lastIndex--;
+                    }
+                    if (lastIndex >= 0) {
+                        this.focusItemByIndex(lastIndex);
+                    }
+                }
+                break;
+            case 'Tab': {
+                // Tab from an item is handled in handleTabKeyDown; from anywhere else it moves into the menu.
+                if (event.shiftKey || this.getFocusedItemIndex() !== -1)
+                    break;
+                if (this.focusAdjacentItem(-1, 1)) {
+                    event.preventDefault();
+                }
+                else {
+                    // With no item to move to, Tab carries on past the menu, as it does past the last item.
+                    this.closeDropdown();
+                }
+                break;
+            }
+        }
+    }
+    // Handle clicks outside the dropdown to close it
+    handleWindowClick(event) {
+        if (this.isOpen && !this.host.contains(event.target) && event.target !== this.triggerEl) {
+            this.closeDropdown();
+        }
+    }
+    render() {
+        return (h(Host, { key: '3baa07d7761a581606704b5e79e68d7bc585ff36' }, h("slot", { key: '527afc60b7b6f7c869c62924fd00791de2538955', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '2efeff541331bc0b39ed271984c680e14892ed0b', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, h("div", { key: '591d61a9c12e10aef64638f1f51073321bddae69', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, h("slot", { key: 'c3a7fd69e0074be99508ae6b6c14bbd78fbc1f03', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '84c4f0cb77eadc86a5bb2b59c4b33f8691d2adfb', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: '8c16bfd158a2be6009545562940c38ca433e1c47', onSlotchange: this.handleSlotChange })))));
+    }
+    get host() { return getElement(this); }
+};
+PdsDropdownMenu.style = pdsDropdownMenuCss();
+
+export { PdsDropdownMenu as pds_dropdown_menu };