@rimelight/ui 0.0.1

package/src/components/popover/Popover.astro

@@ -0,0 +1,717 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+type Props = HTMLAttributes<"div"> & {
+  /**
+   * When true, the popover will open on hover in addition to click
+   * @default false
+   */
+  openOnHover?: boolean;
+  /**
+   * Time in milliseconds to wait before closing when hover-open is enabled
+   * @default 200
+   */
+  closeDelay?: number;
+  /**
+   * Whether the popover should be open when first rendered
+   * @default false
+   */
+  defaultOpen?: boolean;
+
+  children: any;
+};
+
+export const popover = cv({ base: "starwind-popover" });
+
+const {
+  class: className,
+  openOnHover = false,
+  closeDelay = 200,
+  defaultOpen = false,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  class:list={[popover(), className]}
+  data-open-on-hover={openOnHover ? "true" : undefined}
+  data-close-delay={closeDelay}
+  data-state={defaultOpen ? "open" : "closed"}
+  data-default-open={defaultOpen ? "true" : undefined}
+  {...rest}
+  data-slot="popover"
+>
+  <slot />
+</div>
+
+<script>
+  import {
+    type FloatingAlign,
+    type FloatingSide,
+    getTransformOrigin,
+    resolvePlacement,
+  } from "../../lib/utils/starwind/positioning";
+
+  let globalPointerClientX: number | null = null;
+  let globalPointerClientY: number | null = null;
+  let globalPointerTrackingRefCount = 0;
+  let isGlobalPointerTrackingAttached = false;
+
+  const handleGlobalPointerMove = (e: PointerEvent) => {
+    if (e.pointerType !== "mouse") return;
+    globalPointerClientX = e.clientX;
+    globalPointerClientY = e.clientY;
+  };
+
+  const registerGlobalPointerTracking = () => {
+    globalPointerTrackingRefCount += 1;
+
+    if (isGlobalPointerTrackingAttached) {
+      return;
+    }
+
+    document.addEventListener("pointermove", handleGlobalPointerMove);
+    isGlobalPointerTrackingAttached = true;
+  };
+
+  const unregisterGlobalPointerTracking = () => {
+    globalPointerTrackingRefCount = Math.max(0, globalPointerTrackingRefCount - 1);
+
+    if (globalPointerTrackingRefCount > 0 || !isGlobalPointerTrackingAttached) {
+      return;
+    }
+
+    document.removeEventListener("pointermove", handleGlobalPointerMove);
+    isGlobalPointerTrackingAttached = false;
+    globalPointerClientX = null;
+    globalPointerClientY = null;
+  };
+
+  class PopoverHandler {
+    private popover: HTMLElement;
+    private trigger: HTMLElement | null;
+    private content: HTMLElement | null;
+    private title: HTMLElement | null;
+    private description: HTMLElement | null;
+    private isOpen: boolean = false;
+    private isClosing: boolean = false;
+    private animationDuration = 150;
+    private side: FloatingSide = "bottom";
+    private align: FloatingAlign = "center";
+    private sideOffset = 4;
+    private parentHandler: PopoverHandler | null = null;
+    private contentPlaceholder: Comment | null = null;
+    private cleanupAutoUpdate: (() => void) | null = null;
+    private abortController: AbortController;
+    private closeTimeoutRef: number | null = null;
+    private openOnHover = false;
+    private hoverCloseDelay = 200;
+    private hoverCloseTimerRef: number | null = null;
+    private openChildCount = 0;
+    private registeredWithParentAsOpenChild = false;
+    private usesGlobalPointerTracking = false;
+
+    constructor(popover: HTMLElement, popoverIdx: number) {
+      this.popover = popover;
+      this.abortController = new AbortController();
+      this.trigger = this.findOwnElement('[data-slot="popover-trigger"]');
+      this.content = this.findOwnElement('[data-slot="popover-content"]');
+      this.title = this.findOwnElement('[data-slot="popover-title"]');
+      this.description = this.findOwnElement('[data-slot="popover-description"]');
+
+      if (this.content) {
+        (this.content as any).__popoverHandler = this;
+      }
+
+      this.openOnHover = this.popover.getAttribute("data-open-on-hover") === "true";
+      const closeDelay = parseInt(this.popover.getAttribute("data-close-delay") || "200");
+      if (Number.isFinite(closeDelay) && closeDelay >= 0) {
+        this.hoverCloseDelay = closeDelay;
+      }
+
+      this.parentHandler = this.resolveParentHandler();
+
+      // if trigger is set with asChild, use the first child element as trigger button
+      if (this.trigger?.hasAttribute("data-as-child")) {
+        this.trigger = this.trigger.firstElementChild as HTMLElement;
+      }
+
+      if (!this.trigger || !this.content) return;
+
+      if (this.openOnHover) {
+        registerGlobalPointerTracking();
+        this.usesGlobalPointerTracking = true;
+      }
+
+      const animationDurationString = this.content.style.animationDuration;
+      if (animationDurationString.endsWith("ms")) {
+        this.animationDuration = parseFloat(animationDurationString);
+      } else if (animationDurationString.endsWith("s")) {
+        this.animationDuration = parseFloat(animationDurationString) * 1000;
+      }
+
+      const contentSide = this.content.getAttribute("data-side");
+      if (
+        contentSide === "top" ||
+        contentSide === "bottom" ||
+        contentSide === "left" ||
+        contentSide === "right"
+      ) {
+        this.side = contentSide;
+      }
+
+      const contentAlign = this.content.getAttribute("data-align");
+      if (contentAlign === "start" || contentAlign === "center" || contentAlign === "end") {
+        this.align = contentAlign;
+      }
+
+      const contentSideOffset = parseFloat(this.content.getAttribute("data-side-offset") || "4");
+      if (Number.isFinite(contentSideOffset)) {
+        this.sideOffset = contentSideOffset;
+      }
+
+      this.isOpen =
+        this.popover.getAttribute("data-state") === "open" ||
+        this.popover.getAttribute("data-default-open") === "true";
+
+      this.init(popoverIdx);
+    }
+
+    private findOwnElement(selector: string): HTMLElement | null {
+      const elements = this.popover.querySelectorAll(selector);
+      for (const element of elements) {
+        if (element.closest(".starwind-popover") === this.popover) {
+          return element as HTMLElement;
+        }
+      }
+      return null;
+    }
+
+    private resolveParentHandler() {
+      const parentContent = this.popover.parentElement?.closest('[data-slot="popover-content"]');
+      if (!parentContent) return null;
+
+      return ((parentContent as any).__popoverHandler as PopoverHandler | undefined) ?? null;
+    }
+
+    private init(popoverIdx: number) {
+      this.setupAccessibility(popoverIdx);
+      this.setupEvents();
+      this.setInitialState();
+    }
+
+    private setupAccessibility(popoverIdx: number) {
+      if (!this.trigger || !this.content) return;
+
+      if (!this.trigger.id) {
+        this.trigger.id = `starwind-popover${popoverIdx}-trigger`;
+      }
+
+      if (!this.content.id) {
+        this.content.id = `starwind-popover${popoverIdx}-content`;
+      }
+
+      this.trigger.setAttribute("aria-controls", this.content.id);
+      this.trigger.setAttribute("aria-haspopup", "dialog");
+      this.content.setAttribute("aria-labelledby", this.trigger.id);
+
+      if (this.title) {
+        if (!this.title.id) {
+          this.title.id = `starwind-popover${popoverIdx}-title`;
+        }
+        this.content.setAttribute("aria-labelledby", this.title.id);
+      }
+
+      if (this.description) {
+        if (!this.description.id) {
+          this.description.id = `starwind-popover${popoverIdx}-description`;
+        }
+        this.content.setAttribute("aria-describedby", this.description.id);
+      }
+    }
+
+    private setupEvents() {
+      if (!this.trigger || !this.content) return;
+
+      this.trigger.addEventListener("click", (e) => {
+        if (this.isTriggerDisabled()) return;
+        e.preventDefault();
+        this.togglePopover();
+      });
+
+      this.trigger.addEventListener("keydown", (e) => {
+        if (this.isTriggerDisabled()) return;
+
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          this.togglePopover();
+        } else if (e.key === "ArrowDown" && !this.isOpen) {
+          e.preventDefault();
+          e.stopPropagation();
+          this.openPopover();
+        } else if (e.key === "Escape" && this.isOpen) {
+          e.preventDefault();
+          e.stopPropagation();
+          this.closePopover({ focusTrigger: true });
+        }
+      });
+
+      this.content.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && this.isOpen) {
+          e.preventDefault();
+          e.stopPropagation();
+          this.closePopover({ focusTrigger: true });
+        }
+      });
+
+      if (this.openOnHover) {
+        this.trigger.addEventListener(
+          "pointerenter",
+          (e) => {
+            if (e.pointerType !== "mouse") return;
+            if (this.isTriggerDisabled()) return;
+
+            if (!this.isOpen) {
+              this.openPopover();
+            } else {
+              this.clearHoverCloseTimersInTree();
+            }
+          },
+          { signal: this.abortController.signal },
+        );
+
+        this.trigger.addEventListener(
+          "pointerleave",
+          (e) => {
+            if (e.pointerType !== "mouse") return;
+            if (this.isOpen) {
+              this.closePopoverDelayed();
+            }
+          },
+          { signal: this.abortController.signal },
+        );
+
+        this.content.addEventListener(
+          "pointerenter",
+          (e) => {
+            if (e.pointerType !== "mouse") return;
+            this.clearHoverCloseTimersInTree();
+          },
+          { signal: this.abortController.signal },
+        );
+
+        this.content.addEventListener(
+          "pointerleave",
+          (e) => {
+            if (e.pointerType !== "mouse") return;
+            if (this.isOpen) {
+              this.closePopoverDelayed();
+            }
+          },
+          { signal: this.abortController.signal },
+        );
+      }
+
+      this.popover.addEventListener("starwind-popover:close", ((
+        event: CustomEvent<{ focusTrigger?: boolean }>,
+      ) => {
+        this.closePopover(event.detail?.focusTrigger !== undefined ? { focusTrigger: event.detail.focusTrigger } : {});
+      }) as EventListener);
+
+      document.addEventListener(
+        "pointerdown",
+        (e) => {
+          if (
+            this.isOpen &&
+            !this.popover.contains(e.target as Node) &&
+            !this.content?.contains(e.target as Node) &&
+            !this.isTargetInPopoverTree(e.target as Node)
+          ) {
+            this.closePopover();
+          }
+        },
+        { signal: this.abortController.signal },
+      );
+
+      document.addEventListener(
+        "click",
+        (e) => {
+          if (
+            this.isOpen &&
+            !this.popover.contains(e.target as Node) &&
+            !this.content?.contains(e.target as Node) &&
+            !this.isTargetInPopoverTree(e.target as Node)
+          ) {
+            this.closePopover();
+          }
+        },
+        { signal: this.abortController.signal },
+      );
+    }
+
+    private setInitialState() {
+      if (!this.trigger || !this.content) return;
+
+      if (this.isOpen) {
+        this.popover.setAttribute("data-state", "open");
+        this.trigger.setAttribute("aria-expanded", "true");
+        this.trigger.setAttribute("data-state", "open");
+        this.content.setAttribute("data-state", "open");
+        this.content.style.removeProperty("display");
+        this.portalContent();
+        this.positionContent();
+        requestAnimationFrame(() => this.positionContent());
+      } else {
+        this.popover.setAttribute("data-state", "closed");
+        this.trigger.setAttribute("aria-expanded", "false");
+        this.trigger.setAttribute("data-state", "closed");
+        this.content.setAttribute("data-state", "closed");
+        this.unportalContent();
+        this.content.style.display = "none";
+      }
+    }
+
+    private isTriggerDisabled() {
+      if (!this.trigger) return true;
+      return (
+        this.trigger.hasAttribute("disabled") ||
+        this.trigger.getAttribute("aria-disabled") === "true" ||
+        this.trigger.getAttribute("data-disabled") === "true"
+      );
+    }
+
+    private togglePopover() {
+      if (this.isOpen) {
+        this.closePopover();
+      } else {
+        this.openPopover();
+      }
+    }
+
+    private openPopover() {
+      if (this.isOpen || this.isClosing) return;
+      if (!this.trigger || !this.content || this.isTriggerDisabled()) return;
+
+      this.clearHoverCloseTimersInTree();
+      this.registerAsOpenChildOnParent();
+
+      this.isOpen = true;
+      this.popover.setAttribute("data-state", "open");
+      this.trigger.setAttribute("aria-expanded", "true");
+      this.trigger.setAttribute("data-state", "open");
+      this.content.setAttribute("data-state", "open");
+      this.content.style.removeProperty("display");
+      this.portalContent();
+      this.positionContent();
+      requestAnimationFrame(() => this.positionContent());
+    }
+
+    private closePopover(options?: { focusTrigger?: boolean }) {
+      if (!this.isOpen) return;
+      if (!this.trigger || !this.content) return;
+
+      this.clearHoverCloseTimer();
+
+      this.closeNestedPopovers();
+
+      this.isClosing = true;
+      this.isOpen = false;
+      this.popover.setAttribute("data-state", "closed");
+      this.trigger.setAttribute("aria-expanded", "false");
+      this.trigger.setAttribute("data-state", "closed");
+      this.content.setAttribute("data-state", "closed");
+
+      if (options?.focusTrigger) {
+        requestAnimationFrame(() => {
+          this.trigger?.focus();
+        });
+      }
+
+      if (this.closeTimeoutRef !== null) {
+        window.clearTimeout(this.closeTimeoutRef);
+      }
+
+      this.closeTimeoutRef = window.setTimeout(() => {
+        this.closeTimeoutRef = null;
+        if (this.abortController.signal.aborted) return;
+        if (!this.content) return;
+        this.unportalContent();
+        this.content.style.display = "none";
+        this.unregisterAsOpenChildOnParent();
+        this.isClosing = false;
+      }, this.animationDuration);
+    }
+
+    private closeNestedPopovers() {
+      if (!this.content) return;
+
+      const nestedPopovers = this.content.querySelectorAll<HTMLElement>(
+        '.starwind-popover[data-state="open"]',
+      );
+
+      for (const nestedPopover of nestedPopovers) {
+        if (nestedPopover !== this.popover) {
+          nestedPopover.dispatchEvent(
+            new CustomEvent("starwind-popover:close", { detail: { focusTrigger: false } }),
+          );
+        }
+      }
+    }
+
+    destroy() {
+      if (this.abortController.signal.aborted) return;
+
+      this.abortController.abort();
+
+      if (this.usesGlobalPointerTracking) {
+        unregisterGlobalPointerTracking();
+        this.usesGlobalPointerTracking = false;
+      }
+
+      this.clearHoverCloseTimer();
+
+      if (this.closeTimeoutRef !== null) {
+        window.clearTimeout(this.closeTimeoutRef);
+        this.closeTimeoutRef = null;
+      }
+
+      this.unportalContent();
+      this.unregisterAsOpenChildOnParent();
+      this.isOpen = false;
+      this.isClosing = false;
+
+      if (this.content) {
+        delete (this.content as any).__popoverHandler;
+      }
+    }
+
+    private closePopoverDelayed() {
+      if (!this.openOnHover) return;
+
+      this.clearHoverCloseTimer();
+
+      this.hoverCloseTimerRef = window.setTimeout(() => {
+        this.hoverCloseTimerRef = null;
+        if (this.abortController.signal.aborted) return;
+        if (this.openChildCount > 0) return;
+        if (this.isFocusWithinPopoverTree()) return;
+        if (this.isPointerWithinPopoverTree()) return;
+        if (this.isOpen) {
+          this.closePopover();
+        }
+      }, this.hoverCloseDelay);
+    }
+
+    private clearHoverCloseTimer() {
+      if (this.hoverCloseTimerRef !== null) {
+        window.clearTimeout(this.hoverCloseTimerRef);
+        this.hoverCloseTimerRef = null;
+      }
+    }
+
+    private clearHoverCloseTimersInTree() {
+      this.clearHoverCloseTimer();
+
+      let currentHandler = this.parentHandler;
+      while (currentHandler) {
+        currentHandler.clearHoverCloseTimer();
+        currentHandler = currentHandler.parentHandler;
+      }
+    }
+
+    private isFocusWithinPopoverTree(): boolean {
+      const activeElement = document.activeElement;
+      if (!(activeElement instanceof Node)) return false;
+
+      return (
+        this.popover.contains(activeElement) ||
+        this.content?.contains(activeElement) ||
+        this.isTargetInPopoverTree(activeElement)
+      );
+    }
+
+    private isPointerWithinPopoverTree(): boolean {
+      if (this.trigger?.matches(":hover") || this.content?.matches(":hover")) {
+        return true;
+      }
+
+      if (globalPointerClientX === null || globalPointerClientY === null) {
+        return false;
+      }
+
+      const pointerTarget = document.elementFromPoint(globalPointerClientX, globalPointerClientY);
+      if (!(pointerTarget instanceof Node)) {
+        return false;
+      }
+
+      return (
+        this.popover.contains(pointerTarget) ||
+        this.content?.contains(pointerTarget) ||
+        this.isTargetInPopoverTree(pointerTarget)
+      );
+    }
+
+    private registerAsOpenChildOnParent() {
+      if (!this.parentHandler || this.registeredWithParentAsOpenChild) return;
+
+      this.parentHandler.openChildCount++;
+      this.registeredWithParentAsOpenChild = true;
+    }
+
+    private unregisterAsOpenChildOnParent() {
+      if (!this.parentHandler || !this.registeredWithParentAsOpenChild) return;
+
+      this.parentHandler.openChildCount = Math.max(0, this.parentHandler.openChildCount - 1);
+      this.registeredWithParentAsOpenChild = false;
+      this.parentHandler.handleChildPopoverClosed();
+    }
+
+    private handleChildPopoverClosed() {
+      if (!this.openOnHover || !this.isOpen) return;
+      if (this.openChildCount > 0) return;
+      if (this.isFocusWithinPopoverTree()) return;
+      if (this.isPointerWithinPopoverTree()) return;
+
+      this.closePopoverDelayed();
+    }
+
+    private isTargetInPopoverTree(target: Node): boolean {
+      const element = target instanceof HTMLElement ? target : target.parentElement;
+      if (!element) return false;
+
+      const contentElement = element.closest('[data-slot="popover-content"]');
+      if (!contentElement) return false;
+
+      let currentHandler: PopoverHandler | null =
+        ((contentElement as any).__popoverHandler as PopoverHandler | undefined) ?? null;
+
+      while (currentHandler) {
+        if (currentHandler === this) {
+          return true;
+        }
+
+        currentHandler = currentHandler.parentHandler;
+      }
+
+      return false;
+    }
+
+    private portalContent() {
+      if (!this.content) return;
+      if (this.contentPlaceholder || this.content.parentElement === document.body) return;
+
+      this.contentPlaceholder = document.createComment("popover-content-placeholder");
+      this.content.parentNode?.insertBefore(this.contentPlaceholder, this.content);
+
+      document.body.appendChild(this.content);
+
+      this.content.style.position = "fixed";
+      this.content.style.zIndex = "50";
+
+      const updatePosition = () => this.positionContent();
+      window.addEventListener("scroll", updatePosition, true);
+      window.addEventListener("resize", updatePosition);
+
+      const resizeObserver = new ResizeObserver(() => this.positionContent());
+      resizeObserver.observe(this.content);
+      if (this.trigger) {
+        resizeObserver.observe(this.trigger);
+      }
+
+      this.cleanupAutoUpdate = () => {
+        window.removeEventListener("scroll", updatePosition, true);
+        window.removeEventListener("resize", updatePosition);
+        resizeObserver.disconnect();
+      };
+    }
+
+    private unportalContent() {
+      if (!this.content) return;
+
+      this.cleanupAutoUpdate?.();
+      this.cleanupAutoUpdate = null;
+
+      if (this.contentPlaceholder) {
+        this.contentPlaceholder.parentNode?.insertBefore(this.content, this.contentPlaceholder);
+        this.contentPlaceholder.remove();
+        this.contentPlaceholder = null;
+      }
+
+      this.content.style.removeProperty("position");
+      this.content.style.removeProperty("z-index");
+      this.content.style.removeProperty("top");
+      this.content.style.removeProperty("left");
+      this.content.style.removeProperty("transform-origin");
+    }
+
+    private positionContent() {
+      if (!this.content || !this.trigger || !this.isOpen) return;
+
+      const triggerRect = this.trigger.getBoundingClientRect();
+      const contentWidth = this.content.offsetWidth;
+      const contentHeight = this.content.offsetHeight;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const viewportPadding = 8;
+
+      const resolvedPlacement = resolvePlacement({
+        side: this.side,
+        align: this.align,
+        sideOffset: this.sideOffset,
+        triggerRect,
+        contentWidth,
+        contentHeight,
+        viewportWidth,
+        viewportHeight,
+        viewportPadding,
+        avoidCollisions: true,
+      });
+
+      this.content.style.left = `${Math.round(resolvedPlacement.left)}px`;
+      this.content.style.top = `${Math.round(resolvedPlacement.top)}px`;
+      this.content.style.transformOrigin = getTransformOrigin(
+        resolvedPlacement.side,
+        resolvedPlacement.align,
+      );
+      this.content.setAttribute("data-side", resolvedPlacement.side);
+      this.content.setAttribute("data-align", resolvedPlacement.align);
+    }
+  }
+
+  const popoverInstances = new Map<HTMLElement, PopoverHandler>();
+  let popoverCounter = 0;
+
+  const cleanupStalePopovers = () => {
+    for (const [popoverEl, popoverHandler] of popoverInstances.entries()) {
+      if (!document.contains(popoverEl)) {
+        popoverHandler.destroy();
+        popoverInstances.delete(popoverEl);
+      }
+    }
+  };
+
+  const destroyAllPopovers = () => {
+    for (const popoverHandler of popoverInstances.values()) {
+      popoverHandler.destroy();
+    }
+
+    popoverInstances.clear();
+  };
+
+  const initPopovers = () => {
+    cleanupStalePopovers();
+
+    document.querySelectorAll<HTMLElement>(".starwind-popover").forEach((popoverEl) => {
+      if (!popoverInstances.has(popoverEl)) {
+        popoverInstances.set(popoverEl, new PopoverHandler(popoverEl, popoverCounter++));
+      }
+    });
+  };
+
+  initPopovers();
+  document.addEventListener("astro:before-swap", destroyAllPopovers);
+  document.addEventListener("astro:after-swap", initPopovers);
+  document.addEventListener("starwind:init", initPopovers);
+</script>