Use the useDropdown hook

mnajdova · Oct 10, 2023 · 1d6e378 · 1d6e378
1 parent 8edc2a3
commit 1d6e378
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 11 deletions.
diff --git a/docs/pages/base-ui/api/use-menu.json b/docs/pages/base-ui/api/use-menu.json
@@ -13,8 +13,7 @@
         "name": "(items: string[]) =&gt; void",
         "description": "(items: string[]) =&gt; void"
       }
-    },
-    "open": { "type": { "name": "boolean", "description": "boolean" } }
+    }
   },
   "returnValue": {
     "contextValue": {

diff --git a/docs/pages/experiments/material-next/menu.tsx b/docs/pages/experiments/material-next/menu.tsx
@@ -95,7 +95,7 @@ function LegacyUsage(props: MenuProps) {
   );
 }
 
-function StableComponentUsage(props: MenuProps) {
+function StableComponentUsage(props: { MenuListProps?: { disabledItemsFocusable?: boolean } }) {
   const [anchorEl, setAnchorEl] = React.useState<Element | null>(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent) => {

diff --git a/packages/mui-base/src/useMenu/useMenu.ts b/packages/mui-base/src/useMenu/useMenu.ts
@@ -42,7 +42,6 @@ export function useMenu(parameters: UseMenuParameters = {}): UseMenuReturnValue
     onItemsChange,
     id: idParam,
     disabledItemsFocusable = true,
-    open: openParameter,
   } = parameters;
 
   const rootRef = React.useRef<HTMLElement>(null);
@@ -51,14 +50,12 @@ export function useMenu(parameters: UseMenuParameters = {}): UseMenuReturnValue
   const listboxId = useId(idParam) ?? '';
 
   const {
-    state: { open: contextOpen },
+    state: { open },
     dispatch: menuDispatch,
     triggerElement,
     registerPopup,
   } = React.useContext(DropdownContext) ?? FALLBACK_MENU_CONTEXT;
 
-  const open = openParameter !== undefined ? openParameter : contextOpen;
-
   // store the initial open state to prevent focus stealing
   // (the first menu items gets focued only when the menu is opened by the user)
   const isInitiallyOpen = React.useRef(open);

diff --git a/packages/mui-base/src/useMenu/useMenu.types.ts b/packages/mui-base/src/useMenu/useMenu.types.ts
@@ -21,7 +21,6 @@ export interface UseMenuParameters {
    * The ref to the menu's listbox node.
    */
   listboxRef?: React.Ref<Element>;
-  open?: boolean;
 }
 
 export interface UseMenuReturnValue {

diff --git a/packages/mui-material-next/src/Menu/Menu.js b/packages/mui-material-next/src/Menu/Menu.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { useMenu, MenuProvider } from '@mui/base/useMenu';
+import { useDropdown, DropdownContext } from '@mui/base/useDropdown';
 import { useSlotProps } from '@mui/base/utils';
 import { ListActionTypes } from '@mui/base/useList';
 import { HTMLElementType } from '@mui/utils';
@@ -66,7 +67,7 @@ const MenuListbox = styled('ul', {
   outline: 0,
 });
 
-const Menu = React.forwardRef(function Menu(inProps, ref) {
+const MenuInner = React.forwardRef(function Menu(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiMenu' });
 
   const {
@@ -77,7 +78,6 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
     disableAutoFocusItem = false,
     MenuListProps = {},
     onClose,
-    open: openProp,
     PaperProps = {},
     PopoverClasses,
     transitionDuration = 'auto',
@@ -107,7 +107,6 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
   const { contextValue, getListboxProps, dispatch, open, triggerElement } = useMenu({
     // onItemsChange,
     disabledItemsFocusable: Boolean(MenuListProps.disabledItemsFocusable),
-    open: openProp,
   });
 
   React.useImperativeHandle(
@@ -256,6 +255,25 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
   );
 });
 
+const Menu = React.forwardRef(function Menu(inProps, ref) {
+  const { open, anchorEl, ...other } = inProps;
+  const upperDropdownContext = React.useContext(DropdownContext);
+
+  const { contextValue: dropdownContextValue } = useDropdown({
+    open,
+    anchorEl,
+  });
+
+  const Wrapper = !upperDropdownContext ? DropdownContext.Provider : React.Fragment;
+  const wrapperProps = !upperDropdownContext ? { value: dropdownContextValue } : {};
+
+  return (
+    <Wrapper {...wrapperProps}>
+      <MenuInner ref={ref} {...inProps} />
+    </Wrapper>
+  );
+});
+
 Menu.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |