パッケージの詳細

@react-md/menu

mlaursen5.7kMIT5.1.6

Create menus that auto-position themselves within the viewport and adhere to the accessibility guidelines

accessibility, a11y, react-md, material design

readme

@react-md/menu

Create accessible dropdown menus that auto-position themselves to stay within the viewport. The menus are entirely navigable with a keyboard along with some additional behavior:

  • ArrowUp and ArrowDown to focus the previous/next MenuItem that also allows wrapping
  • Home and End to focus the first/last Menuitem in the menu
  • type the starting letters of a MenuItem to focus it

More information on the built-in accessibility can be found in the accessibility example on the documentation site.

Installation

npm install --save @react-md/menu

You will also need to install the following packages for their styles:

npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/icon \
  @react-md/list \
  @react-md/button \
  @react-md/states \
  @react-md/utils

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

import { render } from "react-dom";
import { DropdownMenu, MenuItem } from "@react-md/menu";

const App = () => (
  <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>
);

render(<App />, document.getElementById("root"));

更新履歴

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

5.1.6 (2023-12-11)

Bug Fixes

  • select: port fixed positioning fixes back from v6.0.0 (feb9ec6), closes #1461

5.1.4 (2022-06-16)

Bug Fixes

  • add missing dependencies (5329812)

5.1.3 (2022-05-07)

Documentation

  • fix typos throughout codebase (725d1a2)

Other Internal Changes

  • typos: fix additional typos throughout repo (ef20132)

5.1.2 (2022-04-02)

Note: Version bump only for package @react-md/menu

5.1.1 (2022-04-01)

Note: Version bump only for package @react-md/menu

5.1.0 (2022-03-18)

Features

  • @react-md/menu: Provide props for Menu's List (2b5fb23)

Other Internal Changes

  • run lint-scripts --fix for consistent-type-imports (42d839d)

5.0.0 (2022-01-31)

Features

  • @react-md/menu: Better floating action button default behavior (0cdeff7)

Other Internal Changes

  • feat!(menu): Implemented new Menu API (c27bf55)
  • @react-md/menu: Added tests for the new menu API and fixed a few issues (7202dd0)
  • @react-md/menu: Fixed MenuBar visibility for touch devices (1288be7)
  • @react-md/menu: Fixed keyboard movement in MenuBars with visible menus (5b2494a)

Breaking Changes

  • Menu buttons will no longer open by pressing the ArrowUp or ArrowDown keys.
  • The DropdownMenu component no longer accepts a list of items and instead the children should be the MenuItem components.
  • 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.
  • 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 DropdownMenus.
  • The DropdownMenuItem component is no longer required for nested dropdown menus and is an "internal" component instead that shouldn't really be used.
  • The MenuItemSeparator now renders as an <li> instead of an <hr> or <div>.
  • The useContextMenu now returns an object instead of an ordered list.
  • 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.

4.0.3 (2021-12-31)

Other Internal Changes

  • Updated all packages' peerDependenciesMeta (60fcd71), closes #1319

4.0.1 (2021-11-27)

Bug Fixes

  • @react-md/menu: Added fixes required for Concurrent Rendering (05ec620)

Other Internal Changes

  • Updated imports to use import type when possible (ba96bb6)

4.0.0 (2021-11-24)

Bug Fixes

  • @react-md/menu: DropdownMenu and Menu portal by default (98a6a9f), closes #1264
  • sass: Do not use legacy global functions (6159e16)

Features

  • Update to use new JSX Transform and latest eslint (8111cd3)
  • @react-md/transition: No longer use findDOMNode for transitions (cb952da)

Other Internal Changes

  • always skip lib check (229cef1)
  • react-md: Remove prop-types package and usage (2637a6f)

Breaking Changes

  • Minimum React version is now 16.14 instead of 16.8
  • @react-md/menu: The DropdownMenu and Menu components portal by default. This should really only affect snapshot tests
  • react-md: There will no longer be run-time prop validation with the prop-types package.

3.1.0 (2021-09-10)

Bug Fixes

  • typescript: updated all array types to be readonly (8f71bcb)

Other Internal Changes

  • ran yarn format to include new files (48d3d7f)

3.0.1 (2021-08-15)

Bug Fixes

  • Updated peerDependencies to fix yarn berry peer requirements (250efcd), closes #1224

3.0.0 (2021-08-13)

Note: Version bump only for package @react-md/menu

2.9.1 (2021-07-27)

Other Internal Changes

  • install: slighly reduce install size by excluding tests in publish (9d01a44)

2.9.0 (2021-07-18)

Note: Version bump only for package @react-md/menu

2.8.5 (2021-07-03)

Note: Version bump only for package @react-md/menu

2.8.4 (2021-06-10)

Other Internal Changes

  • ran prettier after upgrading to v2.3.0 (3ce236a)

2.8.3 (2021-05-18)

Documentation

  • react-md.dev: updated tsdoc to work with typedoc (cf54c35)

2.8.2 (2021-04-23)

Note: Version bump only for package @react-md/menu

2.8.0 (2021-04-22)

Other Internal Changes

  • tsconfig: separate tsconfig by package instead of a single root (b278230)

