Merge pull request #445 from mashmatrix/fix/dropdownmenu-submenu-toggle

Enhance DropdownMenu Component to Control Nested Submenu Visibility

Author: stomita

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-lightning-design-system",
-  "version": "5.6.1",
+  "version": "5.6.2",
   "description": "Salesforce Lightning Design System components built with React",
   "main": "lib/scripts/index.js",
   "module": "module/scripts/index.js",

src/scripts/DropdownMenu.tsx

@@ -12,6 +12,7 @@ import React, {
   useMemo,
   ReactNode,
   useState,
+  useId,
 } from 'react';
 import classnames from 'classnames';
 import { Icon } from './Icon';
@@ -68,6 +69,18 @@ export const DropdownMenuHandlerContext = createContext<DropdownMenuHandler>(
   {}
 );
 
+type OpenSubmenuContext = {
+  openSubmenuKeys: {
+    [key: string]: { isOpen: boolean; level: number } | undefined;
+  };
+  handleSubmenuOpen: (key: string, level: number) => void;
+};
+
+export const OpenSubmenuContext = createContext<OpenSubmenuContext>({
+  openSubmenuKeys: {},
+  handleSubmenuOpen: () => {},
+});
+
 /**
  *
  */
@@ -82,6 +95,7 @@ export type DropdownMenuItemProps = {
   onClick?: (e: React.SyntheticEvent) => void;
   submenu?: ReactNode;
   submenuItems?: Array<{ key: string | number } & DropdownMenuItemProps>;
+  level?: number;
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick'>;
 
 /**
@@ -104,13 +118,18 @@ export const DropdownMenuItem: FC<DropdownMenuItemProps> = (props) => {
     submenu: submenu_,
     submenuItems,
     children,
+    level = 0,
     ...rprops
   } = props;
 
   const { onMenuSelect, onMenuBlur, onMenuFocus } = useContext(
     DropdownMenuHandlerContext
   );
 
+  const { openSubmenuKeys, handleSubmenuOpen } = useContext(OpenSubmenuContext);
+
+  const submenuKey = useId();
+
   const onKeyDown = useEventCallback((e: KeyboardEvent<HTMLAnchorElement>) => {
     if (e.keyCode === 13 || e.keyCode === 32) {
       // return or space
@@ -163,7 +182,7 @@ export const DropdownMenuItem: FC<DropdownMenuItemProps> = (props) => {
   const onMenuItemClick = useEventCallback(
     (e: SyntheticEvent<HTMLAnchorElement>) => {
       if (submenu) {
-        setSubmenuExpanded((expanded) => !expanded);
+        handleSubmenuOpen(submenuKey, level + 1);
         return;
       }
       onClick?.(e);
@@ -192,11 +211,12 @@ export const DropdownMenuItem: FC<DropdownMenuItemProps> = (props) => {
     (submenuItems ? (
       <DropdownSubmenu label={label}>
         {submenuItems?.map(({ key, ...itemProps }) => (
-          <DropdownMenuItem key={key} {...itemProps} />
+          <DropdownMenuItem key={key} level={level + 1} {...itemProps} />
         ))}
       </DropdownSubmenu>
     ) : undefined);
-  const [submenuExpanded, setSubmenuExpanded] = useState(false);
+
+  const submenuExpanded = openSubmenuKeys[submenuKey]?.isOpen ?? false;
 
   const menuItemClass = classnames(
     'slds-dropdown__item',
@@ -340,6 +360,24 @@ const DropdownMenuInner: FC<DropdownMenuProps & AutoAlignInjectedProps> = (
     }),
     [onBlur, onFocus, onMenuSelect]
   );
+
+  const [openSubmenuKeys, setOpenSubmenuKeys] = useState<{
+    [key: string]: { isOpen: boolean; level: number };
+  }>({});
+
+  const handleSubmenuOpen = (key: string, level: number) => {
+    setOpenSubmenuKeys((prevState) => {
+      const newState = { ...prevState };
+      Object.keys(newState).forEach((submenuKey) => {
+        if (newState[submenuKey].level >= level && key !== submenuKey) {
+          newState[submenuKey].isOpen = false;
+        }
+      });
+      newState[key] = { isOpen: !newState[key]?.isOpen, level };
+      return newState;
+    });
+  };
+
   return (
     <div
       className={dropdownClassNames}
@@ -354,7 +392,11 @@ const DropdownMenuInner: FC<DropdownMenuProps & AutoAlignInjectedProps> = (
       {header ? <MenuHeader>{header}</MenuHeader> : null}
       <ul className='slds-dropdown__list' role='menu'>
         <DropdownMenuHandlerContext.Provider value={handlers}>
-          {children}
+          <OpenSubmenuContext.Provider
+            value={{ openSubmenuKeys, handleSubmenuOpen }}
+          >
+            {children}
+          </OpenSubmenuContext.Provider>
         </DropdownMenuHandlerContext.Provider>
       </ul>
     </div>

stories/DropdownMenu.stories.tsx

@@ -120,19 +120,48 @@ export const WithSubmenu: StoryObj<StoryProps> = {
         children: 'Menu Item Three',
         submenuItems: [
           {
-            eventKey: 21,
-            key: 21,
+            eventKey: 31,
+            key: 31,
             label: 'Menu Item Three - One',
+            submenuItems: [
+              {
+                eventKey: 311,
+                key: 311,
+                label: 'Menu Item Three - One - One',
+              },
+              {
+                eventKey: 312,
+                key: 312,
+                label: 'Menu Item Three - One - Two',
+              },
+              {
+                eventKey: 313,
+                key: 313,
+                label: 'Menu Item Three - One - Three',
+              },
+            ],
           },
           {
-            eventKey: 22,
-            key: 22,
+            eventKey: 32,
+            key: 32,
             label: 'Menu Item Three - Two',
-          },
-          {
-            eventKey: 23,
-            key: 23,
-            label: 'Menu Item Three - Three',
+            submenuItems: [
+              {
+                eventKey: 321,
+                key: 321,
+                label: 'Menu Item Three - Two - One',
+              },
+              {
+                eventKey: 322,
+                key: 322,
+                label: 'Menu Item Three - Two - Two',
+              },
+              {
+                eventKey: 323,
+                key: 323,
+                label: 'Menu Item Three - Two - Three',
+              },
+            ],
           },
         ],
       },