[base] Refactor the compound components building blocks #36400

michaldudak · 2023-03-02T13:23:06Z

Breaking changes

Select

SelectUnstyledContext is replaced by SelectProvider. The value to pass to the provider is returned by the useSelect hook.
SelectUnstyled's popup is permanently mounted.
The defaultOpen prop was added to the SelectUnstyled. The open/close state can now be controlled or uncontrolled, as a value.

Tabs

TabsContext is replaced by TabsProvider. The value to pass to the provider is returned by the useTabs hook.
To deselect all tabs, pass in null to Tabs' value prop, instead of false. This is consistent with how Select works.
The value prop is still technically not mandatory on TabUnstyled and TabPanel, but when omitted, the contents of the selected tab panel will not be rendered during SSR.

This started as a rewrite of Unstyled Tabs and related components to use context instead of cloneElement but turned into a significant refactoring of all the compound components: tabs, select, and menu.

I've identified two cross-cutting concerns that I extracted to their own hooks: navigation within the list (useListbox, likely needing a rename to useList or useListNavigation, and useListItem) and determining the children of a compound component (useCompoundParent and useCompoundItem).

Notable improvements

The tab can now access information about its order amongst other tabs.
It's possible to wrap tabs in custom components or fragments (tabs don't have to be direct children of a TabPanel)
Focus management and keyboard navigation logic are centralized and common to all list-like components.

Demos

https://deploy-preview-36400--material-ui.netlify.app/experiments/base/tabs
https://deploy-preview-36400--material-ui.netlify.app/experiments/base/listbox (not directly related to tabs; I made it to verify the behavior of the listbox with different settings)

To do

setting aria-controls on tabs
setting aria-labelledby on tab panels
renaming useListbox
changing the code of useSelect, useOption, use Menu, and useMenuItem to use the new hooks
general cleanup of code

Closes #35084
Closes #34393
Closes #33663
Closes #36799
Closes #35795

mui-bot · 2023-03-02T13:25:51Z

Netlify deploy preview

https://deploy-preview-36400--material-ui.netlify.app/

@material-ui/unstyled: parsed: +1.45% , gzip: +0.39%
@mui/material-next: parsed: +8.27% , gzip: +8.31%
@mui/joy: parsed: +0.84% , gzip: +0.99%

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 6070647

michaldudak · 2023-03-02T13:29:53Z

packages/mui-base/src/useButton/useButton.ts

@@ -235,5 +235,6 @@ export default function useButton(parameters: UseButtonParameters): UseButtonRet
    setFocusVisible,
    disabled,
    active,
+    ref: handleRef,


I realized that it was impossible to use two hooks (useListItem and useButton) on the same element, as the refs returned by the hooks' getRootProps would overwrite one another. Having a ref returned separately allows us to combine them.

michaldudak · 2023-03-02T13:30:15Z

packages/mui-base/src/useListbox/defaultListboxReducer.ts

@@ -244,19 +245,51 @@ function handleKeyDown<TOption>(
      };

    case 'ArrowUp':
-      // TODO: extend current selection with Shift modifier
+      if (orientation !== 'vertical') {


I may also add vertical-reverse

I would to see a use-case for it :)

mnajdova

Thanks for the examples, they are very useful to reviewing the functionality. The new hooks make sense. I am not sure about the focusManagement being in the useListBox, I feel like it should be part of the hook/component using the useListBox but I understand there will be lots of repetitions this way, so let's go with it :)

packages/mui-base/src/TabUnstyled/TabUnstyled.types.ts

mnajdova · 2023-03-16T12:56:24Z

packages/mui-base/src/TabsUnstyled/TabsUnstyled.types.ts

