diff --git a/docs/data/base/components/menu/MenuIntroduction/css/index.js b/docs/data/base/components/menu/MenuIntroduction/css/index.js new file mode 100644 index 00000000000000..6e0530275de76e --- /dev/null +++ b/docs/data/base/components/menu/MenuIntroduction/css/index.js @@ -0,0 +1,163 @@ +import * as React from 'react'; +import { Menu } from '@mui/base/Menu'; +import { MenuItem, menuItemClasses } from '@mui/base/MenuItem'; +import { MenuButton } from '@mui/base/MenuButton'; +import { Dropdown } from '@mui/base/Dropdown'; +import { useTheme } from '@mui/system'; + +export default function MenuIntroduction() { + const createHandleMenuClick = (menuItem) => { + return () => { + console.log(`Clicked on ${menuItem}`); + }; + }; + + return ( + + My account + + + + Profile + + + Language settings + + + Log out + + + + + ); +} + +const cyan = { + 50: '#E9F8FC', + 100: '#BDEBF4', + 200: '#99D8E5', + 300: '#66BACC', + 400: '#1F94AD', + 500: '#0D5463', + 600: '#094855', + 700: '#063C47', + 800: '#043039', + 900: '#022127', +}; + +const grey = { + 50: '#f6f8fa', + 100: '#eaeef2', + 200: '#d0d7de', + 300: '#afb8c1', + 400: '#8c959f', + 500: '#6e7781', + 600: '#57606a', + 700: '#424a53', + 800: '#32383f', + 900: '#24292f', +}; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +function Styles() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + return ( + + ); +} diff --git a/docs/data/base/components/menu/MenuIntroduction/css/index.tsx b/docs/data/base/components/menu/MenuIntroduction/css/index.tsx new file mode 100644 index 00000000000000..70ee0fda43b8c4 --- /dev/null +++ b/docs/data/base/components/menu/MenuIntroduction/css/index.tsx @@ -0,0 +1,163 @@ +import * as React from 'react'; +import { Menu } from '@mui/base/Menu'; +import { MenuItem, menuItemClasses } from '@mui/base/MenuItem'; +import { MenuButton } from '@mui/base/MenuButton'; +import { Dropdown } from '@mui/base/Dropdown'; +import { useTheme } from '@mui/system'; + +export default function MenuIntroduction() { + const createHandleMenuClick = (menuItem: string) => { + return () => { + console.log(`Clicked on ${menuItem}`); + }; + }; + + return ( + + My account + + + + Profile + + + Language settings + + + Log out + + + + + ); +} + +const cyan = { + 50: '#E9F8FC', + 100: '#BDEBF4', + 200: '#99D8E5', + 300: '#66BACC', + 400: '#1F94AD', + 500: '#0D5463', + 600: '#094855', + 700: '#063C47', + 800: '#043039', + 900: '#022127', +}; + +const grey = { + 50: '#f6f8fa', + 100: '#eaeef2', + 200: '#d0d7de', + 300: '#afb8c1', + 400: '#8c959f', + 500: '#6e7781', + 600: '#57606a', + 700: '#424a53', + 800: '#32383f', + 900: '#24292f', +}; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +function Styles() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + return ( + + ); +} diff --git a/docs/data/base/components/menu/MenuIntroduction.js b/docs/data/base/components/menu/MenuIntroduction/system/index.js similarity index 97% rename from docs/data/base/components/menu/MenuIntroduction.js rename to docs/data/base/components/menu/MenuIntroduction/system/index.js index a253fc53084fc8..91550b9e6f8d93 100644 --- a/docs/data/base/components/menu/MenuIntroduction.js +++ b/docs/data/base/components/menu/MenuIntroduction/system/index.js @@ -19,7 +19,7 @@ export default function MenuIntroduction() { Profile - + Language settings diff --git a/docs/data/base/components/menu/MenuIntroduction.tsx b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx similarity index 97% rename from docs/data/base/components/menu/MenuIntroduction.tsx rename to docs/data/base/components/menu/MenuIntroduction/system/index.tsx index 353249d85e1371..7b56956e446509 100644 --- a/docs/data/base/components/menu/MenuIntroduction.tsx +++ b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx @@ -19,7 +19,7 @@ export default function MenuIntroduction() { Profile - + Language settings diff --git a/docs/data/base/components/menu/MenuIntroduction.tsx.preview b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx.preview similarity index 83% rename from docs/data/base/components/menu/MenuIntroduction.tsx.preview rename to docs/data/base/components/menu/MenuIntroduction/system/index.tsx.preview index 7a4c6378fff017..a67a0b2474189b 100644 --- a/docs/data/base/components/menu/MenuIntroduction.tsx.preview +++ b/docs/data/base/components/menu/MenuIntroduction/system/index.tsx.preview @@ -4,7 +4,7 @@ Profile - + Language settings diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js new file mode 100644 index 00000000000000..6cb844adb3525d --- /dev/null +++ b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js @@ -0,0 +1,132 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { Menu as BaseMenu } from '@mui/base/Menu'; +import { MenuButton as BaseMenuButton } from '@mui/base/MenuButton'; +import { MenuItem as BaseMenuItem } from '@mui/base/MenuItem'; +import { Dropdown } from '@mui/base/Dropdown'; +import { useTheme } from '@mui/system'; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +export default function MenuIntroduction() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + const createHandleMenuClick = (menuItem) => { + return () => { + console.log(`Clicked on ${menuItem}`); + }; + }; + + return ( +
+ + My account + + Profile + + Language settings + + Log out + + +
+ ); +} + +const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn); + +const Menu = React.forwardRef((props, ref) => { + // Replace this with your app logic for determining dark modes + const isDarkMode = useIsDarkMode(); + + return ( + { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.root, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + `${isDarkMode ? 'dark' : ''} z-10`, + resolvedSlotProps?.className, + ), + }; + }, + listbox: (ownerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.listbox, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + 'text-sm box-border font-sans p-1.5 my-3 mx-0 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 min-w-listbox shadow-md dark:shadow-slate-900', + resolvedSlotProps?.className, + ), + }; + }, + }} + /> + ); +}); + +Menu.propTypes = { + /** + * The props used for each slot inside the Menu. + * @default {} + */ + slotProps: PropTypes.shape({ + listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + }), +}; + +const MenuButton = React.forwardRef((props, ref) => { + const { className, ...other } = props; + return ( + + ); +}); + +MenuButton.propTypes = { + /** + * Class name applied to the root element. + */ + className: PropTypes.string, +}; + +const MenuItem = React.forwardRef((props, ref) => { + const { className, ...other } = props; + return ( + + ); +}); + +MenuItem.propTypes = { + className: PropTypes.string, +}; diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx new file mode 100644 index 00000000000000..1f6b7d16cc5903 --- /dev/null +++ b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx @@ -0,0 +1,112 @@ +import * as React from 'react'; +import clsx from 'clsx'; +import { Menu as BaseMenu, MenuProps } from '@mui/base/Menu'; +import { MenuButton as BaseMenuButton, MenuButtonProps } from '@mui/base/MenuButton'; +import { MenuItem as BaseMenuItem, MenuItemProps } from '@mui/base/MenuItem'; +import { Dropdown } from '@mui/base/Dropdown'; +import { useTheme } from '@mui/system'; + +function useIsDarkMode() { + const theme = useTheme(); + return theme.palette.mode === 'dark'; +} + +export default function MenuIntroduction() { + // Replace this with your app logic for determining dark mode + const isDarkMode = useIsDarkMode(); + + const createHandleMenuClick = (menuItem: string) => { + return () => { + console.log(`Clicked on ${menuItem}`); + }; + }; + + return ( +
+ + My account + + Profile + + Language settings + + Log out + + +
+ ); +} + +const resolveSlotProps = (fn: any, args: any) => + typeof fn === 'function' ? fn(args) : fn; + +const Menu = React.forwardRef((props, ref) => { + // Replace this with your app logic for determining dark modes + const isDarkMode = useIsDarkMode(); + + return ( + { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.root, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + `${isDarkMode ? 'dark' : ''} z-10`, + resolvedSlotProps?.className, + ), + }; + }, + listbox: (ownerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.listbox, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + 'text-sm box-border font-sans p-1.5 my-3 mx-0 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 min-w-listbox shadow-md dark:shadow-slate-900', + resolvedSlotProps?.className, + ), + }; + }, + }} + /> + ); +}); + +const MenuButton = React.forwardRef( + (props, ref) => { + const { className, ...other } = props; + return ( + + ); + }, +); + +const MenuItem = React.forwardRef((props, ref) => { + const { className, ...other } = props; + return ( + + ); +}); diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx.preview new file mode 100644 index 00000000000000..a9e2e559fff817 --- /dev/null +++ b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx.preview @@ -0,0 +1,10 @@ + + My account + + Profile + + Language settings + + Log out + + \ No newline at end of file diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.js b/docs/data/base/components/menu/MenuSimple/tailwind/index.js index 1497c91f85cec5..f56ac73595c42f 100644 --- a/docs/data/base/components/menu/MenuSimple/tailwind/index.js +++ b/docs/data/base/components/menu/MenuSimple/tailwind/index.js @@ -1,7 +1,9 @@ import * as React from 'react'; -import { Menu } from '@mui/base/Menu'; -import { MenuButton } from '@mui/base/MenuButton'; -import { MenuItem } from '@mui/base/MenuItem'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { Menu as BaseMenu } from '@mui/base/Menu'; +import { MenuButton as BaseMenuButton } from '@mui/base/MenuButton'; +import { MenuItem as BaseMenuItem } from '@mui/base/MenuItem'; import { Dropdown } from '@mui/base/Dropdown'; import { useTheme } from '@mui/system'; @@ -23,41 +25,108 @@ export default function MenuSimple() { return (
- - Dashboard - - - - - Profile - - + Dashboard + + Profile + My account - - Log out - + Log out
); } + +const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn); + +const Menu = React.forwardRef((props, ref) => { + // Replace this with your app logic for determining dark modes + const isDarkMode = useIsDarkMode(); + + return ( + { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.root, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + `${isDarkMode ? 'dark' : ''} z-10`, + resolvedSlotProps?.className, + ), + }; + }, + listbox: (ownerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.listbox, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + 'text-sm box-border font-sans p-1.5 my-3 mx-0 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 min-w-listbox shadow-md dark:shadow-slate-900', + resolvedSlotProps?.className, + ), + }; + }, + }} + /> + ); +}); + +Menu.propTypes = { + /** + * The props used for each slot inside the Menu. + * @default {} + */ + slotProps: PropTypes.shape({ + listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + }), +}; + +const MenuButton = React.forwardRef((props, ref) => { + const { className, ...other } = props; + return ( + + ); +}); + +MenuButton.propTypes = { + /** + * Class name applied to the root element. + */ + className: PropTypes.string, +}; + +const MenuItem = React.forwardRef((props, ref) => { + const { className, ...other } = props; + return ( + + ); +}); + +MenuItem.propTypes = { + className: PropTypes.string, +}; diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx index 22fdf714067046..e30fb6e2b17f70 100644 --- a/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx +++ b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; -import { Menu } from '@mui/base/Menu'; -import { MenuButton } from '@mui/base/MenuButton'; -import { MenuItem } from '@mui/base/MenuItem'; +import clsx from 'clsx'; +import { Menu as BaseMenu, MenuProps } from '@mui/base/Menu'; +import { MenuButton as BaseMenuButton, MenuButtonProps } from '@mui/base/MenuButton'; +import { MenuItem as BaseMenuItem, MenuItemProps } from '@mui/base/MenuItem'; import { Dropdown } from '@mui/base/Dropdown'; import { useTheme } from '@mui/system'; @@ -23,41 +24,89 @@ export default function MenuSimple() { return (
- - Dashboard - - - - - Profile - - + Dashboard + + Profile + My account - - Log out - + Log out
); } + +const resolveSlotProps = (fn: any, args: any) => + typeof fn === 'function' ? fn(args) : fn; + +const Menu = React.forwardRef((props, ref) => { + // Replace this with your app logic for determining dark modes + const isDarkMode = useIsDarkMode(); + + return ( + { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.root, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + `${isDarkMode ? 'dark' : ''} z-10`, + resolvedSlotProps?.className, + ), + }; + }, + listbox: (ownerState) => { + const resolvedSlotProps = resolveSlotProps( + props.slotProps?.listbox, + ownerState, + ); + return { + ...resolvedSlotProps, + className: clsx( + 'text-sm box-border font-sans p-1.5 my-3 mx-0 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 min-w-listbox shadow-md dark:shadow-slate-900', + resolvedSlotProps?.className, + ), + }; + }, + }} + /> + ); +}); + +const MenuButton = React.forwardRef( + (props, ref) => { + const { className, ...other } = props; + return ( + + ); + }, +); + +const MenuItem = React.forwardRef((props, ref) => { + const { className, ...other } = props; + return ( + + ); +}); diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx.preview b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx.preview new file mode 100644 index 00000000000000..f3f4842b95a98b --- /dev/null +++ b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx.preview @@ -0,0 +1,10 @@ + + Dashboard + + Profile + + My account + + Log out + + \ No newline at end of file diff --git a/docs/data/base/components/menu/menu.md b/docs/data/base/components/menu/menu.md index e0f7bc02fcc7ce..becfe81dbd3554 100644 --- a/docs/data/base/components/menu/menu.md +++ b/docs/data/base/components/menu/menu.md @@ -23,7 +23,7 @@ It renders an unordered list (`
    `) by default. Use the Menu Item to add items to the Menu. These are rendered as `
  • ` elements. -{{"demo": "MenuIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}} +{{"demo": "MenuIntroduction", "defaultCodeOpen": false, "bg": "gradient"}} ## Components