Color inversion demos

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

Hide file tree

Showing 4 changed files with 120 additions and 136 deletions.
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

diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionPopup.js b/docs/data/joy/main-features/color-inversion/ColorInversionPopup.js
@@ -7,6 +7,8 @@ import Card from '@mui/joy/Card';
 import IconButton from '@mui/joy/IconButton';
 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 ListDivider from '@mui/joy/ListDivider';
 import Tooltip from '@mui/joy/Tooltip';
 import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
@@ -26,7 +28,6 @@ const modifiers = [
 
 export default function ColorInversionPopup() {
   const [color, setColor] = React.useState('danger');
-  const [menuButton, setMenuButton] = React.useState(null);
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, py: 4 }}>
       <Button
@@ -66,25 +67,17 @@ export default function ColorInversionPopup() {
             listbox: { disablePortal: true, modifiers, sx: { maxHeight: 140 } },
           }}
         />
-        <Button
-          variant="soft"
-          endDecorator={<KeyboardArrowDownIcon />}
-          onClick={(event) => setMenuButton(event.currentTarget)}
-        >
-          Actions
-        </Button>
-        <Menu
-          disablePortal
-          modifiers={modifiers}
-          anchorEl={menuButton}
-          open={!!menuButton}
-          onClose={() => setMenuButton(null)}
-        >
-          <MenuItem>New tab</MenuItem>
-          <MenuItem>New window</MenuItem>
-          <ListDivider />
-          <MenuItem>Delete</MenuItem>
-        </Menu>
+        <Dropdown>
+          <MenuButton variant="soft" endDecorator={<KeyboardArrowDownIcon />}>
+            Actions
+          </MenuButton>
+          <Menu disablePortal modifiers={modifiers}>
+            <MenuItem>New tab</MenuItem>
+            <MenuItem>New window</MenuItem>
+            <ListDivider />
+            <MenuItem>Delete</MenuItem>
+          </Menu>
+        </Dropdown>
         <Tooltip
           title="Bookmark"
           disablePortal

diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionPopup.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionPopup.tsx
@@ -7,6 +7,8 @@ import Card from '@mui/joy/Card';
 import IconButton from '@mui/joy/IconButton';
 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 ListDivider from '@mui/joy/ListDivider';
 import Tooltip from '@mui/joy/Tooltip';
 import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
@@ -26,7 +28,6 @@ const modifiers = [
 
 export default function ColorInversionPopup() {
   const [color, setColor] = React.useState<ColorPaletteProp>('danger');
-  const [menuButton, setMenuButton] = React.useState<HTMLElement | null>(null);
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, py: 4 }}>
       <Button
@@ -71,25 +72,17 @@ export default function ColorInversionPopup() {
             listbox: { disablePortal: true, modifiers, sx: { maxHeight: 140 } },
           }}
         />
-        <Button
-          variant="soft"
-          endDecorator={<KeyboardArrowDownIcon />}
-          onClick={(event) => setMenuButton(event.currentTarget)}
-        >
-          Actions
-        </Button>
-        <Menu
-          disablePortal
-          modifiers={modifiers}
-          anchorEl={menuButton}
-          open={!!menuButton}
-          onClose={() => setMenuButton(null)}
-        >
-          <MenuItem>New tab</MenuItem>
-          <MenuItem>New window</MenuItem>
-          <ListDivider />
-          <MenuItem>Delete</MenuItem>
-        </Menu>
+        <Dropdown>
+          <MenuButton variant="soft" endDecorator={<KeyboardArrowDownIcon />}>
+            Actions
+          </MenuButton>
+          <Menu disablePortal modifiers={modifiers}>
+            <MenuItem>New tab</MenuItem>
+            <MenuItem>New window</MenuItem>
+            <ListDivider />
+            <MenuItem>Delete</MenuItem>
+          </Menu>
+        </Dropdown>
         <Tooltip
           title="Bookmark"
           disablePortal