[POC] MenuButton - Option 1 implementation

docs/pages/experiments/base/menu.tsx

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import MenuUnstyled from '@mui/base/MenuUnstyled';
+import MenuItemUnstyled, { menuItemUnstyledClasses } from '@mui/base/MenuItemUnstyled';
+import PopperUnstyled from '@mui/base/PopperUnstyled';
+import { styled } from '@mui/system';
+import MenuButtonUnstyled from '@mui/base/MenuUnstyled/MenuButtonUnstyled';
+
+const blue = {
+ 100: '#DAECFF',
+ 200: '#99CCF3',
+ 400: '#3399FF',
+ 500: '#007FFF',
+ 600: '#0072E5',
+ 900: '#003A75',
+};
+
+const grey = {
+ 50: '#f6f8fa',
+ 100: '#eaeef2',
+ 200: '#d0d7de',
+ 300: '#afb8c1',
+ 400: '#8c959f',
+ 500: '#6e7781',
+ 600: '#57606a',
+ 700: '#424a53',
+ 800: '#32383f',
+ 900: '#24292f',
+};
+
+const StyledListbox = styled('ul')(
+ ({ theme }) => `
+ 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: 0px;
+ background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+ border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+ color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+ box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+ `,
+);
+
+const StyledMenuItem = styled(MenuItemUnstyled)(
+ ({ theme }) => `
+ list-style: none;
+ padding: 8px;
+ border-radius: 8px;
+ cursor: default;
+ user-select: none;
+
+ &:last-of-type {
+ border-bottom: none;
+ }
+
+ &.${menuItemUnstyledClasses.focusVisible} {
+ outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
+ background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+ color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+ }
+
+ &.${menuItemUnstyledClasses.disabled} {
+ color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
+ }
+
+ &:hover:not(.${menuItemUnstyledClasses.disabled}) {
+ background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
+ color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+ }
+ `,
+);
+
+const MenuButton = styled('button')(
+ ({ theme }) => `
+ font-family: IBM Plex Sans, sans-serif;
+ font-size: 0.875rem;
+ box-sizing: border-box;
+ min-height: calc(1.5em + 22px);
+ border-radius: 12px;
+ padding: 12px 16px;
+ line-height: 1.5;
+ background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
+ border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
+ color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
+
+ transition-property: all;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 120ms;
+
+ &:hover {
+ background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+ border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+ }
+
+ &:focus {
+ border-color: ${blue[400]};
+ outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+ }
+ `,
+);
+
+const Popper = styled(PopperUnstyled)`
+ z-index: 1;
+`;
+
+const Page = styled('div')(`
+ max-width: 800px;
+ min-height: calc(100vh - 40px);
+ box-sizing: border-box;
+ margin: 20px auto;
+ padding: 20px;
+ background: ${grey[100]};
+ border-radius: 4px;
+`);
+
+export default function UnstyledMenuIntroduction() {
+ const [isOpen, setOpen] = React.useState(false);
+
+ const close = () => {
+ setOpen(false);
+ };
+
+ const handleOpenChange = (event: React.SyntheticEvent<HTMLButtonElement>, open: boolean) => {
+ setOpen(open);
+ };
+
+ const createHandleMenuClick = (menuItem: string) => {
+ return () => {
+ // eslint-disable-next-line no-console
+ console.log(`Clicked on ${menuItem}`);
+ close();
+ };
+ };
+
+ return (
+ <Page>
+ <MenuButtonUnstyled
+ slots={{ root: MenuButton }}
+ label="My account"
+ open={isOpen}
+ onOpenChange={handleOpenChange}
+ >
+ <MenuUnstyled
+ slots={{ root: Popper, listbox: StyledListbox }}
+ slotProps={{ root: { placement: 'bottom-start' }, listbox: { id: 'simple-menu' } }}
+ >
+ <StyledMenuItem onClick={createHandleMenuClick('Profile')}>Profile</StyledMenuItem>
+ <StyledMenuItem onClick={createHandleMenuClick('My account')}>
+ Language settings
+ </StyledMenuItem>
+ <StyledMenuItem onClick={createHandleMenuClick('Log out')}>Log out</StyledMenuItem>
+ </MenuUnstyled>
+ </MenuButtonUnstyled>
+ </Page>
+ );
+}

