From 2f8b9c518407867752358933dd349bd012bf5707 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Mon, 7 Aug 2023 14:29:01 +0200 Subject: [PATCH] Color inversion demos --- .../breadcrumbs/BreadcrumbsWithMenu.js | 2 +- .../components/menu/MenuIconSideNavExample.js | 6 +- .../joy/components/menu/MenuToolbarExample.js | 39 ++++---- .../color-inversion/ColorInversionHeader.js | 95 +++++++++---------- .../color-inversion/ColorInversionHeader.tsx | 95 +++++++++---------- .../color-inversion/ColorInversionPopup.js | 33 +++---- .../color-inversion/ColorInversionPopup.tsx | 33 +++---- 7 files changed, 146 insertions(+), 157 deletions(-) diff --git a/docs/data/joy/components/breadcrumbs/BreadcrumbsWithMenu.js b/docs/data/joy/components/breadcrumbs/BreadcrumbsWithMenu.js index 75b2b235c864eb..b7be15b820adb1 100644 --- 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 index eb09a244862948..cc81bf2efe6cf9 100644 --- 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={ - setMenuIndex(null)}> + Application 1 Application 2 Application 3 @@ -164,7 +164,7 @@ export default function MenuIconSideNavExample() { onOpen={() => setMenuIndex(1)} onLeaveMenu={createHandleLeaveMenu(1)} menu={ - setMenuIndex(null)}> + Setting 1 Setting 2 Setting 3 @@ -181,7 +181,7 @@ export default function MenuIconSideNavExample() { onOpen={() => setMenuIndex(2)} onLeaveMenu={createHandleLeaveMenu(2)} menu={ - setMenuIndex(null)}> + Personal 1 Personal 2 Personal 3 diff --git a/docs/data/joy/components/menu/MenuToolbarExample.js b/docs/data/joy/components/menu/MenuToolbarExample.js index ff9bf2520adfc8..869a3daa1eb450 100644 --- 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 ( - + { 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={ - { - menus.current[0]?.focus(); - }} - > + New File @@ -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={ - { - menus.current[1]?.focus(); - }} - > + Undo {renderShortcut('⌘ Z')} @@ -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={ - { - menus.current[2]?.focus(); - }} - > + Select All {renderShortcut('⌘ A')} 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 index 25d3cd590c5dca..9d818c8a89affe 100644 --- 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 ( - { - setAnchorEl(event.currentTarget); - }} - endDecorator={} - > - Main - - setAnchorEl(null)} - placement="bottom-start" - disablePortal - size="sm" - sx={{ - '--ListItemDecorator-size': '24px', - '--ListItem-minHeight': '40px', - '--ListDivider-gap': '4px', - minWidth: 200, - }} - > - setAnchorEl(null)}> - - - - Products - - - setAnchorEl(null)}>Pricing - setAnchorEl(null)}> - Case studies{' '} - - `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`, - }} - > - Beta - - - + + }, + }} + > + Main + + + + + + + Products + + + Pricing + + Case studies{' '} + + `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`, + }} + > + Beta + + + + - setMenuButton(null)} - > - New tab - New window - - Delete - + + }> + Actions + + + New tab + New window + + Delete + + ('danger'); - const [menuButton, setMenuButton] = React.useState(null); return ( - setMenuButton(null)} - > - New tab - New window - - Delete - + + }> + Actions + + + New tab + New window + + Delete + +