@yamada-ui/menu 1.0.23-dev-20240414110235 → 1.0.23-dev-20240414192209
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-NMZBDE4G.mjs → chunk-6OASXRNF.mjs} +2 -2
- package/dist/{chunk-RQSDNMYK.mjs → chunk-SP4GE4RO.mjs} +9 -9
- package/dist/chunk-SP4GE4RO.mjs.map +1 -0
- package/dist/index.js +8 -8
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/menu-item.js +8 -8
- package/dist/menu-item.js.map +1 -1
- package/dist/menu-item.mjs +1 -1
- package/dist/menu-option-group.js +8 -8
- package/dist/menu-option-group.js.map +1 -1
- package/dist/menu-option-group.mjs +2 -2
- package/package.json +4 -4
- package/dist/chunk-RQSDNMYK.mjs.map +0 -1
- /package/dist/{chunk-NMZBDE4G.mjs.map → chunk-6OASXRNF.mjs.map} +0 -0
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
} from "./chunk-3I42NCZV.mjs";
|
|
5
5
|
import {
|
|
6
6
|
MenuOptionItem
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-SP4GE4RO.mjs";
|
|
8
8
|
|
|
9
9
|
// src/menu-option-group.tsx
|
|
10
10
|
import { useControllableState } from "@yamada-ui/use-controllable-state";
|
|
@@ -64,4 +64,4 @@ MenuOptionGroup.displayName = "MenuOptionGroup";
|
|
|
64
64
|
export {
|
|
65
65
|
MenuOptionGroup
|
|
66
66
|
};
|
|
67
|
-
//# sourceMappingURL=chunk-
|
|
67
|
+
//# sourceMappingURL=chunk-6OASXRNF.mjs.map
|
|
@@ -32,6 +32,8 @@ var MenuItem = forwardRef(
|
|
|
32
32
|
icon,
|
|
33
33
|
command,
|
|
34
34
|
children,
|
|
35
|
+
onClick: onClickProp,
|
|
36
|
+
onFocus: onFocusProp,
|
|
35
37
|
...props
|
|
36
38
|
}, ref) => {
|
|
37
39
|
const {
|
|
@@ -49,24 +51,23 @@ var MenuItem = forwardRef(
|
|
|
49
51
|
const isFocused = index === focusedIndex;
|
|
50
52
|
const onClick = useCallback(
|
|
51
53
|
(ev) => {
|
|
52
|
-
|
|
53
|
-
(_a = props.onClick) == null ? void 0 : _a.call(props, ev);
|
|
54
|
+
onClickProp == null ? void 0 : onClickProp(ev);
|
|
54
55
|
if (!isTargetMenuItem(ev.currentTarget))
|
|
55
56
|
return;
|
|
56
57
|
if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect)
|
|
57
58
|
onClose();
|
|
58
59
|
},
|
|
59
|
-
[
|
|
60
|
+
[onClickProp, customCloseOnSelect, generalCloseOnSelect, onClose]
|
|
60
61
|
);
|
|
61
62
|
const onFocus = useCallback(
|
|
62
63
|
(ev) => {
|
|
63
|
-
|
|
64
|
-
(_a = props.onFocus) == null ? void 0 : _a.call(props, ev);
|
|
64
|
+
onFocusProp == null ? void 0 : onFocusProp(ev);
|
|
65
65
|
setFocusedIndex(index);
|
|
66
66
|
},
|
|
67
|
-
[
|
|
67
|
+
[onFocusProp, setFocusedIndex, index]
|
|
68
68
|
);
|
|
69
69
|
const rest = useClickable({
|
|
70
|
+
...props,
|
|
70
71
|
onClick,
|
|
71
72
|
onFocus,
|
|
72
73
|
ref: mergeRefs(register, buttonRef, ref),
|
|
@@ -86,7 +87,7 @@ var MenuItem = forwardRef(
|
|
|
86
87
|
}
|
|
87
88
|
}, [isFocused, trulyDisabled, menuRef, isOpen]);
|
|
88
89
|
type = as || type ? type != null ? type : void 0 : "button";
|
|
89
|
-
children = icon || command ? /* @__PURE__ */ jsx(ui.span, { style: {
|
|
90
|
+
children = icon || command ? /* @__PURE__ */ jsx(ui.span, { style: { flex: 1 }, children }) : children;
|
|
90
91
|
const css = {
|
|
91
92
|
textDecoration: "none",
|
|
92
93
|
color: "inherit",
|
|
@@ -103,7 +104,6 @@ var MenuItem = forwardRef(
|
|
|
103
104
|
return /* @__PURE__ */ jsxs(
|
|
104
105
|
ui.li,
|
|
105
106
|
{
|
|
106
|
-
...props,
|
|
107
107
|
...rest,
|
|
108
108
|
as,
|
|
109
109
|
type,
|
|
@@ -187,4 +187,4 @@ export {
|
|
|
187
187
|
MenuItem,
|
|
188
188
|
MenuOptionItem
|
|
189
189
|
};
|
|
190
|
-
//# sourceMappingURL=chunk-
|
|
190
|
+
//# sourceMappingURL=chunk-SP4GE4RO.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/menu-item.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport {\n ariaAttr,\n cx,\n isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { FC, FocusEvent, MouseEvent, ReactElement } from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport { useMenu, useMenuDescendant } from \"./menu\"\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"menu-item\")\n )\n}\n\ntype MenuItemOptions = {\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * The menu item icon to use.\n */\n icon?: ReactElement\n /**\n * Right-aligned label text content, useful for displaying hotkeys.\n */\n command?: string\n}\n\nexport type MenuItemProps = HTMLUIProps<\"button\"> & MenuItemOptions\n\nexport const MenuItem = forwardRef<MenuItemProps, \"button\">(\n (\n {\n as,\n className,\n type,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n icon,\n command,\n children,\n onClick: onClickProp,\n onFocus: onFocusProp,\n ...props\n },\n ref,\n ) => {\n const {\n focusedIndex,\n setFocusedIndex,\n isOpen,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n menuRef,\n styles,\n } = useMenu()\n\n const trulyDisabled = isDisabled && !isFocusable\n\n const buttonRef = useRef<HTMLButtonElement>(null)\n const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLButtonElement>) => {\n onClickProp?.(ev)\n\n if (!isTargetMenuItem(ev.currentTarget)) return\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n },\n [onClickProp, customCloseOnSelect, generalCloseOnSelect, onClose],\n )\n\n const onFocus = useCallback(\n (ev: FocusEvent<HTMLButtonElement>) => {\n onFocusProp?.(ev)\n\n setFocusedIndex(index)\n },\n [onFocusProp, setFocusedIndex, index],\n )\n\n const rest = useClickable<HTMLButtonElement>({\n ...props,\n onClick,\n onFocus,\n ref: mergeRefs(register, buttonRef, ref),\n isDisabled,\n isFocusable,\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n if (isFocused && !trulyDisabled && buttonRef.current) {\n requestAnimationFrame(() => buttonRef.current?.focus())\n } else if (menuRef.current && !isActiveElement(menuRef.current)) {\n menuRef.current.focus()\n }\n }, [isFocused, trulyDisabled, menuRef, isOpen])\n\n type = as || type ? type ?? undefined : \"button\"\n\n children =\n icon || command ? (\n <ui.span style={{ flex: 1 }}>{children}</ui.span>\n ) : (\n children\n )\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n ...styles.item,\n }\n\n return (\n <ui.li\n {...rest}\n as={as}\n type={type}\n role=\"menu-item\"\n tabIndex={isFocused ? 0 : -1}\n className={cx(\"ui-menu__item\", className)}\n __css={css}\n >\n {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n {children}\n {command ? <MenuCommand>{command}</MenuCommand> : null}\n </ui.li>\n )\n },\n)\n\ntype MenuOptionItemOptions = {\n /**\n * The menu option item icon to use.\n */\n icon?: ReactElement | null\n /**\n * The value of the menu option item.\n */\n value?: string\n /**\n * If `true`, the checkbox or radio will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * The type of the menu option item.\n */\n type?: \"radio\" | \"checkbox\"\n}\n\nexport type MenuOptionItemProps = Omit<MenuItemProps, \"icon\" | \"command\"> &\n MenuOptionItemOptions\n\nexport const MenuOptionItem = forwardRef<MenuOptionItemProps, \"button\">(\n (\n { className, icon, isChecked, closeOnSelect = false, children, ...rest },\n ref,\n ) => {\n return (\n <MenuItem\n ref={ref}\n className={cx(\"ui-menu__item--option\", className)}\n aria-checked={ariaAttr(isChecked)}\n closeOnSelect={closeOnSelect}\n {...rest}\n >\n {icon !== null ? (\n <MenuIcon opacity={isChecked ? 1 : 0}>\n {icon || <CheckIcon />}\n </MenuIcon>\n ) : null}\n {children}\n </MenuItem>\n )\n },\n)\n\ntype MenuIconProps = HTMLUIProps<\"span\">\n\nconst 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\ntype MenuCommandProps = HTMLUIProps<\"span\">\n\nconst 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"],"mappings":"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","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -280,6 +280,8 @@ var MenuItem = (0, import_core4.forwardRef)(
|
|
|
280
280
|
icon,
|
|
281
281
|
command,
|
|
282
282
|
children,
|
|
283
|
+
onClick: onClickProp,
|
|
284
|
+
onFocus: onFocusProp,
|
|
283
285
|
...props
|
|
284
286
|
}, ref) => {
|
|
285
287
|
const {
|
|
@@ -297,24 +299,23 @@ var MenuItem = (0, import_core4.forwardRef)(
|
|
|
297
299
|
const isFocused = index === focusedIndex;
|
|
298
300
|
const onClick = (0, import_react4.useCallback)(
|
|
299
301
|
(ev) => {
|
|
300
|
-
|
|
301
|
-
(_a = props.onClick) == null ? void 0 : _a.call(props, ev);
|
|
302
|
+
onClickProp == null ? void 0 : onClickProp(ev);
|
|
302
303
|
if (!isTargetMenuItem(ev.currentTarget))
|
|
303
304
|
return;
|
|
304
305
|
if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect)
|
|
305
306
|
onClose();
|
|
306
307
|
},
|
|
307
|
-
[
|
|
308
|
+
[onClickProp, customCloseOnSelect, generalCloseOnSelect, onClose]
|
|
308
309
|
);
|
|
309
310
|
const onFocus = (0, import_react4.useCallback)(
|
|
310
311
|
(ev) => {
|
|
311
|
-
|
|
312
|
-
(_a = props.onFocus) == null ? void 0 : _a.call(props, ev);
|
|
312
|
+
onFocusProp == null ? void 0 : onFocusProp(ev);
|
|
313
313
|
setFocusedIndex(index);
|
|
314
314
|
},
|
|
315
|
-
[
|
|
315
|
+
[onFocusProp, setFocusedIndex, index]
|
|
316
316
|
);
|
|
317
317
|
const rest = (0, import_use_clickable.useClickable)({
|
|
318
|
+
...props,
|
|
318
319
|
onClick,
|
|
319
320
|
onFocus,
|
|
320
321
|
ref: (0, import_utils4.mergeRefs)(register, buttonRef, ref),
|
|
@@ -334,7 +335,7 @@ var MenuItem = (0, import_core4.forwardRef)(
|
|
|
334
335
|
}
|
|
335
336
|
}, [isFocused, trulyDisabled, menuRef, isOpen]);
|
|
336
337
|
type = as || type ? type != null ? type : void 0 : "button";
|
|
337
|
-
children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.span, { style: {
|
|
338
|
+
children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.span, { style: { flex: 1 }, children }) : children;
|
|
338
339
|
const css = {
|
|
339
340
|
textDecoration: "none",
|
|
340
341
|
color: "inherit",
|
|
@@ -351,7 +352,6 @@ var MenuItem = (0, import_core4.forwardRef)(
|
|
|
351
352
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
352
353
|
import_core4.ui.li,
|
|
353
354
|
{
|
|
354
|
-
...props,
|
|
355
355
|
...rest,
|
|
356
356
|
as,
|
|
357
357
|
type,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/menu.tsx","../src/menu-button.tsx","../src/menu-list.tsx","../src/menu-item.tsx","../src/menu-group.tsx","../src/menu-option-group.tsx","../src/menu-divider.tsx"],"sourcesContent":["export { Menu } from \"./menu\"\nexport type { MenuProps } from \"./menu\"\nexport { MenuButton } from \"./menu-button\"\nexport type { MenuButtonProps } from \"./menu-button\"\nexport { MenuList } from \"./menu-list\"\nexport type { MenuListProps } from \"./menu-list\"\nexport { MenuItem, MenuOptionItem } from \"./menu-item\"\nexport type { MenuItemProps, MenuOptionItemProps } from \"./menu-item\"\nexport { MenuGroup } from \"./menu-group\"\nexport type { MenuGroupProps } from \"./menu-group\"\nexport { MenuOptionGroup } from \"./menu-option-group\"\nexport type { MenuOptionGroupProps } from \"./menu-option-group\"\nexport { MenuDivider } from \"./menu-divider\"\nexport type { MenuDividerProps } from \"./menu-divider\"\n","/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see Docs https://yamada-ui.com/components/overlay/menu\n */\nimport type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport { Popover } from \"@yamada-ui/popover\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n createContext,\n useUnmountEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { Dispatch, FC, RefObject, SetStateAction } from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\n\nconst {\n DescendantsContextProvider,\n useDescendantsContext: useMenuDescendantsContext,\n useDescendants,\n useDescendant: useMenuDescendant,\n} = createDescendant<HTMLElement>()\n\nexport { useMenuDescendantsContext, useMenuDescendant }\n\ntype MenuContext = MenuOptions & {\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n menuRef: RefObject<HTMLDivElement>\n styles: Record<string, CSSUIObject>\n}\n\nconst [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\nexport { useMenu }\n\ntype MenuOptions = {\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n}\n\nexport type MenuProps = ThemeProps<\"Menu\"> &\n Omit<PopoverProps, \"closeOnButton\"> &\n MenuOptions\n\nexport const Menu: FC<MenuProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Menu\", props)\n const {\n initialFocusRef,\n closeOnSelect = true,\n placement = \"bottom-start\",\n duration = 0.2,\n ...rest\n } = omitThemeProps(mergedProps)\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\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 rest.onOpen?.()\n\n onFocusMenu()\n }, [onFocusMenu, rest])\n\n const { isOpen, onOpen, onClose } = useDisclosure({\n ...props,\n onOpen: onOpenInternal,\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 <MenuProvider\n value={{\n isOpen,\n onOpen,\n onClose,\n onFocusFirstItem,\n onFocusLastItem,\n closeOnSelect,\n focusedIndex,\n setFocusedIndex,\n menuRef,\n styles,\n }}\n >\n <Popover\n {...{\n ...rest,\n isOpen,\n onOpen,\n onClose,\n placement,\n duration,\n initialFocusRef,\n closeOnButton: false,\n }}\n />\n </MenuProvider>\n </DescendantsContextProvider>\n )\n}\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { PopoverTrigger } from \"@yamada-ui/popover\"\nimport { ariaAttr, cx, dataAttr, funcAll, handlerAll } from \"@yamada-ui/utils\"\nimport type { KeyboardEvent } from \"react\"\nimport { useCallback } from \"react\"\nimport { useMenu } from \"./menu\"\n\nexport type MenuButtonProps = HTMLUIProps<\"button\">\n\nexport const MenuButton = forwardRef<MenuButtonProps, \"button\">(\n ({ className, children, as: As, ...rest }, ref) => {\n const { isOpen, onOpen, onFocusFirstItem, onFocusLastItem } = useMenu()\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n const actions: Record<string, Function> = {\n Enter: funcAll(onOpen, onFocusFirstItem),\n ArrowDown: funcAll(onOpen, onFocusFirstItem),\n ArrowUp: funcAll(onOpen, onFocusLastItem),\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n ev.stopPropagation()\n action()\n },\n [onFocusFirstItem, onFocusLastItem, onOpen],\n )\n\n const Component = As || Button\n\n return (\n <PopoverTrigger>\n <Component\n ref={ref}\n className={cx(\"ui-menu\", className)}\n {...rest}\n data-active={dataAttr(isOpen)}\n aria-expanded={ariaAttr(isOpen)}\n onKeyDown={handlerAll(rest.onKeyDown, onKeyDown)}\n >\n <ui.span __css={{ pointerEvents: \"none\", flex: \"1 1 auto\", minW: 0 }}>\n {children}\n </ui.span>\n </Component>\n </PopoverTrigger>\n )\n },\n)\n\nconst Button = forwardRef<MenuButtonProps, \"button\">((rest, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n appearance: \"none\",\n alignItems: \"center\",\n outline: 0,\n ...styles.button,\n }\n\n return <ui.button ref={ref} __css={css} {...rest} />\n})\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { PopoverContent } from \"@yamada-ui/popover\"\nimport { cx, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport type { KeyboardEvent, KeyboardEventHandler } from \"react\"\nimport { useCallback } from \"react\"\nimport { useMenu, useMenuDescendantsContext } from \"./menu\"\n\nexport type MenuListProps = MotionProps<\"ul\">\n\nexport const MenuList = forwardRef<MenuListProps, \"ul\">(\n ({ className, ...rest }, ref) => {\n const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } =\n useMenu()\n\n const descendants = useMenuDescendantsContext()\n\n const onNext = useCallback(() => {\n const next = descendants.enabledNextValue(focusedIndex)\n\n if (next) setFocusedIndex(next.index)\n }, [descendants, focusedIndex, setFocusedIndex])\n\n const onPrev = useCallback(() => {\n const prev = descendants.enabledPrevValue(focusedIndex)\n\n if (prev) setFocusedIndex(prev.index)\n }, [descendants, focusedIndex, setFocusedIndex])\n\n const onFirst = useCallback(() => {\n const first = descendants.enabledFirstValue()\n\n if (first) setFocusedIndex(first.index)\n }, [descendants, setFocusedIndex])\n\n const onLast = useCallback(() => {\n const last = descendants.enabledLastValue()\n\n if (last) setFocusedIndex(last.index)\n }, [descendants, setFocusedIndex])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n const actions: Record<string, KeyboardEventHandler> = {\n Tab: (ev) => ev.preventDefault(),\n Escape: onClose,\n ArrowDown: focusedIndex === -1 ? onFirst : onNext,\n ArrowUp: focusedIndex === -1 ? onLast : onPrev,\n Home: onFirst,\n End: onLast,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n action(ev)\n },\n [focusedIndex, onClose, onFirst, onLast, onNext, onPrev],\n )\n\n const css: CSSUIObject = { ...styles.list }\n\n return (\n <PopoverContent\n as=\"ul\"\n ref={mergeRefs(menuRef, ref)}\n className={cx(\"ui-menu__list\", className)}\n role=\"menu\"\n tabIndex={-1}\n __css={css}\n {...rest}\n onKeyDown={handlerAll(rest.onKeyDown, onKeyDown)}\n />\n )\n },\n)\n","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 isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { FC, FocusEvent, MouseEvent, ReactElement } from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport { useMenu, useMenuDescendant } from \"./menu\"\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"menu-item\")\n )\n}\n\ntype MenuItemOptions = {\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * The menu item icon to use.\n */\n icon?: ReactElement\n /**\n * Right-aligned label text content, useful for displaying hotkeys.\n */\n command?: string\n}\n\nexport type MenuItemProps = HTMLUIProps<\"button\"> & MenuItemOptions\n\nexport const MenuItem = forwardRef<MenuItemProps, \"button\">(\n (\n {\n as,\n className,\n type,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n icon,\n command,\n children,\n ...props\n },\n ref,\n ) => {\n const {\n focusedIndex,\n setFocusedIndex,\n isOpen,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n menuRef,\n styles,\n } = useMenu()\n\n const trulyDisabled = isDisabled && !isFocusable\n\n const buttonRef = useRef<HTMLButtonElement>(null)\n const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLButtonElement>) => {\n props.onClick?.(ev)\n if (!isTargetMenuItem(ev.currentTarget)) return\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n },\n [props, customCloseOnSelect, generalCloseOnSelect, onClose],\n )\n\n const onFocus = useCallback(\n (ev: FocusEvent<HTMLButtonElement>) => {\n props.onFocus?.(ev)\n setFocusedIndex(index)\n },\n [props, setFocusedIndex, index],\n )\n\n const rest = useClickable({\n onClick,\n onFocus,\n ref: mergeRefs(register, buttonRef, ref),\n isDisabled,\n isFocusable,\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n if (isFocused && !trulyDisabled && buttonRef.current) {\n requestAnimationFrame(() => buttonRef.current?.focus())\n } else if (menuRef.current && !isActiveElement(menuRef.current)) {\n menuRef.current.focus()\n }\n }, [isFocused, trulyDisabled, menuRef, isOpen])\n\n type = as || type ? type ?? undefined : \"button\"\n\n children =\n icon || command ? (\n <ui.span style={{ pointerEvents: \"none\", 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 <ui.li\n {...props}\n {...rest}\n as={as}\n type={type}\n role=\"menu-item\"\n tabIndex={isFocused ? 0 : -1}\n className={cx(\"ui-menu__item\", className)}\n __css={css}\n >\n {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n {children}\n {command ? <MenuCommand>{command}</MenuCommand> : null}\n </ui.li>\n )\n },\n)\n\ntype MenuOptionItemOptions = {\n /**\n * The menu option item icon to use.\n */\n icon?: ReactElement | null\n /**\n * The value of the menu option item.\n */\n value?: string\n /**\n * If `true`, the checkbox or radio will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * The type of the menu option item.\n */\n type?: \"radio\" | \"checkbox\"\n}\n\nexport type MenuOptionItemProps = Omit<MenuItemProps, \"icon\" | \"command\"> &\n MenuOptionItemOptions\n\nexport const MenuOptionItem = forwardRef<MenuOptionItemProps, \"button\">(\n (\n { className, icon, isChecked, closeOnSelect = false, children, ...rest },\n ref,\n ) => {\n return (\n <MenuItem\n ref={ref}\n className={cx(\"ui-menu__item--option\", className)}\n aria-checked={ariaAttr(isChecked)}\n closeOnSelect={closeOnSelect}\n {...rest}\n >\n {icon !== null ? (\n <MenuIcon opacity={isChecked ? 1 : 0}>\n {icon || <CheckIcon />}\n </MenuIcon>\n ) : null}\n {children}\n </MenuItem>\n )\n },\n)\n\ntype MenuIconProps = HTMLUIProps<\"span\">\n\nconst 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\ntype MenuCommandProps = HTMLUIProps<\"span\">\n\nconst 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 { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMenu } from \"./menu\"\n\nexport type MenuGroupProps = HTMLUIProps<\"div\"> & {\n /**\n * The label of the group.\n */\n label?: string\n}\n\nexport const MenuGroup = forwardRef<MenuGroupProps, \"div\">(\n ({ className, label, children, ...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 >\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 { ComponentArgs, HTMLUIProps } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { cx, getValidChildren, omitObject, isArray } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, Ref } from \"react\"\nimport { cloneElement, forwardRef, useCallback } from \"react\"\nimport { MenuGroup } from \"./menu-group\"\nimport { MenuOptionItem } from \"./menu-item\"\n\ntype MenuOptionGroupOptions<Y extends string | string[] = string> = {\n /**\n * The label of the option group.\n */\n label?: string\n /**\n * The value of the menu item group.\n */\n value?: Y\n /**\n * The initial value of the menu item group.\n */\n defaultValue?: Y\n /**\n * The type of the menu option group.\n *\n * @default 'checkbox'\n */\n type?: \"radio\" | \"checkbox\"\n /**\n * The callback fired when any children checkbox is checked or unchecked.\n */\n onChange?: (value: Y) => void\n}\n\nexport type MenuOptionGroupProps<Y extends string | string[] = string> = Omit<\n HTMLUIProps<\"div\">,\n keyof MenuOptionGroupOptions\n> &\n MenuOptionGroupOptions<Y>\n\nexport const MenuOptionGroup = forwardRef(\n <Y extends string | string[] = string>(\n {\n className,\n defaultValue,\n type,\n children,\n ...rest\n }: MenuOptionGroupProps<Y>,\n ref: ForwardedRef<HTMLDivElement>,\n ) => {\n const isRadio = type === \"radio\"\n\n defaultValue ??= (isRadio ? \"\" : []) as Y\n\n const [value, setValue] = useControllableState({\n ...rest,\n defaultValue,\n })\n\n const onChange = useCallback(\n (selectedValue: string) => {\n if (isRadio && typeof value === \"string\") setValue(selectedValue as Y)\n\n if (!isRadio && isArray(value)) {\n const nextValue = value.includes(selectedValue)\n ? value.filter((item) => item !== selectedValue)\n : value.concat(selectedValue)\n\n setValue(nextValue as Y)\n }\n },\n [isRadio, value, setValue],\n )\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type !== MenuOptionItem) return child\n\n const onClick = (ev: MouseEvent) => {\n onChange(child.props.value)\n child.props.onClick?.(ev)\n }\n\n const isChecked =\n !isRadio && isArray(value)\n ? value.includes(child.props.value)\n : child.props.value === value\n\n return cloneElement(child, { type, onClick, isChecked })\n })\n\n return (\n <MenuGroup\n ref={ref}\n className={cx(\"ui-menu__item--group--option\", className)}\n {...omitObject(rest, [\"value\", \"onChange\"])}\n >\n {cloneChildren}\n </MenuGroup>\n )\n },\n) as {\n <Y extends string | string[] = string>(\n props: MenuOptionGroupProps<Y> & { ref?: Ref<HTMLDivElement> },\n ): JSX.Element\n} & ComponentArgs\n\nMenuOptionGroup.displayName = \"MenuOptionGroup\"\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMenu } from \"./menu\"\n\nexport type MenuDividerProps = HTMLUIProps<\"hr\">\n\nexport const MenuDivider = forwardRef(({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.divider }\n\n return (\n <ui.hr\n ref={ref}\n className={cx(\"ui-menu__divider\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n"],"mappings":"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","names":["import_core","import_popover","import_utils","import_react","import_jsx_runtime","import_core","import_popover","import_utils","import_react","import_jsx_runtime","ev","import_core","import_utils","import_react","import_jsx_runtime","import_core","import_utils","import_jsx_runtime","import_utils","import_react","import_jsx_runtime","import_core","import_utils","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/menu.tsx","../src/menu-button.tsx","../src/menu-list.tsx","../src/menu-item.tsx","../src/menu-group.tsx","../src/menu-option-group.tsx","../src/menu-divider.tsx"],"sourcesContent":["export { Menu } from \"./menu\"\nexport type { MenuProps } from \"./menu\"\nexport { MenuButton } from \"./menu-button\"\nexport type { MenuButtonProps } from \"./menu-button\"\nexport { MenuList } from \"./menu-list\"\nexport type { MenuListProps } from \"./menu-list\"\nexport { MenuItem, MenuOptionItem } from \"./menu-item\"\nexport type { MenuItemProps, MenuOptionItemProps } from \"./menu-item\"\nexport { MenuGroup } from \"./menu-group\"\nexport type { MenuGroupProps } from \"./menu-group\"\nexport { MenuOptionGroup } from \"./menu-option-group\"\nexport type { MenuOptionGroupProps } from \"./menu-option-group\"\nexport { MenuDivider } from \"./menu-divider\"\nexport type { MenuDividerProps } from \"./menu-divider\"\n","/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see Docs https://yamada-ui.com/components/overlay/menu\n */\nimport type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport { Popover } from \"@yamada-ui/popover\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n createContext,\n useUnmountEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { Dispatch, FC, RefObject, SetStateAction } from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\n\nconst {\n DescendantsContextProvider,\n useDescendantsContext: useMenuDescendantsContext,\n useDescendants,\n useDescendant: useMenuDescendant,\n} = createDescendant<HTMLElement>()\n\nexport { useMenuDescendantsContext, useMenuDescendant }\n\ntype MenuContext = MenuOptions & {\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n menuRef: RefObject<HTMLDivElement>\n styles: Record<string, CSSUIObject>\n}\n\nconst [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\nexport { useMenu }\n\ntype MenuOptions = {\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n}\n\nexport type MenuProps = ThemeProps<\"Menu\"> &\n Omit<PopoverProps, \"closeOnButton\"> &\n MenuOptions\n\nexport const Menu: FC<MenuProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Menu\", props)\n const {\n initialFocusRef,\n closeOnSelect = true,\n placement = \"bottom-start\",\n duration = 0.2,\n ...rest\n } = omitThemeProps(mergedProps)\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\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 rest.onOpen?.()\n\n onFocusMenu()\n }, [onFocusMenu, rest])\n\n const { isOpen, onOpen, onClose } = useDisclosure({\n ...props,\n onOpen: onOpenInternal,\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 <MenuProvider\n value={{\n isOpen,\n onOpen,\n onClose,\n onFocusFirstItem,\n onFocusLastItem,\n closeOnSelect,\n focusedIndex,\n setFocusedIndex,\n menuRef,\n styles,\n }}\n >\n <Popover\n {...{\n ...rest,\n isOpen,\n onOpen,\n onClose,\n placement,\n duration,\n initialFocusRef,\n closeOnButton: false,\n }}\n />\n </MenuProvider>\n </DescendantsContextProvider>\n )\n}\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { PopoverTrigger } from \"@yamada-ui/popover\"\nimport { ariaAttr, cx, dataAttr, funcAll, handlerAll } from \"@yamada-ui/utils\"\nimport type { KeyboardEvent } from \"react\"\nimport { useCallback } from \"react\"\nimport { useMenu } from \"./menu\"\n\nexport type MenuButtonProps = HTMLUIProps<\"button\">\n\nexport const MenuButton = forwardRef<MenuButtonProps, \"button\">(\n ({ className, children, as: As, ...rest }, ref) => {\n const { isOpen, onOpen, onFocusFirstItem, onFocusLastItem } = useMenu()\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n const actions: Record<string, Function> = {\n Enter: funcAll(onOpen, onFocusFirstItem),\n ArrowDown: funcAll(onOpen, onFocusFirstItem),\n ArrowUp: funcAll(onOpen, onFocusLastItem),\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n ev.stopPropagation()\n action()\n },\n [onFocusFirstItem, onFocusLastItem, onOpen],\n )\n\n const Component = As || Button\n\n return (\n <PopoverTrigger>\n <Component\n ref={ref}\n className={cx(\"ui-menu\", className)}\n {...rest}\n data-active={dataAttr(isOpen)}\n aria-expanded={ariaAttr(isOpen)}\n onKeyDown={handlerAll(rest.onKeyDown, onKeyDown)}\n >\n <ui.span __css={{ pointerEvents: \"none\", flex: \"1 1 auto\", minW: 0 }}>\n {children}\n </ui.span>\n </Component>\n </PopoverTrigger>\n )\n },\n)\n\nconst Button = forwardRef<MenuButtonProps, \"button\">((rest, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = {\n display: \"inline-flex\",\n appearance: \"none\",\n alignItems: \"center\",\n outline: 0,\n ...styles.button,\n }\n\n return <ui.button ref={ref} __css={css} {...rest} />\n})\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { PopoverContent } from \"@yamada-ui/popover\"\nimport { cx, handlerAll, mergeRefs } from \"@yamada-ui/utils\"\nimport type { KeyboardEvent, KeyboardEventHandler } from \"react\"\nimport { useCallback } from \"react\"\nimport { useMenu, useMenuDescendantsContext } from \"./menu\"\n\nexport type MenuListProps = MotionProps<\"ul\">\n\nexport const MenuList = forwardRef<MenuListProps, \"ul\">(\n ({ className, ...rest }, ref) => {\n const { menuRef, focusedIndex, setFocusedIndex, onClose, styles } =\n useMenu()\n\n const descendants = useMenuDescendantsContext()\n\n const onNext = useCallback(() => {\n const next = descendants.enabledNextValue(focusedIndex)\n\n if (next) setFocusedIndex(next.index)\n }, [descendants, focusedIndex, setFocusedIndex])\n\n const onPrev = useCallback(() => {\n const prev = descendants.enabledPrevValue(focusedIndex)\n\n if (prev) setFocusedIndex(prev.index)\n }, [descendants, focusedIndex, setFocusedIndex])\n\n const onFirst = useCallback(() => {\n const first = descendants.enabledFirstValue()\n\n if (first) setFocusedIndex(first.index)\n }, [descendants, setFocusedIndex])\n\n const onLast = useCallback(() => {\n const last = descendants.enabledLastValue()\n\n if (last) setFocusedIndex(last.index)\n }, [descendants, setFocusedIndex])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n const actions: Record<string, KeyboardEventHandler> = {\n Tab: (ev) => ev.preventDefault(),\n Escape: onClose,\n ArrowDown: focusedIndex === -1 ? onFirst : onNext,\n ArrowUp: focusedIndex === -1 ? onLast : onPrev,\n Home: onFirst,\n End: onLast,\n }\n\n const action = actions[ev.key]\n\n if (!action) return\n\n ev.preventDefault()\n action(ev)\n },\n [focusedIndex, onClose, onFirst, onLast, onNext, onPrev],\n )\n\n const css: CSSUIObject = { ...styles.list }\n\n return (\n <PopoverContent\n as=\"ul\"\n ref={mergeRefs(menuRef, ref)}\n className={cx(\"ui-menu__list\", className)}\n role=\"menu\"\n tabIndex={-1}\n __css={css}\n {...rest}\n onKeyDown={handlerAll(rest.onKeyDown, onKeyDown)}\n />\n )\n },\n)\n","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 isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { FC, FocusEvent, MouseEvent, ReactElement } from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport { useMenu, useMenuDescendant } from \"./menu\"\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"menu-item\")\n )\n}\n\ntype MenuItemOptions = {\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * The menu item icon to use.\n */\n icon?: ReactElement\n /**\n * Right-aligned label text content, useful for displaying hotkeys.\n */\n command?: string\n}\n\nexport type MenuItemProps = HTMLUIProps<\"button\"> & MenuItemOptions\n\nexport const MenuItem = forwardRef<MenuItemProps, \"button\">(\n (\n {\n as,\n className,\n type,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n icon,\n command,\n children,\n onClick: onClickProp,\n onFocus: onFocusProp,\n ...props\n },\n ref,\n ) => {\n const {\n focusedIndex,\n setFocusedIndex,\n isOpen,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n menuRef,\n styles,\n } = useMenu()\n\n const trulyDisabled = isDisabled && !isFocusable\n\n const buttonRef = useRef<HTMLButtonElement>(null)\n const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLButtonElement>) => {\n onClickProp?.(ev)\n\n if (!isTargetMenuItem(ev.currentTarget)) return\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n },\n [onClickProp, customCloseOnSelect, generalCloseOnSelect, onClose],\n )\n\n const onFocus = useCallback(\n (ev: FocusEvent<HTMLButtonElement>) => {\n onFocusProp?.(ev)\n\n setFocusedIndex(index)\n },\n [onFocusProp, setFocusedIndex, index],\n )\n\n const rest = useClickable<HTMLButtonElement>({\n ...props,\n onClick,\n onFocus,\n ref: mergeRefs(register, buttonRef, ref),\n isDisabled,\n isFocusable,\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n if (isFocused && !trulyDisabled && buttonRef.current) {\n requestAnimationFrame(() => buttonRef.current?.focus())\n } else if (menuRef.current && !isActiveElement(menuRef.current)) {\n menuRef.current.focus()\n }\n }, [isFocused, trulyDisabled, menuRef, isOpen])\n\n type = as || type ? type ?? undefined : \"button\"\n\n children =\n icon || command ? (\n <ui.span style={{ flex: 1 }}>{children}</ui.span>\n ) : (\n children\n )\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n ...styles.item,\n }\n\n return (\n <ui.li\n {...rest}\n as={as}\n type={type}\n role=\"menu-item\"\n tabIndex={isFocused ? 0 : -1}\n className={cx(\"ui-menu__item\", className)}\n __css={css}\n >\n {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n {children}\n {command ? <MenuCommand>{command}</MenuCommand> : null}\n </ui.li>\n )\n },\n)\n\ntype MenuOptionItemOptions = {\n /**\n * The menu option item icon to use.\n */\n icon?: ReactElement | null\n /**\n * The value of the menu option item.\n */\n value?: string\n /**\n * If `true`, the checkbox or radio will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * The type of the menu option item.\n */\n type?: \"radio\" | \"checkbox\"\n}\n\nexport type MenuOptionItemProps = Omit<MenuItemProps, \"icon\" | \"command\"> &\n MenuOptionItemOptions\n\nexport const MenuOptionItem = forwardRef<MenuOptionItemProps, \"button\">(\n (\n { className, icon, isChecked, closeOnSelect = false, children, ...rest },\n ref,\n ) => {\n return (\n <MenuItem\n ref={ref}\n className={cx(\"ui-menu__item--option\", className)}\n aria-checked={ariaAttr(isChecked)}\n closeOnSelect={closeOnSelect}\n {...rest}\n >\n {icon !== null ? (\n <MenuIcon opacity={isChecked ? 1 : 0}>\n {icon || <CheckIcon />}\n </MenuIcon>\n ) : null}\n {children}\n </MenuItem>\n )\n },\n)\n\ntype MenuIconProps = HTMLUIProps<\"span\">\n\nconst 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\ntype MenuCommandProps = HTMLUIProps<\"span\">\n\nconst 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 { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMenu } from \"./menu\"\n\nexport type MenuGroupProps = HTMLUIProps<\"div\"> & {\n /**\n * The label of the group.\n */\n label?: string\n}\n\nexport const MenuGroup = forwardRef<MenuGroupProps, \"div\">(\n ({ className, label, children, ...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 >\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 { ComponentArgs, HTMLUIProps } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { cx, getValidChildren, omitObject, isArray } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, Ref } from \"react\"\nimport { cloneElement, forwardRef, useCallback } from \"react\"\nimport { MenuGroup } from \"./menu-group\"\nimport { MenuOptionItem } from \"./menu-item\"\n\ntype MenuOptionGroupOptions<Y extends string | string[] = string> = {\n /**\n * The label of the option group.\n */\n label?: string\n /**\n * The value of the menu item group.\n */\n value?: Y\n /**\n * The initial value of the menu item group.\n */\n defaultValue?: Y\n /**\n * The type of the menu option group.\n *\n * @default 'checkbox'\n */\n type?: \"radio\" | \"checkbox\"\n /**\n * The callback fired when any children checkbox is checked or unchecked.\n */\n onChange?: (value: Y) => void\n}\n\nexport type MenuOptionGroupProps<Y extends string | string[] = string> = Omit<\n HTMLUIProps<\"div\">,\n keyof MenuOptionGroupOptions\n> &\n MenuOptionGroupOptions<Y>\n\nexport const MenuOptionGroup = forwardRef(\n <Y extends string | string[] = string>(\n {\n className,\n defaultValue,\n type,\n children,\n ...rest\n }: MenuOptionGroupProps<Y>,\n ref: ForwardedRef<HTMLDivElement>,\n ) => {\n const isRadio = type === \"radio\"\n\n defaultValue ??= (isRadio ? \"\" : []) as Y\n\n const [value, setValue] = useControllableState({\n ...rest,\n defaultValue,\n })\n\n const onChange = useCallback(\n (selectedValue: string) => {\n if (isRadio && typeof value === \"string\") setValue(selectedValue as Y)\n\n if (!isRadio && isArray(value)) {\n const nextValue = value.includes(selectedValue)\n ? value.filter((item) => item !== selectedValue)\n : value.concat(selectedValue)\n\n setValue(nextValue as Y)\n }\n },\n [isRadio, value, setValue],\n )\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type !== MenuOptionItem) return child\n\n const onClick = (ev: MouseEvent) => {\n onChange(child.props.value)\n child.props.onClick?.(ev)\n }\n\n const isChecked =\n !isRadio && isArray(value)\n ? value.includes(child.props.value)\n : child.props.value === value\n\n return cloneElement(child, { type, onClick, isChecked })\n })\n\n return (\n <MenuGroup\n ref={ref}\n className={cx(\"ui-menu__item--group--option\", className)}\n {...omitObject(rest, [\"value\", \"onChange\"])}\n >\n {cloneChildren}\n </MenuGroup>\n )\n },\n) as {\n <Y extends string | string[] = string>(\n props: MenuOptionGroupProps<Y> & { ref?: Ref<HTMLDivElement> },\n ): JSX.Element\n} & ComponentArgs\n\nMenuOptionGroup.displayName = \"MenuOptionGroup\"\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMenu } from \"./menu\"\n\nexport type MenuDividerProps = HTMLUIProps<\"hr\">\n\nexport const MenuDivider = forwardRef(({ className, ...rest }, ref) => {\n const { styles } = useMenu()\n\n const css: CSSUIObject = { ...styles.divider }\n\n return (\n <ui.hr\n ref={ref}\n className={cx(\"ui-menu__divider\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n"],"mappings":"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","names":["import_core","import_popover","import_utils","import_react","import_jsx_runtime","import_core","import_popover","import_utils","import_react","import_jsx_runtime","ev","import_core","import_utils","import_react","import_jsx_runtime","import_core","import_utils","import_jsx_runtime","import_utils","import_react","import_jsx_runtime","import_core","import_utils","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
|
@@ -10,14 +10,14 @@ import {
|
|
|
10
10
|
} from "./chunk-D6AU4S44.mjs";
|
|
11
11
|
import {
|
|
12
12
|
MenuOptionGroup
|
|
13
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-6OASXRNF.mjs";
|
|
14
14
|
import {
|
|
15
15
|
MenuGroup
|
|
16
16
|
} from "./chunk-3I42NCZV.mjs";
|
|
17
17
|
import {
|
|
18
18
|
MenuItem,
|
|
19
19
|
MenuOptionItem
|
|
20
|
-
} from "./chunk-
|
|
20
|
+
} from "./chunk-SP4GE4RO.mjs";
|
|
21
21
|
import {
|
|
22
22
|
Menu
|
|
23
23
|
} from "./chunk-TWAYMPIS.mjs";
|
package/dist/menu-item.js
CHANGED
|
@@ -66,6 +66,8 @@ var MenuItem = (0, import_core2.forwardRef)(
|
|
|
66
66
|
icon,
|
|
67
67
|
command,
|
|
68
68
|
children,
|
|
69
|
+
onClick: onClickProp,
|
|
70
|
+
onFocus: onFocusProp,
|
|
69
71
|
...props
|
|
70
72
|
}, ref) => {
|
|
71
73
|
const {
|
|
@@ -83,24 +85,23 @@ var MenuItem = (0, import_core2.forwardRef)(
|
|
|
83
85
|
const isFocused = index === focusedIndex;
|
|
84
86
|
const onClick = (0, import_react2.useCallback)(
|
|
85
87
|
(ev) => {
|
|
86
|
-
|
|
87
|
-
(_a = props.onClick) == null ? void 0 : _a.call(props, ev);
|
|
88
|
+
onClickProp == null ? void 0 : onClickProp(ev);
|
|
88
89
|
if (!isTargetMenuItem(ev.currentTarget))
|
|
89
90
|
return;
|
|
90
91
|
if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect)
|
|
91
92
|
onClose();
|
|
92
93
|
},
|
|
93
|
-
[
|
|
94
|
+
[onClickProp, customCloseOnSelect, generalCloseOnSelect, onClose]
|
|
94
95
|
);
|
|
95
96
|
const onFocus = (0, import_react2.useCallback)(
|
|
96
97
|
(ev) => {
|
|
97
|
-
|
|
98
|
-
(_a = props.onFocus) == null ? void 0 : _a.call(props, ev);
|
|
98
|
+
onFocusProp == null ? void 0 : onFocusProp(ev);
|
|
99
99
|
setFocusedIndex(index);
|
|
100
100
|
},
|
|
101
|
-
[
|
|
101
|
+
[onFocusProp, setFocusedIndex, index]
|
|
102
102
|
);
|
|
103
103
|
const rest = (0, import_use_clickable.useClickable)({
|
|
104
|
+
...props,
|
|
104
105
|
onClick,
|
|
105
106
|
onFocus,
|
|
106
107
|
ref: (0, import_utils2.mergeRefs)(register, buttonRef, ref),
|
|
@@ -120,7 +121,7 @@ var MenuItem = (0, import_core2.forwardRef)(
|
|
|
120
121
|
}
|
|
121
122
|
}, [isFocused, trulyDisabled, menuRef, isOpen]);
|
|
122
123
|
type = as || type ? type != null ? type : void 0 : "button";
|
|
123
|
-
children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: {
|
|
124
|
+
children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { flex: 1 }, children }) : children;
|
|
124
125
|
const css = {
|
|
125
126
|
textDecoration: "none",
|
|
126
127
|
color: "inherit",
|
|
@@ -137,7 +138,6 @@ var MenuItem = (0, import_core2.forwardRef)(
|
|
|
137
138
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
138
139
|
import_core2.ui.li,
|
|
139
140
|
{
|
|
140
|
-
...props,
|
|
141
141
|
...rest,
|
|
142
142
|
as,
|
|
143
143
|
type,
|
package/dist/menu-item.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/menu-item.tsx","../src/menu.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport {\n ariaAttr,\n cx,\n isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { FC, FocusEvent, MouseEvent, ReactElement } from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport { useMenu, useMenuDescendant } from \"./menu\"\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"menu-item\")\n )\n}\n\ntype MenuItemOptions = {\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * The menu item icon to use.\n */\n icon?: ReactElement\n /**\n * Right-aligned label text content, useful for displaying hotkeys.\n */\n command?: string\n}\n\nexport type MenuItemProps = HTMLUIProps<\"button\"> & MenuItemOptions\n\nexport const MenuItem = forwardRef<MenuItemProps, \"button\">(\n (\n {\n as,\n className,\n type,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n icon,\n command,\n children,\n ...props\n },\n ref,\n ) => {\n const {\n focusedIndex,\n setFocusedIndex,\n isOpen,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n menuRef,\n styles,\n } = useMenu()\n\n const trulyDisabled = isDisabled && !isFocusable\n\n const buttonRef = useRef<HTMLButtonElement>(null)\n const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLButtonElement>) => {\n props.onClick?.(ev)\n if (!isTargetMenuItem(ev.currentTarget)) return\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n },\n [props, customCloseOnSelect, generalCloseOnSelect, onClose],\n )\n\n const onFocus = useCallback(\n (ev: FocusEvent<HTMLButtonElement>) => {\n props.onFocus?.(ev)\n setFocusedIndex(index)\n },\n [props, setFocusedIndex, index],\n )\n\n const rest = useClickable({\n onClick,\n onFocus,\n ref: mergeRefs(register, buttonRef, ref),\n isDisabled,\n isFocusable,\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n if (isFocused && !trulyDisabled && buttonRef.current) {\n requestAnimationFrame(() => buttonRef.current?.focus())\n } else if (menuRef.current && !isActiveElement(menuRef.current)) {\n menuRef.current.focus()\n }\n }, [isFocused, trulyDisabled, menuRef, isOpen])\n\n type = as || type ? type ?? undefined : \"button\"\n\n children =\n icon || command ? (\n <ui.span style={{ pointerEvents: \"none\", 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 <ui.li\n {...props}\n {...rest}\n as={as}\n type={type}\n role=\"menu-item\"\n tabIndex={isFocused ? 0 : -1}\n className={cx(\"ui-menu__item\", className)}\n __css={css}\n >\n {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n {children}\n {command ? <MenuCommand>{command}</MenuCommand> : null}\n </ui.li>\n )\n },\n)\n\ntype MenuOptionItemOptions = {\n /**\n * The menu option item icon to use.\n */\n icon?: ReactElement | null\n /**\n * The value of the menu option item.\n */\n value?: string\n /**\n * If `true`, the checkbox or radio will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * The type of the menu option item.\n */\n type?: \"radio\" | \"checkbox\"\n}\n\nexport type MenuOptionItemProps = Omit<MenuItemProps, \"icon\" | \"command\"> &\n MenuOptionItemOptions\n\nexport const MenuOptionItem = forwardRef<MenuOptionItemProps, \"button\">(\n (\n { className, icon, isChecked, closeOnSelect = false, children, ...rest },\n ref,\n ) => {\n return (\n <MenuItem\n ref={ref}\n className={cx(\"ui-menu__item--option\", className)}\n aria-checked={ariaAttr(isChecked)}\n closeOnSelect={closeOnSelect}\n {...rest}\n >\n {icon !== null ? (\n <MenuIcon opacity={isChecked ? 1 : 0}>\n {icon || <CheckIcon />}\n </MenuIcon>\n ) : null}\n {children}\n </MenuItem>\n )\n },\n)\n\ntype MenuIconProps = HTMLUIProps<\"span\">\n\nconst 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\ntype MenuCommandProps = HTMLUIProps<\"span\">\n\nconst 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","/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see Docs https://yamada-ui.com/components/overlay/menu\n */\nimport type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport { Popover } from \"@yamada-ui/popover\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n createContext,\n useUnmountEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { Dispatch, FC, RefObject, SetStateAction } from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\n\nconst {\n DescendantsContextProvider,\n useDescendantsContext: useMenuDescendantsContext,\n useDescendants,\n useDescendant: useMenuDescendant,\n} = createDescendant<HTMLElement>()\n\nexport { useMenuDescendantsContext, useMenuDescendant }\n\ntype MenuContext = MenuOptions & {\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n menuRef: RefObject<HTMLDivElement>\n styles: Record<string, CSSUIObject>\n}\n\nconst [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\nexport { useMenu }\n\ntype MenuOptions = {\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n}\n\nexport type MenuProps = ThemeProps<\"Menu\"> &\n Omit<PopoverProps, \"closeOnButton\"> &\n MenuOptions\n\nexport const Menu: FC<MenuProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Menu\", props)\n const {\n initialFocusRef,\n closeOnSelect = true,\n placement = \"bottom-start\",\n duration = 0.2,\n ...rest\n } = omitThemeProps(mergedProps)\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\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 rest.onOpen?.()\n\n onFocusMenu()\n }, [onFocusMenu, rest])\n\n const { isOpen, onOpen, onClose } = useDisclosure({\n ...props,\n onOpen: onOpenInternal,\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 <MenuProvider\n value={{\n isOpen,\n onOpen,\n onClose,\n onFocusFirstItem,\n onFocusLastItem,\n closeOnSelect,\n focusedIndex,\n setFocusedIndex,\n menuRef,\n styles,\n }}\n >\n <Popover\n {...{\n ...rest,\n isOpen,\n onOpen,\n onClose,\n placement,\n duration,\n initialFocusRef,\n closeOnButton: false,\n }}\n />\n </MenuProvider>\n </DescendantsContextProvider>\n )\n}\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../src/menu-item.tsx","../src/menu.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport {\n ariaAttr,\n cx,\n isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { FC, FocusEvent, MouseEvent, ReactElement } from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport { useMenu, useMenuDescendant } from \"./menu\"\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"menu-item\")\n )\n}\n\ntype MenuItemOptions = {\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * The menu item icon to use.\n */\n icon?: ReactElement\n /**\n * Right-aligned label text content, useful for displaying hotkeys.\n */\n command?: string\n}\n\nexport type MenuItemProps = HTMLUIProps<\"button\"> & MenuItemOptions\n\nexport const MenuItem = forwardRef<MenuItemProps, \"button\">(\n (\n {\n as,\n className,\n type,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n icon,\n command,\n children,\n onClick: onClickProp,\n onFocus: onFocusProp,\n ...props\n },\n ref,\n ) => {\n const {\n focusedIndex,\n setFocusedIndex,\n isOpen,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n menuRef,\n styles,\n } = useMenu()\n\n const trulyDisabled = isDisabled && !isFocusable\n\n const buttonRef = useRef<HTMLButtonElement>(null)\n const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLButtonElement>) => {\n onClickProp?.(ev)\n\n if (!isTargetMenuItem(ev.currentTarget)) return\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n },\n [onClickProp, customCloseOnSelect, generalCloseOnSelect, onClose],\n )\n\n const onFocus = useCallback(\n (ev: FocusEvent<HTMLButtonElement>) => {\n onFocusProp?.(ev)\n\n setFocusedIndex(index)\n },\n [onFocusProp, setFocusedIndex, index],\n )\n\n const rest = useClickable<HTMLButtonElement>({\n ...props,\n onClick,\n onFocus,\n ref: mergeRefs(register, buttonRef, ref),\n isDisabled,\n isFocusable,\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n if (isFocused && !trulyDisabled && buttonRef.current) {\n requestAnimationFrame(() => buttonRef.current?.focus())\n } else if (menuRef.current && !isActiveElement(menuRef.current)) {\n menuRef.current.focus()\n }\n }, [isFocused, trulyDisabled, menuRef, isOpen])\n\n type = as || type ? type ?? undefined : \"button\"\n\n children =\n icon || command ? (\n <ui.span style={{ flex: 1 }}>{children}</ui.span>\n ) : (\n children\n )\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n ...styles.item,\n }\n\n return (\n <ui.li\n {...rest}\n as={as}\n type={type}\n role=\"menu-item\"\n tabIndex={isFocused ? 0 : -1}\n className={cx(\"ui-menu__item\", className)}\n __css={css}\n >\n {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n {children}\n {command ? <MenuCommand>{command}</MenuCommand> : null}\n </ui.li>\n )\n },\n)\n\ntype MenuOptionItemOptions = {\n /**\n * The menu option item icon to use.\n */\n icon?: ReactElement | null\n /**\n * The value of the menu option item.\n */\n value?: string\n /**\n * If `true`, the checkbox or radio will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * The type of the menu option item.\n */\n type?: \"radio\" | \"checkbox\"\n}\n\nexport type MenuOptionItemProps = Omit<MenuItemProps, \"icon\" | \"command\"> &\n MenuOptionItemOptions\n\nexport const MenuOptionItem = forwardRef<MenuOptionItemProps, \"button\">(\n (\n { className, icon, isChecked, closeOnSelect = false, children, ...rest },\n ref,\n ) => {\n return (\n <MenuItem\n ref={ref}\n className={cx(\"ui-menu__item--option\", className)}\n aria-checked={ariaAttr(isChecked)}\n closeOnSelect={closeOnSelect}\n {...rest}\n >\n {icon !== null ? (\n <MenuIcon opacity={isChecked ? 1 : 0}>\n {icon || <CheckIcon />}\n </MenuIcon>\n ) : null}\n {children}\n </MenuItem>\n )\n },\n)\n\ntype MenuIconProps = HTMLUIProps<\"span\">\n\nconst 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\ntype MenuCommandProps = HTMLUIProps<\"span\">\n\nconst 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","/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see Docs https://yamada-ui.com/components/overlay/menu\n */\nimport type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport { Popover } from \"@yamada-ui/popover\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n createContext,\n useUnmountEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { Dispatch, FC, RefObject, SetStateAction } from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\n\nconst {\n DescendantsContextProvider,\n useDescendantsContext: useMenuDescendantsContext,\n useDescendants,\n useDescendant: useMenuDescendant,\n} = createDescendant<HTMLElement>()\n\nexport { useMenuDescendantsContext, useMenuDescendant }\n\ntype MenuContext = MenuOptions & {\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n menuRef: RefObject<HTMLDivElement>\n styles: Record<string, CSSUIObject>\n}\n\nconst [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\nexport { useMenu }\n\ntype MenuOptions = {\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n}\n\nexport type MenuProps = ThemeProps<\"Menu\"> &\n Omit<PopoverProps, \"closeOnButton\"> &\n MenuOptions\n\nexport const Menu: FC<MenuProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Menu\", props)\n const {\n initialFocusRef,\n closeOnSelect = true,\n placement = \"bottom-start\",\n duration = 0.2,\n ...rest\n } = omitThemeProps(mergedProps)\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\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 rest.onOpen?.()\n\n onFocusMenu()\n }, [onFocusMenu, rest])\n\n const { isOpen, onOpen, onClose } = useDisclosure({\n ...props,\n onOpen: onOpenInternal,\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 <MenuProvider\n value={{\n isOpen,\n onOpen,\n onClose,\n onFocusFirstItem,\n onFocusLastItem,\n closeOnSelect,\n focusedIndex,\n setFocusedIndex,\n menuRef,\n styles,\n }}\n >\n <Popover\n {...{\n ...rest,\n isOpen,\n onOpen,\n onClose,\n placement,\n duration,\n initialFocusRef,\n closeOnButton: false,\n }}\n />\n </MenuProvider>\n </DescendantsContextProvider>\n )\n}\n"],"mappings":"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","names":["import_core","import_utils","import_react","import_jsx_runtime"]}
|
package/dist/menu-item.mjs
CHANGED
|
@@ -102,6 +102,8 @@ var MenuItem = (0, import_core3.forwardRef)(
|
|
|
102
102
|
icon,
|
|
103
103
|
command,
|
|
104
104
|
children,
|
|
105
|
+
onClick: onClickProp,
|
|
106
|
+
onFocus: onFocusProp,
|
|
105
107
|
...props
|
|
106
108
|
}, ref) => {
|
|
107
109
|
const {
|
|
@@ -119,24 +121,23 @@ var MenuItem = (0, import_core3.forwardRef)(
|
|
|
119
121
|
const isFocused = index === focusedIndex;
|
|
120
122
|
const onClick = (0, import_react2.useCallback)(
|
|
121
123
|
(ev) => {
|
|
122
|
-
|
|
123
|
-
(_a = props.onClick) == null ? void 0 : _a.call(props, ev);
|
|
124
|
+
onClickProp == null ? void 0 : onClickProp(ev);
|
|
124
125
|
if (!isTargetMenuItem(ev.currentTarget))
|
|
125
126
|
return;
|
|
126
127
|
if (customCloseOnSelect != null ? customCloseOnSelect : generalCloseOnSelect)
|
|
127
128
|
onClose();
|
|
128
129
|
},
|
|
129
|
-
[
|
|
130
|
+
[onClickProp, customCloseOnSelect, generalCloseOnSelect, onClose]
|
|
130
131
|
);
|
|
131
132
|
const onFocus = (0, import_react2.useCallback)(
|
|
132
133
|
(ev) => {
|
|
133
|
-
|
|
134
|
-
(_a = props.onFocus) == null ? void 0 : _a.call(props, ev);
|
|
134
|
+
onFocusProp == null ? void 0 : onFocusProp(ev);
|
|
135
135
|
setFocusedIndex(index);
|
|
136
136
|
},
|
|
137
|
-
[
|
|
137
|
+
[onFocusProp, setFocusedIndex, index]
|
|
138
138
|
);
|
|
139
139
|
const rest = (0, import_use_clickable.useClickable)({
|
|
140
|
+
...props,
|
|
140
141
|
onClick,
|
|
141
142
|
onFocus,
|
|
142
143
|
ref: (0, import_utils3.mergeRefs)(register, buttonRef, ref),
|
|
@@ -156,7 +157,7 @@ var MenuItem = (0, import_core3.forwardRef)(
|
|
|
156
157
|
}
|
|
157
158
|
}, [isFocused, trulyDisabled, menuRef, isOpen]);
|
|
158
159
|
type = as || type ? type != null ? type : void 0 : "button";
|
|
159
|
-
children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { style: {
|
|
160
|
+
children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { style: { flex: 1 }, children }) : children;
|
|
160
161
|
const css = {
|
|
161
162
|
textDecoration: "none",
|
|
162
163
|
color: "inherit",
|
|
@@ -173,7 +174,6 @@ var MenuItem = (0, import_core3.forwardRef)(
|
|
|
173
174
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
174
175
|
import_core3.ui.li,
|
|
175
176
|
{
|
|
176
|
-
...props,
|
|
177
177
|
...rest,
|
|
178
178
|
as,
|
|
179
179
|
type,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/menu-option-group.tsx","../src/menu-group.tsx","../src/menu.tsx","../src/menu-item.tsx"],"sourcesContent":["import type { ComponentArgs, HTMLUIProps } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { cx, getValidChildren, omitObject, isArray } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, Ref } from \"react\"\nimport { cloneElement, forwardRef, useCallback } from \"react\"\nimport { MenuGroup } from \"./menu-group\"\nimport { MenuOptionItem } from \"./menu-item\"\n\ntype MenuOptionGroupOptions<Y extends string | string[] = string> = {\n /**\n * The label of the option group.\n */\n label?: string\n /**\n * The value of the menu item group.\n */\n value?: Y\n /**\n * The initial value of the menu item group.\n */\n defaultValue?: Y\n /**\n * The type of the menu option group.\n *\n * @default 'checkbox'\n */\n type?: \"radio\" | \"checkbox\"\n /**\n * The callback fired when any children checkbox is checked or unchecked.\n */\n onChange?: (value: Y) => void\n}\n\nexport type MenuOptionGroupProps<Y extends string | string[] = string> = Omit<\n HTMLUIProps<\"div\">,\n keyof MenuOptionGroupOptions\n> &\n MenuOptionGroupOptions<Y>\n\nexport const MenuOptionGroup = forwardRef(\n <Y extends string | string[] = string>(\n {\n className,\n defaultValue,\n type,\n children,\n ...rest\n }: MenuOptionGroupProps<Y>,\n ref: ForwardedRef<HTMLDivElement>,\n ) => {\n const isRadio = type === \"radio\"\n\n defaultValue ??= (isRadio ? \"\" : []) as Y\n\n const [value, setValue] = useControllableState({\n ...rest,\n defaultValue,\n })\n\n const onChange = useCallback(\n (selectedValue: string) => {\n if (isRadio && typeof value === \"string\") setValue(selectedValue as Y)\n\n if (!isRadio && isArray(value)) {\n const nextValue = value.includes(selectedValue)\n ? value.filter((item) => item !== selectedValue)\n : value.concat(selectedValue)\n\n setValue(nextValue as Y)\n }\n },\n [isRadio, value, setValue],\n )\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type !== MenuOptionItem) return child\n\n const onClick = (ev: MouseEvent) => {\n onChange(child.props.value)\n child.props.onClick?.(ev)\n }\n\n const isChecked =\n !isRadio && isArray(value)\n ? value.includes(child.props.value)\n : child.props.value === value\n\n return cloneElement(child, { type, onClick, isChecked })\n })\n\n return (\n <MenuGroup\n ref={ref}\n className={cx(\"ui-menu__item--group--option\", className)}\n {...omitObject(rest, [\"value\", \"onChange\"])}\n >\n {cloneChildren}\n </MenuGroup>\n )\n },\n) as {\n <Y extends string | string[] = string>(\n props: MenuOptionGroupProps<Y> & { ref?: Ref<HTMLDivElement> },\n ): JSX.Element\n} & ComponentArgs\n\nMenuOptionGroup.displayName = \"MenuOptionGroup\"\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMenu } from \"./menu\"\n\nexport type MenuGroupProps = HTMLUIProps<\"div\"> & {\n /**\n * The label of the group.\n */\n label?: string\n}\n\nexport const MenuGroup = forwardRef<MenuGroupProps, \"div\">(\n ({ className, label, children, ...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 >\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","/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see Docs https://yamada-ui.com/components/overlay/menu\n */\nimport type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport { Popover } from \"@yamada-ui/popover\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n createContext,\n useUnmountEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { Dispatch, FC, RefObject, SetStateAction } from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\n\nconst {\n DescendantsContextProvider,\n useDescendantsContext: useMenuDescendantsContext,\n useDescendants,\n useDescendant: useMenuDescendant,\n} = createDescendant<HTMLElement>()\n\nexport { useMenuDescendantsContext, useMenuDescendant }\n\ntype MenuContext = MenuOptions & {\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n menuRef: RefObject<HTMLDivElement>\n styles: Record<string, CSSUIObject>\n}\n\nconst [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\nexport { useMenu }\n\ntype MenuOptions = {\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n}\n\nexport type MenuProps = ThemeProps<\"Menu\"> &\n Omit<PopoverProps, \"closeOnButton\"> &\n MenuOptions\n\nexport const Menu: FC<MenuProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Menu\", props)\n const {\n initialFocusRef,\n closeOnSelect = true,\n placement = \"bottom-start\",\n duration = 0.2,\n ...rest\n } = omitThemeProps(mergedProps)\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\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 rest.onOpen?.()\n\n onFocusMenu()\n }, [onFocusMenu, rest])\n\n const { isOpen, onOpen, onClose } = useDisclosure({\n ...props,\n onOpen: onOpenInternal,\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 <MenuProvider\n value={{\n isOpen,\n onOpen,\n onClose,\n onFocusFirstItem,\n onFocusLastItem,\n closeOnSelect,\n focusedIndex,\n setFocusedIndex,\n menuRef,\n styles,\n }}\n >\n <Popover\n {...{\n ...rest,\n isOpen,\n onOpen,\n onClose,\n placement,\n duration,\n initialFocusRef,\n closeOnButton: false,\n }}\n />\n </MenuProvider>\n </DescendantsContextProvider>\n )\n}\n","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 isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { FC, FocusEvent, MouseEvent, ReactElement } from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport { useMenu, useMenuDescendant } from \"./menu\"\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"menu-item\")\n )\n}\n\ntype MenuItemOptions = {\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * The menu item icon to use.\n */\n icon?: ReactElement\n /**\n * Right-aligned label text content, useful for displaying hotkeys.\n */\n command?: string\n}\n\nexport type MenuItemProps = HTMLUIProps<\"button\"> & MenuItemOptions\n\nexport const MenuItem = forwardRef<MenuItemProps, \"button\">(\n (\n {\n as,\n className,\n type,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n icon,\n command,\n children,\n ...props\n },\n ref,\n ) => {\n const {\n focusedIndex,\n setFocusedIndex,\n isOpen,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n menuRef,\n styles,\n } = useMenu()\n\n const trulyDisabled = isDisabled && !isFocusable\n\n const buttonRef = useRef<HTMLButtonElement>(null)\n const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLButtonElement>) => {\n props.onClick?.(ev)\n if (!isTargetMenuItem(ev.currentTarget)) return\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n },\n [props, customCloseOnSelect, generalCloseOnSelect, onClose],\n )\n\n const onFocus = useCallback(\n (ev: FocusEvent<HTMLButtonElement>) => {\n props.onFocus?.(ev)\n setFocusedIndex(index)\n },\n [props, setFocusedIndex, index],\n )\n\n const rest = useClickable({\n onClick,\n onFocus,\n ref: mergeRefs(register, buttonRef, ref),\n isDisabled,\n isFocusable,\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n if (isFocused && !trulyDisabled && buttonRef.current) {\n requestAnimationFrame(() => buttonRef.current?.focus())\n } else if (menuRef.current && !isActiveElement(menuRef.current)) {\n menuRef.current.focus()\n }\n }, [isFocused, trulyDisabled, menuRef, isOpen])\n\n type = as || type ? type ?? undefined : \"button\"\n\n children =\n icon || command ? (\n <ui.span style={{ pointerEvents: \"none\", 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 <ui.li\n {...props}\n {...rest}\n as={as}\n type={type}\n role=\"menu-item\"\n tabIndex={isFocused ? 0 : -1}\n className={cx(\"ui-menu__item\", className)}\n __css={css}\n >\n {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n {children}\n {command ? <MenuCommand>{command}</MenuCommand> : null}\n </ui.li>\n )\n },\n)\n\ntype MenuOptionItemOptions = {\n /**\n * The menu option item icon to use.\n */\n icon?: ReactElement | null\n /**\n * The value of the menu option item.\n */\n value?: string\n /**\n * If `true`, the checkbox or radio will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * The type of the menu option item.\n */\n type?: \"radio\" | \"checkbox\"\n}\n\nexport type MenuOptionItemProps = Omit<MenuItemProps, \"icon\" | \"command\"> &\n MenuOptionItemOptions\n\nexport const MenuOptionItem = forwardRef<MenuOptionItemProps, \"button\">(\n (\n { className, icon, isChecked, closeOnSelect = false, children, ...rest },\n ref,\n ) => {\n return (\n <MenuItem\n ref={ref}\n className={cx(\"ui-menu__item--option\", className)}\n aria-checked={ariaAttr(isChecked)}\n closeOnSelect={closeOnSelect}\n {...rest}\n >\n {icon !== null ? (\n <MenuIcon opacity={isChecked ? 1 : 0}>\n {icon || <CheckIcon />}\n </MenuIcon>\n ) : null}\n {children}\n </MenuItem>\n )\n },\n)\n\ntype MenuIconProps = HTMLUIProps<\"span\">\n\nconst 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\ntype MenuCommandProps = HTMLUIProps<\"span\">\n\nconst 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"],"mappings":"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","names":["import_utils","import_react","import_core","import_utils","import_jsx_runtime","import_core","import_utils","import_react","import_jsx_runtime","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../src/menu-option-group.tsx","../src/menu-group.tsx","../src/menu.tsx","../src/menu-item.tsx"],"sourcesContent":["import type { ComponentArgs, HTMLUIProps } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { cx, getValidChildren, omitObject, isArray } from \"@yamada-ui/utils\"\nimport type { ForwardedRef, Ref } from \"react\"\nimport { cloneElement, forwardRef, useCallback } from \"react\"\nimport { MenuGroup } from \"./menu-group\"\nimport { MenuOptionItem } from \"./menu-item\"\n\ntype MenuOptionGroupOptions<Y extends string | string[] = string> = {\n /**\n * The label of the option group.\n */\n label?: string\n /**\n * The value of the menu item group.\n */\n value?: Y\n /**\n * The initial value of the menu item group.\n */\n defaultValue?: Y\n /**\n * The type of the menu option group.\n *\n * @default 'checkbox'\n */\n type?: \"radio\" | \"checkbox\"\n /**\n * The callback fired when any children checkbox is checked or unchecked.\n */\n onChange?: (value: Y) => void\n}\n\nexport type MenuOptionGroupProps<Y extends string | string[] = string> = Omit<\n HTMLUIProps<\"div\">,\n keyof MenuOptionGroupOptions\n> &\n MenuOptionGroupOptions<Y>\n\nexport const MenuOptionGroup = forwardRef(\n <Y extends string | string[] = string>(\n {\n className,\n defaultValue,\n type,\n children,\n ...rest\n }: MenuOptionGroupProps<Y>,\n ref: ForwardedRef<HTMLDivElement>,\n ) => {\n const isRadio = type === \"radio\"\n\n defaultValue ??= (isRadio ? \"\" : []) as Y\n\n const [value, setValue] = useControllableState({\n ...rest,\n defaultValue,\n })\n\n const onChange = useCallback(\n (selectedValue: string) => {\n if (isRadio && typeof value === \"string\") setValue(selectedValue as Y)\n\n if (!isRadio && isArray(value)) {\n const nextValue = value.includes(selectedValue)\n ? value.filter((item) => item !== selectedValue)\n : value.concat(selectedValue)\n\n setValue(nextValue as Y)\n }\n },\n [isRadio, value, setValue],\n )\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) => {\n if (child.type !== MenuOptionItem) return child\n\n const onClick = (ev: MouseEvent) => {\n onChange(child.props.value)\n child.props.onClick?.(ev)\n }\n\n const isChecked =\n !isRadio && isArray(value)\n ? value.includes(child.props.value)\n : child.props.value === value\n\n return cloneElement(child, { type, onClick, isChecked })\n })\n\n return (\n <MenuGroup\n ref={ref}\n className={cx(\"ui-menu__item--group--option\", className)}\n {...omitObject(rest, [\"value\", \"onChange\"])}\n >\n {cloneChildren}\n </MenuGroup>\n )\n },\n) as {\n <Y extends string | string[] = string>(\n props: MenuOptionGroupProps<Y> & { ref?: Ref<HTMLDivElement> },\n ): JSX.Element\n} & ComponentArgs\n\nMenuOptionGroup.displayName = \"MenuOptionGroup\"\n","import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMenu } from \"./menu\"\n\nexport type MenuGroupProps = HTMLUIProps<\"div\"> & {\n /**\n * The label of the group.\n */\n label?: string\n}\n\nexport const MenuGroup = forwardRef<MenuGroupProps, \"div\">(\n ({ className, label, children, ...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 >\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","/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see Docs https://yamada-ui.com/components/overlay/menu\n */\nimport type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport { Popover } from \"@yamada-ui/popover\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n createContext,\n useUnmountEffect,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { Dispatch, FC, RefObject, SetStateAction } from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\n\nconst {\n DescendantsContextProvider,\n useDescendantsContext: useMenuDescendantsContext,\n useDescendants,\n useDescendant: useMenuDescendant,\n} = createDescendant<HTMLElement>()\n\nexport { useMenuDescendantsContext, useMenuDescendant }\n\ntype MenuContext = MenuOptions & {\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n menuRef: RefObject<HTMLDivElement>\n styles: Record<string, CSSUIObject>\n}\n\nconst [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\nexport { useMenu }\n\ntype MenuOptions = {\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n}\n\nexport type MenuProps = ThemeProps<\"Menu\"> &\n Omit<PopoverProps, \"closeOnButton\"> &\n MenuOptions\n\nexport const Menu: FC<MenuProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Menu\", props)\n const {\n initialFocusRef,\n closeOnSelect = true,\n placement = \"bottom-start\",\n duration = 0.2,\n ...rest\n } = omitThemeProps(mergedProps)\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\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 rest.onOpen?.()\n\n onFocusMenu()\n }, [onFocusMenu, rest])\n\n const { isOpen, onOpen, onClose } = useDisclosure({\n ...props,\n onOpen: onOpenInternal,\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 <MenuProvider\n value={{\n isOpen,\n onOpen,\n onClose,\n onFocusFirstItem,\n onFocusLastItem,\n closeOnSelect,\n focusedIndex,\n setFocusedIndex,\n menuRef,\n styles,\n }}\n >\n <Popover\n {...{\n ...rest,\n isOpen,\n onOpen,\n onClose,\n placement,\n duration,\n initialFocusRef,\n closeOnButton: false,\n }}\n />\n </MenuProvider>\n </DescendantsContextProvider>\n )\n}\n","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 isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { FC, FocusEvent, MouseEvent, ReactElement } from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport { useMenu, useMenuDescendant } from \"./menu\"\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"menu-item\")\n )\n}\n\ntype MenuItemOptions = {\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * The menu item icon to use.\n */\n icon?: ReactElement\n /**\n * Right-aligned label text content, useful for displaying hotkeys.\n */\n command?: string\n}\n\nexport type MenuItemProps = HTMLUIProps<\"button\"> & MenuItemOptions\n\nexport const MenuItem = forwardRef<MenuItemProps, \"button\">(\n (\n {\n as,\n className,\n type,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n icon,\n command,\n children,\n onClick: onClickProp,\n onFocus: onFocusProp,\n ...props\n },\n ref,\n ) => {\n const {\n focusedIndex,\n setFocusedIndex,\n isOpen,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n menuRef,\n styles,\n } = useMenu()\n\n const trulyDisabled = isDisabled && !isFocusable\n\n const buttonRef = useRef<HTMLButtonElement>(null)\n const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLButtonElement>) => {\n onClickProp?.(ev)\n\n if (!isTargetMenuItem(ev.currentTarget)) return\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n },\n [onClickProp, customCloseOnSelect, generalCloseOnSelect, onClose],\n )\n\n const onFocus = useCallback(\n (ev: FocusEvent<HTMLButtonElement>) => {\n onFocusProp?.(ev)\n\n setFocusedIndex(index)\n },\n [onFocusProp, setFocusedIndex, index],\n )\n\n const rest = useClickable<HTMLButtonElement>({\n ...props,\n onClick,\n onFocus,\n ref: mergeRefs(register, buttonRef, ref),\n isDisabled,\n isFocusable,\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n if (isFocused && !trulyDisabled && buttonRef.current) {\n requestAnimationFrame(() => buttonRef.current?.focus())\n } else if (menuRef.current && !isActiveElement(menuRef.current)) {\n menuRef.current.focus()\n }\n }, [isFocused, trulyDisabled, menuRef, isOpen])\n\n type = as || type ? type ?? undefined : \"button\"\n\n children =\n icon || command ? (\n <ui.span style={{ flex: 1 }}>{children}</ui.span>\n ) : (\n children\n )\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n ...styles.item,\n }\n\n return (\n <ui.li\n {...rest}\n as={as}\n type={type}\n role=\"menu-item\"\n tabIndex={isFocused ? 0 : -1}\n className={cx(\"ui-menu__item\", className)}\n __css={css}\n >\n {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n {children}\n {command ? <MenuCommand>{command}</MenuCommand> : null}\n </ui.li>\n )\n },\n)\n\ntype MenuOptionItemOptions = {\n /**\n * The menu option item icon to use.\n */\n icon?: ReactElement | null\n /**\n * The value of the menu option item.\n */\n value?: string\n /**\n * If `true`, the checkbox or radio will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * The type of the menu option item.\n */\n type?: \"radio\" | \"checkbox\"\n}\n\nexport type MenuOptionItemProps = Omit<MenuItemProps, \"icon\" | \"command\"> &\n MenuOptionItemOptions\n\nexport const MenuOptionItem = forwardRef<MenuOptionItemProps, \"button\">(\n (\n { className, icon, isChecked, closeOnSelect = false, children, ...rest },\n ref,\n ) => {\n return (\n <MenuItem\n ref={ref}\n className={cx(\"ui-menu__item--option\", className)}\n aria-checked={ariaAttr(isChecked)}\n closeOnSelect={closeOnSelect}\n {...rest}\n >\n {icon !== null ? (\n <MenuIcon opacity={isChecked ? 1 : 0}>\n {icon || <CheckIcon />}\n </MenuIcon>\n ) : null}\n {children}\n </MenuItem>\n )\n },\n)\n\ntype MenuIconProps = HTMLUIProps<\"span\">\n\nconst 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\ntype MenuCommandProps = HTMLUIProps<\"span\">\n\nconst 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"],"mappings":"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","names":["import_utils","import_react","import_core","import_utils","import_jsx_runtime","import_core","import_utils","import_react","import_jsx_runtime","import_jsx_runtime"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
MenuOptionGroup
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-6OASXRNF.mjs";
|
|
5
5
|
import "./chunk-3I42NCZV.mjs";
|
|
6
|
-
import "./chunk-
|
|
6
|
+
import "./chunk-SP4GE4RO.mjs";
|
|
7
7
|
import "./chunk-TWAYMPIS.mjs";
|
|
8
8
|
export {
|
|
9
9
|
MenuOptionGroup
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/menu",
|
|
3
|
-
"version": "1.0.23-dev-
|
|
3
|
+
"version": "1.0.23-dev-20240414192209",
|
|
4
4
|
"description": "Yamada UI menu component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -39,12 +39,12 @@
|
|
|
39
39
|
"@yamada-ui/core": "1.6.3",
|
|
40
40
|
"@yamada-ui/utils": "1.1.2",
|
|
41
41
|
"@yamada-ui/popover": "1.0.22",
|
|
42
|
+
"@yamada-ui/motion": "1.0.22",
|
|
42
43
|
"@yamada-ui/transitions": "1.0.22",
|
|
43
44
|
"@yamada-ui/use-disclosure": "1.0.11",
|
|
44
|
-
"@yamada-ui/motion": "1.0.22",
|
|
45
45
|
"@yamada-ui/use-descendant": "1.0.11",
|
|
46
|
-
"@yamada-ui/use-
|
|
47
|
-
"@yamada-ui/use-
|
|
46
|
+
"@yamada-ui/use-clickable": "1.1.0-dev-20240414192209",
|
|
47
|
+
"@yamada-ui/use-controllable-state": "1.0.11"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"react": "^18.0.0",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/menu-item.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport {\n ariaAttr,\n cx,\n isActiveElement,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { FC, FocusEvent, MouseEvent, ReactElement } from \"react\"\nimport { useCallback, useRef } from \"react\"\nimport { useMenu, useMenuDescendant } from \"./menu\"\n\nconst isTargetMenuItem = (target: EventTarget | null) => {\n return (\n isHTMLElement(target) &&\n !!target?.getAttribute(\"role\")?.startsWith(\"menu-item\")\n )\n}\n\ntype MenuItemOptions = {\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the menu item will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * The menu item icon to use.\n */\n icon?: ReactElement\n /**\n * Right-aligned label text content, useful for displaying hotkeys.\n */\n command?: string\n}\n\nexport type MenuItemProps = HTMLUIProps<\"button\"> & MenuItemOptions\n\nexport const MenuItem = forwardRef<MenuItemProps, \"button\">(\n (\n {\n as,\n className,\n type,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n icon,\n command,\n children,\n ...props\n },\n ref,\n ) => {\n const {\n focusedIndex,\n setFocusedIndex,\n isOpen,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n menuRef,\n styles,\n } = useMenu()\n\n const trulyDisabled = isDisabled && !isFocusable\n\n const buttonRef = useRef<HTMLButtonElement>(null)\n const { index, register } = useMenuDescendant({ disabled: trulyDisabled })\n\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLButtonElement>) => {\n props.onClick?.(ev)\n if (!isTargetMenuItem(ev.currentTarget)) return\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n },\n [props, customCloseOnSelect, generalCloseOnSelect, onClose],\n )\n\n const onFocus = useCallback(\n (ev: FocusEvent<HTMLButtonElement>) => {\n props.onFocus?.(ev)\n setFocusedIndex(index)\n },\n [props, setFocusedIndex, index],\n )\n\n const rest = useClickable({\n onClick,\n onFocus,\n ref: mergeRefs(register, buttonRef, ref),\n isDisabled,\n isFocusable,\n })\n\n useUpdateEffect(() => {\n if (!isOpen) return\n\n if (isFocused && !trulyDisabled && buttonRef.current) {\n requestAnimationFrame(() => buttonRef.current?.focus())\n } else if (menuRef.current && !isActiveElement(menuRef.current)) {\n menuRef.current.focus()\n }\n }, [isFocused, trulyDisabled, menuRef, isOpen])\n\n type = as || type ? type ?? undefined : \"button\"\n\n children =\n icon || command ? (\n <ui.span style={{ pointerEvents: \"none\", 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 <ui.li\n {...props}\n {...rest}\n as={as}\n type={type}\n role=\"menu-item\"\n tabIndex={isFocused ? 0 : -1}\n className={cx(\"ui-menu__item\", className)}\n __css={css}\n >\n {icon ? <MenuIcon>{icon}</MenuIcon> : null}\n {children}\n {command ? <MenuCommand>{command}</MenuCommand> : null}\n </ui.li>\n )\n },\n)\n\ntype MenuOptionItemOptions = {\n /**\n * The menu option item icon to use.\n */\n icon?: ReactElement | null\n /**\n * The value of the menu option item.\n */\n value?: string\n /**\n * If `true`, the checkbox or radio will be checked.\n *\n * @default false\n */\n isChecked?: boolean\n /**\n * The type of the menu option item.\n */\n type?: \"radio\" | \"checkbox\"\n}\n\nexport type MenuOptionItemProps = Omit<MenuItemProps, \"icon\" | \"command\"> &\n MenuOptionItemOptions\n\nexport const MenuOptionItem = forwardRef<MenuOptionItemProps, \"button\">(\n (\n { className, icon, isChecked, closeOnSelect = false, children, ...rest },\n ref,\n ) => {\n return (\n <MenuItem\n ref={ref}\n className={cx(\"ui-menu__item--option\", className)}\n aria-checked={ariaAttr(isChecked)}\n closeOnSelect={closeOnSelect}\n {...rest}\n >\n {icon !== null ? (\n <MenuIcon opacity={isChecked ? 1 : 0}>\n {icon || <CheckIcon />}\n </MenuIcon>\n ) : null}\n {children}\n </MenuItem>\n )\n },\n)\n\ntype MenuIconProps = HTMLUIProps<\"span\">\n\nconst 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\ntype MenuCommandProps = HTMLUIProps<\"span\">\n\nconst 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"],"mappings":"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","names":[]}
|
|
File without changes
|