@yamada-ui/menu 1.3.15-next-20241005220055 → 1.3.15-next-20241008193728

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/dist/{chunk-SI3WI4AI.mjs → chunk-2A6VOJ6F.mjs} +8 -8
  2. package/dist/chunk-2A6VOJ6F.mjs.map +1 -0
  3. package/dist/{chunk-ZUOFHOX6.mjs → chunk-EJHOFPF4.mjs} +11 -11
  4. package/dist/chunk-EJHOFPF4.mjs.map +1 -0
  5. package/dist/{chunk-ZV73JKM5.mjs → chunk-ELQD4RMJ.mjs} +4 -4
  6. package/dist/{chunk-ZV73JKM5.mjs.map → chunk-ELQD4RMJ.mjs.map} +1 -1
  7. package/dist/{chunk-NNSVX2GX.mjs → chunk-I2KIZ6OI.mjs} +28 -28
  8. package/dist/{chunk-NNSVX2GX.mjs.map → chunk-I2KIZ6OI.mjs.map} +1 -1
  9. package/dist/{chunk-O5D4LR5P.mjs → chunk-I473RINV.mjs} +8 -8
  10. package/dist/{chunk-O5D4LR5P.mjs.map → chunk-I473RINV.mjs.map} +1 -1
  11. package/dist/{chunk-OFCEMPQW.mjs → chunk-KZAACFSL.mjs} +3 -3
  12. package/dist/{chunk-OFCEMPQW.mjs.map → chunk-KZAACFSL.mjs.map} +1 -1
  13. package/dist/{chunk-M4PPRRRC.mjs → chunk-M4GWQFUC.mjs} +14 -14
  14. package/dist/chunk-M4GWQFUC.mjs.map +1 -0
  15. package/dist/{chunk-HVOHR2NQ.mjs → chunk-O7MHNHWF.mjs} +4 -4
  16. package/dist/{chunk-HVOHR2NQ.mjs.map → chunk-O7MHNHWF.mjs.map} +1 -1
  17. package/dist/{chunk-WQ626PSA.mjs → chunk-T4SSYCLG.mjs} +9 -8
  18. package/dist/chunk-T4SSYCLG.mjs.map +1 -0
  19. package/dist/{chunk-T7CXLEBW.mjs → chunk-W36CPKTN.mjs} +34 -34
  20. package/dist/chunk-W36CPKTN.mjs.map +1 -0
  21. package/dist/context-menu-trigger.js +14 -13
  22. package/dist/context-menu-trigger.js.map +1 -1
  23. package/dist/context-menu-trigger.mjs +2 -2
  24. package/dist/context-menu.js +33 -33
  25. package/dist/context-menu.js.map +1 -1
  26. package/dist/context-menu.mjs +3 -3
  27. package/dist/index.d.mts +6 -6
  28. package/dist/index.d.ts +6 -6
  29. package/dist/index.js +275 -272
  30. package/dist/index.js.map +1 -1
  31. package/dist/index.mjs +10 -10
  32. package/dist/menu-button.d.mts +2 -2
  33. package/dist/menu-button.d.ts +2 -2
  34. package/dist/menu-button.js +49 -49
  35. package/dist/menu-button.js.map +1 -1
  36. package/dist/menu-button.mjs +3 -3
  37. package/dist/menu-context.d.mts +116 -116
  38. package/dist/menu-context.d.ts +116 -116
  39. package/dist/menu-context.js +8 -8
  40. package/dist/menu-context.js.map +1 -1
  41. package/dist/menu-context.mjs +1 -1
  42. package/dist/menu-divider.js +8 -8
  43. package/dist/menu-divider.js.map +1 -1
  44. package/dist/menu-divider.mjs +2 -2
  45. package/dist/menu-group.js +9 -9
  46. package/dist/menu-group.js.map +1 -1
  47. package/dist/menu-group.mjs +2 -2
  48. package/dist/menu-item.d.mts +21 -21
  49. package/dist/menu-item.d.ts +21 -21
  50. package/dist/menu-item.js +39 -39
  51. package/dist/menu-item.js.map +1 -1
  52. package/dist/menu-item.mjs +2 -2
  53. package/dist/menu-list.js +14 -14
  54. package/dist/menu-list.js.map +1 -1
  55. package/dist/menu-list.mjs +2 -2
  56. package/dist/menu-option-group.d.mts +8 -8
  57. package/dist/menu-option-group.d.ts +8 -8
  58. package/dist/menu-option-group.js +45 -45
  59. package/dist/menu-option-group.js.map +1 -1
  60. package/dist/menu-option-group.mjs +4 -4
  61. package/dist/menu.js +33 -33
  62. package/dist/menu.js.map +1 -1
  63. package/dist/menu.mjs +2 -2
  64. package/package.json +11 -11
  65. package/dist/chunk-M4PPRRRC.mjs.map +0 -1
  66. package/dist/chunk-SI3WI4AI.mjs.map +0 -1
  67. package/dist/chunk-T7CXLEBW.mjs.map +0 -1
  68. package/dist/chunk-WQ626PSA.mjs.map +0 -1
  69. package/dist/chunk-ZUOFHOX6.mjs.map +0 -1
@@ -3,45 +3,45 @@ import { HTMLUIProps } from '@yamada-ui/core';
3
3
  import { ReactElement } from 'react';
4
4
 
5
5
  interface MenuItemOptions {
6
- /**
7
- * If `true`, the menu item will be disabled.
8
- *
9
- * @default false
10
- */
11
- isDisabled?: boolean;
12
- /**
13
- * If `true`, the menu item will be focusable.
14
- *
15
- * @default false
16
- */
17
- isFocusable?: boolean;
18
6
  /**
19
7
  * If `true`, the list element will be closed when selected.
20
8
  *
21
9
  * @default false
22
10
  */
23
11
  closeOnSelect?: boolean;
12
+ /**
13
+ * Right-aligned label text content, useful for displaying hotkeys.
14
+ */
15
+ command?: string;
24
16
  /**
25
17
  * The menu item icon to use.
26
18
  */
27
19
  icon?: ReactElement;
28
20
  /**
29
- * Right-aligned label text content, useful for displaying hotkeys.
21
+ * If `true`, the menu item will be disabled.
22
+ *
23
+ * @default false
30
24
  */
31
- command?: string;
25
+ isDisabled?: boolean;
26
+ /**
27
+ * If `true`, the menu item will be focusable.
28
+ *
29
+ * @default false
30
+ */
31
+ isFocusable?: boolean;
32
32
  }
33
33
  interface MenuItemProps extends HTMLUIProps<"li">, MenuItemOptions {
34
34
  }
35
35
  declare const MenuItem: _yamada_ui_core.Component<"li", MenuItemProps>;
36
36
  interface MenuOptionItemOptions {
37
37
  /**
38
- * The menu option item icon to use.
38
+ * The type of the menu option item.
39
39
  */
40
- icon?: ReactElement | null;
40
+ type?: "checkbox" | "radio";
41
41
  /**
42
- * The value of the menu option item.
42
+ * The menu option item icon to use.
43
43
  */
44
- value?: string;
44
+ icon?: null | ReactElement;
45
45
  /**
46
46
  * If `true`, the checkbox or radio will be checked.
47
47
  *
@@ -49,11 +49,11 @@ interface MenuOptionItemOptions {
49
49
  */
50
50
  isChecked?: boolean;
51
51
  /**
52
- * The type of the menu option item.
52
+ * The value of the menu option item.
53
53
  */
54
- type?: "radio" | "checkbox";
54
+ value?: string;
55
55
  }