packages/mui-base/src/MenuUnstyled/MenuButtonUnstyled.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import {
+ unstable_useForkRef as useForkRef,
+ unstable_useControlled as useControlled,
+} from '@mui/utils';
+import { useSlotProps } from '../utils';
+
+export interface MenuButtonProps {
+ className?: string;
+ label?: string;
+ open?: boolean;
+ onOpenChange?: (
+ event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,
+ open: boolean,
+ ) => void;
+ defaultOpen?: boolean;
+ children?: React.ReactNode;
+ slots?: {
+ root?: React.ElementType;
+ };
+ slotProps?: {
+ root?: React.HTMLAttributes<HTMLButtonElement>;
+ };
+}
+
+interface MenuTriggerContextValue {
+ open: boolean;
+ buttonRef: React.RefObject<HTMLButtonElement>;
+}
+
+export const MenuTriggerContext = React.createContext<MenuTriggerContextValue | null>(null);
+
+const MenuButton = React.forwardRef(function MenuButton(
+ props: MenuButtonProps,
+ ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+ const {
+ children,
+ label,
+ open: openProp,
+ defaultOpen,
+ onOpenChange,
+ slots = {},
+ slotProps = {},
+ ...other
+ } = props;
+
+ const [isOpen, setOpen] = useControlled({
+ controlled: openProp,
+ default: defaultOpen,
+ name: 'MenuButton',
+ });
+
+ const buttonRef = React.useRef<HTMLButtonElement>(null);
+ const handleRef = useForkRef(buttonRef, ref);
+
+ const contextValue: MenuTriggerContextValue = React.useMemo(
+ () => ({ open: isOpen, buttonRef }),
+ [isOpen, buttonRef],
+ );
+
+ const handleClick = React.useCallback(
+ (event: React.MouseEvent<HTMLButtonElement>) => {
+ setOpen((open) => {
+ return !open;
+ });
+
+ onOpenChange?.(event, !isOpen);
+ },
+ [isOpen, setOpen, onOpenChange],
+ );
+
+ const handleKeyDown = React.useCallback(
+ (event: React.KeyboardEvent<HTMLButtonElement>) => {
+ if (event.key === 'ArrowDown') {
+ event.preventDefault();
+ setOpen(true);
+ onOpenChange?.(event, true);
+ }
+ },
+ [setOpen, onOpenChange],
+ );
+
+ React.useEffect(() => {
+ if (!isOpen) {
+ buttonRef.current?.focus();
+ }
+ }, [isOpen]);
+
+ const Root = slots.root || 'button';
+ const rootProps = useSlotProps({
+ elementType: Root,
+ externalForwardedProps: other,
+ externalSlotProps: slotProps.root,
+ additionalProps: {
+ ref: handleRef,
+ onClick: handleClick,
+ onKeyDown: handleKeyDown,
+ },
+ ownerState: { ...props, open: isOpen },
+ });
+
+ return (
+ <MenuTriggerContext.Provider value={contextValue}>
+ <Root {...rootProps}>{label}</Root>
+ {children}
+ </MenuTriggerContext.Provider>
+ );
+});
+
+export default MenuButton;

packages/mui-base/src/MenuUnstyled/MenuUnstyled.tsx

@@ -14,6 +14,7 @@ import useMenu from './useMenu';
 import composeClasses from '../composeClasses';
 import PopperUnstyled from '../PopperUnstyled';
 import useSlotProps from '../utils/useSlotProps';
+import { MenuTriggerContext } from './MenuButtonUnstyled';
 
 function getUtilityClasses(ownerState: MenuUnstyledOwnerState) {
  const { open } = ownerState;
@@ -39,18 +40,27 @@ const MenuUnstyled = React.forwardRef(function MenuUnstyled<
 >(props: MenuUnstyledProps<BaseComponentType>, forwardedRef: React.Ref<any>) {
  const {
  actions,
- anchorEl,
+ anchorEl: anchorElProp,
  children,
  component,
  keepMounted = false,
  listboxId,
  onClose,
- open = false,
+ open: openProp = false,
  slotProps = {},
  slots = {},
  ...other
  } = props;
 
+ let open = openProp;
+ let anchorEl = anchorElProp;
+
+ const triggerContext = React.useContext(MenuTriggerContext);
+ if (triggerContext) {
+ open = triggerContext.open;
+ anchorEl = triggerContext.buttonRef.current;
+ }
+
  const {
  registerItem,
  unregisterItem,