@rimelight/ui 0.0.5 → 0.0.7

package/src/components/popover/Popover.astro

@@ -1,717 +0,0 @@
----
-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>