@yamada-ui/popover 1.3.4-next-20241005220055 → 1.3.4-next-20241008193728
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-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
|