@yamada-ui/menu 2.0.0-next-20240619220221 → 2.0.0-next-20240701004015

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 (45) hide show
  1. package/dist/{chunk-IV2JMNCB.mjs → chunk-24YOFDJV.mjs} +3 -3
  2. package/dist/{chunk-52OUQO7P.mjs → chunk-7DAGQC4A.mjs} +2 -2
  3. package/dist/{chunk-KBM3IJVJ.mjs → chunk-BNGR5R7U.mjs} +2 -2
  4. package/dist/{chunk-4BK7CQR4.mjs → chunk-DW3JHREI.mjs} +26 -66
  5. package/dist/chunk-DW3JHREI.mjs.map +1 -0
  6. package/dist/{chunk-AEUEBWYD.mjs → chunk-JR2DBODI.mjs} +2 -2
  7. package/dist/{chunk-OSVZBT46.mjs → chunk-PMNHFZEM.mjs} +2 -2
  8. package/dist/chunk-PMNHFZEM.mjs.map +1 -0
  9. package/dist/{chunk-CPRY7EAI.mjs → chunk-RNHC5FXC.mjs} +2 -2
  10. package/dist/context-menu-trigger.mjs +2 -2
  11. package/dist/context-menu.js +25 -65
  12. package/dist/context-menu.js.map +1 -1
  13. package/dist/context-menu.mjs +1 -1
  14. package/dist/index.js +25 -65
  15. package/dist/index.js.map +1 -1
  16. package/dist/index.mjs +7 -7
  17. package/dist/menu-button.js +25 -65
  18. package/dist/menu-button.js.map +1 -1
  19. package/dist/menu-button.mjs +2 -2
  20. package/dist/menu-divider.mjs +2 -2
  21. package/dist/menu-group.mjs +2 -2
  22. package/dist/menu-item.d.mts +3 -3
  23. package/dist/menu-item.d.ts +3 -3
  24. package/dist/menu-item.js +25 -65
  25. package/dist/menu-item.js.map +1 -1
  26. package/dist/menu-item.mjs +1 -1
  27. package/dist/menu-list.mjs +2 -2
  28. package/dist/menu-option-group.d.mts +5 -3
  29. package/dist/menu-option-group.d.ts +5 -3
  30. package/dist/menu-option-group.js +25 -65
  31. package/dist/menu-option-group.js.map +1 -1
  32. package/dist/menu-option-group.mjs +3 -3
  33. package/dist/menu.d.mts +4 -4
  34. package/dist/menu.d.ts +4 -4
  35. package/dist/menu.js +25 -65
  36. package/dist/menu.js.map +1 -1
  37. package/dist/menu.mjs +1 -1
  38. package/package.json +11 -11
  39. package/dist/chunk-4BK7CQR4.mjs.map +0 -1
  40. package/dist/chunk-OSVZBT46.mjs.map +0 -1
  41. /package/dist/{chunk-IV2JMNCB.mjs.map → chunk-24YOFDJV.mjs.map} +0 -0
  42. /package/dist/{chunk-52OUQO7P.mjs.map → chunk-7DAGQC4A.mjs.map} +0 -0
  43. /package/dist/{chunk-KBM3IJVJ.mjs.map → chunk-BNGR5R7U.mjs.map} +0 -0
  44. /package/dist/{chunk-AEUEBWYD.mjs.map → chunk-JR2DBODI.mjs.map} +0 -0
  45. /package/dist/{chunk-CPRY7EAI.mjs.map → chunk-RNHC5FXC.mjs.map} +0 -0
@@ -1,10 +1,10 @@
1
1
  "use client"
2
2
  import {
3
3
  MenuGroup
4
- } from "./chunk-KBM3IJVJ.mjs";
4
+ } from "./chunk-BNGR5R7U.mjs";
5
5
  import {
6
6
  MenuOptionItem
7
- } from "./chunk-4BK7CQR4.mjs";
7
+ } from "./chunk-DW3JHREI.mjs";
8
8
 
9
9
  // src/menu-option-group.tsx
10
10
  import { useControllableState } from "@yamada-ui/use-controllable-state";
@@ -65,4 +65,4 @@ MenuOptionGroup.displayName = "MenuOptionGroup";
65
65
  export {
66
66
  MenuOptionGroup
67
67
  };
68
- //# sourceMappingURL=chunk-IV2JMNCB.mjs.map
68
+ //# sourceMappingURL=chunk-24YOFDJV.mjs.map
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  useMenu
4
- } from "./chunk-4BK7CQR4.mjs";
4
+ } from "./chunk-DW3JHREI.mjs";
5
5
 
6
6
  // src/menu-divider.tsx
7
7
  import { ui, forwardRef } from "@yamada-ui/core";
