@versini/ui-menu 6.3.0 → 6.4.0

package/README.md

@@ -38,8 +38,10 @@ npm install @versini/ui-menu
 
 ### Basic Menu
 
+> **Important**: Every `MenuItem` must be wrapped in a `MenuGroup`. Rendering a `MenuItem` outside of a `MenuGroup` will throw an error.
+
 ```tsx
-import { Menu, MenuItem } from "@versini/ui-menu";
+import { Menu, MenuGroup, MenuItem } from "@versini/ui-menu";
 import { ButtonIcon } from "@versini/ui-button";
 import { IconMenu } from "@versini/ui-icons";
 
@@ -52,9 +54,11 @@ function App() {
         </ButtonIcon>
       }
     >
-      <MenuItem label="Profile" onSelect={() => console.info("Profile")} />
-      <MenuItem label="Settings" onSelect={() => console.info("Settings")} />
-      <MenuItem label="Logout" onSelect={() => console.info("Logout")} />
+      <MenuGroup>
+        <MenuItem label="Profile" onSelect={() => console.info("Profile")} />
+        <MenuItem label="Settings" onSelect={() => console.info("Settings")} />
+        <MenuItem label="Logout" onSelect={() => console.info("Logout")} />
+      </MenuGroup>
     </Menu>
   );
 }
@@ -65,7 +69,7 @@ function App() {
 ### Menu with Icons & Selection
 
 ```tsx
-import { Menu, MenuItem, MenuSeparator } from "@versini/ui-menu";
+import { Menu, MenuGroup, MenuItem, MenuSeparator } from "@versini/ui-menu";
 import { ButtonIcon } from "@versini/ui-button";
 import {
   IconMenu,
@@ -86,22 +90,24 @@ function AccountMenu() {
       }
       onOpenChange={(o) => console.info("open?", o)}
     >
-      <MenuItem
-        label="Profile"
-        icon={<IconUser />}
-        onSelect={() => setLast("profile")}
-      />
-      <MenuItem
-        label="Settings"
-        icon={<IconSettings />}
-        onSelect={() => setLast("settings")}
-      />
-      <MenuSeparator />
-      <MenuItem
-        label="Logout"
-        icon={<IconLogout />}
-        onSelect={() => setLast("logout")}
-      />
+      <MenuGroup>
+        <MenuItem
+          label="Profile"
+          icon={<IconUser />}
+          onSelect={() => setLast("profile")}
+        />
+        <MenuItem
+          label="Settings"
+          icon={<IconSettings />}
+          onSelect={() => setLast("settings")}
+        />
+        <MenuSeparator />
+        <MenuItem
+          label="Logout"
+          icon={<IconLogout />}
+          onSelect={() => setLast("logout")}
+        />
+      </MenuGroup>
     </Menu>
   );
 }
@@ -147,7 +153,9 @@ function SettingsMenu() {
         <MenuItem label="French Teacher" selected={selected === 4} />
       </MenuGroup>
 
-      <MenuItem label="About" />
+      <MenuGroup className="mt-2">
+        <MenuItem label="About" />
+      </MenuGroup>
     </Menu>
   );
 }