56
- interface MenuOptionItemProps extends Omit<MenuItemProps, "icon" | "command" | "value">, MenuOptionItemOptions {
56
+ interface MenuOptionItemProps extends Omit<MenuItemProps, "command" | "icon" | "value">, MenuOptionItemOptions {
57
57
  }
58
58
  declare const MenuOptionItem: _yamada_ui_core.Component<"button", MenuOptionItemProps>;
59
59
  interface MenuIconProps extends HTMLUIProps<"span"> {
@@ -3,45 +3,45 @@ import { HTMLUIProps } from '@yamada-ui/core';
3
3
  import { ReactElement } from 'react';
4
4
 
5
5
  interface MenuItemOptions {
6
- /**
7
- * If `true`, the menu item will be disabled.
8
- *
9
- * @default false
10
- */
11
- isDisabled?: boolean;
12
- /**
13
- * If `true`, the menu item will be focusable.
14
- *
15
- * @default false
16
- */
17
- isFocusable?: boolean;
18
6
  /**
19
7
  * If `true`, the list element will be closed when selected.
20
8
  *
21
9
  * @default false
22
10
  */
23
11
  closeOnSelect?: boolean;
12
+ /**
13
+ * Right-aligned label text content, useful for displaying hotkeys.
14
+ */
15
+ command?: string;
24
16
  /**
25
17
  * The menu item icon to use.
26
18
  */
27
19
  icon?: ReactElement;
28
20
  /**
29
- * Right-aligned label text content, useful for displaying hotkeys.
21
+ * If `true`, the menu item will be disabled.
22
+ *
23
+ * @default false
30
24
  */
31
- command?: string;
25
+ isDisabled?: boolean;
26
+ /**
27
+ * If `true`, the menu item will be focusable.
28
+ *
29
+ * @default false
30
+ */
31
+ isFocusable?: boolean;
32
32
  }
33
33
  interface MenuItemProps extends HTMLUIProps<"li">, MenuItemOptions {
34
34
  }
35
35
  declare const MenuItem: _yamada_ui_core.Component<"li", MenuItemProps>;
36
36
  interface MenuOptionItemOptions {
37
37
  /**
38
- * The menu option item icon to use.
38
+ * The type of the menu option item.
39
39
  */
40
- icon?: ReactElement | null;
40
+ type?: "checkbox" | "radio";
41
41
  /**
42
- * The value of the menu option item.
42
+ * The menu option item icon to use.
43
43
  */
44
- value?: string;
44
+ icon?: null | ReactElement;
45
45
  /**
46
46
  * If `true`, the checkbox or radio will be checked.
47
47
  *
@@ -49,11 +49,11 @@ interface MenuOptionItemOptions {
49
49
  */
50
50
  isChecked?: boolean;
51
51
  /**
52
- * The type of the menu option item.
52
+ * The value of the menu option item.
53
53
  */
54
- type?: "radio" | "checkbox";
54
+ value?: string;
55
55
  }
56
- interface MenuOptionItemProps extends Omit<MenuItemProps, "icon" | "command" | "value">, MenuOptionItemOptions {
56
+ interface MenuOptionItemProps extends Omit<MenuItemProps, "command" | "icon" | "value">, MenuOptionItemOptions {
57
57
  }
58
58
  declare const MenuOptionItem: _yamada_ui_core.Component<"button", MenuOptionItemProps>;
59
59
  interface MenuIconProps extends HTMLUIProps<"span"> {
package/dist/menu-item.js CHANGED
@@ -37,56 +37,56 @@ var import_use_descendant = require("@yamada-ui/use-descendant");
37
37
  var import_utils = require("@yamada-ui/utils");
38
38
  var {
39
39
  DescendantsContextProvider,
40
- useDescendantsContext: useMenuDescendantsContext,
40
+ useDescendant: useMenuDescendant,
41
41
  useDescendants,
42
- useDescendant: useMenuDescendant
42
+ useDescendantsContext: useMenuDescendantsContext
43
43
  } = (0, import_use_descendant.createDescendant)();
44
44
  var [MenuProvider, useMenu] = (0, import_utils.createContext)({
45
45
  name: "MenuContext",
46
46
  errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
47
47
  });
48
48
  var [ContextMenuProvider, useContextMenu] = (0, import_utils.createContext)({
49
- strict: false,
50
- name: "ContextMenuContext"
49
+ name: "ContextMenuContext",
50
+ strict: false
51
51
  });
52
52
  var [UpstreamMenuProvider, useUpstreamMenu] = (0, import_utils.createContext)({
53
- strict: false,
54
- name: "UpstreamMenuContext"
53
+ name: "UpstreamMenuContext",
54
+ strict: false
55
55
  });
56
56
  var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils.createContext)({
57
- strict: false,
58
- name: "UpstreamMenuItemContext"
57
+ name: "UpstreamMenuItemContext",
58
+ strict: false
59
59
  });
60
60
 
61
61
  // src/menu-item.tsx
62
62
  var import_jsx_runtime = require("react/jsx-runtime");
63
63
  var isTargetMenuItem = (target) => {
64
64
  var _a;
65
- return (0, import_utils2.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menuitem"));
65
+ return (0, import_utils2.isHTMLElement)(target) && !!((_a = target.getAttribute("role")) == null ? void 0 : _a.startsWith("menuitem"));
66
66
  };
67
67
  var MenuItem = (0, import_core.forwardRef)(
68
68
  ({
69
69
  className,
70
- isDisabled,
71
- isFocusable,
70
+ children,
72
71
  closeOnSelect: customCloseOnSelect,
73
- icon,
74
72
  command,
75
- children,
73
+ icon,
74
+ isDisabled,
75
+ isFocusable,
76
76
  ...props
77
77
  }, ref) => {
78
78
  var _a;
79
79
  const {
80
+ closeOnSelect: generalCloseOnSelect,
80
81
  focusedIndex,
81
- setFocusedIndex,
82
+ isNested,
82
83
  isOpen,
83
- onClose,
84
- onUpstreamClose,
85
- closeOnSelect: generalCloseOnSelect,
86
84
  menuRef,
87
85
  requestAnimationFrameId,
88
- isNested,
89
- styles
86
+ setFocusedIndex,
87
+ styles,
88
+ onClose,
89
+ onUpstreamClose
90
90
  } = useMenu();
91
91
  const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
92
92
  const trulyDisabled = isDisabled && !isFocusable;
@@ -141,14 +141,14 @@ var MenuItem = (0, import_core.forwardRef)(
141
141
  const rest = (0, import_use_clickable.useClickable)({
142
142
  focusOnClick: false,
143
143
  ...props,
144
+ ref: (0, import_utils2.mergeRefs)(register, itemRef, ref),
145
+ isDisabled,
146
+ isFocusable,
144
147
  onClick: (0, import_utils2.handlerAll)(props.onClick, onClick),
145
148
  onFocus: (0, import_utils2.handlerAll)(props.onFocus, onFocus),
146
- onMouseOver: (0, import_utils2.handlerAll)(props.onMouseOver, onMouseOver),
147
- onMouseLeave: (0, import_utils2.handlerAll)(props.onMouseLeave, onMouseLeave),
148
149
  onKeyDown: (0, import_utils2.handlerAll)(props.onKeyDown, onKeyDown, onKeyDownRef.current),
149
- ref: (0, import_utils2.mergeRefs)(register, itemRef, ref),
150
- isDisabled,
151
- isFocusable
150
+ onMouseLeave: (0, import_utils2.handlerAll)(props.onMouseLeave, onMouseLeave),
151
+ onMouseOver: (0, import_utils2.handlerAll)(props.onMouseOver, onMouseOver)
152
152
  });
153
153
  (0, import_utils2.useUpdateEffect)(() => {
154
154
  if (!isOpen) return;
@@ -169,35 +169,35 @@ var MenuItem = (0, import_core.forwardRef)(
169
169
  }, [isFocused, trulyDisabled, menuRef, isOpen]);
170
170
  children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { style: { flex: 1 }, children }) : children;
171
171
  const css = {
172
- textDecoration: "none",
172
+ alignItems: "center",
173
173
  color: "inherit",
174
- userSelect: "none",
175
174
  display: "flex",
176
- width: "100%",
177
- alignItems: "center",
178
- textAlign: "start",
179
175
  flex: "0 0 auto",
180
- outline: 0,
181
176
  gap: "0.75rem",
177
+ outline: 0,
178
+ textAlign: "start",
179
+ textDecoration: "none",
180
+ userSelect: "none",
181
+ width: "100%",
182
182
  ...styles.item
183
183
  };
184
184
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
185
185
  UpstreamMenuItemProvider,
186
186
  {
187
187
  value: {
188
- onKeyDownRef,
189
- onUpstreamRestoreFocus: onRestoreFocus,
188
+ hasDownstreamRef,
190
189
  setDownstreamOpen,
191
- hasDownstreamRef
190
+ onKeyDownRef,
191
+ onUpstreamRestoreFocus: onRestoreFocus
192
192
  },
193
193
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
194
194
  import_core.ui.li,
195
195
  {
196
196
  ...rest,
197
197
  ...isDownstreamOpen ? { "data-active": "" } : {},
198
+ className: (0, import_utils2.cx)("ui-menu__item", className),
198
199
  role: "menuitem",
199
200
  tabIndex: isFocused ? 0 : -1,
200
- className: (0, import_utils2.cx)("ui-menu__item", className),
201
201
  __css: css,
202
202
  children: [
203
203
  icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuIcon, { children: icon }) : null,
@@ -211,7 +211,7 @@ var MenuItem = (0, import_core.forwardRef)(
211
211
  }
212
212
  );
213
213
  var MenuOptionItem = (0, import_core.forwardRef)(
214
- ({ className, icon, isChecked, closeOnSelect = false, children, ...rest }, ref) => {
214
+ ({ className, children, closeOnSelect = false, icon, isChecked, ...rest }, ref) => {
215
215
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
216
216
  MenuItem,
217
217
  {
@@ -232,11 +232,11 @@ var MenuIcon = (0, import_core.forwardRef)(
232
232
  ({ className, ...rest }, ref) => {
233
233
  const { styles } = useMenu();
234
234
  const css = {
235
- flexShrink: 0,
236
- display: "inline-flex",
237
- justifyContent: "center",
238
235
  alignItems: "center",
236
+ display: "inline-flex",
237
+ flexShrink: 0,
239
238
  fontSize: "0.85em",
239
+ justifyContent: "center",
240
240
  ...styles.icon
241
241
  };
242
242
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -265,7 +265,7 @@ var MenuCommand = (0, import_core.forwardRef)(
265
265
  );
266
266
  }
267
267
  );
268
- var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
268
+ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { height: "1em", viewBox: "0 0 14 14", width: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
269
269
  "polygon",
270
270
  {
271
271
  fill: "currentColor",
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/menu-item.tsx","../src/menu-context.ts"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport {\n ariaAttr,\n cx,\n funcAll,\n handlerAll,\n isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type {\n FC,\n KeyboardEvent,\n KeyboardEventHandler,\n MouseEvent,\n ReactElement,\n} from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\nimport {\n useMenuDescendant,\n UpstreamMenuItemProvider,\n useMenu,\n useUpstreamMenuItem,\n} from \"./menu-context\"\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"menuitem\")\n )\n}\n\ninterface MenuItemOptions {\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * The menu item icon to use.\n */\n icon?: ReactElement\n /**\n * Right-aligned label text content, useful for displaying hotkeys.\n */\n command?: string\n}\n\nexport interface MenuItemProps extends HTMLUIProps<\"li\">, MenuItemOptions {}\n\nexport const MenuItem = forwardRef<MenuItemProps, \"li\">(\n (\n {\n className,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n icon,\n command,\n children,\n ...props\n },\n ref,\n ) => {\n const {\n focusedIndex,\n setFocusedIndex,\n isOpen,\n onClose,\n onUpstreamClose,\n closeOnSelect: generalCloseOnSelect,\n menuRef,\n requestAnimationFrameId,\n isNested,\n styles,\n } = useMenu()\n const { onUpstreamRestoreFocus } = useUpstreamMenuItem() ?? {}\n\n const trulyDisabled = isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n const hasDownstreamRef = useRef<boolean>(false)\n const onKeyDownRef = useRef<KeyboardEventHandler<HTMLLIElement>>(\n () => void 0,\n )\n const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n const [isDownstreamOpen, setDownstreamOpen] = useState<boolean>(false)\n\n const isFocused = index === focusedIndex\n\n const onMouseOver = useCallback(() => {\n if (isDisabled) return\n\n setFocusedIndex(index)\n }, [index, isDisabled, setFocusedIndex])\n\n const onMouseLeave = useCallback(() => {\n if (isDisabled) return\n\n setFocusedIndex(-1)\n }, [setFocusedIndex, isDisabled])\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\n if (!isTargetMenuItem(ev.currentTarget)) return\n\n const hasDownstream = hasDownstreamRef.current\n\n if (customCloseOnSelect ?? (!hasDownstream && generalCloseOnSelect)) {\n onClose()\n onUpstreamClose?.()\n }\n },\n [customCloseOnSelect, generalCloseOnSelect, onClose, onUpstreamClose],\n )\n\n const onFocus = useCallback(() => {\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onRestoreFocus = useCallback(() => {\n itemRef.current?.focus()\n\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLLIElement>) => {\n const actions: { [key: string]: Function | undefined } = {\n ArrowLeft: isNested\n ? funcAll(onUpstreamRestoreFocus, onClose)\n : undefined,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n ev.stopPropagation()\n\n action()\n },\n [onUpstreamRestoreFocus, onClose, isNested],\n )\n\n const rest = useClickable<HTMLLIElement>({\n focusOnClick: false,\n ...props,\n onClick: handlerAll(props.onClick, onClick),\n onFocus: handlerAll(props.onFocus, onFocus),\n onMouseOver: handlerAll(props.onMouseOver, onMouseOver),\n onMouseLeave: handlerAll(props.onMouseLeave, onMouseLeave),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown, onKeyDownRef.current),\n ref: mergeRefs(register, itemRef, ref),\n isDisabled,\n isFocusable,\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n const id = requestAnimationFrameId.current\n\n if (isFocused && !trulyDisabled && itemRef.current) {\n if (id) cancelAnimationFrame(id)\n\n requestAnimationFrameId.current = requestAnimationFrame(() => {\n itemRef.current?.focus({ preventScroll: true })\n\n requestAnimationFrameId.current = null\n })\n } else if (menuRef.current && !isActiveElement(menuRef.current)) {\n menuRef.current.focus({ preventScroll: true })\n }\n\n return () => {\n if (id) cancelAnimationFrame(id)\n }\n }, [isFocused, trulyDisabled, menuRef, isOpen])\n\n children =\n icon || command ? (\n <ui.span style={{ flex: 1 }}>{children}</ui.span>\n ) : (\n children\n )\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n ...styles.item,\n }\n\n return (\n <UpstreamMenuItemProvider\n value={{\n onKeyDownRef,\n onUpstreamRestoreFocus: onRestoreFocus,\n setDownstreamOpen,\n hasDownstreamRef,\n }}\n >\n <ui.li\n {...rest}\n {...(isDownstreamOpen ? { \"data-active\": \"\" } : {})}\n role=\"menuitem\"\n tabIndex={isFocused ? 0 : -1}\n className={cx(\"ui-menu__item\", className)}\n __css={css}\n >\n {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n {children}\n {command ? <MenuCommand>{command}</MenuCommand> : null}\n </ui.li>\n </UpstreamMenuItemProvider>\n )\n },\n)\n\ninterface MenuOptionItemOptions {\n /**\n * The menu option item icon to use.\n */\n icon?: ReactElement | null\n /**\n * The value of the menu option item.\n */\n value?: string\n /**\n * If `true`, the checkbox or radio will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * The type of the menu option item.\n */\n type?: \"radio\" | \"checkbox\"\n}\n\nexport interface MenuOptionItemProps\n extends Omit<MenuItemProps, \"icon\" | \"command\" | \"value\">,\n MenuOptionItemOptions {}\n\nexport const MenuOptionItem = forwardRef<MenuOptionItemProps, \"button\">(\n (\n { className, icon, isChecked, closeOnSelect = false, children, ...rest },\n ref,\n ) => {\n return (\n <MenuItem\n ref={ref}\n className={cx(\"ui-menu__item--option\", className)}\n aria-checked={ariaAttr(isChecked)}\n closeOnSelect={closeOnSelect}\n {...rest}\n >\n {icon !== null ? (\n <MenuIcon opacity={isChecked ? 1 : 0}>\n {icon || <CheckIcon />}\n </MenuIcon>\n ) : null}\n {children}\n </MenuItem>\n )\n },\n)\n\nexport interface MenuIconProps extends HTMLUIProps<\"span\"> {}\n\nexport const MenuIcon = forwardRef<MenuIconProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = {\n flexShrink: 0,\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontSize: \"0.85em\",\n ...styles.icon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-menu__item__icon\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nexport interface MenuCommandProps extends HTMLUIProps<\"span\"> {}\n\nexport const MenuCommand = forwardRef<MenuCommandProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.command }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-menu__item__command\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nconst CheckIcon: FC = () => (\n <svg viewBox=\"0 0 14 14\" width=\"1em\" height=\"1em\">\n <polygon\n fill=\"currentColor\"\n points=\"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039\"\n />\n </svg>\n)\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type {\n Dispatch,\n KeyboardEventHandler,\n MutableRefObject,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport type { MenuOptions } from \"./menu\"\n\nexport const {\n DescendantsContextProvider,\n useDescendantsContext: useMenuDescendantsContext,\n useDescendants,\n useDescendant: useMenuDescendant,\n} = createDescendant()\n\ninterface MenuContext extends MenuOptions {\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onUpstreamClose?: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n menuRef: RefObject<HTMLDivElement>\n requestAnimationFrameId: MutableRefObject<number | null>\n isNested: boolean\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\ninterface ContextMenuContext {\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [ContextMenuProvider, useContextMenu] =\n createContext<ContextMenuContext>({\n strict: false,\n name: \"ContextMenuContext\",\n })\n\ninterface UpstreamMenuContext {\n relatedRef: RefObject<HTMLElement>\n onDownstreamCloseMapRef: MutableRefObject<Map<string, () => void>>\n onUpstreamClose: () => void\n}\n\nexport const [UpstreamMenuProvider, useUpstreamMenu] =\n createContext<UpstreamMenuContext>({\n strict: false,\n name: \"UpstreamMenuContext\",\n })\n\ninterface UpstreamMenuItemContext {\n onUpstreamRestoreFocus: () => void\n onKeyDownRef: RefObject<KeyboardEventHandler<HTMLLIElement>>\n setDownstreamOpen: Dispatch<SetStateAction<boolean>>\n hasDownstreamRef: MutableRefObject<boolean>\n}\n\nexport const [UpstreamMenuItemProvider, useUpstreamMenuItem] =\n createContext<UpstreamMenuItemContext>({\n strict: false,\n name: \"UpstreamMenuItemContext\",\n })\n"],"mappings":"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","names":["import_utils","_a"]}
1
+ {"version":3,"sources":["../src/menu-item.tsx","../src/menu-context.ts"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type {\n FC,\n KeyboardEvent,\n KeyboardEventHandler,\n MouseEvent,\n ReactElement,\n} from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport {\n ariaAttr,\n cx,\n funcAll,\n handlerAll,\n isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useRef, useState } from \"react\"\nimport {\n UpstreamMenuItemProvider,\n useMenu,\n useMenuDescendant,\n useUpstreamMenuItem,\n} from \"./menu-context\"\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target.getAttribute(\"role\")?.startsWith(\"menuitem\")\n )\n}\n\ninterface MenuItemOptions {\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * Right-aligned label text content, useful for displaying hotkeys.\n */\n command?: string\n /**\n * The menu item icon to use.\n */\n icon?: ReactElement\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n}\n\nexport interface MenuItemProps extends HTMLUIProps<\"li\">, MenuItemOptions {}\n\nexport const MenuItem = forwardRef<MenuItemProps, \"li\">(\n (\n {\n className,\n children,\n closeOnSelect: customCloseOnSelect,\n command,\n icon,\n isDisabled,\n isFocusable,\n ...props\n },\n ref,\n ) => {\n const {\n closeOnSelect: generalCloseOnSelect,\n focusedIndex,\n isNested,\n isOpen,\n menuRef,\n requestAnimationFrameId,\n setFocusedIndex,\n styles,\n onClose,\n onUpstreamClose,\n } = useMenu()\n const { onUpstreamRestoreFocus } = useUpstreamMenuItem() ?? {}\n\n const trulyDisabled = isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n const hasDownstreamRef = useRef<boolean>(false)\n const onKeyDownRef = useRef<KeyboardEventHandler<HTMLLIElement>>(\n () => void 0,\n )\n const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n const [isDownstreamOpen, setDownstreamOpen] = useState<boolean>(false)\n\n const isFocused = index === focusedIndex\n\n const onMouseOver = useCallback(() => {\n if (isDisabled) return\n\n setFocusedIndex(index)\n }, [index, isDisabled, setFocusedIndex])\n\n const onMouseLeave = useCallback(() => {\n if (isDisabled) return\n\n setFocusedIndex(-1)\n }, [setFocusedIndex, isDisabled])\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\n if (!isTargetMenuItem(ev.currentTarget)) return\n\n const hasDownstream = hasDownstreamRef.current\n\n if (customCloseOnSelect ?? (!hasDownstream && generalCloseOnSelect)) {\n onClose()\n onUpstreamClose?.()\n }\n },\n [customCloseOnSelect, generalCloseOnSelect, onClose, onUpstreamClose],\n )\n\n const onFocus = useCallback(() => {\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onRestoreFocus = useCallback(() => {\n itemRef.current?.focus()\n\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLLIElement>) => {\n const actions: { [key: string]: Function | undefined } = {\n ArrowLeft: isNested\n ? funcAll(onUpstreamRestoreFocus, onClose)\n : undefined,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n ev.stopPropagation()\n\n action()\n },\n [onUpstreamRestoreFocus, onClose, isNested],\n )\n\n const rest = useClickable<HTMLLIElement>({\n focusOnClick: false,\n ...props,\n ref: mergeRefs(register, itemRef, ref),\n isDisabled,\n isFocusable,\n onClick: handlerAll(props.onClick, onClick),\n onFocus: handlerAll(props.onFocus, onFocus),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown, onKeyDownRef.current),\n onMouseLeave: handlerAll(props.onMouseLeave, onMouseLeave),\n onMouseOver: handlerAll(props.onMouseOver, onMouseOver),\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n const id = requestAnimationFrameId.current\n\n if (isFocused && !trulyDisabled && itemRef.current) {\n if (id) cancelAnimationFrame(id)\n\n requestAnimationFrameId.current = requestAnimationFrame(() => {\n itemRef.current?.focus({ preventScroll: true })\n\n requestAnimationFrameId.current = null\n })\n } else if (menuRef.current && !isActiveElement(menuRef.current)) {\n menuRef.current.focus({ preventScroll: true })\n }\n\n return () => {\n if (id) cancelAnimationFrame(id)\n }\n }, [isFocused, trulyDisabled, menuRef, isOpen])\n\n children =\n icon || command ? (\n <ui.span style={{ flex: 1 }}>{children}</ui.span>\n ) : (\n children\n )\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n color: \"inherit\",\n display: \"flex\",\n flex: \"0 0 auto\",\n gap: \"0.75rem\",\n outline: 0,\n textAlign: \"start\",\n textDecoration: \"none\",\n userSelect: \"none\",\n width: \"100%\",\n ...styles.item,\n }\n\n return (\n <UpstreamMenuItemProvider\n value={{\n hasDownstreamRef,\n setDownstreamOpen,\n onKeyDownRef,\n onUpstreamRestoreFocus: onRestoreFocus,\n }}\n >\n <ui.li\n {...rest}\n {...(isDownstreamOpen ? { \"data-active\": \"\" } : {})}\n className={cx(\"ui-menu__item\", className)}\n role=\"menuitem\"\n tabIndex={isFocused ? 0 : -1}\n __css={css}\n >\n {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n {children}\n {command ? <MenuCommand>{command}</MenuCommand> : null}\n </ui.li>\n </UpstreamMenuItemProvider>\n )\n },\n)\n\ninterface MenuOptionItemOptions {\n /**\n * The type of the menu option item.\n */\n type?: \"checkbox\" | \"radio\"\n /**\n * The menu option item icon to use.\n */\n icon?: null | ReactElement\n /**\n * If `true`, the checkbox or radio will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * The value of the menu option item.\n */\n value?: string\n}\n\nexport interface MenuOptionItemProps\n extends Omit<MenuItemProps, \"command\" | \"icon\" | \"value\">,\n MenuOptionItemOptions {}\n\nexport const MenuOptionItem = forwardRef<MenuOptionItemProps, \"button\">(\n (\n { className, children, closeOnSelect = false, icon, isChecked, ...rest },\n ref,\n ) => {\n return (\n <MenuItem\n ref={ref}\n className={cx(\"ui-menu__item--option\", className)}\n aria-checked={ariaAttr(isChecked)}\n closeOnSelect={closeOnSelect}\n {...rest}\n >\n {icon !== null ? (\n <MenuIcon opacity={isChecked ? 1 : 0}>\n {icon || <CheckIcon />}\n </MenuIcon>\n ) : null}\n {children}\n </MenuItem>\n )\n },\n)\n\nexport interface MenuIconProps extends HTMLUIProps<\"span\"> {}\n\nexport const MenuIcon = forwardRef<MenuIconProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\n flexShrink: 0,\n fontSize: \"0.85em\",\n justifyContent: \"center\",\n ...styles.icon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-menu__item__icon\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nexport interface MenuCommandProps extends HTMLUIProps<\"span\"> {}\n\nexport const MenuCommand = forwardRef<MenuCommandProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.command }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-menu__item__command\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nconst CheckIcon: FC = () => (\n <svg height=\"1em\" viewBox=\"0 0 14 14\" width=\"1em\">\n <polygon\n fill=\"currentColor\"\n points=\"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039\"\n />\n </svg>\n)\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type {\n Dispatch,\n KeyboardEventHandler,\n MutableRefObject,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport type { MenuOptions } from \"./menu\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\n\nexport const {\n DescendantsContextProvider,\n useDescendant: useMenuDescendant,\n useDescendants,\n useDescendantsContext: useMenuDescendantsContext,\n} = createDescendant()\n\ninterface MenuContext extends MenuOptions {\n focusedIndex: number\n isNested: boolean\n isOpen: boolean\n menuRef: RefObject<HTMLDivElement>\n requestAnimationFrameId: MutableRefObject<null | number>\n setFocusedIndex: Dispatch<SetStateAction<number>>\n styles: { [key: string]: CSSUIObject | undefined }\n onClose: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n onOpen: () => void\n onUpstreamClose?: () => void\n}\n\nexport const [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\ninterface ContextMenuContext {\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ContextMenuProvider, useContextMenu] =\n createContext<ContextMenuContext>({\n name: \"ContextMenuContext\",\n strict: false,\n })\n\ninterface UpstreamMenuContext {\n relatedRef: RefObject<HTMLElement>\n onDownstreamCloseMapRef: MutableRefObject<Map<string, () => void>>\n onUpstreamClose: () => void\n}\n\nexport const [UpstreamMenuProvider, useUpstreamMenu] =\n createContext<UpstreamMenuContext>({\n name: \"UpstreamMenuContext\",\n strict: false,\n })\n\ninterface UpstreamMenuItemContext {\n hasDownstreamRef: MutableRefObject<boolean>\n setDownstreamOpen: Dispatch<SetStateAction<boolean>>\n onKeyDownRef: RefObject<KeyboardEventHandler<HTMLLIElement>>\n onUpstreamRestoreFocus: () => void\n}\n\nexport const [UpstreamMenuItemProvider, useUpstreamMenuItem] =\n createContext<UpstreamMenuItemContext>({\n name: \"UpstreamMenuItemContext\",\n strict: false,\n })\n"],"mappings":"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","names":["import_utils","_a"]}
@@ -4,8 +4,8 @@ import {
4
4
  MenuIcon,
5
5
  MenuItem,
6
6
  MenuOptionItem
7
- } from "./chunk-T7CXLEBW.mjs";
8
- import "./chunk-ZUOFHOX6.mjs";
7
+ } from "./chunk-W36CPKTN.mjs";
8
+ import "./chunk-EJHOFPF4.mjs";
9
9
  export {
10
10
  MenuCommand,
11
11
  MenuIcon,
package/dist/menu-list.js CHANGED
@@ -34,32 +34,32 @@ var import_use_descendant = require("@yamada-ui/use-descendant");
34
34
  var import_utils = require("@yamada-ui/utils");
35
35
  var {
36
36
  DescendantsContextProvider,
37
- useDescendantsContext: useMenuDescendantsContext,
37
+ useDescendant: useMenuDescendant,
38
38
  useDescendants,
39
- useDescendant: useMenuDescendant
39
+ useDescendantsContext: useMenuDescendantsContext
40
40
  } = (0, import_use_descendant.createDescendant)();
41
41
  var [MenuProvider, useMenu] = (0, import_utils.createContext)({
42
42
  name: "MenuContext",
43
43
  errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
44
44
  });
45
45
  var [ContextMenuProvider, useContextMenu] = (0, import_utils.createContext)({
46
- strict: false,
47
- name: "ContextMenuContext"
46
+ name: "ContextMenuContext",
47
+ strict: false
48
48
  });
49
49
  var [UpstreamMenuProvider, useUpstreamMenu] = (0, import_utils.createContext)({
50
- strict: false,
51
- name: "UpstreamMenuContext"
50
+ name: "UpstreamMenuContext",
51
+ strict: false
52
52
  });
53
53
  var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils.createContext)({
54
- strict: false,
55
- name: "UpstreamMenuItemContext"
54
+ name: "UpstreamMenuItemContext",
55
+ strict: false
56
56
  });
57
57
 
58
58
  // src/menu-list.tsx
59
59
  var import_jsx_runtime = require("react/jsx-runtime");
60
60
  var MenuList = (0, import_core.forwardRef)(
61
- ({ className, contentProps, children, ...rest }, ref) => {
62
- const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } = useMenu();
61
+ ({ className, children, contentProps, ...rest }, ref) => {
62
+ const { focusedIndex, menuRef, setFocusedIndex, styles, onClose } = useMenu();
63
63
  const descendants = useMenuDescendantsContext();
64
64
  const onNext = (0, import_react.useCallback)(() => {
65
65
  const next = descendants.enabledNextValue(focusedIndex);
@@ -80,12 +80,12 @@ var MenuList = (0, import_core.forwardRef)(
80
80
  const onKeyDown = (0, import_react.useCallback)(
81
81
  (ev) => {
82
82
  const actions = {
83
- Tab: (ev2) => ev2.preventDefault(),
84
- Escape: onClose,
85
83
  ArrowDown: focusedIndex === -1 ? onFirst : onNext,
86
84
  ArrowUp: focusedIndex === -1 ? onLast : onPrev,
85
+ End: onLast,
86
+ Escape: onClose,
87
87
  Home: onFirst,
88
- End: onLast
88
+ Tab: (ev2) => ev2.preventDefault()
89
89
  };
90
90
  const action = actions[ev.key];
91
91
  if (!action) return;
@@ -106,8 +106,8 @@ var MenuList = (0, import_core.forwardRef)(
106
106
  import_core.ui.ul,
107
107
  {
108
108
  ref: (0, import_utils2.mergeRefs)(menuRef, ref),
109
- role: "menu",
110
109
  className: (0, import_utils2.cx)("ui-menu__list", className),
110
+ role: "menu",
111
111
  tabIndex: -1,
112
112
  __css: { ...styles.list },
113
113
  ...rest,
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/menu-list.tsx","../src/menu-context.ts"],"sourcesContent":["import type { HTMLUIProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport type { MotionPropsWithoutChildren } from \"@yamada-ui/motion\"\nimport { PopoverContent } from \"@yamada-ui/popover\"\nimport { cx, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport type { KeyboardEvent, KeyboardEventHandler } from \"react\"\nimport { useCallback } from \"react\"\nimport { useMenu, useMenuDescendantsContext } from \"./menu-context\"\n\nexport interface MenuListProps extends HTMLUIProps<\"ul\"> {\n contentProps?: MotionPropsWithoutChildren\n}\n\nexport const MenuList = forwardRef<MenuListProps, \"ul\">(\n ({ className, contentProps, children, ...rest }, ref) => {\n const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } =\n useMenu()\n\n const descendants = useMenuDescendantsContext()\n\n const onNext = useCallback(() => {\n const next = descendants.enabledNextValue(focusedIndex)\n\n if (next) setFocusedIndex(next.index)\n }, [descendants, focusedIndex, setFocusedIndex])\n\n const onPrev = useCallback(() => {\n const prev = descendants.enabledPrevValue(focusedIndex)\n\n if (prev) setFocusedIndex(prev.index)\n }, [descendants, focusedIndex, setFocusedIndex])\n\n const onFirst = useCallback(() => {\n const first = descendants.enabledFirstValue()\n\n if (first) setFocusedIndex(first.index)\n }, [descendants, setFocusedIndex])\n\n const onLast = useCallback(() => {\n const last = descendants.enabledLastValue()\n\n if (last) setFocusedIndex(last.index)\n }, [descendants, setFocusedIndex])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n const actions: { [key: string]: KeyboardEventHandler } = {\n Tab: (ev) => ev.preventDefault(),\n Escape: onClose,\n ArrowDown: focusedIndex === -1 ? onFirst : onNext,\n ArrowUp: focusedIndex === -1 ? onLast : onPrev,\n Home: onFirst,\n End: onLast,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n action(ev)\n },\n [focusedIndex, onClose, onFirst, onLast, onNext, onPrev],\n )\n\n return (\n <PopoverContent\n as=\"div\"\n className=\"ui-menu__content\"\n __css={{ ...styles.content }}\n {...contentProps}\n onKeyDown={handlerAll(contentProps?.onKeyDown, onKeyDown)}\n >\n <ui.ul\n ref={mergeRefs(menuRef, ref)}\n role=\"menu\"\n className={cx(\"ui-menu__list\", className)}\n tabIndex={-1}\n __css={{ ...styles.list }}\n {...rest}\n >\n {children}\n </ui.ul>\n </PopoverContent>\n )\n },\n)\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type {\n Dispatch,\n KeyboardEventHandler,\n MutableRefObject,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport type { MenuOptions } from \"./menu\"\n\nexport const {\n DescendantsContextProvider,\n useDescendantsContext: useMenuDescendantsContext,\n useDescendants,\n useDescendant: useMenuDescendant,\n} = createDescendant()\n\ninterface MenuContext extends MenuOptions {\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onUpstreamClose?: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n menuRef: RefObject<HTMLDivElement>\n requestAnimationFrameId: MutableRefObject<number | null>\n isNested: boolean\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\ninterface ContextMenuContext {\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [ContextMenuProvider, useContextMenu] =\n createContext<ContextMenuContext>({\n strict: false,\n name: \"ContextMenuContext\",\n })\n\ninterface UpstreamMenuContext {\n relatedRef: RefObject<HTMLElement>\n onDownstreamCloseMapRef: MutableRefObject<Map<string, () => void>>\n onUpstreamClose: () => void\n}\n\nexport const [UpstreamMenuProvider, useUpstreamMenu] =\n createContext<UpstreamMenuContext>({\n strict: false,\n name: \"UpstreamMenuContext\",\n })\n\ninterface UpstreamMenuItemContext {\n onUpstreamRestoreFocus: () => void\n onKeyDownRef: RefObject<KeyboardEventHandler<HTMLLIElement>>\n setDownstreamOpen: Dispatch<SetStateAction<boolean>>\n hasDownstreamRef: MutableRefObject<boolean>\n}\n\nexport const [UpstreamMenuItemProvider, useUpstreamMenuItem] =\n createContext<UpstreamMenuItemContext>({\n strict: false,\n name: \"UpstreamMenuItemContext\",\n })\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAA+B;AAE/B,qBAA+B;AAC/B,IAAAA,gBAA0C;AAE1C,mBAA4B;;;ACL5B,4BAAiC;AACjC,mBAA8B;AAUvB,IAAM;AAAA,EACX;AAAA,EACA,uBAAuB;AAAA,EACvB;AAAA,EACA,eAAe;AACjB,QAAI,wCAAiB;AAiBd,IAAM,CAAC,cAAc,OAAO,QAAI,4BAA2B;AAAA,EAChE,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAMM,IAAM,CAAC,qBAAqB,cAAc,QAC/C,4BAAkC;AAAA,EAChC,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAQI,IAAM,CAAC,sBAAsB,eAAe,QACjD,4BAAmC;AAAA,EACjC,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AASI,IAAM,CAAC,0BAA0B,mBAAmB,QACzD,4BAAuC;AAAA,EACrC,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;;;ADCK;AA5DD,IAAM,eAAW;AAAA,EACtB,CAAC,EAAE,WAAW,cAAc,UAAU,GAAG,KAAK,GAAG,QAAQ;AACvD,UAAM,EAAE,SAAS,cAAc,iBAAiB,SAAS,OAAO,IAC9D,QAAQ;AAEV,UAAM,cAAc,0BAA0B;AAE9C,UAAM,aAAS,0BAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB,YAAY;AAEtD,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,GAAG,CAAC,aAAa,cAAc,eAAe,CAAC;AAE/C,UAAM,aAAS,0BAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB,YAAY;AAEtD,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,GAAG,CAAC,aAAa,cAAc,eAAe,CAAC;AAE/C,UAAM,cAAU,0BAAY,MAAM;AAChC,YAAM,QAAQ,YAAY,kBAAkB;AAE5C,UAAI,MAAO,iBAAgB,MAAM,KAAK;AAAA,IACxC,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,UAAM,aAAS,0BAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB;AAE1C,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,UAAM,gBAAY;AAAA,MAChB,CAAC,OAAsB;AACrB,cAAM,UAAmD;AAAA,UACvD,KAAK,CAACC,QAAOA,IAAG,eAAe;AAAA,UAC/B,QAAQ;AAAA,UACR,WAAW,iBAAiB,KAAK,UAAU;AAAA,UAC3C,SAAS,iBAAiB,KAAK,SAAS;AAAA,UACxC,MAAM;AAAA,UACN,KAAK;AAAA,QACP;AAEA,cAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,YAAI,CAAC,OAAQ;AAEb,WAAG,eAAe;AAClB,eAAO,EAAE;AAAA,MACX;AAAA,MACA,CAAC,cAAc,SAAS,SAAS,QAAQ,QAAQ,MAAM;AAAA,IACzD;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,WAAU;AAAA,QACV,OAAO,EAAE,GAAG,OAAO,QAAQ;AAAA,QAC1B,GAAG;AAAA,QACJ,eAAW,0BAAW,6CAAc,WAAW,SAAS;AAAA,QAExD;AAAA,UAAC,eAAG;AAAA,UAAH;AAAA,YACC,SAAK,yBAAU,SAAS,GAAG;AAAA,YAC3B,MAAK;AAAA,YACL,eAAW,kBAAG,iBAAiB,SAAS;AAAA,YACxC,UAAU;AAAA,YACV,OAAO,EAAE,GAAG,OAAO,KAAK;AAAA,YACvB,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":["import_utils","ev"]}
1
+ {"version":3,"sources":["../src/menu-list.tsx","../src/menu-context.ts"],"sourcesContent":["import type { HTMLUIProps } from \"@yamada-ui/core\"\nimport type { MotionPropsWithoutChildren } from \"@yamada-ui/motion\"\nimport type { KeyboardEvent, KeyboardEventHandler } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { PopoverContent } from \"@yamada-ui/popover\"\nimport { cx, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\nimport { useMenu, useMenuDescendantsContext } from \"./menu-context\"\n\nexport interface MenuListProps extends HTMLUIProps<\"ul\"> {\n contentProps?: MotionPropsWithoutChildren\n}\n\nexport const MenuList = forwardRef<MenuListProps, \"ul\">(\n ({ className, children, contentProps, ...rest }, ref) => {\n const { focusedIndex, menuRef, setFocusedIndex, styles, onClose } =\n useMenu()\n\n const descendants = useMenuDescendantsContext()\n\n const onNext = useCallback(() => {\n const next = descendants.enabledNextValue(focusedIndex)\n\n if (next) setFocusedIndex(next.index)\n }, [descendants, focusedIndex, setFocusedIndex])\n\n const onPrev = useCallback(() => {\n const prev = descendants.enabledPrevValue(focusedIndex)\n\n if (prev) setFocusedIndex(prev.index)\n }, [descendants, focusedIndex, setFocusedIndex])\n\n const onFirst = useCallback(() => {\n const first = descendants.enabledFirstValue()\n\n if (first) setFocusedIndex(first.index)\n }, [descendants, setFocusedIndex])\n\n const onLast = useCallback(() => {\n const last = descendants.enabledLastValue()\n\n if (last) setFocusedIndex(last.index)\n }, [descendants, setFocusedIndex])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n const actions: { [key: string]: KeyboardEventHandler } = {\n ArrowDown: focusedIndex === -1 ? onFirst : onNext,\n ArrowUp: focusedIndex === -1 ? onLast : onPrev,\n End: onLast,\n Escape: onClose,\n Home: onFirst,\n Tab: (ev) => ev.preventDefault(),\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n action(ev)\n },\n [focusedIndex, onClose, onFirst, onLast, onNext, onPrev],\n )\n\n return (\n <PopoverContent\n as=\"div\"\n className=\"ui-menu__content\"\n __css={{ ...styles.content }}\n {...contentProps}\n onKeyDown={handlerAll(contentProps?.onKeyDown, onKeyDown)}\n >\n <ui.ul\n ref={mergeRefs(menuRef, ref)}\n className={cx(\"ui-menu__list\", className)}\n role=\"menu\"\n tabIndex={-1}\n __css={{ ...styles.list }}\n {...rest}\n >\n {children}\n </ui.ul>\n </PopoverContent>\n )\n },\n)\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type {\n Dispatch,\n KeyboardEventHandler,\n MutableRefObject,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport type { MenuOptions } from \"./menu\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\n\nexport const {\n DescendantsContextProvider,\n useDescendant: useMenuDescendant,\n useDescendants,\n useDescendantsContext: useMenuDescendantsContext,\n} = createDescendant()\n\ninterface MenuContext extends MenuOptions {\n focusedIndex: number\n isNested: boolean\n isOpen: boolean\n menuRef: RefObject<HTMLDivElement>\n requestAnimationFrameId: MutableRefObject<null | number>\n setFocusedIndex: Dispatch<SetStateAction<number>>\n styles: { [key: string]: CSSUIObject | undefined }\n onClose: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n onOpen: () => void\n onUpstreamClose?: () => void\n}\n\nexport const [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\ninterface ContextMenuContext {\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ContextMenuProvider, useContextMenu] =\n createContext<ContextMenuContext>({\n name: \"ContextMenuContext\",\n strict: false,\n })\n\ninterface UpstreamMenuContext {\n relatedRef: RefObject<HTMLElement>\n onDownstreamCloseMapRef: MutableRefObject<Map<string, () => void>>\n onUpstreamClose: () => void\n}\n\nexport const [UpstreamMenuProvider, useUpstreamMenu] =\n createContext<UpstreamMenuContext>({\n name: \"UpstreamMenuContext\",\n strict: false,\n })\n\ninterface UpstreamMenuItemContext {\n hasDownstreamRef: MutableRefObject<boolean>\n setDownstreamOpen: Dispatch<SetStateAction<boolean>>\n onKeyDownRef: RefObject<KeyboardEventHandler<HTMLLIElement>>\n onUpstreamRestoreFocus: () => void\n}\n\nexport const [UpstreamMenuItemProvider, useUpstreamMenuItem] =\n createContext<UpstreamMenuItemContext>({\n name: \"UpstreamMenuItemContext\",\n strict: false,\n })\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAA+B;AAC/B,qBAA+B;AAC/B,IAAAA,gBAA0C;AAC1C,mBAA4B;;;ACG5B,4BAAiC;AACjC,mBAA8B;AAEvB,IAAM;AAAA,EACX;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,uBAAuB;AACzB,QAAI,wCAAiB;AAiBd,IAAM,CAAC,cAAc,OAAO,QAAI,4BAA2B;AAAA,EAChE,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAMM,IAAM,CAAC,qBAAqB,cAAc,QAC/C,4BAAkC;AAAA,EAChC,MAAM;AAAA,EACN,QAAQ;AACV,CAAC;AAQI,IAAM,CAAC,sBAAsB,eAAe,QACjD,4BAAmC;AAAA,EACjC,MAAM;AAAA,EACN,QAAQ;AACV,CAAC;AASI,IAAM,CAAC,0BAA0B,mBAAmB,QACzD,4BAAuC;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ;AACV,CAAC;;;ADCK;AA5DD,IAAM,eAAW;AAAA,EACtB,CAAC,EAAE,WAAW,UAAU,cAAc,GAAG,KAAK,GAAG,QAAQ;AACvD,UAAM,EAAE,cAAc,SAAS,iBAAiB,QAAQ,QAAQ,IAC9D,QAAQ;AAEV,UAAM,cAAc,0BAA0B;AAE9C,UAAM,aAAS,0BAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB,YAAY;AAEtD,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,GAAG,CAAC,aAAa,cAAc,eAAe,CAAC;AAE/C,UAAM,aAAS,0BAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB,YAAY;AAEtD,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,GAAG,CAAC,aAAa,cAAc,eAAe,CAAC;AAE/C,UAAM,cAAU,0BAAY,MAAM;AAChC,YAAM,QAAQ,YAAY,kBAAkB;AAE5C,UAAI,MAAO,iBAAgB,MAAM,KAAK;AAAA,IACxC,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,UAAM,aAAS,0BAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB;AAE1C,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,UAAM,gBAAY;AAAA,MAChB,CAAC,OAAsB;AACrB,cAAM,UAAmD;AAAA,UACvD,WAAW,iBAAiB,KAAK,UAAU;AAAA,UAC3C,SAAS,iBAAiB,KAAK,SAAS;AAAA,UACxC,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,KAAK,CAACC,QAAOA,IAAG,eAAe;AAAA,QACjC;AAEA,cAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,YAAI,CAAC,OAAQ;AAEb,WAAG,eAAe;AAClB,eAAO,EAAE;AAAA,MACX;AAAA,MACA,CAAC,cAAc,SAAS,SAAS,QAAQ,QAAQ,MAAM;AAAA,IACzD;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,WAAU;AAAA,QACV,OAAO,EAAE,GAAG,OAAO,QAAQ;AAAA,QAC1B,GAAG;AAAA,QACJ,eAAW,0BAAW,6CAAc,WAAW,SAAS;AAAA,QAExD;AAAA,UAAC,eAAG;AAAA,UAAH;AAAA,YACC,SAAK,yBAAU,SAAS,GAAG;AAAA,YAC3B,eAAW,kBAAG,iBAAiB,SAAS;AAAA,YACxC,MAAK;AAAA,YACL,UAAU;AAAA,YACV,OAAO,EAAE,GAAG,OAAO,KAAK;AAAA,YACvB,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":["import_utils","ev"]}
@@ -1,8 +1,8 @@
1
1
  "use client"
2
2
  import {
3
3
  MenuList
4
- } from "./chunk-O5D4LR5P.mjs";
5
- import "./chunk-ZUOFHOX6.mjs";
4
+ } from "./chunk-I473RINV.mjs";
5
+ import "./chunk-EJHOFPF4.mjs";
6
6
  export {
7
7
  MenuList
8
8
  };
@@ -1,22 +1,22 @@
1
1
  import { ComponentArgs } from '@yamada-ui/core';
2
- import { RefAttributes } from 'react';
2
+ import { RefAttributes, ReactElement } from 'react';
3
3
  import { MenuGroupProps } from './menu-group.mjs';
4
4
 
5
5
  interface MenuOptionGroupOptions<Y extends string | string[] = string> {
6
6
  /**
7
- * The value of the menu item group.
7
+ * The type of the menu option group.
8
+ *
9
+ * @default 'checkbox'
8
10
  */
9
- value?: Y;
11
+ type?: "checkbox" | "radio";
10
12
  /**
11
13
  * The initial value of the menu item group.
12
14
  */
13
15
  defaultValue?: Y;
14
16
  /**
15
- * The type of the menu option group.
16
- *
17
- * @default 'checkbox'
17
+ * The value of the menu item group.
18
18
  */
19
- type?: "radio" | "checkbox";
19
+ value?: Y;
20
20
  /**
21
21
  * The callback fired when any children checkbox is checked or unchecked.
22
22
  */
@@ -25,7 +25,7 @@ interface MenuOptionGroupOptions<Y extends string | string[] = string> {
25
25
  interface MenuOptionGroupProps<Y extends string | string[] = string> extends Omit<MenuGroupProps, keyof MenuOptionGroupOptions>, MenuOptionGroupOptions<Y> {
26
26
  }
27
27
  declare const MenuOptionGroup: {
28
- <Y extends string | string[] = string>(props: MenuOptionGroupProps<Y> & RefAttributes<HTMLDivElement>): JSX.Element;
28
+ <Y extends string | string[] = string>(props: MenuOptionGroupProps<Y> & RefAttributes<HTMLDivElement>): ReactElement;
29
29
  } & ComponentArgs;
30
30
 
31
31
  export { MenuOptionGroup, type MenuOptionGroupProps };
@@ -1,22 +1,22 @@
1
1
  import { ComponentArgs } from '@yamada-ui/core';
2
- import { RefAttributes } from 'react';
2
+ import { RefAttributes, ReactElement } from 'react';
3
3
  import { MenuGroupProps } from './menu-group.js';
4
4
 
5
5
  interface MenuOptionGroupOptions<Y extends string | string[] = string> {
6
6
  /**
7
- * The value of the menu item group.
7
+ * The type of the menu option group.
8
+ *
9
+ * @default 'checkbox'
8
10
  */
9
- value?: Y;
11
+ type?: "checkbox" | "radio";
10
12
  /**
11
13
  * The initial value of the menu item group.
12
14
  */
13
15
  defaultValue?: Y;
14
16
  /**
15
- * The type of the menu option group.
16
- *
17
- * @default 'checkbox'
17
+ * The value of the menu item group.
18
18
  */
19
- type?: "radio" | "checkbox";
19
+ value?: Y;
20
20
  /**
21
21
  * The callback fired when any children checkbox is checked or unchecked.
22
22
  */
@@ -25,7 +25,7 @@ interface MenuOptionGroupOptions<Y extends string | string[] = string> {
25
25
  interface MenuOptionGroupProps<Y extends string | string[] = string> extends Omit<MenuGroupProps, keyof MenuOptionGroupOptions>, MenuOptionGroupOptions<Y> {
26
26
  }
27
27
  declare const MenuOptionGroup: {
28
- <Y extends string | string[] = string>(props: MenuOptionGroupProps<Y> & RefAttributes<HTMLDivElement>): JSX.Element;
28
+ <Y extends string | string[] = string>(props: MenuOptionGroupProps<Y> & RefAttributes<HTMLDivElement>): ReactElement;
29
29
  } & ComponentArgs;
30
30
 
31
31
  export { MenuOptionGroup, type MenuOptionGroupProps };