@hexdspace/react 0.1.35 → 0.1.37

package/dist/index.d.ts

@@ -687,6 +687,7 @@ interface DropdownMenuProps extends VariantProps<typeof dropdownMenuContentVaria
     children: React.ReactNode;
     open?: boolean;
     defaultOpen?: boolean;
+    keepMounted?: boolean;
     onOpenChange?: (open: boolean) => void;
     hoverOpen?: boolean;
     hoverCloseDelayMs?: number;
@@ -703,7 +704,7 @@ interface DropdownMenuProps extends VariantProps<typeof dropdownMenuContentVaria
     style?: React.CSSProperties;
     contentProps?: DropdownMenuContentProps;
 }
-declare function DropdownMenu({ trigger, children, open, defaultOpen, onOpenChange, hoverOpen, hoverCloseDelayMs, modal, side, align, sideOffset, alignOffset, collisionPadding, portalContainer, ariaLabel, ariaLabelledBy, chrome, orientation, className, style, contentProps, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenu({ trigger, children, open, defaultOpen, keepMounted, onOpenChange, hoverOpen, hoverCloseDelayMs, modal, side, align, sideOffset, alignOffset, collisionPadding, portalContainer, ariaLabel, ariaLabelledBy, chrome, orientation, className, style, contentProps, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
 interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenu$1.Item>, Omit<VariantProps<typeof dropdownMenuItemVariants>, 'orientation'> {
 }
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/index.js

@@ -2884,6 +2884,7 @@ function DropdownMenu({
   children,
   open: open2,
   defaultOpen,
+  keepMounted = false,
   onOpenChange,
   hoverOpen = false,
   hoverCloseDelayMs = 50,
@@ -2989,9 +2990,43 @@ function DropdownMenu({
   );
   const onPointerDownOutside = (event) => {
     restContentProps.onPointerDownOutside?.(event);
+    if (keepMounted) {
+      const target = event.target;
+      const isTriggerEvent = target instanceof Node && triggerRef.current?.contains(target);
+      if (!resolvedOpen || isTriggerEvent) {
+        event.preventDefault();
+      }
+    }
+  };
+  const keepMountedClassName = keepMounted && !resolvedOpen ? "pointer-events-none" : void 0;
+  const initialMotionState = {
+    opacity: 0,
+    scale: 0.98,
+    x: "var(--menu-x)",
+    y: "var(--menu-y)"
+  };
+  const openMotionState = {
+    opacity: 1,
+    scale: 1,
+    x: 0,
+    y: 0
+  };
+  const closedMotionState = {
+    opacity: 0,
+    scale: 0.98,
+    x: "var(--menu-x)",
+    y: "var(--menu-y)"
   };
+  const motionEase = keepMounted ? resolvedOpen ? "easeOut" : "easeIn" : "easeOut";
   const onInteractOutside = (event) => {
     restContentProps.onInteractOutside?.(event);
+    if (keepMounted) {
+      const target = event.target;
+      const isTriggerEvent = target instanceof Node && triggerRef.current?.contains(target);
+      if (!resolvedOpen || isTriggerEvent) {
+        event.preventDefault();
+      }
+    }
   };
   const resolvedContentProps = hoverOpen ? {
     ...restContentProps,
@@ -3013,53 +3048,55 @@ function DropdownMenu({
     onInteractOutside
   } : {
     ...restContentProps,
-    onKeyDown: handleContentKeyDown
+    onKeyDown: handleContentKeyDown,
+    ...keepMounted ? { onPointerDownOutside, onInteractOutside } : void 0
   };
+  const contentNode = /* @__PURE__ */ jsx19(
+    DropdownMenuPrimitive.Content,
+    {
+      asChild: true,
+      forceMount: true,
+      side,
+      align,
+      sideOffset,
+      alignOffset,
+      collisionPadding,
+      "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      ...resolvedContentProps,
+      children: /* @__PURE__ */ jsx19(
+        motion4.div,
+        {
+          "aria-hidden": keepMounted ? !resolvedOpen : void 0,
+          className: cn(
+            dropdownMenuContentVariants({ chrome, orientation }),
+            keepMountedClassName,
+            className,
+            contentClassName
+          ),
+          ref: composedContentRef,
+          initial: initialMotionState,
+          animate: keepMounted ? resolvedOpen ? openMotionState : closedMotionState : openMotionState,
+          exit: keepMounted ? void 0 : {
+            opacity: 0,
+            scale: 0.98,
+            x: "var(--menu-x)",
+            y: "var(--menu-y)",
+            transition: { duration: motionDuration, ease: "easeIn" }
+          },
+          transition: {
+            duration: motionDuration,
+            ease: motionEase
+          },
+          style: { ...style, ...contentStyle },
+          children
+        }
+      )
+    }
+  );
   return /* @__PURE__ */ jsx19(DropdownMenuOrientationContext.Provider, { value: resolvedItemsOrientation, children: /* @__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(
-      DropdownMenuPrimitive.Content,
-      {
-        asChild: true,
-        forceMount: true,
-        side,
-        align,
-        sideOffset,
-        alignOffset,
-        collisionPadding,
-        "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        ...resolvedContentProps,
-        children: /* @__PURE__ */ jsx19(
-          motion4.div,
-          {
-            className: cn(
-              dropdownMenuContentVariants({ chrome, orientation }),
-              className,
-              contentClassName
-            ),
-            ref: composedContentRef,
-            initial: {
-              opacity: 0,
-              scale: 0.98,
-              x: "var(--menu-x)",
-              y: "var(--menu-y)"
-            },
-            animate: { opacity: 1, scale: 1, x: 0, y: 0 },
-            exit: {
-              opacity: 0,
-              scale: 0.98,
-              x: "var(--menu-x)",
-              y: "var(--menu-y)",
-              transition: { duration: motionDuration, ease: "easeIn" }
-            },
-            transition: { duration: motionDuration, ease: "easeOut" },
-            style: { ...style, ...contentStyle },
-            children
-          }
-        )
-      }
-    ) : null }) })
+    /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Portal, { forceMount: true, container: portalContainer, children: keepMounted ? contentNode : /* @__PURE__ */ jsx19(AnimatePresence4, { children: resolvedOpen ? contentNode : null }) })
   ] }) });
 }
 var DropdownMenuItem = React13.forwardRef(
@@ -3076,7 +3113,11 @@ var DropdownMenuItem = React13.forwardRef(
   }
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuSeparator = React13.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) => {
+  const orientation = React13.useContext(DropdownMenuOrientationContext);
+  const orientationClassName = orientation === "horizontal" ? "mx-1 w-px self-stretch bg-(--divider)" : "my-1 h-px bg-(--divider)";
+  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Separator, { ref, className: cn(orientationClassName, className), ...props });
+});
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 
 // src/ui/components/Kbd.tsx

package/package.json

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