[Menu] Overhaul the component API

.eslintrc.js

@@ -23,6 +23,7 @@ module.exports = {
     ...baseline.rules,
     // TODO move to @mui/monorepo, codebase is moving away from default exports https://github.com/mui/material-ui/issues/21862
     'import/prefer-default-export': 'off',
+    'import/export': 'off', // Mostly handled by Typescript itself. ESLint produces false positives with declaration merging.
     'no-restricted-imports': [
       'error',
       {
@@ -43,6 +44,7 @@ module.exports = {
         ],
       },
     ],
+    '@typescript-eslint/no-redeclare': 'off',
   },
   overrides: [
     ...baseline.overrides,

docs/data/base/components/menu/MenuIntroduction/css/index.js

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import * as Menu from '@base_ui/react/Menu';
+import { useTheme } from '@mui/system';
+
+export default function MenuIntroduction() {
+  const createHandleMenuClick = (menuItem) => {
+    return () => {
+      console.log(`Clicked on ${menuItem}`);
+    };
+  };
+
+  return (
+    <Menu.Root>
+      <Menu.Trigger className="TriggerButtonIntroduction">My account</Menu.Trigger>
+
+      <Menu.Positioner className="CustomMenuIntroduction">
+        <Menu.Popup className="CustomMenuIntroduction--listbox">
+          <Menu.Item
+            className="CustomMenuIntroduction--item"
+            onClick={createHandleMenuClick('Profile')}
+          >
+            Profile
+          </Menu.Item>
+          <Menu.Item
+            className="CustomMenuIntroduction--item"
+            onClick={createHandleMenuClick('Language settings')}
+          >
+            Language settings
+          </Menu.Item>
+          <Menu.Item
+            className="CustomMenuIntroduction--item"
+            onClick={createHandleMenuClick('Log out')}
+          >
+            Log out
+          </Menu.Item>
+        </Menu.Popup>
+      </Menu.Positioner>
+      <Styles />
+    </Menu.Root>
+  );
+}
+
+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: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+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 (
+    <style>{`
+    .CustomMenuIntroduction--listbox {
+      font-family: 'IBM Plex Sans', sans-serif;
+      font-size: 0.875rem;
+      box-sizing: border-box;
+      padding: 6px;
+      margin: 12px 0;
+      min-width: 200px;
+      border-radius: 12px;
+      overflow: auto;
+      outline: 0;
+      background: ${isDarkMode ? grey[900] : '#fff'};
+      border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+      color: ${isDarkMode ? grey[300] : grey[900]};
+      box-shadow: 0px 4px 30px ${isDarkMode ? grey[900] : grey[200]};
+      transform-origin: var(--transform-origin);
+
+      &[data-state='closed'] {
+        opacity: 0;
+        transform: scale(0.95, 0.8);
+        transition: opacity 200ms ease-in, transform 200ms ease-in;
+      }
+      
+      &[data-state='open'] {
+        opacity: 1;
+        transform: scale(1, 1);
+        transition: opacity 100ms ease-out, transform 100ms cubic-bezier(0.43, 0.29, 0.37, 1.48);
+      }
+    }
+
+    .CustomMenuIntroduction--item {
+      list-style: none;
+      padding: 8px;
+      border-radius: 8px;
+      cursor: default;
+      user-select: none;
+    }
+
+    .CustomMenuIntroduction--item:last-of-type {
+      border-bottom: none;
+    }
+
+    .CustomMenuIntroduction--item:focus {
+      outline: 3px solid ${isDarkMode ? cyan[600] : cyan[200]};
+      background-color: ${isDarkMode ? grey[800] : grey[100]};
+      color: ${isDarkMode ? grey[300] : grey[900]};
+    }
+
+    .CustomMenuIntroduction--item.[data-disabled] {
+      color: ${isDarkMode ? grey[700] : grey[400]};
+    }
+
+    .TriggerButtonIntroduction {
+      font-family: 'IBM Plex Sans', sans-serif;
+      font-weight: 600;
+      font-size: 0.875rem;
+      line-height: 1.5;
+      padding: 8px 16px;
+      border-radius: 8px;
+      color: white;
+      transition: all 150ms ease;
+      cursor: pointer;
+      background: ${isDarkMode ? grey[900] : '#fff'};
+      border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+      color: ${isDarkMode ? grey[200] : grey[900]};
+      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+      &:hover {
+        background: ${isDarkMode ? grey[800] : grey[50]};
+        border-color: ${isDarkMode ? grey[600] : grey[300]};
+      }
+
+      &:active {
+        background: ${isDarkMode ? grey[700] : grey[100]};
+      }
+
+      &:focus-visible {
+        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+        outline: none;
+      }
+    }
+
+    .CustomMenuIntroduction {
+      z-index: 1;
+      
+      &:focus-visible {
+        outline: 0;
+      }
+
+      &[data-state='closed'] {
+        pointer-events: none;
+      }
+    }
+    `}</style>
+  );
+}

docs/data/base/components/menu/MenuIntroduction/css/index.tsx

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import * as Menu from '@base_ui/react/Menu';
+import { useTheme } from '@mui/system';
+
+export default function MenuIntroduction() {
+  const createHandleMenuClick = (menuItem: string) => {
+    return () => {
+      console.log(`Clicked on ${menuItem}`);
+    };
+  };
+
+  return (
+    <Menu.Root>
+      <Menu.Trigger className="TriggerButtonIntroduction">My account</Menu.Trigger>
+
+      <Menu.Positioner className="CustomMenuIntroduction">
+        <Menu.Popup className="CustomMenuIntroduction--listbox">
+          <Menu.Item
+            className="CustomMenuIntroduction--item"
+            onClick={createHandleMenuClick('Profile')}
+          >
+            Profile
+          </Menu.Item>
+          <Menu.Item
+            className="CustomMenuIntroduction--item"
+            onClick={createHandleMenuClick('Language settings')}
+          >
+            Language settings
+          </Menu.Item>
+          <Menu.Item
+            className="CustomMenuIntroduction--item"
+            onClick={createHandleMenuClick('Log out')}
+          >
+            Log out
+          </Menu.Item>
+        </Menu.Popup>
+      </Menu.Positioner>
+      <Styles />
+    </Menu.Root>
+  );
+}
+
+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: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+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 (
+    <style>{`
+    .CustomMenuIntroduction--listbox {
+      font-family: 'IBM Plex Sans', sans-serif;
+      font-size: 0.875rem;
+      box-sizing: border-box;
+      padding: 6px;
+      margin: 12px 0;
+      min-width: 200px;
+      border-radius: 12px;
+      overflow: auto;
+      outline: 0;
+      background: ${isDarkMode ? grey[900] : '#fff'};
+      border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+      color: ${isDarkMode ? grey[300] : grey[900]};
+      box-shadow: 0px 4px 30px ${isDarkMode ? grey[900] : grey[200]};
+      transform-origin: var(--transform-origin);
+
+      &[data-state='closed'] {
+        opacity: 0;
+        transform: scale(0.95, 0.8);
+        transition: opacity 200ms ease-in, transform 200ms ease-in;
+      }
+      
+      &[data-state='open'] {
+        opacity: 1;
+        transform: scale(1, 1);
+        transition: opacity 100ms ease-out, transform 100ms cubic-bezier(0.43, 0.29, 0.37, 1.48);
+      }
+    }
+
+    .CustomMenuIntroduction--item {
+      list-style: none;
+      padding: 8px;
+      border-radius: 8px;
+      cursor: default;
+      user-select: none;
+    }
+
+    .CustomMenuIntroduction--item:last-of-type {
+      border-bottom: none;
+    }
+
+    .CustomMenuIntroduction--item:focus {
+      outline: 3px solid ${isDarkMode ? cyan[600] : cyan[200]};
+      background-color: ${isDarkMode ? grey[800] : grey[100]};
+      color: ${isDarkMode ? grey[300] : grey[900]};
+    }
+
+    .CustomMenuIntroduction--item.[data-disabled] {
+      color: ${isDarkMode ? grey[700] : grey[400]};
+    }
+
+    .TriggerButtonIntroduction {
+      font-family: 'IBM Plex Sans', sans-serif;
+      font-weight: 600;
+      font-size: 0.875rem;
+      line-height: 1.5;
+      padding: 8px 16px;
+      border-radius: 8px;
+      color: white;
+      transition: all 150ms ease;
+      cursor: pointer;
+      background: ${isDarkMode ? grey[900] : '#fff'};
+      border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
+      color: ${isDarkMode ? grey[200] : grey[900]};
+      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+      &:hover {
+        background: ${isDarkMode ? grey[800] : grey[50]};
+        border-color: ${isDarkMode ? grey[600] : grey[300]};
+      }
+
+      &:active {
+        background: ${isDarkMode ? grey[700] : grey[100]};
+      }
+
+      &:focus-visible {
+        box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
+        outline: none;
+      }
+    }
+
+    .CustomMenuIntroduction {
+      z-index: 1;
+      
+      &:focus-visible {
+        outline: 0;
+      }
+
+      &[data-state='closed'] {
+        pointer-events: none;
+      }
+    }
+    `}</style>
+  );
+}