@@ -158,7 +166,7 @@ function SettingsMenu() {
 Use `MenuLabel` to add a non-interactive heading inside a menu:
 
 ```tsx
-import { Menu, MenuItem, MenuLabel } from "@versini/ui-menu";
+import { Menu, MenuGroup, MenuItem, MenuLabel } from "@versini/ui-menu";
 import { ButtonIcon } from "@versini/ui-button";
 import { IconBookSparkles, IconMagic, IconProofread } from "@versini/ui-icons";
 
@@ -171,9 +179,11 @@ function PromptsMenu() {
         </ButtonIcon>
       }
     >
-      <MenuLabel>Prompts</MenuLabel>
-      <MenuItem label="Summarize..." icon={<IconMagic />} />
-      <MenuItem label="Proofread..." icon={<IconProofread />} />
+      <MenuGroup>
+        <MenuLabel>Prompts</MenuLabel>
+        <MenuItem label="Summarize..." icon={<IconMagic />} />
+        <MenuItem label="Proofread..." icon={<IconProofread />} />
+      </MenuGroup>
     </Menu>
   );
 }
@@ -205,8 +215,10 @@ function SettingsMenu() {
         </ButtonIcon>
       }
     >
-      <MenuItem label="Profile" />
-      <MenuItem label="Statistics" />
+      <MenuGroup>
+        <MenuItem label="Profile" />
+        <MenuItem label="Statistics" />
+      </MenuGroup>
       <MenuSeparator />
 
       <MenuSub label="Engines and Personas" icon={<IconSettings />}>
@@ -240,7 +252,9 @@ function SettingsMenu() {
         </MenuGroup>
       </MenuSub>
 
-      <MenuItem label="About" />
+      <MenuGroup>
+        <MenuItem label="About" />
+      </MenuGroup>
     </Menu>
   );
 }
@@ -293,7 +307,7 @@ function SettingsMenu() {
 | `icon`       | `React.ReactNode` | -       | Icon to display on the left of the label. |
 | `children`   | `React.ReactNode` | -       | Items to render inside sub-menu.          |
 | `disabled`   | `boolean`         | `false` | Whether the sub-menu is disabled.         |
-| `sideOffset` | `number`          | `14`    | Offset from sub-menu trigger.             |
+| `sideOffset` | `number`          | `22`    | Offset from sub-menu trigger.             |
 
 ### MenuGroup Props
 

package/dist/index.d.ts

@@ -14,7 +14,7 @@ declare type MenuGroupProps = {
     /**
      * The label for the menu group.
      */
-    label: string;
+    label?: string;
     /**
      * The children to render inside the menu group.
      */
@@ -168,7 +168,7 @@ declare type MenuSubProps = {
     disabled?: boolean;
     /**
      * The offset distance from the sub-menu trigger.
-     * @default 14
+     * @default 22
      */
     sideOffset?: number;
 };

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-menu v6.3.0
+  @versini/ui-menu v6.4.0
   © 2026 gizmette.com
 */
 
@@ -14,6 +14,7 @@ import { IconNext } from "@versini/ui-icons";
 
 
 
+const MenuGroupContext = createContext(false);
 /* v8 ignore start - default context values are fallbacks, never used directly */ const MenuRootContext = createContext({
     closeAll: ()=>{}
 });
@@ -131,6 +132,7 @@ function getLastEnabledIndex(items) {
                 /* v8 ignore stop */ case "ArrowDown":
                     {
                         event.preventDefault();
+                        event.stopPropagation();
                         const nextIndex = getNextEnabledIndex(items, activeIndex, 1);
                         setActiveIndex(nextIndex);
                         focusItem(nextIndex);
@@ -139,6 +141,7 @@ function getLastEnabledIndex(items) {
                 case "ArrowUp":
                     {
                         event.preventDefault();
+                        event.stopPropagation();
                         const prevIndex = getNextEnabledIndex(items, activeIndex, -1);
                         setActiveIndex(prevIndex);
                         focusItem(prevIndex);
@@ -147,6 +150,7 @@ function getLastEnabledIndex(items) {
                 case "Home":
                     {
                         event.preventDefault();
+                        event.stopPropagation();
                         const firstIndex = getFirstEnabledIndex(items);
                         setActiveIndex(firstIndex);
                         focusItem(firstIndex);
@@ -155,6 +159,7 @@ function getLastEnabledIndex(items) {
                 case "End":
                     {
                         event.preventDefault();
+                        event.stopPropagation();
                         const lastIndex = getLastEnabledIndex(items);
                         setActiveIndex(lastIndex);
                         focusItem(lastIndex);
@@ -164,6 +169,7 @@ function getLastEnabledIndex(items) {
                 case " ":
                     {
                         event.preventDefault();
+                        event.stopPropagation();
                         /* v8 ignore start - activeIndex bounds and disabled guard */ if (activeIndex >= 0 && activeIndex < items.length && !items[activeIndex].disabled) {
                             items[activeIndex].element.click();
                         }
@@ -172,6 +178,7 @@ function getLastEnabledIndex(items) {
                 case "Escape":
                     {
                         event.preventDefault();
+                        event.stopPropagation();
                         onClose();
                         break;
                     }
@@ -181,6 +188,7 @@ function getLastEnabledIndex(items) {
                             const item = items[activeIndex].element;
                             if (item.getAttribute("aria-haspopup") === "menu") {
                                 event.preventDefault();
+                                event.stopPropagation();
                                 onOpenSubMenu(item);
                             }
                         }
@@ -190,6 +198,7 @@ function getLastEnabledIndex(items) {
                     {
                         if (isSubMenu && onCloseToParent) {
                             event.preventDefault();
+                            event.stopPropagation();
                             onCloseToParent();
                         }
                         break;
@@ -197,6 +206,7 @@ function getLastEnabledIndex(items) {
                 case "Tab":
                     {
                         event.preventDefault();
+                        event.stopPropagation();
                         onClose();
                         break;
                     }
@@ -206,6 +216,7 @@ function getLastEnabledIndex(items) {
                         // or functional keys such as Shift, Control, Alt, Meta, etc.).
                         if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
                             event.preventDefault();
+                            event.stopPropagation();
                             // Reset the debounce timer.
                             if (searchTimeoutRef.current) {
                                 clearTimeout(searchTimeoutRef.current);
@@ -339,8 +350,8 @@ const calculatePosition = (triggerRect, menuRect, placement, sideOffset, viewpor
     };
 };
 const getMenuItemClasses = ({ isSub })=>{
-    return clsx("flex flex-row items-center", "w-full", "m-0 first:mt-0 mt-2 sm:mt-1 px-2 py-1", "rounded-md border border-transparent", "text-left text-base select-none cursor-pointer", "outline-hidden", "disabled:cursor-not-allowed disabled:text-copy-medium", "data-highlighted:bg-surface-dark", "data-highlighted:text-copy-light", "in-data-menu-group:data-highlighted:bg-surface-dark", "in-data-menu-group:data-highlighted:border-border-medium", {
-        "data-[state=open]:bg-surface-darker data-[state=open]:text-copy-light": isSub,
+    return clsx("flex flex-row items-center", "w-full", "m-0 first:mt-0 mt-2 sm:mt-1 px-2 py-1", "rounded-md border border-transparent", "text-left text-base select-none cursor-pointer", "outline-hidden", "disabled:cursor-not-allowed disabled:text-copy-medium", "text-copy-dark", "data-highlighted:bg-surface-darker", "data-highlighted:text-copy-light", "in-data-menu-group:text-copy-light", "in-data-menu-group:data-highlighted:bg-surface-darker", "in-data-menu-group:data-highlighted:border-border-medium", {
+        "data-[state=open]:bg-surface-darker data-[state=open]:text-copy-light justify-between": isSub,
         "data-disabled:cursor-not-allowed data-disabled:text-copy-medium": !isSub
     });
 };
@@ -619,26 +630,31 @@ Menu.displayName = "Menu";
 
 
 
+
 const MenuGroup = ({ children, label, className, icon })=>{
-    const groupClass = clsx_0("rounded-md", "p-2", "bg-surface-dark", "text-copy-light", className);
+    const groupClass = clsx_0("rounded-md", "p-2", "first:mt-0 mt-2", "bg-surface-dark", "text-copy-light", className);
     const labelContainerClass = clsx_0("pt-2 pb-2", "px-3 sm:px-2", "-mx-1 -mt-1", "flex items-center justify-between", "text-xs text-copy-medium uppercase font-bold", "rounded-t-md");
-    return /*#__PURE__*/ jsxs("div", {
-        role: "group",
-        className: groupClass,
-        "data-menu-group": true,
-        children: [
-            label && /*#__PURE__*/ jsx("div", {
-                className: labelContainerClass,
-                children: /*#__PURE__*/ jsxs("span", {
-                    className: "flex items-center gap-1",
-                    children: [
-                        icon,
-                        label
-                    ]
-                })
-            }),
-            children
-        ]
+    return /*#__PURE__*/ jsx(MenuGroupContext.Provider, {
+        value: true,
+        children: /*#__PURE__*/ jsxs("div", {
+            role: label ? "group" : undefined,
+            className: groupClass,
+            "data-menu-group": true,
+            "aria-label": label || undefined,
+            children: [
+                label && /*#__PURE__*/ jsx("div", {
+                    className: labelContainerClass,
+                    children: /*#__PURE__*/ jsxs("span", {
+                        className: "flex items-center gap-1",
+                        children: [
+                            icon,
+                            label
+                        ]
+                    })
+                }),
+                children
+            ]
+        })
     });
 };
 MenuGroup.displayName = "MenuGroup";
@@ -652,6 +668,7 @@ const ITEM_CLASS = getMenuItemClasses({
     isSub: false
 });
 const MenuItem = ({ label, disabled, icon, raw = false, children, ignoreClick = false, selected, onSelect, onClick, onFocus, onMouseEnter, ...props })=>{
+    const isInsideMenuGroup = useContext(MenuGroupContext);
     const itemRef = useRef(null);
     const { closeAll } = useContext(MenuRootContext);
     const { registerItem, unregisterItem, getItems, activeIndex, setActiveIndex, setOpenSubMenuId } = useContext(MenuContentContext);
@@ -668,6 +685,9 @@ const MenuItem = ({ label, disabled, icon, raw = false, children, ignoreClick =
         registerItem,
         unregisterItem
     ]);
+    if (!isInsideMenuGroup) {
+        throw new Error("MenuItem must be used within a MenuGroup.");
+    }
     const getMyIndex = ()=>{
         const items = getItems();
         return items.findIndex((item)=>item.element === itemRef.current);
@@ -821,7 +841,7 @@ const SUB_CONTENT_CLASS = clsx_0("bg-surface-light", "z-60 rounded-md text-copy-
 const SUB_TRIGGER_CLASS = getMenuItemClasses({
     isSub: true
 });
-const MenuSub = ({ label, icon, children, disabled = false, sideOffset = 14 })=>{
+const MenuSub = ({ label, icon, children, disabled = false, sideOffset = 22 })=>{
     const subMenuId = useUniqueId("av-menu-sub-");
     const [isSubOpen, setIsSubOpen] = useState(false);
     const [subActiveIndex, setSubActiveIndex] = useState(-1);
@@ -1029,9 +1049,12 @@ const MenuSub = ({ label, icon, children, disabled = false, sideOffset = 14 })=>
                 popover: "manual",
                 role: "menu",
                 className: SUB_CONTENT_CLASS,
-                children: /*#__PURE__*/ jsx(MenuContentContext.Provider, {
-                    value: subContentContextValue,
-                    children: children
+                children: /*#__PURE__*/ jsx(MenuGroupContext.Provider, {
+                    value: false,
+                    children: /*#__PURE__*/ jsx(MenuContentContext.Provider, {
+                        value: subContentContextValue,
+                        children: children
+                    })
                 })
             })
         ]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-menu",
-	"version": "6.3.0",
+	"version": "6.4.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -49,5 +49,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "6ec1140bfd6c5575eb034224f51149093e8d8683"
+	"gitHead": "3ab8ea89787f8ff5c6e101bff69e19621d31cf6a"
 }