@01.software/ui 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @01.software/ui
 
+## 0.2.1
+
+### Patch Changes
+
+- f27ede2: Keep the newly opened `Menubar` menu open when the pointer moves between open menus while the previous menu plays its exit motion.
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/menubar.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+import { type ComponentProps } from 'react';
 import { Menubar as MenubarPrimitive } from 'radix-ui';
 declare const MenubarMenu: typeof MenubarPrimitive.Menu;
 declare const MenubarGroup: import("react").ForwardRefExoticComponent<MenubarPrimitive.MenubarGroupProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -6,7 +6,7 @@ declare const MenubarRadioGroup: import("react").ForwardRefExoticComponent<Menub
 declare const MenubarSub: import("react").FC<MenubarPrimitive.MenubarSubProps>;
 declare function Menubar({ className, ...props }: ComponentProps<typeof MenubarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function MenubarTrigger({ className, ...props }: ComponentProps<typeof MenubarPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function MenubarContent({ className, portalLabel, align, sideOffset, collisionPadding, ...props }: ComponentProps<typeof MenubarPrimitive.Content> & {
+declare function MenubarContent({ className, portalLabel, align, sideOffset, collisionPadding, ref: forwardedRef, onFocusOutside, onPointerDownOutside, ...props }: ComponentProps<typeof MenubarPrimitive.Content> & {
     portalLabel?: string;
 }): import("react/jsx-runtime").JSX.Element;
 declare function MenubarItem({ className, inset, variant, ...props }: ComponentProps<typeof MenubarPrimitive.Item> & {

package/dist/menubar.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, } from 'react';
 import { Menubar as MenubarPrimitive } from 'radix-ui';
 import { Check, ChevronRight } from 'lucide-react';
 import { cn } from './internal/cn.js';
@@ -17,8 +18,45 @@ function Menubar({ className, ...props }) {
 function MenubarTrigger({ className, ...props }) {
     return (_jsx(MenubarPrimitive.Trigger, { "data-slot": "menubar-trigger", className: cn('data-[state=open]:bg-foreground/10 focus-visible:bg-foreground/10 min-h-6 cursor-default rounded-sm px-2 py-0.5 no-underline outline-none hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--ink)] focus-visible:outline-solid disabled:opacity-40', className), ...props }));
 }
-function MenubarContent({ className, portalLabel, align = 'start', sideOffset = 4, collisionPadding = 16, ...props }) {
-    return (_jsx(MenuContentPortal, { label: portalLabel, children: _jsx(MenubarPrimitive.Content, { "data-slot": "menubar-content", align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: cn(menuContentClassName, 'max-h-(--radix-menubar-content-available-height)', className), ...props }) }));
+/**
+ * Presence keeps a closing menu mounted during its exit motion. Moving between
+ * open menus must not let that closing layer dismiss the menu replacing it.
+ */
+function useClosingLayerGuard(forwardedRef) {
+    const content = useRef(null);
+    // Stable, cleanup-preserving composition like Radix composeRefs.
+    const ref = useCallback((node) => {
+        content.current = node;
+        if (typeof forwardedRef === 'function') {
+            const cleanup = forwardedRef(node);
+            return () => {
+                content.current = null;
+                if (typeof cleanup === 'function')
+                    cleanup();
+                else
+                    forwardedRef(null);
+            };
+        }
+        if (forwardedRef)
+            forwardedRef.current = node;
+        return () => {
+            content.current = null;
+            if (forwardedRef)
+                forwardedRef.current = null;
+        };
+    }, [forwardedRef]);
+    function guard(handler) {
+        return (event) => {
+            handler?.(event);
+            if (content.current?.dataset.state === 'closed')
+                event.preventDefault();
+        };
+    }
+    return { ref, guard };
+}
+function MenubarContent({ className, portalLabel, align = 'start', sideOffset = 4, collisionPadding = 16, ref: forwardedRef, onFocusOutside, onPointerDownOutside, ...props }) {
+    const { ref, guard } = useClosingLayerGuard(forwardedRef);
+    return (_jsx(MenuContentPortal, { label: portalLabel, children: _jsx(MenubarPrimitive.Content, { ref: ref, "data-slot": "menubar-content", align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, onFocusOutside: guard(onFocusOutside), onPointerDownOutside: guard(onPointerDownOutside), className: cn(menuContentClassName, 'max-h-(--radix-menubar-content-available-height)', className), ...props }) }));
 }
 function MenubarItem({ className, inset = false, variant = 'default', ...props }) {
     return (_jsx(MenubarPrimitive.Item, { "data-slot": "menubar-item", className: cn(menuItemClassName, inset && 'pl-7', variant === 'destructive' && 'text-destructive', className), ...props }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@01.software/ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Browser UI primitives and precompiled theme styles for React 19.",
   "type": "module",
   "sideEffects": [