@yamada-ui/menu 1.3.12 → 1.3.13-dev-20240917033401

Sign up to get free protection for your applications and to get access to all the features.
Files changed (86) hide show
  1. package/dist/{chunk-5ZWRZF6M.mjs → chunk-DPC5A6DV.mjs} +2 -2
  2. package/dist/chunk-DPC5A6DV.mjs.map +1 -0
  3. package/dist/{chunk-AG6UJA7D.mjs → chunk-HVOHR2NQ.mjs} +2 -2
  4. package/dist/chunk-HVOHR2NQ.mjs.map +1 -0
  5. package/dist/{chunk-G4OMCC2Y.mjs → chunk-M4PPRRRC.mjs} +5 -3
  6. package/dist/chunk-M4PPRRRC.mjs.map +1 -0
  7. package/dist/chunk-NNSVX2GX.mjs +170 -0
  8. package/dist/chunk-NNSVX2GX.mjs.map +1 -0
  9. package/dist/{chunk-73KHS3JD.mjs → chunk-O5D4LR5P.mjs} +2 -2
  10. package/dist/chunk-O5D4LR5P.mjs.map +1 -0
  11. package/dist/chunk-OFCEMPQW.mjs +29 -0
  12. package/dist/chunk-OFCEMPQW.mjs.map +1 -0
  13. package/dist/{chunk-6YBKZRIZ.mjs → chunk-SI3WI4AI.mjs} +3 -3
  14. package/dist/chunk-SI3WI4AI.mjs.map +1 -0
  15. package/dist/chunk-T7CXLEBW.mjs +243 -0
  16. package/dist/chunk-T7CXLEBW.mjs.map +1 -0
  17. package/dist/chunk-ZUOFHOX6.mjs +43 -0
  18. package/dist/chunk-ZUOFHOX6.mjs.map +1 -0
  19. package/dist/chunk-ZV73JKM5.mjs +21 -0
  20. package/dist/chunk-ZV73JKM5.mjs.map +1 -0
  21. package/dist/context-menu-trigger.d.mts +2 -1
  22. package/dist/context-menu-trigger.d.ts +2 -1
  23. package/dist/context-menu-trigger.js +32 -17
  24. package/dist/context-menu-trigger.js.map +1 -1
  25. package/dist/context-menu-trigger.mjs +2 -2
  26. package/dist/context-menu.d.mts +4 -10
  27. package/dist/context-menu.d.ts +4 -10
  28. package/dist/context-menu.js +43 -264
  29. package/dist/context-menu.js.map +1 -1
  30. package/dist/context-menu.mjs +5 -5
  31. package/dist/index.d.mts +1 -2
  32. package/dist/index.d.ts +1 -2
  33. package/dist/index.js +259 -255
  34. package/dist/index.js.map +1 -1
  35. package/dist/index.mjs +16 -11
  36. package/dist/menu-button.d.mts +4 -3
  37. package/dist/menu-button.d.ts +4 -3
  38. package/dist/menu-button.js +55 -58
  39. package/dist/menu-button.js.map +1 -1
  40. package/dist/menu-button.mjs +3 -2
  41. package/dist/menu-context.d.mts +210 -0
  42. package/dist/menu-context.d.ts +210 -0
  43. package/dist/menu-context.js +77 -0
  44. package/dist/menu-context.js.map +1 -0
  45. package/dist/menu-context.mjs +30 -0
  46. package/dist/menu-context.mjs.map +1 -0
  47. package/dist/menu-divider.d.mts +3 -2
  48. package/dist/menu-divider.d.ts +3 -2
  49. package/dist/menu-divider.js +26 -21
  50. package/dist/menu-divider.js.map +1 -1
  51. package/dist/menu-divider.mjs +2 -2
  52. package/dist/menu-group.d.mts +3 -3
  53. package/dist/menu-group.d.ts +3 -3
  54. package/dist/menu-group.js +17 -14
  55. package/dist/menu-group.js.map +1 -1
  56. package/dist/menu-group.mjs +2 -2
  57. package/dist/menu-item.d.mts +14 -19
  58. package/dist/menu-item.d.ts +14 -19
  59. package/dist/menu-item.js +40 -45
  60. package/dist/menu-item.js.map +1 -1
  61. package/dist/menu-item.mjs +4 -7
  62. package/dist/menu-list.d.mts +2 -2
  63. package/dist/menu-list.d.ts +2 -2
  64. package/dist/menu-list.js +23 -20
  65. package/dist/menu-list.js.map +1 -1
  66. package/dist/menu-list.mjs +2 -2
  67. package/dist/menu-option-group.d.mts +6 -7
  68. package/dist/menu-option-group.d.ts +6 -7
  69. package/dist/menu-option-group.js +97 -100
  70. package/dist/menu-option-group.js.map +1 -1
  71. package/dist/menu-option-group.mjs +4 -3
  72. package/dist/menu.d.mts +7 -87
  73. package/dist/menu.d.ts +7 -87
  74. package/dist/menu.js +41 -274
  75. package/dist/menu.js.map +1 -1
  76. package/dist/menu.mjs +4 -13
  77. package/package.json +11 -11
  78. package/dist/chunk-5ZWRZF6M.mjs.map +0 -1
  79. package/dist/chunk-6IPLI42Z.mjs +0 -447
  80. package/dist/chunk-6IPLI42Z.mjs.map +0 -1
  81. package/dist/chunk-6YBKZRIZ.mjs.map +0 -1
  82. package/dist/chunk-73KHS3JD.mjs.map +0 -1
  83. package/dist/chunk-AG6UJA7D.mjs.map +0 -1
  84. package/dist/chunk-G4OMCC2Y.mjs.map +0 -1
  85. package/dist/chunk-ZOUBZWDN.mjs +0 -27
  86. package/dist/chunk-ZOUBZWDN.mjs.map +0 -1
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  useContextMenu
4
- } from "./chunk-6IPLI42Z.mjs";
4
+ } from "./chunk-ZUOFHOX6.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-5ZWRZF6M.mjs.map
46
+ //# sourceMappingURL=chunk-DPC5A6DV.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/context-menu-trigger.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { PopoverAnchor, PopoverTrigger } from \"@yamada-ui/popover\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport type { MouseEvent } from \"react\"\nimport { useState } from \"react\"\nimport { useContextMenu } from \"./menu-context\"\n\ninterface Position {\n top: number\n left: number\n}\n\nexport interface ContextMenuTriggerProps extends HTMLUIProps {}\n\nexport const ContextMenuTrigger = forwardRef<ContextMenuTriggerProps, \"div\">(\n ({ children, className, ...rest }, ref) => {\n const { styles } = useContextMenu()\n const [position, setPosition] = useState<Position>({ top: 0, left: 0 })\n\n const css: CSSUIObject = { ...styles.container }\n\n const onContextMenu = (ev: MouseEvent) => {\n setPosition({ top: ev.clientY, left: ev.clientX })\n }\n\n return (\n <>\n <PopoverAnchor>\n <ui.div\n className=\"ui-context-menu__anchor\"\n style={{ position: \"absolute\", ...position }}\n />\n </PopoverAnchor>\n\n <PopoverTrigger>\n <ui.div\n ref={ref}\n className={cx(\"ui-context-menu\", className)}\n __css={css}\n {...rest}\n onContextMenu={handlerAll(rest.onContextMenu, onContextMenu)}\n >\n {children}\n </ui.div>\n </PopoverTrigger>\n </>\n )\n },\n)\n"],"mappings":";;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,eAAe,sBAAsB;AAC9C,SAAS,IAAI,kBAAkB;AAE/B,SAAS,gBAAgB;AAsBnB,mBAEI,KAFJ;AAZC,IAAM,qBAAqB;AAAA,EAChC,CAAC,EAAE,UAAU,WAAW,GAAG,KAAK,GAAG,QAAQ;AACzC,UAAM,EAAE,OAAO,IAAI,eAAe;AAClC,UAAM,CAAC,UAAU,WAAW,IAAI,SAAmB,EAAE,KAAK,GAAG,MAAM,EAAE,CAAC;AAEtE,UAAM,MAAmB,EAAE,GAAG,OAAO,UAAU;AAE/C,UAAM,gBAAgB,CAAC,OAAmB;AACxC,kBAAY,EAAE,KAAK,GAAG,SAAS,MAAM,GAAG,QAAQ,CAAC;AAAA,IACnD;AAEA,WACE,iCACE;AAAA,0BAAC,iBACC;AAAA,QAAC,GAAG;AAAA,QAAH;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,UAAU,YAAY,GAAG,SAAS;AAAA;AAAA,MAC7C,GACF;AAAA,MAEA,oBAAC,kBACC;AAAA,QAAC,GAAG;AAAA,QAAH;AAAA,UACC;AAAA,UACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,UAC1C,OAAO;AAAA,UACN,GAAG;AAAA,UACJ,eAAe,WAAW,KAAK,eAAe,aAAa;AAAA,UAE1D;AAAA;AAAA,MACH,GACF;AAAA,OACF;AAAA,EAEJ;AACF;","names":[]}
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  useMenu
4
- } from "./chunk-6IPLI42Z.mjs";
4
+ } from "./chunk-ZUOFHOX6.mjs";
5
5
 