2.7.1 (2021-03-23)

Other Internal Changes

  • ts: stopped using FC type (c5daa47)

2.7.0 (2021-02-28)

Bug Fixes

  • @react-md/menu: fixed menu color when dark theme elevation is enabled (52c752d), closes #1075

Documentation

  • tsdoc: fixed remaining tsdoc syntax warnings (946f4dd)
  • tsdoc: fixed some tsdoc annotations and styling (0449b86)

Other Internal Changes

  • updated test coverage to not include conditional component PropTypes (24e5df1)

2.6.0 (2021-02-13)

Note: Version bump only for package @react-md/menu

2.5.5 (2021-01-30)

Note: Version bump only for package @react-md/menu

2.5.4 (2021-01-27)

Note: Version bump only for package @react-md/menu

2.5.1 (2020-12-16)

Note: Version bump only for package @react-md/menu

2.5.0 (2020-12-15)

Note: Version bump only for package @react-md/menu

2.4.3 (2020-11-14)

Note: Version bump only for package @react-md/menu

2.4.2 (2020-10-23)

Bug Fixes

2.4.1 (2020-10-17)

Note: Version bump only for package @react-md/menu

2.4.0 (2020-10-17)

Features

2.3.1 (2020-09-15)

Note: Version bump only for package @react-md/menu

2.3.0 (2020-09-10)

Features

  • a11y: improved LabelRequiredForA11y type definition (b7aa4fa)

2.2.2 (2020-09-02)

Note: Version bump only for package @react-md/menu

2.2.1 (2020-09-02)

Note: Version bump only for package @react-md/menu

2.2.0 (2020-08-11)

Note: Version bump only for package @react-md/menu

2.1.2 (2020-08-01)

Note: Version bump only for package @react-md/menu

2.1.1 (2020-07-21)

Note: Version bump only for package @react-md/menu

2.1.0 (2020-07-12)

Features

  • Improved Dark Mode using Raising Elevation (547877c), closes #860

2.0.2 (2020-06-30)

Bug Fixes

  • LICENSE: Removed the time range from license since it was incorrect (50c9021)
  • Added sideEffects field to package.json (31820b9)
  • sideEffects formatting (78a7b6b)

v2.0.1

No changes.

v2.0.0

The menu package was completely re-written to fix all the accessibility issues and keyboard focus behavior.

The main exports starting in v2:

  • DropdownMenu
  • MenuItem
  • MenuItemLink
  • MenuItemSeparator
  • DropdownMenuItem
  • defaultMenuRenderer
  • defaultMenuItemRenderer
  • useContextMenu

New Features / Behavior

  • the menu will now automatically position itself within the viewport with fixed positioning
  • implemented custom context menus with a new useContextMenu hook
  • nested dropdown menus are fully supported along with keyboard movement and open/close behavior
  • no longer use the menuItem props and instead render the MenuItem component instead within the DropdownMenu
  • no longer uses the weird Layover component

Breaking Changes

  • the visibility for the menus can no longer be controlled externally. this functionality will come back in a later release
  • the menu no longer supports relative positioning
  • the MenuButton is no longer a combination of a Button and a Menu and instead is an accessibility helper component

New SCSS Variables, Functions, and Mixins

  • $rmd-menu-background-color: rmd-theme-var(surface) !default - The background color to use in menus
  • $rmd-menu-color: rmd-theme-var(on-surface) !default - The text color to use in menus
  • $rmd-menu-elevation: 8 !default - The elevation/box shadow to use for the menu
  • @function rmd-menu-theme - gets one of the theme values and validates that the theme name is valid
  • @function rmd-menu-theme-var - gets one of the theme values as a css variable with a fallback value and validates that the theme name is valid
  • @mixin rmd-menu-theme - applies one of the theme values to a css property as a css variable
  • @mixin rmd-menu-theme-update-var - updates one of the theme values as a css variable

Renamed SCSS Variables, Functions, and Mixins

  • renamed $md-menu-z-index to $rmd-menu-z-index and changed the default value from null (100 from Layover) to 11
  • renamed $md-menu-min-width to $rmd-menu-min-width and changed the default value from 112px to 7rem

Removed SCSS Variables and Mixins

  • removed $md-menu-include-cascading, $md-menu-include-cascading-styles, $md-menu-cascading-font-size, $md-menu-cascading-padding, $md-cascading-height and $md-menu-cascading-list-padding since the cascading/nested menus was completely reworked and no longer needs additional styles
  • removed all other SCSS variables relating to height and width

Accessibility Fixes

The accessibility props were moved from the surrounding <div> and instead applied correctly to the MenuButton instead. This also changed the aria-haspopup attribute to be "menu" instead of "true" and removed the aria-controls since it doesn't really work as expected.

Additional keyboard behavior was also added to both the MenuButton and Menu components. When the MenuButton is focused, the ArrowUp key will open the menu and focus the last MenuItem while the ArrowDown key will open the menu and focus the first MenuItem. The user can now also type while the menu is open to focus specific items that start with the same letters.

The Menu now also requires the aria-label or aria-labelledby props to help screen readers out as well as applying role="menu" and aria-orentation="vertical" (or "horizontal").