@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.
@@ -4,7 +4,7 @@ import {
4
4
  } from "./chunk-3I42NCZV.mjs";
5
5
  import {
6
6
  MenuOptionItem
7
- } from "./chunk-RQSDNMYK.mjs";
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-NMZBDE4G.mjs.map
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
- var _a;
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
- [props, customCloseOnSelect, generalCloseOnSelect, onClose]
60
+ [onClickProp, customCloseOnSelect, generalCloseOnSelect, onClose]
60
61
  );
61
62
  const onFocus = useCallback(
62
63
  (ev) => {
63
- var _a;
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
- [props, setFocusedIndex, index]
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: { pointerEvents: "none", flex: 1 }, children }) : children;
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-RQSDNMYK.mjs.map
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
- var _a;
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
- [props, customCloseOnSelect, generalCloseOnSelect, onClose]
308
+ [onClickProp, customCloseOnSelect, generalCloseOnSelect, onClose]
308
309
  );
309
310
  const onFocus = (0, import_react4.useCallback)(
310
311
  (ev) => {
311
- var _a;
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
- [props, setFocusedIndex, index]
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: { pointerEvents: "none", flex: 1 }, children }) : children;
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-NMZBDE4G.mjs";
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-RQSDNMYK.mjs";
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
- var _a;
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
- [props, customCloseOnSelect, generalCloseOnSelect, onClose]
94
+ [onClickProp, customCloseOnSelect, generalCloseOnSelect, onClose]
94
95
  );
95
96
  const onFocus = (0, import_react2.useCallback)(
96
97
  (ev) => {
97
- var _a;
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
- [props, setFocusedIndex, index]
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: { pointerEvents: "none", flex: 1 }, children }) : children;
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,
@@ -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"]}
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  MenuItem,
4
4
  MenuOptionItem
5
- } from "./chunk-RQSDNMYK.mjs";
5
+ } from "./chunk-SP4GE4RO.mjs";
6
6
  import "./chunk-TWAYMPIS.mjs";
7
7
  export {
8
8
  MenuItem,
@@ -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
- var _a;
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
- [props, customCloseOnSelect, generalCloseOnSelect, onClose]
130
+ [onClickProp, customCloseOnSelect, generalCloseOnSelect, onClose]
130
131
  );
131
132
  const onFocus = (0, import_react2.useCallback)(
132
133
  (ev) => {
133
- var _a;
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
- [props, setFocusedIndex, index]
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: { pointerEvents: "none", flex: 1 }, children }) : children;
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-NMZBDE4G.mjs";
4
+ } from "./chunk-6OASXRNF.mjs";
5
5
  import "./chunk-3I42NCZV.mjs";
6
- import "./chunk-RQSDNMYK.mjs";
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-20240414110235",
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-controllable-state": "1.0.11",
47
- "@yamada-ui/use-clickable": "1.0.11"
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":[]}