@yamada-ui/popover 1.3.4-next-20241005220055 → 1.3.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{chunk-FAPYWOWO.mjs → chunk-7UFHYE2W.mjs} +24 -24
- package/dist/chunk-7UFHYE2W.mjs.map +1 -0
- package/dist/{chunk-4XXWFN6L.mjs → chunk-IESY3Y4P.mjs} +2 -2
- package/dist/{chunk-4XXWFN6L.mjs.map → chunk-IESY3Y4P.mjs.map} +1 -1
- package/dist/{chunk-P4MJ5IU7.mjs → chunk-J22VBFAF.mjs} +4 -4
- package/dist/{chunk-P4MJ5IU7.mjs.map → chunk-J22VBFAF.mjs.map} +1 -1
- package/dist/{chunk-6THCC2BT.mjs → chunk-KBEWDJLR.mjs} +42 -42
- package/dist/chunk-KBEWDJLR.mjs.map +1 -0
- package/dist/{chunk-ITQ2KUJZ.mjs → chunk-QQSUS4YW.mjs} +4 -4
- package/dist/chunk-QQSUS4YW.mjs.map +1 -0
- package/dist/{chunk-FIADAGVP.mjs → chunk-RXYUC4JZ.mjs} +2 -2
- package/dist/{chunk-FIADAGVP.mjs.map → chunk-RXYUC4JZ.mjs.map} +1 -1
- package/dist/{chunk-2EUPTTRC.mjs → chunk-S3KWEQPS.mjs} +4 -4
- package/dist/{chunk-2EUPTTRC.mjs.map → chunk-S3KWEQPS.mjs.map} +1 -1
- package/dist/{chunk-GXJI2MI3.mjs → chunk-YSYN7XPR.mjs} +4 -4
- package/dist/{chunk-GXJI2MI3.mjs.map → chunk-YSYN7XPR.mjs.map} +1 -1
- package/dist/index.d.mts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +136 -136
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +8 -8
- package/dist/popover-anchor.js +37 -37
- package/dist/popover-anchor.js.map +1 -1
- package/dist/popover-anchor.mjs +2 -2
- package/dist/popover-body.js +38 -38
- package/dist/popover-body.js.map +1 -1
- package/dist/popover-body.mjs +2 -2
- package/dist/popover-close-button.js +39 -39
- package/dist/popover-close-button.js.map +1 -1
- package/dist/popover-close-button.mjs +2 -2
- package/dist/popover-content.js +60 -60
- package/dist/popover-content.js.map +1 -1
- package/dist/popover-content.mjs +3 -3
- package/dist/popover-footer.js +38 -38
- package/dist/popover-footer.js.map +1 -1
- package/dist/popover-footer.mjs +2 -2
- package/dist/popover-header.js +38 -38
- package/dist/popover-header.js.map +1 -1
- package/dist/popover-header.mjs +2 -2
- package/dist/popover-trigger.js +37 -37
- package/dist/popover-trigger.js.map +1 -1
- package/dist/popover-trigger.mjs +2 -2
- package/dist/popover.d.mts +62 -62
- package/dist/popover.d.ts +62 -62
- package/dist/popover.js +37 -37
- package/dist/popover.js.map +1 -1
- package/dist/popover.mjs +1 -1
- package/package.json +10 -10
- package/dist/chunk-6THCC2BT.mjs.map +0 -1
- package/dist/chunk-FAPYWOWO.mjs.map +0 -1
- package/dist/chunk-ITQ2KUJZ.mjs.map +0 -1
@@ -58,43 +58,43 @@ var popoverProperties = [
|
|
58
58
|
"duration"
|
59
59
|
];
|
60
60
|
var [PopoverProvider, usePopover] = (0, import_utils.createContext)({
|
61
|
-
|
62
|
-
|
61
|
+
name: "PopoverContext",
|
62
|
+
errorMessage: `usePopoverContext returned is 'undefined'. Seems you forgot to wrap the components in "<Popover />"`
|
63
63
|
});
|
64
64
|
var Popover = (props) => {
|
65
65
|
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Popover", props);
|
66
66
|
const {
|
67
|
-
|
68
|
-
initialFocusRef,
|
69
|
-
restoreFocus = true,
|
67
|
+
animation = "scale",
|
70
68
|
autoFocus = true,
|
69
|
+
children,
|
70
|
+
closeDelay = 200,
|
71
71
|
closeOnBlur = true,
|
72
|
-
closeOnEsc = true,
|
73
72
|
closeOnButton = true,
|
74
|
-
|
75
|
-
|
76
|
-
|
73
|
+
closeOnEsc = true,
|
74
|
+
duration,
|
75
|
+
initialFocusRef,
|
77
76
|
isLazy,
|
78
77
|
lazyBehavior = "unmount",
|
79
|
-
|
80
|
-
duration,
|
78
|
+
openDelay = 200,
|
81
79
|
relatedRef,
|
80
|
+
restoreFocus = true,
|
81
|
+
trigger = "click",
|
82
82
|
...rest
|
83
83
|
} = (0, import_core.omitThemeProps)(mergedProps);
|
84
|
-
const { isOpen,
|
84
|
+
const { isOpen, onClose, onOpen, onToggle } = (0, import_use_disclosure.useDisclosure)(mergedProps);
|
85
85
|
const anchorRef = (0, import_react.useRef)(null);
|
86
86
|
const triggerRef = (0, import_react.useRef)(null);
|
87
87
|
const popoverRef = (0, import_react.useRef)(null);
|
88
88
|
const { present, onAnimationComplete } = (0, import_use_animation.useAnimationObserver)({
|
89
|
-
|
90
|
-
|
89
|
+
ref: popoverRef,
|
90
|
+
isOpen
|
91
91
|
});
|
92
92
|
const openTimeout = (0, import_react.useRef)(void 0);
|
93
93
|
const closeTimeout = (0, import_react.useRef)(void 0);
|
94
94
|
const isHoveringRef = (0, import_react.useRef)(false);
|
95
95
|
const hasBeenOpened = (0, import_react.useRef)(false);
|
96
96
|
if (isOpen) hasBeenOpened.current = true;
|
97
|
-
const {
|
97
|
+
const { forceUpdate, referenceRef, transformOrigin, getPopperProps } = (0, import_use_popper.usePopper)({
|
98
98
|
...rest,
|
99
99
|
enabled: isOpen
|
100
100
|
});
|
@@ -105,39 +105,36 @@ var Popover = (props) => {
|
|
105
105
|
};
|
106
106
|
}, []);
|
107
107
|
(0, import_use_focus.useFocusOnPointerDown)({
|
108
|
-
|
109
|
-
|
108
|
+
ref: triggerRef,
|
109
|
+
enabled: isOpen
|
110
110
|
});
|
111
111
|
(0, import_use_focus.useFocusOnHide)(popoverRef, {
|
112
112
|
focusRef: triggerRef,
|
113
|
-
|
114
|
-
|
113
|
+
shouldFocus: restoreFocus && (trigger === "click" || trigger === "contextmenu"),
|
114
|
+
visible: isOpen
|
115
115
|
});
|
116
116
|
(0, import_use_focus.useFocusOnShow)(popoverRef, {
|
117
117
|
focusRef: initialFocusRef,
|
118
|
-
|
119
|
-
|
118
|
+
shouldFocus: autoFocus && (trigger === "click" || trigger === "contextmenu"),
|
119
|
+
visible: isOpen
|
120
120
|
});
|
121
121
|
const shouldRenderChildren = (0, import_use_disclosure.useLazyDisclosure)({
|
122
|
-
wasSelected: hasBeenOpened.current,
|
123
122
|
enabled: isLazy,
|
123
|
+
isSelected: present,
|
124
124
|
mode: lazyBehavior,
|
125
|
-
|
125
|
+
wasSelected: hasBeenOpened.current
|
126
126
|
});
|
127
127
|
const getPopoverProps = (0, import_react.useCallback)(
|
128
128
|
(props2 = {}, ref = null) => {
|
129
129
|
const popoverProps = {
|
130
130
|
...props2,
|
131
|
+
ref: (0, import_utils.mergeRefs)(popoverRef, ref),
|
131
132
|
style: {
|
132
133
|
...props2.style,
|
133
134
|
transformOrigin
|
134
135
|
},
|
135
|
-
ref: (0, import_utils.mergeRefs)(popoverRef, ref),
|
136
136
|
children: shouldRenderChildren ? props2.children : null,
|
137
137
|
tabIndex: -1,
|
138
|
-
onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, (ev) => {
|
139
|
-
if (closeOnEsc && ev.key === "Escape") onClose();
|
140
|
-
}),
|
141
138
|
onBlur: (0, import_utils.handlerAll)(props2.onBlur, (ev) => {
|
142
139
|
const relatedTarget = (0, import_utils.getEventRelatedTarget)(ev);
|
143
140
|
const targetIsPopover = (0, import_utils.isContains)(popoverRef.current, relatedTarget);
|
@@ -145,6 +142,9 @@ var Popover = (props) => {
|
|
145
142
|
const targetIsRelated = (relatedRef == null ? void 0 : relatedRef.current) ? (0, import_utils.isContains)(relatedRef.current, relatedTarget) : false;
|
146
143
|
const isValidBlur = !targetIsPopover && !targetIsTrigger && !targetIsRelated;
|
147
144
|
if (isOpen && closeOnBlur && isValidBlur) onClose();
|
145
|
+
}),
|
146
|
+
onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, (ev) => {
|
147
|
+
if (closeOnEsc && ev.key === "Escape") onClose();
|
148
148
|
})
|
149
149
|
};
|
150
150
|
if (trigger === "hover") {
|
@@ -256,23 +256,23 @@ var Popover = (props) => {
|
|
256
256
|
PopoverProvider,
|
257
257
|
{
|
258
258
|
value: {
|
259
|
-
|
260
|
-
onClose,
|
259
|
+
animation,
|
261
260
|
closeOnButton,
|
262
|
-
|
261
|
+
duration,
|
263
262
|
forceUpdate,
|
264
|
-
|
263
|
+
isOpen,
|
264
|
+
styles,
|
265
265
|
getAnchorProps,
|
266
|
-
getPopperProps,
|
267
266
|
getPopoverProps,
|
268
|
-
|
269
|
-
|
270
|
-
|
267
|
+
getPopperProps,
|
268
|
+
getTriggerProps,
|
269
|
+
onAnimationComplete,
|
270
|
+
onClose
|
271
271
|
},
|
272
272
|
children: (0, import_utils.runIfFunc)(children, {
|
273
|
+
forceUpdate,
|
273
274
|
isOpen,
|
274
|
-
onClose
|
275
|
-
forceUpdate
|
275
|
+
onClose
|
276
276
|
})
|
277
277
|
}
|
278
278
|
);
|
@@ -294,12 +294,12 @@ var PopoverCloseButton = (0, import_core2.forwardRef)(
|
|
294
294
|
{
|
295
295
|
ref,
|
296
296
|
className: (0, import_utils2.cx)("ui-popover__close-button"),
|
297
|
-
|
297
|
+
size: "sm",
|
298
298
|
onClick: (0, import_utils2.handlerAll)(onClick, (ev) => {
|
299
299
|
ev.stopPropagation();
|
300
300
|
onClose == null ? void 0 : onClose();
|
301
301
|
}),
|
302
|
-
|
302
|
+
__css: css,
|
303
303
|
...rest
|
304
304
|
}
|
305
305
|
);
|
@@ -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 interface PopoverCloseButtonProps extends 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\nPopoverCloseButton.displayName = \"PopoverCloseButton\"\nPopoverCloseButton.__ui__ = \"PopoverCloseButton\"\n","import type {\n CSSUIObject,\n FC,\n HTMLUIPropsWithRef,\n PropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport { useComponentMultiStyle, omitThemeProps } from \"@yamada-ui/core\"\nimport type { MotionProps, MotionTransitionProps } 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 {\n createContext,\n getEventRelatedTarget,\n handlerAll,\n isContains,\n mergeRefs,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport type {\n ComponentProps,\n PropsWithChildren,\n RefAttributes,\n RefObject,\n} from \"react\"\nimport { useCallback, useEffect, useRef } from \"react\"\n\nexport type PopoverProperty = (typeof popoverProperties)[number]\n\nexport const popoverProperties = [\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] as const\n\nexport interface ComboBoxProps\n extends Omit<\n PopoverOptions,\n | \"initialFocusRef\"\n | \"relatedRef\"\n | \"autoFocus\"\n | \"restoreFocus\"\n | \"closeOnButton\"\n | \"trigger\"\n >,\n Omit<UsePopperProps, \"enabled\"> {}\n\ninterface 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 transferred to the first interactive element when the popover opens.\n *\n * @default true\n */\n autoFocus?: boolean\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`, the popover will close when you blur out it by clicking outside or tabbing out.\n *\n * @default true\n */\n closeOnBlur?: boolean\n /**\n * If `true`, the popover will close when you hit the `Esc` key.\n *\n * @default true\n */\n closeOnEsc?: boolean\n /**\n * If `true`, display the popover close button.\n *\n * @default true\n */\n closeOnButton?: boolean\n /**\n * The interaction that triggers the popover.\n *\n * - `hover`: means the popover will open when you hover with mouse or focus with keyboard on the popover trigger.\n * - `click`: means the popover will open on click or press `Enter` to `Space` on keyboard.\n *\n * @default 'click'\n */\n trigger?: \"click\" | \"hover\" | \"never\" | \"contextmenu\"\n /**\n * The number of delay time to open.\n *\n * @default 200\n */\n openDelay?: number\n /**\n * The number of delay time to close.\n *\n * @default 200\n */\n closeDelay?: number\n /**\n * If `true`, the PopoverContent rendering will be deferred until the popover is open.\n *\n * @default false\n */\n isLazy?: boolean\n /**\n * The lazy behavior of popover's content when not visible. Only works when `isLazy={true}`\n *\n * - `unmount`: The popover's content is always unmounted when not open.\n * - `keepMounted`: The popover's content initially unmounted, but stays mounted when popover is open.\n *\n * @default 'unmount'\n */\n lazyBehavior?: LazyMode\n /**\n * The animation of the popover.\n *\n * @default 'scale'\n */\n animation?: \"scale\" | \"top\" | \"right\" | \"left\" | \"bottom\" | \"none\"\n /**\n * The animation duration.\n */\n duration?: MotionTransitionProps[\"duration\"]\n}\n\nexport interface PopoverProps\n extends ThemeProps<\"Popover\">,\n Omit<UsePopperProps, \"enabled\">,\n PropsWithChildren<PopoverOptions> {}\n\ninterface PopoverContext\n extends 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<ComponentProps<\"div\">>\n getPopoverProps: PropGetter<MotionProps<\"section\">, MotionProps<\"section\">>\n styles: { [key: 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] = useComponentMultiStyle(\"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: PropGetter<\n MotionProps<\"section\">,\n MotionProps<\"section\">\n > = useCallback(\n (props = {}, ref = null) => {\n const popoverProps: MotionProps & 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: HTMLUIPropsWithRef = {\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\nPopover.displayName = \"Popover\"\nPopover.__ui__ = \"Popover\"\n"],"mappings":"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","names":["import_core","import_utils","props","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 type { CSSUIObject } from \"@yamada-ui/core\"\nimport { CloseButton } from \"@yamada-ui/close-button\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport { usePopover } from \"./popover\"\n\nexport interface PopoverCloseButtonProps extends 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 size=\"sm\"\n onClick={handlerAll(onClick, (ev) => {\n ev.stopPropagation()\n onClose?.()\n })}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nPopoverCloseButton.displayName = \"PopoverCloseButton\"\nPopoverCloseButton.__ui__ = \"PopoverCloseButton\"\n","import type {\n CSSUIObject,\n FC,\n HTMLUIPropsWithRef,\n PropGetter,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps, MotionTransitionProps } from \"@yamada-ui/motion\"\nimport type { LazyMode } from \"@yamada-ui/use-disclosure\"\nimport type { UsePopperProps } from \"@yamada-ui/use-popper\"\nimport type {\n ComponentProps,\n PropsWithChildren,\n RefAttributes,\n RefObject,\n} from \"react\"\nimport { omitThemeProps, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { useAnimationObserver } from \"@yamada-ui/use-animation\"\nimport { useDisclosure, useLazyDisclosure } from \"@yamada-ui/use-disclosure\"\nimport {\n useFocusOnHide,\n useFocusOnPointerDown,\n useFocusOnShow,\n} from \"@yamada-ui/use-focus\"\nimport { popperProperties, usePopper } from \"@yamada-ui/use-popper\"\nimport {\n createContext,\n getEventRelatedTarget,\n handlerAll,\n isContains,\n mergeRefs,\n runIfFunc,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useRef } from \"react\"\n\nexport type PopoverProperty = (typeof popoverProperties)[number]\n\nexport const popoverProperties = [\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] as const\n\nexport interface ComboBoxProps\n extends Omit<\n PopoverOptions,\n | \"autoFocus\"\n | \"closeOnButton\"\n | \"initialFocusRef\"\n | \"relatedRef\"\n | \"restoreFocus\"\n | \"trigger\"\n >,\n Omit<UsePopperProps, \"enabled\"> {}\n\ninterface PopoverOptions {\n /**\n * The animation of the popover.\n *\n * @default 'scale'\n */\n animation?: \"bottom\" | \"left\" | \"none\" | \"right\" | \"scale\" | \"top\"\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 * The number of delay time to close.\n *\n * @default 200\n */\n closeDelay?: number\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`, display the popover close button.\n *\n * @default true\n */\n closeOnButton?: 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`, the popover will be initially opened.\n */\n defaultIsOpen?: boolean\n /**\n * The animation duration.\n */\n duration?: MotionTransitionProps[\"duration\"]\n /**\n * The `ref` of the element that should receive focus when the popover opens.\n */\n initialFocusRef?: RefObject<{ focus(): void }>\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 * If `true`, the popover will be opened.\n */\n isOpen?: 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 number of delay time to open.\n *\n * @default 200\n */\n openDelay?: number\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 * 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\" | \"contextmenu\" | \"hover\" | \"never\"\n /**\n * Callback fired when the popover closes.\n */\n onClose?: () => void\n /**\n * Callback fired when the popover opens.\n */\n onOpen?: () => void\n}\n\nexport interface PopoverProps\n extends ThemeProps<\"Popover\">,\n Omit<UsePopperProps, \"enabled\">,\n PropsWithChildren<PopoverOptions> {}\n\ninterface PopoverContext\n extends Pick<\n PopoverOptions,\n \"animation\" | \"closeOnButton\" | \"duration\" | \"isOpen\" | \"onClose\"\n > {\n forceUpdate: () => undefined | void\n styles: { [key: string]: CSSUIObject | undefined }\n getAnchorProps: PropGetter\n getPopoverProps: PropGetter<MotionProps<\"section\">, MotionProps<\"section\">>\n getPopperProps: PropGetter<ComponentProps<\"div\">>\n getTriggerProps: PropGetter\n onAnimationComplete: () => void\n}\n\nconst [PopoverProvider, usePopover] = createContext<PopoverContext>({\n name: \"PopoverContext\",\n errorMessage: `usePopoverContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Popover />\"`,\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] = useComponentMultiStyle(\"Popover\", props)\n const {\n animation = \"scale\",\n autoFocus = true,\n children,\n closeDelay = 200,\n closeOnBlur = true,\n closeOnButton = true,\n closeOnEsc = true,\n duration,\n initialFocusRef,\n isLazy,\n lazyBehavior = \"unmount\",\n openDelay = 200,\n relatedRef,\n restoreFocus = true,\n trigger = \"click\",\n ...rest\n } = omitThemeProps(mergedProps)\n\n const { isOpen, onClose, onOpen, 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 ref: popoverRef,\n isOpen,\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 { forceUpdate, referenceRef, transformOrigin, getPopperProps } =\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 ref: triggerRef,\n enabled: isOpen,\n })\n\n useFocusOnHide(popoverRef, {\n focusRef: triggerRef,\n shouldFocus:\n restoreFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n visible: isOpen,\n })\n\n useFocusOnShow(popoverRef, {\n focusRef: initialFocusRef,\n shouldFocus:\n autoFocus && (trigger === \"click\" || trigger === \"contextmenu\"),\n visible: isOpen,\n })\n\n const shouldRenderChildren = useLazyDisclosure({\n enabled: isLazy,\n isSelected: present,\n mode: lazyBehavior,\n wasSelected: hasBeenOpened.current,\n })\n\n const getPopoverProps: PropGetter<\n MotionProps<\"section\">,\n MotionProps<\"section\">\n > = useCallback(\n (props = {}, ref = null) => {\n const popoverProps: MotionProps & RefAttributes<any> = {\n ...props,\n ref: mergeRefs(popoverRef, ref),\n style: {\n ...props.style,\n transformOrigin,\n },\n children: shouldRenderChildren ? props.children : null,\n tabIndex: -1,\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 onKeyDown: handlerAll(props.onKeyDown, (ev) => {\n if (closeOnEsc && ev.key === \"Escape\") 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: HTMLUIPropsWithRef = {\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 animation,\n closeOnButton,\n duration,\n forceUpdate,\n isOpen,\n styles,\n getAnchorProps,\n getPopoverProps,\n getPopperProps,\n getTriggerProps,\n onAnimationComplete,\n onClose,\n }}\n >\n {runIfFunc(children, {\n forceUpdate,\n isOpen,\n onClose,\n })}\n </PopoverProvider>\n )\n}\n\nPopover.displayName = \"Popover\"\nPopover.__ui__ = \"Popover\"\n"],"mappings":"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","names":["import_core","import_utils","props","import_jsx_runtime"]}
|
package/dist/popover-content.js
CHANGED
@@ -60,43 +60,43 @@ var popoverProperties = [
|
|
60
60
|
"duration"
|
61
61
|
];
|
62
62
|
var [PopoverProvider, usePopover] = (0, import_utils.createContext)({
|
63
|
-
|
64
|
-
|
63
|
+
name: "PopoverContext",
|
64
|
+
errorMessage: `usePopoverContext returned is 'undefined'. Seems you forgot to wrap the components in "<Popover />"`
|
65
65
|
});
|
66
66
|
var Popover = (props) => {
|
67
67
|
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Popover", props);
|
68
68
|
const {
|
69
|
-
|
70
|
-
initialFocusRef,
|
71
|
-
restoreFocus = true,
|
69
|
+
animation = "scale",
|
72
70
|
autoFocus = true,
|
71
|
+
children,
|
72
|
+
closeDelay = 200,
|
73
73
|
closeOnBlur = true,
|
74
|
-
closeOnEsc = true,
|
75
74
|
closeOnButton = true,
|
76
|
-
|
77
|
-
|
78
|
-
|
75
|
+
closeOnEsc = true,
|
76
|
+
duration,
|
77
|
+
initialFocusRef,
|
79
78
|
isLazy,
|
80
79
|
lazyBehavior = "unmount",
|
81
|
-
|
82
|
-
duration,
|
80
|
+
openDelay = 200,
|
83
81
|
relatedRef,
|
82
|
+
restoreFocus = true,
|
83
|
+
trigger = "click",
|
84
84
|
...rest
|
85
85
|
} = (0, import_core.omitThemeProps)(mergedProps);
|
86
|
-
const { isOpen,
|
86
|
+
const { isOpen, onClose, onOpen, onToggle } = (0, import_use_disclosure.useDisclosure)(mergedProps);
|
87
87
|
const anchorRef = (0, import_react.useRef)(null);
|
88
88
|
const triggerRef = (0, import_react.useRef)(null);
|
89
89
|
const popoverRef = (0, import_react.useRef)(null);
|
90
90
|
const { present, onAnimationComplete } = (0, import_use_animation.useAnimationObserver)({
|
91
|
-
|
92
|
-
|
91
|
+
ref: popoverRef,
|
92
|
+
isOpen
|
93
93
|
});
|
94
94
|
const openTimeout = (0, import_react.useRef)(void 0);
|
95
95
|
const closeTimeout = (0, import_react.useRef)(void 0);
|
96
96
|
const isHoveringRef = (0, import_react.useRef)(false);
|
97
97
|
const hasBeenOpened = (0, import_react.useRef)(false);
|
98
98
|
if (isOpen) hasBeenOpened.current = true;
|
99
|
-
const {
|
99
|
+
const { forceUpdate, referenceRef, transformOrigin, getPopperProps } = (0, import_use_popper.usePopper)({
|
100
100
|
...rest,
|
101
101
|
enabled: isOpen
|
102
102
|
});
|
@@ -107,39 +107,36 @@ var Popover = (props) => {
|
|
107
107
|
};
|
108
108
|
}, []);
|
109
109
|
(0, import_use_focus.useFocusOnPointerDown)({
|
110
|
-
|
111
|
-
|
110
|
+
ref: triggerRef,
|
111
|
+
enabled: isOpen
|
112
112
|
});
|
113
113
|
(0, import_use_focus.useFocusOnHide)(popoverRef, {
|
114
114
|
focusRef: triggerRef,
|
115
|
-
|
116
|
-
|
115
|
+
shouldFocus: restoreFocus && (trigger === "click" || trigger === "contextmenu"),
|
116
|
+
visible: isOpen
|
117
117
|
});
|
118
118
|
(0, import_use_focus.useFocusOnShow)(popoverRef, {
|
119
119
|
focusRef: initialFocusRef,
|
120
|
-
|
121
|
-
|
120
|
+
shouldFocus: autoFocus && (trigger === "click" || trigger === "contextmenu"),
|
121
|
+
visible: isOpen
|
122
122
|
});
|
123
123
|
const shouldRenderChildren = (0, import_use_disclosure.useLazyDisclosure)({
|
124
|
-
wasSelected: hasBeenOpened.current,
|
125
124
|
enabled: isLazy,
|
125
|
+
isSelected: present,
|
126
126
|
mode: lazyBehavior,
|
127
|
-
|
127
|
+
wasSelected: hasBeenOpened.current
|
128
128
|
});
|
129
129
|
const getPopoverProps = (0, import_react.useCallback)(
|
130
130
|
(props2 = {}, ref = null) => {
|
131
131
|
const popoverProps = {
|
132
132
|
...props2,
|
133
|
+
ref: (0, import_utils.mergeRefs)(popoverRef, ref),
|
133
134
|
style: {
|
134
135
|
...props2.style,
|
135
136
|
transformOrigin
|
136
137
|
},
|
137
|
-
ref: (0, import_utils.mergeRefs)(popoverRef, ref),
|
138
138
|
children: shouldRenderChildren ? props2.children : null,
|
139
139
|
tabIndex: -1,
|
140
|
-
onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, (ev) => {
|
141
|
-
if (closeOnEsc && ev.key === "Escape") onClose();
|
142
|
-
}),
|
143
140
|
onBlur: (0, import_utils.handlerAll)(props2.onBlur, (ev) => {
|
144
141
|
const relatedTarget = (0, import_utils.getEventRelatedTarget)(ev);
|
145
142
|
const targetIsPopover = (0, import_utils.isContains)(popoverRef.current, relatedTarget);
|
@@ -147,6 +144,9 @@ var Popover = (props) => {
|
|
147
144
|
const targetIsRelated = (relatedRef == null ? void 0 : relatedRef.current) ? (0, import_utils.isContains)(relatedRef.current, relatedTarget) : false;
|
148
145
|
const isValidBlur = !targetIsPopover && !targetIsTrigger && !targetIsRelated;
|
149
146
|
if (isOpen && closeOnBlur && isValidBlur) onClose();
|
147
|
+
}),
|
148
|
+
onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, (ev) => {
|
149
|
+
if (closeOnEsc && ev.key === "Escape") onClose();
|
150
150
|
})
|
151
151
|
};
|
152
152
|
if (trigger === "hover") {
|
@@ -258,23 +258,23 @@ var Popover = (props) => {
|
|
258
258
|
PopoverProvider,
|
259
259
|
{
|
260
260
|
value: {
|
261
|
-
|
262
|
-
onClose,
|
261
|
+
animation,
|
263
262
|
closeOnButton,
|
264
|
-
|
263
|
+
duration,
|
265
264
|
forceUpdate,
|
266
|
-
|
265
|
+
isOpen,
|
266
|
+
styles,
|
267
267
|
getAnchorProps,
|
268
|
-
getPopperProps,
|
269
268
|
getPopoverProps,
|
270
|
-
|
271
|
-
|
272
|
-
|
269
|
+
getPopperProps,
|
270
|
+
getTriggerProps,
|
271
|
+
onAnimationComplete,
|
272
|
+
onClose
|
273
273
|
},
|
274
274
|
children: (0, import_utils.runIfFunc)(children, {
|
275
|
+
forceUpdate,
|
275
276
|
isOpen,
|
276
|
-
onClose
|
277
|
-
forceUpdate
|
277
|
+
onClose
|
278
278
|
})
|
279
279
|
}
|
280
280
|
);
|
@@ -299,12 +299,12 @@ var PopoverCloseButton = (0, import_core2.forwardRef)(
|
|
299
299
|
{
|
300
300
|
ref,
|
301
301
|
className: (0, import_utils2.cx)("ui-popover__close-button"),
|
302
|
-
|
302
|
+
size: "sm",
|
303
303
|
onClick: (0, import_utils2.handlerAll)(onClick, (ev) => {
|
304
304
|
ev.stopPropagation();
|
305
305
|
onClose == null ? void 0 : onClose();
|
306
306
|
}),
|
307
|
-
|
307
|
+
__css: css,
|
308
308
|
...rest
|
309
309
|
}
|
310
310
|
);
|
@@ -317,9 +317,9 @@ PopoverCloseButton.__ui__ = "PopoverCloseButton";
|
|
317
317
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
318
318
|
var getPopoverContentProps = (animation = "scale", duration) => {
|
319
319
|
const custom = {
|
320
|
-
reverse: true,
|
321
320
|
duration,
|
322
321
|
enter: { visibility: "visible" },
|
322
|
+
reverse: true,
|
323
323
|
transitionEnd: { exit: { visibility: "hidden" } }
|
324
324
|
};
|
325
325
|
switch (animation) {
|
@@ -354,29 +354,29 @@ var PopoverContent = (0, import_motion.motionForwardRef)(
|
|
354
354
|
({
|
355
355
|
as = "section",
|
356
356
|
className,
|
357
|
-
containerProps,
|
358
357
|
children,
|
359
|
-
w,
|
360
|
-
width,
|
361
|
-
minW,
|
362
|
-
minWidth,
|
363
358
|
maxW,
|
364
359
|
maxWidth,
|
360
|
+
minW,
|
361
|
+
minWidth,
|
362
|
+
w,
|
363
|
+
width,
|
365
364
|
z,
|
366
365
|
zIndex,
|
366
|
+
containerProps,
|
367
367
|
__css,
|
368
368
|
...rest
|
369
369
|
}, ref) => {
|
370
370
|
var _a, _b, _c, _d, _e;
|
371
371
|
const {
|
372
|
-
isOpen,
|
373
|
-
closeOnButton,
|
374
|
-
getPopperProps,
|
375
|
-
getPopoverProps,
|
376
|
-
onAnimationComplete,
|
377
372
|
animation,
|
373
|
+
closeOnButton,
|
378
374
|
duration,
|
379
|
-
|
375
|
+
isOpen,
|
376
|
+
styles,
|
377
|
+
getPopoverProps,
|
378
|
+
getPopperProps,
|
379
|
+
onAnimationComplete
|
380
380
|
} = usePopover();
|
381
381
|
const validChildren = (0, import_utils3.getValidChildren)(children);
|
382
382
|
const [customPopoverCloseButton, ...cloneChildren] = (0, import_utils3.findChildren)(
|
@@ -386,21 +386,21 @@ var PopoverContent = (0, import_motion.motionForwardRef)(
|
|
386
386
|
const Component = (0, import_react2.useMemo)(() => (0, import_motion.motion)(as), [as]);
|
387
387
|
const css = (_a = __css != null ? __css : styles.container) != null ? _a : {};
|
388
388
|
const computedCSS = {
|
389
|
-
position: "relative",
|
390
|
-
w: "100%",
|
391
389
|
display: "flex",
|
392
390
|
flexDirection: "column",
|
393
391
|
outline: 0,
|
392
|
+
position: "relative",
|
393
|
+
w: "100%",
|
394
394
|
...css
|
395
395
|
};
|
396
396
|
width != null ? width : width = w;
|
397
|
-
width != null ? width : width = (_b = css
|
397
|
+
width != null ? width : width = (_b = css.width) != null ? _b : css.w;
|
398
398
|
minWidth != null ? minWidth : minWidth = minW;
|
399
|
-
minWidth != null ? minWidth : minWidth = (_c = css
|
399
|
+
minWidth != null ? minWidth : minWidth = (_c = css.minWidth) != null ? _c : css.minW;
|
400
400
|
maxWidth != null ? maxWidth : maxWidth = maxW;
|
401
|
-
maxWidth != null ? maxWidth : maxWidth = (_d = css
|
401
|
+
maxWidth != null ? maxWidth : maxWidth = (_d = css.maxWidth) != null ? _d : css.maxW;
|
402
402
|
zIndex != null ? zIndex : zIndex = z;
|
403
|
-
zIndex != null ? zIndex : zIndex = (_e = css
|
403
|
+
zIndex != null ? zIndex : zIndex = (_e = css.zIndex) != null ? _e : css.z;
|
404
404
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
405
405
|
import_core3.ui.div,
|
406
406
|
{
|
@@ -408,10 +408,10 @@ var PopoverContent = (0, import_motion.motionForwardRef)(
|
|
408
408
|
style: { visibility: isOpen ? "visible" : "hidden" }
|
409
409
|
}),
|
410
410
|
className: "ui-popover",
|
411
|
+
maxWidth,
|
412
|
+
minWidth,
|
411
413
|
outline: "none",
|
412
414
|
width,
|
413
|
-
minWidth,
|
414
|
-
maxWidth,
|
415
415
|
zIndex,
|
416
416
|
...containerProps,
|
417
417
|
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
@@ -420,9 +420,9 @@ var PopoverContent = (0, import_motion.motionForwardRef)(
|
|
420
420
|
className: (0, import_utils3.cx)("ui-popover__content", className),
|
421
421
|
...animation !== "none" ? getPopoverContentProps(animation, duration) : {},
|
422
422
|
...getPopoverProps(rest, ref),
|
423
|
-
initial: "exit",
|
424
423
|
animate: isOpen ? "enter" : "exit",
|
425
424
|
exit: "exit",
|
425
|
+
initial: "exit",
|
426
426
|
onAnimationComplete: (0, import_utils3.funcAll)(
|
427
427
|
onAnimationComplete,
|
428
428
|
rest.onAnimationComplete
|