@yamada-ui/menu 1.3.16-dev-20241023055302 → 1.3.16-dev-20241023170038
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-I2KIZ6OI.mjs → chunk-2AU3AQ76.mjs} +4 -2
- package/dist/chunk-2AU3AQ76.mjs.map +1 -0
- package/dist/{chunk-I473RINV.mjs → chunk-42FYAM3K.mjs} +13 -4
- package/dist/chunk-42FYAM3K.mjs.map +1 -0
- package/dist/{chunk-ELQD4RMJ.mjs → chunk-466QOCZA.mjs} +3 -3
- package/dist/{chunk-RGVXO7LB.mjs → chunk-6X2N4OND.mjs} +3 -3
- package/dist/{chunk-O7MHNHWF.mjs → chunk-7WO7FJTN.mjs} +12 -5
- package/dist/chunk-7WO7FJTN.mjs.map +1 -0
- package/dist/{chunk-WVPBDFCN.mjs → chunk-BGL4DMB2.mjs} +4 -3
- package/dist/chunk-BGL4DMB2.mjs.map +1 -0
- package/dist/{chunk-NLIGD66J.mjs → chunk-F64SV6DQ.mjs} +25 -8
- package/dist/chunk-F64SV6DQ.mjs.map +1 -0
- package/dist/{chunk-KZAACFSL.mjs → chunk-GXADXQC6.mjs} +2 -2
- package/dist/{chunk-EJHOFPF4.mjs → chunk-HAW3H5KJ.mjs} +1 -1
- package/dist/chunk-HAW3H5KJ.mjs.map +1 -0
- package/dist/{chunk-T4SSYCLG.mjs → chunk-TJO4H2WD.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 +2 -0
- package/dist/context-menu.js.map +1 -1
- package/dist/context-menu.mjs +3 -3
- package/dist/index.js +48 -19
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +10 -10
- package/dist/menu-button.js +15 -4
- package/dist/menu-button.js.map +1 -1
- package/dist/menu-button.mjs +3 -3
- package/dist/menu-context.d.mts +2 -1
- package/dist/menu-context.d.ts +2 -1
- 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.d.mts +3 -3
- package/dist/menu-group.d.ts +3 -3
- package/dist/menu-group.js +10 -3
- package/dist/menu-group.js.map +1 -1
- package/dist/menu-group.mjs +2 -2
- package/dist/menu-item.d.mts +2 -2
- package/dist/menu-item.d.ts +2 -2
- package/dist/menu-item.js +2 -1
- package/dist/menu-item.js.map +1 -1
- package/dist/menu-item.mjs +2 -2
- package/dist/menu-list.js +11 -2
- package/dist/menu-list.js.map +1 -1
- package/dist/menu-list.mjs +2 -2
- package/dist/menu-option-group.js +27 -19
- package/dist/menu-option-group.js.map +1 -1
- package/dist/menu-option-group.mjs +4 -4
- package/dist/menu.js +2 -0
- package/dist/menu.js.map +1 -1
- package/dist/menu.mjs +2 -2
- package/package.json +11 -11
- package/dist/chunk-EJHOFPF4.mjs.map +0 -1
- package/dist/chunk-I2KIZ6OI.mjs.map +0 -1
- package/dist/chunk-I473RINV.mjs.map +0 -1
- package/dist/chunk-NLIGD66J.mjs.map +0 -1
- package/dist/chunk-O7MHNHWF.mjs.map +0 -1
- package/dist/chunk-WVPBDFCN.mjs.map +0 -1
- /package/dist/{chunk-ELQD4RMJ.mjs.map → chunk-466QOCZA.mjs.map} +0 -0
- /package/dist/{chunk-RGVXO7LB.mjs.map → chunk-6X2N4OND.mjs.map} +0 -0
- /package/dist/{chunk-KZAACFSL.mjs.map → chunk-GXADXQC6.mjs.map} +0 -0
- /package/dist/{chunk-T4SSYCLG.mjs.map → chunk-TJO4H2WD.mjs.map} +0 -0
@@ -26,11 +26,12 @@ __export(menu_option_group_exports, {
|
|
26
26
|
module.exports = __toCommonJS(menu_option_group_exports);
|
27
27
|
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
|
28
28
|
var import_utils4 = require("@yamada-ui/utils");
|
29
|
-
var
|
29
|
+
var import_react3 = require("react");
|
30
30
|
|
31
31
|
// src/menu-group.tsx
|
32
32
|
var import_core = require("@yamada-ui/core");
|
33
33
|
var import_utils2 = require("@yamada-ui/utils");
|
34
|
+
var import_react = require("react");
|
34
35
|
|
35
36
|
// src/menu-context.ts
|
36
37
|
var import_use_descendant = require("@yamada-ui/use-descendant");
|
@@ -62,27 +63,33 @@ var [UpstreamMenuItemProvider, useUpstreamMenuItem] = (0, import_utils.createCon
|
|
62
63
|
var import_jsx_runtime = require("react/jsx-runtime");
|
63
64
|
var MenuGroup = (0, import_core.forwardRef)(
|
64
65
|
({ className, children, label, labelProps, ...rest }, ref) => {
|
66
|
+
var _a;
|
65
67
|
const { styles } = useMenu();
|
68
|
+
const id = (0, import_react.useId)();
|
69
|
+
const labelId = (_a = labelProps == null ? void 0 : labelProps.id) != null ? _a : id;
|
66
70
|
const css = { ...styles.group };
|
67
71
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
68
|
-
import_core.ui.
|
72
|
+
import_core.ui.section,
|
69
73
|
{
|
70
74
|
ref,
|
71
75
|
className: (0, import_utils2.cx)("ui-menu__item", "ui-menu__item--group", className),
|
76
|
+
"aria-labelledby": labelId,
|
72
77
|
role: "group",
|
73
78
|
__css: css,
|
74
79
|
...rest,
|
75
80
|
children: [
|
76
81
|
label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
77
|
-
import_core.ui.
|
82
|
+
import_core.ui.header,
|
78
83
|
{
|
79
84
|
className: (0, import_utils2.cx)("ui-menu__item--group-label"),
|
85
|
+
role: "presentation",
|
80
86
|
__css: styles.groupLabel,
|
81
87
|
...labelProps,
|
88
|
+
id: labelId,
|
82
89
|
children: label
|
83
90
|
}
|
84
91
|
) : null,
|
85
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.
|
92
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.div, { className: "ui-menu__item__group", children })
|
86
93
|
]
|
87
94
|
}
|
88
95
|
);
|
@@ -93,7 +100,7 @@ var MenuGroup = (0, import_core.forwardRef)(
|
|
93
100
|
var import_core2 = require("@yamada-ui/core");
|
94
101
|
var import_use_clickable = require("@yamada-ui/use-clickable");
|
95
102
|
var import_utils3 = require("@yamada-ui/utils");
|
96
|
-
var
|
103
|
+
var import_react2 = require("react");
|
97
104
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
98
105
|
var isTargetMenuItem = (target) => {
|
99
106
|
var _a;
|
@@ -125,23 +132,23 @@ var MenuItem = (0, import_core2.forwardRef)(
|
|
125
132
|
} = useMenu();
|
126
133
|
const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
|
127
134
|
const trulyDisabled = isDisabled && !isFocusable;
|
128
|
-
const itemRef = (0,
|
129
|
-
const hasDownstreamRef = (0,
|
130
|
-
const onKeyDownRef = (0,
|
135
|
+
const itemRef = (0, import_react2.useRef)(null);
|
136
|
+
const hasDownstreamRef = (0, import_react2.useRef)(false);
|
137
|
+
const onKeyDownRef = (0, import_react2.useRef)(
|
131
138
|
() => void 0
|
132
139
|
);
|
133
140
|
const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
|
134
|
-
const [isDownstreamOpen, setDownstreamOpen] = (0,
|
141
|
+
const [isDownstreamOpen, setDownstreamOpen] = (0, import_react2.useState)(false);
|
135
142
|
const isFocused = index === focusedIndex;
|
136
|
-
const onMouseOver = (0,
|
143
|
+
const onMouseOver = (0, import_react2.useCallback)(() => {
|
137
144
|
if (isDisabled) return;
|
138
145
|
setFocusedIndex(index);
|
139
146
|
}, [index, isDisabled, setFocusedIndex]);
|
140
|
-
const onMouseLeave = (0,
|
147
|
+
const onMouseLeave = (0, import_react2.useCallback)(() => {
|
141
148
|
if (isDisabled) return;
|
142
149
|
setFocusedIndex(-1);
|
143
150
|
}, [setFocusedIndex, isDisabled]);
|
144
|
-
const onClick = (0,
|
151
|
+
const onClick = (0, import_react2.useCallback)(
|
145
152
|
(ev) => {
|
146
153
|
if (!isTargetMenuItem(ev.currentTarget)) return;
|
147
154
|
const hasDownstream = hasDownstreamRef.current;
|
@@ -152,15 +159,15 @@ var MenuItem = (0, import_core2.forwardRef)(
|
|
152
159
|
},
|
153
160
|
[customCloseOnSelect, closeOnSelect, onClose, onUpstreamClose]
|
154
161
|
);
|
155
|
-
const onFocus = (0,
|
162
|
+
const onFocus = (0, import_react2.useCallback)(() => {
|
156
163
|
setFocusedIndex(index);
|
157
164
|
}, [setFocusedIndex, index]);
|
158
|
-
const onRestoreFocus = (0,
|
165
|
+
const onRestoreFocus = (0, import_react2.useCallback)(() => {
|
159
166
|
var _a2;
|
160
167
|
(_a2 = itemRef.current) == null ? void 0 : _a2.focus();
|
161
168
|
setFocusedIndex(index);
|
162
169
|
}, [setFocusedIndex, index]);
|
163
|
-
const onKeyDown = (0,
|
170
|
+
const onKeyDown = (0, import_react2.useCallback)(
|
164
171
|
(ev) => {
|
165
172
|
const actions = {
|
166
173
|
ArrowLeft: isNested ? (0, import_utils3.funcAll)(onUpstreamRestoreFocus, onClose) : void 0
|
@@ -226,7 +233,7 @@ var MenuItem = (0, import_core2.forwardRef)(
|
|
226
233
|
onUpstreamRestoreFocus: onRestoreFocus
|
227
234
|
},
|
228
235
|
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
229
|
-
import_core2.ui.
|
236
|
+
import_core2.ui.div,
|
230
237
|
{
|
231
238
|
...rest,
|
232
239
|
...isDownstreamOpen ? { "data-active": "" } : {},
|
@@ -279,6 +286,7 @@ var MenuIcon = (0, import_core2.forwardRef)(
|
|
279
286
|
{
|
280
287
|
ref,
|
281
288
|
className: (0, import_utils3.cx)("ui-menu__item__icon", className),
|
289
|
+
"aria-hidden": true,
|
282
290
|
__css: css,
|
283
291
|
...rest
|
284
292
|
}
|
@@ -310,7 +318,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { heig
|
|
310
318
|
|
311
319
|
// src/menu-option-group.tsx
|
312
320
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
313
|
-
var MenuOptionGroup = (0,
|
321
|
+
var MenuOptionGroup = (0, import_react3.forwardRef)(
|
314
322
|
({
|
315
323
|
type,
|
316
324
|
className,
|
@@ -327,7 +335,7 @@ var MenuOptionGroup = (0, import_react2.forwardRef)(
|
|
327
335
|
value: valueProp,
|
328
336
|
onChange: onChangeProp
|
329
337
|
});
|
330
|
-
const onChange = (0,
|
338
|
+
const onChange = (0, import_react3.useCallback)(
|
331
339
|
(selectedValue) => {
|
332
340
|
if (isRadio && typeof value === "string") setValue(selectedValue);
|
333
341
|
if (!isRadio && (0, import_utils4.isArray)(value)) {
|
@@ -346,7 +354,7 @@ var MenuOptionGroup = (0, import_react2.forwardRef)(
|
|
346
354
|
(_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a, ev);
|
347
355
|
};
|
348
356
|
const isChecked = !isRadio && (0, import_utils4.isArray)(value) ? value.includes(child.props.value) : child.props.value === value;
|
349
|
-
return (0,
|
357
|
+
return (0, import_react3.cloneElement)(child, { type, isChecked, onClick });
|
350
358
|
});
|
351
359
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
352
360
|
MenuGroup,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/menu-option-group.tsx","../src/menu-group.tsx","../src/menu-context.ts","../src/menu-item.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 } 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 isRadio = type === \"radio\"\n\n defaultValue ??= (isRadio ? \"\" : []) 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 (isRadio && typeof value === \"string\") setValue(selectedValue as Y)\n\n if (!isRadio && isArray(value)) {\n const nextValue = value.includes(selectedValue)\n ? value.filter((item) => item !== selectedValue)\n : value.concat(selectedValue)\n\n setValue(nextValue as Y)\n }\n },\n [isRadio, value, setValue],\n )\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type !== MenuOptionItem) return child\n\n const onClick = (ev: MouseEvent) => {\n onChange(child.props.value)\n child.props.onClick?.(ev)\n }\n\n const isChecked =\n !isRadio && isArray(value)\n ? value.includes(child.props.value)\n : child.props.value === value\n\n return cloneElement(child, { type, isChecked, 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\"\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMenu } from \"./menu-context\"\n\nexport interface MenuGroupProps extends HTMLUIProps<\"li\"> {\n /**\n * The label of the group.\n */\n label?: string\n /**\n * Props for menu group element.\n */\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport const MenuGroup = forwardRef<MenuGroupProps, \"li\">(\n ({ className, children, label, labelProps, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.group }\n\n return (\n <ui.li\n ref={ref}\n className={cx(\"ui-menu__item\", \"ui-menu__item--group\", className)}\n role=\"group\"\n __css={css}\n {...rest}\n >\n {label ? (\n <ui.span\n className={cx(\"ui-menu__item--group-label\")}\n __css={styles.groupLabel}\n {...labelProps}\n >\n {label}\n </ui.span>\n ) : null}\n\n <ui.ul className=\"ui-menu__item__group\">{children}</ui.ul>\n </ui.li>\n )\n },\n)\n","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","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,\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 && 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<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"],"mappings":"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","names":["import_utils","import_react","import_utils","import_core","import_utils","import_jsx_runtime","_a","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/menu-option-group.tsx","../src/menu-group.tsx","../src/menu-context.ts","../src/menu-item.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 } 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 isRadio = type === \"radio\"\n\n defaultValue ??= (isRadio ? \"\" : []) 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 (isRadio && typeof value === \"string\") setValue(selectedValue as Y)\n\n if (!isRadio && isArray(value)) {\n const nextValue = value.includes(selectedValue)\n ? value.filter((item) => item !== selectedValue)\n : value.concat(selectedValue)\n\n setValue(nextValue as Y)\n }\n },\n [isRadio, value, setValue],\n )\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type !== MenuOptionItem) return child\n\n const onClick = (ev: MouseEvent) => {\n onChange(child.props.value)\n child.props.onClick?.(ev)\n }\n\n const isChecked =\n !isRadio && isArray(value)\n ? value.includes(child.props.value)\n : child.props.value === value\n\n return cloneElement(child, { type, isChecked, 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\"\n","import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useId } from \"react\"\nimport { useMenu } from \"./menu-context\"\n\nexport interface MenuGroupProps extends HTMLUIProps {\n /**\n * The label of the group.\n */\n label?: string\n /**\n * Props for menu group element.\n */\n labelProps?: HTMLUIProps<\"header\">\n}\n\nexport const MenuGroup = forwardRef<MenuGroupProps, \"div\">(\n ({ className, children, label, labelProps, ...rest }, ref) => {\n const { styles } = useMenu()\n const id = useId()\n const labelId = labelProps?.id ?? id\n\n const css: CSSUIObject = { ...styles.group }\n\n return (\n <ui.section\n ref={ref}\n className={cx(\"ui-menu__item\", \"ui-menu__item--group\", className)}\n aria-labelledby={labelId}\n role=\"group\"\n __css={css}\n {...rest}\n >\n {label ? (\n <ui.header\n className={cx(\"ui-menu__item--group-label\")}\n role=\"presentation\"\n __css={styles.groupLabel}\n {...labelProps}\n id={labelId}\n >\n {label}\n </ui.header>\n ) : null}\n\n <ui.div className=\"ui-menu__item__group\">{children}</ui.div>\n </ui.section>\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 buttonRef: RefObject<HTMLButtonElement>\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<HTMLDivElement>>\n onUpstreamRestoreFocus: () => void\n}\n\nexport const [UpstreamMenuItemProvider, useUpstreamMenuItem] =\n createContext<UpstreamMenuItemContext>({\n name: \"UpstreamMenuItemContext\",\n strict: false,\n })\n","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, MenuItemOptions {}\n\nexport const MenuItem = forwardRef<MenuItemProps, \"div\">(\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,\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<HTMLDivElement>(null)\n const hasDownstreamRef = useRef<boolean>(false)\n const onKeyDownRef = useRef<KeyboardEventHandler<HTMLDivElement>>(\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<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 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<HTMLDivElement>({\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.div\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.div>\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 aria-hidden\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oCAAqC;AACrC,IAAAA,gBAA8C;AAC9C,IAAAC,gBAAsD;;;ACJtD,kBAA+B;AAC/B,IAAAC,gBAAmB;AACnB,mBAAsB;;;ACMtB,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;;;AD/CG;AATC,IAAM,gBAAY;AAAA,EACvB,CAAC,EAAE,WAAW,UAAU,OAAO,YAAY,GAAG,KAAK,GAAG,QAAQ;AAlBhE;AAmBI,UAAM,EAAE,OAAO,IAAI,QAAQ;AAC3B,UAAM,SAAK,oBAAM;AACjB,UAAM,WAAU,8CAAY,OAAZ,YAAkB;AAElC,UAAM,MAAmB,EAAE,GAAG,OAAO,MAAM;AAE3C,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,iBAAiB,wBAAwB,SAAS;AAAA,QAChE,mBAAiB;AAAA,QACjB,MAAK;AAAA,QACL,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,kBACC;AAAA,YAAC,eAAG;AAAA,YAAH;AAAA,cACC,eAAW,kBAAG,4BAA4B;AAAA,cAC1C,MAAK;AAAA,cACL,OAAO,OAAO;AAAA,cACb,GAAG;AAAA,cACJ,IAAI;AAAA,cAEH;AAAA;AAAA,UACH,IACE;AAAA,UAEJ,4CAAC,eAAG,KAAH,EAAO,WAAU,wBAAwB,UAAS;AAAA;AAAA;AAAA,IACrD;AAAA,EAEJ;AACF;;;AE1CA,IAAAC,eAA+B;AAC/B,2BAA6B;AAC7B,IAAAC,gBASO;AACP,IAAAC,gBAA8C;AAmLtC,IAAAC,sBAAA;AA3KR,IAAM,mBAAmB,CAAC,WAA+B;AA5BzD;AA6BE,aACE,6BAAc,MAAM,KACpB,CAAC,GAAC,YAAO,aAAa,MAAM,MAA1B,mBAA6B,WAAW;AAE9C;AAiCO,IAAM,eAAW;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AA/EP;AAgFI,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,QAAQ;AACZ,UAAM,EAAE,uBAAuB,KAAI,yBAAoB,MAApB,YAAyB,CAAC;AAE7D,UAAM,gBAAgB,cAAc,CAAC;AAErC,UAAM,cAAU,sBAAuB,IAAI;AAC3C,UAAM,uBAAmB,sBAAgB,KAAK;AAC9C,UAAM,mBAAe;AAAA,MACnB,MAAM;AAAA,IACR;AACA,UAAM,EAAE,OAAO,SAAS,IAAI,kBAAkB,EAAE,UAAU,cAAc,CAAC;AACzE,UAAM,CAAC,kBAAkB,iBAAiB,QAAI,wBAAkB,KAAK;AAErE,UAAM,YAAY,UAAU;AAE5B,UAAM,kBAAc,2BAAY,MAAM;AACpC,UAAI,WAAY;AAEhB,sBAAgB,KAAK;AAAA,IACvB,GAAG,CAAC,OAAO,YAAY,eAAe,CAAC;AAEvC,UAAM,mBAAe,2BAAY,MAAM;AACrC,UAAI,WAAY;AAEhB,sBAAgB,EAAE;AAAA,IACpB,GAAG,CAAC,iBAAiB,UAAU,CAAC;AAEhC,UAAM,cAAU;AAAA,MACd,CAAC,OAAmC;AAClC,YAAI,CAAC,iBAAiB,GAAG,aAAa,EAAG;AAEzC,cAAM,gBAAgB,iBAAiB;AAEvC,YAAI,oDAAwB,CAAC,iBAAiB,eAAgB;AAC5D,kBAAQ;AACR;AAAA,QACF;AAAA,MACF;AAAA,MACA,CAAC,qBAAqB,eAAe,SAAS,eAAe;AAAA,IAC/D;AAEA,UAAM,cAAU,2BAAY,MAAM;AAChC,sBAAgB,KAAK;AAAA,IACvB,GAAG,CAAC,iBAAiB,KAAK,CAAC;AAE3B,UAAM,qBAAiB,2BAAY,MAAM;AAxI7C,UAAAC;AAyIM,OAAAA,MAAA,QAAQ,YAAR,gBAAAA,IAAiB;AAEjB,sBAAgB,KAAK;AAAA,IACvB,GAAG,CAAC,iBAAiB,KAAK,CAAC;AAE3B,UAAM,gBAAY;AAAA,MAChB,CAAC,OAAsC;AACrC,cAAM,UAAmD;AAAA,UACvD,WAAW,eACP,uBAAQ,wBAAwB,OAAO,IACvC;AAAA,QACN;AAEA,cAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,YAAI,CAAC,OAAQ;AAEb,WAAG,eAAe;AAClB,WAAG,gBAAgB;AAEnB,eAAO;AAAA,MACT;AAAA,MACA,CAAC,wBAAwB,SAAS,QAAQ;AAAA,IAC5C;AAEA,UAAM,WAAO,mCAA6B;AAAA,MACxC,cAAc;AAAA,MACd,GAAG;AAAA,MACH,SAAK,yBAAU,UAAU,SAAS,GAAG;AAAA,MACrC;AAAA,MACA;AAAA,MACA,aAAS,0BAAW,MAAM,SAAS,OAAO;AAAA,MAC1C,aAAS,0BAAW,MAAM,SAAS,OAAO;AAAA,MAC1C,eAAW,0BAAW,MAAM,WAAW,WAAW,aAAa,OAAO;AAAA,MACtE,kBAAc,0BAAW,MAAM,cAAc,YAAY;AAAA,MACzD,iBAAa,0BAAW,MAAM,aAAa,WAAW;AAAA,IACxD,CAAC;AAED,uCAAgB,MAAM;AACpB,UAAI,CAAC,OAAQ;AAEb,YAAM,KAAK,wBAAwB;AAEnC,UAAI,aAAa,CAAC,iBAAiB,QAAQ,SAAS;AAClD,YAAI,GAAI,sBAAqB,EAAE;AAE/B,gCAAwB,UAAU,sBAAsB,MAAM;AAvLtE,cAAAA;AAwLU,WAAAA,MAAA,QAAQ,YAAR,gBAAAA,IAAiB,MAAM,EAAE,eAAe,KAAK;AAE7C,kCAAwB,UAAU;AAAA,QACpC,CAAC;AAAA,MACH,WAAW,QAAQ,WAAW,KAAC,+BAAgB,QAAQ,OAAO,GAAG;AAC/D,gBAAQ,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,MAC/C;AAEA,aAAO,MAAM;AACX,YAAI,GAAI,sBAAqB,EAAE;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,WAAW,eAAe,SAAS,MAAM,CAAC;AAE9C,eACE,QAAQ,UACN,6CAAC,gBAAG,MAAH,EAAQ,OAAO,EAAE,MAAM,EAAE,GAAI,UAAS,IAEvC;AAGJ,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA,wBAAwB;AAAA,QAC1B;AAAA,QAEA;AAAA,UAAC,gBAAG;AAAA,UAAH;AAAA,YACE,GAAG;AAAA,YACH,GAAI,mBAAmB,EAAE,eAAe,GAAG,IAAI,CAAC;AAAA,YACjD,eAAW,kBAAG,iBAAiB,SAAS;AAAA,YACxC,MAAK;AAAA,YACL,UAAU,YAAY,IAAI;AAAA,YAC1B,OAAO;AAAA,YAEN;AAAA,qBAAO,6CAAC,YAAU,gBAAK,IAAc;AAAA,cACrC;AAAA,cACA,UAAU,6CAAC,eAAa,mBAAQ,IAAiB;AAAA;AAAA;AAAA,QACpD;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AA2BO,IAAM,qBAAiB;AAAA,EAC5B,CACE,EAAE,WAAW,UAAU,gBAAgB,OAAO,MAAM,WAAW,GAAG,KAAK,GACvE,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,yBAAyB,SAAS;AAAA,QAChD,oBAAc,wBAAS,SAAS;AAAA,QAChC;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,mBAAS,OACR,6CAAC,YAAS,SAAS,YAAY,IAAI,GAChC,kBAAQ,6CAAC,aAAU,GACtB,IACE;AAAA,UACH;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAIO,IAAM,eAAW;AAAA,EACtB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,QAAQ;AAE3B,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,uBAAuB,SAAS;AAAA,QAC9C,eAAW;AAAA,QACX,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAIO,IAAM,kBAAc;AAAA,EACzB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,QAAQ;AAE3B,UAAM,MAAmB,EAAE,GAAG,OAAO,QAAQ;AAE7C,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,0BAA0B,SAAS;AAAA,QACjD,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,IAAM,YAAgB,MACpB,6CAAC,SAAI,QAAO,OAAM,SAAQ,aAAY,OAAM,OAC1C;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL,QAAO;AAAA;AACT,GACF;;;AH9PI,IAAAC,sBAAA;AAzDC,IAAM,sBAAkB;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,UAAU,SAAS;AAEzB,yDAAkB,UAAU,KAAK,CAAC;AAElC,UAAM,CAAC,OAAO,QAAQ,QAAI,oDAAqB;AAAA,MAC7C;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,IACZ,CAAC;AAED,UAAM,eAAW;AAAA,MACf,CAAC,kBAA0B;AACzB,YAAI,WAAW,OAAO,UAAU,SAAU,UAAS,aAAkB;AAErE,YAAI,CAAC,eAAW,uBAAQ,KAAK,GAAG;AAC9B,gBAAM,YAAY,MAAM,SAAS,aAAa,IAC1C,MAAM,OAAO,CAAC,SAAS,SAAS,aAAa,IAC7C,MAAM,OAAO,aAAa;AAE9B,mBAAS,SAAc;AAAA,QACzB;AAAA,MACF;AAAA,MACA,CAAC,SAAS,OAAO,QAAQ;AAAA,IAC3B;AAEA,UAAM,oBAAgB,gCAAiB,QAAQ;AAE/C,UAAM,gBAAgB,cAAc,IAAI,CAAC,UAAU;AACjD,UAAI,MAAM,SAAS,eAAgB,QAAO;AAE1C,YAAM,UAAU,CAAC,OAAmB;AA7E1C;AA8EQ,iBAAS,MAAM,MAAM,KAAK;AAC1B,0BAAM,OAAM,YAAZ,4BAAsB;AAAA,MACxB;AAEA,YAAM,YACJ,CAAC,eAAW,uBAAQ,KAAK,IACrB,MAAM,SAAS,MAAM,MAAM,KAAK,IAChC,MAAM,MAAM,UAAU;AAE5B,iBAAO,4BAAa,OAAO,EAAE,MAAM,WAAW,QAAQ,CAAC;AAAA,IACzD,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,gCAAgC,SAAS;AAAA,QACtD,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAMA,gBAAgB,cAAc;","names":["import_utils","import_react","import_utils","import_core","import_utils","import_react","import_jsx_runtime","_a","import_jsx_runtime"]}
|
@@ -1,10 +1,10 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
MenuOptionGroup
|
4
|
-
} from "./chunk-
|
5
|
-
import "./chunk-
|
6
|
-
import "./chunk-
|
7
|
-
import "./chunk-
|
4
|
+
} from "./chunk-6X2N4OND.mjs";
|
5
|
+
import "./chunk-7WO7FJTN.mjs";
|
6
|
+
import "./chunk-BGL4DMB2.mjs";
|
7
|
+
import "./chunk-HAW3H5KJ.mjs";
|
8
8
|
export {
|
9
9
|
MenuOptionGroup
|
10
10
|
};
|
package/dist/menu.js
CHANGED
@@ -89,6 +89,7 @@ var Menu = (props) => {
|
|
89
89
|
const descendants = useDescendants();
|
90
90
|
const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
|
91
91
|
const menuRef = (0, import_react.useRef)(null);
|
92
|
+
const buttonRef = (0, import_react.useRef)(null);
|
92
93
|
const timeoutIds = (0, import_react.useRef)(/* @__PURE__ */ new Set([]));
|
93
94
|
const requestAnimationFrameId = (0, import_react.useRef)(null);
|
94
95
|
const onCloseMapRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
|
@@ -167,6 +168,7 @@ var Menu = (props) => {
|
|
167
168
|
MenuProvider,
|
168
169
|
{
|
169
170
|
value: {
|
171
|
+
buttonRef,
|
170
172
|
closeOnSelect,
|
171
173
|
focusedIndex,
|
172
174
|
isNested,
|
package/dist/menu.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/menu.tsx","../src/menu-context.ts"],"sourcesContent":["import type { ThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport type { FC } from \"react\"\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 isNested = !!relatedRef\n\n if (isNested) {\n placement ??= \"right-start\"\n offset ??= [-8, 8]\n closeOnBlur ??= false\n } else {\n placement ??= \"bottom-start\"\n }\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n const menuRef = useRef<HTMLDivElement>(null)\n const timeoutIds = useRef<Set<any>>(new Set([]))\n const requestAnimationFrameId = useRef<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 (!isNested) onFocusMenu()\n }, [onOpenProp, isNested, onFocusMenu])\n\n const onCloseInternal = useCallback(() => {\n onCloseProp?.()\n\n for (const onClose of onCloseMapRef.current.values()) {\n onClose()\n }\n }, [onCloseProp])\n\n const id = useId()\n const { isOpen, 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(isOpen)\n }, [setDownstreamOpen, isOpen])\n\n useEffect(() => {\n if (hasDownstreamRef) hasDownstreamRef.current = true\n\n return () => {\n if (hasDownstreamRef) hasDownstreamRef.current = false\n }\n })\n\n useUpdateEffect(() => {\n if (!isOpen) setFocusedIndex(-1)\n }, [isOpen])\n\n useUnmountEffect(() => {\n timeoutIds.current.forEach((id) => clearTimeout(id))\n timeoutIds.current.clear()\n })\n\n return (\n <DescendantsContextProvider value={descendants}>\n <UpstreamMenuProvider\n value={{\n relatedRef: menuRef,\n onDownstreamCloseMapRef: onCloseMapRef,\n onUpstreamClose: funcAll(onUpstreamClose, onClose),\n }}\n >\n <MenuProvider\n value={{\n closeOnSelect,\n focusedIndex,\n isNested,\n isOpen,\n menuRef,\n requestAnimationFrameId,\n setFocusedIndex,\n styles,\n onClose,\n onFocusFirstItem,\n onFocusLastItem,\n onOpen,\n onUpstreamClose,\n }}\n >\n <Popover\n {...{\n trigger: isNested ? \"hover\" : \"click\",\n ...rest,\n closeOnBlur,\n closeOnButton: false,\n duration,\n initialFocusRef,\n isOpen,\n offset,\n placement,\n relatedRef,\n onClose,\n onOpen,\n }}\n />\n </MenuProvider>\n </UpstreamMenuProvider>\n </DescendantsContextProvider>\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":"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","names":["import_utils","_a","id","onClose"]}
|
1
|
+
{"version":3,"sources":["../src/menu.tsx","../src/menu-context.ts"],"sourcesContent":["import type { ThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport type { FC } from \"react\"\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 isNested = !!relatedRef\n\n if (isNested) {\n placement ??= \"right-start\"\n offset ??= [-8, 8]\n closeOnBlur ??= false\n } else {\n placement ??= \"bottom-start\"\n }\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n const menuRef = useRef<HTMLDivElement>(null)\n const 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 (!isNested) onFocusMenu()\n }, [onOpenProp, isNested, onFocusMenu])\n\n const onCloseInternal = useCallback(() => {\n onCloseProp?.()\n\n for (const onClose of onCloseMapRef.current.values()) {\n onClose()\n }\n }, [onCloseProp])\n\n const id = useId()\n const { isOpen, 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(isOpen)\n }, [setDownstreamOpen, isOpen])\n\n useEffect(() => {\n if (hasDownstreamRef) hasDownstreamRef.current = true\n\n return () => {\n if (hasDownstreamRef) hasDownstreamRef.current = false\n }\n })\n\n useUpdateEffect(() => {\n if (!isOpen) setFocusedIndex(-1)\n }, [isOpen])\n\n useUnmountEffect(() => {\n timeoutIds.current.forEach((id) => clearTimeout(id))\n timeoutIds.current.clear()\n })\n\n return (\n <DescendantsContextProvider value={descendants}>\n <UpstreamMenuProvider\n value={{\n relatedRef: menuRef,\n onDownstreamCloseMapRef: onCloseMapRef,\n onUpstreamClose: funcAll(onUpstreamClose, onClose),\n }}\n >\n <MenuProvider\n value={{\n buttonRef,\n closeOnSelect,\n focusedIndex,\n isNested,\n isOpen,\n menuRef,\n requestAnimationFrameId,\n setFocusedIndex,\n styles,\n onClose,\n onFocusFirstItem,\n onFocusLastItem,\n onOpen,\n onUpstreamClose,\n }}\n >\n <Popover\n {...{\n trigger: isNested ? \"hover\" : \"click\",\n ...rest,\n closeOnBlur,\n closeOnButton: false,\n duration,\n initialFocusRef,\n isOpen,\n offset,\n placement,\n relatedRef,\n onClose,\n onOpen,\n }}\n />\n </MenuProvider>\n </UpstreamMenuProvider>\n </DescendantsContextProvider>\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 buttonRef: RefObject<HTMLButtonElement>\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<HTMLDivElement>>\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","id","onClose"]}
|
package/dist/menu.mjs
CHANGED
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@yamada-ui/menu",
|
3
|
-
"version": "1.3.16-dev-
|
3
|
+
"version": "1.3.16-dev-20241023170038",
|
4
4
|
"description": "Yamada UI menu component",
|
5
5
|
"keywords": [
|
6
6
|
"yamada",
|
@@ -36,16 +36,16 @@
|
|
36
36
|
"url": "https://github.com/yamada-ui/yamada-ui/issues"
|
37
37
|
},
|
38
38
|
"dependencies": {
|
39
|
-
"@yamada-ui/core": "1.15.3-dev-
|
40
|
-
"@yamada-ui/icon": "1.1.9-dev-
|
41
|
-
"@yamada-ui/motion": "2.2.5-dev-
|
42
|
-
"@yamada-ui/popover": "1.3.5-dev-
|
43
|
-
"@yamada-ui/transitions": "1.1.8-dev-
|
44
|
-
"@yamada-ui/use-clickable": "1.2.11-dev-
|
45
|
-
"@yamada-ui/use-controllable-state": "1.0.23-dev-
|
46
|
-
"@yamada-ui/use-descendant": "1.0.24-dev-
|
47
|
-
"@yamada-ui/use-disclosure": "1.1.0-dev-
|
48
|
-
"@yamada-ui/utils": "1.5.4-dev-
|
39
|
+
"@yamada-ui/core": "1.15.3-dev-20241023170038",
|
40
|
+
"@yamada-ui/icon": "1.1.9-dev-20241023170038",
|
41
|
+
"@yamada-ui/motion": "2.2.5-dev-20241023170038",
|
42
|
+
"@yamada-ui/popover": "1.3.5-dev-20241023170038",
|
43
|
+
"@yamada-ui/transitions": "1.1.8-dev-20241023170038",
|
44
|
+
"@yamada-ui/use-clickable": "1.2.11-dev-20241023170038",
|
45
|
+
"@yamada-ui/use-controllable-state": "1.0.23-dev-20241023170038",
|
46
|
+
"@yamada-ui/use-descendant": "1.0.24-dev-20241023170038",
|
47
|
+
"@yamada-ui/use-disclosure": "1.1.0-dev-20241023170038",
|
48
|
+
"@yamada-ui/utils": "1.5.4-dev-20241023170038"
|
49
49
|
},
|
50
50
|
"devDependencies": {
|
51
51
|
"clean-package": "2.2.0",
|
@@ -1 +0,0 @@
|
|
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 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":";;;AASA,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAEvB,IAAM;AAAA,EACX;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,uBAAuB;AACzB,IAAI,iBAAiB;AAiBd,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 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/menu.tsx"],"sourcesContent":["import type { ThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport type { FC } from \"react\"\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 isNested = !!relatedRef\n\n if (isNested) {\n placement ??= \"right-start\"\n offset ??= [-8, 8]\n closeOnBlur ??= false\n } else {\n placement ??= \"bottom-start\"\n }\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n const menuRef = useRef<HTMLDivElement>(null)\n const timeoutIds = useRef<Set<any>>(new Set([]))\n const requestAnimationFrameId = useRef<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 (!isNested) onFocusMenu()\n }, [onOpenProp, isNested, onFocusMenu])\n\n const onCloseInternal = useCallback(() => {\n onCloseProp?.()\n\n for (const onClose of onCloseMapRef.current.values()) {\n onClose()\n }\n }, [onCloseProp])\n\n const id = useId()\n const { isOpen, 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(isOpen)\n }, [setDownstreamOpen, isOpen])\n\n useEffect(() => {\n if (hasDownstreamRef) hasDownstreamRef.current = true\n\n return () => {\n if (hasDownstreamRef) hasDownstreamRef.current = false\n }\n })\n\n useUpdateEffect(() => {\n if (!isOpen) setFocusedIndex(-1)\n }, [isOpen])\n\n useUnmountEffect(() => {\n timeoutIds.current.forEach((id) => clearTimeout(id))\n timeoutIds.current.clear()\n })\n\n return (\n <DescendantsContextProvider value={descendants}>\n <UpstreamMenuProvider\n value={{\n relatedRef: menuRef,\n onDownstreamCloseMapRef: onCloseMapRef,\n onUpstreamClose: funcAll(onUpstreamClose, onClose),\n }}\n >\n <MenuProvider\n value={{\n closeOnSelect,\n focusedIndex,\n isNested,\n isOpen,\n menuRef,\n requestAnimationFrameId,\n setFocusedIndex,\n styles,\n onClose,\n onFocusFirstItem,\n onFocusLastItem,\n onOpen,\n onUpstreamClose,\n }}\n >\n <Popover\n {...{\n trigger: isNested ? \"hover\" : \"click\",\n ...rest,\n closeOnBlur,\n closeOnButton: false,\n duration,\n initialFocusRef,\n isOpen,\n offset,\n placement,\n relatedRef,\n onClose,\n onOpen,\n }}\n />\n </MenuProvider>\n </UpstreamMenuProvider>\n </DescendantsContextProvider>\n )\n}\n"],"mappings":"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","names":["_a","id","onClose"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/menu-list.tsx"],"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"],"mappings":";;;;;;;AAGA,SAAS,YAAY,UAAU;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,IAAI,YAAY,iBAAiB;AAC1C,SAAS,mBAAmB;AAmEpB;AA5DD,IAAM,WAAW;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,SAAS,YAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB,YAAY;AAEtD,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,GAAG,CAAC,aAAa,cAAc,eAAe,CAAC;AAE/C,UAAM,SAAS,YAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB,YAAY;AAEtD,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,GAAG,CAAC,aAAa,cAAc,eAAe,CAAC;AAE/C,UAAM,UAAU,YAAY,MAAM;AAChC,YAAM,QAAQ,YAAY,kBAAkB;AAE5C,UAAI,MAAO,iBAAgB,MAAM,KAAK;AAAA,IACxC,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,UAAM,SAAS,YAAY,MAAM;AAC/B,YAAM,OAAO,YAAY,iBAAiB;AAE1C,UAAI,KAAM,iBAAgB,KAAK,KAAK;AAAA,IACtC,GAAG,CAAC,aAAa,eAAe,CAAC;AAEjC,UAAM,YAAY;AAAA,MAChB,CAAC,OAAsB;AACrB,cAAM,UAAmD;AAAA,UACvD,WAAW,iBAAiB,KAAK,UAAU;AAAA,UAC3C,SAAS,iBAAiB,KAAK,SAAS;AAAA,UACxC,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,KAAK,CAACA,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,WAAW,WAAW,6CAAc,WAAW,SAAS;AAAA,QAExD;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YACC,KAAK,UAAU,SAAS,GAAG;AAAA,YAC3B,WAAW,GAAG,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":["ev"]}
|
@@ -1 +0,0 @@
|
|
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 { assignRef, cx, dataAttr, funcAll, handlerAll } from \"@yamada-ui/utils\"\nimport { useCallback, 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 ({ as, className, children, ...rest }, ref) => {\n const { onKeyDownRef, onUpstreamRestoreFocus } = useUpstreamMenuItem() ?? {}\n const { isOpen, onClose, onFocusFirstItem, onFocusLastItem, onOpen } =\n useMenu()\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n const actions: { [key: string]: Function } = {\n ArrowDown: funcAll(onOpen, onFocusFirstItem),\n ArrowUp: funcAll(onOpen, onFocusLastItem),\n Enter: 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<HTMLLIElement>) => {\n const actions: { [key: string]: Function | undefined } = {\n ArrowLeft: isOpen\n ? funcAll(onUpstreamRestoreFocus, onClose)\n : undefined,\n ArrowRight: !isOpen ? 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 [isOpen, onOpen, onFocusFirstItem, onUpstreamRestoreFocus, onClose],\n )\n\n assignRef(onKeyDownRef, onItemKeyDown)\n\n const Component = useMemo(() => (as ? ui(as) : Button), [as])\n\n return (\n <PopoverTrigger>\n <Component\n ref={ref}\n className={cx(\"ui-menu\", className)}\n aria-expanded={isOpen}\n aria-haspopup=\"menu\"\n {...rest}\n data-active={dataAttr(isOpen)}\n onKeyDown={handlerAll(rest.onKeyDown, onKeyDown)}\n >\n {children}\n </Component>\n </PopoverTrigger>\n )\n },\n)\n\nconst Button = forwardRef<MenuButtonProps, \"button\">((rest, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = {\n 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"],"mappings":";;;;;;;;;;AAGA,SAAS,YAAY,UAAU;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,WAAW,IAAI,UAAU,SAAS,kBAAkB;AAC7D,SAAS,aAAa,eAAe;AAyD7B,cAuCF,YAvCE;AAnDD,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,IAAI,WAAW,UAAU,GAAG,KAAK,GAAG,QAAQ;AAdjD;AAeI,UAAM,EAAE,cAAc,uBAAuB,KAAI,yBAAoB,MAApB,YAAyB,CAAC;AAC3E,UAAM,EAAE,QAAQ,SAAS,kBAAkB,iBAAiB,OAAO,IACjE,QAAQ;AAEV,UAAM,YAAY;AAAA,MAChB,CAAC,OAAsB;AACrB,cAAM,UAAuC;AAAA,UAC3C,WAAW,QAAQ,QAAQ,gBAAgB;AAAA,UAC3C,SAAS,QAAQ,QAAQ,eAAe;AAAA,UACxC,OAAO,QAAQ,QAAQ,gBAAgB;AAAA,QACzC;AAEA,cAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,YAAI,CAAC,OAAQ;AAEb,WAAG,eAAe;AAElB,eAAO;AAAA,MACT;AAAA,MACA,CAAC,kBAAkB,iBAAiB,MAAM;AAAA,IAC5C;AAEA,UAAM,gBAAgB;AAAA,MACpB,CAAC,OAAqC;AACpC,cAAM,UAAmD;AAAA,UACvD,WAAW,SACP,QAAQ,wBAAwB,OAAO,IACvC;AAAA,UACJ,YAAY,CAAC,SAAS,QAAQ,QAAQ,gBAAgB,IAAI;AAAA,QAC5D;AAEA,cAAM,SAAS,QAAQ,GAAG,GAAG;AAE7B,YAAI,CAAC,OAAQ;AAEb,WAAG,eAAe;AAElB,eAAO;AAAA,MACT;AAAA,MACA,CAAC,QAAQ,QAAQ,kBAAkB,wBAAwB,OAAO;AAAA,IACpE;AAEA,cAAU,cAAc,aAAa;AAErC,UAAM,YAAY,QAAQ,MAAO,KAAK,GAAG,EAAE,IAAI,QAAS,CAAC,EAAE,CAAC;AAE5D,WACE,oBAAC,kBACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,SAAS;AAAA,QAClC,iBAAe;AAAA,QACf,iBAAc;AAAA,QACb,GAAG;AAAA,QACJ,eAAa,SAAS,MAAM;AAAA,QAC5B,WAAW,WAAW,KAAK,WAAW,SAAS;AAAA,QAE9C;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,IAAM,SAAS,WAAsC,CAAC,MAAM,QAAQ;AAClE,QAAM,EAAE,OAAO,IAAI,QAAQ;AAE3B,QAAM,MAAmB;AAAA,IACvB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,SAAS;AAAA,IACT,GAAG,OAAO;AAAA,EACZ;AAEA,SAAO,oBAAC,GAAG,QAAH,EAAU,KAAU,OAAO,KAAM,GAAG,MAAM;AACpD,CAAC;AAQM,IAAM,iBAAiB;AAAA,EAC5B,CAAC,EAAE,WAAW,UAAU,MAAM,WAAW,YAAY,GAAG,KAAK,GAAG,QAAQ;AACtE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,wBAAwB,SAAS;AAAA,QAC/C,MAAK;AAAA,QACJ,GAAG;AAAA,QAEJ;AAAA,8BAAC,GAAG,MAAH,EAAQ,IAAG,QAAO,MAAK,KAAK,GAAG,YAC7B,UACH;AAAA,UAEA,oBAAC,YAAU,GAAG,WACX,gCAAQ,oBAAC,eAAY,UAAS,SAAQ,WAAU,kBAAiB,GACpE;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/menu-group.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMenu } from \"./menu-context\"\n\nexport interface MenuGroupProps extends HTMLUIProps<\"li\"> {\n /**\n * The label of the group.\n */\n label?: string\n /**\n * Props for menu group element.\n */\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport const MenuGroup = forwardRef<MenuGroupProps, \"li\">(\n ({ className, children, label, labelProps, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.group }\n\n return (\n <ui.li\n ref={ref}\n className={cx(\"ui-menu__item\", \"ui-menu__item--group\", className)}\n role=\"group\"\n __css={css}\n {...rest}\n >\n {label ? (\n <ui.span\n className={cx(\"ui-menu__item--group-label\")}\n __css={styles.groupLabel}\n {...labelProps}\n >\n {label}\n </ui.span>\n ) : null}\n\n <ui.ul className=\"ui-menu__item__group\">{children}</ui.ul>\n </ui.li>\n )\n },\n)\n"],"mappings":";;;;;;AACA,SAAS,YAAY,UAAU;AAC/B,SAAS,UAAU;AAqBb,SAQI,KARJ;AAPC,IAAM,YAAY;AAAA,EACvB,CAAC,EAAE,WAAW,UAAU,OAAO,YAAY,GAAG,KAAK,GAAG,QAAQ;AAC5D,UAAM,EAAE,OAAO,IAAI,QAAQ;AAE3B,UAAM,MAAmB,EAAE,GAAG,OAAO,MAAM;AAE3C,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,iBAAiB,wBAAwB,SAAS;AAAA,QAChE,MAAK;AAAA,QACL,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA,kBACC;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAW,GAAG,4BAA4B;AAAA,cAC1C,OAAO,OAAO;AAAA,cACb,GAAG;AAAA,cAEH;AAAA;AAAA,UACH,IACE;AAAA,UAEJ,oBAAC,GAAG,IAAH,EAAM,WAAU,wBAAwB,UAAS;AAAA;AAAA;AAAA,IACpD;AAAA,EAEJ;AACF;","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/menu-item.tsx"],"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,\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 && 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<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"],"mappings":"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","names":["_a"]}
|
File without changes
|
File without changes
|
File without changes
|
File without changes
|