@yamada-ui/popover 0.1.10 → 0.2.0
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-2NALYFOE.mjs +22 -0
- package/dist/chunk-LPYOVPSE.mjs +117 -0
- package/dist/chunk-MRA7DCWU.mjs +36 -0
- package/dist/chunk-PGWQGH7T.mjs +24 -0
- package/dist/chunk-TEP6TGUO.mjs +15 -0
- package/dist/chunk-TUH3DDWH.mjs +15 -0
- package/dist/chunk-YLDMHQCU.mjs +24 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -4
- package/dist/index.mjs +21 -11
- package/dist/popover-anchor.mjs +1 -1
- package/dist/popover-body.mjs +1 -1
- package/dist/popover-close-button.mjs +1 -1
- package/dist/popover-content.mjs +7 -1
- package/dist/popover-footer.mjs +1 -1
- package/dist/popover-header.mjs +1 -1
- package/dist/popover-trigger.mjs +1 -1
- package/dist/popover.d.ts +83 -6
- package/package.json +7 -7
- package/dist/chunk-O75PU3DP.mjs +0 -216
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import {
|
|
2
|
+
usePopover
|
|
3
|
+
} from "./chunk-DQEXAU5O.mjs";
|
|
4
|
+
|
|
5
|
+
// src/popover-body.tsx
|
|
6
|
+
import { ui, forwardRef } from "@yamada-ui/core";
|
|
7
|
+
import { cx } from "@yamada-ui/utils";
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
var PopoverBody = forwardRef(({ className, ...rest }, ref) => {
|
|
10
|
+
const { styles } = usePopover();
|
|
11
|
+
const css = {
|
|
12
|
+
display: "flex",
|
|
13
|
+
flexDirection: "column",
|
|
14
|
+
alignItems: "flex-start",
|
|
15
|
+
...styles.body
|
|
16
|
+
};
|
|
17
|
+
return /* @__PURE__ */ jsx(ui.main, { ref, className: cx("ui-popover-body", className), __css: css, ...rest });
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
export {
|
|
21
|
+
PopoverBody
|
|
22
|
+
};
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import {
|
|
2
|
+
PopoverCloseButton
|
|
3
|
+
} from "./chunk-MRA7DCWU.mjs";
|
|
4
|
+
import {
|
|
5
|
+
usePopover
|
|
6
|
+
} from "./chunk-DQEXAU5O.mjs";
|
|
7
|
+
|
|
8
|
+
// src/popover-content.tsx
|
|
9
|
+
import { ui, forwardRef } from "@yamada-ui/core";
|
|
10
|
+
import { motion } from "@yamada-ui/motion";
|
|
11
|
+
import { scaleFadeProps, slideFadeProps } from "@yamada-ui/transitions";
|
|
12
|
+
import {
|
|
13
|
+
cx,
|
|
14
|
+
findChildren,
|
|
15
|
+
funcAll,
|
|
16
|
+
getValidChildren,
|
|
17
|
+
omitObject
|
|
18
|
+
} from "@yamada-ui/utils";
|
|
19
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
20
|
+
var getPopoverContentProps = (animation = "scale", duration) => {
|
|
21
|
+
const custom = {
|
|
22
|
+
reverse: true,
|
|
23
|
+
duration,
|
|
24
|
+
enter: { visibility: "visible" },
|
|
25
|
+
transitionEnd: { exit: { visibility: "hidden" } }
|
|
26
|
+
};
|
|
27
|
+
switch (animation) {
|
|
28
|
+
case "scale":
|
|
29
|
+
return {
|
|
30
|
+
...scaleFadeProps,
|
|
31
|
+
custom: { ...custom, scale: 0.95 }
|
|
32
|
+
};
|
|
33
|
+
case "top":
|
|
34
|
+
return {
|
|
35
|
+
...slideFadeProps,
|
|
36
|
+
custom: { ...custom, offsetX: 0, offsetY: -16 }
|
|
37
|
+
};
|
|
38
|
+
case "right":
|
|
39
|
+
return {
|
|
40
|
+
...slideFadeProps,
|
|
41
|
+
custom: { ...custom, offsetX: 16, offsetY: 0 }
|
|
42
|
+
};
|
|
43
|
+
case "left":
|
|
44
|
+
return {
|
|
45
|
+
...slideFadeProps,
|
|
46
|
+
custom: { ...custom, offsetX: -16, offsetY: 0 }
|
|
47
|
+
};
|
|
48
|
+
case "bottom":
|
|
49
|
+
return {
|
|
50
|
+
...slideFadeProps,
|
|
51
|
+
custom: { ...custom, offsetX: 0, offsetY: 16 }
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
var PopoverContent = forwardRef(
|
|
56
|
+
({ as = "section", className, children, w, width, minW, minWidth, zIndex, __css, ...rest }, ref) => {
|
|
57
|
+
var _a, _b, _c, _d;
|
|
58
|
+
const {
|
|
59
|
+
isOpen,
|
|
60
|
+
closeOnButton,
|
|
61
|
+
getPopperProps,
|
|
62
|
+
getPopoverProps,
|
|
63
|
+
onAnimationComplete,
|
|
64
|
+
animation,
|
|
65
|
+
duration,
|
|
66
|
+
styles
|
|
67
|
+
} = usePopover();
|
|
68
|
+
const validChildren = getValidChildren(children);
|
|
69
|
+
const [customPopoverCloseButton, ...cloneChildren] = findChildren(
|
|
70
|
+
validChildren,
|
|
71
|
+
PopoverCloseButton
|
|
72
|
+
);
|
|
73
|
+
const css = {
|
|
74
|
+
position: "relative",
|
|
75
|
+
w: "100%",
|
|
76
|
+
display: "flex",
|
|
77
|
+
flexDirection: "column",
|
|
78
|
+
outline: 0,
|
|
79
|
+
...omitObject(__css != null ? __css : styles.container, ["zIndex"])
|
|
80
|
+
};
|
|
81
|
+
w = (_b = w != null ? w : width) != null ? _b : (_a = styles.container.w) != null ? _a : styles.container.width;
|
|
82
|
+
minW = (_d = minW != null ? minW : minWidth) != null ? _d : (_c = styles.container.minW) != null ? _c : styles.container.minWidth;
|
|
83
|
+
zIndex = zIndex != null ? zIndex : styles.container.zIndex;
|
|
84
|
+
return /* @__PURE__ */ jsx(
|
|
85
|
+
ui.div,
|
|
86
|
+
{
|
|
87
|
+
...getPopperProps({ style: { visibility: isOpen ? "visible" : "hidden" } }),
|
|
88
|
+
className: "ui-popover",
|
|
89
|
+
w,
|
|
90
|
+
minW,
|
|
91
|
+
zIndex,
|
|
92
|
+
children: /* @__PURE__ */ jsxs(
|
|
93
|
+
ui.section,
|
|
94
|
+
{
|
|
95
|
+
as: motion[as],
|
|
96
|
+
className: cx("ui-popover-content", className),
|
|
97
|
+
...animation !== "none" ? getPopoverContentProps(animation, duration) : {},
|
|
98
|
+
...getPopoverProps(rest, ref),
|
|
99
|
+
initial: "exit",
|
|
100
|
+
animate: isOpen ? "enter" : "exit",
|
|
101
|
+
exit: "exit",
|
|
102
|
+
onAnimationComplete: funcAll(onAnimationComplete, rest.onAnimationComplete),
|
|
103
|
+
__css: css,
|
|
104
|
+
children: [
|
|
105
|
+
customPopoverCloseButton != null ? customPopoverCloseButton : closeOnButton ? /* @__PURE__ */ jsx(PopoverCloseButton, {}) : null,
|
|
106
|
+
cloneChildren
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
)
|
|
110
|
+
}
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
);
|
|
114
|
+
|
|
115
|
+
export {
|
|
116
|
+
PopoverContent
|
|
117
|
+
};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import {
|
|
2
|
+
usePopover
|
|
3
|
+
} from "./chunk-DQEXAU5O.mjs";
|
|
4
|
+
|
|
5
|
+
// src/popover-close-button.tsx
|
|
6
|
+
import { CloseButton } from "@yamada-ui/close-button";
|
|
7
|
+
import { forwardRef } from "@yamada-ui/core";
|
|
8
|
+
import { cx, handlerAll } from "@yamada-ui/utils";
|
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
|
+
var PopoverCloseButton = forwardRef(
|
|
11
|
+
({ onClick, ...rest }, ref) => {
|
|
12
|
+
const { styles, onClose } = usePopover();
|
|
13
|
+
const css = {
|
|
14
|
+
position: "absolute",
|
|
15
|
+
...styles.closeButton
|
|
16
|
+
};
|
|
17
|
+
return /* @__PURE__ */ jsx(
|
|
18
|
+
CloseButton,
|
|
19
|
+
{
|
|
20
|
+
ref,
|
|
21
|
+
className: cx("ui-popover-close-button"),
|
|
22
|
+
__css: css,
|
|
23
|
+
onClick: handlerAll(onClick, (event) => {
|
|
24
|
+
event.stopPropagation();
|
|
25
|
+
onClose == null ? void 0 : onClose();
|
|
26
|
+
}),
|
|
27
|
+
size: "sm",
|
|
28
|
+
...rest
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
export {
|
|
35
|
+
PopoverCloseButton
|
|
36
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import {
|
|
2
|
+
usePopover
|
|
3
|
+
} from "./chunk-DQEXAU5O.mjs";
|
|
4
|
+
|
|
5
|
+
// src/popover-footer.tsx
|
|
6
|
+
import { ui, forwardRef } from "@yamada-ui/core";
|
|
7
|
+
import { cx } from "@yamada-ui/utils";
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
var PopoverFooter = forwardRef(
|
|
10
|
+
({ className, ...rest }, ref) => {
|
|
11
|
+
const { styles } = usePopover();
|
|
12
|
+
const css = {
|
|
13
|
+
display: "flex",
|
|
14
|
+
alignItems: "center",
|
|
15
|
+
justifyContent: "flex-start",
|
|
16
|
+
...styles.footer
|
|
17
|
+
};
|
|
18
|
+
return /* @__PURE__ */ jsx(ui.footer, { ref, className: cx("ui-popover-footer", className), __css: css, ...rest });
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
export {
|
|
23
|
+
PopoverFooter
|
|
24
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import {
|
|
2
|
+
usePopover
|
|
3
|
+
} from "./chunk-DQEXAU5O.mjs";
|
|
4
|
+
|
|
5
|
+
// src/popover-trigger.tsx
|
|
6
|
+
import { Children, cloneElement } from "react";
|
|
7
|
+
var PopoverTrigger = ({ children }) => {
|
|
8
|
+
const child = Children.only(children);
|
|
9
|
+
const { getTriggerProps } = usePopover();
|
|
10
|
+
return cloneElement(child, getTriggerProps(child.props, child.ref));
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export {
|
|
14
|
+
PopoverTrigger
|
|
15
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import {
|
|
2
|
+
usePopover
|
|
3
|
+
} from "./chunk-DQEXAU5O.mjs";
|
|
4
|
+
|
|
5
|
+
// src/popover-anchor.tsx
|
|
6
|
+
import { Children, cloneElement } from "react";
|
|
7
|
+
var PopoverAnchor = ({ children }) => {
|
|
8
|
+
const child = Children.only(children);
|
|
9
|
+
const { getAnchorProps } = usePopover();
|
|
10
|
+
return cloneElement(child, getAnchorProps(child.props, child.ref));
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export {
|
|
14
|
+
PopoverAnchor
|
|
15
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import {
|
|
2
|
+
usePopover
|
|
3
|
+
} from "./chunk-DQEXAU5O.mjs";
|
|
4
|
+
|
|
5
|
+
// src/popover-header.tsx
|
|
6
|
+
import { ui, forwardRef } from "@yamada-ui/core";
|
|
7
|
+
import { cx } from "@yamada-ui/utils";
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
var PopoverHeader = forwardRef(
|
|
10
|
+
({ className, ...rest }, ref) => {
|
|
11
|
+
const { styles } = usePopover();
|
|
12
|
+
const css = {
|
|
13
|
+
display: "flex",
|
|
14
|
+
alignItems: "center",
|
|
15
|
+
justifyContent: "flex-start",
|
|
16
|
+
...styles.header
|
|
17
|
+
};
|
|
18
|
+
return /* @__PURE__ */ jsx(ui.header, { ref, className: cx("ui-popover-header", className), __css: css, ...rest });
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
export {
|
|
23
|
+
PopoverHeader
|
|
24
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Popover, PopoverProps
|
|
1
|
+
export { Popover, PopoverProps } from './popover.js';
|
|
2
2
|
export { PopoverTrigger } from './popover-trigger.js';
|
|
3
3
|
export { PopoverAnchor } from './popover-anchor.js';
|
|
4
4
|
export { PopoverCloseButton, PopoverCloseButtonProps } from './popover-close-button.js';
|
package/dist/index.js
CHANGED
|
@@ -27,8 +27,7 @@ __export(src_exports, {
|
|
|
27
27
|
PopoverContent: () => PopoverContent,
|
|
28
28
|
PopoverFooter: () => PopoverFooter,
|
|
29
29
|
PopoverHeader: () => PopoverHeader,
|
|
30
|
-
PopoverTrigger: () => PopoverTrigger
|
|
31
|
-
usePopover: () => usePopover
|
|
30
|
+
PopoverTrigger: () => PopoverTrigger
|
|
32
31
|
});
|
|
33
32
|
module.exports = __toCommonJS(src_exports);
|
|
34
33
|
|
|
@@ -453,6 +452,5 @@ var PopoverFooter = (0, import_core6.forwardRef)(
|
|
|
453
452
|
PopoverContent,
|
|
454
453
|
PopoverFooter,
|
|
455
454
|
PopoverHeader,
|
|
456
|
-
PopoverTrigger
|
|
457
|
-
usePopover
|
|
455
|
+
PopoverTrigger
|
|
458
456
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -1,15 +1,26 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
PopoverContent
|
|
3
|
+
} from "./chunk-LPYOVPSE.mjs";
|
|
4
|
+
import {
|
|
5
|
+
PopoverAnchor
|
|
6
|
+
} from "./chunk-TUH3DDWH.mjs";
|
|
7
|
+
import {
|
|
8
|
+
PopoverBody
|
|
9
|
+
} from "./chunk-2NALYFOE.mjs";
|
|
10
|
+
import {
|
|
11
|
+
PopoverCloseButton
|
|
12
|
+
} from "./chunk-MRA7DCWU.mjs";
|
|
13
|
+
import {
|
|
14
|
+
PopoverFooter
|
|
15
|
+
} from "./chunk-PGWQGH7T.mjs";
|
|
16
|
+
import {
|
|
17
|
+
PopoverHeader
|
|
18
|
+
} from "./chunk-YLDMHQCU.mjs";
|
|
19
|
+
import {
|
|
8
20
|
PopoverTrigger
|
|
9
|
-
} from "./chunk-
|
|
21
|
+
} from "./chunk-TEP6TGUO.mjs";
|
|
10
22
|
import {
|
|
11
|
-
Popover
|
|
12
|
-
usePopover
|
|
23
|
+
Popover
|
|
13
24
|
} from "./chunk-DQEXAU5O.mjs";
|
|
14
25
|
export {
|
|
15
26
|
Popover,
|
|
@@ -19,6 +30,5 @@ export {
|
|
|
19
30
|
PopoverContent,
|
|
20
31
|
PopoverFooter,
|
|
21
32
|
PopoverHeader,
|
|
22
|
-
PopoverTrigger
|
|
23
|
-
usePopover
|
|
33
|
+
PopoverTrigger
|
|
24
34
|
};
|
package/dist/popover-anchor.mjs
CHANGED
package/dist/popover-body.mjs
CHANGED
package/dist/popover-content.mjs
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import {
|
|
2
2
|
PopoverContent
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-LPYOVPSE.mjs";
|
|
4
|
+
import "./chunk-TUH3DDWH.mjs";
|
|
5
|
+
import "./chunk-2NALYFOE.mjs";
|
|
6
|
+
import "./chunk-MRA7DCWU.mjs";
|
|
7
|
+
import "./chunk-PGWQGH7T.mjs";
|
|
8
|
+
import "./chunk-YLDMHQCU.mjs";
|
|
9
|
+
import "./chunk-TEP6TGUO.mjs";
|
|
4
10
|
import "./chunk-DQEXAU5O.mjs";
|
|
5
11
|
export {
|
|
6
12
|
PopoverContent
|
package/dist/popover-footer.mjs
CHANGED
package/dist/popover-header.mjs
CHANGED
package/dist/popover-trigger.mjs
CHANGED
package/dist/popover.d.ts
CHANGED
|
@@ -3,29 +3,106 @@ import { MotionTransitionProperties } from '@yamada-ui/motion';
|
|
|
3
3
|
import { LazyMode } from '@yamada-ui/use-disclosure';
|
|
4
4
|
import { UsePopperProps } from '@yamada-ui/use-popper';
|
|
5
5
|
import { PropGetter } from '@yamada-ui/utils';
|
|
6
|
-
import { PropsWithChildren, FC } from 'react';
|
|
6
|
+
import { PropsWithChildren, FC, RefObject } from 'react';
|
|
7
7
|
|
|
8
|
-
type Trigger = 'click' | 'hover' | 'never';
|
|
9
|
-
type Animation = 'scale' | 'top' | 'right' | 'left' | 'bottom' | 'none';
|
|
10
8
|
type PopoverOptions = {
|
|
9
|
+
/**
|
|
10
|
+
* If `true`, the popover will be opened.
|
|
11
|
+
*/
|
|
11
12
|
isOpen?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* If `true`, the popover will be initially opened.
|
|
15
|
+
*/
|
|
12
16
|
defaultIsOpen?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Callback fired when the popover opens.
|
|
19
|
+
*/
|
|
13
20
|
onOpen?: () => void;
|
|
21
|
+
/**
|
|
22
|
+
* Callback fired when the popover closes.
|
|
23
|
+
*/
|
|
14
24
|
onClose?: () => void;
|
|
15
|
-
|
|
25
|
+
/**
|
|
26
|
+
* The `ref` of the element that should receive focus when the popover opens.
|
|
27
|
+
*/
|
|
28
|
+
initialFocusRef?: RefObject<{
|
|
16
29
|
focus(): void;
|
|
17
30
|
}>;
|
|
31
|
+
/**
|
|
32
|
+
* If `true`, focus will be returned to the element that triggers the popover when it closes.
|
|
33
|
+
*
|
|
34
|
+
* @default true
|
|
35
|
+
*/
|
|
18
36
|
restoreFocus?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* If `true`, focus will be transferred to the first interactive element when the popover opens.
|
|
39
|
+
*
|
|
40
|
+
* @default true
|
|
41
|
+
*/
|
|
19
42
|
autoFocus?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* If `true`, the popover will close when you blur out it by clicking outside or tabbing out.
|
|
45
|
+
*
|
|
46
|
+
* @default true
|
|
47
|
+
*/
|
|
20
48
|
closeOnBlur?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* If `true`, the popover will close when you hit the `Esc` key.
|
|
51
|
+
*
|
|
52
|
+
* @default true
|
|
53
|
+
*/
|
|
21
54
|
closeOnEsc?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* If `true`, display the popover close button.
|
|
57
|
+
*
|
|
58
|
+
* @default true
|
|
59
|
+
*/
|
|
22
60
|
closeOnButton?: boolean;
|
|
23
|
-
|
|
61
|
+
/**
|
|
62
|
+
* The interaction that triggers the popover.
|
|
63
|
+
*
|
|
64
|
+
* - `hover`: means the popover will open when you hover with mouse or focus with keyboard on the popover trigger.
|
|
65
|
+
* - `click`: means the popover will open on click or press `Enter` to `Space` on keyboard.
|
|
66
|
+
*
|
|
67
|
+
* @default 'click'
|
|
68
|
+
*/
|
|
69
|
+
trigger?: 'click' | 'hover' | 'never';
|
|
70
|
+
/**
|
|
71
|
+
* The number of delay time to open.
|
|
72
|
+
*
|
|
73
|
+
* @default 200
|
|
74
|
+
*/
|
|
24
75
|
openDelay?: number;
|
|
76
|
+
/**
|
|
77
|
+
* The number of delay time to close.
|
|
78
|
+
*
|
|
79
|
+
* @default 200
|
|
80
|
+
*/
|
|
25
81
|
closeDelay?: number;
|
|
82
|
+
/**
|
|
83
|
+
* If `true`, the PopoverContent rendering will be deferred until the popover is open.
|
|
84
|
+
*
|
|
85
|
+
* @default false
|
|
86
|
+
*/
|
|
26
87
|
isLazy?: boolean;
|
|
88
|
+
/**
|
|
89
|
+
* The lazy behavior of popover's content when not visible. Only works when `isLazy={true}`
|
|
90
|
+
*
|
|
91
|
+
* - `unmount`: The popover's content is always unmounted when not open.
|
|
92
|
+
* - `keepMounted`: The popover's content initially unmounted, but stays mounted when popover is open.
|
|
93
|
+
*
|
|
94
|
+
* @default 'unmount'
|
|
95
|
+
*/
|
|
27
96
|
lazyBehavior?: LazyMode;
|
|
28
|
-
|
|
97
|
+
/**
|
|
98
|
+
* The animation of the popover.
|
|
99
|
+
*
|
|
100
|
+
* @default 'scale'
|
|
101
|
+
*/
|
|
102
|
+
animation?: 'scale' | 'top' | 'right' | 'left' | 'bottom' | 'none';
|
|
103
|
+
/**
|
|
104
|
+
* The animation duration.
|
|
105
|
+
*/
|
|
29
106
|
duration?: MotionTransitionProperties['duration'];
|
|
30
107
|
};
|
|
31
108
|
type PopoverProps = ThemeProps<'Popover'> & Omit<UsePopperProps, 'enabled'> & PropsWithChildren<PopoverOptions>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/popover",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Yamada UI popover component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -35,15 +35,15 @@
|
|
|
35
35
|
"url": "https://github.com/hirotomoyamada/yamada-ui/issues"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@yamada-ui/core": "0.
|
|
38
|
+
"@yamada-ui/core": "0.3.1",
|
|
39
39
|
"@yamada-ui/utils": "0.1.1",
|
|
40
|
-
"@yamada-ui/close-button": "0.
|
|
41
|
-
"@yamada-ui/transitions": "0.
|
|
42
|
-
"@yamada-ui/motion": "0.
|
|
43
|
-
"@yamada-ui/use-popper": "0.
|
|
40
|
+
"@yamada-ui/close-button": "0.2.0",
|
|
41
|
+
"@yamada-ui/transitions": "0.2.0",
|
|
42
|
+
"@yamada-ui/motion": "0.2.0",
|
|
43
|
+
"@yamada-ui/use-popper": "0.2.0",
|
|
44
44
|
"@yamada-ui/use-disclosure": "0.1.1",
|
|
45
45
|
"@yamada-ui/use-focus": "0.1.1",
|
|
46
|
-
"@yamada-ui/use-animation": "0.1.
|
|
46
|
+
"@yamada-ui/use-animation": "0.1.12"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"react": "^18.0.0",
|
package/dist/chunk-O75PU3DP.mjs
DELETED
|
@@ -1,216 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
usePopover
|
|
3
|
-
} from "./chunk-DQEXAU5O.mjs";
|
|
4
|
-
|
|
5
|
-
// src/popover-trigger.tsx
|
|
6
|
-
import { Children as Children2, cloneElement as cloneElement2 } from "react";
|
|
7
|
-
|
|
8
|
-
// src/popover-anchor.tsx
|
|
9
|
-
import { Children, cloneElement } from "react";
|
|
10
|
-
var PopoverAnchor = ({ children }) => {
|
|
11
|
-
const child = Children.only(children);
|
|
12
|
-
const { getAnchorProps } = usePopover();
|
|
13
|
-
return cloneElement(child, getAnchorProps(child.props, child.ref));
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
// src/popover-close-button.tsx
|
|
17
|
-
import { CloseButton } from "@yamada-ui/close-button";
|
|
18
|
-
import { forwardRef } from "@yamada-ui/core";
|
|
19
|
-
import { cx, handlerAll } from "@yamada-ui/utils";
|
|
20
|
-
import { jsx } from "react/jsx-runtime";
|
|
21
|
-
var PopoverCloseButton = forwardRef(
|
|
22
|
-
({ onClick, ...rest }, ref) => {
|
|
23
|
-
const { styles, onClose } = usePopover();
|
|
24
|
-
const css = {
|
|
25
|
-
position: "absolute",
|
|
26
|
-
...styles.closeButton
|
|
27
|
-
};
|
|
28
|
-
return /* @__PURE__ */ jsx(
|
|
29
|
-
CloseButton,
|
|
30
|
-
{
|
|
31
|
-
ref,
|
|
32
|
-
className: cx("ui-popover-close-button"),
|
|
33
|
-
__css: css,
|
|
34
|
-
onClick: handlerAll(onClick, (event) => {
|
|
35
|
-
event.stopPropagation();
|
|
36
|
-
onClose == null ? void 0 : onClose();
|
|
37
|
-
}),
|
|
38
|
-
size: "sm",
|
|
39
|
-
...rest
|
|
40
|
-
}
|
|
41
|
-
);
|
|
42
|
-
}
|
|
43
|
-
);
|
|
44
|
-
|
|
45
|
-
// src/popover-content.tsx
|
|
46
|
-
import { ui, forwardRef as forwardRef2 } from "@yamada-ui/core";
|
|
47
|
-
import { motion } from "@yamada-ui/motion";
|
|
48
|
-
import { scaleFadeProps, slideFadeProps } from "@yamada-ui/transitions";
|
|
49
|
-
import {
|
|
50
|
-
cx as cx2,
|
|
51
|
-
findChildren,
|
|
52
|
-
funcAll,
|
|
53
|
-
getValidChildren,
|
|
54
|
-
omitObject
|
|
55
|
-
} from "@yamada-ui/utils";
|
|
56
|
-
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
57
|
-
var getPopoverContentProps = (animation = "scale", duration) => {
|
|
58
|
-
const custom = {
|
|
59
|
-
reverse: true,
|
|
60
|
-
duration,
|
|
61
|
-
enter: { visibility: "visible" },
|
|
62
|
-
transitionEnd: { exit: { visibility: "hidden" } }
|
|
63
|
-
};
|
|
64
|
-
switch (animation) {
|
|
65
|
-
case "scale":
|
|
66
|
-
return {
|
|
67
|
-
...scaleFadeProps,
|
|
68
|
-
custom: { ...custom, scale: 0.95 }
|
|
69
|
-
};
|
|
70
|
-
case "top":
|
|
71
|
-
return {
|
|
72
|
-
...slideFadeProps,
|
|
73
|
-
custom: { ...custom, offsetX: 0, offsetY: -16 }
|
|
74
|
-
};
|
|
75
|
-
case "right":
|
|
76
|
-
return {
|
|
77
|
-
...slideFadeProps,
|
|
78
|
-
custom: { ...custom, offsetX: 16, offsetY: 0 }
|
|
79
|
-
};
|
|
80
|
-
case "left":
|
|
81
|
-
return {
|
|
82
|
-
...slideFadeProps,
|
|
83
|
-
custom: { ...custom, offsetX: -16, offsetY: 0 }
|
|
84
|
-
};
|
|
85
|
-
case "bottom":
|
|
86
|
-
return {
|
|
87
|
-
...slideFadeProps,
|
|
88
|
-
custom: { ...custom, offsetX: 0, offsetY: 16 }
|
|
89
|
-
};
|
|
90
|
-
}
|
|
91
|
-
};
|
|
92
|
-
var PopoverContent = forwardRef2(
|
|
93
|
-
({ as = "section", className, children, w, width, minW, minWidth, zIndex, __css, ...rest }, ref) => {
|
|
94
|
-
var _a, _b, _c, _d;
|
|
95
|
-
const {
|
|
96
|
-
isOpen,
|
|
97
|
-
closeOnButton,
|
|
98
|
-
getPopperProps,
|
|
99
|
-
getPopoverProps,
|
|
100
|
-
onAnimationComplete,
|
|
101
|
-
animation,
|
|
102
|
-
duration,
|
|
103
|
-
styles
|
|
104
|
-
} = usePopover();
|
|
105
|
-
const validChildren = getValidChildren(children);
|
|
106
|
-
const [customPopoverCloseButton, ...cloneChildren] = findChildren(
|
|
107
|
-
validChildren,
|
|
108
|
-
PopoverCloseButton
|
|
109
|
-
);
|
|
110
|
-
const css = {
|
|
111
|
-
position: "relative",
|
|
112
|
-
w: "100%",
|
|
113
|
-
display: "flex",
|
|
114
|
-
flexDirection: "column",
|
|
115
|
-
outline: 0,
|
|
116
|
-
...omitObject(__css != null ? __css : styles.container, ["zIndex"])
|
|
117
|
-
};
|
|
118
|
-
w = (_b = w != null ? w : width) != null ? _b : (_a = styles.container.w) != null ? _a : styles.container.width;
|
|
119
|
-
minW = (_d = minW != null ? minW : minWidth) != null ? _d : (_c = styles.container.minW) != null ? _c : styles.container.minWidth;
|
|
120
|
-
zIndex = zIndex != null ? zIndex : styles.container.zIndex;
|
|
121
|
-
return /* @__PURE__ */ jsx2(
|
|
122
|
-
ui.div,
|
|
123
|
-
{
|
|
124
|
-
...getPopperProps({ style: { visibility: isOpen ? "visible" : "hidden" } }),
|
|
125
|
-
className: "ui-popover",
|
|
126
|
-
w,
|
|
127
|
-
minW,
|
|
128
|
-
zIndex,
|
|
129
|
-
children: /* @__PURE__ */ jsxs(
|
|
130
|
-
ui.section,
|
|
131
|
-
{
|
|
132
|
-
as: motion[as],
|
|
133
|
-
className: cx2("ui-popover-content", className),
|
|
134
|
-
...animation !== "none" ? getPopoverContentProps(animation, duration) : {},
|
|
135
|
-
...getPopoverProps(rest, ref),
|
|
136
|
-
initial: "exit",
|
|
137
|
-
animate: isOpen ? "enter" : "exit",
|
|
138
|
-
exit: "exit",
|
|
139
|
-
onAnimationComplete: funcAll(onAnimationComplete, rest.onAnimationComplete),
|
|
140
|
-
__css: css,
|
|
141
|
-
children: [
|
|
142
|
-
customPopoverCloseButton != null ? customPopoverCloseButton : closeOnButton ? /* @__PURE__ */ jsx2(PopoverCloseButton, {}) : null,
|
|
143
|
-
cloneChildren
|
|
144
|
-
]
|
|
145
|
-
}
|
|
146
|
-
)
|
|
147
|
-
}
|
|
148
|
-
);
|
|
149
|
-
}
|
|
150
|
-
);
|
|
151
|
-
|
|
152
|
-
// src/popover-header.tsx
|
|
153
|
-
import { ui as ui2, forwardRef as forwardRef3 } from "@yamada-ui/core";
|
|
154
|
-
import { cx as cx3 } from "@yamada-ui/utils";
|
|
155
|
-
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
156
|
-
var PopoverHeader = forwardRef3(
|
|
157
|
-
({ className, ...rest }, ref) => {
|
|
158
|
-
const { styles } = usePopover();
|
|
159
|
-
const css = {
|
|
160
|
-
display: "flex",
|
|
161
|
-
alignItems: "center",
|
|
162
|
-
justifyContent: "flex-start",
|
|
163
|
-
...styles.header
|
|
164
|
-
};
|
|
165
|
-
return /* @__PURE__ */ jsx3(ui2.header, { ref, className: cx3("ui-popover-header", className), __css: css, ...rest });
|
|
166
|
-
}
|
|
167
|
-
);
|
|
168
|
-
|
|
169
|
-
// src/popover-body.tsx
|
|
170
|
-
import { ui as ui3, forwardRef as forwardRef4 } from "@yamada-ui/core";
|
|
171
|
-
import { cx as cx4 } from "@yamada-ui/utils";
|
|
172
|
-
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
173
|
-
var PopoverBody = forwardRef4(({ className, ...rest }, ref) => {
|
|
174
|
-
const { styles } = usePopover();
|
|
175
|
-
const css = {
|
|
176
|
-
display: "flex",
|
|
177
|
-
flexDirection: "column",
|
|
178
|
-
alignItems: "flex-start",
|
|
179
|
-
...styles.body
|
|
180
|
-
};
|
|
181
|
-
return /* @__PURE__ */ jsx4(ui3.main, { ref, className: cx4("ui-popover-body", className), __css: css, ...rest });
|
|
182
|
-
});
|
|
183
|
-
|
|
184
|
-
// src/popover-footer.tsx
|
|
185
|
-
import { ui as ui4, forwardRef as forwardRef5 } from "@yamada-ui/core";
|
|
186
|
-
import { cx as cx5 } from "@yamada-ui/utils";
|
|
187
|
-
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
188
|
-
var PopoverFooter = forwardRef5(
|
|
189
|
-
({ className, ...rest }, ref) => {
|
|
190
|
-
const { styles } = usePopover();
|
|
191
|
-
const css = {
|
|
192
|
-
display: "flex",
|
|
193
|
-
alignItems: "center",
|
|
194
|
-
justifyContent: "flex-start",
|
|
195
|
-
...styles.footer
|
|
196
|
-
};
|
|
197
|
-
return /* @__PURE__ */ jsx5(ui4.footer, { ref, className: cx5("ui-popover-footer", className), __css: css, ...rest });
|
|
198
|
-
}
|
|
199
|
-
);
|
|
200
|
-
|
|
201
|
-
// src/popover-trigger.tsx
|
|
202
|
-
var PopoverTrigger = ({ children }) => {
|
|
203
|
-
const child = Children2.only(children);
|
|
204
|
-
const { getTriggerProps } = usePopover();
|
|
205
|
-
return cloneElement2(child, getTriggerProps(child.props, child.ref));
|
|
206
|
-
};
|
|
207
|
-
|
|
208
|
-
export {
|
|
209
|
-
PopoverTrigger,
|
|
210
|
-
PopoverAnchor,
|
|
211
|
-
PopoverCloseButton,
|
|
212
|
-
PopoverContent,
|
|
213
|
-
PopoverHeader,
|
|
214
|
-
PopoverBody,
|
|
215
|
-
PopoverFooter
|
|
216
|
-
};
|