@react-md/menu - npm Package Compare versions

Comparing version 2.0.0-alpha.9 to 2.0.0-alpha.10

dist/scssVariables.d.ts

@@ -8,4 +8,2 @@ declare const _default: {
     "rmd-menu-horizontal-item-min-width": string;
-    "rmd-menu-enter-duration": string;
-    "rmd-menu-leave-duration": string;
     "rmd-menu-icon-spacing": string;
@@ -12,0 +10,0 @@ "rmd-menu-theme-values": {

dist/scssVariables.js

@@ -11,4 +11,2 @@ "use strict";
     "rmd-menu-horizontal-item-min-width": "5rem",
-    "rmd-menu-enter-duration": "0.2s",
-    "rmd-menu-leave-duration": "0.15s",
     "rmd-menu-icon-spacing": "1rem",
@@ -15,0 +13,0 @@ "rmd-menu-theme-values": {

es/DropdownMenu.js

@@ -25,3 +25,3 @@ var __assign = (this && this.__assign) || function () {
 import { FontIcon } from "@react-md/icon";
-import defaultItemRenderer from "./defaultItemRenderer";
+import defaultMenuItemRenderer from "./defaultMenuItemRenderer";
 import defaultMenuRenderer from "./defaultMenuRenderer";
@@ -67,3 +67,3 @@ import MenuButton from "./MenuButton";
     menuRenderer: defaultMenuRenderer,
-    itemRenderer: defaultItemRenderer,
+    itemRenderer: defaultMenuItemRenderer,
     dropdownIcon: React.createElement(FontIcon, null, "arrow_drop_down"),
@@ -70,0 +70,0 @@ disableDropdownIcon: false,

es/DropdownMenuItem.js

@@ -25,3 +25,3 @@ var __assign = (this && this.__assign) || function () {
 import { FontIcon, IconRotator } from "@react-md/icon";
-import defaultItemRenderer from "./defaultItemRenderer";
+import defaultMenuItemRenderer from "./defaultMenuItemRenderer";
 import defaultMenuRenderer from "./defaultMenuRenderer";
@@ -91,3 +91,3 @@ import MenuItem from "./MenuItem";
     menuRenderer: defaultMenuRenderer,
-    itemRenderer: defaultItemRenderer,
+    itemRenderer: defaultMenuItemRenderer,
     dropdownIcon: React.createElement(FontIcon, null, "keyboard_arrow_right"),
@@ -94,0 +94,0 @@ disableDropdownIcon: false,

es/index.js

@@ -15,2 +15,4 @@ export { default as MenuButton } from "./MenuButton";
 export * from "./DropdownMenuItem";
+export { default as defaultMenuRenderer, } from "./defaultMenuRenderer";
+export { default as defaultMenuItemRenderer, } from "./defaultMenuItemRenderer";
 //# sourceMappingURL=index.js.map

es/Menu.js

@@ -26,5 +26,3 @@ var __assign = (this && this.__assign) || function () {
 import cn from "classnames";
-import { CSSTransition } from "react-transition-group";
-import { ConditionalPortal, } from "@react-md/portal";
-import { useFixedPositioning } from "@react-md/transition";
+import { useFixedPositioning, ScaleTransition, } from "@react-md/transition";
 import { bem, } from "@react-md/utils";
@@ -49,3 +47,3 @@ import MenuEvents from "./MenuEvents";
 var Menu = function (providedProps) {
-    var _a = providedProps, controlId = _a.controlId, className = _a.className, visible = _a.visible, onRequestClose = _a.onRequestClose, forwardedRef = _a.forwardedRef, children = _a.children, portal = _a.portal, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, mountOnEnter = _a.mountOnEnter, unmountOnExit = _a.unmountOnExit, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, timeout = _a.timeout, classNames = _a.classNames, propAnchor = _a.anchor, propOnClick = _a.onClick, propOnKeyDown = _a.onKeyDown, disableCloseOnScroll = _a.disableCloseOnScroll, disableCloseOnResize = _a.disableCloseOnResize, defaultFocus = _a.defaultFocus, horizontal = _a.horizontal, positionOptions = _a.positionOptions, props = __rest(_a, ["controlId", "className", "visible", "onRequestClose", "forwardedRef", "children", "portal", "portalInto", "portalIntoId", "mountOnEnter", "unmountOnExit", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "timeout", "classNames", "anchor", "onClick", "onKeyDown", "disableCloseOnScroll", "disableCloseOnResize", "defaultFocus", "horizontal", "positionOptions"]);
+    var _a = providedProps, controlId = _a.controlId, className = _a.className, visible = _a.visible, onRequestClose = _a.onRequestClose, forwardedRef = _a.forwardedRef, children = _a.children, portal = _a.portal, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, mountOnEnter = _a.mountOnEnter, unmountOnExit = _a.unmountOnExit, propOnEnter = _a.onEnter, propOnEntering = _a.onEntering, propOnEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, propOnExited = _a.onExited, timeout = _a.timeout, classNames = _a.classNames, propAnchor = _a.anchor, propOnClick = _a.onClick, propOnKeyDown = _a.onKeyDown, disableCloseOnScroll = _a.disableCloseOnScroll, disableCloseOnResize = _a.disableCloseOnResize, defaultFocus = _a.defaultFocus, horizontal = _a.horizontal, positionOptions = _a.positionOptions, props = __rest(_a, ["controlId", "className", "visible", "onRequestClose", "forwardedRef", "children", "portal", "portalInto", "portalIntoId", "mountOnEnter", "unmountOnExit", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "timeout", "classNames", "anchor", "onClick", "onKeyDown", "disableCloseOnScroll", "disableCloseOnResize", "defaultFocus", "horizontal", "positionOptions"]);
     var anchor = propAnchor;
@@ -64,15 +62,11 @@ if (!anchor) {
         disableCloseOnScroll: disableCloseOnScroll,
+        defaultFocus: defaultFocus,
     }), ref = _b.ref, menuRef = _b.menuRef, onScroll = _b.onScroll, onClick = _b.onClick, onKeyDown = _b.onKeyDown;
-    var _c = useFixedPositioning(__assign({}, positionOptions, { fixedTo: function () { return document.getElementById(controlId); }, onScroll: onScroll, onResize: disableCloseOnResize ? undefined : onRequestClose, anchor: anchor,
-        onEnter: onEnter,
-        onEntering: onEntering,
-        onEntered: onEntered,
-        onExited: onExited, transformOrigin: true })), style = _c.style, transitionHandlers = __rest(_c, ["style"]);
+    var _c = useFixedPositioning(__assign({}, positionOptions, { fixedTo: function () { return document.getElementById(controlId); }, onScroll: onScroll, onResize: disableCloseOnResize ? undefined : onRequestClose, anchor: anchor, onEnter: propOnEnter, onEntering: propOnEntering, onEntered: propOnEntered, onExited: propOnExited, transformOrigin: true })), style = _c.style, onEnter = _c.onEnter, onEntering = _c.onEntering, onEntered = _c.onEntered, onExited = _c.onExited;
     var orientation = horizontal ? "horizontal" : "vertical";
-    return (React.createElement(ConditionalPortal, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId },
-        React.createElement(CSSTransition, __assign({ appear: mountOnEnter, in: visible, classNames: classNames, timeout: timeout }, transitionHandlers, { onExit: onExit, onExiting: onExiting, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit }),
-            React.createElement(OrientationProvider, { orientation: orientation },
-                React.createElement("div", __assign({}, props, { "aria-orientation": orientation, style: style, ref: ref, className: cn(block({ horizontal: horizontal }), className), onClick: onClick, onKeyDown: onKeyDown }),
-                    children,
-                    React.createElement(MenuEvents, { menuRef: menuRef, defaultFocus: defaultFocus }))))));
+    return (React.createElement(ScaleTransition, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId, appear: mountOnEnter, visible: visible, classNames: classNames, timeout: timeout, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit },
+        React.createElement(OrientationProvider, { orientation: orientation },
+            React.createElement("div", __assign({}, props, { "aria-orientation": orientation, style: style, ref: ref, className: cn(block({ horizontal: horizontal }), className), onClick: onClick, onKeyDown: onKeyDown }),
+                children,
+                React.createElement(MenuEvents, { menuRef: menuRef, defaultFocus: defaultFocus })))));
 };
@@ -85,14 +79,2 @@ var defaultProps = {
     defaultFocus: "first",
-    classNames: {
-        appear: "rmd-menu--enter",
-        appearActive: "rmd-menu--enter-active",
-        enter: "rmd-menu--enter",
-        enterActive: "rmd-menu--enter-active",
-        exit: "rmd-menu--exit",
-        exitActive: "rmd-menu--exit-active",
-    },
-    timeout: {
-        enter: 200,
-        exit: 150,
-    },
     horizontal: false,
@@ -161,2 +143,3 @@ disableCloseOnScroll: false,
             disableCloseOnResize: PropTypes.bool,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
             // @ts-ignore
@@ -163,0 +146,0 @@ _a11yValidator: function (props, _propName, component) {

es/MenuItem.js

@@ -44,3 +44,3 @@ var __assign = (this && this.__assign) || function () {
         MenuItem.propTypes = {
-            id: PropTypes.string.isRequired,
+            id: PropTypes.string,
             className: PropTypes.string,
@@ -47,0 +47,0 @@ role: PropTypes.string,

es/useMenu.js

@@ -1,2 +0,2 @@
-import useCloseOnOutsideClick from "./useCloseOnOutsideClick";
+import { useCloseOnOutsideClick } from "@react-md/utils";
 import useCloseOnScroll from "./useCloseOnScroll";
@@ -17,3 +17,3 @@ import useMenuClick from "./useMenuClick";
 export default function useMenu(_a) {
-    var forwardedRef = _a.ref, visible = _a.visible, controlId = _a.controlId, _b = _a.horizontal, horizontal = _b === void 0 ? false : _b, propOnClick = _a.onClick, propOnKeyDown = _a.onKeyDown, onRequestClose = _a.onRequestClose, _c = _a.disableCloseOnScroll, disableCloseOnScroll = _c === void 0 ? false : _c;
+    var forwardedRef = _a.ref, visible = _a.visible, controlId = _a.controlId, _b = _a.horizontal, horizontal = _b === void 0 ? false : _b, propOnClick = _a.onClick, propOnKeyDown = _a.onKeyDown, onRequestClose = _a.onRequestClose, _c = _a.disableCloseOnScroll, disableCloseOnScroll = _c === void 0 ? false : _c, defaultFocus = _a.defaultFocus;
     var _d = useMenuRef(forwardedRef), menu = _d.menu, ref = _d.ref;
@@ -25,8 +25,29 @@ var onScroll = useCloseOnScroll({
     });
-    useCloseOnOutsideClick({ menu: menu, visible: visible, controlId: controlId, onRequestClose: onRequestClose });
+    useCloseOnOutsideClick({
+        element: menu,
+        enabled: visible,
+        onOutsideClick: function (element, target, contains) {
+            if (!element || !target) {
+                return;
+            }
+            var control = document.getElementById(controlId);
+            // Need to also check if we have an `aria-expanded` visible anywhere since
+            // the child menus need to be portalled out to fix the overflow issue in
+            // Safari. If we didn't need to portal, this line could be removed as the
+            // `menu.current` would contain the child menu and not close.
+            var expanded = menu.current &&
+                menu.current.querySelector('[aria-expanded="true"]') &&
+                target.closest('[role="menu"]');
+            if (!contains(control, target) && !expanded) {
+                onRequestClose();
+            }
+        },
+    });
     var onClick = useMenuClick({ onClick: propOnClick, onRequestClose: onRequestClose });
     var onKeyDown = useMenuKeyDown({
+        menu: menu.current,
         onKeyDown: propOnKeyDown,
         onRequestClose: onRequestClose,
         horizontal: horizontal,
+        defaultFocus: defaultFocus,
     });
@@ -33,0 +54,0 @@ return {

es/useMenuKeyDown.js

@@ -1,2 +0,14 @@
-import { useKeyboardMovement } from "@react-md/utils";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useState, useMemo, useEffect } from "react";
+import { useKeyboardMovement, MovementPresets, getFocusableElements, extractTextContent, } from "@react-md/utils";
 /**
@@ -9,5 +21,33 @@ * This hook allows for the keyboard movement within a menu. It'll
 export default function useMenuKeyDown(_a) {
-    var onKeyDown = _a.onKeyDown, onRequestClose = _a.onRequestClose, horizontal = _a.horizontal;
-    return useKeyboardMovement({
-        onKeyDown: function (event) {
+    var menu = _a.menu, onKeyDown = _a.onKeyDown, onRequestClose = _a.onRequestClose, horizontal = _a.horizontal, defaultFocus = _a.defaultFocus;
+    var _b = useState(0), focusedIndex = _b[0], setFocusedIndex = _b[1];
+    var items = useMemo(function () {
+        if (!menu) {
+            return [];
+        }
+        return getFocusableElements(menu, true);
+    }, [menu]);
+    useEffect(function () {
+        if (!menu) {
+            return;
+        }
+        if (defaultFocus === "last") {
+            setFocusedIndex(items.length - 1);
+        }
+        else {
+            setFocusedIndex(0);
+        }
+        // only want to trigger this on initial menu mount
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [menu]);
+    return useKeyboardMovement(__assign({}, (horizontal
+        ? MovementPresets.HORIZONTAL_MENU
+        : MovementPresets.VERTICAL_MENU), { focusedIndex: focusedIndex,
+        onChange: function (_a) {
+            var index = _a.index;
+            setFocusedIndex(index);
+            if (items[index]) {
+                items[index].focus();
+            }
+        }, items: items.map(function (item) { return extractTextContent(item); }), onKeyDown: function (event) {
             if (onKeyDown) {
@@ -19,7 +59,4 @@ onKeyDown(event);
             }
-        },
-        incrementKeys: [horizontal ? "ArrowRight" : "ArrowDown"],
-        decrementKeys: [horizontal ? "ArrowLeft" : "ArrowUp"],
-    });
+        } }))[1];
 }
 //# sourceMappingURL=useMenuKeyDown.js.map

lib/DropdownMenu.js

@@ -37,3 +37,3 @@ "use strict";
 var icon_1 = require("@react-md/icon");
-var defaultItemRenderer_1 = __importDefault(require("./defaultItemRenderer"));
+var defaultMenuItemRenderer_1 = __importDefault(require("./defaultMenuItemRenderer"));
 var defaultMenuRenderer_1 = __importDefault(require("./defaultMenuRenderer"));
@@ -79,3 +79,3 @@ var MenuButton_1 = __importDefault(require("./MenuButton"));
     menuRenderer: defaultMenuRenderer_1.default,
-    itemRenderer: defaultItemRenderer_1.default,
+    itemRenderer: defaultMenuItemRenderer_1.default,
     dropdownIcon: react_1.default.createElement(icon_1.FontIcon, null, "arrow_drop_down"),
@@ -82,0 +82,0 @@ disableDropdownIcon: false,

lib/DropdownMenuItem.js

@@ -37,3 +37,3 @@ "use strict";
 var icon_1 = require("@react-md/icon");
-var defaultItemRenderer_1 = __importDefault(require("./defaultItemRenderer"));
+var defaultMenuItemRenderer_1 = __importDefault(require("./defaultMenuItemRenderer"));
 var defaultMenuRenderer_1 = __importDefault(require("./defaultMenuRenderer"));
@@ -103,3 +103,3 @@ var MenuItem_1 = __importDefault(require("./MenuItem"));
     menuRenderer: defaultMenuRenderer_1.default,
-    itemRenderer: defaultItemRenderer_1.default,
+    itemRenderer: defaultMenuItemRenderer_1.default,
     dropdownIcon: react_1.default.createElement(icon_1.FontIcon, null, "keyboard_arrow_right"),
@@ -106,0 +106,0 @@ disableDropdownIcon: false,

lib/index.js

@@ -27,2 +27,6 @@ "use strict";
 __export(require("./DropdownMenuItem"));
+var defaultMenuRenderer_1 = require("./defaultMenuRenderer");
+exports.defaultMenuRenderer = defaultMenuRenderer_1.default;
+var defaultMenuItemRenderer_1 = require("./defaultMenuItemRenderer");
+exports.defaultMenuItemRenderer = defaultMenuItemRenderer_1.default;
 //# sourceMappingURL=index.js.map

lib/Menu.js

@@ -38,4 +38,2 @@ "use strict";
 var classnames_1 = __importDefault(require("classnames"));
-var react_transition_group_1 = require("react-transition-group");
-var portal_1 = require("@react-md/portal");
 var transition_1 = require("@react-md/transition");
@@ -61,3 +59,3 @@ var utils_1 = require("@react-md/utils");
 var Menu = function (providedProps) {
-    var _a = providedProps, controlId = _a.controlId, className = _a.className, visible = _a.visible, onRequestClose = _a.onRequestClose, forwardedRef = _a.forwardedRef, children = _a.children, portal = _a.portal, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, mountOnEnter = _a.mountOnEnter, unmountOnExit = _a.unmountOnExit, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, onExited = _a.onExited, timeout = _a.timeout, classNames = _a.classNames, propAnchor = _a.anchor, propOnClick = _a.onClick, propOnKeyDown = _a.onKeyDown, disableCloseOnScroll = _a.disableCloseOnScroll, disableCloseOnResize = _a.disableCloseOnResize, defaultFocus = _a.defaultFocus, horizontal = _a.horizontal, positionOptions = _a.positionOptions, props = __rest(_a, ["controlId", "className", "visible", "onRequestClose", "forwardedRef", "children", "portal", "portalInto", "portalIntoId", "mountOnEnter", "unmountOnExit", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "timeout", "classNames", "anchor", "onClick", "onKeyDown", "disableCloseOnScroll", "disableCloseOnResize", "defaultFocus", "horizontal", "positionOptions"]);
+    var _a = providedProps, controlId = _a.controlId, className = _a.className, visible = _a.visible, onRequestClose = _a.onRequestClose, forwardedRef = _a.forwardedRef, children = _a.children, portal = _a.portal, portalInto = _a.portalInto, portalIntoId = _a.portalIntoId, mountOnEnter = _a.mountOnEnter, unmountOnExit = _a.unmountOnExit, propOnEnter = _a.onEnter, propOnEntering = _a.onEntering, propOnEntered = _a.onEntered, onExit = _a.onExit, onExiting = _a.onExiting, propOnExited = _a.onExited, timeout = _a.timeout, classNames = _a.classNames, propAnchor = _a.anchor, propOnClick = _a.onClick, propOnKeyDown = _a.onKeyDown, disableCloseOnScroll = _a.disableCloseOnScroll, disableCloseOnResize = _a.disableCloseOnResize, defaultFocus = _a.defaultFocus, horizontal = _a.horizontal, positionOptions = _a.positionOptions, props = __rest(_a, ["controlId", "className", "visible", "onRequestClose", "forwardedRef", "children", "portal", "portalInto", "portalIntoId", "mountOnEnter", "unmountOnExit", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "timeout", "classNames", "anchor", "onClick", "onKeyDown", "disableCloseOnScroll", "disableCloseOnResize", "defaultFocus", "horizontal", "positionOptions"]);
     var anchor = propAnchor;
@@ -76,15 +74,11 @@ if (!anchor) {
         disableCloseOnScroll: disableCloseOnScroll,
+        defaultFocus: defaultFocus,
     }), ref = _b.ref, menuRef = _b.menuRef, onScroll = _b.onScroll, onClick = _b.onClick, onKeyDown = _b.onKeyDown;
-    var _c = transition_1.useFixedPositioning(__assign({}, positionOptions, { fixedTo: function () { return document.getElementById(controlId); }, onScroll: onScroll, onResize: disableCloseOnResize ? undefined : onRequestClose, anchor: anchor,
-        onEnter: onEnter,
-        onEntering: onEntering,
-        onEntered: onEntered,
-        onExited: onExited, transformOrigin: true })), style = _c.style, transitionHandlers = __rest(_c, ["style"]);
+    var _c = transition_1.useFixedPositioning(__assign({}, positionOptions, { fixedTo: function () { return document.getElementById(controlId); }, onScroll: onScroll, onResize: disableCloseOnResize ? undefined : onRequestClose, anchor: anchor, onEnter: propOnEnter, onEntering: propOnEntering, onEntered: propOnEntered, onExited: propOnExited, transformOrigin: true })), style = _c.style, onEnter = _c.onEnter, onEntering = _c.onEntering, onEntered = _c.onEntered, onExited = _c.onExited;
     var orientation = horizontal ? "horizontal" : "vertical";
-    return (react_1.default.createElement(portal_1.ConditionalPortal, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId },
-        react_1.default.createElement(react_transition_group_1.CSSTransition, __assign({ appear: mountOnEnter, in: visible, classNames: classNames, timeout: timeout }, transitionHandlers, { onExit: onExit, onExiting: onExiting, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit }),
-            react_1.default.createElement(Orientation_1.OrientationProvider, { orientation: orientation },
-                react_1.default.createElement("div", __assign({}, props, { "aria-orientation": orientation, style: style, ref: ref, className: classnames_1.default(block({ horizontal: horizontal }), className), onClick: onClick, onKeyDown: onKeyDown }),
-                    children,
-                    react_1.default.createElement(MenuEvents_1.default, { menuRef: menuRef, defaultFocus: defaultFocus }))))));
+    return (react_1.default.createElement(transition_1.ScaleTransition, { portal: portal, portalInto: portalInto, portalIntoId: portalIntoId, appear: mountOnEnter, visible: visible, classNames: classNames, timeout: timeout, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit },
+        react_1.default.createElement(Orientation_1.OrientationProvider, { orientation: orientation },
+            react_1.default.createElement("div", __assign({}, props, { "aria-orientation": orientation, style: style, ref: ref, className: classnames_1.default(block({ horizontal: horizontal }), className), onClick: onClick, onKeyDown: onKeyDown }),
+                children,
+                react_1.default.createElement(MenuEvents_1.default, { menuRef: menuRef, defaultFocus: defaultFocus })))));
 };
@@ -97,14 +91,2 @@ var defaultProps = {
     defaultFocus: "first",
-    classNames: {
-        appear: "rmd-menu--enter",
-        appearActive: "rmd-menu--enter-active",
-        enter: "rmd-menu--enter",
-        enterActive: "rmd-menu--enter-active",
-        exit: "rmd-menu--exit",
-        exitActive: "rmd-menu--exit-active",
-    },
-    timeout: {
-        enter: 200,
-        exit: 150,
-    },
     horizontal: false,
@@ -173,2 +155,3 @@ disableCloseOnScroll: false,
             disableCloseOnResize: PropTypes.bool,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
             // @ts-ignore
@@ -175,0 +158,0 @@ _a11yValidator: function (props, _propName, component) {

lib/MenuItem.js

@@ -56,3 +56,3 @@ "use strict";
         MenuItem.propTypes = {
-            id: PropTypes.string.isRequired,
+            id: PropTypes.string,
             className: PropTypes.string,
@@ -59,0 +59,0 @@ role: PropTypes.string,

lib/useMenu.js

@@ -6,3 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var useCloseOnOutsideClick_1 = __importDefault(require("./useCloseOnOutsideClick"));
+var utils_1 = require("@react-md/utils");
 var useCloseOnScroll_1 = __importDefault(require("./useCloseOnScroll"));
@@ -23,3 +23,3 @@ var useMenuClick_1 = __importDefault(require("./useMenuClick"));
 function useMenu(_a) {
-    var forwardedRef = _a.ref, visible = _a.visible, controlId = _a.controlId, _b = _a.horizontal, horizontal = _b === void 0 ? false : _b, propOnClick = _a.onClick, propOnKeyDown = _a.onKeyDown, onRequestClose = _a.onRequestClose, _c = _a.disableCloseOnScroll, disableCloseOnScroll = _c === void 0 ? false : _c;
+    var forwardedRef = _a.ref, visible = _a.visible, controlId = _a.controlId, _b = _a.horizontal, horizontal = _b === void 0 ? false : _b, propOnClick = _a.onClick, propOnKeyDown = _a.onKeyDown, onRequestClose = _a.onRequestClose, _c = _a.disableCloseOnScroll, disableCloseOnScroll = _c === void 0 ? false : _c, defaultFocus = _a.defaultFocus;
     var _d = useMenuRef_1.default(forwardedRef), menu = _d.menu, ref = _d.ref;
@@ -31,8 +31,29 @@ var onScroll = useCloseOnScroll_1.default({
     });
-    useCloseOnOutsideClick_1.default({ menu: menu, visible: visible, controlId: controlId, onRequestClose: onRequestClose });
+    utils_1.useCloseOnOutsideClick({
+        element: menu,
+        enabled: visible,
+        onOutsideClick: function (element, target, contains) {
+            if (!element || !target) {
+                return;
+            }
+            var control = document.getElementById(controlId);
+            // Need to also check if we have an `aria-expanded` visible anywhere since
+            // the child menus need to be portalled out to fix the overflow issue in
+            // Safari. If we didn't need to portal, this line could be removed as the
+            // `menu.current` would contain the child menu and not close.
+            var expanded = menu.current &&
+                menu.current.querySelector('[aria-expanded="true"]') &&
+                target.closest('[role="menu"]');
+            if (!contains(control, target) && !expanded) {
+                onRequestClose();
+            }
+        },
+    });
     var onClick = useMenuClick_1.default({ onClick: propOnClick, onRequestClose: onRequestClose });
     var onKeyDown = useMenuKeyDown_1.default({
+        menu: menu.current,
         onKeyDown: propOnKeyDown,
         onRequestClose: onRequestClose,
         horizontal: horizontal,
+        defaultFocus: defaultFocus,
     });
@@ -39,0 +60,0 @@ return {

lib/useMenuKeyDown.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
 var utils_1 = require("@react-md/utils");
@@ -11,5 +23,33 @@ /**
 function useMenuKeyDown(_a) {
-    var onKeyDown = _a.onKeyDown, onRequestClose = _a.onRequestClose, horizontal = _a.horizontal;
-    return utils_1.useKeyboardMovement({
-        onKeyDown: function (event) {
+    var menu = _a.menu, onKeyDown = _a.onKeyDown, onRequestClose = _a.onRequestClose, horizontal = _a.horizontal, defaultFocus = _a.defaultFocus;
+    var _b = react_1.useState(0), focusedIndex = _b[0], setFocusedIndex = _b[1];
+    var items = react_1.useMemo(function () {
+        if (!menu) {
+            return [];
+        }
+        return utils_1.getFocusableElements(menu, true);
+    }, [menu]);
+    react_1.useEffect(function () {
+        if (!menu) {
+            return;
+        }
+        if (defaultFocus === "last") {
+            setFocusedIndex(items.length - 1);
+        }
+        else {
+            setFocusedIndex(0);
+        }
+        // only want to trigger this on initial menu mount
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [menu]);
+    return utils_1.useKeyboardMovement(__assign({}, (horizontal
+        ? utils_1.MovementPresets.HORIZONTAL_MENU
+        : utils_1.MovementPresets.VERTICAL_MENU), { focusedIndex: focusedIndex,
+        onChange: function (_a) {
+            var index = _a.index;
+            setFocusedIndex(index);
+            if (items[index]) {
+                items[index].focus();
+            }
+        }, items: items.map(function (item) { return utils_1.extractTextContent(item); }), onKeyDown: function (event) {
             if (onKeyDown) {
@@ -21,8 +61,5 @@ onKeyDown(event);
             }
-        },
-        incrementKeys: [horizontal ? "ArrowRight" : "ArrowDown"],
-        decrementKeys: [horizontal ? "ArrowLeft" : "ArrowUp"],
-    });
+        } }))[1];
 }
 exports.default = useMenuKeyDown;
 //# sourceMappingURL=useMenuKeyDown.js.map

package.json

 {
   "name": "@react-md/menu",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0-alpha.10",
   "description": "Create menus that auto-position themselves within the viewport and adhere to the accessibility guidelines",
@@ -41,12 +41,12 @@ "scripts": {
   "dependencies": {
-    "@react-md/app-bar": "^2.0.0-alpha.9",
-    "@react-md/button": "^2.0.0-alpha.9",
-    "@react-md/divider": "^2.0.0-alpha.9",
-    "@react-md/elevation": "^2.0.0-alpha.9",
-    "@react-md/icon": "^2.0.0-alpha.9",
-    "@react-md/list": "^2.0.0-alpha.9",
-    "@react-md/states": "^2.0.0-alpha.9",
-    "@react-md/theme": "^2.0.0-alpha.9",
-    "@react-md/typography": "^2.0.0-alpha.9",
-    "@react-md/utils": "^2.0.0-alpha.9",
+    "@react-md/app-bar": "^2.0.0-alpha.10",
+    "@react-md/button": "^2.0.0-alpha.10",
+    "@react-md/divider": "^2.0.0-alpha.10",
+    "@react-md/elevation": "^2.0.0-alpha.10",
+    "@react-md/icon": "^2.0.0-alpha.10",
+    "@react-md/list": "^2.0.0-alpha.10",
+    "@react-md/states": "^2.0.0-alpha.10",
+    "@react-md/theme": "^2.0.0-alpha.10",
+    "@react-md/typography": "^2.0.0-alpha.10",
+    "@react-md/utils": "^2.0.0-alpha.10",
     "classnames": "^2.2.6"
@@ -63,3 +63,3 @@ },
   },
-  "gitHead": "5dc105d777dd95c5ab6b38509d9c002993bbf4b0"
+  "gitHead": "d42497f9e2e5c6e7f37774e140a5bf80c644081d"
 }

src/index.ts

@@ -22,3 +22,12 @@ export { default as MenuButton } from "./MenuButton";
 
-export { InjectedMenuProps, MenuRenderer } from "./defaultMenuRenderer";
-export { Item, MenuItemRenderer } from "./defaultItemRenderer";
+export {
+  default as defaultMenuRenderer,
+  AllInjectedMenuProps,
+  InjectedMenuProps,
+  MenuRenderer,
+} from "./defaultMenuRenderer";
+export {
+  default as defaultMenuItemRenderer,
+  ValidMenuItem,
+  MenuItemRenderer,
+} from "./defaultMenuItemRenderer";

src/scssVariables.ts

@@ -9,4 +9,2 @@ /** this is an auto-generated file from @react-md/dev-utils */
   "rmd-menu-horizontal-item-min-width": "5rem",
-  "rmd-menu-enter-duration": "0.2s",
-  "rmd-menu-leave-duration": "0.15s",
   "rmd-menu-icon-spacing": "1rem",
@@ -13,0 +11,0 @@ "rmd-menu-theme-values": {

src/useMenu.ts

 import { HTMLAttributes, MutableRefObject, Ref } from "react";
+import { useCloseOnOutsideClick } from "@react-md/utils";
 
-import useCloseOnOutsideClick from "./useCloseOnOutsideClick";
 import useCloseOnScroll from "./useCloseOnScroll";
@@ -60,2 +60,3 @@ import useMenuClick from "./useMenuClick";
   disableCloseOnScroll?: boolean;
+  defaultFocus: "first" | "last" | string;
 }
@@ -89,2 +90,3 @@
   disableCloseOnScroll = false,
+  defaultFocus,
 }: MenuOptions): ReturnValue {
@@ -98,9 +100,34 @@ const { menu, ref } = useMenuRef(forwardedRef);
 
-  useCloseOnOutsideClick({ menu, visible, controlId, onRequestClose });
+  useCloseOnOutsideClick({
+    element: menu,
+    enabled: visible,
+    onOutsideClick(element, target, contains) {
+      if (!element || !target) {
+        return;
+      }
 
+      const control = document.getElementById(controlId);
+
+      // Need to also check if we have an `aria-expanded` visible anywhere since
+      // the child menus need to be portalled out to fix the overflow issue in
+      // Safari. If we didn't need to portal, this line could be removed as the
+      // `menu.current` would contain the child menu and not close.
+      const expanded =
+        menu.current &&
+        menu.current.querySelector('[aria-expanded="true"]') &&
+        target.closest('[role="menu"]');
+
+      if (!contains(control, target) && !expanded) {
+        onRequestClose();
+      }
+    },
+  });
+
   const onClick = useMenuClick({ onClick: propOnClick, onRequestClose });
   const onKeyDown = useMenuKeyDown({
+    menu: menu.current,
     onKeyDown: propOnKeyDown,
     onRequestClose,
     horizontal,
+    defaultFocus,
   });
@@ -107,0 +134,0 @@

src/useMenuKeyDown.ts

@@ -1,7 +0,15 @@
-import { useKeyboardMovement } from "@react-md/utils";
+import { useState, useMemo, useEffect } from "react";
+import {
+  useKeyboardMovement,
+  MovementPresets,
+  getFocusableElements,
+  extractTextContent,
+} from "@react-md/utils";
 
 interface MenuKeyDownOptions {
+  menu: HTMLDivElement | null;
   horizontal: boolean;
   onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
   onRequestClose: () => void;
+  defaultFocus: string;
 }
@@ -16,7 +24,44 @@
 export default function useMenuKeyDown({
+  menu,
   onKeyDown,
   onRequestClose,
   horizontal,
+  defaultFocus,
 }: MenuKeyDownOptions): React.KeyboardEventHandler<HTMLDivElement> {
-  return useKeyboardMovement<HTMLDivElement>({
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const items = useMemo(() => {
+    if (!menu) {
+      return [];
+    }
+
+    return getFocusableElements(menu, true);
+  }, [menu]);
+
+  useEffect(() => {
+    if (!menu) {
+      return;
+    }
+
+    if (defaultFocus === "last") {
+      setFocusedIndex(items.length - 1);
+    } else {
+      setFocusedIndex(0);
+    }
+
+    // only want to trigger this on initial menu mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [menu]);
+
+  return useKeyboardMovement<string, HTMLDivElement>({
+    ...(horizontal
+      ? MovementPresets.HORIZONTAL_MENU
+      : MovementPresets.VERTICAL_MENU),
+    focusedIndex,
+    onChange({ index }) {
+      setFocusedIndex(index);
+      if (items[index]) {
+        items[index].focus();
+      }
+    },
+    items: items.map(item => extractTextContent(item)),
     onKeyDown(event) {
@@ -31,5 +76,3 @@ if (onKeyDown) {
     },
-    incrementKeys: [horizontal ? "ArrowRight" : "ArrowDown"],
-    decrementKeys: [horizontal ? "ArrowLeft" : "ArrowUp"],
-  });
+  })[1];
 }

types/defaultMenuRenderer.d.ts

@@ -1,9 +0,9 @@
-import React, { ReactNode, ReactElement } from "react";
+import React, { ReactElement, ReactNode } from "react";
+import { RenderConditionalPortalProps } from "@react-md/portal";
 import { LabelRequiredForA11y } from "@react-md/utils";
-import { RenderConditionalPortalProps } from "@react-md/portal";
-import { Item } from "./defaultItemRenderer";
+import { ValidMenuItem } from "./defaultMenuItemRenderer";
 import { MenuProps } from "./Menu";
 export declare type MenuPositionProps = Pick<MenuProps, "anchor" | "horizontal" | "positionOptions" | "disableCloseOnScroll" | "disableCloseOnResize">;
 declare type RequiredMenuProps = Required<Pick<MenuProps, "id" | "visible" | "onRequestClose" | "controlId" | "children" | "defaultFocus">>;
-export interface InjectedMenuProps extends MenuPositionProps, RequiredMenuProps, RenderConditionalPortalProps {
+export interface AllInjectedMenuProps extends MenuPositionProps, RequiredMenuProps, RenderConditionalPortalProps {
     "aria-label"?: string;
@@ -14,8 +14,20 @@ "aria-labelledby"?: string;
 }
-export declare type MenuRenderer = (props: LabelRequiredForA11y<InjectedMenuProps>, items: Item[]) => ReactNode;
+export declare type InjectedMenuProps = LabelRequiredForA11y<AllInjectedMenuProps>;
 /**
+ * A type that can be used to implement a custom menu renderer:
+ *
+ * ```ts
+ * const customRenderer: MenuRenderer = (props, items) => {
+ *   ... do stuff ...
+ *
+ *   return <MyComponent { ...whatever }>{children}</MyComponent>
+ * };
+ * ```
+ */
+export declare type MenuRenderer = (props: InjectedMenuProps, items: ValidMenuItem[]) => ReactNode;
+/**
  * The default menu renderer that will just render the `Menu` component along with
  * a `List` by passing all props down to the main `Menu` component.
  */
-export default function defaultMenuRenderer({ horizontal, children, ...props }: LabelRequiredForA11y<InjectedMenuProps>): ReactElement;
+export default function defaultMenuRenderer({ horizontal, children, ...props }: LabelRequiredForA11y<AllInjectedMenuProps>): ReactElement;
 export {};

types/DropdownMenu.d.ts

 import React from "react";
 import { RenderConditionalPortalProps } from "@react-md/portal";
-import { Omit } from "@react-md/utils";
-import { Item, MenuItemRenderer } from "./defaultItemRenderer";
+import { MenuItemRenderer, ValidMenuItem } from "./defaultMenuItemRenderer";
 import { MenuPositionProps, MenuRenderer } from "./defaultMenuRenderer";
@@ -35,3 +34,3 @@ import { MenuButtonProps } from "./MenuButton";
      */
-    items: Item[];
+    items: ValidMenuItem[];
     /**
@@ -38,0 +37,0 @@ * A function to call for each `item` in the `items` list to render a ReactElement.

types/DropdownMenuItem.d.ts

 import { FC, ReactNode } from "react";
-import { Omit, WithForwardedRef } from "@react-md/utils";
+import { WithForwardedRef } from "@react-md/utils";
 import { BaseDropdownMenuProps } from "./DropdownMenu";
@@ -4,0 +4,0 @@ import { MenuItemProps } from "./MenuItem";

types/index.d.ts

@@ -15,3 +15,3 @@ export { default as MenuButton } from "./MenuButton";
 export * from "./DropdownMenuItem";
-export { InjectedMenuProps, MenuRenderer } from "./defaultMenuRenderer";
-export { Item, MenuItemRenderer } from "./defaultItemRenderer";
+export { default as defaultMenuRenderer, AllInjectedMenuProps, InjectedMenuProps, MenuRenderer, } from "./defaultMenuRenderer";
+export { default as defaultMenuItemRenderer, ValidMenuItem, MenuItemRenderer, } from "./defaultMenuItemRenderer";

types/Menu.d.ts

 import React, { HTMLAttributes } from "react";
 import { RenderConditionalPortalProps } from "@react-md/portal";
-import { CSSTransitionProps } from "@react-md/transition";
+import { OverridableCSSTransitionProps } from "@react-md/transition";
 import { FixedPositionOptions, PositionAnchor } from "@react-md/utils";
-export interface MenuProps extends HTMLAttributes<HTMLDivElement>, CSSTransitionProps, RenderConditionalPortalProps {
+export interface MenuProps extends HTMLAttributes<HTMLDivElement>, OverridableCSSTransitionProps, RenderConditionalPortalProps {
     /**
@@ -86,3 +86,3 @@ * The id for the menu. THis is required for a11y.
 }
-declare const _default: React.ForwardRefExoticComponent<(MenuProps & Pick<MenuProps, "role" | "tabIndex" | "id" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "title" | "inputMode" | "is" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "horizontal" | "anchor" | "positionOptions" | "disableCloseOnScroll" | "disableCloseOnResize" | "controlId" | "visible" | "onRequestClose" | "defaultFocus" | "classNames" | "timeout" | "mountOnEnter" | "unmountOnExit" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "portal" | "portalInto" | "portalIntoId"> & Required<Pick<MenuProps, "aria-label">> & React.RefAttributes<HTMLDivElement>) | (MenuProps & Pick<MenuProps, "role" | "tabIndex" | "id" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "title" | "inputMode" | "is" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "horizontal" | "anchor" | "positionOptions" | "disableCloseOnScroll" | "disableCloseOnResize" | "controlId" | "visible" | "onRequestClose" | "defaultFocus" | "classNames" | "timeout" | "mountOnEnter" | "unmountOnExit" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "portal" | "portalInto" | "portalIntoId"> & Required<Pick<MenuProps, "aria-labelledby">> & React.RefAttributes<HTMLDivElement>)>;
+declare const _default: React.ForwardRefExoticComponent<(MenuProps & Pick<MenuProps, "id" | "timeout" | "role" | "tabIndex" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "title" | "inputMode" | "is" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "anchor" | "horizontal" | "positionOptions" | "disableCloseOnScroll" | "disableCloseOnResize" | "classNames" | "appear" | "enter" | "exit" | "mountOnEnter" | "unmountOnExit" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "portal" | "portalInto" | "portalIntoId" | "visible" | "onRequestClose" | "controlId" | "defaultFocus"> & Required<Pick<MenuProps, "aria-label">> & React.RefAttributes<HTMLDivElement>) | (MenuProps & Pick<MenuProps, "id" | "timeout" | "role" | "tabIndex" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "title" | "inputMode" | "is" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "anchor" | "horizontal" | "positionOptions" | "disableCloseOnScroll" | "disableCloseOnResize" | "classNames" | "appear" | "enter" | "exit" | "mountOnEnter" | "unmountOnExit" | "onEnter" | "onEntering" | "onEntered" | "onExit" | "onExiting" | "onExited" | "portal" | "portalInto" | "portalIntoId" | "visible" | "onRequestClose" | "controlId" | "defaultFocus"> & Required<Pick<MenuProps, "aria-labelledby">> & React.RefAttributes<HTMLDivElement>)>;
 export default _default;

types/useMenu.d.ts

@@ -46,2 +46,3 @@ import { HTMLAttributes, MutableRefObject, Ref } from "react";
     disableCloseOnScroll?: boolean;
+    defaultFocus: "first" | "last" | string;
 }
@@ -63,3 +64,3 @@ interface ReturnValue extends Pick<HTMLAttributes<HTMLDivElement>, "onClick" | "onKeyDown"> {
  */
-export default function useMenu({ ref: forwardedRef, visible, controlId, horizontal, onClick: propOnClick, onKeyDown: propOnKeyDown, onRequestClose, disableCloseOnScroll, }: MenuOptions): ReturnValue;
+export default function useMenu({ ref: forwardedRef, visible, controlId, horizontal, onClick: propOnClick, onKeyDown: propOnKeyDown, onRequestClose, disableCloseOnScroll, defaultFocus, }: MenuOptions): ReturnValue;
 export {};

types/useMenuKeyDown.d.ts

 /// <reference types="react" />
 interface MenuKeyDownOptions {
+    menu: HTMLDivElement | null;
     horizontal: boolean;
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     onRequestClose: () => void;
+    defaultFocus: string;
 }
@@ -13,3 +15,3 @@ /**
  */
-export default function useMenuKeyDown({ onKeyDown, onRequestClose, horizontal, }: MenuKeyDownOptions): React.KeyboardEventHandler<HTMLDivElement>;
+export default function useMenuKeyDown({ menu, onKeyDown, onRequestClose, horizontal, defaultFocus, }: MenuKeyDownOptions): React.KeyboardEventHandler<HTMLDivElement>;
 export {};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

4858

increased by0.68%

Worsened metrics

Total package byte prevSize

274496

decreased by-0.36%

Number of package files

148

decreased by-3.9%

Dependency changes

• Updated@react-md/app-bar@^2.0.0-alpha.10

• Updated@react-md/button@^2.0.0-alpha.10

• Updated@react-md/divider@^2.0.0-alpha.10

• Updated@react-md/elevation@^2.0.0-alpha.10

• Updated@react-md/icon@^2.0.0-alpha.10

• Updated@react-md/list@^2.0.0-alpha.10

• Updated@react-md/states@^2.0.0-alpha.10

• Updated@react-md/theme@^2.0.0-alpha.10

• Updated@react-md/typography@^2.0.0-alpha.10

• Updated@react-md/utils@^2.0.0-alpha.10