[MenuUnstyled] Create MenuUnstyled and useMenu #30961

michaldudak · 2022-02-07T13:33:23Z

This PR introduces the unstyled menu component and friends: MenuUnstyled, MenuItemUnstyled, useMenu and useMenuItem.
This is a rewrite of the components used in Material UI and it's based on the new useListbox hook.

The unstyled Menu differs from its Material counterpart as it contains only the list of items, without the element that triggers the appearance of the list. It's more similar to Material UI's MenuList in this matter. This helps developers make it more customizable. An example of creating a button triggering a menu is included in the docs.

This PR does not enable support for nested menus. This is to be implemented in a separate PR, taking into account work done in #20591 (cc @EsoterikStare).

Preview - https://deploy-preview-30961--material-ui.netlify.app/base/react-menu/

mui-bot · 2022-02-07T13:35:32Z

Details of bundle changes

@material-ui/unstyled: parsed: +6.72% , gzip: +5.36%

Generated by 🚫 dangerJS against ad71ebf

mnajdova · 2022-02-21T14:26:59Z

Shouldn't we skip disabled items when using the keyboard? I don't think this is a valid state:

mnajdova · 2022-02-21T14:27:51Z

docs/data/base/components/menu/menu.md

+
+#### CSS classes
+
+The MenuUnstyled does not receive any state classes.


Suggested change

The MenuUnstyled does not receive any state classes.

The MenuUnstyled does not set any state classes.

The components sets these classes no?

mnajdova · 2022-02-21T14:28:01Z

docs/data/base/components/menu/menu.md

+
+The MenuUnstyled does not receive any state classes.
+
+The MenuItemUnstyled can receive the following classes:


Same as above.

eps1lon · 2022-02-21T18:49:26Z

docs/data/base/components/menu/MenuPopup.js

+    border-bottom: none;
+  }
+
+  &:focus-visible {


Note that only the technology preview of Safari supports this at the moment. We should recommend the polyfill in the meantime.

Generally, the demos should have the same support matrix the library has in my opinion.

👍 I forgot to implement the focus-visible polyfill for menu items. Will fix.

eps1lon · 2022-02-21T18:50:32Z

docs/data/base/components/menu/MenuPopup.js

+      </TriggerButton>
+      <Popper
+        placement="bottom-start"
+        open={isOpen && buttonRef.current != null}


This is reading a ref during render which is generally not safe. This is why we have the pattern for anchorEl that puts the element in React state instead of using a ref.

Good point, thanks!

eps1lon · 2022-02-21T18:51:32Z

docs/data/base/components/menu/MenuPopup.js

+    if (isOpen) {
+      contentRef.current?.focus();
+    }
+  }, [isOpen, contentRef]);


This may not be doing what you think it does. contentRef has no impact on the effect behavior while the effect is not synced with contentRef.current

This was exactly my intention. contentRef isn't really needed in the dependency array.

eps1lon · 2022-02-21T18:54:02Z

It's a bit odd to me that the default pattern for a Menu does not use it as a popup. In my perception Menus are always in a popup.

michaldudak · 2022-02-24T14:14:01Z

I am thinking about using the useMenuItem hook inside the Joy's ListItemButton.

@siriwatknp Sure! Hooks are meant to be composed to make higher-level components. In case of useMenuItem it's just a small utility to register the item within the Menu to be able to be notified about whether it should be selected.

From the design perspective, I think the content in the MenuPopup is a bunch of list components with keyboard support

Indeed! Just note that the menu implements a roving focus (only the currently selected item has tabIndex: 0 and the rest has -1), so it's not possible to navigate through items with the Tab key - not sure if this is something you want.

useMenuItem({ component: 'button', ref }) // what's component for?

