@yamada-ui/popover 2.0.0-next-20240812015934 → 2.0.0-next-20240820160301
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-EF56AL6N.mjs → chunk-5MQZCOH5.mjs} +2 -2
- package/dist/{chunk-4BHPX45P.mjs → chunk-AJG4XV6G.mjs} +8 -6
- package/dist/chunk-AJG4XV6G.mjs.map +1 -0
- package/dist/{chunk-OUBEJ45U.mjs → chunk-CVILYMMU.mjs} +2 -2
- package/dist/{chunk-A5Y46AUE.mjs → chunk-DUQKTY5Y.mjs} +2 -2
- package/dist/{chunk-FPNOTNA7.mjs → chunk-JKVDCAGZ.mjs} +1 -1
- package/dist/chunk-JKVDCAGZ.mjs.map +1 -0
- package/dist/{chunk-WSYA7UR4.mjs → chunk-NM3XSU3R.mjs} +2 -2
- package/dist/{chunk-43XKPPQE.mjs → chunk-S34RXSKT.mjs} +2 -2
- package/dist/{chunk-4LIDKCOL.mjs → chunk-YRIDESZ6.mjs} +2 -2
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +8 -8
- package/dist/popover-anchor.js.map +1 -1
- package/dist/popover-anchor.mjs +2 -2
- package/dist/popover-body.js.map +1 -1
- package/dist/popover-body.mjs +2 -2
- package/dist/popover-close-button.js.map +1 -1
- package/dist/popover-close-button.mjs +2 -2
- package/dist/popover-content.d.mts +10 -4
- package/dist/popover-content.d.ts +10 -4
- package/dist/popover-content.js +3 -1
- package/dist/popover-content.js.map +1 -1
- package/dist/popover-content.mjs +8 -8
- package/dist/popover-footer.js.map +1 -1
- package/dist/popover-footer.mjs +2 -2
- package/dist/popover-header.js.map +1 -1
- package/dist/popover-header.mjs +2 -2
- package/dist/popover-trigger.js.map +1 -1
- package/dist/popover-trigger.mjs +2 -2
- package/dist/popover.d.mts +2 -2
- package/dist/popover.d.ts +2 -2
- package/dist/popover.js.map +1 -1
- package/dist/popover.mjs +1 -1
- package/package.json +10 -10
- package/dist/chunk-4BHPX45P.mjs.map +0 -1
- package/dist/chunk-FPNOTNA7.mjs.map +0 -1
- /package/dist/{chunk-EF56AL6N.mjs.map → chunk-5MQZCOH5.mjs.map} +0 -0
- /package/dist/{chunk-OUBEJ45U.mjs.map → chunk-CVILYMMU.mjs.map} +0 -0
- /package/dist/{chunk-A5Y46AUE.mjs.map → chunk-DUQKTY5Y.mjs.map} +0 -0
- /package/dist/{chunk-WSYA7UR4.mjs.map → chunk-NM3XSU3R.mjs.map} +0 -0
- /package/dist/{chunk-43XKPPQE.mjs.map → chunk-S34RXSKT.mjs.map} +0 -0
- /package/dist/{chunk-4LIDKCOL.mjs.map → chunk-YRIDESZ6.mjs.map} +0 -0
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/popover-close-button.tsx","../src/popover.tsx"],"sourcesContent":["import type { CloseButtonProps } from \"@yamada-ui/close-button\"\nimport { CloseButton } from \"@yamada-ui/close-button\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport { usePopover } from \"./popover\"\n\nexport type PopoverCloseButtonProps = CloseButtonProps\n\nexport const PopoverCloseButton = forwardRef<PopoverCloseButtonProps, \"button\">(\n ({ onClick, ...rest }, ref) => {\n const { styles, onClose } = usePopover()\n\n const css: CSSUIObject = {\n ...styles.closeButton,\n }\n\n return (\n <CloseButton\n ref={ref}\n className={cx(\"ui-popover__close-button\")}\n __css={css}\n onClick={handlerAll(onClick, (ev) => {\n ev.stopPropagation()\n onClose?.()\n })}\n size=\"sm\"\n {...rest}\n />\n )\n },\n)\n","import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type {\n MotionUIPropGetter,\n MotionProps,\n MotionTransitionProperties,\n} from \"@yamada-ui/motion\"\nimport { useAnimationObserver } from \"@yamada-ui/use-animation\"\nimport type { LazyMode } from \"@yamada-ui/use-disclosure\"\nimport { useDisclosure, useLazyDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n useFocusOnHide,\n useFocusOnShow,\n useFocusOnPointerDown,\n} from \"@yamada-ui/use-focus\"\nimport type { UsePopperProps } from \"@yamada-ui/use-popper\"\nimport { usePopper, popperProperties } from \"@yamada-ui/use-popper\"\nimport type { DOMAttributes, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n getEventRelatedTarget,\n handlerAll,\n isContains,\n mergeRefs,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { FC, PropsWithChildren, RefAttributes, RefObject } from \"react\"\nimport { useCallback, useEffect, useRef } from \"react\"\n\nexport const popoverProperties: any[] = [\n ...popperProperties,\n \"isOpen\",\n \"defaultIsOpen\",\n \"onOpen\",\n \"onClose\",\n \"initialFocusRef\",\n \"restoreFocus\",\n \"autoFocus\",\n \"closeOnBlur\",\n \"closeOnEsc\",\n \"closeOnButton\",\n \"trigger\",\n \"openDelay\",\n \"closeDelay\",\n \"isLazy\",\n \"lazyBehavior\",\n \"animation\",\n \"duration\",\n]\n\ntype PopoverOptions = {\n /**\n * If `true`, the popover will be opened.\n */\n isOpen?: boolean\n /**\n * If `true`, the popover will be initially opened.\n */\n defaultIsOpen?: boolean\n /**\n * Callback fired when the popover opens.\n */\n onOpen?: () => void\n /**\n * Callback fired when the popover closes.\n */\n onClose?: () => void\n /**\n * The `ref` of the element that should receive focus when the popover opens.\n */\n initialFocusRef?: RefObject<{ focus(): void }>\n /**\n * The `ref` of the element related to the popover.\n * This is used during the `onBlur` event.\n */\n relatedRef?: RefObject<HTMLElement>\n /**\n * If `true`, focus will be returned to the element that triggers the popover when it closes.\n *\n * @default true\n */\n restoreFocus?: boolean\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`, 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 close when you hit the `Esc` key.\n *\n * @default true\n */\n closeOnEsc?: boolean\n /**\n * If `true`, display the popover close button.\n *\n * @default true\n */\n closeOnButton?: boolean\n /**\n * The interaction that triggers the popover.\n *\n * - `hover`: means the popover will open when you hover with mouse or focus with keyboard on the popover trigger.\n * - `click`: means the popover will open on click or press `Enter` to `Space` on keyboard.\n *\n * @default 'click'\n */\n trigger?: \"click\" | \"hover\" | \"never\" | \"contextmenu\"\n /**\n * The number of delay time to open.\n *\n * @default 200\n */\n openDelay?: number\n /**\n * The number of delay time to close.\n *\n * @default 200\n */\n closeDelay?: number\n /**\n * If `true`, the PopoverContent rendering will be deferred until the popover is open.\n *\n * @default false\n */\n isLazy?: boolean\n /**\n * The lazy behavior of popover's content when not visible. Only works when `isLazy={true}`\n *\n * - `unmount`: The popover's content is always unmounted when not open.\n * - `keepMounted`: The popover's content initially unmounted, but stays mounted when popover is open.\n *\n * @default 'unmount'\n */\n lazyBehavior?: LazyMode\n /**\n * The animation of the popover.\n *\n * @default 'scale'\n */\n animation?: \"scale\" | \"top\" | \"right\" | \"left\" | \"bottom\" | \"none\"\n /**\n * The animation duration.\n */\n duration?: MotionTransitionProperties[\"duration\"]\n}\n\nexport type PopoverProps = ThemeProps<\"Popover\"> &\n Omit<UsePopperProps, \"enabled\"> &\n PropsWithChildren<PopoverOptions>\n\ntype PopoverContext = Pick<\n PopoverOptions,\n \"isOpen\" | \"onClose\" | \"closeOnButton\" | \"animation\" | \"duration\"\n> & {\n onAnimationComplete: () => void\n forceUpdate: () => void | undefined\n getTriggerProps: PropGetter\n getAnchorProps: PropGetter\n getPopperProps: PropGetter\n getPopoverProps: MotionUIPropGetter\n styles: Record<string, CSSUIObject>\n}\n\nconst [PopoverProvider, usePopover] = createContext<PopoverContext>({\n strict: false,\n name: \"PopoverContext\",\n})\n\nexport { usePopover }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see Docs https://yamada-ui.com/components/overlay/popover\n */\nexport const Popover: FC<PopoverProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Popover\", props)\n const {\n children,\n initialFocusRef,\n restoreFocus = true,\n autoFocus = true,\n closeOnBlur = true,\n closeOnEsc = true,\n closeOnButton = true,\n trigger = \"click\",\n openDelay = 200,\n closeDelay = 200,\n isLazy,\n lazyBehavior = \"unmount\",\n animation = \"scale\",\n duration,\n relatedRef,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { isOpen, onOpen, onClose, onToggle } = useDisclosure(mergedProps)\n\n const anchorRef = useRef<HTMLElement>(null)\n const triggerRef = useRef<HTMLElement>(null)\n const popoverRef = useRef<HTMLElement>(null)\n\n const { present, onAnimationComplete } = useAnimationObserver({\n isOpen,\n ref: popoverRef,\n })\n\n const openTimeout = useRef<number | undefined>(undefined)\n const closeTimeout = useRef<number | undefined>(undefined)\n\n const isHoveringRef = useRef(false)\n\n const hasBeenOpened = useRef(false)\n\n if (isOpen) hasBeenOpened.current = true\n\n const { referenceRef, getPopperProps, forceUpdate, transformOrigin } =\n usePopper({\n ...rest,\n enabled: isOpen,\n })\n\n useEffect(() => {\n return () => {\n if (openTimeout.current) clearTimeout(openTimeout.current)\n\n if (closeTimeout.current) clearTimeout(closeTimeout.current)\n }\n }, [])\n\n useFocusOnPointerDown({\n enabled: isOpen,\n ref: triggerRef,\n })\n\n useFocusOnHide(popoverRef, {\n focusRef: triggerRef,\n visible: isOpen,\n shouldFocus:\n restoreFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n useFocusOnShow(popoverRef, {\n focusRef: initialFocusRef,\n visible: isOpen,\n shouldFocus:\n autoFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n const shouldRenderChildren = useLazyDisclosure({\n wasSelected: hasBeenOpened.current,\n enabled: isLazy,\n mode: lazyBehavior,\n isSelected: present,\n })\n\n const getPopoverProps: MotionUIPropGetter = useCallback(\n (props = {}, ref = null) => {\n const popoverProps: MotionProps<\"div\"> & RefAttributes<any> = {\n ...props,\n style: {\n ...props.style,\n transformOrigin,\n },\n ref: mergeRefs(popoverRef, ref),\n children: shouldRenderChildren ? props.children : null,\n tabIndex: -1,\n onKeyDown: handlerAll(props.onKeyDown, (ev) => {\n if (closeOnEsc && ev.key === \"Escape\") onClose()\n }),\n onBlur: handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const targetIsPopover = isContains(popoverRef.current, relatedTarget)\n const targetIsTrigger = isContains(triggerRef.current, relatedTarget)\n const targetIsRelated = relatedRef?.current\n ? isContains(relatedRef.current, relatedTarget)\n : false\n\n const isValidBlur =\n !targetIsPopover && !targetIsTrigger && !targetIsRelated\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n }),\n }\n\n if (trigger === \"hover\") {\n popoverProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n })\n\n popoverProps.onMouseLeave = handlerAll(props.onMouseLeave, (ev) => {\n if (ev.nativeEvent.relatedTarget === null) return\n\n isHoveringRef.current = false\n\n if (closeOnBlur) setTimeout(onClose, closeDelay)\n })\n }\n\n return popoverProps\n },\n [\n closeDelay,\n closeOnBlur,\n closeOnEsc,\n isOpen,\n onClose,\n shouldRenderChildren,\n transformOrigin,\n trigger,\n relatedRef,\n ],\n )\n\n const maybeReferenceRef = useCallback(\n (node: Element) => {\n if (anchorRef.current == null) referenceRef(node)\n },\n [referenceRef],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const triggerProps: RefAttributes<any> & DOMAttributes = {\n ...props,\n ref: mergeRefs(triggerRef, ref, maybeReferenceRef),\n }\n\n if (trigger === \"click\") {\n triggerProps.onClick = handlerAll(props.onClick, onToggle)\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"contextmenu\") {\n triggerProps.onContextMenu = handlerAll(props.onContextMenu, (ev) => {\n ev.preventDefault()\n onOpen()\n })\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"hover\") {\n triggerProps.onFocus = handlerAll(props.onFocus, () => {\n if (openTimeout.current === undefined) onOpen()\n })\n\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n\n triggerProps.onKeyDown = handlerAll(props.onKeyDown, (ev) => {\n if (ev.key === \"Escape\") onClose()\n })\n\n triggerProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n openTimeout.current = window.setTimeout(onOpen, openDelay)\n })\n\n triggerProps.onMouseLeave = handlerAll(props.onMouseLeave, () => {\n isHoveringRef.current = false\n\n if (openTimeout.current) {\n clearTimeout(openTimeout.current)\n openTimeout.current = undefined\n }\n\n closeTimeout.current = window.setTimeout(() => {\n if (!isHoveringRef.current) onClose()\n }, closeDelay)\n })\n }\n\n return triggerProps\n },\n [\n closeDelay,\n closeOnBlur,\n isOpen,\n maybeReferenceRef,\n onClose,\n onOpen,\n onToggle,\n openDelay,\n trigger,\n ],\n )\n\n const getAnchorProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n return {\n ...props,\n ref: mergeRefs(ref, anchorRef, referenceRef),\n }\n },\n [anchorRef, referenceRef],\n )\n\n return (\n <PopoverProvider\n value={{\n isOpen,\n onClose,\n closeOnButton,\n onAnimationComplete,\n forceUpdate,\n getTriggerProps,\n getAnchorProps,\n getPopperProps,\n getPopoverProps,\n animation,\n duration,\n styles,\n }}\n >\n {runIfFunc(children, {\n isOpen,\n onClose,\n forceUpdate,\n })}\n </PopoverProvider>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,0BAA4B;AAE5B,IAAAA,eAA2B;AAC3B,IAAAC,gBAA+B;;;ACH/B,kBAAuD;AAMvD,2BAAqC;AAErC,4BAAiD;AACjD,uBAIO;AAEP,wBAA4C;AAE5C,mBAOO;AAEP,mBAA+C;AAyY3C;AAvYG,IAAM,oBAA2B;AAAA,EACtC,GAAG;AAAA,EACH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA2HA,IAAM,CAAC,iBAAiB,UAAU,QAAI,4BAA8B;AAAA,EAClE,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;;;AD5JK,IAAAC,sBAAA;AATC,IAAM,yBAAqB;AAAA,EAChC,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,QAAQ;AAC7B,UAAM,EAAE,QAAQ,QAAQ,IAAI,WAAW;AAEvC,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,0BAA0B;AAAA,QACxC,OAAO;AAAA,QACP,aAAS,0BAAW,SAAS,CAAC,OAAO;AACnC,aAAG,gBAAgB;AACnB;AAAA,QACF,CAAC;AAAA,QACD,MAAK;AAAA,QACJ,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["import_core","import_utils","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/popover-close-button.tsx","../src/popover.tsx"],"sourcesContent":["import type { CloseButtonProps } from \"@yamada-ui/close-button\"\nimport { CloseButton } from \"@yamada-ui/close-button\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport { usePopover } from \"./popover\"\n\nexport type PopoverCloseButtonProps = CloseButtonProps\n\nexport const PopoverCloseButton = forwardRef<PopoverCloseButtonProps, \"button\">(\n ({ onClick, ...rest }, ref) => {\n const { styles, onClose } = usePopover()\n\n const css: CSSUIObject = {\n ...styles.closeButton,\n }\n\n return (\n <CloseButton\n ref={ref}\n className={cx(\"ui-popover__close-button\")}\n __css={css}\n onClick={handlerAll(onClick, (ev) => {\n ev.stopPropagation()\n onClose?.()\n })}\n size=\"sm\"\n {...rest}\n />\n )\n },\n)\n","import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type {\n MotionUIPropGetter,\n MotionProps,\n MotionTransitionProps,\n} from \"@yamada-ui/motion\"\nimport { useAnimationObserver } from \"@yamada-ui/use-animation\"\nimport type { LazyMode } from \"@yamada-ui/use-disclosure\"\nimport { useDisclosure, useLazyDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n useFocusOnHide,\n useFocusOnShow,\n useFocusOnPointerDown,\n} from \"@yamada-ui/use-focus\"\nimport type { UsePopperProps } from \"@yamada-ui/use-popper\"\nimport { usePopper, popperProperties } from \"@yamada-ui/use-popper\"\nimport type { DOMAttributes, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n getEventRelatedTarget,\n handlerAll,\n isContains,\n mergeRefs,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { FC, PropsWithChildren, RefAttributes, RefObject } from \"react\"\nimport { useCallback, useEffect, useRef } from \"react\"\n\nexport const popoverProperties: any[] = [\n ...popperProperties,\n \"isOpen\",\n \"defaultIsOpen\",\n \"onOpen\",\n \"onClose\",\n \"initialFocusRef\",\n \"restoreFocus\",\n \"autoFocus\",\n \"closeOnBlur\",\n \"closeOnEsc\",\n \"closeOnButton\",\n \"trigger\",\n \"openDelay\",\n \"closeDelay\",\n \"isLazy\",\n \"lazyBehavior\",\n \"animation\",\n \"duration\",\n]\n\ntype PopoverOptions = {\n /**\n * If `true`, the popover will be opened.\n */\n isOpen?: boolean\n /**\n * If `true`, the popover will be initially opened.\n */\n defaultIsOpen?: boolean\n /**\n * Callback fired when the popover opens.\n */\n onOpen?: () => void\n /**\n * Callback fired when the popover closes.\n */\n onClose?: () => void\n /**\n * The `ref` of the element that should receive focus when the popover opens.\n */\n initialFocusRef?: RefObject<{ focus(): void }>\n /**\n * The `ref` of the element related to the popover.\n * This is used during the `onBlur` event.\n */\n relatedRef?: RefObject<HTMLElement>\n /**\n * If `true`, focus will be returned to the element that triggers the popover when it closes.\n *\n * @default true\n */\n restoreFocus?: boolean\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`, 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 close when you hit the `Esc` key.\n *\n * @default true\n */\n closeOnEsc?: boolean\n /**\n * If `true`, display the popover close button.\n *\n * @default true\n */\n closeOnButton?: boolean\n /**\n * The interaction that triggers the popover.\n *\n * - `hover`: means the popover will open when you hover with mouse or focus with keyboard on the popover trigger.\n * - `click`: means the popover will open on click or press `Enter` to `Space` on keyboard.\n *\n * @default 'click'\n */\n trigger?: \"click\" | \"hover\" | \"never\" | \"contextmenu\"\n /**\n * The number of delay time to open.\n *\n * @default 200\n */\n openDelay?: number\n /**\n * The number of delay time to close.\n *\n * @default 200\n */\n closeDelay?: number\n /**\n * If `true`, the PopoverContent rendering will be deferred until the popover is open.\n *\n * @default false\n */\n isLazy?: boolean\n /**\n * The lazy behavior of popover's content when not visible. Only works when `isLazy={true}`\n *\n * - `unmount`: The popover's content is always unmounted when not open.\n * - `keepMounted`: The popover's content initially unmounted, but stays mounted when popover is open.\n *\n * @default 'unmount'\n */\n lazyBehavior?: LazyMode\n /**\n * The animation of the popover.\n *\n * @default 'scale'\n */\n animation?: \"scale\" | \"top\" | \"right\" | \"left\" | \"bottom\" | \"none\"\n /**\n * The animation duration.\n */\n duration?: MotionTransitionProps[\"duration\"]\n}\n\nexport type PopoverProps = ThemeProps<\"Popover\"> &\n Omit<UsePopperProps, \"enabled\"> &\n PropsWithChildren<PopoverOptions>\n\ntype PopoverContext = Pick<\n PopoverOptions,\n \"isOpen\" | \"onClose\" | \"closeOnButton\" | \"animation\" | \"duration\"\n> & {\n onAnimationComplete: () => void\n forceUpdate: () => void | undefined\n getTriggerProps: PropGetter\n getAnchorProps: PropGetter\n getPopperProps: PropGetter\n getPopoverProps: MotionUIPropGetter\n styles: Record<string, CSSUIObject>\n}\n\nconst [PopoverProvider, usePopover] = createContext<PopoverContext>({\n strict: false,\n name: \"PopoverContext\",\n})\n\nexport { usePopover }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see Docs https://yamada-ui.com/components/overlay/popover\n */\nexport const Popover: FC<PopoverProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Popover\", props)\n const {\n children,\n initialFocusRef,\n restoreFocus = true,\n autoFocus = true,\n closeOnBlur = true,\n closeOnEsc = true,\n closeOnButton = true,\n trigger = \"click\",\n openDelay = 200,\n closeDelay = 200,\n isLazy,\n lazyBehavior = \"unmount\",\n animation = \"scale\",\n duration,\n relatedRef,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { isOpen, onOpen, onClose, onToggle } = useDisclosure(mergedProps)\n\n const anchorRef = useRef<HTMLElement>(null)\n const triggerRef = useRef<HTMLElement>(null)\n const popoverRef = useRef<HTMLElement>(null)\n\n const { present, onAnimationComplete } = useAnimationObserver({\n isOpen,\n ref: popoverRef,\n })\n\n const openTimeout = useRef<number | undefined>(undefined)\n const closeTimeout = useRef<number | undefined>(undefined)\n\n const isHoveringRef = useRef(false)\n\n const hasBeenOpened = useRef(false)\n\n if (isOpen) hasBeenOpened.current = true\n\n const { referenceRef, getPopperProps, forceUpdate, transformOrigin } =\n usePopper({\n ...rest,\n enabled: isOpen,\n })\n\n useEffect(() => {\n return () => {\n if (openTimeout.current) clearTimeout(openTimeout.current)\n\n if (closeTimeout.current) clearTimeout(closeTimeout.current)\n }\n }, [])\n\n useFocusOnPointerDown({\n enabled: isOpen,\n ref: triggerRef,\n })\n\n useFocusOnHide(popoverRef, {\n focusRef: triggerRef,\n visible: isOpen,\n shouldFocus:\n restoreFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n useFocusOnShow(popoverRef, {\n focusRef: initialFocusRef,\n visible: isOpen,\n shouldFocus:\n autoFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n const shouldRenderChildren = useLazyDisclosure({\n wasSelected: hasBeenOpened.current,\n enabled: isLazy,\n mode: lazyBehavior,\n isSelected: present,\n })\n\n const getPopoverProps: MotionUIPropGetter = useCallback(\n (props = {}, ref = null) => {\n const popoverProps: MotionProps<\"div\"> & RefAttributes<any> = {\n ...props,\n style: {\n ...props.style,\n transformOrigin,\n },\n ref: mergeRefs(popoverRef, ref),\n children: shouldRenderChildren ? props.children : null,\n tabIndex: -1,\n onKeyDown: handlerAll(props.onKeyDown, (ev) => {\n if (closeOnEsc && ev.key === \"Escape\") onClose()\n }),\n onBlur: handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const targetIsPopover = isContains(popoverRef.current, relatedTarget)\n const targetIsTrigger = isContains(triggerRef.current, relatedTarget)\n const targetIsRelated = relatedRef?.current\n ? isContains(relatedRef.current, relatedTarget)\n : false\n\n const isValidBlur =\n !targetIsPopover && !targetIsTrigger && !targetIsRelated\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n }),\n }\n\n if (trigger === \"hover\") {\n popoverProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n })\n\n popoverProps.onMouseLeave = handlerAll(props.onMouseLeave, (ev) => {\n if (ev.nativeEvent.relatedTarget === null) return\n\n isHoveringRef.current = false\n\n if (closeOnBlur) setTimeout(onClose, closeDelay)\n })\n }\n\n return popoverProps\n },\n [\n closeDelay,\n closeOnBlur,\n closeOnEsc,\n isOpen,\n onClose,\n shouldRenderChildren,\n transformOrigin,\n trigger,\n relatedRef,\n ],\n )\n\n const maybeReferenceRef = useCallback(\n (node: Element) => {\n if (anchorRef.current == null) referenceRef(node)\n },\n [referenceRef],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const triggerProps: RefAttributes<any> & DOMAttributes = {\n ...props,\n ref: mergeRefs(triggerRef, ref, maybeReferenceRef),\n }\n\n if (trigger === \"click\") {\n triggerProps.onClick = handlerAll(props.onClick, onToggle)\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"contextmenu\") {\n triggerProps.onContextMenu = handlerAll(props.onContextMenu, (ev) => {\n ev.preventDefault()\n onOpen()\n })\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"hover\") {\n triggerProps.onFocus = handlerAll(props.onFocus, () => {\n if (openTimeout.current === undefined) onOpen()\n })\n\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n\n triggerProps.onKeyDown = handlerAll(props.onKeyDown, (ev) => {\n if (ev.key === \"Escape\") onClose()\n })\n\n triggerProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n openTimeout.current = window.setTimeout(onOpen, openDelay)\n })\n\n triggerProps.onMouseLeave = handlerAll(props.onMouseLeave, () => {\n isHoveringRef.current = false\n\n if (openTimeout.current) {\n clearTimeout(openTimeout.current)\n openTimeout.current = undefined\n }\n\n closeTimeout.current = window.setTimeout(() => {\n if (!isHoveringRef.current) onClose()\n }, closeDelay)\n })\n }\n\n return triggerProps\n },\n [\n closeDelay,\n closeOnBlur,\n isOpen,\n maybeReferenceRef,\n onClose,\n onOpen,\n onToggle,\n openDelay,\n trigger,\n ],\n )\n\n const getAnchorProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n return {\n ...props,\n ref: mergeRefs(ref, anchorRef, referenceRef),\n }\n },\n [anchorRef, referenceRef],\n )\n\n return (\n <PopoverProvider\n value={{\n isOpen,\n onClose,\n closeOnButton,\n onAnimationComplete,\n forceUpdate,\n getTriggerProps,\n getAnchorProps,\n getPopperProps,\n getPopoverProps,\n animation,\n duration,\n styles,\n }}\n >\n {runIfFunc(children, {\n isOpen,\n onClose,\n forceUpdate,\n })}\n </PopoverProvider>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,0BAA4B;AAE5B,IAAAA,eAA2B;AAC3B,IAAAC,gBAA+B;;;ACH/B,kBAAuD;AAMvD,2BAAqC;AAErC,4BAAiD;AACjD,uBAIO;AAEP,wBAA4C;AAE5C,mBAOO;AAEP,mBAA+C;AAyY3C;AAvYG,IAAM,oBAA2B;AAAA,EACtC,GAAG;AAAA,EACH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA2HA,IAAM,CAAC,iBAAiB,UAAU,QAAI,4BAA8B;AAAA,EAClE,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;;;AD5JK,IAAAC,sBAAA;AATC,IAAM,yBAAqB;AAAA,EAChC,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,QAAQ;AAC7B,UAAM,EAAE,QAAQ,QAAQ,IAAI,WAAW;AAEvC,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,0BAA0B;AAAA,QACxC,OAAO;AAAA,QACP,aAAS,0BAAW,SAAS,CAAC,OAAO;AACnC,aAAG,gBAAgB;AACnB;AAAA,QACF,CAAC;AAAA,QACD,MAAK;AAAA,QACJ,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["import_core","import_utils","import_jsx_runtime"]}
|
@@ -1,7 +1,13 @@
|
|
1
|
-
import * as
|
2
|
-
import {
|
1
|
+
import * as _yamada_ui_motion from '@yamada-ui/motion';
|
2
|
+
import { MotionPropsWithoutChildren } from '@yamada-ui/motion';
|
3
|
+
import { HTMLUIProps } from '@yamada-ui/core';
|
3
4
|
|
4
|
-
type PopoverContentProps =
|
5
|
-
|
5
|
+
type PopoverContentProps = MotionPropsWithoutChildren<"section"> & {
|
6
|
+
/**
|
7
|
+
* The props of the container element.
|
8
|
+
*/
|
9
|
+
containerProps?: Omit<HTMLUIProps<"div">, "children">;
|
10
|
+
};
|
11
|
+
declare const PopoverContent: _yamada_ui_motion.MotionComponent<"section", PopoverContentProps>;
|
6
12
|
|
7
13
|
export { PopoverContent, type PopoverContentProps };
|
@@ -1,7 +1,13 @@
|
|
1
|
-
import * as
|
2
|
-
import {
|
1
|
+
import * as _yamada_ui_motion from '@yamada-ui/motion';
|
2
|
+
import { MotionPropsWithoutChildren } from '@yamada-ui/motion';
|
3
|
+
import { HTMLUIProps } from '@yamada-ui/core';
|
3
4
|
|
4
|
-
type PopoverContentProps =
|
5
|
-
|
5
|
+
type PopoverContentProps = MotionPropsWithoutChildren<"section"> & {
|
6
|
+
/**
|
7
|
+
* The props of the container element.
|
8
|
+
*/
|
9
|
+
containerProps?: Omit<HTMLUIProps<"div">, "children">;
|
10
|
+
};
|
11
|
+
declare const PopoverContent: _yamada_ui_motion.MotionComponent<"section", PopoverContentProps>;
|
6
12
|
|
7
13
|
export { PopoverContent, type PopoverContentProps };
|
package/dist/popover-content.js
CHANGED
@@ -128,9 +128,10 @@ var getPopoverContentProps = (animation = "scale", duration) => {
|
|
128
128
|
};
|
129
129
|
}
|
130
130
|
};
|
131
|
-
var PopoverContent = (0,
|
131
|
+
var PopoverContent = (0, import_motion.motionForwardRef)(
|
132
132
|
({
|
133
133
|
className,
|
134
|
+
containerProps,
|
134
135
|
children,
|
135
136
|
w,
|
136
137
|
width,
|
@@ -189,6 +190,7 @@ var PopoverContent = (0, import_core3.forwardRef)(
|
|
189
190
|
width,
|
190
191
|
minWidth,
|
191
192
|
zIndex,
|
193
|
+
...containerProps,
|
192
194
|
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
193
195
|
import_motion.Motion,
|
194
196
|
{
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/popover-content.tsx","../src/popover.tsx","../src/popover-close-button.tsx"],"sourcesContent":["import type { CSSUIObject, CSSUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { Motion } from \"@yamada-ui/motion\"\nimport { scaleFadeProps, slideFadeProps } from \"@yamada-ui/transitions\"\nimport { cx, findChildren, funcAll, getValidChildren } from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { usePopover } from \"./popover\"\nimport type { PopoverProps } from \".\"\nimport { PopoverCloseButton } from \".\"\n\nexport type PopoverContentProps = Omit<MotionProps<\"section\">, \"children\">\n\nconst getPopoverContentProps = (\n animation: PopoverProps[\"animation\"] = \"scale\",\n duration?: PopoverProps[\"duration\"],\n) => {\n const custom = {\n reverse: true,\n duration,\n enter: { visibility: \"visible\" },\n transitionEnd: { exit: { visibility: \"hidden\" } },\n }\n\n switch (animation) {\n case \"scale\":\n return {\n ...scaleFadeProps,\n custom: { ...custom, scale: 0.95 },\n }\n case \"top\":\n return {\n ...slideFadeProps,\n custom: { ...custom, offsetX: 0, offsetY: -16 },\n }\n case \"right\":\n return {\n ...slideFadeProps,\n custom: { ...custom, offsetX: 16, offsetY: 0 },\n }\n case \"left\":\n return {\n ...slideFadeProps,\n custom: { ...custom, offsetX: -16, offsetY: 0 },\n }\n case \"bottom\":\n return {\n ...slideFadeProps,\n custom: { ...custom, offsetX: 0, offsetY: 16 },\n }\n }\n}\n\nexport const PopoverContent = forwardRef<PopoverContentProps, \"section\">(\n (\n {\n className,\n children,\n w,\n width,\n minW,\n minWidth,\n z,\n zIndex,\n __css,\n ...rest\n },\n ref,\n ) => {\n const {\n isOpen,\n closeOnButton,\n getPopperProps,\n getPopoverProps,\n onAnimationComplete,\n animation,\n duration,\n styles,\n } = usePopover()\n\n const validChildren = getValidChildren(children)\n\n const [customPopoverCloseButton, ...cloneChildren] = findChildren(\n validChildren,\n PopoverCloseButton,\n )\n\n const resolvedChildren = (): ReactNode => {\n return (\n <>\n {customPopoverCloseButton ??\n (closeOnButton ? <PopoverCloseButton /> : null)}\n\n {cloneChildren}\n </>\n )\n }\n\n const popoverProps = { ...rest, children: resolvedChildren() }\n\n const css = __css ?? styles.container ?? {}\n\n const computedCSS: CSSUIObject = {\n position: \"relative\",\n w: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n outline: 0,\n ...css,\n }\n\n width ??= w\n width ??= (css?.width ?? css?.w) as CSSUIProps[\"width\"]\n minWidth ??= minW\n minWidth ??= (css?.minWidth ?? css?.minW) as CSSUIProps[\"minWidth\"]\n\n zIndex ??= z\n zIndex ??= (css?.zIndex ?? css?.z) as CSSUIProps[\"zIndex\"]\n\n return (\n <ui.div\n {...getPopperProps({\n style: { visibility: isOpen ? \"visible\" : \"hidden\" },\n })}\n className=\"ui-popover\"\n width={width}\n minWidth={minWidth}\n zIndex={zIndex}\n >\n <Motion\n as=\"section\"\n className={cx(\"ui-popover__content\", className)}\n {...(animation !== \"none\"\n ? getPopoverContentProps(animation, duration)\n : {})}\n {...getPopoverProps(popoverProps, ref)}\n initial=\"exit\"\n animate={isOpen ? \"enter\" : \"exit\"}\n exit=\"exit\"\n onAnimationComplete={funcAll(\n onAnimationComplete,\n rest.onAnimationComplete,\n )}\n __css={computedCSS}\n />\n </ui.div>\n )\n },\n)\n","import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type {\n MotionUIPropGetter,\n MotionProps,\n MotionTransitionProperties,\n} from \"@yamada-ui/motion\"\nimport { useAnimationObserver } from \"@yamada-ui/use-animation\"\nimport type { LazyMode } from \"@yamada-ui/use-disclosure\"\nimport { useDisclosure, useLazyDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n useFocusOnHide,\n useFocusOnShow,\n useFocusOnPointerDown,\n} from \"@yamada-ui/use-focus\"\nimport type { UsePopperProps } from \"@yamada-ui/use-popper\"\nimport { usePopper, popperProperties } from \"@yamada-ui/use-popper\"\nimport type { DOMAttributes, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n getEventRelatedTarget,\n handlerAll,\n isContains,\n mergeRefs,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { FC, PropsWithChildren, RefAttributes, RefObject } from \"react\"\nimport { useCallback, useEffect, useRef } from \"react\"\n\nexport const popoverProperties: any[] = [\n ...popperProperties,\n \"isOpen\",\n \"defaultIsOpen\",\n \"onOpen\",\n \"onClose\",\n \"initialFocusRef\",\n \"restoreFocus\",\n \"autoFocus\",\n \"closeOnBlur\",\n \"closeOnEsc\",\n \"closeOnButton\",\n \"trigger\",\n \"openDelay\",\n \"closeDelay\",\n \"isLazy\",\n \"lazyBehavior\",\n \"animation\",\n \"duration\",\n]\n\ntype PopoverOptions = {\n /**\n * If `true`, the popover will be opened.\n */\n isOpen?: boolean\n /**\n * If `true`, the popover will be initially opened.\n */\n defaultIsOpen?: boolean\n /**\n * Callback fired when the popover opens.\n */\n onOpen?: () => void\n /**\n * Callback fired when the popover closes.\n */\n onClose?: () => void\n /**\n * The `ref` of the element that should receive focus when the popover opens.\n */\n initialFocusRef?: RefObject<{ focus(): void }>\n /**\n * The `ref` of the element related to the popover.\n * This is used during the `onBlur` event.\n */\n relatedRef?: RefObject<HTMLElement>\n /**\n * If `true`, focus will be returned to the element that triggers the popover when it closes.\n *\n * @default true\n */\n restoreFocus?: boolean\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`, 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 close when you hit the `Esc` key.\n *\n * @default true\n */\n closeOnEsc?: boolean\n /**\n * If `true`, display the popover close button.\n *\n * @default true\n */\n closeOnButton?: boolean\n /**\n * The interaction that triggers the popover.\n *\n * - `hover`: means the popover will open when you hover with mouse or focus with keyboard on the popover trigger.\n * - `click`: means the popover will open on click or press `Enter` to `Space` on keyboard.\n *\n * @default 'click'\n */\n trigger?: \"click\" | \"hover\" | \"never\" | \"contextmenu\"\n /**\n * The number of delay time to open.\n *\n * @default 200\n */\n openDelay?: number\n /**\n * The number of delay time to close.\n *\n * @default 200\n */\n closeDelay?: number\n /**\n * If `true`, the PopoverContent rendering will be deferred until the popover is open.\n *\n * @default false\n */\n isLazy?: boolean\n /**\n * The lazy behavior of popover's content when not visible. Only works when `isLazy={true}`\n *\n * - `unmount`: The popover's content is always unmounted when not open.\n * - `keepMounted`: The popover's content initially unmounted, but stays mounted when popover is open.\n *\n * @default 'unmount'\n */\n lazyBehavior?: LazyMode\n /**\n * The animation of the popover.\n *\n * @default 'scale'\n */\n animation?: \"scale\" | \"top\" | \"right\" | \"left\" | \"bottom\" | \"none\"\n /**\n * The animation duration.\n */\n duration?: MotionTransitionProperties[\"duration\"]\n}\n\nexport type PopoverProps = ThemeProps<\"Popover\"> &\n Omit<UsePopperProps, \"enabled\"> &\n PropsWithChildren<PopoverOptions>\n\ntype PopoverContext = Pick<\n PopoverOptions,\n \"isOpen\" | \"onClose\" | \"closeOnButton\" | \"animation\" | \"duration\"\n> & {\n onAnimationComplete: () => void\n forceUpdate: () => void | undefined\n getTriggerProps: PropGetter\n getAnchorProps: PropGetter\n getPopperProps: PropGetter\n getPopoverProps: MotionUIPropGetter\n styles: Record<string, CSSUIObject>\n}\n\nconst [PopoverProvider, usePopover] = createContext<PopoverContext>({\n strict: false,\n name: \"PopoverContext\",\n})\n\nexport { usePopover }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see Docs https://yamada-ui.com/components/overlay/popover\n */\nexport const Popover: FC<PopoverProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Popover\", props)\n const {\n children,\n initialFocusRef,\n restoreFocus = true,\n autoFocus = true,\n closeOnBlur = true,\n closeOnEsc = true,\n closeOnButton = true,\n trigger = \"click\",\n openDelay = 200,\n closeDelay = 200,\n isLazy,\n lazyBehavior = \"unmount\",\n animation = \"scale\",\n duration,\n relatedRef,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { isOpen, onOpen, onClose, onToggle } = useDisclosure(mergedProps)\n\n const anchorRef = useRef<HTMLElement>(null)\n const triggerRef = useRef<HTMLElement>(null)\n const popoverRef = useRef<HTMLElement>(null)\n\n const { present, onAnimationComplete } = useAnimationObserver({\n isOpen,\n ref: popoverRef,\n })\n\n const openTimeout = useRef<number | undefined>(undefined)\n const closeTimeout = useRef<number | undefined>(undefined)\n\n const isHoveringRef = useRef(false)\n\n const hasBeenOpened = useRef(false)\n\n if (isOpen) hasBeenOpened.current = true\n\n const { referenceRef, getPopperProps, forceUpdate, transformOrigin } =\n usePopper({\n ...rest,\n enabled: isOpen,\n })\n\n useEffect(() => {\n return () => {\n if (openTimeout.current) clearTimeout(openTimeout.current)\n\n if (closeTimeout.current) clearTimeout(closeTimeout.current)\n }\n }, [])\n\n useFocusOnPointerDown({\n enabled: isOpen,\n ref: triggerRef,\n })\n\n useFocusOnHide(popoverRef, {\n focusRef: triggerRef,\n visible: isOpen,\n shouldFocus:\n restoreFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n useFocusOnShow(popoverRef, {\n focusRef: initialFocusRef,\n visible: isOpen,\n shouldFocus:\n autoFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n const shouldRenderChildren = useLazyDisclosure({\n wasSelected: hasBeenOpened.current,\n enabled: isLazy,\n mode: lazyBehavior,\n isSelected: present,\n })\n\n const getPopoverProps: MotionUIPropGetter = useCallback(\n (props = {}, ref = null) => {\n const popoverProps: MotionProps<\"div\"> & RefAttributes<any> = {\n ...props,\n style: {\n ...props.style,\n transformOrigin,\n },\n ref: mergeRefs(popoverRef, ref),\n children: shouldRenderChildren ? props.children : null,\n tabIndex: -1,\n onKeyDown: handlerAll(props.onKeyDown, (ev) => {\n if (closeOnEsc && ev.key === \"Escape\") onClose()\n }),\n onBlur: handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const targetIsPopover = isContains(popoverRef.current, relatedTarget)\n const targetIsTrigger = isContains(triggerRef.current, relatedTarget)\n const targetIsRelated = relatedRef?.current\n ? isContains(relatedRef.current, relatedTarget)\n : false\n\n const isValidBlur =\n !targetIsPopover && !targetIsTrigger && !targetIsRelated\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n }),\n }\n\n if (trigger === \"hover\") {\n popoverProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n })\n\n popoverProps.onMouseLeave = handlerAll(props.onMouseLeave, (ev) => {\n if (ev.nativeEvent.relatedTarget === null) return\n\n isHoveringRef.current = false\n\n if (closeOnBlur) setTimeout(onClose, closeDelay)\n })\n }\n\n return popoverProps\n },\n [\n closeDelay,\n closeOnBlur,\n closeOnEsc,\n isOpen,\n onClose,\n shouldRenderChildren,\n transformOrigin,\n trigger,\n relatedRef,\n ],\n )\n\n const maybeReferenceRef = useCallback(\n (node: Element) => {\n if (anchorRef.current == null) referenceRef(node)\n },\n [referenceRef],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const triggerProps: RefAttributes<any> & DOMAttributes = {\n ...props,\n ref: mergeRefs(triggerRef, ref, maybeReferenceRef),\n }\n\n if (trigger === \"click\") {\n triggerProps.onClick = handlerAll(props.onClick, onToggle)\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"contextmenu\") {\n triggerProps.onContextMenu = handlerAll(props.onContextMenu, (ev) => {\n ev.preventDefault()\n onOpen()\n })\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"hover\") {\n triggerProps.onFocus = handlerAll(props.onFocus, () => {\n if (openTimeout.current === undefined) onOpen()\n })\n\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n\n triggerProps.onKeyDown = handlerAll(props.onKeyDown, (ev) => {\n if (ev.key === \"Escape\") onClose()\n })\n\n triggerProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n openTimeout.current = window.setTimeout(onOpen, openDelay)\n })\n\n triggerProps.onMouseLeave = handlerAll(props.onMouseLeave, () => {\n isHoveringRef.current = false\n\n if (openTimeout.current) {\n clearTimeout(openTimeout.current)\n openTimeout.current = undefined\n }\n\n closeTimeout.current = window.setTimeout(() => {\n if (!isHoveringRef.current) onClose()\n }, closeDelay)\n })\n }\n\n return triggerProps\n },\n [\n closeDelay,\n closeOnBlur,\n isOpen,\n maybeReferenceRef,\n onClose,\n onOpen,\n onToggle,\n openDelay,\n trigger,\n ],\n )\n\n const getAnchorProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n return {\n ...props,\n ref: mergeRefs(ref, anchorRef, referenceRef),\n }\n },\n [anchorRef, referenceRef],\n )\n\n return (\n <PopoverProvider\n value={{\n isOpen,\n onClose,\n closeOnButton,\n onAnimationComplete,\n forceUpdate,\n getTriggerProps,\n getAnchorProps,\n getPopperProps,\n getPopoverProps,\n animation,\n duration,\n styles,\n }}\n >\n {runIfFunc(children, {\n isOpen,\n onClose,\n forceUpdate,\n })}\n </PopoverProvider>\n )\n}\n","import type { CloseButtonProps } from \"@yamada-ui/close-button\"\nimport { CloseButton } from \"@yamada-ui/close-button\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport { usePopover } from \"./popover\"\n\nexport type PopoverCloseButtonProps = CloseButtonProps\n\nexport const PopoverCloseButton = forwardRef<PopoverCloseButtonProps, \"button\">(\n ({ onClick, ...rest }, ref) => {\n const { styles, onClose } = usePopover()\n\n const css: CSSUIObject = {\n ...styles.closeButton,\n }\n\n return (\n <CloseButton\n ref={ref}\n className={cx(\"ui-popover__close-button\")}\n __css={css}\n onClick={handlerAll(onClick, (ev) => {\n ev.stopPropagation()\n onClose?.()\n })}\n size=\"sm\"\n {...rest}\n />\n )\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,eAA+B;AAE/B,oBAAuB;AACvB,yBAA+C;AAC/C,IAAAC,gBAA4D;;;ACJ5D,kBAAuD;AAMvD,2BAAqC;AAErC,4BAAiD;AACjD,uBAIO;AAEP,wBAA4C;AAE5C,mBAOO;AAEP,mBAA+C;AAyY3C;AAvYG,IAAM,oBAA2B;AAAA,EACtC,GAAG;AAAA,EACH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA2HA,IAAM,CAAC,iBAAiB,UAAU,QAAI,4BAA8B;AAAA,EAClE,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;;;AC7KD,0BAA4B;AAE5B,IAAAC,eAA2B;AAC3B,IAAAC,gBAA+B;AAczB,IAAAC,sBAAA;AATC,IAAM,yBAAqB;AAAA,EAChC,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,QAAQ;AAC7B,UAAM,EAAE,QAAQ,QAAQ,IAAI,WAAW;AAEvC,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,0BAA0B;AAAA,QACxC,OAAO;AAAA,QACP,aAAS,0BAAW,SAAS,CAAC,OAAO;AACnC,aAAG,gBAAgB;AACnB;AAAA,QACF,CAAC;AAAA,QACD,MAAK;AAAA,QACJ,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;;;AF0DQ,IAAAC,sBAAA;AA5ER,IAAM,yBAAyB,CAC7B,YAAuC,SACvC,aACG;AACH,QAAM,SAAS;AAAA,IACb,SAAS;AAAA,IACT;AAAA,IACA,OAAO,EAAE,YAAY,UAAU;AAAA,IAC/B,eAAe,EAAE,MAAM,EAAE,YAAY,SAAS,EAAE;AAAA,EAClD;AAEA,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,GAAG,QAAQ,OAAO,KAAK;AAAA,MACnC;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,GAAG,QAAQ,SAAS,GAAG,SAAS,IAAI;AAAA,MAChD;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,GAAG,QAAQ,SAAS,IAAI,SAAS,EAAE;AAAA,MAC/C;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,GAAG,QAAQ,SAAS,KAAK,SAAS,EAAE;AAAA,MAChD;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,GAAG,QAAQ,SAAS,GAAG,SAAS,GAAG;AAAA,MAC/C;AAAA,EACJ;AACF;AAEO,IAAM,qBAAiB;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AApEP;AAqEI,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,WAAW;AAEf,UAAM,oBAAgB,gCAAiB,QAAQ;AAE/C,UAAM,CAAC,0BAA0B,GAAG,aAAa,QAAI;AAAA,MACnD;AAAA,MACA;AAAA,IACF;AAEA,UAAM,mBAAmB,MAAiB;AACxC,aACE,8EACG;AAAA,sEACE,gBAAgB,6CAAC,sBAAmB,IAAK;AAAA,QAE3C;AAAA,SACH;AAAA,IAEJ;AAEA,UAAM,eAAe,EAAE,GAAG,MAAM,UAAU,iBAAiB,EAAE;AAE7D,UAAM,OAAM,6BAAS,OAAO,cAAhB,YAA6B,CAAC;AAE1C,UAAM,cAA2B;AAAA,MAC/B,UAAU;AAAA,MACV,GAAG;AAAA,MACH,SAAS;AAAA,MACT,eAAe;AAAA,MACf,SAAS;AAAA,MACT,GAAG;AAAA,IACL;AAEA,oCAAU;AACV,qCAAW,gCAAK,UAAL,YAAc,2BAAK;AAC9B,6CAAa;AACb,8CAAc,gCAAK,aAAL,YAAiB,2BAAK;AAEpC,uCAAW;AACX,wCAAY,gCAAK,WAAL,YAAe,2BAAK;AAEhC,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACE,GAAG,eAAe;AAAA,UACjB,OAAO,EAAE,YAAY,SAAS,YAAY,SAAS;AAAA,QACrD,CAAC;AAAA,QACD,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,eAAW,kBAAG,uBAAuB,SAAS;AAAA,YAC7C,GAAI,cAAc,SACf,uBAAuB,WAAW,QAAQ,IAC1C,CAAC;AAAA,YACJ,GAAG,gBAAgB,cAAc,GAAG;AAAA,YACrC,SAAQ;AAAA,YACR,SAAS,SAAS,UAAU;AAAA,YAC5B,MAAK;AAAA,YACL,yBAAqB;AAAA,cACnB;AAAA,cACA,KAAK;AAAA,YACP;AAAA,YACA,OAAO;AAAA;AAAA,QACT;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":["import_core","import_utils","import_core","import_utils","import_jsx_runtime","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/popover-content.tsx","../src/popover.tsx","../src/popover-close-button.tsx"],"sourcesContent":["import type { CSSUIObject, CSSUIProps, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport { Motion, motionForwardRef } from \"@yamada-ui/motion\"\nimport type { MotionPropsWithoutChildren } from \"@yamada-ui/motion\"\nimport { scaleFadeProps, slideFadeProps } from \"@yamada-ui/transitions\"\nimport { cx, findChildren, funcAll, getValidChildren } from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { usePopover } from \"./popover\"\nimport type { PopoverProps } from \".\"\nimport { PopoverCloseButton } from \".\"\n\nexport type PopoverContentProps = MotionPropsWithoutChildren<\"section\"> & {\n /**\n * The props of the container element.\n */\n containerProps?: Omit<HTMLUIProps<\"div\">, \"children\">\n}\n\nconst getPopoverContentProps = (\n animation: PopoverProps[\"animation\"] = \"scale\",\n duration?: PopoverProps[\"duration\"],\n) => {\n const custom = {\n reverse: true,\n duration,\n enter: { visibility: \"visible\" },\n transitionEnd: { exit: { visibility: \"hidden\" } },\n }\n\n switch (animation) {\n case \"scale\":\n return {\n ...scaleFadeProps,\n custom: { ...custom, scale: 0.95 },\n }\n case \"top\":\n return {\n ...slideFadeProps,\n custom: { ...custom, offsetX: 0, offsetY: -16 },\n }\n case \"right\":\n return {\n ...slideFadeProps,\n custom: { ...custom, offsetX: 16, offsetY: 0 },\n }\n case \"left\":\n return {\n ...slideFadeProps,\n custom: { ...custom, offsetX: -16, offsetY: 0 },\n }\n case \"bottom\":\n return {\n ...slideFadeProps,\n custom: { ...custom, offsetX: 0, offsetY: 16 },\n }\n }\n}\n\nexport const PopoverContent = motionForwardRef<PopoverContentProps, \"section\">(\n (\n {\n className,\n containerProps,\n children,\n w,\n width,\n minW,\n minWidth,\n z,\n zIndex,\n __css,\n ...rest\n },\n ref,\n ) => {\n const {\n isOpen,\n closeOnButton,\n getPopperProps,\n getPopoverProps,\n onAnimationComplete,\n animation,\n duration,\n styles,\n } = usePopover()\n\n const validChildren = getValidChildren(children)\n\n const [customPopoverCloseButton, ...cloneChildren] = findChildren(\n validChildren,\n PopoverCloseButton,\n )\n\n const resolvedChildren = (): ReactNode => {\n return (\n <>\n {customPopoverCloseButton ??\n (closeOnButton ? <PopoverCloseButton /> : null)}\n\n {cloneChildren}\n </>\n )\n }\n\n const popoverProps = { ...rest, children: resolvedChildren() }\n\n const css = __css ?? styles.container ?? {}\n\n const computedCSS: CSSUIObject = {\n position: \"relative\",\n w: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n outline: 0,\n ...css,\n }\n\n width ??= w\n width ??= (css?.width ?? css?.w) as CSSUIProps[\"width\"]\n minWidth ??= minW\n minWidth ??= (css?.minWidth ?? css?.minW) as CSSUIProps[\"minWidth\"]\n\n zIndex ??= z\n zIndex ??= (css?.zIndex ?? css?.z) as CSSUIProps[\"zIndex\"]\n\n return (\n <ui.div\n {...getPopperProps({\n style: { visibility: isOpen ? \"visible\" : \"hidden\" },\n })}\n className=\"ui-popover\"\n width={width}\n minWidth={minWidth}\n zIndex={zIndex}\n {...containerProps}\n >\n <Motion\n as=\"section\"\n className={cx(\"ui-popover__content\", className)}\n {...(animation !== \"none\"\n ? getPopoverContentProps(animation, duration)\n : {})}\n {...getPopoverProps(popoverProps, ref)}\n initial=\"exit\"\n animate={isOpen ? \"enter\" : \"exit\"}\n exit=\"exit\"\n onAnimationComplete={funcAll(\n onAnimationComplete,\n rest.onAnimationComplete,\n )}\n __css={computedCSS}\n />\n </ui.div>\n )\n },\n)\n","import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type {\n MotionUIPropGetter,\n MotionProps,\n MotionTransitionProps,\n} from \"@yamada-ui/motion\"\nimport { useAnimationObserver } from \"@yamada-ui/use-animation\"\nimport type { LazyMode } from \"@yamada-ui/use-disclosure\"\nimport { useDisclosure, useLazyDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n useFocusOnHide,\n useFocusOnShow,\n useFocusOnPointerDown,\n} from \"@yamada-ui/use-focus\"\nimport type { UsePopperProps } from \"@yamada-ui/use-popper\"\nimport { usePopper, popperProperties } from \"@yamada-ui/use-popper\"\nimport type { DOMAttributes, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n getEventRelatedTarget,\n handlerAll,\n isContains,\n mergeRefs,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { FC, PropsWithChildren, RefAttributes, RefObject } from \"react\"\nimport { useCallback, useEffect, useRef } from \"react\"\n\nexport const popoverProperties: any[] = [\n ...popperProperties,\n \"isOpen\",\n \"defaultIsOpen\",\n \"onOpen\",\n \"onClose\",\n \"initialFocusRef\",\n \"restoreFocus\",\n \"autoFocus\",\n \"closeOnBlur\",\n \"closeOnEsc\",\n \"closeOnButton\",\n \"trigger\",\n \"openDelay\",\n \"closeDelay\",\n \"isLazy\",\n \"lazyBehavior\",\n \"animation\",\n \"duration\",\n]\n\ntype PopoverOptions = {\n /**\n * If `true`, the popover will be opened.\n */\n isOpen?: boolean\n /**\n * If `true`, the popover will be initially opened.\n */\n defaultIsOpen?: boolean\n /**\n * Callback fired when the popover opens.\n */\n onOpen?: () => void\n /**\n * Callback fired when the popover closes.\n */\n onClose?: () => void\n /**\n * The `ref` of the element that should receive focus when the popover opens.\n */\n initialFocusRef?: RefObject<{ focus(): void }>\n /**\n * The `ref` of the element related to the popover.\n * This is used during the `onBlur` event.\n */\n relatedRef?: RefObject<HTMLElement>\n /**\n * If `true`, focus will be returned to the element that triggers the popover when it closes.\n *\n * @default true\n */\n restoreFocus?: boolean\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`, 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 close when you hit the `Esc` key.\n *\n * @default true\n */\n closeOnEsc?: boolean\n /**\n * If `true`, display the popover close button.\n *\n * @default true\n */\n closeOnButton?: boolean\n /**\n * The interaction that triggers the popover.\n *\n * - `hover`: means the popover will open when you hover with mouse or focus with keyboard on the popover trigger.\n * - `click`: means the popover will open on click or press `Enter` to `Space` on keyboard.\n *\n * @default 'click'\n */\n trigger?: \"click\" | \"hover\" | \"never\" | \"contextmenu\"\n /**\n * The number of delay time to open.\n *\n * @default 200\n */\n openDelay?: number\n /**\n * The number of delay time to close.\n *\n * @default 200\n */\n closeDelay?: number\n /**\n * If `true`, the PopoverContent rendering will be deferred until the popover is open.\n *\n * @default false\n */\n isLazy?: boolean\n /**\n * The lazy behavior of popover's content when not visible. Only works when `isLazy={true}`\n *\n * - `unmount`: The popover's content is always unmounted when not open.\n * - `keepMounted`: The popover's content initially unmounted, but stays mounted when popover is open.\n *\n * @default 'unmount'\n */\n lazyBehavior?: LazyMode\n /**\n * The animation of the popover.\n *\n * @default 'scale'\n */\n animation?: \"scale\" | \"top\" | \"right\" | \"left\" | \"bottom\" | \"none\"\n /**\n * The animation duration.\n */\n duration?: MotionTransitionProps[\"duration\"]\n}\n\nexport type PopoverProps = ThemeProps<\"Popover\"> &\n Omit<UsePopperProps, \"enabled\"> &\n PropsWithChildren<PopoverOptions>\n\ntype PopoverContext = Pick<\n PopoverOptions,\n \"isOpen\" | \"onClose\" | \"closeOnButton\" | \"animation\" | \"duration\"\n> & {\n onAnimationComplete: () => void\n forceUpdate: () => void | undefined\n getTriggerProps: PropGetter\n getAnchorProps: PropGetter\n getPopperProps: PropGetter\n getPopoverProps: MotionUIPropGetter\n styles: Record<string, CSSUIObject>\n}\n\nconst [PopoverProvider, usePopover] = createContext<PopoverContext>({\n strict: false,\n name: \"PopoverContext\",\n})\n\nexport { usePopover }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see Docs https://yamada-ui.com/components/overlay/popover\n */\nexport const Popover: FC<PopoverProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Popover\", props)\n const {\n children,\n initialFocusRef,\n restoreFocus = true,\n autoFocus = true,\n closeOnBlur = true,\n closeOnEsc = true,\n closeOnButton = true,\n trigger = \"click\",\n openDelay = 200,\n closeDelay = 200,\n isLazy,\n lazyBehavior = \"unmount\",\n animation = \"scale\",\n duration,\n relatedRef,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { isOpen, onOpen, onClose, onToggle } = useDisclosure(mergedProps)\n\n const anchorRef = useRef<HTMLElement>(null)\n const triggerRef = useRef<HTMLElement>(null)\n const popoverRef = useRef<HTMLElement>(null)\n\n const { present, onAnimationComplete } = useAnimationObserver({\n isOpen,\n ref: popoverRef,\n })\n\n const openTimeout = useRef<number | undefined>(undefined)\n const closeTimeout = useRef<number | undefined>(undefined)\n\n const isHoveringRef = useRef(false)\n\n const hasBeenOpened = useRef(false)\n\n if (isOpen) hasBeenOpened.current = true\n\n const { referenceRef, getPopperProps, forceUpdate, transformOrigin } =\n usePopper({\n ...rest,\n enabled: isOpen,\n })\n\n useEffect(() => {\n return () => {\n if (openTimeout.current) clearTimeout(openTimeout.current)\n\n if (closeTimeout.current) clearTimeout(closeTimeout.current)\n }\n }, [])\n\n useFocusOnPointerDown({\n enabled: isOpen,\n ref: triggerRef,\n })\n\n useFocusOnHide(popoverRef, {\n focusRef: triggerRef,\n visible: isOpen,\n shouldFocus:\n restoreFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n useFocusOnShow(popoverRef, {\n focusRef: initialFocusRef,\n visible: isOpen,\n shouldFocus:\n autoFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n const shouldRenderChildren = useLazyDisclosure({\n wasSelected: hasBeenOpened.current,\n enabled: isLazy,\n mode: lazyBehavior,\n isSelected: present,\n })\n\n const getPopoverProps: MotionUIPropGetter = useCallback(\n (props = {}, ref = null) => {\n const popoverProps: MotionProps<\"div\"> & RefAttributes<any> = {\n ...props,\n style: {\n ...props.style,\n transformOrigin,\n },\n ref: mergeRefs(popoverRef, ref),\n children: shouldRenderChildren ? props.children : null,\n tabIndex: -1,\n onKeyDown: handlerAll(props.onKeyDown, (ev) => {\n if (closeOnEsc && ev.key === \"Escape\") onClose()\n }),\n onBlur: handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const targetIsPopover = isContains(popoverRef.current, relatedTarget)\n const targetIsTrigger = isContains(triggerRef.current, relatedTarget)\n const targetIsRelated = relatedRef?.current\n ? isContains(relatedRef.current, relatedTarget)\n : false\n\n const isValidBlur =\n !targetIsPopover && !targetIsTrigger && !targetIsRelated\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n }),\n }\n\n if (trigger === \"hover\") {\n popoverProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n })\n\n popoverProps.onMouseLeave = handlerAll(props.onMouseLeave, (ev) => {\n if (ev.nativeEvent.relatedTarget === null) return\n\n isHoveringRef.current = false\n\n if (closeOnBlur) setTimeout(onClose, closeDelay)\n })\n }\n\n return popoverProps\n },\n [\n closeDelay,\n closeOnBlur,\n closeOnEsc,\n isOpen,\n onClose,\n shouldRenderChildren,\n transformOrigin,\n trigger,\n relatedRef,\n ],\n )\n\n const maybeReferenceRef = useCallback(\n (node: Element) => {\n if (anchorRef.current == null) referenceRef(node)\n },\n [referenceRef],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const triggerProps: RefAttributes<any> & DOMAttributes = {\n ...props,\n ref: mergeRefs(triggerRef, ref, maybeReferenceRef),\n }\n\n if (trigger === \"click\") {\n triggerProps.onClick = handlerAll(props.onClick, onToggle)\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"contextmenu\") {\n triggerProps.onContextMenu = handlerAll(props.onContextMenu, (ev) => {\n ev.preventDefault()\n onOpen()\n })\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"hover\") {\n triggerProps.onFocus = handlerAll(props.onFocus, () => {\n if (openTimeout.current === undefined) onOpen()\n })\n\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n\n triggerProps.onKeyDown = handlerAll(props.onKeyDown, (ev) => {\n if (ev.key === \"Escape\") onClose()\n })\n\n triggerProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n openTimeout.current = window.setTimeout(onOpen, openDelay)\n })\n\n triggerProps.onMouseLeave = handlerAll(props.onMouseLeave, () => {\n isHoveringRef.current = false\n\n if (openTimeout.current) {\n clearTimeout(openTimeout.current)\n openTimeout.current = undefined\n }\n\n closeTimeout.current = window.setTimeout(() => {\n if (!isHoveringRef.current) onClose()\n }, closeDelay)\n })\n }\n\n return triggerProps\n },\n [\n closeDelay,\n closeOnBlur,\n isOpen,\n maybeReferenceRef,\n onClose,\n onOpen,\n onToggle,\n openDelay,\n trigger,\n ],\n )\n\n const getAnchorProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n return {\n ...props,\n ref: mergeRefs(ref, anchorRef, referenceRef),\n }\n },\n [anchorRef, referenceRef],\n )\n\n return (\n <PopoverProvider\n value={{\n isOpen,\n onClose,\n closeOnButton,\n onAnimationComplete,\n forceUpdate,\n getTriggerProps,\n getAnchorProps,\n getPopperProps,\n getPopoverProps,\n animation,\n duration,\n styles,\n }}\n >\n {runIfFunc(children, {\n isOpen,\n onClose,\n forceUpdate,\n })}\n </PopoverProvider>\n )\n}\n","import type { CloseButtonProps } from \"@yamada-ui/close-button\"\nimport { CloseButton } from \"@yamada-ui/close-button\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport { usePopover } from \"./popover\"\n\nexport type PopoverCloseButtonProps = CloseButtonProps\n\nexport const PopoverCloseButton = forwardRef<PopoverCloseButtonProps, \"button\">(\n ({ onClick, ...rest }, ref) => {\n const { styles, onClose } = usePopover()\n\n const css: CSSUIObject = {\n ...styles.closeButton,\n }\n\n return (\n <CloseButton\n ref={ref}\n className={cx(\"ui-popover__close-button\")}\n __css={css}\n onClick={handlerAll(onClick, (ev) => {\n ev.stopPropagation()\n onClose?.()\n })}\n size=\"sm\"\n {...rest}\n />\n )\n },\n)\n"],"mappings":"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","names":["import_core","import_utils","import_core","import_utils","import_jsx_runtime","import_jsx_runtime"]}
|
package/dist/popover-content.mjs
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
PopoverContent
|
4
|
-
} from "./chunk-
|
5
|
-
import "./chunk-
|
6
|
-
import "./chunk-
|
7
|
-
import "./chunk-
|
8
|
-
import "./chunk-
|
9
|
-
import "./chunk-
|
10
|
-
import "./chunk-
|
11
|
-
import "./chunk-
|
4
|
+
} from "./chunk-AJG4XV6G.mjs";
|
5
|
+
import "./chunk-S34RXSKT.mjs";
|
6
|
+
import "./chunk-DUQKTY5Y.mjs";
|
7
|
+
import "./chunk-YRIDESZ6.mjs";
|
8
|
+
import "./chunk-CVILYMMU.mjs";
|
9
|
+
import "./chunk-NM3XSU3R.mjs";
|
10
|
+
import "./chunk-5MQZCOH5.mjs";
|
11
|
+
import "./chunk-JKVDCAGZ.mjs";
|
12
12
|
export {
|
13
13
|
PopoverContent
|
14
14
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/popover-footer.tsx","../src/popover.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { usePopover } from \"./popover\"\n\nexport type PopoverFooterProps = HTMLUIProps<\"footer\">\n\nexport const PopoverFooter = forwardRef<PopoverFooterProps, \"footer\">(\n ({ className, ...rest }, ref) => {\n const { styles } = usePopover()\n\n const css: CSSUIObject = {\n ...styles.footer,\n }\n\n return (\n <ui.footer\n ref={ref}\n className={cx(\"ui-popover__footer\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n","import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type {\n MotionUIPropGetter,\n MotionProps,\n MotionTransitionProperties,\n} from \"@yamada-ui/motion\"\nimport { useAnimationObserver } from \"@yamada-ui/use-animation\"\nimport type { LazyMode } from \"@yamada-ui/use-disclosure\"\nimport { useDisclosure, useLazyDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n useFocusOnHide,\n useFocusOnShow,\n useFocusOnPointerDown,\n} from \"@yamada-ui/use-focus\"\nimport type { UsePopperProps } from \"@yamada-ui/use-popper\"\nimport { usePopper, popperProperties } from \"@yamada-ui/use-popper\"\nimport type { DOMAttributes, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n getEventRelatedTarget,\n handlerAll,\n isContains,\n mergeRefs,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { FC, PropsWithChildren, RefAttributes, RefObject } from \"react\"\nimport { useCallback, useEffect, useRef } from \"react\"\n\nexport const popoverProperties: any[] = [\n ...popperProperties,\n \"isOpen\",\n \"defaultIsOpen\",\n \"onOpen\",\n \"onClose\",\n \"initialFocusRef\",\n \"restoreFocus\",\n \"autoFocus\",\n \"closeOnBlur\",\n \"closeOnEsc\",\n \"closeOnButton\",\n \"trigger\",\n \"openDelay\",\n \"closeDelay\",\n \"isLazy\",\n \"lazyBehavior\",\n \"animation\",\n \"duration\",\n]\n\ntype PopoverOptions = {\n /**\n * If `true`, the popover will be opened.\n */\n isOpen?: boolean\n /**\n * If `true`, the popover will be initially opened.\n */\n defaultIsOpen?: boolean\n /**\n * Callback fired when the popover opens.\n */\n onOpen?: () => void\n /**\n * Callback fired when the popover closes.\n */\n onClose?: () => void\n /**\n * The `ref` of the element that should receive focus when the popover opens.\n */\n initialFocusRef?: RefObject<{ focus(): void }>\n /**\n * The `ref` of the element related to the popover.\n * This is used during the `onBlur` event.\n */\n relatedRef?: RefObject<HTMLElement>\n /**\n * If `true`, focus will be returned to the element that triggers the popover when it closes.\n *\n * @default true\n */\n restoreFocus?: boolean\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`, 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 close when you hit the `Esc` key.\n *\n * @default true\n */\n closeOnEsc?: boolean\n /**\n * If `true`, display the popover close button.\n *\n * @default true\n */\n closeOnButton?: boolean\n /**\n * The interaction that triggers the popover.\n *\n * - `hover`: means the popover will open when you hover with mouse or focus with keyboard on the popover trigger.\n * - `click`: means the popover will open on click or press `Enter` to `Space` on keyboard.\n *\n * @default 'click'\n */\n trigger?: \"click\" | \"hover\" | \"never\" | \"contextmenu\"\n /**\n * The number of delay time to open.\n *\n * @default 200\n */\n openDelay?: number\n /**\n * The number of delay time to close.\n *\n * @default 200\n */\n closeDelay?: number\n /**\n * If `true`, the PopoverContent rendering will be deferred until the popover is open.\n *\n * @default false\n */\n isLazy?: boolean\n /**\n * The lazy behavior of popover's content when not visible. Only works when `isLazy={true}`\n *\n * - `unmount`: The popover's content is always unmounted when not open.\n * - `keepMounted`: The popover's content initially unmounted, but stays mounted when popover is open.\n *\n * @default 'unmount'\n */\n lazyBehavior?: LazyMode\n /**\n * The animation of the popover.\n *\n * @default 'scale'\n */\n animation?: \"scale\" | \"top\" | \"right\" | \"left\" | \"bottom\" | \"none\"\n /**\n * The animation duration.\n */\n duration?: MotionTransitionProperties[\"duration\"]\n}\n\nexport type PopoverProps = ThemeProps<\"Popover\"> &\n Omit<UsePopperProps, \"enabled\"> &\n PropsWithChildren<PopoverOptions>\n\ntype PopoverContext = Pick<\n PopoverOptions,\n \"isOpen\" | \"onClose\" | \"closeOnButton\" | \"animation\" | \"duration\"\n> & {\n onAnimationComplete: () => void\n forceUpdate: () => void | undefined\n getTriggerProps: PropGetter\n getAnchorProps: PropGetter\n getPopperProps: PropGetter\n getPopoverProps: MotionUIPropGetter\n styles: Record<string, CSSUIObject>\n}\n\nconst [PopoverProvider, usePopover] = createContext<PopoverContext>({\n strict: false,\n name: \"PopoverContext\",\n})\n\nexport { usePopover }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see Docs https://yamada-ui.com/components/overlay/popover\n */\nexport const Popover: FC<PopoverProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Popover\", props)\n const {\n children,\n initialFocusRef,\n restoreFocus = true,\n autoFocus = true,\n closeOnBlur = true,\n closeOnEsc = true,\n closeOnButton = true,\n trigger = \"click\",\n openDelay = 200,\n closeDelay = 200,\n isLazy,\n lazyBehavior = \"unmount\",\n animation = \"scale\",\n duration,\n relatedRef,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { isOpen, onOpen, onClose, onToggle } = useDisclosure(mergedProps)\n\n const anchorRef = useRef<HTMLElement>(null)\n const triggerRef = useRef<HTMLElement>(null)\n const popoverRef = useRef<HTMLElement>(null)\n\n const { present, onAnimationComplete } = useAnimationObserver({\n isOpen,\n ref: popoverRef,\n })\n\n const openTimeout = useRef<number | undefined>(undefined)\n const closeTimeout = useRef<number | undefined>(undefined)\n\n const isHoveringRef = useRef(false)\n\n const hasBeenOpened = useRef(false)\n\n if (isOpen) hasBeenOpened.current = true\n\n const { referenceRef, getPopperProps, forceUpdate, transformOrigin } =\n usePopper({\n ...rest,\n enabled: isOpen,\n })\n\n useEffect(() => {\n return () => {\n if (openTimeout.current) clearTimeout(openTimeout.current)\n\n if (closeTimeout.current) clearTimeout(closeTimeout.current)\n }\n }, [])\n\n useFocusOnPointerDown({\n enabled: isOpen,\n ref: triggerRef,\n })\n\n useFocusOnHide(popoverRef, {\n focusRef: triggerRef,\n visible: isOpen,\n shouldFocus:\n restoreFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n useFocusOnShow(popoverRef, {\n focusRef: initialFocusRef,\n visible: isOpen,\n shouldFocus:\n autoFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n const shouldRenderChildren = useLazyDisclosure({\n wasSelected: hasBeenOpened.current,\n enabled: isLazy,\n mode: lazyBehavior,\n isSelected: present,\n })\n\n const getPopoverProps: MotionUIPropGetter = useCallback(\n (props = {}, ref = null) => {\n const popoverProps: MotionProps<\"div\"> & RefAttributes<any> = {\n ...props,\n style: {\n ...props.style,\n transformOrigin,\n },\n ref: mergeRefs(popoverRef, ref),\n children: shouldRenderChildren ? props.children : null,\n tabIndex: -1,\n onKeyDown: handlerAll(props.onKeyDown, (ev) => {\n if (closeOnEsc && ev.key === \"Escape\") onClose()\n }),\n onBlur: handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const targetIsPopover = isContains(popoverRef.current, relatedTarget)\n const targetIsTrigger = isContains(triggerRef.current, relatedTarget)\n const targetIsRelated = relatedRef?.current\n ? isContains(relatedRef.current, relatedTarget)\n : false\n\n const isValidBlur =\n !targetIsPopover && !targetIsTrigger && !targetIsRelated\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n }),\n }\n\n if (trigger === \"hover\") {\n popoverProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n })\n\n popoverProps.onMouseLeave = handlerAll(props.onMouseLeave, (ev) => {\n if (ev.nativeEvent.relatedTarget === null) return\n\n isHoveringRef.current = false\n\n if (closeOnBlur) setTimeout(onClose, closeDelay)\n })\n }\n\n return popoverProps\n },\n [\n closeDelay,\n closeOnBlur,\n closeOnEsc,\n isOpen,\n onClose,\n shouldRenderChildren,\n transformOrigin,\n trigger,\n relatedRef,\n ],\n )\n\n const maybeReferenceRef = useCallback(\n (node: Element) => {\n if (anchorRef.current == null) referenceRef(node)\n },\n [referenceRef],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const triggerProps: RefAttributes<any> & DOMAttributes = {\n ...props,\n ref: mergeRefs(triggerRef, ref, maybeReferenceRef),\n }\n\n if (trigger === \"click\") {\n triggerProps.onClick = handlerAll(props.onClick, onToggle)\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"contextmenu\") {\n triggerProps.onContextMenu = handlerAll(props.onContextMenu, (ev) => {\n ev.preventDefault()\n onOpen()\n })\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"hover\") {\n triggerProps.onFocus = handlerAll(props.onFocus, () => {\n if (openTimeout.current === undefined) onOpen()\n })\n\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n\n triggerProps.onKeyDown = handlerAll(props.onKeyDown, (ev) => {\n if (ev.key === \"Escape\") onClose()\n })\n\n triggerProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n openTimeout.current = window.setTimeout(onOpen, openDelay)\n })\n\n triggerProps.onMouseLeave = handlerAll(props.onMouseLeave, () => {\n isHoveringRef.current = false\n\n if (openTimeout.current) {\n clearTimeout(openTimeout.current)\n openTimeout.current = undefined\n }\n\n closeTimeout.current = window.setTimeout(() => {\n if (!isHoveringRef.current) onClose()\n }, closeDelay)\n })\n }\n\n return triggerProps\n },\n [\n closeDelay,\n closeOnBlur,\n isOpen,\n maybeReferenceRef,\n onClose,\n onOpen,\n onToggle,\n openDelay,\n trigger,\n ],\n )\n\n const getAnchorProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n return {\n ...props,\n ref: mergeRefs(ref, anchorRef, referenceRef),\n }\n },\n [anchorRef, referenceRef],\n )\n\n return (\n <PopoverProvider\n value={{\n isOpen,\n onClose,\n closeOnButton,\n onAnimationComplete,\n forceUpdate,\n getTriggerProps,\n getAnchorProps,\n getPopperProps,\n getPopoverProps,\n animation,\n duration,\n styles,\n }}\n >\n {runIfFunc(children, {\n isOpen,\n onClose,\n forceUpdate,\n })}\n </PopoverProvider>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,eAA+B;AAC/B,IAAAC,gBAAmB;;;ACDnB,kBAAuD;AAMvD,2BAAqC;AAErC,4BAAiD;AACjD,uBAIO;AAEP,wBAA4C;AAE5C,mBAOO;AAEP,mBAA+C;AAyY3C;AAvYG,IAAM,oBAA2B;AAAA,EACtC,GAAG;AAAA,EACH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA2HA,IAAM,CAAC,iBAAiB,UAAU,QAAI,4BAA8B;AAAA,EAClE,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;;;AD9JK,IAAAC,sBAAA;AATC,IAAM,oBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,WAAW;AAE9B,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,sBAAsB,SAAS;AAAA,QAC7C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["import_core","import_utils","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/popover-footer.tsx","../src/popover.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { usePopover } from \"./popover\"\n\nexport type PopoverFooterProps = HTMLUIProps<\"footer\">\n\nexport const PopoverFooter = forwardRef<PopoverFooterProps, \"footer\">(\n ({ className, ...rest }, ref) => {\n const { styles } = usePopover()\n\n const css: CSSUIObject = {\n ...styles.footer,\n }\n\n return (\n <ui.footer\n ref={ref}\n className={cx(\"ui-popover__footer\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n","import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type {\n MotionUIPropGetter,\n MotionProps,\n MotionTransitionProps,\n} from \"@yamada-ui/motion\"\nimport { useAnimationObserver } from \"@yamada-ui/use-animation\"\nimport type { LazyMode } from \"@yamada-ui/use-disclosure\"\nimport { useDisclosure, useLazyDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n useFocusOnHide,\n useFocusOnShow,\n useFocusOnPointerDown,\n} from \"@yamada-ui/use-focus\"\nimport type { UsePopperProps } from \"@yamada-ui/use-popper\"\nimport { usePopper, popperProperties } from \"@yamada-ui/use-popper\"\nimport type { DOMAttributes, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n getEventRelatedTarget,\n handlerAll,\n isContains,\n mergeRefs,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { FC, PropsWithChildren, RefAttributes, RefObject } from \"react\"\nimport { useCallback, useEffect, useRef } from \"react\"\n\nexport const popoverProperties: any[] = [\n ...popperProperties,\n \"isOpen\",\n \"defaultIsOpen\",\n \"onOpen\",\n \"onClose\",\n \"initialFocusRef\",\n \"restoreFocus\",\n \"autoFocus\",\n \"closeOnBlur\",\n \"closeOnEsc\",\n \"closeOnButton\",\n \"trigger\",\n \"openDelay\",\n \"closeDelay\",\n \"isLazy\",\n \"lazyBehavior\",\n \"animation\",\n \"duration\",\n]\n\ntype PopoverOptions = {\n /**\n * If `true`, the popover will be opened.\n */\n isOpen?: boolean\n /**\n * If `true`, the popover will be initially opened.\n */\n defaultIsOpen?: boolean\n /**\n * Callback fired when the popover opens.\n */\n onOpen?: () => void\n /**\n * Callback fired when the popover closes.\n */\n onClose?: () => void\n /**\n * The `ref` of the element that should receive focus when the popover opens.\n */\n initialFocusRef?: RefObject<{ focus(): void }>\n /**\n * The `ref` of the element related to the popover.\n * This is used during the `onBlur` event.\n */\n relatedRef?: RefObject<HTMLElement>\n /**\n * If `true`, focus will be returned to the element that triggers the popover when it closes.\n *\n * @default true\n */\n restoreFocus?: boolean\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`, 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 close when you hit the `Esc` key.\n *\n * @default true\n */\n closeOnEsc?: boolean\n /**\n * If `true`, display the popover close button.\n *\n * @default true\n */\n closeOnButton?: boolean\n /**\n * The interaction that triggers the popover.\n *\n * - `hover`: means the popover will open when you hover with mouse or focus with keyboard on the popover trigger.\n * - `click`: means the popover will open on click or press `Enter` to `Space` on keyboard.\n *\n * @default 'click'\n */\n trigger?: \"click\" | \"hover\" | \"never\" | \"contextmenu\"\n /**\n * The number of delay time to open.\n *\n * @default 200\n */\n openDelay?: number\n /**\n * The number of delay time to close.\n *\n * @default 200\n */\n closeDelay?: number\n /**\n * If `true`, the PopoverContent rendering will be deferred until the popover is open.\n *\n * @default false\n */\n isLazy?: boolean\n /**\n * The lazy behavior of popover's content when not visible. Only works when `isLazy={true}`\n *\n * - `unmount`: The popover's content is always unmounted when not open.\n * - `keepMounted`: The popover's content initially unmounted, but stays mounted when popover is open.\n *\n * @default 'unmount'\n */\n lazyBehavior?: LazyMode\n /**\n * The animation of the popover.\n *\n * @default 'scale'\n */\n animation?: \"scale\" | \"top\" | \"right\" | \"left\" | \"bottom\" | \"none\"\n /**\n * The animation duration.\n */\n duration?: MotionTransitionProps[\"duration\"]\n}\n\nexport type PopoverProps = ThemeProps<\"Popover\"> &\n Omit<UsePopperProps, \"enabled\"> &\n PropsWithChildren<PopoverOptions>\n\ntype PopoverContext = Pick<\n PopoverOptions,\n \"isOpen\" | \"onClose\" | \"closeOnButton\" | \"animation\" | \"duration\"\n> & {\n onAnimationComplete: () => void\n forceUpdate: () => void | undefined\n getTriggerProps: PropGetter\n getAnchorProps: PropGetter\n getPopperProps: PropGetter\n getPopoverProps: MotionUIPropGetter\n styles: Record<string, CSSUIObject>\n}\n\nconst [PopoverProvider, usePopover] = createContext<PopoverContext>({\n strict: false,\n name: \"PopoverContext\",\n})\n\nexport { usePopover }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see Docs https://yamada-ui.com/components/overlay/popover\n */\nexport const Popover: FC<PopoverProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Popover\", props)\n const {\n children,\n initialFocusRef,\n restoreFocus = true,\n autoFocus = true,\n closeOnBlur = true,\n closeOnEsc = true,\n closeOnButton = true,\n trigger = \"click\",\n openDelay = 200,\n closeDelay = 200,\n isLazy,\n lazyBehavior = \"unmount\",\n animation = \"scale\",\n duration,\n relatedRef,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { isOpen, onOpen, onClose, onToggle } = useDisclosure(mergedProps)\n\n const anchorRef = useRef<HTMLElement>(null)\n const triggerRef = useRef<HTMLElement>(null)\n const popoverRef = useRef<HTMLElement>(null)\n\n const { present, onAnimationComplete } = useAnimationObserver({\n isOpen,\n ref: popoverRef,\n })\n\n const openTimeout = useRef<number | undefined>(undefined)\n const closeTimeout = useRef<number | undefined>(undefined)\n\n const isHoveringRef = useRef(false)\n\n const hasBeenOpened = useRef(false)\n\n if (isOpen) hasBeenOpened.current = true\n\n const { referenceRef, getPopperProps, forceUpdate, transformOrigin } =\n usePopper({\n ...rest,\n enabled: isOpen,\n })\n\n useEffect(() => {\n return () => {\n if (openTimeout.current) clearTimeout(openTimeout.current)\n\n if (closeTimeout.current) clearTimeout(closeTimeout.current)\n }\n }, [])\n\n useFocusOnPointerDown({\n enabled: isOpen,\n ref: triggerRef,\n })\n\n useFocusOnHide(popoverRef, {\n focusRef: triggerRef,\n visible: isOpen,\n shouldFocus:\n restoreFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n useFocusOnShow(popoverRef, {\n focusRef: initialFocusRef,\n visible: isOpen,\n shouldFocus:\n autoFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n const shouldRenderChildren = useLazyDisclosure({\n wasSelected: hasBeenOpened.current,\n enabled: isLazy,\n mode: lazyBehavior,\n isSelected: present,\n })\n\n const getPopoverProps: MotionUIPropGetter = useCallback(\n (props = {}, ref = null) => {\n const popoverProps: MotionProps<\"div\"> & RefAttributes<any> = {\n ...props,\n style: {\n ...props.style,\n transformOrigin,\n },\n ref: mergeRefs(popoverRef, ref),\n children: shouldRenderChildren ? props.children : null,\n tabIndex: -1,\n onKeyDown: handlerAll(props.onKeyDown, (ev) => {\n if (closeOnEsc && ev.key === \"Escape\") onClose()\n }),\n onBlur: handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const targetIsPopover = isContains(popoverRef.current, relatedTarget)\n const targetIsTrigger = isContains(triggerRef.current, relatedTarget)\n const targetIsRelated = relatedRef?.current\n ? isContains(relatedRef.current, relatedTarget)\n : false\n\n const isValidBlur =\n !targetIsPopover && !targetIsTrigger && !targetIsRelated\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n }),\n }\n\n if (trigger === \"hover\") {\n popoverProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n })\n\n popoverProps.onMouseLeave = handlerAll(props.onMouseLeave, (ev) => {\n if (ev.nativeEvent.relatedTarget === null) return\n\n isHoveringRef.current = false\n\n if (closeOnBlur) setTimeout(onClose, closeDelay)\n })\n }\n\n return popoverProps\n },\n [\n closeDelay,\n closeOnBlur,\n closeOnEsc,\n isOpen,\n onClose,\n shouldRenderChildren,\n transformOrigin,\n trigger,\n relatedRef,\n ],\n )\n\n const maybeReferenceRef = useCallback(\n (node: Element) => {\n if (anchorRef.current == null) referenceRef(node)\n },\n [referenceRef],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const triggerProps: RefAttributes<any> & DOMAttributes = {\n ...props,\n ref: mergeRefs(triggerRef, ref, maybeReferenceRef),\n }\n\n if (trigger === \"click\") {\n triggerProps.onClick = handlerAll(props.onClick, onToggle)\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"contextmenu\") {\n triggerProps.onContextMenu = handlerAll(props.onContextMenu, (ev) => {\n ev.preventDefault()\n onOpen()\n })\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"hover\") {\n triggerProps.onFocus = handlerAll(props.onFocus, () => {\n if (openTimeout.current === undefined) onOpen()\n })\n\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n\n triggerProps.onKeyDown = handlerAll(props.onKeyDown, (ev) => {\n if (ev.key === \"Escape\") onClose()\n })\n\n triggerProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n openTimeout.current = window.setTimeout(onOpen, openDelay)\n })\n\n triggerProps.onMouseLeave = handlerAll(props.onMouseLeave, () => {\n isHoveringRef.current = false\n\n if (openTimeout.current) {\n clearTimeout(openTimeout.current)\n openTimeout.current = undefined\n }\n\n closeTimeout.current = window.setTimeout(() => {\n if (!isHoveringRef.current) onClose()\n }, closeDelay)\n })\n }\n\n return triggerProps\n },\n [\n closeDelay,\n closeOnBlur,\n isOpen,\n maybeReferenceRef,\n onClose,\n onOpen,\n onToggle,\n openDelay,\n trigger,\n ],\n )\n\n const getAnchorProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n return {\n ...props,\n ref: mergeRefs(ref, anchorRef, referenceRef),\n }\n },\n [anchorRef, referenceRef],\n )\n\n return (\n <PopoverProvider\n value={{\n isOpen,\n onClose,\n closeOnButton,\n onAnimationComplete,\n forceUpdate,\n getTriggerProps,\n getAnchorProps,\n getPopperProps,\n getPopoverProps,\n animation,\n duration,\n styles,\n }}\n >\n {runIfFunc(children, {\n isOpen,\n onClose,\n forceUpdate,\n })}\n </PopoverProvider>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,eAA+B;AAC/B,IAAAC,gBAAmB;;;ACDnB,kBAAuD;AAMvD,2BAAqC;AAErC,4BAAiD;AACjD,uBAIO;AAEP,wBAA4C;AAE5C,mBAOO;AAEP,mBAA+C;AAyY3C;AAvYG,IAAM,oBAA2B;AAAA,EACtC,GAAG;AAAA,EACH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA2HA,IAAM,CAAC,iBAAiB,UAAU,QAAI,4BAA8B;AAAA,EAClE,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;;;AD9JK,IAAAC,sBAAA;AATC,IAAM,oBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,WAAW;AAE9B,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,sBAAsB,SAAS;AAAA,QAC7C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["import_core","import_utils","import_jsx_runtime"]}
|
package/dist/popover-footer.mjs
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/popover-header.tsx","../src/popover.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { usePopover } from \"./popover\"\n\nexport type PopoverHeaderProps = HTMLUIProps<\"header\">\n\nexport const PopoverHeader = forwardRef<PopoverHeaderProps, \"header\">(\n ({ className, ...rest }, ref) => {\n const { styles } = usePopover()\n\n const css: CSSUIObject = {\n ...styles.header,\n }\n\n return (\n <ui.header\n ref={ref}\n className={cx(\"ui-popover__header\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n","import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type {\n MotionUIPropGetter,\n MotionProps,\n MotionTransitionProperties,\n} from \"@yamada-ui/motion\"\nimport { useAnimationObserver } from \"@yamada-ui/use-animation\"\nimport type { LazyMode } from \"@yamada-ui/use-disclosure\"\nimport { useDisclosure, useLazyDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n useFocusOnHide,\n useFocusOnShow,\n useFocusOnPointerDown,\n} from \"@yamada-ui/use-focus\"\nimport type { UsePopperProps } from \"@yamada-ui/use-popper\"\nimport { usePopper, popperProperties } from \"@yamada-ui/use-popper\"\nimport type { DOMAttributes, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n getEventRelatedTarget,\n handlerAll,\n isContains,\n mergeRefs,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { FC, PropsWithChildren, RefAttributes, RefObject } from \"react\"\nimport { useCallback, useEffect, useRef } from \"react\"\n\nexport const popoverProperties: any[] = [\n ...popperProperties,\n \"isOpen\",\n \"defaultIsOpen\",\n \"onOpen\",\n \"onClose\",\n \"initialFocusRef\",\n \"restoreFocus\",\n \"autoFocus\",\n \"closeOnBlur\",\n \"closeOnEsc\",\n \"closeOnButton\",\n \"trigger\",\n \"openDelay\",\n \"closeDelay\",\n \"isLazy\",\n \"lazyBehavior\",\n \"animation\",\n \"duration\",\n]\n\ntype PopoverOptions = {\n /**\n * If `true`, the popover will be opened.\n */\n isOpen?: boolean\n /**\n * If `true`, the popover will be initially opened.\n */\n defaultIsOpen?: boolean\n /**\n * Callback fired when the popover opens.\n */\n onOpen?: () => void\n /**\n * Callback fired when the popover closes.\n */\n onClose?: () => void\n /**\n * The `ref` of the element that should receive focus when the popover opens.\n */\n initialFocusRef?: RefObject<{ focus(): void }>\n /**\n * The `ref` of the element related to the popover.\n * This is used during the `onBlur` event.\n */\n relatedRef?: RefObject<HTMLElement>\n /**\n * If `true`, focus will be returned to the element that triggers the popover when it closes.\n *\n * @default true\n */\n restoreFocus?: boolean\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`, 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 close when you hit the `Esc` key.\n *\n * @default true\n */\n closeOnEsc?: boolean\n /**\n * If `true`, display the popover close button.\n *\n * @default true\n */\n closeOnButton?: boolean\n /**\n * The interaction that triggers the popover.\n *\n * - `hover`: means the popover will open when you hover with mouse or focus with keyboard on the popover trigger.\n * - `click`: means the popover will open on click or press `Enter` to `Space` on keyboard.\n *\n * @default 'click'\n */\n trigger?: \"click\" | \"hover\" | \"never\" | \"contextmenu\"\n /**\n * The number of delay time to open.\n *\n * @default 200\n */\n openDelay?: number\n /**\n * The number of delay time to close.\n *\n * @default 200\n */\n closeDelay?: number\n /**\n * If `true`, the PopoverContent rendering will be deferred until the popover is open.\n *\n * @default false\n */\n isLazy?: boolean\n /**\n * The lazy behavior of popover's content when not visible. Only works when `isLazy={true}`\n *\n * - `unmount`: The popover's content is always unmounted when not open.\n * - `keepMounted`: The popover's content initially unmounted, but stays mounted when popover is open.\n *\n * @default 'unmount'\n */\n lazyBehavior?: LazyMode\n /**\n * The animation of the popover.\n *\n * @default 'scale'\n */\n animation?: \"scale\" | \"top\" | \"right\" | \"left\" | \"bottom\" | \"none\"\n /**\n * The animation duration.\n */\n duration?: MotionTransitionProperties[\"duration\"]\n}\n\nexport type PopoverProps = ThemeProps<\"Popover\"> &\n Omit<UsePopperProps, \"enabled\"> &\n PropsWithChildren<PopoverOptions>\n\ntype PopoverContext = Pick<\n PopoverOptions,\n \"isOpen\" | \"onClose\" | \"closeOnButton\" | \"animation\" | \"duration\"\n> & {\n onAnimationComplete: () => void\n forceUpdate: () => void | undefined\n getTriggerProps: PropGetter\n getAnchorProps: PropGetter\n getPopperProps: PropGetter\n getPopoverProps: MotionUIPropGetter\n styles: Record<string, CSSUIObject>\n}\n\nconst [PopoverProvider, usePopover] = createContext<PopoverContext>({\n strict: false,\n name: \"PopoverContext\",\n})\n\nexport { usePopover }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see Docs https://yamada-ui.com/components/overlay/popover\n */\nexport const Popover: FC<PopoverProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Popover\", props)\n const {\n children,\n initialFocusRef,\n restoreFocus = true,\n autoFocus = true,\n closeOnBlur = true,\n closeOnEsc = true,\n closeOnButton = true,\n trigger = \"click\",\n openDelay = 200,\n closeDelay = 200,\n isLazy,\n lazyBehavior = \"unmount\",\n animation = \"scale\",\n duration,\n relatedRef,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { isOpen, onOpen, onClose, onToggle } = useDisclosure(mergedProps)\n\n const anchorRef = useRef<HTMLElement>(null)\n const triggerRef = useRef<HTMLElement>(null)\n const popoverRef = useRef<HTMLElement>(null)\n\n const { present, onAnimationComplete } = useAnimationObserver({\n isOpen,\n ref: popoverRef,\n })\n\n const openTimeout = useRef<number | undefined>(undefined)\n const closeTimeout = useRef<number | undefined>(undefined)\n\n const isHoveringRef = useRef(false)\n\n const hasBeenOpened = useRef(false)\n\n if (isOpen) hasBeenOpened.current = true\n\n const { referenceRef, getPopperProps, forceUpdate, transformOrigin } =\n usePopper({\n ...rest,\n enabled: isOpen,\n })\n\n useEffect(() => {\n return () => {\n if (openTimeout.current) clearTimeout(openTimeout.current)\n\n if (closeTimeout.current) clearTimeout(closeTimeout.current)\n }\n }, [])\n\n useFocusOnPointerDown({\n enabled: isOpen,\n ref: triggerRef,\n })\n\n useFocusOnHide(popoverRef, {\n focusRef: triggerRef,\n visible: isOpen,\n shouldFocus:\n restoreFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n useFocusOnShow(popoverRef, {\n focusRef: initialFocusRef,\n visible: isOpen,\n shouldFocus:\n autoFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n const shouldRenderChildren = useLazyDisclosure({\n wasSelected: hasBeenOpened.current,\n enabled: isLazy,\n mode: lazyBehavior,\n isSelected: present,\n })\n\n const getPopoverProps: MotionUIPropGetter = useCallback(\n (props = {}, ref = null) => {\n const popoverProps: MotionProps<\"div\"> & RefAttributes<any> = {\n ...props,\n style: {\n ...props.style,\n transformOrigin,\n },\n ref: mergeRefs(popoverRef, ref),\n children: shouldRenderChildren ? props.children : null,\n tabIndex: -1,\n onKeyDown: handlerAll(props.onKeyDown, (ev) => {\n if (closeOnEsc && ev.key === \"Escape\") onClose()\n }),\n onBlur: handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const targetIsPopover = isContains(popoverRef.current, relatedTarget)\n const targetIsTrigger = isContains(triggerRef.current, relatedTarget)\n const targetIsRelated = relatedRef?.current\n ? isContains(relatedRef.current, relatedTarget)\n : false\n\n const isValidBlur =\n !targetIsPopover && !targetIsTrigger && !targetIsRelated\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n }),\n }\n\n if (trigger === \"hover\") {\n popoverProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n })\n\n popoverProps.onMouseLeave = handlerAll(props.onMouseLeave, (ev) => {\n if (ev.nativeEvent.relatedTarget === null) return\n\n isHoveringRef.current = false\n\n if (closeOnBlur) setTimeout(onClose, closeDelay)\n })\n }\n\n return popoverProps\n },\n [\n closeDelay,\n closeOnBlur,\n closeOnEsc,\n isOpen,\n onClose,\n shouldRenderChildren,\n transformOrigin,\n trigger,\n relatedRef,\n ],\n )\n\n const maybeReferenceRef = useCallback(\n (node: Element) => {\n if (anchorRef.current == null) referenceRef(node)\n },\n [referenceRef],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const triggerProps: RefAttributes<any> & DOMAttributes = {\n ...props,\n ref: mergeRefs(triggerRef, ref, maybeReferenceRef),\n }\n\n if (trigger === \"click\") {\n triggerProps.onClick = handlerAll(props.onClick, onToggle)\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"contextmenu\") {\n triggerProps.onContextMenu = handlerAll(props.onContextMenu, (ev) => {\n ev.preventDefault()\n onOpen()\n })\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"hover\") {\n triggerProps.onFocus = handlerAll(props.onFocus, () => {\n if (openTimeout.current === undefined) onOpen()\n })\n\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n\n triggerProps.onKeyDown = handlerAll(props.onKeyDown, (ev) => {\n if (ev.key === \"Escape\") onClose()\n })\n\n triggerProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n openTimeout.current = window.setTimeout(onOpen, openDelay)\n })\n\n triggerProps.onMouseLeave = handlerAll(props.onMouseLeave, () => {\n isHoveringRef.current = false\n\n if (openTimeout.current) {\n clearTimeout(openTimeout.current)\n openTimeout.current = undefined\n }\n\n closeTimeout.current = window.setTimeout(() => {\n if (!isHoveringRef.current) onClose()\n }, closeDelay)\n })\n }\n\n return triggerProps\n },\n [\n closeDelay,\n closeOnBlur,\n isOpen,\n maybeReferenceRef,\n onClose,\n onOpen,\n onToggle,\n openDelay,\n trigger,\n ],\n )\n\n const getAnchorProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n return {\n ...props,\n ref: mergeRefs(ref, anchorRef, referenceRef),\n }\n },\n [anchorRef, referenceRef],\n )\n\n return (\n <PopoverProvider\n value={{\n isOpen,\n onClose,\n closeOnButton,\n onAnimationComplete,\n forceUpdate,\n getTriggerProps,\n getAnchorProps,\n getPopperProps,\n getPopoverProps,\n animation,\n duration,\n styles,\n }}\n >\n {runIfFunc(children, {\n isOpen,\n onClose,\n forceUpdate,\n })}\n </PopoverProvider>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,eAA+B;AAC/B,IAAAC,gBAAmB;;;ACDnB,kBAAuD;AAMvD,2BAAqC;AAErC,4BAAiD;AACjD,uBAIO;AAEP,wBAA4C;AAE5C,mBAOO;AAEP,mBAA+C;AAyY3C;AAvYG,IAAM,oBAA2B;AAAA,EACtC,GAAG;AAAA,EACH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA2HA,IAAM,CAAC,iBAAiB,UAAU,QAAI,4BAA8B;AAAA,EAClE,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;;;AD9JK,IAAAC,sBAAA;AATC,IAAM,oBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,WAAW;AAE9B,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,sBAAsB,SAAS;AAAA,QAC7C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["import_core","import_utils","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/popover-header.tsx","../src/popover.tsx"],"sourcesContent":["import type { HTMLUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { usePopover } from \"./popover\"\n\nexport type PopoverHeaderProps = HTMLUIProps<\"header\">\n\nexport const PopoverHeader = forwardRef<PopoverHeaderProps, \"header\">(\n ({ className, ...rest }, ref) => {\n const { styles } = usePopover()\n\n const css: CSSUIObject = {\n ...styles.header,\n }\n\n return (\n <ui.header\n ref={ref}\n className={cx(\"ui-popover__header\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n","import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type {\n MotionUIPropGetter,\n MotionProps,\n MotionTransitionProps,\n} from \"@yamada-ui/motion\"\nimport { useAnimationObserver } from \"@yamada-ui/use-animation\"\nimport type { LazyMode } from \"@yamada-ui/use-disclosure\"\nimport { useDisclosure, useLazyDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n useFocusOnHide,\n useFocusOnShow,\n useFocusOnPointerDown,\n} from \"@yamada-ui/use-focus\"\nimport type { UsePopperProps } from \"@yamada-ui/use-popper\"\nimport { usePopper, popperProperties } from \"@yamada-ui/use-popper\"\nimport type { DOMAttributes, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n getEventRelatedTarget,\n handlerAll,\n isContains,\n mergeRefs,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { FC, PropsWithChildren, RefAttributes, RefObject } from \"react\"\nimport { useCallback, useEffect, useRef } from \"react\"\n\nexport const popoverProperties: any[] = [\n ...popperProperties,\n \"isOpen\",\n \"defaultIsOpen\",\n \"onOpen\",\n \"onClose\",\n \"initialFocusRef\",\n \"restoreFocus\",\n \"autoFocus\",\n \"closeOnBlur\",\n \"closeOnEsc\",\n \"closeOnButton\",\n \"trigger\",\n \"openDelay\",\n \"closeDelay\",\n \"isLazy\",\n \"lazyBehavior\",\n \"animation\",\n \"duration\",\n]\n\ntype PopoverOptions = {\n /**\n * If `true`, the popover will be opened.\n */\n isOpen?: boolean\n /**\n * If `true`, the popover will be initially opened.\n */\n defaultIsOpen?: boolean\n /**\n * Callback fired when the popover opens.\n */\n onOpen?: () => void\n /**\n * Callback fired when the popover closes.\n */\n onClose?: () => void\n /**\n * The `ref` of the element that should receive focus when the popover opens.\n */\n initialFocusRef?: RefObject<{ focus(): void }>\n /**\n * The `ref` of the element related to the popover.\n * This is used during the `onBlur` event.\n */\n relatedRef?: RefObject<HTMLElement>\n /**\n * If `true`, focus will be returned to the element that triggers the popover when it closes.\n *\n * @default true\n */\n restoreFocus?: boolean\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`, 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 close when you hit the `Esc` key.\n *\n * @default true\n */\n closeOnEsc?: boolean\n /**\n * If `true`, display the popover close button.\n *\n * @default true\n */\n closeOnButton?: boolean\n /**\n * The interaction that triggers the popover.\n *\n * - `hover`: means the popover will open when you hover with mouse or focus with keyboard on the popover trigger.\n * - `click`: means the popover will open on click or press `Enter` to `Space` on keyboard.\n *\n * @default 'click'\n */\n trigger?: \"click\" | \"hover\" | \"never\" | \"contextmenu\"\n /**\n * The number of delay time to open.\n *\n * @default 200\n */\n openDelay?: number\n /**\n * The number of delay time to close.\n *\n * @default 200\n */\n closeDelay?: number\n /**\n * If `true`, the PopoverContent rendering will be deferred until the popover is open.\n *\n * @default false\n */\n isLazy?: boolean\n /**\n * The lazy behavior of popover's content when not visible. Only works when `isLazy={true}`\n *\n * - `unmount`: The popover's content is always unmounted when not open.\n * - `keepMounted`: The popover's content initially unmounted, but stays mounted when popover is open.\n *\n * @default 'unmount'\n */\n lazyBehavior?: LazyMode\n /**\n * The animation of the popover.\n *\n * @default 'scale'\n */\n animation?: \"scale\" | \"top\" | \"right\" | \"left\" | \"bottom\" | \"none\"\n /**\n * The animation duration.\n */\n duration?: MotionTransitionProps[\"duration\"]\n}\n\nexport type PopoverProps = ThemeProps<\"Popover\"> &\n Omit<UsePopperProps, \"enabled\"> &\n PropsWithChildren<PopoverOptions>\n\ntype PopoverContext = Pick<\n PopoverOptions,\n \"isOpen\" | \"onClose\" | \"closeOnButton\" | \"animation\" | \"duration\"\n> & {\n onAnimationComplete: () => void\n forceUpdate: () => void | undefined\n getTriggerProps: PropGetter\n getAnchorProps: PropGetter\n getPopperProps: PropGetter\n getPopoverProps: MotionUIPropGetter\n styles: Record<string, CSSUIObject>\n}\n\nconst [PopoverProvider, usePopover] = createContext<PopoverContext>({\n strict: false,\n name: \"PopoverContext\",\n})\n\nexport { usePopover }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see Docs https://yamada-ui.com/components/overlay/popover\n */\nexport const Popover: FC<PopoverProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Popover\", props)\n const {\n children,\n initialFocusRef,\n restoreFocus = true,\n autoFocus = true,\n closeOnBlur = true,\n closeOnEsc = true,\n closeOnButton = true,\n trigger = \"click\",\n openDelay = 200,\n closeDelay = 200,\n isLazy,\n lazyBehavior = \"unmount\",\n animation = \"scale\",\n duration,\n relatedRef,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { isOpen, onOpen, onClose, onToggle } = useDisclosure(mergedProps)\n\n const anchorRef = useRef<HTMLElement>(null)\n const triggerRef = useRef<HTMLElement>(null)\n const popoverRef = useRef<HTMLElement>(null)\n\n const { present, onAnimationComplete } = useAnimationObserver({\n isOpen,\n ref: popoverRef,\n })\n\n const openTimeout = useRef<number | undefined>(undefined)\n const closeTimeout = useRef<number | undefined>(undefined)\n\n const isHoveringRef = useRef(false)\n\n const hasBeenOpened = useRef(false)\n\n if (isOpen) hasBeenOpened.current = true\n\n const { referenceRef, getPopperProps, forceUpdate, transformOrigin } =\n usePopper({\n ...rest,\n enabled: isOpen,\n })\n\n useEffect(() => {\n return () => {\n if (openTimeout.current) clearTimeout(openTimeout.current)\n\n if (closeTimeout.current) clearTimeout(closeTimeout.current)\n }\n }, [])\n\n useFocusOnPointerDown({\n enabled: isOpen,\n ref: triggerRef,\n })\n\n useFocusOnHide(popoverRef, {\n focusRef: triggerRef,\n visible: isOpen,\n shouldFocus:\n restoreFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n useFocusOnShow(popoverRef, {\n focusRef: initialFocusRef,\n visible: isOpen,\n shouldFocus:\n autoFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n const shouldRenderChildren = useLazyDisclosure({\n wasSelected: hasBeenOpened.current,\n enabled: isLazy,\n mode: lazyBehavior,\n isSelected: present,\n })\n\n const getPopoverProps: MotionUIPropGetter = useCallback(\n (props = {}, ref = null) => {\n const popoverProps: MotionProps<\"div\"> & RefAttributes<any> = {\n ...props,\n style: {\n ...props.style,\n transformOrigin,\n },\n ref: mergeRefs(popoverRef, ref),\n children: shouldRenderChildren ? props.children : null,\n tabIndex: -1,\n onKeyDown: handlerAll(props.onKeyDown, (ev) => {\n if (closeOnEsc && ev.key === \"Escape\") onClose()\n }),\n onBlur: handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const targetIsPopover = isContains(popoverRef.current, relatedTarget)\n const targetIsTrigger = isContains(triggerRef.current, relatedTarget)\n const targetIsRelated = relatedRef?.current\n ? isContains(relatedRef.current, relatedTarget)\n : false\n\n const isValidBlur =\n !targetIsPopover && !targetIsTrigger && !targetIsRelated\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n }),\n }\n\n if (trigger === \"hover\") {\n popoverProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n })\n\n popoverProps.onMouseLeave = handlerAll(props.onMouseLeave, (ev) => {\n if (ev.nativeEvent.relatedTarget === null) return\n\n isHoveringRef.current = false\n\n if (closeOnBlur) setTimeout(onClose, closeDelay)\n })\n }\n\n return popoverProps\n },\n [\n closeDelay,\n closeOnBlur,\n closeOnEsc,\n isOpen,\n onClose,\n shouldRenderChildren,\n transformOrigin,\n trigger,\n relatedRef,\n ],\n )\n\n const maybeReferenceRef = useCallback(\n (node: Element) => {\n if (anchorRef.current == null) referenceRef(node)\n },\n [referenceRef],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const triggerProps: RefAttributes<any> & DOMAttributes = {\n ...props,\n ref: mergeRefs(triggerRef, ref, maybeReferenceRef),\n }\n\n if (trigger === \"click\") {\n triggerProps.onClick = handlerAll(props.onClick, onToggle)\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"contextmenu\") {\n triggerProps.onContextMenu = handlerAll(props.onContextMenu, (ev) => {\n ev.preventDefault()\n onOpen()\n })\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"hover\") {\n triggerProps.onFocus = handlerAll(props.onFocus, () => {\n if (openTimeout.current === undefined) onOpen()\n })\n\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n\n triggerProps.onKeyDown = handlerAll(props.onKeyDown, (ev) => {\n if (ev.key === \"Escape\") onClose()\n })\n\n triggerProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n openTimeout.current = window.setTimeout(onOpen, openDelay)\n })\n\n triggerProps.onMouseLeave = handlerAll(props.onMouseLeave, () => {\n isHoveringRef.current = false\n\n if (openTimeout.current) {\n clearTimeout(openTimeout.current)\n openTimeout.current = undefined\n }\n\n closeTimeout.current = window.setTimeout(() => {\n if (!isHoveringRef.current) onClose()\n }, closeDelay)\n })\n }\n\n return triggerProps\n },\n [\n closeDelay,\n closeOnBlur,\n isOpen,\n maybeReferenceRef,\n onClose,\n onOpen,\n onToggle,\n openDelay,\n trigger,\n ],\n )\n\n const getAnchorProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n return {\n ...props,\n ref: mergeRefs(ref, anchorRef, referenceRef),\n }\n },\n [anchorRef, referenceRef],\n )\n\n return (\n <PopoverProvider\n value={{\n isOpen,\n onClose,\n closeOnButton,\n onAnimationComplete,\n forceUpdate,\n getTriggerProps,\n getAnchorProps,\n getPopperProps,\n getPopoverProps,\n animation,\n duration,\n styles,\n }}\n >\n {runIfFunc(children, {\n isOpen,\n onClose,\n forceUpdate,\n })}\n </PopoverProvider>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,eAA+B;AAC/B,IAAAC,gBAAmB;;;ACDnB,kBAAuD;AAMvD,2BAAqC;AAErC,4BAAiD;AACjD,uBAIO;AAEP,wBAA4C;AAE5C,mBAOO;AAEP,mBAA+C;AAyY3C;AAvYG,IAAM,oBAA2B;AAAA,EACtC,GAAG;AAAA,EACH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA2HA,IAAM,CAAC,iBAAiB,UAAU,QAAI,4BAA8B;AAAA,EAClE,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;;;AD9JK,IAAAC,sBAAA;AATC,IAAM,oBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,WAAW;AAE9B,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,sBAAsB,SAAS;AAAA,QAC7C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["import_core","import_utils","import_jsx_runtime"]}
|
package/dist/popover-header.mjs
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/popover-trigger.tsx","../src/popover.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, ReactElement, RefObject } from \"react\"\nimport { Children, cloneElement } from \"react\"\nimport { usePopover } from \"./popover\"\n\nexport const PopoverTrigger: FC<PropsWithChildren<{}>> = ({ children }) => {\n const child = Children.only(children) as ReactElement & {\n ref: RefObject<any>\n }\n const { getTriggerProps } = usePopover()\n\n return cloneElement(child, getTriggerProps(child.props, child.ref))\n}\n","import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type {\n MotionUIPropGetter,\n MotionProps,\n MotionTransitionProperties,\n} from \"@yamada-ui/motion\"\nimport { useAnimationObserver } from \"@yamada-ui/use-animation\"\nimport type { LazyMode } from \"@yamada-ui/use-disclosure\"\nimport { useDisclosure, useLazyDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n useFocusOnHide,\n useFocusOnShow,\n useFocusOnPointerDown,\n} from \"@yamada-ui/use-focus\"\nimport type { UsePopperProps } from \"@yamada-ui/use-popper\"\nimport { usePopper, popperProperties } from \"@yamada-ui/use-popper\"\nimport type { DOMAttributes, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n getEventRelatedTarget,\n handlerAll,\n isContains,\n mergeRefs,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { FC, PropsWithChildren, RefAttributes, RefObject } from \"react\"\nimport { useCallback, useEffect, useRef } from \"react\"\n\nexport const popoverProperties: any[] = [\n ...popperProperties,\n \"isOpen\",\n \"defaultIsOpen\",\n \"onOpen\",\n \"onClose\",\n \"initialFocusRef\",\n \"restoreFocus\",\n \"autoFocus\",\n \"closeOnBlur\",\n \"closeOnEsc\",\n \"closeOnButton\",\n \"trigger\",\n \"openDelay\",\n \"closeDelay\",\n \"isLazy\",\n \"lazyBehavior\",\n \"animation\",\n \"duration\",\n]\n\ntype PopoverOptions = {\n /**\n * If `true`, the popover will be opened.\n */\n isOpen?: boolean\n /**\n * If `true`, the popover will be initially opened.\n */\n defaultIsOpen?: boolean\n /**\n * Callback fired when the popover opens.\n */\n onOpen?: () => void\n /**\n * Callback fired when the popover closes.\n */\n onClose?: () => void\n /**\n * The `ref` of the element that should receive focus when the popover opens.\n */\n initialFocusRef?: RefObject<{ focus(): void }>\n /**\n * The `ref` of the element related to the popover.\n * This is used during the `onBlur` event.\n */\n relatedRef?: RefObject<HTMLElement>\n /**\n * If `true`, focus will be returned to the element that triggers the popover when it closes.\n *\n * @default true\n */\n restoreFocus?: boolean\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`, 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 close when you hit the `Esc` key.\n *\n * @default true\n */\n closeOnEsc?: boolean\n /**\n * If `true`, display the popover close button.\n *\n * @default true\n */\n closeOnButton?: boolean\n /**\n * The interaction that triggers the popover.\n *\n * - `hover`: means the popover will open when you hover with mouse or focus with keyboard on the popover trigger.\n * - `click`: means the popover will open on click or press `Enter` to `Space` on keyboard.\n *\n * @default 'click'\n */\n trigger?: \"click\" | \"hover\" | \"never\" | \"contextmenu\"\n /**\n * The number of delay time to open.\n *\n * @default 200\n */\n openDelay?: number\n /**\n * The number of delay time to close.\n *\n * @default 200\n */\n closeDelay?: number\n /**\n * If `true`, the PopoverContent rendering will be deferred until the popover is open.\n *\n * @default false\n */\n isLazy?: boolean\n /**\n * The lazy behavior of popover's content when not visible. Only works when `isLazy={true}`\n *\n * - `unmount`: The popover's content is always unmounted when not open.\n * - `keepMounted`: The popover's content initially unmounted, but stays mounted when popover is open.\n *\n * @default 'unmount'\n */\n lazyBehavior?: LazyMode\n /**\n * The animation of the popover.\n *\n * @default 'scale'\n */\n animation?: \"scale\" | \"top\" | \"right\" | \"left\" | \"bottom\" | \"none\"\n /**\n * The animation duration.\n */\n duration?: MotionTransitionProperties[\"duration\"]\n}\n\nexport type PopoverProps = ThemeProps<\"Popover\"> &\n Omit<UsePopperProps, \"enabled\"> &\n PropsWithChildren<PopoverOptions>\n\ntype PopoverContext = Pick<\n PopoverOptions,\n \"isOpen\" | \"onClose\" | \"closeOnButton\" | \"animation\" | \"duration\"\n> & {\n onAnimationComplete: () => void\n forceUpdate: () => void | undefined\n getTriggerProps: PropGetter\n getAnchorProps: PropGetter\n getPopperProps: PropGetter\n getPopoverProps: MotionUIPropGetter\n styles: Record<string, CSSUIObject>\n}\n\nconst [PopoverProvider, usePopover] = createContext<PopoverContext>({\n strict: false,\n name: \"PopoverContext\",\n})\n\nexport { usePopover }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see Docs https://yamada-ui.com/components/overlay/popover\n */\nexport const Popover: FC<PopoverProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Popover\", props)\n const {\n children,\n initialFocusRef,\n restoreFocus = true,\n autoFocus = true,\n closeOnBlur = true,\n closeOnEsc = true,\n closeOnButton = true,\n trigger = \"click\",\n openDelay = 200,\n closeDelay = 200,\n isLazy,\n lazyBehavior = \"unmount\",\n animation = \"scale\",\n duration,\n relatedRef,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { isOpen, onOpen, onClose, onToggle } = useDisclosure(mergedProps)\n\n const anchorRef = useRef<HTMLElement>(null)\n const triggerRef = useRef<HTMLElement>(null)\n const popoverRef = useRef<HTMLElement>(null)\n\n const { present, onAnimationComplete } = useAnimationObserver({\n isOpen,\n ref: popoverRef,\n })\n\n const openTimeout = useRef<number | undefined>(undefined)\n const closeTimeout = useRef<number | undefined>(undefined)\n\n const isHoveringRef = useRef(false)\n\n const hasBeenOpened = useRef(false)\n\n if (isOpen) hasBeenOpened.current = true\n\n const { referenceRef, getPopperProps, forceUpdate, transformOrigin } =\n usePopper({\n ...rest,\n enabled: isOpen,\n })\n\n useEffect(() => {\n return () => {\n if (openTimeout.current) clearTimeout(openTimeout.current)\n\n if (closeTimeout.current) clearTimeout(closeTimeout.current)\n }\n }, [])\n\n useFocusOnPointerDown({\n enabled: isOpen,\n ref: triggerRef,\n })\n\n useFocusOnHide(popoverRef, {\n focusRef: triggerRef,\n visible: isOpen,\n shouldFocus:\n restoreFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n useFocusOnShow(popoverRef, {\n focusRef: initialFocusRef,\n visible: isOpen,\n shouldFocus:\n autoFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n const shouldRenderChildren = useLazyDisclosure({\n wasSelected: hasBeenOpened.current,\n enabled: isLazy,\n mode: lazyBehavior,\n isSelected: present,\n })\n\n const getPopoverProps: MotionUIPropGetter = useCallback(\n (props = {}, ref = null) => {\n const popoverProps: MotionProps<\"div\"> & RefAttributes<any> = {\n ...props,\n style: {\n ...props.style,\n transformOrigin,\n },\n ref: mergeRefs(popoverRef, ref),\n children: shouldRenderChildren ? props.children : null,\n tabIndex: -1,\n onKeyDown: handlerAll(props.onKeyDown, (ev) => {\n if (closeOnEsc && ev.key === \"Escape\") onClose()\n }),\n onBlur: handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const targetIsPopover = isContains(popoverRef.current, relatedTarget)\n const targetIsTrigger = isContains(triggerRef.current, relatedTarget)\n const targetIsRelated = relatedRef?.current\n ? isContains(relatedRef.current, relatedTarget)\n : false\n\n const isValidBlur =\n !targetIsPopover && !targetIsTrigger && !targetIsRelated\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n }),\n }\n\n if (trigger === \"hover\") {\n popoverProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n })\n\n popoverProps.onMouseLeave = handlerAll(props.onMouseLeave, (ev) => {\n if (ev.nativeEvent.relatedTarget === null) return\n\n isHoveringRef.current = false\n\n if (closeOnBlur) setTimeout(onClose, closeDelay)\n })\n }\n\n return popoverProps\n },\n [\n closeDelay,\n closeOnBlur,\n closeOnEsc,\n isOpen,\n onClose,\n shouldRenderChildren,\n transformOrigin,\n trigger,\n relatedRef,\n ],\n )\n\n const maybeReferenceRef = useCallback(\n (node: Element) => {\n if (anchorRef.current == null) referenceRef(node)\n },\n [referenceRef],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const triggerProps: RefAttributes<any> & DOMAttributes = {\n ...props,\n ref: mergeRefs(triggerRef, ref, maybeReferenceRef),\n }\n\n if (trigger === \"click\") {\n triggerProps.onClick = handlerAll(props.onClick, onToggle)\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"contextmenu\") {\n triggerProps.onContextMenu = handlerAll(props.onContextMenu, (ev) => {\n ev.preventDefault()\n onOpen()\n })\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"hover\") {\n triggerProps.onFocus = handlerAll(props.onFocus, () => {\n if (openTimeout.current === undefined) onOpen()\n })\n\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n\n triggerProps.onKeyDown = handlerAll(props.onKeyDown, (ev) => {\n if (ev.key === \"Escape\") onClose()\n })\n\n triggerProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n openTimeout.current = window.setTimeout(onOpen, openDelay)\n })\n\n triggerProps.onMouseLeave = handlerAll(props.onMouseLeave, () => {\n isHoveringRef.current = false\n\n if (openTimeout.current) {\n clearTimeout(openTimeout.current)\n openTimeout.current = undefined\n }\n\n closeTimeout.current = window.setTimeout(() => {\n if (!isHoveringRef.current) onClose()\n }, closeDelay)\n })\n }\n\n return triggerProps\n },\n [\n closeDelay,\n closeOnBlur,\n isOpen,\n maybeReferenceRef,\n onClose,\n onOpen,\n onToggle,\n openDelay,\n trigger,\n ],\n )\n\n const getAnchorProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n return {\n ...props,\n ref: mergeRefs(ref, anchorRef, referenceRef),\n }\n },\n [anchorRef, referenceRef],\n )\n\n return (\n <PopoverProvider\n value={{\n isOpen,\n onClose,\n closeOnButton,\n onAnimationComplete,\n forceUpdate,\n getTriggerProps,\n getAnchorProps,\n getPopperProps,\n getPopoverProps,\n animation,\n duration,\n styles,\n }}\n >\n {runIfFunc(children, {\n isOpen,\n onClose,\n forceUpdate,\n })}\n </PopoverProvider>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,gBAAuC;;;ACAvC,kBAAuD;AAMvD,2BAAqC;AAErC,4BAAiD;AACjD,uBAIO;AAEP,wBAA4C;AAE5C,mBAOO;AAEP,mBAA+C;AAyY3C;AAvYG,IAAM,oBAA2B;AAAA,EACtC,GAAG;AAAA,EACH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA2HA,IAAM,CAAC,iBAAiB,UAAU,QAAI,4BAA8B;AAAA,EAClE,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;;;AD1KM,IAAM,iBAA4C,CAAC,EAAE,SAAS,MAAM;AACzE,QAAM,QAAQ,uBAAS,KAAK,QAAQ;AAGpC,QAAM,EAAE,gBAAgB,IAAI,WAAW;AAEvC,aAAO,4BAAa,OAAO,gBAAgB,MAAM,OAAO,MAAM,GAAG,CAAC;AACpE;","names":["import_react"]}
|
1
|
+
{"version":3,"sources":["../src/popover-trigger.tsx","../src/popover.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, ReactElement, RefObject } from \"react\"\nimport { Children, cloneElement } from \"react\"\nimport { usePopover } from \"./popover\"\n\nexport const PopoverTrigger: FC<PropsWithChildren<{}>> = ({ children }) => {\n const child = Children.only(children) as ReactElement & {\n ref: RefObject<any>\n }\n const { getTriggerProps } = usePopover()\n\n return cloneElement(child, getTriggerProps(child.props, child.ref))\n}\n","import type { CSSUIObject, ThemeProps } from \"@yamada-ui/core\"\nimport { useMultiComponentStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type {\n MotionUIPropGetter,\n MotionProps,\n MotionTransitionProps,\n} from \"@yamada-ui/motion\"\nimport { useAnimationObserver } from \"@yamada-ui/use-animation\"\nimport type { LazyMode } from \"@yamada-ui/use-disclosure\"\nimport { useDisclosure, useLazyDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n useFocusOnHide,\n useFocusOnShow,\n useFocusOnPointerDown,\n} from \"@yamada-ui/use-focus\"\nimport type { UsePopperProps } from \"@yamada-ui/use-popper\"\nimport { usePopper, popperProperties } from \"@yamada-ui/use-popper\"\nimport type { DOMAttributes, PropGetter } from \"@yamada-ui/utils\"\nimport {\n createContext,\n getEventRelatedTarget,\n handlerAll,\n isContains,\n mergeRefs,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type { FC, PropsWithChildren, RefAttributes, RefObject } from \"react\"\nimport { useCallback, useEffect, useRef } from \"react\"\n\nexport const popoverProperties: any[] = [\n ...popperProperties,\n \"isOpen\",\n \"defaultIsOpen\",\n \"onOpen\",\n \"onClose\",\n \"initialFocusRef\",\n \"restoreFocus\",\n \"autoFocus\",\n \"closeOnBlur\",\n \"closeOnEsc\",\n \"closeOnButton\",\n \"trigger\",\n \"openDelay\",\n \"closeDelay\",\n \"isLazy\",\n \"lazyBehavior\",\n \"animation\",\n \"duration\",\n]\n\ntype PopoverOptions = {\n /**\n * If `true`, the popover will be opened.\n */\n isOpen?: boolean\n /**\n * If `true`, the popover will be initially opened.\n */\n defaultIsOpen?: boolean\n /**\n * Callback fired when the popover opens.\n */\n onOpen?: () => void\n /**\n * Callback fired when the popover closes.\n */\n onClose?: () => void\n /**\n * The `ref` of the element that should receive focus when the popover opens.\n */\n initialFocusRef?: RefObject<{ focus(): void }>\n /**\n * The `ref` of the element related to the popover.\n * This is used during the `onBlur` event.\n */\n relatedRef?: RefObject<HTMLElement>\n /**\n * If `true`, focus will be returned to the element that triggers the popover when it closes.\n *\n * @default true\n */\n restoreFocus?: boolean\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`, 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 close when you hit the `Esc` key.\n *\n * @default true\n */\n closeOnEsc?: boolean\n /**\n * If `true`, display the popover close button.\n *\n * @default true\n */\n closeOnButton?: boolean\n /**\n * The interaction that triggers the popover.\n *\n * - `hover`: means the popover will open when you hover with mouse or focus with keyboard on the popover trigger.\n * - `click`: means the popover will open on click or press `Enter` to `Space` on keyboard.\n *\n * @default 'click'\n */\n trigger?: \"click\" | \"hover\" | \"never\" | \"contextmenu\"\n /**\n * The number of delay time to open.\n *\n * @default 200\n */\n openDelay?: number\n /**\n * The number of delay time to close.\n *\n * @default 200\n */\n closeDelay?: number\n /**\n * If `true`, the PopoverContent rendering will be deferred until the popover is open.\n *\n * @default false\n */\n isLazy?: boolean\n /**\n * The lazy behavior of popover's content when not visible. Only works when `isLazy={true}`\n *\n * - `unmount`: The popover's content is always unmounted when not open.\n * - `keepMounted`: The popover's content initially unmounted, but stays mounted when popover is open.\n *\n * @default 'unmount'\n */\n lazyBehavior?: LazyMode\n /**\n * The animation of the popover.\n *\n * @default 'scale'\n */\n animation?: \"scale\" | \"top\" | \"right\" | \"left\" | \"bottom\" | \"none\"\n /**\n * The animation duration.\n */\n duration?: MotionTransitionProps[\"duration\"]\n}\n\nexport type PopoverProps = ThemeProps<\"Popover\"> &\n Omit<UsePopperProps, \"enabled\"> &\n PropsWithChildren<PopoverOptions>\n\ntype PopoverContext = Pick<\n PopoverOptions,\n \"isOpen\" | \"onClose\" | \"closeOnButton\" | \"animation\" | \"duration\"\n> & {\n onAnimationComplete: () => void\n forceUpdate: () => void | undefined\n getTriggerProps: PropGetter\n getAnchorProps: PropGetter\n getPopperProps: PropGetter\n getPopoverProps: MotionUIPropGetter\n styles: Record<string, CSSUIObject>\n}\n\nconst [PopoverProvider, usePopover] = createContext<PopoverContext>({\n strict: false,\n name: \"PopoverContext\",\n})\n\nexport { usePopover }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see Docs https://yamada-ui.com/components/overlay/popover\n */\nexport const Popover: FC<PopoverProps> = (props) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Popover\", props)\n const {\n children,\n initialFocusRef,\n restoreFocus = true,\n autoFocus = true,\n closeOnBlur = true,\n closeOnEsc = true,\n closeOnButton = true,\n trigger = \"click\",\n openDelay = 200,\n closeDelay = 200,\n isLazy,\n lazyBehavior = \"unmount\",\n animation = \"scale\",\n duration,\n relatedRef,\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { isOpen, onOpen, onClose, onToggle } = useDisclosure(mergedProps)\n\n const anchorRef = useRef<HTMLElement>(null)\n const triggerRef = useRef<HTMLElement>(null)\n const popoverRef = useRef<HTMLElement>(null)\n\n const { present, onAnimationComplete } = useAnimationObserver({\n isOpen,\n ref: popoverRef,\n })\n\n const openTimeout = useRef<number | undefined>(undefined)\n const closeTimeout = useRef<number | undefined>(undefined)\n\n const isHoveringRef = useRef(false)\n\n const hasBeenOpened = useRef(false)\n\n if (isOpen) hasBeenOpened.current = true\n\n const { referenceRef, getPopperProps, forceUpdate, transformOrigin } =\n usePopper({\n ...rest,\n enabled: isOpen,\n })\n\n useEffect(() => {\n return () => {\n if (openTimeout.current) clearTimeout(openTimeout.current)\n\n if (closeTimeout.current) clearTimeout(closeTimeout.current)\n }\n }, [])\n\n useFocusOnPointerDown({\n enabled: isOpen,\n ref: triggerRef,\n })\n\n useFocusOnHide(popoverRef, {\n focusRef: triggerRef,\n visible: isOpen,\n shouldFocus:\n restoreFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n useFocusOnShow(popoverRef, {\n focusRef: initialFocusRef,\n visible: isOpen,\n shouldFocus:\n autoFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n })\n\n const shouldRenderChildren = useLazyDisclosure({\n wasSelected: hasBeenOpened.current,\n enabled: isLazy,\n mode: lazyBehavior,\n isSelected: present,\n })\n\n const getPopoverProps: MotionUIPropGetter = useCallback(\n (props = {}, ref = null) => {\n const popoverProps: MotionProps<\"div\"> & RefAttributes<any> = {\n ...props,\n style: {\n ...props.style,\n transformOrigin,\n },\n ref: mergeRefs(popoverRef, ref),\n children: shouldRenderChildren ? props.children : null,\n tabIndex: -1,\n onKeyDown: handlerAll(props.onKeyDown, (ev) => {\n if (closeOnEsc && ev.key === \"Escape\") onClose()\n }),\n onBlur: handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const targetIsPopover = isContains(popoverRef.current, relatedTarget)\n const targetIsTrigger = isContains(triggerRef.current, relatedTarget)\n const targetIsRelated = relatedRef?.current\n ? isContains(relatedRef.current, relatedTarget)\n : false\n\n const isValidBlur =\n !targetIsPopover && !targetIsTrigger && !targetIsRelated\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n }),\n }\n\n if (trigger === \"hover\") {\n popoverProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n })\n\n popoverProps.onMouseLeave = handlerAll(props.onMouseLeave, (ev) => {\n if (ev.nativeEvent.relatedTarget === null) return\n\n isHoveringRef.current = false\n\n if (closeOnBlur) setTimeout(onClose, closeDelay)\n })\n }\n\n return popoverProps\n },\n [\n closeDelay,\n closeOnBlur,\n closeOnEsc,\n isOpen,\n onClose,\n shouldRenderChildren,\n transformOrigin,\n trigger,\n relatedRef,\n ],\n )\n\n const maybeReferenceRef = useCallback(\n (node: Element) => {\n if (anchorRef.current == null) referenceRef(node)\n },\n [referenceRef],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n const triggerProps: RefAttributes<any> & DOMAttributes = {\n ...props,\n ref: mergeRefs(triggerRef, ref, maybeReferenceRef),\n }\n\n if (trigger === \"click\") {\n triggerProps.onClick = handlerAll(props.onClick, onToggle)\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"contextmenu\") {\n triggerProps.onContextMenu = handlerAll(props.onContextMenu, (ev) => {\n ev.preventDefault()\n onOpen()\n })\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n }\n\n if (trigger === \"hover\") {\n triggerProps.onFocus = handlerAll(props.onFocus, () => {\n if (openTimeout.current === undefined) onOpen()\n })\n\n triggerProps.onBlur = handlerAll(props.onBlur, (ev) => {\n const relatedTarget = getEventRelatedTarget(ev)\n const isValidBlur = !isContains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) onClose()\n })\n\n triggerProps.onKeyDown = handlerAll(props.onKeyDown, (ev) => {\n if (ev.key === \"Escape\") onClose()\n })\n\n triggerProps.onMouseEnter = handlerAll(props.onMouseEnter, () => {\n isHoveringRef.current = true\n openTimeout.current = window.setTimeout(onOpen, openDelay)\n })\n\n triggerProps.onMouseLeave = handlerAll(props.onMouseLeave, () => {\n isHoveringRef.current = false\n\n if (openTimeout.current) {\n clearTimeout(openTimeout.current)\n openTimeout.current = undefined\n }\n\n closeTimeout.current = window.setTimeout(() => {\n if (!isHoveringRef.current) onClose()\n }, closeDelay)\n })\n }\n\n return triggerProps\n },\n [\n closeDelay,\n closeOnBlur,\n isOpen,\n maybeReferenceRef,\n onClose,\n onOpen,\n onToggle,\n openDelay,\n trigger,\n ],\n )\n\n const getAnchorProps: PropGetter = useCallback(\n (props = {}, ref = null) => {\n return {\n ...props,\n ref: mergeRefs(ref, anchorRef, referenceRef),\n }\n },\n [anchorRef, referenceRef],\n )\n\n return (\n <PopoverProvider\n value={{\n isOpen,\n onClose,\n closeOnButton,\n onAnimationComplete,\n forceUpdate,\n getTriggerProps,\n getAnchorProps,\n getPopperProps,\n getPopoverProps,\n animation,\n duration,\n styles,\n }}\n >\n {runIfFunc(children, {\n isOpen,\n onClose,\n forceUpdate,\n })}\n </PopoverProvider>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,IAAAA,gBAAuC;;;ACAvC,kBAAuD;AAMvD,2BAAqC;AAErC,4BAAiD;AACjD,uBAIO;AAEP,wBAA4C;AAE5C,mBAOO;AAEP,mBAA+C;AAyY3C;AAvYG,IAAM,oBAA2B;AAAA,EACtC,GAAG;AAAA,EACH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AA2HA,IAAM,CAAC,iBAAiB,UAAU,QAAI,4BAA8B;AAAA,EAClE,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;;;AD1KM,IAAM,iBAA4C,CAAC,EAAE,SAAS,MAAM;AACzE,QAAM,QAAQ,uBAAS,KAAK,QAAQ;AAGpC,QAAM,EAAE,gBAAgB,IAAI,WAAW;AAEvC,aAAO,4BAAa,OAAO,gBAAgB,MAAM,OAAO,MAAM,GAAG,CAAC;AACpE;","names":["import_react"]}
|
package/dist/popover-trigger.mjs
CHANGED
package/dist/popover.d.mts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { ThemeProps, CSSUIObject } from '@yamada-ui/core';
|
2
|
-
import {
|
2
|
+
import { MotionTransitionProps, MotionUIPropGetter } from '@yamada-ui/motion';
|
3
3
|
import { LazyMode } from '@yamada-ui/use-disclosure';
|
4
4
|
import { UsePopperProps } from '@yamada-ui/use-popper';
|
5
5
|
import { PropGetter } from '@yamada-ui/utils';
|
@@ -109,7 +109,7 @@ type PopoverOptions = {
|
|
109
109
|
/**
|
110
110
|
* The animation duration.
|
111
111
|
*/
|
112
|
-
duration?:
|
112
|
+
duration?: MotionTransitionProps["duration"];
|
113
113
|
};
|
114
114
|
type PopoverProps = ThemeProps<"Popover"> & Omit<UsePopperProps, "enabled"> & PropsWithChildren<PopoverOptions>;
|
115
115
|
type PopoverContext = Pick<PopoverOptions, "isOpen" | "onClose" | "closeOnButton" | "animation" | "duration"> & {
|
package/dist/popover.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { ThemeProps, CSSUIObject } from '@yamada-ui/core';
|
2
|
-
import {
|
2
|
+
import { MotionTransitionProps, MotionUIPropGetter } from '@yamada-ui/motion';
|
3
3
|
import { LazyMode } from '@yamada-ui/use-disclosure';
|
4
4
|
import { UsePopperProps } from '@yamada-ui/use-popper';
|
5
5
|
import { PropGetter } from '@yamada-ui/utils';
|
@@ -109,7 +109,7 @@ type PopoverOptions = {
|
|
109
109
|
/**
|
110
110
|
* The animation duration.
|
111
111
|
*/
|
112
|
-
duration?:
|
112
|
+
duration?: MotionTransitionProps["duration"];
|
113
113
|
};
|
114
114
|
type PopoverProps = ThemeProps<"Popover"> & Omit<UsePopperProps, "enabled"> & PropsWithChildren<PopoverOptions>;
|
115
115
|
type PopoverContext = Pick<PopoverOptions, "isOpen" | "onClose" | "closeOnButton" | "animation" | "duration"> & {
|