Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@react-md/menu

Package Overview
Dependencies
Maintainers
1
Versions
64
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-md/menu - npm Package Compare versions

Comparing version 4.0.0 to 4.0.1

17

CHANGELOG.md

@@ -6,2 +6,19 @@ # Change Log

## [4.0.1](https://github.com/mlaursen/react-md/compare/v4.0.0...v4.0.1) (2021-11-27)
### Bug Fixes
* **@react-md/menu:** Added fixes required for Concurrent Rendering ([05ec620](https://github.com/mlaursen/react-md/commit/05ec620a4447c904f311e5f98a3580ce56ece35f))
### Other Internal Changes
* Updated imports to use `import type` when possible ([ba96bb6](https://github.com/mlaursen/react-md/commit/ba96bb62eeddcc0879f6d584aa670850203561e6))
# [4.0.0](https://github.com/mlaursen/react-md/compare/v3.1.1...v4.0.0) (2021-11-24)

@@ -8,0 +25,0 @@

30

es/Menu.js

@@ -23,2 +23,18 @@ var __assign = (this && this.__assign) || function () {

};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

@@ -60,10 +76,12 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */

}), nodeRef = _l.ref, menuRef = _l.menuRef, onClick = _l.onClick, onKeyDown = _l.onKeyDown;
var _m = useState(false), cancelled = _m[0], setCancelled = _m[1];
var _m = __read(useState(false), 2), cancelled = _m[0], setCancelled = _m[1];
var prevVisible = useRef(visible);
if (prevVisible.current !== visible) {
prevVisible.current = visible;
if (cancelled) {
setCancelled(false);
useEffect(function () {
if (prevVisible.current !== visible) {
prevVisible.current = visible;
if (cancelled) {
setCancelled(false);
}
}
}
}, [visible, cancelled]);
var fixedTo = useRef(null);

@@ -70,0 +88,0 @@ useEffect(function () {

22

es/useContextMenu.js

@@ -0,1 +1,17 @@

var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import { useCallback, useEffect, useState, } from "react";

@@ -7,7 +23,7 @@ import { SCALE_Y_CLASSNAMES, } from "@react-md/transition";

var _b = _a === void 0 ? {} : _a, _c = _b.id, id = _c === void 0 ? DEFAULT_CONTEXT_MENU_ID : _c, propRef = _b.ref, _d = _b.anchor, anchor = _d === void 0 ? TOP_INNER_LEFT_ANCHOR : _d, _e = _b.classNames, classNames = _e === void 0 ? SCALE_Y_CLASSNAMES : _e, _f = _b.disableDeselect, disableDeselect = _f === void 0 ? false : _f;
var _g = useState(false), visible = _g[0], setVisible = _g[1];
var _g = __read(useState(false), 2), visible = _g[0], setVisible = _g[1];
var onRequestClose = useCallback(function () {
setVisible(false);
}, []);
var _h = useState({}), coords = _h[0], setCoords = _h[1];
var _h = __read(useState({}), 2), coords = _h[0], setCoords = _h[1];
var onContextMenu = useCallback(function (event) {

@@ -27,3 +43,3 @@ event.preventDefault();

}, [disableDeselect]);
var _j = useEnsuredRef(propRef), ref = _j[0], refHandler = _j[1];
var _j = __read(useEnsuredRef(propRef), 2), ref = _j[0], refHandler = _j[1];
useEffect(function () {

@@ -30,0 +46,0 @@ if (!visible) {

@@ -0,1 +1,17 @@

var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import { useCloseOnOutsideClick, useEnsuredRef } from "@react-md/utils";

@@ -17,3 +33,3 @@ import { useMenuClick } from "./useMenuClick";

var propRef = _a.ref, visible = _a.visible, controlId = _a.controlId, _b = _a.horizontal, horizontal = _b === void 0 ? false : _b, propOnClick = _a.onClick, propOnKeyDown = _a.onKeyDown, _c = _a.portalled, portalled = _c === void 0 ? false : _c, defaultFocus = _a.defaultFocus, onRequestClose = _a.onRequestClose, _d = _a.disableControlClickOkay, disableControlClickOkay = _d === void 0 ? false : _d;
var _e = useEnsuredRef(propRef), ref = _e[0], refHandler = _e[1];
var _e = __read(useEnsuredRef(propRef), 2), ref = _e[0], refHandler = _e[1];
useCloseOnOutsideClick({

@@ -20,0 +36,0 @@ element: ref,

@@ -12,2 +12,18 @@ var __assign = (this && this.__assign) || function () {

};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import { useEffect, useMemo, useState } from "react";

@@ -23,3 +39,3 @@ import { extractTextContent, getFocusableElements, MovementPresets, useKeyboardMovement, } from "@react-md/utils";

var menu = _a.menu, onKeyDown = _a.onKeyDown, onRequestClose = _a.onRequestClose, portalled = _a.portalled, horizontal = _a.horizontal, defaultFocus = _a.defaultFocus;
var _b = useState(0), focusedIndex = _b[0], setFocusedIndex = _b[1];
var _b = __read(useState(0), 2), focusedIndex = _b[0], setFocusedIndex = _b[1];
var items = useMemo(function () {

@@ -26,0 +42,0 @@ if (!menu) {

@@ -0,1 +1,17 @@

var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import { useCallback, useRef, useState } from "react";

@@ -11,6 +27,6 @@ /**

var _b = _a === void 0 ? {} : _a, _c = _b.defaultVisible, defaultVisible = _c === void 0 ? false : _c, _d = _b.defaultFocus, defaultFocusValue = _d === void 0 ? "first" : _d, onVisibilityChange = _b.onVisibilityChange;
var _e = useState({
var _e = __read(useState({
visible: defaultVisible,
defaultFocus: defaultFocusValue,
}), _f = _e[0], visible = _f.visible, defaultFocus = _f.defaultFocus, setState = _e[1];
}), 2), _f = _e[0], visible = _f.visible, defaultFocus = _f.defaultFocus, setState = _e[1];
var prevVisible = useRef(visible);

@@ -17,0 +33,0 @@ if (prevVisible.current !== visible) {

@@ -1,4 +0,4 @@

import { CSSProperties, ReactElement, ReactNode } from "react";
import { RenderConditionalPortalProps } from "@react-md/portal";
import { LabelRequiredForA11y } from "@react-md/utils";
import type { CSSProperties, ReactElement, ReactNode } from "react";
import type { RenderConditionalPortalProps } from "@react-md/portal";
import type { LabelRequiredForA11y } from "@react-md/utils";
import { ValidMenuItem } from "./defaultMenuItemRenderer";

@@ -5,0 +5,0 @@ import { MenuProps } from "./Menu";

import { CSSProperties } from "react";
import { RenderConditionalPortalProps } from "@react-md/portal";
import type { RenderConditionalPortalProps } from "@react-md/portal";
import { MenuItemRenderer, ValidMenuItem } from "./defaultMenuItemRenderer";

@@ -4,0 +4,0 @@ import { MenuPositionProps, MenuRenderer } from "./defaultMenuRenderer";

import { ReactNode } from "react";
import { BaseDropdownMenuProps } from "./DropdownMenu";
import type { BaseDropdownMenuProps } from "./DropdownMenu";
import { MenuItemProps } from "./MenuItem";

@@ -4,0 +4,0 @@ export interface DropdownMenuItemProps extends Omit<MenuItemProps, "id">, BaseDropdownMenuProps {

@@ -24,2 +24,18 @@ "use strict";

};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __importDefault = (this && this.__importDefault) || function (mod) {

@@ -66,10 +82,12 @@ return (mod && mod.__esModule) ? mod : { "default": mod };

}), nodeRef = _l.ref, menuRef = _l.menuRef, onClick = _l.onClick, onKeyDown = _l.onKeyDown;
var _m = (0, react_1.useState)(false), cancelled = _m[0], setCancelled = _m[1];
var _m = __read((0, react_1.useState)(false), 2), cancelled = _m[0], setCancelled = _m[1];
var prevVisible = (0, react_1.useRef)(visible);
if (prevVisible.current !== visible) {
prevVisible.current = visible;
if (cancelled) {
setCancelled(false);
(0, react_1.useEffect)(function () {
if (prevVisible.current !== visible) {
prevVisible.current = visible;
if (cancelled) {
setCancelled(false);
}
}
}
}, [visible, cancelled]);
var fixedTo = (0, react_1.useRef)(null);

@@ -76,0 +94,0 @@ (0, react_1.useEffect)(function () {

@@ -1,2 +0,2 @@

import { MutableRefObject } from "react";
import type { MutableRefObject } from "react";
export interface MenuEventsProps {

@@ -3,0 +3,0 @@ menuRef: MutableRefObject<HTMLDivElement | null>;

@@ -1,2 +0,2 @@

import { ReactElement, ReactNode } from "react";
import type { ReactElement, ReactNode } from "react";
export interface ToggleChildrenProps {

@@ -3,0 +3,0 @@ children?: ReactNode;

import { Dispatch, Ref, SetStateAction } from "react";
import { CSSTransitionClassNames } from "@react-md/transition";
import { PositionAnchor } from "@react-md/utils";
import { MenuProps } from "./Menu";
import type { MenuProps } from "./Menu";
declare type ProvidedPropNames = "id" | "anchor" | "visible" | "classNames" | "positionOptions" | "onRequestClose" | "disableControlClickOkay";

@@ -6,0 +6,0 @@ export interface ProvidedContextMenuProps extends Required<Pick<MenuProps, ProvidedPropNames>> {

"use strict";
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });

@@ -10,7 +26,7 @@ exports.useContextMenu = void 0;

var _b = _a === void 0 ? {} : _a, _c = _b.id, id = _c === void 0 ? DEFAULT_CONTEXT_MENU_ID : _c, propRef = _b.ref, _d = _b.anchor, anchor = _d === void 0 ? utils_1.TOP_INNER_LEFT_ANCHOR : _d, _e = _b.classNames, classNames = _e === void 0 ? transition_1.SCALE_Y_CLASSNAMES : _e, _f = _b.disableDeselect, disableDeselect = _f === void 0 ? false : _f;
var _g = (0, react_1.useState)(false), visible = _g[0], setVisible = _g[1];
var _g = __read((0, react_1.useState)(false), 2), visible = _g[0], setVisible = _g[1];
var onRequestClose = (0, react_1.useCallback)(function () {
setVisible(false);
}, []);
var _h = (0, react_1.useState)({}), coords = _h[0], setCoords = _h[1];
var _h = __read((0, react_1.useState)({}), 2), coords = _h[0], setCoords = _h[1];
var onContextMenu = (0, react_1.useCallback)(function (event) {

@@ -30,3 +46,3 @@ event.preventDefault();

}, [disableDeselect]);
var _j = (0, utils_1.useEnsuredRef)(propRef), ref = _j[0], refHandler = _j[1];
var _j = __read((0, utils_1.useEnsuredRef)(propRef), 2), ref = _j[0], refHandler = _j[1];
(0, react_1.useEffect)(function () {

@@ -33,0 +49,0 @@ if (!visible) {

@@ -1,2 +0,2 @@

import { HTMLAttributes, MutableRefObject, Ref } from "react";
import type { HTMLAttributes, MutableRefObject, Ref } from "react";
export interface MenuOptions {

@@ -3,0 +3,0 @@ /**

"use strict";
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });

@@ -20,3 +36,3 @@ exports.useMenu = void 0;

var propRef = _a.ref, visible = _a.visible, controlId = _a.controlId, _b = _a.horizontal, horizontal = _b === void 0 ? false : _b, propOnClick = _a.onClick, propOnKeyDown = _a.onKeyDown, _c = _a.portalled, portalled = _c === void 0 ? false : _c, defaultFocus = _a.defaultFocus, onRequestClose = _a.onRequestClose, _d = _a.disableControlClickOkay, disableControlClickOkay = _d === void 0 ? false : _d;
var _e = (0, utils_1.useEnsuredRef)(propRef), ref = _e[0], refHandler = _e[1];
var _e = __read((0, utils_1.useEnsuredRef)(propRef), 2), ref = _e[0], refHandler = _e[1];
(0, utils_1.useCloseOnOutsideClick)({

@@ -23,0 +39,0 @@ element: ref,

@@ -13,2 +13,18 @@ "use strict";

};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });

@@ -26,3 +42,3 @@ exports.useMenuKeyDown = void 0;

var menu = _a.menu, onKeyDown = _a.onKeyDown, onRequestClose = _a.onRequestClose, portalled = _a.portalled, horizontal = _a.horizontal, defaultFocus = _a.defaultFocus;
var _b = (0, react_1.useState)(0), focusedIndex = _b[0], setFocusedIndex = _b[1];
var _b = __read((0, react_1.useState)(0), 2), focusedIndex = _b[0], setFocusedIndex = _b[1];
var items = (0, react_1.useMemo)(function () {

@@ -29,0 +45,0 @@ if (!menu) {

"use strict";
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });

@@ -14,6 +30,6 @@ exports.useVisibility = void 0;

var _b = _a === void 0 ? {} : _a, _c = _b.defaultVisible, defaultVisible = _c === void 0 ? false : _c, _d = _b.defaultFocus, defaultFocusValue = _d === void 0 ? "first" : _d, onVisibilityChange = _b.onVisibilityChange;
var _e = (0, react_1.useState)({
var _e = __read((0, react_1.useState)({
visible: defaultVisible,
defaultFocus: defaultFocusValue,
}), _f = _e[0], visible = _f.visible, defaultFocus = _f.defaultFocus, setState = _e[1];
}), 2), _f = _e[0], visible = _f.visible, defaultFocus = _f.defaultFocus, setState = _e[1];
var prevVisible = (0, react_1.useRef)(visible);

@@ -20,0 +36,0 @@ if (prevVisible.current !== visible) {

{
"name": "@react-md/menu",
"version": "4.0.0",
"version": "4.0.1",
"description": "Create menus that auto-position themselves within the viewport and adhere to the accessibility guidelines",

@@ -34,13 +34,13 @@ "main": "./lib/index.js",

"dependencies": {
"@react-md/app-bar": "^4.0.0",
"@react-md/button": "^4.0.0",
"@react-md/divider": "^4.0.0",
"@react-md/elevation": "^4.0.0",
"@react-md/icon": "^4.0.0",
"@react-md/list": "^4.0.0",
"@react-md/states": "^4.0.0",
"@react-md/theme": "^4.0.0",
"@react-md/transition": "^4.0.0",
"@react-md/typography": "^4.0.0",
"@react-md/utils": "^4.0.0",
"@react-md/app-bar": "^4.0.1",
"@react-md/button": "^4.0.1",
"@react-md/divider": "^4.0.1",
"@react-md/elevation": "^4.0.1",
"@react-md/icon": "^4.0.1",
"@react-md/list": "^4.0.1",
"@react-md/states": "^4.0.1",
"@react-md/theme": "^4.0.1",
"@react-md/transition": "^4.0.1",
"@react-md/typography": "^4.0.1",
"@react-md/utils": "^4.0.1",
"classnames": "^2.3.1"

@@ -59,3 +59,3 @@ },

},
"gitHead": "a9f2d64a777698fa65bb3196f6063cdd8321f5cb"
"gitHead": "0df0f24d688ea7c867b7ef656ee9887f00215705"
}

@@ -21,3 +21,3 @@ import {

import { MenuProps } from "./Menu";
import type { MenuProps } from "./Menu";

@@ -24,0 +24,0 @@ type ProvidedPropNames =

@@ -1,2 +0,2 @@

import { HTMLAttributes, MutableRefObject, Ref } from "react";
import type { HTMLAttributes, MutableRefObject, Ref } from "react";
import { useCloseOnOutsideClick, useEnsuredRef } from "@react-md/utils";

@@ -3,0 +3,0 @@

@@ -1,4 +0,4 @@

import { CSSProperties, ReactElement, ReactNode } from "react";
import { RenderConditionalPortalProps } from "@react-md/portal";
import { LabelRequiredForA11y } from "@react-md/utils";
import type { CSSProperties, ReactElement, ReactNode } from "react";
import type { RenderConditionalPortalProps } from "@react-md/portal";
import type { LabelRequiredForA11y } from "@react-md/utils";
import { ValidMenuItem } from "./defaultMenuItemRenderer";

@@ -5,0 +5,0 @@ import { MenuProps } from "./Menu";

import { CSSProperties } from "react";
import { RenderConditionalPortalProps } from "@react-md/portal";
import type { RenderConditionalPortalProps } from "@react-md/portal";
import { MenuItemRenderer, ValidMenuItem } from "./defaultMenuItemRenderer";

@@ -4,0 +4,0 @@ import { MenuPositionProps, MenuRenderer } from "./defaultMenuRenderer";

import { ReactNode } from "react";
import { BaseDropdownMenuProps } from "./DropdownMenu";
import type { BaseDropdownMenuProps } from "./DropdownMenu";
import { MenuItemProps } from "./MenuItem";

@@ -4,0 +4,0 @@ export interface DropdownMenuItemProps extends Omit<MenuItemProps, "id">, BaseDropdownMenuProps {

@@ -1,2 +0,2 @@

import { MutableRefObject } from "react";
import type { MutableRefObject } from "react";
export interface MenuEventsProps {

@@ -3,0 +3,0 @@ menuRef: MutableRefObject<HTMLDivElement | null>;

@@ -1,2 +0,2 @@

import { ReactElement, ReactNode } from "react";
import type { ReactElement, ReactNode } from "react";
export interface ToggleChildrenProps {

@@ -3,0 +3,0 @@ children?: ReactNode;

import { Dispatch, Ref, SetStateAction } from "react";
import { CSSTransitionClassNames } from "@react-md/transition";
import { PositionAnchor } from "@react-md/utils";
import { MenuProps } from "./Menu";
import type { MenuProps } from "./Menu";
declare type ProvidedPropNames = "id" | "anchor" | "visible" | "classNames" | "positionOptions" | "onRequestClose" | "disableControlClickOkay";

@@ -6,0 +6,0 @@ export interface ProvidedContextMenuProps extends Required<Pick<MenuProps, ProvidedPropNames>> {

@@ -1,2 +0,2 @@

import { HTMLAttributes, MutableRefObject, Ref } from "react";
import type { HTMLAttributes, MutableRefObject, Ref } from "react";
export interface MenuOptions {

@@ -3,0 +3,0 @@ /**

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc