New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@yamada-ui/menu

Package Overview
Dependencies
Maintainers
1
Versions
1191
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@yamada-ui/menu - npm Package Compare versions

Comparing version 0.2.10 to 0.2.11

dist/chunk-3RUBEAMY.mjs
dist/chunk-C6C2WO75.mjs
dist/chunk-DB6N4OUS.mjs
dist/chunk-PLWLG3PU.mjs
dist/chunk-PVB36WH4.mjs
dist/chunk-QBVCLEL4.mjs
dist/chunk-WXTXC73G.mjs

208

dist/index.js

@@ -66,6 +66,8 @@ "use strict";

const onFocusMenu = (0, import_react.useCallback)(() => {
requestAnimationFrame(() => {
var _a;
return (_a = menuRef.current) == null ? void 0 : _a.focus({ preventScroll: false });
});
requestAnimationFrame(
() => {
var _a;
return (_a = menuRef.current) == null ? void 0 : _a.focus({ preventScroll: false });
}
);
}, []);

@@ -97,3 +99,6 @@ const onFocusFirstItem = (0, import_react.useCallback)(() => {

}, [onFocusMenu, rest]);
const { isOpen, onOpen, onClose } = (0, import_use_disclosure.useDisclosure)({ ...props, onOpen: onOpenInternal });
const { isOpen, onOpen, onClose } = (0, import_use_disclosure.useDisclosure)({
...props,
onOpen: onOpenInternal
});
(0, import_utils.useUpdateEffect)(() => {

@@ -199,57 +204,59 @@ if (!isOpen)

var import_jsx_runtime3 = require("react/jsx-runtime");
var MenuList = (0, import_core3.forwardRef)(({ className, ...rest }, ref) => {
const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } = useMenu();
const descendants = useMenuDescendantsContext();
const onNext = (0, import_react3.useCallback)(() => {
const next = descendants.enabledNextValue(focusedIndex);
if (next)
setFocusedIndex(next.index);
}, [descendants, focusedIndex, setFocusedIndex]);
const onPrev = (0, import_react3.useCallback)(() => {
const prev = descendants.enabledPrevValue(focusedIndex);
if (prev)
setFocusedIndex(prev.index);
}, [descendants, focusedIndex, setFocusedIndex]);
const onFirst = (0, import_react3.useCallback)(() => {
const first = descendants.enabledfirstValue();
if (first)
setFocusedIndex(first.index);
}, [descendants, setFocusedIndex]);
const onLast = (0, import_react3.useCallback)(() => {
const last = descendants.enabledlastValue();
if (last)
setFocusedIndex(last.index);
}, [descendants, setFocusedIndex]);
const onKeyDown = (0, import_react3.useCallback)(
(ev) => {
const actions = {
Tab: (ev2) => ev2.preventDefault(),
Escape: onClose,
ArrowDown: focusedIndex === -1 ? onFirst : onNext,
ArrowUp: focusedIndex === -1 ? onLast : onPrev,
Home: onFirst,
End: onLast
};
const action = actions[ev.key];
if (!action)
return;
ev.preventDefault();
action(ev);
},
[focusedIndex, onClose, onFirst, onLast, onNext, onPrev]
);
const css = { ...styles.list };
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_popover3.PopoverContent,
{
ref: (0, import_utils3.mergeRefs)(menuRef, ref),
className: (0, import_utils3.cx)("ui-menu-list", className),
role: "menu",
tabIndex: -1,
__css: css,
...rest,
onKeyDown: (0, import_utils3.handlerAll)(rest.onKeyDown, onKeyDown)
}
);
});
var MenuList = (0, import_core3.forwardRef)(
({ className, ...rest }, ref) => {
const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } = useMenu();
const descendants = useMenuDescendantsContext();
const onNext = (0, import_react3.useCallback)(() => {
const next = descendants.enabledNextValue(focusedIndex);
if (next)
setFocusedIndex(next.index);
}, [descendants, focusedIndex, setFocusedIndex]);
const onPrev = (0, import_react3.useCallback)(() => {
const prev = descendants.enabledPrevValue(focusedIndex);
if (prev)
setFocusedIndex(prev.index);
}, [descendants, focusedIndex, setFocusedIndex]);
const onFirst = (0, import_react3.useCallback)(() => {
const first = descendants.enabledfirstValue();
if (first)
setFocusedIndex(first.index);
}, [descendants, setFocusedIndex]);
const onLast = (0, import_react3.useCallback)(() => {
const last = descendants.enabledlastValue();
if (last)
setFocusedIndex(last.index);
}, [descendants, setFocusedIndex]);
const onKeyDown = (0, import_react3.useCallback)(
(ev) => {
const actions = {
Tab: (ev2) => ev2.preventDefault(),
Escape: onClose,
ArrowDown: focusedIndex === -1 ? onFirst : onNext,
ArrowUp: focusedIndex === -1 ? onLast : onPrev,
Home: onFirst,
End: onLast
};
const action = actions[ev.key];
if (!action)
return;
ev.preventDefault();
action(ev);
},
[focusedIndex, onClose, onFirst, onLast, onNext, onPrev]
);
const css = { ...styles.list };
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_popover3.PopoverContent,
{
ref: (0, import_utils3.mergeRefs)(menuRef, ref),
className: (0, import_utils3.cx)("ui-menu-list", className),
role: "menu",
tabIndex: -1,
__css: css,
...rest,
onKeyDown: (0, import_utils3.handlerAll)(rest.onKeyDown, onKeyDown)
}
);
}
);

@@ -383,19 +390,39 @@ // src/menu-item.tsx

);
var MenuIcon = (0, import_core4.forwardRef)(({ className, ...rest }, ref) => {
const { styles } = useMenu();
const css = {
flexShrink: 0,
display: "inline-flex",
justifyContent: "center",
alignItems: "center",
fontSize: "0.85em",
...styles.icon
};
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.span, { ref, className: (0, import_utils4.cx)("ui-menu-icon", className), __css: css, ...rest });
});
var MenuCommand = (0, import_core4.forwardRef)(({ className, ...rest }, ref) => {
const { styles } = useMenu();
const css = { ...styles.command };
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.span, { ref, className: (0, import_utils4.cx)("ui-menu-command", className), __css: css, ...rest });
});
var MenuIcon = (0, import_core4.forwardRef)(
({ className, ...rest }, ref) => {
const { styles } = useMenu();
const css = {
flexShrink: 0,
display: "inline-flex",
justifyContent: "center",
alignItems: "center",
fontSize: "0.85em",
...styles.icon
};
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_core4.ui.span,
{
ref,
className: (0, import_utils4.cx)("ui-menu-icon", className),
__css: css,
...rest
}
);
}
);
var MenuCommand = (0, import_core4.forwardRef)(
({ className, ...rest }, ref) => {
const { styles } = useMenu();
const css = { ...styles.command };
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_core4.ui.span,
{
ref,
className: (0, import_utils4.cx)("ui-menu-command", className),
__css: css,
...rest
}
);
}
);
var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(

@@ -426,3 +453,10 @@ "polygon",

children: [
title ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.span, { className: (0, import_utils5.cx)("ui-menu-group-title"), __css: styles.groupTitle, children: title }) : null,
title ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
import_core5.ui.span,
{
className: (0, import_utils5.cx)("ui-menu-group-title"),
__css: styles.groupTitle,
children: title
}
) : null,
children

@@ -441,3 +475,9 @@ ]

var MenuOptionGroup = (0, import_react5.forwardRef)(
({ className, defaultValue, type, children, ...rest }, ref) => {
({
className,
defaultValue,
type,
children,
...rest
}, ref) => {
const isRadio = type === "radio";

@@ -492,3 +532,11 @@ defaultValue = isRadio ? "" : [];

const css = { ...styles.divider };
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.ui.hr, { ref, className: (0, import_utils7.cx)("ui-menu-divider", className), __css: css, ...rest });
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
import_core6.ui.hr,
{
ref,
className: (0, import_utils7.cx)("ui-menu-divider", className),
__css: css,
...rest
}
);
});

