tiny-react-dialog 0.0.2 → 0.0.4
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/README.md +41 -41
- package/dist/TinyReactDialog.d.ts +7 -1
- package/dist/index.es.js +168 -129
- package/dist/index.umd.js +4 -5
- package/dist/tinyReactDialog.css +71 -0
- package/dist/utils/mergeClassnames.d.ts +1 -0
- package/package.json +50 -48
- package/src/tinyReactDialog.css +2 -2
package/README.md
CHANGED
|
@@ -13,57 +13,57 @@ If you are developing a production application, we recommend updating the config
|
|
|
13
13
|
|
|
14
14
|
```js
|
|
15
15
|
export default tseslint.config([
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
globalIgnores(["dist"]),
|
|
17
|
+
{
|
|
18
|
+
files: ["**/*.{ts,tsx}"],
|
|
19
|
+
extends: [
|
|
20
|
+
// Other configs...
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
22
|
+
// Remove tseslint.configs.recommended and replace with this
|
|
23
|
+
...tseslint.configs.recommendedTypeChecked,
|
|
24
|
+
// Alternatively, use this for stricter rules
|
|
25
|
+
...tseslint.configs.strictTypeChecked,
|
|
26
|
+
// Optionally, add this for stylistic rules
|
|
27
|
+
...tseslint.configs.stylisticTypeChecked,
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
// Other configs...
|
|
30
|
+
],
|
|
31
|
+
languageOptions: {
|
|
32
|
+
parserOptions: {
|
|
33
|
+
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
|
|
34
|
+
tsconfigRootDir: import.meta.dirname,
|
|
35
|
+
},
|
|
36
|
+
// other options...
|
|
37
|
+
},
|
|
37
38
|
},
|
|
38
|
-
|
|
39
|
-
])
|
|
39
|
+
]);
|
|
40
40
|
```
|
|
41
41
|
|
|
42
42
|
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
|
43
43
|
|
|
44
44
|
```js
|
|
45
45
|
// eslint.config.js
|
|
46
|
-
import reactX from
|
|
47
|
-
import reactDom from
|
|
46
|
+
import reactX from "eslint-plugin-react-x";
|
|
47
|
+
import reactDom from "eslint-plugin-react-dom";
|
|
48
48
|
|
|
49
49
|
export default tseslint.config([
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
50
|
+
globalIgnores(["dist"]),
|
|
51
|
+
{
|
|
52
|
+
files: ["**/*.{ts,tsx}"],
|
|
53
|
+
extends: [
|
|
54
|
+
// Other configs...
|
|
55
|
+
// Enable lint rules for React
|
|
56
|
+
reactX.configs["recommended-typescript"],
|
|
57
|
+
// Enable lint rules for React DOM
|
|
58
|
+
reactDom.configs.recommended,
|
|
59
|
+
],
|
|
60
|
+
languageOptions: {
|
|
61
|
+
parserOptions: {
|
|
62
|
+
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
|
|
63
|
+
tsconfigRootDir: import.meta.dirname,
|
|
64
|
+
},
|
|
65
|
+
// other options...
|
|
66
|
+
},
|
|
66
67
|
},
|
|
67
|
-
|
|
68
|
-
])
|
|
68
|
+
]);
|
|
69
69
|
```
|
|
@@ -3,5 +3,11 @@ export type TinyReactDialogProps = {
|
|
|
3
3
|
visible: boolean;
|
|
4
4
|
onClose: () => void;
|
|
5
5
|
children?: ReactNode;
|
|
6
|
+
classNames?: {
|
|
7
|
+
overlay?: string;
|
|
8
|
+
container?: string;
|
|
9
|
+
content?: string;
|
|
10
|
+
close?: string;
|
|
11
|
+
};
|
|
6
12
|
};
|
|
7
|
-
export declare function TinyReactDialog({ visible, onClose, children }: TinyReactDialogProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare function TinyReactDialog({ visible, onClose, children, classNames, }: TinyReactDialogProps): import("react/jsx-runtime").JSX.Element;
|
package/dist/index.es.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
import re from "react";
|
|
1
|
+
import te from "react";
|
|
3
2
|
var T = { exports: {} }, v = {};
|
|
4
3
|
/**
|
|
5
4
|
* @license React
|
|
@@ -10,27 +9,27 @@ var T = { exports: {} }, v = {};
|
|
|
10
9
|
* This source code is licensed under the MIT license found in the
|
|
11
10
|
* LICENSE file in the root directory of this source tree.
|
|
12
11
|
*/
|
|
13
|
-
var
|
|
14
|
-
function
|
|
15
|
-
if (
|
|
16
|
-
|
|
17
|
-
var
|
|
18
|
-
function
|
|
12
|
+
var D;
|
|
13
|
+
function ne() {
|
|
14
|
+
if (D) return v;
|
|
15
|
+
D = 1;
|
|
16
|
+
var s = Symbol.for("react.transitional.element"), u = Symbol.for("react.fragment");
|
|
17
|
+
function m(c, a, i) {
|
|
19
18
|
var E = null;
|
|
20
|
-
if (
|
|
21
|
-
|
|
19
|
+
if (i !== void 0 && (E = "" + i), a.key !== void 0 && (E = "" + a.key), "key" in a) {
|
|
20
|
+
i = {};
|
|
22
21
|
for (var R in a)
|
|
23
|
-
R !== "key" && (
|
|
24
|
-
} else
|
|
25
|
-
return a =
|
|
26
|
-
$$typeof:
|
|
27
|
-
type:
|
|
22
|
+
R !== "key" && (i[R] = a[R]);
|
|
23
|
+
} else i = a;
|
|
24
|
+
return a = i.ref, {
|
|
25
|
+
$$typeof: s,
|
|
26
|
+
type: c,
|
|
28
27
|
key: E,
|
|
29
28
|
ref: a !== void 0 ? a : null,
|
|
30
|
-
props:
|
|
29
|
+
props: i
|
|
31
30
|
};
|
|
32
31
|
}
|
|
33
|
-
return v.Fragment =
|
|
32
|
+
return v.Fragment = u, v.jsx = m, v.jsxs = m, v;
|
|
34
33
|
}
|
|
35
34
|
var b = {};
|
|
36
35
|
/**
|
|
@@ -42,58 +41,58 @@ var b = {};
|
|
|
42
41
|
* This source code is licensed under the MIT license found in the
|
|
43
42
|
* LICENSE file in the root directory of this source tree.
|
|
44
43
|
*/
|
|
45
|
-
var
|
|
46
|
-
function
|
|
47
|
-
return
|
|
48
|
-
function
|
|
44
|
+
var L;
|
|
45
|
+
function oe() {
|
|
46
|
+
return L || (L = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
47
|
+
function s(e) {
|
|
49
48
|
if (e == null) return null;
|
|
50
49
|
if (typeof e == "function")
|
|
51
|
-
return e.$$typeof ===
|
|
50
|
+
return e.$$typeof === K ? null : e.displayName || e.name || null;
|
|
52
51
|
if (typeof e == "string") return e;
|
|
53
52
|
switch (e) {
|
|
54
|
-
case
|
|
53
|
+
case g:
|
|
55
54
|
return "Fragment";
|
|
56
|
-
case
|
|
55
|
+
case z:
|
|
57
56
|
return "Profiler";
|
|
58
|
-
case
|
|
57
|
+
case J:
|
|
59
58
|
return "StrictMode";
|
|
60
|
-
case X:
|
|
61
|
-
return "Suspense";
|
|
62
59
|
case B:
|
|
60
|
+
return "Suspense";
|
|
61
|
+
case H:
|
|
63
62
|
return "SuspenseList";
|
|
64
|
-
case
|
|
63
|
+
case Q:
|
|
65
64
|
return "Activity";
|
|
66
65
|
}
|
|
67
66
|
if (typeof e == "object")
|
|
68
67
|
switch (typeof e.tag == "number" && console.error(
|
|
69
68
|
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
70
69
|
), e.$$typeof) {
|
|
71
|
-
case
|
|
70
|
+
case q:
|
|
72
71
|
return "Portal";
|
|
73
|
-
case
|
|
72
|
+
case G:
|
|
74
73
|
return (e.displayName || "Context") + ".Provider";
|
|
75
|
-
case
|
|
74
|
+
case V:
|
|
76
75
|
return (e._context.displayName || "Context") + ".Consumer";
|
|
77
|
-
case
|
|
76
|
+
case X:
|
|
78
77
|
var r = e.render;
|
|
79
78
|
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
80
|
-
case
|
|
81
|
-
return r = e.displayName || null, r !== null ? r :
|
|
82
|
-
case
|
|
79
|
+
case Z:
|
|
80
|
+
return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
|
|
81
|
+
case y:
|
|
83
82
|
r = e._payload, e = e._init;
|
|
84
83
|
try {
|
|
85
|
-
return
|
|
84
|
+
return s(e(r));
|
|
86
85
|
} catch {
|
|
87
86
|
}
|
|
88
87
|
}
|
|
89
88
|
return null;
|
|
90
89
|
}
|
|
91
|
-
function
|
|
90
|
+
function u(e) {
|
|
92
91
|
return "" + e;
|
|
93
92
|
}
|
|
94
|
-
function
|
|
93
|
+
function m(e) {
|
|
95
94
|
try {
|
|
96
|
-
|
|
95
|
+
u(e);
|
|
97
96
|
var r = !1;
|
|
98
97
|
} catch {
|
|
99
98
|
r = !0;
|
|
@@ -105,15 +104,15 @@ function ne() {
|
|
|
105
104
|
r,
|
|
106
105
|
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
107
106
|
n
|
|
108
|
-
),
|
|
107
|
+
), u(e);
|
|
109
108
|
}
|
|
110
109
|
}
|
|
111
|
-
function
|
|
112
|
-
if (e ===
|
|
113
|
-
if (typeof e == "object" && e !== null && e.$$typeof ===
|
|
110
|
+
function c(e) {
|
|
111
|
+
if (e === g) return "<>";
|
|
112
|
+
if (typeof e == "object" && e !== null && e.$$typeof === y)
|
|
114
113
|
return "<...>";
|
|
115
114
|
try {
|
|
116
|
-
var r =
|
|
115
|
+
var r = s(e);
|
|
117
116
|
return r ? "<" + r + ">" : "<...>";
|
|
118
117
|
} catch {
|
|
119
118
|
return "<...>";
|
|
@@ -123,11 +122,11 @@ function ne() {
|
|
|
123
122
|
var e = x.A;
|
|
124
123
|
return e === null ? null : e.getOwner();
|
|
125
124
|
}
|
|
126
|
-
function
|
|
125
|
+
function i() {
|
|
127
126
|
return Error("react-stack-top-frame");
|
|
128
127
|
}
|
|
129
128
|
function E(e) {
|
|
130
|
-
if (
|
|
129
|
+
if (N.call(e, "key")) {
|
|
131
130
|
var r = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
132
131
|
if (r && r.isReactWarning) return !1;
|
|
133
132
|
}
|
|
@@ -135,7 +134,7 @@ function ne() {
|
|
|
135
134
|
}
|
|
136
135
|
function R(e, r) {
|
|
137
136
|
function t() {
|
|
138
|
-
|
|
137
|
+
C || (C = !0, console.error(
|
|
139
138
|
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
140
139
|
r
|
|
141
140
|
));
|
|
@@ -145,22 +144,22 @@ function ne() {
|
|
|
145
144
|
configurable: !0
|
|
146
145
|
});
|
|
147
146
|
}
|
|
148
|
-
function
|
|
149
|
-
var e =
|
|
150
|
-
return
|
|
147
|
+
function W() {
|
|
148
|
+
var e = s(this.type);
|
|
149
|
+
return Y[e] || (Y[e] = !0, console.error(
|
|
151
150
|
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
152
151
|
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
153
152
|
}
|
|
154
|
-
function
|
|
155
|
-
return t =
|
|
156
|
-
$$typeof:
|
|
153
|
+
function U(e, r, t, n, d, l, j, w) {
|
|
154
|
+
return t = l.ref, e = {
|
|
155
|
+
$$typeof: S,
|
|
157
156
|
type: e,
|
|
158
157
|
key: r,
|
|
159
|
-
props:
|
|
160
|
-
_owner:
|
|
158
|
+
props: l,
|
|
159
|
+
_owner: d
|
|
161
160
|
}, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
|
|
162
161
|
enumerable: !1,
|
|
163
|
-
get:
|
|
162
|
+
get: W
|
|
164
163
|
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
165
164
|
configurable: !1,
|
|
166
165
|
enumerable: !1,
|
|
@@ -175,33 +174,33 @@ function ne() {
|
|
|
175
174
|
configurable: !1,
|
|
176
175
|
enumerable: !1,
|
|
177
176
|
writable: !0,
|
|
178
|
-
value:
|
|
177
|
+
value: j
|
|
179
178
|
}), Object.defineProperty(e, "_debugTask", {
|
|
180
179
|
configurable: !1,
|
|
181
180
|
enumerable: !1,
|
|
182
181
|
writable: !0,
|
|
183
|
-
value:
|
|
182
|
+
value: w
|
|
184
183
|
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
185
184
|
}
|
|
186
|
-
function
|
|
185
|
+
function A(e, r, t, n, d, l, j, w) {
|
|
187
186
|
var o = r.children;
|
|
188
187
|
if (o !== void 0)
|
|
189
188
|
if (n)
|
|
190
|
-
if (
|
|
189
|
+
if (ee(o)) {
|
|
191
190
|
for (n = 0; n < o.length; n++)
|
|
192
|
-
|
|
191
|
+
P(o[n]);
|
|
193
192
|
Object.freeze && Object.freeze(o);
|
|
194
193
|
} else
|
|
195
194
|
console.error(
|
|
196
195
|
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
197
196
|
);
|
|
198
|
-
else
|
|
199
|
-
if (
|
|
200
|
-
o =
|
|
201
|
-
var _ = Object.keys(r).filter(function(
|
|
202
|
-
return
|
|
197
|
+
else P(o);
|
|
198
|
+
if (N.call(r, "key")) {
|
|
199
|
+
o = s(e);
|
|
200
|
+
var _ = Object.keys(r).filter(function(re) {
|
|
201
|
+
return re !== "key";
|
|
203
202
|
});
|
|
204
|
-
n = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}",
|
|
203
|
+
n = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", $[o + n] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
205
204
|
`A props object containing a "key" prop is being spread into JSX:
|
|
206
205
|
let props = %s;
|
|
207
206
|
<%s {...props} />
|
|
@@ -212,31 +211,31 @@ React keys must be passed directly to JSX without using spread:
|
|
|
212
211
|
o,
|
|
213
212
|
_,
|
|
214
213
|
o
|
|
215
|
-
),
|
|
214
|
+
), $[o + n] = !0);
|
|
216
215
|
}
|
|
217
|
-
if (o = null, t !== void 0 && (
|
|
216
|
+
if (o = null, t !== void 0 && (m(t), o = "" + t), E(r) && (m(r.key), o = "" + r.key), "key" in r) {
|
|
218
217
|
t = {};
|
|
219
|
-
for (var
|
|
220
|
-
|
|
218
|
+
for (var O in r)
|
|
219
|
+
O !== "key" && (t[O] = r[O]);
|
|
221
220
|
} else t = r;
|
|
222
221
|
return o && R(
|
|
223
222
|
t,
|
|
224
223
|
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
225
|
-
),
|
|
224
|
+
), U(
|
|
226
225
|
e,
|
|
227
226
|
o,
|
|
228
|
-
|
|
229
|
-
|
|
227
|
+
l,
|
|
228
|
+
d,
|
|
230
229
|
a(),
|
|
231
230
|
t,
|
|
232
|
-
|
|
233
|
-
|
|
231
|
+
j,
|
|
232
|
+
w
|
|
234
233
|
);
|
|
235
234
|
}
|
|
236
|
-
function
|
|
237
|
-
typeof e == "object" && e !== null && e.$$typeof ===
|
|
235
|
+
function P(e) {
|
|
236
|
+
typeof e == "object" && e !== null && e.$$typeof === S && e._store && (e._store.validated = 1);
|
|
238
237
|
}
|
|
239
|
-
var p =
|
|
238
|
+
var p = te, S = Symbol.for("react.transitional.element"), q = Symbol.for("react.portal"), g = Symbol.for("react.fragment"), J = Symbol.for("react.strict_mode"), z = Symbol.for("react.profiler"), V = Symbol.for("react.consumer"), G = Symbol.for("react.context"), X = Symbol.for("react.forward_ref"), B = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), y = Symbol.for("react.lazy"), Q = Symbol.for("react.activity"), K = Symbol.for("react.client.reference"), x = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, N = Object.prototype.hasOwnProperty, ee = Array.isArray, h = console.createTask ? console.createTask : function() {
|
|
240
239
|
return null;
|
|
241
240
|
};
|
|
242
241
|
p = {
|
|
@@ -244,73 +243,113 @@ React keys must be passed directly to JSX without using spread:
|
|
|
244
243
|
return e();
|
|
245
244
|
}
|
|
246
245
|
};
|
|
247
|
-
var
|
|
246
|
+
var C, Y = {}, F = p.react_stack_bottom_frame.bind(
|
|
248
247
|
p,
|
|
249
|
-
|
|
250
|
-
)(),
|
|
251
|
-
b.Fragment =
|
|
252
|
-
var
|
|
253
|
-
return
|
|
248
|
+
i
|
|
249
|
+
)(), I = h(c(i)), $ = {};
|
|
250
|
+
b.Fragment = g, b.jsx = function(e, r, t, n, d) {
|
|
251
|
+
var l = 1e4 > x.recentlyCreatedOwnerStacks++;
|
|
252
|
+
return A(
|
|
254
253
|
e,
|
|
255
254
|
r,
|
|
256
255
|
t,
|
|
257
256
|
!1,
|
|
258
257
|
n,
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
258
|
+
d,
|
|
259
|
+
l ? Error("react-stack-top-frame") : F,
|
|
260
|
+
l ? h(c(e)) : I
|
|
262
261
|
);
|
|
263
|
-
}, b.jsxs = function(e, r, t, n,
|
|
264
|
-
var
|
|
265
|
-
return
|
|
262
|
+
}, b.jsxs = function(e, r, t, n, d) {
|
|
263
|
+
var l = 1e4 > x.recentlyCreatedOwnerStacks++;
|
|
264
|
+
return A(
|
|
266
265
|
e,
|
|
267
266
|
r,
|
|
268
267
|
t,
|
|
269
268
|
!0,
|
|
270
269
|
n,
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
270
|
+
d,
|
|
271
|
+
l ? Error("react-stack-top-frame") : F,
|
|
272
|
+
l ? h(c(e)) : I
|
|
274
273
|
);
|
|
275
274
|
};
|
|
276
275
|
})()), b;
|
|
277
276
|
}
|
|
278
|
-
var
|
|
279
|
-
function
|
|
280
|
-
return
|
|
277
|
+
var M;
|
|
278
|
+
function ae() {
|
|
279
|
+
return M || (M = 1, process.env.NODE_ENV === "production" ? T.exports = ne() : T.exports = oe()), T.exports;
|
|
281
280
|
}
|
|
282
|
-
var
|
|
283
|
-
function
|
|
284
|
-
return
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
281
|
+
var f = ae();
|
|
282
|
+
function k(s, u) {
|
|
283
|
+
return [s, u].filter(Boolean).join(" ");
|
|
284
|
+
}
|
|
285
|
+
function ce({
|
|
286
|
+
visible: s,
|
|
287
|
+
onClose: u,
|
|
288
|
+
children: m = "tiny-react-dialog: children is missing",
|
|
289
|
+
classNames: c = {}
|
|
290
|
+
}) {
|
|
291
|
+
return /* @__PURE__ */ f.jsx(f.Fragment, { children: s && /* @__PURE__ */ f.jsx(
|
|
292
|
+
"div",
|
|
293
|
+
{
|
|
294
|
+
className: k(
|
|
295
|
+
"tiny-react-dialog__overlay",
|
|
296
|
+
c?.overlay
|
|
297
|
+
),
|
|
298
|
+
onClick: u,
|
|
299
|
+
children: /* @__PURE__ */ f.jsxs(
|
|
300
|
+
"div",
|
|
301
|
+
{
|
|
302
|
+
className: k(
|
|
303
|
+
"tiny-react-dialog__container",
|
|
304
|
+
c?.container
|
|
305
|
+
),
|
|
306
|
+
onClick: (a) => a.stopPropagation(),
|
|
307
|
+
children: [
|
|
308
|
+
/* @__PURE__ */ f.jsx(
|
|
309
|
+
"div",
|
|
310
|
+
{
|
|
311
|
+
className: k(
|
|
312
|
+
"tiny-react-dialog__content",
|
|
313
|
+
c?.content
|
|
314
|
+
),
|
|
315
|
+
children: m
|
|
316
|
+
}
|
|
317
|
+
),
|
|
318
|
+
/* @__PURE__ */ f.jsx(
|
|
319
|
+
"button",
|
|
320
|
+
{
|
|
321
|
+
className: k(
|
|
322
|
+
"tiny-react-dialog__close",
|
|
323
|
+
c?.close
|
|
324
|
+
),
|
|
325
|
+
onClick: u,
|
|
326
|
+
children: /* @__PURE__ */ f.jsxs(
|
|
327
|
+
"svg",
|
|
328
|
+
{
|
|
329
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
330
|
+
width: "16",
|
|
331
|
+
height: "16",
|
|
332
|
+
viewBox: "0 0 24 24",
|
|
333
|
+
fill: "none",
|
|
334
|
+
stroke: "currentColor",
|
|
335
|
+
strokeWidth: "2",
|
|
336
|
+
strokeLinecap: "round",
|
|
337
|
+
strokeLinejoin: "round",
|
|
338
|
+
className: "lucide lucide-x-icon lucide-x",
|
|
339
|
+
children: [
|
|
340
|
+
/* @__PURE__ */ f.jsx("path", { d: "M18 6 6 18" }),
|
|
341
|
+
/* @__PURE__ */ f.jsx("path", { d: "m6 6 12 12" })
|
|
342
|
+
]
|
|
343
|
+
}
|
|
344
|
+
)
|
|
345
|
+
}
|
|
346
|
+
)
|
|
347
|
+
]
|
|
348
|
+
}
|
|
349
|
+
)
|
|
350
|
+
}
|
|
351
|
+
) });
|
|
313
352
|
}
|
|
314
353
|
export {
|
|
315
|
-
|
|
354
|
+
ce as TinyReactDialog
|
|
316
355
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
(function(){
|
|
2
|
-
(function(f,R){typeof exports=="object"&&typeof module<"u"?R(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],R):(f=typeof globalThis<"u"?globalThis:f||self,R(f.TinyReactDialog={},f.React))})(this,(function(f,R){"use strict";var k={exports:{}},b={};/**
|
|
1
|
+
(function(m,R){typeof exports=="object"&&typeof module<"u"?R(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],R):(m=typeof globalThis<"u"?globalThis:m||self,R(m.TinyReactDialog={},m.React))})(this,(function(m,R){"use strict";var k={exports:{}},v={};/**
|
|
3
2
|
* @license React
|
|
4
3
|
* react-jsx-runtime.production.js
|
|
5
4
|
*
|
|
@@ -7,7 +6,7 @@
|
|
|
7
6
|
*
|
|
8
7
|
* This source code is licensed under the MIT license found in the
|
|
9
8
|
* LICENSE file in the root directory of this source tree.
|
|
10
|
-
*/var
|
|
9
|
+
*/var A;function q(){if(A)return v;A=1;var i=Symbol.for("react.transitional.element"),f=Symbol.for("react.fragment");function _(s,a,c){var p=null;if(c!==void 0&&(p=""+c),a.key!==void 0&&(p=""+a.key),"key"in a){c={};for(var T in a)T!=="key"&&(c[T]=a[T])}else c=a;return a=c.ref,{$$typeof:i,type:s,key:p,ref:a!==void 0?a:null,props:c}}return v.Fragment=f,v.jsx=_,v.jsxs=_,v}var b={};/**
|
|
11
10
|
* @license React
|
|
12
11
|
* react-jsx-runtime.development.js
|
|
13
12
|
*
|
|
@@ -15,9 +14,9 @@
|
|
|
15
14
|
*
|
|
16
15
|
* This source code is licensed under the MIT license found in the
|
|
17
16
|
* LICENSE file in the root directory of this source tree.
|
|
18
|
-
*/var
|
|
17
|
+
*/var P;function J(){return P||(P=1,process.env.NODE_ENV!=="production"&&(function(){function i(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ae?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case x:return"Fragment";case Z:return"Profiler";case H:return"StrictMode";case re:return"Suspense";case te:return"SuspenseList";case oe:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case B:return"Portal";case K:return(e.displayName||"Context")+".Provider";case Q:return(e._context.displayName||"Context")+".Consumer";case ee:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ne:return r=e.displayName||null,r!==null?r:i(e.type)||"Memo";case F:r=e._payload,e=e._init;try{return i(e(r))}catch{}}return null}function f(e){return""+e}function _(e){try{f(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),f(e)}}function s(e){if(e===x)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===F)return"<...>";try{var r=i(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function a(){var e=j.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function p(e){if(I.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function T(e,r){function t(){L||(L=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function G(){var e=i(this.type);return M[e]||(M[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function X(e,r,t,n,d,l,O,w){return t=l.ref,e={$$typeof:D,type:e,key:r,props:l,_owner:d},(t!==void 0?t:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:G}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:O}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:w}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function C(e,r,t,n,d,l,O,w){var o=r.children;if(o!==void 0)if(n)if(ie(o)){for(n=0;n<o.length;n++)Y(o[n]);Object.freeze&&Object.freeze(o)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Y(o);if(I.call(r,"key")){o=i(e);var E=Object.keys(r).filter(function(se){return se!=="key"});n=0<E.length?"{key: someKey, "+E.join(": ..., ")+": ...}":"{key: someKey}",U[o+n]||(E=0<E.length?"{"+E.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
19
18
|
let props = %s;
|
|
20
19
|
<%s {...props} />
|
|
21
20
|
React keys must be passed directly to JSX without using spread:
|
|
22
21
|
let props = %s;
|
|
23
|
-
<%s key={someKey} {...props} />`,n,o,E,o),
|
|
22
|
+
<%s key={someKey} {...props} />`,n,o,E,o),U[o+n]=!0)}if(o=null,t!==void 0&&(_(t),o=""+t),p(r)&&(_(r.key),o=""+r.key),"key"in r){t={};for(var S in r)S!=="key"&&(t[S]=r[S])}else t=r;return o&&T(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),X(e,o,l,d,a(),t,O,w)}function Y(e){typeof e=="object"&&e!==null&&e.$$typeof===D&&e._store&&(e._store.validated=1)}var h=R,D=Symbol.for("react.transitional.element"),B=Symbol.for("react.portal"),x=Symbol.for("react.fragment"),H=Symbol.for("react.strict_mode"),Z=Symbol.for("react.profiler"),Q=Symbol.for("react.consumer"),K=Symbol.for("react.context"),ee=Symbol.for("react.forward_ref"),re=Symbol.for("react.suspense"),te=Symbol.for("react.suspense_list"),ne=Symbol.for("react.memo"),F=Symbol.for("react.lazy"),oe=Symbol.for("react.activity"),ae=Symbol.for("react.client.reference"),j=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,ie=Array.isArray,y=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(e){return e()}};var L,M={},$=h.react_stack_bottom_frame.bind(h,c)(),W=y(s(c)),U={};b.Fragment=x,b.jsx=function(e,r,t,n,d){var l=1e4>j.recentlyCreatedOwnerStacks++;return C(e,r,t,!1,n,d,l?Error("react-stack-top-frame"):$,l?y(s(e)):W)},b.jsxs=function(e,r,t,n,d){var l=1e4>j.recentlyCreatedOwnerStacks++;return C(e,r,t,!0,n,d,l?Error("react-stack-top-frame"):$,l?y(s(e)):W)}})()),b}var N;function z(){return N||(N=1,process.env.NODE_ENV==="production"?k.exports=q():k.exports=J()),k.exports}var u=z();function g(i,f){return[i,f].filter(Boolean).join(" ")}function V({visible:i,onClose:f,children:_="tiny-react-dialog: children is missing",classNames:s={}}){return u.jsx(u.Fragment,{children:i&&u.jsx("div",{className:g("tiny-react-dialog__overlay",s?.overlay),onClick:f,children:u.jsxs("div",{className:g("tiny-react-dialog__container",s?.container),onClick:a=>a.stopPropagation(),children:[u.jsx("div",{className:g("tiny-react-dialog__content",s?.content),children:_}),u.jsx("button",{className:g("tiny-react-dialog__close",s?.close),onClick:f,children:u.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-x-icon lucide-x",children:[u.jsx("path",{d:"M18 6 6 18"}),u.jsx("path",{d:"m6 6 12 12"})]})})]})})})}m.TinyReactDialog=V,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
.tiny-react-dialog__overlay {
|
|
2
|
+
position: fixed;
|
|
3
|
+
top: 0;
|
|
4
|
+
right: 0;
|
|
5
|
+
bottom: 0;
|
|
6
|
+
left: 0;
|
|
7
|
+
z-index: 50;
|
|
8
|
+
background-color: oklch(0.215 0 0 / 0.5);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.tiny-react-dialog__container {
|
|
12
|
+
background-color: oklch(0.995 0 0);
|
|
13
|
+
position: fixed;
|
|
14
|
+
top: 50%;
|
|
15
|
+
left: 50%;
|
|
16
|
+
z-index: 51;
|
|
17
|
+
display: grid;
|
|
18
|
+
width: 100%;
|
|
19
|
+
max-width: calc(100% - 2rem);
|
|
20
|
+
transform: translate(-50%, -50%);
|
|
21
|
+
gap: 1rem;
|
|
22
|
+
border-radius: 0.5rem;
|
|
23
|
+
border: 1px solid oklch(0.927 0 0);
|
|
24
|
+
padding: 1.5rem;
|
|
25
|
+
box-shadow:
|
|
26
|
+
0 10px 15px -3px oklch(0 0 0 / 0.1),
|
|
27
|
+
0 4px 6px -2px oklch(0 0 0 / 0.05);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.tiny-react-dialog__content {
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
gap: 0.5rem;
|
|
34
|
+
text-align: center;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.tiny-react-dialog__close {
|
|
38
|
+
position: absolute;
|
|
39
|
+
top: 1rem;
|
|
40
|
+
right: 1rem;
|
|
41
|
+
border-radius: 0.125rem;
|
|
42
|
+
opacity: 0.7;
|
|
43
|
+
background: transparent;
|
|
44
|
+
border: none;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.tiny-react-dialog__close:hover {
|
|
49
|
+
opacity: 1;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.tiny-react-dialog__close:focus {
|
|
53
|
+
outline: none;
|
|
54
|
+
box-shadow: 0 0 0 2px oklch(0.708 0 0);
|
|
55
|
+
outline-offset: 2px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.tiny-react-dialog__close svg {
|
|
59
|
+
pointer-events: none;
|
|
60
|
+
flex-shrink: 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@media (min-width: 640px) {
|
|
64
|
+
.tiny-react-dialog__container {
|
|
65
|
+
max-width: 425px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.tiny-react-dialog__content {
|
|
69
|
+
text-align: left;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function mergeClassnames(baseClassname: string, addedClassNames: string | undefined): string;
|
package/package.json
CHANGED
|
@@ -1,51 +1,53 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
2
|
+
"name": "tiny-react-dialog",
|
|
3
|
+
"version": "0.0.4",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "dist/index.umd.js",
|
|
6
|
+
"module": "dist/index.es.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"license": "MIT",
|
|
9
|
+
"author": "Sebastien Seguin",
|
|
10
|
+
"repository": {
|
|
11
|
+
"type": "git",
|
|
12
|
+
"url": "https://github.com/sedomu/tiny-react-dialog.git"
|
|
13
|
+
},
|
|
14
|
+
"homepage": "https://github.com/sedomu/tiny-react-dialog#readme",
|
|
15
|
+
"files": [
|
|
16
|
+
"dist",
|
|
17
|
+
"src/tinyReactDialog.css"
|
|
18
|
+
],
|
|
19
|
+
"exports": {
|
|
20
|
+
".": {
|
|
21
|
+
"import": "./dist/index.es.js",
|
|
22
|
+
"require": "./dist/index.umd.js"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"scripts": {
|
|
26
|
+
"dev": "vite",
|
|
27
|
+
"build": "tsc -b && vite build",
|
|
28
|
+
"prettier": "prettier src --write",
|
|
29
|
+
"lint": "eslint .",
|
|
30
|
+
"preview": "vite preview"
|
|
31
|
+
},
|
|
32
|
+
"peerDependencies": {
|
|
33
|
+
"react": ">=17",
|
|
34
|
+
"react-dom": ">=17"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"@eslint/js": "^9.33.0",
|
|
38
|
+
"@types/react": "^19.1.10",
|
|
39
|
+
"@types/react-dom": "^19.1.7",
|
|
40
|
+
"@vitejs/plugin-react": "^5.0.0",
|
|
41
|
+
"eslint": "^9.33.0",
|
|
42
|
+
"eslint-plugin-react-hooks": "^5.2.0",
|
|
43
|
+
"eslint-plugin-react-refresh": "^0.4.20",
|
|
44
|
+
"globals": "^16.3.0",
|
|
45
|
+
"prettier": "3.6.2",
|
|
46
|
+
"typescript": "~5.8.3",
|
|
47
|
+
"typescript-eslint": "^8.39.1",
|
|
48
|
+
"vite": "^7.1.2",
|
|
49
|
+
"vite-plugin-css-injected-by-js": "^3.5.2",
|
|
50
|
+
"vite-plugin-dts": "^4.5.4",
|
|
51
|
+
"vite-plugin-static-copy": "^3.1.2"
|
|
24
52
|
}
|
|
25
|
-
},
|
|
26
|
-
"scripts": {
|
|
27
|
-
"dev": "vite",
|
|
28
|
-
"build": "tsc -b && vite build",
|
|
29
|
-
"lint": "eslint .",
|
|
30
|
-
"preview": "vite preview"
|
|
31
|
-
},
|
|
32
|
-
"peerDependencies": {
|
|
33
|
-
"react": ">=17",
|
|
34
|
-
"react-dom": ">=17"
|
|
35
|
-
},
|
|
36
|
-
"devDependencies": {
|
|
37
|
-
"@eslint/js": "^9.33.0",
|
|
38
|
-
"@types/react": "^19.1.10",
|
|
39
|
-
"@types/react-dom": "^19.1.7",
|
|
40
|
-
"@vitejs/plugin-react": "^5.0.0",
|
|
41
|
-
"eslint": "^9.33.0",
|
|
42
|
-
"eslint-plugin-react-hooks": "^5.2.0",
|
|
43
|
-
"eslint-plugin-react-refresh": "^0.4.20",
|
|
44
|
-
"globals": "^16.3.0",
|
|
45
|
-
"typescript": "~5.8.3",
|
|
46
|
-
"typescript-eslint": "^8.39.1",
|
|
47
|
-
"vite": "^7.1.2",
|
|
48
|
-
"vite-plugin-css-injected-by-js": "^3.5.2",
|
|
49
|
-
"vite-plugin-dts": "^4.5.4"
|
|
50
|
-
}
|
|
51
53
|
}
|
package/src/tinyReactDialog.css
CHANGED
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
border: 1px solid oklch(0.927 0 0);
|
|
24
24
|
padding: 1.5rem;
|
|
25
25
|
box-shadow:
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
0 10px 15px -3px oklch(0 0 0 / 0.1),
|
|
27
|
+
0 4px 6px -2px oklch(0 0 0 / 0.05);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.tiny-react-dialog__content {
|