All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
Note: Version bump only for package @react-md/menu
List
(2b5fb23)MenuBar visibility for touch devices
(1288be7)ArrowUp or ArrowDown
keys.DropdownMenu component no longer accepts a list of items and instead
the children should be the MenuItem components.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.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.DropdownMenuItem component is no longer required for nested dropdown
menus and is an "internal" component instead that shouldn't really be used.MenuItemSeparator now renders as an <li> instead of an <hr> or
<div>.useContextMenu now returns an object instead of an ordered list.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.import type when possible
(ba96bb6)DropdownMenu and Menu portal by default
(98a6a9f),
closes #1264eslint
(8111cd3)DropdownMenu and Menu components portal by
default. This should really only affect snapshot testsprop-types package.yarn format to include new files
(48d3d7f)Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
prettier after upgrading to v2.3.0
(3ce236a)typedoc
(cf54c35)Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
LabelRequiredForA11y type definition
(b7aa4fa)Note: Version bump only for package @react-md/menu
LabelRequiredForA11y type definition
(b7aa4fa)Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
Note: Version bump only for package @react-md/menu
sideEffects field to package.json
(31820b9)sideEffects formatting
(78a7b6b)No changes.
The menu package was completely re-written to fix all the accessibility issues and keyboard focus behavior.
The main exports starting in v2:
DropdownMenuMenuItemMenuItemLinkMenuItemSeparatorDropdownMenuItemdefaultMenuRendererdefaultMenuItemRendereruseContextMenuuseContextMenu hookmenuItem props and instead render the MenuItem component
instead within the DropdownMenuLayover componentMenuButton is no longer a combination of a Button and a Menu and
instead is an accessibility helper component$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$md-menu-z-index to $rmd-menu-z-index and changed the default
value from null (100 from Layover) to 11$md-menu-min-width to $rmd-menu-min-width and changed the default
value from 112px to 7rem$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
stylesThe 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").