@@ -24,4 +24,4 @@ var MenuDivider = forwardRef(({ className, ...rest }, ref) => {
24
24
  export {
25
25
  MenuDivider
26
26
  };
27
- //# sourceMappingURL=chunk-52OUQO7P.mjs.map
27
+ //# sourceMappingURL=chunk-7DAGQC4A.mjs.map
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  useMenu
4
- } from "./chunk-4BK7CQR4.mjs";
4
+ } from "./chunk-DW3JHREI.mjs";
5
5
 
6
6
  // src/menu-group.tsx
7
7
  import { ui, forwardRef } from "@yamada-ui/core";
@@ -38,4 +38,4 @@ var MenuGroup = forwardRef(
38
38
  export {
39
39
  MenuGroup
40
40
  };
41
- //# sourceMappingURL=chunk-KBM3IJVJ.mjs.map
41
+ //# sourceMappingURL=chunk-BNGR5R7U.mjs.map
@@ -217,25 +217,17 @@ var [UpstreamMenuItemProvider, useUpstreamMenuItem] = createContext3({
217
217
  });
218
218
  var isTargetMenuItem = (target) => {
219
219
  var _a;
220
- return isHTMLElement(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menu-item"));
220
+ return isHTMLElement(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menuitem"));
221
221
  };
222
222
  var MenuItem = forwardRef(
223
223
  ({
224
- as,
225
224
  className,
226
- type,
227
225
  isDisabled,
228
226
  isFocusable,
229
227
  closeOnSelect: customCloseOnSelect,
230
228
  icon,
231
229
  command,
232
230
  children,
233
- onClick: onClickProp,
234
- onFocus: onFocusProp,
235
- onMouseEnter: onMouseEnterProp,
236
- onMouseMove: onMouseMoveProp,
237
- onMouseLeave: onMouseLeaveProp,
238
- onKeyDown: onKeyDownProp,
239
231
  ...props
240
232
  }, ref) => {
241
233
  var _a;
@@ -253,7 +245,7 @@ var MenuItem = forwardRef(
253
245
  } = useMenu();
254
246
  const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
255
247
  const trulyDisabled = isDisabled && !isFocusable;
256
- const buttonRef = useRef2(null);
248
+ const itemRef = useRef2(null);
257
249
  const hasDownstreamRef = useRef2(false);
258
250
  const onKeyDownRef = useRef2(
259
251
  () => void 0
@@ -261,33 +253,16 @@ var MenuItem = forwardRef(
261
253
  const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
262
254
  const [isDownstreamOpen, setDownstreamOpen] = useState2(false);
263
255
  const isFocused = index === focusedIndex;
264
- const onMouseEnter = useCallback2(
265
- (event) => {
266
- onMouseEnterProp == null ? void 0 : onMouseEnterProp(event);
267
- if (isDisabled) return;
268
- setFocusedIndex(index);
269
- },
270
- [setFocusedIndex, index, isDisabled, onMouseEnterProp]
271
- );
272
- const onMouseMove = useCallback2(
273
- (event) => {
274
- onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
275
- if (buttonRef.current && !isActiveElement(buttonRef.current))
276
- onMouseEnter(event);
277
- },
278
- [onMouseEnter, onMouseMoveProp]
279
- );
280
- const onMouseLeave = useCallback2(
281
- (event) => {
282
- onMouseLeaveProp == null ? void 0 : onMouseLeaveProp(event);
283
- if (isDisabled) return;
284
- setFocusedIndex(-1);
285
- },
286
- [setFocusedIndex, isDisabled, onMouseLeaveProp]
287
- );
256
+ const onMouseOver = useCallback2(() => {
257
+ if (isDisabled) return;
258
+ setFocusedIndex(index);
259
+ }, [index, isDisabled, setFocusedIndex]);
260
+ const onMouseLeave = useCallback2(() => {
261
+ if (isDisabled) return;
262
+ setFocusedIndex(-1);
263
+ }, [setFocusedIndex, isDisabled]);
288
264
  const onClick = useCallback2(
289
265
  (ev) => {
290
- onClickProp == null ? void 0 : onClickProp(ev);
291
266
  if (!isTargetMenuItem(ev.currentTarget)) return;
292
267
  const hasDownstream = hasDownstreamRef.current;
293
268
  if (customCloseOnSelect != null ? customCloseOnSelect : !hasDownstream && generalCloseOnSelect) {
@@ -295,29 +270,18 @@ var MenuItem = forwardRef(
295
270
  onUpstreamClose == null ? void 0 : onUpstreamClose();
296
271
  }
297
272
  },
298
- [
299
- onClickProp,
300
- customCloseOnSelect,
301
- generalCloseOnSelect,
302
- onClose,
303
- onUpstreamClose
304
- ]
305
- );
306
- const onFocus = useCallback2(
307
- (ev) => {
308
- onFocusProp == null ? void 0 : onFocusProp(ev);
309
- setFocusedIndex(index);
310
- },
311
- [onFocusProp, setFocusedIndex, index]
273
+ [customCloseOnSelect, generalCloseOnSelect, onClose, onUpstreamClose]
312
274
  );
275
+ const onFocus = useCallback2(() => {
276
+ setFocusedIndex(index);
277
+ }, [setFocusedIndex, index]);
313
278
  const onRestoreFocus = useCallback2(() => {
314
279
  var _a2;
315
- (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
280
+ (_a2 = itemRef.current) == null ? void 0 : _a2.focus();
316
281
  setFocusedIndex(index);
317
282
  }, [setFocusedIndex, index]);
318
283
  const onKeyDown = useCallback2(
319
284
  (ev) => {
320
- onKeyDownProp == null ? void 0 : onKeyDownProp(ev);
321
285
  const actions = {
322
286
  ArrowLeft: isNested ? funcAll2(onUpstreamRestoreFocus, onClose) : void 0
323
287
  };
@@ -327,29 +291,28 @@ var MenuItem = forwardRef(
327
291
  ev.stopPropagation();
328
292
  action();
329
293
  },
330
- [onKeyDownProp, onUpstreamRestoreFocus, onClose, isNested]
294
+ [onUpstreamRestoreFocus, onClose, isNested]
331
295
  );
332
296
  const rest = useClickable({
333
297
  focusOnClick: false,
334
298
  ...props,
335
- onClick,
336
- onFocus,
337
- onMouseEnter,
338
- onMouseMove,
339
- onMouseLeave,
340
- onKeyDown: handlerAll(onKeyDown, onKeyDownRef.current),
341
- ref: mergeRefs(register, buttonRef, ref),
299
+ onClick: handlerAll(props.onClick, onClick),
300
+ onFocus: handlerAll(props.onFocus, onFocus),
301
+ onMouseOver: handlerAll(props.onMouseOver, onMouseOver),
302
+ onMouseLeave: handlerAll(props.onMouseLeave, onMouseLeave),
303
+ onKeyDown: handlerAll(props.onKeyDown, onKeyDown, onKeyDownRef.current),
304
+ ref: mergeRefs(register, itemRef, ref),
342
305
  isDisabled,
343
306
  isFocusable
344
307
  });
345
308
  useUpdateEffect2(() => {
346
309
  if (!isOpen) return;
347
310
  const id = requestAnimationFrameId.current;
348
- if (isFocused && !trulyDisabled && buttonRef.current) {
311
+ if (isFocused && !trulyDisabled && itemRef.current) {
349
312
  if (id) cancelAnimationFrame(id);
350
313
  requestAnimationFrameId.current = requestAnimationFrame(() => {
351
314
  var _a2;
352
- (_a2 = buttonRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
315
+ (_a2 = itemRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
353
316
  requestAnimationFrameId.current = null;
354
317
  });
355
318
  } else if (menuRef.current && !isActiveElement(menuRef.current)) {
@@ -359,7 +322,6 @@ var MenuItem = forwardRef(
359
322
  if (id) cancelAnimationFrame(id);
360
323
  };
361
324
  }, [isFocused, trulyDisabled, menuRef, isOpen]);
362
- type = as || type ? type != null ? type : void 0 : "button";
363
325
  children = icon || command ? /* @__PURE__ */ jsx3(ui.span, { style: { flex: 1 }, children }) : children;
364
326
  const css = { ...styles.item };
365
327
  return /* @__PURE__ */ jsx3(
@@ -376,9 +338,7 @@ var MenuItem = forwardRef(
376
338
  {
377
339
  ...rest,
378
340
  ...isDownstreamOpen ? { "data-active": "" } : {},
379
- as,
380
- type,
381
- role: "menu-item",
341
+ role: "menuitem",
382
342
  tabIndex: isFocused ? 0 : -1,
383
343
  className: cx("ui-menu__item", className),
384
344
  __css: css,
@@ -472,4 +432,4 @@ export {
472
432
  useContextMenu,
473
433
  ContextMenu
474
434
  };
475
- //# sourceMappingURL=chunk-4BK7CQR4.mjs.map
435
+ //# sourceMappingURL=chunk-DW3JHREI.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/menu-item.tsx","../src/menu.tsx","../src/context-menu.tsx"],"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 createContext,\n cx,\n funcAll,\n handlerAll,\n isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type {\n Dispatch,\n FC,\n KeyboardEvent,\n KeyboardEventHandler,\n MouseEvent,\n MutableRefObject,\n ReactElement,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\nimport { useMenu, useMenuDescendant } from \"./menu\"\n\ntype 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\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"menuitem\")\n )\n}\n\ntype 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 type MenuItemProps = 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: Record<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 = { ...styles.item }\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\ntype 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 type MenuOptionItemProps = Omit<MenuItemProps, \"icon\" | \"command\"> &\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 type MenuIconProps = 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 type MenuCommandProps = 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, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport { Popover } from \"@yamada-ui/popover\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n createContext,\n funcAll,\n useUnmountEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type {\n Dispatch,\n FC,\n MutableRefObject,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { useContextMenu } from \"./context-menu\"\nimport { useUpstreamMenuItem } from \"./menu-item\"\n\nconst {\n DescendantsContextProvider,\n useDescendantsContext: useMenuDescendantsContext,\n useDescendants,\n useDescendant: useMenuDescendant,\n} = createDescendant<HTMLElement>()\n\nexport { useMenuDescendantsContext, useMenuDescendant }\n\ntype MenuContext = 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: Record<string, CSSUIObject>\n}\n\nconst [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\ntype 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\nexport { useMenu }\n\ntype MenuOptions = {\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n}\n\nexport type MenuProps = ThemeProps<\"Menu\"> &\n Omit<PopoverProps, \"closeOnButton\" | \"relatedRef\"> &\n MenuOptions\n\n/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see Docs https://yamada-ui.com/components/overlay/menu\n */\nexport const Menu: FC<MenuProps> = (props) => {\n const { styles: contextMenuStyles } = useContextMenu() ?? {}\n const [styles, mergedProps] = useMultiComponentStyle(\"Menu\", props, {\n isProcessSkip: !!contextMenuStyles,\n styles: contextMenuStyles,\n })\n let {\n initialFocusRef,\n closeOnSelect = true,\n closeOnBlur,\n placement,\n duration = 0.2,\n offset,\n onOpen: onOpenProp,\n onClose: onCloseProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const { relatedRef, onUpstreamClose, onDownstreamCloseMapRef } =\n useUpstreamMenu() ?? {}\n const { setDownstreamOpen, hasDownstreamRef } = useUpstreamMenuItem() ?? {}\n const isNested = !!relatedRef\n\n if (isNested) {\n placement ??= \"right-start\"\n offset ??= [-8, 8]\n closeOnBlur ??= false\n } else {\n placement ??= \"bottom-start\"\n }\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n const menuRef = useRef<HTMLDivElement>(null)\n const timeoutIds = useRef<Set<any>>(new Set([]))\n const requestAnimationFrameId = useRef<number | null>(null)\n const onCloseMapRef = useRef<Map<string, () => void>>(new Map())\n\n const onFocusMenu = useCallback(() => {\n requestAnimationFrame(() =>\n menuRef.current?.focus({ preventScroll: false }),\n )\n }, [])\n\n const onFocusFirstItem = useCallback(() => {\n const id = setTimeout(() => {\n if (initialFocusRef) return\n\n const first = descendants.enabledFirstValue()\n\n if (first) setFocusedIndex(first.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, initialFocusRef])\n\n const onFocusLastItem = useCallback(() => {\n const id = setTimeout(() => {\n if (initialFocusRef) return\n\n const last = descendants.enabledLastValue()\n\n if (last) setFocusedIndex(last.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, initialFocusRef])\n\n const onOpenInternal = useCallback(() => {\n onOpenProp?.()\n\n if (!isNested) onFocusMenu()\n }, [onOpenProp, isNested, onFocusMenu])\n\n const onCloseInternal = useCallback(() => {\n onCloseProp?.()\n\n for (const onClose of onCloseMapRef.current.values()) {\n onClose()\n }\n }, [onCloseProp])\n\n const id = useId()\n const { isOpen, onOpen, onClose } = useDisclosure({\n ...props,\n onOpen: onOpenInternal,\n onClose: onCloseInternal,\n })\n\n useEffect(() => {\n const onCloseMap = onDownstreamCloseMapRef?.current\n\n onCloseMap?.set(id, onClose)\n\n return () => {\n onCloseMap?.delete(id)\n }\n }, [id, onClose, onDownstreamCloseMapRef])\n\n useEffect(() => {\n if (setDownstreamOpen) setDownstreamOpen(isOpen)\n }, [setDownstreamOpen, isOpen])\n\n useEffect(() => {\n if (hasDownstreamRef) hasDownstreamRef.current = true\n\n return () => {\n if (hasDownstreamRef) hasDownstreamRef.current = false\n }\n })\n\n useUpdateEffect(() => {\n if (!isOpen) setFocusedIndex(-1)\n }, [isOpen])\n\n useUnmountEffect(() => {\n timeoutIds.current.forEach((id) => clearTimeout(id))\n timeoutIds.current.clear()\n })\n\n return (\n <DescendantsContextProvider value={descendants}>\n <UpstreamMenuProvider\n value={{\n relatedRef: menuRef,\n onDownstreamCloseMapRef: onCloseMapRef,\n onUpstreamClose: funcAll(onUpstreamClose, onClose),\n }}\n >\n <MenuProvider\n value={{\n isOpen,\n onOpen,\n onClose,\n onUpstreamClose,\n onFocusFirstItem,\n onFocusLastItem,\n closeOnSelect,\n focusedIndex,\n setFocusedIndex,\n menuRef,\n requestAnimationFrameId,\n isNested,\n styles,\n }}\n >\n <Popover\n {...{\n trigger: isNested ? \"hover\" : \"click\",\n ...rest,\n isOpen,\n onOpen,\n onClose,\n placement,\n offset,\n duration,\n initialFocusRef,\n relatedRef,\n closeOnButton: false,\n closeOnBlur,\n }}\n />\n </MenuProvider>\n </UpstreamMenuProvider>\n </DescendantsContextProvider>\n )\n}\n","import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\nimport type { MenuProps } from \"./menu\"\nimport { Menu } from \"./menu\"\n\ntype ContextMenuContext = {\n styles: Record<string, CSSUIObject>\n}\n\nconst [ContextMenuProvider, useContextMenu] = createContext<ContextMenuContext>(\n {\n strict: false,\n name: \"ContextMenuContext\",\n },\n)\n\nexport { useContextMenu }\n\ntype ContextMenuOptions = {}\n\nexport type ContextMenuProps = Omit<MenuProps, \"trigger\"> &\n ThemeProps<\"ContextMenu\"> &\n ContextMenuOptions\n\n/**\n * `ContextMenu` is triggered by a right click and displays a menu at the pointer's position.\n *\n * @see Docs https://yamada-ui.com/components/overlay/context-menu\n */\nexport const ContextMenu: FC<ContextMenuProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"ContextMenu\", props)\n const { ...rest } = omitThemeProps(mergedProps)\n\n return (\n <ContextMenuProvider value={{ styles }}>\n <Menu trigger=\"contextmenu\" {...rest} />\n </ContextMenuProvider>\n )\n}\n"],"mappings":"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","names":["createContext","funcAll","useUpdateEffect","useCallback","useRef","useState","useMultiComponentStyle","omitThemeProps","createContext","jsx","createContext","useMultiComponentStyle","omitThemeProps","_a","id","onClose","jsx","jsx","createContext","useRef","useState","useCallback","_a","funcAll","useUpdateEffect"]}
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  useContextMenu
4
- } from "./chunk-4BK7CQR4.mjs";
4
+ } from "./chunk-DW3JHREI.mjs";
5
5
 
6
6
  // src/context-menu-trigger.tsx
7
7
  import { ui, forwardRef } from "@yamada-ui/core";
@@ -43,4 +43,4 @@ var ContextMenuTrigger = forwardRef(
43
43
  export {
44
44
  ContextMenuTrigger
45
45
  };
46
- //# sourceMappingURL=chunk-AEUEBWYD.mjs.map
46
+ //# sourceMappingURL=chunk-JR2DBODI.mjs.map
@@ -3,7 +3,7 @@ import {
3
3
  MenuIcon,
4
4
  useMenu,
5
5
  useUpstreamMenuItem
6
- } from "./chunk-4BK7CQR4.mjs";
6
+ } from "./chunk-DW3JHREI.mjs";
7
7
 
8
8
  // src/menu-button.tsx
9
9
  import { ui, forwardRef } from "@yamada-ui/core";
@@ -88,4 +88,4 @@ export {
88
88
  MenuButton,
89
89
  MenuItemButton
90
90
  };
91
- //# sourceMappingURL=chunk-OSVZBT46.mjs.map
91
+ //# sourceMappingURL=chunk-PMNHFZEM.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/menu-button.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { PopoverTrigger } from \"@yamada-ui/popover\"\nimport { assignRef, cx, dataAttr, funcAll, handlerAll } from \"@yamada-ui/utils\"\nimport type { KeyboardEvent, ReactNode } from \"react\"\nimport { useCallback } from \"react\"\nimport { useMenu } from \"./menu\"\nimport type { MenuIconProps } from \"./menu-item\"\nimport { MenuIcon, useUpstreamMenuItem } from \"./menu-item\"\n\nexport type MenuButtonProps = HTMLUIProps<\"button\">\n\nexport const MenuButton = forwardRef<MenuButtonProps, \"button\">(\n ({ className, children, as: As, ...rest }, ref) => {\n const { onKeyDownRef, onUpstreamRestoreFocus } = useUpstreamMenuItem() ?? {}\n const { isOpen, onOpen, onClose, onFocusFirstItem, onFocusLastItem } =\n useMenu()\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n const actions: Record<string, Function> = {\n Enter: funcAll(onOpen, onFocusFirstItem),\n ArrowDown: funcAll(onOpen, onFocusFirstItem),\n ArrowUp: funcAll(onOpen, onFocusLastItem),\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n\n action()\n },\n [onFocusFirstItem, onFocusLastItem, onOpen],\n )\n\n const onItemKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLLIElement>) => {\n const actions: Record<string, Function | undefined> = {\n ArrowRight: !isOpen ? funcAll(onOpen, onFocusFirstItem) : undefined,\n ArrowLeft: isOpen\n ? funcAll(onUpstreamRestoreFocus, onClose)\n : undefined,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n\n action()\n },\n [isOpen, onOpen, onFocusFirstItem, onUpstreamRestoreFocus, onClose],\n )\n\n assignRef(onKeyDownRef, onItemKeyDown)\n\n const Component = As ? ui(As) : Button\n\n return (\n <PopoverTrigger>\n <Component\n ref={ref}\n className={cx(\"ui-menu\", className)}\n aria-haspopup=\"menu\"\n aria-expanded={isOpen}\n {...rest}\n data-active={dataAttr(isOpen)}\n onKeyDown={handlerAll(rest.onKeyDown, onKeyDown)}\n >\n {children}\n </Component>\n </PopoverTrigger>\n )\n },\n)\n\nconst Button = forwardRef<MenuButtonProps, \"button\">((rest, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.button }\n\n return <ui.button ref={ref} __css={css} {...rest} />\n})\n\nexport type MenuItemButtonProps = MenuButtonProps & {\n innerProps?: HTMLUIProps<\"span\">\n iconProps?: MenuIconProps\n icon?: ReactNode\n}\n\nexport const MenuItemButton = forwardRef<MenuItemButtonProps, \"button\">(\n ({ className, children, innerProps, icon, iconProps, ...rest }, ref) => {\n return (\n <MenuButton\n ref={ref}\n className={cx(\"ui-menu__item-button\", className)}\n flex=\"1\"\n {...rest}\n >\n <ui.span as=\"span\" flex=\"1\" {...innerProps}>\n {children}\n </ui.span>\n\n <MenuIcon {...iconProps}>\n {icon ?? <ChevronIcon fontSize=\"1.5em\" transform=\"rotate(-90deg)\" />}\n </MenuIcon>\n </MenuButton>\n )\n },\n)\n"],"mappings":";;;;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,WAAW,IAAI,UAAU,SAAS,kBAAkB;AAE7D,SAAS,mBAAmB;AA0DpB,cAiCF,YAjCE;AAnDD,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,IAAI,GAAG,KAAK,GAAG,QAAQ;AAdrD;AAeI,UAAM,EAAE,cAAc,uBAAuB,KAAI,yBAAoB,MAApB,YAAyB,CAAC;AAC3E,UAAM,EAAE,QAAQ,QAAQ,SAAS,kBAAkB,gBAAgB,IACjE,QAAQ;AAEV,UAAM,YAAY;AAAA,MAChB,CAAC,OAAsB;AACrB,cAAM,UAAoC;AAAA,UACxC,OAAO,QAAQ,QAAQ,gBAAgB;AAAA,UACvC,WAAW,QAAQ,QAAQ,gBAAgB;AAAA,UAC3C,SAAS,QAAQ,QAAQ,eAAe;AAAA,QAC1C;AAEA,cAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,YAAI,CAAC,OAAQ;AAEb,WAAG,eAAe;AAElB,eAAO;AAAA,MACT;AAAA,MACA,CAAC,kBAAkB,iBAAiB,MAAM;AAAA,IAC5C;AAEA,UAAM,gBAAgB;AAAA,MACpB,CAAC,OAAqC;AACpC,cAAM,UAAgD;AAAA,UACpD,YAAY,CAAC,SAAS,QAAQ,QAAQ,gBAAgB,IAAI;AAAA,UAC1D,WAAW,SACP,QAAQ,wBAAwB,OAAO,IACvC;AAAA,QACN;AAEA,cAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,YAAI,CAAC,OAAQ;AAEb,WAAG,eAAe;AAElB,eAAO;AAAA,MACT;AAAA,MACA,CAAC,QAAQ,QAAQ,kBAAkB,wBAAwB,OAAO;AAAA,IACpE;AAEA,cAAU,cAAc,aAAa;AAErC,UAAM,YAAY,KAAK,GAAG,EAAE,IAAI;AAEhC,WACE,oBAAC,kBACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,SAAS;AAAA,QAClC,iBAAc;AAAA,QACd,iBAAe;AAAA,QACd,GAAG;AAAA,QACJ,eAAa,SAAS,MAAM;AAAA,QAC5B,WAAW,WAAW,KAAK,WAAW,SAAS;AAAA,QAE9C;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,IAAM,SAAS,WAAsC,CAAC,MAAM,QAAQ;AAClE,QAAM,EAAE,OAAO,IAAI,QAAQ;AAE3B,QAAM,MAAmB,EAAE,GAAG,OAAO,OAAO;AAE5C,SAAO,oBAAC,GAAG,QAAH,EAAU,KAAU,OAAO,KAAM,GAAG,MAAM;AACpD,CAAC;AAQM,IAAM,iBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,UAAU,YAAY,MAAM,WAAW,GAAG,KAAK,GAAG,QAAQ;AACtE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,wBAAwB,SAAS;AAAA,QAC/C,MAAK;AAAA,QACJ,GAAG;AAAA,QAEJ;AAAA,8BAAC,GAAG,MAAH,EAAQ,IAAG,QAAO,MAAK,KAAK,GAAG,YAC7B,UACH;AAAA,UAEA,oBAAC,YAAU,GAAG,WACX,gCAAQ,oBAAC,eAAY,UAAS,SAAQ,WAAU,kBAAiB,GACpE;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":[]}
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  useMenu,
4
4
  useMenuDescendantsContext
5
- } from "./chunk-4BK7CQR4.mjs";
5
+ } from "./chunk-DW3JHREI.mjs";
6
6
 
7
7
  // src/menu-list.tsx
8
8
  import { forwardRef } from "@yamada-ui/core";
@@ -67,4 +67,4 @@ var MenuList = forwardRef(
67
67
  export {
68
68
  MenuList
69
69
  };
70
- //# sourceMappingURL=chunk-CPRY7EAI.mjs.map
70
+ //# sourceMappingURL=chunk-RNHC5FXC.mjs.map
@@ -1,8 +1,8 @@
1
1
  "use client"
2
2
  import {
3
3
  ContextMenuTrigger
4
- } from "./chunk-AEUEBWYD.mjs";
5
- import "./chunk-4BK7CQR4.mjs";
4
+ } from "./chunk-JR2DBODI.mjs";
5
+ import "./chunk-DW3JHREI.mjs";
6
6
  export {
7
7
  ContextMenuTrigger
8
8
  };
@@ -48,25 +48,17 @@ var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils.createCon
48
48
  });
49
49
  var isTargetMenuItem = (target) => {
50
50
  var _a;
51
- return (0, import_utils.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menu-item"));
51
+ return (0, import_utils.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menuitem"));
52
52
  };
53
53
  var MenuItem = (0, import_core.forwardRef)(
54
54
  ({
55
- as,
56
55
  className,
57
- type,
58
56
  isDisabled,
59
57
  isFocusable,
60
58
  closeOnSelect: customCloseOnSelect,
61
59
  icon,
62
60
  command,
63
61
  children,
64
- onClick: onClickProp,
65
- onFocus: onFocusProp,
66
- onMouseEnter: onMouseEnterProp,
67
- onMouseMove: onMouseMoveProp,
68
- onMouseLeave: onMouseLeaveProp,
69
- onKeyDown: onKeyDownProp,
70
62
  ...props
71
63
  }, ref) => {
72
64
  var _a;
@@ -84,7 +76,7 @@ var MenuItem = (0, import_core.forwardRef)(
84
76
  } = useMenu();
85
77
  const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
86
78
  const trulyDisabled = isDisabled && !isFocusable;
87
- const buttonRef = (0, import_react.useRef)(null);
79
+ const itemRef = (0, import_react.useRef)(null);
88
80
  const hasDownstreamRef = (0, import_react.useRef)(false);
89
81
  const onKeyDownRef = (0, import_react.useRef)(
90
82
  () => void 0
@@ -92,33 +84,16 @@ var MenuItem = (0, import_core.forwardRef)(
92
84
  const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
93
85
  const [isDownstreamOpen, setDownstreamOpen] = (0, import_react.useState)(false);
94
86
  const isFocused = index === focusedIndex;
95
- const onMouseEnter = (0, import_react.useCallback)(
96
- (event) => {
97
- onMouseEnterProp == null ? void 0 : onMouseEnterProp(event);
98
- if (isDisabled) return;
99
- setFocusedIndex(index);
100
- },
101
- [setFocusedIndex, index, isDisabled, onMouseEnterProp]
102
- );
103
- const onMouseMove = (0, import_react.useCallback)(
104
- (event) => {
105
- onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
106
- if (buttonRef.current && !(0, import_utils.isActiveElement)(buttonRef.current))
107
- onMouseEnter(event);
108
- },
109
- [onMouseEnter, onMouseMoveProp]
110
- );
111
- const onMouseLeave = (0, import_react.useCallback)(
112
- (event) => {
113
- onMouseLeaveProp == null ? void 0 : onMouseLeaveProp(event);
114
- if (isDisabled) return;
115
- setFocusedIndex(-1);
116
- },
117
- [setFocusedIndex, isDisabled, onMouseLeaveProp]
118
- );
87
+ const onMouseOver = (0, import_react.useCallback)(() => {
88
+ if (isDisabled) return;
89
+ setFocusedIndex(index);
90
+ }, [index, isDisabled, setFocusedIndex]);
91
+ const onMouseLeave = (0, import_react.useCallback)(() => {
92
+ if (isDisabled) return;
93
+ setFocusedIndex(-1);
94
+ }, [setFocusedIndex, isDisabled]);
119
95
  const onClick = (0, import_react.useCallback)(
120
96
  (ev) => {
121
- onClickProp == null ? void 0 : onClickProp(ev);
122
97
  if (!isTargetMenuItem(ev.currentTarget)) return;
123
98
  const hasDownstream = hasDownstreamRef.current;
124
99
  if (customCloseOnSelect != null ? customCloseOnSelect : !hasDownstream && generalCloseOnSelect) {
@@ -126,29 +101,18 @@ var MenuItem = (0, import_core.forwardRef)(
126
101
  onUpstreamClose == null ? void 0 : onUpstreamClose();
127
102
  }
128
103
  },
129
- [
130
- onClickProp,
131
- customCloseOnSelect,
132
- generalCloseOnSelect,
133
- onClose,
134
- onUpstreamClose
135
- ]
136
- );
137
- const onFocus = (0, import_react.useCallback)(
138
- (ev) => {
139
- onFocusProp == null ? void 0 : onFocusProp(ev);
140
- setFocusedIndex(index);
141
- },
142
- [onFocusProp, setFocusedIndex, index]
104
+ [customCloseOnSelect, generalCloseOnSelect, onClose, onUpstreamClose]
143
105
  );
106
+ const onFocus = (0, import_react.useCallback)(() => {
107
+ setFocusedIndex(index);
108
+ }, [setFocusedIndex, index]);
144
109
  const onRestoreFocus = (0, import_react.useCallback)(() => {
145
110
  var _a2;
146
- (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
111
+ (_a2 = itemRef.current) == null ? void 0 : _a2.focus();
147
112
  setFocusedIndex(index);
148
113
  }, [setFocusedIndex, index]);
149
114
  const onKeyDown = (0, import_react.useCallback)(
150
115
  (ev) => {
151
- onKeyDownProp == null ? void 0 : onKeyDownProp(ev);
152
116
  const actions = {
153
117
  ArrowLeft: isNested ? (0, import_utils.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
154
118
  };
@@ -158,29 +122,28 @@ var MenuItem = (0, import_core.forwardRef)(
158
122
  ev.stopPropagation();
159
123
  action();
160
124
  },
161
- [onKeyDownProp, onUpstreamRestoreFocus, onClose, isNested]
125
+ [onUpstreamRestoreFocus, onClose, isNested]
162
126
  );
163
127
  const rest = (0, import_use_clickable.useClickable)({
164
128
  focusOnClick: false,
165
129
  ...props,
166
- onClick,
167
- onFocus,
168
- onMouseEnter,
169
- onMouseMove,
170
- onMouseLeave,
171
- onKeyDown: (0, import_utils.handlerAll)(onKeyDown, onKeyDownRef.current),
172
- ref: (0, import_utils.mergeRefs)(register, buttonRef, ref),
130
+ onClick: (0, import_utils.handlerAll)(props.onClick, onClick),
131
+ onFocus: (0, import_utils.handlerAll)(props.onFocus, onFocus),
132
+ onMouseOver: (0, import_utils.handlerAll)(props.onMouseOver, onMouseOver),
133
+ onMouseLeave: (0, import_utils.handlerAll)(props.onMouseLeave, onMouseLeave),
134
+ onKeyDown: (0, import_utils.handlerAll)(props.onKeyDown, onKeyDown, onKeyDownRef.current),
135
+ ref: (0, import_utils.mergeRefs)(register, itemRef, ref),
173
136
  isDisabled,
174
137
  isFocusable
175
138
  });
176
139
  (0, import_utils.useUpdateEffect)(() => {
177
140
  if (!isOpen) return;
178
141
  const id = requestAnimationFrameId.current;
179
- if (isFocused && !trulyDisabled && buttonRef.current) {
142
+ if (isFocused && !trulyDisabled && itemRef.current) {
180
143
  if (id) cancelAnimationFrame(id);
181
144
  requestAnimationFrameId.current = requestAnimationFrame(() => {
182
145
  var _a2;
183
- (_a2 = buttonRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
146
+ (_a2 = itemRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
184
147
  requestAnimationFrameId.current = null;
185
148
  });
186
149
  } else if (menuRef.current && !(0, import_utils.isActiveElement)(menuRef.current)) {
@@ -190,7 +153,6 @@ var MenuItem = (0, import_core.forwardRef)(
190
153
  if (id) cancelAnimationFrame(id);
191
154
  };
192
155
  }, [isFocused, trulyDisabled, menuRef, isOpen]);
193
- type = as || type ? type != null ? type : void 0 : "button";
194
156
  children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { style: { flex: 1 }, children }) : children;
195
157
  const css = { ...styles.item };
196
158
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -207,9 +169,7 @@ var MenuItem = (0, import_core.forwardRef)(
207
169
  {
208
170
  ...rest,
209
171
  ...isDownstreamOpen ? { "data-active": "" } : {},
210
- as,
211
- type,
212
- role: "menu-item",
172
+ role: "menuitem",
213
173
  tabIndex: isFocused ? 0 : -1,
214
174
  className: (0, import_utils.cx)("ui-menu__item", className),
215
175
  __css: css,