@hexdspace/react 0.1.31 → 0.1.33

package/dist/index.js

@@ -2849,6 +2849,24 @@ function useWindowTimeout() {
   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,
@@ -2924,15 +2942,37 @@ function DropdownMenu({
       triggerProps.onKeyDown?.(event);
       lastInputRef.current = "keyboard";
     }
-  }) : trigger;
+  }) : React13.cloneElement(triggerElement, {
+    ref: composedTriggerRef
+  });
   const contentPropsWithRef = contentProps;
   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);
   };
@@ -2941,6 +2981,7 @@ function DropdownMenu({
   };
   const resolvedContentProps = hoverOpen ? {
     ...restContentProps,
+    onKeyDown: handleContentKeyDown,
     onPointerEnter: (event) => {
       restContentProps.onPointerEnter?.(event);
       closeTimer.clear();
@@ -2956,7 +2997,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(

package/package.json

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