@yamada-ui/react 2.1.4-dev-20260323180356 → 2.1.4-dev-20260324185108
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/modal/modal.cjs +1 -1
- package/dist/cjs/components/modal/modal.cjs.map +1 -1
- package/dist/cjs/hooks/use-descendants/index.cjs +29 -26
- package/dist/cjs/hooks/use-descendants/index.cjs.map +1 -1
- package/dist/esm/components/modal/modal.js +1 -1
- package/dist/esm/components/modal/modal.js.map +1 -1
- package/dist/esm/hooks/use-descendants/index.js +29 -26
- package/dist/esm/hooks/use-descendants/index.js.map +1 -1
- package/dist/types/components/accordion/accordion.d.ts +2 -2
- package/dist/types/components/accordion/accordion.style.d.ts +1 -1
- package/dist/types/components/accordion/use-accordion.d.ts +63 -63
- package/dist/types/components/airy/airy.d.ts +2 -2
- package/dist/types/components/alert/alert.d.ts +2 -2
- package/dist/types/components/alpha-slider/alpha-slider.d.ts +2 -2
- package/dist/types/components/aspect-ratio/aspect-ratio.d.ts +2 -2
- package/dist/types/components/autocomplete/autocomplete.d.ts +2 -2
- package/dist/types/components/autocomplete/autocomplete.style.d.ts +1 -1
- package/dist/types/components/autocomplete/use-autocomplete.d.ts +18 -18
- package/dist/types/components/avatar/avatar.d.ts +5 -5
- package/dist/types/components/avatar/avatar.style.d.ts +1 -1
- package/dist/types/components/avatar/use-avatar-group.d.ts +2 -2
- package/dist/types/components/badge/badge.d.ts +2 -2
- package/dist/types/components/bleed/bleed.d.ts +2 -2
- package/dist/types/components/blockquote/blockquote.d.ts +2 -2
- package/dist/types/components/breadcrumb/breadcrumb.d.ts +2 -2
- package/dist/types/components/breadcrumb/breadcrumb.style.d.ts +1 -1
- package/dist/types/components/breadcrumb/use-breadcrumb.d.ts +2 -2
- package/dist/types/components/button/button.d.ts +2 -2
- package/dist/types/components/button/icon-button.d.ts +2 -2
- package/dist/types/components/calendar/calendar.d.ts +2 -2
- package/dist/types/components/calendar/calendar.style.d.ts +2 -2
- package/dist/types/components/calendar/use-calendar.d.ts +60 -60
- package/dist/types/components/card/card.d.ts +2 -2
- package/dist/types/components/carousel/carousel.d.ts +2 -2
- package/dist/types/components/carousel/carousel.style.d.ts +2 -2
- package/dist/types/components/carousel/use-carousel.d.ts +3 -3
- package/dist/types/components/center/center.d.ts +2 -2
- package/dist/types/components/chart/chart.d.ts +5 -5
- package/dist/types/components/chart/composed-chart.d.ts +2 -2
- package/dist/types/components/chart/donut-chart.d.ts +2 -2
- package/dist/types/components/chart/line-chart.d.ts +2 -2
- package/dist/types/components/chart/pie-chart.d.ts +2 -2
- package/dist/types/components/chart/radar-chart.d.ts +2 -2
- package/dist/types/components/chart/radial-chart.d.ts +2 -2
- package/dist/types/components/chart/use-chart.d.ts +2 -2
- package/dist/types/components/checkbox/checkbox.d.ts +5 -5
- package/dist/types/components/checkbox/checkbox.style.d.ts +1 -1
- package/dist/types/components/checkbox/use-checkbox-group.d.ts +2 -2
- package/dist/types/components/checkbox-card/checkbox-card.d.ts +5 -5
- package/dist/types/components/checkbox-card/checkbox-card.style.d.ts +1 -1
- package/dist/types/components/circle-progress/circle-progress.d.ts +2 -2
- package/dist/types/components/close-button/close-button.d.ts +2 -2
- package/dist/types/components/code/code.d.ts +2 -2
- package/dist/types/components/collapse/collapse.d.ts +2 -2
- package/dist/types/components/color-picker/color-picker.d.ts +2 -2
- package/dist/types/components/color-picker/use-color-picker.d.ts +2 -2
- package/dist/types/components/color-selector/color-selector.d.ts +2 -2
- package/dist/types/components/color-selector/color-selector.style.d.ts +2 -2
- package/dist/types/components/color-selector/use-color-selector.d.ts +3 -3
- package/dist/types/components/color-swatch/color-swatch.d.ts +2 -2
- package/dist/types/components/container/container.d.ts +2 -2
- package/dist/types/components/data-list/data-list.d.ts +2 -2
- package/dist/types/components/data-list/data-list.style.d.ts +1 -1
- package/dist/types/components/date-picker/date-picker.d.ts +2 -2
- package/dist/types/components/date-picker/use-date-picker.d.ts +4 -4
- package/dist/types/components/drawer/drawer.d.ts +2 -2
- package/dist/types/components/dropzone/dropzone.d.ts +4 -4
- package/dist/types/components/editable/editable.d.ts +4 -4
- package/dist/types/components/editable/use-editable.d.ts +2 -2
- package/dist/types/components/em/em.d.ts +2 -2
- package/dist/types/components/empty-state/empty-state.d.ts +2 -2
- package/dist/types/components/empty-state/empty-state.style.d.ts +2 -2
- package/dist/types/components/fade/fade.d.ts +2 -2
- package/dist/types/components/field/field.d.ts +3 -3
- package/dist/types/components/field/use-field-props.d.ts +4 -4
- package/dist/types/components/fieldset/fieldset.d.ts +3 -3
- package/dist/types/components/file-button/file-button.d.ts +2 -2
- package/dist/types/components/file-button/use-file-button.d.ts +18 -18
- package/dist/types/components/file-input/file-input.d.ts +2 -2
- package/dist/types/components/file-input/use-file-input.d.ts +15 -15
- package/dist/types/components/flex/flex.d.ts +2 -2
- package/dist/types/components/flip/flip.d.ts +4 -4
- package/dist/types/components/flip/flip.style.d.ts +1 -1
- package/dist/types/components/float/float.d.ts +2 -2
- package/dist/types/components/form/form.d.ts +3 -3
- package/dist/types/components/format/format-byte.d.ts +4 -4
- package/dist/types/components/format/format-date-time.d.ts +4 -4
- package/dist/types/components/format/format-number.d.ts +2 -2
- package/dist/types/components/grid/grid-item.d.ts +2 -2
- package/dist/types/components/grid/grid.d.ts +2 -2
- package/dist/types/components/group/group.d.ts +2 -2
- package/dist/types/components/group/use-group.d.ts +2 -2
- package/dist/types/components/heading/heading.d.ts +2 -2
- package/dist/types/components/hue-slider/hue-slider.d.ts +3 -3
- package/dist/types/components/icon/icon.d.ts +4 -4
- package/dist/types/components/image/image.d.ts +2 -2
- package/dist/types/components/indicator/indicator.d.ts +4 -4
- package/dist/types/components/infinite-scroll-area/infinite-scroll-area.d.ts +2 -2
- package/dist/types/components/input/input-addon.d.ts +2 -2
- package/dist/types/components/input/input-element.d.ts +2 -2
- package/dist/types/components/input/input.d.ts +2 -2
- package/dist/types/components/kbd/kbd.d.ts +2 -2
- package/dist/types/components/link/link.d.ts +2 -2
- package/dist/types/components/link-box/link-box.d.ts +2 -2
- package/dist/types/components/list/list.d.ts +2 -2
- package/dist/types/components/list/list.style.d.ts +2 -2
- package/dist/types/components/loading/loading-provider.d.ts +2 -2
- package/dist/types/components/loading/loading.d.ts +3 -3
- package/dist/types/components/mark/mark.d.ts +2 -2
- package/dist/types/components/menu/menu.d.ts +2 -2
- package/dist/types/components/menu/menu.style.d.ts +2 -2
- package/dist/types/components/menu/use-menu.d.ts +63 -63
- package/dist/types/components/modal/modal.d.ts +3 -3
- package/dist/types/components/native-accordion/native-accordion.style.d.ts +2 -2
- package/dist/types/components/native-popover/native-popover.d.ts +2 -2
- package/dist/types/components/native-select/native-select.d.ts +2 -2
- package/dist/types/components/native-table/native-table.d.ts +4 -4
- package/dist/types/components/notice/notice.style.d.ts +1 -1
- package/dist/types/components/number-input/number-input.d.ts +2 -2
- package/dist/types/components/number-input/number-input.style.d.ts +1 -1
- package/dist/types/components/pagination/pagination.d.ts +2 -2
- package/dist/types/components/pagination/pagination.style.d.ts +1 -1
- package/dist/types/components/pagination/use-pagination.d.ts +2 -2
- package/dist/types/components/password-input/password-input.d.ts +2 -2
- package/dist/types/components/password-input/strength-meter.d.ts +2 -2
- package/dist/types/components/password-input/strength-meter.style.d.ts +1 -1
- package/dist/types/components/password-input/use-password-input.d.ts +2 -2
- package/dist/types/components/pin-input/pin-input.d.ts +2 -2
- package/dist/types/components/pin-input/use-pin-input.d.ts +59 -59
- package/dist/types/components/popover/popover.d.ts +2 -2
- package/dist/types/components/progress/progress.d.ts +4 -4
- package/dist/types/components/progress/use-progress.d.ts +706 -706
- package/dist/types/components/qr-code/qr-code.d.ts +2 -2
- package/dist/types/components/radio/radio.d.ts +5 -5
- package/dist/types/components/radio/radio.style.d.ts +1 -1
- package/dist/types/components/radio/use-radio-group.d.ts +2 -2
- package/dist/types/components/radio-card/radio-card.d.ts +5 -5
- package/dist/types/components/radio-card/radio-card.style.d.ts +1 -1
- package/dist/types/components/rating/rating.style.d.ts +2 -2
- package/dist/types/components/rating/use-rating.d.ts +7 -7
- package/dist/types/components/reorder/reorder.d.ts +2 -2
- package/dist/types/components/reorder/reorder.style.d.ts +1 -1
- package/dist/types/components/reorder/use-reorder.d.ts +3 -3
- package/dist/types/components/resizable/resizable.d.ts +2 -2
- package/dist/types/components/resizable/resizable.style.d.ts +2 -2
- package/dist/types/components/resizable/use-resizable.d.ts +2 -2
- package/dist/types/components/ripple/ripple.d.ts +2 -2
- package/dist/types/components/ripple/use-ripple.d.ts +2 -2
- package/dist/types/components/rotate/rotate.d.ts +2 -2
- package/dist/types/components/saturation-slider/saturation-slider.d.ts +2 -2
- package/dist/types/components/saturation-slider/use-saturation-slider.d.ts +2 -2
- package/dist/types/components/scroll-area/scroll-area.d.ts +2 -2
- package/dist/types/components/segmented-control/segmented-control.d.ts +2 -2
- package/dist/types/components/segmented-control/segmented-control.style.d.ts +2 -2
- package/dist/types/components/segmented-control/use-segmented-control.d.ts +61 -61
- package/dist/types/components/select/select.d.ts +2 -2
- package/dist/types/components/select/select.style.d.ts +1 -1
- package/dist/types/components/select/use-select.d.ts +17 -17
- package/dist/types/components/separator/separator.d.ts +2 -2
- package/dist/types/components/simple-grid/simple-grid.d.ts +2 -2
- package/dist/types/components/skeleton/skeleton.d.ts +2 -2
- package/dist/types/components/slide/slide.d.ts +2 -2
- package/dist/types/components/slide-fade/slide-fade.d.ts +2 -2
- package/dist/types/components/slider/slider.d.ts +2 -2
- package/dist/types/components/slider/use-slider.d.ts +2 -2
- package/dist/types/components/stack/h-stack.d.ts +2 -2
- package/dist/types/components/stack/stack.d.ts +2 -2
- package/dist/types/components/stack/v-stack.d.ts +2 -2
- package/dist/types/components/stack/z-stack.d.ts +2 -2
- package/dist/types/components/stat/stat.d.ts +2 -2
- package/dist/types/components/stat/stat.style.d.ts +2 -2
- package/dist/types/components/status/status.d.ts +2 -2
- package/dist/types/components/status/status.style.d.ts +2 -2
- package/dist/types/components/steps/steps.d.ts +2 -2
- package/dist/types/components/steps/steps.style.d.ts +1 -1
- package/dist/types/components/steps/use-steps.d.ts +62 -62
- package/dist/types/components/switch/switch.d.ts +2 -2
- package/dist/types/components/table/table.d.ts +2 -2
- package/dist/types/components/tabs/tabs.d.ts +2 -2
- package/dist/types/components/tabs/use-tabs.d.ts +120 -120
- package/dist/types/components/tag/tag.d.ts +2 -2
- package/dist/types/components/text/text.d.ts +2 -2
- package/dist/types/components/textarea/textarea.d.ts +2 -2
- package/dist/types/components/textarea/use-autosize.d.ts +2 -2
- package/dist/types/components/timeline/timeline.d.ts +5 -5
- package/dist/types/components/timeline/timeline.style.d.ts +2 -2
- package/dist/types/components/toggle/toggle.d.ts +3 -3
- package/dist/types/components/toggle/use-toggle-group.d.ts +2 -2
- package/dist/types/components/toggle/use-toggle.d.ts +2 -2
- package/dist/types/components/tooltip/tooltip.d.ts +2 -2
- package/dist/types/components/visually-hidden/visually-hidden.d.ts +2 -2
- package/dist/types/components/wrap/wrap.d.ts +2 -2
- package/dist/types/core/components/create-component.d.ts +7 -7
- package/dist/types/core/system/color-mode-provider.d.ts +2 -2
- package/dist/types/core/system/storage-script.d.ts +3 -3
- package/dist/types/core/system/styled.d.ts +2 -2
- package/dist/types/core/system/system-provider.d.ts +2 -2
- package/dist/types/hooks/use-breakpoint/use-breakpoint-state.d.ts +2 -2
- package/dist/types/hooks/use-clickable/index.d.ts +7 -7
- package/dist/types/hooks/use-clipboard/index.d.ts +2 -2
- package/dist/types/hooks/use-combobox/index.d.ts +90 -90
- package/dist/types/hooks/use-counter/index.d.ts +2 -2
- package/dist/types/hooks/use-descendants/index.d.ts +67 -67
- package/dist/types/hooks/use-field-sizing/index.d.ts +2 -2
- package/dist/types/hooks/use-hover/index.d.ts +2 -2
- package/dist/types/hooks/use-popper/index.d.ts +2 -2
- package/dist/types/providers/i18n-provider/i18n-provider.d.ts +2 -2
- package/dist/types/utils/children.d.ts +2 -2
- package/package.json +2 -2
|
@@ -32,7 +32,7 @@ const { ComponentContext, PropsContext: ModalPropsContext, useComponentContext,
|
|
|
32
32
|
/**
|
|
33
33
|
* `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.
|
|
34
34
|
*
|
|
35
|
-
* @see https://yamada-ui.com/docs/components/
|
|
35
|
+
* @see https://yamada-ui.com/docs/components/modal
|
|
36
36
|
*/
|
|
37
37
|
const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "scale", autoFocus, blockScrollOnMount = true, body, cancel, children, duration, finalFocusRef, footer, header, initialFocusRef, lockFocusAcrossFrames = true, middle, restoreFocus, success, title, trigger, withCloseButton = true, withOverlay = true, portalProps, onCancel, onCloseComplete, onMiddle, onSuccess, ...props }) => {
|
|
38
38
|
const [omittedChildren, openTrigger, customOverlay] = require_children.useSplitChildren(children, ModalOpenTrigger, ModalOverlay);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.cjs","names":["createSlotComponent","modalStyle","useSplitChildren","useModal","AnimatePresence","Portal","FocusLock","RemoveScroll","styled","CloseButton","motion","fadeVariants","getPopupAnimationProps","ShorthandModalContent: FC<ShorthandModalContentProps>","wrapOrPassProps","Button"],"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 { PopupAnimationProps } 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, styled } from \"../../core\"\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 { getPopupAnimationProps } 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 PopupAnimationProps,\n Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n extends\n ThemeProps<ModalStyle>,\n Omit<UseModalProps, \"title\">,\n Pick<\n FocusLockProps,\n | \"autoFocus\"\n | \"finalFocusRef\"\n | \"initialFocusRef\"\n | \"lockFocusAcrossFrames\"\n | \"restoreFocus\"\n >,\n PopupAnimationProps,\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 to be forwarded to the portal component.\n */\n portalProps?: Omit<PortalProps, \"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/overlay/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 portalProps,\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\n const context = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n withCloseButton,\n ...rest,\n }),\n [animationScheme, duration, open, withCloseButton, rest],\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 } = useComponentContext()\n\n return { asChild: true, ...getOpenTriggerProps(props) }\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 { getCloseTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)(undefined, (props) => {\n const { getCloseButtonProps } = useComponentContext()\n\n return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n const { animationScheme, duration, getOverlayProps } = useComponentContext()\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>(getOverlayProps(cast<HTMLProps>(props)))}\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 { animationScheme, duration, withCloseButton, getContentProps } =\n useComponentContext()\n const [omittedChildren, customCloseButton] = useSplitChildren(\n children,\n ModalCloseButton,\n )\n\n return (\n <motion.section\n {...getPopupAnimationProps(animationScheme, duration)}\n {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n getContentProps(cast<HTMLProps<\"section\">>(rest)),\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\nexport const 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 } = useComponentContext()\n\n return { ...getHeaderProps(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 } = useComponentContext()\n\n return { ...getTitleProps(props) }\n },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(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 { getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"modal.cjs","names":["createSlotComponent","modalStyle","useSplitChildren","useModal","AnimatePresence","Portal","FocusLock","RemoveScroll","styled","CloseButton","motion","fadeVariants","getPopupAnimationProps","ShorthandModalContent: FC<ShorthandModalContentProps>","wrapOrPassProps","Button"],"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 { PopupAnimationProps } 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, styled } from \"../../core\"\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 { getPopupAnimationProps } 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 PopupAnimationProps,\n Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n extends\n ThemeProps<ModalStyle>,\n Omit<UseModalProps, \"title\">,\n Pick<\n FocusLockProps,\n | \"autoFocus\"\n | \"finalFocusRef\"\n | \"initialFocusRef\"\n | \"lockFocusAcrossFrames\"\n | \"restoreFocus\"\n >,\n PopupAnimationProps,\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 to be forwarded to the portal component.\n */\n portalProps?: Omit<PortalProps, \"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 portalProps,\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 ...rest,\n }),\n [animationScheme, duration, open, withCloseButton, rest],\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 } = useComponentContext()\n\n return { asChild: true, ...getOpenTriggerProps(props) }\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 { getCloseTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)(undefined, (props) => {\n const { getCloseButtonProps } = useComponentContext()\n\n return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n const { animationScheme, duration, getOverlayProps } = useComponentContext()\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>(getOverlayProps(cast<HTMLProps>(props)))}\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 { animationScheme, duration, withCloseButton, getContentProps } =\n useComponentContext()\n const [omittedChildren, customCloseButton] = useSplitChildren(\n children,\n ModalCloseButton,\n )\n\n return (\n <motion.section\n {...getPopupAnimationProps(animationScheme, duration)}\n {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n getContentProps(cast<HTMLProps<\"section\">>(rest)),\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\nexport const 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 } = useComponentContext()\n\n return { ...getHeaderProps(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 } = useComponentContext()\n\n return { ...getTitleProps(props) }\n },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(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 { getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}
|
|
@@ -27,6 +27,7 @@ const getPrevIndex = (current, max, loop) => {
|
|
|
27
27
|
if (loop && next < 0) next = max;
|
|
28
28
|
return next;
|
|
29
29
|
};
|
|
30
|
+
const isMatch = (props) => (descendant) => Object.entries(props ?? {}).every(([key, value]) => descendant[key] === value);
|
|
30
31
|
const descendantManager = () => {
|
|
31
32
|
const descendants = /* @__PURE__ */ new Map();
|
|
32
33
|
const setIndexes = (next) => {
|
|
@@ -55,8 +56,8 @@ const descendantManager = () => {
|
|
|
55
56
|
descendants.delete(node);
|
|
56
57
|
setIndexes(sortNodes(Array.from(descendants.keys())));
|
|
57
58
|
};
|
|
58
|
-
const count = () => values().length;
|
|
59
|
-
const enabledCount = () => enabledValues().length;
|
|
59
|
+
const count = (props) => values(props).length;
|
|
60
|
+
const enabledCount = (props) => enabledValues(props).length;
|
|
60
61
|
const active = (target, options) => {
|
|
61
62
|
if (!target) return;
|
|
62
63
|
if (!(target instanceof Node)) target = target.node;
|
|
@@ -77,28 +78,29 @@ const descendantManager = () => {
|
|
|
77
78
|
if (target instanceof Node) return enabledValues().findIndex(({ node }) => node.isSameNode(target));
|
|
78
79
|
else return enabledValues().findIndex(({ node }) => node.isSameNode(target.node));
|
|
79
80
|
};
|
|
80
|
-
const values = () => Array.from(descendants.values()).sort((a, b) => a.index - b.index);
|
|
81
|
-
const enabledValues = () => values().filter(({ disabled, node }) => !(0, require_utils_index.utils_exports.runIfFn)(disabled, node));
|
|
81
|
+
const values = (props) => Array.from(descendants.values()).filter(isMatch(props)).sort((a, b) => a.index - b.index);
|
|
82
|
+
const enabledValues = (props) => values(props).filter(({ disabled, node }) => !(0, require_utils_index.utils_exports.runIfFn)(disabled, node));
|
|
82
83
|
const value = (indexOrNode) => {
|
|
83
84
|
if (!count() || indexOrNode == null) return void 0;
|
|
84
85
|
return (0, require_utils_index.utils_exports.isNumber)(indexOrNode) ? values()[indexOrNode] : descendants.get(indexOrNode);
|
|
85
86
|
};
|
|
86
|
-
const enabledValue = (
|
|
87
|
-
if (!enabledCount()) return void 0;
|
|
88
|
-
return enabledValues()[
|
|
89
|
-
};
|
|
90
|
-
const firstValue = () =>
|
|
91
|
-
const enabledFirstValue = () =>
|
|
92
|
-
const lastValue = () =>
|
|
93
|
-
const enabledLastValue = () =>
|
|
94
|
-
const prevValue = (indexOrNode, loop = true) => {
|
|
95
|
-
|
|
96
|
-
|
|
87
|
+
const enabledValue = (indexOrNode) => {
|
|
88
|
+
if (!enabledCount() || indexOrNode == null) return void 0;
|
|
89
|
+
return enabledValues()[(0, require_utils_index.utils_exports.isNumber)(indexOrNode) ? indexOrNode : enabledIndexOf(indexOrNode)];
|
|
90
|
+
};
|
|
91
|
+
const firstValue = (props) => values(props).at(0);
|
|
92
|
+
const enabledFirstValue = (props) => enabledValues(props).at(0);
|
|
93
|
+
const lastValue = (props) => values(props).at(-1);
|
|
94
|
+
const enabledLastValue = (props) => enabledValues(props).at(-1);
|
|
95
|
+
const prevValue = (indexOrNode, loop = true, props) => {
|
|
96
|
+
const filtered = values(props);
|
|
97
|
+
if (!filtered.length || indexOrNode == null) return void 0;
|
|
98
|
+
const currentIndex = (0, require_utils_index.utils_exports.isNumber)(indexOrNode) ? filtered.findIndex((d) => d.index === indexOrNode) : filtered.findIndex((d) => d.node.isSameNode(indexOrNode instanceof Node ? indexOrNode : indexOrNode.node));
|
|
97
99
|
if (currentIndex === -1) return void 0;
|
|
98
|
-
return
|
|
100
|
+
return filtered[getPrevIndex(currentIndex, filtered.length - 1, loop)];
|
|
99
101
|
};
|
|
100
|
-
const enabledPrevValue = (indexOrNode, loop = true) => {
|
|
101
|
-
if (!enabledCount()) return void 0;
|
|
102
|
+
const enabledPrevValue = (indexOrNode, loop = true, props) => {
|
|
103
|
+
if (!enabledCount(props)) return void 0;
|
|
102
104
|
let index = (0, require_utils_index.utils_exports.isNumber)(indexOrNode) ? indexOrNode : indexOf(indexOrNode);
|
|
103
105
|
let enabledValue$1 = null;
|
|
104
106
|
let recurred = false;
|
|
@@ -110,19 +112,20 @@ const descendantManager = () => {
|
|
|
110
112
|
recurred = true;
|
|
111
113
|
}
|
|
112
114
|
const descendant = value(index);
|
|
113
|
-
enabledValue$1 = descendant && !(0, require_utils_index.utils_exports.runIfFn)(descendant.disabled, descendant.node) ? descendant : null;
|
|
115
|
+
enabledValue$1 = descendant && !(0, require_utils_index.utils_exports.runIfFn)(descendant.disabled, descendant.node) && isMatch(props)(descendant) ? descendant : null;
|
|
114
116
|
}
|
|
115
117
|
if (recurred) enabledValue$1.recurred = recurred;
|
|
116
118
|
return enabledValue$1;
|
|
117
119
|
};
|
|
118
|
-
const nextValue = (indexOrNode, loop = true) => {
|
|
119
|
-
|
|
120
|
-
|
|
120
|
+
const nextValue = (indexOrNode, loop = true, props) => {
|
|
121
|
+
const filtered = values(props);
|
|
122
|
+
if (!filtered.length || indexOrNode == null) return void 0;
|
|
123
|
+
const currentIndex = (0, require_utils_index.utils_exports.isNumber)(indexOrNode) ? filtered.findIndex((d) => d.index === indexOrNode) : filtered.findIndex((d) => d.node.isSameNode(indexOrNode instanceof Node ? indexOrNode : indexOrNode.node));
|
|
121
124
|
if (currentIndex === -1) return void 0;
|
|
122
|
-
return
|
|
125
|
+
return filtered[getNextIndex(currentIndex, filtered.length, loop)];
|
|
123
126
|
};
|
|
124
|
-
const enabledNextValue = (indexOrNode, loop = true) => {
|
|
125
|
-
if (!enabledCount()) return void 0;
|
|
127
|
+
const enabledNextValue = (indexOrNode, loop = true, props) => {
|
|
128
|
+
if (!enabledCount(props)) return void 0;
|
|
126
129
|
let index = (0, require_utils_index.utils_exports.isNumber)(indexOrNode) ? indexOrNode : indexOf(indexOrNode);
|
|
127
130
|
let enabledValue$1 = null;
|
|
128
131
|
let recurred = false;
|
|
@@ -134,7 +137,7 @@ const descendantManager = () => {
|
|
|
134
137
|
recurred = true;
|
|
135
138
|
}
|
|
136
139
|
const descendant = value(index);
|
|
137
|
-
enabledValue$1 = descendant && !(0, require_utils_index.utils_exports.runIfFn)(descendant.disabled, descendant.node) ? descendant : null;
|
|
140
|
+
enabledValue$1 = descendant && !(0, require_utils_index.utils_exports.runIfFn)(descendant.disabled, descendant.node) && isMatch(props)(descendant) ? descendant : null;
|
|
138
141
|
}
|
|
139
142
|
if (recurred) enabledValue$1.recurred = recurred;
|
|
140
143
|
return enabledValue$1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":["enabledValue","createContext","mergeRefs"],"sources":["../../../../src/hooks/use-descendants/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefCallback } from \"react\"\nimport { useRef } from \"react\"\nimport {\n createContext,\n isNumber,\n isTruthyDataAttr,\n mergeRefs,\n runIfFn,\n useSafeLayoutEffect,\n} from \"../../utils\"\n\nconst sortNodes = (nodes: Node[]) =>\n nodes.sort((a, b) => {\n const compare = a.compareDocumentPosition(b)\n\n if (\n compare & Node.DOCUMENT_POSITION_FOLLOWING ||\n compare & Node.DOCUMENT_POSITION_CONTAINED_BY\n )\n return -1\n\n if (\n compare & Node.DOCUMENT_POSITION_PRECEDING ||\n compare & Node.DOCUMENT_POSITION_CONTAINS\n )\n return 1\n\n if (\n compare & Node.DOCUMENT_POSITION_DISCONNECTED ||\n compare & Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC\n ) {\n console.warn(\"Cannot sort the given nodes.\")\n return 0\n } else {\n return 0\n }\n })\n\nconst getNextIndex = (current: number, max: number, loop: boolean) => {\n let next = current + 1\n\n if (loop && next >= max) next = 0\n\n return next\n}\n\nconst getPrevIndex = (current: number, max: number, loop: boolean) => {\n let next = current - 1\n\n if (loop && next < 0) next = max\n\n return next\n}\n\nexport type DescendantProps<Y extends HTMLElement = HTMLElement, M = {}> = M & {\n disabled?: ((node: Y) => boolean) | boolean\n}\n\nexport type Descendant<\n Y extends HTMLElement = HTMLElement,\n M = {},\n> = DescendantProps<Y, M> & {\n index: number\n node: Y\n recurred?: boolean\n}\n\nconst descendantManager = <Y extends HTMLElement = HTMLElement, M = {}>() => {\n const descendants = new Map<Y, Descendant<Y, M>>()\n\n const setIndexes = (next: Node[]) => {\n descendants.forEach((descendant) => {\n const index = next.indexOf(descendant.node)\n\n descendant.index = index\n descendant.node.dataset.index = descendant.index.toString()\n })\n }\n\n const set = (node: null | Y, props?: DescendantProps<Y, M>) => {\n if (!node || descendants.has(node)) return\n\n const keys = Array.from(descendants.keys()).concat(node)\n const sorted = sortNodes(keys)\n\n const descendant = { ...props, index: -1, node } as Descendant<Y, M>\n\n descendants.set(node, descendant)\n\n setIndexes(sorted)\n }\n\n const destroy = () => descendants.clear()\n\n const register = (props?: DescendantProps<Y, M>): RefCallback<Y> => {\n return (node: null | Y) => set(node, props)\n }\n\n const unregister = (node?: null | Y) => {\n if (node == null) return\n\n descendants.delete(node)\n\n const sorted = sortNodes(Array.from(descendants.keys()))\n\n setIndexes(sorted)\n }\n\n const count = () => values().length\n\n const enabledCount = () => enabledValues().length\n\n const active = (\n target?: Descendant<Y, M> | null | Y,\n options?: FocusOptions,\n ) => {\n if (!target) return\n\n if (!(target instanceof Node)) target = target.node\n\n if (isTruthyDataAttr(target.dataset.activedescendant)) return\n\n const descendants = values()\n\n descendants.forEach(({ node }) => {\n delete node.dataset.activedescendant\n })\n\n target.dataset.activedescendant = \"\"\n\n if (options) target.focus(options)\n }\n\n const indexOf = (target?: Descendant<Y, M> | null | Y) => {\n if (!target) return -1\n\n if (target instanceof Node) {\n return descendants.get(target)?.index ?? -1\n } else {\n return descendants.get(target.node)?.index ?? -1\n }\n }\n\n const enabledIndexOf = (target?: Descendant<Y, M> | null | Y) => {\n if (!target) return -1\n\n if (target instanceof Node) {\n return enabledValues().findIndex(({ node }) => node.isSameNode(target))\n } else {\n return enabledValues().findIndex(({ node }) =>\n node.isSameNode(target.node),\n )\n }\n }\n\n const values = () =>\n Array.from(descendants.values()).sort((a, b) => a.index - b.index)\n\n const enabledValues = () =>\n values().filter(({ disabled, node }) => !runIfFn(disabled, node))\n\n const value = (indexOrNode: null | number | Y) => {\n if (!count() || indexOrNode == null) return undefined\n\n return isNumber(indexOrNode)\n ? values()[indexOrNode]\n : descendants.get(indexOrNode)\n }\n\n const enabledValue = (index: number) => {\n if (!enabledCount()) return undefined\n\n return enabledValues()[index]\n }\n\n const firstValue = () => value(0)\n\n const enabledFirstValue = () => enabledValue(0)\n\n const lastValue = () => value(count() - 1)\n\n const enabledLastValue = () => enabledValue(enabledCount() - 1)\n\n const prevValue = (\n indexOrNode: Descendant<Y, M> | null | number | Y,\n loop = true,\n ) => {\n if (!count()) return undefined\n\n const currentIndex = isNumber(indexOrNode)\n ? indexOrNode\n : indexOf(indexOrNode)\n\n if (currentIndex === -1) return undefined\n\n const prevIndex = getPrevIndex(currentIndex, count() - 1, loop)\n\n return value(prevIndex)\n }\n\n const enabledPrevValue = (\n indexOrNode: Descendant<Y, M> | null | number | Y,\n loop = true,\n ) => {\n if (!enabledCount()) return undefined\n\n let index = isNumber(indexOrNode) ? indexOrNode : indexOf(indexOrNode)\n let enabledValue = null\n let recurred = false\n\n while (enabledValue == null) {\n index--\n\n if (index < 0) {\n if (!loop) return\n\n index = count() - 1\n recurred = true\n }\n\n const descendant = value(index)\n\n enabledValue =\n descendant && !runIfFn(descendant.disabled, descendant.node)\n ? descendant\n : null\n }\n\n if (recurred) enabledValue.recurred = recurred\n\n return enabledValue\n }\n\n const nextValue = (\n indexOrNode: Descendant<Y, M> | null | number | Y,\n loop = true,\n ) => {\n if (!count()) return undefined\n\n const currentIndex = isNumber(indexOrNode)\n ? indexOrNode\n : indexOf(indexOrNode)\n\n if (currentIndex === -1) return undefined\n\n const nextIndex = getNextIndex(currentIndex, count(), loop)\n\n return value(nextIndex)\n }\n\n const enabledNextValue = (\n indexOrNode: Descendant<Y, M> | null | number | Y,\n loop = true,\n ) => {\n if (!enabledCount()) return undefined\n\n let index = isNumber(indexOrNode) ? indexOrNode : indexOf(indexOrNode)\n let enabledValue = null\n let recurred = false\n\n while (enabledValue == null) {\n index++\n\n if (index >= count()) {\n if (!loop) return\n\n index = 0\n recurred = true\n }\n\n const descendant = value(index)\n\n enabledValue =\n descendant && !runIfFn(descendant.disabled, descendant.node)\n ? descendant\n : null\n }\n\n if (recurred) enabledValue.recurred = recurred\n\n return enabledValue\n }\n\n return {\n active,\n count,\n destroy,\n enabledCount,\n enabledFirstValue,\n enabledIndexOf,\n enabledLastValue,\n enabledNextValue,\n enabledPrevValue,\n enabledValue,\n enabledValues,\n firstValue,\n indexOf,\n lastValue,\n nextValue,\n prevValue,\n register,\n unregister,\n value,\n values,\n }\n}\n\nexport type Descendants<Y extends HTMLElement, M = {}> = ReturnType<\n typeof descendantManager<Y, M>\n>\n\nexport type CreateDescendantRegister<Y extends HTMLElement, M = {}> = (\n props?: DescendantProps<Y, M>,\n) => RefCallback<Y>\n\n/**\n * `useDescendants` is a custom hook that manages descendants.\n *\n * @see https://yamada-ui.com/docs/hooks/use-descendants\n */\nexport const createDescendants = <\n Y extends HTMLElement = HTMLElement,\n M = {},\n>() => {\n const [DescendantsContext, useDescendantsContext] = createContext<\n Descendants<Y, M>\n >({\n name: \"DescendantsContext\",\n })\n\n const useDescendantRegister = (descendants?: Descendants<Y, M>) => {\n const ref = useRef<Y>(null)\n\n useSafeLayoutEffect(() => {\n return () => {\n if (ref.current) descendants?.unregister(ref.current)\n }\n }, [])\n\n return (props?: DescendantProps<Y, M>): RefCallback<Y> =>\n mergeRefs(ref, descendants?.register(props))\n }\n\n const useDescendants = () => {\n const descendants = useRef(descendantManager<Y, M>())\n\n useSafeLayoutEffect(() => {\n return () => descendants.current.destroy()\n })\n\n return descendants.current\n }\n\n const useDescendant = (props?: DescendantProps<Y, M>) => {\n const descendants = useDescendantsContext()\n const createRegister = useDescendantRegister(descendants)\n\n return {\n descendants,\n register: createRegister(props),\n }\n }\n\n return {\n DescendantsContext,\n useDescendant,\n useDescendantRegister,\n useDescendants,\n useDescendantsContext,\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["enabledValue","createContext","mergeRefs"],"sources":["../../../../src/hooks/use-descendants/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefCallback } from \"react\"\nimport { useRef } from \"react\"\nimport {\n createContext,\n isNumber,\n isTruthyDataAttr,\n mergeRefs,\n runIfFn,\n useSafeLayoutEffect,\n} from \"../../utils\"\n\nconst sortNodes = (nodes: Node[]) =>\n nodes.sort((a, b) => {\n const compare = a.compareDocumentPosition(b)\n\n if (\n compare & Node.DOCUMENT_POSITION_FOLLOWING ||\n compare & Node.DOCUMENT_POSITION_CONTAINED_BY\n )\n return -1\n\n if (\n compare & Node.DOCUMENT_POSITION_PRECEDING ||\n compare & Node.DOCUMENT_POSITION_CONTAINS\n )\n return 1\n\n if (\n compare & Node.DOCUMENT_POSITION_DISCONNECTED ||\n compare & Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC\n ) {\n console.warn(\"Cannot sort the given nodes.\")\n return 0\n } else {\n return 0\n }\n })\n\nconst getNextIndex = (current: number, max: number, loop: boolean) => {\n let next = current + 1\n\n if (loop && next >= max) next = 0\n\n return next\n}\n\nconst getPrevIndex = (current: number, max: number, loop: boolean) => {\n let next = current - 1\n\n if (loop && next < 0) next = max\n\n return next\n}\n\nconst isMatch =\n <Y extends HTMLElement = HTMLElement, M = {}>(props?: Partial<M>) =>\n (descendant: Descendant<Y, M>) =>\n Object.entries(props ?? {}).every(\n ([key, value]) => descendant[key as keyof Descendant<Y, M>] === value,\n )\n\nexport type DescendantProps<Y extends HTMLElement = HTMLElement, M = {}> = M & {\n disabled?: ((node: Y) => boolean) | boolean\n}\n\nexport type Descendant<\n Y extends HTMLElement = HTMLElement,\n M = {},\n> = DescendantProps<Y, M> & {\n index: number\n node: Y\n recurred?: boolean\n}\n\nconst descendantManager = <Y extends HTMLElement = HTMLElement, M = {}>() => {\n const descendants = new Map<Y, Descendant<Y, M>>()\n\n const setIndexes = (next: Node[]) => {\n descendants.forEach((descendant) => {\n const index = next.indexOf(descendant.node)\n\n descendant.index = index\n descendant.node.dataset.index = descendant.index.toString()\n })\n }\n\n const set = (node: null | Y, props?: DescendantProps<Y, M>) => {\n if (!node || descendants.has(node)) return\n\n const keys = Array.from(descendants.keys()).concat(node)\n const sorted = sortNodes(keys)\n\n const descendant = { ...props, index: -1, node } as Descendant<Y, M>\n\n descendants.set(node, descendant)\n\n setIndexes(sorted)\n }\n\n const destroy = () => descendants.clear()\n\n const register = (props?: DescendantProps<Y, M>): RefCallback<Y> => {\n return (node: null | Y) => set(node, props)\n }\n\n const unregister = (node?: null | Y) => {\n if (node == null) return\n\n descendants.delete(node)\n\n const sorted = sortNodes(Array.from(descendants.keys()))\n\n setIndexes(sorted)\n }\n\n const count = (props?: Partial<M>) => values(props).length\n\n const enabledCount = (props?: Partial<M>) => enabledValues(props).length\n\n const active = (\n target?: Descendant<Y, M> | null | Y,\n options?: FocusOptions,\n ) => {\n if (!target) return\n\n if (!(target instanceof Node)) target = target.node\n\n if (isTruthyDataAttr(target.dataset.activedescendant)) return\n\n const descendants = values()\n\n descendants.forEach(({ node }) => {\n delete node.dataset.activedescendant\n })\n\n target.dataset.activedescendant = \"\"\n\n if (options) target.focus(options)\n }\n\n const indexOf = (target?: Descendant<Y, M> | null | Y) => {\n if (!target) return -1\n\n if (target instanceof Node) {\n return descendants.get(target)?.index ?? -1\n } else {\n return descendants.get(target.node)?.index ?? -1\n }\n }\n\n const enabledIndexOf = (target?: Descendant<Y, M> | null | Y) => {\n if (!target) return -1\n\n if (target instanceof Node) {\n return enabledValues().findIndex(({ node }) => node.isSameNode(target))\n } else {\n return enabledValues().findIndex(({ node }) =>\n node.isSameNode(target.node),\n )\n }\n }\n\n const values = (props?: Partial<M>) =>\n Array.from(descendants.values())\n .filter(isMatch(props))\n .sort((a, b) => a.index - b.index)\n\n const enabledValues = (props?: Partial<M>) =>\n values(props).filter(({ disabled, node }) => !runIfFn(disabled, node))\n\n const value = (indexOrNode: null | number | Y) => {\n if (!count() || indexOrNode == null) return undefined\n\n return isNumber(indexOrNode)\n ? values()[indexOrNode]\n : descendants.get(indexOrNode)\n }\n\n const enabledValue = (indexOrNode: null | number | Y) => {\n if (!enabledCount() || indexOrNode == null) return undefined\n\n return enabledValues()[\n isNumber(indexOrNode) ? indexOrNode : enabledIndexOf(indexOrNode)\n ]\n }\n\n const firstValue = (props?: Partial<M>) => values(props).at(0)\n\n const enabledFirstValue = (props?: Partial<M>) => enabledValues(props).at(0)\n\n const lastValue = (props?: Partial<M>) => values(props).at(-1)\n\n const enabledLastValue = (props?: Partial<M>) => enabledValues(props).at(-1)\n\n const prevValue = (\n indexOrNode: Descendant<Y, M> | null | number | Y,\n loop = true,\n props?: Partial<M>,\n ) => {\n const filtered = values(props)\n\n if (!filtered.length || indexOrNode == null) return undefined\n\n const currentIndex = isNumber(indexOrNode)\n ? filtered.findIndex((d) => d.index === indexOrNode)\n : filtered.findIndex((d) =>\n d.node.isSameNode(\n indexOrNode instanceof Node ? indexOrNode : indexOrNode.node,\n ),\n )\n\n if (currentIndex === -1) return undefined\n\n const prevIndex = getPrevIndex(currentIndex, filtered.length - 1, loop)\n\n return filtered[prevIndex]\n }\n\n const enabledPrevValue = (\n indexOrNode: Descendant<Y, M> | null | number | Y,\n loop = true,\n props?: Partial<M>,\n ) => {\n if (!enabledCount(props)) return undefined\n\n let index = isNumber(indexOrNode) ? indexOrNode : indexOf(indexOrNode)\n let enabledValue = null\n let recurred = false\n\n while (enabledValue == null) {\n index--\n\n if (index < 0) {\n if (!loop) return\n\n index = count() - 1\n recurred = true\n }\n\n const descendant = value(index)\n\n enabledValue =\n descendant &&\n !runIfFn(descendant.disabled, descendant.node) &&\n isMatch<Y, M>(props)(descendant)\n ? descendant\n : null\n }\n\n if (recurred) enabledValue.recurred = recurred\n\n return enabledValue\n }\n\n const nextValue = (\n indexOrNode: Descendant<Y, M> | null | number | Y,\n loop = true,\n props?: Partial<M>,\n ) => {\n const filtered = values(props)\n\n if (!filtered.length || indexOrNode == null) return undefined\n\n const currentIndex = isNumber(indexOrNode)\n ? filtered.findIndex((d) => d.index === indexOrNode)\n : filtered.findIndex((d) =>\n d.node.isSameNode(\n indexOrNode instanceof Node ? indexOrNode : indexOrNode.node,\n ),\n )\n\n if (currentIndex === -1) return undefined\n\n const nextIndex = getNextIndex(currentIndex, filtered.length, loop)\n\n return filtered[nextIndex]\n }\n\n const enabledNextValue = (\n indexOrNode: Descendant<Y, M> | null | number | Y,\n loop = true,\n props?: Partial<M>,\n ) => {\n if (!enabledCount(props)) return undefined\n\n let index = isNumber(indexOrNode) ? indexOrNode : indexOf(indexOrNode)\n let enabledValue = null\n let recurred = false\n\n while (enabledValue == null) {\n index++\n\n if (index >= count()) {\n if (!loop) return\n\n index = 0\n recurred = true\n }\n\n const descendant = value(index)\n\n enabledValue =\n descendant &&\n !runIfFn(descendant.disabled, descendant.node) &&\n isMatch<Y, M>(props)(descendant)\n ? descendant\n : null\n }\n\n if (recurred) enabledValue.recurred = recurred\n\n return enabledValue\n }\n\n return {\n active,\n count,\n destroy,\n enabledCount,\n enabledFirstValue,\n enabledIndexOf,\n enabledLastValue,\n enabledNextValue,\n enabledPrevValue,\n enabledValue,\n enabledValues,\n firstValue,\n indexOf,\n lastValue,\n nextValue,\n prevValue,\n register,\n unregister,\n value,\n values,\n }\n}\n\nexport type Descendants<Y extends HTMLElement, M = {}> = ReturnType<\n typeof descendantManager<Y, M>\n>\n\nexport type CreateDescendantRegister<Y extends HTMLElement, M = {}> = (\n props?: DescendantProps<Y, M>,\n) => RefCallback<Y>\n\n/**\n * `useDescendants` is a custom hook that manages descendants.\n *\n * @see https://yamada-ui.com/docs/hooks/use-descendants\n */\nexport const createDescendants = <\n Y extends HTMLElement = HTMLElement,\n M = {},\n>() => {\n const [DescendantsContext, useDescendantsContext] = createContext<\n Descendants<Y, M>\n >({\n name: \"DescendantsContext\",\n })\n\n const useDescendantRegister = (descendants?: Descendants<Y, M>) => {\n const ref = useRef<Y>(null)\n\n useSafeLayoutEffect(() => {\n return () => {\n if (ref.current) descendants?.unregister(ref.current)\n }\n }, [])\n\n return (props?: DescendantProps<Y, M>): RefCallback<Y> =>\n mergeRefs(ref, descendants?.register(props))\n }\n\n const useDescendants = () => {\n const descendants = useRef(descendantManager<Y, M>())\n\n useSafeLayoutEffect(() => {\n return () => descendants.current.destroy()\n })\n\n return descendants.current\n }\n\n const useDescendant = (props?: DescendantProps<Y, M>) => {\n const descendants = useDescendantsContext()\n const createRegister = useDescendantRegister(descendants)\n\n return {\n descendants,\n register: createRegister(props),\n }\n }\n\n return {\n DescendantsContext,\n useDescendant,\n useDescendantRegister,\n useDescendants,\n useDescendantsContext,\n }\n}\n"],"mappings":"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"}
|
|
@@ -31,7 +31,7 @@ const { ComponentContext, PropsContext: ModalPropsContext, useComponentContext,
|
|
|
31
31
|
/**
|
|
32
32
|
* `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.
|
|
33
33
|
*
|
|
34
|
-
* @see https://yamada-ui.com/docs/components/
|
|
34
|
+
* @see https://yamada-ui.com/docs/components/modal
|
|
35
35
|
*/
|
|
36
36
|
const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "scale", autoFocus, blockScrollOnMount = true, body, cancel, children, duration, finalFocusRef, footer, header, initialFocusRef, lockFocusAcrossFrames = true, middle, restoreFocus, success, title, trigger, withCloseButton = true, withOverlay = true, portalProps, onCancel, onCloseComplete, onMiddle, onSuccess, ...props }) => {
|
|
37
37
|
const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(children, ModalOpenTrigger, ModalOverlay);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","names":["motion","ShorthandModalContent: FC<ShorthandModalContentProps>"],"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 { PopupAnimationProps } 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, styled } from \"../../core\"\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 { getPopupAnimationProps } 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 PopupAnimationProps,\n Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n extends\n ThemeProps<ModalStyle>,\n Omit<UseModalProps, \"title\">,\n Pick<\n FocusLockProps,\n | \"autoFocus\"\n | \"finalFocusRef\"\n | \"initialFocusRef\"\n | \"lockFocusAcrossFrames\"\n | \"restoreFocus\"\n >,\n PopupAnimationProps,\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 to be forwarded to the portal component.\n */\n portalProps?: Omit<PortalProps, \"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/overlay/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 portalProps,\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\n const context = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n withCloseButton,\n ...rest,\n }),\n [animationScheme, duration, open, withCloseButton, rest],\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 } = useComponentContext()\n\n return { asChild: true, ...getOpenTriggerProps(props) }\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 { getCloseTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)(undefined, (props) => {\n const { getCloseButtonProps } = useComponentContext()\n\n return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n const { animationScheme, duration, getOverlayProps } = useComponentContext()\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>(getOverlayProps(cast<HTMLProps>(props)))}\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 { animationScheme, duration, withCloseButton, getContentProps } =\n useComponentContext()\n const [omittedChildren, customCloseButton] = useSplitChildren(\n children,\n ModalCloseButton,\n )\n\n return (\n <motion.section\n {...getPopupAnimationProps(animationScheme, duration)}\n {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n getContentProps(cast<HTMLProps<\"section\">>(rest)),\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\nexport const 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 } = useComponentContext()\n\n return { ...getHeaderProps(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 } = useComponentContext()\n\n return { ...getTitleProps(props) }\n },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(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 { getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"modal.js","names":["motion","ShorthandModalContent: FC<ShorthandModalContentProps>"],"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 { PopupAnimationProps } 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, styled } from \"../../core\"\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 { getPopupAnimationProps } 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 PopupAnimationProps,\n Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n extends\n ThemeProps<ModalStyle>,\n Omit<UseModalProps, \"title\">,\n Pick<\n FocusLockProps,\n | \"autoFocus\"\n | \"finalFocusRef\"\n | \"initialFocusRef\"\n | \"lockFocusAcrossFrames\"\n | \"restoreFocus\"\n >,\n PopupAnimationProps,\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 to be forwarded to the portal component.\n */\n portalProps?: Omit<PortalProps, \"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 portalProps,\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 ...rest,\n }),\n [animationScheme, duration, open, withCloseButton, rest],\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 } = useComponentContext()\n\n return { asChild: true, ...getOpenTriggerProps(props) }\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 { getCloseTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)(undefined, (props) => {\n const { getCloseButtonProps } = useComponentContext()\n\n return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n const { animationScheme, duration, getOverlayProps } = useComponentContext()\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>(getOverlayProps(cast<HTMLProps>(props)))}\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 { animationScheme, duration, withCloseButton, getContentProps } =\n useComponentContext()\n const [omittedChildren, customCloseButton] = useSplitChildren(\n children,\n ModalCloseButton,\n )\n\n return (\n <motion.section\n {...getPopupAnimationProps(animationScheme, duration)}\n {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n getContentProps(cast<HTMLProps<\"section\">>(rest)),\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\nexport const 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 } = useComponentContext()\n\n return { ...getHeaderProps(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 } = useComponentContext()\n\n return { ...getTitleProps(props) }\n },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(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 { getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}
|
|
@@ -26,6 +26,7 @@ const getPrevIndex = (current, max, loop) => {
|
|
|
26
26
|
if (loop && next < 0) next = max;
|
|
27
27
|
return next;
|
|
28
28
|
};
|
|
29
|
+
const isMatch = (props) => (descendant) => Object.entries(props ?? {}).every(([key, value]) => descendant[key] === value);
|
|
29
30
|
const descendantManager = () => {
|
|
30
31
|
const descendants = /* @__PURE__ */ new Map();
|
|
31
32
|
const setIndexes = (next) => {
|
|
@@ -54,8 +55,8 @@ const descendantManager = () => {
|
|
|
54
55
|
descendants.delete(node);
|
|
55
56
|
setIndexes(sortNodes(Array.from(descendants.keys())));
|
|
56
57
|
};
|
|
57
|
-
const count = () => values().length;
|
|
58
|
-
const enabledCount = () => enabledValues().length;
|
|
58
|
+
const count = (props) => values(props).length;
|
|
59
|
+
const enabledCount = (props) => enabledValues(props).length;
|
|
59
60
|
const active = (target, options) => {
|
|
60
61
|
if (!target) return;
|
|
61
62
|
if (!(target instanceof Node)) target = target.node;
|
|
@@ -76,28 +77,29 @@ const descendantManager = () => {
|
|
|
76
77
|
if (target instanceof Node) return enabledValues().findIndex(({ node }) => node.isSameNode(target));
|
|
77
78
|
else return enabledValues().findIndex(({ node }) => node.isSameNode(target.node));
|
|
78
79
|
};
|
|
79
|
-
const values = () => Array.from(descendants.values()).sort((a, b) => a.index - b.index);
|
|
80
|
-
const enabledValues = () => values().filter(({ disabled, node }) => !(0, utils_exports.runIfFn)(disabled, node));
|
|
80
|
+
const values = (props) => Array.from(descendants.values()).filter(isMatch(props)).sort((a, b) => a.index - b.index);
|
|
81
|
+
const enabledValues = (props) => values(props).filter(({ disabled, node }) => !(0, utils_exports.runIfFn)(disabled, node));
|
|
81
82
|
const value = (indexOrNode) => {
|
|
82
83
|
if (!count() || indexOrNode == null) return void 0;
|
|
83
84
|
return (0, utils_exports.isNumber)(indexOrNode) ? values()[indexOrNode] : descendants.get(indexOrNode);
|
|
84
85
|
};
|
|
85
|
-
const enabledValue = (
|
|
86
|
-
if (!enabledCount()) return void 0;
|
|
87
|
-
return enabledValues()[
|
|
88
|
-
};
|
|
89
|
-
const firstValue = () =>
|
|
90
|
-
const enabledFirstValue = () =>
|
|
91
|
-
const lastValue = () =>
|
|
92
|
-
const enabledLastValue = () =>
|
|
93
|
-
const prevValue = (indexOrNode, loop = true) => {
|
|
94
|
-
|
|
95
|
-
|
|
86
|
+
const enabledValue = (indexOrNode) => {
|
|
87
|
+
if (!enabledCount() || indexOrNode == null) return void 0;
|
|
88
|
+
return enabledValues()[(0, utils_exports.isNumber)(indexOrNode) ? indexOrNode : enabledIndexOf(indexOrNode)];
|
|
89
|
+
};
|
|
90
|
+
const firstValue = (props) => values(props).at(0);
|
|
91
|
+
const enabledFirstValue = (props) => enabledValues(props).at(0);
|
|
92
|
+
const lastValue = (props) => values(props).at(-1);
|
|
93
|
+
const enabledLastValue = (props) => enabledValues(props).at(-1);
|
|
94
|
+
const prevValue = (indexOrNode, loop = true, props) => {
|
|
95
|
+
const filtered = values(props);
|
|
96
|
+
if (!filtered.length || indexOrNode == null) return void 0;
|
|
97
|
+
const currentIndex = (0, utils_exports.isNumber)(indexOrNode) ? filtered.findIndex((d) => d.index === indexOrNode) : filtered.findIndex((d) => d.node.isSameNode(indexOrNode instanceof Node ? indexOrNode : indexOrNode.node));
|
|
96
98
|
if (currentIndex === -1) return void 0;
|
|
97
|
-
return
|
|
99
|
+
return filtered[getPrevIndex(currentIndex, filtered.length - 1, loop)];
|
|
98
100
|
};
|
|
99
|
-
const enabledPrevValue = (indexOrNode, loop = true) => {
|
|
100
|
-
if (!enabledCount()) return void 0;
|
|
101
|
+
const enabledPrevValue = (indexOrNode, loop = true, props) => {
|
|
102
|
+
if (!enabledCount(props)) return void 0;
|
|
101
103
|
let index = (0, utils_exports.isNumber)(indexOrNode) ? indexOrNode : indexOf(indexOrNode);
|
|
102
104
|
let enabledValue$1 = null;
|
|
103
105
|
let recurred = false;
|
|
@@ -109,19 +111,20 @@ const descendantManager = () => {
|
|
|
109
111
|
recurred = true;
|
|
110
112
|
}
|
|
111
113
|
const descendant = value(index);
|
|
112
|
-
enabledValue$1 = descendant && !(0, utils_exports.runIfFn)(descendant.disabled, descendant.node) ? descendant : null;
|
|
114
|
+
enabledValue$1 = descendant && !(0, utils_exports.runIfFn)(descendant.disabled, descendant.node) && isMatch(props)(descendant) ? descendant : null;
|
|
113
115
|
}
|
|
114
116
|
if (recurred) enabledValue$1.recurred = recurred;
|
|
115
117
|
return enabledValue$1;
|
|
116
118
|
};
|
|
117
|
-
const nextValue = (indexOrNode, loop = true) => {
|
|
118
|
-
|
|
119
|
-
|
|
119
|
+
const nextValue = (indexOrNode, loop = true, props) => {
|
|
120
|
+
const filtered = values(props);
|
|
121
|
+
if (!filtered.length || indexOrNode == null) return void 0;
|
|
122
|
+
const currentIndex = (0, utils_exports.isNumber)(indexOrNode) ? filtered.findIndex((d) => d.index === indexOrNode) : filtered.findIndex((d) => d.node.isSameNode(indexOrNode instanceof Node ? indexOrNode : indexOrNode.node));
|
|
120
123
|
if (currentIndex === -1) return void 0;
|
|
121
|
-
return
|
|
124
|
+
return filtered[getNextIndex(currentIndex, filtered.length, loop)];
|
|
122
125
|
};
|
|
123
|
-
const enabledNextValue = (indexOrNode, loop = true) => {
|
|
124
|
-
if (!enabledCount()) return void 0;
|
|
126
|
+
const enabledNextValue = (indexOrNode, loop = true, props) => {
|
|
127
|
+
if (!enabledCount(props)) return void 0;
|
|
125
128
|
let index = (0, utils_exports.isNumber)(indexOrNode) ? indexOrNode : indexOf(indexOrNode);
|
|
126
129
|
let enabledValue$1 = null;
|
|
127
130
|
let recurred = false;
|
|
@@ -133,7 +136,7 @@ const descendantManager = () => {
|
|
|
133
136
|
recurred = true;
|
|
134
137
|
}
|
|
135
138
|
const descendant = value(index);
|
|
136
|
-
enabledValue$1 = descendant && !(0, utils_exports.runIfFn)(descendant.disabled, descendant.node) ? descendant : null;
|
|
139
|
+
enabledValue$1 = descendant && !(0, utils_exports.runIfFn)(descendant.disabled, descendant.node) && isMatch(props)(descendant) ? descendant : null;
|
|
137
140
|
}
|
|
138
141
|
if (recurred) enabledValue$1.recurred = recurred;
|
|
139
142
|
return enabledValue$1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["enabledValue","createContext"],"sources":["../../../../src/hooks/use-descendants/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefCallback } from \"react\"\nimport { useRef } from \"react\"\nimport {\n createContext,\n isNumber,\n isTruthyDataAttr,\n mergeRefs,\n runIfFn,\n useSafeLayoutEffect,\n} from \"../../utils\"\n\nconst sortNodes = (nodes: Node[]) =>\n nodes.sort((a, b) => {\n const compare = a.compareDocumentPosition(b)\n\n if (\n compare & Node.DOCUMENT_POSITION_FOLLOWING ||\n compare & Node.DOCUMENT_POSITION_CONTAINED_BY\n )\n return -1\n\n if (\n compare & Node.DOCUMENT_POSITION_PRECEDING ||\n compare & Node.DOCUMENT_POSITION_CONTAINS\n )\n return 1\n\n if (\n compare & Node.DOCUMENT_POSITION_DISCONNECTED ||\n compare & Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC\n ) {\n console.warn(\"Cannot sort the given nodes.\")\n return 0\n } else {\n return 0\n }\n })\n\nconst getNextIndex = (current: number, max: number, loop: boolean) => {\n let next = current + 1\n\n if (loop && next >= max) next = 0\n\n return next\n}\n\nconst getPrevIndex = (current: number, max: number, loop: boolean) => {\n let next = current - 1\n\n if (loop && next < 0) next = max\n\n return next\n}\n\nexport type DescendantProps<Y extends HTMLElement = HTMLElement, M = {}> = M & {\n disabled?: ((node: Y) => boolean) | boolean\n}\n\nexport type Descendant<\n Y extends HTMLElement = HTMLElement,\n M = {},\n> = DescendantProps<Y, M> & {\n index: number\n node: Y\n recurred?: boolean\n}\n\nconst descendantManager = <Y extends HTMLElement = HTMLElement, M = {}>() => {\n const descendants = new Map<Y, Descendant<Y, M>>()\n\n const setIndexes = (next: Node[]) => {\n descendants.forEach((descendant) => {\n const index = next.indexOf(descendant.node)\n\n descendant.index = index\n descendant.node.dataset.index = descendant.index.toString()\n })\n }\n\n const set = (node: null | Y, props?: DescendantProps<Y, M>) => {\n if (!node || descendants.has(node)) return\n\n const keys = Array.from(descendants.keys()).concat(node)\n const sorted = sortNodes(keys)\n\n const descendant = { ...props, index: -1, node } as Descendant<Y, M>\n\n descendants.set(node, descendant)\n\n setIndexes(sorted)\n }\n\n const destroy = () => descendants.clear()\n\n const register = (props?: DescendantProps<Y, M>): RefCallback<Y> => {\n return (node: null | Y) => set(node, props)\n }\n\n const unregister = (node?: null | Y) => {\n if (node == null) return\n\n descendants.delete(node)\n\n const sorted = sortNodes(Array.from(descendants.keys()))\n\n setIndexes(sorted)\n }\n\n const count = () => values().length\n\n const enabledCount = () => enabledValues().length\n\n const active = (\n target?: Descendant<Y, M> | null | Y,\n options?: FocusOptions,\n ) => {\n if (!target) return\n\n if (!(target instanceof Node)) target = target.node\n\n if (isTruthyDataAttr(target.dataset.activedescendant)) return\n\n const descendants = values()\n\n descendants.forEach(({ node }) => {\n delete node.dataset.activedescendant\n })\n\n target.dataset.activedescendant = \"\"\n\n if (options) target.focus(options)\n }\n\n const indexOf = (target?: Descendant<Y, M> | null | Y) => {\n if (!target) return -1\n\n if (target instanceof Node) {\n return descendants.get(target)?.index ?? -1\n } else {\n return descendants.get(target.node)?.index ?? -1\n }\n }\n\n const enabledIndexOf = (target?: Descendant<Y, M> | null | Y) => {\n if (!target) return -1\n\n if (target instanceof Node) {\n return enabledValues().findIndex(({ node }) => node.isSameNode(target))\n } else {\n return enabledValues().findIndex(({ node }) =>\n node.isSameNode(target.node),\n )\n }\n }\n\n const values = () =>\n Array.from(descendants.values()).sort((a, b) => a.index - b.index)\n\n const enabledValues = () =>\n values().filter(({ disabled, node }) => !runIfFn(disabled, node))\n\n const value = (indexOrNode: null | number | Y) => {\n if (!count() || indexOrNode == null) return undefined\n\n return isNumber(indexOrNode)\n ? values()[indexOrNode]\n : descendants.get(indexOrNode)\n }\n\n const enabledValue = (index: number) => {\n if (!enabledCount()) return undefined\n\n return enabledValues()[index]\n }\n\n const firstValue = () => value(0)\n\n const enabledFirstValue = () => enabledValue(0)\n\n const lastValue = () => value(count() - 1)\n\n const enabledLastValue = () => enabledValue(enabledCount() - 1)\n\n const prevValue = (\n indexOrNode: Descendant<Y, M> | null | number | Y,\n loop = true,\n ) => {\n if (!count()) return undefined\n\n const currentIndex = isNumber(indexOrNode)\n ? indexOrNode\n : indexOf(indexOrNode)\n\n if (currentIndex === -1) return undefined\n\n const prevIndex = getPrevIndex(currentIndex, count() - 1, loop)\n\n return value(prevIndex)\n }\n\n const enabledPrevValue = (\n indexOrNode: Descendant<Y, M> | null | number | Y,\n loop = true,\n ) => {\n if (!enabledCount()) return undefined\n\n let index = isNumber(indexOrNode) ? indexOrNode : indexOf(indexOrNode)\n let enabledValue = null\n let recurred = false\n\n while (enabledValue == null) {\n index--\n\n if (index < 0) {\n if (!loop) return\n\n index = count() - 1\n recurred = true\n }\n\n const descendant = value(index)\n\n enabledValue =\n descendant && !runIfFn(descendant.disabled, descendant.node)\n ? descendant\n : null\n }\n\n if (recurred) enabledValue.recurred = recurred\n\n return enabledValue\n }\n\n const nextValue = (\n indexOrNode: Descendant<Y, M> | null | number | Y,\n loop = true,\n ) => {\n if (!count()) return undefined\n\n const currentIndex = isNumber(indexOrNode)\n ? indexOrNode\n : indexOf(indexOrNode)\n\n if (currentIndex === -1) return undefined\n\n const nextIndex = getNextIndex(currentIndex, count(), loop)\n\n return value(nextIndex)\n }\n\n const enabledNextValue = (\n indexOrNode: Descendant<Y, M> | null | number | Y,\n loop = true,\n ) => {\n if (!enabledCount()) return undefined\n\n let index = isNumber(indexOrNode) ? indexOrNode : indexOf(indexOrNode)\n let enabledValue = null\n let recurred = false\n\n while (enabledValue == null) {\n index++\n\n if (index >= count()) {\n if (!loop) return\n\n index = 0\n recurred = true\n }\n\n const descendant = value(index)\n\n enabledValue =\n descendant && !runIfFn(descendant.disabled, descendant.node)\n ? descendant\n : null\n }\n\n if (recurred) enabledValue.recurred = recurred\n\n return enabledValue\n }\n\n return {\n active,\n count,\n destroy,\n enabledCount,\n enabledFirstValue,\n enabledIndexOf,\n enabledLastValue,\n enabledNextValue,\n enabledPrevValue,\n enabledValue,\n enabledValues,\n firstValue,\n indexOf,\n lastValue,\n nextValue,\n prevValue,\n register,\n unregister,\n value,\n values,\n }\n}\n\nexport type Descendants<Y extends HTMLElement, M = {}> = ReturnType<\n typeof descendantManager<Y, M>\n>\n\nexport type CreateDescendantRegister<Y extends HTMLElement, M = {}> = (\n props?: DescendantProps<Y, M>,\n) => RefCallback<Y>\n\n/**\n * `useDescendants` is a custom hook that manages descendants.\n *\n * @see https://yamada-ui.com/docs/hooks/use-descendants\n */\nexport const createDescendants = <\n Y extends HTMLElement = HTMLElement,\n M = {},\n>() => {\n const [DescendantsContext, useDescendantsContext] = createContext<\n Descendants<Y, M>\n >({\n name: \"DescendantsContext\",\n })\n\n const useDescendantRegister = (descendants?: Descendants<Y, M>) => {\n const ref = useRef<Y>(null)\n\n useSafeLayoutEffect(() => {\n return () => {\n if (ref.current) descendants?.unregister(ref.current)\n }\n }, [])\n\n return (props?: DescendantProps<Y, M>): RefCallback<Y> =>\n mergeRefs(ref, descendants?.register(props))\n }\n\n const useDescendants = () => {\n const descendants = useRef(descendantManager<Y, M>())\n\n useSafeLayoutEffect(() => {\n return () => descendants.current.destroy()\n })\n\n return descendants.current\n }\n\n const useDescendant = (props?: DescendantProps<Y, M>) => {\n const descendants = useDescendantsContext()\n const createRegister = useDescendantRegister(descendants)\n\n return {\n descendants,\n register: createRegister(props),\n }\n }\n\n return {\n DescendantsContext,\n useDescendant,\n useDescendantRegister,\n useDescendants,\n useDescendantsContext,\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["enabledValue","createContext"],"sources":["../../../../src/hooks/use-descendants/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefCallback } from \"react\"\nimport { useRef } from \"react\"\nimport {\n createContext,\n isNumber,\n isTruthyDataAttr,\n mergeRefs,\n runIfFn,\n useSafeLayoutEffect,\n} from \"../../utils\"\n\nconst sortNodes = (nodes: Node[]) =>\n nodes.sort((a, b) => {\n const compare = a.compareDocumentPosition(b)\n\n if (\n compare & Node.DOCUMENT_POSITION_FOLLOWING ||\n compare & Node.DOCUMENT_POSITION_CONTAINED_BY\n )\n return -1\n\n if (\n compare & Node.DOCUMENT_POSITION_PRECEDING ||\n compare & Node.DOCUMENT_POSITION_CONTAINS\n )\n return 1\n\n if (\n compare & Node.DOCUMENT_POSITION_DISCONNECTED ||\n compare & Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC\n ) {\n console.warn(\"Cannot sort the given nodes.\")\n return 0\n } else {\n return 0\n }\n })\n\nconst getNextIndex = (current: number, max: number, loop: boolean) => {\n let next = current + 1\n\n if (loop && next >= max) next = 0\n\n return next\n}\n\nconst getPrevIndex = (current: number, max: number, loop: boolean) => {\n let next = current - 1\n\n if (loop && next < 0) next = max\n\n return next\n}\n\nconst isMatch =\n <Y extends HTMLElement = HTMLElement, M = {}>(props?: Partial<M>) =>\n (descendant: Descendant<Y, M>) =>\n Object.entries(props ?? {}).every(\n ([key, value]) => descendant[key as keyof Descendant<Y, M>] === value,\n )\n\nexport type DescendantProps<Y extends HTMLElement = HTMLElement, M = {}> = M & {\n disabled?: ((node: Y) => boolean) | boolean\n}\n\nexport type Descendant<\n Y extends HTMLElement = HTMLElement,\n M = {},\n> = DescendantProps<Y, M> & {\n index: number\n node: Y\n recurred?: boolean\n}\n\nconst descendantManager = <Y extends HTMLElement = HTMLElement, M = {}>() => {\n const descendants = new Map<Y, Descendant<Y, M>>()\n\n const setIndexes = (next: Node[]) => {\n descendants.forEach((descendant) => {\n const index = next.indexOf(descendant.node)\n\n descendant.index = index\n descendant.node.dataset.index = descendant.index.toString()\n })\n }\n\n const set = (node: null | Y, props?: DescendantProps<Y, M>) => {\n if (!node || descendants.has(node)) return\n\n const keys = Array.from(descendants.keys()).concat(node)\n const sorted = sortNodes(keys)\n\n const descendant = { ...props, index: -1, node } as Descendant<Y, M>\n\n descendants.set(node, descendant)\n\n setIndexes(sorted)\n }\n\n const destroy = () => descendants.clear()\n\n const register = (props?: DescendantProps<Y, M>): RefCallback<Y> => {\n return (node: null | Y) => set(node, props)\n }\n\n const unregister = (node?: null | Y) => {\n if (node == null) return\n\n descendants.delete(node)\n\n const sorted = sortNodes(Array.from(descendants.keys()))\n\n setIndexes(sorted)\n }\n\n const count = (props?: Partial<M>) => values(props).length\n\n const enabledCount = (props?: Partial<M>) => enabledValues(props).length\n\n const active = (\n target?: Descendant<Y, M> | null | Y,\n options?: FocusOptions,\n ) => {\n if (!target) return\n\n if (!(target instanceof Node)) target = target.node\n\n if (isTruthyDataAttr(target.dataset.activedescendant)) return\n\n const descendants = values()\n\n descendants.forEach(({ node }) => {\n delete node.dataset.activedescendant\n })\n\n target.dataset.activedescendant = \"\"\n\n if (options) target.focus(options)\n }\n\n const indexOf = (target?: Descendant<Y, M> | null | Y) => {\n if (!target) return -1\n\n if (target instanceof Node) {\n return descendants.get(target)?.index ?? -1\n } else {\n return descendants.get(target.node)?.index ?? -1\n }\n }\n\n const enabledIndexOf = (target?: Descendant<Y, M> | null | Y) => {\n if (!target) return -1\n\n if (target instanceof Node) {\n return enabledValues().findIndex(({ node }) => node.isSameNode(target))\n } else {\n return enabledValues().findIndex(({ node }) =>\n node.isSameNode(target.node),\n )\n }\n }\n\n const values = (props?: Partial<M>) =>\n Array.from(descendants.values())\n .filter(isMatch(props))\n .sort((a, b) => a.index - b.index)\n\n const enabledValues = (props?: Partial<M>) =>\n values(props).filter(({ disabled, node }) => !runIfFn(disabled, node))\n\n const value = (indexOrNode: null | number | Y) => {\n if (!count() || indexOrNode == null) return undefined\n\n return isNumber(indexOrNode)\n ? values()[indexOrNode]\n : descendants.get(indexOrNode)\n }\n\n const enabledValue = (indexOrNode: null | number | Y) => {\n if (!enabledCount() || indexOrNode == null) return undefined\n\n return enabledValues()[\n isNumber(indexOrNode) ? indexOrNode : enabledIndexOf(indexOrNode)\n ]\n }\n\n const firstValue = (props?: Partial<M>) => values(props).at(0)\n\n const enabledFirstValue = (props?: Partial<M>) => enabledValues(props).at(0)\n\n const lastValue = (props?: Partial<M>) => values(props).at(-1)\n\n const enabledLastValue = (props?: Partial<M>) => enabledValues(props).at(-1)\n\n const prevValue = (\n indexOrNode: Descendant<Y, M> | null | number | Y,\n loop = true,\n props?: Partial<M>,\n ) => {\n const filtered = values(props)\n\n if (!filtered.length || indexOrNode == null) return undefined\n\n const currentIndex = isNumber(indexOrNode)\n ? filtered.findIndex((d) => d.index === indexOrNode)\n : filtered.findIndex((d) =>\n d.node.isSameNode(\n indexOrNode instanceof Node ? indexOrNode : indexOrNode.node,\n ),\n )\n\n if (currentIndex === -1) return undefined\n\n const prevIndex = getPrevIndex(currentIndex, filtered.length - 1, loop)\n\n return filtered[prevIndex]\n }\n\n const enabledPrevValue = (\n indexOrNode: Descendant<Y, M> | null | number | Y,\n loop = true,\n props?: Partial<M>,\n ) => {\n if (!enabledCount(props)) return undefined\n\n let index = isNumber(indexOrNode) ? indexOrNode : indexOf(indexOrNode)\n let enabledValue = null\n let recurred = false\n\n while (enabledValue == null) {\n index--\n\n if (index < 0) {\n if (!loop) return\n\n index = count() - 1\n recurred = true\n }\n\n const descendant = value(index)\n\n enabledValue =\n descendant &&\n !runIfFn(descendant.disabled, descendant.node) &&\n isMatch<Y, M>(props)(descendant)\n ? descendant\n : null\n }\n\n if (recurred) enabledValue.recurred = recurred\n\n return enabledValue\n }\n\n const nextValue = (\n indexOrNode: Descendant<Y, M> | null | number | Y,\n loop = true,\n props?: Partial<M>,\n ) => {\n const filtered = values(props)\n\n if (!filtered.length || indexOrNode == null) return undefined\n\n const currentIndex = isNumber(indexOrNode)\n ? filtered.findIndex((d) => d.index === indexOrNode)\n : filtered.findIndex((d) =>\n d.node.isSameNode(\n indexOrNode instanceof Node ? indexOrNode : indexOrNode.node,\n ),\n )\n\n if (currentIndex === -1) return undefined\n\n const nextIndex = getNextIndex(currentIndex, filtered.length, loop)\n\n return filtered[nextIndex]\n }\n\n const enabledNextValue = (\n indexOrNode: Descendant<Y, M> | null | number | Y,\n loop = true,\n props?: Partial<M>,\n ) => {\n if (!enabledCount(props)) return undefined\n\n let index = isNumber(indexOrNode) ? indexOrNode : indexOf(indexOrNode)\n let enabledValue = null\n let recurred = false\n\n while (enabledValue == null) {\n index++\n\n if (index >= count()) {\n if (!loop) return\n\n index = 0\n recurred = true\n }\n\n const descendant = value(index)\n\n enabledValue =\n descendant &&\n !runIfFn(descendant.disabled, descendant.node) &&\n isMatch<Y, M>(props)(descendant)\n ? descendant\n : null\n }\n\n if (recurred) enabledValue.recurred = recurred\n\n return enabledValue\n }\n\n return {\n active,\n count,\n destroy,\n enabledCount,\n enabledFirstValue,\n enabledIndexOf,\n enabledLastValue,\n enabledNextValue,\n enabledPrevValue,\n enabledValue,\n enabledValues,\n firstValue,\n indexOf,\n lastValue,\n nextValue,\n prevValue,\n register,\n unregister,\n value,\n values,\n }\n}\n\nexport type Descendants<Y extends HTMLElement, M = {}> = ReturnType<\n typeof descendantManager<Y, M>\n>\n\nexport type CreateDescendantRegister<Y extends HTMLElement, M = {}> = (\n props?: DescendantProps<Y, M>,\n) => RefCallback<Y>\n\n/**\n * `useDescendants` is a custom hook that manages descendants.\n *\n * @see https://yamada-ui.com/docs/hooks/use-descendants\n */\nexport const createDescendants = <\n Y extends HTMLElement = HTMLElement,\n M = {},\n>() => {\n const [DescendantsContext, useDescendantsContext] = createContext<\n Descendants<Y, M>\n >({\n name: \"DescendantsContext\",\n })\n\n const useDescendantRegister = (descendants?: Descendants<Y, M>) => {\n const ref = useRef<Y>(null)\n\n useSafeLayoutEffect(() => {\n return () => {\n if (ref.current) descendants?.unregister(ref.current)\n }\n }, [])\n\n return (props?: DescendantProps<Y, M>): RefCallback<Y> =>\n mergeRefs(ref, descendants?.register(props))\n }\n\n const useDescendants = () => {\n const descendants = useRef(descendantManager<Y, M>())\n\n useSafeLayoutEffect(() => {\n return () => descendants.current.destroy()\n })\n\n return descendants.current\n }\n\n const useDescendant = (props?: DescendantProps<Y, M>) => {\n const descendants = useDescendantsContext()\n const createRegister = useDescendantRegister(descendants)\n\n return {\n descendants,\n register: createRegister(props),\n }\n }\n\n return {\n DescendantsContext,\n useDescendant,\n useDescendantRegister,\n useDescendants,\n useDescendantsContext,\n }\n}\n"],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ import "../collapse/index.js";
|
|
|
9
9
|
import "../../index.js";
|
|
10
10
|
import { AccordionStyle } from "./accordion.style.js";
|
|
11
11
|
import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
|
|
12
|
-
import * as
|
|
12
|
+
import * as react1037 from "react";
|
|
13
13
|
|
|
14
14
|
//#region src/components/accordion/accordion.d.ts
|
|
15
15
|
interface AccordionCallBackProps {
|
|
@@ -33,7 +33,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
|
|
|
33
33
|
*/
|
|
34
34
|
items?: AccordionItem[];
|
|
35
35
|
}
|
|
36
|
-
declare const AccordionPropsContext:
|
|
36
|
+
declare const AccordionPropsContext: react1037.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
|
|
37
37
|
/**
|
|
38
38
|
* `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
|
|
39
39
|
*
|
|
@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
|
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
|
|
5
5
|
//#region src/components/accordion/accordion.style.d.ts
|
|
6
|
-
declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "
|
|
6
|
+
declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "item" | "root", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, {
|
|
7
7
|
panel: {
|
|
8
8
|
button: {
|
|
9
9
|
rounded: "l2";
|