@yamada-ui/menu 2.0.0-next-20240619220221 → 2.0.0-next-20240701004015
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-IV2JMNCB.mjs → chunk-24YOFDJV.mjs} +3 -3
- package/dist/{chunk-52OUQO7P.mjs → chunk-7DAGQC4A.mjs} +2 -2
- package/dist/{chunk-KBM3IJVJ.mjs → chunk-BNGR5R7U.mjs} +2 -2
- package/dist/{chunk-4BK7CQR4.mjs → chunk-DW3JHREI.mjs} +26 -66
- package/dist/chunk-DW3JHREI.mjs.map +1 -0
- package/dist/{chunk-AEUEBWYD.mjs → chunk-JR2DBODI.mjs} +2 -2
- package/dist/{chunk-OSVZBT46.mjs → chunk-PMNHFZEM.mjs} +2 -2
- package/dist/chunk-PMNHFZEM.mjs.map +1 -0
- package/dist/{chunk-CPRY7EAI.mjs → chunk-RNHC5FXC.mjs} +2 -2
- package/dist/context-menu-trigger.mjs +2 -2
- package/dist/context-menu.js +25 -65
- package/dist/context-menu.js.map +1 -1
- package/dist/context-menu.mjs +1 -1
- package/dist/index.js +25 -65
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +7 -7
- package/dist/menu-button.js +25 -65
- 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.d.mts +3 -3
- package/dist/menu-item.d.ts +3 -3
- package/dist/menu-item.js +25 -65
- package/dist/menu-item.js.map +1 -1
- package/dist/menu-item.mjs +1 -1
- package/dist/menu-list.mjs +2 -2
- package/dist/menu-option-group.d.mts +5 -3
- package/dist/menu-option-group.d.ts +5 -3
- package/dist/menu-option-group.js +25 -65
- package/dist/menu-option-group.js.map +1 -1
- package/dist/menu-option-group.mjs +3 -3
- package/dist/menu.d.mts +4 -4
- package/dist/menu.d.ts +4 -4
- package/dist/menu.js +25 -65
- package/dist/menu.js.map +1 -1
- package/dist/menu.mjs +1 -1
- package/package.json +11 -11
- package/dist/chunk-4BK7CQR4.mjs.map +0 -1
- package/dist/chunk-OSVZBT46.mjs.map +0 -1
- /package/dist/{chunk-IV2JMNCB.mjs.map → chunk-24YOFDJV.mjs.map} +0 -0
- /package/dist/{chunk-52OUQO7P.mjs.map → chunk-7DAGQC4A.mjs.map} +0 -0
- /package/dist/{chunk-KBM3IJVJ.mjs.map → chunk-BNGR5R7U.mjs.map} +0 -0
- /package/dist/{chunk-AEUEBWYD.mjs.map → chunk-JR2DBODI.mjs.map} +0 -0
- /package/dist/{chunk-CPRY7EAI.mjs.map → chunk-RNHC5FXC.mjs.map} +0 -0
@@ -1,10 +1,10 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
MenuGroup
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-BNGR5R7U.mjs";
|
5
5
|
import {
|
6
6
|
MenuOptionItem
|
7
|
-
} from "./chunk-
|
7
|
+
} from "./chunk-DW3JHREI.mjs";
|
8
8
|
|
9
9
|
// src/menu-option-group.tsx
|
10
10
|
import { useControllableState } from "@yamada-ui/use-controllable-state";
|
@@ -65,4 +65,4 @@ MenuOptionGroup.displayName = "MenuOptionGroup";
|
|
65
65
|
export {
|
66
66
|
MenuOptionGroup
|
67
67
|
};
|
68
|
-
//# sourceMappingURL=chunk-
|
68
|
+
//# sourceMappingURL=chunk-24YOFDJV.mjs.map
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useMenu
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-DW3JHREI.mjs";
|
5
5
|
|
6
6
|
// src/menu-divider.tsx
|
7
7
|
import { ui, forwardRef } from "@yamada-ui/core";
|
@@ -24,4 +24,4 @@ var MenuDivider = forwardRef(({ className, ...rest }, ref) => {
|
|
24
24
|
export {
|
25
25
|
MenuDivider
|
26
26
|
};
|
27
|
-
//# sourceMappingURL=chunk-
|
27
|
+
//# sourceMappingURL=chunk-7DAGQC4A.mjs.map
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useMenu
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-DW3JHREI.mjs";
|
5
5
|
|
6
6
|
// src/menu-group.tsx
|
7
7
|
import { ui, forwardRef } from "@yamada-ui/core";
|
@@ -38,4 +38,4 @@ var MenuGroup = forwardRef(
|
|
38
38
|
export {
|
39
39
|
MenuGroup
|
40
40
|
};
|
41
|
-
//# sourceMappingURL=chunk-
|
41
|
+
//# sourceMappingURL=chunk-BNGR5R7U.mjs.map
|
@@ -217,25 +217,17 @@ var [UpstreamMenuItemProvider, useUpstreamMenuItem] = createContext3({
|
|
217
217
|
});
|
218
218
|
var isTargetMenuItem = (target) => {
|
219
219
|
var _a;
|
220
|
-
return isHTMLElement(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("
|
220
|
+
return isHTMLElement(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menuitem"));
|
221
221
|
};
|
222
222
|
var MenuItem = forwardRef(
|
223
223
|
({
|
224
|
-
as,
|
225
224
|
className,
|
226
|
-
type,
|
227
225
|
isDisabled,
|
228
226
|
isFocusable,
|
229
227
|
closeOnSelect: customCloseOnSelect,
|
230
228
|
icon,
|
231
229
|
command,
|
232
230
|
children,
|
233
|
-
onClick: onClickProp,
|
234
|
-
onFocus: onFocusProp,
|
235
|
-
onMouseEnter: onMouseEnterProp,
|
236
|
-
onMouseMove: onMouseMoveProp,
|
237
|
-
onMouseLeave: onMouseLeaveProp,
|
238
|
-
onKeyDown: onKeyDownProp,
|
239
231
|
...props
|
240
232
|
}, ref) => {
|
241
233
|
var _a;
|
@@ -253,7 +245,7 @@ var MenuItem = forwardRef(
|
|
253
245
|
} = useMenu();
|
254
246
|
const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
|
255
247
|
const trulyDisabled = isDisabled && !isFocusable;
|
256
|
-
const
|
248
|
+
const itemRef = useRef2(null);
|
257
249
|
const hasDownstreamRef = useRef2(false);
|
258
250
|
const onKeyDownRef = useRef2(
|
259
251
|
() => void 0
|
@@ -261,33 +253,16 @@ var MenuItem = forwardRef(
|
|
261
253
|
const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
|
262
254
|
const [isDownstreamOpen, setDownstreamOpen] = useState2(false);
|
263
255
|
const isFocused = index === focusedIndex;
|
264
|
-
const
|
265
|
-
(
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
);
|
272
|
-
const onMouseMove = useCallback2(
|
273
|
-
(event) => {
|
274
|
-
onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
|
275
|
-
if (buttonRef.current && !isActiveElement(buttonRef.current))
|
276
|
-
onMouseEnter(event);
|
277
|
-
},
|
278
|
-
[onMouseEnter, onMouseMoveProp]
|
279
|
-
);
|
280
|
-
const onMouseLeave = useCallback2(
|
281
|
-
(event) => {
|
282
|
-
onMouseLeaveProp == null ? void 0 : onMouseLeaveProp(event);
|
283
|
-
if (isDisabled) return;
|
284
|
-
setFocusedIndex(-1);
|
285
|
-
},
|
286
|
-
[setFocusedIndex, isDisabled, onMouseLeaveProp]
|
287
|
-
);
|
256
|
+
const onMouseOver = useCallback2(() => {
|
257
|
+
if (isDisabled) return;
|
258
|
+
setFocusedIndex(index);
|
259
|
+
}, [index, isDisabled, setFocusedIndex]);
|
260
|
+
const onMouseLeave = useCallback2(() => {
|
261
|
+
if (isDisabled) return;
|
262
|
+
setFocusedIndex(-1);
|
263
|
+
}, [setFocusedIndex, isDisabled]);
|
288
264
|
const onClick = useCallback2(
|
289
265
|
(ev) => {
|
290
|
-
onClickProp == null ? void 0 : onClickProp(ev);
|
291
266
|
if (!isTargetMenuItem(ev.currentTarget)) return;
|
292
267
|
const hasDownstream = hasDownstreamRef.current;
|
293
268
|
if (customCloseOnSelect != null ? customCloseOnSelect : !hasDownstream && generalCloseOnSelect) {
|
@@ -295,29 +270,18 @@ var MenuItem = forwardRef(
|
|
295
270
|
onUpstreamClose == null ? void 0 : onUpstreamClose();
|
296
271
|
}
|
297
272
|
},
|
298
|
-
[
|
299
|
-
onClickProp,
|
300
|
-
customCloseOnSelect,
|
301
|
-
generalCloseOnSelect,
|
302
|
-
onClose,
|
303
|
-
onUpstreamClose
|
304
|
-
]
|
305
|
-
);
|
306
|
-
const onFocus = useCallback2(
|
307
|
-
(ev) => {
|
308
|
-
onFocusProp == null ? void 0 : onFocusProp(ev);
|
309
|
-
setFocusedIndex(index);
|
310
|
-
},
|
311
|
-
[onFocusProp, setFocusedIndex, index]
|
273
|
+
[customCloseOnSelect, generalCloseOnSelect, onClose, onUpstreamClose]
|
312
274
|
);
|
275
|
+
const onFocus = useCallback2(() => {
|
276
|
+
setFocusedIndex(index);
|
277
|
+
}, [setFocusedIndex, index]);
|
313
278
|
const onRestoreFocus = useCallback2(() => {
|
314
279
|
var _a2;
|
315
|
-
(_a2 =
|
280
|
+
(_a2 = itemRef.current) == null ? void 0 : _a2.focus();
|
316
281
|
setFocusedIndex(index);
|
317
282
|
}, [setFocusedIndex, index]);
|
318
283
|
const onKeyDown = useCallback2(
|
319
284
|
(ev) => {
|
320
|
-
onKeyDownProp == null ? void 0 : onKeyDownProp(ev);
|
321
285
|
const actions = {
|
322
286
|
ArrowLeft: isNested ? funcAll2(onUpstreamRestoreFocus, onClose) : void 0
|
323
287
|
};
|
@@ -327,29 +291,28 @@ var MenuItem = forwardRef(
|
|
327
291
|
ev.stopPropagation();
|
328
292
|
action();
|
329
293
|
},
|
330
|
-
[
|
294
|
+
[onUpstreamRestoreFocus, onClose, isNested]
|
331
295
|
);
|
332
296
|
const rest = useClickable({
|
333
297
|
focusOnClick: false,
|
334
298
|
...props,
|
335
|
-
onClick,
|
336
|
-
onFocus,
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
ref: mergeRefs(register, buttonRef, ref),
|
299
|
+
onClick: handlerAll(props.onClick, onClick),
|
300
|
+
onFocus: handlerAll(props.onFocus, onFocus),
|
301
|
+
onMouseOver: handlerAll(props.onMouseOver, onMouseOver),
|
302
|
+
onMouseLeave: handlerAll(props.onMouseLeave, onMouseLeave),
|
303
|
+
onKeyDown: handlerAll(props.onKeyDown, onKeyDown, onKeyDownRef.current),
|
304
|
+
ref: mergeRefs(register, itemRef, ref),
|
342
305
|
isDisabled,
|
343
306
|
isFocusable
|
344
307
|
});
|
345
308
|
useUpdateEffect2(() => {
|
346
309
|
if (!isOpen) return;
|
347
310
|
const id = requestAnimationFrameId.current;
|
348
|
-
if (isFocused && !trulyDisabled &&
|
311
|
+
if (isFocused && !trulyDisabled && itemRef.current) {
|
349
312
|
if (id) cancelAnimationFrame(id);
|
350
313
|
requestAnimationFrameId.current = requestAnimationFrame(() => {
|
351
314
|
var _a2;
|
352
|
-
(_a2 =
|
315
|
+
(_a2 = itemRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
|
353
316
|
requestAnimationFrameId.current = null;
|
354
317
|
});
|
355
318
|
} else if (menuRef.current && !isActiveElement(menuRef.current)) {
|
@@ -359,7 +322,6 @@ var MenuItem = forwardRef(
|
|
359
322
|
if (id) cancelAnimationFrame(id);
|
360
323
|
};
|
361
324
|
}, [isFocused, trulyDisabled, menuRef, isOpen]);
|
362
|
-
type = as || type ? type != null ? type : void 0 : "button";
|
363
325
|
children = icon || command ? /* @__PURE__ */ jsx3(ui.span, { style: { flex: 1 }, children }) : children;
|
364
326
|
const css = { ...styles.item };
|
365
327
|
return /* @__PURE__ */ jsx3(
|
@@ -376,9 +338,7 @@ var MenuItem = forwardRef(
|
|
376
338
|
{
|
377
339
|
...rest,
|
378
340
|
...isDownstreamOpen ? { "data-active": "" } : {},
|
379
|
-
|
380
|
-
type,
|
381
|
-
role: "menu-item",
|
341
|
+
role: "menuitem",
|
382
342
|
tabIndex: isFocused ? 0 : -1,
|
383
343
|
className: cx("ui-menu__item", className),
|
384
344
|
__css: css,
|
@@ -472,4 +432,4 @@ export {
|
|
472
432
|
useContextMenu,
|
473
433
|
ContextMenu
|
474
434
|
};
|
475
|
-
//# sourceMappingURL=chunk-
|
435
|
+
//# sourceMappingURL=chunk-DW3JHREI.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/menu-item.tsx","../src/menu.tsx","../src/context-menu.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport {\n ariaAttr,\n createContext,\n cx,\n funcAll,\n handlerAll,\n isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type {\n Dispatch,\n FC,\n KeyboardEvent,\n KeyboardEventHandler,\n MouseEvent,\n MutableRefObject,\n ReactElement,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\nimport { useMenu, useMenuDescendant } from \"./menu\"\n\ntype UpstreamMenuItemContext = {\n onUpstreamRestoreFocus: () => void\n onKeyDownRef: RefObject<KeyboardEventHandler<HTMLLIElement>>\n setDownstreamOpen: Dispatch<SetStateAction<boolean>>\n hasDownstreamRef: MutableRefObject<boolean>\n}\n\nexport const [UpstreamMenuItemProvider, useUpstreamMenuItem] =\n createContext<UpstreamMenuItemContext>({\n strict: false,\n name: \"UpstreamMenuItemContext\",\n })\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"menuitem\")\n )\n}\n\ntype MenuItemOptions = {\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * The menu item icon to use.\n */\n icon?: ReactElement\n /**\n * Right-aligned label text content, useful for displaying hotkeys.\n */\n command?: string\n}\n\nexport type MenuItemProps = HTMLUIProps<\"li\"> & MenuItemOptions\n\nexport const MenuItem = forwardRef<MenuItemProps, \"li\">(\n (\n {\n className,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n icon,\n command,\n children,\n ...props\n },\n ref,\n ) => {\n const {\n focusedIndex,\n setFocusedIndex,\n isOpen,\n onClose,\n onUpstreamClose,\n closeOnSelect: generalCloseOnSelect,\n menuRef,\n requestAnimationFrameId,\n isNested,\n styles,\n } = useMenu()\n const { onUpstreamRestoreFocus } = useUpstreamMenuItem() ?? {}\n\n const trulyDisabled = isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n const hasDownstreamRef = useRef<boolean>(false)\n const onKeyDownRef = useRef<KeyboardEventHandler<HTMLLIElement>>(\n () => void 0,\n )\n const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n const [isDownstreamOpen, setDownstreamOpen] = useState<boolean>(false)\n\n const isFocused = index === focusedIndex\n\n const onMouseOver = useCallback(() => {\n if (isDisabled) return\n\n setFocusedIndex(index)\n }, [index, isDisabled, setFocusedIndex])\n\n const onMouseLeave = useCallback(() => {\n if (isDisabled) return\n\n setFocusedIndex(-1)\n }, [setFocusedIndex, isDisabled])\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\n if (!isTargetMenuItem(ev.currentTarget)) return\n\n const hasDownstream = hasDownstreamRef.current\n\n if (customCloseOnSelect ?? (!hasDownstream && generalCloseOnSelect)) {\n onClose()\n onUpstreamClose?.()\n }\n },\n [customCloseOnSelect, generalCloseOnSelect, onClose, onUpstreamClose],\n )\n\n const onFocus = useCallback(() => {\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onRestoreFocus = useCallback(() => {\n itemRef.current?.focus()\n\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLLIElement>) => {\n const actions: Record<string, Function | undefined> = {\n ArrowLeft: isNested\n ? funcAll(onUpstreamRestoreFocus, onClose)\n : undefined,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n ev.stopPropagation()\n\n action()\n },\n [onUpstreamRestoreFocus, onClose, isNested],\n )\n\n const rest = useClickable<HTMLLIElement>({\n focusOnClick: false,\n ...props,\n onClick: handlerAll(props.onClick, onClick),\n onFocus: handlerAll(props.onFocus, onFocus),\n onMouseOver: handlerAll(props.onMouseOver, onMouseOver),\n onMouseLeave: handlerAll(props.onMouseLeave, onMouseLeave),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown, onKeyDownRef.current),\n ref: mergeRefs(register, itemRef, ref),\n isDisabled,\n isFocusable,\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n const id = requestAnimationFrameId.current\n\n if (isFocused && !trulyDisabled && itemRef.current) {\n if (id) cancelAnimationFrame(id)\n\n requestAnimationFrameId.current = requestAnimationFrame(() => {\n itemRef.current?.focus({ preventScroll: true })\n\n requestAnimationFrameId.current = null\n })\n } else if (menuRef.current && !isActiveElement(menuRef.current)) {\n menuRef.current.focus({ preventScroll: true })\n }\n\n return () => {\n if (id) cancelAnimationFrame(id)\n }\n }, [isFocused, trulyDisabled, menuRef, isOpen])\n\n children =\n icon || command ? (\n <ui.span style={{ flex: 1 }}>{children}</ui.span>\n ) : (\n children\n )\n\n const css: CSSUIObject = { ...styles.item }\n\n return (\n <UpstreamMenuItemProvider\n value={{\n onKeyDownRef,\n onUpstreamRestoreFocus: onRestoreFocus,\n setDownstreamOpen,\n hasDownstreamRef,\n }}\n >\n <ui.li\n {...rest}\n {...(isDownstreamOpen ? { \"data-active\": \"\" } : {})}\n role=\"menuitem\"\n tabIndex={isFocused ? 0 : -1}\n className={cx(\"ui-menu__item\", className)}\n __css={css}\n >\n {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n {children}\n {command ? <MenuCommand>{command}</MenuCommand> : null}\n </ui.li>\n </UpstreamMenuItemProvider>\n )\n },\n)\n\ntype MenuOptionItemOptions = {\n /**\n * The menu option item icon to use.\n */\n icon?: ReactElement | null\n /**\n * The value of the menu option item.\n */\n value?: string\n /**\n * If `true`, the checkbox or radio will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * The type of the menu option item.\n */\n type?: \"radio\" | \"checkbox\"\n}\n\nexport type MenuOptionItemProps = Omit<MenuItemProps, \"icon\" | \"command\"> &\n MenuOptionItemOptions\n\nexport const MenuOptionItem = forwardRef<MenuOptionItemProps, \"button\">(\n (\n { className, icon, isChecked, closeOnSelect = false, children, ...rest },\n ref,\n ) => {\n return (\n <MenuItem\n ref={ref}\n className={cx(\"ui-menu__item--option\", className)}\n aria-checked={ariaAttr(isChecked)}\n closeOnSelect={closeOnSelect}\n {...rest}\n >\n {icon !== null ? (\n <MenuIcon opacity={isChecked ? 1 : 0}>\n {icon || <CheckIcon />}\n </MenuIcon>\n ) : null}\n {children}\n </MenuItem>\n )\n },\n)\n\nexport type MenuIconProps = HTMLUIProps<\"span\">\n\nexport const MenuIcon = forwardRef<MenuIconProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = {\n flexShrink: 0,\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontSize: \"0.85em\",\n ...styles.icon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-menu__item-icon\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nexport type MenuCommandProps = HTMLUIProps<\"span\">\n\nexport const MenuCommand = forwardRef<MenuCommandProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.command }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-menu__item-command\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nconst CheckIcon: FC = () => (\n <svg viewBox=\"0 0 14 14\" width=\"1em\" height=\"1em\">\n <polygon\n fill=\"currentColor\"\n points=\"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039\"\n />\n </svg>\n)\n","import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport { Popover } from \"@yamada-ui/popover\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n createContext,\n funcAll,\n useUnmountEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type {\n Dispatch,\n FC,\n MutableRefObject,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { useContextMenu } from \"./context-menu\"\nimport { useUpstreamMenuItem } from \"./menu-item\"\n\nconst {\n DescendantsContextProvider,\n useDescendantsContext: useMenuDescendantsContext,\n useDescendants,\n useDescendant: useMenuDescendant,\n} = createDescendant<HTMLElement>()\n\nexport { useMenuDescendantsContext, useMenuDescendant }\n\ntype MenuContext = MenuOptions & {\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onUpstreamClose?: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n menuRef: RefObject<HTMLDivElement>\n requestAnimationFrameId: MutableRefObject<number | null>\n isNested: boolean\n styles: Record<string, CSSUIObject>\n}\n\nconst [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\ntype UpstreamMenuContext = {\n relatedRef: RefObject<HTMLElement>\n onDownstreamCloseMapRef: MutableRefObject<Map<string, () => void>>\n onUpstreamClose: () => void\n}\n\nexport const [UpstreamMenuProvider, useUpstreamMenu] =\n createContext<UpstreamMenuContext>({\n strict: false,\n name: \"UpstreamMenuContext\",\n })\n\nexport { useMenu }\n\ntype MenuOptions = {\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n}\n\nexport type MenuProps = ThemeProps<\"Menu\"> &\n Omit<PopoverProps, \"closeOnButton\" | \"relatedRef\"> &\n MenuOptions\n\n/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see Docs https://yamada-ui.com/components/overlay/menu\n */\nexport const Menu: FC<MenuProps> = (props) => {\n const { styles: contextMenuStyles } = useContextMenu() ?? {}\n const [styles, mergedProps] = useMultiComponentStyle(\"Menu\", props, {\n isProcessSkip: !!contextMenuStyles,\n styles: contextMenuStyles,\n })\n let {\n initialFocusRef,\n closeOnSelect = true,\n closeOnBlur,\n placement,\n duration = 0.2,\n offset,\n onOpen: onOpenProp,\n onClose: onCloseProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const { relatedRef, onUpstreamClose, onDownstreamCloseMapRef } =\n useUpstreamMenu() ?? {}\n const { setDownstreamOpen, hasDownstreamRef } = useUpstreamMenuItem() ?? {}\n const isNested = !!relatedRef\n\n if (isNested) {\n placement ??= \"right-start\"\n offset ??= [-8, 8]\n closeOnBlur ??= false\n } else {\n placement ??= \"bottom-start\"\n }\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n const menuRef = useRef<HTMLDivElement>(null)\n const timeoutIds = useRef<Set<any>>(new Set([]))\n const requestAnimationFrameId = useRef<number | null>(null)\n const onCloseMapRef = useRef<Map<string, () => void>>(new Map())\n\n const onFocusMenu = useCallback(() => {\n requestAnimationFrame(() =>\n menuRef.current?.focus({ preventScroll: false }),\n )\n }, [])\n\n const onFocusFirstItem = useCallback(() => {\n const id = setTimeout(() => {\n if (initialFocusRef) return\n\n const first = descendants.enabledFirstValue()\n\n if (first) setFocusedIndex(first.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, initialFocusRef])\n\n const onFocusLastItem = useCallback(() => {\n const id = setTimeout(() => {\n if (initialFocusRef) return\n\n const last = descendants.enabledLastValue()\n\n if (last) setFocusedIndex(last.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, initialFocusRef])\n\n const onOpenInternal = useCallback(() => {\n onOpenProp?.()\n\n if (!isNested) onFocusMenu()\n }, [onOpenProp, isNested, onFocusMenu])\n\n const onCloseInternal = useCallback(() => {\n onCloseProp?.()\n\n for (const onClose of onCloseMapRef.current.values()) {\n onClose()\n }\n }, [onCloseProp])\n\n const id = useId()\n const { isOpen, onOpen, onClose } = useDisclosure({\n ...props,\n onOpen: onOpenInternal,\n onClose: onCloseInternal,\n })\n\n useEffect(() => {\n const onCloseMap = onDownstreamCloseMapRef?.current\n\n onCloseMap?.set(id, onClose)\n\n return () => {\n onCloseMap?.delete(id)\n }\n }, [id, onClose, onDownstreamCloseMapRef])\n\n useEffect(() => {\n if (setDownstreamOpen) setDownstreamOpen(isOpen)\n }, [setDownstreamOpen, isOpen])\n\n useEffect(() => {\n if (hasDownstreamRef) hasDownstreamRef.current = true\n\n return () => {\n if (hasDownstreamRef) hasDownstreamRef.current = false\n }\n })\n\n useUpdateEffect(() => {\n if (!isOpen) setFocusedIndex(-1)\n }, [isOpen])\n\n useUnmountEffect(() => {\n timeoutIds.current.forEach((id) => clearTimeout(id))\n timeoutIds.current.clear()\n })\n\n return (\n <DescendantsContextProvider value={descendants}>\n <UpstreamMenuProvider\n value={{\n relatedRef: menuRef,\n onDownstreamCloseMapRef: onCloseMapRef,\n onUpstreamClose: funcAll(onUpstreamClose, onClose),\n }}\n >\n <MenuProvider\n value={{\n isOpen,\n onOpen,\n onClose,\n onUpstreamClose,\n onFocusFirstItem,\n onFocusLastItem,\n closeOnSelect,\n focusedIndex,\n setFocusedIndex,\n menuRef,\n requestAnimationFrameId,\n isNested,\n styles,\n }}\n >\n <Popover\n {...{\n trigger: isNested ? \"hover\" : \"click\",\n ...rest,\n isOpen,\n onOpen,\n onClose,\n placement,\n offset,\n duration,\n initialFocusRef,\n relatedRef,\n closeOnButton: false,\n closeOnBlur,\n }}\n />\n </MenuProvider>\n </UpstreamMenuProvider>\n </DescendantsContextProvider>\n )\n}\n","import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\nimport type { MenuProps } from \"./menu\"\nimport { Menu } from \"./menu\"\n\ntype ContextMenuContext = {\n styles: Record<string, CSSUIObject>\n}\n\nconst [ContextMenuProvider, useContextMenu] = createContext<ContextMenuContext>(\n {\n strict: false,\n name: \"ContextMenuContext\",\n },\n)\n\nexport { useContextMenu }\n\ntype ContextMenuOptions = {}\n\nexport type ContextMenuProps = Omit<MenuProps, \"trigger\"> &\n ThemeProps<\"ContextMenu\"> &\n ContextMenuOptions\n\n/**\n * `ContextMenu` is triggered by a right click and displays a menu at the pointer's position.\n *\n * @see Docs https://yamada-ui.com/components/overlay/context-menu\n */\nexport const ContextMenu: FC<ContextMenuProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"ContextMenu\", props)\n const { ...rest } = omitThemeProps(mergedProps)\n\n return (\n <ContextMenuProvider value={{ styles }}>\n <Menu trigger=\"contextmenu\" {...rest} />\n </ContextMenuProvider>\n )\n}\n"],"mappings":";;;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;AAYP,SAAS,eAAAC,cAAa,UAAAC,SAAQ,YAAAC,iBAAgB;;;ACxB9C,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,gBAAiB;AAErB,YAAM,QAAQ,YAAY,kBAAkB;AAE5C,UAAI,MAAO,iBAAgB,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,gBAAiB;AAErB,YAAM,OAAO,YAAY,iBAAiB;AAE1C,UAAI,KAAM,iBAAgB,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,SAAU,aAAY;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,kBAAmB,mBAAkB,MAAM;AAAA,EACjD,GAAG,CAAC,mBAAmB,MAAM,CAAC;AAE9B,YAAU,MAAM;AACd,QAAI,iBAAkB,kBAAiB,UAAU;AAEjD,WAAO,MAAM;AACX,UAAI,iBAAkB,kBAAiB,UAAU;AAAA,IACnD;AAAA,EACF,CAAC;AAED,kBAAgB,MAAM;AACpB,QAAI,CAAC,OAAQ,iBAAgB,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;;;ADvCQ,gBAAAC,MAgBA,YAhBA;AAjLD,IAAM,CAAC,0BAA0B,mBAAmB,IACzDC,eAAuC;AAAA,EACrC,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;AAEH,IAAM,mBAAmB,CAAC,WAA+B;AAzCzD;AA0CE,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,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AA5FP;AA6FI,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,UAAUC,QAAsB,IAAI;AAC1C,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,cAAcC,aAAY,MAAM;AACpC,UAAI,WAAY;AAEhB,sBAAgB,KAAK;AAAA,IACvB,GAAG,CAAC,OAAO,YAAY,eAAe,CAAC;AAEvC,UAAM,eAAeA,aAAY,MAAM;AACrC,UAAI,WAAY;AAEhB,sBAAgB,EAAE;AAAA,IACpB,GAAG,CAAC,iBAAiB,UAAU,CAAC;AAEhC,UAAM,UAAUA;AAAA,MACd,CAAC,OAAkC;AACjC,YAAI,CAAC,iBAAiB,GAAG,aAAa,EAAG;AAEzC,cAAM,gBAAgB,iBAAiB;AAEvC,YAAI,oDAAwB,CAAC,iBAAiB,sBAAuB;AACnE,kBAAQ;AACR;AAAA,QACF;AAAA,MACF;AAAA,MACA,CAAC,qBAAqB,sBAAsB,SAAS,eAAe;AAAA,IACtE;AAEA,UAAM,UAAUA,aAAY,MAAM;AAChC,sBAAgB,KAAK;AAAA,IACvB,GAAG,CAAC,iBAAiB,KAAK,CAAC;AAE3B,UAAM,iBAAiBA,aAAY,MAAM;AArJ7C,UAAAC;AAsJM,OAAAA,MAAA,QAAQ,YAAR,gBAAAA,IAAiB;AAEjB,sBAAgB,KAAK;AAAA,IACvB,GAAG,CAAC,iBAAiB,KAAK,CAAC;AAE3B,UAAM,YAAYD;AAAA,MAChB,CAAC,OAAqC;AACpC,cAAM,UAAgD;AAAA,UACpD,WAAW,WACPE,SAAQ,wBAAwB,OAAO,IACvC;AAAA,QACN;AAEA,cAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,YAAI,CAAC,OAAQ;AAEb,WAAG,eAAe;AAClB,WAAG,gBAAgB;AAEnB,eAAO;AAAA,MACT;AAAA,MACA,CAAC,wBAAwB,SAAS,QAAQ;AAAA,IAC5C;AAEA,UAAM,OAAO,aAA4B;AAAA,MACvC,cAAc;AAAA,MACd,GAAG;AAAA,MACH,SAAS,WAAW,MAAM,SAAS,OAAO;AAAA,MAC1C,SAAS,WAAW,MAAM,SAAS,OAAO;AAAA,MAC1C,aAAa,WAAW,MAAM,aAAa,WAAW;AAAA,MACtD,cAAc,WAAW,MAAM,cAAc,YAAY;AAAA,MACzD,WAAW,WAAW,MAAM,WAAW,WAAW,aAAa,OAAO;AAAA,MACtE,KAAK,UAAU,UAAU,SAAS,GAAG;AAAA,MACrC;AAAA,MACA;AAAA,IACF,CAAC;AAED,IAAAC,iBAAgB,MAAM;AACpB,UAAI,CAAC,OAAQ;AAEb,YAAM,KAAK,wBAAwB;AAEnC,UAAI,aAAa,CAAC,iBAAiB,QAAQ,SAAS;AAClD,YAAI,GAAI,sBAAqB,EAAE;AAE/B,gCAAwB,UAAU,sBAAsB,MAAM;AApMtE,cAAAF;AAqMU,WAAAA,MAAA,QAAQ,YAAR,gBAAAA,IAAiB,MAAM,EAAE,eAAe,KAAK;AAE7C,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,GAAI,sBAAqB,EAAE;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,WAAW,eAAe,SAAS,MAAM,CAAC;AAE9C,eACE,QAAQ,UACN,gBAAAL,KAAC,GAAG,MAAH,EAAQ,OAAO,EAAE,MAAM,EAAE,GAAI,UAAS,IAEvC;AAGJ,UAAM,MAAmB,EAAE,GAAG,OAAO,KAAK;AAE1C,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,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,sBAAsB,SAAS;AAAA,QAC7C,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,yBAAyB,SAAS;AAAA,QAChD,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,7 +1,7 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useContextMenu
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-DW3JHREI.mjs";
|
5
5
|
|
6
6
|
// src/context-menu-trigger.tsx
|
7
7
|
import { ui, forwardRef } from "@yamada-ui/core";
|
@@ -43,4 +43,4 @@ var ContextMenuTrigger = forwardRef(
|
|
43
43
|
export {
|
44
44
|
ContextMenuTrigger
|
45
45
|
};
|
46
|
-
//# sourceMappingURL=chunk-
|
46
|
+
//# sourceMappingURL=chunk-JR2DBODI.mjs.map
|
@@ -3,7 +3,7 @@ import {
|
|
3
3
|
MenuIcon,
|
4
4
|
useMenu,
|
5
5
|
useUpstreamMenuItem
|
6
|
-
} from "./chunk-
|
6
|
+
} from "./chunk-DW3JHREI.mjs";
|
7
7
|
|
8
8
|
// src/menu-button.tsx
|
9
9
|
import { ui, forwardRef } from "@yamada-ui/core";
|
@@ -88,4 +88,4 @@ export {
|
|
88
88
|
MenuButton,
|
89
89
|
MenuItemButton
|
90
90
|
};
|
91
|
-
//# sourceMappingURL=chunk-
|
91
|
+
//# sourceMappingURL=chunk-PMNHFZEM.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/menu-button.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { PopoverTrigger } from \"@yamada-ui/popover\"\nimport { assignRef, cx, dataAttr, funcAll, handlerAll } from \"@yamada-ui/utils\"\nimport type { KeyboardEvent, ReactNode } from \"react\"\nimport { useCallback } from \"react\"\nimport { useMenu } from \"./menu\"\nimport type { MenuIconProps } from \"./menu-item\"\nimport { MenuIcon, useUpstreamMenuItem } from \"./menu-item\"\n\nexport type MenuButtonProps = HTMLUIProps<\"button\">\n\nexport const MenuButton = forwardRef<MenuButtonProps, \"button\">(\n ({ className, children, as: As, ...rest }, ref) => {\n const { onKeyDownRef, onUpstreamRestoreFocus } = useUpstreamMenuItem() ?? {}\n const { isOpen, onOpen, onClose, onFocusFirstItem, onFocusLastItem } =\n useMenu()\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n const actions: Record<string, Function> = {\n Enter: funcAll(onOpen, onFocusFirstItem),\n ArrowDown: funcAll(onOpen, onFocusFirstItem),\n ArrowUp: funcAll(onOpen, onFocusLastItem),\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n\n action()\n },\n [onFocusFirstItem, onFocusLastItem, onOpen],\n )\n\n const onItemKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLLIElement>) => {\n const actions: Record<string, Function | undefined> = {\n ArrowRight: !isOpen ? funcAll(onOpen, onFocusFirstItem) : undefined,\n ArrowLeft: isOpen\n ? funcAll(onUpstreamRestoreFocus, onClose)\n : undefined,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n\n action()\n },\n [isOpen, onOpen, onFocusFirstItem, onUpstreamRestoreFocus, onClose],\n )\n\n assignRef(onKeyDownRef, onItemKeyDown)\n\n const Component = As ? ui(As) : Button\n\n return (\n <PopoverTrigger>\n <Component\n ref={ref}\n className={cx(\"ui-menu\", className)}\n aria-haspopup=\"menu\"\n aria-expanded={isOpen}\n {...rest}\n data-active={dataAttr(isOpen)}\n onKeyDown={handlerAll(rest.onKeyDown, onKeyDown)}\n >\n {children}\n </Component>\n </PopoverTrigger>\n )\n },\n)\n\nconst Button = forwardRef<MenuButtonProps, \"button\">((rest, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.button }\n\n return <ui.button ref={ref} __css={css} {...rest} />\n})\n\nexport type MenuItemButtonProps = MenuButtonProps & {\n innerProps?: HTMLUIProps<\"span\">\n iconProps?: MenuIconProps\n icon?: ReactNode\n}\n\nexport const MenuItemButton = forwardRef<MenuItemButtonProps, \"button\">(\n ({ className, children, innerProps, icon, iconProps, ...rest }, ref) => {\n return (\n <MenuButton\n ref={ref}\n className={cx(\"ui-menu__item-button\", className)}\n flex=\"1\"\n {...rest}\n >\n <ui.span as=\"span\" flex=\"1\" {...innerProps}>\n {children}\n </ui.span>\n\n <MenuIcon {...iconProps}>\n {icon ?? <ChevronIcon fontSize=\"1.5em\" transform=\"rotate(-90deg)\" />}\n </MenuIcon>\n </MenuButton>\n )\n },\n)\n"],"mappings":";;;;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,WAAW,IAAI,UAAU,SAAS,kBAAkB;AAE7D,SAAS,mBAAmB;AA0DpB,cAiCF,YAjCE;AAnDD,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,IAAI,GAAG,KAAK,GAAG,QAAQ;AAdrD;AAeI,UAAM,EAAE,cAAc,uBAAuB,KAAI,yBAAoB,MAApB,YAAyB,CAAC;AAC3E,UAAM,EAAE,QAAQ,QAAQ,SAAS,kBAAkB,gBAAgB,IACjE,QAAQ;AAEV,UAAM,YAAY;AAAA,MAChB,CAAC,OAAsB;AACrB,cAAM,UAAoC;AAAA,UACxC,OAAO,QAAQ,QAAQ,gBAAgB;AAAA,UACvC,WAAW,QAAQ,QAAQ,gBAAgB;AAAA,UAC3C,SAAS,QAAQ,QAAQ,eAAe;AAAA,QAC1C;AAEA,cAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,YAAI,CAAC,OAAQ;AAEb,WAAG,eAAe;AAElB,eAAO;AAAA,MACT;AAAA,MACA,CAAC,kBAAkB,iBAAiB,MAAM;AAAA,IAC5C;AAEA,UAAM,gBAAgB;AAAA,MACpB,CAAC,OAAqC;AACpC,cAAM,UAAgD;AAAA,UACpD,YAAY,CAAC,SAAS,QAAQ,QAAQ,gBAAgB,IAAI;AAAA,UAC1D,WAAW,SACP,QAAQ,wBAAwB,OAAO,IACvC;AAAA,QACN;AAEA,cAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,YAAI,CAAC,OAAQ;AAEb,WAAG,eAAe;AAElB,eAAO;AAAA,MACT;AAAA,MACA,CAAC,QAAQ,QAAQ,kBAAkB,wBAAwB,OAAO;AAAA,IACpE;AAEA,cAAU,cAAc,aAAa;AAErC,UAAM,YAAY,KAAK,GAAG,EAAE,IAAI;AAEhC,WACE,oBAAC,kBACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,SAAS;AAAA,QAClC,iBAAc;AAAA,QACd,iBAAe;AAAA,QACd,GAAG;AAAA,QACJ,eAAa,SAAS,MAAM;AAAA,QAC5B,WAAW,WAAW,KAAK,WAAW,SAAS;AAAA,QAE9C;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,IAAM,SAAS,WAAsC,CAAC,MAAM,QAAQ;AAClE,QAAM,EAAE,OAAO,IAAI,QAAQ;AAE3B,QAAM,MAAmB,EAAE,GAAG,OAAO,OAAO;AAE5C,SAAO,oBAAC,GAAG,QAAH,EAAU,KAAU,OAAO,KAAM,GAAG,MAAM;AACpD,CAAC;AAQM,IAAM,iBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,UAAU,YAAY,MAAM,WAAW,GAAG,KAAK,GAAG,QAAQ;AACtE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,wBAAwB,SAAS;AAAA,QAC/C,MAAK;AAAA,QACJ,GAAG;AAAA,QAEJ;AAAA,8BAAC,GAAG,MAAH,EAAQ,IAAG,QAAO,MAAK,KAAK,GAAG,YAC7B,UACH;AAAA,UAEA,oBAAC,YAAU,GAAG,WACX,gCAAQ,oBAAC,eAAY,UAAS,SAAQ,WAAU,kBAAiB,GACpE;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":[]}
|
@@ -2,7 +2,7 @@
|
|
2
2
|
import {
|
3
3
|
useMenu,
|
4
4
|
useMenuDescendantsContext
|
5
|
-
} from "./chunk-
|
5
|
+
} from "./chunk-DW3JHREI.mjs";
|
6
6
|
|
7
7
|
// src/menu-list.tsx
|
8
8
|
import { forwardRef } from "@yamada-ui/core";
|
@@ -67,4 +67,4 @@ var MenuList = forwardRef(
|
|
67
67
|
export {
|
68
68
|
MenuList
|
69
69
|
};
|
70
|
-
//# sourceMappingURL=chunk-
|
70
|
+
//# sourceMappingURL=chunk-RNHC5FXC.mjs.map
|
package/dist/context-menu.js
CHANGED
@@ -48,25 +48,17 @@ var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils.createCon
|
|
48
48
|
});
|
49
49
|
var isTargetMenuItem = (target) => {
|
50
50
|
var _a;
|
51
|
-
return (0, import_utils.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("
|
51
|
+
return (0, import_utils.isHTMLElement)(target) && !!((_a = target == null ? void 0 : target.getAttribute("role")) == null ? void 0 : _a.startsWith("menuitem"));
|
52
52
|
};
|
53
53
|
var MenuItem = (0, import_core.forwardRef)(
|
54
54
|
({
|
55
|
-
as,
|
56
55
|
className,
|
57
|
-
type,
|
58
56
|
isDisabled,
|
59
57
|
isFocusable,
|
60
58
|
closeOnSelect: customCloseOnSelect,
|
61
59
|
icon,
|
62
60
|
command,
|
63
61
|
children,
|
64
|
-
onClick: onClickProp,
|
65
|
-
onFocus: onFocusProp,
|
66
|
-
onMouseEnter: onMouseEnterProp,
|
67
|
-
onMouseMove: onMouseMoveProp,
|
68
|
-
onMouseLeave: onMouseLeaveProp,
|
69
|
-
onKeyDown: onKeyDownProp,
|
70
62
|
...props
|
71
63
|
}, ref) => {
|
72
64
|
var _a;
|
@@ -84,7 +76,7 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
84
76
|
} = useMenu();
|
85
77
|
const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
|
86
78
|
const trulyDisabled = isDisabled && !isFocusable;
|
87
|
-
const
|
79
|
+
const itemRef = (0, import_react.useRef)(null);
|
88
80
|
const hasDownstreamRef = (0, import_react.useRef)(false);
|
89
81
|
const onKeyDownRef = (0, import_react.useRef)(
|
90
82
|
() => void 0
|
@@ -92,33 +84,16 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
92
84
|
const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
|
93
85
|
const [isDownstreamOpen, setDownstreamOpen] = (0, import_react.useState)(false);
|
94
86
|
const isFocused = index === focusedIndex;
|
95
|
-
const
|
96
|
-
(
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
);
|
103
|
-
const onMouseMove = (0, import_react.useCallback)(
|
104
|
-
(event) => {
|
105
|
-
onMouseMoveProp == null ? void 0 : onMouseMoveProp(event);
|
106
|
-
if (buttonRef.current && !(0, import_utils.isActiveElement)(buttonRef.current))
|
107
|
-
onMouseEnter(event);
|
108
|
-
},
|
109
|
-
[onMouseEnter, onMouseMoveProp]
|
110
|
-
);
|
111
|
-
const onMouseLeave = (0, import_react.useCallback)(
|
112
|
-
(event) => {
|
113
|
-
onMouseLeaveProp == null ? void 0 : onMouseLeaveProp(event);
|
114
|
-
if (isDisabled) return;
|
115
|
-
setFocusedIndex(-1);
|
116
|
-
},
|
117
|
-
[setFocusedIndex, isDisabled, onMouseLeaveProp]
|
118
|
-
);
|
87
|
+
const onMouseOver = (0, import_react.useCallback)(() => {
|
88
|
+
if (isDisabled) return;
|
89
|
+
setFocusedIndex(index);
|
90
|
+
}, [index, isDisabled, setFocusedIndex]);
|
91
|
+
const onMouseLeave = (0, import_react.useCallback)(() => {
|
92
|
+
if (isDisabled) return;
|
93
|
+
setFocusedIndex(-1);
|
94
|
+
}, [setFocusedIndex, isDisabled]);
|
119
95
|
const onClick = (0, import_react.useCallback)(
|
120
96
|
(ev) => {
|
121
|
-
onClickProp == null ? void 0 : onClickProp(ev);
|
122
97
|
if (!isTargetMenuItem(ev.currentTarget)) return;
|
123
98
|
const hasDownstream = hasDownstreamRef.current;
|
124
99
|
if (customCloseOnSelect != null ? customCloseOnSelect : !hasDownstream && generalCloseOnSelect) {
|
@@ -126,29 +101,18 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
126
101
|
onUpstreamClose == null ? void 0 : onUpstreamClose();
|
127
102
|
}
|
128
103
|
},
|
129
|
-
[
|
130
|
-
onClickProp,
|
131
|
-
customCloseOnSelect,
|
132
|
-
generalCloseOnSelect,
|
133
|
-
onClose,
|
134
|
-
onUpstreamClose
|
135
|
-
]
|
136
|
-
);
|
137
|
-
const onFocus = (0, import_react.useCallback)(
|
138
|
-
(ev) => {
|
139
|
-
onFocusProp == null ? void 0 : onFocusProp(ev);
|
140
|
-
setFocusedIndex(index);
|
141
|
-
},
|
142
|
-
[onFocusProp, setFocusedIndex, index]
|
104
|
+
[customCloseOnSelect, generalCloseOnSelect, onClose, onUpstreamClose]
|
143
105
|
);
|
106
|
+
const onFocus = (0, import_react.useCallback)(() => {
|
107
|
+
setFocusedIndex(index);
|
108
|
+
}, [setFocusedIndex, index]);
|
144
109
|
const onRestoreFocus = (0, import_react.useCallback)(() => {
|
145
110
|
var _a2;
|
146
|
-
(_a2 =
|
111
|
+
(_a2 = itemRef.current) == null ? void 0 : _a2.focus();
|
147
112
|
setFocusedIndex(index);
|
148
113
|
}, [setFocusedIndex, index]);
|
149
114
|
const onKeyDown = (0, import_react.useCallback)(
|
150
115
|
(ev) => {
|
151
|
-
onKeyDownProp == null ? void 0 : onKeyDownProp(ev);
|
152
116
|
const actions = {
|
153
117
|
ArrowLeft: isNested ? (0, import_utils.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
|
154
118
|
};
|
@@ -158,29 +122,28 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
158
122
|
ev.stopPropagation();
|
159
123
|
action();
|
160
124
|
},
|
161
|
-
[
|
125
|
+
[onUpstreamRestoreFocus, onClose, isNested]
|
162
126
|
);
|
163
127
|
const rest = (0, import_use_clickable.useClickable)({
|
164
128
|
focusOnClick: false,
|
165
129
|
...props,
|
166
|
-
onClick,
|
167
|
-
onFocus,
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
ref: (0, import_utils.mergeRefs)(register, buttonRef, ref),
|
130
|
+
onClick: (0, import_utils.handlerAll)(props.onClick, onClick),
|
131
|
+
onFocus: (0, import_utils.handlerAll)(props.onFocus, onFocus),
|
132
|
+
onMouseOver: (0, import_utils.handlerAll)(props.onMouseOver, onMouseOver),
|
133
|
+
onMouseLeave: (0, import_utils.handlerAll)(props.onMouseLeave, onMouseLeave),
|
134
|
+
onKeyDown: (0, import_utils.handlerAll)(props.onKeyDown, onKeyDown, onKeyDownRef.current),
|
135
|
+
ref: (0, import_utils.mergeRefs)(register, itemRef, ref),
|
173
136
|
isDisabled,
|
174
137
|
isFocusable
|
175
138
|
});
|
176
139
|
(0, import_utils.useUpdateEffect)(() => {
|
177
140
|
if (!isOpen) return;
|
178
141
|
const id = requestAnimationFrameId.current;
|
179
|
-
if (isFocused && !trulyDisabled &&
|
142
|
+
if (isFocused && !trulyDisabled && itemRef.current) {
|
180
143
|
if (id) cancelAnimationFrame(id);
|
181
144
|
requestAnimationFrameId.current = requestAnimationFrame(() => {
|
182
145
|
var _a2;
|
183
|
-
(_a2 =
|
146
|
+
(_a2 = itemRef.current) == null ? void 0 : _a2.focus({ preventScroll: true });
|
184
147
|
requestAnimationFrameId.current = null;
|
185
148
|
});
|
186
149
|
} else if (menuRef.current && !(0, import_utils.isActiveElement)(menuRef.current)) {
|
@@ -190,7 +153,6 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
190
153
|
if (id) cancelAnimationFrame(id);
|
191
154
|
};
|
192
155
|
}, [isFocused, trulyDisabled, menuRef, isOpen]);
|
193
|
-
type = as || type ? type != null ? type : void 0 : "button";
|
194
156
|
children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { style: { flex: 1 }, children }) : children;
|
195
157
|
const css = { ...styles.item };
|
196
158
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
@@ -207,9 +169,7 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
207
169
|
{
|
208
170
|
...rest,
|
209
171
|
...isDownstreamOpen ? { "data-active": "" } : {},
|
210
|
-
|
211
|
-
type,
|
212
|
-
role: "menu-item",
|
172
|
+
role: "menuitem",
|
213
173
|
tabIndex: isFocused ? 0 : -1,
|
214
174
|
className: (0, import_utils.cx)("ui-menu__item", className),
|
215
175
|
__css: css,
|