@hexdspace/react 0.1.30 → 0.1.32

package/dist/index.js

@@ -2740,7 +2740,27 @@ function Popover({
 import { cva as cva7 } from "class-variance-authority";
 import { AnimatePresence as AnimatePresence4, motion as motion4 } from "motion/react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import * as React13 from "react";
+
+// src/ui/utils/refs.ts
 import * as React12 from "react";
+function useComposedRefs(...refs) {
+  return React12.useCallback(
+    (node) => {
+      for (const ref of refs) {
+        if (!ref) continue;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      }
+    },
+    [refs]
+  );
+}
+
+// src/ui/components/DropdownMenu.tsx
 import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var dropdownMenuContentVariants = cva7(
   cn(
@@ -2809,14 +2829,14 @@ var dropdownMenuItemVariants = cva7(
   }
 );
 function useWindowTimeout() {
-  const timeoutRef = React12.useRef(null);
-  const clear = React12.useCallback(() => {
+  const timeoutRef = React13.useRef(null);
+  const clear = React13.useCallback(() => {
     if (timeoutRef.current !== null) {
       window.clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
   }, []);
-  const set = React12.useCallback(
+  const set = React13.useCallback(
     (fn, ms) => {
       clear();
       timeoutRef.current = window.setTimeout(() => {
@@ -2826,9 +2846,27 @@ function useWindowTimeout() {
     },
     [clear]
   );
-  React12.useEffect(() => clear, [clear]);
+  React13.useEffect(() => clear, [clear]);
   return { set, clear };
 }
+function getFocusableElements() {
+  const selector = [
+    "a[href]",
+    "button:not([disabled])",
+    "textarea:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])'
+  ].join(",");
+  return Array.from(document.querySelectorAll(selector));
+}
+function getNextFocusableElement(currentElement, reverse = false) {
+  const focusableElements = getFocusableElements();
+  const currentIndex = focusableElements.indexOf(currentElement);
+  if (currentIndex === -1) return null;
+  const nextIndex = reverse ? currentIndex - 1 : currentIndex + 1;
+  return focusableElements[nextIndex] || null;
+}
 function DropdownMenu({
   trigger,
   children,
@@ -2851,65 +2889,43 @@ function DropdownMenu({
   style,
   contentProps
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React12.useState(defaultOpen ?? false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React13.useState(defaultOpen ?? false);
   const isControlled = open2 !== void 0;
   const resolvedOpen = isControlled ? open2 : uncontrolledOpen;
   const motionDuration = useMotionDuration("--motion-fast", 0.14);
-  const suppressDurationMs = Math.max(hoverCloseDelayMs, Math.round(motionDuration * 1e3) + 40);
   const closeTimer = useWindowTimeout();
-  const triggerRef = React12.useRef(null);
-  const contentRef = React12.useRef(null);
-  const openedByHoverRef = React12.useRef(false);
-  const suppressUntilRef = React12.useRef(0);
-  const lastInputRef = React12.useRef("unknown");
-  const isSuppressed = React12.useCallback(() => {
-    if (!hoverOpen) return false;
-    return Date.now() < suppressUntilRef.current;
-  }, [hoverOpen]);
-  const suppressReopen = React12.useCallback(() => {
-    if (!hoverOpen) return;
-    suppressUntilRef.current = Date.now() + suppressDurationMs;
-  }, [hoverOpen, suppressDurationMs]);
-  const handleOpenChange = React12.useCallback(
+  const triggerRef = React13.useRef(null);
+  const contentRef = React13.useRef(null);
+  const openedByHoverRef = React13.useRef(false);
+  const lastInputRef = React13.useRef("unknown");
+  const handleOpenChange = React13.useCallback(
     (nextOpen) => {
       closeTimer.clear();
       if (!nextOpen && hoverOpen && openedByHoverRef.current) {
-        suppressReopen();
         openedByHoverRef.current = false;
       }
       if (!isControlled) setUncontrolledOpen(nextOpen);
       onOpenChange?.(nextOpen);
     },
-    [closeTimer, hoverOpen, isControlled, onOpenChange, suppressReopen]
+    [closeTimer, hoverOpen, isControlled, onOpenChange]
   );
-  const isTargetInside = React12.useCallback((target) => {
+  const isTargetInside = React13.useCallback((target) => {
     if (!(target instanceof Node)) return false;
     return Boolean(triggerRef.current?.contains(target) || contentRef.current?.contains(target));
   }, []);
-  const scheduleClose = React12.useCallback(() => {
+  const scheduleClose = React13.useCallback(() => {
     if (!hoverOpen) return;
     closeTimer.set(() => handleOpenChange(false), hoverCloseDelayMs);
   }, [closeTimer, handleOpenChange, hoverCloseDelayMs, hoverOpen]);
-  const setRef = (ref, node) => {
-    if (typeof ref === "function") {
-      ref(node);
-    } else if (ref && typeof ref === "object") {
-      ref.current = node;
-    }
-  };
   const triggerElement = trigger;
   const triggerProps = triggerElement.props;
-  const resolvedTrigger = hoverOpen ? React12.cloneElement(triggerElement, {
-    ref: (node) => {
-      triggerRef.current = node;
-      setRef(triggerProps.ref, node);
-    },
+  const composedTriggerRef = useComposedRefs(triggerRef, triggerProps.ref);
+  const resolvedTrigger = hoverOpen ? React13.cloneElement(triggerElement, {
+    ref: composedTriggerRef,
     onPointerEnter: (event) => {
       triggerProps.onPointerEnter?.(event);
-      if (isSuppressed()) return;
       openedByHoverRef.current = true;
       lastInputRef.current = "pointer";
-      suppressUntilRef.current = 0;
       closeTimer.clear();
       handleOpenChange(true);
     },
@@ -2922,31 +2938,48 @@ function DropdownMenu({
       if (isTargetInside(event.relatedTarget)) return;
       scheduleClose();
     },
-    onFocus: (event) => {
-      triggerProps.onFocus?.(event);
-      if (lastInputRef.current === "pointer") return;
-      if (isSuppressed()) return;
-      openedByHoverRef.current = false;
-      closeTimer.clear();
-      handleOpenChange(true);
-    },
     onKeyDown: (event) => {
       triggerProps.onKeyDown?.(event);
       lastInputRef.current = "keyboard";
     }
   }) : trigger;
   const contentPropsWithRef = contentProps;
-  const { className: contentClassName, style: contentStyle, ref: contentPropRef, ...restContentProps } = contentPropsWithRef ?? {};
+  const {
+    className: contentClassName,
+    style: contentStyle,
+    ref: contentPropRef,
+    onKeyDown: userOnKeyDown,
+    ...restContentProps
+  } = contentPropsWithRef ?? {};
+  const composedContentRef = useComposedRefs(contentRef, contentPropRef);
+  const handleContentKeyDown = React13.useCallback(
+    (event) => {
+      userOnKeyDown?.(event);
+      if (event.key === "Tab" && !event.defaultPrevented) {
+        event.preventDefault();
+        const triggerElement2 = triggerRef.current;
+        if (!triggerElement2) return;
+        const reverse = event.shiftKey;
+        const nextElement = getNextFocusableElement(triggerElement2, reverse);
+        handleOpenChange(false);
+        if (nextElement) {
+          setTimeout(() => {
+            nextElement.focus();
+          }, 0);
+        }
+      }
+    },
+    [handleOpenChange, userOnKeyDown]
+  );
   const onPointerDownOutside = (event) => {
     restContentProps.onPointerDownOutside?.(event);
-    if (openedByHoverRef.current) suppressReopen();
   };
   const onInteractOutside = (event) => {
     restContentProps.onInteractOutside?.(event);
-    if (openedByHoverRef.current) suppressReopen();
   };
   const resolvedContentProps = hoverOpen ? {
     ...restContentProps,
+    onKeyDown: handleContentKeyDown,
     onPointerEnter: (event) => {
       restContentProps.onPointerEnter?.(event);
       closeTimer.clear();
@@ -2962,7 +2995,10 @@ function DropdownMenu({
     },
     onPointerDownOutside,
     onInteractOutside
-  } : restContentProps;
+  } : {
+    ...restContentProps,
+    onKeyDown: handleContentKeyDown
+  };
   return /* @__PURE__ */ jsxs11(DropdownMenuPrimitive.Root, { open: resolvedOpen, onOpenChange: handleOpenChange, modal, children: [
     /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Trigger, { asChild: true, children: resolvedTrigger }),
     /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Portal, { forceMount: true, container: portalContainer, children: /* @__PURE__ */ jsx19(AnimatePresence4, { children: resolvedOpen ? /* @__PURE__ */ jsx19(
@@ -2982,10 +3018,7 @@ function DropdownMenu({
           motion4.div,
           {
             className: cn(dropdownMenuContentVariants({ chrome }), className, contentClassName),
-            ref: (node) => {
-              contentRef.current = node;
-              setRef(contentPropRef, node);
-            },
+            ref: composedContentRef,
             initial: {
               opacity: 0,
               scale: 0.98,
@@ -3009,7 +3042,7 @@ function DropdownMenu({
     ) : null }) })
   ] });
 }
-var DropdownMenuItem = React12.forwardRef(
+var DropdownMenuItem = React13.forwardRef(
   ({ className, inset, destructive, ...props }, ref) => /* @__PURE__ */ jsx19(
     DropdownMenuPrimitive.Item,
     {
@@ -3020,13 +3053,13 @@ var DropdownMenuItem = React12.forwardRef(
   )
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuSeparator = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Separator, { ref, className: cn("my-1 h-px bg-(--divider)", className), ...props }));
+var DropdownMenuSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Separator, { ref, className: cn("my-1 h-px bg-(--divider)", className), ...props }));
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 
 // src/ui/components/Kbd.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
-var Kbd = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
+var Kbd = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx20(
   "span",
   {
     ref,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexdspace/react",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",