@duskmoon-dev/components 0.5.2 → 0.5.4

package/dist/components/select/index.js

@@ -1,7 +1,15 @@
 "use client";
 
 // src/components/select/Select.tsx
-import React, { forwardRef, useMemo, useState } from "react";
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -180,6 +188,7 @@ var SelectRoot = forwardRef(({
   "aria-required": ariaRequired,
   children,
   className,
+  defaultOpen = false,
   defaultValue,
   disabled,
   filterOption,
@@ -187,6 +196,9 @@ var SelectRoot = forwardRef(({
   loading,
   mode,
   onChange,
+  onDropdownVisibleChange,
+  onOpenChange,
+  open: openProp,
   options,
   placeholder,
   showSearch,
@@ -195,10 +207,60 @@ var SelectRoot = forwardRef(({
   value,
   ...props
 }, ref) => {
+  const generatedId = useId();
+  const cleanId = generatedId.replace(/[^a-zA-Z0-9_-]/g, "");
+  const triggerId = id || `select-${cleanId}`;
+  const dropdownId = `select-dropdown-${cleanId}`;
+  const anchorName = `--dm-select-${cleanId}`;
+  const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));
+  const isControlled = openProp !== undefined;
+  const isOpen = isControlled ? Boolean(openProp) : internalOpen;
+  const containerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const setOpenState = useCallback((nextOpen) => {
+    if (!isControlled) {
+      setInternalOpen(nextOpen);
+    }
+    onDropdownVisibleChange?.(nextOpen);
+    onOpenChange?.(nextOpen);
+  }, [isControlled, onDropdownVisibleChange, onOpenChange]);
+  useEffect(() => {
+    const dropdown = dropdownRef.current;
+    if (!dropdown || typeof dropdown.showPopover !== "function")
+      return;
+    if (isOpen && !dropdown.matches(":popover-open")) {
+      try {
+        dropdown.showPopover();
+      } catch {}
+    } else if (!isOpen && dropdown.matches(":popover-open")) {
+      try {
+        dropdown.hidePopover();
+      } catch {}
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen)
+      return;
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (!target)
+        return;
+      if (containerRef.current?.contains(target))
+        return;
+      if (dropdownRef.current?.contains(target))
+        return;
+      setOpenState(false);
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("touchstart", handlePointerDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("touchstart", handlePointerDown);
+    };
+  }, [isOpen, setOpenState]);
   const multiple = mode === "multiple" || mode === "tags";
   const sourceOptions = useMemo(() => options ?? optionsFromChildren(children), [children, options]);
   const flatOptions = useMemo(() => flattenOptions(sourceOptions), [sourceOptions]);
-  const [open, setOpen] = useState(false);
   const [searchValue, setSearchValue] = useState("");
   const [internalValue, setInternalValue] = useState(multiple ? normalizeMultiValue(defaultValue) : normalizeSingleValue(defaultValue));
   const controlled = value !== undefined;
@@ -233,7 +295,7 @@ var SelectRoot = forwardRef(({
       emitChange(nextValues);
     } else {
       emitChange(option.value);
-      setOpen(false);
+      setOpenState(false);
     }
     setSearchValue("");
   }
@@ -289,15 +351,23 @@ var SelectRoot = forwardRef(({
       }, `group-${index}`);
     });
   }
+  const setRefs = (node) => {
+    containerRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
   const selection = multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsx("span", {
     className: selectTagClass,
     children: renderValue(option)
   }, valueKey(option.value))) : renderValue(selectedOptions[0]);
   return /* @__PURE__ */ jsxs("div", {
     ...props,
-    ref,
+    ref: setRefs,
     className: getSelectContainerClasses({
-      open,
+      open: isOpen,
       loading,
       disabled,
       full: true,
@@ -306,7 +376,7 @@ var SelectRoot = forwardRef(({
     children: [
       /* @__PURE__ */ jsxs("button", {
         type: "button",
-        id,
+        id: triggerId,
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
         "aria-describedby": ariaDescribedBy,
@@ -316,8 +386,14 @@ var SelectRoot = forwardRef(({
         "aria-labelledby": ariaLabelledBy,
         "aria-required": ariaRequired,
         "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        onClick: () => setOpen((current) => !current),
+        "aria-expanded": isOpen,
+        "aria-controls": dropdownId,
+        style: { anchorName },
+        onClick: () => {
+          if (disabled || loading)
+            return;
+          setOpenState(!isOpen);
+        },
         children: [
           /* @__PURE__ */ jsx("span", {
             className: selectSelectionClass,
@@ -365,10 +441,22 @@ var SelectRoot = forwardRef(({
           })
         })
       }) : null,
-      open ? /* @__PURE__ */ jsxs("div", {
-        className: selectDropdownClass,
+      isOpen ? /* @__PURE__ */ jsxs("div", {
+        id: dropdownId,
+        ref: dropdownRef,
+        popover: "auto",
         role: "listbox",
         "aria-multiselectable": multiple || undefined,
+        className: selectDropdownClass,
+        style: { positionAnchor: anchorName },
+        onToggle: (event) => {
+          if (event.target !== event.currentTarget)
+            return;
+          const nextOpen = event.nativeEvent?.newState === "open";
+          if (nextOpen !== isOpen) {
+            setOpenState(nextOpen);
+          }
+        },
         children: [
           searchable ? /* @__PURE__ */ jsx("input", {
             className: selectSearchClass,

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.4";