@yamada-ui/react 2.3.2-dev-20261104093107 → 2.3.2-dev-20261104222056
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/cjs/components/action-bar/use-action-bar.cjs +2 -7
- package/dist/cjs/components/action-bar/use-action-bar.cjs.map +1 -1
- package/dist/cjs/components/color-swatch/color-swatch-group.cjs +1 -1
- package/dist/cjs/components/drawer/drawer.cjs +3 -4
- package/dist/cjs/components/drawer/drawer.cjs.map +1 -1
- package/dist/cjs/components/menu/menu.cjs +4 -5
- package/dist/cjs/components/menu/menu.cjs.map +1 -1
- package/dist/cjs/components/menu/use-menu.cjs +17 -7
- package/dist/cjs/components/menu/use-menu.cjs.map +1 -1
- package/dist/cjs/components/modal/modal.cjs +4 -4
- package/dist/cjs/components/modal/modal.cjs.map +1 -1
- package/dist/cjs/components/modal/use-modal.cjs +9 -30
- package/dist/cjs/components/modal/use-modal.cjs.map +1 -1
- package/dist/cjs/components/sidebar/sidebar.cjs +7 -7
- package/dist/cjs/components/sidebar/sidebar.cjs.map +1 -1
- package/dist/cjs/components/sidebar/use-sidebar.cjs +7 -7
- package/dist/cjs/components/sidebar/use-sidebar.cjs.map +1 -1
- package/dist/cjs/index.cjs +2 -2
- package/dist/cjs/providers/i18n-provider/intl/ar-AE.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/ar-AE.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/bg-BG.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/bg-BG.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/cs-CZ.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/cs-CZ.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/da-DK.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/da-DK.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/de-DE.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/de-DE.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/el-GR.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/el-GR.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/en-GB.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/en-GB.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/en-US.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/en-US.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/es-ES.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/es-ES.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/et-EE.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/et-EE.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/fi-FI.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/fi-FI.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/fr-CA.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/fr-CA.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/fr-FR.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/fr-FR.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/he-IL.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/he-IL.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/hr-HR.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/hr-HR.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/hu-HU.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/hu-HU.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/it-IT.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/it-IT.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/ja-JP.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/ja-JP.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/ko-KR.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/ko-KR.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/lt-LT.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/lt-LT.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/lv-LV.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/lv-LV.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/nl-NL.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/nl-NL.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/no-NO.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/no-NO.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/pl-PL.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/pl-PL.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/pt-BR.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/pt-BR.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/ro-RO.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/ro-RO.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/ru-RU.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/ru-RU.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/sk-SK.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/sk-SK.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/sl-SI.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/sl-SI.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/sr-RS.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/sr-RS.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/sv-SE.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/sv-SE.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/tr-TR.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/tr-TR.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/uk-UA.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/uk-UA.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/zh-CN.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/zh-CN.cjs.map +1 -1
- package/dist/cjs/providers/i18n-provider/intl/zh-TW.cjs +0 -8
- package/dist/cjs/providers/i18n-provider/intl/zh-TW.cjs.map +1 -1
- package/dist/cjs/providers/ui-provider/ui-provider.cjs +1 -1
- package/dist/esm/components/action-bar/use-action-bar.js +2 -7
- package/dist/esm/components/action-bar/use-action-bar.js.map +1 -1
- package/dist/esm/components/color-swatch/color-swatch-group.js +1 -1
- package/dist/esm/components/drawer/drawer.js +3 -4
- package/dist/esm/components/drawer/drawer.js.map +1 -1
- package/dist/esm/components/menu/menu.js +4 -5
- package/dist/esm/components/menu/menu.js.map +1 -1
- package/dist/esm/components/menu/use-menu.js +17 -7
- package/dist/esm/components/menu/use-menu.js.map +1 -1
- package/dist/esm/components/modal/modal.js +4 -4
- package/dist/esm/components/modal/modal.js.map +1 -1
- package/dist/esm/components/modal/use-modal.js +9 -30
- package/dist/esm/components/modal/use-modal.js.map +1 -1
- package/dist/esm/components/sidebar/sidebar.js +7 -7
- package/dist/esm/components/sidebar/sidebar.js.map +1 -1
- package/dist/esm/components/sidebar/use-sidebar.js +7 -7
- package/dist/esm/components/sidebar/use-sidebar.js.map +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/providers/i18n-provider/intl/ar-AE.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/ar-AE.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/bg-BG.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/bg-BG.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/cs-CZ.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/cs-CZ.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/da-DK.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/da-DK.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/de-DE.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/de-DE.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/el-GR.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/el-GR.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/en-GB.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/en-GB.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/en-US.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/en-US.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/es-ES.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/es-ES.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/et-EE.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/et-EE.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/fi-FI.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/fi-FI.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/fr-CA.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/fr-CA.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/fr-FR.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/fr-FR.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/he-IL.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/he-IL.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/hr-HR.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/hr-HR.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/hu-HU.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/hu-HU.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/it-IT.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/it-IT.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/ja-JP.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/ja-JP.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/ko-KR.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/ko-KR.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/lt-LT.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/lt-LT.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/lv-LV.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/lv-LV.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/nl-NL.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/nl-NL.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/no-NO.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/no-NO.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/pl-PL.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/pl-PL.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/pt-BR.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/pt-BR.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/ro-RO.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/ro-RO.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/ru-RU.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/ru-RU.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/sk-SK.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/sk-SK.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/sl-SI.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/sl-SI.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/sr-RS.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/sr-RS.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/sv-SE.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/sv-SE.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/tr-TR.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/tr-TR.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/uk-UA.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/uk-UA.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/zh-CN.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/zh-CN.js.map +1 -1
- package/dist/esm/providers/i18n-provider/intl/zh-TW.js +0 -8
- package/dist/esm/providers/i18n-provider/intl/zh-TW.js.map +1 -1
- package/dist/esm/providers/ui-provider/ui-provider.js +1 -1
- package/dist/types/components/chart/cartesian-chart.style.d.ts +1 -1
- package/dist/types/components/chart/polar-chart.style.d.ts +1 -1
- package/dist/types/components/drawer/use-drawer.d.ts +0 -1
- package/dist/types/components/menu/menu.d.ts +2 -2
- package/dist/types/components/menu/use-menu.d.ts +8 -3
- package/dist/types/components/modal/use-modal.d.ts +0 -1
- package/dist/types/components/sidebar/use-sidebar.d.ts +1 -0
- package/dist/types/providers/i18n-provider/i18n-provider.d.ts +1 -9
- package/dist/types/providers/i18n-provider/intl/en-US.d.ts +0 -8
- package/dist/types/providers/i18n-provider/intl/index.d.ts +0 -280
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-menu.js","names":["createContext","noop","ariaAttr","dataAttr","handlerAll","isTruthyDataAttr","isString","isArray"],"sources":["../../../../src/components/menu/use-menu.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent, MouseEvent, RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { Descendant, Descendants } from \"../../hooks/use-descendants\"\nimport type { UseDisclosureProps } from \"../../hooks/use-disclosure\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport { useDisclosure } from \"../../hooks/use-disclosure\"\nimport {\n ariaAttr,\n assignRef,\n createContext,\n dataAttr,\n handlerAll,\n isArray,\n isString,\n isTruthyDataAttr,\n mergeRefs,\n noop,\n runKeyAction,\n useUpdateEffect,\n} from \"../../utils\"\n\ntype SubMenuDirection = \"end\" | \"start\"\n\ninterface MenuDescendantProps {\n id: string\n}\ntype MenuDescendant = Descendant<HTMLDivElement, MenuDescendantProps>\n\nconst {\n DescendantsContext: MenuDescendantsContext,\n useDescendant: useMenuDescendant,\n useDescendantRegister: useMenuDescendantRegister,\n useDescendants: useMenuDescendants,\n} = createDescendants<HTMLDivElement, MenuDescendantProps>()\n\nexport { MenuDescendantsContext, useMenuDescendant, useMenuDescendants }\n\ninterface MenuContext extends Pick<\n UseMenuReturn,\n | \"onActiveDescendant\"\n | \"onClose\"\n | \"onCloseSubMenu\"\n | \"onOpen\"\n | \"onSelect\"\n | \"subMenu\"\n | \"subMenuDirection\"\n> {}\n\nconst [MenuContext, useMenuContext] = createContext<MenuContext>({\n name: \"MenuContext\",\n})\n\ninterface MenuGroupContext extends Pick<UseMenuGroupReturn, \"getLabelProps\"> {}\n\nconst [MenuGroupContext, useMenuGroupContext] = createContext<MenuGroupContext>(\n {\n name: \"MenuGroupContext\",\n },\n)\n\ninterface MainMenuContext {\n descendants: Descendants<HTMLDivElement, MenuDescendantProps>\n onActiveDescendant: (descendant?: MenuDescendant) => void\n onCloseRef: RefObject<() => void>\n onSelect: (value?: string, closeOnSelect?: boolean) => void\n closeOnSelect?: boolean\n}\n\nconst [MainMenuContext, useMainMenuContext] = createContext<MainMenuContext>({\n name: \"MainMenuContext\",\n strict: false,\n})\n\ninterface MenuOptionGroupContext {\n type: \"checkbox\" | \"radio\"\n value: string | string[]\n onChange?: (value: string) => void\n}\n\nconst [MenuOptionGroupContext, useMenuOptionGroupContext] =\n createContext<MenuOptionGroupContext>({\n name: \"MenuOptionGroupContext\",\n })\n\nexport {\n MainMenuContext,\n MenuContext,\n MenuGroupContext,\n MenuOptionGroupContext,\n useMainMenuContext,\n useMenuContext,\n useMenuGroupContext,\n useMenuOptionGroupContext,\n}\n\nexport interface UseMenuProps extends Omit<UseDisclosureProps, \"timing\"> {\n /**\n * If `true`, the menu item will be closed when selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n /**\n * If `true`, the menu will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The direction of the sub menu.\n *\n * @default 'end'\n */\n subMenuDirection?: SubMenuDirection\n /**\n * Callback invoked when a menu item is selected.\n */\n onSelect?: (value?: string) => void\n}\n\nexport const useMenu = ({\n closeOnSelect,\n defaultOpen,\n disabled = false,\n open: openProp,\n subMenuDirection = \"end\",\n onClose: onCloseProp,\n onOpen: onOpenProp,\n onSelect: onSelectProp,\n}: UseMenuProps = {}) => {\n const triggerId = useId()\n const contentId = useId()\n const descendants = useMenuDescendants()\n const updateRef = useRef<() => void>(noop)\n const onCloseRef = useRef<() => void>(noop)\n const contentRef = useRef<HTMLDivElement>(null)\n const { open, onClose, onOpen } = useDisclosure({\n defaultOpen,\n open: openProp,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n })\n const onCloseSubMenu = useCallback(() => onCloseRef.current(), [])\n const onActiveDescendant = useCallback(\n (\n descendant?: MenuDescendant,\n options: FocusOptions = { preventScroll: true },\n ) => {\n if (!contentRef.current || !descendant || disabled) return\n\n contentRef.current.setAttribute(\"aria-activedescendant\", descendant.id)\n\n descendants.active(descendant, options)\n },\n [descendants, disabled],\n )\n const { mainCloseOnSelect, subMenu, getSubMenuProps, onMainSelect } =\n useSubMenu({\n descendants,\n disabled,\n open,\n subMenuDirection,\n onActiveDescendant,\n onClose,\n onOpen,\n })\n\n closeOnSelect ??= mainCloseOnSelect ?? true\n\n const onSelect = useCallback(\n (value?: string, closeOnSelectProp = closeOnSelect) => {\n if (disabled) return\n\n onSelectProp?.(value)\n onMainSelect?.(value, closeOnSelectProp)\n\n if (!closeOnSelectProp) return\n\n onClose()\n },\n [closeOnSelect, disabled, onClose, onMainSelect, onSelectProp],\n )\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (disabled) return\n\n ev.preventDefault()\n\n if (!open) onOpen()\n else onClose()\n },\n [disabled, onClose, onOpen, open],\n )\n\n const onContextMenu = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (disabled) return\n\n ev.preventDefault()\n onOpen()\n updateRef.current()\n },\n [disabled, onOpen],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) return\n\n runKeyAction(ev, {\n ArrowDown: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n })\n },\n ArrowUp: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledLastValue()\n\n onActiveDescendant(descendant)\n })\n },\n Enter: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n })\n },\n Space: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n })\n },\n })\n },\n [descendants, disabled, onActiveDescendant, onOpen],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}) => ({\n ...getSubMenuProps({\n id: triggerId,\n \"aria-controls\": open ? contentId : undefined,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-expanded\": open,\n \"aria-haspopup\": \"menu\",\n \"data-trigger\": dataAttr(true),\n role: \"button\",\n tabIndex: disabled ? -1 : 0,\n ...props,\n onClick: handlerAll(props.onClick, onClick),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n }),\n [contentId, disabled, getSubMenuProps, onClick, onKeyDown, open, triggerId],\n )\n\n const getContextTriggerProps: PropGetter = useCallback(\n (props = {}) => ({\n id: triggerId,\n \"aria-controls\": open ? contentId : undefined,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-expanded\": open,\n \"aria-haspopup\": \"menu\",\n \"data-trigger\": dataAttr(true),\n role: \"application\",\n ...props,\n onContextMenu: handlerAll(props.onContextMenu, onContextMenu),\n }),\n [contentId, disabled, onContextMenu, open, triggerId],\n )\n\n const getContentProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps(\n {\n id: contentId,\n ref: contentRef,\n \"aria-labelledby\": triggerId,\n role: \"menu\",\n },\n props,\n )(),\n [contentId, triggerId],\n )\n\n const getSeparatorProps: PropGetter = useCallback(\n (props) => ({ role: \"separator\", ...props }),\n [],\n )\n\n return {\n closeOnSelect,\n descendants,\n open,\n subMenu,\n subMenuDirection,\n updateRef,\n getContentProps,\n getContextTriggerProps,\n getSeparatorProps,\n getTriggerProps,\n onActiveDescendant,\n onClose,\n onCloseRef,\n onCloseSubMenu,\n onOpen,\n onSelect,\n }\n}\n\nexport type UseMenuReturn = ReturnType<typeof useMenu>\n\nexport interface UseSubMenuProps extends Omit<\n Required<UseDisclosureProps>,\n \"defaultOpen\" | \"timing\"\n> {\n descendants: Descendants<HTMLDivElement, MenuDescendantProps>\n onActiveDescendant: (descendant?: MenuDescendant) => void\n disabled?: boolean\n subMenuDirection?: SubMenuDirection\n}\n\nexport const useSubMenu = ({\n descendants,\n disabled = false,\n open,\n subMenuDirection = \"end\",\n onActiveDescendant,\n onClose,\n onOpen,\n}: UseSubMenuProps) => {\n const uuid = useId()\n const {\n closeOnSelect: mainCloseOnSelect,\n descendants: mainDescendants,\n onActiveDescendant: onActiveMainDescendant,\n onCloseRef,\n onSelect: onMainSelect,\n } = useMainMenuContext() ?? {}\n const subMenu = !!mainDescendants && !!onActiveMainDescendant\n const createRegister = useMenuDescendantRegister(mainDescendants)\n const triggerRef = useRef<HTMLDivElement>(null)\n\n const dataDisabled = useCallback((node?: HTMLDivElement | null) => {\n node ??= triggerRef.current\n\n if (!node) return false\n\n const dataDisabled = isTruthyDataAttr(node.getAttribute(\"data-disabled\"))\n\n return dataDisabled\n }, [])\n\n const ariaDisabled = useCallback((node?: HTMLDivElement | null) => {\n node ??= triggerRef.current\n\n if (!node) return false\n\n const ariaDisabled = isTruthyDataAttr(node.getAttribute(\"aria-disabled\"))\n\n return ariaDisabled\n }, [])\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (!subMenu) return\n\n ev.defaultPrevented = disabled || dataDisabled() || ariaDisabled()\n },\n [ariaDisabled, dataDisabled, disabled, subMenu],\n )\n\n const onMouseEnter = useCallback(() => {\n if (!subMenu || disabled || dataDisabled() || ariaDisabled()) return\n\n onOpen()\n }, [ariaDisabled, dataDisabled, disabled, onOpen, subMenu])\n\n const onMouseMove = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (!subMenu || disabled || dataDisabled() || ariaDisabled()) return\n\n const descendant = descendants.value(triggerRef.current)\n\n onActiveMainDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n [\n ariaDisabled,\n dataDisabled,\n descendants,\n disabled,\n onActiveMainDescendant,\n subMenu,\n ],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n if (!subMenu || disabled) return\n\n const currentDescendant = open ? descendants : mainDescendants\n const onActiveCurrentDescendant = open\n ? onActiveDescendant\n : onActiveMainDescendant\n\n runKeyAction(ev, {\n ArrowDown: () => {\n const descendant = currentDescendant.enabledNextValue(\n triggerRef.current,\n )\n\n onActiveCurrentDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n ArrowUp: () => {\n const descendant = currentDescendant.enabledPrevValue(\n triggerRef.current,\n )\n\n onActiveCurrentDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n End: () => {\n const descendant = currentDescendant.enabledLastValue()\n\n onActiveCurrentDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n Home: () => {\n const descendant = currentDescendant.enabledFirstValue()\n\n onActiveCurrentDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n [subMenuDirection === \"end\" ? \"ArrowRight\" : \"ArrowLeft\"]: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n })\n\n ev.defaultPrevented = true\n },\n })\n },\n [\n subMenu,\n disabled,\n open,\n descendants,\n mainDescendants,\n onActiveDescendant,\n onActiveMainDescendant,\n subMenuDirection,\n onOpen,\n ],\n )\n\n assignRef(onCloseRef, onClose)\n\n const getSubMenuProps: PropGetter = useCallback(\n ({ id = uuid, ...props } = {}) =>\n mergeProps(\n {\n ref: mergeRefs(\n triggerRef,\n createRegister({\n id,\n disabled: (node) =>\n disabled || dataDisabled(node) || ariaDisabled(node),\n }),\n ),\n role: subMenu ? \"menuitem\" : \"button\",\n },\n props,\n { onClick, onKeyDown, onMouseEnter, onMouseMove },\n )(),\n [\n uuid,\n subMenu,\n createRegister,\n onClick,\n onKeyDown,\n onMouseEnter,\n onMouseMove,\n disabled,\n dataDisabled,\n ariaDisabled,\n ],\n )\n\n return { mainCloseOnSelect, subMenu, getSubMenuProps, onMainSelect }\n}\n\nexport type UseSubMenuReturn = ReturnType<typeof useSubMenu>\n\nexport interface UseMenuGroupProps extends HTMLProps {}\n\nexport const useMenuGroup = ({ ...rest }: UseMenuGroupProps) => {\n const labelId = useId()\n\n const getGroupProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps(\n {\n \"aria-labelledby\": labelId,\n role: \"group\",\n },\n rest,\n props,\n )(),\n [labelId, rest],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props) => ({ id: labelId, role: \"presentation\", ...props }),\n [labelId],\n )\n\n return { getGroupProps, getLabelProps }\n}\n\nexport type UseMenuGroupReturn = ReturnType<typeof useMenuGroup>\n\nexport interface UseMenuItemProps extends HTMLProps {\n /**\n * If `true`, the menu item will be closed when selected.\n */\n closeOnSelect?: boolean\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The value of the menu item.\n */\n value?: string\n}\n\nexport const useMenuItem = ({\n id,\n \"aria-disabled\": ariaDisabled,\n \"data-disabled\": dataDisabled,\n \"data-trigger\": dataTrigger,\n closeOnSelect,\n disabled = false,\n value,\n ...rest\n}: UseMenuItemProps) => {\n const trigger = isTruthyDataAttr(dataTrigger)\n const {\n subMenu,\n subMenuDirection,\n onActiveDescendant,\n onClose,\n onCloseSubMenu,\n onSelect,\n } = useMenuContext()\n const uuid = useId()\n const itemRef = useRef<HTMLDivElement>(null)\n const subMenuTrigger = subMenu && trigger\n\n id ??= uuid\n\n const { descendants, register } = useMenuDescendant({\n id,\n disabled: disabled || subMenuTrigger,\n })\n\n const onActive = useCallback(() => {\n if (disabled) return\n\n const descendant = descendants.value(itemRef.current)\n\n onActiveDescendant(descendant)\n }, [descendants, disabled, onActiveDescendant])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n runKeyAction(ev, {\n ArrowDown: () => {\n const descendant = descendants.enabledNextValue(itemRef.current)\n\n onActiveDescendant(descendant)\n },\n ArrowUp: () => {\n const descendant = descendants.enabledPrevValue(itemRef.current)\n\n onActiveDescendant(descendant)\n },\n End: () => {\n const descendant = descendants.enabledLastValue()\n\n onActiveDescendant(descendant)\n },\n Enter: () => onSelect(value, closeOnSelect),\n Home: () => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n },\n Space: () => onSelect(value, closeOnSelect),\n [subMenuDirection === \"end\" ? \"ArrowLeft\" : \"ArrowRight\"]: () => {\n if (!subMenu) return\n\n onClose()\n\n const descendant = descendants.firstValue()\n\n descendant?.node.focus()\n },\n })\n },\n [\n closeOnSelect,\n descendants,\n onActiveDescendant,\n onClose,\n onSelect,\n subMenu,\n subMenuDirection,\n value,\n ],\n )\n\n const getItemProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps(\n {\n id,\n ref: mergeRefs(itemRef, register),\n \"aria-disabled\": ariaDisabled ?? ariaAttr(disabled),\n \"data-disabled\": dataDisabled ?? dataAttr(disabled),\n role: \"menuitem\",\n tabIndex: -1,\n },\n rest,\n props,\n {\n onClick: () => onSelect(value, closeOnSelect),\n onFocus: onActive,\n onKeyDown: onKeyDown,\n onMouseMove: () => {\n onCloseSubMenu()\n onActive()\n },\n },\n )(),\n [\n id,\n ariaDisabled,\n disabled,\n dataDisabled,\n rest,\n register,\n onActive,\n onKeyDown,\n onSelect,\n value,\n closeOnSelect,\n onCloseSubMenu,\n ],\n )\n\n return {\n subMenuTrigger,\n getItemProps,\n }\n}\n\nexport type UseMenuItemReturn = ReturnType<typeof useMenuItem>\n\nexport type MenuOptionGroupType = \"checkbox\" | \"radio\"\nexport type MenuOptionGroupValue<Y extends MenuOptionGroupType> =\n Y extends \"checkbox\" ? string[] : string\n\nexport interface UseMenuOptionGroupProps<\n Y extends MenuOptionGroupType = \"checkbox\",\n M extends MenuOptionGroupValue<Y> = MenuOptionGroupValue<Y>,\n> {\n /**\n * The initial value of the menu item group.\n */\n defaultValue?: M\n /**\n * The type of the menu option group.\n */\n type?: Y\n /**\n * The value of the menu item group.\n */\n value?: M\n /**\n * The callback fired when any children checkbox is checked or unchecked.\n */\n onChange?: (value: M) => void\n}\n\nexport const useMenuOptionGroup = <\n Y extends \"checkbox\" | \"radio\" = \"checkbox\",\n M extends (Y extends \"checkbox\" ? string[] : string) = Y extends \"checkbox\"\n ? string[]\n : string,\n>({\n type = \"checkbox\" as Y,\n defaultValue = (type === \"checkbox\" ? [] : \"\") as M,\n value: valueProp,\n onChange: onChangeProp,\n}: UseMenuOptionGroupProps<Y, M>) => {\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const radio = type === \"radio\"\n\n const onChange = useCallback(\n (selectedValue: string) => {\n setValue((prev) => {\n if (radio && isString(prev)) return selectedValue as M\n else if (!radio && isArray(prev))\n return (\n prev.includes(selectedValue)\n ? prev.filter((value) => value !== selectedValue)\n : prev.concat(selectedValue)\n ) as M\n else return prev\n })\n },\n [radio, setValue],\n )\n\n useUpdateEffect(() => {\n setValue(valueProp!)\n }, [valueProp])\n\n return {\n type,\n value,\n onChange,\n }\n}\n\nexport type UseMenuOptionGroupReturn = ReturnType<typeof useMenuOptionGroup>\n\nexport interface UseMenuOptionItemProps extends UseMenuItemProps {\n /**\n * The value of the menu option item.\n */\n value: string\n}\n\nexport const useMenuOptionItem = ({\n disabled,\n value,\n ...rest\n}: UseMenuOptionItemProps) => {\n const { type, value: selectedValue, onChange } = useMenuOptionGroupContext()\n const { getItemProps } = useMenuItem({ disabled, value, ...rest })\n const radio = type === \"radio\" && isString(selectedValue)\n const checkbox = type === \"checkbox\" && isArray(selectedValue)\n const selected = radio\n ? value === selectedValue\n : checkbox\n ? selectedValue.includes(value)\n : false\n\n const getIndicatorProps: PropGetter = useCallback(\n ({ style, ...props } = {}) => ({\n style: { opacity: selected ? 1 : 0, ...style },\n ...props,\n }),\n [selected],\n )\n\n const getOptionItemProps: PropGetter = useCallback(\n (props = {}) =>\n getItemProps({\n role: radio ? \"menuitemradio\" : \"menuitemcheckbox\",\n ...props,\n onClick: handlerAll(props.onClick, () =>\n !disabled ? onChange?.(value) : noop,\n ),\n }),\n [disabled, getItemProps, onChange, radio, value],\n )\n\n return {\n type,\n selected,\n getIndicatorProps,\n getOptionItemProps,\n }\n}\n\nexport type UseMenuOptionItemReturn = ReturnType<typeof useMenuOptionItem>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-menu.js","names":["createContext","noop","ariaAttr","dataAttr","handlerAll","isTruthyDataAttr","isString","isArray"],"sources":["../../../../src/components/menu/use-menu.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent, MouseEvent, RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { Descendant, Descendants } from \"../../hooks/use-descendants\"\nimport type { UseDisclosureProps } from \"../../hooks/use-disclosure\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport { useDisclosure } from \"../../hooks/use-disclosure\"\nimport {\n ariaAttr,\n assignRef,\n createContext,\n dataAttr,\n handlerAll,\n isArray,\n isString,\n isTruthyDataAttr,\n mergeRefs,\n noop,\n runKeyAction,\n useUpdateEffect,\n} from \"../../utils\"\n\ntype SubMenuDirection = \"end\" | \"start\"\n\ninterface MenuDescendantProps {\n id: string\n}\ntype MenuDescendant = Descendant<HTMLDivElement, MenuDescendantProps>\n\nconst {\n DescendantsContext: MenuDescendantsContext,\n useDescendant: useMenuDescendant,\n useDescendantRegister: useMenuDescendantRegister,\n useDescendants: useMenuDescendants,\n} = createDescendants<HTMLDivElement, MenuDescendantProps>()\n\nexport { MenuDescendantsContext, useMenuDescendant, useMenuDescendants }\n\ninterface MenuContext extends Pick<\n UseMenuReturn,\n | \"disabled\"\n | \"onActiveDescendant\"\n | \"onClose\"\n | \"onCloseSubMenu\"\n | \"onOpen\"\n | \"onSelect\"\n | \"subMenu\"\n | \"subMenuDirection\"\n> {}\n\nconst [MenuContext, useMenuContext] = createContext<MenuContext>({\n name: \"MenuContext\",\n})\n\ninterface MenuGroupContext extends Pick<UseMenuGroupReturn, \"getLabelProps\"> {}\n\nconst [MenuGroupContext, useMenuGroupContext] = createContext<MenuGroupContext>(\n {\n name: \"MenuGroupContext\",\n },\n)\n\ninterface MainMenuContext {\n descendants: Descendants<HTMLDivElement, MenuDescendantProps>\n onActiveDescendant: (descendant?: MenuDescendant) => void\n onCloseRef: RefObject<() => void>\n onSelect: (value?: string, closeOnSelect?: boolean) => void\n closeOnSelect?: boolean\n}\n\nconst [MainMenuContext, useMainMenuContext] = createContext<MainMenuContext>({\n name: \"MainMenuContext\",\n strict: false,\n})\n\ninterface MenuOptionGroupContext {\n type: \"checkbox\" | \"radio\"\n value: string | string[]\n onChange?: (value: string) => void\n}\n\nconst [MenuOptionGroupContext, useMenuOptionGroupContext] =\n createContext<MenuOptionGroupContext>({\n name: \"MenuOptionGroupContext\",\n })\n\nexport {\n MainMenuContext,\n MenuContext,\n MenuGroupContext,\n MenuOptionGroupContext,\n useMainMenuContext,\n useMenuContext,\n useMenuGroupContext,\n useMenuOptionGroupContext,\n}\n\nexport interface UseMenuProps extends Omit<UseDisclosureProps, \"timing\"> {\n /**\n * If `true`, the menu item will be closed when selected.\n *\n * @default true\n */\n closeOnSelect?: boolean\n /**\n * If `true`, the menu will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The direction of the sub menu.\n *\n * @default 'end'\n */\n subMenuDirection?: SubMenuDirection\n /**\n * Callback invoked when a menu item is selected.\n */\n onSelect?: (value?: string) => void\n}\n\nexport const useMenu = ({\n closeOnSelect,\n defaultOpen,\n disabled = false,\n open: openProp,\n subMenuDirection = \"end\",\n onClose: onCloseProp,\n onOpen: onOpenProp,\n onSelect: onSelectProp,\n}: UseMenuProps = {}) => {\n const triggerId = useId()\n const contentId = useId()\n const descendants = useMenuDescendants()\n const updateRef = useRef<() => void>(noop)\n const onCloseRef = useRef<() => void>(noop)\n const contentRef = useRef<HTMLDivElement>(null)\n const { open, onClose, onOpen } = useDisclosure({\n defaultOpen,\n open: openProp,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n })\n const onCloseSubMenu = useCallback(() => onCloseRef.current(), [])\n const onActiveDescendant = useCallback(\n (\n descendant?: MenuDescendant,\n options: FocusOptions = { preventScroll: true },\n ) => {\n if (!contentRef.current || !descendant || disabled) return\n\n contentRef.current.setAttribute(\"aria-activedescendant\", descendant.id)\n\n descendants.active(descendant, options)\n },\n [descendants, disabled],\n )\n const { mainCloseOnSelect, subMenu, getSubMenuProps, onMainSelect } =\n useSubMenu({\n descendants,\n disabled,\n open,\n subMenuDirection,\n onActiveDescendant,\n onClose,\n onOpen,\n })\n\n closeOnSelect ??= mainCloseOnSelect ?? true\n\n const onSelect = useCallback(\n (value?: string, closeOnSelectProp = closeOnSelect) => {\n if (disabled) return\n\n onSelectProp?.(value)\n onMainSelect?.(value, closeOnSelectProp)\n\n if (!closeOnSelectProp) return\n\n onClose()\n },\n [closeOnSelect, disabled, onClose, onMainSelect, onSelectProp],\n )\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (disabled) return\n\n ev.preventDefault()\n\n if (!open) onOpen()\n else onClose()\n },\n [disabled, onClose, onOpen, open],\n )\n\n const onContextMenu = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (disabled) return\n\n ev.preventDefault()\n onOpen()\n updateRef.current()\n },\n [disabled, onOpen],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) return\n\n runKeyAction(ev, {\n ArrowDown: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n })\n },\n ArrowUp: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledLastValue()\n\n onActiveDescendant(descendant)\n })\n },\n Enter: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n })\n },\n Space: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n })\n },\n })\n },\n [descendants, disabled, onActiveDescendant, onOpen],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}) => ({\n ...getSubMenuProps({\n id: triggerId,\n \"aria-controls\": open ? contentId : undefined,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-expanded\": open,\n \"aria-haspopup\": \"menu\",\n \"data-trigger\": dataAttr(true),\n role: \"button\",\n tabIndex: disabled ? -1 : 0,\n ...props,\n onClick: handlerAll(props.onClick, onClick),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n }),\n [contentId, disabled, getSubMenuProps, onClick, onKeyDown, open, triggerId],\n )\n\n const getContextTriggerProps: PropGetter = useCallback(\n (props = {}) => ({\n id: triggerId,\n \"aria-controls\": open ? contentId : undefined,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-expanded\": open,\n \"aria-haspopup\": \"menu\",\n \"data-trigger\": dataAttr(true),\n role: \"application\",\n ...props,\n onContextMenu: handlerAll(props.onContextMenu, onContextMenu),\n }),\n [contentId, disabled, onContextMenu, open, triggerId],\n )\n\n const getContentProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps(\n {\n id: contentId,\n ref: contentRef,\n \"aria-labelledby\": triggerId,\n role: \"menu\",\n },\n props,\n )(),\n [contentId, triggerId],\n )\n\n const getSeparatorProps: PropGetter = useCallback(\n (props) => ({ role: \"separator\", ...props }),\n [],\n )\n\n return {\n closeOnSelect,\n descendants,\n disabled,\n open,\n subMenu,\n subMenuDirection,\n updateRef,\n getContentProps,\n getContextTriggerProps,\n getSeparatorProps,\n getTriggerProps,\n onActiveDescendant,\n onClose,\n onCloseRef,\n onCloseSubMenu,\n onOpen,\n onSelect,\n }\n}\n\nexport type UseMenuReturn = ReturnType<typeof useMenu>\n\nexport interface UseSubMenuProps extends Omit<\n Required<UseDisclosureProps>,\n \"defaultOpen\" | \"timing\"\n> {\n descendants: Descendants<HTMLDivElement, MenuDescendantProps>\n onActiveDescendant: (descendant?: MenuDescendant) => void\n disabled?: boolean\n subMenuDirection?: SubMenuDirection\n}\n\nexport const useSubMenu = ({\n descendants,\n disabled = false,\n open,\n subMenuDirection = \"end\",\n onActiveDescendant,\n onClose,\n onOpen,\n}: UseSubMenuProps) => {\n const uuid = useId()\n const {\n closeOnSelect: mainCloseOnSelect,\n descendants: mainDescendants,\n onActiveDescendant: onActiveMainDescendant,\n onCloseRef,\n onSelect: onMainSelect,\n } = useMainMenuContext() ?? {}\n const subMenu = !!mainDescendants && !!onActiveMainDescendant\n const createRegister = useMenuDescendantRegister(mainDescendants)\n const triggerRef = useRef<HTMLDivElement>(null)\n\n const dataDisabled = useCallback((node?: HTMLDivElement | null) => {\n node ??= triggerRef.current\n\n if (!node) return false\n\n const dataDisabled = isTruthyDataAttr(node.getAttribute(\"data-disabled\"))\n\n return dataDisabled\n }, [])\n\n const ariaDisabled = useCallback((node?: HTMLDivElement | null) => {\n node ??= triggerRef.current\n\n if (!node) return false\n\n const ariaDisabled = isTruthyDataAttr(node.getAttribute(\"aria-disabled\"))\n\n return ariaDisabled\n }, [])\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (!subMenu) return\n\n ev.defaultPrevented = disabled || dataDisabled() || ariaDisabled()\n },\n [ariaDisabled, dataDisabled, disabled, subMenu],\n )\n\n const onMouseEnter = useCallback(() => {\n if (!subMenu || disabled || dataDisabled() || ariaDisabled()) return\n\n onOpen()\n }, [ariaDisabled, dataDisabled, disabled, onOpen, subMenu])\n\n const onMouseMove = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (!subMenu || disabled || dataDisabled() || ariaDisabled()) return\n\n const descendant = descendants.value(triggerRef.current)\n\n onActiveMainDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n [\n ariaDisabled,\n dataDisabled,\n descendants,\n disabled,\n onActiveMainDescendant,\n subMenu,\n ],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n if (!subMenu || disabled) return\n\n const currentDescendant = open ? descendants : mainDescendants\n const onActiveCurrentDescendant = open\n ? onActiveDescendant\n : onActiveMainDescendant\n\n runKeyAction(ev, {\n ArrowDown: () => {\n const descendant = currentDescendant.enabledNextValue(\n triggerRef.current,\n )\n\n onActiveCurrentDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n ArrowUp: () => {\n const descendant = currentDescendant.enabledPrevValue(\n triggerRef.current,\n )\n\n onActiveCurrentDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n End: () => {\n const descendant = currentDescendant.enabledLastValue()\n\n onActiveCurrentDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n Home: () => {\n const descendant = currentDescendant.enabledFirstValue()\n\n onActiveCurrentDescendant(descendant)\n\n ev.defaultPrevented = true\n },\n [subMenuDirection === \"end\" ? \"ArrowRight\" : \"ArrowLeft\"]: () => {\n onOpen()\n\n setTimeout(() => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n })\n\n ev.defaultPrevented = true\n },\n })\n },\n [\n subMenu,\n disabled,\n open,\n descendants,\n mainDescendants,\n onActiveDescendant,\n onActiveMainDescendant,\n subMenuDirection,\n onOpen,\n ],\n )\n\n assignRef(onCloseRef, onClose)\n\n const getSubMenuProps: PropGetter = useCallback(\n ({ id = uuid, ...props } = {}) =>\n mergeProps(\n {\n ref: mergeRefs(\n triggerRef,\n createRegister({\n id,\n disabled: (node) =>\n disabled || dataDisabled(node) || ariaDisabled(node),\n }),\n ),\n role: subMenu ? \"menuitem\" : \"button\",\n },\n props,\n { onClick, onKeyDown, onMouseEnter, onMouseMove },\n )(),\n [\n uuid,\n subMenu,\n createRegister,\n onClick,\n onKeyDown,\n onMouseEnter,\n onMouseMove,\n disabled,\n dataDisabled,\n ariaDisabled,\n ],\n )\n\n return { mainCloseOnSelect, subMenu, getSubMenuProps, onMainSelect }\n}\n\nexport type UseSubMenuReturn = ReturnType<typeof useSubMenu>\n\nexport interface UseMenuGroupProps extends HTMLProps {}\n\nexport const useMenuGroup = ({ ...rest }: UseMenuGroupProps) => {\n const labelId = useId()\n\n const getGroupProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps(\n {\n \"aria-labelledby\": labelId,\n role: \"group\",\n },\n rest,\n props,\n )(),\n [labelId, rest],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props) => ({ id: labelId, role: \"presentation\", ...props }),\n [labelId],\n )\n\n return { getGroupProps, getLabelProps }\n}\n\nexport type UseMenuGroupReturn = ReturnType<typeof useMenuGroup>\n\nexport interface UseMenuItemProps extends Omit<HTMLProps, \"onSelect\"> {\n /**\n * If `true`, the menu item will be closed when selected.\n */\n closeOnSelect?: boolean\n /**\n * If `true`, the menu item will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The value of the menu item.\n */\n value?: string\n /**\n * Callback invoked when the menu item is selected.\n */\n onSelect?: (value?: string) => void\n}\n\nexport const useMenuItem = ({\n id,\n \"aria-disabled\": ariaDisabled,\n \"data-disabled\": dataDisabled,\n \"data-trigger\": dataTrigger,\n closeOnSelect,\n disabled = false,\n value,\n onSelect: onSelectProp,\n ...rest\n}: UseMenuItemProps) => {\n const trigger = isTruthyDataAttr(dataTrigger)\n const {\n disabled: rootDisabled,\n subMenu,\n subMenuDirection,\n onActiveDescendant,\n onClose,\n onCloseSubMenu,\n onSelect: onRootSelect,\n } = useMenuContext()\n const uuid = useId()\n const itemRef = useRef<HTMLDivElement>(null)\n const subMenuTrigger = subMenu && trigger\n\n id ??= uuid\n\n const { descendants, register } = useMenuDescendant({\n id,\n disabled: disabled || subMenuTrigger,\n })\n\n const onSelect = useCallback(\n (value?: string) => {\n if (disabled || rootDisabled) return\n\n onSelectProp?.(value)\n onRootSelect(value, closeOnSelect)\n },\n [closeOnSelect, disabled, onRootSelect, onSelectProp, rootDisabled],\n )\n\n const onActive = useCallback(() => {\n if (disabled) return\n\n const descendant = descendants.value(itemRef.current)\n\n onActiveDescendant(descendant)\n }, [descendants, disabled, onActiveDescendant])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n runKeyAction(ev, {\n ArrowDown: () => {\n const descendant = descendants.enabledNextValue(itemRef.current)\n\n onActiveDescendant(descendant)\n },\n ArrowUp: () => {\n const descendant = descendants.enabledPrevValue(itemRef.current)\n\n onActiveDescendant(descendant)\n },\n End: () => {\n const descendant = descendants.enabledLastValue()\n\n onActiveDescendant(descendant)\n },\n Enter: () => onSelect(value),\n Home: () => {\n const descendant = descendants.enabledFirstValue()\n\n onActiveDescendant(descendant)\n },\n Space: () => onSelect(value),\n [subMenuDirection === \"end\" ? \"ArrowLeft\" : \"ArrowRight\"]: () => {\n if (!subMenu) return\n\n onClose()\n\n const descendant = descendants.firstValue()\n\n descendant?.node.focus()\n },\n })\n },\n [\n descendants,\n onActiveDescendant,\n onClose,\n onSelect,\n subMenu,\n subMenuDirection,\n value,\n ],\n )\n\n const getItemProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps(\n {\n id,\n ref: mergeRefs(itemRef, register),\n \"aria-disabled\": ariaDisabled ?? ariaAttr(disabled),\n \"data-disabled\": dataDisabled ?? dataAttr(disabled),\n role: \"menuitem\",\n tabIndex: -1,\n },\n rest,\n props,\n {\n onClick: () => onSelect(value),\n onFocus: onActive,\n onKeyDown: onKeyDown,\n onMouseMove: () => {\n onCloseSubMenu()\n onActive()\n },\n },\n )(),\n [\n id,\n ariaDisabled,\n disabled,\n dataDisabled,\n rest,\n register,\n onActive,\n onKeyDown,\n onSelect,\n value,\n onCloseSubMenu,\n ],\n )\n\n return {\n subMenuTrigger,\n getItemProps,\n }\n}\n\nexport type UseMenuItemReturn = ReturnType<typeof useMenuItem>\n\nexport type MenuOptionGroupType = \"checkbox\" | \"radio\"\nexport type MenuOptionGroupValue<Y extends MenuOptionGroupType> =\n Y extends \"checkbox\" ? string[] : string\n\nexport interface UseMenuOptionGroupProps<\n Y extends MenuOptionGroupType = \"checkbox\",\n M extends MenuOptionGroupValue<Y> = MenuOptionGroupValue<Y>,\n> {\n /**\n * The initial value of the menu item group.\n */\n defaultValue?: M\n /**\n * The type of the menu option group.\n */\n type?: Y\n /**\n * The value of the menu item group.\n */\n value?: M\n /**\n * The callback fired when any children checkbox is checked or unchecked.\n */\n onChange?: (value: M) => void\n}\n\nexport const useMenuOptionGroup = <\n Y extends \"checkbox\" | \"radio\" = \"checkbox\",\n M extends (Y extends \"checkbox\" ? string[] : string) = Y extends \"checkbox\"\n ? string[]\n : string,\n>({\n type = \"checkbox\" as Y,\n defaultValue = (type === \"checkbox\" ? [] : \"\") as M,\n value: valueProp,\n onChange: onChangeProp,\n}: UseMenuOptionGroupProps<Y, M>) => {\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const radio = type === \"radio\"\n\n const onChange = useCallback(\n (selectedValue: string) => {\n setValue((prev) => {\n if (radio && isString(prev)) return selectedValue as M\n else if (!radio && isArray(prev))\n return (\n prev.includes(selectedValue)\n ? prev.filter((value) => value !== selectedValue)\n : prev.concat(selectedValue)\n ) as M\n else return prev\n })\n },\n [radio, setValue],\n )\n\n useUpdateEffect(() => {\n setValue(valueProp!)\n }, [valueProp])\n\n return {\n type,\n value,\n onChange,\n }\n}\n\nexport type UseMenuOptionGroupReturn = ReturnType<typeof useMenuOptionGroup>\n\nexport interface UseMenuOptionItemProps extends UseMenuItemProps {\n /**\n * The value of the menu option item.\n */\n value: string\n}\n\nexport const useMenuOptionItem = ({\n disabled,\n value,\n ...rest\n}: UseMenuOptionItemProps) => {\n const { type, value: selectedValue, onChange } = useMenuOptionGroupContext()\n const { getItemProps } = useMenuItem({ disabled, value, ...rest })\n const radio = type === \"radio\" && isString(selectedValue)\n const checkbox = type === \"checkbox\" && isArray(selectedValue)\n const selected = radio\n ? value === selectedValue\n : checkbox\n ? selectedValue.includes(value)\n : false\n\n const getIndicatorProps: PropGetter = useCallback(\n ({ style, ...props } = {}) => ({\n style: { opacity: selected ? 1 : 0, ...style },\n ...props,\n }),\n [selected],\n )\n\n const getOptionItemProps: PropGetter = useCallback(\n (props = {}) =>\n getItemProps({\n role: radio ? \"menuitemradio\" : \"menuitemcheckbox\",\n ...props,\n onClick: handlerAll(props.onClick, () =>\n !disabled ? onChange?.(value) : noop,\n ),\n }),\n [disabled, getItemProps, onChange, radio, value],\n )\n\n return {\n type,\n selected,\n getIndicatorProps,\n getOptionItemProps,\n }\n}\n\nexport type UseMenuOptionItemReturn = ReturnType<typeof useMenuOptionItem>\n"],"mappings":"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"}
|
|
@@ -118,10 +118,10 @@ const ModalCloseTrigger = withContext("button", {
|
|
|
118
118
|
...getCloseTriggerProps(mergeProps(closeTriggerProps, props)())
|
|
119
119
|
};
|
|
120
120
|
});
|
|
121
|
-
const ModalCloseButton = withContext(
|
|
122
|
-
const { closeButtonProps
|
|
123
|
-
return { ...
|
|
124
|
-
});
|
|
121
|
+
const ModalCloseButton = withContext((props) => {
|
|
122
|
+
const { closeButtonProps } = useComponentContext();
|
|
123
|
+
return /* @__PURE__ */ jsx(ModalCloseTrigger, { children: /* @__PURE__ */ jsx(CloseButton, { ...mergeProps(closeButtonProps, props)() }) });
|
|
124
|
+
}, "closeButton")();
|
|
125
125
|
const ModalOverlay = withContext((props) => {
|
|
126
126
|
const { animationScheme, duration: durationProp, getOverlayProps, overlayProps } = useComponentContext();
|
|
127
127
|
const duration = useValue(durationProp);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","names":["isArray","motion","cast"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n extends\n Omit<UseModalReturn, \"getRootProps\">,\n UsePopupAnimationProps,\n Pick<\n ModalRootProps,\n | \"bodyProps\"\n | \"closeButtonProps\"\n | \"closeTriggerProps\"\n | \"contentProps\"\n | \"footerProps\"\n | \"headerProps\"\n | \"openTriggerProps\"\n | \"overlayProps\"\n | \"titleProps\"\n | \"withCloseButton\"\n > {}\n\nexport interface ModalRootProps\n extends\n Omit<HTMLStyledProps<\"div\">, \"scrollBehavior\" | \"title\">,\n ThemeProps<ModalStyle>,\n Omit<UseModalProps, \"title\">,\n Pick<\n FocusLockProps,\n | \"autoFocus\"\n | \"finalFocusRef\"\n | \"initialFocusRef\"\n | \"lockFocusAcrossFrames\"\n | \"restoreFocus\"\n >,\n UsePopupAnimationProps,\n ShorthandModalContentProps {\n /**\n * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n *\n * @default false.\n */\n allowPinchZoom?: boolean\n /**\n * If `true`, scrolling will be disabled on the `body` when the modal opens.\n *\n * @default true\n */\n blockScrollOnMount?: boolean\n /**\n * The modal trigger to use.\n */\n trigger?: ReactNode\n /**\n * If `true`, display the modal close button.\n *\n * @default true\n */\n withCloseButton?: boolean\n /**\n * If `true`, display the modal overlay.\n *\n * @default true\n */\n withOverlay?: boolean\n /**\n * Props for body element.\n */\n bodyProps?: Omit<ModalBodyProps, \"children\">\n /**\n * Props for close button element.\n */\n closeButtonProps?: Omit<ModalCloseButtonProps, \"children\">\n /**\n * Props for close trigger element.\n */\n closeTriggerProps?: Omit<ModalCloseTriggerProps, \"asChild\" | \"children\">\n /**\n * Props for content element.\n */\n contentProps?: Omit<ModalContentProps, \"children\">\n /**\n * Props for footer element.\n */\n footerProps?: Omit<ModalFooterProps, \"children\">\n /**\n * Props for header element.\n */\n headerProps?: Omit<ModalHeaderProps, \"children\">\n /**\n * Props for open trigger element.\n */\n openTriggerProps?: Omit<ModalOpenTriggerProps, \"asChild\" | \"children\">\n /**\n * Props for overlay element.\n */\n overlayProps?: Omit<ModalOverlayProps, \"children\">\n /**\n * Props to be forwarded to the portal component.\n */\n portalProps?: Omit<PortalProps, \"children\">\n /**\n * Props for title element.\n */\n titleProps?: Omit<ModalTitleProps, \"children\">\n /**\n * Callback function to run side effects after the modal has closed.\n */\n onCloseComplete?: () => void\n}\n\nconst {\n ComponentContext,\n PropsContext: ModalPropsContext,\n useComponentContext,\n usePropsContext: useModalPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n \"modal\",\n modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/**\n * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n *\n * @see https://yamada-ui.com/docs/components/modal\n */\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n ({\n allowPinchZoom = false,\n animationScheme = \"scale\",\n autoFocus,\n blockScrollOnMount = true,\n body,\n cancel,\n children,\n duration,\n finalFocusRef,\n footer,\n header,\n initialFocusRef,\n lockFocusAcrossFrames = true,\n middle,\n restoreFocus,\n success,\n title,\n trigger,\n withCloseButton = true,\n withOverlay = true,\n bodyProps,\n closeButtonProps,\n closeTriggerProps,\n contentProps,\n footerProps,\n headerProps,\n openTriggerProps,\n overlayProps,\n portalProps,\n titleProps,\n onCancel,\n onCloseComplete,\n onMiddle,\n onSuccess,\n ...props\n }) => {\n const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n children,\n ModalOpenTrigger,\n ModalOverlay,\n )\n const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n const { open, getRootProps, ...rest } = useModal(props)\n const customOpenTrigger = trigger ? (\n <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n ) : null\n const context = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n withCloseButton,\n bodyProps,\n closeButtonProps,\n closeTriggerProps,\n contentProps,\n footerProps,\n headerProps,\n openTriggerProps,\n overlayProps,\n titleProps,\n ...rest,\n }),\n [\n animationScheme,\n duration,\n open,\n withCloseButton,\n contentProps,\n bodyProps,\n footerProps,\n headerProps,\n titleProps,\n openTriggerProps,\n closeTriggerProps,\n closeButtonProps,\n overlayProps,\n rest,\n ],\n )\n\n return (\n <ComponentContext value={context}>\n {openTrigger ?? customOpenTrigger}\n\n <AnimatePresence onExitComplete={onCloseComplete}>\n {open ? (\n <Portal {...portalProps}>\n <FocusLock\n autoFocus={autoFocus}\n finalFocusRef={finalFocusRef}\n initialFocusRef={initialFocusRef}\n lockFocusAcrossFrames={lockFocusAcrossFrames}\n restoreFocus={restoreFocus}\n >\n <RemoveScroll\n allowPinchZoom={allowPinchZoom}\n enabled={blockScrollOnMount}\n forwardProps\n >\n <styled.div {...getRootProps()}>\n {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n {hasChildren ? (\n omittedChildren\n ) : (\n <ShorthandModalContent\n body={body}\n cancel={cancel}\n footer={footer}\n header={header}\n middle={middle}\n success={success}\n title={title}\n onCancel={onCancel}\n onMiddle={onMiddle}\n onSuccess={onSuccess}\n />\n )}\n </styled.div>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n \"button\",\n { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n const { getOpenTriggerProps, openTriggerProps } = useComponentContext()\n\n return {\n asChild: true,\n ...getOpenTriggerProps(mergeProps(openTriggerProps, props)()),\n }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n \"button\",\n { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n const { closeTriggerProps, getCloseTriggerProps } = useComponentContext()\n\n return {\n asChild: true,\n ...getCloseTriggerProps(mergeProps(closeTriggerProps, props)()),\n }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)(undefined, (props) => {\n const { closeButtonProps, getCloseButtonProps } = useComponentContext()\n\n return { ...getCloseButtonProps(mergeProps(closeButtonProps, props)()) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n const {\n animationScheme,\n duration: durationProp,\n getOverlayProps,\n overlayProps,\n } = useComponentContext()\n const duration = useValue(durationProp)\n\n return (\n <motion.div\n custom={{ duration }}\n {...(animationScheme !== \"none\"\n ? {\n animate: \"enter\",\n exit: \"exit\",\n initial: \"exit\",\n variants: fadeVariants,\n }\n : {})}\n {...cast<HTMLMotionProps>(\n getOverlayProps(cast<HTMLProps>(mergeProps(overlayProps, props)())),\n )}\n />\n )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n ({ children, ...rest }) => {\n const {\n animationScheme,\n duration,\n withCloseButton,\n contentProps,\n getContentProps,\n } = useComponentContext()\n const [omittedChildren, customCloseButton] = useSplitChildren(\n children,\n ModalCloseButton,\n )\n const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <motion.section\n {...popupAnimationProps}\n {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n getContentProps(\n cast<HTMLProps<\"section\">>(mergeProps(contentProps, rest)()),\n ),\n )}\n >\n {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n {omittedChildren}\n </motion.section>\n )\n },\n \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n /**\n * The modal body to use.\n */\n body?: ModalBodyProps | ReactNode\n /**\n * The modal cancel button to use.\n */\n cancel?: ButtonProps | ReactNode\n /**\n * The modal footer to use.\n */\n footer?: ModalFooterProps | ReactNode\n /**\n * The modal header to use.\n */\n header?: ModalHeaderProps | ReactNode\n /**\n * The modal middle button to use.\n */\n middle?: ButtonProps | ReactNode\n /**\n * The modal success button to use.\n */\n success?: ButtonProps | ReactNode\n /**\n * The modal title to use.\n */\n title?: ModalTitleProps | ReactNode\n /**\n * The callback invoked when cancel button clicked.\n */\n onCancel?: (onClose: () => void) => void\n /**\n * The callback invoked when middle button clicked.\n */\n onMiddle?: (onClose: () => void) => void\n /**\n * The callback invoked when success button clicked.\n */\n onSuccess?: (onClose: () => void) => void\n}\n\nconst ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n body,\n cancel,\n footer,\n header,\n middle,\n success,\n title,\n onCancel,\n onMiddle,\n onSuccess,\n}) => {\n const { onClose } = useComponentContext()\n const customHeader = wrapOrPassProps(ModalHeader, header)\n const customTitle = wrapOrPassProps(ModalTitle, title)\n const customBody = wrapOrPassProps(ModalBody, body)\n const customFooter = wrapOrPassProps(ModalFooter, footer)\n const customCancel = wrapOrPassProps(Button, cancel, {\n colorScheme: \"mono\",\n variant: \"ghost\",\n onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n })\n const customMiddle = wrapOrPassProps(Button, middle, {\n colorScheme: \"secondary\",\n onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n })\n const customSuccess = wrapOrPassProps(Button, success, {\n colorScheme: \"primary\",\n onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n })\n\n return (\n <ModalContent>\n {customHeader ??\n (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n {customBody}\n {customFooter ??\n (customCancel || customMiddle || customSuccess ? (\n <ModalFooter>\n {customCancel}\n {customMiddle}\n {customSuccess}\n </ModalFooter>\n ) : null)}\n </ModalContent>\n )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n \"header\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps, headerProps } = useComponentContext()\n\n return { ...getHeaderProps(mergeProps(headerProps, props)()) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps, titleProps } = useComponentContext()\n\n return { ...getTitleProps(mergeProps(titleProps, props)()) }\n },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { bodyProps, getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(mergeProps(bodyProps, props)()) }\n },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n \"footer\",\n \"footer\",\n)(undefined, (props) => {\n const { footerProps, getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(mergeProps(footerProps, props)()) }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuIA,MAAM,EACJ,kBACA,cAAc,mBACd,qBACA,iBAAiB,sBACjB,aACA,iBACE,oBACF,SACA,UACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,iBAAiB,OACjB,kBAAkB,SAClB,WACA,qBAAqB,MACrB,MACA,QACA,UACA,UACA,eACA,QACA,QACA,iBACA,wBAAwB,MACxB,QACA,cACA,SACA,OACA,SACA,kBAAkB,MAClB,cAAc,MACd,WACA,kBACA,mBACA,cACA,aACA,aACA,kBACA,cACA,aACA,YACA,UACA,iBACA,UACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,iBAAiB,aAAa,iBAAiB,iBACpD,UACA,kBACA,YACF;CACA,MAAM,eAAA,GAAcA,cAAAA,QAAAA,CAAQ,eAAe,KAAK,CAAC,CAAC,gBAAgB;CAClE,MAAM,EAAE,MAAM,cAAc,GAAG,SAAS,SAAS,KAAK;CACtD,MAAM,oBAAoB,UACxB,oBAAC,kBAAD,EAAA,UAAmB,QAA0B,CAAA,IAC3C;CACJ,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;CACL,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,qBAAC,kBAAD;EAAkB,OAAO;EAAzB,UAAA,CACG,eAAe,mBAEhB,oBAAC,iBAAD;GAAiB,gBAAgB;GAC9B,UAAA,OACC,oBAAC,QAAD;IAAQ,GAAI;IACV,UAAA,oBAAC,WAAD;KACa;KACI;KACE;KACM;KACT;KAEd,UAAA,oBAAC,cAAD;MACkB;MAChB,SAAS;MACT,cAAA;MAEA,UAAA,qBAAC,OAAO,KAAR;OAAY,GAAI,aAAa;OAA7B,UAAA,CACG,kBAAkB,cAAc,oBAAC,cAAD,CAAe,CAAA,IAAI,OAEnD,cACC,kBAEA,oBAAC,uBAAD;QACQ;QACE;QACA;QACA;QACA;QACC;QACF;QACG;QACA;QACC;OACZ,CAAA,CAEO;;KACA,CAAA;IACL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"}
|
|
1
|
+
{"version":3,"file":"modal.js","names":["isArray","motion","cast"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n extends\n Omit<UseModalReturn, \"getRootProps\">,\n UsePopupAnimationProps,\n Pick<\n ModalRootProps,\n | \"bodyProps\"\n | \"closeButtonProps\"\n | \"closeTriggerProps\"\n | \"contentProps\"\n | \"footerProps\"\n | \"headerProps\"\n | \"openTriggerProps\"\n | \"overlayProps\"\n | \"titleProps\"\n | \"withCloseButton\"\n > {}\n\nexport interface ModalRootProps\n extends\n Omit<HTMLStyledProps<\"div\">, \"scrollBehavior\" | \"title\">,\n ThemeProps<ModalStyle>,\n Omit<UseModalProps, \"title\">,\n Pick<\n FocusLockProps,\n | \"autoFocus\"\n | \"finalFocusRef\"\n | \"initialFocusRef\"\n | \"lockFocusAcrossFrames\"\n | \"restoreFocus\"\n >,\n UsePopupAnimationProps,\n ShorthandModalContentProps {\n /**\n * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n *\n * @default false.\n */\n allowPinchZoom?: boolean\n /**\n * If `true`, scrolling will be disabled on the `body` when the modal opens.\n *\n * @default true\n */\n blockScrollOnMount?: boolean\n /**\n * The modal trigger to use.\n */\n trigger?: ReactNode\n /**\n * If `true`, display the modal close button.\n *\n * @default true\n */\n withCloseButton?: boolean\n /**\n * If `true`, display the modal overlay.\n *\n * @default true\n */\n withOverlay?: boolean\n /**\n * Props for body element.\n */\n bodyProps?: Omit<ModalBodyProps, \"children\">\n /**\n * Props for close button element.\n */\n closeButtonProps?: Omit<ModalCloseButtonProps, \"children\">\n /**\n * Props for close trigger element.\n */\n closeTriggerProps?: Omit<ModalCloseTriggerProps, \"asChild\" | \"children\">\n /**\n * Props for content element.\n */\n contentProps?: Omit<ModalContentProps, \"children\">\n /**\n * Props for footer element.\n */\n footerProps?: Omit<ModalFooterProps, \"children\">\n /**\n * Props for header element.\n */\n headerProps?: Omit<ModalHeaderProps, \"children\">\n /**\n * Props for open trigger element.\n */\n openTriggerProps?: Omit<ModalOpenTriggerProps, \"asChild\" | \"children\">\n /**\n * Props for overlay element.\n */\n overlayProps?: Omit<ModalOverlayProps, \"children\">\n /**\n * Props to be forwarded to the portal component.\n */\n portalProps?: Omit<PortalProps, \"children\">\n /**\n * Props for title element.\n */\n titleProps?: Omit<ModalTitleProps, \"children\">\n /**\n * Callback function to run side effects after the modal has closed.\n */\n onCloseComplete?: () => void\n}\n\nconst {\n ComponentContext,\n PropsContext: ModalPropsContext,\n useComponentContext,\n usePropsContext: useModalPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n \"modal\",\n modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/**\n * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n *\n * @see https://yamada-ui.com/docs/components/modal\n */\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n ({\n allowPinchZoom = false,\n animationScheme = \"scale\",\n autoFocus,\n blockScrollOnMount = true,\n body,\n cancel,\n children,\n duration,\n finalFocusRef,\n footer,\n header,\n initialFocusRef,\n lockFocusAcrossFrames = true,\n middle,\n restoreFocus,\n success,\n title,\n trigger,\n withCloseButton = true,\n withOverlay = true,\n bodyProps,\n closeButtonProps,\n closeTriggerProps,\n contentProps,\n footerProps,\n headerProps,\n openTriggerProps,\n overlayProps,\n portalProps,\n titleProps,\n onCancel,\n onCloseComplete,\n onMiddle,\n onSuccess,\n ...props\n }) => {\n const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n children,\n ModalOpenTrigger,\n ModalOverlay,\n )\n const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n const { open, getRootProps, ...rest } = useModal(props)\n const customOpenTrigger = trigger ? (\n <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n ) : null\n const context = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n withCloseButton,\n bodyProps,\n closeButtonProps,\n closeTriggerProps,\n contentProps,\n footerProps,\n headerProps,\n openTriggerProps,\n overlayProps,\n titleProps,\n ...rest,\n }),\n [\n animationScheme,\n duration,\n open,\n withCloseButton,\n contentProps,\n bodyProps,\n footerProps,\n headerProps,\n titleProps,\n openTriggerProps,\n closeTriggerProps,\n closeButtonProps,\n overlayProps,\n rest,\n ],\n )\n\n return (\n <ComponentContext value={context}>\n {openTrigger ?? customOpenTrigger}\n\n <AnimatePresence onExitComplete={onCloseComplete}>\n {open ? (\n <Portal {...portalProps}>\n <FocusLock\n autoFocus={autoFocus}\n finalFocusRef={finalFocusRef}\n initialFocusRef={initialFocusRef}\n lockFocusAcrossFrames={lockFocusAcrossFrames}\n restoreFocus={restoreFocus}\n >\n <RemoveScroll\n allowPinchZoom={allowPinchZoom}\n enabled={blockScrollOnMount}\n forwardProps\n >\n <styled.div {...getRootProps()}>\n {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n {hasChildren ? (\n omittedChildren\n ) : (\n <ShorthandModalContent\n body={body}\n cancel={cancel}\n footer={footer}\n header={header}\n middle={middle}\n success={success}\n title={title}\n onCancel={onCancel}\n onMiddle={onMiddle}\n onSuccess={onSuccess}\n />\n )}\n </styled.div>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n \"button\",\n { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n const { getOpenTriggerProps, openTriggerProps } = useComponentContext()\n\n return {\n asChild: true,\n ...getOpenTriggerProps(mergeProps(openTriggerProps, props)()),\n }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n \"button\",\n { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n const { closeTriggerProps, getCloseTriggerProps } = useComponentContext()\n\n return {\n asChild: true,\n ...getCloseTriggerProps(mergeProps(closeTriggerProps, props)()),\n }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n (props) => {\n const { closeButtonProps } = useComponentContext()\n\n return (\n <ModalCloseTrigger>\n <CloseButton {...mergeProps(closeButtonProps, props)()} />\n </ModalCloseTrigger>\n )\n },\n \"closeButton\",\n)()\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n const {\n animationScheme,\n duration: durationProp,\n getOverlayProps,\n overlayProps,\n } = useComponentContext()\n const duration = useValue(durationProp)\n\n return (\n <motion.div\n custom={{ duration }}\n {...(animationScheme !== \"none\"\n ? {\n animate: \"enter\",\n exit: \"exit\",\n initial: \"exit\",\n variants: fadeVariants,\n }\n : {})}\n {...cast<HTMLMotionProps>(\n getOverlayProps(cast<HTMLProps>(mergeProps(overlayProps, props)())),\n )}\n />\n )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n ({ children, ...rest }) => {\n const {\n animationScheme,\n duration,\n withCloseButton,\n contentProps,\n getContentProps,\n } = useComponentContext()\n const [omittedChildren, customCloseButton] = useSplitChildren(\n children,\n ModalCloseButton,\n )\n const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <motion.section\n {...popupAnimationProps}\n {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n getContentProps(\n cast<HTMLProps<\"section\">>(mergeProps(contentProps, rest)()),\n ),\n )}\n >\n {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n {omittedChildren}\n </motion.section>\n )\n },\n \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n /**\n * The modal body to use.\n */\n body?: ModalBodyProps | ReactNode\n /**\n * The modal cancel button to use.\n */\n cancel?: ButtonProps | ReactNode\n /**\n * The modal footer to use.\n */\n footer?: ModalFooterProps | ReactNode\n /**\n * The modal header to use.\n */\n header?: ModalHeaderProps | ReactNode\n /**\n * The modal middle button to use.\n */\n middle?: ButtonProps | ReactNode\n /**\n * The modal success button to use.\n */\n success?: ButtonProps | ReactNode\n /**\n * The modal title to use.\n */\n title?: ModalTitleProps | ReactNode\n /**\n * The callback invoked when cancel button clicked.\n */\n onCancel?: (onClose: () => void) => void\n /**\n * The callback invoked when middle button clicked.\n */\n onMiddle?: (onClose: () => void) => void\n /**\n * The callback invoked when success button clicked.\n */\n onSuccess?: (onClose: () => void) => void\n}\n\nconst ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n body,\n cancel,\n footer,\n header,\n middle,\n success,\n title,\n onCancel,\n onMiddle,\n onSuccess,\n}) => {\n const { onClose } = useComponentContext()\n const customHeader = wrapOrPassProps(ModalHeader, header)\n const customTitle = wrapOrPassProps(ModalTitle, title)\n const customBody = wrapOrPassProps(ModalBody, body)\n const customFooter = wrapOrPassProps(ModalFooter, footer)\n const customCancel = wrapOrPassProps(Button, cancel, {\n colorScheme: \"mono\",\n variant: \"ghost\",\n onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n })\n const customMiddle = wrapOrPassProps(Button, middle, {\n colorScheme: \"secondary\",\n onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n })\n const customSuccess = wrapOrPassProps(Button, success, {\n colorScheme: \"primary\",\n onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n })\n\n return (\n <ModalContent>\n {customHeader ??\n (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n {customBody}\n {customFooter ??\n (customCancel || customMiddle || customSuccess ? (\n <ModalFooter>\n {customCancel}\n {customMiddle}\n {customSuccess}\n </ModalFooter>\n ) : null)}\n </ModalContent>\n )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n \"header\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps, headerProps } = useComponentContext()\n\n return { ...getHeaderProps(mergeProps(headerProps, props)()) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps, titleProps } = useComponentContext()\n\n return { ...getTitleProps(mergeProps(titleProps, props)()) }\n },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { bodyProps, getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(mergeProps(bodyProps, props)()) }\n },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n \"footer\",\n \"footer\",\n)(undefined, (props) => {\n const { footerProps, getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(mergeProps(footerProps, props)()) }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuIA,MAAM,EACJ,kBACA,cAAc,mBACd,qBACA,iBAAiB,sBACjB,aACA,iBACE,oBACF,SACA,UACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,iBAAiB,OACjB,kBAAkB,SAClB,WACA,qBAAqB,MACrB,MACA,QACA,UACA,UACA,eACA,QACA,QACA,iBACA,wBAAwB,MACxB,QACA,cACA,SACA,OACA,SACA,kBAAkB,MAClB,cAAc,MACd,WACA,kBACA,mBACA,cACA,aACA,aACA,kBACA,cACA,aACA,YACA,UACA,iBACA,UACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,iBAAiB,aAAa,iBAAiB,iBACpD,UACA,kBACA,YACF;CACA,MAAM,eAAA,GAAcA,cAAAA,QAAAA,CAAQ,eAAe,KAAK,CAAC,CAAC,gBAAgB;CAClE,MAAM,EAAE,MAAM,cAAc,GAAG,SAAS,SAAS,KAAK;CACtD,MAAM,oBAAoB,UACxB,oBAAC,kBAAD,EAAA,UAAmB,QAA0B,CAAA,IAC3C;CACJ,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;CACL,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,qBAAC,kBAAD;EAAkB,OAAO;EAAzB,UAAA,CACG,eAAe,mBAEhB,oBAAC,iBAAD;GAAiB,gBAAgB;GAC9B,UAAA,OACC,oBAAC,QAAD;IAAQ,GAAI;IACV,UAAA,oBAAC,WAAD;KACa;KACI;KACE;KACM;KACT;KAEd,UAAA,oBAAC,cAAD;MACkB;MAChB,SAAS;MACT,cAAA;MAEA,UAAA,qBAAC,OAAO,KAAR;OAAY,GAAI,aAAa;OAA7B,UAAA,CACG,kBAAkB,cAAc,oBAAC,cAAD,CAAe,CAAA,IAAI,OAEnD,cACC,kBAEA,oBAAC,uBAAD;QACQ;QACE;QACA;QACA;QACA;QACC;QACF;QACG;QACA;QACC;OACZ,CAAA,CAEO;;KACA,CAAA;IACL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"}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { useIds } from "../../utils/dom.js";
|
|
2
|
-
import { utils_exports } from "../../utils/index.js";
|
|
3
2
|
import { mergeProps } from "../../core/components/props.js";
|
|
4
3
|
import { useDisclosure } from "../../hooks/use-disclosure/use-disclosure.js";
|
|
5
|
-
import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
|
|
6
4
|
import { useCallback } from "react";
|
|
7
5
|
// src/components/modal/use-modal.ts
|
|
8
6
|
const useModal = ({ closeOnEsc = true, closeOnOverlay = true, defaultOpen, open: openProp, onClose: onCloseProp, onEsc, onOpen: onOpenProp, ...rest } = {}) => {
|
|
@@ -13,7 +11,6 @@ const useModal = ({ closeOnEsc = true, closeOnOverlay = true, defaultOpen, open:
|
|
|
13
11
|
onOpen: onOpenProp
|
|
14
12
|
});
|
|
15
13
|
const [contentId, titleId, bodyId] = useIds();
|
|
16
|
-
const { t } = useI18n("modal");
|
|
17
14
|
const onKeyDown = useCallback((ev) => {
|
|
18
15
|
if (ev.key !== "Escape") return;
|
|
19
16
|
if (closeOnEsc) {
|
|
@@ -27,37 +24,20 @@ const useModal = ({ closeOnEsc = true, closeOnOverlay = true, defaultOpen, open:
|
|
|
27
24
|
onEsc
|
|
28
25
|
]);
|
|
29
26
|
const getRootProps = useCallback((props) => mergeProps(rest, props ?? {})(), [rest]);
|
|
30
|
-
const getOverlayProps = useCallback((props = {}) => ({
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
if (closeOnOverlay) onClose();
|
|
36
|
-
})
|
|
37
|
-
}), [closeOnOverlay, onClose]);
|
|
38
|
-
const getOpenTriggerProps = useCallback((props = {}) => ({
|
|
27
|
+
const getOverlayProps = useCallback((props = {}) => mergeProps({ "aria-hidden": "true" }, props, { onClick: (ev) => {
|
|
28
|
+
ev.stopPropagation();
|
|
29
|
+
if (closeOnOverlay) onClose();
|
|
30
|
+
} })(), [closeOnOverlay, onClose]);
|
|
31
|
+
const getOpenTriggerProps = useCallback((props = {}) => mergeProps({
|
|
39
32
|
"aria-controls": open ? contentId : void 0,
|
|
40
33
|
"aria-expanded": open,
|
|
41
|
-
"aria-haspopup": "dialog"
|
|
42
|
-
|
|
43
|
-
...props,
|
|
44
|
-
onClick: (0, utils_exports.handlerAll)(props.onClick, onOpen)
|
|
45
|
-
}), [
|
|
34
|
+
"aria-haspopup": "dialog"
|
|
35
|
+
}, props, { onClick: onOpen })(), [
|
|
46
36
|
contentId,
|
|
47
37
|
onOpen,
|
|
48
|
-
open
|
|
49
|
-
t
|
|
38
|
+
open
|
|
50
39
|
]);
|
|
51
|
-
const getCloseTriggerProps = useCallback((props = {}) => ({
|
|
52
|
-
"aria-label": t("Close modal"),
|
|
53
|
-
...props,
|
|
54
|
-
onClick: (0, utils_exports.handlerAll)(props.onClick, onClose)
|
|
55
|
-
}), [onClose, t]);
|
|
56
|
-
const getCloseButtonProps = useCallback((props = {}) => ({
|
|
57
|
-
"aria-label": t("Close modal"),
|
|
58
|
-
...props,
|
|
59
|
-
onClick: (0, utils_exports.handlerAll)(props.onClick, onClose)
|
|
60
|
-
}), [onClose, t]);
|
|
40
|
+
const getCloseTriggerProps = useCallback((props = {}) => mergeProps(props, { onClick: onClose })(), [onClose]);
|
|
61
41
|
const getContentProps = useCallback((props = {}) => mergeProps({
|
|
62
42
|
id: contentId,
|
|
63
43
|
"aria-describedby": bodyId,
|
|
@@ -81,7 +61,6 @@ const useModal = ({ closeOnEsc = true, closeOnOverlay = true, defaultOpen, open:
|
|
|
81
61
|
id: bodyId,
|
|
82
62
|
...props
|
|
83
63
|
}), [bodyId]),
|
|
84
|
-
getCloseButtonProps,
|
|
85
64
|
getCloseTriggerProps,
|
|
86
65
|
getContentProps,
|
|
87
66
|
getFooterProps: useCallback((props) => ({ ...props }), []),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-modal.js","names":[
|
|
1
|
+
{"version":3,"file":"use-modal.js","names":[],"sources":["../../../../src/components/modal/use-modal.ts"],"sourcesContent":["import type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseDisclosureProps } from \"../../hooks/use-disclosure\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useDisclosure } from \"../../hooks/use-disclosure\"\nimport { useIds } from \"../../utils\"\n\nexport interface UseModalProps\n extends HTMLProps, Omit<UseDisclosureProps, \"timing\"> {\n /**\n * If `true`, the modal will close when the `Esc` key is pressed.\n *\n * @default true\n */\n closeOnEsc?: boolean\n /**\n * If `true`, the modal will close when the overlay is clicked.\n *\n * @default true\n */\n closeOnOverlay?: boolean\n /**\n * Callback invoked when the escape key is pressed and focus is within modal.\n */\n onEsc?: () => void\n}\n\nexport const useModal = ({\n closeOnEsc = true,\n closeOnOverlay = true,\n defaultOpen,\n open: openProp,\n onClose: onCloseProp,\n onEsc,\n onOpen: onOpenProp,\n ...rest\n}: UseModalProps = {}) => {\n const { open, onClose, onOpen } = useDisclosure({\n defaultOpen,\n open: openProp,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n })\n const [contentId, titleId, bodyId] = useIds()\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.key !== \"Escape\") return\n\n if (closeOnEsc) {\n ev.stopPropagation()\n onClose()\n }\n\n onEsc?.()\n },\n [closeOnEsc, onClose, onEsc],\n )\n\n const getRootProps: PropGetter = useCallback(\n (props) => mergeProps(rest, props ?? {})(),\n [rest],\n )\n\n const getOverlayProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps({ \"aria-hidden\": \"true\" }, props, {\n onClick: (ev) => {\n ev.stopPropagation()\n\n if (closeOnOverlay) onClose()\n },\n })(),\n [closeOnOverlay, onClose],\n )\n\n const getOpenTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) =>\n mergeProps(\n {\n \"aria-controls\": open ? contentId : undefined,\n \"aria-expanded\": open,\n \"aria-haspopup\": \"dialog\",\n },\n props,\n { onClick: onOpen },\n )(),\n [contentId, onOpen, open],\n )\n\n const getCloseTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => mergeProps(props, { onClick: onClose })(),\n [onClose],\n )\n\n const getContentProps: PropGetter<\"section\"> = useCallback(\n (props = {}) =>\n mergeProps(\n {\n id: contentId,\n \"aria-describedby\": bodyId,\n \"aria-labelledby\": titleId,\n \"aria-modal\": \"true\",\n role: \"dialog\",\n },\n props,\n { onKeyDown },\n )(),\n [bodyId, contentId, onKeyDown, titleId],\n )\n\n const getHeaderProps: PropGetter<\"header\"> = useCallback(\n (props) => ({ ...props }),\n [],\n )\n\n const getTitleProps: PropGetter<\"h2\"> = useCallback(\n (props) => ({ id: titleId, ...props }),\n [titleId],\n )\n\n const getBodyProps: PropGetter = useCallback(\n (props) => ({ id: bodyId, ...props }),\n [bodyId],\n )\n\n const getFooterProps: PropGetter<\"footer\"> = useCallback(\n (props) => ({ ...props }),\n [],\n )\n\n return {\n open,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getOpenTriggerProps,\n getOverlayProps,\n getRootProps,\n getTitleProps,\n onClose,\n onOpen,\n }\n}\n\nexport type UseModalReturn = ReturnType<typeof useModal>\n"],"mappings":";;;;;AA4BA,MAAa,YAAY,EACvB,aAAa,MACb,iBAAiB,MACjB,aACA,MAAM,UACN,SAAS,aACT,OACA,QAAQ,YACR,GAAG,SACc,CAAC,MAAM;CACxB,MAAM,EAAE,MAAM,SAAS,WAAW,cAAc;EAC9C;EACA,MAAM;EACN,SAAS;EACT,QAAQ;CACV,CAAC;CACD,MAAM,CAAC,WAAW,SAAS,UAAU,OAAO;CAE5C,MAAM,YAAY,aACf,OAAsB;EACrB,IAAI,GAAG,QAAQ,UAAU;EAEzB,IAAI,YAAY;GACd,GAAG,gBAAgB;GACnB,QAAQ;EACV;EAEA,QAAQ;CACV,GACA;EAAC;EAAY;EAAS;CAAK,CAC7B;CAEA,MAAM,eAA2B,aAC9B,UAAU,WAAW,MAAM,SAAS,CAAC,CAAC,CAAC,CAAC,GACzC,CAAC,IAAI,CACP;CAEA,MAAM,kBAA8B,aACjC,QAAQ,CAAC,MACR,WAAW,EAAE,eAAe,OAAO,GAAG,OAAO,EAC3C,UAAU,OAAO;EACf,GAAG,gBAAgB;EAEnB,IAAI,gBAAgB,QAAQ;CAC9B,EACF,CAAC,CAAC,CAAC,GACL,CAAC,gBAAgB,OAAO,CAC1B;CAEA,MAAM,sBAA4C,aAC/C,QAAQ,CAAC,MACR,WACE;EACE,iBAAiB,OAAO,YAAY,KAAA;EACpC,iBAAiB;EACjB,iBAAiB;CACnB,GACA,OACA,EAAE,SAAS,OAAO,CACpB,CAAC,CAAC,GACJ;EAAC;EAAW;EAAQ;CAAI,CAC1B;CAEA,MAAM,uBAA6C,aAChD,QAAQ,CAAC,MAAM,WAAW,OAAO,EAAE,SAAS,QAAQ,CAAC,CAAC,CAAC,GACxD,CAAC,OAAO,CACV;CAEA,MAAM,kBAAyC,aAC5C,QAAQ,CAAC,MACR,WACE;EACE,IAAI;EACJ,oBAAoB;EACpB,mBAAmB;EACnB,cAAc;EACd,MAAM;CACR,GACA,OACA,EAAE,UAAU,CACd,CAAC,CAAC,GACJ;EAAC;EAAQ;EAAW;EAAW;CAAO,CACxC;CAEA,MAAM,iBAAuC,aAC1C,WAAW,EAAE,GAAG,MAAM,IACvB,CAAC,CACH;CAEA,MAAM,gBAAkC,aACrC,WAAW;EAAE,IAAI;EAAS,GAAG;CAAM,IACpC,CAAC,OAAO,CACV;CAYA,OAAO;EACL;EACA,cAZ+B,aAC9B,WAAW;GAAE,IAAI;GAAQ,GAAG;EAAM,IACnC,CAAC,MAAM,CAUI;EACX;EACA;EACA,gBAV2C,aAC1C,WAAW,EAAE,GAAG,MAAM,IACvB,CAAC,CAQY;EACb;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
|
|
@@ -39,7 +39,7 @@ const SidebarRoot = withProvider(({ breakpoint = "md", mode: modeProp = "offcanv
|
|
|
39
39
|
const mobile = useBreakpointValue(breakpoint ? { [breakpoint]: true } : { base: false }) ?? false;
|
|
40
40
|
const mode = useValue(modeProp);
|
|
41
41
|
const placement = useValue(placementProp);
|
|
42
|
-
const { descendants, expandedValue, open, selectedValue, getContentProps, getFooterProps, getHeaderProps, getRootProps, getSidePanelProps, getTriggerProps, onClose, onExpandedChange, onOpen, onSelectedChange, onToggle } = useSidebar({
|
|
42
|
+
const { descendants, expandedValue, open, selectedValue, getContentProps, getFooterProps, getHandleProps, getHeaderProps, getRootProps, getSidePanelProps, getTriggerProps, onClose, onExpandedChange, onOpen, onSelectedChange, onToggle } = useSidebar({
|
|
43
43
|
mobile,
|
|
44
44
|
...rest
|
|
45
45
|
});
|
|
@@ -70,6 +70,7 @@ const SidebarRoot = withProvider(({ breakpoint = "md", mode: modeProp = "offcanv
|
|
|
70
70
|
placement,
|
|
71
71
|
getContentProps,
|
|
72
72
|
getFooterProps,
|
|
73
|
+
getHandleProps,
|
|
73
74
|
getHeaderProps,
|
|
74
75
|
getSidePanelProps,
|
|
75
76
|
getTriggerProps
|
|
@@ -80,6 +81,7 @@ const SidebarRoot = withProvider(({ breakpoint = "md", mode: modeProp = "offcanv
|
|
|
80
81
|
getContentProps,
|
|
81
82
|
getFooterProps,
|
|
82
83
|
getHeaderProps,
|
|
84
|
+
getHandleProps,
|
|
83
85
|
getSidePanelProps,
|
|
84
86
|
getTriggerProps
|
|
85
87
|
]);
|
|
@@ -243,13 +245,11 @@ const SidebarContent = withContext(({ children, items, ...rest }) => {
|
|
|
243
245
|
children: computedChildren
|
|
244
246
|
});
|
|
245
247
|
}, "content")();
|
|
246
|
-
const SidebarHandle = withContext((props) => {
|
|
248
|
+
const SidebarHandle = withContext("button", "handle")(void 0, (props) => {
|
|
249
|
+
const { getHandleProps } = useComponentContext();
|
|
247
250
|
const { handleProps } = useSidePanelComponentContext();
|
|
248
|
-
return
|
|
249
|
-
|
|
250
|
-
children: /* @__PURE__ */ jsx(styled.button, { tabIndex: -1 })
|
|
251
|
-
});
|
|
252
|
-
}, "handle")();
|
|
251
|
+
return getHandleProps(mergeProps(handleProps, props)());
|
|
252
|
+
});
|
|
253
253
|
const SidebarGroup = withContext(({ children, items, label, value: valueProp = (0, utils_exports.isString)(label) ? label : void 0, contentProps, labelProps, ...rest }) => {
|
|
254
254
|
const { groupProps } = useSidePanelComponentContext();
|
|
255
255
|
const computedChildren = useMemo(() => {
|