npm - @yamada-ui/react - Versions diffs - 2.3.2-dev-20261104093107 → 2.3.2-dev-20261104101053 - Mend

@yamada-ui/react 2.3.2-dev-20261104093107 → 2.3.2-dev-20261104101053

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.

Files changed (178) hide show

package/dist/esm/components/drawer/drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.js","names":["isArray","motion","cast"],"sources":["../../../../src/components/drawer/drawer.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, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { SlideProps } from \"../slide\"\nimport type { DrawerStyle } from \"./drawer.style\"\nimport type { UseDrawerProps, UseDrawerReturn } from \"./use-drawer\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { Slide } from \"../slide\"\nimport { drawerStyle } from \"./drawer.style\"\nimport { useDrawer } from \"./use-drawer\"\n\ninterface ComponentContext\n extends\n Omit<UseDrawerReturn, \"getRootProps\">,\n Pick<\n DrawerRootProps,\n \"duration\" \| \"placement\" \| \"withCloseButton\" \| \"withDragBar\"\n > {}\n\nexport interface DrawerRootProps\n extends\n ThemeProps<DrawerStyle>,\n Omit<UseDrawerProps, \"placement\" \| \"title\">,\n Pick<\n FocusLockProps,\n \| \"autoFocus\"\n \| \"finalFocusRef\"\n \| \"initialFocusRef\"\n \| \"lockFocusAcrossFrames\"\n \| \"restoreFocus\"\n >,\n ShorthandDrawerContentProps {\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 drawer opens.\n \n @default true\n /\n blockScrollOnMount?: boolean\n /\n The animation duration.\n /\n duration?: MotionTransitionProps[\"duration\"]\n /\n The modal trigger to use.\n /\n trigger?: ReactNode\n /\n If `true`, display the drawer close button.\n \n @default true\n /\n withCloseButton?: boolean\n /\n If `true`, display the drag bar when `closeOnDrag` is `true`.\n \n @default true\n /\n withDragBar?: boolean\n /\n If `true`, display the drawer 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 drawer has closed.\n /\n onCloseComplete?: () => void\n}\n\nconst {\n ComponentContext,\n PropsContext: DrawerPropsContext,\n useComponentContext,\n usePropsContext: useDrawerPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<DrawerRootProps, DrawerStyle, ComponentContext>(\n \"drawer\",\n drawerStyle,\n)\n\nexport { DrawerPropsContext, useDrawerPropsContext }\n\n/\n `Drawer` is a component for a panel that appears from the edge of the screen.\n \n @see https://yamada-ui.com/docs/components/drawer\n /\nexport const DrawerRoot = withProvider<\"div\", DrawerRootProps, \"placement\">(\n ({\n allowPinchZoom = false,\n autoFocus,\n blockScrollOnMount = true,\n body,\n cancel,\n children,\n closeOnDrag,\n dragConstraints,\n dragElastic,\n dragHandleOnly,\n dragOffset,\n dragVelocity,\n duration = { enter: 0.4, exit: 0.3 },\n finalFocusRef,\n footer,\n header,\n initialFocusRef,\n lockFocusAcrossFrames = true,\n middle,\n placement: placementProp,\n restoreFocus,\n success,\n title,\n trigger,\n withCloseButton = !closeOnDrag,\n withDragBar = true,\n withOverlay = true,\n portalProps,\n onCancel,\n onCloseComplete,\n onMiddle,\n onSuccess,\n ...props\n }) => {\n const placement = useValue(placementProp)\n const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n children,\n DrawerOpenTrigger,\n DrawerOverlay,\n )\n const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n const { open, getRootProps, ...rest } = useDrawer({\n closeOnDrag,\n dragConstraints,\n dragElastic,\n dragHandleOnly,\n dragOffset,\n dragVelocity,\n placement,\n ...props,\n })\n const customOpenTrigger = trigger ? (\n <DrawerOpenTrigger>{trigger}</DrawerOpenTrigger>\n ) : null\n\n const context = useMemo(\n () => ({\n duration,\n open,\n placement,\n withCloseButton,\n withDragBar,\n ...rest,\n }),\n [duration, open, withDragBar, placement, 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 ? <DrawerOverlay /> : null)}\n\n {hasChildren ? (\n omittedChildren\n ) : (\n <ShorthandDrawerContent\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 { transferProps: [\"placement\"] },\n)()\n\nexport interface DrawerOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const DrawerOpenTrigger = withContext<\"button\", DrawerOpenTriggerProps>(\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 DrawerCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const DrawerCloseTrigger = withContext<\n \"button\",\n DrawerCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n undefined,\n (props) => {\n const { getCloseTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getCloseTriggerProps(props) }\n },\n)\n\nexport interface DrawerCloseButtonProps extends CloseButtonProps {}\n\nexport const DrawerCloseButton = withContext<\"button\", DrawerCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)(undefined, (props) => {\n const { getCloseButtonProps } = useComponentContext()\n\n return { ...getCloseButtonProps(props) }\n})\n\nexport interface DrawerOverlayProps extends HTMLMotionProps {}\n\nexport const DrawerOverlay = withContext<\"div\", DrawerOverlayProps>((props) => {\n const { duration, getOverlayProps } = useComponentContext()\n\n return (\n <motion.div\n animate=\"enter\"\n custom={{ duration }}\n exit=\"exit\"\n initial=\"exit\"\n variants={fadeVariants}\n {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n />\n )\n}, \"overlay\")()\n\nexport interface DrawerContentProps\n extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const DrawerContent = withContext<\"div\", DrawerContentProps>(\n ({ children, ...rest }) => {\n const {\n closeOnDrag,\n duration,\n open,\n placement,\n withCloseButton,\n withDragBar,\n getContentProps,\n } = useComponentContext()\n const [omittedChildren, customCloseButton, customDragBar] =\n useSplitChildren(children, DrawerCloseButton, DrawerDragBar)\n\n return (\n <Slide\n as=\"section\"\n duration={duration}\n open={open}\n placement={placement}\n {...(getContentProps(rest) as SlideProps)}\n >\n {customCloseButton ?? (withCloseButton ? <DrawerCloseButton /> : null)}\n {customDragBar ??\n (withDragBar && closeOnDrag ? <DrawerDragBar /> : null)}\n\n {omittedChildren}\n </Slide>\n )\n },\n \"content\",\n)()\n\ninterface ShorthandDrawerContentProps {\n /\n The drawer body to use.\n /\n body?: DrawerBodyProps \| ReactNode\n /\n The drawer cancel button to use.\n /\n cancel?: ButtonProps \| ReactNode\n /\n The drawer footer to use.\n /\n footer?: DrawerFooterProps \| ReactNode\n /\n The drawer header to use.\n /\n header?: DrawerHeaderProps \| ReactNode\n /\n The drawer middle button to use.\n /\n middle?: ButtonProps \| ReactNode\n /\n The drawer success button to use.\n /\n success?: ButtonProps \| ReactNode\n /\n The drawer title to use.\n /\n title?: DrawerTitleProps \| 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 ShorthandDrawerContent: FC<ShorthandDrawerContentProps> = ({\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(DrawerHeader, header)\n const customTitle = wrapOrPassProps(DrawerTitle, title)\n const customBody = wrapOrPassProps(DrawerBody, body)\n const customFooter = wrapOrPassProps(DrawerFooter, 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 <DrawerContent>\n {customHeader ??\n (customTitle ? <DrawerHeader>{customTitle}</DrawerHeader> : null)}\n {customBody}\n {customFooter ??\n (customCancel \|\| customMiddle \|\| customSuccess ? (\n <DrawerFooter>\n {customCancel}\n {customMiddle}\n {customSuccess}\n </DrawerFooter>\n ) : null)}\n </DrawerContent>\n )\n}\n\nexport interface DrawerDragBarProps extends HTMLStyledProps {}\n\nexport const DrawerDragBar = withContext<\"div\", DrawerDragBarProps>(\n \"div\",\n \"dragBar\",\n)(undefined, (props) => {\n const { getDragBarProps } = useComponentContext()\n\n return { ...getDragBarProps(props) }\n})\n\nexport interface DrawerDragTriggerProps extends HTMLStyledProps {}\n\nexport const DrawerDragTrigger = withContext<\"div\", DrawerDragTriggerProps>(\n \"div\",\n { name: \"DragTrigger\", slot: [\"trigger\", \"drag\"] },\n)(undefined, (props) => {\n const { getDragTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getDragTriggerProps(props) }\n})\n\nexport interface DrawerHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const DrawerHeader = withContext<\"header\", DrawerHeaderProps>(\n \"header\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps } = useComponentContext()\n\n return { ...getHeaderProps(props) }\n})\n\nexport interface DrawerTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const DrawerTitle = withContext<\"h2\", DrawerTitleProps>(\"h2\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps } = useComponentContext()\n\n return { ...getTitleProps(props) }\n },\n)\n\nexport interface DrawerBodyProps extends HTMLStyledProps {}\n\nexport const DrawerBody = withContext<\"div\", DrawerBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(props) }\n },\n)\n\nexport interface DrawerFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const DrawerFooter = withContext<\"footer\", DrawerFooterProps>(\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":"drawer.js","names":["isArray","motion","cast"],"sources":["../../../../src/components/drawer/drawer.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, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { SlideProps } from \"../slide\"\nimport type { DrawerStyle } from \"./drawer.style\"\nimport type { UseDrawerProps, UseDrawerReturn } from \"./use-drawer\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { Slide } from \"../slide\"\nimport { drawerStyle } from \"./drawer.style\"\nimport { useDrawer } from \"./use-drawer\"\n\ninterface ComponentContext\n extends\n Omit<UseDrawerReturn, \"getRootProps\">,\n Pick<\n DrawerRootProps,\n \"duration\" \| \"placement\" \| \"withCloseButton\" \| \"withDragBar\"\n > {}\n\nexport interface DrawerRootProps\n extends\n ThemeProps<DrawerStyle>,\n Omit<UseDrawerProps, \"placement\" \| \"title\">,\n Pick<\n FocusLockProps,\n \| \"autoFocus\"\n \| \"finalFocusRef\"\n \| \"initialFocusRef\"\n \| \"lockFocusAcrossFrames\"\n \| \"restoreFocus\"\n >,\n ShorthandDrawerContentProps {\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 drawer opens.\n \n @default true\n /\n blockScrollOnMount?: boolean\n /\n The animation duration.\n /\n duration?: MotionTransitionProps[\"duration\"]\n /\n The modal trigger to use.\n /\n trigger?: ReactNode\n /\n If `true`, display the drawer close button.\n \n @default true\n /\n withCloseButton?: boolean\n /\n If `true`, display the drag bar when `closeOnDrag` is `true`.\n \n @default true\n /\n withDragBar?: boolean\n /\n If `true`, display the drawer 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 drawer has closed.\n /\n onCloseComplete?: () => void\n}\n\nconst {\n ComponentContext,\n PropsContext: DrawerPropsContext,\n useComponentContext,\n usePropsContext: useDrawerPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<DrawerRootProps, DrawerStyle, ComponentContext>(\n \"drawer\",\n drawerStyle,\n)\n\nexport { DrawerPropsContext, useDrawerPropsContext }\n\n/\n `Drawer` is a component for a panel that appears from the edge of the screen.\n \n @see https://yamada-ui.com/docs/components/drawer\n /\nexport const DrawerRoot = withProvider<\"div\", DrawerRootProps, \"placement\">(\n ({\n allowPinchZoom = false,\n autoFocus,\n blockScrollOnMount = true,\n body,\n cancel,\n children,\n closeOnDrag,\n dragConstraints,\n dragElastic,\n dragHandleOnly,\n dragOffset,\n dragVelocity,\n duration = { enter: 0.4, exit: 0.3 },\n finalFocusRef,\n footer,\n header,\n initialFocusRef,\n lockFocusAcrossFrames = true,\n middle,\n placement: placementProp,\n restoreFocus,\n success,\n title,\n trigger,\n withCloseButton = !closeOnDrag,\n withDragBar = true,\n withOverlay = true,\n portalProps,\n onCancel,\n onCloseComplete,\n onMiddle,\n onSuccess,\n ...props\n }) => {\n const placement = useValue(placementProp)\n const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n children,\n DrawerOpenTrigger,\n DrawerOverlay,\n )\n const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n const { open, getRootProps, ...rest } = useDrawer({\n closeOnDrag,\n dragConstraints,\n dragElastic,\n dragHandleOnly,\n dragOffset,\n dragVelocity,\n placement,\n ...props,\n })\n const customOpenTrigger = trigger ? (\n <DrawerOpenTrigger>{trigger}</DrawerOpenTrigger>\n ) : null\n\n const context = useMemo(\n () => ({\n duration,\n open,\n placement,\n withCloseButton,\n withDragBar,\n ...rest,\n }),\n [duration, open, withDragBar, placement, 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 ? <DrawerOverlay /> : null)}\n\n {hasChildren ? (\n omittedChildren\n ) : (\n <ShorthandDrawerContent\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 { transferProps: [\"placement\"] },\n)()\n\nexport interface DrawerOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const DrawerOpenTrigger = withContext<\"button\", DrawerOpenTriggerProps>(\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 DrawerCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const DrawerCloseTrigger = withContext<\n \"button\",\n DrawerCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n undefined,\n (props) => {\n const { getCloseTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getCloseTriggerProps(props) }\n },\n)\n\nexport interface DrawerCloseButtonProps extends CloseButtonProps {}\n\nexport const DrawerCloseButton = withContext<\"button\", DrawerCloseButtonProps>(\n (props) => {\n return (\n <DrawerCloseTrigger>\n <CloseButton {...props} />\n </DrawerCloseTrigger>\n )\n },\n \"closeButton\",\n)()\n\nexport interface DrawerOverlayProps extends HTMLMotionProps {}\n\nexport const DrawerOverlay = withContext<\"div\", DrawerOverlayProps>((props) => {\n const { duration, getOverlayProps } = useComponentContext()\n\n return (\n <motion.div\n animate=\"enter\"\n custom={{ duration }}\n exit=\"exit\"\n initial=\"exit\"\n variants={fadeVariants}\n {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n />\n )\n}, \"overlay\")()\n\nexport interface DrawerContentProps\n extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const DrawerContent = withContext<\"div\", DrawerContentProps>(\n ({ children, ...rest }) => {\n const {\n closeOnDrag,\n duration,\n open,\n placement,\n withCloseButton,\n withDragBar,\n getContentProps,\n } = useComponentContext()\n const [omittedChildren, customCloseButton, customDragBar] =\n useSplitChildren(children, DrawerCloseButton, DrawerDragBar)\n\n return (\n <Slide\n as=\"section\"\n duration={duration}\n open={open}\n placement={placement}\n {...(getContentProps(rest) as SlideProps)}\n >\n {customCloseButton ?? (withCloseButton ? <DrawerCloseButton /> : null)}\n {customDragBar ??\n (withDragBar && closeOnDrag ? <DrawerDragBar /> : null)}\n\n {omittedChildren}\n </Slide>\n )\n },\n \"content\",\n)()\n\ninterface ShorthandDrawerContentProps {\n /\n The drawer body to use.\n /\n body?: DrawerBodyProps \| ReactNode\n /\n The drawer cancel button to use.\n /\n cancel?: ButtonProps \| ReactNode\n /\n The drawer footer to use.\n /\n footer?: DrawerFooterProps \| ReactNode\n /\n The drawer header to use.\n /\n header?: DrawerHeaderProps \| ReactNode\n /\n The drawer middle button to use.\n /\n middle?: ButtonProps \| ReactNode\n /\n The drawer success button to use.\n /\n success?: ButtonProps \| ReactNode\n /\n The drawer title to use.\n /\n title?: DrawerTitleProps \| 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 ShorthandDrawerContent: FC<ShorthandDrawerContentProps> = ({\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(DrawerHeader, header)\n const customTitle = wrapOrPassProps(DrawerTitle, title)\n const customBody = wrapOrPassProps(DrawerBody, body)\n const customFooter = wrapOrPassProps(DrawerFooter, 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 <DrawerContent>\n {customHeader ??\n (customTitle ? <DrawerHeader>{customTitle}</DrawerHeader> : null)}\n {customBody}\n {customFooter ??\n (customCancel \|\| customMiddle \|\| customSuccess ? (\n <DrawerFooter>\n {customCancel}\n {customMiddle}\n {customSuccess}\n </DrawerFooter>\n ) : null)}\n </DrawerContent>\n )\n}\n\nexport interface DrawerDragBarProps extends HTMLStyledProps {}\n\nexport const DrawerDragBar = withContext<\"div\", DrawerDragBarProps>(\n \"div\",\n \"dragBar\",\n)(undefined, (props) => {\n const { getDragBarProps } = useComponentContext()\n\n return { ...getDragBarProps(props) }\n})\n\nexport interface DrawerDragTriggerProps extends HTMLStyledProps {}\n\nexport const DrawerDragTrigger = withContext<\"div\", DrawerDragTriggerProps>(\n \"div\",\n { name: \"DragTrigger\", slot: [\"trigger\", \"drag\"] },\n)(undefined, (props) => {\n const { getDragTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getDragTriggerProps(props) }\n})\n\nexport interface DrawerHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const DrawerHeader = withContext<\"header\", DrawerHeaderProps>(\n \"header\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps } = useComponentContext()\n\n return { ...getHeaderProps(props) }\n})\n\nexport interface DrawerTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const DrawerTitle = withContext<\"h2\", DrawerTitleProps>(\"h2\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps } = useComponentContext()\n\n return { ...getTitleProps(props) }\n },\n)\n\nexport interface DrawerBodyProps extends HTMLStyledProps {}\n\nexport const DrawerBody = withContext<\"div\", DrawerBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(props) }\n },\n)\n\nexport interface DrawerFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const DrawerFooter = withContext<\"footer\", DrawerFooterProps>(\n \"footer\",\n \"footer\",\n)(undefined, (props) => {\n const { getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}

package/dist/esm/components/modal/modal.js CHANGED Viewed

@@ -118,10 +118,10 @@ const ModalCloseTrigger = withContext("button", {
 		...getCloseTriggerProps(mergeProps(closeTriggerProps, props)())
 	};
 });
