@kopexa/popover 10.0.7 → 12.0.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-TDTYA2GD.mjs → chunk-CLLMLEHG.mjs} +1 -1
- package/dist/chunk-SSISZ7R7.mjs +119 -0
- package/dist/index.d.mts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +65 -40
- package/dist/index.mjs +2 -2
- package/dist/namespace.d.mts +2 -1
- package/dist/namespace.d.ts +2 -1
- package/dist/namespace.js +65 -40
- package/dist/namespace.mjs +2 -2
- package/dist/popover.d.mts +12 -7
- package/dist/popover.d.ts +12 -7
- package/dist/popover.js +65 -40
- package/dist/popover.mjs +1 -1
- package/package.json +7 -8
- package/dist/chunk-CVZNBNZ4.mjs +0 -89
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __export = (target, all) => {
|
|
4
|
+
for (var name in all)
|
|
5
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
// src/popover.tsx
|
|
9
|
+
import { Popover as PopoverPrimitive } from "@base-ui-components/react/popover";
|
|
10
|
+
import { createContext } from "@kopexa/react-utils";
|
|
11
|
+
import { cn } from "@kopexa/shared-utils";
|
|
12
|
+
import { popover } from "@kopexa/theme";
|
|
13
|
+
import { useControllableState } from "@kopexa/use-controllable-state";
|
|
14
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
15
|
+
var [PopoverProvider, usePopoverContext] = createContext();
|
|
16
|
+
var PopoverRoot = (props) => {
|
|
17
|
+
const {
|
|
18
|
+
open: openProp,
|
|
19
|
+
onOpenChange,
|
|
20
|
+
spacing,
|
|
21
|
+
variant,
|
|
22
|
+
width,
|
|
23
|
+
...restProps
|
|
24
|
+
} = props;
|
|
25
|
+
const [open, setOpen] = useControllableState({
|
|
26
|
+
value: openProp,
|
|
27
|
+
onChange: onOpenChange,
|
|
28
|
+
defaultValue: false
|
|
29
|
+
});
|
|
30
|
+
const styles = popover({ spacing, variant, width });
|
|
31
|
+
return /* @__PURE__ */ jsx(PopoverProvider, { value: { styles, open }, children: /* @__PURE__ */ jsx(
|
|
32
|
+
PopoverPrimitive.Root,
|
|
33
|
+
{
|
|
34
|
+
"data-slot": "popover",
|
|
35
|
+
open,
|
|
36
|
+
onOpenChange: setOpen,
|
|
37
|
+
...restProps
|
|
38
|
+
}
|
|
39
|
+
) });
|
|
40
|
+
};
|
|
41
|
+
function PopoverTrigger({ ...props }) {
|
|
42
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
43
|
+
}
|
|
44
|
+
function PopoverContent({
|
|
45
|
+
className,
|
|
46
|
+
align = "center",
|
|
47
|
+
sideOffset = 4,
|
|
48
|
+
alignOffset = 0,
|
|
49
|
+
side = "bottom",
|
|
50
|
+
children,
|
|
51
|
+
showArrow = true,
|
|
52
|
+
...props
|
|
53
|
+
}) {
|
|
54
|
+
const { styles } = usePopoverContext();
|
|
55
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
|
56
|
+
PopoverPrimitive.Positioner,
|
|
57
|
+
{
|
|
58
|
+
"data-slot": "popover-positioner",
|
|
59
|
+
sideOffset,
|
|
60
|
+
align,
|
|
61
|
+
alignOffset,
|
|
62
|
+
side,
|
|
63
|
+
children: /* @__PURE__ */ jsxs(
|
|
64
|
+
PopoverPrimitive.Popup,
|
|
65
|
+
{
|
|
66
|
+
"data-slot": "popover-content",
|
|
67
|
+
className: cn(styles.content(), className),
|
|
68
|
+
...props,
|
|
69
|
+
children: [
|
|
70
|
+
children,
|
|
71
|
+
showArrow && /* @__PURE__ */ jsx(PopoverArrow, {})
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
}
|
|
76
|
+
) });
|
|
77
|
+
}
|
|
78
|
+
function PopoverArrow({
|
|
79
|
+
className,
|
|
80
|
+
...props
|
|
81
|
+
}) {
|
|
82
|
+
const { styles } = usePopoverContext();
|
|
83
|
+
return /* @__PURE__ */ jsx(
|
|
84
|
+
PopoverPrimitive.Arrow,
|
|
85
|
+
{
|
|
86
|
+
"data-slot": "popover-arrow",
|
|
87
|
+
className: cn(styles.arrow(), className),
|
|
88
|
+
...props,
|
|
89
|
+
children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", children: [
|
|
90
|
+
/* @__PURE__ */ jsx("title", { children: "Arrow" }),
|
|
91
|
+
/* @__PURE__ */ jsx(
|
|
92
|
+
"path",
|
|
93
|
+
{
|
|
94
|
+
d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V9H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
|
|
95
|
+
className: styles.arrowTop()
|
|
96
|
+
}
|
|
97
|
+
),
|
|
98
|
+
/* @__PURE__ */ jsx(
|
|
99
|
+
"path",
|
|
100
|
+
{
|
|
101
|
+
d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
|
|
102
|
+
className: styles.arrowBottom()
|
|
103
|
+
}
|
|
104
|
+
)
|
|
105
|
+
] })
|
|
106
|
+
}
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
function PopoverAnchor({ ...props }) {
|
|
110
|
+
return /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { "data-slot": "popover-anchor", ...props });
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
export {
|
|
114
|
+
__export,
|
|
115
|
+
PopoverRoot,
|
|
116
|
+
PopoverTrigger,
|
|
117
|
+
PopoverContent,
|
|
118
|
+
PopoverAnchor
|
|
119
|
+
};
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { n as Popover } from './namespace.mjs';
|
|
2
2
|
export { PopoverAnchor, PopoverAnchorProps, PopoverContent, PopoverContentProps, PopoverRoot, PopoverRootProps, PopoverTrigger, PopoverTriggerProps } from './popover.mjs';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
|
-
import '@
|
|
4
|
+
import '@base-ui-components/react/popover';
|
|
5
|
+
import '@kopexa/theme';
|
|
5
6
|
import 'react';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { n as Popover } from './namespace.js';
|
|
2
2
|
export { PopoverAnchor, PopoverAnchorProps, PopoverContent, PopoverContentProps, PopoverRoot, PopoverRootProps, PopoverTrigger, PopoverTriggerProps } from './popover.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
|
-
import '@
|
|
4
|
+
import '@base-ui-components/react/popover';
|
|
5
|
+
import '@kopexa/theme';
|
|
5
6
|
import 'react';
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
"use strict";
|
|
3
|
-
var __create = Object.create;
|
|
4
3
|
var __defProp = Object.defineProperty;
|
|
5
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
8
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
7
|
var __export = (target, all) => {
|
|
10
8
|
for (var name in all)
|
|
@@ -18,14 +16,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
16
|
}
|
|
19
17
|
return to;
|
|
20
18
|
};
|
|
21
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
-
mod
|
|
28
|
-
));
|
|
29
19
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
20
|
|
|
31
21
|
// src/index.ts
|
|
@@ -49,24 +39,30 @@ __export(namespace_exports, {
|
|
|
49
39
|
});
|
|
50
40
|
|
|
51
41
|
// src/popover.tsx
|
|
52
|
-
var
|
|
42
|
+
var import_popover = require("@base-ui-components/react/popover");
|
|
53
43
|
var import_react_utils = require("@kopexa/react-utils");
|
|
44
|
+
var import_shared_utils = require("@kopexa/shared-utils");
|
|
54
45
|
var import_theme = require("@kopexa/theme");
|
|
55
46
|
var import_use_controllable_state = require("@kopexa/use-controllable-state");
|
|
56
|
-
var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
|
|
57
|
-
var import_react = require("motion/react");
|
|
58
47
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
59
48
|
var [PopoverProvider, usePopoverContext] = (0, import_react_utils.createContext)();
|
|
60
49
|
var PopoverRoot = (props) => {
|
|
61
|
-
const {
|
|
50
|
+
const {
|
|
51
|
+
open: openProp,
|
|
52
|
+
onOpenChange,
|
|
53
|
+
spacing,
|
|
54
|
+
variant,
|
|
55
|
+
width,
|
|
56
|
+
...restProps
|
|
57
|
+
} = props;
|
|
62
58
|
const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
63
59
|
value: openProp,
|
|
64
60
|
onChange: onOpenChange,
|
|
65
61
|
defaultValue: false
|
|
66
62
|
});
|
|
67
|
-
const styles = (0, import_theme.popover)();
|
|
63
|
+
const styles = (0, import_theme.popover)({ spacing, variant, width });
|
|
68
64
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverProvider, { value: { styles, open }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
69
|
-
|
|
65
|
+
import_popover.Popover.Root,
|
|
70
66
|
{
|
|
71
67
|
"data-slot": "popover",
|
|
72
68
|
open,
|
|
@@ -76,46 +72,75 @@ var PopoverRoot = (props) => {
|
|
|
76
72
|
) });
|
|
77
73
|
};
|
|
78
74
|
function PopoverTrigger({ ...props }) {
|
|
79
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
75
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
80
76
|
}
|
|
81
|
-
var Portal2 = ({ disabled, children }) => {
|
|
82
|
-
if (disabled) return children;
|
|
83
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Portal, { forceMount: true, children });
|
|
84
|
-
};
|
|
85
77
|
function PopoverContent({
|
|
86
78
|
className,
|
|
87
79
|
align = "center",
|
|
88
80
|
sideOffset = 4,
|
|
89
|
-
|
|
81
|
+
alignOffset = 0,
|
|
82
|
+
side = "bottom",
|
|
90
83
|
children,
|
|
84
|
+
showArrow = true,
|
|
91
85
|
...props
|
|
92
86
|
}) {
|
|
93
|
-
const {
|
|
94
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
95
|
-
|
|
87
|
+
const { styles } = usePopoverContext();
|
|
88
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
89
|
+
import_popover.Popover.Positioner,
|
|
96
90
|
{
|
|
97
|
-
"data-slot": "popover-
|
|
98
|
-
align,
|
|
91
|
+
"data-slot": "popover-positioner",
|
|
99
92
|
sideOffset,
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
import_react.motion.div,
|
|
93
|
+
align,
|
|
94
|
+
alignOffset,
|
|
95
|
+
side,
|
|
96
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
97
|
+
import_popover.Popover.Popup,
|
|
106
98
|
{
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
99
|
+
"data-slot": "popover-content",
|
|
100
|
+
className: (0, import_shared_utils.cn)(styles.content(), className),
|
|
101
|
+
...props,
|
|
102
|
+
children: [
|
|
103
|
+
children,
|
|
104
|
+
showArrow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverArrow, {})
|
|
105
|
+
]
|
|
112
106
|
}
|
|
113
107
|
)
|
|
114
108
|
}
|
|
115
|
-
) })
|
|
109
|
+
) });
|
|
110
|
+
}
|
|
111
|
+
function PopoverArrow({
|
|
112
|
+
className,
|
|
113
|
+
...props
|
|
114
|
+
}) {
|
|
115
|
+
const { styles } = usePopoverContext();
|
|
116
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
117
|
+
import_popover.Popover.Arrow,
|
|
118
|
+
{
|
|
119
|
+
"data-slot": "popover-arrow",
|
|
120
|
+
className: (0, import_shared_utils.cn)(styles.arrow(), className),
|
|
121
|
+
...props,
|
|
122
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", children: [
|
|
123
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "Arrow" }),
|
|
124
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
125
|
+
"path",
|
|
126
|
+
{
|
|
127
|
+
d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V9H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
|
|
128
|
+
className: styles.arrowTop()
|
|
129
|
+
}
|
|
130
|
+
),
|
|
131
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
132
|
+
"path",
|
|
133
|
+
{
|
|
134
|
+
d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
|
|
135
|
+
className: styles.arrowBottom()
|
|
136
|
+
}
|
|
137
|
+
)
|
|
138
|
+
] })
|
|
139
|
+
}
|
|
140
|
+
);
|
|
116
141
|
}
|
|
117
142
|
function PopoverAnchor({ ...props }) {
|
|
118
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
143
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover.Arrow, { "data-slot": "popover-anchor", ...props });
|
|
119
144
|
}
|
|
120
145
|
// Annotate the CommonJS export names for ESM import in node:
|
|
121
146
|
0 && (module.exports = {
|
package/dist/index.mjs
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
namespace_exports
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-CLLMLEHG.mjs";
|
|
5
5
|
import {
|
|
6
6
|
PopoverAnchor,
|
|
7
7
|
PopoverContent,
|
|
8
8
|
PopoverRoot,
|
|
9
9
|
PopoverTrigger
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-SSISZ7R7.mjs";
|
|
11
11
|
export {
|
|
12
12
|
namespace_exports as Popover,
|
|
13
13
|
PopoverAnchor,
|
package/dist/namespace.d.mts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { PopoverAnchor, PopoverAnchorProps, PopoverContent, PopoverContentProps, PopoverRoot, PopoverRootProps, PopoverTrigger, PopoverTriggerProps } from './popover.mjs';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
|
-
import '@
|
|
3
|
+
import '@base-ui-components/react/popover';
|
|
4
|
+
import '@kopexa/theme';
|
|
4
5
|
import 'react';
|
|
5
6
|
|
|
6
7
|
declare namespace namespace {
|
package/dist/namespace.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { PopoverAnchor, PopoverAnchorProps, PopoverContent, PopoverContentProps, PopoverRoot, PopoverRootProps, PopoverTrigger, PopoverTriggerProps } from './popover.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
|
-
import '@
|
|
3
|
+
import '@base-ui-components/react/popover';
|
|
4
|
+
import '@kopexa/theme';
|
|
4
5
|
import 'react';
|
|
5
6
|
|
|
6
7
|
declare namespace namespace {
|
package/dist/namespace.js
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
"use strict";
|
|
3
|
-
var __create = Object.create;
|
|
4
3
|
var __defProp = Object.defineProperty;
|
|
5
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
8
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
7
|
var __export = (target, all) => {
|
|
10
8
|
for (var name in all)
|
|
@@ -18,14 +16,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
16
|
}
|
|
19
17
|
return to;
|
|
20
18
|
};
|
|
21
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
-
mod
|
|
28
|
-
));
|
|
29
19
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
20
|
|
|
31
21
|
// src/namespace.ts
|
|
@@ -39,24 +29,30 @@ __export(namespace_exports, {
|
|
|
39
29
|
module.exports = __toCommonJS(namespace_exports);
|
|
40
30
|
|
|
41
31
|
// src/popover.tsx
|
|
42
|
-
var
|
|
32
|
+
var import_popover = require("@base-ui-components/react/popover");
|
|
43
33
|
var import_react_utils = require("@kopexa/react-utils");
|
|
34
|
+
var import_shared_utils = require("@kopexa/shared-utils");
|
|
44
35
|
var import_theme = require("@kopexa/theme");
|
|
45
36
|
var import_use_controllable_state = require("@kopexa/use-controllable-state");
|
|
46
|
-
var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
|
|
47
|
-
var import_react = require("motion/react");
|
|
48
37
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
49
38
|
var [PopoverProvider, usePopoverContext] = (0, import_react_utils.createContext)();
|
|
50
39
|
var PopoverRoot = (props) => {
|
|
51
|
-
const {
|
|
40
|
+
const {
|
|
41
|
+
open: openProp,
|
|
42
|
+
onOpenChange,
|
|
43
|
+
spacing,
|
|
44
|
+
variant,
|
|
45
|
+
width,
|
|
46
|
+
...restProps
|
|
47
|
+
} = props;
|
|
52
48
|
const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
53
49
|
value: openProp,
|
|
54
50
|
onChange: onOpenChange,
|
|
55
51
|
defaultValue: false
|
|
56
52
|
});
|
|
57
|
-
const styles = (0, import_theme.popover)();
|
|
53
|
+
const styles = (0, import_theme.popover)({ spacing, variant, width });
|
|
58
54
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverProvider, { value: { styles, open }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
|
-
|
|
55
|
+
import_popover.Popover.Root,
|
|
60
56
|
{
|
|
61
57
|
"data-slot": "popover",
|
|
62
58
|
open,
|
|
@@ -66,46 +62,75 @@ var PopoverRoot = (props) => {
|
|
|
66
62
|
) });
|
|
67
63
|
};
|
|
68
64
|
function PopoverTrigger({ ...props }) {
|
|
69
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
65
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
70
66
|
}
|
|
71
|
-
var Portal2 = ({ disabled, children }) => {
|
|
72
|
-
if (disabled) return children;
|
|
73
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Portal, { forceMount: true, children });
|
|
74
|
-
};
|
|
75
67
|
function PopoverContent({
|
|
76
68
|
className,
|
|
77
69
|
align = "center",
|
|
78
70
|
sideOffset = 4,
|
|
79
|
-
|
|
71
|
+
alignOffset = 0,
|
|
72
|
+
side = "bottom",
|
|
80
73
|
children,
|
|
74
|
+
showArrow = true,
|
|
81
75
|
...props
|
|
82
76
|
}) {
|
|
83
|
-
const {
|
|
84
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
85
|
-
|
|
77
|
+
const { styles } = usePopoverContext();
|
|
78
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
79
|
+
import_popover.Popover.Positioner,
|
|
86
80
|
{
|
|
87
|
-
"data-slot": "popover-
|
|
88
|
-
align,
|
|
81
|
+
"data-slot": "popover-positioner",
|
|
89
82
|
sideOffset,
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
import_react.motion.div,
|
|
83
|
+
align,
|
|
84
|
+
alignOffset,
|
|
85
|
+
side,
|
|
86
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
87
|
+
import_popover.Popover.Popup,
|
|
96
88
|
{
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
89
|
+
"data-slot": "popover-content",
|
|
90
|
+
className: (0, import_shared_utils.cn)(styles.content(), className),
|
|
91
|
+
...props,
|
|
92
|
+
children: [
|
|
93
|
+
children,
|
|
94
|
+
showArrow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverArrow, {})
|
|
95
|
+
]
|
|
102
96
|
}
|
|
103
97
|
)
|
|
104
98
|
}
|
|
105
|
-
) })
|
|
99
|
+
) });
|
|
100
|
+
}
|
|
101
|
+
function PopoverArrow({
|
|
102
|
+
className,
|
|
103
|
+
...props
|
|
104
|
+
}) {
|
|
105
|
+
const { styles } = usePopoverContext();
|
|
106
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
107
|
+
import_popover.Popover.Arrow,
|
|
108
|
+
{
|
|
109
|
+
"data-slot": "popover-arrow",
|
|
110
|
+
className: (0, import_shared_utils.cn)(styles.arrow(), className),
|
|
111
|
+
...props,
|
|
112
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", children: [
|
|
113
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "Arrow" }),
|
|
114
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
115
|
+
"path",
|
|
116
|
+
{
|
|
117
|
+
d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V9H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
|
|
118
|
+
className: styles.arrowTop()
|
|
119
|
+
}
|
|
120
|
+
),
|
|
121
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
122
|
+
"path",
|
|
123
|
+
{
|
|
124
|
+
d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
|
|
125
|
+
className: styles.arrowBottom()
|
|
126
|
+
}
|
|
127
|
+
)
|
|
128
|
+
] })
|
|
129
|
+
}
|
|
130
|
+
);
|
|
106
131
|
}
|
|
107
132
|
function PopoverAnchor({ ...props }) {
|
|
108
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
133
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover.Arrow, { "data-slot": "popover-anchor", ...props });
|
|
109
134
|
}
|
|
110
135
|
// Annotate the CommonJS export names for ESM import in node:
|
|
111
136
|
0 && (module.exports = {
|
package/dist/namespace.mjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import "./chunk-
|
|
2
|
+
import "./chunk-CLLMLEHG.mjs";
|
|
3
3
|
import {
|
|
4
4
|
PopoverAnchor,
|
|
5
5
|
PopoverContent,
|
|
6
6
|
PopoverRoot,
|
|
7
7
|
PopoverTrigger
|
|
8
|
-
} from "./chunk-
|
|
8
|
+
} from "./chunk-SSISZ7R7.mjs";
|
|
9
9
|
export {
|
|
10
10
|
PopoverAnchor as Anchor,
|
|
11
11
|
PopoverContent as Content,
|
package/dist/popover.d.mts
CHANGED
|
@@ -1,18 +1,23 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import { Popover } from '@base-ui-components/react/popover';
|
|
3
|
+
import { PopoverVariants } from '@kopexa/theme';
|
|
3
4
|
import { ComponentProps } from 'react';
|
|
4
5
|
|
|
5
|
-
type PopoverRootProps = ComponentProps<typeof
|
|
6
|
+
type PopoverRootProps = Omit<ComponentProps<typeof Popover.Root>, "onOpenChange"> & PopoverVariants & {
|
|
7
|
+
onOpenChange?: (open: boolean) => void;
|
|
8
|
+
};
|
|
6
9
|
declare const PopoverRoot: (props: PopoverRootProps) => react_jsx_runtime.JSX.Element;
|
|
7
|
-
type PopoverTriggerProps = ComponentProps<typeof
|
|
10
|
+
type PopoverTriggerProps = ComponentProps<typeof Popover.Trigger>;
|
|
8
11
|
declare function PopoverTrigger({ ...props }: PopoverTriggerProps): react_jsx_runtime.JSX.Element;
|
|
9
|
-
type PopoverContentProps = ComponentProps<typeof
|
|
12
|
+
type PopoverContentProps = ComponentProps<typeof Popover.Popup> & {
|
|
10
13
|
align?: "start" | "center" | "end";
|
|
11
14
|
sideOffset?: number;
|
|
12
|
-
|
|
15
|
+
alignOffset?: Popover.Positioner.Props["alignOffset"];
|
|
16
|
+
side?: Popover.Positioner.Props["side"];
|
|
17
|
+
showArrow?: boolean;
|
|
13
18
|
};
|
|
14
|
-
declare function PopoverContent({ className, align, sideOffset,
|
|
15
|
-
type PopoverAnchorProps = ComponentProps<typeof
|
|
19
|
+
declare function PopoverContent({ className, align, sideOffset, alignOffset, side, children, showArrow, ...props }: PopoverContentProps): react_jsx_runtime.JSX.Element;
|
|
20
|
+
type PopoverAnchorProps = ComponentProps<typeof Popover.Arrow>;
|
|
16
21
|
declare function PopoverAnchor({ ...props }: PopoverAnchorProps): react_jsx_runtime.JSX.Element;
|
|
17
22
|
|
|
18
23
|
export { PopoverAnchor, type PopoverAnchorProps, PopoverContent, type PopoverContentProps, PopoverRoot, type PopoverRootProps, PopoverTrigger, type PopoverTriggerProps };
|
package/dist/popover.d.ts
CHANGED
|
@@ -1,18 +1,23 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import { Popover } from '@base-ui-components/react/popover';
|
|
3
|
+
import { PopoverVariants } from '@kopexa/theme';
|
|
3
4
|
import { ComponentProps } from 'react';
|
|
4
5
|
|
|
5
|
-
type PopoverRootProps = ComponentProps<typeof
|
|
6
|
+
type PopoverRootProps = Omit<ComponentProps<typeof Popover.Root>, "onOpenChange"> & PopoverVariants & {
|
|
7
|
+
onOpenChange?: (open: boolean) => void;
|
|
8
|
+
};
|
|
6
9
|
declare const PopoverRoot: (props: PopoverRootProps) => react_jsx_runtime.JSX.Element;
|
|
7
|
-
type PopoverTriggerProps = ComponentProps<typeof
|
|
10
|
+
type PopoverTriggerProps = ComponentProps<typeof Popover.Trigger>;
|
|
8
11
|
declare function PopoverTrigger({ ...props }: PopoverTriggerProps): react_jsx_runtime.JSX.Element;
|
|
9
|
-
type PopoverContentProps = ComponentProps<typeof
|
|
12
|
+
type PopoverContentProps = ComponentProps<typeof Popover.Popup> & {
|
|
10
13
|
align?: "start" | "center" | "end";
|
|
11
14
|
sideOffset?: number;
|
|
12
|
-
|
|
15
|
+
alignOffset?: Popover.Positioner.Props["alignOffset"];
|
|
16
|
+
side?: Popover.Positioner.Props["side"];
|
|
17
|
+
showArrow?: boolean;
|
|
13
18
|
};
|
|
14
|
-
declare function PopoverContent({ className, align, sideOffset,
|
|
15
|
-
type PopoverAnchorProps = ComponentProps<typeof
|
|
19
|
+
declare function PopoverContent({ className, align, sideOffset, alignOffset, side, children, showArrow, ...props }: PopoverContentProps): react_jsx_runtime.JSX.Element;
|
|
20
|
+
type PopoverAnchorProps = ComponentProps<typeof Popover.Arrow>;
|
|
16
21
|
declare function PopoverAnchor({ ...props }: PopoverAnchorProps): react_jsx_runtime.JSX.Element;
|
|
17
22
|
|
|
18
23
|
export { PopoverAnchor, type PopoverAnchorProps, PopoverContent, type PopoverContentProps, PopoverRoot, type PopoverRootProps, PopoverTrigger, type PopoverTriggerProps };
|
package/dist/popover.js
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
"use strict";
|
|
3
|
-
var __create = Object.create;
|
|
4
3
|
var __defProp = Object.defineProperty;
|
|
5
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
8
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
7
|
var __export = (target, all) => {
|
|
10
8
|
for (var name in all)
|
|
@@ -18,14 +16,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
16
|
}
|
|
19
17
|
return to;
|
|
20
18
|
};
|
|
21
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
-
mod
|
|
28
|
-
));
|
|
29
19
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
20
|
|
|
31
21
|
// src/popover.tsx
|
|
@@ -37,24 +27,30 @@ __export(popover_exports, {
|
|
|
37
27
|
PopoverTrigger: () => PopoverTrigger
|
|
38
28
|
});
|
|
39
29
|
module.exports = __toCommonJS(popover_exports);
|
|
40
|
-
var
|
|
30
|
+
var import_popover = require("@base-ui-components/react/popover");
|
|
41
31
|
var import_react_utils = require("@kopexa/react-utils");
|
|
32
|
+
var import_shared_utils = require("@kopexa/shared-utils");
|
|
42
33
|
var import_theme = require("@kopexa/theme");
|
|
43
34
|
var import_use_controllable_state = require("@kopexa/use-controllable-state");
|
|
44
|
-
var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
|
|
45
|
-
var import_react = require("motion/react");
|
|
46
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
47
36
|
var [PopoverProvider, usePopoverContext] = (0, import_react_utils.createContext)();
|
|
48
37
|
var PopoverRoot = (props) => {
|
|
49
|
-
const {
|
|
38
|
+
const {
|
|
39
|
+
open: openProp,
|
|
40
|
+
onOpenChange,
|
|
41
|
+
spacing,
|
|
42
|
+
variant,
|
|
43
|
+
width,
|
|
44
|
+
...restProps
|
|
45
|
+
} = props;
|
|
50
46
|
const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
51
47
|
value: openProp,
|
|
52
48
|
onChange: onOpenChange,
|
|
53
49
|
defaultValue: false
|
|
54
50
|
});
|
|
55
|
-
const styles = (0, import_theme.popover)();
|
|
51
|
+
const styles = (0, import_theme.popover)({ spacing, variant, width });
|
|
56
52
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverProvider, { value: { styles, open }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
57
|
-
|
|
53
|
+
import_popover.Popover.Root,
|
|
58
54
|
{
|
|
59
55
|
"data-slot": "popover",
|
|
60
56
|
open,
|
|
@@ -64,46 +60,75 @@ var PopoverRoot = (props) => {
|
|
|
64
60
|
) });
|
|
65
61
|
};
|
|
66
62
|
function PopoverTrigger({ ...props }) {
|
|
67
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
63
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
68
64
|
}
|
|
69
|
-
var Portal2 = ({ disabled, children }) => {
|
|
70
|
-
if (disabled) return children;
|
|
71
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Portal, { forceMount: true, children });
|
|
72
|
-
};
|
|
73
65
|
function PopoverContent({
|
|
74
66
|
className,
|
|
75
67
|
align = "center",
|
|
76
68
|
sideOffset = 4,
|
|
77
|
-
|
|
69
|
+
alignOffset = 0,
|
|
70
|
+
side = "bottom",
|
|
78
71
|
children,
|
|
72
|
+
showArrow = true,
|
|
79
73
|
...props
|
|
80
74
|
}) {
|
|
81
|
-
const {
|
|
82
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
83
|
-
|
|
75
|
+
const { styles } = usePopoverContext();
|
|
76
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
77
|
+
import_popover.Popover.Positioner,
|
|
84
78
|
{
|
|
85
|
-
"data-slot": "popover-
|
|
86
|
-
align,
|
|
79
|
+
"data-slot": "popover-positioner",
|
|
87
80
|
sideOffset,
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
import_react.motion.div,
|
|
81
|
+
align,
|
|
82
|
+
alignOffset,
|
|
83
|
+
side,
|
|
84
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
85
|
+
import_popover.Popover.Popup,
|
|
94
86
|
{
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
87
|
+
"data-slot": "popover-content",
|
|
88
|
+
className: (0, import_shared_utils.cn)(styles.content(), className),
|
|
89
|
+
...props,
|
|
90
|
+
children: [
|
|
91
|
+
children,
|
|
92
|
+
showArrow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverArrow, {})
|
|
93
|
+
]
|
|
100
94
|
}
|
|
101
95
|
)
|
|
102
96
|
}
|
|
103
|
-
) })
|
|
97
|
+
) });
|
|
98
|
+
}
|
|
99
|
+
function PopoverArrow({
|
|
100
|
+
className,
|
|
101
|
+
...props
|
|
102
|
+
}) {
|
|
103
|
+
const { styles } = usePopoverContext();
|
|
104
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
105
|
+
import_popover.Popover.Arrow,
|
|
106
|
+
{
|
|
107
|
+
"data-slot": "popover-arrow",
|
|
108
|
+
className: (0, import_shared_utils.cn)(styles.arrow(), className),
|
|
109
|
+
...props,
|
|
110
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", children: [
|
|
111
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "Arrow" }),
|
|
112
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
113
|
+
"path",
|
|
114
|
+
{
|
|
115
|
+
d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V9H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
|
|
116
|
+
className: styles.arrowTop()
|
|
117
|
+
}
|
|
118
|
+
),
|
|
119
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
120
|
+
"path",
|
|
121
|
+
{
|
|
122
|
+
d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
|
|
123
|
+
className: styles.arrowBottom()
|
|
124
|
+
}
|
|
125
|
+
)
|
|
126
|
+
] })
|
|
127
|
+
}
|
|
128
|
+
);
|
|
104
129
|
}
|
|
105
130
|
function PopoverAnchor({ ...props }) {
|
|
106
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
131
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.Popover.Arrow, { "data-slot": "popover-anchor", ...props });
|
|
107
132
|
}
|
|
108
133
|
// Annotate the CommonJS export names for ESM import in node:
|
|
109
134
|
0 && (module.exports = {
|
package/dist/popover.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kopexa/popover",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "12.0.0",
|
|
4
4
|
"description": "Displays rich content in a portal, triggered by a button.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"popover"
|
|
@@ -25,17 +25,16 @@
|
|
|
25
25
|
"url": "https://github.com/kopexa-grc/sight/issues"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"motion": ">=12.23.6",
|
|
29
28
|
"react": ">=19.0.0-rc.0",
|
|
30
29
|
"react-dom": ">=19.0.0-rc.0",
|
|
31
|
-
"@kopexa/theme": "1.
|
|
30
|
+
"@kopexa/theme": "2.1.0"
|
|
32
31
|
},
|
|
33
32
|
"dependencies": {
|
|
34
|
-
"@
|
|
35
|
-
"@kopexa/
|
|
36
|
-
"@kopexa/react-utils": "
|
|
37
|
-
"@kopexa/shared-utils": "
|
|
38
|
-
"@kopexa/
|
|
33
|
+
"@base-ui-components/react": "1.0.0-beta.3",
|
|
34
|
+
"@kopexa/motion-utils": "12.0.0",
|
|
35
|
+
"@kopexa/react-utils": "3.0.0",
|
|
36
|
+
"@kopexa/shared-utils": "2.0.0",
|
|
37
|
+
"@kopexa/use-controllable-state": "2.0.0"
|
|
39
38
|
},
|
|
40
39
|
"clean-package": "../../../clean-package.config.json",
|
|
41
40
|
"module": "dist/index.mjs",
|
package/dist/chunk-CVZNBNZ4.mjs
DELETED
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __export = (target, all) => {
|
|
4
|
-
for (var name in all)
|
|
5
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
// src/popover.tsx
|
|
9
|
-
import { TRANSITION_VARIANTS } from "@kopexa/motion-utils";
|
|
10
|
-
import { createContext } from "@kopexa/react-utils";
|
|
11
|
-
import { popover } from "@kopexa/theme";
|
|
12
|
-
import { useControllableState } from "@kopexa/use-controllable-state";
|
|
13
|
-
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
14
|
-
import {
|
|
15
|
-
AnimatePresence,
|
|
16
|
-
domAnimation,
|
|
17
|
-
LazyMotion,
|
|
18
|
-
motion
|
|
19
|
-
} from "motion/react";
|
|
20
|
-
import { jsx } from "react/jsx-runtime";
|
|
21
|
-
var [PopoverProvider, usePopoverContext] = createContext();
|
|
22
|
-
var PopoverRoot = (props) => {
|
|
23
|
-
const { open: openProp, onOpenChange, ...restProps } = props;
|
|
24
|
-
const [open, setOpen] = useControllableState({
|
|
25
|
-
value: openProp,
|
|
26
|
-
onChange: onOpenChange,
|
|
27
|
-
defaultValue: false
|
|
28
|
-
});
|
|
29
|
-
const styles = popover();
|
|
30
|
-
return /* @__PURE__ */ jsx(PopoverProvider, { value: { styles, open }, children: /* @__PURE__ */ jsx(
|
|
31
|
-
PopoverPrimitive.Root,
|
|
32
|
-
{
|
|
33
|
-
"data-slot": "popover",
|
|
34
|
-
open,
|
|
35
|
-
onOpenChange: setOpen,
|
|
36
|
-
...restProps
|
|
37
|
-
}
|
|
38
|
-
) });
|
|
39
|
-
};
|
|
40
|
-
function PopoverTrigger({ ...props }) {
|
|
41
|
-
return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
42
|
-
}
|
|
43
|
-
var Portal2 = ({ disabled, children }) => {
|
|
44
|
-
if (disabled) return children;
|
|
45
|
-
return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { forceMount: true, children });
|
|
46
|
-
};
|
|
47
|
-
function PopoverContent({
|
|
48
|
-
className,
|
|
49
|
-
align = "center",
|
|
50
|
-
sideOffset = 4,
|
|
51
|
-
portalled = true,
|
|
52
|
-
children,
|
|
53
|
-
...props
|
|
54
|
-
}) {
|
|
55
|
-
const { open, styles } = usePopoverContext();
|
|
56
|
-
return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(Portal2, { disabled: !portalled, children: /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(
|
|
57
|
-
PopoverPrimitive.Content,
|
|
58
|
-
{
|
|
59
|
-
"data-slot": "popover-content",
|
|
60
|
-
align,
|
|
61
|
-
sideOffset,
|
|
62
|
-
className: styles.content({ className }),
|
|
63
|
-
...props,
|
|
64
|
-
asChild: true,
|
|
65
|
-
forceMount: !portalled ? true : void 0,
|
|
66
|
-
children: /* @__PURE__ */ jsx(
|
|
67
|
-
motion.div,
|
|
68
|
-
{
|
|
69
|
-
animate: "enter",
|
|
70
|
-
exit: "exit",
|
|
71
|
-
initial: "initial",
|
|
72
|
-
variants: TRANSITION_VARIANTS.scaleSpringOpacity,
|
|
73
|
-
children
|
|
74
|
-
}
|
|
75
|
-
)
|
|
76
|
-
}
|
|
77
|
-
) }) }) : null });
|
|
78
|
-
}
|
|
79
|
-
function PopoverAnchor({ ...props }) {
|
|
80
|
-
return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
export {
|
|
84
|
-
__export,
|
|
85
|
-
PopoverRoot,
|
|
86
|
-
PopoverTrigger,
|
|
87
|
-
PopoverContent,
|
|
88
|
-
PopoverAnchor
|
|
89
|
-
};
|