@yamada-ui/menu 1.5.2-dev-20241213210300 → 1.5.2-dev-20241213213653
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{chunk-6HK6THLX.mjs → chunk-6PJHU6VG.mjs} +2 -2
- package/dist/{chunk-SWY6VV4V.mjs → chunk-AGHG37SL.mjs} +2 -2
- package/dist/{chunk-72J22E3I.mjs → chunk-DAEXVQLG.mjs} +10 -10
- package/dist/chunk-DAEXVQLG.mjs.map +1 -0
- package/dist/{chunk-KGWPKJI2.mjs → chunk-H662AKOV.mjs} +3 -3
- package/dist/{chunk-3YBMMWDY.mjs → chunk-HWUNOGPF.mjs} +2 -2
- package/dist/{chunk-HAW3H5KJ.mjs → chunk-IWH3B4PS.mjs} +1 -1
- package/dist/chunk-IWH3B4PS.mjs.map +1 -0
- package/dist/{chunk-VPMWBZWN.mjs → chunk-JQCTT4C2.mjs} +11 -11
- package/dist/chunk-JQCTT4C2.mjs.map +1 -0
- package/dist/{chunk-OP45KQJ6.mjs → chunk-JTGSHZXB.mjs} +15 -15
- package/dist/chunk-JTGSHZXB.mjs.map +1 -0
- package/dist/{chunk-X5YYJEDZ.mjs → chunk-TFGPDF5W.mjs} +36 -23
- package/dist/chunk-TFGPDF5W.mjs.map +1 -0
- package/dist/{chunk-XZJXCEI7.mjs → chunk-VDTE5ERA.mjs} +2 -2
- package/dist/{chunk-4MJ2ZBIB.mjs → chunk-ZG5BKE24.mjs} +2 -2
- package/dist/context-menu-trigger.js.map +1 -1
- package/dist/context-menu-trigger.mjs +2 -2
- package/dist/context-menu.js +13 -13
- package/dist/context-menu.js.map +1 -1
- package/dist/context-menu.mjs +3 -3
- package/dist/index.js +61 -48
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +11 -11
- package/dist/menu-button.js +41 -28
- package/dist/menu-button.js.map +1 -1
- package/dist/menu-button.mjs +3 -3
- package/dist/menu-context.d.mts +2 -2
- package/dist/menu-context.d.ts +2 -2
- package/dist/menu-context.js.map +1 -1
- package/dist/menu-context.mjs +1 -1
- package/dist/menu-divider.js.map +1 -1
- package/dist/menu-divider.mjs +2 -2
- package/dist/menu-group.js.map +1 -1
- package/dist/menu-group.mjs +2 -2
- package/dist/menu-item.d.mts +24 -0
- package/dist/menu-item.d.ts +24 -0
- package/dist/menu-item.js +34 -21
- package/dist/menu-item.js.map +1 -1
- package/dist/menu-item.mjs +2 -2
- package/dist/menu-list.js.map +1 -1
- package/dist/menu-list.mjs +2 -2
- package/dist/menu-option-group.js +41 -28
- package/dist/menu-option-group.js.map +1 -1
- package/dist/menu-option-group.mjs +4 -4
- package/dist/menu-separator.js.map +1 -1
- package/dist/menu-separator.mjs +2 -2
- package/dist/menu.js +13 -13
- package/dist/menu.js.map +1 -1
- package/dist/menu.mjs +2 -2
- package/package.json +11 -11
- package/dist/chunk-72J22E3I.mjs.map +0 -1
- package/dist/chunk-HAW3H5KJ.mjs.map +0 -1
- package/dist/chunk-OP45KQJ6.mjs.map +0 -1
- package/dist/chunk-VPMWBZWN.mjs.map +0 -1
- package/dist/chunk-X5YYJEDZ.mjs.map +0 -1
- /package/dist/{chunk-6HK6THLX.mjs.map → chunk-6PJHU6VG.mjs.map} +0 -0
- /package/dist/{chunk-SWY6VV4V.mjs.map → chunk-AGHG37SL.mjs.map} +0 -0
- /package/dist/{chunk-KGWPKJI2.mjs.map → chunk-H662AKOV.mjs.map} +0 -0
- /package/dist/{chunk-3YBMMWDY.mjs.map → chunk-HWUNOGPF.mjs.map} +0 -0
- /package/dist/{chunk-XZJXCEI7.mjs.map → chunk-VDTE5ERA.mjs.map} +0 -0
- /package/dist/{chunk-4MJ2ZBIB.mjs.map → chunk-ZG5BKE24.mjs.map} +0 -0
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useMenu
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-IWH3B4PS.mjs";
|
5
5
|
|
6
6
|
// src/menu-divider.tsx
|
7
7
|
import { forwardRef, ui } from "@yamada-ui/core";
|
@@ -28,4 +28,4 @@ MenuDivider.__ui__ = "MenuDivider";
|
|
28
28
|
export {
|
29
29
|
MenuDivider
|
30
30
|
};
|
31
|
-
//# sourceMappingURL=chunk-
|
31
|
+
//# sourceMappingURL=chunk-6PJHU6VG.mjs.map
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useMenu
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-IWH3B4PS.mjs";
|
5
5
|
|
6
6
|
// src/menu-group.tsx
|
7
7
|
import { forwardRef, ui } from "@yamada-ui/core";
|
@@ -48,4 +48,4 @@ MenuGroup.__ui__ = "MenuGroup";
|
|
48
48
|
export {
|
49
49
|
MenuGroup
|
50
50
|
};
|
51
|
-
//# sourceMappingURL=chunk-
|
51
|
+
//# sourceMappingURL=chunk-AGHG37SL.mjs.map
|
@@ -1,11 +1,11 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
MenuIcon
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-TFGPDF5W.mjs";
|
5
5
|
import {
|
6
6
|
useMenu,
|
7
7
|
useUpstreamMenuItem
|
8
|
-
} from "./chunk-
|
8
|
+
} from "./chunk-IWH3B4PS.mjs";
|
9
9
|
|
10
10
|
// src/menu-button.tsx
|
11
11
|
import { forwardRef, ui } from "@yamada-ui/core";
|
@@ -27,7 +27,7 @@ var MenuButton = forwardRef(
|
|
27
27
|
const { onKeyDownRef, onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
|
28
28
|
const {
|
29
29
|
buttonRef,
|
30
|
-
|
30
|
+
open,
|
31
31
|
onClose,
|
32
32
|
onFocusFirstItem,
|
33
33
|
onFocusLastItem,
|
@@ -55,17 +55,17 @@ var MenuButton = forwardRef(
|
|
55
55
|
(ev) => {
|
56
56
|
if (ev.key === " ") ev.key = ev.code;
|
57
57
|
const actions = {
|
58
|
-
ArrowLeft:
|
59
|
-
ArrowRight: !
|
60
|
-
Enter: !
|
61
|
-
Space: !
|
58
|
+
ArrowLeft: open ? funcAll(onUpstreamRestoreFocus, onClose) : void 0,
|
59
|
+
ArrowRight: !open ? funcAll(onOpen, onFocusFirstItem) : void 0,
|
60
|
+
Enter: !open ? funcAll(onOpen, onFocusFirstItem) : void 0,
|
61
|
+
Space: !open ? funcAll(onOpen, onFocusFirstItem) : void 0
|
62
62
|
};
|
63
63
|
const action = actions[ev.key];
|
64
64
|
if (!action) return;
|
65
65
|
ev.preventDefault();
|
66
66
|
action();
|
67
67
|
},
|
68
|
-
[
|
68
|
+
[open, onOpen, onFocusFirstItem, onUpstreamRestoreFocus, onClose]
|
69
69
|
);
|
70
70
|
assignRef(onKeyDownRef, onItemKeyDown);
|
71
71
|
const Component = useMemo(() => as ? ui(as) : Button, [as]);
|
@@ -77,7 +77,7 @@ var MenuButton = forwardRef(
|
|
77
77
|
className: cx("ui-menu", className),
|
78
78
|
"aria-haspopup": "menu",
|
79
79
|
...rest,
|
80
|
-
"data-active": dataAttr(
|
80
|
+
"data-active": dataAttr(open),
|
81
81
|
onKeyDown: handlerAll(rest.onKeyDown, onKeyDown),
|
82
82
|
children
|
83
83
|
}
|
@@ -121,4 +121,4 @@ export {
|
|
121
121
|
MenuButton,
|
122
122
|
MenuItemButton
|
123
123
|
};
|
124
|
-
//# sourceMappingURL=chunk-
|
124
|
+
//# sourceMappingURL=chunk-DAEXVQLG.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/menu-button.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { KeyboardEvent, ReactNode } from \"react\"\nimport type { MenuIconProps } from \"./menu-item\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport { PopoverTrigger } from \"@yamada-ui/popover\"\nimport {\n assignRef,\n cx,\n dataAttr,\n funcAll,\n handlerAll,\n mergeRefs,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useId, useMemo } from \"react\"\nimport { useMenu, useUpstreamMenuItem } from \"./menu-context\"\nimport { MenuIcon } from \"./menu-item\"\n\nexport interface MenuButtonProps extends HTMLUIProps<\"button\"> {}\n\nexport const MenuButton = forwardRef<MenuButtonProps, \"button\">(\n ({ id, as, className, children, ...rest }, ref) => {\n const { onKeyDownRef, onUpstreamRestoreFocus } = useUpstreamMenuItem() ?? {}\n const {\n buttonRef,\n open,\n onClose,\n onFocusFirstItem,\n onFocusLastItem,\n onOpen,\n } = useMenu()\n const uuid = useId()\n\n id ??= uuid\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.key === \" \") ev.key = ev.code\n\n const actions: { [key: string]: Function } = {\n ArrowDown: funcAll(onOpen, onFocusFirstItem),\n ArrowUp: funcAll(onOpen, onFocusLastItem),\n Enter: funcAll(onOpen, onFocusFirstItem),\n Space: funcAll(onOpen, onFocusFirstItem),\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<HTMLDivElement>) => {\n if (ev.key === \" \") ev.key = ev.code\n\n const actions: { [key: string]: Function | undefined } = {\n ArrowLeft: open\n ? funcAll(onUpstreamRestoreFocus, onClose)\n : undefined,\n ArrowRight: !open ? funcAll(onOpen, onFocusFirstItem) : undefined,\n Enter: !open ? funcAll(onOpen, onFocusFirstItem) : undefined,\n Space: !open ? funcAll(onOpen, onFocusFirstItem) : undefined,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n\n action()\n },\n [open, onOpen, onFocusFirstItem, onUpstreamRestoreFocus, onClose],\n )\n\n assignRef(onKeyDownRef, onItemKeyDown)\n\n const Component = useMemo(() => (as ? ui(as) : Button), [as])\n\n return (\n <PopoverTrigger>\n <Component\n id={id}\n ref={mergeRefs(buttonRef, ref)}\n className={cx(\"ui-menu\", className)}\n aria-haspopup=\"menu\"\n {...rest}\n data-active={dataAttr(open)}\n onKeyDown={handlerAll(rest.onKeyDown, onKeyDown)}\n >\n {children}\n </Component>\n </PopoverTrigger>\n )\n },\n)\n\nMenuButton.displayName = \"MenuButton\"\nMenuButton.__ui__ = \"MenuButton\"\n\nconst Button = forwardRef<MenuButtonProps, \"button\">((rest, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n appearance: \"none\",\n display: \"inline-flex\",\n outline: 0,\n ...styles.button,\n }\n\n return <ui.button ref={ref} __css={css} {...rest} />\n})\n\nexport interface MenuItemButtonProps extends MenuButtonProps {\n icon?: ReactNode\n iconProps?: MenuIconProps\n innerProps?: HTMLUIProps<\"span\">\n}\n\nexport const MenuItemButton = forwardRef<MenuItemButtonProps, \"button\">(\n ({ className, children, icon, iconProps, innerProps, ...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\nMenuItemButton.displayName = \"MenuItemButton\"\nMenuItemButton.__ui__ = \"MenuItemButton\"\n"],"mappings":"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","names":[]}
|
@@ -1,10 +1,10 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
Menu
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-JTGSHZXB.mjs";
|
5
5
|
import {
|
6
6
|
ContextMenuProvider
|
7
|
-
} from "./chunk-
|
7
|
+
} from "./chunk-IWH3B4PS.mjs";
|
8
8
|
|
9
9
|
// src/context-menu.tsx
|
10
10
|
import { omitThemeProps, useComponentMultiStyle } from "@yamada-ui/core";
|
@@ -19,4 +19,4 @@ ContextMenu.__ui__ = "ContextMenu";
|
|
19
19
|
export {
|
20
20
|
ContextMenu
|
21
21
|
};
|
22
|
-
//# sourceMappingURL=chunk-
|
22
|
+
//# sourceMappingURL=chunk-H662AKOV.mjs.map
|
@@ -2,7 +2,7 @@
|
|
2
2
|
import {
|
3
3
|
useMenu,
|
4
4
|
useMenuDescendantsContext
|
5
|
-
} from "./chunk-
|
5
|
+
} from "./chunk-IWH3B4PS.mjs";
|
6
6
|
|
7
7
|
// src/menu-list.tsx
|
8
8
|
import { forwardRef, ui } from "@yamada-ui/core";
|
@@ -88,4 +88,4 @@ MenuList.__ui__ = "MenuList";
|
|
88
88
|
export {
|
89
89
|
MenuList
|
90
90
|
};
|
91
|
-
//# sourceMappingURL=chunk-
|
91
|
+
//# sourceMappingURL=chunk-HWUNOGPF.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/menu-context.ts"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type {\n Dispatch,\n KeyboardEventHandler,\n MutableRefObject,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport type { MenuOptions } from \"./menu\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\n\nexport const {\n DescendantsContextProvider,\n useDescendant: useMenuDescendant,\n useDescendants,\n useDescendantsContext: useMenuDescendantsContext,\n} = createDescendant()\n\ninterface MenuContext extends MenuOptions {\n buttonRef: RefObject<HTMLButtonElement>\n focusedIndex: number\n menuRef: RefObject<HTMLDivElement>\n nested: boolean\n open: boolean\n requestAnimationFrameId: MutableRefObject<null | number>\n setFocusedIndex: Dispatch<SetStateAction<number>>\n styles: { [key: string]: CSSUIObject | undefined }\n onClose: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n onOpen: () => void\n onUpstreamClose?: () => void\n}\n\nexport const [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\ninterface ContextMenuContext {\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ContextMenuProvider, useContextMenu] =\n createContext<ContextMenuContext>({\n name: \"ContextMenuContext\",\n strict: false,\n })\n\ninterface UpstreamMenuContext {\n relatedRef: RefObject<HTMLElement>\n onDownstreamCloseMapRef: MutableRefObject<Map<string, () => void>>\n onUpstreamClose: () => void\n}\n\nexport const [UpstreamMenuProvider, useUpstreamMenu] =\n createContext<UpstreamMenuContext>({\n name: \"UpstreamMenuContext\",\n strict: false,\n })\n\ninterface UpstreamMenuItemContext {\n hasDownstreamRef: MutableRefObject<boolean>\n setDownstreamOpen: Dispatch<SetStateAction<boolean>>\n onKeyDownRef: RefObject<KeyboardEventHandler<HTMLDivElement>>\n onUpstreamRestoreFocus: () => void\n}\n\nexport const [UpstreamMenuItemProvider, useUpstreamMenuItem] =\n createContext<UpstreamMenuItemContext>({\n name: \"UpstreamMenuItemContext\",\n strict: false,\n })\n"],"mappings":";;;AASA,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAEvB,IAAM;AAAA,EACX;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,uBAAuB;AACzB,IAAI,iBAAiB;AAkBd,IAAM,CAAC,cAAc,OAAO,IAAI,cAA2B;AAAA,EAChE,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAMM,IAAM,CAAC,qBAAqB,cAAc,IAC/C,cAAkC;AAAA,EAChC,MAAM;AAAA,EACN,QAAQ;AACV,CAAC;AAQI,IAAM,CAAC,sBAAsB,eAAe,IACjD,cAAmC;AAAA,EACjC,MAAM;AAAA,EACN,QAAQ;AACV,CAAC;AASI,IAAM,CAAC,0BAA0B,mBAAmB,IACzD,cAAuC;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ;AACV,CAAC;","names":[]}
|
@@ -1,14 +1,14 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
MenuGroup
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-AGHG37SL.mjs";
|
5
5
|
import {
|
6
6
|
MenuOptionItem
|
7
|
-
} from "./chunk-
|
7
|
+
} from "./chunk-TFGPDF5W.mjs";
|
8
8
|
|
9
9
|
// src/menu-option-group.tsx
|
10
10
|
import { useControllableState } from "@yamada-ui/use-controllable-state";
|
11
|
-
import { cx, getValidChildren, isArray } from "@yamada-ui/utils";
|
11
|
+
import { cx, getValidChildren, isArray, isString } from "@yamada-ui/utils";
|
12
12
|
import { cloneElement, forwardRef, useCallback } from "react";
|
13
13
|
import { jsx } from "react/jsx-runtime";
|
14
14
|
var MenuOptionGroup = forwardRef(
|
@@ -21,8 +21,8 @@ var MenuOptionGroup = forwardRef(
|
|
21
21
|
onChange: onChangeProp,
|
22
22
|
...rest
|
23
23
|
}, ref) => {
|
24
|
-
const
|
25
|
-
defaultValue != null ? defaultValue : defaultValue =
|
24
|
+
const radio = type === "radio";
|
25
|
+
defaultValue != null ? defaultValue : defaultValue = radio ? "" : [];
|
26
26
|
const [value, setValue] = useControllableState({
|
27
27
|
defaultValue,
|
28
28
|
value: valueProp,
|
@@ -30,13 +30,13 @@ var MenuOptionGroup = forwardRef(
|
|
30
30
|
});
|
31
31
|
const onChange = useCallback(
|
32
32
|
(selectedValue) => {
|
33
|
-
if (
|
34
|
-
if (!
|
33
|
+
if (radio && isString(value)) setValue(selectedValue);
|
34
|
+
if (!radio && isArray(value)) {
|
35
35
|
const nextValue = value.includes(selectedValue) ? value.filter((item) => item !== selectedValue) : value.concat(selectedValue);
|
36
36
|
setValue(nextValue);
|
37
37
|
}
|
38
38
|
},
|
39
|
-
[
|
39
|
+
[radio, value, setValue]
|
40
40
|
);
|
41
41
|
const validChildren = getValidChildren(children);
|
42
42
|
const cloneChildren = validChildren.map((child) => {
|
@@ -46,8 +46,8 @@ var MenuOptionGroup = forwardRef(
|
|
46
46
|
onChange(child.props.value);
|
47
47
|
(_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a, ev);
|
48
48
|
};
|
49
|
-
const
|
50
|
-
return cloneElement(child, { type,
|
49
|
+
const checked = !radio && isArray(value) ? value.includes(child.props.value) : child.props.value === value;
|
50
|
+
return cloneElement(child, { type, checked, onClick });
|
51
51
|
});
|
52
52
|
return /* @__PURE__ */ jsx(
|
53
53
|
MenuGroup,
|
@@ -66,4 +66,4 @@ MenuOptionGroup.__ui__ = "MenuOptionGroup";
|
|
66
66
|
export {
|
67
67
|
MenuOptionGroup
|
68
68
|
};
|
69
|
-
//# sourceMappingURL=chunk-
|
69
|
+
//# sourceMappingURL=chunk-JQCTT4C2.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/menu-option-group.tsx"],"sourcesContent":["import type { ComponentArgs } from \"@yamada-ui/core\"\nimport type { ForwardedRef, ReactElement, RefAttributes } from \"react\"\nimport type { MenuGroupProps } from \"./menu-group\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { cx, getValidChildren, isArray, isString } from \"@yamada-ui/utils\"\nimport { cloneElement, forwardRef, useCallback } from \"react\"\nimport { MenuGroup } from \"./menu-group\"\nimport { MenuOptionItem } from \"./menu-item\"\n\ninterface MenuOptionGroupOptions<Y extends string | string[] = string> {\n /**\n * The type of the menu option group.\n *\n * @default 'checkbox'\n */\n type?: \"checkbox\" | \"radio\"\n /**\n * The initial value of the menu item group.\n */\n defaultValue?: Y\n /**\n * The value of the menu item group.\n */\n value?: Y\n /**\n * The callback fired when any children checkbox is checked or unchecked.\n */\n onChange?: (value: Y) => void\n}\n\nexport interface MenuOptionGroupProps<Y extends string | string[] = string>\n extends Omit<MenuGroupProps, keyof MenuOptionGroupOptions>,\n MenuOptionGroupOptions<Y> {}\n\nexport const MenuOptionGroup = forwardRef(\n <Y extends string | string[] = string>(\n {\n type,\n className,\n children,\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n }: MenuOptionGroupProps<Y>,\n ref: ForwardedRef<HTMLDivElement>,\n ) => {\n const radio = type === \"radio\"\n\n defaultValue ??= (radio ? \"\" : []) as Y\n\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n\n const onChange = useCallback(\n (selectedValue: string) => {\n if (radio && isString(value)) setValue(selectedValue as Y)\n\n if (!radio && 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 [radio, 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 checked =\n !radio && isArray(value)\n ? value.includes(child.props.value)\n : child.props.value === value\n\n return cloneElement(child, { type, checked, onClick })\n })\n\n return (\n <MenuGroup\n ref={ref}\n className={cx(\"ui-menu__item--group--option\", className)}\n {...rest}\n >\n {cloneChildren}\n </MenuGroup>\n )\n },\n) as {\n <Y extends string | string[] = string>(\n props: MenuOptionGroupProps<Y> & RefAttributes<HTMLDivElement>,\n ): ReactElement\n} & ComponentArgs\n\nMenuOptionGroup.displayName = \"MenuOptionGroup\"\nMenuOptionGroup.__ui__ = \"MenuOptionGroup\"\n"],"mappings":";;;;;;;;;AAGA,SAAS,4BAA4B;AACrC,SAAS,IAAI,kBAAkB,SAAS,gBAAgB;AACxD,SAAS,cAAc,YAAY,mBAAmB;AAsFhD;AAzDC,IAAM,kBAAkB;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,QAAQ,SAAS;AAEvB,yDAAkB,QAAQ,KAAK,CAAC;AAEhC,UAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,MAC7C;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,WAAW;AAAA,MACf,CAAC,kBAA0B;AACzB,YAAI,SAAS,SAAS,KAAK,EAAG,UAAS,aAAkB;AAEzD,YAAI,CAAC,SAAS,QAAQ,KAAK,GAAG;AAC5B,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,OAAO,OAAO,QAAQ;AAAA,IACzB;AAEA,UAAM,gBAAgB,iBAAiB,QAAQ;AAE/C,UAAM,gBAAgB,cAAc,IAAI,CAAC,UAAU;AACjD,UAAI,MAAM,SAAS,eAAgB,QAAO;AAE1C,YAAM,UAAU,CAAC,OAAmB;AA7E1C;AA8EQ,iBAAS,MAAM,MAAM,KAAK;AAC1B,0BAAM,OAAM,YAAZ,4BAAsB;AAAA,MACxB;AAEA,YAAM,UACJ,CAAC,SAAS,QAAQ,KAAK,IACnB,MAAM,SAAS,MAAM,MAAM,KAAK,IAChC,MAAM,MAAM,UAAU;AAE5B,aAAO,aAAa,OAAO,EAAE,MAAM,SAAS,QAAQ,CAAC;AAAA,IACvD,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;AAC9B,gBAAgB,SAAS;","names":[]}
|
@@ -7,7 +7,7 @@ import {
|
|
7
7
|
useDescendants,
|
8
8
|
useUpstreamMenu,
|
9
9
|
useUpstreamMenuItem
|
10
|
-
} from "./chunk-
|
10
|
+
} from "./chunk-IWH3B4PS.mjs";
|
11
11
|
|
12
12
|
// src/menu.tsx
|
13
13
|
import { omitThemeProps, useComponentMultiStyle } from "@yamada-ui/core";
|
@@ -36,8 +36,8 @@ var Menu = (props) => {
|
|
36
36
|
} = omitThemeProps(mergedProps);
|
37
37
|
const { relatedRef, onDownstreamCloseMapRef, onUpstreamClose } = (_b = useUpstreamMenu()) != null ? _b : {};
|
38
38
|
const { hasDownstreamRef, setDownstreamOpen } = (_c = useUpstreamMenuItem()) != null ? _c : {};
|
39
|
-
const
|
40
|
-
if (
|
39
|
+
const nested = !!relatedRef;
|
40
|
+
if (nested) {
|
41
41
|
placement != null ? placement : placement = "right-start";
|
42
42
|
offset != null ? offset : offset = [-8, 8];
|
43
43
|
closeOnBlur != null ? closeOnBlur : closeOnBlur = false;
|
@@ -77,8 +77,8 @@ var Menu = (props) => {
|
|
77
77
|
}, [descendants, initialFocusRef]);
|
78
78
|
const onOpenInternal = useCallback(() => {
|
79
79
|
onOpenProp == null ? void 0 : onOpenProp();
|
80
|
-
if (!
|
81
|
-
}, [onOpenProp,
|
80
|
+
if (!nested) onFocusMenu();
|
81
|
+
}, [onOpenProp, nested, onFocusMenu]);
|
82
82
|
const onCloseInternal = useCallback(() => {
|
83
83
|
onCloseProp == null ? void 0 : onCloseProp();
|
84
84
|
for (const onClose2 of onCloseMapRef.current.values()) {
|
@@ -86,7 +86,7 @@ var Menu = (props) => {
|
|
86
86
|
}
|
87
87
|
}, [onCloseProp]);
|
88
88
|
const id = useId();
|
89
|
-
const {
|
89
|
+
const { open, onClose, onOpen } = useDisclosure({
|
90
90
|
...props,
|
91
91
|
onClose: onCloseInternal,
|
92
92
|
onOpen: onOpenInternal
|
@@ -99,8 +99,8 @@ var Menu = (props) => {
|
|
99
99
|
};
|
100
100
|
}, [id, onClose, onDownstreamCloseMapRef]);
|
101
101
|
useEffect(() => {
|
102
|
-
if (setDownstreamOpen) setDownstreamOpen(
|
103
|
-
}, [setDownstreamOpen,
|
102
|
+
if (setDownstreamOpen) setDownstreamOpen(open);
|
103
|
+
}, [setDownstreamOpen, open]);
|
104
104
|
useEffect(() => {
|
105
105
|
if (hasDownstreamRef) hasDownstreamRef.current = true;
|
106
106
|
return () => {
|
@@ -108,8 +108,8 @@ var Menu = (props) => {
|
|
108
108
|
};
|
109
109
|
});
|
110
110
|
useUpdateEffect(() => {
|
111
|
-
if (!
|
112
|
-
}, [
|
111
|
+
if (!open) setFocusedIndex(-1);
|
112
|
+
}, [open]);
|
113
113
|
useUnmountEffect(() => {
|
114
114
|
timeoutIds.current.forEach((id2) => clearTimeout(id2));
|
115
115
|
timeoutIds.current.clear();
|
@@ -129,9 +129,9 @@ var Menu = (props) => {
|
|
129
129
|
buttonRef,
|
130
130
|
closeOnSelect,
|
131
131
|
focusedIndex,
|
132
|
-
isNested,
|
133
|
-
isOpen,
|
134
132
|
menuRef,
|
133
|
+
nested,
|
134
|
+
open,
|
135
135
|
requestAnimationFrameId,
|
136
136
|
setFocusedIndex,
|
137
137
|
styles,
|
@@ -145,14 +145,14 @@ var Menu = (props) => {
|
|
145
145
|
Popover,
|
146
146
|
{
|
147
147
|
...{
|
148
|
-
trigger:
|
148
|
+
trigger: nested ? "hover" : "click",
|
149
149
|
...rest,
|
150
150
|
closeOnBlur,
|
151
151
|
closeOnButton: false,
|
152
152
|
duration,
|
153
153
|
initialFocusRef,
|
154
|
-
isOpen,
|
155
154
|
offset,
|
155
|
+
open,
|
156
156
|
placement,
|
157
157
|
relatedRef,
|
158
158
|
onClose,
|
@@ -170,4 +170,4 @@ Menu.__ui__ = "Menu";
|
|
170
170
|
export {
|
171
171
|
Menu
|
172
172
|
};
|
173
|
-
//# sourceMappingURL=chunk-
|
173
|
+
//# sourceMappingURL=chunk-JTGSHZXB.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/menu.tsx"],"sourcesContent":["import type { FC, ThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport { omitThemeProps, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { Popover } from \"@yamada-ui/popover\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport { funcAll, useUnmountEffect, useUpdateEffect } from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport {\n DescendantsContextProvider,\n MenuProvider,\n UpstreamMenuProvider,\n useContextMenu,\n useDescendants,\n useUpstreamMenu,\n useUpstreamMenuItem,\n} from \"./menu-context\"\n\nexport interface MenuOptions {\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n}\n\nexport interface MenuProps\n extends ThemeProps<\"Menu\">,\n Omit<PopoverProps, \"closeOnButton\" | \"relatedRef\">,\n MenuOptions {}\n\n/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see Docs https://yamada-ui.com/components/overlay/menu\n */\nexport const Menu: FC<MenuProps> = (props) => {\n const { styles: contextMenuStyles } = useContextMenu() ?? {}\n const [styles, mergedProps] = useComponentMultiStyle(\"Menu\", props, {\n isProcessSkip: !!contextMenuStyles,\n styles: contextMenuStyles,\n })\n let {\n closeOnBlur,\n closeOnSelect = true,\n duration = 0.2,\n initialFocusRef,\n offset,\n placement,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const { relatedRef, onDownstreamCloseMapRef, onUpstreamClose } =\n useUpstreamMenu() ?? {}\n const { hasDownstreamRef, setDownstreamOpen } = useUpstreamMenuItem() ?? {}\n const nested = !!relatedRef\n\n if (nested) {\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 buttonRef = useRef<HTMLButtonElement>(null)\n const timeoutIds = useRef<Set<any>>(new Set([]))\n const requestAnimationFrameId = useRef<null | number>(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 (!nested) onFocusMenu()\n }, [onOpenProp, nested, 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 { open, onClose, onOpen } = useDisclosure({\n ...props,\n onClose: onCloseInternal,\n onOpen: onOpenInternal,\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(open)\n }, [setDownstreamOpen, open])\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 (!open) setFocusedIndex(-1)\n }, [open])\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 buttonRef,\n closeOnSelect,\n focusedIndex,\n menuRef,\n nested,\n open,\n requestAnimationFrameId,\n setFocusedIndex,\n styles,\n onClose,\n onFocusFirstItem,\n onFocusLastItem,\n onOpen,\n onUpstreamClose,\n }}\n >\n <Popover\n {...{\n trigger: nested ? \"hover\" : \"click\",\n ...rest,\n closeOnBlur,\n closeOnButton: false,\n duration,\n initialFocusRef,\n offset,\n open,\n placement,\n relatedRef,\n onClose,\n onOpen,\n }}\n />\n </MenuProvider>\n </UpstreamMenuProvider>\n </DescendantsContextProvider>\n )\n}\n\nMenu.__ui__ = \"Menu\"\n"],"mappings":"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","names":["_a","id","onClose"]}
|
@@ -4,7 +4,7 @@ import {
|
|
4
4
|
useMenu,
|
5
5
|
useMenuDescendant,
|
6
6
|
useUpstreamMenuItem
|
7
|
-
} from "./chunk-
|
7
|
+
} from "./chunk-IWH3B4PS.mjs";
|
8
8
|
|
9
9
|
// src/menu-item.tsx
|
10
10
|
import { forwardRef, ui } from "@yamada-ui/core";
|
@@ -32,18 +32,22 @@ var MenuItem = forwardRef(
|
|
32
32
|
children,
|
33
33
|
closeOnSelect: customCloseOnSelect,
|
34
34
|
command,
|
35
|
+
disabled,
|
36
|
+
focusable,
|
35
37
|
icon,
|
36
38
|
isDisabled,
|
37
39
|
isFocusable,
|
38
40
|
...props
|
39
41
|
}, ref) => {
|
40
42
|
var _a, _b;
|
43
|
+
disabled != null ? disabled : disabled = isDisabled;
|
44
|
+
focusable != null ? focusable : focusable = isFocusable;
|
41
45
|
const {
|
42
46
|
closeOnSelect,
|
43
47
|
focusedIndex,
|
44
|
-
isNested,
|
45
|
-
isOpen,
|
46
48
|
menuRef,
|
49
|
+
nested,
|
50
|
+
open,
|
47
51
|
requestAnimationFrameId,
|
48
52
|
setFocusedIndex,
|
49
53
|
styles,
|
@@ -51,7 +55,7 @@ var MenuItem = forwardRef(
|
|
51
55
|
onUpstreamClose
|
52
56
|
} = useMenu();
|
53
57
|
const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
|
54
|
-
const [
|
58
|
+
const [downstreamOpen, setDownstreamOpen] = useState(false);
|
55
59
|
const uuid = useId();
|
56
60
|
const itemRef = useRef(null);
|
57
61
|
const hasDownstreamRef = useRef(false);
|
@@ -59,19 +63,19 @@ var MenuItem = forwardRef(
|
|
59
63
|
() => void 0
|
60
64
|
);
|
61
65
|
id != null ? id : id = uuid;
|
62
|
-
const trulyDisabled =
|
66
|
+
const trulyDisabled = disabled && !focusable;
|
63
67
|
const type = (_b = itemRef.current) == null ? void 0 : _b.getAttribute("type");
|
64
68
|
const role = !!type ? type === "checkbox" ? "menuitemcheckbox" : "menuitemradio" : "menuitem";
|
65
69
|
const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
|
66
|
-
const
|
70
|
+
const focused = index === focusedIndex;
|
67
71
|
const onMouseOver = useCallback(() => {
|
68
|
-
if (
|
72
|
+
if (disabled) return;
|
69
73
|
setFocusedIndex(index);
|
70
|
-
}, [index,
|
74
|
+
}, [index, disabled, setFocusedIndex]);
|
71
75
|
const onMouseLeave = useCallback(() => {
|
72
|
-
if (
|
76
|
+
if (disabled) return;
|
73
77
|
setFocusedIndex(-1);
|
74
|
-
}, [setFocusedIndex,
|
78
|
+
}, [setFocusedIndex, disabled]);
|
75
79
|
const onClick = useCallback(
|
76
80
|
(ev) => {
|
77
81
|
if (!isTargetMenuItem(ev.currentTarget)) return;
|
@@ -95,7 +99,7 @@ var MenuItem = forwardRef(
|
|
95
99
|
(ev) => {
|
96
100
|
if (ev.key === " ") ev.key = ev.code;
|
97
101
|
const actions = {
|
98
|
-
ArrowLeft:
|
102
|
+
ArrowLeft: nested ? funcAll(onUpstreamRestoreFocus, onClose) : void 0,
|
99
103
|
Space: !hasDownstreamRef.current ? funcAll(onUpstreamClose, onClose) : void 0
|
100
104
|
};
|
101
105
|
const action = actions[ev.key];
|
@@ -104,15 +108,15 @@ var MenuItem = forwardRef(
|
|
104
108
|
ev.stopPropagation();
|
105
109
|
action();
|
106
110
|
},
|
107
|
-
[
|
111
|
+
[nested, onUpstreamRestoreFocus, onClose, onUpstreamClose]
|
108
112
|
);
|
109
113
|
const rest = useClickable({
|
110
114
|
clickOnSpace: false,
|
111
115
|
focusOnClick: false,
|
112
116
|
...props,
|
113
117
|
ref: mergeRefs(register, itemRef, ref),
|
114
|
-
|
115
|
-
|
118
|
+
disabled,
|
119
|
+
focusable,
|
116
120
|
onClick: handlerAll(props.onClick, onClick),
|
117
121
|
onFocus: handlerAll(props.onFocus, onFocus),
|
118
122
|
onKeyDown: handlerAll(props.onKeyDown, onKeyDown, onKeyDownRef.current),
|
@@ -120,9 +124,9 @@ var MenuItem = forwardRef(
|
|
120
124
|
onMouseOver: handlerAll(props.onMouseOver, onMouseOver)
|
121
125
|
});
|
122
126
|
useUpdateEffect(() => {
|
123
|
-
if (!
|
127
|
+
if (!open) return;
|
124
128
|
const id2 = requestAnimationFrameId.current;
|
125
|
-
if (
|
129
|
+
if (focused && !trulyDisabled && itemRef.current) {
|
126
130
|
if (id2) cancelAnimationFrame(id2);
|
127
131
|
requestAnimationFrameId.current = requestAnimationFrame(() => {
|
128
132
|
var _a2;
|
@@ -135,7 +139,7 @@ var MenuItem = forwardRef(
|
|
135
139
|
return () => {
|
136
140
|
if (id2) cancelAnimationFrame(id2);
|
137
141
|
};
|
138
|
-
}, [
|
142
|
+
}, [focused, trulyDisabled, menuRef, open]);
|
139
143
|
children = icon || command ? /* @__PURE__ */ jsx(ui.span, { style: { flex: 1 }, children }) : children;
|
140
144
|
const css = {
|
141
145
|
alignItems: "center",
|
@@ -164,11 +168,11 @@ var MenuItem = forwardRef(
|
|
164
168
|
{
|
165
169
|
id,
|
166
170
|
className: cx("ui-menu__item", className),
|
167
|
-
"data-focus": dataAttr(
|
171
|
+
"data-focus": dataAttr(downstreamOpen),
|
168
172
|
__css: css,
|
169
173
|
...rest,
|
170
174
|
role,
|
171
|
-
tabIndex: !
|
175
|
+
tabIndex: !downstreamOpen && focused ? 0 : -1,
|
172
176
|
children: [
|
173
177
|
icon ? /* @__PURE__ */ jsx(MenuIcon, { children: icon }) : null,
|
174
178
|
children,
|
@@ -183,17 +187,26 @@ var MenuItem = forwardRef(
|
|
183
187
|
MenuItem.displayName = "MenuItem";
|
184
188
|
MenuItem.__ui__ = "MenuItem";
|
185
189
|
var MenuOptionItem = forwardRef(
|
186
|
-
({
|
190
|
+
({
|
191
|
+
className,
|
192
|
+
checked,
|
193
|
+
children,
|
194
|
+
closeOnSelect = false,
|
195
|
+
icon,
|
196
|
+
isChecked,
|
197
|
+
...rest
|
198
|
+
}, ref) => {
|
199
|
+
checked != null ? checked : checked = isChecked;
|
187
200
|
return /* @__PURE__ */ jsxs(
|
188
201
|
MenuItem,
|
189
202
|
{
|
190
203
|
ref,
|
191
204
|
className: cx("ui-menu__item--option", className),
|
192
|
-
"aria-checked":
|
205
|
+
"aria-checked": checked,
|
193
206
|
closeOnSelect,
|
194
207
|
...rest,
|
195
208
|
children: [
|
196
|
-
icon !== null ? /* @__PURE__ */ jsx(MenuIcon, { opacity:
|
209
|
+
icon !== null ? /* @__PURE__ */ jsx(MenuIcon, { opacity: checked ? 1 : 0, children: icon || /* @__PURE__ */ jsx(CheckIcon, {}) }) : null,
|
197
210
|
children
|
198
211
|
]
|
199
212
|
}
|
@@ -258,4 +271,4 @@ export {
|
|
258
271
|
MenuIcon,
|
259
272
|
MenuCommand
|
260
273
|
};
|
261
|
-
//# sourceMappingURL=chunk-
|
274
|
+
//# sourceMappingURL=chunk-TFGPDF5W.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/menu-item.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport type {\n KeyboardEvent,\n KeyboardEventHandler,\n MouseEvent,\n ReactElement,\n} from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport {\n cx,\n dataAttr,\n funcAll,\n handlerAll,\n isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useId, useRef, useState } from \"react\"\nimport {\n UpstreamMenuItemProvider,\n useMenu,\n useMenuDescendant,\n useUpstreamMenuItem,\n} from \"./menu-context\"\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target.getAttribute(\"role\")?.startsWith(\"menuitem\")\n )\n}\n\ninterface MenuItemOptions {\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * Right-aligned label text content, useful for displaying hotkeys.\n */\n command?: string\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n */\n focusable?: boolean\n /**\n * The menu item icon to use.\n */\n icon?: ReactElement\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n *\n * @deprecated Use `disabled` instead.\n */\n isDisabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n *\n * @deprecated Use `focusable` instead.\n */\n isFocusable?: boolean\n}\n\nexport interface MenuItemProps extends HTMLUIProps, MenuItemOptions {}\n\nexport const MenuItem = forwardRef<MenuItemProps, \"div\">(\n (\n {\n id,\n className,\n children,\n closeOnSelect: customCloseOnSelect,\n command,\n disabled,\n focusable,\n icon,\n isDisabled,\n isFocusable,\n ...props\n },\n ref,\n ) => {\n disabled ??= isDisabled\n focusable ??= isFocusable\n\n const {\n closeOnSelect,\n focusedIndex,\n menuRef,\n nested,\n open,\n requestAnimationFrameId,\n setFocusedIndex,\n styles,\n onClose,\n onUpstreamClose,\n } = useMenu()\n const { onUpstreamRestoreFocus } = useUpstreamMenuItem() ?? {}\n const [downstreamOpen, setDownstreamOpen] = useState<boolean>(false)\n const uuid = useId()\n const itemRef = useRef<HTMLDivElement>(null)\n const hasDownstreamRef = useRef<boolean>(false)\n const onKeyDownRef = useRef<KeyboardEventHandler<HTMLDivElement>>(\n () => void 0,\n )\n\n id ??= uuid\n\n const trulyDisabled = disabled && !focusable\n const type = itemRef.current?.getAttribute(\"type\")\n const role = !!type\n ? type === \"checkbox\"\n ? \"menuitemcheckbox\"\n : \"menuitemradio\"\n : \"menuitem\"\n\n const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n\n const focused = index === focusedIndex\n\n const onMouseOver = useCallback(() => {\n if (disabled) return\n\n setFocusedIndex(index)\n }, [index, disabled, setFocusedIndex])\n\n const onMouseLeave = useCallback(() => {\n if (disabled) return\n\n setFocusedIndex(-1)\n }, [setFocusedIndex, disabled])\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (!isTargetMenuItem(ev.currentTarget)) return\n\n const hasDownstream = hasDownstreamRef.current\n\n if (customCloseOnSelect ?? (!hasDownstream && closeOnSelect)) {\n onClose()\n onUpstreamClose?.()\n }\n },\n [customCloseOnSelect, closeOnSelect, 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<HTMLDivElement>) => {\n if (ev.key === \" \") ev.key = ev.code\n\n const actions: { [key: string]: Function | undefined } = {\n ArrowLeft: nested\n ? funcAll(onUpstreamRestoreFocus, onClose)\n : undefined,\n Space: !hasDownstreamRef.current\n ? funcAll(onUpstreamClose, 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 [nested, onUpstreamRestoreFocus, onClose, onUpstreamClose],\n )\n\n const rest = useClickable<HTMLDivElement>({\n clickOnSpace: false,\n focusOnClick: false,\n ...props,\n ref: mergeRefs(register, itemRef, ref),\n disabled,\n focusable,\n onClick: handlerAll(props.onClick, onClick),\n onFocus: handlerAll(props.onFocus, onFocus),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown, onKeyDownRef.current),\n onMouseLeave: handlerAll(props.onMouseLeave, onMouseLeave),\n onMouseOver: handlerAll(props.onMouseOver, onMouseOver),\n })\n\n useUpdateEffect(() => {\n if (!open) return\n\n const id = requestAnimationFrameId.current\n\n if (focused && !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 }, [focused, trulyDisabled, menuRef, open])\n\n children =\n icon || command ? (\n <ui.span style={{ flex: 1 }}>{children}</ui.span>\n ) : (\n children\n )\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n color: \"inherit\",\n display: \"flex\",\n flex: \"0 0 auto\",\n gap: \"0.75rem\",\n outline: 0,\n textAlign: \"start\",\n textDecoration: \"none\",\n userSelect: \"none\",\n width: \"100%\",\n ...styles.item,\n }\n\n return (\n <UpstreamMenuItemProvider\n value={{\n hasDownstreamRef,\n setDownstreamOpen,\n onKeyDownRef,\n onUpstreamRestoreFocus: onRestoreFocus,\n }}\n >\n <ui.div\n id={id}\n className={cx(\"ui-menu__item\", className)}\n data-focus={dataAttr(downstreamOpen)}\n __css={css}\n {...rest}\n role={role}\n tabIndex={!downstreamOpen && focused ? 0 : -1}\n >\n {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n {children}\n {command ? <MenuCommand>{command}</MenuCommand> : null}\n </ui.div>\n </UpstreamMenuItemProvider>\n )\n },\n)\n\nMenuItem.displayName = \"MenuItem\"\nMenuItem.__ui__ = \"MenuItem\"\n\ninterface MenuOptionItemOptions {\n /**\n * The type of the menu option item.\n */\n type?: \"checkbox\" | \"radio\"\n /**\n * If `true`, the checkbox or radio will be checked.\n *\n * @default false\n */\n checked?: boolean\n /**\n * The menu option item icon to use.\n */\n icon?: null | ReactElement\n /**\n * If `true`, the checkbox or radio will be checked.\n *\n * @default false\n *\n * @deprecated Use `checked` instead.\n */\n isChecked?: boolean\n /**\n * The value of the menu option item.\n */\n value?: string\n}\n\nexport interface MenuOptionItemProps\n extends Omit<MenuItemProps, \"command\" | \"icon\" | \"value\">,\n MenuOptionItemOptions {}\n\nexport const MenuOptionItem = forwardRef<MenuOptionItemProps, \"button\">(\n (\n {\n className,\n checked,\n children,\n closeOnSelect = false,\n icon,\n isChecked,\n ...rest\n },\n ref,\n ) => {\n checked ??= isChecked\n\n return (\n <MenuItem\n ref={ref}\n className={cx(\"ui-menu__item--option\", className)}\n aria-checked={checked}\n closeOnSelect={closeOnSelect}\n {...rest}\n >\n {icon !== null ? (\n <MenuIcon opacity={checked ? 1 : 0}>{icon || <CheckIcon />}</MenuIcon>\n ) : null}\n {children}\n </MenuItem>\n )\n },\n)\n\nMenuOptionItem.displayName = \"MenuOptionItem\"\nMenuOptionItem.__ui__ = \"MenuOptionItem\"\n\nexport interface MenuIconProps extends HTMLUIProps<\"span\"> {}\n\nexport const MenuIcon = forwardRef<MenuIconProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\n flexShrink: 0,\n fontSize: \"0.85em\",\n justifyContent: \"center\",\n ...styles.icon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-menu__item__icon\", className)}\n aria-hidden\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nMenuIcon.displayName = \"MenuIcon\"\nMenuIcon.__ui__ = \"MenuIcon\"\n\nexport interface MenuCommandProps extends HTMLUIProps<\"span\"> {}\n\nexport const MenuCommand = forwardRef<MenuCommandProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.command }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-menu__item__command\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nMenuCommand.displayName = \"MenuCommand\"\nMenuCommand.__ui__ = \"MenuCommand\"\n\nconst CheckIcon: FC = () => (\n <svg height=\"1em\" viewBox=\"0 0 14 14\" width=\"1em\">\n <polygon\n fill=\"currentColor\"\n points=\"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039\"\n />\n </svg>\n)\n"],"mappings":"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","names":["_a","id"]}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useContextMenu
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-IWH3B4PS.mjs";
|
5
5
|
|
6
6
|
// src/context-menu-trigger.tsx
|
7
7
|
import { forwardRef, ui } from "@yamada-ui/core";
|
@@ -48,4 +48,4 @@ ContextMenuTrigger.__ui__ = "ContextMenuTrigger";
|
|
48
48
|
export {
|
49
49
|
ContextMenuTrigger
|
50
50
|
};
|
51
|
-
//# sourceMappingURL=chunk-
|
51
|
+
//# sourceMappingURL=chunk-VDTE5ERA.mjs.map
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
useMenu
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-IWH3B4PS.mjs";
|
5
5
|
|
6
6
|
// src/menu-separator.tsx
|
7
7
|
import { forwardRef, ui } from "@yamada-ui/core";
|
@@ -28,4 +28,4 @@ MenuSeparator.__ui__ = "MenuSeparator";
|
|
28
28
|
export {
|
29
29
|
MenuSeparator
|
30
30
|
};
|
31
|
-
//# sourceMappingURL=chunk-
|
31
|
+
//# sourceMappingURL=chunk-ZG5BKE24.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/context-menu-trigger.tsx","../src/menu-context.ts"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { MouseEvent } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { PopoverAnchor, PopoverTrigger } from \"@yamada-ui/popover\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport { useState } from \"react\"\nimport { useContextMenu } from \"./menu-context\"\n\ninterface Position {\n left: number\n top: number\n}\n\nexport interface ContextMenuTriggerProps extends HTMLUIProps {}\n\nexport const ContextMenuTrigger = forwardRef<ContextMenuTriggerProps, \"div\">(\n ({ className, children, ...rest }, ref) => {\n const { styles } = useContextMenu() ?? {}\n const [position, setPosition] = useState<Position>({ left: 0, top: 0 })\n\n const css: CSSUIObject = { ...styles?.container }\n\n const onContextMenu = (ev: MouseEvent) => {\n setPosition({ left: ev.pageX, top: ev.pageY })\n }\n\n return (\n <>\n <PopoverAnchor>\n <ui.div\n className=\"ui-context-menu__anchor\"\n style={{ position: \"absolute\", ...position }}\n />\n </PopoverAnchor>\n\n <PopoverTrigger>\n <ui.div\n ref={ref}\n className={cx(\"ui-context-menu\", className)}\n aria-haspopup=\"menu\"\n role=\"application\"\n __css={css}\n {...rest}\n onContextMenu={handlerAll(rest.onContextMenu, onContextMenu)}\n >\n {children}\n </ui.div>\n </PopoverTrigger>\n </>\n )\n },\n)\n\nContextMenuTrigger.displayName = \"ContextMenuTrigger\"\nContextMenuTrigger.__ui__ = \"ContextMenuTrigger\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type {\n Dispatch,\n KeyboardEventHandler,\n MutableRefObject,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport type { MenuOptions } from \"./menu\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\n\nexport const {\n DescendantsContextProvider,\n useDescendant: useMenuDescendant,\n useDescendants,\n useDescendantsContext: useMenuDescendantsContext,\n} = createDescendant()\n\ninterface MenuContext extends MenuOptions {\n buttonRef: RefObject<HTMLButtonElement>\n focusedIndex: number\n
|
1
|
+
{"version":3,"sources":["../src/context-menu-trigger.tsx","../src/menu-context.ts"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { MouseEvent } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { PopoverAnchor, PopoverTrigger } from \"@yamada-ui/popover\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport { useState } from \"react\"\nimport { useContextMenu } from \"./menu-context\"\n\ninterface Position {\n left: number\n top: number\n}\n\nexport interface ContextMenuTriggerProps extends HTMLUIProps {}\n\nexport const ContextMenuTrigger = forwardRef<ContextMenuTriggerProps, \"div\">(\n ({ className, children, ...rest }, ref) => {\n const { styles } = useContextMenu() ?? {}\n const [position, setPosition] = useState<Position>({ left: 0, top: 0 })\n\n const css: CSSUIObject = { ...styles?.container }\n\n const onContextMenu = (ev: MouseEvent) => {\n setPosition({ left: ev.pageX, top: ev.pageY })\n }\n\n return (\n <>\n <PopoverAnchor>\n <ui.div\n className=\"ui-context-menu__anchor\"\n style={{ position: \"absolute\", ...position }}\n />\n </PopoverAnchor>\n\n <PopoverTrigger>\n <ui.div\n ref={ref}\n className={cx(\"ui-context-menu\", className)}\n aria-haspopup=\"menu\"\n role=\"application\"\n __css={css}\n {...rest}\n onContextMenu={handlerAll(rest.onContextMenu, onContextMenu)}\n >\n {children}\n </ui.div>\n </PopoverTrigger>\n </>\n )\n },\n)\n\nContextMenuTrigger.displayName = \"ContextMenuTrigger\"\nContextMenuTrigger.__ui__ = \"ContextMenuTrigger\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type {\n Dispatch,\n KeyboardEventHandler,\n MutableRefObject,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport type { MenuOptions } from \"./menu\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\n\nexport const {\n DescendantsContextProvider,\n useDescendant: useMenuDescendant,\n useDescendants,\n useDescendantsContext: useMenuDescendantsContext,\n} = createDescendant()\n\ninterface MenuContext extends MenuOptions {\n buttonRef: RefObject<HTMLButtonElement>\n focusedIndex: number\n menuRef: RefObject<HTMLDivElement>\n nested: boolean\n open: boolean\n requestAnimationFrameId: MutableRefObject<null | number>\n setFocusedIndex: Dispatch<SetStateAction<number>>\n styles: { [key: string]: CSSUIObject | undefined }\n onClose: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n onOpen: () => void\n onUpstreamClose?: () => void\n}\n\nexport const [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\ninterface ContextMenuContext {\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ContextMenuProvider, useContextMenu] =\n createContext<ContextMenuContext>({\n name: \"ContextMenuContext\",\n strict: false,\n })\n\ninterface UpstreamMenuContext {\n relatedRef: RefObject<HTMLElement>\n onDownstreamCloseMapRef: MutableRefObject<Map<string, () => void>>\n onUpstreamClose: () => void\n}\n\nexport const [UpstreamMenuProvider, useUpstreamMenu] =\n createContext<UpstreamMenuContext>({\n name: \"UpstreamMenuContext\",\n strict: false,\n })\n\ninterface UpstreamMenuItemContext {\n hasDownstreamRef: MutableRefObject<boolean>\n setDownstreamOpen: Dispatch<SetStateAction<boolean>>\n onKeyDownRef: RefObject<KeyboardEventHandler<HTMLDivElement>>\n onUpstreamRestoreFocus: () => void\n}\n\nexport const [UpstreamMenuItemProvider, useUpstreamMenuItem] =\n createContext<UpstreamMenuItemContext>({\n name: \"UpstreamMenuItemContext\",\n strict: false,\n })\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,kBAA+B;AAC/B,qBAA8C;AAC9C,IAAAA,gBAA+B;AAC/B,mBAAyB;;;ACIzB,4BAAiC;AACjC,mBAA8B;AAEvB,IAAM;AAAA,EACX;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,uBAAuB;AACzB,QAAI,wCAAiB;AAkBd,IAAM,CAAC,cAAc,OAAO,QAAI,4BAA2B;AAAA,EAChE,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAMM,IAAM,CAAC,qBAAqB,cAAc,QAC/C,4BAAkC;AAAA,EAChC,MAAM;AAAA,EACN,QAAQ;AACV,CAAC;AAQI,IAAM,CAAC,sBAAsB,eAAe,QACjD,4BAAmC;AAAA,EACjC,MAAM;AAAA,EACN,QAAQ;AACV,CAAC;AASI,IAAM,CAAC,0BAA0B,mBAAmB,QACzD,4BAAuC;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ;AACV,CAAC;;;AD9CG;AAZC,IAAM,yBAAqB;AAAA,EAChC,CAAC,EAAE,WAAW,UAAU,GAAG,KAAK,GAAG,QAAQ;AAhB7C;AAiBI,UAAM,EAAE,OAAO,KAAI,oBAAe,MAAf,YAAoB,CAAC;AACxC,UAAM,CAAC,UAAU,WAAW,QAAI,uBAAmB,EAAE,MAAM,GAAG,KAAK,EAAE,CAAC;AAEtE,UAAM,MAAmB,EAAE,GAAG,iCAAQ,UAAU;AAEhD,UAAM,gBAAgB,CAAC,OAAmB;AACxC,kBAAY,EAAE,MAAM,GAAG,OAAO,KAAK,GAAG,MAAM,CAAC;AAAA,IAC/C;AAEA,WACE,4EACE;AAAA,kDAAC,gCACC;AAAA,QAAC,eAAG;AAAA,QAAH;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,UAAU,YAAY,GAAG,SAAS;AAAA;AAAA,MAC7C,GACF;AAAA,MAEA,4CAAC,iCACC;AAAA,QAAC,eAAG;AAAA,QAAH;AAAA,UACC;AAAA,UACA,eAAW,kBAAG,mBAAmB,SAAS;AAAA,UAC1C,iBAAc;AAAA,UACd,MAAK;AAAA,UACL,OAAO;AAAA,UACN,GAAG;AAAA,UACJ,mBAAe,0BAAW,KAAK,eAAe,aAAa;AAAA,UAE1D;AAAA;AAAA,MACH,GACF;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;","names":["import_utils"]}
|