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