6
6
  // src/menu-group.tsx
7
7
  import { ui, forwardRef } from "@yamada-ui/core";
@@ -39,4 +39,4 @@ var MenuGroup = forwardRef(
39
39
  export {
40
40
  MenuGroup
41
41
  };
42
- //# sourceMappingURL=chunk-AG6UJA7D.mjs.map
42
+ //# sourceMappingURL=chunk-HVOHR2NQ.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/menu-group.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMenu } from \"./menu-context\"\n\nexport interface MenuGroupProps extends HTMLUIProps<\"li\"> {\n /**\n * The label of the group.\n */\n label?: string\n /**\n * Props for menu group element.\n */\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport const MenuGroup = forwardRef<MenuGroupProps, \"li\">(\n ({ className, label, children, labelProps, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.group }\n\n return (\n <ui.li\n ref={ref}\n className={cx(\"ui-menu__item\", \"ui-menu__item--group\", className)}\n role=\"group\"\n __css={css}\n {...rest}\n >\n {label ? (\n <ui.span\n className={cx(\"ui-menu__item--group-label\")}\n __css={styles.groupLabel}\n {...labelProps}\n >\n {label}\n </ui.span>\n ) : null}\n\n <ui.ul className=\"ui-menu__item__group\">{children}</ui.ul>\n </ui.li>\n )\n },\n)\n"],"mappings":";;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAqBb,SAQI,KARJ;AAPC,IAAM,YAAY;AAAA,EACvB,CAAC,EAAE,WAAW,OAAO,UAAU,YAAY,GAAG,KAAK,GAAG,QAAQ;AAC5D,UAAM,EAAE,OAAO,IAAI,QAAQ;AAE3B,UAAM,MAAmB,EAAE,GAAG,OAAO,MAAM;AAE3C,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,iBAAiB,wBAAwB,SAAS;AAAA,QAChE,MAAK;AAAA,QACL,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,kBACC;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAW,GAAG,4BAA4B;AAAA,cAC1C,OAAO,OAAO;AAAA,cACb,GAAG;AAAA,cAEH;AAAA;AAAA,UACH,IACE;AAAA,UAEJ,oBAAC,GAAG,IAAH,EAAM,WAAU,wBAAwB,UAAS;AAAA;AAAA;AAAA,IACpD;AAAA,EAEJ;AACF;","names":[]}
@@ -1,9 +1,11 @@
1
1
  "use client"
2
2
  import {
3
- MenuIcon,
3
+ MenuIcon
4
+ } from "./chunk-T7CXLEBW.mjs";
5
+ import {
4
6
  useMenu,
5
7
  useUpstreamMenuItem
6
- } from "./chunk-6IPLI42Z.mjs";
8
+ } from "./chunk-ZUOFHOX6.mjs";
7
9
 
