@yamada-ui/menu 1.3.1 → 1.3.2-dev-20240614141936
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{chunk-2H6C3JQR.mjs → chunk-ASVBQBCN.mjs} +4 -6
- package/dist/{chunk-2H6C3JQR.mjs.map → chunk-ASVBQBCN.mjs.map} +1 -1
- package/dist/{chunk-2FOA2AP4.mjs → chunk-FRICS2IE.mjs} +2 -2
- package/dist/{chunk-NML7NR7X.mjs → chunk-JYDTMSBV.mjs} +17 -33
- package/dist/{chunk-NML7NR7X.mjs.map → chunk-JYDTMSBV.mjs.map} +1 -1
- package/dist/{chunk-TIYBNXK4.mjs → chunk-LRERZ6M4.mjs} +2 -2
- package/dist/{chunk-M3XRN6C3.mjs → chunk-YLFWO2S3.mjs} +5 -7
- package/dist/{chunk-M3XRN6C3.mjs.map → chunk-YLFWO2S3.mjs.map} +1 -1
- package/dist/{chunk-OZY47QK4.mjs → chunk-ZAGY4DYQ.mjs} +2 -2
- package/dist/{chunk-5C3XSMI2.mjs → chunk-ZXPJZVO7.mjs} +7 -12
- package/dist/{chunk-5C3XSMI2.mjs.map → chunk-ZXPJZVO7.mjs.map} +1 -1
- package/dist/context-menu-trigger.mjs +2 -2
- package/dist/context-menu.js +16 -32
- package/dist/context-menu.js.map +1 -1
- package/dist/context-menu.mjs +1 -1
- package/dist/index.js +25 -50
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +7 -7
- package/dist/menu-button.js +9 -18
- package/dist/menu-button.js.map +1 -1
- package/dist/menu-button.mjs +2 -2
- package/dist/menu-divider.mjs +2 -2
- package/dist/menu-group.mjs +2 -2
- package/dist/menu-item.js +7 -14
- package/dist/menu-item.js.map +1 -1
- package/dist/menu-item.mjs +1 -1
- package/dist/menu-list.js +5 -10
- package/dist/menu-list.js.map +1 -1
- package/dist/menu-list.mjs +2 -2
- package/dist/menu-option-group.js +9 -18
- package/dist/menu-option-group.js.map +1 -1
- package/dist/menu-option-group.mjs +3 -3
- package/dist/menu.js +16 -32
- package/dist/menu.js.map +1 -1
- package/dist/menu.mjs +1 -1
- package/package.json +6 -6
- /package/dist/{chunk-2FOA2AP4.mjs.map → chunk-FRICS2IE.mjs.map} +0 -0
- /package/dist/{chunk-TIYBNXK4.mjs.map → chunk-LRERZ6M4.mjs.map} +0 -0
- /package/dist/{chunk-OZY47QK4.mjs.map → chunk-ZAGY4DYQ.mjs.map} +0 -0
@@ -3,7 +3,7 @@ import {
|
|
3
3
|
MenuIcon,
|
4
4
|
useMenu,
|
5
5
|
useUpstreamMenuItem
|
6
|
-
} from "./chunk-
|
6
|
+
} from "./chunk-JYDTMSBV.mjs";
|
7
7
|
|
8
8
|
// src/menu-button.tsx
|
9
9
|
import { ui, forwardRef } from "@yamada-ui/core";
|
@@ -25,8 +25,7 @@ var MenuButton = forwardRef(
|
|
25
25
|
ArrowUp: funcAll(onOpen, onFocusLastItem)
|
26
26
|
};
|
27
27
|
const action = actions[ev.key];
|
28
|
-
if (!action)
|
29
|
-
return;
|
28
|
+
if (!action) return;
|
30
29
|
ev.preventDefault();
|
31
30
|
action();
|
32
31
|
},
|
@@ -39,8 +38,7 @@ var MenuButton = forwardRef(
|
|
39
38
|
ArrowLeft: isOpen ? funcAll(onUpstreamRestoreFocus, onClose) : void 0
|
40
39
|
};
|
41
40
|
const action = actions[ev.key];
|
42
|
-
if (!action)
|
43
|
-
return;
|
41
|
+
if (!action) return;
|
44
42
|
ev.preventDefault();
|
45
43
|
action();
|
46
44
|
},
|
@@ -96,4 +94,4 @@ export {
|
|
96
94
|
MenuButton,
|
97
95
|
MenuItemButton
|
98
96
|
};
|
99
|
-
//# sourceMappingURL=chunk-
|
97
|
+
//# sourceMappingURL=chunk-ASVBQBCN.mjs.map
|
@@ -1 +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) => {\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 = {\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 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,cAuCF,YAvCE;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;
|
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) => {\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 = {\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 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,cAuCF,YAvCE;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,OAAsB;AACrB,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;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":[]}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useContextMenu
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-JYDTMSBV.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-
|
46
|
+
//# sourceMappingURL=chunk-FRICS2IE.mjs.map
|
@@ -105,28 +105,23 @@ var Menu = (props) => {
|
|
105
105
|
}, []);
|
106
106
|
const onFocusFirstItem = useCallback(() => {
|
107
107
|
const id2 = setTimeout(() => {
|
108
|
-
if (initialFocusRef)
|
109
|
-
return;
|
108
|
+
if (initialFocusRef) return;
|
110
109
|
const first = descendants.enabledFirstValue();
|
111
|
-
if (first)
|
112
|
-
setFocusedIndex(first.index);
|
110
|
+
if (first) setFocusedIndex(first.index);
|
113
111
|
});
|
114
112
|
timeoutIds.current.add(id2);
|
115
113
|
}, [descendants, initialFocusRef]);
|
116
114
|
const onFocusLastItem = useCallback(() => {
|
117
115
|
const id2 = setTimeout(() => {
|
118
|
-
if (initialFocusRef)
|
119
|
-
return;
|
116
|
+
if (initialFocusRef) return;
|
120
117
|
const last = descendants.enabledLastValue();
|
121
|
-
if (last)
|
122
|
-
setFocusedIndex(last.index);
|
118
|
+
if (last) setFocusedIndex(last.index);
|
123
119
|
});
|
124
120
|
timeoutIds.current.add(id2);
|
125
121
|
}, [descendants, initialFocusRef]);
|
126
122
|
const onOpenInternal = useCallback(() => {
|
127
123
|
onOpenProp == null ? void 0 : onOpenProp();
|
128
|
-
if (!isNested)
|
129
|
-
onFocusMenu();
|
124
|
+
if (!isNested) onFocusMenu();
|
130
125
|
}, [onOpenProp, isNested, onFocusMenu]);
|
131
126
|
const onCloseInternal = useCallback(() => {
|
132
127
|
onCloseProp == null ? void 0 : onCloseProp();
|
@@ -148,20 +143,16 @@ var Menu = (props) => {
|
|
148
143
|
};
|
149
144
|
}, [id, onClose, onDownstreamCloseMapRef]);
|
150
145
|
useEffect(() => {
|
151
|
-
if (setDownstreamOpen)
|
152
|
-
setDownstreamOpen(isOpen);
|
146
|
+
if (setDownstreamOpen) setDownstreamOpen(isOpen);
|
153
147
|
}, [setDownstreamOpen, isOpen]);
|
154
148
|
useEffect(() => {
|
155
|
-
if (hasDownstreamRef)
|
156
|
-
hasDownstreamRef.current = true;
|
149
|
+
if (hasDownstreamRef) hasDownstreamRef.current = true;
|
157
150
|
return () => {
|
158
|
-
if (hasDownstreamRef)
|
159
|
-
hasDownstreamRef.current = false;
|
151
|
+
if (hasDownstreamRef) hasDownstreamRef.current = false;
|
160
152
|
};
|
161
153
|
});
|
162
154
|
useUpdateEffect(() => {
|
163
|
-
if (!isOpen)
|
164
|
-
setFocusedIndex(-1);
|
155
|
+
if (!isOpen) setFocusedIndex(-1);
|
165
156
|
}, [isOpen]);
|
166
157
|
useUnmountEffect(() => {
|
167
158
|
timeoutIds.current.forEach((id2) => clearTimeout(id2));
|
@@ -273,8 +264,7 @@ var MenuItem = forwardRef(
|
|
273
264
|
const onMouseEnter = useCallback2(
|
274
265
|
(event) => {
|
275
266
|
onMouseEnterProp == null ? void 0 : onMouseEnterProp(event);
|
276
|
-
if (isDisabled)
|
277
|
-
return;
|
267
|
+
if (isDisabled) return;
|
278
268
|
setFocusedIndex(index);
|
279
269
|
},
|
280
270
|
[setFocusedIndex, index, isDisabled, onMouseEnterProp]
|
@@ -290,8 +280,7 @@ var MenuItem = forwardRef(
|
|
290
280
|
const onMouseLeave = useCallback2(
|
291
281
|
(event) => {
|
292
282
|
onMouseLeaveProp == null ? void 0 : onMouseLeaveProp(event);
|
293
|
-
if (isDisabled)
|
294
|
-
return;
|
283
|
+
if (isDisabled) return;
|
295
284
|
setFocusedIndex(-1);
|
296
285
|
},
|
297
286
|
[setFocusedIndex, isDisabled, onMouseLeaveProp]
|
@@ -299,8 +288,7 @@ var MenuItem = forwardRef(
|
|
299
288
|
const onClick = useCallback2(
|
300
289
|
(ev) => {
|
301
290
|
onClickProp == null ? void 0 : onClickProp(ev);
|
302
|
-
if (!isTargetMenuItem(ev.currentTarget))
|
303
|
-
return;
|
291
|
+
if (!isTargetMenuItem(ev.currentTarget)) return;
|
304
292
|
const hasDownstream = hasDownstreamRef.current;
|
305
293
|
if (customCloseOnSelect != null ? customCloseOnSelect : !hasDownstream && generalCloseOnSelect) {
|
306
294
|
onClose();
|
@@ -334,8 +322,7 @@ var MenuItem = forwardRef(
|
|
334
322
|
ArrowLeft: isNested ? funcAll2(onUpstreamRestoreFocus, onClose) : void 0
|
335
323
|
};
|
336
324
|
const action = actions[ev.key];
|
337
|
-
if (!action)
|
338
|
-
return;
|
325
|
+
if (!action) return;
|
339
326
|
ev.preventDefault();
|
340
327
|
ev.stopPropagation();
|
341
328
|
action();
|
@@ -356,12 +343,10 @@ var MenuItem = forwardRef(
|
|
356
343
|
isFocusable
|
357
344
|
});
|
358
345
|
useUpdateEffect2(() => {
|
359
|
-
if (!isOpen)
|
360
|
-
return;
|
346
|
+
if (!isOpen) return;
|
361
347
|
const id = requestAnimationFrameId.current;
|
362
348
|
if (isFocused && !trulyDisabled && buttonRef.current) {
|
363
|
-
if (id)
|
364
|
-
cancelAnimationFrame(id);
|
349
|
+
if (id) cancelAnimationFrame(id);
|
365
350
|
requestAnimationFrameId.current = requestAnimationFrame(() => {
|
366
351
|
var _a2;
|
367
352
|
(_a2 = buttonRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
|
@@ -371,8 +356,7 @@ var MenuItem = forwardRef(
|
|
371
356
|
menuRef.current.focus({ preventScroll: true });
|
372
357
|
}
|
373
358
|
return () => {
|
374
|
-
if (id)
|
375
|
-
cancelAnimationFrame(id);
|
359
|
+
if (id) cancelAnimationFrame(id);
|
376
360
|
};
|
377
361
|
}, [isFocused, trulyDisabled, menuRef, isOpen]);
|
378
362
|
type = as || type ? type != null ? type : void 0 : "button";
|
@@ -500,4 +484,4 @@ export {
|
|
500
484
|
useContextMenu,
|
501
485
|
ContextMenu
|
502
486
|
};
|
503
|
-
//# sourceMappingURL=chunk-
|
487
|
+
//# sourceMappingURL=chunk-JYDTMSBV.mjs.map
|
@@ -1 +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 FocusEvent,\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<HTMLButtonElement>>\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(\"menu-item\")\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<\"button\"> & MenuItemOptions\n\nexport const MenuItem = forwardRef<MenuItemProps, \"button\">(\n (\n {\n as,\n className,\n type,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n icon,\n command,\n children,\n onClick: onClickProp,\n onFocus: onFocusProp,\n onMouseEnter: onMouseEnterProp,\n onMouseMove: onMouseMoveProp,\n onMouseLeave: onMouseLeaveProp,\n onKeyDown: onKeyDownProp,\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 buttonRef = useRef<HTMLButtonElement>(null)\n const hasDownstreamRef = useRef<boolean>(false)\n const onKeyDownRef = useRef<KeyboardEventHandler<HTMLButtonElement>>(\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 onMouseEnter = useCallback(\n (event: any) => {\n onMouseEnterProp?.(event)\n\n if (isDisabled) return\n\n setFocusedIndex(index)\n },\n [setFocusedIndex, index, isDisabled, onMouseEnterProp],\n )\n\n const onMouseMove = useCallback(\n (event: any) => {\n onMouseMoveProp?.(event)\n\n if (buttonRef.current && !isActiveElement(buttonRef.current))\n onMouseEnter(event)\n },\n [onMouseEnter, onMouseMoveProp],\n )\n\n const onMouseLeave = useCallback(\n (event: any) => {\n onMouseLeaveProp?.(event)\n\n if (isDisabled) return\n\n setFocusedIndex(-1)\n },\n [setFocusedIndex, isDisabled, onMouseLeaveProp],\n )\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLButtonElement>) => {\n onClickProp?.(ev)\n\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 [\n onClickProp,\n customCloseOnSelect,\n generalCloseOnSelect,\n onClose,\n onUpstreamClose,\n ],\n )\n\n const onFocus = useCallback(\n (ev: FocusEvent<HTMLButtonElement>) => {\n onFocusProp?.(ev)\n\n setFocusedIndex(index)\n },\n [onFocusProp, setFocusedIndex, index],\n )\n\n const onRestoreFocus = useCallback(() => {\n buttonRef.current?.focus()\n\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLButtonElement>) => {\n onKeyDownProp?.(ev)\n\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 [onKeyDownProp, onUpstreamRestoreFocus, onClose, isNested],\n )\n\n const rest = useClickable<HTMLButtonElement>({\n focusOnClick: false,\n ...props,\n onClick,\n onFocus,\n onMouseEnter,\n onMouseMove,\n onMouseLeave,\n onKeyDown: handlerAll(onKeyDown, onKeyDownRef.current),\n ref: mergeRefs(register, buttonRef, ref),\n isDisabled,\n isFocusable,\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n const id = requestAnimationFrameId.current\n\n if (isFocused && !trulyDisabled && buttonRef.current) {\n if (id) cancelAnimationFrame(id)\n\n requestAnimationFrameId.current = requestAnimationFrame(() => {\n buttonRef.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 type = as || type ? type ?? undefined : \"button\"\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 as={as}\n type={type}\n role=\"menu-item\"\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":";;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA,iBAAAA;AAAA,EACA;AAAA,EACA,WAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAAC;AAAA,OACK;AAaP,SAAS,eAAAC,cAAa,UAAAC,SAAQ,YAAAC,iBAAgB;;;ACzB9C,SAAS,0BAAAC,yBAAwB,kBAAAC,uBAAsB;AAEvD,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B;AAAA,EACE,iBAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAQP,SAAS,aAAa,WAAW,OAAO,QAAQ,gBAAgB;;;AClBhE,SAAS,wBAAwB,sBAAsB;AACvD,SAAS,qBAAqB;AAmCxB;AA1BN,IAAM,CAAC,qBAAqB,cAAc,IAAI;AAAA,EAC5C;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AACF;AAeO,IAAM,cAAoC,CAAC,UAAU;AAC1D,QAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,eAAe,KAAK;AACzE,QAAM,EAAE,GAAG,KAAK,IAAI,eAAe,WAAW;AAE9C,SACE,oBAAC,uBAAoB,OAAO,EAAE,OAAO,GACnC,8BAAC,QAAK,SAAQ,eAAe,GAAG,MAAM,GACxC;AAEJ;;;AD+LU,gBAAAC,YAAA;AAhNV,IAAM;AAAA,EACJ;AAAA,EACA,uBAAuB;AAAA,EACvB;AAAA,EACA,eAAe;AACjB,IAAI,iBAA8B;AAmBlC,IAAM,CAAC,cAAc,OAAO,IAAIC,eAA2B;AAAA,EACzD,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAQM,IAAM,CAAC,sBAAsB,eAAe,IACjDA,eAAmC;AAAA,EACjC,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAsBI,IAAM,OAAsB,CAAC,UAAU;AApF9C;AAqFE,QAAM,EAAE,QAAQ,kBAAkB,KAAI,oBAAe,MAAf,YAAoB,CAAC;AAC3D,QAAM,CAAC,QAAQ,WAAW,IAAIC,wBAAuB,QAAQ,OAAO;AAAA,IAClE,eAAe,CAAC,CAAC;AAAA,IACjB,QAAQ;AAAA,EACV,CAAC;AACD,MAAI;AAAA,IACF;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAG;AAAA,EACL,IAAIC,gBAAe,WAAW;AAC9B,QAAM,EAAE,YAAY,iBAAiB,wBAAwB,KAC3D,qBAAgB,MAAhB,YAAqB,CAAC;AACxB,QAAM,EAAE,mBAAmB,iBAAiB,KAAI,yBAAoB,MAApB,YAAyB,CAAC;AAC1E,QAAM,WAAW,CAAC,CAAC;AAEnB,MAAI,UAAU;AACZ,gDAAc;AACd,uCAAW,CAAC,IAAI,CAAC;AACjB,sDAAgB;AAAA,EAClB,OAAO;AACL,gDAAc;AAAA,EAChB;AAEA,QAAM,cAAc,eAAe;AAEnC,QAAM,CAAC,cAAc,eAAe,IAAI,SAAiB,EAAE;AAE3D,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,aAAa,OAAiB,oBAAI,IAAI,CAAC,CAAC,CAAC;AAC/C,QAAM,0BAA0B,OAAsB,IAAI;AAC1D,QAAM,gBAAgB,OAAgC,oBAAI,IAAI,CAAC;AAE/D,QAAM,cAAc,YAAY,MAAM;AACpC;AAAA,MAAsB,MAAG;AA5H7B,YAAAC;AA6HM,gBAAAA,MAAA,QAAQ,YAAR,gBAAAA,IAAiB,MAAM,EAAE,eAAe,MAAM;AAAA;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,YAAY,MAAM;AACzC,UAAMC,MAAK,WAAW,MAAM;AAC1B,UAAI;AAAiB;AAErB,YAAM,QAAQ,YAAY,kBAAkB;AAE5C,UAAI;AAAO,wBAAgB,MAAM,KAAK;AAAA,IACxC,CAAC;AAED,eAAW,QAAQ,IAAIA,GAAE;AAAA,EAC3B,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,QAAM,kBAAkB,YAAY,MAAM;AACxC,UAAMA,MAAK,WAAW,MAAM;AAC1B,UAAI;AAAiB;AAErB,YAAM,OAAO,YAAY,iBAAiB;AAE1C,UAAI;AAAM,wBAAgB,KAAK,KAAK;AAAA,IACtC,CAAC;AAED,eAAW,QAAQ,IAAIA,GAAE;AAAA,EAC3B,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,QAAM,iBAAiB,YAAY,MAAM;AACvC;AAEA,QAAI,CAAC;AAAU,kBAAY;AAAA,EAC7B,GAAG,CAAC,YAAY,UAAU,WAAW,CAAC;AAEtC,QAAM,kBAAkB,YAAY,MAAM;AACxC;AAEA,eAAWC,YAAW,cAAc,QAAQ,OAAO,GAAG;AACpD,MAAAA,SAAQ;AAAA,IACV;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,KAAK,MAAM;AACjB,QAAM,EAAE,QAAQ,QAAQ,QAAQ,IAAI,cAAc;AAAA,IAChD,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,SAAS;AAAA,EACX,CAAC;AAED,YAAU,MAAM;AACd,UAAM,aAAa,mEAAyB;AAE5C,6CAAY,IAAI,IAAI;AAEpB,WAAO,MAAM;AACX,+CAAY,OAAO;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,IAAI,SAAS,uBAAuB,CAAC;AAEzC,YAAU,MAAM;AACd,QAAI;AAAmB,wBAAkB,MAAM;AAAA,EACjD,GAAG,CAAC,mBAAmB,MAAM,CAAC;AAE9B,YAAU,MAAM;AACd,QAAI;AAAkB,uBAAiB,UAAU;AAEjD,WAAO,MAAM;AACX,UAAI;AAAkB,yBAAiB,UAAU;AAAA,IACnD;AAAA,EACF,CAAC;AAED,kBAAgB,MAAM;AACpB,QAAI,CAAC;AAAQ,sBAAgB,EAAE;AAAA,EACjC,GAAG,CAAC,MAAM,CAAC;AAEX,mBAAiB,MAAM;AACrB,eAAW,QAAQ,QAAQ,CAACD,QAAO,aAAaA,GAAE,CAAC;AACnD,eAAW,QAAQ,MAAM;AAAA,EAC3B,CAAC;AAED,SACE,gBAAAE,KAAC,8BAA2B,OAAO,aACjC,0BAAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,yBAAyB;AAAA,QACzB,iBAAiB,QAAQ,iBAAiB,OAAO;AAAA,MACnD;AAAA,MAEA,0BAAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UAEA,0BAAAA;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,gBACF,SAAS,WAAW,UAAU;AAAA,gBAC9B,GAAG;AAAA,gBACH;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,eAAe;AAAA,gBACf;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF;AAEJ;;;ADQQ,gBAAAC,MA4BA,YA5BA;AA/ND,IAAM,CAAC,0BAA0B,mBAAmB,IACzDC,eAAuC;AAAA,EACrC,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAEH,IAAM,mBAAmB,CAAC,WAA+B;AA1CzD;AA2CE,SACE,cAAc,MAAM,KACpB,CAAC,GAAC,sCAAQ,aAAa,YAArB,mBAA8B,WAAW;AAE/C;AAiCO,IAAM,WAAW;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT,cAAc;AAAA,IACd,aAAa;AAAA,IACb,cAAc;AAAA,IACd,WAAW;AAAA,IACX,GAAG;AAAA,EACL,GACA,QACG;AArGP;AAsGI,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,QAAQ;AACZ,UAAM,EAAE,uBAAuB,KAAI,yBAAoB,MAApB,YAAyB,CAAC;AAE7D,UAAM,gBAAgB,cAAc,CAAC;AAErC,UAAM,YAAYC,QAA0B,IAAI;AAChD,UAAM,mBAAmBA,QAAgB,KAAK;AAC9C,UAAM,eAAeA;AAAA,MACnB,MAAM;AAAA,IACR;AACA,UAAM,EAAE,OAAO,SAAS,IAAI,kBAAkB,EAAE,UAAU,cAAc,CAAC;AACzE,UAAM,CAAC,kBAAkB,iBAAiB,IAAIC,UAAkB,KAAK;AAErE,UAAM,YAAY,UAAU;AAE5B,UAAM,eAAeC;AAAA,MACnB,CAAC,UAAe;AACd,6DAAmB;AAEnB,YAAI;AAAY;AAEhB,wBAAgB,KAAK;AAAA,MACvB;AAAA,MACA,CAAC,iBAAiB,OAAO,YAAY,gBAAgB;AAAA,IACvD;AAEA,UAAM,cAAcA;AAAA,MAClB,CAAC,UAAe;AACd,2DAAkB;AAElB,YAAI,UAAU,WAAW,CAAC,gBAAgB,UAAU,OAAO;AACzD,uBAAa,KAAK;AAAA,MACtB;AAAA,MACA,CAAC,cAAc,eAAe;AAAA,IAChC;AAEA,UAAM,eAAeA;AAAA,MACnB,CAAC,UAAe;AACd,6DAAmB;AAEnB,YAAI;AAAY;AAEhB,wBAAgB,EAAE;AAAA,MACpB;AAAA,MACA,CAAC,iBAAiB,YAAY,gBAAgB;AAAA,IAChD;AAEA,UAAM,UAAUA;AAAA,MACd,CAAC,OAAsC;AACrC,mDAAc;AAEd,YAAI,CAAC,iBAAiB,GAAG,aAAa;AAAG;AAEzC,cAAM,gBAAgB,iBAAiB;AAEvC,YAAI,oDAAwB,CAAC,iBAAiB,sBAAuB;AACnE,kBAAQ;AACR;AAAA,QACF;AAAA,MACF;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,UAAM,UAAUA;AAAA,MACd,CAAC,OAAsC;AACrC,mDAAc;AAEd,wBAAgB,KAAK;AAAA,MACvB;AAAA,MACA,CAAC,aAAa,iBAAiB,KAAK;AAAA,IACtC;AAEA,UAAM,iBAAiBA,aAAY,MAAM;AA/L7C,UAAAC;AAgMM,OAAAA,MAAA,UAAU,YAAV,gBAAAA,IAAmB;AAEnB,sBAAgB,KAAK;AAAA,IACvB,GAAG,CAAC,iBAAiB,KAAK,CAAC;AAE3B,UAAM,YAAYD;AAAA,MAChB,CAAC,OAAyC;AACxC,uDAAgB;AAEhB,cAAM,UAAgD;AAAA,UACpD,WAAW,WACPE,SAAQ,wBAAwB,OAAO,IACvC;AAAA,QACN;AAEA,cAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,YAAI,CAAC;AAAQ;AAEb,WAAG,eAAe;AAClB,WAAG,gBAAgB;AAEnB,eAAO;AAAA,MACT;AAAA,MACA,CAAC,eAAe,wBAAwB,SAAS,QAAQ;AAAA,IAC3D;AAEA,UAAM,OAAO,aAAgC;AAAA,MAC3C,cAAc;AAAA,MACd,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,WAAW,WAAW,aAAa,OAAO;AAAA,MACrD,KAAK,UAAU,UAAU,WAAW,GAAG;AAAA,MACvC;AAAA,MACA;AAAA,IACF,CAAC;AAED,IAAAC,iBAAgB,MAAM;AACpB,UAAI,CAAC;AAAQ;AAEb,YAAM,KAAK,wBAAwB;AAEnC,UAAI,aAAa,CAAC,iBAAiB,UAAU,SAAS;AACpD,YAAI;AAAI,+BAAqB,EAAE;AAE/B,gCAAwB,UAAU,sBAAsB,MAAM;AAjPtE,cAAAF;AAkPU,WAAAA,MAAA,UAAU,YAAV,gBAAAA,IAAmB,MAAM,EAAE,eAAe,KAAK;AAE/C,kCAAwB,UAAU;AAAA,QACpC,CAAC;AAAA,MACH,WAAW,QAAQ,WAAW,CAAC,gBAAgB,QAAQ,OAAO,GAAG;AAC/D,gBAAQ,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,MAC/C;AAEA,aAAO,MAAM;AACX,YAAI;AAAI,+BAAqB,EAAE;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,WAAW,eAAe,SAAS,MAAM,CAAC;AAE9C,WAAO,MAAM,OAAO,sBAAQ,SAAY;AAExC,eACE,QAAQ,UACN,gBAAAL,KAAC,GAAG,MAAH,EAAQ,OAAO,EAAE,MAAM,EAAE,GAAI,UAAS,IAEvC;AAGJ,UAAM,MAAmB;AAAA,MACvB,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,MACT,KAAK;AAAA,MACL,GAAG,OAAO;AAAA,IACZ;AAEA,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL;AAAA,UACA,wBAAwB;AAAA,UACxB;AAAA,UACA;AAAA,QACF;AAAA,QAEA;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YACE,GAAG;AAAA,YACH,GAAI,mBAAmB,EAAE,eAAe,GAAG,IAAI,CAAC;AAAA,YACjD;AAAA,YACA;AAAA,YACA,MAAK;AAAA,YACL,UAAU,YAAY,IAAI;AAAA,YAC1B,WAAW,GAAG,iBAAiB,SAAS;AAAA,YACxC,OAAO;AAAA,YAEN;AAAA,qBAAO,gBAAAA,KAAC,YAAU,gBAAK,IAAc;AAAA,cACrC;AAAA,cACA,UAAU,gBAAAA,KAAC,eAAa,mBAAQ,IAAiB;AAAA;AAAA;AAAA,QACpD;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AA0BO,IAAM,iBAAiB;AAAA,EAC5B,CACE,EAAE,WAAW,MAAM,WAAW,gBAAgB,OAAO,UAAU,GAAG,KAAK,GACvE,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,yBAAyB,SAAS;AAAA,QAChD,gBAAc,SAAS,SAAS;AAAA,QAChC;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,mBAAS,OACR,gBAAAA,KAAC,YAAS,SAAS,YAAY,IAAI,GAChC,kBAAQ,gBAAAA,KAAC,aAAU,GACtB,IACE;AAAA,UACH;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAIO,IAAM,WAAW;AAAA,EACtB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,QAAQ;AAE3B,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,GAAG,OAAO;AAAA,IACZ;AAEA,WACE,gBAAAA;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAIO,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,gBAAAA;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,0BAA0B,SAAS;AAAA,QACjD,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,IAAM,YAAgB,MACpB,gBAAAA,KAAC,SAAI,SAAQ,aAAY,OAAM,OAAM,QAAO,OAC1C,0BAAAA;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL,QAAO;AAAA;AACT,GACF;","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
|
+
{"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 FocusEvent,\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<HTMLButtonElement>>\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(\"menu-item\")\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<\"button\"> & MenuItemOptions\n\nexport const MenuItem = forwardRef<MenuItemProps, \"button\">(\n (\n {\n as,\n className,\n type,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n icon,\n command,\n children,\n onClick: onClickProp,\n onFocus: onFocusProp,\n onMouseEnter: onMouseEnterProp,\n onMouseMove: onMouseMoveProp,\n onMouseLeave: onMouseLeaveProp,\n onKeyDown: onKeyDownProp,\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 buttonRef = useRef<HTMLButtonElement>(null)\n const hasDownstreamRef = useRef<boolean>(false)\n const onKeyDownRef = useRef<KeyboardEventHandler<HTMLButtonElement>>(\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 onMouseEnter = useCallback(\n (event: any) => {\n onMouseEnterProp?.(event)\n\n if (isDisabled) return\n\n setFocusedIndex(index)\n },\n [setFocusedIndex, index, isDisabled, onMouseEnterProp],\n )\n\n const onMouseMove = useCallback(\n (event: any) => {\n onMouseMoveProp?.(event)\n\n if (buttonRef.current && !isActiveElement(buttonRef.current))\n onMouseEnter(event)\n },\n [onMouseEnter, onMouseMoveProp],\n )\n\n const onMouseLeave = useCallback(\n (event: any) => {\n onMouseLeaveProp?.(event)\n\n if (isDisabled) return\n\n setFocusedIndex(-1)\n },\n [setFocusedIndex, isDisabled, onMouseLeaveProp],\n )\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLButtonElement>) => {\n onClickProp?.(ev)\n\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 [\n onClickProp,\n customCloseOnSelect,\n generalCloseOnSelect,\n onClose,\n onUpstreamClose,\n ],\n )\n\n const onFocus = useCallback(\n (ev: FocusEvent<HTMLButtonElement>) => {\n onFocusProp?.(ev)\n\n setFocusedIndex(index)\n },\n [onFocusProp, setFocusedIndex, index],\n )\n\n const onRestoreFocus = useCallback(() => {\n buttonRef.current?.focus()\n\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLButtonElement>) => {\n onKeyDownProp?.(ev)\n\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 [onKeyDownProp, onUpstreamRestoreFocus, onClose, isNested],\n )\n\n const rest = useClickable<HTMLButtonElement>({\n focusOnClick: false,\n ...props,\n onClick,\n onFocus,\n onMouseEnter,\n onMouseMove,\n onMouseLeave,\n onKeyDown: handlerAll(onKeyDown, onKeyDownRef.current),\n ref: mergeRefs(register, buttonRef, ref),\n isDisabled,\n isFocusable,\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n const id = requestAnimationFrameId.current\n\n if (isFocused && !trulyDisabled && buttonRef.current) {\n if (id) cancelAnimationFrame(id)\n\n requestAnimationFrameId.current = requestAnimationFrame(() => {\n buttonRef.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 type = as || type ? type ?? undefined : \"button\"\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 as={as}\n type={type}\n role=\"menu-item\"\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
|
useMenu
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-JYDTMSBV.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-
|
27
|
+
//# sourceMappingURL=chunk-LRERZ6M4.mjs.map
|
@@ -1,10 +1,10 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
MenuGroup
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-ZAGY4DYQ.mjs";
|
5
5
|
import {
|
6
6
|
MenuOptionItem
|
7
|
-
} from "./chunk-
|
7
|
+
} from "./chunk-JYDTMSBV.mjs";
|
8
8
|
|
9
9
|
// src/menu-option-group.tsx
|
10
10
|
import { useControllableState } from "@yamada-ui/use-controllable-state";
|
@@ -30,8 +30,7 @@ var MenuOptionGroup = forwardRef(
|
|
30
30
|
});
|
31
31
|
const onChange = useCallback(
|
32
32
|
(selectedValue) => {
|
33
|
-
if (isRadio && typeof value === "string")
|
34
|
-
setValue(selectedValue);
|
33
|
+
if (isRadio && typeof value === "string") setValue(selectedValue);
|
35
34
|
if (!isRadio && isArray(value)) {
|
36
35
|
const nextValue = value.includes(selectedValue) ? value.filter((item) => item !== selectedValue) : value.concat(selectedValue);
|
37
36
|
setValue(nextValue);
|
@@ -41,8 +40,7 @@ var MenuOptionGroup = forwardRef(
|
|
41
40
|
);
|
42
41
|
const validChildren = getValidChildren(children);
|
43
42
|
const cloneChildren = validChildren.map((child) => {
|
44
|
-
if (child.type !== MenuOptionItem)
|
45
|
-
return child;
|
43
|
+
if (child.type !== MenuOptionItem) return child;
|
46
44
|
const onClick = (ev) => {
|
47
45
|
var _a, _b;
|
48
46
|
onChange(child.props.value);
|
@@ -67,4 +65,4 @@ MenuOptionGroup.displayName = "MenuOptionGroup";
|
|
67
65
|
export {
|
68
66
|
MenuOptionGroup
|
69
67
|
};
|
70
|
-
//# sourceMappingURL=chunk-
|
68
|
+
//# sourceMappingURL=chunk-YLFWO2S3.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/menu-option-group.tsx"],"sourcesContent":["import type { ComponentArgs, HTMLUIProps } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { cx, getValidChildren, isArray } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, Ref } from \"react\"\nimport { cloneElement, forwardRef, useCallback } from \"react\"\nimport { MenuGroup } from \"./menu-group\"\nimport { MenuOptionItem } from \"./menu-item\"\n\ntype MenuOptionGroupOptions<Y extends string | string[] = string> = {\n /**\n * The label of the option group.\n */\n label?: 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 type MenuOptionGroupProps<Y extends string | string[] = string> = Omit<\n HTMLUIProps<\"div\">,\n keyof MenuOptionGroupOptions\n> &\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> & { ref?: Ref<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;AA4FhD;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
|
1
|
+
{"version":3,"sources":["../src/menu-option-group.tsx"],"sourcesContent":["import type { ComponentArgs, HTMLUIProps } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { cx, getValidChildren, isArray } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, Ref } from \"react\"\nimport { cloneElement, forwardRef, useCallback } from \"react\"\nimport { MenuGroup } from \"./menu-group\"\nimport { MenuOptionItem } from \"./menu-item\"\n\ntype MenuOptionGroupOptions<Y extends string | string[] = string> = {\n /**\n * The label of the option group.\n */\n label?: 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 type MenuOptionGroupProps<Y extends string | string[] = string> = Omit<\n HTMLUIProps<\"div\">,\n keyof MenuOptionGroupOptions\n> &\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> & { ref?: Ref<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;AA4FhD;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;AAlF1C;AAmFQ,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":[]}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useMenu
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-JYDTMSBV.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-
|
41
|
+
//# sourceMappingURL=chunk-ZAGY4DYQ.mjs.map
|
@@ -2,7 +2,7 @@
|
|
2
2
|
import {
|
3
3
|
useMenu,
|
4
4
|
useMenuDescendantsContext
|
5
|
-
} from "./chunk-
|
5
|
+
} from "./chunk-JYDTMSBV.mjs";
|
6
6
|
|
7
7
|
// src/menu-list.tsx
|
8
8
|
import { forwardRef } from "@yamada-ui/core";
|
@@ -16,23 +16,19 @@ var MenuList = forwardRef(
|
|
16
16
|
const descendants = useMenuDescendantsContext();
|
17
17
|
const onNext = useCallback(() => {
|
18
18
|
const next = descendants.enabledNextValue(focusedIndex);
|
19
|
-
if (next)
|
20
|
-
setFocusedIndex(next.index);
|
19
|
+
if (next) setFocusedIndex(next.index);
|
21
20
|
}, [descendants, focusedIndex, setFocusedIndex]);
|
22
21
|
const onPrev = useCallback(() => {
|
23
22
|
const prev = descendants.enabledPrevValue(focusedIndex);
|
24
|
-
if (prev)
|
25
|
-
setFocusedIndex(prev.index);
|
23
|
+
if (prev) setFocusedIndex(prev.index);
|
26
24
|
}, [descendants, focusedIndex, setFocusedIndex]);
|
27
25
|
const onFirst = useCallback(() => {
|
28
26
|
const first = descendants.enabledFirstValue();
|
29
|
-
if (first)
|
30
|
-
setFocusedIndex(first.index);
|
27
|
+
if (first) setFocusedIndex(first.index);
|
31
28
|
}, [descendants, setFocusedIndex]);
|
32
29
|
const onLast = useCallback(() => {
|
33
30
|
const last = descendants.enabledLastValue();
|
34
|
-
if (last)
|
35
|
-
setFocusedIndex(last.index);
|
31
|
+
if (last) setFocusedIndex(last.index);
|
36
32
|
}, [descendants, setFocusedIndex]);
|
37
33
|
const onKeyDown = useCallback(
|
38
34
|
(ev) => {
|
@@ -45,8 +41,7 @@ var MenuList = forwardRef(
|
|
45
41
|
End: onLast
|
46
42
|
};
|
47
43
|
const action = actions[ev.key];
|
48
|
-
if (!action)
|
49
|
-
return;
|
44
|
+
if (!action) return;
|
50
45
|
ev.preventDefault();
|
51
46
|
action(ev);
|
52
47
|
},
|
@@ -72,4 +67,4 @@ var MenuList = forwardRef(
|
|
72
67
|
export {
|
73
68
|
MenuList
|
74
69
|
};
|
75
|
-
//# sourceMappingURL=chunk-
|
70
|
+
//# sourceMappingURL=chunk-ZXPJZVO7.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/menu-list.tsx"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport type { MotionProps } 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\"\n\nexport type MenuListProps = MotionProps<\"ul\">\n\nexport const MenuList = forwardRef<MenuListProps, \"ul\">(\n ({ className, ...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: Record<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 const css: CSSUIObject = { ...styles.list }\n\n return (\n <PopoverContent\n as=\"ul\"\n ref={mergeRefs(menuRef, ref)}\n className={cx(\"ui-menu__list\", className)}\n role=\"menu\"\n tabIndex={-1}\n __css={css}\n {...rest}\n onKeyDown={handlerAll(rest.onKeyDown, onKeyDown)}\n />\n )\n },\n)\n"],"mappings":";;;;;;;AACA,SAAS,kBAAkB;AAE3B,SAAS,sBAAsB;AAC/B,SAAS,IAAI,YAAY,iBAAiB;AAE1C,SAAS,mBAAmB;AA4DtB;AAvDC,IAAM,WAAW;AAAA,EACtB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,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
|
1
|
+
{"version":3,"sources":["../src/menu-list.tsx"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport type { MotionProps } 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\"\n\nexport type MenuListProps = MotionProps<\"ul\">\n\nexport const MenuList = forwardRef<MenuListProps, \"ul\">(\n ({ className, ...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: Record<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 const css: CSSUIObject = { ...styles.list }\n\n return (\n <PopoverContent\n as=\"ul\"\n ref={mergeRefs(menuRef, ref)}\n className={cx(\"ui-menu__list\", className)}\n role=\"menu\"\n tabIndex={-1}\n __css={css}\n {...rest}\n onKeyDown={handlerAll(rest.onKeyDown, onKeyDown)}\n />\n )\n },\n)\n"],"mappings":";;;;;;;AACA,SAAS,kBAAkB;AAE3B,SAAS,sBAAsB;AAC/B,SAAS,IAAI,YAAY,iBAAiB;AAE1C,SAAS,mBAAmB;AA4DtB;AAvDC,IAAM,WAAW;AAAA,EACtB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,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,UAAgD;AAAA,UACpD,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,UAAM,MAAmB,EAAE,GAAG,OAAO,KAAK;AAE1C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,KAAK,UAAU,SAAS,GAAG;AAAA,QAC3B,WAAW,GAAG,iBAAiB,SAAS;AAAA,QACxC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,WAAW,WAAW,KAAK,WAAW,SAAS;AAAA;AAAA,IACjD;AAAA,EAEJ;AACF;","names":["ev"]}
|