@@ -17,11 +17,11 @@ export interface TabsUnstyledOwnProps {
   * The value of the currently selected `Tab`.
   * If you don't want any selected `Tab`, you can set this prop to `false`.


Suggested change

* If you don't want any selected `Tab`, you can set this prop to `false`.

* If you don't want any selected `Tab`, you can set this prop to `null`.

Is this correct with the current changes?

mnajdova · 2023-03-16T14:25:00Z

packages/mui-base/src/useListbox/defaultListboxReducer.ts

@@ -244,19 +245,51 @@ function handleKeyDown<TOption>(
      };

    case 'ArrowUp':
-      // TODO: extend current selection with Shift modifier
+      if (orientation !== 'vertical') {


I would to see a use-case for it :)

mnajdova · 2023-03-16T15:24:34Z

packages/mui-base/src/useTabs/useTabs.types.ts

   */
-  tabsContextValue: TabsContextValue;
+  contextValue: TabsProviderValue;


packages/mui-base/src/utils/useCompound.ts

mnajdova

Not related to this changes issues:

Joy UI: https://deploy-preview-36400--material-ui.netlify.app/joy-ui/react-menu/ the menus in should focus the trigger button when escape is pressed
Joy UI, we should improve the focus indicators on the following tabs demos:
Base UI: https://deploy-preview-36400--material-ui.netlify.app/base/react-menu/ when choosing menu item by clicking, we should not be seeing the focusable indicator on the trigger element

docs/pages/base/api/menu-unstyled.json

mnajdova · 2023-04-11T11:49:20Z

docs/pages/base/api/use-select.json

@@ -1,6 +1,61 @@
 {
  "parameters": {},
-  "returnValue": {},
+  "returnValue": {


Finally, the return value is here :)

I'm curious why parameters aren't picked up, though. Let's investigate in another PR.

I'm curious why parameters aren't picked up, though. Let's investigate in another PR.

Addressed in #37034

mnajdova · 2023-04-11T11:50:43Z

docs/pages/joy-ui/api/tabs.json

-        "description": "false<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
-      }
-    },
+    "defaultValue": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },


Replacing false with null makes sense 👍

packages/mui-base/src/MenuUnstyled/MenuUnstyled.types.ts

packages/mui-base/src/SelectUnstyled/SelectUnstyled.test.tsx

mnajdova · 2023-04-11T12:03:37Z

packages/mui-base/src/useList/listReducer.ts

+    return [...selectedValues, item];
+  }
+
+  // Truncate the selection to the limit (discard items with lower indexes).


I see, but selectionMode: 'none' | 'one' | 'multiple' makes much more sense when reading the code, instead of figuring out that infinite is a valid number option for the multiple use-case. We can also name the options: selectionMode: 'none' | 'single' | 'multiple'

mnajdova

🚢 it

michaldudak · 2023-04-11T15:43:31Z

Base UI: https://deploy-preview-36400--material-ui.netlify.app/base/react-menu/ when choosing menu item by clicking, we should not be seeing the focusable indicator on the trigger element

I've created a PR to address this: #36847

michaldudak added component: tabs This is the name of the generic UI component, not the React module! package: base-ui Specific to @mui/base enhancement This is not a bug, nor a new feature labels Mar 2, 2023

michaldudak commented Mar 2, 2023

View reviewed changes

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

michaldudak mentioned this pull request Mar 11, 2023

[Tabs][base] TabList should only process children with role tab #33663

Closed

2 tasks

michaldudak force-pushed the tabs-with-context branch from 8cb3eab to f75b78e Compare March 15, 2023 11:29

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

mnajdova reviewed Mar 16, 2023

View reviewed changes

michaldudak force-pushed the tabs-with-context branch 3 times, most recently from 3467ae8 to f4df169 Compare March 30, 2023 11:54

michaldudak and others added 15 commits April 3, 2023 18:21

Few fixes and additions to useListbox

5a5c21a

Redesign unstyled Tabs to work with context

fac8a2b

Extract useListItem to a separate file

4cf59ea

Clean up useListbox

ce1aeac

Rename useListbox to useList

ec17fdd

Use the new building blocks in MenuUnstyled

56c6416

Use the new building blocks in SelectUnstyled

db53bd0

Decouple the controllableReducer from the List

319985b

Docs and cleanup of useList

5db7fae

Rename defaultListboxReducer to listReducer

776be3e

API docs

2da76ad

Do not require compound subcomponents to have a defined value

34fa5ac

