@bioturing/components 0.43.0 → 0.44.1
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/components/button/style.css +1 -1
- package/dist/components/dialog/Dialog.d.ts +53 -0
- package/dist/components/dialog/Dialog.d.ts.map +1 -0
- package/dist/components/dialog/Dialog.js +231 -0
- package/dist/components/dialog/Dialog.js.map +1 -0
- package/dist/components/dialog/constants.d.ts +20 -0
- package/dist/components/dialog/constants.d.ts.map +1 -0
- package/dist/components/dialog/constants.js +20 -0
- package/dist/components/dialog/constants.js.map +1 -0
- package/dist/components/dialog/dialog.css +1 -0
- package/dist/components/dialog/index.d.ts +4 -0
- package/dist/components/dialog/index.d.ts.map +1 -0
- package/dist/components/dialog/index.js +8 -0
- package/dist/components/dialog/index.js.map +1 -0
- package/dist/components/ds-root/component.d.ts.map +1 -1
- package/dist/components/ds-root/component.js +16 -14
- package/dist/components/ds-root/component.js.map +1 -1
- package/dist/components/icon-button/style.css +1 -1
- package/dist/components/index.d.ts +3 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/notification/NotificationProvider.d.ts +6 -0
- package/dist/components/notification/NotificationProvider.d.ts.map +1 -0
- package/dist/components/notification/NotificationProvider.js +67 -0
- package/dist/components/notification/NotificationProvider.js.map +1 -0
- package/dist/components/notification/NotificationService.d.ts +35 -0
- package/dist/components/notification/NotificationService.d.ts.map +1 -0
- package/dist/components/notification/NotificationService.js +26 -0
- package/dist/components/notification/NotificationService.js.map +1 -0
- package/dist/components/notification/functions.d.ts +11 -0
- package/dist/components/notification/functions.d.ts.map +1 -0
- package/dist/components/notification/functions.js +38 -0
- package/dist/components/notification/functions.js.map +1 -0
- package/dist/components/notification/index.d.ts +11 -0
- package/dist/components/notification/index.d.ts.map +1 -0
- package/dist/components/notification/index.js +27 -0
- package/dist/components/notification/index.js.map +1 -0
- package/dist/components/notification/style.css +1 -0
- package/dist/components/notification/themedNotificationConfig.d.ts +5 -0
- package/dist/components/notification/themedNotificationConfig.d.ts.map +1 -0
- package/dist/components/notification/themedNotificationConfig.js +34 -0
- package/dist/components/notification/themedNotificationConfig.js.map +1 -0
- package/dist/components/notification/useNotification.d.ts +3 -0
- package/dist/components/notification/useNotification.d.ts.map +1 -0
- package/dist/components/notification/useNotification.js +25 -0
- package/dist/components/notification/useNotification.js.map +1 -0
- package/dist/components/popup-panel/component.d.ts.map +1 -1
- package/dist/components/popup-panel/component.js +184 -182
- package/dist/components/popup-panel/component.js.map +1 -1
- package/dist/components/select-trigger/style.css +1 -1
- package/dist/components/spin/Indicator/Looper.d.ts +6 -0
- package/dist/components/spin/Indicator/Looper.d.ts.map +1 -0
- package/dist/components/spin/Indicator/Looper.js +15 -0
- package/dist/components/spin/Indicator/Looper.js.map +1 -0
- package/dist/components/spin/Indicator/Progress.d.ts +6 -0
- package/dist/components/spin/Indicator/Progress.d.ts.map +1 -0
- package/dist/components/spin/Indicator/Progress.js +59 -0
- package/dist/components/spin/Indicator/Progress.js.map +1 -0
- package/dist/components/spin/Indicator/index.d.ts +8 -0
- package/dist/components/spin/Indicator/index.d.ts.map +1 -0
- package/dist/components/spin/Indicator/index.js +20 -0
- package/dist/components/spin/Indicator/index.js.map +1 -0
- package/dist/components/spin/component.d.ts +28 -4
- package/dist/components/spin/component.d.ts.map +1 -1
- package/dist/components/spin/component.js +162 -14
- package/dist/components/spin/component.js.map +1 -1
- package/dist/components/spin/style.css +1 -1
- package/dist/components/spin/usePercent.d.ts +2 -0
- package/dist/components/spin/usePercent.d.ts.map +1 -0
- package/dist/components/spin/usePercent.js +27 -0
- package/dist/components/spin/usePercent.js.map +1 -0
- package/dist/components/theme-provider/style.css +1 -1
- package/dist/components/tour/style.css +1 -1
- package/dist/components/utils/cn.d.ts.map +1 -1
- package/dist/components/utils/cn.js +112 -20
- package/dist/components/utils/cn.js.map +1 -1
- package/dist/components/utils/theme.d.ts.map +1 -1
- package/dist/components/utils/theme.js +3 -1
- package/dist/components/utils/theme.js.map +1 -1
- package/dist/index.js +267 -253
- package/dist/index.js.map +1 -1
- package/dist/metadata.d.ts +29 -1
- package/dist/metadata.d.ts.map +1 -1
- package/dist/metadata.js +50 -1
- package/dist/metadata.js.map +1 -1
- package/dist/stats.html +1 -1
- package/dist/tokens/and-theme/tokens.d.ts.map +1 -1
- package/dist/tokens/and-theme/tokens.js +61 -56
- package/dist/tokens/and-theme/tokens.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,300 +1,302 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { Popover as
|
|
4
|
-
import { mergeProps as
|
|
5
|
-
import { useStableCallback as
|
|
6
|
-
import { X as
|
|
7
|
-
import {
|
|
2
|
+
import { jsx as n, jsxs as u, Fragment as de } from "react/jsx-runtime";
|
|
3
|
+
import { Popover as f } from "@base-ui/react/popover";
|
|
4
|
+
import { mergeProps as V } from "@base-ui/react";
|
|
5
|
+
import { useStableCallback as ae } from "@base-ui/utils/useStableCallback";
|
|
6
|
+
import { X as me } from "@bioturing/assets";
|
|
7
|
+
import { useRef as Z, useCallback as k, useMemo as s, useEffect as ge } from "react";
|
|
8
8
|
import { Stack as he } from "../stack/index.js";
|
|
9
9
|
import { PopupPanelSize as Oe, DEFAULT_SIDE_OFFSET as be } from "./constants.js";
|
|
10
10
|
import './style.css';/* empty css */
|
|
11
11
|
import { anchorToResizeHandles as Ee } from "./utils.js";
|
|
12
12
|
import { useDraggable as Se } from "../hooks/useDraggable.js";
|
|
13
|
-
import { Resizable as
|
|
14
|
-
import { parseAntdPlacement as
|
|
13
|
+
import { Resizable as Re } from "../resizable/component.js";
|
|
14
|
+
import { parseAntdPlacement as Pe, buildAntdPlacement as ve } from "../utils/placement.js";
|
|
15
15
|
import { useControlledState as ye } from "../hooks/useControlledState.js";
|
|
16
16
|
import { useCls as Te } from "../utils/antdUtils.js";
|
|
17
17
|
import { useTheme as ke } from "../theme-provider/context/themeStore.js";
|
|
18
|
-
import { clsx as
|
|
18
|
+
import { clsx as d } from "../utils/cn.js";
|
|
19
19
|
import { IconButton as Ce } from "../icon-button/component.js";
|
|
20
|
-
const
|
|
21
|
-
function
|
|
22
|
-
side:
|
|
20
|
+
const H = {};
|
|
21
|
+
function W({
|
|
22
|
+
side: g,
|
|
23
23
|
align: P,
|
|
24
|
-
onPlacementChange:
|
|
24
|
+
onPlacementChange: h
|
|
25
25
|
}) {
|
|
26
|
-
const
|
|
26
|
+
const v = Z(void 0);
|
|
27
27
|
return ge(() => {
|
|
28
|
-
const
|
|
29
|
-
side:
|
|
28
|
+
const O = ve({
|
|
29
|
+
side: g,
|
|
30
30
|
align: P
|
|
31
31
|
});
|
|
32
|
-
|
|
33
|
-
}, [
|
|
32
|
+
O !== v.current && (v.current = O, h?.(O));
|
|
33
|
+
}, [g, P, h]), null;
|
|
34
34
|
}
|
|
35
35
|
const Ye = ({
|
|
36
|
-
children:
|
|
36
|
+
children: g,
|
|
37
37
|
placement: P,
|
|
38
|
-
openOnHover:
|
|
39
|
-
open:
|
|
40
|
-
onOpenChange:
|
|
41
|
-
content:
|
|
42
|
-
title:
|
|
43
|
-
trigger:
|
|
44
|
-
className:
|
|
45
|
-
anchor:
|
|
46
|
-
beforeCloseButton:
|
|
47
|
-
afterCloseButton:
|
|
48
|
-
afterTitle:
|
|
49
|
-
size:
|
|
50
|
-
footer:
|
|
51
|
-
defaultOpen:
|
|
52
|
-
resizable:
|
|
53
|
-
draggable:
|
|
54
|
-
maintainAspectRatio:
|
|
38
|
+
openOnHover: h = !1,
|
|
39
|
+
open: v,
|
|
40
|
+
onOpenChange: O,
|
|
41
|
+
content: I,
|
|
42
|
+
title: y,
|
|
43
|
+
trigger: z = "click",
|
|
44
|
+
className: A,
|
|
45
|
+
anchor: o,
|
|
46
|
+
beforeCloseButton: M,
|
|
47
|
+
afterCloseButton: $,
|
|
48
|
+
afterTitle: C,
|
|
49
|
+
size: b = "medium",
|
|
50
|
+
footer: E,
|
|
51
|
+
defaultOpen: N = !1,
|
|
52
|
+
resizable: x = !1,
|
|
53
|
+
draggable: ee = !1,
|
|
54
|
+
maintainAspectRatio: j = !1,
|
|
55
55
|
classNames: e,
|
|
56
|
-
modal:
|
|
57
|
-
closeOnClickOutside:
|
|
58
|
-
onPlacementChange:
|
|
59
|
-
positionerProps:
|
|
60
|
-
triggerProps:
|
|
61
|
-
portalProps:
|
|
62
|
-
offsetFrom:
|
|
63
|
-
nativeButton:
|
|
64
|
-
...
|
|
56
|
+
modal: te = !1,
|
|
57
|
+
closeOnClickOutside: re = !0,
|
|
58
|
+
onPlacementChange: _,
|
|
59
|
+
positionerProps: i = H,
|
|
60
|
+
triggerProps: ne = H,
|
|
61
|
+
portalProps: oe = H,
|
|
62
|
+
offsetFrom: S,
|
|
63
|
+
nativeButton: K = !0,
|
|
64
|
+
...le
|
|
65
65
|
}) => {
|
|
66
|
-
const [
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
66
|
+
const [ie, D] = ye(
|
|
67
|
+
v,
|
|
68
|
+
O,
|
|
69
|
+
N
|
|
70
70
|
// Always provide a default value to prevent undefined
|
|
71
|
-
), t = Te(), { className:
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
if (
|
|
75
|
-
|
|
76
|
-
|
|
71
|
+
), t = Te(), { className: U } = ke(), T = Pe(P), w = Z(null), B = k((r) => {
|
|
72
|
+
r === null || w.current === r || (w.current = r);
|
|
73
|
+
}, []), F = k(() => {
|
|
74
|
+
if (o instanceof Element) return o;
|
|
75
|
+
if (o != null && "current" in o) return o.current;
|
|
76
|
+
if (typeof o == "function") {
|
|
77
|
+
const r = o();
|
|
78
|
+
return r instanceof Element ? r : null;
|
|
77
79
|
}
|
|
78
|
-
return
|
|
79
|
-
}, [
|
|
80
|
-
if (typeof
|
|
81
|
-
return
|
|
82
|
-
const
|
|
83
|
-
return
|
|
84
|
-
const
|
|
85
|
-
if (!
|
|
86
|
-
const
|
|
87
|
-
let
|
|
88
|
-
switch (
|
|
80
|
+
return w.current;
|
|
81
|
+
}, [o]), J = s(() => {
|
|
82
|
+
if (typeof i.sideOffset == "function")
|
|
83
|
+
return i.sideOffset;
|
|
84
|
+
const r = typeof i.sideOffset == "number" ? i.sideOffset : 0, l = be + r;
|
|
85
|
+
return S ? ({ side: Q }) => {
|
|
86
|
+
const R = S.current, p = F();
|
|
87
|
+
if (!R || !p) return l;
|
|
88
|
+
const c = R.getBoundingClientRect(), a = p.getBoundingClientRect();
|
|
89
|
+
let m;
|
|
90
|
+
switch (Q) {
|
|
89
91
|
case "bottom":
|
|
90
|
-
|
|
92
|
+
m = c.bottom - a.bottom;
|
|
91
93
|
break;
|
|
92
94
|
case "top":
|
|
93
|
-
|
|
95
|
+
m = a.top - c.top;
|
|
94
96
|
break;
|
|
95
97
|
case "right":
|
|
96
|
-
|
|
98
|
+
m = c.right - a.right;
|
|
97
99
|
break;
|
|
98
100
|
case "left":
|
|
99
|
-
|
|
101
|
+
m = a.left - c.left;
|
|
100
102
|
break;
|
|
101
103
|
default:
|
|
102
|
-
|
|
104
|
+
m = 0;
|
|
103
105
|
}
|
|
104
|
-
return Math.max(0,
|
|
106
|
+
return Math.max(0, m) + l;
|
|
105
107
|
} : l;
|
|
106
|
-
}, [
|
|
107
|
-
/* @__PURE__ */
|
|
108
|
+
}, [S, F, i.sideOffset]), L = s(() => /* @__PURE__ */ n(me, { size: 16 }), []), X = k(() => /* @__PURE__ */ u("div", { className: d(t("popup-panel-header"), e?.header), children: [
|
|
109
|
+
/* @__PURE__ */ u(
|
|
108
110
|
he,
|
|
109
111
|
{
|
|
110
112
|
align: "center",
|
|
111
113
|
gap: 8,
|
|
112
114
|
className: t("popup-panel-title-wrapper"),
|
|
113
115
|
children: [
|
|
114
|
-
/* @__PURE__ */
|
|
115
|
-
|
|
116
|
+
/* @__PURE__ */ n(
|
|
117
|
+
f.Title,
|
|
116
118
|
{
|
|
117
|
-
render: /* @__PURE__ */
|
|
119
|
+
render: /* @__PURE__ */ n("div", { className: d(t("grow", "truncate"), e?.title), children: y })
|
|
118
120
|
}
|
|
119
121
|
),
|
|
120
|
-
/* @__PURE__ */
|
|
121
|
-
|
|
122
|
-
/* @__PURE__ */
|
|
123
|
-
|
|
122
|
+
/* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
|
|
123
|
+
M,
|
|
124
|
+
/* @__PURE__ */ n(
|
|
125
|
+
f.Close,
|
|
124
126
|
{
|
|
125
|
-
render: /* @__PURE__ */
|
|
127
|
+
render: /* @__PURE__ */ n(Ce, { children: L })
|
|
126
128
|
}
|
|
127
129
|
),
|
|
128
|
-
|
|
130
|
+
$
|
|
129
131
|
] })
|
|
130
132
|
]
|
|
131
133
|
}
|
|
132
134
|
),
|
|
133
|
-
|
|
135
|
+
C || null
|
|
134
136
|
] }), [
|
|
137
|
+
$,
|
|
138
|
+
C,
|
|
135
139
|
M,
|
|
136
|
-
T,
|
|
137
|
-
z,
|
|
138
140
|
t,
|
|
139
141
|
e?.header,
|
|
140
142
|
e?.title,
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
]), { ref:
|
|
144
|
-
() => /* @__PURE__ */
|
|
145
|
-
|
|
143
|
+
L,
|
|
144
|
+
y
|
|
145
|
+
]), { ref: Y } = Se(ee), ce = s(
|
|
146
|
+
() => /* @__PURE__ */ u(
|
|
147
|
+
f.Popup,
|
|
146
148
|
{
|
|
147
|
-
className:
|
|
149
|
+
className: d(
|
|
148
150
|
t("popup-panel"),
|
|
149
|
-
t(`popup-panel-size-${
|
|
150
|
-
|
|
151
|
+
t(`popup-panel-size-${b}`),
|
|
152
|
+
A,
|
|
151
153
|
e?.popup
|
|
152
154
|
),
|
|
153
|
-
ref:
|
|
155
|
+
ref: Y,
|
|
154
156
|
children: [
|
|
155
|
-
|
|
156
|
-
/* @__PURE__ */
|
|
157
|
-
|
|
157
|
+
y && X(),
|
|
158
|
+
/* @__PURE__ */ n("div", { className: d(t("popup-panel-content"), e?.content), children: /* @__PURE__ */ n("div", { className: t("popup-panel-content-inner"), children: I }) }),
|
|
159
|
+
E && /* @__PURE__ */ n("div", { className: d(t("popup-panel-footer"), e?.footer), children: typeof E == "function" ? E({ close: () => D(!1) }) : E })
|
|
158
160
|
]
|
|
159
161
|
}
|
|
160
162
|
),
|
|
161
163
|
[
|
|
162
|
-
|
|
164
|
+
A,
|
|
163
165
|
e?.content,
|
|
164
166
|
e?.footer,
|
|
165
167
|
e?.popup,
|
|
166
168
|
t,
|
|
167
|
-
|
|
168
|
-
|
|
169
|
+
I,
|
|
170
|
+
Y,
|
|
171
|
+
E,
|
|
172
|
+
X,
|
|
173
|
+
D,
|
|
169
174
|
b,
|
|
170
|
-
|
|
171
|
-
x,
|
|
172
|
-
O,
|
|
173
|
-
v
|
|
175
|
+
y
|
|
174
176
|
]
|
|
175
|
-
),
|
|
177
|
+
), q = k(
|
|
176
178
|
({
|
|
177
|
-
children:
|
|
179
|
+
children: r,
|
|
178
180
|
onDragEnd: l,
|
|
179
|
-
onDragStart:
|
|
180
|
-
...
|
|
181
|
-
}, { side:
|
|
182
|
-
const
|
|
183
|
-
return
|
|
184
|
-
/* @__PURE__ */
|
|
185
|
-
|
|
181
|
+
onDragStart: Q,
|
|
182
|
+
...R
|
|
183
|
+
}, { side: p, align: c }) => {
|
|
184
|
+
const a = `${p}-${c}`;
|
|
185
|
+
return x ? /* @__PURE__ */ u(de, { children: [
|
|
186
|
+
/* @__PURE__ */ n(
|
|
187
|
+
W,
|
|
186
188
|
{
|
|
187
|
-
side:
|
|
189
|
+
side: p,
|
|
188
190
|
align: c,
|
|
189
|
-
onPlacementChange:
|
|
191
|
+
onPlacementChange: _
|
|
190
192
|
}
|
|
191
193
|
),
|
|
192
|
-
/* @__PURE__ */
|
|
193
|
-
|
|
194
|
+
/* @__PURE__ */ n(
|
|
195
|
+
Re,
|
|
194
196
|
{
|
|
195
|
-
resizable:
|
|
196
|
-
resetKey:
|
|
197
|
-
maintainAspectRatio:
|
|
197
|
+
resizable: x,
|
|
198
|
+
resetKey: a,
|
|
199
|
+
maintainAspectRatio: j,
|
|
198
200
|
classNames: {
|
|
199
201
|
resizeHandle: e?.resizeHandle
|
|
200
202
|
},
|
|
201
|
-
handles: Ee(
|
|
202
|
-
...
|
|
203
|
-
children:
|
|
203
|
+
handles: Ee(p),
|
|
204
|
+
...R,
|
|
205
|
+
children: r
|
|
204
206
|
}
|
|
205
207
|
)
|
|
206
|
-
] }) : /* @__PURE__ */
|
|
207
|
-
/* @__PURE__ */
|
|
208
|
-
|
|
208
|
+
] }) : /* @__PURE__ */ u("div", { ...R, children: [
|
|
209
|
+
/* @__PURE__ */ n(
|
|
210
|
+
W,
|
|
209
211
|
{
|
|
210
|
-
side:
|
|
212
|
+
side: p,
|
|
211
213
|
align: c,
|
|
212
|
-
onPlacementChange:
|
|
214
|
+
onPlacementChange: _
|
|
213
215
|
}
|
|
214
216
|
),
|
|
215
|
-
|
|
217
|
+
r
|
|
216
218
|
] });
|
|
217
219
|
},
|
|
218
220
|
[
|
|
219
|
-
|
|
220
|
-
|
|
221
|
+
x,
|
|
222
|
+
j,
|
|
221
223
|
e?.resizeHandle,
|
|
222
|
-
|
|
224
|
+
_
|
|
223
225
|
]
|
|
224
|
-
),
|
|
226
|
+
), G = s(
|
|
225
227
|
() => ({
|
|
226
|
-
"--size-width":
|
|
228
|
+
"--size-width": b ? Oe[b] : void 0
|
|
227
229
|
}),
|
|
228
|
-
[
|
|
229
|
-
),
|
|
230
|
+
[b]
|
|
231
|
+
), pe = s(
|
|
230
232
|
() => ({
|
|
231
|
-
className:
|
|
233
|
+
className: d(
|
|
232
234
|
t("popup-panel-root"),
|
|
233
|
-
|
|
235
|
+
U,
|
|
234
236
|
e?.root
|
|
235
237
|
),
|
|
236
|
-
side:
|
|
237
|
-
align:
|
|
238
|
-
sideOffset:
|
|
239
|
-
anchor:
|
|
240
|
-
style:
|
|
241
|
-
render:
|
|
238
|
+
side: T.side,
|
|
239
|
+
align: T.align,
|
|
240
|
+
sideOffset: J,
|
|
241
|
+
anchor: o,
|
|
242
|
+
style: G,
|
|
243
|
+
render: q
|
|
242
244
|
}),
|
|
243
245
|
[
|
|
244
246
|
t,
|
|
245
|
-
|
|
247
|
+
U,
|
|
246
248
|
e?.root,
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
249
|
+
T.side,
|
|
250
|
+
T.align,
|
|
251
|
+
J,
|
|
252
|
+
o,
|
|
253
|
+
G,
|
|
254
|
+
q
|
|
253
255
|
]
|
|
254
|
-
),
|
|
255
|
-
() =>
|
|
256
|
-
[
|
|
257
|
-
),
|
|
258
|
-
(
|
|
259
|
-
(l.reason === "outside-press" || l.reason === "focus-out") && !
|
|
256
|
+
), ue = s(
|
|
257
|
+
() => S ? (({ sideOffset: r, ...l }) => l)(i) : i,
|
|
258
|
+
[S, i]
|
|
259
|
+
), fe = ae(
|
|
260
|
+
(r, l) => {
|
|
261
|
+
(l.reason === "outside-press" || l.reason === "focus-out") && !re || D(r, l);
|
|
260
262
|
}
|
|
261
|
-
),
|
|
263
|
+
), se = s(
|
|
262
264
|
() => ({
|
|
263
|
-
ref:
|
|
264
|
-
render:
|
|
265
|
-
nativeButton:
|
|
266
|
-
className:
|
|
267
|
-
openOnHover:
|
|
265
|
+
ref: B,
|
|
266
|
+
render: g,
|
|
267
|
+
nativeButton: K,
|
|
268
|
+
className: d(t("popup-panel-trigger"), e?.trigger),
|
|
269
|
+
openOnHover: z === "hover" ? !0 : h
|
|
268
270
|
}),
|
|
269
271
|
[
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
272
|
+
B,
|
|
273
|
+
g,
|
|
274
|
+
K,
|
|
273
275
|
t,
|
|
274
276
|
e?.trigger,
|
|
275
|
-
|
|
276
|
-
|
|
277
|
+
z,
|
|
278
|
+
h
|
|
277
279
|
]
|
|
278
280
|
);
|
|
279
|
-
return /* @__PURE__ */
|
|
280
|
-
|
|
281
|
+
return /* @__PURE__ */ u(
|
|
282
|
+
f.Root,
|
|
281
283
|
{
|
|
282
|
-
open:
|
|
283
|
-
onOpenChange:
|
|
284
|
-
modal:
|
|
285
|
-
...
|
|
284
|
+
open: ie,
|
|
285
|
+
onOpenChange: fe,
|
|
286
|
+
modal: te,
|
|
287
|
+
...le,
|
|
286
288
|
children: [
|
|
287
|
-
/* @__PURE__ */
|
|
288
|
-
|
|
289
|
+
/* @__PURE__ */ n(
|
|
290
|
+
f.Trigger,
|
|
289
291
|
{
|
|
290
|
-
...
|
|
292
|
+
...V(se, ne)
|
|
291
293
|
}
|
|
292
294
|
),
|
|
293
|
-
/* @__PURE__ */
|
|
294
|
-
|
|
295
|
+
/* @__PURE__ */ n(f.Portal, { ...oe, children: /* @__PURE__ */ n(
|
|
296
|
+
f.Positioner,
|
|
295
297
|
{
|
|
296
|
-
...
|
|
297
|
-
children:
|
|
298
|
+
...V(pe, ue),
|
|
299
|
+
children: ce
|
|
298
300
|
}
|
|
299
301
|
) })
|
|
300
302
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/popup-panel/component.tsx"],"sourcesContent":["\"use client\";\nimport { Popover } from \"@base-ui/react/popover\";\nimport { buildAntdPlacement, clsx, parseAntdPlacement, useCls } from \"../utils\";\n\nimport { mergeProps } from \"@base-ui/react\";\nimport { useStableCallback } from \"@base-ui/utils/useStableCallback\";\nimport { X } from \"@bioturing/assets\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useControlledState, useDraggable } from \"../hooks\";\nimport { IconButton } from \"../icon-button\";\nimport { Resizable } from \"../resizable\";\nimport { Stack } from \"../stack\";\nimport { DEFAULT_SIDE_OFFSET, PopupPanelSize } from \"./constants\";\nimport { PopupPanelProps } from \"./types\";\n\n// Import component-specific styles\nimport { useTheme } from \"../theme-provider\";\nimport \"./style.css\";\nimport { anchorToResizeHandles } from \"./utils\";\n\n// Stable empty objects to avoid creating new references on every render\nconst EMPTY_OBJECT = {} as const;\n\ninterface PlacementStateSyncProps {\n side: Popover.Positioner.State[\"side\"];\n align: Popover.Positioner.State[\"align\"];\n onPlacementChange?: (\n placement: NonNullable<PopupPanelProps[\"placement\"]>,\n ) => void;\n}\n\nfunction PlacementStateSync({\n side,\n align,\n onPlacementChange,\n}: PlacementStateSyncProps) {\n const lastPlacementRef = useRef<\n NonNullable<PopupPanelProps[\"placement\"]> | undefined\n >(undefined);\n\n useEffect(() => {\n const placement = buildAntdPlacement({\n side,\n align,\n }) as NonNullable<PopupPanelProps[\"placement\"]>;\n if (placement === lastPlacementRef.current) return;\n lastPlacementRef.current = placement;\n onPlacementChange?.(placement);\n }, [side, align, onPlacementChange]);\n\n return null;\n}\n\nexport const PopupPanel = ({\n children,\n placement,\n openOnHover = false,\n open: outsideOpen,\n onOpenChange: outsideOnOpenChange,\n content,\n title,\n trigger = \"click\",\n className,\n anchor,\n beforeCloseButton,\n afterCloseButton,\n afterTitle,\n size = \"medium\",\n footer,\n defaultOpen = false,\n resizable = false,\n draggable = false,\n maintainAspectRatio = false,\n classNames,\n modal = false,\n closeOnClickOutside = true,\n onPlacementChange,\n positionerProps = EMPTY_OBJECT,\n triggerProps = EMPTY_OBJECT,\n portalProps = EMPTY_OBJECT,\n offsetFrom,\n nativeButton = true,\n ...rest\n}: PopupPanelProps) => {\n // Use controlled state with proper initialization to prevent switching between controlled/uncontrolled\n const [open, setOpen] = useControlledState(\n outsideOpen,\n outsideOnOpenChange,\n defaultOpen, // Always provide a default value to prevent undefined\n );\n\n const cls = useCls();\n const { className: themeClassName } = useTheme();\n const baseUIPlacement = parseAntdPlacement(placement);\n\n const [triggerEl, setTriggerEl] = useState<HTMLElement | null>(null);\n\n // Resolve the anchor element from the various anchor prop types\n const anchorEl = useMemo(() => {\n if (anchor instanceof Element) return anchor;\n if (anchor != null && \"current\" in anchor) return anchor.current;\n if (typeof anchor === \"function\") {\n const result = anchor();\n return result instanceof Element ? result : null;\n }\n return triggerEl;\n }, [anchor, triggerEl]);\n\n // Compute sideOffset: incorporate user sideOffset, and when offsetFrom is\n // provided, add the distance from the anchor to the offsetFrom element\n const resolvedSideOffset = useMemo(() => {\n // If user provides a function, let them fully control the offset\n if (typeof positionerProps.sideOffset === \"function\")\n return positionerProps.sideOffset;\n\n const userSideOffset =\n typeof positionerProps.sideOffset === \"number\"\n ? positionerProps.sideOffset\n : 0;\n const baseOffset = DEFAULT_SIDE_OFFSET + userSideOffset;\n\n if (!offsetFrom) return baseOffset;\n\n return ({ side }: { side: string }) => {\n const offsetFromEl = offsetFrom.current;\n if (!offsetFromEl || !anchorEl) return baseOffset;\n\n const offsetRect = offsetFromEl.getBoundingClientRect();\n const anchorRect = anchorEl.getBoundingClientRect();\n\n let distance: number;\n switch (side) {\n case \"bottom\":\n distance = offsetRect.bottom - anchorRect.bottom;\n break;\n case \"top\":\n distance = anchorRect.top - offsetRect.top;\n break;\n case \"right\":\n distance = offsetRect.right - anchorRect.right;\n break;\n case \"left\":\n distance = anchorRect.left - offsetRect.left;\n break;\n default:\n distance = 0;\n }\n\n return Math.max(0, distance) + baseOffset;\n };\n }, [offsetFrom, anchorEl, positionerProps.sideOffset]);\n\n const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n\n const renderTitle = useCallback(() => {\n return (\n <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n <Stack\n align=\"center\"\n gap={8}\n className={cls(\"popup-panel-title-wrapper\")}\n >\n <Popover.Title\n render={\n <div className={clsx(cls(\"grow\", \"truncate\"), classNames?.title)}>\n {title}\n </div>\n }\n ></Popover.Title>\n <div className=\"flex items-center gap-2\">\n {beforeCloseButton}\n <Popover.Close\n render={<IconButton>{defaultCloseIcon}</IconButton>}\n />\n {afterCloseButton}\n </div>\n </Stack>\n {afterTitle ? afterTitle : null}\n </div>\n );\n }, [\n afterCloseButton,\n afterTitle,\n beforeCloseButton,\n cls,\n classNames?.header,\n classNames?.title,\n defaultCloseIcon,\n title,\n ]);\n\n const { ref: draggableRef } = useDraggable(draggable);\n\n const popup = useMemo(\n () => (\n <Popover.Popup\n className={clsx(\n cls(\"popup-panel\"),\n cls(`popup-panel-size-${size}`),\n className,\n classNames?.popup,\n )}\n ref={draggableRef}\n >\n {title && renderTitle()}\n <div className={clsx(cls(\"popup-panel-content\"), classNames?.content)}>\n <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n </div>\n {footer && (\n <div className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}>\n {typeof footer === \"function\"\n ? footer({ close: () => setOpen(false) })\n : footer}\n </div>\n )}\n </Popover.Popup>\n ),\n [\n className,\n classNames?.content,\n classNames?.footer,\n classNames?.popup,\n cls,\n content,\n draggableRef,\n footer,\n renderTitle,\n setOpen,\n size,\n title,\n ],\n );\n\n // Positioner render function — useCallback keeps the reference stable when deps\n // don't change. Cannot use useStableCallback here because render props are\n // called during React's render phase, not in effects/event handlers.\n const positionerRender = useCallback(\n (\n {\n children,\n onDragEnd: _onDragEnd,\n onDragStart: _onDragStart,\n ...props\n }: React.ComponentProps<\"div\">,\n { side, align }: Popover.Positioner.State,\n ) => {\n const placementKey = `${side}-${align}`;\n return resizable ? (\n <>\n <PlacementStateSync\n side={side}\n align={align}\n onPlacementChange={onPlacementChange}\n />\n <Resizable\n resizable={resizable}\n resetKey={placementKey}\n maintainAspectRatio={maintainAspectRatio}\n classNames={{\n resizeHandle: classNames?.resizeHandle,\n }}\n handles={anchorToResizeHandles(side, align)}\n {...props}\n >\n {children}\n </Resizable>\n </>\n ) : (\n <div {...props}>\n <PlacementStateSync\n side={side}\n align={align}\n onPlacementChange={onPlacementChange}\n />\n {children}\n </div>\n );\n },\n [\n resizable,\n maintainAspectRatio,\n classNames?.resizeHandle,\n onPlacementChange,\n ],\n );\n\n const positionerStyle = useMemo(\n () =>\n ({\n \"--size-width\": size ? PopupPanelSize[size] : undefined,\n }) as React.CSSProperties,\n [size],\n );\n\n const defaultPositionerProps = useMemo(\n () => ({\n className: clsx(\n cls(\"popup-panel-root\"),\n themeClassName,\n classNames?.root,\n ),\n side: baseUIPlacement.side,\n align: baseUIPlacement.align,\n sideOffset: resolvedSideOffset,\n anchor,\n style: positionerStyle,\n render: positionerRender,\n }),\n [\n cls,\n themeClassName,\n classNames?.root,\n baseUIPlacement.side,\n baseUIPlacement.align,\n resolvedSideOffset,\n anchor,\n positionerStyle,\n positionerRender,\n ],\n );\n\n // Strip sideOffset from positionerProps when offsetFrom is active,\n // since we've already incorporated it into resolvedSideOffset\n const finalPositionerProps = useMemo(\n () =>\n offsetFrom\n ? (({ sideOffset: _, ...rest }) => rest)(positionerProps)\n : positionerProps,\n [offsetFrom, positionerProps],\n );\n\n // Stable onOpenChange handler to avoid recreating on every render\n const handleOpenChange = useStableCallback(\n (nextOpen: boolean, eventDetails: Popover.Root.ChangeEventDetails) => {\n if (\n (eventDetails.reason === \"outside-press\" ||\n eventDetails.reason === \"focus-out\") &&\n !closeOnClickOutside\n )\n return;\n setOpen(nextOpen, eventDetails);\n },\n );\n\n const defaultTriggerProps = useMemo(\n () => ({\n ref: setTriggerEl,\n render: children,\n nativeButton,\n className: clsx(cls(\"popup-panel-trigger\"), classNames?.trigger),\n openOnHover: trigger === \"hover\" ? true : openOnHover,\n }),\n [\n setTriggerEl,\n children,\n nativeButton,\n cls,\n classNames?.trigger,\n trigger,\n openOnHover,\n ],\n );\n\n return (\n <Popover.Root\n open={open}\n onOpenChange={handleOpenChange}\n modal={modal}\n {...rest}\n >\n <Popover.Trigger\n {...mergeProps(defaultTriggerProps, triggerProps)}\n ></Popover.Trigger>\n <Popover.Portal {...portalProps}>\n <Popover.Positioner\n {...mergeProps(defaultPositionerProps, finalPositionerProps)}\n >\n {popup}\n </Popover.Positioner>\n </Popover.Portal>\n </Popover.Root>\n );\n};\n"],"names":["EMPTY_OBJECT","PlacementStateSync","side","align","onPlacementChange","lastPlacementRef","useRef","useEffect","placement","buildAntdPlacement","PopupPanel","children","openOnHover","outsideOpen","outsideOnOpenChange","content","title","trigger","className","anchor","beforeCloseButton","afterCloseButton","afterTitle","size","footer","defaultOpen","resizable","draggable","maintainAspectRatio","classNames","modal","closeOnClickOutside","positionerProps","triggerProps","portalProps","offsetFrom","nativeButton","rest","open","setOpen","useControlledState","cls","useCls","themeClassName","useTheme","baseUIPlacement","parseAntdPlacement","triggerEl","setTriggerEl","useState","anchorEl","useMemo","result","resolvedSideOffset","userSideOffset","baseOffset","DEFAULT_SIDE_OFFSET","offsetFromEl","offsetRect","anchorRect","distance","defaultCloseIcon","jsx","X","renderTitle","useCallback","jsxs","clsx","Stack","Popover","IconButton","draggableRef","useDraggable","popup","positionerRender","_onDragEnd","_onDragStart","props","placementKey","Fragment","Resizable","anchorToResizeHandles","positionerStyle","PopupPanelSize","defaultPositionerProps","finalPositionerProps","_","handleOpenChange","useStableCallback","nextOpen","eventDetails","defaultTriggerProps","mergeProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/popup-panel/component.tsx"],"sourcesContent":["\"use client\";\nimport { Popover } from \"@base-ui/react/popover\";\nimport { buildAntdPlacement, clsx, parseAntdPlacement, useCls } from \"../utils\";\n\nimport { mergeProps } from \"@base-ui/react\";\nimport { useStableCallback } from \"@base-ui/utils/useStableCallback\";\nimport { X } from \"@bioturing/assets\";\nimport { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { useControlledState, useDraggable } from \"../hooks\";\nimport { IconButton } from \"../icon-button\";\nimport { Resizable } from \"../resizable\";\nimport { Stack } from \"../stack\";\nimport { DEFAULT_SIDE_OFFSET, PopupPanelSize } from \"./constants\";\nimport { PopupPanelProps } from \"./types\";\n\n// Import component-specific styles\nimport { useTheme } from \"../theme-provider\";\nimport \"./style.css\";\nimport { anchorToResizeHandles } from \"./utils\";\n\n// Stable empty objects to avoid creating new references on every render\nconst EMPTY_OBJECT = {} as const;\n\ninterface PlacementStateSyncProps {\n side: Popover.Positioner.State[\"side\"];\n align: Popover.Positioner.State[\"align\"];\n onPlacementChange?: (\n placement: NonNullable<PopupPanelProps[\"placement\"]>,\n ) => void;\n}\n\nfunction PlacementStateSync({\n side,\n align,\n onPlacementChange,\n}: PlacementStateSyncProps) {\n const lastPlacementRef = useRef<\n NonNullable<PopupPanelProps[\"placement\"]> | undefined\n >(undefined);\n\n useEffect(() => {\n const placement = buildAntdPlacement({\n side,\n align,\n }) as NonNullable<PopupPanelProps[\"placement\"]>;\n if (placement === lastPlacementRef.current) return;\n lastPlacementRef.current = placement;\n onPlacementChange?.(placement);\n }, [side, align, onPlacementChange]);\n\n return null;\n}\n\nexport const PopupPanel = ({\n children,\n placement,\n openOnHover = false,\n open: outsideOpen,\n onOpenChange: outsideOnOpenChange,\n content,\n title,\n trigger = \"click\",\n className,\n anchor,\n beforeCloseButton,\n afterCloseButton,\n afterTitle,\n size = \"medium\",\n footer,\n defaultOpen = false,\n resizable = false,\n draggable = false,\n maintainAspectRatio = false,\n classNames,\n modal = false,\n closeOnClickOutside = true,\n onPlacementChange,\n positionerProps = EMPTY_OBJECT,\n triggerProps = EMPTY_OBJECT,\n portalProps = EMPTY_OBJECT,\n offsetFrom,\n nativeButton = true,\n ...rest\n}: PopupPanelProps) => {\n // Use controlled state with proper initialization to prevent switching between controlled/uncontrolled\n const [open, setOpen] = useControlledState(\n outsideOpen,\n outsideOnOpenChange,\n defaultOpen, // Always provide a default value to prevent undefined\n );\n\n const cls = useCls();\n const { className: themeClassName } = useTheme();\n const baseUIPlacement = parseAntdPlacement(placement);\n\n const triggerElRef = useRef<HTMLElement | null>(null);\n const handleTriggerRef = useCallback((node: HTMLElement | null) => {\n if (node === null || triggerElRef.current === node) return;\n triggerElRef.current = node;\n }, []);\n\n const getAnchorEl = useCallback(() => {\n if (anchor instanceof Element) return anchor;\n if (anchor != null && \"current\" in anchor) return anchor.current;\n if (typeof anchor === \"function\") {\n const result = anchor();\n return result instanceof Element ? result : null;\n }\n return triggerElRef.current;\n }, [anchor]);\n\n // Compute sideOffset: incorporate user sideOffset, and when offsetFrom is\n // provided, add the distance from the anchor to the offsetFrom element\n const resolvedSideOffset = useMemo(() => {\n // If user provides a function, let them fully control the offset\n if (typeof positionerProps.sideOffset === \"function\")\n return positionerProps.sideOffset;\n\n const userSideOffset =\n typeof positionerProps.sideOffset === \"number\"\n ? positionerProps.sideOffset\n : 0;\n const baseOffset = DEFAULT_SIDE_OFFSET + userSideOffset;\n\n if (!offsetFrom) return baseOffset;\n\n return ({ side }: { side: string }) => {\n const offsetFromEl = offsetFrom.current;\n const anchorEl = getAnchorEl();\n if (!offsetFromEl || !anchorEl) return baseOffset;\n\n const offsetRect = offsetFromEl.getBoundingClientRect();\n const anchorRect = anchorEl.getBoundingClientRect();\n\n let distance: number;\n switch (side) {\n case \"bottom\":\n distance = offsetRect.bottom - anchorRect.bottom;\n break;\n case \"top\":\n distance = anchorRect.top - offsetRect.top;\n break;\n case \"right\":\n distance = offsetRect.right - anchorRect.right;\n break;\n case \"left\":\n distance = anchorRect.left - offsetRect.left;\n break;\n default:\n distance = 0;\n }\n\n return Math.max(0, distance) + baseOffset;\n };\n }, [offsetFrom, getAnchorEl, positionerProps.sideOffset]);\n\n const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n\n const renderTitle = useCallback(() => {\n return (\n <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n <Stack\n align=\"center\"\n gap={8}\n className={cls(\"popup-panel-title-wrapper\")}\n >\n <Popover.Title\n render={\n <div className={clsx(cls(\"grow\", \"truncate\"), classNames?.title)}>\n {title}\n </div>\n }\n ></Popover.Title>\n <div className=\"flex items-center gap-2\">\n {beforeCloseButton}\n <Popover.Close\n render={<IconButton>{defaultCloseIcon}</IconButton>}\n />\n {afterCloseButton}\n </div>\n </Stack>\n {afterTitle ? afterTitle : null}\n </div>\n );\n }, [\n afterCloseButton,\n afterTitle,\n beforeCloseButton,\n cls,\n classNames?.header,\n classNames?.title,\n defaultCloseIcon,\n title,\n ]);\n\n const { ref: draggableRef } = useDraggable(draggable);\n\n const popup = useMemo(\n () => (\n <Popover.Popup\n className={clsx(\n cls(\"popup-panel\"),\n cls(`popup-panel-size-${size}`),\n className,\n classNames?.popup,\n )}\n ref={draggableRef}\n >\n {title && renderTitle()}\n <div className={clsx(cls(\"popup-panel-content\"), classNames?.content)}>\n <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n </div>\n {footer && (\n <div className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}>\n {typeof footer === \"function\"\n ? footer({ close: () => setOpen(false) })\n : footer}\n </div>\n )}\n </Popover.Popup>\n ),\n [\n className,\n classNames?.content,\n classNames?.footer,\n classNames?.popup,\n cls,\n content,\n draggableRef,\n footer,\n renderTitle,\n setOpen,\n size,\n title,\n ],\n );\n\n // Positioner render function — useCallback keeps the reference stable when deps\n // don't change. Cannot use useStableCallback here because render props are\n // called during React's render phase, not in effects/event handlers.\n const positionerRender = useCallback(\n (\n {\n children,\n onDragEnd: _onDragEnd,\n onDragStart: _onDragStart,\n ...props\n }: React.ComponentProps<\"div\">,\n { side, align }: Popover.Positioner.State,\n ) => {\n const placementKey = `${side}-${align}`;\n return resizable ? (\n <>\n <PlacementStateSync\n side={side}\n align={align}\n onPlacementChange={onPlacementChange}\n />\n <Resizable\n resizable={resizable}\n resetKey={placementKey}\n maintainAspectRatio={maintainAspectRatio}\n classNames={{\n resizeHandle: classNames?.resizeHandle,\n }}\n handles={anchorToResizeHandles(side, align)}\n {...props}\n >\n {children}\n </Resizable>\n </>\n ) : (\n <div {...props}>\n <PlacementStateSync\n side={side}\n align={align}\n onPlacementChange={onPlacementChange}\n />\n {children}\n </div>\n );\n },\n [\n resizable,\n maintainAspectRatio,\n classNames?.resizeHandle,\n onPlacementChange,\n ],\n );\n\n const positionerStyle = useMemo(\n () =>\n ({\n \"--size-width\": size ? PopupPanelSize[size] : undefined,\n }) as React.CSSProperties,\n [size],\n );\n\n const defaultPositionerProps = useMemo(\n () => ({\n className: clsx(\n cls(\"popup-panel-root\"),\n themeClassName,\n classNames?.root,\n ),\n side: baseUIPlacement.side,\n align: baseUIPlacement.align,\n sideOffset: resolvedSideOffset,\n anchor,\n style: positionerStyle,\n render: positionerRender,\n }),\n [\n cls,\n themeClassName,\n classNames?.root,\n baseUIPlacement.side,\n baseUIPlacement.align,\n resolvedSideOffset,\n anchor,\n positionerStyle,\n positionerRender,\n ],\n );\n\n // Strip sideOffset from positionerProps when offsetFrom is active,\n // since we've already incorporated it into resolvedSideOffset\n const finalPositionerProps = useMemo(\n () =>\n offsetFrom\n ? (({ sideOffset: _, ...rest }) => rest)(positionerProps)\n : positionerProps,\n [offsetFrom, positionerProps],\n );\n\n // Stable onOpenChange handler to avoid recreating on every render\n const handleOpenChange = useStableCallback(\n (nextOpen: boolean, eventDetails: Popover.Root.ChangeEventDetails) => {\n if (\n (eventDetails.reason === \"outside-press\" ||\n eventDetails.reason === \"focus-out\") &&\n !closeOnClickOutside\n )\n return;\n setOpen(nextOpen, eventDetails);\n },\n );\n\n const defaultTriggerProps = useMemo(\n () => ({\n ref: handleTriggerRef,\n render: children,\n nativeButton,\n className: clsx(cls(\"popup-panel-trigger\"), classNames?.trigger),\n openOnHover: trigger === \"hover\" ? true : openOnHover,\n }),\n [\n handleTriggerRef,\n children,\n nativeButton,\n cls,\n classNames?.trigger,\n trigger,\n openOnHover,\n ],\n );\n\n return (\n <Popover.Root\n open={open}\n onOpenChange={handleOpenChange}\n modal={modal}\n {...rest}\n >\n <Popover.Trigger\n {...mergeProps(defaultTriggerProps, triggerProps)}\n ></Popover.Trigger>\n <Popover.Portal {...portalProps}>\n <Popover.Positioner\n {...mergeProps(defaultPositionerProps, finalPositionerProps)}\n >\n {popup}\n </Popover.Positioner>\n </Popover.Portal>\n </Popover.Root>\n );\n};\n"],"names":["EMPTY_OBJECT","PlacementStateSync","side","align","onPlacementChange","lastPlacementRef","useRef","useEffect","placement","buildAntdPlacement","PopupPanel","children","openOnHover","outsideOpen","outsideOnOpenChange","content","title","trigger","className","anchor","beforeCloseButton","afterCloseButton","afterTitle","size","footer","defaultOpen","resizable","draggable","maintainAspectRatio","classNames","modal","closeOnClickOutside","positionerProps","triggerProps","portalProps","offsetFrom","nativeButton","rest","open","setOpen","useControlledState","cls","useCls","themeClassName","useTheme","baseUIPlacement","parseAntdPlacement","triggerElRef","handleTriggerRef","useCallback","node","getAnchorEl","result","resolvedSideOffset","useMemo","userSideOffset","baseOffset","DEFAULT_SIDE_OFFSET","offsetFromEl","anchorEl","offsetRect","anchorRect","distance","defaultCloseIcon","jsx","X","renderTitle","jsxs","clsx","Stack","Popover","IconButton","draggableRef","useDraggable","popup","positionerRender","_onDragEnd","_onDragStart","props","placementKey","Fragment","Resizable","anchorToResizeHandles","positionerStyle","PopupPanelSize","defaultPositionerProps","finalPositionerProps","_","handleOpenChange","useStableCallback","nextOpen","eventDetails","defaultTriggerProps","mergeProps"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.ds-select-trigger{position:relative;display:inline-flex;align-items:center;cursor:pointer;width:100%;background-color:var(--ds-control-color-bg);border:1px solid var(--ds-control-color-border);border-radius:var(--ds-control-border-radius);transition:var(--ds-control-transition);text-align:left}.ds-select-trigger:focus,.ds-select-trigger:focus-visible{outline:none}.ds-select-trigger:hover:not(.ds-select-trigger-disabled){border-color:var(--ds-control-color-border-hover)}.ds-select-trigger:focus,.ds-select-trigger:focus-visible,.ds-select-trigger-focused{border:var(--ds-control-border-active);box-shadow:var(--ds-control-shadow-active)}.ds-select-trigger-open{border:var(--ds-control-border-active)}.ds-select-trigger-disabled{background-color:var(--ds-control-color-bg-disabled);
|
|
1
|
+
@layer components{.ds-select-trigger{position:relative;display:inline-flex;align-items:center;cursor:pointer;width:100%;background-color:var(--ds-control-color-bg);border:1px solid var(--ds-control-color-border);border-radius:var(--ds-control-border-radius);transition:var(--ds-control-transition);text-align:left}.ds-select-trigger:focus,.ds-select-trigger:focus-visible{outline:none}.ds-select-trigger:hover:not(.ds-select-trigger-disabled){border-color:var(--ds-control-color-border-hover)}.ds-select-trigger:focus,.ds-select-trigger:focus-visible,.ds-select-trigger-focused{border:var(--ds-control-border-active);box-shadow:var(--ds-control-shadow-active)}.ds-select-trigger-open{border:var(--ds-control-border-active)}.ds-select-trigger-disabled{background-color:var(--ds-control-color-bg-disabled);cursor:not-allowed;color:var(--ds-control-color-text-disabled)}.ds-select-trigger-disabled .ds-select-trigger-text{cursor:not-allowed}.ds-select-trigger-error{border:var(--ds-control-border-error-active)}.ds-select-trigger-error:focus,.ds-select-trigger-error:focus-visible,.ds-select-trigger-error.ds-select-trigger-focused{border:var(--ds-control-border-error-active);box-shadow:var(--ds-control-shadow-error-active)}.ds-select-trigger-warning{border:var(--ds-control-border-warning-active)}.ds-select-trigger-warning:focus,.ds-select-trigger-warning:focus-visible,.ds-select-trigger-warning.ds-select-trigger-focused{border:var(--ds-control-border-warning-active);box-shadow:var(--ds-control-shadow-warning-active)}.ds-select-trigger-value{flex:1;color:var(--ds-control-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.ds-select-trigger-value-with-prefix{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.ds-select-trigger-placeholder{flex:1;color:var(--ds-control-color-text-placeholder);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.ds-select-trigger-suffix{display:flex;align-items:center;justify-content:center;width:var(--ds-control-icon-size);height:var(--ds-control-icon-size);position:relative;font-size:var(--ds-control-icon-size);flex-shrink:0}.ds-select-trigger-arrow,.ds-select-trigger-clear{position:absolute;top:50%;right:var(--ds-trigger-padding-inline);transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:var(--ds-control-color-icon);width:var(--ds-control-icon-size);height:var(--ds-control-icon-size)}.ds-select-trigger-arrow-icon{display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.ds-select-trigger-open .ds-select-trigger-arrow-icon{transform:rotate(180deg)}.ds-select-trigger-clear{pointer-events:none;opacity:0;transition:opacity .2s ease}.ds-select-trigger-clear:hover{color:var(--ds-control-color-icon-hover)}.ds-select-trigger-clear-icon{display:flex;align-items:center;justify-content:center}.ds-select-trigger-allow-clear.ds-select-trigger-has-value:hover .ds-select-trigger-arrow{opacity:0;pointer-events:none}.ds-select-trigger-allow-clear.ds-select-trigger-has-value:hover .ds-select-trigger-clear{pointer-events:auto;opacity:1}.ds-select-trigger-small{--ds-trigger-padding: var(--ds-control-padding-small);--ds-trigger-padding-inline: var(--ds-control-padding-inline-small);--ds-trigger-padding-block: var(--ds-control-padding-block-small);min-height:var(--ds-control-min-height-small);line-height:var(--ds-control-line-height)}.ds-select-trigger-middle{--ds-trigger-padding: var(--ds-control-padding-middle);--ds-trigger-padding-inline: var(--ds-control-padding-inline-middle);--ds-trigger-padding-block: var(--ds-control-padding-block-middle);min-height:var(--ds-control-min-height-middle);line-height:var(--ds-control-line-height)}.ds-select-trigger-large{--ds-trigger-padding: var(--ds-control-padding-large);--ds-trigger-padding-inline: var(--ds-control-padding-inline-large);--ds-trigger-padding-block: var(--ds-control-padding-block-large);min-height:var(--ds-control-min-height-large);line-height:var(--ds-control-line-height)}.ds-select-trigger-content{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden;padding:var(--ds-trigger-padding-block) calc(var(--ds-trigger-padding-inline) + 1rem) var(--ds-trigger-padding-block) var(--ds-trigger-padding-inline)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Looper.d.ts","sourceRoot":"","sources":["../../../../src/components/spin/Indicator/Looper.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,SAAS,EAAE,OAAW,EAAE,EAAE,WAAW,2CAiBrE"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs as d, Fragment as c, jsx as o } from "react/jsx-runtime";
|
|
3
|
+
import l from "./Progress.js";
|
|
4
|
+
import { clsx as m } from "../../utils/cn.js";
|
|
5
|
+
function p({ prefixCls: s, percent: a = 0 }) {
|
|
6
|
+
const e = `${s}-dot`, t = `${e}-holder`, n = `${t}-hidden`;
|
|
7
|
+
return /* @__PURE__ */ d(c, { children: [
|
|
8
|
+
/* @__PURE__ */ o("span", { className: m(t, a > 0 && n), children: /* @__PURE__ */ o("span", { className: m(e, `${s}-dot-spin`), children: [1, 2, 3, 4].map((r) => /* @__PURE__ */ o("i", { className: `${s}-dot-item` }, r)) }) }),
|
|
9
|
+
/* @__PURE__ */ o(l, { prefixCls: s, percent: a })
|
|
10
|
+
] });
|
|
11
|
+
}
|
|
12
|
+
export {
|
|
13
|
+
p as default
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=Looper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Looper.js","sources":["../../../../src/components/spin/Indicator/Looper.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { clsx } from \"../../utils\";\nimport Progress from \"./Progress\";\n\nexport interface LooperProps {\n prefixCls: string;\n percent?: number;\n}\n\nexport default function Looper({ prefixCls, percent = 0 }: LooperProps) {\n const dotClassName = `${prefixCls}-dot`;\n const holderClassName = `${dotClassName}-holder`;\n const hideClassName = `${holderClassName}-hidden`;\n\n return (\n <>\n <span className={clsx(holderClassName, percent > 0 && hideClassName)}>\n <span className={clsx(dotClassName, `${prefixCls}-dot-spin`)}>\n {[1, 2, 3, 4].map((item) => (\n <i className={`${prefixCls}-dot-item`} key={item} />\n ))}\n </span>\n </span>\n <Progress prefixCls={prefixCls} percent={percent} />\n </>\n );\n}\n"],"names":["Looper","prefixCls","percent","dotClassName","holderClassName","hideClassName","jsxs","Fragment","jsx","clsx","item","Progress"],"mappings":";;;;AAWA,SAAwBA,EAAO,EAAE,WAAAC,GAAW,SAAAC,IAAU,KAAkB;AACtE,QAAMC,IAAe,GAAGF,CAAS,QAC3BG,IAAkB,GAAGD,CAAY,WACjCE,IAAgB,GAAGD,CAAe;AAExC,SACE,gBAAAE,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWC,EAAKL,GAAiBF,IAAU,KAAKG,CAAa,GACjE,UAAA,gBAAAG,EAAC,UAAK,WAAWC,EAAKN,GAAc,GAAGF,CAAS,WAAW,GACxD,UAAA,CAAC,GAAG,GAAG,GAAG,CAAC,EAAE,IAAI,CAACS,MACjB,gBAAAF,EAAC,KAAA,EAAE,WAAW,GAAGP,CAAS,YAAA,GAAkBS,CAAM,CACnD,GACH,GACF;AAAA,IACA,gBAAAF,EAACG,GAAA,EAAS,WAAAV,GAAsB,SAAAC,EAAA,CAAkB;AAAA,EAAA,GACpD;AAEJ;"}
|