add custom MenuButton and MenuItem components to demo

mui · Aug 26, 2023 · 90f4033 · 90f4033
1 parent c335ee9
commit 90f4033
Show file tree

Hide file tree

Showing 6 changed files with 182 additions and 88 deletions.
diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.js
@@ -2,8 +2,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { Menu as BaseMenu } from '@mui/base/Menu';
-import { MenuButton } from '@mui/base/MenuButton';
-import { MenuItem } from '@mui/base/MenuItem';
+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';
 
@@ -25,29 +25,13 @@ export default function MenuIntroduction() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <Dropdown>
-        <MenuButton className="cursor-pointer text-sm min-h-[calc(1.5em+22px)] font-sans box-border rounded-xl font-semibold px-3.5 py-2 leading-normal bg-white dark:bg-slate-900 border border-solid border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple">
-          My account
-        </MenuButton>
-
+        <MenuButton>My account</MenuButton>
         <Menu>
-          <MenuItem
-            className="list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus-visible:shadow-outline-purple focus-visible:outline-0 focus-visible:bg-slate-100 focus-visible:dark:bg-slate-800 focus-visible-text-slate-900 focus-visible:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700 hover:bg-purple-50 hover:dark:bg-purple-950 hover:text-slate-900 hover:dark:text-slate-300"
-            onClick={createHandleMenuClick('Profile')}
-          >
-            Profile
-          </MenuItem>
-          <MenuItem
-            className="list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus-visible:shadow-outline-purple focus-visible:outline-0 focus-visible:bg-slate-100 focus-visible:dark:bg-slate-800 focus-visible-text-slate-900 focus-visible:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700 hover:bg-purple-50 hover:dark:bg-purple-950 hover:text-slate-900 hover:dark:text-slate-300"
-            onClick={createHandleMenuClick('Language settings')}
-          >
+          <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
+          <MenuItem onClick={createHandleMenuClick('Language settings')}>
             Language settings
           </MenuItem>
-          <MenuItem
-            className="list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus-visible:shadow-outline-purple focus-visible:outline-0 focus-visible:bg-slate-100 focus-visible:dark:bg-slate-800 focus-visible-text-slate-900 focus-visible:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700 hover:bg-purple-50 hover:dark:bg-purple-950 hover:text-slate-900 hover:dark:text-slate-300"
-            onClick={createHandleMenuClick('Log out')}
-          >
-            Log out
-          </MenuItem>
+          <MenuItem onClick={createHandleMenuClick('Log out')}>Log out</MenuItem>
         </Menu>
       </Dropdown>
     </div>
@@ -107,3 +91,42 @@ Menu.propTypes = {
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
 };
+
+const MenuButton = React.forwardRef((props, ref) => {
+  const { className, ...other } = props;
+  return (
+    <BaseMenuButton
+      ref={ref}
+      className={clsx(
+        'cursor-pointer text-sm min-h-[calc(1.5em+22px)] font-sans box-border rounded-xl font-semibold px-3.5 py-2 leading-normal bg-white dark:bg-slate-900 border border-solid border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple',
+        className,
+      )}
+      {...other}
+    />
+  );
+});
+
+MenuButton.propTypes = {
+  /**
+   * Class name applied to the root element.
+   */
+  className: PropTypes.string,
+};
+
+const MenuItem = React.forwardRef((props, ref) => {
+  const { className, ...other } = props;
+  return (
+    <BaseMenuItem
+      ref={ref}
+      className={clsx(
+        'list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus-visible:shadow-outline-purple focus-visible:outline-0 focus-visible:bg-slate-100 focus-visible:dark:bg-slate-800 focus-visible-text-slate-900 focus-visible:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700 hover:bg-purple-50 hover:dark:bg-purple-950 hover:text-slate-900 hover:dark:text-slate-300',
+        className,
+      )}
+      {...other}
+    />
+  );
+});
+
+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
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { Menu as BaseMenu, MenuProps } from '@mui/base/Menu';
-import { MenuButton } from '@mui/base/MenuButton';
-import { MenuItem } from '@mui/base/MenuItem';
+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';
 
