@yamada-ui/menu 1.3.15-next-20241005220055 → 1.3.15-next-20241008193728
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-SI3WI4AI.mjs → chunk-2A6VOJ6F.mjs} +8 -8
- package/dist/chunk-2A6VOJ6F.mjs.map +1 -0
- package/dist/{chunk-ZUOFHOX6.mjs → chunk-EJHOFPF4.mjs} +11 -11
- package/dist/chunk-EJHOFPF4.mjs.map +1 -0
- package/dist/{chunk-ZV73JKM5.mjs → chunk-ELQD4RMJ.mjs} +4 -4
- package/dist/{chunk-ZV73JKM5.mjs.map → chunk-ELQD4RMJ.mjs.map} +1 -1
- package/dist/{chunk-NNSVX2GX.mjs → chunk-I2KIZ6OI.mjs} +28 -28
- package/dist/{chunk-NNSVX2GX.mjs.map → chunk-I2KIZ6OI.mjs.map} +1 -1
- package/dist/{chunk-O5D4LR5P.mjs → chunk-I473RINV.mjs} +8 -8
- package/dist/{chunk-O5D4LR5P.mjs.map → chunk-I473RINV.mjs.map} +1 -1
- package/dist/{chunk-OFCEMPQW.mjs → chunk-KZAACFSL.mjs} +3 -3
- package/dist/{chunk-OFCEMPQW.mjs.map → chunk-KZAACFSL.mjs.map} +1 -1
- package/dist/{chunk-M4PPRRRC.mjs → chunk-M4GWQFUC.mjs} +14 -14
- package/dist/chunk-M4GWQFUC.mjs.map +1 -0
- package/dist/{chunk-HVOHR2NQ.mjs → chunk-O7MHNHWF.mjs} +4 -4
- package/dist/{chunk-HVOHR2NQ.mjs.map → chunk-O7MHNHWF.mjs.map} +1 -1
- package/dist/{chunk-WQ626PSA.mjs → chunk-T4SSYCLG.mjs} +9 -8
- package/dist/chunk-T4SSYCLG.mjs.map +1 -0
- package/dist/{chunk-T7CXLEBW.mjs → chunk-W36CPKTN.mjs} +34 -34
- package/dist/chunk-W36CPKTN.mjs.map +1 -0
- package/dist/context-menu-trigger.js +14 -13
- package/dist/context-menu-trigger.js.map +1 -1
- package/dist/context-menu-trigger.mjs +2 -2
- package/dist/context-menu.js +33 -33
- package/dist/context-menu.js.map +1 -1
- package/dist/context-menu.mjs +3 -3
- package/dist/index.d.mts +6 -6
- package/dist/index.d.ts +6 -6
- package/dist/index.js +275 -272
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +10 -10
- package/dist/menu-button.d.mts +2 -2
- package/dist/menu-button.d.ts +2 -2
- package/dist/menu-button.js +49 -49
- package/dist/menu-button.js.map +1 -1
- package/dist/menu-button.mjs +3 -3
- package/dist/menu-context.d.mts +116 -116
- package/dist/menu-context.d.ts +116 -116
- package/dist/menu-context.js +8 -8
- package/dist/menu-context.js.map +1 -1
- package/dist/menu-context.mjs +1 -1
- package/dist/menu-divider.js +8 -8
- package/dist/menu-divider.js.map +1 -1
- package/dist/menu-divider.mjs +2 -2
- package/dist/menu-group.js +9 -9
- package/dist/menu-group.js.map +1 -1
- package/dist/menu-group.mjs +2 -2
- package/dist/menu-item.d.mts +21 -21
- package/dist/menu-item.d.ts +21 -21
- package/dist/menu-item.js +39 -39
- package/dist/menu-item.js.map +1 -1
- package/dist/menu-item.mjs +2 -2
- package/dist/menu-list.js +14 -14
- package/dist/menu-list.js.map +1 -1
- package/dist/menu-list.mjs +2 -2
- package/dist/menu-option-group.d.mts +8 -8
- package/dist/menu-option-group.d.ts +8 -8
- package/dist/menu-option-group.js +45 -45
- package/dist/menu-option-group.js.map +1 -1
- package/dist/menu-option-group.mjs +4 -4
- package/dist/menu.js +33 -33
- package/dist/menu.js.map +1 -1
- package/dist/menu.mjs +2 -2
- package/package.json +11 -11
- package/dist/chunk-M4PPRRRC.mjs.map +0 -1
- package/dist/chunk-SI3WI4AI.mjs.map +0 -1
- package/dist/chunk-T7CXLEBW.mjs.map +0 -1
- package/dist/chunk-WQ626PSA.mjs.map +0 -1
- package/dist/chunk-ZUOFHOX6.mjs.map +0 -1
package/dist/menu-item.d.mts
CHANGED
@@ -3,45 +3,45 @@ import { HTMLUIProps } from '@yamada-ui/core';
|
|
3
3
|
import { ReactElement } from 'react';
|
4
4
|
|
5
5
|
interface MenuItemOptions {
|
6
|
-
/**
|
7
|
-
* If `true`, the menu item will be disabled.
|
8
|
-
*
|
9
|
-
* @default false
|
10
|
-
*/
|
11
|
-
isDisabled?: boolean;
|
12
|
-
/**
|
13
|
-
* If `true`, the menu item will be focusable.
|
14
|
-
*
|
15
|
-
* @default false
|
16
|
-
*/
|
17
|
-
isFocusable?: boolean;
|
18
6
|
/**
|
19
7
|
* If `true`, the list element will be closed when selected.
|
20
8
|
*
|
21
9
|
* @default false
|
22
10
|
*/
|
23
11
|
closeOnSelect?: boolean;
|
12
|
+
/**
|
13
|
+
* Right-aligned label text content, useful for displaying hotkeys.
|
14
|
+
*/
|
15
|
+
command?: string;
|
24
16
|
/**
|
25
17
|
* The menu item icon to use.
|
26
18
|
*/
|
27
19
|
icon?: ReactElement;
|
28
20
|
/**
|
29
|
-
*
|
21
|
+
* If `true`, the menu item will be disabled.
|
22
|
+
*
|
23
|
+
* @default false
|
30
24
|
*/
|
31
|
-
|
25
|
+
isDisabled?: boolean;
|
26
|
+
/**
|
27
|
+
* If `true`, the menu item will be focusable.
|
28
|
+
*
|
29
|
+
* @default false
|
30
|
+
*/
|
31
|
+
isFocusable?: boolean;
|
32
32
|
}
|
33
33
|
interface MenuItemProps extends HTMLUIProps<"li">, MenuItemOptions {
|
34
34
|
}
|
35
35
|
declare const MenuItem: _yamada_ui_core.Component<"li", MenuItemProps>;
|
36
36
|
interface MenuOptionItemOptions {
|
37
37
|
/**
|
38
|
-
* The menu option item
|
38
|
+
* The type of the menu option item.
|
39
39
|
*/
|
40
|
-
|
40
|
+
type?: "checkbox" | "radio";
|
41
41
|
/**
|
42
|
-
* The
|
42
|
+
* The menu option item icon to use.
|
43
43
|
*/
|
44
|
-
|
44
|
+
icon?: null | ReactElement;
|
45
45
|
/**
|
46
46
|
* If `true`, the checkbox or radio will be checked.
|
47
47
|
*
|
@@ -49,11 +49,11 @@ interface MenuOptionItemOptions {
|
|
49
49
|
*/
|
50
50
|
isChecked?: boolean;
|
51
51
|
/**
|
52
|
-
* The
|
52
|
+
* The value of the menu option item.
|
53
53
|
*/
|
54
|
-
|
54
|
+
value?: string;
|
55
55
|
}
|
56
|
-
interface MenuOptionItemProps extends Omit<MenuItemProps, "
|
56
|
+
interface MenuOptionItemProps extends Omit<MenuItemProps, "command" | "icon" | "value">, MenuOptionItemOptions {
|
57
57
|
}
|
58
58
|
declare const MenuOptionItem: _yamada_ui_core.Component<"button", MenuOptionItemProps>;
|
59
59
|
interface MenuIconProps extends HTMLUIProps<"span"> {
|
package/dist/menu-item.d.ts
CHANGED
@@ -3,45 +3,45 @@ import { HTMLUIProps } from '@yamada-ui/core';
|
|
3
3
|
import { ReactElement } from 'react';
|
4
4
|
|
5
5
|
interface MenuItemOptions {
|
6
|
-
/**
|
7
|
-
* If `true`, the menu item will be disabled.
|
8
|
-
*
|
9
|
-
* @default false
|
10
|
-
*/
|
11
|
-
isDisabled?: boolean;
|
12
|
-
/**
|
13
|
-
* If `true`, the menu item will be focusable.
|
14
|
-
*
|
15
|
-
* @default false
|
16
|
-
*/
|
17
|
-
isFocusable?: boolean;
|
18
6
|
/**
|
19
7
|
* If `true`, the list element will be closed when selected.
|
20
8
|
*
|
21
9
|
* @default false
|
22
10
|
*/
|
23
11
|
closeOnSelect?: boolean;
|
12
|
+
/**
|
13
|
+
* Right-aligned label text content, useful for displaying hotkeys.
|
14
|
+
*/
|
15
|
+
command?: string;
|
24
16
|
/**
|
25
17
|
* The menu item icon to use.
|
26
18
|
*/
|
27
19
|
icon?: ReactElement;
|
28
20
|
/**
|
29
|
-
*
|
21
|
+
* If `true`, the menu item will be disabled.
|
22
|
+
*
|
23
|
+
* @default false
|
30
24
|
*/
|
31
|
-
|
25
|
+
isDisabled?: boolean;
|
26
|
+
/**
|
27
|
+
* If `true`, the menu item will be focusable.
|
28
|
+
*
|
29
|
+
* @default false
|
30
|
+
*/
|
31
|
+
isFocusable?: boolean;
|
32
32
|
}
|
33
33
|
interface MenuItemProps extends HTMLUIProps<"li">, MenuItemOptions {
|
34
34
|
}
|
35
35
|
declare const MenuItem: _yamada_ui_core.Component<"li", MenuItemProps>;
|
36
36
|
interface MenuOptionItemOptions {
|
37
37
|
/**
|
38
|
-
* The menu option item
|
38
|
+
* The type of the menu option item.
|
39
39
|
*/
|
40
|
-
|
40
|
+
type?: "checkbox" | "radio";
|
41
41
|
/**
|
42
|
-
* The
|
42
|
+
* The menu option item icon to use.
|
43
43
|
*/
|
44
|
-
|
44
|
+
icon?: null | ReactElement;
|
45
45
|
/**
|
46
46
|
* If `true`, the checkbox or radio will be checked.
|
47
47
|
*
|
@@ -49,11 +49,11 @@ interface MenuOptionItemOptions {
|
|
49
49
|
*/
|
50
50
|
isChecked?: boolean;
|
51
51
|
/**
|
52
|
-
* The
|
52
|
+
* The value of the menu option item.
|
53
53
|
*/
|
54
|
-
|
54
|
+
value?: string;
|
55
55
|
}
|
56
|
-
interface MenuOptionItemProps extends Omit<MenuItemProps, "
|
56
|
+
interface MenuOptionItemProps extends Omit<MenuItemProps, "command" | "icon" | "value">, MenuOptionItemOptions {
|
57
57
|
}
|
58
58
|
declare const MenuOptionItem: _yamada_ui_core.Component<"button", MenuOptionItemProps>;
|
59
59
|
interface MenuIconProps extends HTMLUIProps<"span"> {
|
package/dist/menu-item.js
CHANGED
@@ -37,56 +37,56 @@ var import_use_descendant = require("@yamada-ui/use-descendant");
|
|
37
37
|
var import_utils = require("@yamada-ui/utils");
|
38
38
|
var {
|
39
39
|
DescendantsContextProvider,
|
40
|
-
|
40
|
+
useDescendant: useMenuDescendant,
|
41
41
|
useDescendants,
|
42
|
-
|
42
|
+
useDescendantsContext: useMenuDescendantsContext
|
43
43
|
} = (0, import_use_descendant.createDescendant)();
|
44
44
|
var [MenuProvider, useMenu] = (0, import_utils.createContext)({
|
45
45
|
name: "MenuContext",
|
46
46
|
errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
|
47
47
|
});
|
48
48
|
var [ContextMenuProvider, useContextMenu] = (0, import_utils.createContext)({
|
49
|
-
|
50
|
-
|
49
|
+
name: "ContextMenuContext",
|
50
|
+
strict: false
|
51
51
|
});
|
52
52
|
var [UpstreamMenuProvider, useUpstreamMenu] = (0, import_utils.createContext)({
|
53
|
-
|
54
|
-
|
53
|
+
name: "UpstreamMenuContext",
|
54
|
+
strict: false
|
55
55
|
});
|
56
56
|
var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils.createContext)({
|
57
|
-
|
58
|
-
|
57
|
+
name: "UpstreamMenuItemContext",
|
58
|
+
strict: false
|
59
59
|
});
|
60
60
|
|
61
61
|
// src/menu-item.tsx
|
62
62
|
var import_jsx_runtime = require("react/jsx-runtime");
|
63
63
|
var isTargetMenuItem = (target) => {
|
64
64
|
var _a;
|
65
|
-
return (0, import_utils2.isHTMLElement)(target) && !!((_a = target
|
65
|
+
return (0, import_utils2.isHTMLElement)(target) && !!((_a = target.getAttribute("role")) == null ? void 0 : _a.startsWith("menuitem"));
|
66
66
|
};
|
67
67
|
var MenuItem = (0, import_core.forwardRef)(
|
68
68
|
({
|
69
69
|
className,
|
70
|
-
|
71
|
-
isFocusable,
|
70
|
+
children,
|
72
71
|
closeOnSelect: customCloseOnSelect,
|
73
|
-
icon,
|
74
72
|
command,
|
75
|
-
|
73
|
+
icon,
|
74
|
+
isDisabled,
|
75
|
+
isFocusable,
|
76
76
|
...props
|
77
77
|
}, ref) => {
|
78
78
|
var _a;
|
79
79
|
const {
|
80
|
+
closeOnSelect: generalCloseOnSelect,
|
80
81
|
focusedIndex,
|
81
|
-
|
82
|
+
isNested,
|
82
83
|
isOpen,
|
83
|
-
onClose,
|
84
|
-
onUpstreamClose,
|
85
|
-
closeOnSelect: generalCloseOnSelect,
|
86
84
|
menuRef,
|
87
85
|
requestAnimationFrameId,
|
88
|
-
|
89
|
-
styles
|
86
|
+
setFocusedIndex,
|
87
|
+
styles,
|
88
|
+
onClose,
|
89
|
+
onUpstreamClose
|
90
90
|
} = useMenu();
|
91
91
|
const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
|
92
92
|
const trulyDisabled = isDisabled && !isFocusable;
|
@@ -141,14 +141,14 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
141
141
|
const rest = (0, import_use_clickable.useClickable)({
|
142
142
|
focusOnClick: false,
|
143
143
|
...props,
|
144
|
+
ref: (0, import_utils2.mergeRefs)(register, itemRef, ref),
|
145
|
+
isDisabled,
|
146
|
+
isFocusable,
|
144
147
|
onClick: (0, import_utils2.handlerAll)(props.onClick, onClick),
|
145
148
|
onFocus: (0, import_utils2.handlerAll)(props.onFocus, onFocus),
|
146
|
-
onMouseOver: (0, import_utils2.handlerAll)(props.onMouseOver, onMouseOver),
|
147
|
-
onMouseLeave: (0, import_utils2.handlerAll)(props.onMouseLeave, onMouseLeave),
|
148
149
|
onKeyDown: (0, import_utils2.handlerAll)(props.onKeyDown, onKeyDown, onKeyDownRef.current),
|
149
|
-
|
150
|
-
|
151
|
-
isFocusable
|
150
|
+
onMouseLeave: (0, import_utils2.handlerAll)(props.onMouseLeave, onMouseLeave),
|
151
|
+
onMouseOver: (0, import_utils2.handlerAll)(props.onMouseOver, onMouseOver)
|
152
152
|
});
|
153
153
|
(0, import_utils2.useUpdateEffect)(() => {
|
154
154
|
if (!isOpen) return;
|
@@ -169,35 +169,35 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
169
169
|
}, [isFocused, trulyDisabled, menuRef, isOpen]);
|
170
170
|
children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.span, { style: { flex: 1 }, children }) : children;
|
171
171
|
const css = {
|
172
|
-
|
172
|
+
alignItems: "center",
|
173
173
|
color: "inherit",
|
174
|
-
userSelect: "none",
|
175
174
|
display: "flex",
|
176
|
-
width: "100%",
|
177
|
-
alignItems: "center",
|
178
|
-
textAlign: "start",
|
179
175
|
flex: "0 0 auto",
|
180
|
-
outline: 0,
|
181
176
|
gap: "0.75rem",
|
177
|
+
outline: 0,
|
178
|
+
textAlign: "start",
|
179
|
+
textDecoration: "none",
|
180
|
+
userSelect: "none",
|
181
|
+
width: "100%",
|
182
182
|
...styles.item
|
183
183
|
};
|
184
184
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
185
185
|
UpstreamMenuItemProvider,
|
186
186
|
{
|
187
187
|
value: {
|
188
|
-
|
189
|
-
onUpstreamRestoreFocus: onRestoreFocus,
|
188
|
+
hasDownstreamRef,
|
190
189
|
setDownstreamOpen,
|
191
|
-
|
190
|
+
onKeyDownRef,
|
191
|
+
onUpstreamRestoreFocus: onRestoreFocus
|
192
192
|
},
|
193
193
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
194
194
|
import_core.ui.li,
|
195
195
|
{
|
196
196
|
...rest,
|
197
197
|
...isDownstreamOpen ? { "data-active": "" } : {},
|
198
|
+
className: (0, import_utils2.cx)("ui-menu__item", className),
|
198
199
|
role: "menuitem",
|
199
200
|
tabIndex: isFocused ? 0 : -1,
|
200
|
-
className: (0, import_utils2.cx)("ui-menu__item", className),
|
201
201
|
__css: css,
|
202
202
|
children: [
|
203
203
|
icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuIcon, { children: icon }) : null,
|
@@ -211,7 +211,7 @@ var MenuItem = (0, import_core.forwardRef)(
|
|
211
211
|
}
|
212
212
|
);
|
213
213
|
var MenuOptionItem = (0, import_core.forwardRef)(
|
214
|
-
({ className,
|
214
|
+
({ className, children, closeOnSelect = false, icon, isChecked, ...rest }, ref) => {
|
215
215
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
216
216
|
MenuItem,
|
217
217
|
{
|
@@ -232,11 +232,11 @@ var MenuIcon = (0, import_core.forwardRef)(
|
|
232
232
|
({ className, ...rest }, ref) => {
|
233
233
|
const { styles } = useMenu();
|
234
234
|
const css = {
|
235
|
-
flexShrink: 0,
|
236
|
-
display: "inline-flex",
|
237
|
-
justifyContent: "center",
|
238
235
|
alignItems: "center",
|
236
|
+
display: "inline-flex",
|
237
|
+
flexShrink: 0,
|
239
238
|
fontSize: "0.85em",
|
239
|
+
justifyContent: "center",
|
240
240
|
...styles.icon
|
241
241
|
};
|
242
242
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
@@ -265,7 +265,7 @@ var MenuCommand = (0, import_core.forwardRef)(
|
|
265
265
|
);
|
266
266
|
}
|
267
267
|
);
|
268
|
-
var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 14 14", width: "1em",
|
268
|
+
var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { height: "1em", viewBox: "0 0 14 14", width: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
269
269
|
"polygon",
|
270
270
|
{
|
271
271
|
fill: "currentColor",
|
package/dist/menu-item.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/menu-item.tsx","../src/menu-context.ts"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport {\n ariaAttr,\n cx,\n funcAll,\n handlerAll,\n isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type {\n FC,\n KeyboardEvent,\n KeyboardEventHandler,\n MouseEvent,\n ReactElement,\n} from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\nimport {\n useMenuDescendant,\n UpstreamMenuItemProvider,\n useMenu,\n useUpstreamMenuItem,\n} from \"./menu-context\"\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"menuitem\")\n )\n}\n\ninterface MenuItemOptions {\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * The menu item icon to use.\n */\n icon?: ReactElement\n /**\n * Right-aligned label text content, useful for displaying hotkeys.\n */\n command?: string\n}\n\nexport interface MenuItemProps extends HTMLUIProps<\"li\">, MenuItemOptions {}\n\nexport const MenuItem = forwardRef<MenuItemProps, \"li\">(\n (\n {\n className,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n icon,\n command,\n children,\n ...props\n },\n ref,\n ) => {\n const {\n focusedIndex,\n setFocusedIndex,\n isOpen,\n onClose,\n onUpstreamClose,\n closeOnSelect: generalCloseOnSelect,\n menuRef,\n requestAnimationFrameId,\n isNested,\n styles,\n } = useMenu()\n const { onUpstreamRestoreFocus } = useUpstreamMenuItem() ?? {}\n\n const trulyDisabled = isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n const hasDownstreamRef = useRef<boolean>(false)\n const onKeyDownRef = useRef<KeyboardEventHandler<HTMLLIElement>>(\n () => void 0,\n )\n const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n const [isDownstreamOpen, setDownstreamOpen] = useState<boolean>(false)\n\n const isFocused = index === focusedIndex\n\n const onMouseOver = useCallback(() => {\n if (isDisabled) return\n\n setFocusedIndex(index)\n }, [index, isDisabled, setFocusedIndex])\n\n const onMouseLeave = useCallback(() => {\n if (isDisabled) return\n\n setFocusedIndex(-1)\n }, [setFocusedIndex, isDisabled])\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\n if (!isTargetMenuItem(ev.currentTarget)) return\n\n const hasDownstream = hasDownstreamRef.current\n\n if (customCloseOnSelect ?? (!hasDownstream && generalCloseOnSelect)) {\n onClose()\n onUpstreamClose?.()\n }\n },\n [customCloseOnSelect, generalCloseOnSelect, onClose, onUpstreamClose],\n )\n\n const onFocus = useCallback(() => {\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onRestoreFocus = useCallback(() => {\n itemRef.current?.focus()\n\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLLIElement>) => {\n const actions: { [key: string]: Function | undefined } = {\n ArrowLeft: isNested\n ? funcAll(onUpstreamRestoreFocus, onClose)\n : undefined,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n ev.stopPropagation()\n\n action()\n },\n [onUpstreamRestoreFocus, onClose, isNested],\n )\n\n const rest = useClickable<HTMLLIElement>({\n focusOnClick: false,\n ...props,\n onClick: handlerAll(props.onClick, onClick),\n onFocus: handlerAll(props.onFocus, onFocus),\n onMouseOver: handlerAll(props.onMouseOver, onMouseOver),\n onMouseLeave: handlerAll(props.onMouseLeave, onMouseLeave),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown, onKeyDownRef.current),\n ref: mergeRefs(register, itemRef, ref),\n isDisabled,\n isFocusable,\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n const id = requestAnimationFrameId.current\n\n if (isFocused && !trulyDisabled && itemRef.current) {\n if (id) cancelAnimationFrame(id)\n\n requestAnimationFrameId.current = requestAnimationFrame(() => {\n itemRef.current?.focus({ preventScroll: true })\n\n requestAnimationFrameId.current = null\n })\n } else if (menuRef.current && !isActiveElement(menuRef.current)) {\n menuRef.current.focus({ preventScroll: true })\n }\n\n return () => {\n if (id) cancelAnimationFrame(id)\n }\n }, [isFocused, trulyDisabled, menuRef, isOpen])\n\n children =\n icon || command ? (\n <ui.span style={{ flex: 1 }}>{children}</ui.span>\n ) : (\n children\n )\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n ...styles.item,\n }\n\n return (\n <UpstreamMenuItemProvider\n value={{\n onKeyDownRef,\n onUpstreamRestoreFocus: onRestoreFocus,\n setDownstreamOpen,\n hasDownstreamRef,\n }}\n >\n <ui.li\n {...rest}\n {...(isDownstreamOpen ? { \"data-active\": \"\" } : {})}\n role=\"menuitem\"\n tabIndex={isFocused ? 0 : -1}\n className={cx(\"ui-menu__item\", className)}\n __css={css}\n >\n {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n {children}\n {command ? <MenuCommand>{command}</MenuCommand> : null}\n </ui.li>\n </UpstreamMenuItemProvider>\n )\n },\n)\n\ninterface MenuOptionItemOptions {\n /**\n * The menu option item icon to use.\n */\n icon?: ReactElement | null\n /**\n * The value of the menu option item.\n */\n value?: string\n /**\n * If `true`, the checkbox or radio will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * The type of the menu option item.\n */\n type?: \"radio\" | \"checkbox\"\n}\n\nexport interface MenuOptionItemProps\n extends Omit<MenuItemProps, \"icon\" | \"command\" | \"value\">,\n MenuOptionItemOptions {}\n\nexport const MenuOptionItem = forwardRef<MenuOptionItemProps, \"button\">(\n (\n { className, icon, isChecked, closeOnSelect = false, children, ...rest },\n ref,\n ) => {\n return (\n <MenuItem\n ref={ref}\n className={cx(\"ui-menu__item--option\", className)}\n aria-checked={ariaAttr(isChecked)}\n closeOnSelect={closeOnSelect}\n {...rest}\n >\n {icon !== null ? (\n <MenuIcon opacity={isChecked ? 1 : 0}>\n {icon || <CheckIcon />}\n </MenuIcon>\n ) : null}\n {children}\n </MenuItem>\n )\n },\n)\n\nexport interface MenuIconProps extends HTMLUIProps<\"span\"> {}\n\nexport const MenuIcon = forwardRef<MenuIconProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = {\n flexShrink: 0,\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontSize: \"0.85em\",\n ...styles.icon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-menu__item__icon\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nexport interface MenuCommandProps extends HTMLUIProps<\"span\"> {}\n\nexport const MenuCommand = forwardRef<MenuCommandProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.command }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-menu__item__command\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nconst CheckIcon: FC = () => (\n <svg viewBox=\"0 0 14 14\" width=\"1em\" height=\"1em\">\n <polygon\n fill=\"currentColor\"\n points=\"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039\"\n />\n </svg>\n)\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type {\n Dispatch,\n KeyboardEventHandler,\n MutableRefObject,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport type { MenuOptions } from \"./menu\"\n\nexport const {\n DescendantsContextProvider,\n useDescendantsContext: useMenuDescendantsContext,\n useDescendants,\n useDescendant: useMenuDescendant,\n} = createDescendant()\n\ninterface MenuContext extends 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: { [key: string]: CSSUIObject }\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 }\n}\n\nexport const [ContextMenuProvider, useContextMenu] =\n createContext<ContextMenuContext>({\n strict: false,\n name: \"ContextMenuContext\",\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 strict: false,\n name: \"UpstreamMenuContext\",\n })\n\ninterface 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"],"mappings":"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","names":["import_utils","_a"]}
|
1
|
+
{"version":3,"sources":["../src/menu-item.tsx","../src/menu-context.ts"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport type {\n FC,\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 ariaAttr,\n cx,\n funcAll,\n handlerAll,\n isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, 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 * 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 isDisabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n}\n\nexport interface MenuItemProps extends HTMLUIProps<\"li\">, MenuItemOptions {}\n\nexport const MenuItem = forwardRef<MenuItemProps, \"li\">(\n (\n {\n className,\n children,\n closeOnSelect: customCloseOnSelect,\n command,\n icon,\n isDisabled,\n isFocusable,\n ...props\n },\n ref,\n ) => {\n const {\n closeOnSelect: generalCloseOnSelect,\n focusedIndex,\n isNested,\n isOpen,\n menuRef,\n requestAnimationFrameId,\n setFocusedIndex,\n styles,\n onClose,\n onUpstreamClose,\n } = useMenu()\n const { onUpstreamRestoreFocus } = useUpstreamMenuItem() ?? {}\n\n const trulyDisabled = isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n const hasDownstreamRef = useRef<boolean>(false)\n const onKeyDownRef = useRef<KeyboardEventHandler<HTMLLIElement>>(\n () => void 0,\n )\n const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n const [isDownstreamOpen, setDownstreamOpen] = useState<boolean>(false)\n\n const isFocused = index === focusedIndex\n\n const onMouseOver = useCallback(() => {\n if (isDisabled) return\n\n setFocusedIndex(index)\n }, [index, isDisabled, setFocusedIndex])\n\n const onMouseLeave = useCallback(() => {\n if (isDisabled) return\n\n setFocusedIndex(-1)\n }, [setFocusedIndex, isDisabled])\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\n if (!isTargetMenuItem(ev.currentTarget)) return\n\n const hasDownstream = hasDownstreamRef.current\n\n if (customCloseOnSelect ?? (!hasDownstream && generalCloseOnSelect)) {\n onClose()\n onUpstreamClose?.()\n }\n },\n [customCloseOnSelect, generalCloseOnSelect, onClose, onUpstreamClose],\n )\n\n const onFocus = useCallback(() => {\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onRestoreFocus = useCallback(() => {\n itemRef.current?.focus()\n\n setFocusedIndex(index)\n }, [setFocusedIndex, index])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLLIElement>) => {\n const actions: { [key: string]: Function | undefined } = {\n ArrowLeft: isNested\n ? funcAll(onUpstreamRestoreFocus, onClose)\n : undefined,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n ev.stopPropagation()\n\n action()\n },\n [onUpstreamRestoreFocus, onClose, isNested],\n )\n\n const rest = useClickable<HTMLLIElement>({\n focusOnClick: false,\n ...props,\n ref: mergeRefs(register, itemRef, ref),\n isDisabled,\n isFocusable,\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 (!isOpen) return\n\n const id = requestAnimationFrameId.current\n\n if (isFocused && !trulyDisabled && itemRef.current) {\n if (id) cancelAnimationFrame(id)\n\n requestAnimationFrameId.current = requestAnimationFrame(() => {\n itemRef.current?.focus({ preventScroll: true })\n\n requestAnimationFrameId.current = null\n })\n } else if (menuRef.current && !isActiveElement(menuRef.current)) {\n menuRef.current.focus({ preventScroll: true })\n }\n\n return () => {\n if (id) cancelAnimationFrame(id)\n }\n }, [isFocused, trulyDisabled, menuRef, isOpen])\n\n children =\n icon || command ? (\n <ui.span style={{ flex: 1 }}>{children}</ui.span>\n ) : (\n children\n )\n\n const css: CSSUIObject = {\n 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.li\n {...rest}\n {...(isDownstreamOpen ? { \"data-active\": \"\" } : {})}\n className={cx(\"ui-menu__item\", className)}\n role=\"menuitem\"\n tabIndex={isFocused ? 0 : -1}\n __css={css}\n >\n {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n {children}\n {command ? <MenuCommand>{command}</MenuCommand> : null}\n </ui.li>\n </UpstreamMenuItemProvider>\n )\n },\n)\n\ninterface MenuOptionItemOptions {\n /**\n * The type of the menu option item.\n */\n type?: \"checkbox\" | \"radio\"\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 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 { className, children, closeOnSelect = false, icon, isChecked, ...rest },\n ref,\n ) => {\n return (\n <MenuItem\n ref={ref}\n className={cx(\"ui-menu__item--option\", className)}\n aria-checked={ariaAttr(isChecked)}\n closeOnSelect={closeOnSelect}\n {...rest}\n >\n {icon !== null ? (\n <MenuIcon opacity={isChecked ? 1 : 0}>\n {icon || <CheckIcon />}\n </MenuIcon>\n ) : null}\n {children}\n </MenuItem>\n )\n },\n)\n\nexport interface MenuIconProps extends HTMLUIProps<\"span\"> {}\n\nexport const MenuIcon = forwardRef<MenuIconProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = {\n 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 __css={css}\n {...rest}\n />\n )\n },\n)\n\nexport interface MenuCommandProps extends HTMLUIProps<\"span\"> {}\n\nexport const MenuCommand = forwardRef<MenuCommandProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.command }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-menu__item__command\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nconst CheckIcon: FC = () => (\n <svg 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","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 focusedIndex: number\n isNested: boolean\n isOpen: boolean\n menuRef: RefObject<HTMLDivElement>\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<HTMLLIElement>>\n onUpstreamRestoreFocus: () => void\n}\n\nexport const [UpstreamMenuItemProvider, useUpstreamMenuItem] =\n createContext<UpstreamMenuItemContext>({\n name: \"UpstreamMenuItemContext\",\n strict: false,\n })\n"],"mappings":"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","names":["import_utils","_a"]}
|
package/dist/menu-item.mjs
CHANGED
package/dist/menu-list.js
CHANGED
@@ -34,32 +34,32 @@ var import_use_descendant = require("@yamada-ui/use-descendant");
|
|
34
34
|
var import_utils = require("@yamada-ui/utils");
|
35
35
|
var {
|
36
36
|
DescendantsContextProvider,
|
37
|
-
|
37
|
+
useDescendant: useMenuDescendant,
|
38
38
|
useDescendants,
|
39
|
-
|
39
|
+
useDescendantsContext: useMenuDescendantsContext
|
40
40
|
} = (0, import_use_descendant.createDescendant)();
|
41
41
|
var [MenuProvider, useMenu] = (0, import_utils.createContext)({
|
42
42
|
name: "MenuContext",
|
43
43
|
errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in "<Menu />"`
|
44
44
|
});
|
45
45
|
var [ContextMenuProvider, useContextMenu] = (0, import_utils.createContext)({
|
46
|
-
|
47
|
-
|
46
|
+
name: "ContextMenuContext",
|
47
|
+
strict: false
|
48
48
|
});
|
49
49
|
var [UpstreamMenuProvider, useUpstreamMenu] = (0, import_utils.createContext)({
|
50
|
-
|
51
|
-
|
50
|
+
name: "UpstreamMenuContext",
|
51
|
+
strict: false
|
52
52
|
});
|
53
53
|
var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils.createContext)({
|
54
|
-
|
55
|
-
|
54
|
+
name: "UpstreamMenuItemContext",
|
55
|
+
strict: false
|
56
56
|
});
|
57
57
|
|
58
58
|
// src/menu-list.tsx
|
59
59
|
var import_jsx_runtime = require("react/jsx-runtime");
|
60
60
|
var MenuList = (0, import_core.forwardRef)(
|
61
|
-
({ className,
|
62
|
-
const {
|
61
|
+
({ className, children, contentProps, ...rest }, ref) => {
|
62
|
+
const { focusedIndex, menuRef, setFocusedIndex, styles, onClose } = useMenu();
|
63
63
|
const descendants = useMenuDescendantsContext();
|
64
64
|
const onNext = (0, import_react.useCallback)(() => {
|
65
65
|
const next = descendants.enabledNextValue(focusedIndex);
|
@@ -80,12 +80,12 @@ var MenuList = (0, import_core.forwardRef)(
|
|
80
80
|
const onKeyDown = (0, import_react.useCallback)(
|
81
81
|
(ev) => {
|
82
82
|
const actions = {
|
83
|
-
Tab: (ev2) => ev2.preventDefault(),
|
84
|
-
Escape: onClose,
|
85
83
|
ArrowDown: focusedIndex === -1 ? onFirst : onNext,
|
86
84
|
ArrowUp: focusedIndex === -1 ? onLast : onPrev,
|
85
|
+
End: onLast,
|
86
|
+
Escape: onClose,
|
87
87
|
Home: onFirst,
|
88
|
-
|
88
|
+
Tab: (ev2) => ev2.preventDefault()
|
89
89
|
};
|
90
90
|
const action = actions[ev.key];
|
91
91
|
if (!action) return;
|
@@ -106,8 +106,8 @@ var MenuList = (0, import_core.forwardRef)(
|
|
106
106
|
import_core.ui.ul,
|
107
107
|
{
|
108
108
|
ref: (0, import_utils2.mergeRefs)(menuRef, ref),
|
109
|
-
role: "menu",
|
110
109
|
className: (0, import_utils2.cx)("ui-menu__list", className),
|
110
|
+
role: "menu",
|
111
111
|
tabIndex: -1,
|
112
112
|
__css: { ...styles.list },
|
113
113
|
...rest,
|
package/dist/menu-list.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/menu-list.tsx","../src/menu-context.ts"],"sourcesContent":["import type { HTMLUIProps } from \"@yamada-ui/core\"\nimport {
|
1
|
+
{"version":3,"sources":["../src/menu-list.tsx","../src/menu-context.ts"],"sourcesContent":["import type { HTMLUIProps } from \"@yamada-ui/core\"\nimport type { MotionPropsWithoutChildren } from \"@yamada-ui/motion\"\nimport type { KeyboardEvent, KeyboardEventHandler } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { PopoverContent } from \"@yamada-ui/popover\"\nimport { cx, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\nimport { useMenu, useMenuDescendantsContext } from \"./menu-context\"\n\nexport interface MenuListProps extends HTMLUIProps<\"ul\"> {\n contentProps?: MotionPropsWithoutChildren\n}\n\nexport const MenuList = forwardRef<MenuListProps, \"ul\">(\n ({ className, children, contentProps, ...rest }, ref) => {\n const { focusedIndex, menuRef, setFocusedIndex, styles, onClose } =\n useMenu()\n\n const descendants = useMenuDescendantsContext()\n\n const onNext = useCallback(() => {\n const next = descendants.enabledNextValue(focusedIndex)\n\n if (next) setFocusedIndex(next.index)\n }, [descendants, focusedIndex, setFocusedIndex])\n\n const onPrev = useCallback(() => {\n const prev = descendants.enabledPrevValue(focusedIndex)\n\n if (prev) setFocusedIndex(prev.index)\n }, [descendants, focusedIndex, setFocusedIndex])\n\n const onFirst = useCallback(() => {\n const first = descendants.enabledFirstValue()\n\n if (first) setFocusedIndex(first.index)\n }, [descendants, setFocusedIndex])\n\n const onLast = useCallback(() => {\n const last = descendants.enabledLastValue()\n\n if (last) setFocusedIndex(last.index)\n }, [descendants, setFocusedIndex])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n const actions: { [key: string]: KeyboardEventHandler } = {\n ArrowDown: focusedIndex === -1 ? onFirst : onNext,\n ArrowUp: focusedIndex === -1 ? onLast : onPrev,\n End: onLast,\n Escape: onClose,\n Home: onFirst,\n Tab: (ev) => ev.preventDefault(),\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n action(ev)\n },\n [focusedIndex, onClose, onFirst, onLast, onNext, onPrev],\n )\n\n return (\n <PopoverContent\n as=\"div\"\n className=\"ui-menu__content\"\n __css={{ ...styles.content }}\n {...contentProps}\n onKeyDown={handlerAll(contentProps?.onKeyDown, onKeyDown)}\n >\n <ui.ul\n ref={mergeRefs(menuRef, ref)}\n className={cx(\"ui-menu__list\", className)}\n role=\"menu\"\n tabIndex={-1}\n __css={{ ...styles.list }}\n {...rest}\n >\n {children}\n </ui.ul>\n </PopoverContent>\n )\n },\n)\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 focusedIndex: number\n isNested: boolean\n isOpen: boolean\n menuRef: RefObject<HTMLDivElement>\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<HTMLLIElement>>\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;AAGA,kBAA+B;AAC/B,qBAA+B;AAC/B,IAAAA,gBAA0C;AAC1C,mBAA4B;;;ACG5B,4BAAiC;AACjC,mBAA8B;AAEvB,IAAM;AAAA,EACX;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,uBAAuB;AACzB,QAAI,wCAAiB;AAiBd,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;;;ADCK;AA5DD,IAAM,eAAW;AAAA,EACtB,CAAC,EAAE,WAAW,UAAU,cAAc,GAAG,KAAK,GAAG,QAAQ;AACvD,UAAM,EAAE,cAAc,SAAS,iBAAiB,QAAQ,QAAQ,IAC9D,QAAQ;AAEV,UAAM,cAAc,0BAA0B;AAE9C,UAAM,aAAS,0BAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB,YAAY;AAEtD,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,GAAG,CAAC,aAAa,cAAc,eAAe,CAAC;AAE/C,UAAM,aAAS,0BAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB,YAAY;AAEtD,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,GAAG,CAAC,aAAa,cAAc,eAAe,CAAC;AAE/C,UAAM,cAAU,0BAAY,MAAM;AAChC,YAAM,QAAQ,YAAY,kBAAkB;AAE5C,UAAI,MAAO,iBAAgB,MAAM,KAAK;AAAA,IACxC,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,UAAM,aAAS,0BAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB;AAE1C,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,UAAM,gBAAY;AAAA,MAChB,CAAC,OAAsB;AACrB,cAAM,UAAmD;AAAA,UACvD,WAAW,iBAAiB,KAAK,UAAU;AAAA,UAC3C,SAAS,iBAAiB,KAAK,SAAS;AAAA,UACxC,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,KAAK,CAACC,QAAOA,IAAG,eAAe;AAAA,QACjC;AAEA,cAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,YAAI,CAAC,OAAQ;AAEb,WAAG,eAAe;AAClB,eAAO,EAAE;AAAA,MACX;AAAA,MACA,CAAC,cAAc,SAAS,SAAS,QAAQ,QAAQ,MAAM;AAAA,IACzD;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,WAAU;AAAA,QACV,OAAO,EAAE,GAAG,OAAO,QAAQ;AAAA,QAC1B,GAAG;AAAA,QACJ,eAAW,0BAAW,6CAAc,WAAW,SAAS;AAAA,QAExD;AAAA,UAAC,eAAG;AAAA,UAAH;AAAA,YACC,SAAK,yBAAU,SAAS,GAAG;AAAA,YAC3B,eAAW,kBAAG,iBAAiB,SAAS;AAAA,YACxC,MAAK;AAAA,YACL,UAAU;AAAA,YACV,OAAO,EAAE,GAAG,OAAO,KAAK;AAAA,YACvB,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":["import_utils","ev"]}
|
package/dist/menu-list.mjs
CHANGED
@@ -1,22 +1,22 @@
|
|
1
1
|
import { ComponentArgs } from '@yamada-ui/core';
|
2
|
-
import { RefAttributes } from 'react';
|
2
|
+
import { RefAttributes, ReactElement } from 'react';
|
3
3
|
import { MenuGroupProps } from './menu-group.mjs';
|
4
4
|
|
5
5
|
interface MenuOptionGroupOptions<Y extends string | string[] = string> {
|
6
6
|
/**
|
7
|
-
* The
|
7
|
+
* The type of the menu option group.
|
8
|
+
*
|
9
|
+
* @default 'checkbox'
|
8
10
|
*/
|
9
|
-
|
11
|
+
type?: "checkbox" | "radio";
|
10
12
|
/**
|
11
13
|
* The initial value of the menu item group.
|
12
14
|
*/
|
13
15
|
defaultValue?: Y;
|
14
16
|
/**
|
15
|
-
* The
|
16
|
-
*
|
17
|
-
* @default 'checkbox'
|
17
|
+
* The value of the menu item group.
|
18
18
|
*/
|
19
|
-
|
19
|
+
value?: Y;
|
20
20
|
/**
|
21
21
|
* The callback fired when any children checkbox is checked or unchecked.
|
22
22
|
*/
|
@@ -25,7 +25,7 @@ interface MenuOptionGroupOptions<Y extends string | string[] = string> {
|
|
25
25
|
interface MenuOptionGroupProps<Y extends string | string[] = string> extends Omit<MenuGroupProps, keyof MenuOptionGroupOptions>, MenuOptionGroupOptions<Y> {
|
26
26
|
}
|
27
27
|
declare const MenuOptionGroup: {
|
28
|
-
<Y extends string | string[] = string>(props: MenuOptionGroupProps<Y> & RefAttributes<HTMLDivElement>):
|
28
|
+
<Y extends string | string[] = string>(props: MenuOptionGroupProps<Y> & RefAttributes<HTMLDivElement>): ReactElement;
|
29
29
|
} & ComponentArgs;
|
30
30
|
|
31
31
|
export { MenuOptionGroup, type MenuOptionGroupProps };
|
@@ -1,22 +1,22 @@
|
|
1
1
|
import { ComponentArgs } from '@yamada-ui/core';
|
2
|
-
import { RefAttributes } from 'react';
|
2
|
+
import { RefAttributes, ReactElement } from 'react';
|
3
3
|
import { MenuGroupProps } from './menu-group.js';
|
4
4
|
|
5
5
|
interface MenuOptionGroupOptions<Y extends string | string[] = string> {
|
6
6
|
/**
|
7
|
-
* The
|
7
|
+
* The type of the menu option group.
|
8
|
+
*
|
9
|
+
* @default 'checkbox'
|
8
10
|
*/
|
9
|
-
|
11
|
+
type?: "checkbox" | "radio";
|
10
12
|
/**
|
11
13
|
* The initial value of the menu item group.
|
12
14
|
*/
|
13
15
|
defaultValue?: Y;
|
14
16
|
/**
|
15
|
-
* The
|
16
|
-
*
|
17
|
-
* @default 'checkbox'
|
17
|
+
* The value of the menu item group.
|
18
18
|
*/
|
19
|
-
|
19
|
+
value?: Y;
|
20
20
|
/**
|
21
21
|
* The callback fired when any children checkbox is checked or unchecked.
|
22
22
|
*/
|
@@ -25,7 +25,7 @@ interface MenuOptionGroupOptions<Y extends string | string[] = string> {
|
|
25
25
|
interface MenuOptionGroupProps<Y extends string | string[] = string> extends Omit<MenuGroupProps, keyof MenuOptionGroupOptions>, MenuOptionGroupOptions<Y> {
|
26
26
|
}
|
27
27
|
declare const MenuOptionGroup: {
|
28
|
-
<Y extends string | string[] = string>(props: MenuOptionGroupProps<Y> & RefAttributes<HTMLDivElement>):
|
28
|
+
<Y extends string | string[] = string>(props: MenuOptionGroupProps<Y> & RefAttributes<HTMLDivElement>): ReactElement;
|
29
29
|
} & ComponentArgs;
|
30
30
|
|
31
31
|
export { MenuOptionGroup, type MenuOptionGroupProps };
|