@rimelight/ui 0.0.4 → 0.0.6

package/src/components/dropdown/Dropdown.astro

@@ -1,604 +0,0 @@
----
-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
-   * @default 200
-   */
-  closeDelay?: number;
-
-  children: any;
-};
-
-const { class: className, openOnHover = false, closeDelay = 200, ...rest } = Astro.props;
----
-
-<div
-  class:list={["starwind-dropdown", "relative", className]}
-  data-open-on-hover={openOnHover ? "true" : undefined}
-  data-close-delay={closeDelay}
-  {...rest}
-  data-slot="dropdown"
->
-  <slot />
-</div>
-
-<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 && this.items[currentIdx]) {
-            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>