The useButton hook (which is used by useMenuItem needs to know if it's applied on a button element or something else. Props such as role, disabled/aria-disabled, and event handlers depend on it.
I am considering changing this API as I don't really like how it's used. I will refactor the Joy implementation if I do so.

mnajdova · 2022-03-01T10:26:22Z

Some problems found after an a11y review:

esc should close the menu and focus the trigger element (implemented in Material-UI)
you should be able to select the element by typing the first letter (implemented in Material-UI)
the button opening the Menu should have the corresponding aria attributes: aria-haspopup, aria-controls (to reference the menu it opens), aria-expanded (when the menu is opened) (implemented in the demos for Material-UI)
the button opening the Menu should open the menu on Down/Up arrow (not implemented in Material-UI)

References:

mnajdova · 2022-03-01T11:30:53Z

docs/data/base/components/menu/MenuSimple.js

+  };
+
+  const handleButtonKeyDown = (event) => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {


If the ArrowUp is pressed, the last element should be foced when the menu opens.

michaldudak · 2022-03-01T13:18:15Z

esc should close the menu and focus the trigger element (implemented in Material-UI)

Implemented in the demos. I'll consider creating an unstyled MenuButton (or DropdownButton) that has this functionality built-in. It could also be used for a Select.

you should be able to select the element by typing the first letter (implemented in Material-UI)

This makes more sense in cases where items are ordered alphabetically (which is rarely the case in a menu). I am going to implement it anyway in Listbox (which is what Select and Menu use internally).

the button opening the Menu should have the corresponding aria attributes: aria-haspopup, aria-controls (to reference the menu it opens), aria-expanded (when the menu is opened) (implemented in the demos for Material-UI)

This is now fixed

the button opening the Menu should open the menu on Down/Up arrow (not implemented in Material-UI)
If the ArrowUp is pressed, the last element should be foced when the menu opens.

👍 Working on it

michaldudak · 2022-03-03T13:05:42Z

the button opening the Menu should open the menu on Down/Up arrow (not implemented in Material-UI)
If the ArrowUp is pressed, the last element should be foced when the menu opens.

@mnajdova this should work as expected now.

mnajdova · 2022-03-04T11:49:54Z

docs/data/base/components/menu/MenuSimple.js

+      event.preventDefault();
+      setAnchorEl(event.currentTarget);
+      if (event.key === 'ArrowUp') {
+        menuActions.current?.highlightLastItem();


I don't like that we need to use useImperativeHandle here. Is there a different option? One additional reason to have the MenuButton as a standalone component.

In addition to this:

<TriggerButton type="button" onClick={handleButtonClick} onKeyDown={handleButtonKeyDown} ref={buttonRef} aria-controls={isOpen ? 'simple-menu' : undefined} aria-expanded={isOpen || undefined} aria-haspopup="menu" > Language </TriggerButton>

Has too much boilerplate which is important to not be missed. I would propose to tackle this in the next PR.

Yes, I absolutely agree it's too much code. I will create the MenuButton for sure.
As for useImperativeHandle - I realize it's not quite in the spirit of React, but I couldn't think of a better option that would work with the current MenuUnstyled design. I'm happy to discuss alternatives.

mnajdova · 2022-03-04T11:52:54Z

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

+    <Popper {...popperProps} ref={forwardedRef}>
+      <Listbox {...listboxProps}>


Just to confirm, we talked about merging these one into one DOM element right?

Yes, if we had a usePopper hook, we could apply the popup behavior to the listbox itself and avoid creating a wrapper div.

mnajdova

The behavior looks good. Next steps would be:

create MenuButton component
merge the two dom elements we have in the MenuUnstyled - root and listbox into one.

michaldudak force-pushed the unstyled-menu branch from 6d5f800 to 4948d60 Compare February 10, 2022 09:34

michaldudak added 12 commits February 11, 2022 13:40

Create MenuUnstyled and MenuItemUnstyled

70bbeb9

Focus management

5355eed

Include disabled items in navigation

906c89e

Prevent stealing focus on page load

eebfe60

Use useButton in MenuItem

b0fd03d

Docs and demos

2c67501

Refactor demo to avoid proptypes generation

243b4d5

Move the MenuUnstyled docs to the Base subsite

29522aa

Lint

70bffdb

docs:api

53303c0

Style the demos

48f6c06

Merge branch 'master' into unstyled-menu

2426b43

michaldudak force-pushed the unstyled-menu branch from c6659e4 to 2426b43 Compare February 16, 2022 09:29

michaldudak added 2 commits February 16, 2022 10:31

Update demos

51b26d1

Correct types in demo

9461f49

michaldudak requested a review from a team February 16, 2022 12:04

michaldudak added component: menu This is the name of the generic UI component, not the React module! package: base-ui Specific to @mui/base labels Feb 16, 2022

michaldudak marked this pull request as ready for review February 16, 2022 12:06

michaldudak mentioned this pull request Feb 27, 2024

Unstyled components progress mui/base-ui#10

Open

35 tasks

small tweaks to the demos

c9cd01c

mnajdova reviewed Feb 21, 2022

View reviewed changes

eps1lon reviewed Feb 21, 2022

View reviewed changes

Merge remote-tracking branch 'upstream/master' into unstyled-menu

2c2e5d6

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 24, 2022

michaldudak added 4 commits February 24, 2022 15:24

proptypes

d784001

Restart CI

7c4dcf5

Merge remote-tracking branch 'upstream/master' into unstyled-menu

31c5c8c

Correct demos styling

d72c49b

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 25, 2022

Merge remote-tracking branch 'upstream/master' into unstyled-menu

d61b3f2

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 28, 2022

API docs

beb6315

michaldudak added 2 commits March 1, 2022 11:56

A11y improvements

3b950cd

Add slot props' types

2171704

mnajdova reviewed Mar 1, 2022

View reviewed changes

michaldudak added 4 commits March 3, 2022 11:03

Select last item when opening with up arrow

fb91225

Type imperative actions properly

06e1c9c

Proptypes

f0b6e00

Improve demos

0abace3

mnajdova reviewed Mar 4, 2022

View reviewed changes

mnajdova approved these changes Mar 4, 2022

View reviewed changes

Merge remote-tracking branch 'upstream/master' into unstyled-menu

ad71ebf

michaldudak merged commit 1aafc52 into mui:master Mar 7, 2022

michaldudak deleted the unstyled-menu branch March 7, 2022 10:44

michaldudak mentioned this pull request Mar 11, 2022

[docs] Move unstyled components' docs to the Base space #31414

Closed

17 tasks

This was referenced Apr 1, 2022

[MenuButton][base] Create the MenuButtonUnstyled component #32088

Closed

[Popper][base-ui] Extract a hook from PopperUnstyled #32089

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MenuUnstyled] Create MenuUnstyled and useMenu #30961

[MenuUnstyled] Create MenuUnstyled and useMenu #30961

michaldudak commented Feb 7, 2022 •

edited by mnajdova

mui-bot commented Feb 7, 2022 •

edited

mnajdova commented Feb 21, 2022

mnajdova Feb 21, 2022

mnajdova Feb 21, 2022

eps1lon Feb 21, 2022

michaldudak Feb 22, 2022

eps1lon Feb 21, 2022

michaldudak Feb 22, 2022

eps1lon Feb 21, 2022

michaldudak Feb 22, 2022

eps1lon commented Feb 21, 2022

michaldudak commented Feb 24, 2022 •

edited

mnajdova commented Mar 1, 2022 •

edited

mnajdova Mar 1, 2022

michaldudak commented Mar 1, 2022

michaldudak commented Mar 3, 2022

mnajdova Mar 4, 2022

mnajdova Mar 4, 2022

michaldudak Mar 4, 2022

mnajdova Mar 4, 2022

michaldudak Mar 4, 2022

mnajdova left a comment


		#### CSS classes

		The MenuUnstyled does not receive any state classes.

	The MenuUnstyled does not receive any state classes.
	The MenuUnstyled does not set any state classes.


		The MenuUnstyled does not receive any state classes.

		The MenuItemUnstyled can receive the following classes:

		<Popper {...popperProps} ref={forwardedRef}>
		<Listbox {...listboxProps}>

[MenuUnstyled] Create MenuUnstyled and useMenu #30961

[MenuUnstyled] Create MenuUnstyled and useMenu #30961

Conversation

michaldudak commented Feb 7, 2022 • edited by mnajdova

mui-bot commented Feb 7, 2022 • edited

mnajdova commented Feb 21, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eps1lon commented Feb 21, 2022

michaldudak commented Feb 24, 2022 • edited

mnajdova commented Mar 1, 2022 • edited

Choose a reason for hiding this comment

michaldudak commented Mar 1, 2022

michaldudak commented Mar 3, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mnajdova left a comment

Choose a reason for hiding this comment

michaldudak commented Feb 7, 2022 •

edited by mnajdova

mui-bot commented Feb 7, 2022 •

edited

michaldudak commented Feb 24, 2022 •

edited

mnajdova commented Mar 1, 2022 •

edited