Color inversion demos

mui · Aug 7, 2023 · 2f8b9c5 · 2f8b9c5
1 parent eddd9a4
commit 2f8b9c5
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 157 deletions.
diff --git a/docs/data/joy/components/breadcrumbs/BreadcrumbsWithMenu.js b/docs/data/joy/components/breadcrumbs/BreadcrumbsWithMenu.js
@@ -1,10 +1,10 @@
+import * as React from 'react';
 import Breadcrumbs from '@mui/joy/Breadcrumbs';
 import MenuButton from '@mui/joy/MenuButton';
 import Dropdown from '@mui/joy/Dropdown';
 import Link from '@mui/joy/Link';
 import Menu from '@mui/joy/Menu';
 import MenuItem from '@mui/joy/MenuItem';
-import * as React from 'react';
 
 export default function BreadcrumbsWithMenu() {
   return (

diff --git a/docs/data/joy/components/menu/MenuIconSideNavExample.js b/docs/data/joy/components/menu/MenuIconSideNavExample.js
@@ -147,7 +147,7 @@ export default function MenuIconSideNavExample() {
             onOpen={() => setMenuIndex(0)}
             onLeaveMenu={createHandleLeaveMenu(0)}
             menu={
-              <Menu onClose={() => setMenuIndex(null)}>
+              <Menu>
                 <MenuItem {...itemProps}>Application 1</MenuItem>
                 <MenuItem {...itemProps}>Application 2</MenuItem>
                 <MenuItem {...itemProps}>Application 3</MenuItem>
@@ -164,7 +164,7 @@ export default function MenuIconSideNavExample() {
             onOpen={() => setMenuIndex(1)}
             onLeaveMenu={createHandleLeaveMenu(1)}
             menu={
-              <Menu onClose={() => setMenuIndex(null)}>
+              <Menu>
                 <MenuItem {...itemProps}>Setting 1</MenuItem>
                 <MenuItem {...itemProps}>Setting 2</MenuItem>
                 <MenuItem {...itemProps}>Setting 3</MenuItem>
@@ -181,7 +181,7 @@ export default function MenuIconSideNavExample() {
             onOpen={() => setMenuIndex(2)}
             onLeaveMenu={createHandleLeaveMenu(2)}
             menu={
-              <Menu onClose={() => setMenuIndex(null)}>
+              <Menu>
                 <MenuItem {...itemProps}>Personal 1</MenuItem>
                 <MenuItem {...itemProps}>Personal 2</MenuItem>
                 <MenuItem {...itemProps}>Personal 3</MenuItem>

diff --git a/docs/data/joy/components/menu/MenuToolbarExample.js b/docs/data/joy/components/menu/MenuToolbarExample.js
@@ -10,9 +10,17 @@ import Dropdown from '@mui/joy/Dropdown';
 import MenuButton from '@mui/joy/MenuButton';
 
 const MenuBarButton = React.forwardRef(
-  ({ children, menu, open, onOpen, onKeyDown, ...props }, ref) => {
+  ({ children, menu, open, onOpen, onClose, onKeyDown, ...props }, ref) => {
+    const handleOpenChange = (event, isOpen) => {
+      if (isOpen) {
+        onOpen(event);
+      } else {
+        onClose(event);
+      }
+    };
+
     return (
-      <Dropdown open={open} onOpenChange={onOpen}>
+      <Dropdown open={open} onOpenChange={handleOpenChange}>
         <MenuButton
           {...props}
           slots={{ root: ListItemButton }}
@@ -132,6 +140,9 @@ export default function MenuToolbarExample() {
           onOpen={() => {
             setMenuIndex((prevMenuIndex) => (prevMenuIndex === null ? 0 : null));
           }}
+          onClose={() => {
+            menus.current[0]?.focus();
+          }}
           onKeyDown={createHandleButtonKeyDown(0)}
           onMouseEnter={() => {
             if (typeof menuIndex === 'number') {
@@ -142,11 +153,7 @@ export default function MenuToolbarExample() {
             menus.current[0] = instance;
           }}
           menu={
-            <Menu
-              onClose={() => {
-                menus.current[0]?.focus();
-              }}
-            >
+            <Menu>
               <ListItem nested>
                 <List aria-label="New">
                   <MenuItem {...itemProps}>New File</MenuItem>
@@ -177,6 +184,9 @@ export default function MenuToolbarExample() {
           onOpen={() => {
             setMenuIndex((prevMenuIndex) => (prevMenuIndex === null ? 1 : null));
           }}
+          onClose={() => {
+            menus.current[1]?.focus();
+          }}
           onKeyDown={createHandleButtonKeyDown(1)}
           onMouseEnter={() => {
             if (typeof menuIndex === 'number') {
@@ -187,11 +197,7 @@ export default function MenuToolbarExample() {
             menus.current[1] = instance;
           }}
           menu={
-            <Menu
-              onClose={() => {
-                menus.current[1]?.focus();
-              }}
-            >
+            <Menu>
               <ListItem nested>
                 <List aria-label="Time travel">
                   <MenuItem {...itemProps}>Undo {renderShortcut('⌘ Z')}</MenuItem>
@@ -218,6 +224,9 @@ export default function MenuToolbarExample() {
           onOpen={() => {
             setMenuIndex((prevMenuIndex) => (prevMenuIndex === null ? 2 : null));
           }}
+          onClose={() => {
+            menus.current[2]?.focus();
+          }}
           onKeyDown={createHandleButtonKeyDown(2)}
           onMouseEnter={() => {
             if (typeof menuIndex === 'number') {
@@ -228,11 +237,7 @@ export default function MenuToolbarExample() {
             menus.current[2] = instance;
           }}
           menu={
-            <Menu
-              onClose={() => {
-                menus.current[2]?.focus();
-              }}
-            >
+            <Menu>
               <MenuItem {...itemProps}>Select All {renderShortcut('⌘ A')}</MenuItem>
               <MenuItem {...itemProps}>
                 Expand Selection {renderShortcut('⌃ ⇧ ⌘ →')}

diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.js b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.js
@@ -9,6 +9,8 @@ import ListDivider from '@mui/joy/ListDivider';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import Menu from '@mui/joy/Menu';
 import MenuItem from '@mui/joy/MenuItem';
+import MenuButton from '@mui/joy/MenuButton';
+import Dropdown from '@mui/joy/Dropdown';
 import Typography from '@mui/joy/Typography';
 import Sheet from '@mui/joy/Sheet';
 import Chip from '@mui/joy/Chip';
@@ -19,7 +21,6 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded';
 
 export default function ColorInversionHeader() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
   const [color, setColor] = React.useState('primary');
   return (
     <Sheet
@@ -53,53 +54,51 @@ export default function ColorInversionHeader() {
         <ColorLensRoundedIcon fontSize="small" />
       </IconButton>
       <Box sx={{ flex: 1, display: 'flex', gap: 1, px: 2 }}>
-        <Chip
-          variant="outlined"
-          onClick={(event) => {
-            setAnchorEl(event.currentTarget);
-          }}
-          endDecorator={<KeyboardArrowDownIcon />}
-        >
-          Main
-        </Chip>
-        <Menu
-          variant="outlined"
-          anchorEl={anchorEl}
-          open={Boolean(anchorEl)}
-          onClose={() => setAnchorEl(null)}
-          placement="bottom-start"
-          disablePortal
-          size="sm"
-          sx={{
-            '--ListItemDecorator-size': '24px',
-            '--ListItem-minHeight': '40px',
-            '--ListDivider-gap': '4px',
-            minWidth: 200,
-          }}
-        >
-          <MenuItem onClick={() => setAnchorEl(null)}>
-            <ListItemDecorator>
-              <BubbleChartIcon />
-            </ListItemDecorator>
-            Products
-          </MenuItem>
-          <ListDivider />
-          <MenuItem onClick={() => setAnchorEl(null)}>Pricing</MenuItem>
-          <MenuItem onClick={() => setAnchorEl(null)}>
-            Case studies{' '}
-            <Chip
-              variant="outlined"
-              size="sm"
-              sx={{
-                ml: 'auto',
-                bgcolor: (theme) =>
-                  `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
-              }}
-            >
-              Beta
-            </Chip>
-          </MenuItem>
-        </Menu>
+        <Dropdown>
+          <MenuButton
+            slots={{ root: Chip }}
+            slotProps={{
+              root: { variant: 'outlined', endDecorator: <KeyboardArrowDownIcon /> },
+            }}
+          >
+            Main
+          </MenuButton>
+          <Menu
+            variant="outlined"
+            placement="bottom-start"
+            disablePortal
+            size="sm"
+            sx={{
+              '--ListItemDecorator-size': '24px',
+              '--ListItem-minHeight': '40px',
+              '--ListDivider-gap': '4px',
+              minWidth: 200,
+            }}
+          >
+            <MenuItem>
+              <ListItemDecorator>
+                <BubbleChartIcon />
+              </ListItemDecorator>
+              Products
+            </MenuItem>
+            <ListDivider />
+            <MenuItem>Pricing</MenuItem>
+            <MenuItem>
+              Case studies{' '}
+              <Chip
+                variant="outlined"
+                size="sm"
+                sx={{
+                  ml: 'auto',
+                  bgcolor: (theme) =>
+                    `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
+                }}
+              >
+                Beta
+              </Chip>
+            </MenuItem>
+          </Menu>
+        </Dropdown>
       </Box>
       <Box sx={{ display: 'flex', flexShrink: 0, gap: 2 }}>
         <Button

diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx
@@ -9,6 +9,8 @@ import ListDivider from '@mui/joy/ListDivider';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import Menu from '@mui/joy/Menu';
 import MenuItem from '@mui/joy/MenuItem';
+import MenuButton from '@mui/joy/MenuButton';
+import Dropdown from '@mui/joy/Dropdown';
 import Typography from '@mui/joy/Typography';
 import Sheet from '@mui/joy/Sheet';
 import Chip from '@mui/joy/Chip';
@@ -19,7 +21,6 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded';
 
 export default function ColorInversionHeader() {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
   const [color, setColor] = React.useState<ColorPaletteProp>('primary');
   return (
     <Sheet
@@ -58,53 +59,51 @@ export default function ColorInversionHeader() {
         <ColorLensRoundedIcon fontSize="small" />
       </IconButton>
       <Box sx={{ flex: 1, display: 'flex', gap: 1, px: 2 }}>
-        <Chip
-          variant="outlined"
-          onClick={(event) => {
-            setAnchorEl(event.currentTarget);
-          }}
-          endDecorator={<KeyboardArrowDownIcon />}
-        >
-          Main
-        </Chip>
-        <Menu
-          variant="outlined"
-          anchorEl={anchorEl}
-          open={Boolean(anchorEl)}
-          onClose={() => setAnchorEl(null)}
-          placement="bottom-start"
-          disablePortal
-          size="sm"
-          sx={{
-            '--ListItemDecorator-size': '24px',
-            '--ListItem-minHeight': '40px',
-            '--ListDivider-gap': '4px',
-            minWidth: 200,
-          }}
-        >
-          <MenuItem onClick={() => setAnchorEl(null)}>
-            <ListItemDecorator>
-              <BubbleChartIcon />
-            </ListItemDecorator>
-            Products
-          </MenuItem>
-          <ListDivider />
-          <MenuItem onClick={() => setAnchorEl(null)}>Pricing</MenuItem>
-          <MenuItem onClick={() => setAnchorEl(null)}>
-            Case studies{' '}
-            <Chip
-              variant="outlined"
-              size="sm"
-              sx={{
-                ml: 'auto',
-                bgcolor: (theme) =>
-                  `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
-              }}
-            >
-              Beta
-            </Chip>
-          </MenuItem>
-        </Menu>
+        <Dropdown>
+          <MenuButton
+            slots={{ root: Chip }}
+            slotProps={{
+              root: { variant: 'outlined', endDecorator: <KeyboardArrowDownIcon /> },
+            }}
+          >
+            Main
+          </MenuButton>
+          <Menu
+            variant="outlined"
+            placement="bottom-start"
+            disablePortal
+            size="sm"
+            sx={{
+              '--ListItemDecorator-size': '24px',
+              '--ListItem-minHeight': '40px',
+              '--ListDivider-gap': '4px',
+              minWidth: 200,
+            }}
+          >
+            <MenuItem>
+              <ListItemDecorator>
+                <BubbleChartIcon />
+              </ListItemDecorator>
+              Products
+            </MenuItem>
+            <ListDivider />
+            <MenuItem>Pricing</MenuItem>
+            <MenuItem>
+              Case studies{' '}
+              <Chip
+                variant="outlined"
+                size="sm"
+                sx={{
+                  ml: 'auto',
+                  bgcolor: (theme) =>
+                    `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
+                }}
+              >
+                Beta
+              </Chip>
+            </MenuItem>
+          </Menu>
+        </Dropdown>
       </Box>
       <Box sx={{ display: 'flex', flexShrink: 0, gap: 2 }}>
         <Button