fixing disabled prop on DropdownExpandableMenuListItem and DropdownEx…

…pandableMenuButton
cengage · Oct 18, 2023 · fa75dc8 · fa75dc8
1 parent 1312e97
commit fa75dc8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 30 deletions.
diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuButton.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuButton.tsx
@@ -7,13 +7,13 @@ import { ThemeContext } from '../../theme/ThemeContext';
 import { DropdownContext } from './Dropdown';
 import { DropdownExpandableMenuGroupContext } from './DropdownExpandableMenuGroup';
 import { useForkedRef } from '../../utils';
+import { DropdownExpandableMenuItemContext } from './DropdownExpandableMenuItem';
 
 export interface DropdownExpandableMenuButtonProps
   extends AccordionButtonProps {
   /**
    * @internal
    */
-  disabled?: boolean;
   icon?: React.ReactElement<IconProps>;
   testId?: string;
 }
@@ -50,19 +50,23 @@ export const DropdownExpandableMenuButton = React.forwardRef<
   HTMLDivElement,
   DropdownExpandableMenuButtonProps
 >((props, forwardedRef) => {
-  const { children, disabled, customOnKeyDown, icon, testId, ...other } = props;
+  const { children, customOnKeyDown, icon, testId, ...other } = props;
 
   const theme = React.useContext(ThemeContext);
   const context = React.useContext(DropdownContext);
   const expandableMenuGroupContext = React.useContext(
     DropdownExpandableMenuGroupContext
   );
 
+  const expandableMenuItemContext = React.useContext(
+    DropdownExpandableMenuItemContext
+  );
+
   const ownRef = React.useRef<HTMLDivElement>();
   const ref = useForkedRef(forwardedRef, ownRef);
 
   React.useEffect(() => {
-    if (!disabled) {
+    if (!expandableMenuItemContext.disabled) {
       context.registerDropdownMenuItem(context.itemRefArray, ownRef);
     }
   }, []);

diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuItem.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuItem.tsx
@@ -1,9 +1,5 @@
 import * as React from 'react';
 import { AccordionItem, AccordionItemProps } from '../Accordion';
-import {
-  DropdownExpandableMenuButton,
-  DropdownExpandableMenuButtonProps,
-} from './DropdownExpandableMenuButton';
 export interface DropdownExpandableMenuItemProps extends AccordionItemProps {
   /**
    * If true, item will be disabled; it will appear dimmed and onClick event (or any other events) will not fire
@@ -16,32 +12,25 @@ export interface DropdownExpandableMenuItemProps extends AccordionItemProps {
   testId?: string;
 }
 
+export interface DropdownExpandableMenuItemContextInterface {
+  disabled?: boolean;
+}
+
+export const DropdownExpandableMenuItemContext =
+  React.createContext<DropdownExpandableMenuItemContextInterface>({});
+
 export const DropdownExpandableMenuItem = React.forwardRef<
   HTMLDivElement,
   DropdownExpandableMenuItemProps
 >((props, ref) => {
   const { children, disabled, testId, ...other } = props;
 
-  const dropdownExpandableMenuItemChildren = React.Children.map(
-    children,
-    child => {
-      const item = child as React.ReactElement<
-        React.PropsWithChildren<DropdownExpandableMenuButtonProps>
-      >;
-
-      if (item.type === DropdownExpandableMenuButton) {
-        if (disabled) {
-          return React.cloneElement(item, { disabled: true });
-        }
-      }
-      return child;
-    }
-  );
-
   return (
-    <AccordionItem {...other} isDisabled={disabled} ref={ref} testId={testId}>
-      {dropdownExpandableMenuItemChildren}
-    </AccordionItem>
+    <DropdownExpandableMenuItemContext.Provider value={{ disabled }}>
+      <AccordionItem {...other} isDisabled={disabled} ref={ref} testId={testId}>
+        {children}
+      </AccordionItem>
+    </DropdownExpandableMenuItemContext.Provider>
   );
 });
 

diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuListItem.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownExpandableMenuListItem.tsx
@@ -5,9 +5,10 @@ import { DropdownContext } from './Dropdown';
 import { Omit, useForkedRef } from '../../utils';
 import { DropdownExpandableMenuGroupContext } from './DropdownExpandableMenuGroup';
 import { DropdownMenuItem, DropdownMenuItemProps } from './DropdownMenuItem';
+import { DropdownExpandableMenuItemContext } from './DropdownExpandableMenuItem';
 
 export interface DropdownExpandableMenuListItemProps
-  extends Omit<DropdownMenuItemProps, 'icon'> {
+  extends Omit<DropdownMenuItemProps, 'icon' | 'disabled'> {
   testId?: string;
 }
 
@@ -31,18 +32,22 @@ export const DropdownExpandableMenuListItem = React.forwardRef<
   HTMLDivElement,
   DropdownExpandableMenuListItemProps
 >((props, forwardedRef) => {
-  const { children, disabled, ...other } = props;
+  const { children, ...other } = props;
 
   const ownRef = React.useRef<HTMLDivElement>();
   const theme = React.useContext(ThemeContext);
   const context = React.useContext(DropdownContext);
 
   const menuGroupContext = React.useContext(DropdownExpandableMenuGroupContext);
 
+  const expandableMenuItemContext = React.useContext(
+    DropdownExpandableMenuItemContext
+  );
+
   const ref = useForkedRef(forwardedRef, ownRef);
 
   React.useEffect(() => {
-    if (!disabled)
+    if (!expandableMenuItemContext.disabled)
       context.registerDropdownMenuItem(context.itemRefArray, ownRef);
   }, []);
 
@@ -51,7 +56,7 @@ export const DropdownExpandableMenuListItem = React.forwardRef<
       {...other}
       expandableMenuButtonHasIcon={menuGroupContext.expandableMenuButtonHasIcon}
       isExpandablePanel={menuGroupContext.isExpandablePanel}
-      ref={disabled ? null : ref}
+      ref={expandableMenuItemContext.disabled ? null : ref}
       theme={theme}
     >
       {children}