@duskmoon-dev/components 0.3.3 → 0.4.0

package/dist/components/dm-truncate/index.js

@@ -4,10 +4,10 @@
 import {
   forwardRef as forwardRef2,
   useCallback,
-  useEffect,
+  useEffect as useEffect2,
   useLayoutEffect,
   useMemo,
-  useRef,
+  useRef as useRef2,
   useState as useState2
 } from "react";
 
@@ -57,13 +57,12 @@ function getDmTruncateTextClasses({
 }
 
 // src/components/tooltip/Tooltip.tsx
-import { forwardRef, useState } from "react";
+import React, { forwardRef, useEffect, useId, useRef, useState } from "react";
 
 // src/classes/tooltip.ts
 var tooltipWrapperClass = "tooltip-wrapper";
 var tooltipBaseClass = "tooltip";
 var tooltipShowClass = "tooltip-show";
-var tooltipArrowClass = "tooltip-arrow";
 var tooltipNoArrowClass = "tooltip-no-arrow";
 var tooltipPlacementClasses = {
   top: "tooltip-top",
@@ -93,10 +92,12 @@ var Tooltip = forwardRef(({
   placement = "top",
   open,
   defaultOpen,
+  onOpenChange,
   arrow = true,
   size = "md",
   className,
   children,
+  style,
   onBlur,
   onFocus,
   onMouseEnter,
@@ -106,54 +107,133 @@ var Tooltip = forwardRef(({
   const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));
   const isControlled = open !== undefined;
   const visible = isControlled ? open : internalOpen;
-  const tooltipId = props.id !== undefined ? `${props.id}-tooltip` : undefined;
+  const reactId = useId();
+  const tooltipId = props.id !== undefined ? `${props.id}-tooltip` : `${reactId}-tooltip`;
+  const anchor = `--tooltip-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const surfaceRef = useRef(null);
+  const hoveredRef = useRef(false);
+  const focusedRef = useRef(false);
+  const interactionOpenRef = useRef(false);
+  const visibleRef = useRef(visible);
+  const controlledRef = useRef(isControlled);
+  const onOpenChangeRef = useRef(onOpenChange);
+  visibleRef.current = visible;
+  controlledRef.current = isControlled;
+  onOpenChangeRef.current = onOpenChange;
+  const hasTitle = Boolean(title);
+  useEffect(() => {
+    const surface = surfaceRef.current;
+    if (!surface)
+      return;
+    const tooltipSurface = surface;
+    function handleToggle(event) {
+      if (event.newState !== "closed" || !visibleRef.current || isControlled || isControlled !== controlledRef.current || tooltipSurface.matches(":popover-open")) {
+        return;
+      }
+      hoveredRef.current = false;
+      focusedRef.current = false;
+      interactionOpenRef.current = false;
+      onOpenChangeRef.current?.(false);
+      setInternalOpen(false);
+    }
+    surface.addEventListener("toggle", handleToggle);
+    return () => surface.removeEventListener("toggle", handleToggle);
+  }, [hasTitle, isControlled]);
+  useEffect(() => {
+    const surface = surfaceRef.current;
+    if (!surface)
+      return;
+    if (visible && !surface.matches(":popover-open")) {
+      surface.showPopover();
+    } else if (!visible && surface.matches(":popover-open")) {
+      surface.hidePopover();
+    }
+  }, [visible, hasTitle, isControlled]);
+  useEffect(() => {
+    if (!isControlled || !visible || !hasTitle)
+      return;
+    const wrapper = surfaceRef.current?.parentElement;
+    if (!wrapper)
+      return;
+    const tooltipWrapper = wrapper;
+    function requestDismiss() {
+      hoveredRef.current = false;
+      focusedRef.current = false;
+      interactionOpenRef.current = false;
+      onOpenChangeRef.current?.(false);
+    }
+    function handlePointerDown(event) {
+      if (!tooltipWrapper.contains(event.target))
+        requestDismiss();
+    }
+    function handleKeyDown(event) {
+      if (event.key === "Escape")
+        requestDismiss();
+    }
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+      document.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [isControlled, visible, hasTitle]);
+  function updateInteraction() {
+    const next = hoveredRef.current || focusedRef.current;
+    if (next === interactionOpenRef.current)
+      return;
+    interactionOpenRef.current = next;
+    onOpenChange?.(next);
+    if (!isControlled)
+      setInternalOpen(next);
+  }
   function showTooltip(event) {
     onMouseEnter?.(event);
-    if (!isControlled)
-      setInternalOpen(true);
+    hoveredRef.current = true;
+    updateInteraction();
   }
   function hideTooltip(event) {
     onMouseLeave?.(event);
-    if (!isControlled)
-      setInternalOpen(false);
+    hoveredRef.current = false;
+    updateInteraction();
   }
   function focusTooltip(event) {
     onFocus?.(event);
-    if (!isControlled)
-      setInternalOpen(true);
+    focusedRef.current = true;
+    updateInteraction();
   }
   function blurTooltip(event) {
     onBlur?.(event);
-    if (!isControlled)
-      setInternalOpen(false);
+    if (event.currentTarget.contains(event.relatedTarget))
+      return;
+    focusedRef.current = false;
+    updateInteraction();
+  }
+  let trigger = children;
+  if (hasTitle && React.isValidElement(children) && children.type !== React.Fragment) {
+    trigger = React.cloneElement(children, {
+      "aria-describedby": [children.props["aria-describedby"], tooltipId].filter(Boolean).join(" ")
+    });
   }
   return /* @__PURE__ */ jsxs("span", {
     ...props,
     ref,
     className: tooltipWrapperClass,
-    "aria-describedby": visible && title ? tooltipId : undefined,
+    style: { ...style, anchorName: anchor },
+    "aria-describedby": hasTitle && trigger === children ? [props["aria-describedby"], tooltipId].filter(Boolean).join(" ") : props["aria-describedby"],
     onMouseEnter: showTooltip,
     onMouseLeave: hideTooltip,
     onFocus: focusTooltip,
     onBlur: blurTooltip,
     children: [
-      children,
-      title ? /* @__PURE__ */ jsxs("span", {
+      trigger,
+      hasTitle ? /* @__PURE__ */ jsx("span", {
+        ref: surfaceRef,
         id: tooltipId,
         role: "tooltip",
-        className: getTooltipClasses({
-          placement,
-          size,
-          open: visible,
-          arrow,
-          className
-        }),
-        children: [
-          title,
-          arrow ? /* @__PURE__ */ jsx("span", {
-            className: tooltipArrowClass
-          }) : null
-        ]
+        popover: isControlled ? "manual" : "hint",
+        style: { positionAnchor: anchor },
+        className: getTooltipClasses({ placement, size, arrow, className }),
+        children: title
       }) : null
     ]
   });
@@ -217,10 +297,10 @@ var DmTruncate = forwardRef2(({
   onCopy,
   ...props
 }, ref) => {
-  const wrapperRef = useRef(null);
-  const textRef = useRef(null);
-  const measureRef = useRef(null);
-  const copyTimerRef = useRef(null);
+  const wrapperRef = useRef2(null);
+  const textRef = useRef2(null);
+  const measureRef = useRef2(null);
+  const copyTimerRef = useRef2(null);
   const [overflow, setOverflow] = useState2(false);
   const [copied, setCopied] = useState2(false);
   const textValue = toPlainText(children);
@@ -276,14 +356,14 @@ var DmTruncate = forwardRef2(({
   useLayoutEffect(() => {
     measure();
   }, [measure, textValue]);
-  useEffect(() => {
+  useEffect2(() => {
     if (typeof window === "undefined") {
       return;
     }
     window.addEventListener("resize", measure);
     return () => window.removeEventListener("resize", measure);
   }, [measure]);
-  useEffect(() => {
+  useEffect2(() => {
     return () => {
       if (copyTimerRef.current) {
         window.clearTimeout(copyTimerRef.current);

package/dist/components/dropdown/Dropdown.types.d.ts

@@ -34,7 +34,7 @@ export interface DropdownProps extends Omit<ComponentProps<"span">, "menu"> {
     onOpenChange?: (open: boolean) => void;
     children: ReactNode;
 }
-export type DropdownButtonProps = Omit<DropdownProps, "children" | "onClick" | keyof ButtonProps> & Omit<ButtonProps, "children" | "onClick"> & {
+export type DropdownButtonProps = Omit<DropdownProps, "children" | "onClick" | keyof ButtonProps> & Omit<ButtonProps, "children" | "onClick" | "ref"> & {
     buttonsRender?: (buttons: ReactNode[]) => ReactNode[];
     children?: ReactNode;
     onClick?: ButtonProps["onClick"];