@@ -24,29 +24,13 @@ export default function MenuIntroduction() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <Dropdown>
-        <MenuButton className="cursor-pointer text-sm min-h-[calc(1.5em+22px)] font-sans box-border rounded-xl font-semibold px-3.5 py-2 leading-normal bg-white dark:bg-slate-900 border border-solid border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple">
-          My account
-        </MenuButton>
-
+        <MenuButton>My account</MenuButton>
         <Menu>
-          <MenuItem
-            className="list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus-visible:shadow-outline-purple focus-visible:outline-0 focus-visible:bg-slate-100 focus-visible:dark:bg-slate-800 focus-visible-text-slate-900 focus-visible:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700 hover:bg-purple-50 hover:dark:bg-purple-950 hover:text-slate-900 hover:dark:text-slate-300"
-            onClick={createHandleMenuClick('Profile')}
-          >
-            Profile
-          </MenuItem>
-          <MenuItem
-            className="list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus-visible:shadow-outline-purple focus-visible:outline-0 focus-visible:bg-slate-100 focus-visible:dark:bg-slate-800 focus-visible-text-slate-900 focus-visible:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700 hover:bg-purple-50 hover:dark:bg-purple-950 hover:text-slate-900 hover:dark:text-slate-300"
-            onClick={createHandleMenuClick('Language settings')}
-          >
+          <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
+          <MenuItem onClick={createHandleMenuClick('Language settings')}>
             Language settings
           </MenuItem>
-          <MenuItem
-            className="list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus-visible:shadow-outline-purple focus-visible:outline-0 focus-visible:bg-slate-100 focus-visible:dark:bg-slate-800 focus-visible-text-slate-900 focus-visible:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700 hover:bg-purple-50 hover:dark:bg-purple-950 hover:text-slate-900 hover:dark:text-slate-300"
-            onClick={createHandleMenuClick('Log out')}
-          >
-            Log out
-          </MenuItem>
+          <MenuItem onClick={createHandleMenuClick('Log out')}>Log out</MenuItem>
         </Menu>
       </Dropdown>
     </div>
@@ -96,3 +80,33 @@ const Menu = React.forwardRef<HTMLDivElement, MenuProps>((props, ref) => {
     />
   );
 });
+
+const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
+  (props, ref) => {
+    const { className, ...other } = props;
+    return (
+      <BaseMenuButton
+        ref={ref}
+        className={clsx(
+          'cursor-pointer text-sm min-h-[calc(1.5em+22px)] font-sans box-border rounded-xl font-semibold px-3.5 py-2 leading-normal bg-white dark:bg-slate-900 border border-solid border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple',
+          className,
+        )}
+        {...other}
+      />
+    );
+  },
+);
+
+const MenuItem = React.forwardRef<HTMLLIElement, MenuItemProps>((props, ref) => {
+  const { className, ...other } = props;
+  return (
+    <BaseMenuItem
+      ref={ref}
+      className={clsx(
+        'list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus-visible:shadow-outline-purple focus-visible:outline-0 focus-visible:bg-slate-100 focus-visible:dark:bg-slate-800 focus-visible-text-slate-900 focus-visible:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700 hover:bg-purple-50 hover:dark:bg-purple-950 hover:text-slate-900 hover:dark:text-slate-300',
+        className,
+      )}
+      {...other}
+    />
+  );
+});
diff --git a/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/menu/MenuIntroduction/tailwind/index.tsx.preview
@@ -0,0 +1,10 @@
+<Dropdown>
+  <MenuButton>My account</MenuButton>
+  <Menu>
+    <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
+    <MenuItem onClick={createHandleMenuClick('Language settings')}>
+      Language settings
+    </MenuItem>
+    <MenuItem onClick={createHandleMenuClick('Log out')}>Log out</MenuItem>
+  </Menu>
+</Dropdown>
diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.js b/docs/data/base/components/menu/MenuSimple/tailwind/index.js
@@ -2,8 +2,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { Menu as BaseMenu } from '@mui/base/Menu';
-import { MenuButton } from '@mui/base/MenuButton';
-import { MenuItem } from '@mui/base/MenuItem';
+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';
 
