@react-md/menu

@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 React from "react";
import { render } from "react-dom";
import { DropdownMenu } 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>
);

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

Changelog

3.0.0 (2021-08-13)

This release should be relatively simple for most consumers of this library since the main breaking change is dropping support for node-sass and requiring sass since node sass has been deprecated as well as removing deprecated variables, hooks, and components. Most users should be able to run the following commands to upgrade to v3.0.0:

npm update react-md
npm uninstall node-sass
npm install sass

Or with yarn

yarn add react-md
yarn remove node-sass
yarn add sass

In addition, there is now partial support for the new Sass module system with the react-md package which also simplifies the import usage and has a slight build performance improvement for large projects. To start using the new module system, update all the @import statements as shown below:

-@import '~@react-md/theme/dist/mixins';
-@import '~@react-md/utils/dist/mixins';
-// other react-md imports
+@use 'react-md' as *;

 // No other changes required!

If you override variables within react-md:

-@import '~@react-md/theme/dist/color-palette';
-$rmd-theme-light: false;
-$rmd-theme-primary: $rmd-purple-500;
-$rmd-theme-secondary: $rmd-pink-a-200;
-
-@import '~react-md/dist/styles';
+@use '@react-md/theme/dist/color-palette' as color;
+@use 'react-md' as * with (
+  $rmd-theme-light: false,
+  $rmd-theme-primary: color.$rmd-theme-purple-500,
+  $rmd-theme-secondary: color.$rmd-theme-pink-a-200,
+);
+
+@include react-md-utils;

Check out the updated customizing your theme documentation, #1214, or 958f34f for more in-depth examples.

BREAKING CHANGES

• @react-md/theme: $rmd-theme-dark-elevation now defaults to true instead of false
• sass: node-sass is no longer supported and users must switch to sass
• @react-md/utils: Removed InteractionModeListener since it was an alias for UserInteractionModeListener
• @react-md/utils: Removed ResizeObserver component and useResizeObserverV1 implementation
• @react-md/tooltip: Removed TooltipHoverModeConfig component
• @react-md/card: Removed deprecated $rmd-card-dark-elevation-bordered-background-color variable
• @react-md/tooltip: Removed deprecated props from Tooltipped component
• @react-md/form: The second argument for useIndeterminateChecked is now an object of options

Bug Fixes

• sass: drop node-sass in favor of sass since it's deprecated (126fb5a)
• sass: use math.div instead of division since it's deprecated (d8c3f12)

Features

• @react-md/theme: $rmd-theme-dark-elevation defaults to true (b371337)
• react-md: Simplify sass usage with: @use 'react-md'; (787bfb5)

Documentation

• react-md.dev: removed documentation around pre-compiling styles (29b5d74)
• react-md.dev: Update Sass Documentation for @use (68e8c6b)
• react-md.dev: Updated sandboxes for new Sass module system (095ae97)

Other Internal Changes

• Added additional tests to bump test coverage (4d0371c)
• @react-md/card: removed deprecated $rmd-card-dark-elevation-bordered-background-color variable (01c9350)
• @react-md/dev-utils: Added simple sass-migrator command (a8e8df3)
• @react-md/dev-utils: autoConfirm flag passed to initBlog (dec09b8)
• @react-md/dev-utils: Combine all scss files into react-md/dist/_everything.scss (c7177e6)
• @react-md/dev-utils: Update release script to hopefully work with prereleases (e0ef881)
• @react-md/dev-utils: updated sassdoc and variables to use everything.scss (a0f0699)
• @react-md/dev-utils: updated variables command to work with sass (5376be1)
• @react-md/form: removed deprecated implementation in useIndeterminateChecked (6b7871f)
• @react-md/tooltip: removed deprecated props from Tooltipped component (6dca9b1)
• @react-md/tooltip: removed TooltipHoverModeConfig component (664ec30)
• @react-md/utils: remove ResizeObserver component and useResizeObserverV1 implementation (6a6b109)
• @react-md/utils: removed InteractionModeListener alias (216c8ef)
• examples: updated examples to latest dependencies (f2eb07a)
• react-md.dev: Each package includes a link to typedoc API in navigation tree (c388ba6)
• react-md.dev: ran migrator for deprecated division (98d2c58)
• react-md.dev: removed tilde from imports (6081e14)
• react-md.dev: update all scss files for @use imports (958f34f)
• react-md.dev: update all styles to use react-md/dist/everything (2da5033)
• react-md.dev: Update links for previous versions (2d0a0e6)
• react-md.dev: updated docs for new rmd-theme-dark-elevation defaults (b2269ff)
• react-md.dev: updated examples to work with sass instead of node-sass (d8ddf51)
• react-md.dev: updated sandboxes to use root react-md (c0f25f7)