@@ -495,0 +543,0 @@ // Annotate the CommonJS export names for ESM import in node:

10

dist/menu-divider.js

@@ -53,3 +53,11 @@ "use strict";

const css = { ...styles.divider };
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.hr, { ref, className: (0, import_utils2.cx)("ui-menu-divider", className), __css: css, ...rest });
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.hr,
{
ref,
className: (0, import_utils2.cx)("ui-menu-divider", className),
__css: css,
...rest
}
);
});

@@ -56,0 +64,0 @@ // Annotate the CommonJS export names for ESM import in node:

9

dist/menu-group.js

@@ -63,3 +63,10 @@ "use strict";

children: [
title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { className: (0, import_utils2.cx)("ui-menu-group-title"), __css: styles.groupTitle, children: title }) : null,
title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.span,
{
className: (0, import_utils2.cx)("ui-menu-group-title"),
__css: styles.groupTitle,
children: title
}
) : null,
children

@@ -66,0 +73,0 @@ ]

54

dist/menu-item.js

@@ -174,19 +174,39 @@ "use strict";

);
var MenuIcon = (0, import_core2.forwardRef)(({ className, ...rest }, ref) => {
const { styles } = useMenu();
const css = {
flexShrink: 0,
display: "inline-flex",
justifyContent: "center",
alignItems: "center",
fontSize: "0.85em",
...styles.icon
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { ref, className: (0, import_utils2.cx)("ui-menu-icon", className), __css: css, ...rest });
});
var MenuCommand = (0, import_core2.forwardRef)(({ className, ...rest }, ref) => {
const { styles } = useMenu();
const css = { ...styles.command };
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { ref, className: (0, import_utils2.cx)("ui-menu-command", className), __css: css, ...rest });
});
var MenuIcon = (0, import_core2.forwardRef)(
({ className, ...rest }, ref) => {
const { styles } = useMenu();
const css = {
flexShrink: 0,
display: "inline-flex",
justifyContent: "center",
alignItems: "center",
fontSize: "0.85em",
...styles.icon
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.span,
{
ref,
className: (0, import_utils2.cx)("ui-menu-icon", className),
__css: css,
...rest
}
);
}
);
var MenuCommand = (0, import_core2.forwardRef)(
({ className, ...rest }, ref) => {
const { styles } = useMenu();
const css = { ...styles.command };
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.span,
{
ref,
className: (0, import_utils2.cx)("ui-menu-command", className),
__css: css,
...rest
}
);
}
);
var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(

@@ -193,0 +213,0 @@ "polygon",

112

dist/menu-list.js

@@ -52,57 +52,59 @@ "use strict";

var import_jsx_runtime2 = require("react/jsx-runtime");
var MenuList = (0, import_core2.forwardRef)(({ className, ...rest }, ref) => {
const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } = useMenu();
const descendants = useMenuDescendantsContext();
const onNext = (0, import_react2.useCallback)(() => {
const next = descendants.enabledNextValue(focusedIndex);
if (next)
setFocusedIndex(next.index);
}, [descendants, focusedIndex, setFocusedIndex]);
const onPrev = (0, import_react2.useCallback)(() => {
const prev = descendants.enabledPrevValue(focusedIndex);
if (prev)
setFocusedIndex(prev.index);
}, [descendants, focusedIndex, setFocusedIndex]);
const onFirst = (0, import_react2.useCallback)(() => {
const first = descendants.enabledfirstValue();
if (first)
setFocusedIndex(first.index);
}, [descendants, setFocusedIndex]);
const onLast = (0, import_react2.useCallback)(() => {
const last = descendants.enabledlastValue();
if (last)
setFocusedIndex(last.index);
}, [descendants, setFocusedIndex]);
const onKeyDown = (0, import_react2.useCallback)(
(ev) => {
const actions = {
Tab: (ev2) => ev2.preventDefault(),
Escape: onClose,
ArrowDown: focusedIndex === -1 ? onFirst : onNext,
ArrowUp: focusedIndex === -1 ? onLast : onPrev,
Home: onFirst,
End: onLast
};
const action = actions[ev.key];
if (!action)
return;
ev.preventDefault();
action(ev);
},
[focusedIndex, onClose, onFirst, onLast, onNext, onPrev]
);
const css = { ...styles.list };
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_popover2.PopoverContent,
{
ref: (0, import_utils2.mergeRefs)(menuRef, ref),
className: (0, import_utils2.cx)("ui-menu-list", className),
role: "menu",
tabIndex: -1,
__css: css,
...rest,
onKeyDown: (0, import_utils2.handlerAll)(rest.onKeyDown, onKeyDown)
}
);
});
var MenuList = (0, import_core2.forwardRef)(
({ className, ...rest }, ref) => {
const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } = useMenu();
const descendants = useMenuDescendantsContext();
const onNext = (0, import_react2.useCallback)(() => {
const next = descendants.enabledNextValue(focusedIndex);
if (next)
setFocusedIndex(next.index);
}, [descendants, focusedIndex, setFocusedIndex]);
const onPrev = (0, import_react2.useCallback)(() => {
const prev = descendants.enabledPrevValue(focusedIndex);
if (prev)
setFocusedIndex(prev.index);
}, [descendants, focusedIndex, setFocusedIndex]);
const onFirst = (0, import_react2.useCallback)(() => {
const first = descendants.enabledfirstValue();
if (first)
setFocusedIndex(first.index);
}, [descendants, setFocusedIndex]);
const onLast = (0, import_react2.useCallback)(() => {
const last = descendants.enabledlastValue();
if (last)
setFocusedIndex(last.index);
}, [descendants, setFocusedIndex]);
const onKeyDown = (0, import_react2.useCallback)(
(ev) => {
const actions = {
Tab: (ev2) => ev2.preventDefault(),
Escape: onClose,
ArrowDown: focusedIndex === -1 ? onFirst : onNext,
ArrowUp: focusedIndex === -1 ? onLast : onPrev,
Home: onFirst,
End: onLast
};
const action = actions[ev.key];
if (!action)
return;
ev.preventDefault();
action(ev);
},
[focusedIndex, onClose, onFirst, onLast, onNext, onPrev]
);
const css = { ...styles.list };
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_popover2.PopoverContent,
{
ref: (0, import_utils2.mergeRefs)(menuRef, ref),
className: (0, import_utils2.cx)("ui-menu-list", className),
role: "menu",
tabIndex: -1,
__css: css,
...rest,
onKeyDown: (0, import_utils2.handlerAll)(rest.onKeyDown, onKeyDown)
}
);
}
);
// Annotate the CommonJS export names for ESM import in node:

