@yamada-ui/popover 1.2.1 → 2.0.0-next-20240607165557
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{chunk-Q7QRWVNZ.mjs → chunk-7E4FMDDB.mjs} +1 -4
- package/dist/chunk-7E4FMDDB.mjs.map +1 -0
- package/dist/{chunk-Q37PNTBJ.mjs → chunk-D3QTAZPJ.mjs} +1 -2
- package/dist/chunk-D3QTAZPJ.mjs.map +1 -0
- package/dist/{chunk-CWE3G273.mjs → chunk-MKMQ3Y5J.mjs} +1 -4
- package/dist/chunk-MKMQ3Y5J.mjs.map +1 -0
- package/dist/{chunk-7G6DD75K.mjs → chunk-PUYWA7XM.mjs} +1 -4
- package/dist/chunk-PUYWA7XM.mjs.map +1 -0
- package/dist/{chunk-VUPHYMKC.mjs → chunk-VDGFRQUA.mjs} +2 -2
- package/dist/index.js +0 -10
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +5 -5
- package/dist/popover-body.js +0 -3
- package/dist/popover-body.js.map +1 -1
- package/dist/popover-body.mjs +1 -1
- package/dist/popover-close-button.js +0 -1
- package/dist/popover-close-button.js.map +1 -1
- package/dist/popover-close-button.mjs +1 -1
- package/dist/popover-content.js +0 -1
- package/dist/popover-content.js.map +1 -1
- package/dist/popover-content.mjs +5 -5
- package/dist/popover-footer.js +0 -3
- package/dist/popover-footer.js.map +1 -1
- package/dist/popover-footer.mjs +1 -1
- package/dist/popover-header.js +0 -3
- package/dist/popover-header.js.map +1 -1
- package/dist/popover-header.mjs +1 -1
- package/package.json +10 -10
- package/dist/chunk-7G6DD75K.mjs.map +0 -1
- package/dist/chunk-CWE3G273.mjs.map +0 -1
- package/dist/chunk-Q37PNTBJ.mjs.map +0 -1
- package/dist/chunk-Q7QRWVNZ.mjs.map +0 -1
- /package/dist/{chunk-VUPHYMKC.mjs.map → chunk-VDGFRQUA.mjs.map} +0 -0
@@ -11,9 +11,6 @@ var PopoverHeader = forwardRef(
|
|
11
11
|
({ className, ...rest }, ref) => {
|
12
12
|
const { styles } = usePopover();
|
13
13
|
const css = {
|
14
|
-
display: "flex",
|
15
|
-
alignItems: "center",
|
16
|
-
justifyContent: "flex-start",
|
17
14
|
...styles.header
|
18
15
|
};
|
19
16
|
return /* @__PURE__ */ jsx(
|
@@ -31,4 +28,4 @@ var PopoverHeader = forwardRef(
|
|
31
28
|
export {
|
32
29
|
PopoverHeader
|
33
30
|
};
|
34
|
-
//# sourceMappingURL=chunk-
|
31
|
+
//# sourceMappingURL=chunk-7E4FMDDB.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/popover-header.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"],"mappings":";;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAcb;AATC,IAAM,gBAAgB;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,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,sBAAsB,SAAS;AAAA,QAC7C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":[]}
|
@@ -12,7 +12,6 @@ var PopoverCloseButton = forwardRef(
|
|
12
12
|
({ onClick, ...rest }, ref) => {
|
13
13
|
const { styles, onClose } = usePopover();
|
14
14
|
const css = {
|
15
|
-
position: "absolute",
|
16
15
|
...styles.closeButton
|
17
16
|
};
|
18
17
|
return /* @__PURE__ */ jsx(
|
@@ -35,4 +34,4 @@ var PopoverCloseButton = forwardRef(
|
|
35
34
|
export {
|
36
35
|
PopoverCloseButton
|
37
36
|
};
|
38
|
-
//# sourceMappingURL=chunk-
|
37
|
+
//# sourceMappingURL=chunk-D3QTAZPJ.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/popover-close-button.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"],"mappings":";;;;;;AACA,SAAS,mBAAmB;AAE5B,SAAS,kBAAkB;AAC3B,SAAS,IAAI,kBAAkB;AAczB;AATC,IAAM,qBAAqB;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,WAAW,GAAG,0BAA0B;AAAA,QACxC,OAAO;AAAA,QACP,SAAS,WAAW,SAAS,CAAC,OAAO;AACnC,aAAG,gBAAgB;AACnB;AAAA,QACF,CAAC;AAAA,QACD,MAAK;AAAA,QACJ,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":[]}
|
@@ -11,9 +11,6 @@ var PopoverFooter = forwardRef(
|
|
11
11
|
({ className, ...rest }, ref) => {
|
12
12
|
const { styles } = usePopover();
|
13
13
|
const css = {
|
14
|
-
display: "flex",
|
15
|
-
alignItems: "center",
|
16
|
-
justifyContent: "flex-start",
|
17
14
|
...styles.footer
|
18
15
|
};
|
19
16
|
return /* @__PURE__ */ jsx(
|
@@ -31,4 +28,4 @@ var PopoverFooter = forwardRef(
|
|
31
28
|
export {
|
32
29
|
PopoverFooter
|
33
30
|
};
|
34
|
-
//# sourceMappingURL=chunk-
|
31
|
+
//# sourceMappingURL=chunk-MKMQ3Y5J.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/popover-footer.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"],"mappings":";;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAcb;AATC,IAAM,gBAAgB;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,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,sBAAsB,SAAS;AAAA,QAC7C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":[]}
|
@@ -11,9 +11,6 @@ var PopoverBody = forwardRef(
|
|
11
11
|
({ className, ...rest }, ref) => {
|
12
12
|
const { styles } = usePopover();
|
13
13
|
const css = {
|
14
|
-
display: "flex",
|
15
|
-
flexDirection: "column",
|
16
|
-
alignItems: "flex-start",
|
17
14
|
...styles.body
|
18
15
|
};
|
19
16
|
return /* @__PURE__ */ jsx(
|
@@ -31,4 +28,4 @@ var PopoverBody = forwardRef(
|
|
31
28
|
export {
|
32
29
|
PopoverBody
|
33
30
|
};
|
34
|
-
//# sourceMappingURL=chunk-
|
31
|
+
//# sourceMappingURL=chunk-PUYWA7XM.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/popover-body.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 PopoverBodyProps = HTMLUIProps<\"main\">\n\nexport const PopoverBody = forwardRef<PopoverBodyProps, \"main\">(\n ({ className, ...rest }, ref) => {\n const { styles } = usePopover()\n\n const css: CSSUIObject = {\n ...styles.body,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-popover__body\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n"],"mappings":";;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAcb;AATC,IAAM,cAAc;AAAA,EACzB,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,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,oBAAoB,SAAS;AAAA,QAC3C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":[]}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
PopoverCloseButton
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-D3QTAZPJ.mjs";
|
5
5
|
import {
|
6
6
|
usePopover
|
7
7
|
} from "./chunk-TLPTFJY2.mjs";
|
@@ -136,4 +136,4 @@ var PopoverContent = forwardRef(
|
|
136
136
|
export {
|
137
137
|
PopoverContent
|
138
138
|
};
|
139
|
-
//# sourceMappingURL=chunk-
|
139
|
+
//# sourceMappingURL=chunk-VDGFRQUA.mjs.map
|
package/dist/index.js
CHANGED
@@ -322,7 +322,6 @@ var PopoverCloseButton = (0, import_core2.forwardRef)(
|
|
322
322
|
({ onClick, ...rest }, ref) => {
|
323
323
|
const { styles, onClose } = usePopover();
|
324
324
|
const css = {
|
325
|
-
position: "absolute",
|
326
325
|
...styles.closeButton
|
327
326
|
};
|
328
327
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
@@ -477,9 +476,6 @@ var PopoverHeader = (0, import_core4.forwardRef)(
|
|
477
476
|
({ className, ...rest }, ref) => {
|
478
477
|
const { styles } = usePopover();
|
479
478
|
const css = {
|
480
|
-
display: "flex",
|
481
|
-
alignItems: "center",
|
482
|
-
justifyContent: "flex-start",
|
483
479
|
...styles.header
|
484
480
|
};
|
485
481
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
@@ -502,9 +498,6 @@ var PopoverBody = (0, import_core5.forwardRef)(
|
|
502
498
|
({ className, ...rest }, ref) => {
|
503
499
|
const { styles } = usePopover();
|
504
500
|
const css = {
|
505
|
-
display: "flex",
|
506
|
-
flexDirection: "column",
|
507
|
-
alignItems: "flex-start",
|
508
501
|
...styles.body
|
509
502
|
};
|
510
503
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
@@ -527,9 +520,6 @@ var PopoverFooter = (0, import_core6.forwardRef)(
|
|
527
520
|
({ className, ...rest }, ref) => {
|
528
521
|
const { styles } = usePopover();
|
529
522
|
const css = {
|
530
|
-
display: "flex",
|
531
|
-
alignItems: "center",
|
532
|
-
justifyContent: "flex-start",
|
533
523
|
...styles.footer
|
534
524
|
};
|
535
525
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/popover.tsx","../src/popover-trigger.tsx","../src/popover-anchor.tsx","../src/popover-close-button.tsx","../src/popover-content.tsx","../src/popover-header.tsx","../src/popover-body.tsx","../src/popover-footer.tsx"],"sourcesContent":["export { Popover, popoverProperties } from \"./popover\"\nexport type { PopoverProps } from \"./popover\"\nexport { PopoverTrigger } from \"./popover-trigger\"\nexport { PopoverAnchor } from \"./popover-anchor\"\nexport { PopoverCloseButton } from \"./popover-close-button\"\nexport type { PopoverCloseButtonProps } from \"./popover-close-button\"\nexport { PopoverContent } from \"./popover-content\"\nexport type { PopoverContentProps } from \"./popover-content\"\nexport { PopoverHeader } from \"./popover-header\"\nexport type { PopoverHeaderProps } from \"./popover-header\"\nexport { PopoverBody } from \"./popover-body\"\nexport type { PopoverBodyProps } from \"./popover-body\"\nexport { PopoverFooter } from \"./popover-footer\"\nexport type { PopoverFooterProps } from \"./popover-footer\"\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 { 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 { FC, PropsWithChildren, ReactElement, RefObject } from \"react\"\nimport { Children, cloneElement } from \"react\"\nimport { usePopover } from \"./popover\"\n\nexport const PopoverAnchor: FC<PropsWithChildren<{}>> = ({ children }) => {\n const child = Children.only(children) as ReactElement & {\n ref: RefObject<any>\n }\n const { getAnchorProps } = usePopover()\n\n return cloneElement(child, getAnchorProps(child.props, child.ref))\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 position: \"absolute\",\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, 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 type { DOMAttributes } from \"@yamada-ui/utils\"\nimport { cx, findChildren, funcAll, getValidChildren } from \"@yamada-ui/utils\"\nimport type { ReactNode, RefAttributes } from \"react\"\nimport { usePopover } from \"./popover\"\nimport type { PopoverProps } from \".\"\nimport { PopoverCloseButton } from \".\"\n\nexport type PopoverContentProps = MotionProps<\"section\">\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 as = \"section\",\n className,\n children,\n w,\n width,\n minW,\n minWidth,\n z: zProp,\n zIndex: zIndexProp,\n __css: __cssProp,\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 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 { z, zIndex, ...__css } = __cssProp ?? styles.container ?? {}\n const css: CSSUIObject = {\n position: \"relative\",\n w: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n outline: 0,\n ...__css,\n }\n\n w =\n w ??\n width ??\n ((styles.container?.w ?? styles.container?.width) as CSSUIProps[\"w\"])\n minW =\n minW ??\n minWidth ??\n ((styles.container?.minW ??\n styles.container?.minWidth) as CSSUIProps[\"minW\"])\n\n const resolvedZIndex = (zIndexProp ??\n zProp ??\n zIndex ??\n z) as CSSUIProps[\"zIndex\"]\n\n return (\n <ui.div\n {...getPopperProps({\n style: { visibility: isOpen ? \"visible\" : \"hidden\" },\n })}\n className=\"ui-popover\"\n w={w}\n minW={minW}\n zIndex={resolvedZIndex}\n >\n <ui.section\n as={motion[as as keyof typeof motion]}\n className={cx(\"ui-popover__content\", className)}\n {...(animation !== \"none\"\n ? getPopoverContentProps(animation, duration)\n : {})}\n {...(getPopoverProps(\n {\n ...rest,\n children: resolvedChildren(),\n },\n ref,\n ) as Omit<DOMAttributes & RefAttributes<any>, \"onDrag\">)}\n initial=\"exit\"\n animate={isOpen ? \"enter\" : \"exit\"}\n exit=\"exit\"\n onAnimationComplete={funcAll(\n onAnimationComplete,\n rest.onAnimationComplete,\n )}\n __css={css}\n />\n </ui.div>\n )\n },\n)\n","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 display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"flex-start\",\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 { 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 PopoverBodyProps = HTMLUIProps<\"main\">\n\nexport const PopoverBody = forwardRef<PopoverBodyProps, \"main\">(\n ({ className, ...rest }, ref) => {\n const { styles } = usePopover()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n ...styles.body,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-popover__body\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n","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 display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"flex-start\",\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"],"mappings":"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","names":["props","import_react","import_react","import_core","import_utils","import_jsx_runtime","import_core","import_utils","import_jsx_runtime","import_core","import_utils","import_jsx_runtime","import_core","import_utils","import_jsx_runtime","import_core","import_utils","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/popover.tsx","../src/popover-trigger.tsx","../src/popover-anchor.tsx","../src/popover-close-button.tsx","../src/popover-content.tsx","../src/popover-header.tsx","../src/popover-body.tsx","../src/popover-footer.tsx"],"sourcesContent":["export { Popover, popoverProperties } from \"./popover\"\nexport type { PopoverProps } from \"./popover\"\nexport { PopoverTrigger } from \"./popover-trigger\"\nexport { PopoverAnchor } from \"./popover-anchor\"\nexport { PopoverCloseButton } from \"./popover-close-button\"\nexport type { PopoverCloseButtonProps } from \"./popover-close-button\"\nexport { PopoverContent } from \"./popover-content\"\nexport type { PopoverContentProps } from \"./popover-content\"\nexport { PopoverHeader } from \"./popover-header\"\nexport type { PopoverHeaderProps } from \"./popover-header\"\nexport { PopoverBody } from \"./popover-body\"\nexport type { PopoverBodyProps } from \"./popover-body\"\nexport { PopoverFooter } from \"./popover-footer\"\nexport type { PopoverFooterProps } from \"./popover-footer\"\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 { 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 { FC, PropsWithChildren, ReactElement, RefObject } from \"react\"\nimport { Children, cloneElement } from \"react\"\nimport { usePopover } from \"./popover\"\n\nexport const PopoverAnchor: FC<PropsWithChildren<{}>> = ({ children }) => {\n const child = Children.only(children) as ReactElement & {\n ref: RefObject<any>\n }\n const { getAnchorProps } = usePopover()\n\n return cloneElement(child, getAnchorProps(child.props, child.ref))\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","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 type { DOMAttributes } from \"@yamada-ui/utils\"\nimport { cx, findChildren, funcAll, getValidChildren } from \"@yamada-ui/utils\"\nimport type { ReactNode, RefAttributes } from \"react\"\nimport { usePopover } from \"./popover\"\nimport type { PopoverProps } from \".\"\nimport { PopoverCloseButton } from \".\"\n\nexport type PopoverContentProps = MotionProps<\"section\">\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 as = \"section\",\n className,\n children,\n w,\n width,\n minW,\n minWidth,\n z: zProp,\n zIndex: zIndexProp,\n __css: __cssProp,\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 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 { z, zIndex, ...__css } = __cssProp ?? styles.container ?? {}\n const css: CSSUIObject = {\n position: \"relative\",\n w: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n outline: 0,\n ...__css,\n }\n\n w =\n w ??\n width ??\n ((styles.container?.w ?? styles.container?.width) as CSSUIProps[\"w\"])\n minW =\n minW ??\n minWidth ??\n ((styles.container?.minW ??\n styles.container?.minWidth) as CSSUIProps[\"minW\"])\n\n const resolvedZIndex = (zIndexProp ??\n zProp ??\n zIndex ??\n z) as CSSUIProps[\"zIndex\"]\n\n return (\n <ui.div\n {...getPopperProps({\n style: { visibility: isOpen ? \"visible\" : \"hidden\" },\n })}\n className=\"ui-popover\"\n w={w}\n minW={minW}\n zIndex={resolvedZIndex}\n >\n <ui.section\n as={motion[as as keyof typeof motion]}\n className={cx(\"ui-popover__content\", className)}\n {...(animation !== \"none\"\n ? getPopoverContentProps(animation, duration)\n : {})}\n {...(getPopoverProps(\n {\n ...rest,\n children: resolvedChildren(),\n },\n ref,\n ) as Omit<DOMAttributes & RefAttributes<any>, \"onDrag\">)}\n initial=\"exit\"\n animate={isOpen ? \"enter\" : \"exit\"}\n exit=\"exit\"\n onAnimationComplete={funcAll(\n onAnimationComplete,\n rest.onAnimationComplete,\n )}\n __css={css}\n />\n </ui.div>\n )\n },\n)\n","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 { 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 PopoverBodyProps = HTMLUIProps<\"main\">\n\nexport const PopoverBody = forwardRef<PopoverBodyProps, \"main\">(\n ({ className, ...rest }, ref) => {\n const { styles } = usePopover()\n\n const css: CSSUIObject = {\n ...styles.body,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-popover__body\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n","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"],"mappings":"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","names":["props","import_react","import_react","import_core","import_utils","import_jsx_runtime","import_core","import_utils","import_jsx_runtime","import_core","import_utils","import_jsx_runtime","import_core","import_utils","import_jsx_runtime","import_core","import_utils","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
@@ -1,22 +1,22 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
PopoverContent
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-VDGFRQUA.mjs";
|
5
5
|
import {
|
6
6
|
PopoverAnchor
|
7
7
|
} from "./chunk-EWWP3FHH.mjs";
|
8
8
|
import {
|
9
9
|
PopoverBody
|
10
|
-
} from "./chunk-
|
10
|
+
} from "./chunk-PUYWA7XM.mjs";
|
11
11
|
import {
|
12
12
|
PopoverCloseButton
|
13
|
-
} from "./chunk-
|
13
|
+
} from "./chunk-D3QTAZPJ.mjs";
|
14
14
|
import {
|
15
15
|
PopoverFooter
|
16
|
-
} from "./chunk-
|
16
|
+
} from "./chunk-MKMQ3Y5J.mjs";
|
17
17
|
import {
|
18
18
|
PopoverHeader
|
19
|
-
} from "./chunk-
|
19
|
+
} from "./chunk-7E4FMDDB.mjs";
|
20
20
|
import {
|
21
21
|
PopoverTrigger
|
22
22
|
} from "./chunk-XIRQIHLA.mjs";
|
package/dist/popover-body.js
CHANGED
@@ -67,9 +67,6 @@ var PopoverBody = (0, import_core2.forwardRef)(
|
|
67
67
|
({ className, ...rest }, ref) => {
|
68
68
|
const { styles } = usePopover();
|
69
69
|
const css = {
|
70
|
-
display: "flex",
|
71
|
-
flexDirection: "column",
|
72
|
-
alignItems: "flex-start",
|
73
70
|
...styles.body
|
74
71
|
};
|
75
72
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
package/dist/popover-body.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/popover-body.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 PopoverBodyProps = HTMLUIProps<\"main\">\n\nexport const PopoverBody = forwardRef<PopoverBodyProps, \"main\">(\n ({ className, ...rest }, ref) => {\n const { styles } = usePopover()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n ...styles.body,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-popover__body\", 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;;;AD3JK,IAAAC,sBAAA;AAZC,IAAM,kBAAc;AAAA,EACzB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,WAAW;AAE9B,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,oBAAoB,SAAS;AAAA,QAC3C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["import_core","import_utils","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/popover-body.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 PopoverBodyProps = HTMLUIProps<\"main\">\n\nexport const PopoverBody = forwardRef<PopoverBodyProps, \"main\">(\n ({ className, ...rest }, ref) => {\n const { styles } = usePopover()\n\n const css: CSSUIObject = {\n ...styles.body,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-popover__body\", 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,kBAAc;AAAA,EACzB,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,oBAAoB,SAAS;AAAA,QAC3C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["import_core","import_utils","import_jsx_runtime"]}
|
package/dist/popover-body.mjs
CHANGED
@@ -68,7 +68,6 @@ var PopoverCloseButton = (0, import_core2.forwardRef)(
|
|
68
68
|
({ onClick, ...rest }, ref) => {
|
69
69
|
const { styles, onClose } = usePopover();
|
70
70
|
const css = {
|
71
|
-
position: "absolute",
|
72
71
|
...styles.closeButton
|
73
72
|
};
|
74
73
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
@@ -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 position: \"absolute\",\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;;;AD3JK,IAAAC,sBAAA;AAVC,IAAM,yBAAqB;AAAA,EAChC,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,QAAQ;AAC7B,UAAM,EAAE,QAAQ,QAAQ,IAAI,WAAW;AAEvC,UAAM,MAAmB;AAAA,MACvB,UAAU;AAAA,MACV,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 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"]}
|
package/dist/popover-content.js
CHANGED
@@ -72,7 +72,6 @@ var PopoverCloseButton = (0, import_core2.forwardRef)(
|
|
72
72
|
({ onClick, ...rest }, ref) => {
|
73
73
|
const { styles, onClose } = usePopover();
|
74
74
|
const css = {
|
75
|
-
position: "absolute",
|
76
75
|
...styles.closeButton
|
77
76
|
};
|
78
77
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
@@ -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 type { DOMAttributes } from \"@yamada-ui/utils\"\nimport { cx, findChildren, funcAll, getValidChildren } from \"@yamada-ui/utils\"\nimport type { ReactNode, RefAttributes } from \"react\"\nimport { usePopover } from \"./popover\"\nimport type { PopoverProps } from \".\"\nimport { PopoverCloseButton } from \".\"\n\nexport type PopoverContentProps = MotionProps<\"section\">\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 as = \"section\",\n className,\n children,\n w,\n width,\n minW,\n minWidth,\n z: zProp,\n zIndex: zIndexProp,\n __css: __cssProp,\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 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 { z, zIndex, ...__css } = __cssProp ?? styles.container ?? {}\n const css: CSSUIObject = {\n position: \"relative\",\n w: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n outline: 0,\n ...__css,\n }\n\n w =\n w ??\n width ??\n ((styles.container?.w ?? styles.container?.width) as CSSUIProps[\"w\"])\n minW =\n minW ??\n minWidth ??\n ((styles.container?.minW ??\n styles.container?.minWidth) as CSSUIProps[\"minW\"])\n\n const resolvedZIndex = (zIndexProp ??\n zProp ??\n zIndex ??\n z) as CSSUIProps[\"zIndex\"]\n\n return (\n <ui.div\n {...getPopperProps({\n style: { visibility: isOpen ? \"visible\" : \"hidden\" },\n })}\n className=\"ui-popover\"\n w={w}\n minW={minW}\n zIndex={resolvedZIndex}\n >\n <ui.section\n as={motion[as as keyof typeof motion]}\n className={cx(\"ui-popover__content\", className)}\n {...(animation !== \"none\"\n ? getPopoverContentProps(animation, duration)\n : {})}\n {...(getPopoverProps(\n {\n ...rest,\n children: resolvedChildren(),\n },\n ref,\n ) as Omit<DOMAttributes & RefAttributes<any>, \"onDrag\">)}\n initial=\"exit\"\n animate={isOpen ? \"enter\" : \"exit\"}\n exit=\"exit\"\n onAnimationComplete={funcAll(\n onAnimationComplete,\n rest.onAnimationComplete,\n )}\n __css={css}\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 position: \"absolute\",\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"]}
|
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 type { DOMAttributes } from \"@yamada-ui/utils\"\nimport { cx, findChildren, funcAll, getValidChildren } from \"@yamada-ui/utils\"\nimport type { ReactNode, RefAttributes } from \"react\"\nimport { usePopover } from \"./popover\"\nimport type { PopoverProps } from \".\"\nimport { PopoverCloseButton } from \".\"\n\nexport type PopoverContentProps = MotionProps<\"section\">\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 as = \"section\",\n className,\n children,\n w,\n width,\n minW,\n minWidth,\n z: zProp,\n zIndex: zIndexProp,\n __css: __cssProp,\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 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 { z, zIndex, ...__css } = __cssProp ?? styles.container ?? {}\n const css: CSSUIObject = {\n position: \"relative\",\n w: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n outline: 0,\n ...__css,\n }\n\n w =\n w ??\n width ??\n ((styles.container?.w ?? styles.container?.width) as CSSUIProps[\"w\"])\n minW =\n minW ??\n minWidth ??\n ((styles.container?.minW ??\n styles.container?.minWidth) as CSSUIProps[\"minW\"])\n\n const resolvedZIndex = (zIndexProp ??\n zProp ??\n zIndex ??\n z) as CSSUIProps[\"zIndex\"]\n\n return (\n <ui.div\n {...getPopperProps({\n style: { visibility: isOpen ? \"visible\" : \"hidden\" },\n })}\n className=\"ui-popover\"\n w={w}\n minW={minW}\n zIndex={resolvedZIndex}\n >\n <ui.section\n as={motion[as as keyof typeof motion]}\n className={cx(\"ui-popover__content\", className)}\n {...(animation !== \"none\"\n ? getPopoverContentProps(animation, duration)\n : {})}\n {...(getPopoverProps(\n {\n ...rest,\n children: resolvedChildren(),\n },\n ref,\n ) as Omit<DOMAttributes & RefAttributes<any>, \"onDrag\">)}\n initial=\"exit\"\n animate={isOpen ? \"enter\" : \"exit\"}\n exit=\"exit\"\n onAnimationComplete={funcAll(\n onAnimationComplete,\n rest.onAnimationComplete,\n )}\n __css={css}\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":"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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,12 +1,12 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
PopoverContent
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-VDGFRQUA.mjs";
|
5
5
|
import "./chunk-EWWP3FHH.mjs";
|
6
|
-
import "./chunk-
|
7
|
-
import "./chunk-
|
8
|
-
import "./chunk-
|
9
|
-
import "./chunk-
|
6
|
+
import "./chunk-PUYWA7XM.mjs";
|
7
|
+
import "./chunk-D3QTAZPJ.mjs";
|
8
|
+
import "./chunk-MKMQ3Y5J.mjs";
|
9
|
+
import "./chunk-7E4FMDDB.mjs";
|
10
10
|
import "./chunk-XIRQIHLA.mjs";
|
11
11
|
import "./chunk-TLPTFJY2.mjs";
|
12
12
|
export {
|
package/dist/popover-footer.js
CHANGED
@@ -67,9 +67,6 @@ var PopoverFooter = (0, import_core2.forwardRef)(
|
|
67
67
|
({ className, ...rest }, ref) => {
|
68
68
|
const { styles } = usePopover();
|
69
69
|
const css = {
|
70
|
-
display: "flex",
|
71
|
-
alignItems: "center",
|
72
|
-
justifyContent: "flex-start",
|
73
70
|
...styles.footer
|
74
71
|
};
|
75
72
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
@@ -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 display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"flex-start\",\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;;;AD3JK,IAAAC,sBAAA;AAZC,IAAM,oBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,WAAW;AAE9B,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,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 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"]}
|
package/dist/popover-footer.mjs
CHANGED
package/dist/popover-header.js
CHANGED
@@ -67,9 +67,6 @@ var PopoverHeader = (0, import_core2.forwardRef)(
|
|
67
67
|
({ className, ...rest }, ref) => {
|
68
68
|
const { styles } = usePopover();
|
69
69
|
const css = {
|
70
|
-
display: "flex",
|
71
|
-
alignItems: "center",
|
72
|
-
justifyContent: "flex-start",
|
73
70
|
...styles.header
|
74
71
|
};
|
75
72
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
@@ -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 display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"flex-start\",\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;;;AD3JK,IAAAC,sBAAA;AAZC,IAAM,oBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,WAAW;AAE9B,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,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 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"]}
|
package/dist/popover-header.mjs
CHANGED
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@yamada-ui/popover",
|
3
|
-
"version": "
|
3
|
+
"version": "2.0.0-next-20240607165557",
|
4
4
|
"description": "Yamada UI popover component",
|
5
5
|
"keywords": [
|
6
6
|
"yamada",
|
@@ -36,15 +36,15 @@
|
|
36
36
|
"url": "https://github.com/yamada-ui/yamada-ui/issues"
|
37
37
|
},
|
38
38
|
"dependencies": {
|
39
|
-
"@yamada-ui/core": "1.7.1",
|
40
|
-
"@yamada-ui/utils": "1.2.1",
|
41
|
-
"@yamada-ui/close-button": "1.0.28",
|
42
|
-
"@yamada-ui/transitions": "1.0.28",
|
43
|
-
"@yamada-ui/motion": "1.0.28",
|
44
|
-
"@yamada-ui/use-popper": "1.0.27",
|
45
|
-
"@yamada-ui/use-disclosure": "1.0.14",
|
46
|
-
"@yamada-ui/use-focus": "1.0.14",
|
47
|
-
"@yamada-ui/use-animation": "1.0.27"
|
39
|
+
"@yamada-ui/core": "1.7.1-next-20240607165557",
|
40
|
+
"@yamada-ui/utils": "1.2.1-next-20240607165557",
|
41
|
+
"@yamada-ui/close-button": "1.0.28-next-20240607165557",
|
42
|
+
"@yamada-ui/transitions": "1.0.28-next-20240607165557",
|
43
|
+
"@yamada-ui/motion": "1.0.28-next-20240607165557",
|
44
|
+
"@yamada-ui/use-popper": "1.0.27-next-20240607165557",
|
45
|
+
"@yamada-ui/use-disclosure": "1.0.14-next-20240607165557",
|
46
|
+
"@yamada-ui/use-focus": "1.0.14-next-20240607165557",
|
47
|
+
"@yamada-ui/use-animation": "1.0.27-next-20240607165557"
|
48
48
|
},
|
49
49
|
"devDependencies": {
|
50
50
|
"react": "^18.0.0",
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/popover-body.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 PopoverBodyProps = HTMLUIProps<\"main\">\n\nexport const PopoverBody = forwardRef<PopoverBodyProps, \"main\">(\n ({ className, ...rest }, ref) => {\n const { styles } = usePopover()\n\n const css: CSSUIObject = {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n ...styles.body,\n }\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-popover__body\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n"],"mappings":";;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAiBb;AAZC,IAAM,cAAc;AAAA,EACzB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,WAAW;AAE9B,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,oBAAoB,SAAS;AAAA,QAC3C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/popover-footer.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 display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"flex-start\",\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"],"mappings":";;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAiBb;AAZC,IAAM,gBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,WAAW;AAE9B,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,sBAAsB,SAAS;AAAA,QAC7C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/popover-close-button.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 position: \"absolute\",\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":";;;;;;AACA,SAAS,mBAAmB;AAE5B,SAAS,kBAAkB;AAC3B,SAAS,IAAI,kBAAkB;AAezB;AAVC,IAAM,qBAAqB;AAAA,EAChC,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,QAAQ;AAC7B,UAAM,EAAE,QAAQ,QAAQ,IAAI,WAAW;AAEvC,UAAM,MAAmB;AAAA,MACvB,UAAU;AAAA,MACV,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,0BAA0B;AAAA,QACxC,OAAO;AAAA,QACP,SAAS,WAAW,SAAS,CAAC,OAAO;AACnC,aAAG,gBAAgB;AACnB;AAAA,QACF,CAAC;AAAA,QACD,MAAK;AAAA,QACJ,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":[]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../src/popover-header.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 display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"flex-start\",\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"],"mappings":";;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAiBb;AAZC,IAAM,gBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,WAAW;AAE9B,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,sBAAsB,SAAS;AAAA,QAC7C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":[]}
|
File without changes
|