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

Sign up to get free protection for your applications and to get access to all the features.
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 };