@mpen/react-basic-inputs 0.3.1 → 0.3.3
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.
|
@@ -17,9 +17,7 @@ export declare type ActionButtonProps = RequiredKeys<ComponentPropsWithoutRef<'b
|
|
|
17
17
|
export declare function DatetimeLocalInput({ value, defaultValue, min, max, onChange, ...props }: DatetimeLocalInputProps): JSX_2.Element;
|
|
18
18
|
|
|
19
19
|
export declare type DatetimeLocalInputChangeEvent = {
|
|
20
|
-
|
|
21
|
-
value: number | null;
|
|
22
|
-
date: Date | null;
|
|
20
|
+
value: string;
|
|
23
21
|
};
|
|
24
22
|
|
|
25
23
|
export declare type DatetimeLocalInputProps = OverrideProps<'input', {
|
|
@@ -37,16 +35,14 @@ export declare type DatetimeOffsetInputChangeEvent = {
|
|
|
37
35
|
};
|
|
38
36
|
|
|
39
37
|
export declare type DatetimeOffsetInputProps = {
|
|
40
|
-
min?:
|
|
41
|
-
max?:
|
|
42
|
-
value?:
|
|
43
|
-
defaultValue?:
|
|
38
|
+
min?: DateValue;
|
|
39
|
+
max?: DateValue;
|
|
40
|
+
value?: DateValue | null;
|
|
41
|
+
defaultValue?: DateValue;
|
|
44
42
|
onChange?: (ev: DatetimeOffsetInputChangeEvent) => void;
|
|
45
43
|
};
|
|
46
44
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
declare type DateValue_2 = number | string | Date;
|
|
45
|
+
declare type DateValue = number | string | Date;
|
|
50
46
|
|
|
51
47
|
export declare const DebouncedInput: FC<DebouncedInputProps>;
|
|
52
48
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
var
|
|
2
|
-
var q = (e, t, n) => t in e ?
|
|
1
|
+
var z = Object.defineProperty;
|
|
2
|
+
var q = (e, t, n) => t in e ? z(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
|
|
3
3
|
var P = (e, t, n) => (q(e, typeof t != "symbol" ? t + "" : t, n), n);
|
|
4
4
|
import { jsx as v, jsxs as L } from "react/jsx-runtime";
|
|
5
|
-
import { useDebugValue as G, useRef as h, useInsertionEffect as Z, useEffect as
|
|
5
|
+
import { useDebugValue as G, useRef as h, useInsertionEffect as Z, useEffect as C, useMemo as F, useCallback as T, createElement as W, forwardRef as k, useState as D, useImperativeHandle as B, useLayoutEffect as J, useId as X } from "react";
|
|
6
6
|
const Q = Object.freeze(() => {
|
|
7
7
|
});
|
|
8
8
|
function ee(e) {
|
|
@@ -26,23 +26,23 @@ function te(e) {
|
|
|
26
26
|
function ne() {
|
|
27
27
|
throw new Error("INVALID_USE_EVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.");
|
|
28
28
|
}
|
|
29
|
-
function
|
|
29
|
+
function re() {
|
|
30
30
|
var e = h(!0);
|
|
31
31
|
return e.current ? (e.current = !1, !0) : e.current;
|
|
32
32
|
}
|
|
33
33
|
var R = function(e, t) {
|
|
34
|
-
var n =
|
|
35
|
-
|
|
34
|
+
var n = re();
|
|
35
|
+
C(function() {
|
|
36
36
|
if (!n)
|
|
37
37
|
return e();
|
|
38
38
|
}, t);
|
|
39
39
|
};
|
|
40
|
-
function
|
|
40
|
+
function ue(e, ...t) {
|
|
41
41
|
return typeof e == "function" ? e(...t) : e;
|
|
42
42
|
}
|
|
43
43
|
function se(e, t) {
|
|
44
44
|
if (e.uniqueKey != null)
|
|
45
|
-
return
|
|
45
|
+
return ue(e.uniqueKey, e, t);
|
|
46
46
|
if (typeof e.value == "string")
|
|
47
47
|
return e.value;
|
|
48
48
|
if (typeof e.value == "number")
|
|
@@ -55,65 +55,65 @@ function se(e, t) {
|
|
|
55
55
|
}
|
|
56
56
|
return String(t);
|
|
57
57
|
}
|
|
58
|
-
class
|
|
58
|
+
class H {
|
|
59
59
|
constructor() {
|
|
60
60
|
P(this, "_usedKeys", /* @__PURE__ */ new Map());
|
|
61
61
|
}
|
|
62
62
|
fix(t, n) {
|
|
63
|
-
let
|
|
63
|
+
let r = se(t, n);
|
|
64
64
|
for (; ; ) {
|
|
65
|
-
let
|
|
66
|
-
if (
|
|
67
|
-
this._usedKeys.set(
|
|
65
|
+
let u = this._usedKeys.get(r);
|
|
66
|
+
if (u === void 0) {
|
|
67
|
+
this._usedKeys.set(r, 1);
|
|
68
68
|
break;
|
|
69
69
|
}
|
|
70
|
-
this._usedKeys.set(
|
|
70
|
+
this._usedKeys.set(r, ++u), r = `${r}(${u})`;
|
|
71
71
|
}
|
|
72
|
-
return
|
|
72
|
+
return r;
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
|
-
const
|
|
75
|
+
const ce = (e) => ({
|
|
76
76
|
value: e,
|
|
77
77
|
text: String(e),
|
|
78
78
|
disabled: !0,
|
|
79
79
|
key: ae
|
|
80
|
-
}),
|
|
80
|
+
}), le = "3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb", ae = "1a53f789-77f5-4ce6-a829-b00e563f1ee8";
|
|
81
81
|
function ie({
|
|
82
82
|
options: e,
|
|
83
83
|
value: t,
|
|
84
|
-
invalidValueOption: n =
|
|
85
|
-
onChange:
|
|
86
|
-
placeholder:
|
|
84
|
+
invalidValueOption: n = ce,
|
|
85
|
+
onChange: r,
|
|
86
|
+
placeholder: u,
|
|
87
87
|
...s
|
|
88
88
|
}) {
|
|
89
|
-
const
|
|
90
|
-
if (
|
|
89
|
+
const i = t == null, f = F(() => t != null && e.some((c) => c.value == t), [e, t]), o = F(() => t == null || !n ? null : n(t), [n, t]), l = F(() => {
|
|
90
|
+
if (f)
|
|
91
91
|
return e;
|
|
92
|
-
const
|
|
93
|
-
return
|
|
94
|
-
}, [
|
|
95
|
-
const g =
|
|
96
|
-
|
|
97
|
-
value:
|
|
92
|
+
const c = [...e];
|
|
93
|
+
return i ? u != null && c.unshift({ text: u, hidden: !0, value: null, key: le }) : o && c.push(o), c;
|
|
94
|
+
}, [f, e, i, o, u]), d = te((c) => {
|
|
95
|
+
const g = c.target.selectedIndex, O = l[g];
|
|
96
|
+
r == null || r({
|
|
97
|
+
value: O.value,
|
|
98
98
|
// option: opt,
|
|
99
99
|
// event: ev,
|
|
100
100
|
index: g,
|
|
101
101
|
type: "change",
|
|
102
|
-
timeStamp:
|
|
103
|
-
target:
|
|
102
|
+
timeStamp: c.timeStamp,
|
|
103
|
+
target: c.target
|
|
104
104
|
});
|
|
105
|
-
}),
|
|
106
|
-
|
|
107
|
-
}, [
|
|
108
|
-
|
|
105
|
+
}), a = h(null), x = T(() => {
|
|
106
|
+
a.current && (a.current.selectedIndex < 0 || l[a.current.selectedIndex].value != t) && (a.current.selectedIndex = l.findIndex((c) => c.value == t));
|
|
107
|
+
}, [l, t]), N = (c) => {
|
|
108
|
+
a.current = c, x();
|
|
109
109
|
};
|
|
110
110
|
R(() => {
|
|
111
|
-
|
|
112
|
-
}, [
|
|
113
|
-
const
|
|
114
|
-
return /* @__PURE__ */ v("select", { ...s, onChange: d, ref: N, children:
|
|
115
|
-
const { value:
|
|
116
|
-
return /* @__PURE__ */ W("option", { ...y, key: V, value: V },
|
|
111
|
+
x();
|
|
112
|
+
}, [x]);
|
|
113
|
+
const m = new H();
|
|
114
|
+
return /* @__PURE__ */ v("select", { ...s, onChange: d, ref: N, children: l.map((c, g) => {
|
|
115
|
+
const { value: O, text: b, uniqueKey: S, ...y } = c, V = m.fix(c, g);
|
|
116
|
+
return /* @__PURE__ */ W("option", { ...y, key: V, value: V }, c.text);
|
|
117
117
|
}) });
|
|
118
118
|
}
|
|
119
119
|
function fe(e) {
|
|
@@ -129,27 +129,27 @@ function oe(e) {
|
|
|
129
129
|
function de(e) {
|
|
130
130
|
return e ? e === "∞" || e === "+∞" ? Number.POSITIVE_INFINITY : e === "-∞" ? Number.NEGATIVE_INFINITY : Number.parseFloat(e) : Number.NaN;
|
|
131
131
|
}
|
|
132
|
-
function
|
|
132
|
+
function Y(e) {
|
|
133
133
|
return Number.isNaN(e) ? "" : e === Number.POSITIVE_INFINITY ? "∞" : e === Number.NEGATIVE_INFINITY ? "-∞" : oe(e);
|
|
134
134
|
}
|
|
135
|
-
function
|
|
136
|
-
return e ?
|
|
135
|
+
function xe(e) {
|
|
136
|
+
return e ? Y(Number.parseFloat(e)) : "";
|
|
137
137
|
}
|
|
138
138
|
function I(e, t = 2) {
|
|
139
139
|
return String(e).padStart(t, "0");
|
|
140
140
|
}
|
|
141
|
-
const
|
|
142
|
-
const [
|
|
141
|
+
const j = k(function({ value: t = "", onPaste: n, onChange: r, onInput: u, onBlur: s, formatOnChange: i = ee, ...f }, o) {
|
|
142
|
+
const [l, d] = D(t), a = h(t), x = h(!1);
|
|
143
143
|
R(() => {
|
|
144
|
-
d(t),
|
|
144
|
+
d(t), x.current = !1, a.current = t;
|
|
145
145
|
}, [t]);
|
|
146
146
|
const N = {
|
|
147
147
|
type: "text",
|
|
148
|
-
...
|
|
148
|
+
...f,
|
|
149
149
|
ref: o,
|
|
150
|
-
value:
|
|
151
|
-
onChange: (
|
|
152
|
-
d(
|
|
150
|
+
value: l,
|
|
151
|
+
onChange: (m) => {
|
|
152
|
+
d(m.target.value);
|
|
153
153
|
},
|
|
154
154
|
// TODO: fire a change event onPaste ?
|
|
155
155
|
// formatOnPaste?
|
|
@@ -167,106 +167,106 @@ const z = k(function({ value: t = "", onPaste: n, onChange: u, onInput: r, onBlu
|
|
|
167
167
|
// // ev.preventDefault()
|
|
168
168
|
// // setCurrentValue(formatOnChange(ev.clipboardData.getData('text/plain')))
|
|
169
169
|
// },
|
|
170
|
-
onInput: (
|
|
171
|
-
|
|
170
|
+
onInput: (m) => {
|
|
171
|
+
x.current = !0, u == null || u(m);
|
|
172
172
|
},
|
|
173
|
-
onBlur: (
|
|
174
|
-
const
|
|
175
|
-
|
|
173
|
+
onBlur: (m) => {
|
|
174
|
+
const c = i(l);
|
|
175
|
+
x.current && (c !== a.current && (r == null || r({
|
|
176
176
|
type: "change",
|
|
177
|
-
value:
|
|
178
|
-
timeStamp:
|
|
179
|
-
target:
|
|
180
|
-
}),
|
|
177
|
+
value: c,
|
|
178
|
+
timeStamp: m.timeStamp,
|
|
179
|
+
target: m.target
|
|
180
|
+
}), a.current = c), c !== m.target.value && d(c)), s == null || s(m);
|
|
181
181
|
}
|
|
182
182
|
};
|
|
183
183
|
return /* @__PURE__ */ v("input", { ...N });
|
|
184
184
|
});
|
|
185
|
-
function
|
|
186
|
-
return /* @__PURE__ */ v(
|
|
185
|
+
function Oe({ formatOnChange: e = fe, ...t }) {
|
|
186
|
+
return /* @__PURE__ */ v(j, { formatOnChange: e, ...t, type: "text" });
|
|
187
187
|
}
|
|
188
|
-
const
|
|
188
|
+
const Se = k(function({
|
|
189
189
|
onInput: t,
|
|
190
190
|
style: n,
|
|
191
|
-
initialHeight:
|
|
192
|
-
...
|
|
191
|
+
initialHeight: r = "auto",
|
|
192
|
+
...u
|
|
193
193
|
}, s) {
|
|
194
|
-
const
|
|
195
|
-
const
|
|
196
|
-
if (!
|
|
194
|
+
const i = h(null), [f, o] = D(r), l = T(() => {
|
|
195
|
+
const a = i.current;
|
|
196
|
+
if (!a)
|
|
197
197
|
return;
|
|
198
|
-
|
|
199
|
-
const
|
|
200
|
-
o(
|
|
201
|
-
}, [
|
|
198
|
+
a.style.height = r;
|
|
199
|
+
const x = `${a.scrollHeight}px`;
|
|
200
|
+
o(x), a.style.height = x;
|
|
201
|
+
}, [r]);
|
|
202
202
|
B(s, () => ({
|
|
203
|
-
element:
|
|
204
|
-
adjustHeight:
|
|
205
|
-
}), [
|
|
206
|
-
const d = _((
|
|
207
|
-
|
|
203
|
+
element: i.current,
|
|
204
|
+
adjustHeight: l
|
|
205
|
+
}), [l]);
|
|
206
|
+
const d = _((a) => {
|
|
207
|
+
l(), t == null || t(a);
|
|
208
208
|
});
|
|
209
209
|
return J(() => {
|
|
210
|
-
|
|
211
|
-
const
|
|
212
|
-
if (!
|
|
210
|
+
l();
|
|
211
|
+
const a = i.current;
|
|
212
|
+
if (!a)
|
|
213
213
|
return;
|
|
214
|
-
const
|
|
215
|
-
|
|
214
|
+
const x = new ResizeObserver((N) => {
|
|
215
|
+
l();
|
|
216
216
|
});
|
|
217
|
-
return
|
|
218
|
-
|
|
217
|
+
return x.observe(a), () => {
|
|
218
|
+
x.unobserve(a);
|
|
219
219
|
};
|
|
220
|
-
}, [
|
|
220
|
+
}, [l]), /* @__PURE__ */ v("textarea", { ...u, style: {
|
|
221
221
|
overflow: "hidden",
|
|
222
222
|
// these 2 styles aren't needed if the caller sets them in CSS.
|
|
223
223
|
resize: "none",
|
|
224
224
|
...n,
|
|
225
|
-
height:
|
|
226
|
-
}, onInput: d, ref:
|
|
225
|
+
height: f
|
|
226
|
+
}, onInput: d, ref: i });
|
|
227
227
|
});
|
|
228
228
|
function Ee(e) {
|
|
229
|
-
const t = X(), n = e.name ?? t,
|
|
230
|
-
const o = Number(
|
|
231
|
-
|
|
232
|
-
value:
|
|
229
|
+
const t = X(), n = e.name ?? t, r = e.valueEquals ?? Object.is, u = e.options ?? [], s = new H(), i = _((f) => {
|
|
230
|
+
const o = Number(f.target.value), l = u[o];
|
|
231
|
+
l != null && e.onChange != null && e.onChange({
|
|
232
|
+
value: l.value,
|
|
233
233
|
index: o,
|
|
234
234
|
type: "change",
|
|
235
|
-
timeStamp:
|
|
236
|
-
target:
|
|
235
|
+
timeStamp: f.timeStamp,
|
|
236
|
+
target: f.target
|
|
237
237
|
});
|
|
238
238
|
});
|
|
239
|
-
return /* @__PURE__ */ v("ul", { className: e.className, children:
|
|
240
|
-
const { value:
|
|
241
|
-
return e.value !== void 0 && (g.checked =
|
|
242
|
-
/* @__PURE__ */ v("input", { ...g, className:
|
|
243
|
-
/* @__PURE__ */ v("span", { className:
|
|
244
|
-
] }) },
|
|
239
|
+
return /* @__PURE__ */ v("ul", { className: e.className, children: u.map((f, o) => {
|
|
240
|
+
const { value: l, text: d, key: a, itemClassName: x, labelClassName: N, inputClassName: m, textClassName: c, ...g } = f, O = s.fix(f, o);
|
|
241
|
+
return e.value !== void 0 && (g.checked = r(l, e.value)), /* @__PURE__ */ v("li", { className: x, "aria-disabled": g.disabled, children: /* @__PURE__ */ L("label", { className: N, children: [
|
|
242
|
+
/* @__PURE__ */ v("input", { ...g, className: m, value: o, onChange: i, name: n, type: "radio" }),
|
|
243
|
+
/* @__PURE__ */ v("span", { className: c, children: d })
|
|
244
|
+
] }) }, O);
|
|
245
245
|
}) });
|
|
246
246
|
}
|
|
247
247
|
function U() {
|
|
248
248
|
return h(null);
|
|
249
249
|
}
|
|
250
|
-
function
|
|
250
|
+
function K(e) {
|
|
251
251
|
e.current != null && (clearTimeout(e.current), e.current = null);
|
|
252
252
|
}
|
|
253
253
|
const De = ({
|
|
254
254
|
value: e,
|
|
255
255
|
onChange: t,
|
|
256
256
|
debounce: n = 500,
|
|
257
|
-
...
|
|
257
|
+
...r
|
|
258
258
|
}) => {
|
|
259
|
-
const
|
|
259
|
+
const u = U(), s = U();
|
|
260
260
|
R(() => {
|
|
261
|
-
|
|
261
|
+
K(s), u.current != null && (u.current.value = e);
|
|
262
262
|
}, [e]);
|
|
263
|
-
const
|
|
264
|
-
|
|
263
|
+
const i = () => {
|
|
264
|
+
u.current != null && u.current.value !== e && (t == null || t({ value: u.current.value }));
|
|
265
265
|
};
|
|
266
|
-
return /* @__PURE__ */ v("input", { ...
|
|
267
|
-
|
|
266
|
+
return /* @__PURE__ */ v("input", { ...r, ref: u, defaultValue: e, onInput: () => {
|
|
267
|
+
K(s), s.current = setTimeout(i, n);
|
|
268
268
|
}, onBlur: () => {
|
|
269
|
-
|
|
269
|
+
K(s), i();
|
|
270
270
|
} });
|
|
271
271
|
};
|
|
272
272
|
function _e({ onClick: e, ...t }) {
|
|
@@ -276,49 +276,36 @@ function _e({ onClick: e, ...t }) {
|
|
|
276
276
|
}
|
|
277
277
|
function E(e, t) {
|
|
278
278
|
const n = e instanceof Date ? e : new Date(e);
|
|
279
|
-
let
|
|
280
|
-
const
|
|
281
|
-
return ((t == null ? void 0 : t.seconds) || (t == null ? void 0 : t.seconds) == null && (n.getSeconds() !== 0 ||
|
|
279
|
+
let r = `${n.getFullYear()}-${I(n.getMonth() + 1)}-${I(n.getDate())}T${I(n.getHours())}:${I(n.getMinutes())}`;
|
|
280
|
+
const u = (t == null ? void 0 : t.milliseconds) || (t == null ? void 0 : t.milliseconds) == null && n.getMilliseconds() !== 0;
|
|
281
|
+
return ((t == null ? void 0 : t.seconds) || (t == null ? void 0 : t.seconds) == null && (n.getSeconds() !== 0 || u)) && (r += `:${I(n.getSeconds())}`, u && (r += `.${I(n.getMilliseconds(), 3)}`)), t != null && t.offset && (r += p(-n.getTimezoneOffset())), r;
|
|
282
282
|
}
|
|
283
283
|
function p(e) {
|
|
284
284
|
if (e == null)
|
|
285
285
|
return "";
|
|
286
286
|
if (e === 0)
|
|
287
287
|
return "Z";
|
|
288
|
-
const t = e > 0 ? "+" : "-", n = Math.floor(Math.abs(e) / 60),
|
|
289
|
-
return `${t}${I(n)}:${I(
|
|
288
|
+
const t = e > 0 ? "+" : "-", n = Math.floor(Math.abs(e) / 60), r = Math.abs(e) % 60;
|
|
289
|
+
return `${t}${I(n)}:${I(r)}`;
|
|
290
290
|
}
|
|
291
|
-
const
|
|
291
|
+
const me = /^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,3})?)?)(Z|[+-]\d{2}:\d{2})?$/, ve = { offset: !1, seconds: !1, milliseconds: !1 };
|
|
292
292
|
function Ne(e) {
|
|
293
293
|
return e == null || Number.isNaN(e) || e === "" || Number.isNaN(+new Date(e));
|
|
294
294
|
}
|
|
295
295
|
function M(e) {
|
|
296
296
|
if (typeof e == "string") {
|
|
297
|
-
const t = e.match(
|
|
297
|
+
const t = e.match(me);
|
|
298
298
|
if (t)
|
|
299
299
|
return t[1];
|
|
300
300
|
}
|
|
301
301
|
return Ne(e) ? "" : E(e, ve);
|
|
302
302
|
}
|
|
303
303
|
const w = { offset: !1 };
|
|
304
|
-
function Me({ value: e, defaultValue: t, min: n, max:
|
|
305
|
-
return e !== void 0 && (s.value = e === null ? "" : E(e, w)), t != null && (s.defaultValue = E(t, w)), n != null && (s.min = E(n, w)),
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
// TODO: undo this, "date time local" should in fact be local (no time zone)
|
|
310
|
-
isoString: E(c, { offset: !0 }),
|
|
311
|
-
// isoString: date.toISOString(),
|
|
312
|
-
value: c.valueOf(),
|
|
313
|
-
date: c
|
|
314
|
-
});
|
|
315
|
-
} else
|
|
316
|
-
r({
|
|
317
|
-
// isoStringWithOffset: null,
|
|
318
|
-
isoString: null,
|
|
319
|
-
value: null,
|
|
320
|
-
date: null
|
|
321
|
-
});
|
|
304
|
+
function Me({ value: e, defaultValue: t, min: n, max: r, onChange: u, ...s }) {
|
|
305
|
+
return e !== void 0 && (s.value = e === null ? "" : E(e, w)), t != null && (s.defaultValue = E(t, w)), n != null && (s.min = E(n, w)), r != null && (s.max = E(r, w)), u != null && (s.onChange = (i) => {
|
|
306
|
+
u({
|
|
307
|
+
value: i.currentTarget.value
|
|
308
|
+
});
|
|
322
309
|
}), /* @__PURE__ */ v("input", { type: "datetime-local", ...s });
|
|
323
310
|
}
|
|
324
311
|
function ge(e) {
|
|
@@ -326,11 +313,11 @@ function ge(e) {
|
|
|
326
313
|
return t.current = e, t;
|
|
327
314
|
}
|
|
328
315
|
function be(e, t) {
|
|
329
|
-
const n = h(e),
|
|
330
|
-
return
|
|
331
|
-
Object.is(n.current, e) || (
|
|
332
|
-
}, [
|
|
333
|
-
n.current =
|
|
316
|
+
const n = h(e), r = ge(t);
|
|
317
|
+
return C(() => {
|
|
318
|
+
Object.is(n.current, e) || (r.current(), n.current = e);
|
|
319
|
+
}, [r, e]), T((u) => {
|
|
320
|
+
n.current = u;
|
|
334
321
|
}, []);
|
|
335
322
|
}
|
|
336
323
|
const he = [
|
|
@@ -419,45 +406,45 @@ function $(e) {
|
|
|
419
406
|
return null;
|
|
420
407
|
if (t[0] === "Z")
|
|
421
408
|
return 0;
|
|
422
|
-
const [, n,
|
|
409
|
+
const [, n, r, u] = t, s = Number(r) * 60 + Number(u);
|
|
423
410
|
return n === "+" ? s : -s;
|
|
424
411
|
}
|
|
425
|
-
function
|
|
412
|
+
function A(e) {
|
|
426
413
|
return e === "" ? null : -new Date(e).getTimezoneOffset();
|
|
427
414
|
}
|
|
428
415
|
function we({
|
|
429
416
|
value: e,
|
|
430
417
|
defaultValue: t,
|
|
431
418
|
min: n,
|
|
432
|
-
max:
|
|
433
|
-
onChange:
|
|
419
|
+
max: r,
|
|
420
|
+
onChange: u,
|
|
434
421
|
...s
|
|
435
422
|
}) {
|
|
436
|
-
const [
|
|
437
|
-
|
|
423
|
+
const [i, f] = D(() => $(e ?? t) !== null), [o, l] = D(() => $(e ?? t)), [d, a] = D(() => M(e ?? t)), x = be(e, () => {
|
|
424
|
+
f($(e) !== null), l($(e)), a(M(e));
|
|
438
425
|
}), N = T((b) => {
|
|
439
|
-
|
|
426
|
+
x(b), u == null || u({
|
|
440
427
|
value: b
|
|
441
428
|
});
|
|
442
|
-
}, [
|
|
443
|
-
n != null && (s.min = M(n)),
|
|
444
|
-
const
|
|
429
|
+
}, [u, x]);
|
|
430
|
+
n != null && (s.min = M(n)), r != null && (s.max = M(r));
|
|
431
|
+
const m = i ? o : A(d), c = T(
|
|
445
432
|
(b) => {
|
|
446
|
-
const
|
|
447
|
-
|
|
433
|
+
const S = b.currentTarget.value;
|
|
434
|
+
a(S), N(S + p(m));
|
|
448
435
|
},
|
|
449
|
-
[N,
|
|
436
|
+
[N, m]
|
|
450
437
|
), g = T(
|
|
451
438
|
(b) => {
|
|
452
|
-
|
|
439
|
+
l(b.value), N(d + p(b.value));
|
|
453
440
|
},
|
|
454
441
|
[N, d]
|
|
455
|
-
),
|
|
442
|
+
), O = T(
|
|
456
443
|
(b) => {
|
|
457
|
-
const
|
|
458
|
-
|
|
444
|
+
const S = b.currentTarget.checked;
|
|
445
|
+
f(S);
|
|
459
446
|
let y;
|
|
460
|
-
|
|
447
|
+
S ? d && o === null ? (y = A(d), l(y)) : y = o : y = A(d), N(d + p(y));
|
|
461
448
|
},
|
|
462
449
|
[o, d, N]
|
|
463
450
|
);
|
|
@@ -468,52 +455,52 @@ function we({
|
|
|
468
455
|
type: "datetime-local",
|
|
469
456
|
...s,
|
|
470
457
|
value: d,
|
|
471
|
-
onChange:
|
|
458
|
+
onChange: c
|
|
472
459
|
}
|
|
473
460
|
),
|
|
474
461
|
/* @__PURE__ */ v(
|
|
475
462
|
"input",
|
|
476
463
|
{
|
|
477
464
|
type: "checkbox",
|
|
478
|
-
title:
|
|
479
|
-
checked:
|
|
480
|
-
onChange:
|
|
465
|
+
title: i ? "Use UTC offset from this device" : "Enable UTC offset selection",
|
|
466
|
+
checked: i,
|
|
467
|
+
onChange: O
|
|
481
468
|
}
|
|
482
469
|
),
|
|
483
470
|
/* @__PURE__ */ v(
|
|
484
471
|
ie,
|
|
485
472
|
{
|
|
486
|
-
value:
|
|
473
|
+
value: m,
|
|
487
474
|
onChange: g,
|
|
488
|
-
disabled: !
|
|
475
|
+
disabled: !i,
|
|
489
476
|
options: he
|
|
490
477
|
}
|
|
491
478
|
)
|
|
492
479
|
] });
|
|
493
480
|
}
|
|
494
|
-
const $e = k(function({ placeholder: t, formatOnChange: n =
|
|
495
|
-
const
|
|
481
|
+
const $e = k(function({ placeholder: t, formatOnChange: n = xe, onChange: r, value: u, ...s }, i) {
|
|
482
|
+
const f = {
|
|
496
483
|
inputMode: "decimal",
|
|
497
484
|
...s,
|
|
498
485
|
formatOnChange: n,
|
|
499
486
|
type: "number"
|
|
500
487
|
};
|
|
501
|
-
return
|
|
502
|
-
|
|
488
|
+
return u !== void 0 && (f.value = Y(u)), t != null && (f.placeholder = String(t)), r != null && (f.onChange = (o) => {
|
|
489
|
+
r({
|
|
503
490
|
...o,
|
|
504
491
|
value: de(o.value)
|
|
505
492
|
});
|
|
506
|
-
}), /* @__PURE__ */ v(
|
|
493
|
+
}), /* @__PURE__ */ v(j, { ...f, ref: i });
|
|
507
494
|
});
|
|
508
495
|
export {
|
|
509
496
|
_e as ActionButton,
|
|
510
497
|
Me as DatetimeLocalInput,
|
|
511
498
|
we as DatetimeOffsetInput,
|
|
512
499
|
De as DebouncedInput,
|
|
513
|
-
|
|
500
|
+
j as Input,
|
|
514
501
|
$e as NumberInput,
|
|
515
502
|
Ee as RadioMenu,
|
|
516
503
|
ie as Select,
|
|
517
|
-
|
|
518
|
-
|
|
504
|
+
Se as TextArea,
|
|
505
|
+
Oe as TextInput
|
|
519
506
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(x,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],f):(x=typeof globalThis<"u"?globalThis:x||self,f(x["@mpen/react-basic-inputs"]={},x.jsxRuntime,x.React))})(this,function(x,f,r){"use strict";var ve=Object.defineProperty;var be=(x,f,r)=>f in x?ve(x,f,{enumerable:!0,configurable:!0,writable:!0,value:r}):x[f]=r;var L=(x,f,r)=>(be(x,typeof f!="symbol"?f+"":f,r),r);const U=Object.freeze(()=>{});function q(e){return e}let D;typeof window<"u"?D=e=>{r.useDebugValue(e);const t=r.useRef(Y);r.useInsertionEffect(()=>{t.current=e},[e]);const n=r.useRef(null);return n.current||(n.current=function(){return t.current.apply(this,arguments)}),n.current}:D=U;function H(e){return D(e)}function Y(){throw new Error("INVALID_USE_EVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.")}function z(){var e=r.useRef(!0);return e.current?(e.current=!1,!0):e.current}var p=function(e,t){var n=z();r.useEffect(function(){if(!n)return e()},t)};function G(e,...t){return typeof e=="function"?e(...t):e}function Z(e,t){if(e.uniqueKey!=null)return G(e.uniqueKey,e,t);if(typeof e.value=="string")return e.value;if(typeof e.value=="number")return String(e.value);try{const n=JSON.stringify(e.value);if(n!==void 0)return n}catch{}return String(t)}class K{constructor(){L(this,"_usedKeys",new Map)}fix(t,n){let u=Z(t,n);for(;;){let s=this._usedKeys.get(u);if(s===void 0){this._usedKeys.set(u,1);break}this._usedKeys.set(u,++s),u=`${u}(${s})`}return u}}const B=e=>({value:e,text:String(e),disabled:!0,key:J}),W="3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb",J="1a53f789-77f5-4ce6-a829-b00e563f1ee8";function C({options:e,value:t,invalidValueOption:n=B,onChange:u,placeholder:s,...l}){const a=t==null,i=r.useMemo(()=>t!=null&&e.some(c=>c.value==t),[e,t]),m=r.useMemo(()=>t==null||!n?null:n(t),[n,t]),o=r.useMemo(()=>{if(i)return e;const c=[...e];return a?s!=null&&c.unshift({text:s,hidden:!0,value:null,key:W}):m&&c.push(m),c},[i,e,a,m,s]),v=H(c=>{const g=c.target.selectedIndex,O=o[g];u==null||u({value:O.value,index:g,type:"change",timeStamp:c.timeStamp,target:c.target})}),d=r.useRef(null),b=r.useCallback(()=>{d.current&&(d.current.selectedIndex<0||o[d.current.selectedIndex].value!=t)&&(d.current.selectedIndex=o.findIndex(c=>c.value==t))},[o,t]),I=c=>{d.current=c,b()};p(()=>{b()},[b]);const N=new K;return f.jsx("select",{...l,onChange:v,ref:I,children:o.map((c,g)=>{const{value:O,text:h,uniqueKey:E,...T}=c,P=N.fix(c,g);return r.createElement("option",{...T,key:P,value:P},c.text)})})}function X(e){return e?String(e).replace(/\s+/gu," ").trim():""}function Q(e){try{return e.toLocaleString("en-US",{useGrouping:!1,maximumFractionDigits:20})}catch{return e.toFixed(14).replace(/\.?0+$/,"")}}function R(e){return e?e==="∞"||e==="+∞"?Number.POSITIVE_INFINITY:e==="-∞"?Number.NEGATIVE_INFINITY:Number.parseFloat(e):Number.NaN}function V(e){return Number.isNaN(e)?"":e===Number.POSITIVE_INFINITY?"∞":e===Number.NEGATIVE_INFINITY?"-∞":Q(e)}function ee(e){return e?V(Number.parseFloat(e)):""}function y(e,t=2){return String(e).padStart(t,"0")}const $=r.forwardRef(function({value:t="",onPaste:n,onChange:u,onInput:s,onBlur:l,formatOnChange:a=q,...i},m){const[o,v]=r.useState(t),d=r.useRef(t),b=r.useRef(!1);p(()=>{v(t),b.current=!1,d.current=t},[t]);const I={type:"text",...i,ref:m,value:o,onChange:N=>{v(N.target.value)},onInput:N=>{b.current=!0,s==null||s(N)},onBlur:N=>{const c=a(o);b.current&&(c!==d.current&&(u==null||u({type:"change",value:c,timeStamp:N.timeStamp,target:N.target}),d.current=c),c!==N.target.value&&v(c)),l==null||l(N)}};return f.jsx("input",{...I})});function te({formatOnChange:e=X,...t}){return f.jsx($,{formatOnChange:e,...t,type:"text"})}const ne=r.forwardRef(function({onInput:t,style:n,initialHeight:u="auto",...s},l){const a=r.useRef(null),[i,m]=r.useState(u),o=r.useCallback(()=>{const d=a.current;if(!d)return;d.style.height=u;const b=`${d.scrollHeight}px`;m(b),d.style.height=b},[u]);r.useImperativeHandle(l,()=>({element:a.current,adjustHeight:o}),[o]);const v=D(d=>{o(),t==null||t(d)});return r.useLayoutEffect(()=>{o();const d=a.current;if(!d)return;const b=new ResizeObserver(I=>{o()});return b.observe(d),()=>{b.unobserve(d)}},[o]),f.jsx("textarea",{...s,style:{overflow:"hidden",resize:"none",...n,height:i},onInput:v,ref:a})});function ue(e){const t=r.useId(),n=e.name??t,u=e.valueEquals??Object.is,s=e.options??[],l=new K,a=D(i=>{const m=Number(i.target.value),o=s[m];o!=null&&e.onChange!=null&&e.onChange({value:o.value,index:m,type:"change",timeStamp:i.timeStamp,target:i.target})});return f.jsx("ul",{className:e.className,children:s.map((i,m)=>{const{value:o,text:v,key:d,itemClassName:b,labelClassName:I,inputClassName:N,textClassName:c,...g}=i,O=l.fix(i,m);return e.value!==void 0&&(g.checked=u(o,e.value)),f.jsx("li",{className:b,"aria-disabled":g.disabled,children:f.jsxs("label",{className:I,children:[f.jsx("input",{...g,className:N,value:m,onChange:a,name:n,type:"radio"}),f.jsx("span",{className:c,children:v})]})},O)})})}function j(){return r.useRef(null)}function A(e){e.current!=null&&(clearTimeout(e.current),e.current=null)}const re=({value:e,onChange:t,debounce:n=500,...u})=>{const s=j(),l=j();p(()=>{A(l),s.current!=null&&(s.current.value=e)},[e]);const a=()=>{s.current!=null&&s.current.value!==e&&(t==null||t({value:s.current.value}))};return f.jsx("input",{...u,ref:s,defaultValue:e,onInput:()=>{A(l),l.current=setTimeout(a,n)},onBlur:()=>{A(l),a()}})};function se({onClick:e,...t}){return t.onClick=n=>{n.preventDefault(),e==null||e(n)},f.jsx("button",{type:"button",...t})}function S(e,t){const n=e instanceof Date?e:new Date(e);let u=`${n.getFullYear()}-${y(n.getMonth()+1)}-${y(n.getDate())}T${y(n.getHours())}:${y(n.getMinutes())}`;const s=(t==null?void 0:t.milliseconds)||(t==null?void 0:t.milliseconds)==null&&n.getMilliseconds()!==0;return((t==null?void 0:t.seconds)||(t==null?void 0:t.seconds)==null&&(n.getSeconds()!==0||s))&&(u+=`:${y(n.getSeconds())}`,s&&(u+=`.${y(n.getMilliseconds(),3)}`)),t!=null&&t.offset&&(u+=M(-n.getTimezoneOffset())),u}function M(e){if(e==null)return"";if(e===0)return"Z";const t=e>0?"+":"-",n=Math.floor(Math.abs(e)/60),u=Math.abs(e)%60;return`${t}${y(n)}:${y(u)}`}const le=/^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,3})?)?)(Z|[+-]\d{2}:\d{2})?$/,fe={offset:!1,seconds:!1,milliseconds:!1};function ce(e){return e==null||Number.isNaN(e)||e===""||Number.isNaN(+new Date(e))}function _(e){if(typeof e=="string"){const t=e.match(le);if(t)return t[1]}return ce(e)?"":S(e,fe)}const w={offset:!1};function ie({value:e,defaultValue:t,min:n,max:u,onChange:s,...l}){return e!==void 0&&(l.value=e===null?"":S(e,w)),t!=null&&(l.defaultValue=S(t,w)),n!=null&&(l.min=S(n,w)),u!=null&&(l.max=S(u,w)),s!=null&&(l.onChange=a=>{if(a.currentTarget.value.length){const i=new Date(a.currentTarget.valueAsNumber);s({isoString:S(i,{offset:!0}),value:i.valueOf(),date:i})}else s({isoString:null,value:null,date:null})}),f.jsx("input",{type:"datetime-local",...l})}function ae(e){const t=r.useRef(e);return t.current=e,t}function oe(e,t){const n=r.useRef(e),u=ae(t);return r.useEffect(()=>{Object.is(n.current,e)||(u.current(),n.current=e)},[u,e]),r.useCallback(s=>{n.current=s},[])}const de=[{value:-12*60,text:"-12:00"},{value:-11*60,text:"-11:00"},{value:-10*60,text:"-10:00"},{value:-9.5*60,text:"-09:30"},{value:-9*60,text:"-09:00"},{value:-8*60,text:"-08:00"},{value:-7*60,text:"-07:00"},{value:-6*60,text:"-06:00"},{value:-5*60,text:"-05:00"},{value:-4*60,text:"-04:00"},{value:-3.5*60,text:"-03:30"},{value:-3*60,text:"-03:00"},{value:-2*60,text:"-02:00"},{value:-1*60,text:"-01:00"},{value:0,text:"±00:00"},{value:1*60,text:"+01:00"},{value:2*60,text:"+02:00"},{value:3*60,text:"+03:00"},{value:3.5*60,text:"+03:30"},{value:4*60,text:"+04:00"},{value:4.5*60,text:"+04:30"},{value:5*60,text:"+05:00"},{value:5.5*60,text:"+05:30"},{value:5.75*60,text:"+05:45"},{value:6*60,text:"+06:00"},{value:6.5*60,text:"+06:30"},{value:7*60,text:"+07:00"},{value:8*60,text:"+08:00"},{value:8.75*60,text:"+08:45"},{value:9*60,text:"+09:00"},{value:9.5*60,text:"+09:30"},{value:10*60,text:"+10:00"},{value:10.5*60,text:"+10:30"},{value:11*60,text:"+11:00"},{value:12*60,text:"+12:00"},{value:12.75*60,text:"+12:45"},{value:13*60,text:"+13:00"},{value:14*60,text:"+14:00"}];function k(e){if(typeof e!="string"||e==="")return null;const t=e.match(/([+-])(\d{2}):(\d{2})|Z$/);if(!t)return null;if(t[0]==="Z")return 0;const[,n,u,s]=t,l=Number(u)*60+Number(s);return n==="+"?l:-l}function F(e){return e===""?null:-new Date(e).getTimezoneOffset()}function xe({value:e,defaultValue:t,min:n,max:u,onChange:s,...l}){const[a,i]=r.useState(()=>k(e??t)!==null),[m,o]=r.useState(()=>k(e??t)),[v,d]=r.useState(()=>_(e??t)),b=oe(e,()=>{i(k(e)!==null),o(k(e)),d(_(e))}),I=r.useCallback(h=>{b(h),s==null||s({value:h})},[s,b]);n!=null&&(l.min=_(n)),u!=null&&(l.max=_(u));const N=a?m:F(v),c=r.useCallback(h=>{const E=h.currentTarget.value;d(E),I(E+M(N))},[I,N]),g=r.useCallback(h=>{o(h.value),I(v+M(h.value))},[I,v]),O=r.useCallback(h=>{const E=h.currentTarget.checked;i(E);let T;E?v&&m===null?(T=F(v),o(T)):T=m:T=F(v),I(v+M(T))},[m,v,I]);return f.jsxs("span",{children:[f.jsx("input",{type:"datetime-local",...l,value:v,onChange:c}),f.jsx("input",{type:"checkbox",title:a?"Use UTC offset from this device":"Enable UTC offset selection",checked:a,onChange:O}),f.jsx(C,{value:N,onChange:g,disabled:!a,options:de})]})}const me=r.forwardRef(function({placeholder:t,formatOnChange:n=ee,onChange:u,value:s,...l},a){const i={inputMode:"decimal",...l,formatOnChange:n,type:"number"};return s!==void 0&&(i.value=V(s)),t!=null&&(i.placeholder=String(t)),u!=null&&(i.onChange=m=>{u({...m,value:R(m.value)})}),f.jsx($,{...i,ref:a})});x.ActionButton=se,x.DatetimeLocalInput=ie,x.DatetimeOffsetInput=xe,x.DebouncedInput=re,x.Input=$,x.NumberInput=me,x.RadioMenu=ue,x.Select=C,x.TextArea=ne,x.TextInput=te,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(o,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],f):(o=typeof globalThis<"u"?globalThis:o||self,f(o["@mpen/react-basic-inputs"]={},o.jsxRuntime,o.React))})(this,function(o,f,r){"use strict";var ve=Object.defineProperty;var be=(o,f,r)=>f in o?ve(o,f,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[f]=r;var L=(o,f,r)=>(be(o,typeof f!="symbol"?f+"":f,r),r);const U=Object.freeze(()=>{});function q(e){return e}let E;typeof window<"u"?E=e=>{r.useDebugValue(e);const t=r.useRef(Y);r.useInsertionEffect(()=>{t.current=e},[e]);const n=r.useRef(null);return n.current||(n.current=function(){return t.current.apply(this,arguments)}),n.current}:E=U;function H(e){return E(e)}function Y(){throw new Error("INVALID_USE_EVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.")}function z(){var e=r.useRef(!0);return e.current?(e.current=!1,!0):e.current}var p=function(e,t){var n=z();r.useEffect(function(){if(!n)return e()},t)};function G(e,...t){return typeof e=="function"?e(...t):e}function Z(e,t){if(e.uniqueKey!=null)return G(e.uniqueKey,e,t);if(typeof e.value=="string")return e.value;if(typeof e.value=="number")return String(e.value);try{const n=JSON.stringify(e.value);if(n!==void 0)return n}catch{}return String(t)}class K{constructor(){L(this,"_usedKeys",new Map)}fix(t,n){let u=Z(t,n);for(;;){let s=this._usedKeys.get(u);if(s===void 0){this._usedKeys.set(u,1);break}this._usedKeys.set(u,++s),u=`${u}(${s})`}return u}}const B=e=>({value:e,text:String(e),disabled:!0,key:J}),W="3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb",J="1a53f789-77f5-4ce6-a829-b00e563f1ee8";function C({options:e,value:t,invalidValueOption:n=B,onChange:u,placeholder:s,...l}){const d=t==null,x=r.useMemo(()=>t!=null&&e.some(c=>c.value==t),[e,t]),m=r.useMemo(()=>t==null||!n?null:n(t),[n,t]),i=r.useMemo(()=>{if(x)return e;const c=[...e];return d?s!=null&&c.unshift({text:s,hidden:!0,value:null,key:W}):m&&c.push(m),c},[x,e,d,m,s]),v=H(c=>{const h=c.target.selectedIndex,S=i[h];u==null||u({value:S.value,index:h,type:"change",timeStamp:c.timeStamp,target:c.target})}),a=r.useRef(null),b=r.useCallback(()=>{a.current&&(a.current.selectedIndex<0||i[a.current.selectedIndex].value!=t)&&(a.current.selectedIndex=i.findIndex(c=>c.value==t))},[i,t]),I=c=>{a.current=c,b()};p(()=>{b()},[b]);const N=new K;return f.jsx("select",{...l,onChange:v,ref:I,children:i.map((c,h)=>{const{value:S,text:g,uniqueKey:O,...T}=c,P=N.fix(c,h);return r.createElement("option",{...T,key:P,value:P},c.text)})})}function X(e){return e?String(e).replace(/\s+/gu," ").trim():""}function Q(e){try{return e.toLocaleString("en-US",{useGrouping:!1,maximumFractionDigits:20})}catch{return e.toFixed(14).replace(/\.?0+$/,"")}}function R(e){return e?e==="∞"||e==="+∞"?Number.POSITIVE_INFINITY:e==="-∞"?Number.NEGATIVE_INFINITY:Number.parseFloat(e):Number.NaN}function V(e){return Number.isNaN(e)?"":e===Number.POSITIVE_INFINITY?"∞":e===Number.NEGATIVE_INFINITY?"-∞":Q(e)}function ee(e){return e?V(Number.parseFloat(e)):""}function y(e,t=2){return String(e).padStart(t,"0")}const $=r.forwardRef(function({value:t="",onPaste:n,onChange:u,onInput:s,onBlur:l,formatOnChange:d=q,...x},m){const[i,v]=r.useState(t),a=r.useRef(t),b=r.useRef(!1);p(()=>{v(t),b.current=!1,a.current=t},[t]);const I={type:"text",...x,ref:m,value:i,onChange:N=>{v(N.target.value)},onInput:N=>{b.current=!0,s==null||s(N)},onBlur:N=>{const c=d(i);b.current&&(c!==a.current&&(u==null||u({type:"change",value:c,timeStamp:N.timeStamp,target:N.target}),a.current=c),c!==N.target.value&&v(c)),l==null||l(N)}};return f.jsx("input",{...I})});function te({formatOnChange:e=X,...t}){return f.jsx($,{formatOnChange:e,...t,type:"text"})}const ne=r.forwardRef(function({onInput:t,style:n,initialHeight:u="auto",...s},l){const d=r.useRef(null),[x,m]=r.useState(u),i=r.useCallback(()=>{const a=d.current;if(!a)return;a.style.height=u;const b=`${a.scrollHeight}px`;m(b),a.style.height=b},[u]);r.useImperativeHandle(l,()=>({element:d.current,adjustHeight:i}),[i]);const v=E(a=>{i(),t==null||t(a)});return r.useLayoutEffect(()=>{i();const a=d.current;if(!a)return;const b=new ResizeObserver(I=>{i()});return b.observe(a),()=>{b.unobserve(a)}},[i]),f.jsx("textarea",{...s,style:{overflow:"hidden",resize:"none",...n,height:x},onInput:v,ref:d})});function ue(e){const t=r.useId(),n=e.name??t,u=e.valueEquals??Object.is,s=e.options??[],l=new K,d=E(x=>{const m=Number(x.target.value),i=s[m];i!=null&&e.onChange!=null&&e.onChange({value:i.value,index:m,type:"change",timeStamp:x.timeStamp,target:x.target})});return f.jsx("ul",{className:e.className,children:s.map((x,m)=>{const{value:i,text:v,key:a,itemClassName:b,labelClassName:I,inputClassName:N,textClassName:c,...h}=x,S=l.fix(x,m);return e.value!==void 0&&(h.checked=u(i,e.value)),f.jsx("li",{className:b,"aria-disabled":h.disabled,children:f.jsxs("label",{className:I,children:[f.jsx("input",{...h,className:N,value:m,onChange:d,name:n,type:"radio"}),f.jsx("span",{className:c,children:v})]})},S)})})}function j(){return r.useRef(null)}function A(e){e.current!=null&&(clearTimeout(e.current),e.current=null)}const re=({value:e,onChange:t,debounce:n=500,...u})=>{const s=j(),l=j();p(()=>{A(l),s.current!=null&&(s.current.value=e)},[e]);const d=()=>{s.current!=null&&s.current.value!==e&&(t==null||t({value:s.current.value}))};return f.jsx("input",{...u,ref:s,defaultValue:e,onInput:()=>{A(l),l.current=setTimeout(d,n)},onBlur:()=>{A(l),d()}})};function se({onClick:e,...t}){return t.onClick=n=>{n.preventDefault(),e==null||e(n)},f.jsx("button",{type:"button",...t})}function D(e,t){const n=e instanceof Date?e:new Date(e);let u=`${n.getFullYear()}-${y(n.getMonth()+1)}-${y(n.getDate())}T${y(n.getHours())}:${y(n.getMinutes())}`;const s=(t==null?void 0:t.milliseconds)||(t==null?void 0:t.milliseconds)==null&&n.getMilliseconds()!==0;return((t==null?void 0:t.seconds)||(t==null?void 0:t.seconds)==null&&(n.getSeconds()!==0||s))&&(u+=`:${y(n.getSeconds())}`,s&&(u+=`.${y(n.getMilliseconds(),3)}`)),t!=null&&t.offset&&(u+=M(-n.getTimezoneOffset())),u}function M(e){if(e==null)return"";if(e===0)return"Z";const t=e>0?"+":"-",n=Math.floor(Math.abs(e)/60),u=Math.abs(e)%60;return`${t}${y(n)}:${y(u)}`}const le=/^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,3})?)?)(Z|[+-]\d{2}:\d{2})?$/,fe={offset:!1,seconds:!1,milliseconds:!1};function ce(e){return e==null||Number.isNaN(e)||e===""||Number.isNaN(+new Date(e))}function _(e){if(typeof e=="string"){const t=e.match(le);if(t)return t[1]}return ce(e)?"":D(e,fe)}const w={offset:!1};function ie({value:e,defaultValue:t,min:n,max:u,onChange:s,...l}){return e!==void 0&&(l.value=e===null?"":D(e,w)),t!=null&&(l.defaultValue=D(t,w)),n!=null&&(l.min=D(n,w)),u!=null&&(l.max=D(u,w)),s!=null&&(l.onChange=d=>{s({value:d.currentTarget.value})}),f.jsx("input",{type:"datetime-local",...l})}function ae(e){const t=r.useRef(e);return t.current=e,t}function oe(e,t){const n=r.useRef(e),u=ae(t);return r.useEffect(()=>{Object.is(n.current,e)||(u.current(),n.current=e)},[u,e]),r.useCallback(s=>{n.current=s},[])}const de=[{value:-12*60,text:"-12:00"},{value:-11*60,text:"-11:00"},{value:-10*60,text:"-10:00"},{value:-9.5*60,text:"-09:30"},{value:-9*60,text:"-09:00"},{value:-8*60,text:"-08:00"},{value:-7*60,text:"-07:00"},{value:-6*60,text:"-06:00"},{value:-5*60,text:"-05:00"},{value:-4*60,text:"-04:00"},{value:-3.5*60,text:"-03:30"},{value:-3*60,text:"-03:00"},{value:-2*60,text:"-02:00"},{value:-1*60,text:"-01:00"},{value:0,text:"±00:00"},{value:1*60,text:"+01:00"},{value:2*60,text:"+02:00"},{value:3*60,text:"+03:00"},{value:3.5*60,text:"+03:30"},{value:4*60,text:"+04:00"},{value:4.5*60,text:"+04:30"},{value:5*60,text:"+05:00"},{value:5.5*60,text:"+05:30"},{value:5.75*60,text:"+05:45"},{value:6*60,text:"+06:00"},{value:6.5*60,text:"+06:30"},{value:7*60,text:"+07:00"},{value:8*60,text:"+08:00"},{value:8.75*60,text:"+08:45"},{value:9*60,text:"+09:00"},{value:9.5*60,text:"+09:30"},{value:10*60,text:"+10:00"},{value:10.5*60,text:"+10:30"},{value:11*60,text:"+11:00"},{value:12*60,text:"+12:00"},{value:12.75*60,text:"+12:45"},{value:13*60,text:"+13:00"},{value:14*60,text:"+14:00"}];function k(e){if(typeof e!="string"||e==="")return null;const t=e.match(/([+-])(\d{2}):(\d{2})|Z$/);if(!t)return null;if(t[0]==="Z")return 0;const[,n,u,s]=t,l=Number(u)*60+Number(s);return n==="+"?l:-l}function F(e){return e===""?null:-new Date(e).getTimezoneOffset()}function xe({value:e,defaultValue:t,min:n,max:u,onChange:s,...l}){const[d,x]=r.useState(()=>k(e??t)!==null),[m,i]=r.useState(()=>k(e??t)),[v,a]=r.useState(()=>_(e??t)),b=oe(e,()=>{x(k(e)!==null),i(k(e)),a(_(e))}),I=r.useCallback(g=>{b(g),s==null||s({value:g})},[s,b]);n!=null&&(l.min=_(n)),u!=null&&(l.max=_(u));const N=d?m:F(v),c=r.useCallback(g=>{const O=g.currentTarget.value;a(O),I(O+M(N))},[I,N]),h=r.useCallback(g=>{i(g.value),I(v+M(g.value))},[I,v]),S=r.useCallback(g=>{const O=g.currentTarget.checked;x(O);let T;O?v&&m===null?(T=F(v),i(T)):T=m:T=F(v),I(v+M(T))},[m,v,I]);return f.jsxs("span",{children:[f.jsx("input",{type:"datetime-local",...l,value:v,onChange:c}),f.jsx("input",{type:"checkbox",title:d?"Use UTC offset from this device":"Enable UTC offset selection",checked:d,onChange:S}),f.jsx(C,{value:N,onChange:h,disabled:!d,options:de})]})}const me=r.forwardRef(function({placeholder:t,formatOnChange:n=ee,onChange:u,value:s,...l},d){const x={inputMode:"decimal",...l,formatOnChange:n,type:"number"};return s!==void 0&&(x.value=V(s)),t!=null&&(x.placeholder=String(t)),u!=null&&(x.onChange=m=>{u({...m,value:R(m.value)})}),f.jsx($,{...x,ref:d})});o.ActionButton=se,o.DatetimeLocalInput=ie,o.DatetimeOffsetInput=xe,o.DebouncedInput=re,o.Input=$,o.NumberInput=me,o.RadioMenu=ue,o.Select=C,o.TextArea=ne,o.TextInput=te,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mpen/react-basic-inputs",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.3.
|
|
4
|
+
"version": "0.3.3",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"files": [
|
|
6
|
+
"files": [
|
|
7
|
+
"dist"
|
|
8
|
+
],
|
|
7
9
|
"exports": {
|
|
8
10
|
".": {
|
|
9
11
|
"import": "./dist/react-basic-inputs.js",
|
|
@@ -21,7 +23,8 @@
|
|
|
21
23
|
"preview": "bun run --bun vite preview",
|
|
22
24
|
"_prepublishOnly": "bun run --bun build",
|
|
23
25
|
"_publish": "npm publish --access=public",
|
|
24
|
-
"build:docs": "typedoc && hg addremove docs"
|
|
26
|
+
"build:docs": "typedoc && hg addremove docs",
|
|
27
|
+
"bump": "npm version patch && bun.exe run build && npm publish"
|
|
25
28
|
},
|
|
26
29
|
"peerDependencies": {
|
|
27
30
|
"react": "^18.2.0"
|