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