@@ -109,0 +111,0 @@ 0 && (module.exports = {

71

dist/menu-option-group.js

@@ -68,3 +68,10 @@ "use strict";

children: [
title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { className: (0, import_utils2.cx)("ui-menu-group-title"), __css: styles.groupTitle, children: title }) : null,
title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core2.ui.span,
{
className: (0, import_utils2.cx)("ui-menu-group-title"),
__css: styles.groupTitle,
children: title
}
) : null,
children

@@ -204,19 +211,39 @@ ]

);
var MenuIcon = (0, import_core3.forwardRef)(({ className, ...rest }, ref) => {
const { styles } = useMenu();
const css = {
flexShrink: 0,
display: "inline-flex",
justifyContent: "center",
alignItems: "center",
fontSize: "0.85em",
...styles.icon
};
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { ref, className: (0, import_utils3.cx)("ui-menu-icon", className), __css: css, ...rest });
});
var MenuCommand = (0, import_core3.forwardRef)(({ className, ...rest }, ref) => {
const { styles } = useMenu();
const css = { ...styles.command };
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { ref, className: (0, import_utils3.cx)("ui-menu-command", className), __css: css, ...rest });
});
var MenuIcon = (0, import_core3.forwardRef)(
({ className, ...rest }, ref) => {
const { styles } = useMenu();
const css = {
flexShrink: 0,
display: "inline-flex",
justifyContent: "center",
alignItems: "center",
fontSize: "0.85em",
...styles.icon
};
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_core3.ui.span,
{
ref,
className: (0, import_utils3.cx)("ui-menu-icon", className),
__css: css,
...rest
}
);
}
);
var MenuCommand = (0, import_core3.forwardRef)(
({ className, ...rest }, ref) => {
const { styles } = useMenu();
const css = { ...styles.command };
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_core3.ui.span,
{
ref,
className: (0, import_utils3.cx)("ui-menu-command", className),
__css: css,
...rest
}
);
}
);
var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(

@@ -233,3 +260,9 @@ "polygon",

var MenuOptionGroup = (0, import_react3.forwardRef)(
({ className, defaultValue, type, children, ...rest }, ref) => {
({
className,
defaultValue,
type,
children,
...rest
}, ref) => {
const isRadio = type === "radio";

@@ -236,0 +269,0 @@ defaultValue = isRadio ? "" : [];

15

dist/menu.js

@@ -60,6 +60,8 @@ "use strict";

const onFocusMenu = (0, import_react.useCallback)(() => {
requestAnimationFrame(() => {
var _a;
return (_a = menuRef.current) == null ? void 0 : _a.focus({ preventScroll: false });
});
requestAnimationFrame(
() => {
var _a;
return (_a = menuRef.current) == null ? void 0 : _a.focus({ preventScroll: false });
}
);
}, []);

@@ -91,3 +93,6 @@ const onFocusFirstItem = (0, import_react.useCallback)(() => {

}, [onFocusMenu, rest]);
const { isOpen, onOpen, onClose } = (0, import_use_disclosure.useDisclosure)({ ...props, onOpen: onOpenInternal });
const { isOpen, onOpen, onClose } = (0, import_use_disclosure.useDisclosure)({
...props,
onOpen: onOpenInternal
});
(0, import_utils.useUpdateEffect)(() => {

@@ -94,0 +99,0 @@ if (!isOpen)

18

package.json
{
"name": "@yamada-ui/menu",
"version": "0.2.10",
"version": "0.2.11",
"description": "Yamada UI menu component",

@@ -38,10 +38,10 @@ "keywords": [

"dependencies": {
"@yamada-ui/core": "0.5.1",
"@yamada-ui/utils": "0.1.3",
"@yamada-ui/popover": "0.2.9",
"@yamada-ui/transitions": "0.2.7",
"@yamada-ui/use-disclosure": "0.2.4",
"@yamada-ui/use-descendant": "0.1.4",
"@yamada-ui/use-clickable": "0.2.2",
"@yamada-ui/use-controllable-state": "0.1.4"
"@yamada-ui/core": "0.5.2",
"@yamada-ui/utils": "0.1.4",
"@yamada-ui/popover": "0.2.10",
"@yamada-ui/transitions": "0.2.8",
"@yamada-ui/use-disclosure": "0.2.5",
"@yamada-ui/use-descendant": "0.1.5",
"@yamada-ui/use-clickable": "0.2.3",
"@yamada-ui/use-controllable-state": "0.1.5"
},

@@ -48,0 +48,0 @@ "devDependencies": {

dist/chunk-3IEZAEQF.mjs
dist/chunk-47P6GKNZ.mjs
dist/chunk-6IUWMOKW.mjs
dist/chunk-7YDTXOPR.mjs
dist/chunk-CSEIVNH6.mjs
dist/chunk-W3C6GCGE.mjs
dist/chunk-YDLVWG5I.mjs
dist/index.mjs

Sorry, the diff of this file is not supported yet

dist/menu-button.mjs

Sorry, the diff of this file is not supported yet

dist/menu-divider.mjs

Sorry, the diff of this file is not supported yet

dist/menu-group.mjs

Sorry, the diff of this file is not supported yet

dist/menu-item.mjs

Sorry, the diff of this file is not supported yet

dist/menu-list.mjs

Sorry, the diff of this file is not supported yet

dist/menu-option-group.mjs

Sorry, the diff of this file is not supported yet

dist/menu.mjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc