@oneplatformdev/ui 0.0.1-beta.148 → 0.0.1-beta.150
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/Dialog/Dialog.mjs +70 -86
- package/package.json +1 -1
package/Dialog/Dialog.mjs
CHANGED
|
@@ -1,73 +1,57 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import * as
|
|
4
|
-
import { XIcon as
|
|
5
|
-
import { cn as
|
|
1
|
+
import { jsx as o, jsxs as d } from "react/jsx-runtime";
|
|
2
|
+
import i, { useState as y, useRef as N } from "react";
|
|
3
|
+
import * as a from "@radix-ui/react-dialog";
|
|
4
|
+
import { XIcon as D } from "lucide-react";
|
|
5
|
+
import { cn as l, composeRefs as b } from "@oneplatformdev/utils";
|
|
6
6
|
import { DialogOverlayScope as h } from "./DialogOverlayScope.mjs";
|
|
7
|
-
const
|
|
8
|
-
const { modal:
|
|
9
|
-
return /* @__PURE__ */ s
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
modal: a,
|
|
13
|
-
...l
|
|
14
|
-
}
|
|
15
|
-
);
|
|
16
|
-
}, I = o.Trigger, v = o.Portal, S = o.Close, c = r.forwardRef(({ className: t, ...a }, l) => /* @__PURE__ */ s(
|
|
17
|
-
o.Overlay,
|
|
7
|
+
const F = (e) => {
|
|
8
|
+
const { modal: t, ...s } = e;
|
|
9
|
+
return /* @__PURE__ */ o(a.Root, { modal: t, ...s });
|
|
10
|
+
}, H = a.Trigger, v = a.Portal, _ = a.Close, c = i.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
|
|
11
|
+
a.Overlay,
|
|
18
12
|
{
|
|
19
|
-
ref:
|
|
20
|
-
className:
|
|
13
|
+
ref: s,
|
|
14
|
+
className: l(
|
|
21
15
|
"fixed inset-0 z-40 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
22
|
-
|
|
16
|
+
e
|
|
23
17
|
),
|
|
24
|
-
...
|
|
18
|
+
...t
|
|
25
19
|
}
|
|
26
20
|
));
|
|
27
|
-
c.displayName =
|
|
28
|
-
const w =
|
|
21
|
+
c.displayName = a.Overlay.displayName;
|
|
22
|
+
const w = i.forwardRef(
|
|
29
23
|
({
|
|
30
|
-
className:
|
|
31
|
-
children:
|
|
32
|
-
showCloseButton:
|
|
24
|
+
className: e,
|
|
25
|
+
children: t,
|
|
26
|
+
showCloseButton: s = !0,
|
|
33
27
|
onOpenAutoFocus: n,
|
|
34
28
|
preventAutoFocus: f,
|
|
35
29
|
...m
|
|
36
|
-
},
|
|
37
|
-
const [
|
|
38
|
-
return /* @__PURE__ */
|
|
39
|
-
/* @__PURE__ */
|
|
40
|
-
|
|
41
|
-
o.Content,
|
|
30
|
+
}, p) => {
|
|
31
|
+
const [g, u] = y(null), x = N(null);
|
|
32
|
+
return /* @__PURE__ */ o(v, { children: /* @__PURE__ */ d(c, { children: [
|
|
33
|
+
/* @__PURE__ */ o(h, { value: g, children: /* @__PURE__ */ d(
|
|
34
|
+
a.Content,
|
|
42
35
|
{
|
|
43
|
-
ref: (
|
|
44
|
-
|
|
36
|
+
ref: (r) => {
|
|
37
|
+
r && b(p, x)(r);
|
|
45
38
|
},
|
|
46
|
-
className:
|
|
39
|
+
className: l(
|
|
47
40
|
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg",
|
|
48
41
|
"duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
|
49
42
|
"max-w-[90%] max-h-[90%] overflow-hidden",
|
|
50
43
|
"bg-[#FCFCFC] border border-[#E8E9EB] rounded-[16px]",
|
|
51
|
-
|
|
44
|
+
e
|
|
52
45
|
),
|
|
53
|
-
onOpenAutoFocus: (
|
|
46
|
+
onOpenAutoFocus: (r) => (f && r.preventDefault(), n == null ? void 0 : n(r)),
|
|
54
47
|
...m,
|
|
55
|
-
onPointerDownOutside: (...e) => {
|
|
56
|
-
console.log("onPointerDownOutside", e);
|
|
57
|
-
},
|
|
58
|
-
onInteractOutside: (...e) => {
|
|
59
|
-
console.log("onInteractOutside", e);
|
|
60
|
-
},
|
|
61
|
-
onFocusOutside: (...e) => {
|
|
62
|
-
console.log("onFocusOutside", e);
|
|
63
|
-
},
|
|
64
48
|
children: [
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
49
|
+
t,
|
|
50
|
+
s && /* @__PURE__ */ d(
|
|
51
|
+
a.Close,
|
|
68
52
|
{
|
|
69
53
|
"aria-label": "Close",
|
|
70
|
-
className:
|
|
54
|
+
className: l(
|
|
71
55
|
"absolute right-4 top-4 rounded-sm ring-offset-background w-10 aspect-square",
|
|
72
56
|
"flex items-center justify-center",
|
|
73
57
|
"data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
|
|
@@ -79,84 +63,84 @@ const w = r.forwardRef(
|
|
|
79
63
|
"transition-opacity"
|
|
80
64
|
),
|
|
81
65
|
children: [
|
|
82
|
-
/* @__PURE__ */
|
|
83
|
-
/* @__PURE__ */
|
|
66
|
+
/* @__PURE__ */ o(D, { className: "h-4 w-4" }),
|
|
67
|
+
/* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
|
|
84
68
|
]
|
|
85
69
|
}
|
|
86
70
|
)
|
|
87
71
|
]
|
|
88
72
|
}
|
|
89
73
|
) }),
|
|
90
|
-
/* @__PURE__ */
|
|
74
|
+
/* @__PURE__ */ o(
|
|
91
75
|
"div",
|
|
92
76
|
{
|
|
93
|
-
ref: (
|
|
94
|
-
|
|
77
|
+
ref: (r) => {
|
|
78
|
+
r && u(r);
|
|
95
79
|
}
|
|
96
80
|
}
|
|
97
81
|
)
|
|
98
|
-
] });
|
|
82
|
+
] }) });
|
|
99
83
|
}
|
|
100
84
|
);
|
|
101
|
-
w.displayName =
|
|
85
|
+
w.displayName = a.Content.displayName;
|
|
102
86
|
const C = ({
|
|
103
|
-
className:
|
|
104
|
-
...
|
|
105
|
-
}) => /* @__PURE__ */
|
|
87
|
+
className: e,
|
|
88
|
+
...t
|
|
89
|
+
}) => /* @__PURE__ */ o(
|
|
106
90
|
"div",
|
|
107
91
|
{
|
|
108
|
-
className:
|
|
92
|
+
className: l(
|
|
109
93
|
"flex flex-col space-y-1.5 text-center sm:text-left",
|
|
110
|
-
|
|
94
|
+
e
|
|
111
95
|
),
|
|
112
|
-
...
|
|
96
|
+
...t
|
|
113
97
|
}
|
|
114
98
|
);
|
|
115
99
|
C.displayName = "DialogHeader";
|
|
116
100
|
const R = ({
|
|
117
|
-
className:
|
|
118
|
-
...
|
|
119
|
-
}) => /* @__PURE__ */
|
|
101
|
+
className: e,
|
|
102
|
+
...t
|
|
103
|
+
}) => /* @__PURE__ */ o(
|
|
120
104
|
"div",
|
|
121
105
|
{
|
|
122
|
-
className:
|
|
106
|
+
className: l(
|
|
123
107
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
124
|
-
|
|
108
|
+
e
|
|
125
109
|
),
|
|
126
|
-
...
|
|
110
|
+
...t
|
|
127
111
|
}
|
|
128
112
|
);
|
|
129
113
|
R.displayName = "DialogFooter";
|
|
130
|
-
const
|
|
131
|
-
|
|
114
|
+
const T = i.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
|
|
115
|
+
a.Title,
|
|
132
116
|
{
|
|
133
|
-
ref:
|
|
134
|
-
className:
|
|
117
|
+
ref: s,
|
|
118
|
+
className: l(
|
|
135
119
|
"text-lg font-semibold leading-none tracking-tight",
|
|
136
|
-
|
|
120
|
+
e
|
|
137
121
|
),
|
|
138
|
-
...
|
|
122
|
+
...t
|
|
139
123
|
}
|
|
140
124
|
));
|
|
141
|
-
|
|
142
|
-
const
|
|
143
|
-
|
|
125
|
+
T.displayName = a.Title.displayName;
|
|
126
|
+
const j = i.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
|
|
127
|
+
a.Description,
|
|
144
128
|
{
|
|
145
|
-
ref:
|
|
146
|
-
className:
|
|
147
|
-
...
|
|
129
|
+
ref: s,
|
|
130
|
+
className: l("text-sm text-muted-foreground", e),
|
|
131
|
+
...t
|
|
148
132
|
}
|
|
149
133
|
));
|
|
150
|
-
|
|
134
|
+
j.displayName = a.Description.displayName;
|
|
151
135
|
export {
|
|
152
|
-
|
|
153
|
-
|
|
136
|
+
F as Dialog,
|
|
137
|
+
_ as DialogClose,
|
|
154
138
|
w as DialogContent,
|
|
155
|
-
|
|
139
|
+
j as DialogDescription,
|
|
156
140
|
R as DialogFooter,
|
|
157
141
|
C as DialogHeader,
|
|
158
142
|
c as DialogOverlay,
|
|
159
143
|
v as DialogPortal,
|
|
160
|
-
|
|
161
|
-
|
|
144
|
+
T as DialogTitle,
|
|
145
|
+
H as DialogTrigger
|
|
162
146
|
};
|