@@ -25,29 +25,13 @@ export default function MenuSimple() {
   return (
     <div className={`${isDarkMode ? 'dark' : ''}`}>
       <Dropdown>
-        <MenuButton className="cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 leading-normal bg-transparent border border-solid border-slate-300 dark:border-slate-700 text-purple-600 dark:text-purple-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-400 dark:hover:border-slate-600 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple">
-          Dashboard
-        </MenuButton>
-
+        <MenuButton>Dashboard</MenuButton>
         <Menu>
-          <MenuItem
-            className="list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus-visible:shadow-outline-purple focus-visible:outline-0 focus-visible:bg-slate-100 focus-visible:dark:bg-slate-800 focus-visible-text-slate-900 focus-visible:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700 hover:bg-purple-50 hover:dark:bg-purple-950 hover:text-slate-900 hover:dark:text-slate-300"
-            onClick={createHandleMenuClick('Profile')}
-          >
-            Profile
-          </MenuItem>
-          <MenuItem
-            className="list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus-visible:shadow-outline-purple focus-visible:outline-0 focus-visible:bg-slate-100 focus-visible:dark:bg-slate-800 focus-visible-text-slate-900 focus-visible:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700 hover:bg-purple-50 hover:dark:bg-purple-950 hover:text-slate-900 hover:dark:text-slate-300"
-            onClick={createHandleMenuClick('My account')}
-          >
+          <MenuItem onClick={createHandleMenuClick('Profile')}>Profile</MenuItem>
+          <MenuItem onClick={createHandleMenuClick('My account')}>
             My account
           </MenuItem>
-          <MenuItem
-            className="list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus-visible:shadow-outline-purple focus-visible:outline-0 focus-visible:bg-slate-100 focus-visible:dark:bg-slate-800 focus-visible-text-slate-900 focus-visible:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700 hover:bg-purple-50 hover:dark:bg-purple-950 hover:text-slate-900 hover:dark:text-slate-300"
-            onClick={createHandleMenuClick('Log out')}
-          >
-            Log out
-          </MenuItem>
+          <MenuItem onClick={createHandleMenuClick('Log out')}>Log out</MenuItem>
         </Menu>
       </Dropdown>
     </div>
@@ -107,3 +91,42 @@ Menu.propTypes = {
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
 };
+
+const MenuButton = React.forwardRef((props, ref) => {
+  const { className, ...other } = props;
+  return (
+    <BaseMenuButton
+      ref={ref}
+      className={clsx(
+        'cursor-pointer text-sm font-sans box-border rounded-lg font-semibold px-4 py-2 leading-normal bg-transparent border border-solid border-slate-300 dark:border-slate-700 text-purple-600 dark:text-purple-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-400 dark:hover:border-slate-600 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple',
+        className,
+      )}
+      {...other}
+    />
+  );
+});
+
+MenuButton.propTypes = {
+  /**
+   * Class name applied to the root element.
+   */
+  className: PropTypes.string,
+};
+
+const MenuItem = React.forwardRef((props, ref) => {
+  const { className, ...other } = props;
+  return (
+    <BaseMenuItem
+      ref={ref}
+      className={clsx(
+        'list-none p-2 rounded-lg cursor-default select-none last-of-type:border-b-0 focus-visible:shadow-outline-purple focus-visible:outline-0 focus-visible:bg-slate-100 focus-visible:dark:bg-slate-800 focus-visible-text-slate-900 focus-visible:dark:text-slate-300 disabled:text-slate-400 disabled:dark:text-slate-700 disabled:hover:text-slate-400 disabled:hover:dark:text-slate-700 hover:bg-purple-50 hover:dark:bg-purple-950 hover:text-slate-900 hover:dark:text-slate-300',
+        className,
+      )}
+      {...other}
+    />
+  );
+});
+
+MenuItem.propTypes = {
+  className: PropTypes.string,
+};