8
10
  // src/menu-button.tsx
9
11
  import { ui, forwardRef } from "@yamada-ui/core";
@@ -94,4 +96,4 @@ export {
94
96
  MenuButton,
95
97
  MenuItemButton
96
98
  };
97
- //# sourceMappingURL=chunk-G4OMCC2Y.mjs.map
99
+ //# sourceMappingURL=chunk-M4PPRRRC.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, useMemo } from \"react\"\nimport { useMenu, useUpstreamMenuItem } from \"./menu-context\"\nimport type { MenuIconProps } from \"./menu-item\"\nimport { MenuIcon } from \"./menu-item\"\n\nexport interface MenuButtonProps extends HTMLUIProps<\"button\"> {}\n\nexport const MenuButton = forwardRef<MenuButtonProps, \"button\">(\n ({ className, children, 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: { [key: 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: { [key: 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 = useMemo(() => (as ? ui(as) : Button), [as])\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 = {\n display: \"inline-flex\",\n appearance: \"none\",\n alignItems: \"center\",\n outline: 0,\n ...styles.button,\n }\n\n return <ui.button ref={ref} __css={css} {...rest} />\n})\n\nexport interface MenuItemButtonProps extends 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,aAAa,eAAe;AA0D7B,cAuCF,YAvCE;AAnDD,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,GAAG,KAAK,GAAG,QAAQ;AAdjD;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,UAAuC;AAAA,UAC3C,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,UAAmD;AAAA,UACvD,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,QAAQ,MAAO,KAAK,GAAG,EAAE,IAAI,QAAS,CAAC,EAAE,CAAC;AAE5D,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;AAAA,IACvB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,GAAG,OAAO;AAAA,EACZ;AAEA,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":[]}
@@ -0,0 +1,170 @@
1
+ "use client"
2
+ import {
3
+ DescendantsContextProvider,
4
+ MenuProvider,
5
+ UpstreamMenuProvider,
6
+ useContextMenu,
7
+ useDescendants,
8
+ useUpstreamMenu,
9
+ useUpstreamMenuItem
10
+ } from "./chunk-ZUOFHOX6.mjs";
11
+
12
+ // src/menu.tsx
13
+ import { useComponentMultiStyle, omitThemeProps } from "@yamada-ui/core";
14
+ import { Popover } from "@yamada-ui/popover";
15
+ import { useDisclosure } from "@yamada-ui/use-disclosure";
16
+ import { funcAll, useUnmountEffect, useUpdateEffect } from "@yamada-ui/utils";
17
+ import { useCallback, useEffect, useId, useRef, useState } from "react";
18
+ import { jsx } from "react/jsx-runtime";
19
+ var Menu = (props) => {
20
+ var _a, _b, _c;
21
+ const { styles: contextMenuStyles } = (_a = useContextMenu()) != null ? _a : {};
22
+ const [styles, mergedProps] = useComponentMultiStyle("Menu", props, {
23
+ isProcessSkip: !!contextMenuStyles,
24
+ styles: contextMenuStyles
25
+ });
26
+ let {
27
+ initialFocusRef,
28
+ closeOnSelect = true,
29
+ closeOnBlur,
30
+ placement,
31
+ duration = 0.2,
32
+ offset,
33
+ onOpen: onOpenProp,
34
+ onClose: onCloseProp,
35
+ ...rest
36
+ } = omitThemeProps(mergedProps);
37
+ const { relatedRef, onUpstreamClose, onDownstreamCloseMapRef } = (_b = useUpstreamMenu()) != null ? _b : {};
38
+ const { setDownstreamOpen, hasDownstreamRef } = (_c = useUpstreamMenuItem()) != null ? _c : {};
39
+ const isNested = !!relatedRef;
40
+ if (isNested) {
41
+ placement != null ? placement : placement = "right-start";
42
+ offset != null ? offset : offset = [-8, 8];
43
+ closeOnBlur != null ? closeOnBlur : closeOnBlur = false;
44
+ } else {
45
+ placement != null ? placement : placement = "bottom-start";
46
+ }
47
+ const descendants = useDescendants();
48
+ const [focusedIndex, setFocusedIndex] = useState(-1);
49
+ const menuRef = useRef(null);
50
+ const timeoutIds = useRef(/* @__PURE__ */ new Set([]));
51
+ const requestAnimationFrameId = useRef(null);
52
+ const onCloseMapRef = useRef(/* @__PURE__ */ new Map());
53
+ const onFocusMenu = useCallback(() => {
54
+ requestAnimationFrame(
55
+ () => {
56
+ var _a2;
57
+ return (_a2 = menuRef.current) == null ? void 0 : _a2.focus({ preventScroll: false });
58
+ }
59
+ );
60
+ }, []);
61
+ const onFocusFirstItem = useCallback(() => {
62
+ const id2 = setTimeout(() => {
63
+ if (initialFocusRef) return;
64
+ const first = descendants.enabledFirstValue();
65
+ if (first) setFocusedIndex(first.index);
66
+ });
67
+ timeoutIds.current.add(id2);
68
+ }, [descendants, initialFocusRef]);
69
+ const onFocusLastItem = useCallback(() => {
70
+ const id2 = setTimeout(() => {
71
+ if (initialFocusRef) return;
72
+ const last = descendants.enabledLastValue();
73
+ if (last) setFocusedIndex(last.index);
74
+ });
75
+ timeoutIds.current.add(id2);
76
+ }, [descendants, initialFocusRef]);
77
+ const onOpenInternal = useCallback(() => {
78
+ onOpenProp == null ? void 0 : onOpenProp();
79
+ if (!isNested) onFocusMenu();
80
+ }, [onOpenProp, isNested, onFocusMenu]);
81
+ const onCloseInternal = useCallback(() => {
82
+ onCloseProp == null ? void 0 : onCloseProp();
83
+ for (const onClose2 of onCloseMapRef.current.values()) {
84
+ onClose2();
85
+ }
86
+ }, [onCloseProp]);
87
+ const id = useId();
88
+ const { isOpen, onOpen, onClose } = useDisclosure({
89
+ ...props,
90
+ onOpen: onOpenInternal,
91
+ onClose: onCloseInternal
92
+ });
93
+ useEffect(() => {
94
+ const onCloseMap = onDownstreamCloseMapRef == null ? void 0 : onDownstreamCloseMapRef.current;
95
+ onCloseMap == null ? void 0 : onCloseMap.set(id, onClose);
96
+ return () => {
97
+ onCloseMap == null ? void 0 : onCloseMap.delete(id);
98
+ };
99
+ }, [id, onClose, onDownstreamCloseMapRef]);
100
+ useEffect(() => {
101
+ if (setDownstreamOpen) setDownstreamOpen(isOpen);
102
+ }, [setDownstreamOpen, isOpen]);
103
+ useEffect(() => {
104
+ if (hasDownstreamRef) hasDownstreamRef.current = true;
105
+ return () => {
106
+ if (hasDownstreamRef) hasDownstreamRef.current = false;
107
+ };
108
+ });
109
+ useUpdateEffect(() => {
110
+ if (!isOpen) setFocusedIndex(-1);
111
+ }, [isOpen]);
112
+ useUnmountEffect(() => {
113
+ timeoutIds.current.forEach((id2) => clearTimeout(id2));
114
+ timeoutIds.current.clear();
115
+ });
116
+ return /* @__PURE__ */ jsx(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(
117
+ UpstreamMenuProvider,
118
+ {
119
+ value: {
120
+ relatedRef: menuRef,
121
+ onDownstreamCloseMapRef: onCloseMapRef,
122
+ onUpstreamClose: funcAll(onUpstreamClose, onClose)
123
+ },
124
+ children: /* @__PURE__ */ jsx(
125
+ MenuProvider,
126
+ {
127
+ value: {
128
+ isOpen,
129
+ onOpen,
130
+ onClose,
131
+ onUpstreamClose,
132
+ onFocusFirstItem,
133
+ onFocusLastItem,
134
+ closeOnSelect,
135
+ focusedIndex,
136
+ setFocusedIndex,
137
+ menuRef,
138
+ requestAnimationFrameId,
139
+ isNested,
140
+ styles
141
+ },
142
+ children: /* @__PURE__ */ jsx(
143
+ Popover,
144
+ {
145
+ ...{
146
+ trigger: isNested ? "hover" : "click",
147
+ ...rest,
148
+ isOpen,
149
+ onOpen,
150
+ onClose,
151
+ placement,
152
+ offset,
153
+ duration,
154
+ initialFocusRef,
155
+ relatedRef,
156
+ closeOnButton: false,
157
+ closeOnBlur
158
+ }
159
+ }
160
+ )
161
+ }
162
+ )
163
+ }
164
+ ) });
165
+ };
166
+
167
+ export {
168
+ Menu
169
+ };
170
+ //# sourceMappingURL=chunk-NNSVX2GX.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/menu.tsx"],"sourcesContent":["import type { ThemeProps } from \"@yamada-ui/core\"\nimport { useComponentMultiStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport { Popover } from \"@yamada-ui/popover\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport { funcAll, useUnmountEffect, useUpdateEffect } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport {\n DescendantsContextProvider,\n MenuProvider,\n UpstreamMenuProvider,\n useContextMenu,\n useDescendants,\n useUpstreamMenu,\n useUpstreamMenuItem,\n} from \"./menu-context\"\n\nexport interface 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 interface MenuProps\n extends 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] = useComponentMultiStyle(\"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"],"mappings":"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","names":["_a","id","onClose"]}
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  useMenu,
4
4
  useMenuDescendantsContext
