fix: make context menu and global menu (top level) dismiss on menu it…

…em click (#142)

.storybook/main.ts

@@ -3,7 +3,6 @@ import { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
   stories: ["../lib/components/**/*.stories.@(ts|tsx)", "../lib/stories/**/*.stories.@(ts|tsx)"],
   addons: [
-    "@storybook/addon-onboarding",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-themes",

lib/components/ContextMenu/ContextMenu.tsx

@@ -1,6 +1,6 @@
 'use client';
 import cx from 'classnames';
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { DropdownBase, type DropdownPlacement, IconButton, type MenuItemProps } from '../';
 import { type MenuItemGroups, MenuItems } from '../';
 import { useClickOutside } from '../../hooks';
@@ -32,6 +32,18 @@ export const ContextMenu = ({
   const onToggle = () => toggleId(id);
   const expanded = currentId === id;
 
+  const itemsWithToggle = useMemo(() => {
+    return items.map((item) => {
+      return {
+        ...item,
+        onClick: () => {
+          item.onClick?.();
+          closeAll();
+        },
+      };
+    });
+  }, [items, closeAll]);
+
   return (
     <div className={cx(styles.toggle, className)} data-theme="neutral" ref={ref}>
       <IconButton
@@ -44,7 +56,7 @@ export const ContextMenu = ({
         onClick={onToggle}
       />
       <DropdownBase className={styles.dropdown} placement={placement} open={expanded}>
-        <MenuItems groups={groups} items={items} />
+        <MenuItems groups={groups} items={itemsWithToggle} />
       </DropdownBase>
     </div>
   );

lib/components/GlobalMenu/GlobalMenu.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Menu, type MenuItemGroups, type MenuItemProps, MenuListItem } from '../Menu';
 import { type Account, AccountButton } from './AccountButton';
 import { AccountMenu, type AccountMenuProps } from './AccountMenu';
@@ -17,6 +17,7 @@ export interface GlobalMenuProps extends AccountMenuProps {
   className?: string;
   currentAccount?: Account;
   onSelectAccount?: (id: string) => void;
+  onClose?: () => void;
 }
 
 export const GlobalMenu = ({
@@ -29,6 +30,7 @@ export const GlobalMenu = ({
   backLabel = 'Back',
   currentAccount,
   onSelectAccount,
+  onClose,
   logoutButton,
 }: GlobalMenuProps) => {
   const [selectingAccount, setSelectingAccount] = useState<boolean>(false);
@@ -42,6 +44,18 @@ export const GlobalMenu = ({
     onSelectAccount?.(id);
   };
 
+  const itemsWithToggle = useMemo(() => {
+    return items.map((item) => {
+      return {
+        ...item,
+        onClick: () => {
+          item.onClick?.();
+          onClose?.();
+        },
+      };
+    });
+  }, [items, onClose]);
+
   if (selectingAccount) {
     return (
       <GlobalMenuBase>
@@ -72,7 +86,7 @@ export const GlobalMenu = ({
           />
         </GlobalMenuHeader>
         <MenuListItem as="div" role="separator" />
-        <Menu groups={groups} items={items} />
+        <Menu groups={groups} items={itemsWithToggle} />
         {logoutButton && (
           <>
             <MenuListItem as="div" role="separator" />
@@ -87,7 +101,7 @@ export const GlobalMenu = ({
 
   return (
     <GlobalMenuBase>
-      <Menu groups={groups} items={items} />
+      <Menu groups={groups} items={itemsWithToggle} />
     </GlobalMenuBase>
   );
 };

lib/components/Header/Header.tsx

@@ -52,8 +52,8 @@ export const Header = ({ search, menu, currentAccount, logo = {}, badge }: Heade
           label={menu?.menuLabel}
         />
         {menu && (
-          <DropdownBase padding={true} placement="right" open={currentId === 'menu'} className={styles.dropdown}>
-            <GlobalMenu {...menu} currentAccount={currentAccount} />
+          <DropdownBase padding placement="right" open={currentId === 'menu'} className={styles.dropdown}>
+            <GlobalMenu {...menu} currentAccount={currentAccount} onClose={closeAll} />
           </DropdownBase>
         )}
       </HeaderMenu>

package.json

@@ -3,16 +3,10 @@
   "version": "0.10.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "!dist/stories",
-    "!dist/examples"
-  ],
+  "files": ["dist", "!dist/stories", "!dist/examples"],
   "type": "module",
   "description": "Reusable react components",
-  "sideEffects": [
-    "*.css"
-  ],
+  "sideEffects": ["*.css"],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
@@ -41,7 +35,6 @@
     "@storybook/addon-essentials": "^8.4.4",
     "@storybook/addon-interactions": "^8.4.4",
     "@storybook/addon-links": "^8.4.4",
-    "@storybook/addon-onboarding": "^8.4.4",
     "@storybook/addon-themes": "^8.4.4",
     "@storybook/blocks": "^8.4.4",
     "@storybook/react": "^8.4.4",