add custom component for MenuSimple demo

mui · Aug 23, 2023 · c335ee9 · c335ee9
1 parent c82d15b
commit c335ee9
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 24 deletions.
diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.js b/docs/data/base/components/menu/MenuSimple/tailwind/index.js
@@ -1,5 +1,7 @@
 import * as React from 'react';
-import { Menu } from '@mui/base/Menu';
+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 { Dropdown } from '@mui/base/Dropdown';
@@ -27,17 +29,7 @@ export default function MenuSimple() {
           Dashboard
         </MenuButton>
 
-        <Menu
-          slotProps={{
-            root: {
-              className: `${isDarkMode ? 'dark' : ''} z-10`,
-            },
-            listbox: {
-              className:
-                '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',
-            },
-          }}
-        >
+        <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')}
@@ -61,3 +53,57 @@ export default function MenuSimple() {
     </div>
   );
 }
+
+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 (
+    <BaseMenu
+      ref={ref}
+      {...props}
+      slotProps={{
+        ...props.slotProps,
+        root: (ownerState) => {
+          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]),
+  }),
+};
diff --git a/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx b/docs/data/base/components/menu/MenuSimple/tailwind/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Menu } from '@mui/base/Menu';
+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 { Dropdown } from '@mui/base/Dropdown';
@@ -27,17 +28,7 @@ export default function MenuSimple() {
           Dashboard
         </MenuButton>
 
-        <Menu
-          slotProps={{
-            root: {
-              className: `${isDarkMode ? 'dark' : ''} z-10`,
-            },
-            listbox: {
-              className:
-                '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',
-            },
-          }}
-        >
+        <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')}
@@ -61,3 +52,47 @@ export default function MenuSimple() {
     </div>
   );
 }
+
+const resolveSlotProps = (fn: any, args: any) =>
+  typeof fn === 'function' ? fn(args) : fn;
+
+const Menu = React.forwardRef<HTMLDivElement, MenuProps>((props, ref) => {
+  // Replace this with your app logic for determining dark modes
+  const isDarkMode = useIsDarkMode();
+
+  return (
+    <BaseMenu
+      ref={ref}
+      {...props}
+      slotProps={{
+        ...props.slotProps,
+        root: (ownerState) => {
+          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,
+            ),
+          };
+        },
+      }}
+    />
+  );
+});