[base] Refactor the compound components building blocks (mui#36400)

Co-authored-by: siriwatknp <[email protected]>
mfal · Apr 11, 2023 · 44748d4 · 44748d4
1 parent 05127cf
commit 44748d4
Show file tree

Hide file tree

Showing 175 changed files with 7,075 additions and 4,229 deletions.
diff --git a/docs/data/base/components/menu/MenuSimple.js b/docs/data/base/components/menu/MenuSimple.js
@@ -5,26 +5,27 @@ import MenuItemUnstyled, {
 } from '@mui/base/MenuItemUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';
+import { ListActionTypes } from '@mui/base/useList';
 
 export default function UnstyledMenuSimple() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const isOpen = Boolean(anchorEl);
-  const buttonRef = React.useRef(null);
+  const [buttonElement, setButtonElement] = React.useState(null);
+
+  const [isOpen, setOpen] = React.useState(false);
   const menuActions = React.useRef(null);
   const preventReopen = React.useRef(false);
 
+  const updateAnchor = React.useCallback((node) => {
+    setButtonElement(node);
+  }, []);
+
   const handleButtonClick = (event) => {
     if (preventReopen.current) {
       event.preventDefault();
       preventReopen.current = false;
       return;
     }
 
-    if (isOpen) {
-      setAnchorEl(null);
-    } else {
-      setAnchorEl(event.currentTarget);
-    }
+    setOpen((open) => !open);
   };
 
   const handleButtonMouseDown = () => {
@@ -38,22 +39,23 @@ export default function UnstyledMenuSimple() {
   const handleButtonKeyDown = (event) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      setAnchorEl(event.currentTarget);
+      setOpen(true);
       if (event.key === 'ArrowUp') {
-        menuActions.current?.highlightLastItem();
+        // Focus the last item when pressing ArrowUp.
+        menuActions.current?.dispatch({
+          type: ListActionTypes.keyDown,
+          key: event.key,
+          event,
+        });
       }
     }
   };
 
-  const close = () => {
-    setAnchorEl(null);
-    buttonRef.current.focus();
-  };
-
   const createHandleMenuClick = (menuItem) => {
     return () => {
       console.log(`Clicked on ${menuItem}`);
-      close();
+      setOpen(false);
+      buttonElement?.focus();
     };
   };
 
@@ -64,7 +66,7 @@ export default function UnstyledMenuSimple() {
         onClick={handleButtonClick}
         onKeyDown={handleButtonKeyDown}
         onMouseDown={handleButtonMouseDown}
-        ref={buttonRef}
+        ref={updateAnchor}
         aria-controls={isOpen ? 'simple-menu' : undefined}
         aria-expanded={isOpen || undefined}
         aria-haspopup="menu"
@@ -75,8 +77,10 @@ export default function UnstyledMenuSimple() {
       <MenuUnstyled
         actions={menuActions}
         open={isOpen}
-        onClose={close}
-        anchorEl={anchorEl}
+        onOpenChange={(open) => {
+          setOpen(open);
+        }}
+        anchorEl={buttonElement}
         slots={{ root: Popper, listbox: StyledListbox }}
         slotProps={{ listbox: { id: 'simple-menu' } }}
       >

diff --git a/docs/data/base/components/menu/MenuSimple.tsx b/docs/data/base/components/menu/MenuSimple.tsx
@@ -5,26 +5,28 @@ import MenuItemUnstyled, {
 } from '@mui/base/MenuItemUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';
+import { ListActionTypes } from '@mui/base/useList';
 
 export default function UnstyledMenuSimple() {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
-  const isOpen = Boolean(anchorEl);
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(
+    null,
+  );
+  const [isOpen, setOpen] = React.useState(false);
   const menuActions = React.useRef<MenuUnstyledActions>(null);
   const preventReopen = React.useRef(false);
 
+  const updateAnchor = React.useCallback((node: HTMLButtonElement | null) => {
+    setButtonElement(node);
+  }, []);
+
   const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     if (preventReopen.current) {
       event.preventDefault();
       preventReopen.current = false;
       return;
     }
 
-    if (isOpen) {
-      setAnchorEl(null);
-    } else {
-      setAnchorEl(event.currentTarget);
-    }
+    setOpen((open) => !open);
   };
 
   const handleButtonMouseDown = () => {
@@ -38,22 +40,23 @@ export default function UnstyledMenuSimple() {
   const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      setAnchorEl(event.currentTarget);
+      setOpen(true);
       if (event.key === 'ArrowUp') {
-        menuActions.current?.highlightLastItem();
+        // Focus the last item when pressing ArrowUp.
+        menuActions.current?.dispatch({
+          type: ListActionTypes.keyDown,
+          key: event.key,
+          event,
+        });
       }
     }
   };
 
-  const close = () => {
-    setAnchorEl(null);
-    buttonRef.current!.focus();
-  };
-
   const createHandleMenuClick = (menuItem: string) => {
     return () => {
       console.log(`Clicked on ${menuItem}`);
-      close();
+      setOpen(false);
+      buttonElement?.focus();
     };
   };
 
@@ -64,7 +67,7 @@ export default function UnstyledMenuSimple() {
         onClick={handleButtonClick}
         onKeyDown={handleButtonKeyDown}
         onMouseDown={handleButtonMouseDown}
-        ref={buttonRef}
+        ref={updateAnchor}
         aria-controls={isOpen ? 'simple-menu' : undefined}
         aria-expanded={isOpen || undefined}
         aria-haspopup="menu"
@@ -75,8 +78,10 @@ export default function UnstyledMenuSimple() {
       <MenuUnstyled
         actions={menuActions}
         open={isOpen}
-        onClose={close}
-        anchorEl={anchorEl}
+        onOpenChange={(open) => {
+          setOpen(open);
+        }}
+        anchorEl={buttonElement}
         slots={{ root: Popper, listbox: StyledListbox }}
         slotProps={{ listbox: { id: 'simple-menu' } }}
       >

diff --git a/docs/data/base/components/menu/UnstyledMenuIntroduction.js b/docs/data/base/components/menu/UnstyledMenuIntroduction.js
@@ -5,50 +5,67 @@ import MenuItemUnstyled, {
 } from '@mui/base/MenuItemUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';
+import { ListActionTypes } from '@mui/base/useList';
 
 export default function UnstyledMenuIntroduction() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const isOpen = Boolean(anchorEl);
-  const buttonRef = React.useRef(null);
+  const [buttonElement, setButtonElement] = React.useState(null);
+
+  const [isOpen, setOpen] = React.useState(false);
   const menuActions = React.useRef(null);
+  const preventReopen = React.useRef(false);
+
+  const updateAnchor = React.useCallback((node) => {
+    setButtonElement(node);
+  }, []);
 
   const handleButtonClick = (event) => {
+    if (preventReopen.current) {
+      event.preventDefault();
+      preventReopen.current = false;
+      return;
+    }
+
+    setOpen((open) => !open);
+  };
+
+  const handleButtonMouseDown = () => {
     if (isOpen) {
-      setAnchorEl(null);
-    } else {
-      setAnchorEl(event.currentTarget);
+      // Prevents the menu from reopening right after closing
+      // when clicking the button.
+      preventReopen.current = true;
     }
   };
 
   const handleButtonKeyDown = (event) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      setAnchorEl(event.currentTarget);
+      setOpen(true);
       if (event.key === 'ArrowUp') {
-        menuActions.current?.highlightLastItem();
+        // Focus the last item when pressing ArrowUp.
+        menuActions.current?.dispatch({
+          type: ListActionTypes.keyDown,
+          key: event.key,
+          event,
+        });
       }
     }
   };
 
-  const close = () => {
-    setAnchorEl(null);
-    buttonRef.current.focus();
-  };
-
   const createHandleMenuClick = (menuItem) => {
     return () => {
       console.log(`Clicked on ${menuItem}`);
-      close();
+      setOpen(false);
+      buttonElement?.focus();
     };
   };
-
   return (
     <div>
       <TriggerButton
         type="button"
         onClick={handleButtonClick}
         onKeyDown={handleButtonKeyDown}
-        ref={buttonRef}
+        onMouseDown={handleButtonMouseDown}
+        ref={updateAnchor}
         aria-controls={isOpen ? 'simple-menu' : undefined}
         aria-expanded={isOpen || undefined}
         aria-haspopup="menu"
@@ -58,8 +75,10 @@ export default function UnstyledMenuIntroduction() {
       <MenuUnstyled
         actions={menuActions}
         open={isOpen}
-        onClose={close}
-        anchorEl={anchorEl}
+        onOpenChange={(open) => {
+          setOpen(open);
+        }}
+        anchorEl={buttonElement}
         slots={{ root: Popper, listbox: StyledListbox }}
         slotProps={{ listbox: { id: 'simple-menu' } }}
       >

diff --git a/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx b/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx
@@ -5,50 +5,68 @@ import MenuItemUnstyled, {
 } from '@mui/base/MenuItemUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';
+import { ListActionTypes } from '@mui/base/useList';
 
 export default function UnstyledMenuIntroduction() {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
-  const isOpen = Boolean(anchorEl);
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(
+    null,
+  );
+  const [isOpen, setOpen] = React.useState(false);
   const menuActions = React.useRef<MenuUnstyledActions>(null);
+  const preventReopen = React.useRef(false);
+
+  const updateAnchor = React.useCallback((node: HTMLButtonElement | null) => {
+    setButtonElement(node);
+  }, []);
 
   const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (preventReopen.current) {
+      event.preventDefault();
+      preventReopen.current = false;
+      return;
+    }
+
+    setOpen((open) => !open);
+  };
+
+  const handleButtonMouseDown = () => {
     if (isOpen) {
-      setAnchorEl(null);
-    } else {
-      setAnchorEl(event.currentTarget);
+      // Prevents the menu from reopening right after closing
+      // when clicking the button.
+      preventReopen.current = true;
     }
   };
 
   const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      setAnchorEl(event.currentTarget);
+      setOpen(true);
       if (event.key === 'ArrowUp') {
-        menuActions.current?.highlightLastItem();
+        // Focus the last item when pressing ArrowUp.
+        menuActions.current?.dispatch({
+          type: ListActionTypes.keyDown,
+          key: event.key,
+          event,
+        });
       }
     }
   };
 
-  const close = () => {
-    setAnchorEl(null);
-    buttonRef.current!.focus();
-  };
-
   const createHandleMenuClick = (menuItem: string) => {
     return () => {
       console.log(`Clicked on ${menuItem}`);
-      close();
+      setOpen(false);
+      buttonElement?.focus();
     };
   };
-
   return (
     <div>
       <TriggerButton
         type="button"
         onClick={handleButtonClick}
         onKeyDown={handleButtonKeyDown}
-        ref={buttonRef}
+        onMouseDown={handleButtonMouseDown}
+        ref={updateAnchor}
         aria-controls={isOpen ? 'simple-menu' : undefined}
         aria-expanded={isOpen || undefined}
         aria-haspopup="menu"
@@ -58,8 +76,10 @@ export default function UnstyledMenuIntroduction() {
       <MenuUnstyled
         actions={menuActions}
         open={isOpen}
-        onClose={close}
-        anchorEl={anchorEl}
+        onOpenChange={(open) => {
+          setOpen(open);
+        }}
+        anchorEl={buttonElement}
         slots={{ root: Popper, listbox: StyledListbox }}
         slotProps={{ listbox: { id: 'simple-menu' } }}
       >