Sync ids between tabs and tab panels

8967e16

Fix errors in Joy

f266cd6

joy-ui: add GroupListContext

b30051a

michaldudak force-pushed the tabs-with-context branch from f3b0d21 to b30051a Compare April 3, 2023 17:04

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

michaldudak added 6 commits April 7, 2023 11:07

Docs and tests

8e14f71

Simplify action addon (do not require a ref)

d18aee7

Remove the unnecessary setState action (and simplify many generics)

f8da22a

Simplify, rename and explain the action addon concept

1a05c79

Remove redundant return values from useList

f7448ad

Add comments in useList

b9e76dd

siriwatknp mentioned this pull request Apr 10, 2023

[Joy][MenuList] Fix constantly steals focus issue #36822

Closed

1 task

michaldudak added 2 commits April 11, 2023 11:07

Fix unnecessary rerendering of options

a4227d4

Merge branch 'master' into tabs-with-context

3af4d0c

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

michaldudak added 3 commits April 11, 2023 11:44

Finx linter violation

b074464

Change MD3 tabs to use null instead of false

430ccad

Docs

bba8c16

mnajdova reviewed Apr 11, 2023

View reviewed changes

Change selectionLimit to selectionMode

6070647

mnajdova added the breaking change label Apr 11, 2023

mnajdova reviewed Apr 11, 2023

View reviewed changes

mnajdova approved these changes Apr 11, 2023

View reviewed changes

michaldudak mentioned this pull request Apr 11, 2023

[useMenu] Fix registering of options order #36807

Closed

1 task

michaldudak merged commit 44748d4 into mui:master Apr 11, 2023

michaldudak deleted the tabs-with-context branch April 11, 2023 14:53

yushanwebdev mentioned this pull request Apr 11, 2023

[Joy][MenuList] Menu list constantly steals focus #36799

Closed

2 tasks

michaldudak mentioned this pull request Apr 11, 2023

[docs] Use focus-visible instead of focus for Menu demos #36847

Merged

This was referenced Apr 14, 2023

[base] Add explicit interfaces for the return values of the public hooks #35933

Closed

[Select][base] Display options in the order of selection in multi-select mode #36497

Closed

ZeeshanTamboli mentioned this pull request Apr 26, 2023

[core] Allow type alias as well in hooks API docs generation #37034

Merged

1 task

michaldudak mentioned this pull request May 2, 2023

[Select][base] Select's popup doesn't use portals #35795

Closed

dhenneke mentioned this pull request May 11, 2023

[joy][base][Menu] MenuItem tabindex isn't logical in a changing list #36800

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[base] Refactor the compound components building blocks #36400

[base] Refactor the compound components building blocks #36400

michaldudak commented Mar 2, 2023 •

edited

Loading

mui-bot commented Mar 2, 2023 •

edited

Loading

michaldudak Mar 2, 2023

michaldudak Mar 2, 2023

mnajdova Mar 16, 2023

mnajdova left a comment

mnajdova Mar 16, 2023

mnajdova Mar 16, 2023

mnajdova Mar 16, 2023

mnajdova left a comment

mnajdova Apr 11, 2023

michaldudak Apr 11, 2023

ZeeshanTamboli Apr 26, 2023

mnajdova Apr 11, 2023

mnajdova Apr 11, 2023

mnajdova left a comment

michaldudak commented Apr 11, 2023

		@@ -17,11 +17,11 @@ export interface TabsUnstyledOwnProps {
		* The value of the currently selected `Tab`.
		* If you don't want any selected `Tab`, you can set this prop to `false`.

[base] Refactor the compound components building blocks #36400

[base] Refactor the compound components building blocks #36400

Conversation

michaldudak commented Mar 2, 2023 • edited Loading

Breaking changes

Menu

Select

Tabs

Notable improvements

Demos

To do

mui-bot commented Mar 2, 2023 • edited Loading

Netlify deploy preview

Bundle size report

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

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

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 Apr 11, 2023

michaldudak commented Mar 2, 2023 •

edited

Loading

mui-bot commented Mar 2, 2023 •

edited

Loading