5
- } from "./chunk-6IPLI42Z.mjs";
5
+ } from "./chunk-ZUOFHOX6.mjs";
6
6
 
7
7
  // src/menu-list.tsx
8
8
  import { forwardRef, ui } from "@yamada-ui/core";
@@ -75,4 +75,4 @@ var MenuList = forwardRef(
75
75
  export {
76
76
  MenuList
77
77
  };
78
- //# sourceMappingURL=chunk-73KHS3JD.mjs.map
78
+ //# sourceMappingURL=chunk-O5D4LR5P.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/menu-list.tsx"],"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"],"mappings":";;;;;;;AACA,SAAS,YAAY,UAAU;AAE/B,SAAS,sBAAsB;AAC/B,SAAS,IAAI,YAAY,iBAAiB;AAE1C,SAAS,mBAAmB;AAmEpB;AA5DD,IAAM,WAAW;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,SAAS,YAAY,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,SAAS,YAAY,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,UAAU,YAAY,MAAM;AAChC,YAAM,QAAQ,YAAY,kBAAkB;AAE5C,UAAI,MAAO,iBAAgB,MAAM,KAAK;AAAA,IACxC,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,UAAM,SAAS,YAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB;AAE1C,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,UAAM,YAAY;AAAA,MAChB,CAAC,OAAsB;AACrB,cAAM,UAAmD;AAAA,UACvD,KAAK,CAACA,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,WAAW,WAAW,6CAAc,WAAW,SAAS;AAAA,QAExD;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YACC,KAAK,UAAU,SAAS,GAAG;AAAA,YAC3B,MAAK;AAAA,YACL,WAAW,GAAG,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":["ev"]}
@@ -0,0 +1,29 @@
1
+ "use client"
2
+ import {
3
+ useMenu
4
+ } from "./chunk-ZUOFHOX6.mjs";
5
+
6
+ // src/menu-divider.tsx
7
+ import { ui, forwardRef } from "@yamada-ui/core";
8
+ import { cx } from "@yamada-ui/utils";
9
+ import { jsx } from "react/jsx-runtime";
10
+ var MenuDivider = forwardRef(
11
+ ({ className, ...rest }, ref) => {
12
+ const { styles } = useMenu();
13
+ const css = { ...styles.divider };
14
+ return /* @__PURE__ */ jsx(
15
+ ui.hr,
16
+ {
17
+ ref,
18
+ className: cx("ui-menu__divider", className),
19
+ __css: css,
20
+ ...rest
21
+ }
22
+ );
23
+ }
24
+ );
25
+
26
+ export {
27
+ MenuDivider
28
+ };
29
+ //# sourceMappingURL=chunk-OFCEMPQW.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/menu-divider.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMenu } from \"./menu-context\"\n\nexport interface MenuDividerProps extends HTMLUIProps<\"hr\"> {}\n\nexport const MenuDivider = forwardRef<MenuDividerProps, \"hr\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.divider }\n\n return (\n <ui.hr\n ref={ref}\n className={cx(\"ui-menu__divider\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n"],"mappings":";;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAYb;AAPC,IAAM,cAAc;AAAA,EACzB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,QAAQ;AAE3B,UAAM,MAAmB,EAAE,GAAG,OAAO,QAAQ;AAE7C,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,oBAAoB,SAAS;AAAA,QAC3C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":[]}
@@ -1,10 +1,10 @@
1
1
  "use client"
2
2
  import {
3
3
  MenuGroup
4
- } from "./chunk-AG6UJA7D.mjs";
4
+ } from "./chunk-HVOHR2NQ.mjs";
5
5
  import {
6
6
  MenuOptionItem
7
- } from "./chunk-6IPLI42Z.mjs";
7
+ } from "./chunk-T7CXLEBW.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-6YBKZRIZ.mjs.map
68
+ //# sourceMappingURL=chunk-SI3WI4AI.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/menu-option-group.tsx"],"sourcesContent":["import type { ComponentArgs } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { cx, getValidChildren, isArray } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, RefAttributes } from \"react\"\nimport { cloneElement, forwardRef, useCallback } from \"react\"\nimport type { MenuGroupProps } from \"./menu-group\"\nimport { MenuGroup } from \"./menu-group\"\nimport { MenuOptionItem } from \"./menu-item\"\n\ninterface MenuOptionGroupOptions<Y extends string | string[] = string> {\n /**\n * The value of the menu item group.\n */\n value?: Y\n /**\n * The initial value of the menu item group.\n */\n defaultValue?: Y\n /**\n * The type of the menu option group.\n *\n * @default 'checkbox'\n */\n type?: \"radio\" | \"checkbox\"\n /**\n * The callback fired when any children checkbox is checked or unchecked.\n */\n onChange?: (value: Y) => void\n}\n\nexport interface MenuOptionGroupProps<Y extends string | string[] = string>\n extends Omit<MenuGroupProps, keyof MenuOptionGroupOptions>,\n MenuOptionGroupOptions<Y> {}\n\nexport const MenuOptionGroup = forwardRef(\n <Y extends string | string[] = string>(\n {\n className,\n value: valueProp,\n defaultValue,\n onChange: onChangeProp,\n type,\n children,\n ...rest\n }: MenuOptionGroupProps<Y>,\n ref: ForwardedRef<HTMLDivElement>,\n ) => {\n const isRadio = type === \"radio\"\n\n defaultValue ??= (isRadio ? \"\" : []) as Y\n\n const [value, setValue] = useControllableState({\n value: valueProp,\n defaultValue,\n onChange: onChangeProp,\n })\n\n const onChange = useCallback(\n (selectedValue: string) => {\n if (isRadio && typeof value === \"string\") setValue(selectedValue as Y)\n\n if (!isRadio && isArray(value)) {\n const nextValue = value.includes(selectedValue)\n ? value.filter((item) => item !== selectedValue)\n : value.concat(selectedValue)\n\n setValue(nextValue as Y)\n }\n },\n [isRadio, value, setValue],\n )\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type !== MenuOptionItem) return child\n\n const onClick = (ev: MouseEvent) => {\n onChange(child.props.value)\n child.props.onClick?.(ev)\n }\n\n const isChecked =\n !isRadio && isArray(value)\n ? value.includes(child.props.value)\n : child.props.value === value\n\n return cloneElement(child, { type, onClick, isChecked })\n })\n\n return (\n <MenuGroup\n ref={ref}\n className={cx(\"ui-menu__item--group--option\", className)}\n {...rest}\n >\n {cloneChildren}\n </MenuGroup>\n )\n },\n) as {\n <Y extends string | string[] = string>(\n props: MenuOptionGroupProps<Y> & RefAttributes<HTMLDivElement>,\n ): JSX.Element\n} & ComponentArgs\n\nMenuOptionGroup.displayName = \"MenuOptionGroup\"\n"],"mappings":";;;;;;;;;AACA,SAAS,4BAA4B;AACrC,SAAS,IAAI,kBAAkB,eAAe;AAE9C,SAAS,cAAc,YAAY,mBAAmB;AAuFhD;AAzDC,IAAM,kBAAkB;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,UAAU,SAAS;AAEzB,yDAAkB,UAAU,KAAK,CAAC;AAElC,UAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,MAC7C,OAAO;AAAA,MACP;AAAA,MACA,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,WAAW;AAAA,MACf,CAAC,kBAA0B;AACzB,YAAI,WAAW,OAAO,UAAU,SAAU,UAAS,aAAkB;AAErE,YAAI,CAAC,WAAW,QAAQ,KAAK,GAAG;AAC9B,gBAAM,YAAY,MAAM,SAAS,aAAa,IAC1C,MAAM,OAAO,CAAC,SAAS,SAAS,aAAa,IAC7C,MAAM,OAAO,aAAa;AAE9B,mBAAS,SAAc;AAAA,QACzB;AAAA,MACF;AAAA,MACA,CAAC,SAAS,OAAO,QAAQ;AAAA,IAC3B;AAEA,UAAM,gBAAgB,iBAAiB,QAAQ;AAE/C,UAAM,gBAAgB,cAAc,IAAI,CAAC,UAAU;AACjD,UAAI,MAAM,SAAS,eAAgB,QAAO;AAE1C,YAAM,UAAU,CAAC,OAAmB;AA7E1C;AA8EQ,iBAAS,MAAM,MAAM,KAAK;AAC1B,0BAAM,OAAM,YAAZ,4BAAsB;AAAA,MACxB;AAEA,YAAM,YACJ,CAAC,WAAW,QAAQ,KAAK,IACrB,MAAM,SAAS,MAAM,MAAM,KAAK,IAChC,MAAM,MAAM,UAAU;AAE5B,aAAO,aAAa,OAAO,EAAE,MAAM,SAAS,UAAU,CAAC;AAAA,IACzD,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,gCAAgC,SAAS;AAAA,QACtD,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAMA,gBAAgB,cAAc;","names":[]}
@@ -0,0 +1,243 @@
1
+ "use client"
2
+ import {
3
+ UpstreamMenuItemProvider,
4
+ useMenu,
5
+ useMenuDescendant,
6
+ useUpstreamMenuItem
7
+ } from "./chunk-ZUOFHOX6.mjs";
8
+
9
+ // src/menu-item.tsx
10
+ import { ui, forwardRef } from "@yamada-ui/core";
11
+ import { useClickable } from "@yamada-ui/use-clickable";
12
+ import {
13
+ ariaAttr,
14
+ cx,
15
+ funcAll,
16
+ handlerAll,
17
+ isActiveElement,
18
+ isHTMLElement,
19
+ mergeRefs,
20
+ useUpdateEffect
21
+ } from "@yamada-ui/utils";
22
+ import { useCallback, useRef, useState } from "react";
23
+ import { jsx, jsxs } from "react/jsx-runtime";
24
+ var isTargetMenuItem = (target) => {
25
+ var _a;
26
+ return isHTMLElement(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menuitem"));
27
+ };
28
+ var MenuItem = forwardRef(
29
+ ({
30
+ className,
31
+ isDisabled,
32
+ isFocusable,
33
+ closeOnSelect: customCloseOnSelect,
34
+ icon,
35
+ command,
36
+ children,
37
+ ...props
38
+ }, ref) => {
39
+ var _a;
40
+ const {
41
+ focusedIndex,
42
+ setFocusedIndex,
43
+ isOpen,
44
+ onClose,
45
+ onUpstreamClose,
46
+ closeOnSelect: generalCloseOnSelect,
47
+ menuRef,
48
+ requestAnimationFrameId,
49
+ isNested,
50
+ styles
51
+ } = useMenu();
52
+ const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
53
+ const trulyDisabled = isDisabled && !isFocusable;
54
+ const itemRef = useRef(null);
55
+ const hasDownstreamRef = useRef(false);
56
+ const onKeyDownRef = useRef(
57
+ () => void 0
58
+ );
59
+ const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
60
+ const [isDownstreamOpen, setDownstreamOpen] = useState(false);
61
+ const isFocused = index === focusedIndex;
62
+ const onMouseOver = useCallback(() => {
63
+ if (isDisabled) return;
64
+ setFocusedIndex(index);
65
+ }, [index, isDisabled, setFocusedIndex]);
66
+ const onMouseLeave = useCallback(() => {
67
+ if (isDisabled) return;
68
+ setFocusedIndex(-1);
69
+ }, [setFocusedIndex, isDisabled]);
70
+ const onClick = useCallback(
71
+ (ev) => {
72
+ if (!isTargetMenuItem(ev.currentTarget)) return;
73
+ const hasDownstream = hasDownstreamRef.current;
74
+ if (customCloseOnSelect != null ? customCloseOnSelect : !hasDownstream && generalCloseOnSelect) {
75
+ onClose();
76
+ onUpstreamClose == null ? void 0 : onUpstreamClose();
77
+ }
78
+ },
79
+ [customCloseOnSelect, generalCloseOnSelect, onClose, onUpstreamClose]
80
+ );
81
+ const onFocus = useCallback(() => {
82
+ setFocusedIndex(index);
83
+ }, [setFocusedIndex, index]);
84
+ const onRestoreFocus = useCallback(() => {
85
+ var _a2;
86
+ (_a2 = itemRef.current) == null ? void 0 : _a2.focus();
87
+ setFocusedIndex(index);
88
+ }, [setFocusedIndex, index]);
89
+ const onKeyDown = useCallback(
90
+ (ev) => {
91
+ const actions = {
92
+ ArrowLeft: isNested ? funcAll(onUpstreamRestoreFocus, onClose) : void 0
93
+ };
94
+ const action = actions[ev.key];
95
+ if (!action) return;
96
+ ev.preventDefault();
97
+ ev.stopPropagation();
98
+ action();
99
+ },
100
+ [onUpstreamRestoreFocus, onClose, isNested]
101
+ );
102
+ const rest = useClickable({
103
+ focusOnClick: false,
104
+ ...props,
105
+ onClick: handlerAll(props.onClick, onClick),
106
+ onFocus: handlerAll(props.onFocus, onFocus),
107
+ onMouseOver: handlerAll(props.onMouseOver, onMouseOver),
108
+ onMouseLeave: handlerAll(props.onMouseLeave, onMouseLeave),
109
+ onKeyDown: handlerAll(props.onKeyDown, onKeyDown, onKeyDownRef.current),
110
+ ref: mergeRefs(register, itemRef, ref),
111
+ isDisabled,
112
+ isFocusable
113
+ });
114
+ useUpdateEffect(() => {
115
+ if (!isOpen) return;
116
+ const id = requestAnimationFrameId.current;
117
+ if (isFocused && !trulyDisabled && itemRef.current) {
118
+ if (id) cancelAnimationFrame(id);
119
+ requestAnimationFrameId.current = requestAnimationFrame(() => {
120
+ var _a2;
121
+ (_a2 = itemRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
122
+ requestAnimationFrameId.current = null;
123
+ });
124
+ } else if (menuRef.current && !isActiveElement(menuRef.current)) {
125
+ menuRef.current.focus({ preventScroll: true });
126
+ }
127
+ return () => {
128
+ if (id) cancelAnimationFrame(id);
129
+ };
130
+ }, [isFocused, trulyDisabled, menuRef, isOpen]);
131
+ children = icon || command ? /* @__PURE__ */ jsx(ui.span, { style: { flex: 1 }, children }) : children;
132
+ const css = {
133
+ textDecoration: "none",
134
+ color: "inherit",
135
+ userSelect: "none",
136
+ display: "flex",
137
+ width: "100%",
138
+ alignItems: "center",
139
+ textAlign: "start",
140
+ flex: "0 0 auto",
141
+ outline: 0,
142
+ gap: "0.75rem",
143
+ ...styles.item
144
+ };
145
+ return /* @__PURE__ */ jsx(
146
+ UpstreamMenuItemProvider,
147
+ {
148
+ value: {
149
+ onKeyDownRef,
150
+ onUpstreamRestoreFocus: onRestoreFocus,
151
+ setDownstreamOpen,
152
+ hasDownstreamRef
153
+ },
154
+ children: /* @__PURE__ */ jsxs(
155
+ ui.li,
156
+ {
157
+ ...rest,
158
+ ...isDownstreamOpen ? { "data-active": "" } : {},
159
+ role: "menuitem",
160
+ tabIndex: isFocused ? 0 : -1,
161
+ className: cx("ui-menu__item", className),
162
+ __css: css,
163
+ children: [
164
+ icon ? /* @__PURE__ */ jsx(MenuIcon, { children: icon }) : null,
165
+ children,
166
+ command ? /* @__PURE__ */ jsx(MenuCommand, { children: command }) : null
167
+ ]
168
+ }
169
+ )
170
+ }
171
+ );
172
+ }
173
+ );
174
+ var MenuOptionItem = forwardRef(
175
+ ({ className, icon, isChecked, closeOnSelect = false, children, ...rest }, ref) => {
176
+ return /* @__PURE__ */ jsxs(
177
+ MenuItem,
178
+ {
179
+ ref,
180
+ className: cx("ui-menu__item--option", className),
181
+ "aria-checked": ariaAttr(isChecked),
182
+ closeOnSelect,
183
+ ...rest,
184
+ children: [
185
+ icon !== null ? /* @__PURE__ */ jsx(MenuIcon, { opacity: isChecked ? 1 : 0, children: icon || /* @__PURE__ */ jsx(CheckIcon, {}) }) : null,
186
+ children
187
+ ]
188
+ }
189
+ );
190
+ }
191
+ );
192
+ var MenuIcon = forwardRef(
193
+ ({ className, ...rest }, ref) => {
194
+ const { styles } = useMenu();
195
+ const css = {
196
+ flexShrink: 0,
197
+ display: "inline-flex",
198
+ justifyContent: "center",
199
+ alignItems: "center",
200
+ fontSize: "0.85em",
201
+ ...styles.icon
202
+ };
203
+ return /* @__PURE__ */ jsx(
204
+ ui.span,
205
+ {
206
+ ref,
207
+ className: cx("ui-menu__item__icon", className),
208
+ __css: css,
209
+ ...rest
210
+ }
211
+ );
212
+ }
213
+ );
214
+ var MenuCommand = forwardRef(
215
+ ({ className, ...rest }, ref) => {
216
+ const { styles } = useMenu();
217
+ const css = { ...styles.command };
218
+ return /* @__PURE__ */ jsx(
219
+ ui.span,
220
+ {
221
+ ref,
222
+ className: cx("ui-menu__item__command", className),
223
+ __css: css,
224
+ ...rest
225
+ }
226
+ );
227
+ }
228
+ );
229
+ var CheckIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ jsx(
230
+ "polygon",
231
+ {
232
+ fill: "currentColor",
233
+ points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
234
+ }
235
+ ) });
236
+
237
+ export {
238
+ MenuItem,
239
+ MenuOptionItem,
240
+ MenuIcon,
241
+ MenuCommand
242
+ };
243
+ //# sourceMappingURL=chunk-T7CXLEBW.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/menu-item.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 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"],"mappings":"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","names":["_a"]}