Skip to content

Commit c27bf55

Browse files
committed
feat!(menu): Implemented new Menu API
This is a complete rehaul of the menu components to hopefully be a lot easier to use. Here's a quick diff representing the changes: ```diff import { render } from "react-dom"; -import { DropdownMenu } from "@react-md/menu"; +import { DropdownMenu, MenuItem } from "@react-md/menu"; const App = () => ( - <DropdownMenu - id="example-dropdown-menu" - items={[ - { onClick: () => console.log("Clicked Item 1"), children: "Item 1" }, - { onClick: () => console.log("Clicked Item 2"), children: "Item 2" }, - { onClick: () => console.log("Clicked Item 3"), children: "Item 3" }, - ]} - > - Dropdown + <DropdownMenu id="example-dropdown-menu" buttonChildren="Dropdown"> + <MenuItem onClick={() => console.log("Clicked Item 1")}>Item 1</MenuItem> + <MenuItem onClick={() => console.log("Clicked Item 2")}>Item 2</MenuItem> + <MenuItem onClick={() => console.log("Clicked Item 3")}>Item 3</MenuItem> </DropdownMenu> ); ``` New Functionality - App-wide `Menu` behavior can be configured using the `MenuConfigurationProvider` or `menuConfiguration` prop on the `Layout` component - The focus behavior in menus can be disabled with the new `disableFocusOnMount` and `disableFocusOnUnmount` props - Menus have built-in support for rendering as a `Sheet` on mobile devices by setting `renderAsSheet="mobile"` on the `DropdownMenu`, `Menu`, `MenuConfigurationProvider`, or `Layout.menuConfiguration.renderAsSheet` - `rendeAsSheet` can also be set to `true` if you want to render all menus as sheets for some reason. - the sheets can be configured to have an optional `header` and `footer` as well - `Menu` visibility can be controlled by child components of the `DropdownMenu` or `Menu` components using the new `useMenuVisibility` hook that provides the `visible` state and a `setVisible` function - Built-in support for hoverable menus using the new `MenuBar` component New Components - `MenuItemFileInput` - a wrapper for the `<input type="file">` that works within `Menu` components (`@react-md/form`) - `MenuItemTextField` - a wrapper for the `TextField` component that works within `Menu` components (`@react-md/form`) - `MenuItemGroup` - a small wrapper for the `List` component that requires an `aria-label` and sets its `role` to `"group"`. This is just a convenience component for rendering `MenuItemRadio` components with other `MenuItem`s while maintaining accessibility (`@react-md/menu`) - `MenuConfigurationProvider` - a new context provider to override menu behavior like rendering sheets. - `MenuBar` - a new component that allows the child `DropdownMenu` components to gain visibility on hover after clicking one of the menus once. The menus can gain visibility on hover immediately if you provide a `hoverTimeout={0}` to the `MenuBar`. - The `MenuBar` also integrates some keyboard movement behavior following the [menubar spec](https://www.w3.org/TR/wai-aria-practices/#menu) BREAKING CHANGE: The `DropdownMenu` component no longer accepts a list of `items` and instead the `children` should be the `MenuItem` components. BREAKING CHANGE: The `useContextMenu` now returns an object instead of an ordered list. BREAKING CHANGE: The `DropdownMenuItem` component is no longer required for nested dropdown menus and is an "internal" component instead that shouldn't really be used. BREAKING CHANGE: The `DropdownMenu` component no longer supports the `menuRenderer` and `itemRenderer` props. Instead, there is built-in support for conditionally rendering as a `Sheet` component using the `renderAsSheet` prop. BREAKING CHANGE: The `MenuItemSeparator` now renders as an `<li>` instead of an `<hr>` or `<div>`. BREAKING CHANGE: The `DropdownMenu` component now requires a parent `AppSizeListener` because of the conditional `Sheet` rendering functionality. This might require updating your tests to either use the `Configuration` component from `@react-md/layout` (recommended) or adding the `AppSizeListener` to tests that include `DropdownMenu`s. BREAKING CHANGE: Menu buttons will no longer open by pressing the `ArrowUp` or `ArrowDown` keys. BREAKING CHANGE: Using any of the `MenuItem` components requires the `<MenuKeyboardFocusProvider>` to be mounted as a parent component which might affect tests. This will not break anything if you are using the `DropdownMenu` or `Menu` components.
1 parent 77f0d01 commit c27bf55

File tree

138 files changed

+4390
-4511
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

138 files changed

+4390
-4511
lines changed

packages/documentation/src/components/Demos/Form/SelectionControls/MenusWithFormControls.md

Lines changed: 0 additions & 7 deletions
This file was deleted.

packages/documentation/src/components/Demos/Form/SelectionControls/MenusWithFormControls.tsx

Lines changed: 0 additions & 96 deletions
This file was deleted.

packages/documentation/src/components/Demos/Form/SelectionControls/SelectionControls.tsx

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,6 @@ import switchExamples from "./SwitchExamples.md";
1919
import AsyncSwitchExample from "./AsyncSwitchExample";
2020
import asyncSwitchExample from "./AsyncSwitchExample.md";
2121

22-
import MenusWithFormControls from "./MenusWithFormControls";
23-
import menusWithFormControls from "./MenusWithFormControls.md";
24-
2522
const demos: DemoConfig[] = [
2623
{
2724
name: "Checkbox and Radio Examples",
@@ -48,11 +45,6 @@ const demos: DemoConfig[] = [
4845
description: asyncSwitchExample,
4946
children: <AsyncSwitchExample />,
5047
},
51-
{
52-
name: "Menus with Form Controls",
53-
description: menusWithFormControls,
54-
children: <MenusWithFormControls />,
55-
},
5648
];
5749

5850
export default function SelectionControls(): ReactElement | null {

packages/documentation/src/components/Demos/Menu/AccessibilityExample.md

Lines changed: 0 additions & 22 deletions
This file was deleted.

packages/documentation/src/components/Demos/Menu/AccessibilityExample.tsx

Lines changed: 0 additions & 53 deletions
This file was deleted.

packages/documentation/src/components/Demos/Menu/AddingEventHandlers.md

Lines changed: 0 additions & 39 deletions
This file was deleted.

packages/documentation/src/components/Demos/Menu/AddingEventHandlers/AddingEventHandlers.tsx

Lines changed: 0 additions & 15 deletions
This file was deleted.

packages/documentation/src/components/Demos/Menu/AddingEventHandlers/AddingOnClick.tsx

Lines changed: 0 additions & 46 deletions
This file was deleted.

packages/documentation/src/components/Demos/Menu/AddingEventHandlers/CustomMenuItems.tsx

Lines changed: 0 additions & 47 deletions
This file was deleted.

packages/documentation/src/components/Demos/Menu/AddingEventHandlers/index.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)