npm - @yamada-ui/react - Versions diffs - 2.1.8-dev-20260409043924 → 2.2.0-dev-20260409110358 - Mend

@yamada-ui/react 2.1.8-dev-20260409043924 → 2.2.0-dev-20260409110358

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 (685) hide show

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

	@@ -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/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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"}
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 { 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, 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<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 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 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 {\n animationScheme,\n duration: durationProp,\n getOverlayProps,\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>(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 const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <motion.section\n {...popupAnimationProps}\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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"}

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

@@ -9,15 +9,15 @@ const modalStyle = defineComponentSlotStyle({
 			display: "flex",
 			flex: "1",
 			flexDirection: "column",
-			gap: "md",
-			my: "lg",
-			px: "lg"
+			gap: "{gap}",
+			my: "{space}",
+			px: "{space}"
 		},
 		closeButton: {
 			colorScheme: "mono",
 			position: "absolute",
-			right: "md",
-			top: "md"
+			right: "{gap}",
+			top: "{gap}"
 		},
 		content: {
 			bg: "bg.float",
@@ -35,18 +35,18 @@ const modalStyle = defineComponentSlotStyle({
 		footer: {
 			alignItems: "center",
 			display: "flex",
-			gap: "md",
+			gap: "{gap}",
 			justifyContent: "flex-end",
-			pb: "lg",
-			px: "lg"
+			pb: "{space}",
+			px: "{space}"
 		},
 		header: {
 			alignItems: "center",
 			display: "flex",
-			gap: "md",
+			gap: "{gap}",
 			justifyContent: "flex-start",
-			pt: "lg",
-			px: "lg"
+			pt: "{space}",
+			px: "{space}"
 		},
 		overlay: {
 			bg: "bg.overlay",
@@ -57,12 +57,15 @@ const modalStyle = defineComponentSlotStyle({
 			zIndex: "jeice"
 		},
 		root: {
+			"--gap": "spaces.md",
+			"--gutter": "spaces.md",
+			"--space": "spaces.lg",
 			alignItems: "center",
 			display: "flex",
 			h: "dvh",
 			inset: "0",
 			justifyContent: "center",
-			p: "md",
+			p: "{gutter}",
 			position: "fixed",
 			w: "vw",
 			zIndex: "guldo"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.style.js","names":[],"sources":["../../../../src/components/modal/modal.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const modalStyle = defineComponentSlotStyle({\n base: {\n body: {\n alignItems: \"flex-start\",\n display: \"flex\",\n flex: \"1\",\n flexDirection: \"column\",\n gap: \"md\",\n my: \"lg\",\n px: \"lg\",\n },\n closeButton: {\n colorScheme: \"mono\",\n position: \"absolute\",\n right: \"md\",\n top: \"md\",\n },\n content: {\n bg: \"bg.float\",\n borderColor: \"border.subtle\",\n borderWidth: \"1px\",\n boxShadow: \"lg\",\n display: \"flex\",\n flexDirection: \"column\",\n maxH: \"full\",\n position: \"relative\",\n rounded: \"l4\",\n w: \"full\",\n zIndex: \"burter\",\n },\n footer: {\n alignItems: \"center\",\n display: \"flex\",\n gap: \"md\",\n justifyContent: \"flex-end\",\n pb: \"lg\",\n px: \"lg\",\n },\n header: {\n alignItems: \"center\",\n display: \"flex\",\n gap: \"md\",\n justifyContent: \"flex-start\",\n pt: \"lg\",\n px: \"lg\",\n },\n overlay: {\n bg: \"bg.overlay\",\n h: \"dvh\",\n inset: \"0\",\n position: \"fixed\",\n w: \"vw\",\n zIndex: \"jeice\",\n },\n root: {\n alignItems: \"center\",\n display: \"flex\",\n h: \"dvh\",\n inset: \"0\",\n justifyContent: \"center\",\n p: \"md\",\n position: \"fixed\",\n w: \"vw\",\n zIndex: \"guldo\",\n },\n title: {\n fontSize: \"lg\",\n fontWeight: \"semibold\",\n },\n },\n\n props: {\n /*\n The placement of the modal.\n \n @default 'center'\n /\n placement: {\n center: {\n root: {\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n },\n \"center-center\": {\n root: {\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n },\n \"center-end\": {\n root: {\n alignItems: \"center\",\n justifyContent: \"flex-end\",\n },\n },\n \"center-start\": {\n root: {\n alignItems: \"center\",\n justifyContent: \"flex-start\",\n },\n },\n \"end-center\": {\n root: {\n alignItems: \"flex-end\",\n justifyContent: \"center\",\n },\n },\n \"end-end\": {\n root: {\n alignItems: \"flex-end\",\n justifyContent: \"flex-end\",\n },\n },\n \"end-start\": {\n root: {\n alignItems: \"flex-end\",\n justifyContent: \"flex-start\",\n },\n },\n \"start-center\": {\n root: {\n alignItems: \"flex-start\",\n justifyContent: \"center\",\n },\n },\n \"start-end\": {\n root: {\n alignItems: \"flex-start\",\n justifyContent: \"flex-end\",\n },\n },\n \"start-start\": {\n root: {\n alignItems: \"flex-start\",\n justifyContent: \"flex-start\",\n },\n },\n },\n /\n Where scroll behavior should originate.\n \n - `inside`: scroll only occurs within the `ModalBody`.\n * - `outside`: the entire `ModalContent` will scroll within the viewport.\n \n @default 'inside'\n */\n scrollBehavior: {\n inside: {\n body: {\n overflow: \"auto\",\n },\n },\n outside: {\n content: {\n overflow: \"auto\",\n },\n },\n },\n },\n\n sizes: {\n xs: { content: { maxW: \"xs\" } },\n sm: { content: { maxW: \"sm\" } },\n md: { content: { maxW: \"md\" } },\n lg: { content: { maxW: \"lg\" } },\n xl: { content: { maxW: \"xl\" } },\n \"2xl\": { content: { maxW: \"2xl\" } },\n \"3xl\": { content: { maxW: \"3xl\" } },\n \"4xl\": { content: { maxW: \"4xl\" } },\n \"5xl\": { content: { maxW: \"5xl\" } },\n \"6xl\": { content: { maxW: \"6xl\" } },\n cover: { content: { boxSize: \"full\" } },\n full: {\n content: { minH: \"dvh\", minW: \"vw\", rounded: \"0\" },\n root: { p: \"0\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n placement: \"center\",\n scrollBehavior: \"inside\",\n },\n})\n\nexport type ModalStyle = typeof modalStyle\n"],"mappings":";;;;AAEA,MAAa,aAAa,yBAAyB;CACjD,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,MAAM;GACN,eAAe;GACf,KAAK;GACL,IAAI;GACJ,IAAI;GACL;EACD,aAAa;GACX,aAAa;GACb,UAAU;GACV,OAAO;GACP,KAAK;GACN;EACD,SAAS;GACP,IAAI;GACJ,aAAa;GACb,aAAa;GACb,WAAW;GACX,SAAS;GACT,eAAe;GACf,MAAM;GACN,UAAU;GACV,SAAS;GACT,GAAG;GACH,QAAQ;GACT;EACD,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,KAAK;GACL,gBAAgB;GAChB,IAAI;GACJ,IAAI;GACL;EACD,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,KAAK;GACL,gBAAgB;GAChB,IAAI;GACJ,IAAI;GACL;EACD,SAAS;GACP,IAAI;GACJ,GAAG;GACH,OAAO;GACP,UAAU;GACV,GAAG;GACH,QAAQ;GACT;EACD,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,GAAG;GACH,OAAO;GACP,gBAAgB;GAChB,GAAG;GACH,UAAU;GACV,GAAG;GACH,QAAQ;GACT;EACD,OAAO;GACL,UAAU;GACV,YAAY;GACb;EACF;CAED,OAAO;EAML,WAAW;GACT,QAAQ,EACN,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,iBAAiB,EACf,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,cAAc,EACZ,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,gBAAgB,EACd,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,cAAc,EACZ,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,WAAW,EACT,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,aAAa,EACX,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,gBAAgB,EACd,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,aAAa,EACX,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,eAAe,EACb,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACF;EASD,gBAAgB;GACd,QAAQ,EACN,MAAM,EACJ,UAAU,QACX,EACF;GACD,SAAS,EACP,SAAS,EACP,UAAU,QACX,EACF;GACF;EACF;CAED,OAAO;EACL,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAC/B,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAC/B,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAC/B,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAC/B,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,SAAS,QAAQ,EAAE;EACvC,MAAM;GACJ,SAAS;IAAE,MAAM;IAAO,MAAM;IAAM,SAAS;IAAK;GAClD,MAAM,EAAE,GAAG,KAAK;GACjB;EACF;CAED,cAAc;EACZ,MAAM;EACN,WAAW;EACX,gBAAgB;EACjB;CACF,CAAC"}
1	+ {"version":3,"file":"modal.style.js","names":[],"sources":["../../../../src/components/modal/modal.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const modalStyle = defineComponentSlotStyle({\n base: {\n body: {\n alignItems: \"flex-start\",\n display: \"flex\",\n flex: \"1\",\n flexDirection: \"column\",\n gap: \"{gap}\",\n my: \"{space}\",\n px: \"{space}\",\n },\n closeButton: {\n colorScheme: \"mono\",\n position: \"absolute\",\n right: \"{gap}\",\n top: \"{gap}\",\n },\n content: {\n bg: \"bg.float\",\n borderColor: \"border.subtle\",\n borderWidth: \"1px\",\n boxShadow: \"lg\",\n display: \"flex\",\n flexDirection: \"column\",\n maxH: \"full\",\n position: \"relative\",\n rounded: \"l4\",\n w: \"full\",\n zIndex: \"burter\",\n },\n footer: {\n alignItems: \"center\",\n display: \"flex\",\n gap: \"{gap}\",\n justifyContent: \"flex-end\",\n pb: \"{space}\",\n px: \"{space}\",\n },\n header: {\n alignItems: \"center\",\n display: \"flex\",\n gap: \"{gap}\",\n justifyContent: \"flex-start\",\n pt: \"{space}\",\n px: \"{space}\",\n },\n overlay: {\n bg: \"bg.overlay\",\n h: \"dvh\",\n inset: \"0\",\n position: \"fixed\",\n w: \"vw\",\n zIndex: \"jeice\",\n },\n root: {\n \"--gap\": \"spaces.md\",\n \"--gutter\": \"spaces.md\",\n \"--space\": \"spaces.lg\",\n alignItems: \"center\",\n display: \"flex\",\n h: \"dvh\",\n inset: \"0\",\n justifyContent: \"center\",\n p: \"{gutter}\",\n position: \"fixed\",\n w: \"vw\",\n zIndex: \"guldo\",\n },\n title: {\n fontSize: \"lg\",\n fontWeight: \"semibold\",\n },\n },\n\n props: {\n /*\n The placement of the modal.\n \n @default 'center'\n /\n placement: {\n center: {\n root: {\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n },\n \"center-center\": {\n root: {\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n },\n \"center-end\": {\n root: {\n alignItems: \"center\",\n justifyContent: \"flex-end\",\n },\n },\n \"center-start\": {\n root: {\n alignItems: \"center\",\n justifyContent: \"flex-start\",\n },\n },\n \"end-center\": {\n root: {\n alignItems: \"flex-end\",\n justifyContent: \"center\",\n },\n },\n \"end-end\": {\n root: {\n alignItems: \"flex-end\",\n justifyContent: \"flex-end\",\n },\n },\n \"end-start\": {\n root: {\n alignItems: \"flex-end\",\n justifyContent: \"flex-start\",\n },\n },\n \"start-center\": {\n root: {\n alignItems: \"flex-start\",\n justifyContent: \"center\",\n },\n },\n \"start-end\": {\n root: {\n alignItems: \"flex-start\",\n justifyContent: \"flex-end\",\n },\n },\n \"start-start\": {\n root: {\n alignItems: \"flex-start\",\n justifyContent: \"flex-start\",\n },\n },\n },\n /\n Where scroll behavior should originate.\n \n - `inside`: scroll only occurs within the `ModalBody`.\n * - `outside`: the entire `ModalContent` will scroll within the viewport.\n \n @default 'inside'\n */\n scrollBehavior: {\n inside: {\n body: {\n overflow: \"auto\",\n },\n },\n outside: {\n content: {\n overflow: \"auto\",\n },\n },\n },\n },\n\n sizes: {\n xs: { content: { maxW: \"xs\" } },\n sm: { content: { maxW: \"sm\" } },\n md: { content: { maxW: \"md\" } },\n lg: { content: { maxW: \"lg\" } },\n xl: { content: { maxW: \"xl\" } },\n \"2xl\": { content: { maxW: \"2xl\" } },\n \"3xl\": { content: { maxW: \"3xl\" } },\n \"4xl\": { content: { maxW: \"4xl\" } },\n \"5xl\": { content: { maxW: \"5xl\" } },\n \"6xl\": { content: { maxW: \"6xl\" } },\n cover: { content: { boxSize: \"full\" } },\n full: {\n content: { minH: \"dvh\", minW: \"vw\", rounded: \"0\" },\n root: { p: \"0\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n placement: \"center\",\n scrollBehavior: \"inside\",\n },\n})\n\nexport type ModalStyle = typeof modalStyle\n"],"mappings":";;;;AAEA,MAAa,aAAa,yBAAyB;CACjD,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,MAAM;GACN,eAAe;GACf,KAAK;GACL,IAAI;GACJ,IAAI;GACL;EACD,aAAa;GACX,aAAa;GACb,UAAU;GACV,OAAO;GACP,KAAK;GACN;EACD,SAAS;GACP,IAAI;GACJ,aAAa;GACb,aAAa;GACb,WAAW;GACX,SAAS;GACT,eAAe;GACf,MAAM;GACN,UAAU;GACV,SAAS;GACT,GAAG;GACH,QAAQ;GACT;EACD,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,KAAK;GACL,gBAAgB;GAChB,IAAI;GACJ,IAAI;GACL;EACD,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,KAAK;GACL,gBAAgB;GAChB,IAAI;GACJ,IAAI;GACL;EACD,SAAS;GACP,IAAI;GACJ,GAAG;GACH,OAAO;GACP,UAAU;GACV,GAAG;GACH,QAAQ;GACT;EACD,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,WAAW;GACX,YAAY;GACZ,SAAS;GACT,GAAG;GACH,OAAO;GACP,gBAAgB;GAChB,GAAG;GACH,UAAU;GACV,GAAG;GACH,QAAQ;GACT;EACD,OAAO;GACL,UAAU;GACV,YAAY;GACb;EACF;CAED,OAAO;EAML,WAAW;GACT,QAAQ,EACN,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,iBAAiB,EACf,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,cAAc,EACZ,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,gBAAgB,EACd,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,cAAc,EACZ,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,WAAW,EACT,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,aAAa,EACX,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,gBAAgB,EACd,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,aAAa,EACX,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACD,eAAe,EACb,MAAM;IACJ,YAAY;IACZ,gBAAgB;IACjB,EACF;GACF;EASD,gBAAgB;GACd,QAAQ,EACN,MAAM,EACJ,UAAU,QACX,EACF;GACD,SAAS,EACP,SAAS,EACP,UAAU,QACX,EACF;GACF;EACF;CAED,OAAO;EACL,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAC/B,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAC/B,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAC/B,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAC/B,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,EAAE;EAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,EAAE;EACnC,OAAO,EAAE,SAAS,EAAE,SAAS,QAAQ,EAAE;EACvC,MAAM;GACJ,SAAS;IAAE,MAAM;IAAO,MAAM;IAAM,SAAS;IAAK;GAClD,MAAM,EAAE,GAAG,KAAK;GACjB;EACF;CAED,cAAc;EACZ,MAAM;EACN,WAAW;EACX,gBAAgB;EACjB;CACF,CAAC"}

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

@@ -1,9 +1,9 @@
 import { useIds } from "../../utils/dom.js";
 import { utils_exports } from "../../utils/index.js";
-import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
-import "../../providers/i18n-provider/index.js";
 import { useDisclosure } from "../../hooks/use-disclosure/use-disclosure.js";
 import "../../hooks/use-disclosure/index.js";
+import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
+import "../../providers/i18n-provider/index.js";
 import { useCallback } from "react";
 //#region src/components/modal/use-modal.ts
@@ -18,8 +18,10 @@ const useModal = ({ closeOnEsc = true, closeOnOverlay = true, defaultOpen, open:
 	const { t } = useI18n("modal");
 	const onKeyDown = useCallback((ev) => {
 		if (ev.key !== "Escape") return;
-		ev.stopPropagation();
-		if (closeOnEsc) onClose();
+		if (closeOnEsc) {
+			ev.stopPropagation();
+			onClose();
+		}
 		onEsc?.();
 	}, [
 		closeOnEsc,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-modal.js","names":["getRootProps: PropGetter","getOverlayProps: PropGetter","getOpenTriggerProps: PropGetter<\"button\">","getCloseTriggerProps: PropGetter<\"button\">","getCloseButtonProps: PropGetter<\"button\">","getContentProps: PropGetter<\"section\">","getHeaderProps: PropGetter<\"header\">","getTitleProps: PropGetter<\"h2\">"],"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 { useDisclosure } from \"../../hooks/use-disclosure\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { cx, 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 ev.stopPropagation()\n~~\n if (closeOnEsc)~~ onClose()\n\n onEsc?.()\n },\n [closeOnEsc, onClose, onEsc],\n )\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n ...rest,\n ...props,\n }),\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 ({\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby,\n ...props\n } = {}) => ({\n id: contentId,\n \"aria-describedby\": cx(ariaDescribedby, bodyId),\n \"aria-labelledby\": cx(ariaLabelledby, titleId),\n \"aria-modal\": \"true\",\n role: \"dialog\",\n ...props,\n onKeyDown: handlerAll(props.onKeyDown, 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":";;;;;;;;;AA4BA,MAAa,YAAY,EACvB,aAAa,MACb,iBAAiB,MACjB,aACA,MAAM,UACN,SAAS,aACT,OACA,QAAQ,YACR,GAAG,SACc,EAAE,KAAK;CACxB,MAAM,EAAE,MAAM,SAAS,WAAW,cAAc;EAC9C;EACA,MAAM;EACN,SAAS;EACT,QAAQ;EACT,CAAC;CACF,MAAM,CAAC,WAAW,SAAS,UAAU,QAAQ;CAC7C,MAAM,EAAE,MAAM,QAAQ,QAAQ;CAE9B,MAAM,YAAY,aACf,OAAsB;AACrB,MAAI,GAAG,QAAQ,SAAU;AAEzB,~~KAAG~~,~~iBAAiB~~;~~AAEpB~~,~~MAAI~~,~~WAAY,UAAS~~;~~AAEzB~~,WAAS;IAEX;EAAC;EAAY;EAAS;EAAM,CAC7B;CAED,MAAMA,eAA2B,aAC9B,WAAW;EACV,GAAG;EACH,GAAG;EACJ,GACD,CAAC,KAAK,CACP;CAED,MAAMC,kBAA8B,aACjC,QAAQ,EAAE,MAAM;EACf,eAAe;EACf,GAAG;EACH,uCAAoB,MAAM,UAAU,OAAO;AACzC,MAAG,iBAAiB;AAEpB,OAAI,eAAgB,UAAS;IAC7B;EACH,GACD,CAAC,gBAAgB,QAAQ,CAC1B;CAED,MAAMC,sBAA4C,aAC/C,QAAQ,EAAE,MAAM;EACf,iBAAiB,OAAO,YAAY;EACpC,iBAAiB;EACjB,iBAAiB;EACjB,cAAc,EAAE,aAAa;EAC7B,GAAG;EACH,uCAAoB,MAAM,SAAS,OAAO;EAC3C,GACD;EAAC;EAAW;EAAQ;EAAM;EAAE,CAC7B;CAED,MAAMC,uBAA6C,aAChD,QAAQ,EAAE,MAAM;EACf,cAAc,EAAE,cAAc;EAC9B,GAAG;EACH,uCAAoB,MAAM,SAAS,QAAQ;EAC5C,GACD,CAAC,SAAS,EAAE,CACb;CAED,MAAMC,sBAA4C,aAC/C,QAAQ,EAAE,MAAM;EACf,cAAc,EAAE,cAAc;EAC9B,GAAG;EACH,uCAAoB,MAAM,SAAS,QAAQ;EAC5C,GACD,CAAC,SAAS,EAAE,CACb;CAED,MAAMC,kBAAyC,aAC5C,EACC,oBAAoB,iBACpB,mBAAmB,gBACnB,GAAG,UACD,EAAE,MAAM;EACV,IAAI;EACJ,0CAAuB,iBAAiB,OAAO;EAC/C,yCAAsB,gBAAgB,QAAQ;EAC9C,cAAc;EACd,MAAM;EACN,GAAG;EACH,yCAAsB,MAAM,WAAW,UAAU;EAClD,GACD;EAAC;EAAQ;EAAW;EAAW;EAAQ,CACxC;CAED,MAAMC,iBAAuC,aAC1C,WAAW,EACV,GAAG,OACJ,GACD,EAAE,CACH;CAED,MAAMC,gBAAkC,aACrC,WAAW;EACV,IAAI;EACJ,GAAG;EACJ,GACD,CAAC,QAAQ,CACV;AAiBD,QAAO;EACL;EACA,cAjB+B,aAC9B,WAAW;GACV,IAAI;GACJ,GAAG;GACJ,GACD,CAAC,OAAO,CACT;EAYC;EACA;EACA;EACA,gBAb2C,aAC1C,WAAW,EACV,GAAG,OACJ,GACD,EAAE,CACH;EASC;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}
1	+ {"version":3,"file":"use-modal.js","names":["getRootProps: PropGetter","getOverlayProps: PropGetter","getOpenTriggerProps: PropGetter<\"button\">","getCloseTriggerProps: PropGetter<\"button\">","getCloseButtonProps: PropGetter<\"button\">","getContentProps: PropGetter<\"section\">","getHeaderProps: PropGetter<\"header\">","getTitleProps: PropGetter<\"h2\">"],"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 { useDisclosure } from \"../../hooks/use-disclosure\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { cx, 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) => ({\n ...rest,\n ...props,\n }),\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 ({\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby,\n ...props\n } = {}) => ({\n id: contentId,\n \"aria-describedby\": cx(ariaDescribedby, bodyId),\n \"aria-labelledby\": cx(ariaLabelledby, titleId),\n \"aria-modal\": \"true\",\n role: \"dialog\",\n ...props,\n onKeyDown: handlerAll(props.onKeyDown, 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":";;;;;;;;;AA4BA,MAAa,YAAY,EACvB,aAAa,MACb,iBAAiB,MACjB,aACA,MAAM,UACN,SAAS,aACT,OACA,QAAQ,YACR,GAAG,SACc,EAAE,KAAK;CACxB,MAAM,EAAE,MAAM,SAAS,WAAW,cAAc;EAC9C;EACA,MAAM;EACN,SAAS;EACT,QAAQ;EACT,CAAC;CACF,MAAM,CAAC,WAAW,SAAS,UAAU,QAAQ;CAC7C,MAAM,EAAE,MAAM,QAAQ,QAAQ;CAE9B,MAAM,YAAY,aACf,OAAsB;AACrB,MAAI,GAAG,QAAQ,SAAU;AAEzB,MAAI,YAAY;AACd,MAAG,iBAAiB;AACpB,YAAS;;AAGX,WAAS;IAEX;EAAC;EAAY;EAAS;EAAM,CAC7B;CAED,MAAMA,eAA2B,aAC9B,WAAW;EACV,GAAG;EACH,GAAG;EACJ,GACD,CAAC,KAAK,CACP;CAED,MAAMC,kBAA8B,aACjC,QAAQ,EAAE,MAAM;EACf,eAAe;EACf,GAAG;EACH,uCAAoB,MAAM,UAAU,OAAO;AACzC,MAAG,iBAAiB;AAEpB,OAAI,eAAgB,UAAS;IAC7B;EACH,GACD,CAAC,gBAAgB,QAAQ,CAC1B;CAED,MAAMC,sBAA4C,aAC/C,QAAQ,EAAE,MAAM;EACf,iBAAiB,OAAO,YAAY;EACpC,iBAAiB;EACjB,iBAAiB;EACjB,cAAc,EAAE,aAAa;EAC7B,GAAG;EACH,uCAAoB,MAAM,SAAS,OAAO;EAC3C,GACD;EAAC;EAAW;EAAQ;EAAM;EAAE,CAC7B;CAED,MAAMC,uBAA6C,aAChD,QAAQ,EAAE,MAAM;EACf,cAAc,EAAE,cAAc;EAC9B,GAAG;EACH,uCAAoB,MAAM,SAAS,QAAQ;EAC5C,GACD,CAAC,SAAS,EAAE,CACb;CAED,MAAMC,sBAA4C,aAC/C,QAAQ,EAAE,MAAM;EACf,cAAc,EAAE,cAAc;EAC9B,GAAG;EACH,uCAAoB,MAAM,SAAS,QAAQ;EAC5C,GACD,CAAC,SAAS,EAAE,CACb;CAED,MAAMC,kBAAyC,aAC5C,EACC,oBAAoB,iBACpB,mBAAmB,gBACnB,GAAG,UACD,EAAE,MAAM;EACV,IAAI;EACJ,0CAAuB,iBAAiB,OAAO;EAC/C,yCAAsB,gBAAgB,QAAQ;EAC9C,cAAc;EACd,MAAM;EACN,GAAG;EACH,yCAAsB,MAAM,WAAW,UAAU;EAClD,GACD;EAAC;EAAQ;EAAW;EAAW;EAAQ,CACxC;CAED,MAAMC,iBAAuC,aAC1C,WAAW,EACV,GAAG,OACJ,GACD,EAAE,CACH;CAED,MAAMC,gBAAkC,aACrC,WAAW;EACV,IAAI;EACJ,GAAG;EACJ,GACD,CAAC,QAAQ,CACV;AAiBD,QAAO;EACL;EACA,cAjB+B,aAC9B,WAAW;GACV,IAAI;GACJ,GAAG;GACJ,GACD,CAAC,OAAO,CACT;EAYC;EACA;EACA;EACA,gBAb2C,aAC1C,WAAW,EACV,GAAG,OACJ,GACD,EAAE,CACH;EASC;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-native-popover.js","names":["getTriggerProps: PropGetter<\"button\">","getAnchorProps: PropGetter","getPositionerProps: PropGetter","getContentProps: PropGetter","getHeaderProps: PropGetter","getBodyProps: PropGetter","getFooterProps: PropGetter"],"sources":["../../../../src/components/native-popover/use-native-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type { ~~Direction,~~ PropGetter } from \"../../core\"\nimport type { UsePopperProps } from \"../../hooks/use-popper\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { usePopper } from \"../../hooks/use-popper\"\nimport {\n ariaAttr,\n assignRef,\n cx,\n dataAttr,\n handlerAll,\n mergeRefs,\n} from \"../../utils\"\n\nexport interface UseNativePopoverProps extends UsePopperProps<\"button\"> {\n /*\n If `true`, the popover will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n The placement of the popper relative to its reference.\n \n @default 'end'\n /\n placement?: ~~Direction~~\n /\n The mode of the popover.\n \n @default 'auto'\n /\n popover?: \"\" \| \"auto\" \| \"hint\" \| \"manual\" \| true\n /\n The target element ID for the popover trigger.\n * If not provided, a generated ID will be used.\n /\n popoverTarget?: string\n /\n The action for the popover target.\n \n @default 'toggle'\n /\n popoverTargetAction?: \"hide\" \| \"show\" \| \"toggle\"\n /\n Update the position of the floating element, re-rendering the component if required.\n */\n updateRef?: RefObject<() => void>\n}\n\nexport const useNativePopover = ({\n autoUpdate,\n disabled = false,\n elements,\n flip,\n gutter,\n matchWidth,\n middleware,\n offset,\n placement = \"end\",\n platform,\n popover = \"auto\",\n popoverTarget,\n popoverTargetAction = \"toggle\",\n preventOverflow,\n strategy,\n transform,\n updateRef,\n whileElementsMounted,\n}: UseNativePopoverProps = {}) => {\n const { getDocument } = useEnvironment()\n const headerId = useId()\n const bodyId = useId()\n const generatedContentId = useId()\n const contentId = popoverTarget ?? generatedContentId\n const anchorRef = useRef<HTMLElement>(null)\n const triggerRef = useRef<HTMLButtonElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n const { refs, update, getPopperProps } = usePopper<\"button\">({\n autoUpdate,\n elements,\n flip,\n gutter,\n matchWidth,\n middleware,\n offset,\n placement,\n platform,\n preventOverflow,\n strategy,\n transform,\n whileElementsMounted,\n })\n\n assignRef(updateRef, update)\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLButtonElement>) => {\n if (!disabled) return\n\n ev.preventDefault()\n ev.stopPropagation()\n },\n [disabled],\n )\n\n const getTriggerProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => {\n return {\n type: \"button\",\n \"aria-controls\": contentId,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-haspopup\": \"dialog\",\n popoverTarget: contentId,\n popoverTargetAction,\n role: \"button\",\n ...props,\n ref: mergeRefs(ref, triggerRef, (node) => {\n if (anchorRef.current == null) refs.setReference(node)\n }),\n onClick: handlerAll(props.onClick, onClick),\n }\n },\n [contentId, disabled, onClick, popoverTargetAction, refs],\n )\n\n const getAnchorProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n ...props,\n ref: mergeRefs(ref, anchorRef, refs.setReference),\n }),\n [refs.setReference],\n )\n\n const getPositionerProps: PropGetter = useCallback(\n (props) => getPopperProps(props),\n [getPopperProps],\n )\n\n const getContentProps: PropGetter = useCallback(\n ({\n ref,\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby,\n ...props\n } = {}) => {\n const hasHeader = !!getDocument()?.getElementById(headerId)\n const hasBody = !!getDocument()?.getElementById(bodyId)\n\n return {\n id: contentId,\n \"aria-describedby\": cx(ariaDescribedby, hasBody ? bodyId : undefined),\n \"aria-labelledby\": cx(ariaLabelledby, hasHeader ? headerId : undefined),\n \"data-popup\": dataAttr(true),\n popover: popover === true ? \"\" : popover,\n role: \"dialog\",\n tabIndex: -1,\n ...props,\n ref: mergeRefs(ref, contentRef),\n }\n },\n [getDocument, headerId, bodyId, contentId, popover],\n )\n\n const getHeaderProps: PropGetter = useCallback(\n (props) => ({ id: headerId, ...props }),\n [headerId],\n )\n\n const getBodyProps: PropGetter = useCallback(\n (props) => ({ id: bodyId, ...props }),\n [bodyId],\n )\n\n const getFooterProps: PropGetter = useCallback((props) => ({ ...props }), [])\n\n const getCloseTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => {\n return {\n popoverTarget: contentId,\n popoverTargetAction: \"hide\",\n ...props,\n }\n },\n [contentId],\n )\n\n return {\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n }\n}\n\nexport type UseNativePopoverReturn = ReturnType<typeof useNativePopover>\n"],"mappings":";;;;;;;;;;AAqDA,MAAa,oBAAoB,EAC/B,YACA,WAAW,OACX,UACA,MACA,QACA,YACA,YACA,QACA,YAAY,OACZ,UACA,UAAU,QACV,eACA,sBAAsB,UACtB,iBACA,UACA,WACA,WACA,yBACyB,EAAE,KAAK;CAChC,MAAM,EAAE,gBAAgB,gBAAgB;CACxC,MAAM,WAAW,OAAO;CACxB,MAAM,SAAS,OAAO;CACtB,MAAM,qBAAqB,OAAO;CAClC,MAAM,YAAY,iBAAiB;CACnC,MAAM,YAAY,OAAoB,KAAK;CAC3C,MAAM,aAAa,OAA0B,KAAK;CAClD,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,EAAE,MAAM,QAAQ,mBAAmB,UAAoB;EAC3D;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,WAAU,WAAW,OAAO;CAE5B,MAAM,UAAU,aACb,OAAsC;AACrC,MAAI,CAAC,SAAU;AAEf,KAAG,gBAAgB;AACnB,KAAG,iBAAiB;IAEtB,CAAC,SAAS,CACX;CAED,MAAMA,kBAAwC,aAC3C,EAAE,KAAK,GAAG,UAAU,EAAE,KAAK;AAC1B,SAAO;GACL,MAAM;GACN,iBAAiB;GACjB,6CAA0B,SAAS;GACnC,iBAAiB;GACjB,eAAe;GACf;GACA,MAAM;GACN,GAAG;GACH,KAAK,UAAU,KAAK,aAAa,SAAS;AACxC,QAAI,UAAU,WAAW,KAAM,MAAK,aAAa,KAAK;KACtD;GACF,uCAAoB,MAAM,SAAS,QAAQ;GAC5C;IAEH;EAAC;EAAW;EAAU;EAAS;EAAqB;EAAK,CAC1D;CAED,MAAMC,iBAA6B,aAChC,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;EAC3B,GAAG;EACH,KAAK,UAAU,KAAK,WAAW,KAAK,aAAa;EAClD,GACD,CAAC,KAAK,aAAa,CACpB;CAED,MAAMC,qBAAiC,aACpC,UAAU,eAAe,MAAM,EAChC,CAAC,eAAe,CACjB;CAED,MAAMC,kBAA8B,aACjC,EACC,KACA,oBAAoB,iBACpB,mBAAmB,gBACnB,GAAG,UACD,EAAE,KAAK;EACT,MAAM,YAAY,CAAC,CAAC,aAAa,EAAE,eAAe,SAAS;EAC3D,MAAM,UAAU,CAAC,CAAC,aAAa,EAAE,eAAe,OAAO;AAEvD,SAAO;GACL,IAAI;GACJ,0CAAuB,iBAAiB,UAAU,SAAS,OAAU;GACrE,yCAAsB,gBAAgB,YAAY,WAAW,OAAU;GACvE,0CAAuB,KAAK;GAC5B,SAAS,YAAY,OAAO,KAAK;GACjC,MAAM;GACN,UAAU;GACV,GAAG;GACH,KAAK,UAAU,KAAK,WAAW;GAChC;IAEH;EAAC;EAAa;EAAU;EAAQ;EAAW;EAAQ,CACpD;CAED,MAAMC,iBAA6B,aAChC,WAAW;EAAE,IAAI;EAAU,GAAG;EAAO,GACtC,CAAC,SAAS,CACX;CAED,MAAMC,eAA2B,aAC9B,WAAW;EAAE,IAAI;EAAQ,GAAG;EAAO,GACpC,CAAC,OAAO,CACT;CAED,MAAMC,iBAA6B,aAAa,WAAW,EAAE,GAAG,OAAO,GAAG,EAAE,CAAC;AAa7E,QAAO;EACL;EACA;EACA,sBAdiD,aAChD,QAAQ,EAAE,KAAK;AACd,UAAO;IACL,eAAe;IACf,qBAAqB;IACrB,GAAG;IACJ;KAEH,CAAC,UAAU,CACZ;EAMC;EACA;EACA;EACA;EACA;EACD"}
1	+ {"version":3,"file":"use-native-popover.js","names":["getTriggerProps: PropGetter<\"button\">","getAnchorProps: PropGetter","getPositionerProps: PropGetter","getContentProps: PropGetter","getHeaderProps: PropGetter","getBodyProps: PropGetter","getFooterProps: PropGetter"],"sources":["../../../../src/components/native-popover/use-native-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type { PropGetter } from \"../../core\"\nimport type { UsePopperProps } from \"../../hooks/use-popper\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { usePopper } from \"../../hooks/use-popper\"\nimport {\n ariaAttr,\n assignRef,\n cx,\n dataAttr,\n handlerAll,\n mergeRefs,\n} from \"../../utils\"\n\nexport interface UseNativePopoverProps extends UsePopperProps<\"button\"> {\n /*\n If `true`, the popover will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n The placement of the popper relative to its reference.\n \n @default 'end'\n /\n placement?: UsePopperProps[\"placement\"]\n /\n The mode of the popover.\n \n @default 'auto'\n /\n popover?: \"\" \| \"auto\" \| \"hint\" \| \"manual\" \| true\n /\n The target element ID for the popover trigger.\n * If not provided, a generated ID will be used.\n /\n popoverTarget?: string\n /\n The action for the popover target.\n \n @default 'toggle'\n /\n popoverTargetAction?: \"hide\" \| \"show\" \| \"toggle\"\n /\n Update the position of the floating element, re-rendering the component if required.\n */\n updateRef?: RefObject<() => void>\n}\n\nexport const useNativePopover = ({\n autoUpdate,\n disabled = false,\n elements,\n flip,\n gutter,\n matchWidth,\n middleware,\n offset,\n placement = \"end\",\n platform,\n popover = \"auto\",\n popoverTarget,\n popoverTargetAction = \"toggle\",\n preventOverflow,\n strategy,\n transform,\n updateRef,\n whileElementsMounted,\n}: UseNativePopoverProps = {}) => {\n const { getDocument } = useEnvironment()\n const headerId = useId()\n const bodyId = useId()\n const generatedContentId = useId()\n const contentId = popoverTarget ?? generatedContentId\n const anchorRef = useRef<HTMLElement>(null)\n const triggerRef = useRef<HTMLButtonElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n const { refs, update, getPopperProps } = usePopper<\"button\">({\n autoUpdate,\n elements,\n flip,\n gutter,\n matchWidth,\n middleware,\n offset,\n placement,\n platform,\n preventOverflow,\n strategy,\n transform,\n whileElementsMounted,\n })\n\n assignRef(updateRef, update)\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLButtonElement>) => {\n if (!disabled) return\n\n ev.preventDefault()\n ev.stopPropagation()\n },\n [disabled],\n )\n\n const getTriggerProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => {\n return {\n type: \"button\",\n \"aria-controls\": contentId,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-haspopup\": \"dialog\",\n popoverTarget: contentId,\n popoverTargetAction,\n role: \"button\",\n ...props,\n ref: mergeRefs(ref, triggerRef, (node) => {\n if (anchorRef.current == null) refs.setReference(node)\n }),\n onClick: handlerAll(props.onClick, onClick),\n }\n },\n [contentId, disabled, onClick, popoverTargetAction, refs],\n )\n\n const getAnchorProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n ...props,\n ref: mergeRefs(ref, anchorRef, refs.setReference),\n }),\n [refs.setReference],\n )\n\n const getPositionerProps: PropGetter = useCallback(\n (props) => getPopperProps(props),\n [getPopperProps],\n )\n\n const getContentProps: PropGetter = useCallback(\n ({\n ref,\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby,\n ...props\n } = {}) => {\n const hasHeader = !!getDocument()?.getElementById(headerId)\n const hasBody = !!getDocument()?.getElementById(bodyId)\n\n return {\n id: contentId,\n \"aria-describedby\": cx(ariaDescribedby, hasBody ? bodyId : undefined),\n \"aria-labelledby\": cx(ariaLabelledby, hasHeader ? headerId : undefined),\n \"data-popup\": dataAttr(true),\n popover: popover === true ? \"\" : popover,\n role: \"dialog\",\n tabIndex: -1,\n ...props,\n ref: mergeRefs(ref, contentRef),\n }\n },\n [getDocument, headerId, bodyId, contentId, popover],\n )\n\n const getHeaderProps: PropGetter = useCallback(\n (props) => ({ id: headerId, ...props }),\n [headerId],\n )\n\n const getBodyProps: PropGetter = useCallback(\n (props) => ({ id: bodyId, ...props }),\n [bodyId],\n )\n\n const getFooterProps: PropGetter = useCallback((props) => ({ ...props }), [])\n\n const getCloseTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => {\n return {\n popoverTarget: contentId,\n popoverTargetAction: \"hide\",\n ...props,\n }\n },\n [contentId],\n )\n\n return {\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n }\n}\n\nexport type UseNativePopoverReturn = ReturnType<typeof useNativePopover>\n"],"mappings":";;;;;;;;;;AAqDA,MAAa,oBAAoB,EAC/B,YACA,WAAW,OACX,UACA,MACA,QACA,YACA,YACA,QACA,YAAY,OACZ,UACA,UAAU,QACV,eACA,sBAAsB,UACtB,iBACA,UACA,WACA,WACA,yBACyB,EAAE,KAAK;CAChC,MAAM,EAAE,gBAAgB,gBAAgB;CACxC,MAAM,WAAW,OAAO;CACxB,MAAM,SAAS,OAAO;CACtB,MAAM,qBAAqB,OAAO;CAClC,MAAM,YAAY,iBAAiB;CACnC,MAAM,YAAY,OAAoB,KAAK;CAC3C,MAAM,aAAa,OAA0B,KAAK;CAClD,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,EAAE,MAAM,QAAQ,mBAAmB,UAAoB;EAC3D;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,WAAU,WAAW,OAAO;CAE5B,MAAM,UAAU,aACb,OAAsC;AACrC,MAAI,CAAC,SAAU;AAEf,KAAG,gBAAgB;AACnB,KAAG,iBAAiB;IAEtB,CAAC,SAAS,CACX;CAED,MAAMA,kBAAwC,aAC3C,EAAE,KAAK,GAAG,UAAU,EAAE,KAAK;AAC1B,SAAO;GACL,MAAM;GACN,iBAAiB;GACjB,6CAA0B,SAAS;GACnC,iBAAiB;GACjB,eAAe;GACf;GACA,MAAM;GACN,GAAG;GACH,KAAK,UAAU,KAAK,aAAa,SAAS;AACxC,QAAI,UAAU,WAAW,KAAM,MAAK,aAAa,KAAK;KACtD;GACF,uCAAoB,MAAM,SAAS,QAAQ;GAC5C;IAEH;EAAC;EAAW;EAAU;EAAS;EAAqB;EAAK,CAC1D;CAED,MAAMC,iBAA6B,aAChC,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;EAC3B,GAAG;EACH,KAAK,UAAU,KAAK,WAAW,KAAK,aAAa;EAClD,GACD,CAAC,KAAK,aAAa,CACpB;CAED,MAAMC,qBAAiC,aACpC,UAAU,eAAe,MAAM,EAChC,CAAC,eAAe,CACjB;CAED,MAAMC,kBAA8B,aACjC,EACC,KACA,oBAAoB,iBACpB,mBAAmB,gBACnB,GAAG,UACD,EAAE,KAAK;EACT,MAAM,YAAY,CAAC,CAAC,aAAa,EAAE,eAAe,SAAS;EAC3D,MAAM,UAAU,CAAC,CAAC,aAAa,EAAE,eAAe,OAAO;AAEvD,SAAO;GACL,IAAI;GACJ,0CAAuB,iBAAiB,UAAU,SAAS,OAAU;GACrE,yCAAsB,gBAAgB,YAAY,WAAW,OAAU;GACvE,0CAAuB,KAAK;GAC5B,SAAS,YAAY,OAAO,KAAK;GACjC,MAAM;GACN,UAAU;GACV,GAAG;GACH,KAAK,UAAU,KAAK,WAAW;GAChC;IAEH;EAAC;EAAa;EAAU;EAAQ;EAAW;EAAQ,CACpD;CAED,MAAMC,iBAA6B,aAChC,WAAW;EAAE,IAAI;EAAU,GAAG;EAAO,GACtC,CAAC,SAAS,CACX;CAED,MAAMC,eAA2B,aAC9B,WAAW;EAAE,IAAI;EAAQ,GAAG;EAAO,GACpC,CAAC,OAAO,CACT;CAED,MAAMC,iBAA6B,aAAa,WAAW,EAAE,GAAG,OAAO,GAAG,EAAE,CAAC;AAa7E,QAAO;EACL;EACA;EACA,sBAdiD,aAChD,QAAQ,EAAE,KAAK;AACd,UAAO;IACL,eAAe;IACf,qBAAqB;IACrB,GAAG;IACJ;KAEH,CAAC,UAAU,CACZ;EAMC;EACA;EACA;EACA;EACA;EACD"}

package/dist/esm/components/number-input/use-number-input.js CHANGED Viewed

@@ -4,9 +4,9 @@ import { isComposing, runKeyAction } from "../../utils/dom.js";
 import { useSafeLayoutEffect } from "../../utils/effect.js";
 import { mergeRefs } from "../../utils/ref.js";
 import { utils_exports } from "../../utils/index.js";
+import { useEventListener } from "../../hooks/use-event-listener/index.js";
 import { useFieldProps } from "../field/use-field-props.js";
 import "../field/index.js";
-import { useEventListener } from "../../hooks/use-event-listener/index.js";
 import { useCounter } from "../../hooks/use-counter/index.js";
 import { useNumberCounter } from "./use-number-counter.js";
 import { useCallback, useMemo, useRef } from "react";

package/dist/esm/components/popover/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { popoverStyle } from "./popover.style.js";
 import { popoverProps, usePopover, usePopoverProps } from "./use-popover.js";
-import { PopoverAnchor, PopoverBody, PopoverCloseTrigger, PopoverContent, PopoverFooter, PopoverHeader, PopoverPropsContext, PopoverRoot, PopoverTrigger, getPopupAnimationProps, usePopoverPropsContext } from "./popover.js";
+import { PopoverAnchor, PopoverBody, PopoverCloseTrigger, PopoverContent, PopoverFooter, PopoverHeader, PopoverPropsContext, PopoverRoot, PopoverTrigger, usePopoverPropsContext, usePopoverStyleProps, usePopupAnimationProps } from "./popover.js";
 import { namespace_exports } from "./namespace.js";
-export { namespace_exports as Popover, PopoverAnchor, PopoverBody, PopoverCloseTrigger, PopoverContent, PopoverFooter, PopoverHeader, PopoverPropsContext, PopoverRoot, PopoverTrigger, getPopupAnimationProps, popoverProps, popoverStyle, usePopover, usePopoverProps, usePopoverPropsContext };
+export { namespace_exports as Popover, PopoverAnchor, PopoverBody, PopoverCloseTrigger, PopoverContent, PopoverFooter, PopoverHeader, PopoverPropsContext, PopoverRoot, PopoverTrigger, popoverProps, popoverStyle, usePopover, usePopoverProps, usePopoverPropsContext, usePopoverStyleProps, usePopupAnimationProps };

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

@@ -5,11 +5,12 @@ import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { motion as motion$1 } from "../motion/factory.js";
 import "../motion/index.js";
-import { Portal } from "../portal/portal.js";
-import "../portal/index.js";
+import { useValue } from "../../hooks/use-value/index.js";
 import { popoverStyle } from "./popover.style.js";
 import { fadeScaleVariants } from "../fade-scale/fade-scale.js";
 import "../fade-scale/index.js";
+import { Portal } from "../portal/portal.js";
+import "../portal/index.js";
 import { slideFadeVariants } from "../slide-fade/slide-fade.js";
 import "../slide-fade/index.js";
 import { usePopover } from "./use-popover.js";
@@ -18,7 +19,9 @@ import { jsx } from "react/jsx-runtime";
 import { AnimatePresence } from "motion/react";
 //#region src/components/popover/popover.tsx
-const getPopupAnimationProps = (animationScheme = "scale", duration) => {
+const usePopupAnimationProps = (props = {}) => {
+	const animationScheme = useValue(props.animationScheme ?? "scale");
+	const duration = useValue(props.duration ?? .1);
 	const sharedProps = {
 		animate: "enter",
 		exit: "exit",
@@ -73,6 +76,19 @@ const getPopupAnimationProps = (animationScheme = "scale", duration) => {
 		default: return {};
 	}
 };
+const usePopoverStyleProps = (props = {}) => {
+	const placement = useValue(props.placement);
+	const gutter = useValue(props.gutter);
+	const matchWidth = useValue(props.matchWidth);
+	const strategy = useValue(props.strategy);
+	return {
+		flip: useValue(props.flip),
+		gutter,
+		matchWidth,
+		placement,
+		strategy
+	};
+};
 const { ComponentContext, PropsContext: PopoverPropsContext, StyleContext, useComponentContext, usePropsContext: usePopoverPropsContext, withContext, useRootComponentProps } = createSlotComponent("popover", popoverStyle);
 /**
 * `Popover` is a component that floats around an element to display information.
@@ -80,7 +96,11 @@ const { ComponentContext, PropsContext: PopoverPropsContext, StyleContext, useCo
 * @see https://yamada-ui.com/docs/components/popover
 */
 const PopoverRoot = (props) => {
-	const [styleContext, { animationScheme = "scale", children, duration = .1, ...rest }] = useRootComponentProps(props);
+	const styleProps = usePopoverStyleProps(props);
+	const [styleContext, { animationScheme, children, duration, ...rest }] = useRootComponentProps({
+		...props,
+		...styleProps
+	});
 	const { open, getAnchorProps, getBodyProps, getCloseTriggerProps, getContentProps, getFooterProps, getHeaderProps, getPositionerProps, getTriggerProps, onClose } = usePopover(rest);
 	return /* @__PURE__ */ jsx(StyleContext, {
 		value: styleContext,
@@ -138,10 +158,14 @@ const PopoverPositioner = withContext("div", "positioner")(void 0, (props) => {
 });
 const PopoverContent = withContext(({ portalProps, ...rest }) => {
 	const { animationScheme, duration, open, getContentProps } = useComponentContext();
+	const popupAnimationProps = usePopupAnimationProps({
+		animationScheme,
+		duration
+	});
 	return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(Portal, {
 		...portalProps,
 		children: /* @__PURE__ */ jsx(PopoverPositioner, { children: /* @__PURE__ */ jsx(motion$1.div, {
-			...getPopupAnimationProps(animationScheme, duration),
+			...popupAnimationProps,
 			...(0, utils_exports.cast)(getContentProps((0, utils_exports.cast)(rest)))
 		}) })
 	}) : null });
@@ -160,5 +184,5 @@ const PopoverFooter = withContext("div", "footer")(void 0, (props) => {
 });
 //#endregion
-export { PopoverAnchor, PopoverBody, PopoverCloseTrigger, PopoverContent, PopoverFooter, PopoverHeader, PopoverPropsContext, PopoverRoot, PopoverTrigger, getPopupAnimationProps, usePopoverPropsContext };
+export { PopoverAnchor, PopoverBody, PopoverCloseTrigger, PopoverContent, PopoverFooter, PopoverHeader, PopoverPropsContext, PopoverRoot, PopoverTrigger, usePopoverPropsContext, usePopoverStyleProps, usePopupAnimationProps };
 //# sourceMappingURL=popover.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"popover.js","names":["PopoverRoot: FC<PopoverRootProps>","motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n HTMLProps,\n HTMLStyledProps,\n SimplePlacement,\n ThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { cast, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface PopupAnimationProps {\n /*\n The animation of the element.\n \n @default 'scale'\n /\n animationScheme?: \"none\" \| \"scale\" \| SimplePlacement\n /\n The animation duration.\n \n @default 0.2\n /\n duration?: MotionTransitionProps[\"duration\"]\n}\n\nexport const getPopupAnimationProps = (\n animationScheme: PopupAnimationProps[\"animationScheme\"] = \"scale\",\n duration?: PopupAnimationProps[\"duration\"],\n) => {\n const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n switch (animationScheme) {\n case \"scale\":\n return {\n ...sharedProps,\n custom: { duration, reverse: true, scale: 0.95 },\n variants: fadeScaleVariants,\n }\n case \"block-start\":\n return {\n ...sharedProps,\n custom: { duration, offsetY: -16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"inline-end\":\n return {\n ...sharedProps,\n custom: { duration, offsetX: 16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"inline-start\":\n return {\n ...sharedProps,\n custom: { duration, offsetX: -16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"block-end\":\n return {\n ...sharedProps,\n custom: { duration, offsetY: 16, reverse: true },\n variants: slideFadeVariants,\n }\n default:\n return {}\n }\n}\n\ninterface ComponentContext\n extends\n Pick<\n UsePopoverReturn,\n \| \"getAnchorProps\"\n \| \"getBodyProps\"\n \| \"getCloseTriggerProps\"\n \| \"getContentProps\"\n \| \"getFooterProps\"\n \| \"getHeaderProps\"\n \| \"getPositionerProps\"\n \| \"getTriggerProps\"\n \| \"open\"\n >,\n PopupAnimationProps {}\n\nexport interface PopoverRootProps\n extends UsePopoverProps, PopupAnimationProps, ThemeProps<PopoverStyle> {\n /\n The children of the popover.\n /\n children?: ReactNodeOrFunction<{\n open: boolean\n onClose: () => void\n }>\n /\n The animation duration.\n \n @default 0.2\n /\n duration?: PopupAnimationProps[\"duration\"]\n}\n\nconst {\n ComponentContext,\n PropsContext: PopoverPropsContext,\n StyleContext,\n useComponentContext,\n usePropsContext: usePopoverPropsContext,\n withContext,\n useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n \"popover\",\n popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/\n `Popover` is a component that floats around an element to display information.\n \n @see https://yamada-ui.com/docs/components/popover\n /\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n const [\n styleContext,\n { animationScheme = \"scale\", children, duration = 0.1, ...rest },\n ] = useRootComponentProps(props)\n const {\n open,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n onClose,\n } = usePopover(rest)\n const componentContext = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n }),\n [\n open,\n animationScheme,\n duration,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n ],\n )\n\n return (\n <StyleContext value={styleContext}>\n <ComponentContext value={componentContext}>\n {runIfFn(children, { open, onClose })}\n </ComponentContext>\n </StyleContext>\n )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n \"button\",\n \"trigger\",\n)({ asChild: true }, (props) => {\n const { getTriggerProps } = useComponentContext()\n\n return getTriggerProps(props)\n})\n\nexport interface PopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverCloseTrigger = withContext<\n \"button\",\n PopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n { asChild: true },\n (props) => {\n const { getCloseTriggerProps } = useComponentContext()\n\n return getCloseTriggerProps(props)\n },\n)\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n \"div\",\n \"anchor\",\n)({ asChild: true }, (props) => {\n const { getAnchorProps } = useComponentContext()\n\n return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n \"div\",\n \"positioner\",\n)(undefined, (props) => {\n const { getPositionerProps } = useComponentContext()\n\n return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n /\n Props for portal component.\n */\n portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n ({ portalProps, ...rest }) => {\n const { animationScheme, duration, open, getContentProps } =\n useComponentContext()\n\n return (\n <AnimatePresence>\n {open ? (\n <Portal {...portalProps}>\n <PopoverPositioner>\n <motion.div\n {...getPopupAnimationProps(animationScheme, duration)}\n {...cast<HTMLMotionProps>(\n getContentProps(cast<HTMLProps>(rest)),\n )}\n />\n </PopoverPositioner>\n </Portal>\n ) : null}\n </AnimatePresence>\n )\n },\n \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n \"div\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps } = useComponentContext()\n\n return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return getBodyProps(props)\n },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n \"div\",\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":"popover.js","names":["PopoverRoot: FC<PopoverRootProps>","motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n HTMLProps,\n HTMLStyledProps,\n SimplePlacement,\n StyleValue,\n ThemeProps,\n} from \"../../core\"\nimport type { Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface UsePopupAnimationProps {\n /*\n The animation of the element.\n \n @default 'scale'\n /\n animationScheme?: StyleValue<\"none\" \| \"scale\" \| SimplePlacement>\n /\n The animation duration.\n \n @default 0.1\n /\n duration?: StyleValue<MotionTransitionProps[\"duration\"]>\n}\n\nexport const usePopupAnimationProps = (props: UsePopupAnimationProps = {}) => {\n const animationScheme = useValue(props.animationScheme ?? \"scale\")\n const duration = useValue(props.duration ?? 0.1)\n const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n switch (animationScheme) {\n case \"scale\":\n return {\n ...sharedProps,\n custom: { duration, reverse: true, scale: 0.95 },\n variants: fadeScaleVariants,\n }\n case \"block-start\":\n return {\n ...sharedProps,\n custom: { duration, offsetY: -16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"inline-end\":\n return {\n ...sharedProps,\n custom: { duration, offsetX: 16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"inline-start\":\n return {\n ...sharedProps,\n custom: { duration, offsetX: -16, reverse: true },\n variants: slideFadeVariants,\n }\n case \"block-end\":\n return {\n ...sharedProps,\n custom: { duration, offsetY: 16, reverse: true },\n variants: slideFadeVariants,\n }\n default:\n return {}\n }\n}\n\nexport interface UsePopoverStyleProps {\n /\n If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.\n \n @default true\n /\n flip?: StyleValue<UsePopoverProps[\"flip\"]>\n /\n The distance or margin between the reference and popper.\n * It is used internally to create an `offset` modifier.\n \n @default 8\n /\n gutter?: StyleValue<UsePopoverProps[\"gutter\"]>\n /\n If `true`, the popper will match the width of the reference at all times.\n * It's useful for `autocomplete`, `date-picker` and `select` patterns.\n \n @default false\n /\n matchWidth?: StyleValue<UsePopoverProps[\"matchWidth\"]>\n /\n The placement of the popper relative to its reference.\n \n @default 'end'\n /\n placement?: StyleValue<UsePopoverProps[\"placement\"]>\n /\n The CSS positioning strategy to use.\n \n @default 'absolute'\n /\n strategy?: StyleValue<UsePopoverProps[\"strategy\"]>\n}\n\nexport const usePopoverStyleProps = (props: UsePopoverStyleProps = {}) => {\n const placement = useValue(props.placement)\n const gutter = useValue(props.gutter)\n const matchWidth = useValue(props.matchWidth)\n const strategy = useValue(props.strategy)\n const flip = useValue(props.flip)\n\n return {\n flip,\n gutter,\n matchWidth,\n placement,\n strategy,\n }\n}\n\ninterface ComponentContext\n extends\n Pick<\n UsePopoverReturn,\n \| \"getAnchorProps\"\n \| \"getBodyProps\"\n \| \"getCloseTriggerProps\"\n \| \"getContentProps\"\n \| \"getFooterProps\"\n \| \"getHeaderProps\"\n \| \"getPositionerProps\"\n \| \"getTriggerProps\"\n \| \"open\"\n >,\n UsePopupAnimationProps {}\n\nexport interface PopoverRootProps\n extends\n Merge<UsePopoverProps, UsePopoverStyleProps>,\n UsePopupAnimationProps,\n ThemeProps<PopoverStyle> {\n /\n The children of the popover.\n /\n children?: ReactNodeOrFunction<{\n open: boolean\n onClose: () => void\n }>\n}\n\nconst {\n ComponentContext,\n PropsContext: PopoverPropsContext,\n StyleContext,\n useComponentContext,\n usePropsContext: usePopoverPropsContext,\n withContext,\n useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n \"popover\",\n popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/\n `Popover` is a component that floats around an element to display information.\n \n @see https://yamada-ui.com/docs/components/popover\n /\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n const styleProps = usePopoverStyleProps(props)\n const [styleContext, { animationScheme, children, duration, ...rest }] =\n useRootComponentProps({ ...props, ...styleProps })\n const {\n open,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n onClose,\n } = usePopover(rest)\n const componentContext = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n }),\n [\n open,\n animationScheme,\n duration,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n ],\n )\n\n return (\n <StyleContext value={styleContext}>\n <ComponentContext value={componentContext}>\n {runIfFn(children, { open, onClose })}\n </ComponentContext>\n </StyleContext>\n )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n \"button\",\n \"trigger\",\n)({ asChild: true }, (props) => {\n const { getTriggerProps } = useComponentContext()\n\n return getTriggerProps(props)\n})\n\nexport interface PopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverCloseTrigger = withContext<\n \"button\",\n PopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n { asChild: true },\n (props) => {\n const { getCloseTriggerProps } = useComponentContext()\n\n return getCloseTriggerProps(props)\n },\n)\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n \"div\",\n \"anchor\",\n)({ asChild: true }, (props) => {\n const { getAnchorProps } = useComponentContext()\n\n return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n \"div\",\n \"positioner\",\n)(undefined, (props) => {\n const { getPositionerProps } = useComponentContext()\n\n return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n /\n Props for portal component.\n */\n portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n ({ portalProps, ...rest }) => {\n const { animationScheme, duration, open, getContentProps } =\n useComponentContext()\n const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <AnimatePresence>\n {open ? (\n <Portal {...portalProps}>\n <PopoverPositioner>\n <motion.div\n {...popupAnimationProps}\n {...cast<HTMLMotionProps>(\n getContentProps(cast<HTMLProps>(rest)),\n )}\n />\n </PopoverPositioner>\n </Portal>\n ) : null}\n </AnimatePresence>\n )\n },\n \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n \"div\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps } = useComponentContext()\n\n return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return getBodyProps(props)\n },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n \"div\",\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/popover/use-popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-popover.js","names":["getTriggerProps: PropGetter<\"button\">","getAnchorProps: PropGetter","getPositionerProps: PropGetter","getContentProps: PropGetter","getHeaderProps: PropGetter","getBodyProps: PropGetter","getFooterProps: PropGetter","popoverProps: (\n \| keyof PopupAnimationProps\n \| keyof UsePopoverProps\n)[]"],"sources":["../../../../src/components/popover/use-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FocusEvent, KeyboardEvent, RefObject } from \"react\"\nimport type { Direction, PropGetter } from \"../../core\"\nimport type { UseDisclosureProps } from \"../../hooks/use-disclosure\"\nimport type { UsePopperProps } from \"../../hooks/use-popper\"\nimport type { Dict } from \"../../utils\"\nimport type { PopupAnimationProps } from \"./popover\"\nimport { useCallback, useEffect, useId, useRef } from \"react\"\nimport { useEnvironment, useSplitProps } from \"../../core\"\nimport { useDisclosure } from \"../../hooks/use-disclosure\"\nimport { useEventListener } from \"../../hooks/use-event-listener\"\nimport { useFocusOnShow } from \"../../hooks/use-focus\"\nimport { useOutsideClick } from \"../../hooks/use-outside-click\"\nimport { popperProps, usePopper } from \"../../hooks/use-popper\"\nimport {\n ariaAttr,\n assignRef,\n contains,\n dataAttr,\n focusTransfer,\n focusTrap,\n getEventRelatedTarget,\n handlerAll,\n mergeRefs,\n runKeyAction,\n scrollLock,\n setAttribute,\n useSafeLayoutEffect,\n useUnmountEffect,\n} from \"../../utils\"\n\nexport interface UsePopoverProps\n extends Omit<UseDisclosureProps, \"timing\">, UsePopperProps<\"button\"> {\n /*\n If `true`, focus will be transferred to the first interactive element when the popover opens.\n \n @default true\n /\n autoFocus?: boolean\n /\n If `true`, scrolling will be disabled on the `body` when the modal opens.\n \n @default false\n /\n blockScrollOnMount?: boolean\n /\n If `true`, the popover will close when you blur out it by clicking outside or tabbing out.\n \n @default true\n /\n closeOnBlur?: boolean\n /\n If `true`, the popover will hide on pressing Esc key.\n \n @default true\n /\n closeOnEsc?: boolean\n /\n If `true`, the popover will hide on scroll.\n \n @default false\n /\n closeOnScroll?: boolean\n /\n If `true`, the popover will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n The `ref` of the element that should receive focus when the popover opens.\n /\n initialFocusRef?: RefObject<HTMLElement \| null>\n /\n If `true`, the popover will be modal.\n \n - scrolling is blocked.\n * - focus is trapped within the popover.\n \n @default false\n /\n modal?: boolean\n /\n If `true`, the popover will be opened when click on the field.\n \n @default true\n /\n openOnClick?: boolean\n /\n The placement of the popper relative to its reference.\n \n @default 'end'\n /\n placement?: Direction\n /\n If `true`, the focus will be transferred to the popover content when the tab key is pressed.\n \n @default true\n /\n transferFocus?: boolean\n /\n Update the position of the floating element, re-rendering the component if required.\n */\n updateRef?: RefObject<() => void>\n}\n\nexport const usePopover = ({\n autoFocus = true,\n autoUpdate,\n modal = false,\n blockScrollOnMount = modal,\n closeOnBlur = true,\n closeOnEsc = true,\n closeOnScroll,\n defaultOpen,\n disabled,\n elements,\n flip,\n gutter,\n initialFocusRef,\n matchWidth,\n middleware,\n offset,\n open: openProp,\n openOnClick = true,\n placement = \"end\",\n platform,\n preventOverflow,\n strategy,\n transferFocus = true,\n transform,\n updateRef,\n whileElementsMounted,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n}: UsePopoverProps = {}) => {\n const { getDocument } = useEnvironment()\n const headerId = useId()\n const bodyId = useId()\n const contentId = useId()\n const anchorRef = useRef<HTMLElement>(null)\n const triggerRef = useRef<HTMLButtonElement>(null)\n const contentRef = useRef<HTMLElement>(null)\n const openTimeout = useRef<NodeJS.Timeout>(undefined)\n const closeTimeout = useRef<NodeJS.Timeout>(undefined)\n const { open, onClose, onOpen } = useDisclosure({\n defaultOpen,\n open: openProp,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n })\n const { refs, update, getPopperProps } = usePopper<\"button\">({\n autoUpdate,\n elements,\n flip,\n gutter,\n matchWidth,\n middleware,\n offset,\n open,\n placement,\n platform,\n preventOverflow,\n strategy,\n transform,\n whileElementsMounted,\n })\n\n assignRef(updateRef, update)\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLElement>) => {\n runKeyAction(ev, {\n Escape: () => {\n if (!closeOnEsc) return\n\n onClose()\n\n triggerRef.current?.focus()\n },\n })\n },\n [closeOnEsc, onClose],\n )\n\n const onBlur = useCallback(\n (ev: FocusEvent<HTMLDivElement>) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const popup = relatedTarget?.hasAttribute(\"data-popup\")\n\n if (contains(triggerRef.current, relatedTarget)) return\n if (contains(contentRef.current, relatedTarget)) return\n if (contains(contentRef.current, ev.target) && popup) return\n\n if (closeOnBlur) onClose()\n },\n [closeOnBlur, onClose],\n )\n\n useEventListener(getDocument(), \"scroll\", () => {\n if (open && closeOnScroll) onClose()\n })\n\n useFocusOnShow(contentRef, {\n focusTarget: initialFocusRef,\n shouldFocus: autoFocus,\n visible: open,\n })\n\n useOutsideClick({\n ref: [contentRef, triggerRef],\n enabled: open && closeOnBlur,\n handler: onClose,\n })\n\n useSafeLayoutEffect(() => {\n const el = contentRef.current\n const hasHeader = !!getDocument()?.getElementById(headerId)\n const hasBody = !!getDocument()?.getElementById(bodyId)\n\n if (el && hasHeader) setAttribute(el, \"aria-labelledby\", headerId)\n if (el && hasBody) setAttribute(el, \"aria-describedby\", bodyId)\n }, [open, headerId, bodyId])\n\n useEffect(() => {\n if (!open \|\| !modal) return\n\n return focusTrap(contentRef.current)\n }, [open, modal])\n\n useEffect(() => {\n if (!open \|\| !blockScrollOnMount) return\n\n return scrollLock(contentRef.current)\n }, [open, modal, blockScrollOnMount])\n\n useEffect(() => {\n if (!open \|\| modal \|\| !transferFocus) return\n\n return focusTransfer(contentRef.current, triggerRef.current)\n }, [open, modal, transferFocus])\n\n useUnmountEffect(() => {\n clearTimeout(openTimeout.current)\n clearTimeout(closeTimeout.current)\n })\n\n const getTriggerProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n \"aria-controls\": open ? contentId : undefined,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-expanded\": open,\n \"aria-haspopup\": \"dialog\",\n role: \"button\",\n ...props,\n ref: mergeRefs(ref, triggerRef, (node) => {\n if (anchorRef.current == null) refs.setReference(node)\n }),\n onBlur: handlerAll(props.onBlur, (ev) =>\n !contains(contentRef.current, getEventRelatedTarget(ev)) && closeOnBlur\n ? onClose()\n : void 0,\n ),\n onClick: handlerAll(\n props.onClick,\n !open ? (!disabled && openOnClick ? onOpen : undefined) : onClose,\n ),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n closeOnBlur,\n contentId,\n disabled,\n onClose,\n onKeyDown,\n onOpen,\n open,\n openOnClick,\n refs,\n ],\n )\n\n const getAnchorProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n ...props,\n ref: mergeRefs(ref, anchorRef, refs.setReference),\n }),\n [refs.setReference],\n )\n\n const getPositionerProps: PropGetter = useCallback(\n (props) => getPopperProps(props),\n [getPopperProps],\n )\n\n const getContentProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n id: contentId,\n \"aria-hidden\": !open,\n \"aria-modal\": modal ? \"true\" : undefined,\n \"data-close\": dataAttr(!open),\n \"data-open\": dataAttr(open),\n \"data-popup\": dataAttr(true),\n role: \"dialog\",\n tabIndex: -1,\n ...props,\n ref: mergeRefs(ref, contentRef),\n onBlur: handlerAll(props.onBlur, onBlur),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [contentId, open, modal, onBlur, onKeyDown],\n )\n\n const getHeaderProps: PropGetter = useCallback(\n (props) => ({ id: headerId, ...props }),\n [headerId],\n )\n\n const getBodyProps: PropGetter = useCallback(\n (props) => ({ id: bodyId, ...props }),\n [bodyId],\n )\n\n const getFooterProps: PropGetter = useCallback((props) => ({ ...props }), [])\n\n const getCloseTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n ...props,\n onClick: handlerAll(props.onClick, () => {\n onClose()\n\n triggerRef.current?.focus()\n }),\n }),\n [onClose],\n )\n\n return {\n open,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n onClose,\n onOpen,\n }\n}\n\nexport type UsePopoverReturn = ReturnType<typeof usePopover>\n\nexport const popoverProps: (\n \| keyof PopupAnimationProps\n \| keyof UsePopoverProps\n)[] = [\n ...popperProps,\n \"autoFocus\",\n \"transferFocus\",\n \"blockScrollOnMount\",\n \"closeOnBlur\",\n \"closeOnEsc\",\n \"closeOnScroll\",\n \"openOnClick\",\n \"disabled\",\n \"initialFocusRef\",\n \"modal\",\n \"updateRef\",\n \"defaultOpen\",\n \"onOpen\",\n \"onClose\",\n \"animationScheme\",\n \"duration\",\n]\n\nexport const usePopoverProps = <\n Y extends Dict = Dict,\n M extends keyof PopupAnimationProps \| keyof UsePopoverProps =\n \| keyof PopupAnimationProps\n \| keyof UsePopoverProps,\n>(\n props: Y,\n omitKeys?: M[],\n) => {\n return useSplitProps(\n props,\n popoverProps.filter((key) => !omitKeys?.includes(key as M)),\n ) as unknown as [\n keyof PopupAnimationProps \| keyof UsePopoverProps extends M\n ? PopupAnimationProps & UsePopoverProps\n : Omit<PopupAnimationProps & UsePopoverProps, M>,\n Omit<\n Y,\n keyof PopupAnimationProps \| keyof UsePopoverProps extends M\n ? keyof PopupAnimationProps \| keyof UsePopoverProps\n : Exclude<keyof PopupAnimationProps \| keyof UsePopoverProps, M>\n >,\n ]\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-popover.js","names":["getTriggerProps: PropGetter<\"button\">","getAnchorProps: PropGetter","getPositionerProps: PropGetter","getContentProps: PropGetter","getHeaderProps: PropGetter","getBodyProps: PropGetter","getFooterProps: PropGetter","popoverProps: (\n \| keyof UsePopoverProps\n \| keyof UsePopupAnimationProps\n)[]"],"sources":["../../../../src/components/popover/use-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FocusEvent, KeyboardEvent, RefObject } from \"react\"\nimport type { Direction, PropGetter } from \"../../core\"\nimport type { UseDisclosureProps } from \"../../hooks/use-disclosure\"\nimport type { UsePopperProps } from \"../../hooks/use-popper\"\nimport type { Dict } from \"../../utils\"\nimport type { UsePopupAnimationProps } from \"./popover\"\nimport { useCallback, useEffect, useId, useRef } from \"react\"\nimport { useEnvironment, useSplitProps } from \"../../core\"\nimport { useDisclosure } from \"../../hooks/use-disclosure\"\nimport { useEventListener } from \"../../hooks/use-event-listener\"\nimport { useFocusOnShow } from \"../../hooks/use-focus\"\nimport { useOutsideClick } from \"../../hooks/use-outside-click\"\nimport { popperProps, usePopper } from \"../../hooks/use-popper\"\nimport {\n ariaAttr,\n assignRef,\n contains,\n dataAttr,\n focusTransfer,\n focusTrap,\n getEventRelatedTarget,\n handlerAll,\n mergeRefs,\n runKeyAction,\n scrollLock,\n setAttribute,\n useSafeLayoutEffect,\n useUnmountEffect,\n} from \"../../utils\"\n\nexport interface UsePopoverProps\n extends Omit<UseDisclosureProps, \"timing\">, UsePopperProps<\"button\"> {\n /*\n If `true`, focus will be transferred to the first interactive element when the popover opens.\n \n @default true\n /\n autoFocus?: boolean\n /\n If `true`, scrolling will be disabled on the `body` when the modal opens.\n \n @default false\n /\n blockScrollOnMount?: boolean\n /\n If `true`, the popover will close when you blur out it by clicking outside or tabbing out.\n \n @default true\n /\n closeOnBlur?: boolean\n /\n If `true`, the popover will hide on pressing Esc key.\n \n @default true\n /\n closeOnEsc?: boolean\n /\n If `true`, the popover will hide on scroll.\n \n @default false\n /\n closeOnScroll?: boolean\n /\n If `true`, the popover will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n The `ref` of the element that should receive focus when the popover opens.\n /\n initialFocusRef?: RefObject<HTMLElement \| null>\n /\n If `true`, the popover will be modal.\n \n - scrolling is blocked.\n * - focus is trapped within the popover.\n \n @default false\n /\n modal?: boolean\n /\n If `true`, the popover will be opened when click on the field.\n \n @default true\n /\n openOnClick?: boolean\n /\n The placement of the popper relative to its reference.\n \n @default 'end'\n /\n placement?: Direction\n /\n If `true`, the focus will be transferred to the popover content when the tab key is pressed.\n \n @default true\n /\n transferFocus?: boolean\n /\n Update the position of the floating element, re-rendering the component if required.\n */\n updateRef?: RefObject<() => void>\n}\n\nexport const usePopover = ({\n autoFocus = true,\n autoUpdate,\n modal = false,\n blockScrollOnMount = modal,\n closeOnBlur = true,\n closeOnEsc = true,\n closeOnScroll,\n defaultOpen,\n disabled,\n elements,\n flip,\n gutter,\n initialFocusRef,\n matchWidth,\n middleware,\n offset,\n open: openProp,\n openOnClick = true,\n placement = \"end\",\n platform,\n preventOverflow,\n strategy,\n transferFocus = true,\n transform,\n updateRef,\n whileElementsMounted,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n}: UsePopoverProps = {}) => {\n const { getDocument } = useEnvironment()\n const headerId = useId()\n const bodyId = useId()\n const contentId = useId()\n const anchorRef = useRef<HTMLElement>(null)\n const triggerRef = useRef<HTMLButtonElement>(null)\n const contentRef = useRef<HTMLElement>(null)\n const openTimeout = useRef<NodeJS.Timeout>(undefined)\n const closeTimeout = useRef<NodeJS.Timeout>(undefined)\n const { open, onClose, onOpen } = useDisclosure({\n defaultOpen,\n open: openProp,\n onClose: onCloseProp,\n onOpen: onOpenProp,\n })\n const { refs, update, getPopperProps } = usePopper<\"button\">({\n autoUpdate,\n elements,\n flip,\n gutter,\n matchWidth,\n middleware,\n offset,\n open,\n placement,\n platform,\n preventOverflow,\n strategy,\n transform,\n whileElementsMounted,\n })\n\n assignRef(updateRef, update)\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLElement>) => {\n runKeyAction(ev, {\n Escape: () => {\n if (!closeOnEsc) return\n\n onClose()\n\n triggerRef.current?.focus()\n },\n })\n },\n [closeOnEsc, onClose],\n )\n\n const onBlur = useCallback(\n (ev: FocusEvent<HTMLDivElement>) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const popup = relatedTarget?.hasAttribute(\"data-popup\")\n\n if (contains(triggerRef.current, relatedTarget)) return\n if (contains(contentRef.current, relatedTarget)) return\n if (contains(contentRef.current, ev.target) && popup) return\n\n if (closeOnBlur) onClose()\n },\n [closeOnBlur, onClose],\n )\n\n useEventListener(getDocument(), \"scroll\", () => {\n if (open && closeOnScroll) onClose()\n })\n\n useFocusOnShow(contentRef, {\n focusTarget: initialFocusRef,\n shouldFocus: autoFocus,\n visible: open,\n })\n\n useOutsideClick({\n ref: [contentRef, triggerRef],\n enabled: open && closeOnBlur,\n handler: onClose,\n })\n\n useSafeLayoutEffect(() => {\n const el = contentRef.current\n const hasHeader = !!getDocument()?.getElementById(headerId)\n const hasBody = !!getDocument()?.getElementById(bodyId)\n\n if (el && hasHeader) setAttribute(el, \"aria-labelledby\", headerId)\n if (el && hasBody) setAttribute(el, \"aria-describedby\", bodyId)\n }, [open, headerId, bodyId])\n\n useEffect(() => {\n if (!open \|\| !modal) return\n\n return focusTrap(contentRef.current)\n }, [open, modal])\n\n useEffect(() => {\n if (!open \|\| !blockScrollOnMount) return\n\n return scrollLock(contentRef.current)\n }, [open, modal, blockScrollOnMount])\n\n useEffect(() => {\n if (!open \|\| modal \|\| !transferFocus) return\n\n return focusTransfer(contentRef.current, triggerRef.current)\n }, [open, modal, transferFocus])\n\n useUnmountEffect(() => {\n clearTimeout(openTimeout.current)\n clearTimeout(closeTimeout.current)\n })\n\n const getTriggerProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n \"aria-controls\": open ? contentId : undefined,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-expanded\": open,\n \"aria-haspopup\": \"dialog\",\n role: \"button\",\n ...props,\n ref: mergeRefs(ref, triggerRef, (node) => {\n if (anchorRef.current == null) refs.setReference(node)\n }),\n onBlur: handlerAll(props.onBlur, (ev) =>\n !contains(contentRef.current, getEventRelatedTarget(ev)) && closeOnBlur\n ? onClose()\n : void 0,\n ),\n onClick: handlerAll(\n props.onClick,\n !open ? (!disabled && openOnClick ? onOpen : undefined) : onClose,\n ),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n closeOnBlur,\n contentId,\n disabled,\n onClose,\n onKeyDown,\n onOpen,\n open,\n openOnClick,\n refs,\n ],\n )\n\n const getAnchorProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n ...props,\n ref: mergeRefs(ref, anchorRef, refs.setReference),\n }),\n [refs.setReference],\n )\n\n const getPositionerProps: PropGetter = useCallback(\n (props) => getPopperProps(props),\n [getPopperProps],\n )\n\n const getContentProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n id: contentId,\n \"aria-hidden\": !open,\n \"aria-modal\": modal ? \"true\" : undefined,\n \"data-close\": dataAttr(!open),\n \"data-open\": dataAttr(open),\n \"data-popup\": dataAttr(true),\n role: \"dialog\",\n tabIndex: -1,\n ...props,\n ref: mergeRefs(ref, contentRef),\n onBlur: handlerAll(props.onBlur, onBlur),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [contentId, open, modal, onBlur, onKeyDown],\n )\n\n const getHeaderProps: PropGetter = useCallback(\n (props) => ({ id: headerId, ...props }),\n [headerId],\n )\n\n const getBodyProps: PropGetter = useCallback(\n (props) => ({ id: bodyId, ...props }),\n [bodyId],\n )\n\n const getFooterProps: PropGetter = useCallback((props) => ({ ...props }), [])\n\n const getCloseTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n ...props,\n onClick: handlerAll(props.onClick, () => {\n onClose()\n\n triggerRef.current?.focus()\n }),\n }),\n [onClose],\n )\n\n return {\n open,\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n onClose,\n onOpen,\n }\n}\n\nexport type UsePopoverReturn = ReturnType<typeof usePopover>\n\nexport const popoverProps: (\n \| keyof UsePopoverProps\n \| keyof UsePopupAnimationProps\n)[] = [\n ...popperProps,\n \"autoFocus\",\n \"transferFocus\",\n \"blockScrollOnMount\",\n \"closeOnBlur\",\n \"closeOnEsc\",\n \"closeOnScroll\",\n \"openOnClick\",\n \"disabled\",\n \"initialFocusRef\",\n \"modal\",\n \"updateRef\",\n \"defaultOpen\",\n \"onOpen\",\n \"onClose\",\n \"animationScheme\",\n \"duration\",\n]\n\nexport const usePopoverProps = <\n Y extends Dict = Dict,\n M extends keyof UsePopoverProps \| keyof UsePopupAnimationProps =\n \| keyof UsePopoverProps\n \| keyof UsePopupAnimationProps,\n>(\n props: Y,\n omitKeys?: M[],\n) => {\n return useSplitProps(\n props,\n popoverProps.filter((key) => !omitKeys?.includes(key as M)),\n ) as unknown as [\n keyof UsePopoverProps \| keyof UsePopupAnimationProps extends M\n ? UsePopoverProps & UsePopupAnimationProps\n : Omit<UsePopoverProps & UsePopupAnimationProps, M>,\n Omit<\n Y,\n keyof UsePopoverProps \| keyof UsePopupAnimationProps extends M\n ? keyof UsePopoverProps \| keyof UsePopupAnimationProps\n : Exclude<keyof UsePopoverProps \| keyof UsePopupAnimationProps, M>\n >,\n ]\n}\n"],"mappings":"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"}

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

@@ -8,10 +8,10 @@ import { CheckIcon } from "../icon/icons/check-icon.js";
 import { ChevronDownIcon } from "../icon/icons/chevron-down-icon.js";
 import { XIcon } from "../icon/icons/x-icon.js";
 import "../icon/index.js";
+import { PopoverContent, PopoverRoot, PopoverTrigger, usePopoverStyleProps } from "../popover/popover.js";
+import "../popover/index.js";
 import { useGroupItemProps } from "../group/use-group.js";
 import "../group/index.js";
-import { PopoverContent, PopoverRoot, PopoverTrigger } from "../popover/popover.js";
-import "../popover/index.js";
 import { useInputBorder } from "../input/use-input-border.js";
 import { useInputPropsContext } from "../input/input.js";
 import { InputElement } from "../input/input-element.js";
@@ -32,6 +32,7 @@ const { ComponentContext, PropsContext: SelectPropsContext, useComponentContext,
 */
 const SelectRoot = withProvider((props) => {
 	const [groupItemProps, { className, css, colorScheme, animationScheme = "block-start", children, clearable, clearIcon = /* @__PURE__ */ jsx(XIcon, {}), duration, errorBorderColor, focusBorderColor, icon, items: itemsProp, contentProps, elementProps, groupProps, iconProps, optionProps, placeholderProps, rootProps, ...rest }] = useGroupItemProps(props);
+	const popoverStyleProps = usePopoverStyleProps(rest);
 	const { descendants, includePlaceholder, items: computedItems, max, placeholder, value, getClearIconProps, getContentProps, getFieldProps, getIconProps, getInputProps, getRootProps, getSeparatorProps, popoverProps, onActiveDescendant, onChange, onClose, onSelect } = useSelect({
 		items: useMemo(() => {
 			if (itemsProp) return itemsProp;
@@ -41,7 +42,8 @@ const SelectRoot = withProvider((props) => {
 				Option: SelectOption
 			});
 		}, [itemsProp, children]),
-		...rest
+		...rest,
+		...popoverStyleProps
 	});
 	const mergedPopoverProps = useMemo(() => ({
 		animationScheme,