-const ModalCloseButton = withContext(CloseButton, "closeButton")(void 0, (props) => {
-	const { closeButtonProps, getCloseButtonProps } = useComponentContext();
-	return { ...getCloseButtonProps(mergeProps(closeButtonProps, props)()) };
-});
+const ModalCloseButton = withContext((props) => {
+	const { closeButtonProps } = useComponentContext();
+	return /* @__PURE__ */ jsx(ModalCloseTrigger, { children: /* @__PURE__ */ jsx(CloseButton, { ...mergeProps(closeButtonProps, props)() }) });
+}, "closeButton")();
 const ModalOverlay = withContext((props) => {
 	const { animationScheme, duration: durationProp, getOverlayProps, overlayProps } = useComponentContext();
 	const duration = useValue(durationProp);

package/dist/esm/components/modal/modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.js","names":["isArray","motion","cast"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n extends\n Omit<UseModalReturn, \"getRootProps\">,\n UsePopupAnimationProps,\n Pick<\n ModalRootProps,\n \| \"bodyProps\"\n \| \"closeButtonProps\"\n \| \"closeTriggerProps\"\n \| \"contentProps\"\n \| \"footerProps\"\n \| \"headerProps\"\n \| \"openTriggerProps\"\n \| \"overlayProps\"\n \| \"titleProps\"\n \| \"withCloseButton\"\n > {}\n\nexport interface ModalRootProps\n extends\n Omit<HTMLStyledProps<\"div\">, \"scrollBehavior\" \| \"title\">,\n ThemeProps<ModalStyle>,\n Omit<UseModalProps, \"title\">,\n Pick<\n FocusLockProps,\n \| \"autoFocus\"\n \| \"finalFocusRef\"\n \| \"initialFocusRef\"\n \| \"lockFocusAcrossFrames\"\n \| \"restoreFocus\"\n >,\n UsePopupAnimationProps,\n ShorthandModalContentProps {\n /*\n Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n \n @default false.\n /\n allowPinchZoom?: boolean\n /\n If `true`, scrolling will be disabled on the `body` when the modal opens.\n \n @default true\n /\n blockScrollOnMount?: boolean\n /\n The modal trigger to use.\n /\n trigger?: ReactNode\n /\n If `true`, display the modal close button.\n \n @default true\n /\n withCloseButton?: boolean\n /\n If `true`, display the modal overlay.\n \n @default true\n /\n withOverlay?: boolean\n /\n Props for body element.\n /\n bodyProps?: Omit<ModalBodyProps, \"children\">\n /\n Props for close button element.\n /\n closeButtonProps?: Omit<ModalCloseButtonProps, \"children\">\n /\n Props for close trigger element.\n /\n closeTriggerProps?: Omit<ModalCloseTriggerProps, \"asChild\" \| \"children\">\n /\n Props for content element.\n /\n contentProps?: Omit<ModalContentProps, \"children\">\n /\n Props for footer element.\n /\n footerProps?: Omit<ModalFooterProps, \"children\">\n /\n Props for header element.\n /\n headerProps?: Omit<ModalHeaderProps, \"children\">\n /\n Props for open trigger element.\n /\n openTriggerProps?: Omit<ModalOpenTriggerProps, \"asChild\" \| \"children\">\n /\n Props for overlay element.\n /\n overlayProps?: Omit<ModalOverlayProps, \"children\">\n /\n Props to be forwarded to the portal component.\n /\n portalProps?: Omit<PortalProps, \"children\">\n /\n Props for title element.\n /\n titleProps?: Omit<ModalTitleProps, \"children\">\n /\n Callback function to run side effects after the modal has closed.\n /\n onCloseComplete?: () => void\n}\n\nconst {\n ComponentContext,\n PropsContext: ModalPropsContext,\n useComponentContext,\n usePropsContext: useModalPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n \"modal\",\n modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/\n `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n \n @see https://yamada-ui.com/docs/components/modal\n /\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n ({\n allowPinchZoom = false,\n animationScheme = \"scale\",\n autoFocus,\n blockScrollOnMount = true,\n body,\n cancel,\n children,\n duration,\n finalFocusRef,\n footer,\n header,\n initialFocusRef,\n lockFocusAcrossFrames = true,\n middle,\n restoreFocus,\n success,\n title,\n trigger,\n withCloseButton = true,\n withOverlay = true,\n bodyProps,\n closeButtonProps,\n closeTriggerProps,\n contentProps,\n footerProps,\n headerProps,\n openTriggerProps,\n overlayProps,\n portalProps,\n titleProps,\n onCancel,\n onCloseComplete,\n onMiddle,\n onSuccess,\n ...props\n }) => {\n const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n children,\n ModalOpenTrigger,\n ModalOverlay,\n )\n const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n const { open, getRootProps, ...rest } = useModal(props)\n const customOpenTrigger = trigger ? (\n <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n ) : null\n const context = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n withCloseButton,\n bodyProps,\n closeButtonProps,\n closeTriggerProps,\n contentProps,\n footerProps,\n headerProps,\n openTriggerProps,\n overlayProps,\n titleProps,\n ...rest,\n }),\n [\n animationScheme,\n duration,\n open,\n withCloseButton,\n contentProps,\n bodyProps,\n footerProps,\n headerProps,\n titleProps,\n openTriggerProps,\n closeTriggerProps,\n closeButtonProps,\n overlayProps,\n rest,\n ],\n )\n\n return (\n <ComponentContext value={context}>\n {openTrigger ?? customOpenTrigger}\n\n <AnimatePresence onExitComplete={onCloseComplete}>\n {open ? (\n <Portal {...portalProps}>\n <FocusLock\n autoFocus={autoFocus}\n finalFocusRef={finalFocusRef}\n initialFocusRef={initialFocusRef}\n lockFocusAcrossFrames={lockFocusAcrossFrames}\n restoreFocus={restoreFocus}\n >\n <RemoveScroll\n allowPinchZoom={allowPinchZoom}\n enabled={blockScrollOnMount}\n forwardProps\n >\n <styled.div {...getRootProps()}>\n {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n {hasChildren ? (\n omittedChildren\n ) : (\n <ShorthandModalContent\n body={body}\n cancel={cancel}\n footer={footer}\n header={header}\n middle={middle}\n success={success}\n title={title}\n onCancel={onCancel}\n onMiddle={onMiddle}\n onSuccess={onSuccess}\n />\n )}\n </styled.div>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n \"button\",\n { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n const { getOpenTriggerProps, openTriggerProps } = useComponentContext()\n\n return {\n asChild: true,\n ...getOpenTriggerProps(mergeProps(openTriggerProps, props)()),\n }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n \"button\",\n { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n const { closeTriggerProps, getCloseTriggerProps } = useComponentContext()\n\n return {\n asChild: true,\n ...getCloseTriggerProps(mergeProps(closeTriggerProps, props)()),\n }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)(undefined, (props) => {\n const { closeButtonProps, getCloseButtonProps } = useComponentContext()\n\n return { ...getCloseButtonProps(mergeProps(closeButtonProps, props)()) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n const {\n animationScheme,\n duration: durationProp,\n getOverlayProps,\n overlayProps,\n } = useComponentContext()\n const duration = useValue(durationProp)\n\n return (\n <motion.div\n custom={{ duration }}\n {...(animationScheme !== \"none\"\n ? {\n animate: \"enter\",\n exit: \"exit\",\n initial: \"exit\",\n variants: fadeVariants,\n }\n : {})}\n {...cast<HTMLMotionProps>(\n getOverlayProps(cast<HTMLProps>(mergeProps(overlayProps, props)())),\n )}\n />\n )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n ({ children, ...rest }) => {\n const {\n animationScheme,\n duration,\n withCloseButton,\n contentProps,\n getContentProps,\n } = useComponentContext()\n const [omittedChildren, customCloseButton] = useSplitChildren(\n children,\n ModalCloseButton,\n )\n const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <motion.section\n {...popupAnimationProps}\n {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n getContentProps(\n cast<HTMLProps<\"section\">>(mergeProps(contentProps, rest)()),\n ),\n )}\n >\n {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n {omittedChildren}\n </motion.section>\n )\n },\n \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n /\n The modal body to use.\n /\n body?: ModalBodyProps \| ReactNode\n /\n The modal cancel button to use.\n /\n cancel?: ButtonProps \| ReactNode\n /\n The modal footer to use.\n /\n footer?: ModalFooterProps \| ReactNode\n /\n The modal header to use.\n /\n header?: ModalHeaderProps \| ReactNode\n /\n The modal middle button to use.\n /\n middle?: ButtonProps \| ReactNode\n /\n The modal success button to use.\n /\n success?: ButtonProps \| ReactNode\n /\n The modal title to use.\n /\n title?: ModalTitleProps \| ReactNode\n /\n The callback invoked when cancel button clicked.\n /\n onCancel?: (onClose: () => void) => void\n /\n The callback invoked when middle button clicked.\n /\n onMiddle?: (onClose: () => void) => void\n /\n The callback invoked when success button clicked.\n */\n onSuccess?: (onClose: () => void) => void\n}\n\nconst ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n body,\n cancel,\n footer,\n header,\n middle,\n success,\n title,\n onCancel,\n onMiddle,\n onSuccess,\n}) => {\n const { onClose } = useComponentContext()\n const customHeader = wrapOrPassProps(ModalHeader, header)\n const customTitle = wrapOrPassProps(ModalTitle, title)\n const customBody = wrapOrPassProps(ModalBody, body)\n const customFooter = wrapOrPassProps(ModalFooter, footer)\n const customCancel = wrapOrPassProps(Button, cancel, {\n colorScheme: \"mono\",\n variant: \"ghost\",\n onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n })\n const customMiddle = wrapOrPassProps(Button, middle, {\n colorScheme: \"secondary\",\n onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n })\n const customSuccess = wrapOrPassProps(Button, success, {\n colorScheme: \"primary\",\n onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n })\n\n return (\n <ModalContent>\n {customHeader ??\n (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n {customBody}\n {customFooter ??\n (customCancel \|\| customMiddle \|\| customSuccess ? (\n <ModalFooter>\n {customCancel}\n {customMiddle}\n {customSuccess}\n </ModalFooter>\n ) : null)}\n </ModalContent>\n )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n \"header\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps, headerProps } = useComponentContext()\n\n return { ...getHeaderProps(mergeProps(headerProps, props)()) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps, titleProps } = useComponentContext()\n\n return { ...getTitleProps(mergeProps(titleProps, props)()) }\n },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { bodyProps, getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(mergeProps(bodyProps, props)()) }\n },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n \"footer\",\n \"footer\",\n)(undefined, (props) => {\n const { footerProps, getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(mergeProps(footerProps, props)()) }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuIA,MAAM,EACJ,kBACA,cAAc,mBACd,qBACA,iBAAiB,sBACjB,aACA,iBACE,oBACF,SACA,UACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,iBAAiB,OACjB,kBAAkB,SAClB,WACA,qBAAqB,MACrB,MACA,QACA,UACA,UACA,eACA,QACA,QACA,iBACA,wBAAwB,MACxB,QACA,cACA,SACA,OACA,SACA,kBAAkB,MAClB,cAAc,MACd,WACA,kBACA,mBACA,cACA,aACA,aACA,kBACA,cACA,aACA,YACA,UACA,iBACA,UACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,iBAAiB,aAAa,iBAAiB,iBACpD,UACA,kBACA,YACF;CACA,MAAM,eAAA,GAAcA,cAAAA,QAAAA,CAAQ,eAAe,KAAK,CAAC,CAAC,gBAAgB;CAClE,MAAM,EAAE,MAAM,cAAc,GAAG,SAAS,SAAS,KAAK;CACtD,MAAM,oBAAoB,UACxB,oBAAC,kBAAD,EAAA,UAAmB,QAA0B,CAAA,IAC3C;CACJ,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;CACL,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,qBAAC,kBAAD;EAAkB,OAAO;EAAzB,UAAA,CACG,eAAe,mBAEhB,oBAAC,iBAAD;GAAiB,gBAAgB;GAC9B,UAAA,OACC,oBAAC,QAAD;IAAQ,GAAI;IACV,UAAA,oBAAC,WAAD;KACa;KACI;KACE;KACM;KACT;KAEd,UAAA,oBAAC,cAAD;MACkB;MAChB,SAAS;MACT,cAAA;MAEA,UAAA,qBAAC,OAAO,KAAR;OAAY,GAAI,aAAa;OAA7B,UAAA,CACG,kBAAkB,cAAc,oBAAC,cAAD,CAAe,CAAA,IAAI,OAEnD,cACC,kBAEA,oBAAC,uBAAD;QACQ;QACE;QACA;QACA;QACA;QACC;QACF;QACG;QACA;QACC;OACZ,CAAA,CAEO;;KACA,CAAA;IACL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"}
1	+ {"version":3,"file":"modal.js","names":["isArray","motion","cast"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n extends\n Omit<UseModalReturn, \"getRootProps\">,\n UsePopupAnimationProps,\n Pick<\n ModalRootProps,\n \| \"bodyProps\"\n \| \"closeButtonProps\"\n \| \"closeTriggerProps\"\n \| \"contentProps\"\n \| \"footerProps\"\n \| \"headerProps\"\n \| \"openTriggerProps\"\n \| \"overlayProps\"\n \| \"titleProps\"\n \| \"withCloseButton\"\n > {}\n\nexport interface ModalRootProps\n extends\n Omit<HTMLStyledProps<\"div\">, \"scrollBehavior\" \| \"title\">,\n ThemeProps<ModalStyle>,\n Omit<UseModalProps, \"title\">,\n Pick<\n FocusLockProps,\n \| \"autoFocus\"\n \| \"finalFocusRef\"\n \| \"initialFocusRef\"\n \| \"lockFocusAcrossFrames\"\n \| \"restoreFocus\"\n >,\n UsePopupAnimationProps,\n ShorthandModalContentProps {\n /*\n Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n \n @default false.\n /\n allowPinchZoom?: boolean\n /\n If `true`, scrolling will be disabled on the `body` when the modal opens.\n \n @default true\n /\n blockScrollOnMount?: boolean\n /\n The modal trigger to use.\n /\n trigger?: ReactNode\n /\n If `true`, display the modal close button.\n \n @default true\n /\n withCloseButton?: boolean\n /\n If `true`, display the modal overlay.\n \n @default true\n /\n withOverlay?: boolean\n /\n Props for body element.\n /\n bodyProps?: Omit<ModalBodyProps, \"children\">\n /\n Props for close button element.\n /\n closeButtonProps?: Omit<ModalCloseButtonProps, \"children\">\n /\n Props for close trigger element.\n /\n closeTriggerProps?: Omit<ModalCloseTriggerProps, \"asChild\" \| \"children\">\n /\n Props for content element.\n /\n contentProps?: Omit<ModalContentProps, \"children\">\n /\n Props for footer element.\n /\n footerProps?: Omit<ModalFooterProps, \"children\">\n /\n Props for header element.\n /\n headerProps?: Omit<ModalHeaderProps, \"children\">\n /\n Props for open trigger element.\n /\n openTriggerProps?: Omit<ModalOpenTriggerProps, \"asChild\" \| \"children\">\n /\n Props for overlay element.\n /\n overlayProps?: Omit<ModalOverlayProps, \"children\">\n /\n Props to be forwarded to the portal component.\n /\n portalProps?: Omit<PortalProps, \"children\">\n /\n Props for title element.\n /\n titleProps?: Omit<ModalTitleProps, \"children\">\n /\n Callback function to run side effects after the modal has closed.\n /\n onCloseComplete?: () => void\n}\n\nconst {\n ComponentContext,\n PropsContext: ModalPropsContext,\n useComponentContext,\n usePropsContext: useModalPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n \"modal\",\n modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/\n `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n \n @see https://yamada-ui.com/docs/components/modal\n /\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n ({\n allowPinchZoom = false,\n animationScheme = \"scale\",\n autoFocus,\n blockScrollOnMount = true,\n body,\n cancel,\n children,\n duration,\n finalFocusRef,\n footer,\n header,\n initialFocusRef,\n lockFocusAcrossFrames = true,\n middle,\n restoreFocus,\n success,\n title,\n trigger,\n withCloseButton = true,\n withOverlay = true,\n bodyProps,\n closeButtonProps,\n closeTriggerProps,\n contentProps,\n footerProps,\n headerProps,\n openTriggerProps,\n overlayProps,\n portalProps,\n titleProps,\n onCancel,\n onCloseComplete,\n onMiddle,\n onSuccess,\n ...props\n }) => {\n const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n children,\n ModalOpenTrigger,\n ModalOverlay,\n )\n const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n const { open, getRootProps, ...rest } = useModal(props)\n const customOpenTrigger = trigger ? (\n <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n ) : null\n const context = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n withCloseButton,\n bodyProps,\n closeButtonProps,\n closeTriggerProps,\n contentProps,\n footerProps,\n headerProps,\n openTriggerProps,\n overlayProps,\n titleProps,\n ...rest,\n }),\n [\n animationScheme,\n duration,\n open,\n withCloseButton,\n contentProps,\n bodyProps,\n footerProps,\n headerProps,\n titleProps,\n openTriggerProps,\n closeTriggerProps,\n closeButtonProps,\n overlayProps,\n rest,\n ],\n )\n\n return (\n <ComponentContext value={context}>\n {openTrigger ?? customOpenTrigger}\n\n <AnimatePresence onExitComplete={onCloseComplete}>\n {open ? (\n <Portal {...portalProps}>\n <FocusLock\n autoFocus={autoFocus}\n finalFocusRef={finalFocusRef}\n initialFocusRef={initialFocusRef}\n lockFocusAcrossFrames={lockFocusAcrossFrames}\n restoreFocus={restoreFocus}\n >\n <RemoveScroll\n allowPinchZoom={allowPinchZoom}\n enabled={blockScrollOnMount}\n forwardProps\n >\n <styled.div {...getRootProps()}>\n {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n {hasChildren ? (\n omittedChildren\n ) : (\n <ShorthandModalContent\n body={body}\n cancel={cancel}\n footer={footer}\n header={header}\n middle={middle}\n success={success}\n title={title}\n onCancel={onCancel}\n onMiddle={onMiddle}\n onSuccess={onSuccess}\n />\n )}\n </styled.div>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n \"button\",\n { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n const { getOpenTriggerProps, openTriggerProps } = useComponentContext()\n\n return {\n asChild: true,\n ...getOpenTriggerProps(mergeProps(openTriggerProps, props)()),\n }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n \"button\",\n { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n const { closeTriggerProps, getCloseTriggerProps } = useComponentContext()\n\n return {\n asChild: true,\n ...getCloseTriggerProps(mergeProps(closeTriggerProps, props)()),\n }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n (props) => {\n const { closeButtonProps } = useComponentContext()\n\n return (\n <ModalCloseTrigger>\n <CloseButton {...mergeProps(closeButtonProps, props)()} />\n </ModalCloseTrigger>\n )\n },\n \"closeButton\",\n)()\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n const {\n animationScheme,\n duration: durationProp,\n getOverlayProps,\n overlayProps,\n } = useComponentContext()\n const duration = useValue(durationProp)\n\n return (\n <motion.div\n custom={{ duration }}\n {...(animationScheme !== \"none\"\n ? {\n animate: \"enter\",\n exit: \"exit\",\n initial: \"exit\",\n variants: fadeVariants,\n }\n : {})}\n {...cast<HTMLMotionProps>(\n getOverlayProps(cast<HTMLProps>(mergeProps(overlayProps, props)())),\n )}\n />\n )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n ({ children, ...rest }) => {\n const {\n animationScheme,\n duration,\n withCloseButton,\n contentProps,\n getContentProps,\n } = useComponentContext()\n const [omittedChildren, customCloseButton] = useSplitChildren(\n children,\n ModalCloseButton,\n )\n const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <motion.section\n {...popupAnimationProps}\n {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n getContentProps(\n cast<HTMLProps<\"section\">>(mergeProps(contentProps, rest)()),\n ),\n )}\n >\n {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n {omittedChildren}\n </motion.section>\n )\n },\n \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n /\n The modal body to use.\n /\n body?: ModalBodyProps \| ReactNode\n /\n The modal cancel button to use.\n /\n cancel?: ButtonProps \| ReactNode\n /\n The modal footer to use.\n /\n footer?: ModalFooterProps \| ReactNode\n /\n The modal header to use.\n /\n header?: ModalHeaderProps \| ReactNode\n /\n The modal middle button to use.\n /\n middle?: ButtonProps \| ReactNode\n /\n The modal success button to use.\n /\n success?: ButtonProps \| ReactNode\n /\n The modal title to use.\n /\n title?: ModalTitleProps \| ReactNode\n /\n The callback invoked when cancel button clicked.\n /\n onCancel?: (onClose: () => void) => void\n /\n The callback invoked when middle button clicked.\n /\n onMiddle?: (onClose: () => void) => void\n /\n The callback invoked when success button clicked.\n */\n onSuccess?: (onClose: () => void) => void\n}\n\nconst ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n body,\n cancel,\n footer,\n header,\n middle,\n success,\n title,\n onCancel,\n onMiddle,\n onSuccess,\n}) => {\n const { onClose } = useComponentContext()\n const customHeader = wrapOrPassProps(ModalHeader, header)\n const customTitle = wrapOrPassProps(ModalTitle, title)\n const customBody = wrapOrPassProps(ModalBody, body)\n const customFooter = wrapOrPassProps(ModalFooter, footer)\n const customCancel = wrapOrPassProps(Button, cancel, {\n colorScheme: \"mono\",\n variant: \"ghost\",\n onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n })\n const customMiddle = wrapOrPassProps(Button, middle, {\n colorScheme: \"secondary\",\n onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n })\n const customSuccess = wrapOrPassProps(Button, success, {\n colorScheme: \"primary\",\n onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n })\n\n return (\n <ModalContent>\n {customHeader ??\n (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n {customBody}\n {customFooter ??\n (customCancel \|\| customMiddle \|\| customSuccess ? (\n <ModalFooter>\n {customCancel}\n {customMiddle}\n {customSuccess}\n </ModalFooter>\n ) : null)}\n </ModalContent>\n )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n \"header\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps, headerProps } = useComponentContext()\n\n return { ...getHeaderProps(mergeProps(headerProps, props)()) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps, titleProps } = useComponentContext()\n\n return { ...getTitleProps(mergeProps(titleProps, props)()) }\n },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { bodyProps, getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(mergeProps(bodyProps, props)()) }\n },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n \"footer\",\n \"footer\",\n)(undefined, (props) => {\n const { footerProps, getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(mergeProps(footerProps, props)()) }\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuIA,MAAM,EACJ,kBACA,cAAc,mBACd,qBACA,iBAAiB,sBACjB,aACA,iBACE,oBACF,SACA,UACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,iBAAiB,OACjB,kBAAkB,SAClB,WACA,qBAAqB,MACrB,MACA,QACA,UACA,UACA,eACA,QACA,QACA,iBACA,wBAAwB,MACxB,QACA,cACA,SACA,OACA,SACA,kBAAkB,MAClB,cAAc,MACd,WACA,kBACA,mBACA,cACA,aACA,aACA,kBACA,cACA,aACA,YACA,UACA,iBACA,UACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,iBAAiB,aAAa,iBAAiB,iBACpD,UACA,kBACA,YACF;CACA,MAAM,eAAA,GAAcA,cAAAA,QAAAA,CAAQ,eAAe,KAAK,CAAC,CAAC,gBAAgB;CAClE,MAAM,EAAE,MAAM,cAAc,GAAG,SAAS,SAAS,KAAK;CACtD,MAAM,oBAAoB,UACxB,oBAAC,kBAAD,EAAA,UAAmB,QAA0B,CAAA,IAC3C;CACJ,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;CACL,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,qBAAC,kBAAD;EAAkB,OAAO;EAAzB,UAAA,CACG,eAAe,mBAEhB,oBAAC,iBAAD;GAAiB,gBAAgB;GAC9B,UAAA,OACC,oBAAC,QAAD;IAAQ,GAAI;IACV,UAAA,oBAAC,WAAD;KACa;KACI;KACE;KACM;KACT;KAEd,UAAA,oBAAC,cAAD;MACkB;MAChB,SAAS;MACT,cAAA;MAEA,UAAA,qBAAC,OAAO,KAAR;OAAY,GAAI,aAAa;OAA7B,UAAA,CACG,kBAAkB,cAAc,oBAAC,cAAD,CAAe,CAAA,IAAI,OAEnD,cACC,kBAEA,oBAAC,uBAAD;QACQ;QACE;QACA;QACA;QACA;QACC;QACF;QACG;QACA;QACC;OACZ,CAAA,CAEO;;KACA,CAAA;IACL,CAAA;GACL,CAAA,IACN;EACW,CAAA,CACD;;AAEtB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,mBAAmB,YAC9B,UACA;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,MAAM;AAAE,CACnD,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,qBAAqB,qBAAqB,oBAAoB;CAEtE,OAAO;EACL,SAAS;EACT,GAAG,oBAAoB,WAAW,kBAAkB,KAAK,CAAC,CAAC,CAAC;CAC9D;AACF,CAAC;AAID,MAAa,oBAAoB,YAC/B,UACA;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,OAAO;AAAE,CACrD,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,yBAAyB,oBAAoB;CAExE,OAAO;EACL,SAAS;EACT,GAAG,qBAAqB,WAAW,mBAAmB,KAAK,CAAC,CAAC,CAAC;CAChE;AACF,CAAC;AAID,MAAa,mBAAmB,aAC7B,UAAU;CACT,MAAM,EAAE,qBAAqB,oBAAoB;CAEjD,OACE,oBAAC,mBAAD,EAAA,UACE,oBAAC,aAAD,EAAa,GAAI,WAAW,kBAAkB,KAAK,CAAC,CAAC,EAAI,CAAA,EACxC,CAAA;AAEvB,GACA,aACF,CAAC,CAAC;AAIF,MAAa,eAAe,aAAuC,UAAU;CAC3E,MAAM,EACJ,iBACA,UAAU,cACV,iBACA,iBACE,oBAAoB;CACxB,MAAM,WAAW,SAAS,YAAY;CAEtC,OACE,oBAACC,SAAO,KAAR;EACE,QAAQ,EAAE,SAAS;EACnB,GAAK,oBAAoB,SACrB;GACE,SAAS;GACT,MAAM;GACN,SAAS;GACT,UAAU;EACZ,IACA,CAAC;EACL,IAAA,GAAIC,cAAAA,KAAAA,CACF,iBAAA,GAAgBA,cAAAA,KAAAA,CAAgB,WAAW,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,CACpE;CACD,CAAA;AAEL,GAAG,SAAS,CAAC,CAAC;AAKd,MAAa,eAAe,aACzB,EAAE,UAAU,GAAG,WAAW;CACzB,MAAM,EACJ,iBACA,UACA,iBACA,cACA,oBACE,oBAAoB;CACxB,MAAM,CAAC,iBAAiB,qBAAqB,iBAC3C,UACA,gBACF;CACA,MAAM,sBAAsB,uBAAuB;EACjD;EACA;CACF,CAAC;CAED,OACE,qBAACD,SAAO,SAAR;EACE,GAAI;EACJ,IAAA,GAAIC,cAAAA,KAAAA,CACF,iBAAA,GACEA,cAAAA,KAAAA,CAA2B,WAAW,cAAc,IAAI,CAAC,CAAC,CAAC,CAC7D,CACF;EANF,UAAA,CAQG,sBAAsB,kBAAkB,oBAAC,kBAAD,CAAmB,CAAA,IAAI,OAE/D,eACa;;AAEpB,GACA,SACF,CAAC,CAAC;AA6CF,MAAM,yBAAyD,EAC7D,MACA,QACA,QACA,QACA,QACA,SACA,OACA,UACA,UACA,gBACI;CACJ,MAAM,EAAE,YAAY,oBAAoB;CACxC,MAAM,eAAe,gBAAgB,aAAa,MAAM;CACxD,MAAM,cAAc,gBAAgB,YAAY,KAAK;CACrD,MAAM,aAAa,gBAAgB,WAAW,IAAI;CAClD,MAAM,eAAe,gBAAgB,aAAa,MAAM;CACxD,MAAM,eAAe,gBAAgB,QAAQ,QAAQ;EACnD,aAAa;EACb,SAAS;EACT,eAAgB,WAAW,SAAS,OAAO,IAAI,QAAQ;CACzD,CAAC;CACD,MAAM,eAAe,gBAAgB,QAAQ,QAAQ;EACnD,aAAa;EACb,eAAgB,WAAW,SAAS,OAAO,IAAI,QAAQ;CACzD,CAAC;CACD,MAAM,gBAAgB,gBAAgB,QAAQ,SAAS;EACrD,aAAa;EACb,eAAgB,YAAY,UAAU,OAAO,IAAI,QAAQ;CAC3D,CAAC;CAED,OACE,qBAAC,cAAD,EAAA,UAAA;EACG,iBACE,cAAc,oBAAC,aAAD,EAAA,UAAc,YAAyB,CAAA,IAAI;EAC3D;EACA,iBACE,gBAAgB,gBAAgB,gBAC/B,qBAAC,aAAD,EAAA,UAAA;GACG;GACA;GACA;EACU,EAAA,CAAA,IACX;CACM,EAAA,CAAA;AAElB;AAIA,MAAa,cAAc,YACzB,UACA,QACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,gBAAgB,gBAAgB,oBAAoB;CAE5D,OAAO,EAAE,GAAG,eAAe,WAAW,aAAa,KAAK,CAAC,CAAC,CAAC,EAAE;AAC/D,CAAC;AAID,MAAa,aAAa,YAAmC,MAAM,OAAO,CAAC,CACzE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,eAAe,eAAe,oBAAoB;CAE1D,OAAO,EAAE,GAAG,cAAc,WAAW,YAAY,KAAK,CAAC,CAAC,CAAC,EAAE;AAC7D,CACF;AAIA,MAAa,YAAY,YAAmC,OAAO,MAAM,CAAC,CACxE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,WAAW,iBAAiB,oBAAoB;CAExD,OAAO,EAAE,GAAG,aAAa,WAAW,WAAW,KAAK,CAAC,CAAC,CAAC,EAAE;AAC3D,CACF;AAIA,MAAa,cAAc,YACzB,UACA,QACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,aAAa,mBAAmB,oBAAoB;CAE5D,OAAO,EAAE,GAAG,eAAe,WAAW,aAAa,KAAK,CAAC,CAAC,CAAC,EAAE;AAC/D,CAAC"}

package/dist/esm/components/modal/use-modal.js CHANGED Viewed

@@ -1,8 +1,6 @@
 import { useIds } from "../../utils/dom.js";
-import { utils_exports } from "../../utils/index.js";
 import { mergeProps } from "../../core/components/props.js";
 import { useDisclosure } from "../../hooks/use-disclosure/use-disclosure.js";
-import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
 import { useCallback } from "react";
 // src/components/modal/use-modal.ts
 const useModal = ({ closeOnEsc = true, closeOnOverlay = true, defaultOpen, open: openProp, onClose: onCloseProp, onEsc, onOpen: onOpenProp, ...rest } = {}) => {
@@ -13,7 +11,6 @@ const useModal = ({ closeOnEsc = true, closeOnOverlay = true, defaultOpen, open:
 		onOpen: onOpenProp
 	});
 	const [contentId, titleId, bodyId] = useIds();
-	const { t } = useI18n("modal");
 	const onKeyDown = useCallback((ev) => {
 		if (ev.key !== "Escape") return;
 		if (closeOnEsc) {
@@ -27,37 +24,20 @@ const useModal = ({ closeOnEsc = true, closeOnOverlay = true, defaultOpen, open:
 		onEsc
 	]);
 	const getRootProps = useCallback((props) => mergeProps(rest, props ?? {})(), [rest]);
-	const getOverlayProps = useCallback((props = {}) => ({
-		"aria-hidden": "true",
-		...props,
-		onClick: (0, utils_exports.handlerAll)(props.onClick, (ev) => {
-			ev.stopPropagation();
-			if (closeOnOverlay) onClose();
-		})
-	}), [closeOnOverlay, onClose]);
-	const getOpenTriggerProps = useCallback((props = {}) => ({
+	const getOverlayProps = useCallback((props = {}) => mergeProps({ "aria-hidden": "true" }, props, { onClick: (ev) => {
+		ev.stopPropagation();
+		if (closeOnOverlay) onClose();
+	} })(), [closeOnOverlay, onClose]);
+	const getOpenTriggerProps = useCallback((props = {}) => mergeProps({
 		"aria-controls": open ? contentId : void 0,
 		"aria-expanded": open,
-		"aria-haspopup": "dialog",
-		"aria-label": t("Open modal"),
-		...props,
-		onClick: (0, utils_exports.handlerAll)(props.onClick, onOpen)
-	}), [
+		"aria-haspopup": "dialog"
+	}, props, { onClick: onOpen })(), [
 		contentId,
 		onOpen,
-		open,
-		t
+		open
 	]);
-	const getCloseTriggerProps = useCallback((props = {}) => ({
-		"aria-label": t("Close modal"),
-		...props,
-		onClick: (0, utils_exports.handlerAll)(props.onClick, onClose)
-	}), [onClose, t]);
-	const getCloseButtonProps = useCallback((props = {}) => ({
-		"aria-label": t("Close modal"),
-		...props,
-		onClick: (0, utils_exports.handlerAll)(props.onClick, onClose)
-	}), [onClose, t]);
+	const getCloseTriggerProps = useCallback((props = {}) => mergeProps(props, { onClick: onClose })(), [onClose]);
 	const getContentProps = useCallback((props = {}) => mergeProps({
 		id: contentId,
 		"aria-describedby": bodyId,
@@ -81,7 +61,6 @@ const useModal = ({ closeOnEsc = true, closeOnOverlay = true, defaultOpen, open:
 			id: bodyId,
 			...props
 		}), [bodyId]),
-		getCloseButtonProps,
 		getCloseTriggerProps,
 		getContentProps,
 		getFooterProps: useCallback((props) => ({ ...props }), []),

package/dist/esm/components/modal/use-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-modal.js","names":[~~"handlerAll"~~],"sources":["../../../../src/components/modal/use-modal.ts"],"sourcesContent":["import type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseDisclosureProps } from \"../../hooks/use-disclosure\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useDisclosure } from \"../../hooks/use-disclosure\"\nimport { ~~useI18n } from \"../../providers/i18n-provider\"\nimport { handlerAll,~~ useIds } from \"../../utils\"\n\nexport interface UseModalProps\n extends HTMLProps, Omit<UseDisclosureProps, \"timing\"> {\n /*\n If `true`, the modal will close when the `Esc` key is pressed.\n \n @default true\n /\n closeOnEsc?: boolean\n /\n If `true`, the modal will close when the overlay is clicked.\n \n @default true\n /\n closeOnOverlay?: boolean\n /\n Callback invoked when the escape key is pressed and focus is within modal.\n */\n onEsc?: () => void\n}\n\nexport const useModal = ({\n closeOnEsc = true,\n closeOnOverlay = true,\n defaultOpen,\n open: openProp,\n onClose: onCloseProp,\n onEsc,\n onOpen: onOpenProp,\n ...rest\n}: UseModalProps = {}) => {\n const { open, onClose, onOpen } = useDisclosure({\n defaultOpen,\n open: openProp,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n })\n const [contentId, titleId, bodyId] = useIds()\n ~~const { t } = useI18n(~~\~~"modal\")\~~n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.key !== \"Escape\") return\n\n if (closeOnEsc) {\n ev.stopPropagation()\n onClose()\n }\n\n onEsc?.()\n },\n [closeOnEsc, onClose, onEsc],\n )\n\n const getRootProps: PropGetter = useCallback(\n (props) => mergeProps(rest, props ?? {})(),\n [rest],\n )\n\n const getOverlayProps: PropGetter = useCallback(\n (props = {}) => ({\~~n \~~"aria-hidden\": \"true\"~~,\n ...~~props,\n onClick: ~~handlerAll~~(~~props.onClick, (~~ev) => {\n ev.stopPropagation()\n\n if (closeOnOverlay) onClose()\n }),\n }),\n [closeOnOverlay, onClose],\n )\n\n const getOpenTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n \"aria-controls\": open ? contentId : undefined,\n \"aria-expanded\": open,\n \"aria-haspopup\": \"dialog\",\n ~~\"aria-label\": t(\"Open modal\")~~,\n ~~...~~props,\n onClick: ~~handlerAll(props.onClick,~~ ~~onOpen)~~,\n }),\n [contentId, onOpen, open~~, t~~],\n )\n\n const getCloseTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({~~\n \"aria-label\":~~ ~~t(\"Close modal\"),\n ...props,\n~~ onClick: ~~handlerAll(props.onClick,~~ onClose~~),\n }),\n [onClose,~~ ~~t],\n )\n\n const getCloseButtonProps: PropGetter<\"button\"> = useCallback(\n (props = {~~}) => (~~{\n \"aria-label\": t(\"Close modal\"~~),\n ~~...props,\n onClick: handlerAll(props.onClick, onClose),\n~~ ~~}),\n~~ [onClose~~, t~~],\n )\n\n const getContentProps: PropGetter<\"section\"> = useCallback(\n (props = {}) =>\n mergeProps(\n {\n id: contentId,\n \"aria-describedby\": bodyId,\n \"aria-labelledby\": titleId,\n \"aria-modal\": \"true\",\n role: \"dialog\",\n },\n props,\n { onKeyDown },\n )(),\n [bodyId, contentId, onKeyDown, titleId],\n )\n\n const getHeaderProps: PropGetter<\"header\"> = useCallback(\n (props) => ({\n ...props~~,\n~~ }),\n [],\n )\n\n const getTitleProps: PropGetter<\"h2\"> = useCallback(\n (props) => ({\n id: titleId~~,\n~~ ...props~~,\n~~ }),\n [titleId],\n )\n\n const getBodyProps: PropGetter = useCallback(\n (props) => ({\n id: bodyId~~,\n~~ ...props~~,\n~~ }),\n [bodyId],\n )\n\n const getFooterProps: PropGetter<\"footer\"> = useCallback(\n (props) => ({\n ...props~~,\n~~ }),\n [],\n )\n\n return {\n open,\n getBodyProps,\n ~~getCloseButtonProps,\n~~ getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getOpenTriggerProps,\n getOverlayProps,\n getRootProps,\n getTitleProps,\n onClose,\n onOpen,\n }\n}\n\nexport type UseModalReturn = ReturnType<typeof useModal>\n"],"mappings":"~~;;;;;;;AA6BA~~,MAAa,YAAY,EACvB,aAAa,MACb,iBAAiB,MACjB,aACA,MAAM,UACN,SAAS,aACT,OACA,QAAQ,YACR,GAAG,SACc,CAAC,MAAM;CACxB,MAAM,EAAE,MAAM,SAAS,WAAW,cAAc;EAC9C;EACA,MAAM;EACN,SAAS;EACT,QAAQ;CACV,CAAC;CACD,MAAM,CAAC,WAAW,SAAS,UAAU,OAAO;~~CAC5C~~,MAAM,~~EAAE,MAAM,QAAQ,OAAO;CAE7B,MAAM,~~YAAY,aACf,OAAsB;EACrB,IAAI,GAAG,QAAQ,UAAU;EAEzB,IAAI,YAAY;GACd,GAAG,gBAAgB;GACnB,QAAQ;EACV;EAEA,QAAQ;CACV,GACA;EAAC;EAAY;EAAS;CAAK,CAC7B;CAEA,MAAM,eAA2B,aAC9B,UAAU,WAAW,MAAM,SAAS,CAAC,CAAC,CAAC,CAAC,GACzC,CAAC,IAAI,CACP;CAEA,MAAM,kBAA8B,aACjC,QAAQ,CAAC,~~OAAO;EACf~~,~~eAAe;EACf~~,~~GAAG;EACH~~,~~UAAA~~,~~GAASA~~,~~cAAAA~~,~~WAAAA~~,~~CAAW~~,~~MAAM,~~UAAU,OAAO;~~GACzC~~,GAAG,gBAAgB;~~GAEnB~~,IAAI,gBAAgB,QAAQ;~~EAC9B~~,CAAC~~;CACH~~,~~IACA~~,CAAC,gBAAgB,OAAO,CAC1B;CAEA,MAAM,sBAA4C,aAC/C,QAAQ,CAAC,~~OAAO~~;~~EACf~~,iBAAiB,OAAO,YAAY,KAAA;EACpC,iBAAiB;EACjB,iBAAiB;~~EACjB~~,~~cAAc~~,EAAE,~~YAAY;EAC5B~~,~~GAAG;EACH~~,~~UAAA~~,~~GAASA~~,~~cAAAA~~,~~WAAAA,CAAW,MAAM,SAAS,MAAM~~;~~CAC3C,IACA;~~EAAC;EAAW;EAAQ;~~EAAM;CAAC~~,~~CAC7B~~;CAEA,MAAM,uBAA6C,aAChD,QAAQ,CAAC,~~OAAO;EACf,cAAc,EAAE,aAAa;EAC7B,GAAG;EACH,UAAA,GAASA,cAAAA,WAAAA,CAAW,~~MAAM,~~SAAS~~,OAAO~~;CAC5C~~,~~IACA~~,~~CAAC,~~SAAS,~~CAAC,CACb;CAEA,MAAM,sBAA4C,aAC/C,~~QAAQ,CAAC,~~OAAO;EACf~~,~~cAAc~~,~~EAAE~~,~~aAAa;EAC7B~~,~~GAAG;EACH,UAAA,GAASA,cAAAA,WAAAA,CAAW,MAAM,SAAS,~~OAAO~~;CAC5C~~,~~IACA,CAAC,SAAS,CAAC,CACb~~;CAEA,MAAM,kBAAyC,aAC5C,QAAQ,CAAC,MACR,WACE;EACE,IAAI;EACJ,oBAAoB;EACpB,mBAAmB;EACnB,cAAc;EACd,MAAM;CACR,GACA,OACA,EAAE,UAAU,CACd,CAAC,CAAC,GACJ;EAAC;EAAQ;EAAW;EAAW;CAAO,CACxC;CAEA,MAAM,iBAAuC,aAC1C,WAAW,~~EACV~~,GAAG,~~MACL~~,~~IACA~~,CAAC,CACH;CAEA,MAAM,gBAAkC,aACrC,WAAW;~~EACV~~,IAAI;~~EACJ~~,GAAG;~~CACL~~,~~IACA~~,CAAC,OAAO,CACV;~~CAiBA~~,OAAO;EACL;EACA,~~cAjB~~+B,aAC9B,WAAW;~~GACV~~,IAAI;~~GACJ~~,GAAG;~~EACL~~,~~IACA~~,CAAC,MAAM,~~CAYI~~;EACX;EACA;EACA~~;EACA~~,~~gBAb2C~~,aAC1C,WAAW,~~EACV~~,GAAG,~~MACL~~,~~IACA~~,CAAC,~~CASY~~;EACb;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
1	+ {"version":3,"file":"use-modal.js","names":[],"sources":["../../../../src/components/modal/use-modal.ts"],"sourcesContent":["import type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseDisclosureProps } from \"../../hooks/use-disclosure\"\nimport { useCallback } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useDisclosure } from \"../../hooks/use-disclosure\"\nimport { useIds } from \"../../utils\"\n\nexport interface UseModalProps\n extends HTMLProps, Omit<UseDisclosureProps, \"timing\"> {\n /*\n If `true`, the modal will close when the `Esc` key is pressed.\n \n @default true\n /\n closeOnEsc?: boolean\n /\n If `true`, the modal will close when the overlay is clicked.\n \n @default true\n /\n closeOnOverlay?: boolean\n /\n Callback invoked when the escape key is pressed and focus is within modal.\n */\n onEsc?: () => void\n}\n\nexport const useModal = ({\n closeOnEsc = true,\n closeOnOverlay = true,\n defaultOpen,\n open: openProp,\n onClose: onCloseProp,\n onEsc,\n onOpen: onOpenProp,\n ...rest\n}: UseModalProps = {}) => {\n const { open, onClose, onOpen } = useDisclosure({\n defaultOpen,\n open: openProp,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n })\n const [contentId, titleId, bodyId] = useIds()\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.key !== \"Escape\") return\n\n if (closeOnEsc) {\n ev.stopPropagation()\n onClose()\n }\n\n onEsc?.()\n },\n [closeOnEsc, onClose, onEsc],\n )\n\n const getRootProps: PropGetter = useCallback(\n (props) => mergeProps(rest, props ?? {})(),\n [rest],\n )\n\n const getOverlayProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps({ \"aria-hidden\": \"true\" }, props, {\n onClick: (ev) => {\n ev.stopPropagation()\n\n if (closeOnOverlay) onClose()\n },\n })(),\n [closeOnOverlay, onClose],\n )\n\n const getOpenTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) =>\n mergeProps(\n {\n \"aria-controls\": open ? contentId : undefined,\n \"aria-expanded\": open,\n \"aria-haspopup\": \"dialog\",\n },\n props,\n { onClick: onOpen },\n )(),\n [contentId, onOpen, open],\n )\n\n const getCloseTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => mergeProps(props, { onClick: onClose })(),\n [onClose],\n )\n\n const getContentProps: PropGetter<\"section\"> = useCallback(\n (props = {}) =>\n mergeProps(\n {\n id: contentId,\n \"aria-describedby\": bodyId,\n \"aria-labelledby\": titleId,\n \"aria-modal\": \"true\",\n role: \"dialog\",\n },\n props,\n { onKeyDown },\n )(),\n [bodyId, contentId, onKeyDown, titleId],\n )\n\n const getHeaderProps: PropGetter<\"header\"> = useCallback(\n (props) => ({ ...props }),\n [],\n )\n\n const getTitleProps: PropGetter<\"h2\"> = useCallback(\n (props) => ({ id: titleId, ...props }),\n [titleId],\n )\n\n const getBodyProps: PropGetter = useCallback(\n (props) => ({ id: bodyId, ...props }),\n [bodyId],\n )\n\n const getFooterProps: PropGetter<\"footer\"> = useCallback(\n (props) => ({ ...props }),\n [],\n )\n\n return {\n open,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getOpenTriggerProps,\n getOverlayProps,\n getRootProps,\n getTitleProps,\n onClose,\n onOpen,\n }\n}\n\nexport type UseModalReturn = ReturnType<typeof useModal>\n"],"mappings":";;;;;AA4BA,MAAa,YAAY,EACvB,aAAa,MACb,iBAAiB,MACjB,aACA,MAAM,UACN,SAAS,aACT,OACA,QAAQ,YACR,GAAG,SACc,CAAC,MAAM;CACxB,MAAM,EAAE,MAAM,SAAS,WAAW,cAAc;EAC9C;EACA,MAAM;EACN,SAAS;EACT,QAAQ;CACV,CAAC;CACD,MAAM,CAAC,WAAW,SAAS,UAAU,OAAO;CAE5C,MAAM,YAAY,aACf,OAAsB;EACrB,IAAI,GAAG,QAAQ,UAAU;EAEzB,IAAI,YAAY;GACd,GAAG,gBAAgB;GACnB,QAAQ;EACV;EAEA,QAAQ;CACV,GACA;EAAC;EAAY;EAAS;CAAK,CAC7B;CAEA,MAAM,eAA2B,aAC9B,UAAU,WAAW,MAAM,SAAS,CAAC,CAAC,CAAC,CAAC,GACzC,CAAC,IAAI,CACP;CAEA,MAAM,kBAA8B,aACjC,QAAQ,CAAC,MACR,WAAW,EAAE,eAAe,OAAO,GAAG,OAAO,EAC3C,UAAU,OAAO;EACf,GAAG,gBAAgB;EAEnB,IAAI,gBAAgB,QAAQ;CAC9B,EACF,CAAC,CAAC,CAAC,GACL,CAAC,gBAAgB,OAAO,CAC1B;CAEA,MAAM,sBAA4C,aAC/C,QAAQ,CAAC,MACR,WACE;EACE,iBAAiB,OAAO,YAAY,KAAA;EACpC,iBAAiB;EACjB,iBAAiB;CACnB,GACA,OACA,EAAE,SAAS,OAAO,CACpB,CAAC,CAAC,GACJ;EAAC;EAAW;EAAQ;CAAI,CAC1B;CAEA,MAAM,uBAA6C,aAChD,QAAQ,CAAC,MAAM,WAAW,OAAO,EAAE,SAAS,QAAQ,CAAC,CAAC,CAAC,GACxD,CAAC,OAAO,CACV;CAEA,MAAM,kBAAyC,aAC5C,QAAQ,CAAC,MACR,WACE;EACE,IAAI;EACJ,oBAAoB;EACpB,mBAAmB;EACnB,cAAc;EACd,MAAM;CACR,GACA,OACA,EAAE,UAAU,CACd,CAAC,CAAC,GACJ;EAAC;EAAQ;EAAW;EAAW;CAAO,CACxC;CAEA,MAAM,iBAAuC,aAC1C,WAAW,EAAE,GAAG,MAAM,IACvB,CAAC,CACH;CAEA,MAAM,gBAAkC,aACrC,WAAW;EAAE,IAAI;EAAS,GAAG;CAAM,IACpC,CAAC,OAAO,CACV;CAYA,OAAO;EACL;EACA,cAZ+B,aAC9B,WAAW;GAAE,IAAI;GAAQ,GAAG;EAAM,IACnC,CAAC,MAAM,CAUI;EACX;EACA;EACA,gBAV2C,aAC1C,WAAW,EAAE,GAAG,MAAM,IACvB,CAAC,CAQY;EACb;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/esm/components/sidebar/sidebar.js CHANGED Viewed

@@ -39,7 +39,7 @@ const SidebarRoot = withProvider(({ breakpoint = "md", mode: modeProp = "offcanv
 	const mobile = useBreakpointValue(breakpoint ? { [breakpoint]: true } : { base: false }) ?? false;
 	const mode = useValue(modeProp);
 	const placement = useValue(placementProp);
-	const { descendants, expandedValue, open, selectedValue, getContentProps, getFooterProps, getHeaderProps, getRootProps, getSidePanelProps, getTriggerProps, onClose, onExpandedChange, onOpen, onSelectedChange, onToggle } = useSidebar({
+	const { descendants, expandedValue, open, selectedValue, getContentProps, getFooterProps, getHandleProps, getHeaderProps, getRootProps, getSidePanelProps, getTriggerProps, onClose, onExpandedChange, onOpen, onSelectedChange, onToggle } = useSidebar({
 		mobile,
 		...rest
 	});
@@ -70,6 +70,7 @@ const SidebarRoot = withProvider(({ breakpoint = "md", mode: modeProp = "offcanv
 		placement,
 		getContentProps,
 		getFooterProps,
+		getHandleProps,
 		getHeaderProps,
 		getSidePanelProps,
 		getTriggerProps
@@ -80,6 +81,7 @@ const SidebarRoot = withProvider(({ breakpoint = "md", mode: modeProp = "offcanv
 		getContentProps,
 		getFooterProps,
 		getHeaderProps,
+		getHandleProps,
 		getSidePanelProps,
 		getTriggerProps
 	]);
@@ -243,13 +245,11 @@ const SidebarContent = withContext(({ children, items, ...rest }) => {
 		children: computedChildren
 	});
 }, "content")();
-const SidebarHandle = withContext((props) => {
+const SidebarHandle = withContext("button", "handle")(void 0, (props) => {
+	const { getHandleProps } = useComponentContext();
 	const { handleProps } = useSidePanelComponentContext();
-	return /* @__PURE__ */ jsx(SidebarTrigger, {
-		...mergeProps(handleProps, props)(),
-		children: /* @__PURE__ */ jsx(styled.button, { tabIndex: -1 })
-	});
-}, "handle")();
+	return getHandleProps(mergeProps(handleProps, props)());
+});
 const SidebarGroup = withContext(({ children, items, label, value: valueProp = (0, utils_exports.isString)(label) ? label : void 0, contentProps, labelProps, ...rest }) => {
 	const { groupProps } = useSidePanelComponentContext();
 	const computedChildren = useMemo(() => {