[menu] Remove `disabled` prop from Root

[michaldudak]

Removed the disabled prop from Menu.Root and moved it to Menu.Trigger and Menu.SubmenuTrigger.

Closes https://github.com/mui/base-ui/issues/1976.

[pkg-pr-new[bot]]

Open in StackBlitz

npm i https://pkg.pr.new/@base-ui-components/react@2044

commit: b93c5b7

[mui-bot]

Bundle size report

Total Size Change: 🔺+298B^(+0.02%) - Total Gzip Change: 🔺+60B^(+0.01%) Files: 41 total (0 added, 0 removed, 3 changed)

Show details for 41 more bundles

@base-ui-components/react parsed: 🔺+111B^(+0.04%) gzip: 🔺+20B^(+0.02%) @base-ui-components/react/menu parsed: 🔺+111B^(+0.10%) gzip: 🔺+17B^(+0.05%) @base-ui-components/react/context-menu parsed: 🔺+76B^(+0.07%) gzip: 🔺+23B^(+0.06%) @base-ui-components/react/accordion parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/alert-dialog parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/avatar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/checkbox parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/checkbox-group parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/collapsible parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/dialog parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/direction-provider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/field parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/fieldset parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/form parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/input parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/menubar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/merge-props parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/meter parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/navigation-menu parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/number-field parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/popover parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/preview-card parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/progress parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/radio parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/radio-group parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/scroll-area parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/select parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/separator parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/slider parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/switch parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/tabs parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/toast parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/toggle parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/toggle-group parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/toolbar parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/tooltip parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/unstable-no-ssr parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/unstable-use-media-query parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/use-render parsed: 0B^(0.00%) gzip: 0B^(0.00%) @base-ui-components/react/utils parsed: 0B^(0.00%) gzip: 0B^(0.00%) Base UI checkbox parsed: 0B^(0.00%) gzip: 0B^(0.00%)

Details of bundle changes

Generated by :no_entry_sign: dangerJS against b93c5b7313628c3d2ba8b9e18de43812ef5ed65e

[netlify[bot]]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	b93c5b7313628c3d2ba8b9e18de43812ef5ed65e
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/685129e1a9c5d30008eb0617
😎 Deploy Preview	https://deploy-preview-2044--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[atomiks]

Other components also have a similar issue, so it seems we'd need to change them all together.

But I'm also not convinced yet that it's not worthwhile to still have a disabled prop on the root to allow granular disabled states without wholesale disabling the entire trigger.

It also seems that just because the trigger is disabled, doesn't mean the the root should also be disabled. Tooltips on disabled triggers can be an acceptable use case: https://www.reddit.com/r/UXDesign/comments/1cifb9k/using_tooltips_on_disabled_surfaces_what_is_the/

Though, Tooltip for instance handles the linked issue like this: https://github.com/mui/base-ui/blob/c54a7829999a175ff4c6b6bb9273c648686f6209/packages/react/src/tooltip/root/useTooltipRoot.ts#L87-L89

I think this needs a bit more thought

[michaldudak]

All right, I'm putting this on hold for now. With https://github.com/mui/base-ui/pull/2336 adapted to Menu, we might need disabled on both triggers and root parts.

[michaldudak]

I'm going to continue supporting the prop on both the Trigger and the Root, as it makes more sense when there are multiple triggers present (#3031). Setting disabled on a trigger will disable just this particular trigger, while setting it on the root disables all the triggers.