@yamada-ui/menu 1.5.2-dev-20241213204523 → 1.5.2-dev-20241213213653
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-6HK6THLX.mjs → chunk-6PJHU6VG.mjs} +2 -2
- package/dist/{chunk-SWY6VV4V.mjs → chunk-AGHG37SL.mjs} +2 -2
- package/dist/{chunk-72J22E3I.mjs → chunk-DAEXVQLG.mjs} +10 -10
- package/dist/chunk-DAEXVQLG.mjs.map +1 -0
- package/dist/{chunk-KGWPKJI2.mjs → chunk-H662AKOV.mjs} +3 -3
- package/dist/{chunk-3YBMMWDY.mjs → chunk-HWUNOGPF.mjs} +2 -2
- package/dist/{chunk-HAW3H5KJ.mjs → chunk-IWH3B4PS.mjs} +1 -1
- package/dist/chunk-IWH3B4PS.mjs.map +1 -0
- package/dist/{chunk-VPMWBZWN.mjs → chunk-JQCTT4C2.mjs} +11 -11
- package/dist/chunk-JQCTT4C2.mjs.map +1 -0
- package/dist/{chunk-OP45KQJ6.mjs → chunk-JTGSHZXB.mjs} +15 -15
- package/dist/chunk-JTGSHZXB.mjs.map +1 -0
- package/dist/{chunk-X5YYJEDZ.mjs → chunk-TFGPDF5W.mjs} +36 -23
- package/dist/chunk-TFGPDF5W.mjs.map +1 -0
- package/dist/{chunk-XZJXCEI7.mjs → chunk-VDTE5ERA.mjs} +2 -2
- package/dist/{chunk-4MJ2ZBIB.mjs → chunk-ZG5BKE24.mjs} +2 -2
- package/dist/context-menu-trigger.js.map +1 -1
- package/dist/context-menu-trigger.mjs +2 -2
- package/dist/context-menu.js +13 -13
- package/dist/context-menu.js.map +1 -1
- package/dist/context-menu.mjs +3 -3
- package/dist/index.js +61 -48
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +11 -11
- package/dist/menu-button.js +41 -28
- package/dist/menu-button.js.map +1 -1
- package/dist/menu-button.mjs +3 -3
- package/dist/menu-context.d.mts +2 -2
- package/dist/menu-context.d.ts +2 -2
- package/dist/menu-context.js.map +1 -1
- package/dist/menu-context.mjs +1 -1
- package/dist/menu-divider.js.map +1 -1
- package/dist/menu-divider.mjs +2 -2
- package/dist/menu-group.js.map +1 -1
- package/dist/menu-group.mjs +2 -2
- package/dist/menu-item.d.mts +24 -0
- package/dist/menu-item.d.ts +24 -0
- package/dist/menu-item.js +34 -21
- package/dist/menu-item.js.map +1 -1
- package/dist/menu-item.mjs +2 -2
- package/dist/menu-list.js.map +1 -1
- package/dist/menu-list.mjs +2 -2
- package/dist/menu-option-group.js +41 -28
- package/dist/menu-option-group.js.map +1 -1
- package/dist/menu-option-group.mjs +4 -4
- package/dist/menu-separator.js.map +1 -1
- package/dist/menu-separator.mjs +2 -2
- package/dist/menu.js +13 -13
- package/dist/menu.js.map +1 -1
- package/dist/menu.mjs +2 -2
- package/package.json +11 -11
- package/dist/chunk-72J22E3I.mjs.map +0 -1
- package/dist/chunk-HAW3H5KJ.mjs.map +0 -1
- package/dist/chunk-OP45KQJ6.mjs.map +0 -1
- package/dist/chunk-VPMWBZWN.mjs.map +0 -1
- package/dist/chunk-X5YYJEDZ.mjs.map +0 -1
- /package/dist/{chunk-6HK6THLX.mjs.map → chunk-6PJHU6VG.mjs.map} +0 -0
- /package/dist/{chunk-SWY6VV4V.mjs.map → chunk-AGHG37SL.mjs.map} +0 -0
- /package/dist/{chunk-KGWPKJI2.mjs.map → chunk-H662AKOV.mjs.map} +0 -0
- /package/dist/{chunk-3YBMMWDY.mjs.map → chunk-HWUNOGPF.mjs.map} +0 -0
- /package/dist/{chunk-XZJXCEI7.mjs.map → chunk-VDTE5ERA.mjs.map} +0 -0
- /package/dist/{chunk-4MJ2ZBIB.mjs.map → chunk-ZG5BKE24.mjs.map} +0 -0
package/dist/context-menu.js
CHANGED
@@ -81,8 +81,8 @@ var Menu = (props) => {
|
|
81
81
|
} = (0, import_core.omitThemeProps)(mergedProps);
|
82
82
|
const { relatedRef, onDownstreamCloseMapRef, onUpstreamClose } = (_b = useUpstreamMenu()) != null ? _b : {};
|
83
83
|
const { hasDownstreamRef, setDownstreamOpen } = (_c = useUpstreamMenuItem()) != null ? _c : {};
|
84
|
-
const
|
85
|
-
if (
|
84
|
+
const nested = !!relatedRef;
|
85
|
+
if (nested) {
|
86
86
|
placement != null ? placement : placement = "right-start";
|
87
87
|
offset != null ? offset : offset = [-8, 8];
|
88
88
|
closeOnBlur != null ? closeOnBlur : closeOnBlur = false;
|
@@ -122,8 +122,8 @@ var Menu = (props) => {
|
|
122
122
|
}, [descendants, initialFocusRef]);
|
123
123
|
const onOpenInternal = (0, import_react.useCallback)(() => {
|
124
124
|
onOpenProp == null ? void 0 : onOpenProp();
|
125
|
-
if (!
|
126
|
-
}, [onOpenProp,
|
125
|
+
if (!nested) onFocusMenu();
|
126
|
+
}, [onOpenProp, nested, onFocusMenu]);
|
127
127
|
const onCloseInternal = (0, import_react.useCallback)(() => {
|
128
128
|
onCloseProp == null ? void 0 : onCloseProp();
|
129
129
|
for (const onClose2 of onCloseMapRef.current.values()) {
|
@@ -131,7 +131,7 @@ var Menu = (props) => {
|
|
131
131
|
}
|
132
132
|
}, [onCloseProp]);
|
133
133
|
const id = (0, import_react.useId)();
|
134
|
-
const {
|
134
|
+
const { open, onClose, onOpen } = (0, import_use_disclosure.useDisclosure)({
|
135
135
|
...props,
|
136
136
|
onClose: onCloseInternal,
|
137
137
|
onOpen: onOpenInternal
|
@@ -144,8 +144,8 @@ var Menu = (props) => {
|
|
144
144
|
};
|
145
145
|
}, [id, onClose, onDownstreamCloseMapRef]);
|
146
146
|
(0, import_react.useEffect)(() => {
|
147
|
-
if (setDownstreamOpen) setDownstreamOpen(
|
148
|
-
}, [setDownstreamOpen,
|
147
|
+
if (setDownstreamOpen) setDownstreamOpen(open);
|
148
|
+
}, [setDownstreamOpen, open]);
|
149
149
|
(0, import_react.useEffect)(() => {
|
150
150
|
if (hasDownstreamRef) hasDownstreamRef.current = true;
|
151
151
|
return () => {
|
@@ -153,8 +153,8 @@ var Menu = (props) => {
|
|
153
153
|
};
|
154
154
|
});
|
155
155
|
(0, import_utils2.useUpdateEffect)(() => {
|
156
|
-
if (!
|
157
|
-
}, [
|
156
|
+
if (!open) setFocusedIndex(-1);
|
157
|
+
}, [open]);
|
158
158
|
(0, import_utils2.useUnmountEffect)(() => {
|
159
159
|
timeoutIds.current.forEach((id2) => clearTimeout(id2));
|
160
160
|
timeoutIds.current.clear();
|
@@ -174,9 +174,9 @@ var Menu = (props) => {
|
|
174
174
|
buttonRef,
|
175
175
|
closeOnSelect,
|
176
176
|
focusedIndex,
|
177
|
-
isNested,
|
178
|
-
isOpen,
|
179
177
|
menuRef,
|
178
|
+
nested,
|
179
|
+
open,
|
180
180
|
requestAnimationFrameId,
|
181
181
|
setFocusedIndex,
|
182
182
|
styles,
|
@@ -190,14 +190,14 @@ var Menu = (props) => {
|
|
190
190
|
import_popover.Popover,
|
191
191
|
{
|
192
192
|
...{
|
193
|
-
trigger:
|
193
|
+
trigger: nested ? "hover" : "click",
|
194
194
|
...rest,
|
195
195
|
closeOnBlur,
|
196
196
|
closeOnButton: false,
|
197
197
|
duration,
|
198
198
|
initialFocusRef,
|
199
|
-
isOpen,
|
200
199
|
offset,
|
200
|
+
open,
|
201
201
|
placement,
|
202
202
|
relatedRef,
|
203
203
|
onClose,
|
package/dist/context-menu.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/context-menu.tsx","../src/menu.tsx","../src/menu-context.ts"],"sourcesContent":["import type { FC, ThemeProps } from \"@yamada-ui/core\"\nimport type { MenuProps } from \"./menu\"\nimport { omitThemeProps, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { Menu } from \"./menu\"\nimport { ContextMenuProvider } from \"./menu-context\"\n\nexport interface ContextMenuProps\n extends Omit<MenuProps, \"trigger\">,\n ThemeProps<\"ContextMenu\"> {}\n\n/**\n * `ContextMenu` is triggered by a right click and displays a menu at the pointer's position.\n *\n * @see Docs https://yamada-ui.com/components/overlay/context-menu\n */\nexport const ContextMenu: FC<ContextMenuProps> = (props) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"ContextMenu\", props)\n const { ...rest } = omitThemeProps(mergedProps)\n\n return (\n <ContextMenuProvider value={{ styles }}>\n <Menu trigger=\"contextmenu\" {...rest} />\n </ContextMenuProvider>\n )\n}\n\nContextMenu.__ui__ = \"ContextMenu\"\n","import type { FC, ThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport { omitThemeProps, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { Popover } from \"@yamada-ui/popover\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport { funcAll, useUnmountEffect, useUpdateEffect } from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport {\n DescendantsContextProvider,\n MenuProvider,\n UpstreamMenuProvider,\n useContextMenu,\n useDescendants,\n useUpstreamMenu,\n useUpstreamMenuItem,\n} from \"./menu-context\"\n\nexport interface MenuOptions {\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n}\n\nexport interface MenuProps\n extends ThemeProps<\"Menu\">,\n Omit<PopoverProps, \"closeOnButton\" | \"relatedRef\">,\n MenuOptions {}\n\n/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see Docs https://yamada-ui.com/components/overlay/menu\n */\nexport const Menu: FC<MenuProps> = (props) => {\n const { styles: contextMenuStyles } = useContextMenu() ?? {}\n const [styles, mergedProps] = useComponentMultiStyle(\"Menu\", props, {\n isProcessSkip: !!contextMenuStyles,\n styles: contextMenuStyles,\n })\n let {\n closeOnBlur,\n closeOnSelect = true,\n duration = 0.2,\n initialFocusRef,\n offset,\n placement,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const { relatedRef, onDownstreamCloseMapRef, onUpstreamClose } =\n useUpstreamMenu() ?? {}\n const { hasDownstreamRef, setDownstreamOpen } = useUpstreamMenuItem() ?? {}\n const isNested = !!relatedRef\n\n if (isNested) {\n placement ??= \"right-start\"\n offset ??= [-8, 8]\n closeOnBlur ??= false\n } else {\n placement ??= \"bottom-start\"\n }\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n const menuRef = useRef<HTMLDivElement>(null)\n const buttonRef = useRef<HTMLButtonElement>(null)\n const timeoutIds = useRef<Set<any>>(new Set([]))\n const requestAnimationFrameId = useRef<null | number>(null)\n const onCloseMapRef = useRef<Map<string, () => void>>(new Map())\n\n const onFocusMenu = useCallback(() => {\n requestAnimationFrame(() =>\n menuRef.current?.focus({ preventScroll: false }),\n )\n }, [])\n\n const onFocusFirstItem = useCallback(() => {\n const id = setTimeout(() => {\n if (initialFocusRef) return\n\n const first = descendants.enabledFirstValue()\n\n if (first) setFocusedIndex(first.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, initialFocusRef])\n\n const onFocusLastItem = useCallback(() => {\n const id = setTimeout(() => {\n if (initialFocusRef) return\n\n const last = descendants.enabledLastValue()\n\n if (last) setFocusedIndex(last.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, initialFocusRef])\n\n const onOpenInternal = useCallback(() => {\n onOpenProp?.()\n\n if (!isNested) onFocusMenu()\n }, [onOpenProp, isNested, onFocusMenu])\n\n const onCloseInternal = useCallback(() => {\n onCloseProp?.()\n\n for (const onClose of onCloseMapRef.current.values()) {\n onClose()\n }\n }, [onCloseProp])\n\n const id = useId()\n const { isOpen, onClose, onOpen } = useDisclosure({\n ...props,\n onClose: onCloseInternal,\n onOpen: onOpenInternal,\n })\n\n useEffect(() => {\n const onCloseMap = onDownstreamCloseMapRef?.current\n\n onCloseMap?.set(id, onClose)\n\n return () => {\n onCloseMap?.delete(id)\n }\n }, [id, onClose, onDownstreamCloseMapRef])\n\n useEffect(() => {\n if (setDownstreamOpen) setDownstreamOpen(isOpen)\n }, [setDownstreamOpen, isOpen])\n\n useEffect(() => {\n if (hasDownstreamRef) hasDownstreamRef.current = true\n\n return () => {\n if (hasDownstreamRef) hasDownstreamRef.current = false\n }\n })\n\n useUpdateEffect(() => {\n if (!isOpen) setFocusedIndex(-1)\n }, [isOpen])\n\n useUnmountEffect(() => {\n timeoutIds.current.forEach((id) => clearTimeout(id))\n timeoutIds.current.clear()\n })\n\n return (\n <DescendantsContextProvider value={descendants}>\n <UpstreamMenuProvider\n value={{\n relatedRef: menuRef,\n onDownstreamCloseMapRef: onCloseMapRef,\n onUpstreamClose: funcAll(onUpstreamClose, onClose),\n }}\n >\n <MenuProvider\n value={{\n buttonRef,\n closeOnSelect,\n focusedIndex,\n isNested,\n isOpen,\n menuRef,\n requestAnimationFrameId,\n setFocusedIndex,\n styles,\n onClose,\n onFocusFirstItem,\n onFocusLastItem,\n onOpen,\n onUpstreamClose,\n }}\n >\n <Popover\n {...{\n trigger: isNested ? \"hover\" : \"click\",\n ...rest,\n closeOnBlur,\n closeOnButton: false,\n duration,\n initialFocusRef,\n isOpen,\n offset,\n placement,\n relatedRef,\n onClose,\n onOpen,\n }}\n />\n </MenuProvider>\n </UpstreamMenuProvider>\n </DescendantsContextProvider>\n )\n}\n\nMenu.__ui__ = \"Menu\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type {\n Dispatch,\n KeyboardEventHandler,\n MutableRefObject,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport type { MenuOptions } from \"./menu\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\n\nexport const {\n DescendantsContextProvider,\n useDescendant: useMenuDescendant,\n useDescendants,\n useDescendantsContext: useMenuDescendantsContext,\n} = createDescendant()\n\ninterface MenuContext extends MenuOptions {\n buttonRef: RefObject<HTMLButtonElement>\n focusedIndex: number\n isNested: boolean\n isOpen: boolean\n menuRef: RefObject<HTMLDivElement>\n requestAnimationFrameId: MutableRefObject<null | number>\n setFocusedIndex: Dispatch<SetStateAction<number>>\n styles: { [key: string]: CSSUIObject | undefined }\n onClose: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n onOpen: () => void\n onUpstreamClose?: () => void\n}\n\nexport const [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\ninterface ContextMenuContext {\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ContextMenuProvider, useContextMenu] =\n createContext<ContextMenuContext>({\n name: \"ContextMenuContext\",\n strict: false,\n })\n\ninterface UpstreamMenuContext {\n relatedRef: RefObject<HTMLElement>\n onDownstreamCloseMapRef: MutableRefObject<Map<string, () => void>>\n onUpstreamClose: () => void\n}\n\nexport const [UpstreamMenuProvider, useUpstreamMenu] =\n createContext<UpstreamMenuContext>({\n name: \"UpstreamMenuContext\",\n strict: false,\n })\n\ninterface UpstreamMenuItemContext {\n hasDownstreamRef: MutableRefObject<boolean>\n setDownstreamOpen: Dispatch<SetStateAction<boolean>>\n onKeyDownRef: RefObject<KeyboardEventHandler<HTMLDivElement>>\n onUpstreamRestoreFocus: () => void\n}\n\nexport const [UpstreamMenuItemProvider, useUpstreamMenuItem] =\n createContext<UpstreamMenuItemContext>({\n name: \"UpstreamMenuItemContext\",\n strict: false,\n })\n"],"mappings":"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","names":["import_core","import_utils","_a","id","onClose","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/context-menu.tsx","../src/menu.tsx","../src/menu-context.ts"],"sourcesContent":["import type { FC, ThemeProps } from \"@yamada-ui/core\"\nimport type { MenuProps } from \"./menu\"\nimport { omitThemeProps, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { Menu } from \"./menu\"\nimport { ContextMenuProvider } from \"./menu-context\"\n\nexport interface ContextMenuProps\n extends Omit<MenuProps, \"trigger\">,\n ThemeProps<\"ContextMenu\"> {}\n\n/**\n * `ContextMenu` is triggered by a right click and displays a menu at the pointer's position.\n *\n * @see Docs https://yamada-ui.com/components/overlay/context-menu\n */\nexport const ContextMenu: FC<ContextMenuProps> = (props) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"ContextMenu\", props)\n const { ...rest } = omitThemeProps(mergedProps)\n\n return (\n <ContextMenuProvider value={{ styles }}>\n <Menu trigger=\"contextmenu\" {...rest} />\n </ContextMenuProvider>\n )\n}\n\nContextMenu.__ui__ = \"ContextMenu\"\n","import type { FC, ThemeProps } from \"@yamada-ui/core\"\nimport type { PopoverProps } from \"@yamada-ui/popover\"\nimport { omitThemeProps, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { Popover } from \"@yamada-ui/popover\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport { funcAll, useUnmountEffect, useUpdateEffect } from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport {\n DescendantsContextProvider,\n MenuProvider,\n UpstreamMenuProvider,\n useContextMenu,\n useDescendants,\n useUpstreamMenu,\n useUpstreamMenuItem,\n} from \"./menu-context\"\n\nexport interface MenuOptions {\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n}\n\nexport interface MenuProps\n extends ThemeProps<\"Menu\">,\n Omit<PopoverProps, \"closeOnButton\" | \"relatedRef\">,\n MenuOptions {}\n\n/**\n * `Menu` is a component that displays a common dropdown menu.\n *\n * @see Docs https://yamada-ui.com/components/overlay/menu\n */\nexport const Menu: FC<MenuProps> = (props) => {\n const { styles: contextMenuStyles } = useContextMenu() ?? {}\n const [styles, mergedProps] = useComponentMultiStyle(\"Menu\", props, {\n isProcessSkip: !!contextMenuStyles,\n styles: contextMenuStyles,\n })\n let {\n closeOnBlur,\n closeOnSelect = true,\n duration = 0.2,\n initialFocusRef,\n offset,\n placement,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n ...rest\n } = omitThemeProps(mergedProps)\n const { relatedRef, onDownstreamCloseMapRef, onUpstreamClose } =\n useUpstreamMenu() ?? {}\n const { hasDownstreamRef, setDownstreamOpen } = useUpstreamMenuItem() ?? {}\n const nested = !!relatedRef\n\n if (nested) {\n placement ??= \"right-start\"\n offset ??= [-8, 8]\n closeOnBlur ??= false\n } else {\n placement ??= \"bottom-start\"\n }\n\n const descendants = useDescendants()\n\n const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n const menuRef = useRef<HTMLDivElement>(null)\n const buttonRef = useRef<HTMLButtonElement>(null)\n const timeoutIds = useRef<Set<any>>(new Set([]))\n const requestAnimationFrameId = useRef<null | number>(null)\n const onCloseMapRef = useRef<Map<string, () => void>>(new Map())\n\n const onFocusMenu = useCallback(() => {\n requestAnimationFrame(() =>\n menuRef.current?.focus({ preventScroll: false }),\n )\n }, [])\n\n const onFocusFirstItem = useCallback(() => {\n const id = setTimeout(() => {\n if (initialFocusRef) return\n\n const first = descendants.enabledFirstValue()\n\n if (first) setFocusedIndex(first.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, initialFocusRef])\n\n const onFocusLastItem = useCallback(() => {\n const id = setTimeout(() => {\n if (initialFocusRef) return\n\n const last = descendants.enabledLastValue()\n\n if (last) setFocusedIndex(last.index)\n })\n\n timeoutIds.current.add(id)\n }, [descendants, initialFocusRef])\n\n const onOpenInternal = useCallback(() => {\n onOpenProp?.()\n\n if (!nested) onFocusMenu()\n }, [onOpenProp, nested, onFocusMenu])\n\n const onCloseInternal = useCallback(() => {\n onCloseProp?.()\n\n for (const onClose of onCloseMapRef.current.values()) {\n onClose()\n }\n }, [onCloseProp])\n\n const id = useId()\n const { open, onClose, onOpen } = useDisclosure({\n ...props,\n onClose: onCloseInternal,\n onOpen: onOpenInternal,\n })\n\n useEffect(() => {\n const onCloseMap = onDownstreamCloseMapRef?.current\n\n onCloseMap?.set(id, onClose)\n\n return () => {\n onCloseMap?.delete(id)\n }\n }, [id, onClose, onDownstreamCloseMapRef])\n\n useEffect(() => {\n if (setDownstreamOpen) setDownstreamOpen(open)\n }, [setDownstreamOpen, open])\n\n useEffect(() => {\n if (hasDownstreamRef) hasDownstreamRef.current = true\n\n return () => {\n if (hasDownstreamRef) hasDownstreamRef.current = false\n }\n })\n\n useUpdateEffect(() => {\n if (!open) setFocusedIndex(-1)\n }, [open])\n\n useUnmountEffect(() => {\n timeoutIds.current.forEach((id) => clearTimeout(id))\n timeoutIds.current.clear()\n })\n\n return (\n <DescendantsContextProvider value={descendants}>\n <UpstreamMenuProvider\n value={{\n relatedRef: menuRef,\n onDownstreamCloseMapRef: onCloseMapRef,\n onUpstreamClose: funcAll(onUpstreamClose, onClose),\n }}\n >\n <MenuProvider\n value={{\n buttonRef,\n closeOnSelect,\n focusedIndex,\n menuRef,\n nested,\n open,\n requestAnimationFrameId,\n setFocusedIndex,\n styles,\n onClose,\n onFocusFirstItem,\n onFocusLastItem,\n onOpen,\n onUpstreamClose,\n }}\n >\n <Popover\n {...{\n trigger: nested ? \"hover\" : \"click\",\n ...rest,\n closeOnBlur,\n closeOnButton: false,\n duration,\n initialFocusRef,\n offset,\n open,\n placement,\n relatedRef,\n onClose,\n onOpen,\n }}\n />\n </MenuProvider>\n </UpstreamMenuProvider>\n </DescendantsContextProvider>\n )\n}\n\nMenu.__ui__ = \"Menu\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport type {\n Dispatch,\n KeyboardEventHandler,\n MutableRefObject,\n RefObject,\n SetStateAction,\n} from \"react\"\nimport type { MenuOptions } from \"./menu\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\n\nexport const {\n DescendantsContextProvider,\n useDescendant: useMenuDescendant,\n useDescendants,\n useDescendantsContext: useMenuDescendantsContext,\n} = createDescendant()\n\ninterface MenuContext extends MenuOptions {\n buttonRef: RefObject<HTMLButtonElement>\n focusedIndex: number\n menuRef: RefObject<HTMLDivElement>\n nested: boolean\n open: boolean\n requestAnimationFrameId: MutableRefObject<null | number>\n setFocusedIndex: Dispatch<SetStateAction<number>>\n styles: { [key: string]: CSSUIObject | undefined }\n onClose: () => void\n onFocusFirstItem: () => void\n onFocusLastItem: () => void\n onOpen: () => void\n onUpstreamClose?: () => void\n}\n\nexport const [MenuProvider, useMenu] = createContext<MenuContext>({\n name: \"MenuContext\",\n errorMessage: `useMenu returned is 'undefined'. Seems you forgot to wrap the components in \"<Menu />\"`,\n})\n\ninterface ContextMenuContext {\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ContextMenuProvider, useContextMenu] =\n createContext<ContextMenuContext>({\n name: \"ContextMenuContext\",\n strict: false,\n })\n\ninterface UpstreamMenuContext {\n relatedRef: RefObject<HTMLElement>\n onDownstreamCloseMapRef: MutableRefObject<Map<string, () => void>>\n onUpstreamClose: () => void\n}\n\nexport const [UpstreamMenuProvider, useUpstreamMenu] =\n createContext<UpstreamMenuContext>({\n name: \"UpstreamMenuContext\",\n strict: false,\n })\n\ninterface UpstreamMenuItemContext {\n hasDownstreamRef: MutableRefObject<boolean>\n setDownstreamOpen: Dispatch<SetStateAction<boolean>>\n onKeyDownRef: RefObject<KeyboardEventHandler<HTMLDivElement>>\n onUpstreamRestoreFocus: () => void\n}\n\nexport const [UpstreamMenuItemProvider, useUpstreamMenuItem] =\n createContext<UpstreamMenuItemContext>({\n name: \"UpstreamMenuItemContext\",\n strict: false,\n })\n"],"mappings":"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","names":["import_core","import_utils","_a","id","onClose","import_jsx_runtime"]}
|
package/dist/context-menu.mjs
CHANGED
@@ -1,9 +1,9 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
ContextMenu
|
4
|
-
} from "./chunk-
|
5
|
-
import "./chunk-
|
6
|
-
import "./chunk-
|
4
|
+
} from "./chunk-H662AKOV.mjs";
|
5
|
+
import "./chunk-JTGSHZXB.mjs";
|
6
|
+
import "./chunk-IWH3B4PS.mjs";
|
7
7
|
export {
|
8
8
|
ContextMenu
|
9
9
|
};
|
package/dist/index.js
CHANGED
@@ -96,8 +96,8 @@ var Menu = (props) => {
|
|
96
96
|
} = (0, import_core.omitThemeProps)(mergedProps);
|
97
97
|
const { relatedRef, onDownstreamCloseMapRef, onUpstreamClose } = (_b = useUpstreamMenu()) != null ? _b : {};
|
98
98
|
const { hasDownstreamRef, setDownstreamOpen } = (_c = useUpstreamMenuItem()) != null ? _c : {};
|
99
|
-
const
|
100
|
-
if (
|
99
|
+
const nested = !!relatedRef;
|
100
|
+
if (nested) {
|
101
101
|
placement != null ? placement : placement = "right-start";
|
102
102
|
offset != null ? offset : offset = [-8, 8];
|
103
103
|
closeOnBlur != null ? closeOnBlur : closeOnBlur = false;
|
@@ -137,8 +137,8 @@ var Menu = (props) => {
|
|
137
137
|
}, [descendants, initialFocusRef]);
|
138
138
|
const onOpenInternal = (0, import_react.useCallback)(() => {
|
139
139
|
onOpenProp == null ? void 0 : onOpenProp();
|
140
|
-
if (!
|
141
|
-
}, [onOpenProp,
|
140
|
+
if (!nested) onFocusMenu();
|
141
|
+
}, [onOpenProp, nested, onFocusMenu]);
|
142
142
|
const onCloseInternal = (0, import_react.useCallback)(() => {
|
143
143
|
onCloseProp == null ? void 0 : onCloseProp();
|
144
144
|
for (const onClose2 of onCloseMapRef.current.values()) {
|
@@ -146,7 +146,7 @@ var Menu = (props) => {
|
|
146
146
|
}
|
147
147
|
}, [onCloseProp]);
|
148
148
|
const id = (0, import_react.useId)();
|
149
|
-
const {
|
149
|
+
const { open, onClose, onOpen } = (0, import_use_disclosure.useDisclosure)({
|
150
150
|
...props,
|
151
151
|
onClose: onCloseInternal,
|
152
152
|
onOpen: onOpenInternal
|
@@ -159,8 +159,8 @@ var Menu = (props) => {
|
|
159
159
|
};
|
160
160
|
}, [id, onClose, onDownstreamCloseMapRef]);
|
161
161
|
(0, import_react.useEffect)(() => {
|
162
|
-
if (setDownstreamOpen) setDownstreamOpen(
|
163
|
-
}, [setDownstreamOpen,
|
162
|
+
if (setDownstreamOpen) setDownstreamOpen(open);
|
163
|
+
}, [setDownstreamOpen, open]);
|
164
164
|
(0, import_react.useEffect)(() => {
|
165
165
|
if (hasDownstreamRef) hasDownstreamRef.current = true;
|
166
166
|
return () => {
|
@@ -168,8 +168,8 @@ var Menu = (props) => {
|
|
168
168
|
};
|
169
169
|
});
|
170
170
|
(0, import_utils2.useUpdateEffect)(() => {
|
171
|
-
if (!
|
172
|
-
}, [
|
171
|
+
if (!open) setFocusedIndex(-1);
|
172
|
+
}, [open]);
|
173
173
|
(0, import_utils2.useUnmountEffect)(() => {
|
174
174
|
timeoutIds.current.forEach((id2) => clearTimeout(id2));
|
175
175
|
timeoutIds.current.clear();
|
@@ -189,9 +189,9 @@ var Menu = (props) => {
|
|
189
189
|
buttonRef,
|
190
190
|
closeOnSelect,
|
191
191
|
focusedIndex,
|
192
|
-
isNested,
|
193
|
-
isOpen,
|
194
192
|
menuRef,
|
193
|
+
nested,
|
194
|
+
open,
|
195
195
|
requestAnimationFrameId,
|
196
196
|
setFocusedIndex,
|
197
197
|
styles,
|
@@ -205,14 +205,14 @@ var Menu = (props) => {
|
|
205
205
|
import_popover.Popover,
|
206
206
|
{
|
207
207
|
...{
|
208
|
-
trigger:
|
208
|
+
trigger: nested ? "hover" : "click",
|
209
209
|
...rest,
|
210
210
|
closeOnBlur,
|
211
211
|
closeOnButton: false,
|
212
212
|
duration,
|
213
213
|
initialFocusRef,
|
214
|
-
isOpen,
|
215
214
|
offset,
|
215
|
+
open,
|
216
216
|
placement,
|
217
217
|
relatedRef,
|
218
218
|
onClose,
|
@@ -302,18 +302,22 @@ var MenuItem = (0, import_core4.forwardRef)(
|
|
302
302
|
children,
|
303
303
|
closeOnSelect: customCloseOnSelect,
|
304
304
|
command,
|
305
|
+
disabled,
|
306
|
+
focusable,
|
305
307
|
icon,
|
306
308
|
isDisabled,
|
307
309
|
isFocusable,
|
308
310
|
...props
|
309
311
|
}, ref) => {
|
310
312
|
var _a, _b;
|
313
|
+
disabled != null ? disabled : disabled = isDisabled;
|
314
|
+
focusable != null ? focusable : focusable = isFocusable;
|
311
315
|
const {
|
312
316
|
closeOnSelect,
|
313
317
|
focusedIndex,
|
314
|
-
isNested,
|
315
|
-
isOpen,
|
316
318
|
menuRef,
|
319
|
+
nested,
|
320
|
+
open,
|
317
321
|
requestAnimationFrameId,
|
318
322
|
setFocusedIndex,
|
319
323
|
styles,
|
@@ -321,7 +325,7 @@ var MenuItem = (0, import_core4.forwardRef)(
|
|
321
325
|
onUpstreamClose
|
322
326
|
} = useMenu();
|
323
327
|
const { onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
|
324
|
-
const [
|
328
|
+
const [downstreamOpen, setDownstreamOpen] = (0, import_react3.useState)(false);
|
325
329
|
const uuid = (0, import_react3.useId)();
|
326
330
|
const itemRef = (0, import_react3.useRef)(null);
|
327
331
|
const hasDownstreamRef = (0, import_react3.useRef)(false);
|
@@ -329,19 +333,19 @@ var MenuItem = (0, import_core4.forwardRef)(
|
|
329
333
|
() => void 0
|
330
334
|
);
|
331
335
|
id != null ? id : id = uuid;
|
332
|
-
const trulyDisabled =
|
336
|
+
const trulyDisabled = disabled && !focusable;
|
333
337
|
const type = (_b = itemRef.current) == null ? void 0 : _b.getAttribute("type");
|
334
338
|
const role = !!type ? type === "checkbox" ? "menuitemcheckbox" : "menuitemradio" : "menuitem";
|
335
339
|
const { index, register } = useMenuDescendant({ disabled: trulyDisabled });
|
336
|
-
const
|
340
|
+
const focused = index === focusedIndex;
|
337
341
|
const onMouseOver = (0, import_react3.useCallback)(() => {
|
338
|
-
if (
|
342
|
+
if (disabled) return;
|
339
343
|
setFocusedIndex(index);
|
340
|
-
}, [index,
|
344
|
+
}, [index, disabled, setFocusedIndex]);
|
341
345
|
const onMouseLeave = (0, import_react3.useCallback)(() => {
|
342
|
-
if (
|
346
|
+
if (disabled) return;
|
343
347
|
setFocusedIndex(-1);
|
344
|
-
}, [setFocusedIndex,
|
348
|
+
}, [setFocusedIndex, disabled]);
|
345
349
|
const onClick = (0, import_react3.useCallback)(
|
346
350
|
(ev) => {
|
347
351
|
if (!isTargetMenuItem(ev.currentTarget)) return;
|
@@ -365,7 +369,7 @@ var MenuItem = (0, import_core4.forwardRef)(
|
|
365
369
|
(ev) => {
|
366
370
|
if (ev.key === " ") ev.key = ev.code;
|
367
371
|
const actions = {
|
368
|
-
ArrowLeft:
|
372
|
+
ArrowLeft: nested ? (0, import_utils4.funcAll)(onUpstreamRestoreFocus, onClose) : void 0,
|
369
373
|
Space: !hasDownstreamRef.current ? (0, import_utils4.funcAll)(onUpstreamClose, onClose) : void 0
|
370
374
|
};
|
371
375
|
const action = actions[ev.key];
|
@@ -374,15 +378,15 @@ var MenuItem = (0, import_core4.forwardRef)(
|
|
374
378
|
ev.stopPropagation();
|
375
379
|
action();
|
376
380
|
},
|
377
|
-
[
|
381
|
+
[nested, onUpstreamRestoreFocus, onClose, onUpstreamClose]
|
378
382
|
);
|
379
383
|
const rest = (0, import_use_clickable.useClickable)({
|
380
384
|
clickOnSpace: false,
|
381
385
|
focusOnClick: false,
|
382
386
|
...props,
|
383
387
|
ref: (0, import_utils4.mergeRefs)(register, itemRef, ref),
|
384
|
-
|
385
|
-
|
388
|
+
disabled,
|
389
|
+
focusable,
|
386
390
|
onClick: (0, import_utils4.handlerAll)(props.onClick, onClick),
|
387
391
|
onFocus: (0, import_utils4.handlerAll)(props.onFocus, onFocus),
|
388
392
|
onKeyDown: (0, import_utils4.handlerAll)(props.onKeyDown, onKeyDown, onKeyDownRef.current),
|
@@ -390,9 +394,9 @@ var MenuItem = (0, import_core4.forwardRef)(
|
|
390
394
|
onMouseOver: (0, import_utils4.handlerAll)(props.onMouseOver, onMouseOver)
|
391
395
|
});
|
392
396
|
(0, import_utils4.useUpdateEffect)(() => {
|
393
|
-
if (!
|
397
|
+
if (!open) return;
|
394
398
|
const id2 = requestAnimationFrameId.current;
|
395
|
-
if (
|
399
|
+
if (focused && !trulyDisabled && itemRef.current) {
|
396
400
|
if (id2) cancelAnimationFrame(id2);
|
397
401
|
requestAnimationFrameId.current = requestAnimationFrame(() => {
|
398
402
|
var _a2;
|
@@ -405,7 +409,7 @@ var MenuItem = (0, import_core4.forwardRef)(
|
|
405
409
|
return () => {
|
406
410
|
if (id2) cancelAnimationFrame(id2);
|
407
411
|
};
|
408
|
-
}, [
|
412
|
+
}, [focused, trulyDisabled, menuRef, open]);
|
409
413
|
children = icon || command ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.ui.span, { style: { flex: 1 }, children }) : children;
|
410
414
|
const css = {
|
411
415
|
alignItems: "center",
|
@@ -434,11 +438,11 @@ var MenuItem = (0, import_core4.forwardRef)(
|
|
434
438
|
{
|
435
439
|
id,
|
436
440
|
className: (0, import_utils4.cx)("ui-menu__item", className),
|
437
|
-
"data-focus": (0, import_utils4.dataAttr)(
|
441
|
+
"data-focus": (0, import_utils4.dataAttr)(downstreamOpen),
|
438
442
|
__css: css,
|
439
443
|
...rest,
|
440
444
|
role,
|
441
|
-
tabIndex: !
|
445
|
+
tabIndex: !downstreamOpen && focused ? 0 : -1,
|
442
446
|
children: [
|
443
447
|
icon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuIcon, { children: icon }) : null,
|
444
448
|
children,
|
@@ -453,17 +457,26 @@ var MenuItem = (0, import_core4.forwardRef)(
|
|
453
457
|
MenuItem.displayName = "MenuItem";
|
454
458
|
MenuItem.__ui__ = "MenuItem";
|
455
459
|
var MenuOptionItem = (0, import_core4.forwardRef)(
|
456
|
-
({
|
460
|
+
({
|
461
|
+
className,
|
462
|
+
checked,
|
463
|
+
children,
|
464
|
+
closeOnSelect = false,
|
465
|
+
icon,
|
466
|
+
isChecked,
|
467
|
+
...rest
|
468
|
+
}, ref) => {
|
469
|
+
checked != null ? checked : checked = isChecked;
|
457
470
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
458
471
|
MenuItem,
|
459
472
|
{
|
460
473
|
ref,
|
461
474
|
className: (0, import_utils4.cx)("ui-menu__item--option", className),
|
462
|
-
"aria-checked":
|
475
|
+
"aria-checked": checked,
|
463
476
|
closeOnSelect,
|
464
477
|
...rest,
|
465
478
|
children: [
|
466
|
-
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuIcon, { opacity:
|
479
|
+
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuIcon, { opacity: checked ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckIcon, {}) }) : null,
|
467
480
|
children
|
468
481
|
]
|
469
482
|
}
|
@@ -530,7 +543,7 @@ var MenuButton = (0, import_core5.forwardRef)(
|
|
530
543
|
const { onKeyDownRef, onUpstreamRestoreFocus } = (_a = useUpstreamMenuItem()) != null ? _a : {};
|
531
544
|
const {
|
532
545
|
buttonRef,
|
533
|
-
|
546
|
+
open,
|
534
547
|
onClose,
|
535
548
|
onFocusFirstItem,
|
536
549
|
onFocusLastItem,
|
@@ -558,17 +571,17 @@ var MenuButton = (0, import_core5.forwardRef)(
|
|
558
571
|
(ev) => {
|
559
572
|
if (ev.key === " ") ev.key = ev.code;
|
560
573
|
const actions = {
|
561
|
-
ArrowLeft:
|
562
|
-
ArrowRight: !
|
563
|
-
Enter: !
|
564
|
-
Space: !
|
574
|
+
ArrowLeft: open ? (0, import_utils5.funcAll)(onUpstreamRestoreFocus, onClose) : void 0,
|
575
|
+
ArrowRight: !open ? (0, import_utils5.funcAll)(onOpen, onFocusFirstItem) : void 0,
|
576
|
+
Enter: !open ? (0, import_utils5.funcAll)(onOpen, onFocusFirstItem) : void 0,
|
577
|
+
Space: !open ? (0, import_utils5.funcAll)(onOpen, onFocusFirstItem) : void 0
|
565
578
|
};
|
566
579
|
const action = actions[ev.key];
|
567
580
|
if (!action) return;
|
568
581
|
ev.preventDefault();
|
569
582
|
action();
|
570
583
|
},
|
571
|
-
[
|
584
|
+
[open, onOpen, onFocusFirstItem, onUpstreamRestoreFocus, onClose]
|
572
585
|
);
|
573
586
|
(0, import_utils5.assignRef)(onKeyDownRef, onItemKeyDown);
|
574
587
|
const Component = (0, import_react4.useMemo)(() => as ? (0, import_core5.ui)(as) : Button, [as]);
|
@@ -580,7 +593,7 @@ var MenuButton = (0, import_core5.forwardRef)(
|
|
580
593
|
className: (0, import_utils5.cx)("ui-menu", className),
|
581
594
|
"aria-haspopup": "menu",
|
582
595
|
...rest,
|
583
|
-
"data-active": (0, import_utils5.dataAttr)(
|
596
|
+
"data-active": (0, import_utils5.dataAttr)(open),
|
584
597
|
onKeyDown: (0, import_utils5.handlerAll)(rest.onKeyDown, onKeyDown),
|
585
598
|
children
|
586
599
|
}
|
@@ -780,8 +793,8 @@ var MenuOptionGroup = (0, import_react7.forwardRef)(
|
|
780
793
|
onChange: onChangeProp,
|
781
794
|
...rest
|
782
795
|
}, ref) => {
|
783
|
-
const
|
784
|
-
defaultValue != null ? defaultValue : defaultValue =
|
796
|
+
const radio = type === "radio";
|
797
|
+
defaultValue != null ? defaultValue : defaultValue = radio ? "" : [];
|
785
798
|
const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
|
786
799
|
defaultValue,
|
787
800
|
value: valueProp,
|
@@ -789,13 +802,13 @@ var MenuOptionGroup = (0, import_react7.forwardRef)(
|
|
789
802
|
});
|
790
803
|
const onChange = (0, import_react7.useCallback)(
|
791
804
|
(selectedValue) => {
|
792
|
-
if (
|
793
|
-
if (!
|
805
|
+
if (radio && (0, import_utils9.isString)(value)) setValue(selectedValue);
|
806
|
+
if (!radio && (0, import_utils9.isArray)(value)) {
|
794
807
|
const nextValue = value.includes(selectedValue) ? value.filter((item) => item !== selectedValue) : value.concat(selectedValue);
|
795
808
|
setValue(nextValue);
|
796
809
|
}
|
797
810
|
},
|
798
|
-
[
|
811
|
+
[radio, value, setValue]
|
799
812
|
);
|
800
813
|
const validChildren = (0, import_utils9.getValidChildren)(children);
|
801
814
|
const cloneChildren = validChildren.map((child) => {
|
@@ -805,8 +818,8 @@ var MenuOptionGroup = (0, import_react7.forwardRef)(
|
|
805
818
|
onChange(child.props.value);
|
806
819
|
(_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a, ev);
|
807
820
|
};
|
808
|
-
const
|
809
|
-
return (0, import_react7.cloneElement)(child, { type,
|
821
|
+
const checked = !radio && (0, import_utils9.isArray)(value) ? value.includes(child.props.value) : child.props.value === value;
|
822
|
+
return (0, import_react7.cloneElement)(child, { type, checked, onClick });
|
810
823
|
});
|
811
824
|
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
812
825
|
MenuGroup,
|