@duskmoon-dev/components 0.5.2 → 0.5.3

package/dist/components/popconfirm/index.js

@@ -1,9 +1,11 @@
 "use client";
 
 // src/components/popconfirm/Popconfirm.tsx
-import {
+import React2, {
   forwardRef,
   useId,
+  useLayoutEffect,
+  useRef,
   useState
 } from "react";
 
@@ -441,6 +443,27 @@ var Popconfirm = forwardRef(({
   const isControlled = open !== undefined;
   const visible = isControlled ? open : internalOpen;
   const popupId = id ? `${id}-popconfirm` : generatedPopupId;
+  const anchorName = `--dm-popconfirm-${generatedPopupId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const popupRef = useRef(null);
+  const desiredOpen = useRef(visible);
+  desiredOpen.current = visible;
+  const shouldRenderPopup = !destroyTooltipOnHide || visible;
+  useLayoutEffect(() => {
+    const popup = popupRef.current;
+    if (!popup || typeof popup.showPopover !== "function")
+      return;
+    if (visible && !popup.matches(":popover-open"))
+      popup.showPopover();
+    else if (!visible && popup.matches(":popover-open"))
+      popup.hidePopover();
+  }, [visible, shouldRenderPopup]);
+  useLayoutEffect(() => {
+    const popup = popupRef.current;
+    return () => {
+      if (popup?.matches(":popover-open"))
+        popup.hidePopover();
+    };
+  }, [shouldRenderPopup]);
   function setVisible(nextOpen) {
     if (disabled) {
       return;
@@ -467,6 +490,8 @@ var Popconfirm = forwardRef(({
     try {
       await result;
       close();
+    } catch {
+      return;
     } finally {
       if (loading) {
         setConfirmLoading(false);
@@ -486,6 +511,8 @@ var Popconfirm = forwardRef(({
     }
   }
   function handleClick(event) {
+    if (popupRef.current?.contains(event.target))
+      return;
     onClick?.(event);
     if (hasTrigger(trigger, "click")) {
       setVisible(!visible);
@@ -510,13 +537,12 @@ var Popconfirm = forwardRef(({
       setVisible(false);
     }
   }
-  const shouldRenderPopup = !destroyTooltipOnHide || visible;
   return /* @__PURE__ */ jsxs2("span", {
     ...props,
     ref,
     className: popconfirmWrapperClass,
-    "aria-describedby": visible ? popupId : undefined,
     "aria-expanded": visible || undefined,
+    style: { ...props.style, anchorName },
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onClick: handleClick,
@@ -524,10 +550,28 @@ var Popconfirm = forwardRef(({
     onFocus: handleFocus,
     onBlur: handleBlur,
     children: [
-      children,
+      React2.isValidElement(children) && children.type !== React2.Fragment ? React2.cloneElement(children, { "aria-controls": popupId, "aria-expanded": Boolean(visible) }) : children,
       shouldRenderPopup ? /* @__PURE__ */ jsxs2("span", {
         id: popupId,
-        role: "tooltip",
+        ref: popupRef,
+        popover: "auto",
+        style: { positionAnchor: anchorName },
+        onToggle: (event) => {
+          if (event.target !== event.currentTarget)
+            return;
+          const nextOpen = event.newState === "open";
+          if (nextOpen === visible)
+            return;
+          setVisible(nextOpen);
+          if (isControlled && visible && !nextOpen) {
+            const popup = event.currentTarget;
+            queueMicrotask(() => {
+              if (popup.isConnected && desiredOpen.current && !popup.matches(":popover-open")) {
+                popup.showPopover();
+              }
+            });
+          }
+        },
         className: getPopconfirmClasses({
           placement,
           open: visible,

package/dist/components/popover/index.js

@@ -159,10 +159,8 @@ var Popover = forwardRef(({
       event.preventDefault();
     }
   }
-  const hasContent = Boolean(content || title);
   const shouldRenderContent = !destroyTooltipOnHide || visible;
   const triggerProps = {
-    "aria-describedby": hasContent && visible ? tooltipId : undefined,
     onMouseEnter: triggerHandlers.onMouseEnter ? handleMouseEnter : undefined,
     onMouseLeave: triggerHandlers.onMouseLeave ? handleMouseLeave : undefined,
     onFocus: triggerHandlers.onFocus ? handleFocus : undefined,
@@ -171,7 +169,6 @@ var Popover = forwardRef(({
     onClick: triggerHandlers.onClick ? handleClick : undefined
   };
   const triggerNode = isValidElement(children) ? cloneElement(children, {
-    "aria-describedby": triggerProps["aria-describedby"] ?? children.props["aria-describedby"],
     onMouseEnter: (event) => {
       callHandler(children.props.onMouseEnter, event);
       triggerProps.onMouseEnter?.(event);
@@ -208,7 +205,6 @@ var Popover = forwardRef(({
         ref: popoverRef,
         id: tooltipId,
         popover: "auto",
-        role: "tooltip",
         style: { positionAnchor: anchorName },
         onToggle: (event) => {
           const nextOpen = event.newState === "open";

package/dist/components/tooltip/Tooltip.types.d.ts

@@ -6,7 +6,7 @@ export interface TooltipProps extends Omit<ComponentProps<"span">, "title"> {
     placement?: TooltipPlacement;
     open?: boolean;
     defaultOpen?: boolean;
-    /** Called when hover, focus, or dismissal requests a visibility change.
+    /** Called when native interest changes visibility, or a controlled interaction requests it.
      * Controlled tooltips use manual popovers and stay open until `open` changes. */
     onOpenChange?: (open: boolean) => void;
     /** @deprecated Native tooltips follow Core's arrowless automatic placement. */

package/dist/components/tooltip/index.js

@@ -62,7 +62,7 @@ var Tooltip = forwardRef(({
   open,
   defaultOpen,
   onOpenChange,
-  arrow = true,
+  arrow = false,
   size = "md",
   className,
   children,
@@ -90,12 +90,21 @@ var Tooltip = forwardRef(({
   controlledRef.current = isControlled;
   onOpenChangeRef.current = onOpenChange;
   const hasTitle = Boolean(title);
+  const nativeInterest = !isControlled && React.isValidElement(children) && (typeof children.type !== "string" || children.type === "button" || children.type === "a") && children.type !== React.Fragment;
   useEffect(() => {
     const surface = surfaceRef.current;
     if (!surface)
       return;
     const tooltipSurface = surface;
     function handleToggle(event) {
+      if (nativeInterest) {
+        const next = event.newState === "open";
+        if (next !== tooltipSurface.matches(":popover-open") || next === visibleRef.current)
+          return;
+        onOpenChangeRef.current?.(next);
+        setInternalOpen(next);
+        return;
+      }
       if (event.newState !== "closed" || !visibleRef.current || isControlled || isControlled !== controlledRef.current || tooltipSurface.matches(":popover-open")) {
         return;
       }
@@ -107,7 +116,14 @@ var Tooltip = forwardRef(({
     }
     surface.addEventListener("toggle", handleToggle);
     return () => surface.removeEventListener("toggle", handleToggle);
-  }, [hasTitle, isControlled]);
+  }, [hasTitle, isControlled, nativeInterest]);
+  useEffect(() => {
+    const surface = surfaceRef.current;
+    return () => {
+      if (surface?.matches(":popover-open"))
+        surface.hidePopover();
+    };
+  }, [hasTitle, isControlled, nativeInterest]);
   useEffect(() => {
     const surface = surfaceRef.current;
     if (!surface)
@@ -157,21 +173,29 @@ var Tooltip = forwardRef(({
   }
   function showTooltip(event) {
     onMouseEnter?.(event);
+    if (nativeInterest)
+      return;
     hoveredRef.current = true;
     updateInteraction();
   }
   function hideTooltip(event) {
     onMouseLeave?.(event);
+    if (nativeInterest)
+      return;
     hoveredRef.current = false;
     updateInteraction();
   }
   function focusTooltip(event) {
     onFocus?.(event);
+    if (nativeInterest)
+      return;
     focusedRef.current = true;
     updateInteraction();
   }
   function blurTooltip(event) {
     onBlur?.(event);
+    if (nativeInterest)
+      return;
     if (event.currentTarget.contains(event.relatedTarget))
       return;
     focusedRef.current = false;
@@ -180,6 +204,13 @@ var Tooltip = forwardRef(({
   let trigger = children;
   if (hasTitle && React.isValidElement(children) && children.type !== React.Fragment) {
     trigger = React.cloneElement(children, {
+      ...nativeInterest ? {
+        interestfor: tooltipId,
+        style: {
+          ...children.props.style,
+          anchorName: anchor
+        }
+      } : {},
       "aria-describedby": [children.props["aria-describedby"], tooltipId].filter(Boolean).join(" ")
     });
   }
@@ -187,7 +218,10 @@ var Tooltip = forwardRef(({
     ...props,
     ref,
     className: tooltipWrapperClass,
-    style: { ...style, anchorName: anchor },
+    style: {
+      ...style,
+      ...nativeInterest ? {} : { anchorName: anchor }
+    },
     "aria-describedby": hasTitle && trigger === children ? [props["aria-describedby"], tooltipId].filter(Boolean).join(" ") : props["aria-describedby"],
     onMouseEnter: showTooltip,
     onMouseLeave: hideTooltip,

package/dist/generated/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.5.2";
+export declare const version = "0.5.3";