@grove-dev/starlight 0.1.9

package/components/custom/dropdown/Dropdown.astro

@@ -0,0 +1,616 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'div'> & {
+    /** When true, the dropdown will open on hover in addition to click */
+    openOnHover?: boolean;
+    /** Time in milliseconds to wait before closing when hover open is enabled (defaults to 200) */
+    closeDelay?: number;
+    children: any;
+};
+
+const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Astro.props;
+---
+
+<div
+    class:list={['starwind-dropdown', className]}
+    data-open-on-hover={openOnHover ? 'true' : undefined}
+    data-close-delay={closeDelay}
+    {...rest}
+    data-slot="dropdown"
+>
+    <slot />
+</div>
+
+<style>
+    div[data-slot='dropdown'] {
+        position: relative;
+    }
+</style>
+
+<script>
+    class DropdownHandler {
+        private dropdown: HTMLElement;
+        private trigger: HTMLElement | null;
+        private content: HTMLElement | null;
+        private items: HTMLElement[] = [];
+        private currentFocusIndex: number = -1;
+        private isOpen: boolean = false;
+        private isClosing: boolean = false;
+        private animationDuration = 150;
+        private openOnHover: boolean;
+        private closeDelay: number;
+        private closeTimerRef: number | null = null;
+        private lastOpenSource: 'keyboard' | 'mouse' = 'keyboard';
+        private lastCloseSource: 'keyboard' | 'mouse' = 'keyboard';
+        private isSubmenu: boolean;
+        private rootDropdown: HTMLElement;
+        private contentPlaceholder: Comment | null = null;
+        private cleanupAutoUpdate: (() => void) | null = null;
+        private openChildCount: number = 0;
+        private parentHandler: DropdownHandler | null = null;
+
+        constructor(dropdown: HTMLElement, dropdownIdx: number) {
+            this.dropdown = dropdown;
+            this.isSubmenu = dropdown.classList.contains('starwind-dropdown-sub');
+            this.openOnHover =
+                dropdown.getAttribute('data-open-on-hover') === 'true' || this.isSubmenu;
+            this.closeDelay = parseInt(dropdown.getAttribute('data-close-delay') || '200');
+
+            // Find the trigger and content that belong to this dropdown, avoiding nested ones
+            this.trigger = this.findOwnElement(
+                '[data-slot="dropdown-trigger"], [data-sub-trigger]'
+            );
+
+            // if trigger is set with asChild, use the first child element for trigger button
+            if (this.trigger?.hasAttribute('data-as-child')) {
+                this.trigger = this.trigger.firstElementChild as HTMLElement;
+            }
+
+            this.content = this.findOwnElement('[data-slot="dropdown-content"]');
+
+            // Resolve root dropdown before any portaling (DOM is in original state)
+            this.rootDropdown =
+                (this.dropdown.closest('.starwind-dropdown') as HTMLElement) || this.dropdown;
+
+            // Store handler reference and root dropdown on content element for lookups
+            if (this.content) {
+                (this.content as any).__dropdownHandler = this;
+                (this.content as any).__rootDropdown = this.rootDropdown;
+            }
+
+            if (!this.trigger || !this.content) return;
+
+            // Get animation duration from inline styles if available
+            const animationDurationString = this.content.style.animationDuration;
+            if (animationDurationString.endsWith('ms')) {
+                this.animationDuration = parseFloat(animationDurationString);
+            } else if (animationDurationString.endsWith('s')) {
+                this.animationDuration = parseFloat(animationDurationString) * 1000;
+            }
+
+            this.init(dropdownIdx);
+        }
+
+        private findOwnElement(selector: string): HTMLElement | null {
+            const elements = this.dropdown.querySelectorAll(selector);
+            for (const el of elements) {
+                if (el.closest('.starwind-dropdown, .starwind-dropdown-sub') === this.dropdown) {
+                    return el as HTMLElement;
+                }
+            }
+            return null;
+        }
+
+        private init(dropdownIdx: number) {
+            this.setupAccessibility(dropdownIdx);
+            this.setupEvents();
+        }
+
+        private setupAccessibility(dropdownIdx: number) {
+            if (!this.trigger || !this.content) return;
+
+            // Generate unique IDs for accessibility
+            this.trigger.id = `starwind-dropdown${dropdownIdx}-trigger`;
+            this.content.id = `starwind-dropdown${dropdownIdx}-content`;
+
+            // Set up additional ARIA attributes
+            this.trigger.setAttribute('aria-controls', this.content.id);
+            this.content.setAttribute('aria-labelledby', this.trigger.id);
+        }
+
+        private setupEvents() {
+            if (!this.trigger || !this.content) return;
+
+            // Handle trigger click
+            this.trigger.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.lastOpenSource = e.detail === 0 ? 'keyboard' : 'mouse';
+                this.toggleDropdown();
+            });
+
+            // Handle keyboard navigation on trigger
+            this.trigger.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.lastOpenSource = 'keyboard';
+                    if (this.isSubmenu) {
+                        this.openDropdown();
+                    } else {
+                        this.toggleDropdown();
+                    }
+                } else if (e.key === 'Escape' && this.isOpen) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.lastCloseSource = 'keyboard';
+                    // Close all menus in the group, focus root trigger
+                    this.rootDropdown.dispatchEvent(
+                        new CustomEvent('starwind-dropdown:close-all', {
+                            detail: { focusRoot: true },
+                        })
+                    );
+                } else if (this.isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.lastOpenSource = 'keyboard';
+                    this.updateDropdownItems();
+                    if (e.key === 'ArrowDown') {
+                        this.focusItem(0); // Focus first item when opening with arrow down
+                    } else {
+                        this.focusItem(this.items.length - 1); // Focus last item when opening with arrow up
+                    }
+                } else if (e.key === 'ArrowRight' && this.isSubmenu) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (!this.isOpen) {
+                        this.lastOpenSource = 'keyboard';
+                        this.openDropdown();
+                    } else {
+                        this.updateDropdownItems();
+                        this.focusItem(0);
+                    }
+                }
+            });
+
+            // Listen for close-all event (routed through rootDropdown to work across portaled content)
+            this.rootDropdown.addEventListener('starwind-dropdown:close-all', ((e: CustomEvent) => {
+                this.closeDropdown({ skipFocus: e.detail?.focusRoot && this.isSubmenu });
+            }) as EventListener);
+
+            // Listen for cancel-close event (routed through rootDropdown)
+            this.rootDropdown.addEventListener('starwind-dropdown:cancel-close', () => {
+                this.clearCloseTimer();
+            });
+
+            // Close dropdown when clicking outside for mouse
+            document.addEventListener('pointerdown', (e) => {
+                if (
+                    this.isOpen &&
+                    !this.dropdown.contains(e.target as Node) &&
+                    !this.content?.contains(e.target as Node) &&
+                    !this.isTargetInGroup(e.target as Node)
+                ) {
+                    if (e.button === 0 && e.ctrlKey === false && e.pointerType === 'mouse') {
+                        this.closeDropdown();
+                    }
+                }
+            });
+
+            // Handle click outside select content to close for mobile
+            document.addEventListener('click', (e) => {
+                if (
+                    this.isOpen &&
+                    !this.trigger?.contains(e.target as Node) &&
+                    !this.content?.contains(e.target as Node) &&
+                    !this.isTargetInGroup(e.target as Node)
+                ) {
+                    this.closeDropdown();
+                }
+            });
+
+            // Handle keyboard navigation and item selection within dropdown
+            this.content.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    // Close all menus in the group, focus root trigger
+                    this.rootDropdown.dispatchEvent(
+                        new CustomEvent('starwind-dropdown:close-all', {
+                            detail: { focusRoot: true },
+                        })
+                    );
+                } else if (this.isOpen) {
+                    this.handleMenuKeydown(e);
+                }
+            });
+
+            // Handle item selection
+            this.content.addEventListener('click', (e) => {
+                const target = e.target as HTMLElement;
+                const item = target.closest('[role="menuitem"]');
+                if (item && !(item as HTMLElement).hasAttribute('data-disabled')) {
+                    if (item.hasAttribute('aria-haspopup')) return;
+
+                    // Close the dropdown after item selection
+                    this.closeDropdown();
+
+                    // Dispatch close-all through root to close all menus in the group
+                    this.rootDropdown.dispatchEvent(new CustomEvent('starwind-dropdown:close-all'));
+                }
+            });
+
+            // Handle hover on dropdown items
+            this.content.addEventListener('mouseover', (e) => {
+                const target = e.target as HTMLElement;
+                const menuItem = target.closest('[role="menuitem"]');
+                if (menuItem && menuItem instanceof HTMLElement && this.isOpen === true) {
+                    // Update items list before focusing to ensure the index is correct
+                    this.updateDropdownItems();
+
+                    // Focus the item when hovering
+                    menuItem.focus();
+
+                    // Update the current focus index
+                    this.currentFocusIndex = this.items.indexOf(menuItem);
+                }
+            });
+
+            if (this.openOnHover) {
+                this.trigger.addEventListener('pointerenter', (e) => {
+                    if (e.pointerType !== 'mouse') return;
+                    if (this.isClosing) return;
+                    if (!this.isOpen) {
+                        this.lastOpenSource = 'mouse';
+                        this.openDropdown();
+                    } else {
+                        // If the dropdown is already open, make sure to clear any close timer
+                        this.clearCloseTimer();
+                    }
+                });
+
+                this.dropdown.addEventListener('pointerleave', (e) => {
+                    if (e.pointerType !== 'mouse') return;
+                    if (this.openChildCount > 0) return;
+                    if (this.isOpen) {
+                        this.lastCloseSource = 'mouse';
+                        this.closeDropdownDelayed();
+                    }
+                });
+
+                this.content.addEventListener('pointerenter', (e) => {
+                    if (e.pointerType !== 'mouse') return;
+                    // If the user moves the mouse to the content, cancel the close timer
+                    this.clearCloseTimer();
+                });
+            }
+        }
+
+        private handleMenuKeydown(e: KeyboardEvent) {
+            // Make sure we've got an updated list of menu items
+            this.updateDropdownItems();
+
+            // Skip if no items
+            if (this.items.length === 0) return;
+
+            const currentIdx = this.currentFocusIndex;
+            const currentItem = this.items[currentIdx];
+
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.focusItem(currentIdx === -1 ? 0 : currentIdx + 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.focusItem(currentIdx === -1 ? this.items.length - 1 : currentIdx - 1);
+                    break;
+                case 'ArrowRight':
+                    if (currentItem?.getAttribute('aria-haspopup') === 'true') {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        currentItem.click();
+                    }
+                    break;
+                case 'ArrowLeft':
+                    if (this.isSubmenu) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        this.closeDropdown();
+                    }
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.focusItem(0);
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.focusItem(this.items.length - 1);
+                    break;
+                case 'Enter':
+                case ' ':
+                    if (currentIdx !== -1) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        this.items[currentIdx]?.click();
+                    }
+                    break;
+            }
+        }
+
+        private isTargetInGroup(target: Node): boolean {
+            const el = target instanceof HTMLElement ? target : target.parentElement;
+            if (!el) return false;
+            const contentEl = el.closest('[data-slot="dropdown-content"]');
+            return !!contentEl && (contentEl as any).__rootDropdown === this.rootDropdown;
+        }
+
+        private updateDropdownItems() {
+            if (!this.content) return;
+            // Get all interactive menuitem elements belonging to this menu level only
+            this.items = (
+                Array.from(
+                    this.content.querySelectorAll('[role="menuitem"]:not([data-disabled="true"])')
+                ) as HTMLElement[]
+            ).filter((item) => item.closest('[role="menu"]') === this.content);
+        }
+
+        private focusItem(idx: number) {
+            // Ensure the index wraps around properly
+            const targetIdx = (idx + this.items.length) % this.items.length;
+
+            if (this.items[targetIdx]) {
+                this.items[targetIdx].focus();
+                this.currentFocusIndex = targetIdx;
+            }
+        }
+
+        private toggleDropdown() {
+            if (this.isOpen) {
+                this.closeDropdown();
+            } else {
+                this.openDropdown();
+            }
+        }
+
+        private openDropdown() {
+            if (this.isClosing) return;
+            if (!this.content || !this.trigger || (this.trigger as any).disabled) return;
+
+            this.isOpen = true;
+            this.trigger.setAttribute('aria-expanded', 'true');
+            this.content.style.removeProperty('display');
+
+            // Portal sub-content to body before triggering animation
+            if (this.isSubmenu) {
+                this.portalContent();
+            }
+
+            this.content.setAttribute('data-state', 'open');
+
+            // Update the list of dropdown items
+            this.updateDropdownItems();
+
+            // Reset focus index when opening
+            this.currentFocusIndex = -1;
+
+            this.positionContent();
+
+            // For submenus opened by keyboard, focus the first item
+            if (this.isSubmenu && this.lastOpenSource === 'keyboard') {
+                requestAnimationFrame(() => {
+                    this.focusItem(0);
+                });
+            }
+        }
+
+        private closeDropdown(options?: { skipFocus?: boolean }) {
+            if (!this.isOpen) return;
+            if (!this.content || !this.trigger) return;
+
+            this.isClosing = true;
+            this.isOpen = false;
+            this.content.setAttribute('data-state', 'closed');
+
+            // Set focus back on trigger only if opened or closed by keyboard
+            // Skip focus if a close-all with focusRoot is closing this submenu (root will handle focus)
+            if (
+                !options?.skipFocus &&
+                (!this.openOnHover ||
+                    this.lastOpenSource === 'keyboard' ||
+                    this.lastCloseSource === 'keyboard')
+            ) {
+                requestAnimationFrame(() => {
+                    if (!this.trigger) return;
+                    this.trigger.focus();
+                });
+            }
+
+            // Give the content time to animate before hiding
+            setTimeout(() => {
+                if (!this.content) return;
+                if (this.isSubmenu) {
+                    this.unportalContent();
+                }
+                this.content.style.display = 'none';
+                this.isClosing = false;
+            }, this.animationDuration);
+
+            this.trigger.setAttribute('aria-expanded', 'false');
+
+            // Reset focus index when closing
+            this.currentFocusIndex = -1;
+        }
+
+        private closeDropdownDelayed() {
+            if (!this.content || !this.trigger) return;
+
+            // Clear any existing close timer
+            this.clearCloseTimer();
+
+            // Set a new timer to close the dropdown after the delay
+            this.closeTimerRef = window.setTimeout(() => {
+                if (this.isOpen) {
+                    this.closeDropdown();
+                }
+                this.closeTimerRef = null;
+            }, this.closeDelay);
+        }
+
+        private clearCloseTimer() {
+            if (this.closeTimerRef !== null) {
+                window.clearTimeout(this.closeTimerRef);
+                this.closeTimerRef = null;
+            }
+        }
+
+        private portalContent() {
+            if (!this.content || !this.trigger) return;
+
+            // Save the original position with a placeholder
+            this.contentPlaceholder = document.createComment('dropdown-sub-placeholder');
+            this.content.parentNode?.insertBefore(this.contentPlaceholder, this.content);
+
+            // Move content to body
+            document.body.appendChild(this.content);
+
+            // Apply fixed positioning (overrides the CSS absolute class)
+            this.content.style.position = 'fixed';
+            this.content.style.zIndex = '50';
+
+            // Position relative to trigger
+            this.positionSubContent();
+
+            // Set up auto-update for scroll/resize
+            const updatePosition = () => this.positionSubContent();
+            window.addEventListener('scroll', updatePosition, true);
+            window.addEventListener('resize', updatePosition);
+
+            // Find and link to parent handler for child-tracking
+            const parentContent = this.trigger.closest('[data-slot="dropdown-content"]');
+            if (parentContent) {
+                this.parentHandler = (parentContent as any).__dropdownHandler || null;
+                if (this.parentHandler) {
+                    this.parentHandler.openChildCount++;
+                }
+            }
+
+            // Handle hover interactions for portaled content
+            const onPointerEnter = (e: PointerEvent) => {
+                if (e.pointerType !== 'mouse') return;
+                this.clearCloseTimer();
+                // Cancel close timers for all handlers in the group (parents included)
+                this.rootDropdown.dispatchEvent(new CustomEvent('starwind-dropdown:cancel-close'));
+            };
+
+            const onPointerLeave = (e: PointerEvent) => {
+                if (e.pointerType !== 'mouse') return;
+                // Don't close if a child submenu is still open
+                if (this.openChildCount > 0) return;
+                this.lastCloseSource = 'mouse';
+                this.closeDropdownDelayed();
+            };
+
+            this.content.addEventListener('pointerenter', onPointerEnter);
+            this.content.addEventListener('pointerleave', onPointerLeave);
+
+            this.cleanupAutoUpdate = () => {
+                window.removeEventListener('scroll', updatePosition, true);
+                window.removeEventListener('resize', updatePosition);
+                this.content?.removeEventListener('pointerenter', onPointerEnter);
+                this.content?.removeEventListener('pointerleave', onPointerLeave);
+            };
+        }
+
+        private unportalContent() {
+            if (!this.content || !this.contentPlaceholder) return;
+
+            // Decrement parent's open child count
+            if (this.parentHandler) {
+                this.parentHandler.openChildCount--;
+                this.parentHandler = null;
+            }
+
+            // Clean up auto-update and hover listeners
+            this.cleanupAutoUpdate?.();
+            this.cleanupAutoUpdate = null;
+
+            // Move content back to its original position
+            this.contentPlaceholder.parentNode?.insertBefore(this.content, this.contentPlaceholder);
+            this.contentPlaceholder.remove();
+            this.contentPlaceholder = null;
+
+            // Remove fixed positioning styles
+            this.content.style.removeProperty('position');
+            this.content.style.removeProperty('z-index');
+            this.content.style.removeProperty('top');
+            this.content.style.removeProperty('left');
+        }
+
+        private positionSubContent() {
+            if (!this.content || !this.trigger) return;
+
+            const triggerRect = this.trigger.getBoundingClientRect();
+
+            // Position to the right of the trigger by default
+            let top = triggerRect.top;
+            let left = triggerRect.right;
+
+            // Measure content dimensions
+            const contentWidth = this.content.offsetWidth;
+            const contentHeight = this.content.offsetHeight;
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+
+            // If it would overflow on the right, flip to the left
+            if (left + contentWidth > viewportWidth) {
+                left = triggerRect.left - contentWidth;
+            }
+
+            // If it would overflow on the bottom, shift up
+            if (top + contentHeight > viewportHeight) {
+                top = Math.max(0, viewportHeight - contentHeight);
+            }
+
+            this.content.style.top = `${top}px`;
+            this.content.style.left = `${left}px`;
+        }
+
+        private positionContent() {
+            if (!this.content || !this.trigger || this.isSubmenu) return;
+
+            // // Set content width to match trigger width
+            // this.content.style.width = 'var(--starwind-dropdown-trigger-width)';
+            // this.content.style.setProperty(
+            //     '--starwind-dropdown-trigger-width',
+            //     `${this.trigger.offsetWidth}px`
+            // );
+        }
+    }
+
+    // Store instances in a WeakMap to avoid memory leaks
+    const dropdownInstances = new WeakMap<HTMLElement, DropdownHandler>();
+    let dropdownCounter = 0;
+
+    // Initialize dropdowns
+    const initDropdowns = () => {
+        document
+            .querySelectorAll('.starwind-dropdown, .starwind-dropdown-sub')
+            .forEach((dropdown) => {
+                if (dropdown instanceof HTMLElement && !dropdownInstances.has(dropdown)) {
+                    dropdownInstances.set(
+                        dropdown,
+                        new DropdownHandler(dropdown, dropdownCounter++)
+                    );
+                }
+            });
+    };
+
+    initDropdowns();
+    document.addEventListener('astro:after-swap', initDropdowns);
+    document.addEventListener('starwind:init', initDropdowns);
+</script>