@mpen/react-basic-inputs 0.3.3 → 0.3.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 CHANGED
File without changes
File without changes
@@ -1,8 +1,8 @@
1
1
  var z = Object.defineProperty;
2
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
- import { jsx as v, jsxs as L } from "react/jsx-runtime";
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";
4
+ import { jsx as x, jsxs as L } from "react/jsx-runtime";
5
+ import { useDebugValue as G, useRef as h, useInsertionEffect as Z, useEffect as C, useMemo as K, useCallback as O, 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 re() {
29
+ function ue() {
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 = re();
34
+ var n = ue();
35
35
  C(function() {
36
36
  if (!n)
37
37
  return e();
38
38
  }, t);
39
39
  };
40
- function ue(e, ...t) {
40
+ function re(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 ue(e.uniqueKey, e, t);
45
+ return re(e.uniqueKey, e, t);
46
46
  if (typeof e.value == "string")
47
47
  return e.value;
48
48
  if (typeof e.value == "number")
@@ -60,16 +60,16 @@ class H {
60
60
  P(this, "_usedKeys", /* @__PURE__ */ new Map());
61
61
  }
62
62
  fix(t, n) {
63
- let r = se(t, n);
63
+ let u = se(t, n);
64
64
  for (; ; ) {
65
- let u = this._usedKeys.get(r);
66
- if (u === void 0) {
67
- this._usedKeys.set(r, 1);
65
+ let r = this._usedKeys.get(u);
66
+ if (r === void 0) {
67
+ this._usedKeys.set(u, 1);
68
68
  break;
69
69
  }
70
- this._usedKeys.set(r, ++u), r = `${r}(${u})`;
70
+ this._usedKeys.set(u, ++r), u = `${u}(${r})`;
71
71
  }
72
- return r;
72
+ return u;
73
73
  }
74
74
  }
75
75
  const ce = (e) => ({
@@ -78,23 +78,23 @@ const ce = (e) => ({
78
78
  disabled: !0,
79
79
  key: ae
80
80
  }), le = "3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb", ae = "1a53f789-77f5-4ce6-a829-b00e563f1ee8";
81
- function ie({
81
+ function fe({
82
82
  options: e,
83
83
  value: t,
84
84
  invalidValueOption: n = ce,
85
- onChange: r,
86
- placeholder: u,
85
+ onChange: u,
86
+ placeholder: r,
87
87
  ...s
88
88
  }) {
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)
89
+ const l = t == null, o = K(() => t != null && e.some((c) => c.value == t), [e, t]), i = K(() => t == null || !n ? null : n(t), [n, t]), a = K(() => {
90
+ if (o)
91
91
  return e;
92
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,
93
+ return l ? r != null && c.unshift({ text: r, hidden: !0, value: null, key: le }) : i && c.push(i), c;
94
+ }, [o, e, l, i, r]), d = te((c) => {
95
+ const g = c.target.selectedIndex, S = a[g];
96
+ u == null || u({
97
+ value: S.value,
98
98
  // option: opt,
99
99
  // event: ev,
100
100
  index: g,
@@ -102,21 +102,21 @@ function ie({
102
102
  timeStamp: c.timeStamp,
103
103
  target: c.target
104
104
  });
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();
105
+ }), f = h(null), m = O(() => {
106
+ f.current && (f.current.selectedIndex < 0 || a[f.current.selectedIndex].value != t) && (f.current.selectedIndex = a.findIndex((c) => c.value == t));
107
+ }, [a, t]), N = (c) => {
108
+ f.current = c, m();
109
109
  };
110
110
  R(() => {
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);
111
+ m();
112
+ }, [m]);
113
+ const v = new H();
114
+ return /* @__PURE__ */ x("select", { ...s, onChange: d, ref: N, children: a.map((c, g) => {
115
+ const { value: S, text: b, uniqueKey: y, ...T } = c, V = v.fix(c, g);
116
+ return /* @__PURE__ */ W("option", { ...T, key: V, value: V }, c.text);
117
117
  }) });
118
118
  }
119
- function fe(e) {
119
+ function ie(e) {
120
120
  return e ? String(e).replace(/\s+/gu, " ").trim() : "";
121
121
  }
122
122
  function oe(e) {
@@ -132,24 +132,24 @@ function de(e) {
132
132
  function Y(e) {
133
133
  return Number.isNaN(e) ? "" : e === Number.POSITIVE_INFINITY ? "∞" : e === Number.NEGATIVE_INFINITY ? "-∞" : oe(e);
134
134
  }
135
- function xe(e) {
135
+ function me(e) {
136
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 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);
141
+ const j = k(function({ value: t = "", onPaste: n, onChange: u, onInput: r, onBlur: s, formatOnChange: l = ee, ...o }, i) {
142
+ const [a, d] = D(t), f = h(t), m = h(!1);
143
143
  R(() => {
144
- d(t), x.current = !1, a.current = t;
144
+ d(t), m.current = !1, f.current = t;
145
145
  }, [t]);
146
146
  const N = {
147
147
  type: "text",
148
- ...f,
149
- ref: o,
150
- value: l,
151
- onChange: (m) => {
152
- d(m.target.value);
148
+ ...o,
149
+ ref: i,
150
+ value: a,
151
+ onChange: (v) => {
152
+ d(v.target.value);
153
153
  },
154
154
  // TODO: fire a change event onPaste ?
155
155
  // formatOnPaste?
@@ -167,157 +167,157 @@ const j = k(function({ value: t = "", onPaste: n, onChange: r, onInput: u, onBlu
167
167
  // // ev.preventDefault()
168
168
  // // setCurrentValue(formatOnChange(ev.clipboardData.getData('text/plain')))
169
169
  // },
170
- onInput: (m) => {
171
- x.current = !0, u == null || u(m);
170
+ onInput: (v) => {
171
+ m.current = !0, r == null || r(v);
172
172
  },
173
- onBlur: (m) => {
174
- const c = i(l);
175
- x.current && (c !== a.current && (r == null || r({
173
+ onBlur: (v) => {
174
+ const c = l(a);
175
+ m.current && (c !== f.current && (u == null || u({
176
176
  type: "change",
177
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);
178
+ timeStamp: v.timeStamp,
179
+ target: v.target
180
+ }), f.current = c), c !== v.target.value && d(c)), s == null || s(v);
181
181
  }
182
182
  };
183
- return /* @__PURE__ */ v("input", { ...N });
183
+ return /* @__PURE__ */ x("input", { ...N });
184
184
  });
185
- function Oe({ formatOnChange: e = fe, ...t }) {
186
- return /* @__PURE__ */ v(j, { formatOnChange: e, ...t, type: "text" });
185
+ function Ee({ formatOnChange: e = ie, ...t }) {
186
+ return /* @__PURE__ */ x(j, { formatOnChange: e, ...t, type: "text" });
187
187
  }
188
- const Se = k(function({
188
+ const De = k(function({
189
189
  onInput: t,
190
190
  style: n,
191
- initialHeight: r = "auto",
192
- ...u
191
+ initialHeight: u = "auto",
192
+ ...r
193
193
  }, s) {
194
- const i = h(null), [f, o] = D(r), l = T(() => {
195
- const a = i.current;
196
- if (!a)
194
+ const l = h(null), [o, i] = D(u), a = O(() => {
195
+ const f = l.current;
196
+ if (!f)
197
197
  return;
198
- a.style.height = r;
199
- const x = `${a.scrollHeight}px`;
200
- o(x), a.style.height = x;
201
- }, [r]);
198
+ f.style.height = u;
199
+ const m = `${f.scrollHeight}px`;
200
+ i(m), f.style.height = m;
201
+ }, [u]);
202
202
  B(s, () => ({
203
- element: i.current,
204
- adjustHeight: l
205
- }), [l]);
206
- const d = _((a) => {
207
- l(), t == null || t(a);
203
+ element: l.current,
204
+ adjustHeight: a
205
+ }), [a]);
206
+ const d = _((f) => {
207
+ a(), t == null || t(f);
208
208
  });
209
209
  return J(() => {
210
- l();
211
- const a = i.current;
212
- if (!a)
210
+ a();
211
+ const f = l.current;
212
+ if (!f)
213
213
  return;
214
- const x = new ResizeObserver((N) => {
215
- l();
214
+ const m = new ResizeObserver((N) => {
215
+ a();
216
216
  });
217
- return x.observe(a), () => {
218
- x.unobserve(a);
217
+ return m.observe(f), () => {
218
+ m.unobserve(f);
219
219
  };
220
- }, [l]), /* @__PURE__ */ v("textarea", { ...u, style: {
220
+ }, [a]), /* @__PURE__ */ x("textarea", { ...r, 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: f
226
- }, onInput: d, ref: i });
225
+ height: o
226
+ }, onInput: d, ref: l });
227
227
  });
228
- function Ee(e) {
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
- index: o,
228
+ function _e(e) {
229
+ const t = X(), n = e.name ?? t, u = e.valueEquals ?? Object.is, r = e.options ?? [], s = new H(), l = _((o) => {
230
+ const i = Number(o.target.value), a = r[i];
231
+ a != null && e.onChange != null && e.onChange({
232
+ value: a.value,
233
+ index: i,
234
234
  type: "change",
235
- timeStamp: f.timeStamp,
236
- target: f.target
235
+ timeStamp: o.timeStamp,
236
+ target: o.target
237
237
  });
238
238
  });
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);
239
+ return /* @__PURE__ */ x("ul", { className: e.className, children: r.map((o, i) => {
240
+ const { value: a, text: d, key: f, itemClassName: m, labelClassName: N, inputClassName: v, textClassName: c, ...g } = o, S = s.fix(o, i);
241
+ return e.value !== void 0 && (g.checked = u(a, e.value)), /* @__PURE__ */ x("li", { className: m, "aria-disabled": g.disabled, children: /* @__PURE__ */ L("label", { className: N, children: [
242
+ /* @__PURE__ */ x("input", { ...g, className: v, value: i, onChange: l, name: n, type: "radio" }),
243
+ /* @__PURE__ */ x("span", { className: c, children: d })
244
+ ] }) }, S);
245
245
  }) });
246
246
  }
247
247
  function U() {
248
248
  return h(null);
249
249
  }
250
- function K(e) {
250
+ function A(e) {
251
251
  e.current != null && (clearTimeout(e.current), e.current = null);
252
252
  }
253
- const De = ({
253
+ const Me = ({
254
254
  value: e,
255
255
  onChange: t,
256
256
  debounce: n = 500,
257
- ...r
257
+ ...u
258
258
  }) => {
259
- const u = U(), s = U();
259
+ const r = U(), s = U();
260
260
  R(() => {
261
- K(s), u.current != null && (u.current.value = e);
261
+ A(s), r.current != null && (r.current.value = e);
262
262
  }, [e]);
263
- const i = () => {
264
- u.current != null && u.current.value !== e && (t == null || t({ value: u.current.value }));
263
+ const l = () => {
264
+ r.current != null && r.current.value !== e && (t == null || t({ value: r.current.value }));
265
265
  };
266
- return /* @__PURE__ */ v("input", { ...r, ref: u, defaultValue: e, onInput: () => {
267
- K(s), s.current = setTimeout(i, n);
266
+ return /* @__PURE__ */ x("input", { ...u, ref: r, defaultValue: e, onInput: () => {
267
+ A(s), s.current = setTimeout(l, n);
268
268
  }, onBlur: () => {
269
- K(s), i();
269
+ A(s), l();
270
270
  } });
271
271
  };
272
- function _e({ onClick: e, ...t }) {
272
+ function pe({ onClick: e, ...t }) {
273
273
  return t.onClick = (n) => {
274
274
  n.preventDefault(), e == null || e(n);
275
- }, /* @__PURE__ */ v("button", { type: "button", ...t });
275
+ }, /* @__PURE__ */ x("button", { type: "button", ...t });
276
276
  }
277
277
  function E(e, t) {
278
278
  const n = e instanceof Date ? e : new Date(e);
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;
279
+ let u = `${n.getFullYear()}-${I(n.getMonth() + 1)}-${I(n.getDate())}T${I(n.getHours())}:${I(n.getMinutes())}`;
280
+ const r = (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 || r)) && (u += `:${I(n.getSeconds())}`, r && (u += `.${I(n.getMilliseconds(), 3)}`)), t != null && t.offset && (u += F(-n.getTimezoneOffset())), u;
282
282
  }
283
- function p(e) {
283
+ function F(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), r = Math.abs(e) % 60;
289
- return `${t}${I(n)}:${I(r)}`;
288
+ const t = e > 0 ? "+" : "-", n = Math.floor(Math.abs(e) / 60), u = Math.abs(e) % 60;
289
+ return `${t}${I(n)}:${I(u)}`;
290
290
  }
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 };
291
+ const xe = /^(\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(me);
297
+ const t = e.match(xe);
298
298
  if (t)
299
299
  return t[1];
300
300
  }
301
301
  return Ne(e) ? "" : E(e, ve);
302
302
  }
303
- const w = { offset: !1 };
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
303
+ const p = { offset: !1 };
304
+ function we({ value: e, defaultValue: t, min: n, max: u, onChange: r, ...s }) {
305
+ return e !== void 0 && (s.value = e === null ? "" : E(e, p)), t != null && (s.defaultValue = E(t, p)), n != null && (s.min = E(n, p)), u != null && (s.max = E(u, p)), r != null && (s.onChange = (l) => {
306
+ r({
307
+ value: l.currentTarget.value
308
308
  });
309
- }), /* @__PURE__ */ v("input", { type: "datetime-local", ...s });
309
+ }), /* @__PURE__ */ x("input", { type: "datetime-local", ...s });
310
310
  }
311
311
  function ge(e) {
312
312
  const t = h(e);
313
313
  return t.current = e, t;
314
314
  }
315
315
  function be(e, t) {
316
- const n = h(e), r = ge(t);
316
+ const n = h(e), u = ge(t);
317
317
  return C(() => {
318
- Object.is(n.current, e) || (r.current(), n.current = e);
319
- }, [r, e]), T((u) => {
320
- n.current = u;
318
+ Object.is(n.current, e) || (u.current(), n.current = e);
319
+ }, [u, e]), O((r) => {
320
+ n.current = r;
321
321
  }, []);
322
322
  }
323
323
  const he = [
@@ -398,7 +398,7 @@ const he = [
398
398
  // Kiribati
399
399
  { value: 14 * 60, text: "+14:00" }
400
400
  ];
401
- function $(e) {
401
+ function w(e) {
402
402
  if (typeof e != "string" || e === "")
403
403
  return null;
404
404
  const t = e.match(/([+-])(\d{2}):(\d{2})|Z$/);
@@ -406,50 +406,56 @@ function $(e) {
406
406
  return null;
407
407
  if (t[0] === "Z")
408
408
  return 0;
409
- const [, n, r, u] = t, s = Number(r) * 60 + Number(u);
409
+ const [, n, u, r] = t, s = Number(u) * 60 + Number(r);
410
410
  return n === "+" ? s : -s;
411
411
  }
412
- function A(e) {
412
+ function $(e) {
413
413
  return e === "" ? null : -new Date(e).getTimezoneOffset();
414
414
  }
415
- function we({
415
+ function Ie(e, t, n) {
416
+ return e ? t : $(n);
417
+ }
418
+ function ye(e, t, n) {
419
+ return F(Ie(e, t, n));
420
+ }
421
+ function $e({
416
422
  value: e,
417
423
  defaultValue: t,
418
424
  min: n,
419
- max: r,
420
- onChange: u,
425
+ max: u,
426
+ onChange: r,
421
427
  ...s
422
428
  }) {
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));
425
- }), N = T((b) => {
426
- x(b), u == null || u({
429
+ const [l, o] = D(() => w(e ?? t) !== null), [i, a] = D(() => w(e ?? t)), [d, f] = D(() => M(e ?? t)), m = be(e, () => {
430
+ o(w(e) !== null), a(w(e)), f(M(e));
431
+ }), N = O((b) => {
432
+ m(b), r == null || r({
427
433
  value: b
428
434
  });
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(
435
+ }, [r, m]);
436
+ n != null && (s.min = M(n)), u != null && (s.max = M(u));
437
+ const v = l ? i : $(d), c = O(
432
438
  (b) => {
433
- const S = b.currentTarget.value;
434
- a(S), N(S + p(m));
439
+ const y = b.currentTarget.value;
440
+ f(y), N(y + ye(l, i, y));
435
441
  },
436
- [N, m]
437
- ), g = T(
442
+ [N, l, i]
443
+ ), g = O(
438
444
  (b) => {
439
- l(b.value), N(d + p(b.value));
445
+ a(b.value), N(d + F(b.value));
440
446
  },
441
447
  [N, d]
442
- ), O = T(
448
+ ), S = O(
443
449
  (b) => {
444
- const S = b.currentTarget.checked;
445
- f(S);
446
- let y;
447
- S ? d && o === null ? (y = A(d), l(y)) : y = o : y = A(d), N(d + p(y));
450
+ const y = b.currentTarget.checked;
451
+ o(y);
452
+ let T;
453
+ y ? d && i === null ? (T = $(d), a(T)) : T = i : T = $(d), N(d + F(T));
448
454
  },
449
- [o, d, N]
455
+ [i, d, N]
450
456
  );
451
457
  return /* @__PURE__ */ L("span", { children: [
452
- /* @__PURE__ */ v(
458
+ /* @__PURE__ */ x(
453
459
  "input",
454
460
  {
455
461
  type: "datetime-local",
@@ -458,49 +464,49 @@ function we({
458
464
  onChange: c
459
465
  }
460
466
  ),
461
- /* @__PURE__ */ v(
467
+ /* @__PURE__ */ x(
462
468
  "input",
463
469
  {
464
470
  type: "checkbox",
465
- title: i ? "Use UTC offset from this device" : "Enable UTC offset selection",
466
- checked: i,
467
- onChange: O
471
+ title: l ? "Use UTC offset from this device" : "Enable UTC offset selection",
472
+ checked: l,
473
+ onChange: S
468
474
  }
469
475
  ),
470
- /* @__PURE__ */ v(
471
- ie,
476
+ /* @__PURE__ */ x(
477
+ fe,
472
478
  {
473
- value: m,
479
+ value: v,
474
480
  onChange: g,
475
- disabled: !i,
481
+ disabled: !l,
476
482
  options: he
477
483
  }
478
484
  )
479
485
  ] });
480
486
  }
481
- const $e = k(function({ placeholder: t, formatOnChange: n = xe, onChange: r, value: u, ...s }, i) {
482
- const f = {
487
+ const Fe = k(function({ placeholder: t, formatOnChange: n = me, onChange: u, value: r, ...s }, l) {
488
+ const o = {
483
489
  inputMode: "decimal",
484
490
  ...s,
485
491
  formatOnChange: n,
486
492
  type: "number"
487
493
  };
488
- return u !== void 0 && (f.value = Y(u)), t != null && (f.placeholder = String(t)), r != null && (f.onChange = (o) => {
489
- r({
490
- ...o,
491
- value: de(o.value)
494
+ return r !== void 0 && (o.value = Y(r)), t != null && (o.placeholder = String(t)), u != null && (o.onChange = (i) => {
495
+ u({
496
+ ...i,
497
+ value: de(i.value)
492
498
  });
493
- }), /* @__PURE__ */ v(j, { ...f, ref: i });
499
+ }), /* @__PURE__ */ x(j, { ...o, ref: l });
494
500
  });
495
501
  export {
496
- _e as ActionButton,
497
- Me as DatetimeLocalInput,
498
- we as DatetimeOffsetInput,
499
- De as DebouncedInput,
502
+ pe as ActionButton,
503
+ we as DatetimeLocalInput,
504
+ $e as DatetimeOffsetInput,
505
+ Me as DebouncedInput,
500
506
  j as Input,
501
- $e as NumberInput,
502
- Ee as RadioMenu,
503
- ie as Select,
504
- Se as TextArea,
505
- Oe as TextInput
507
+ Fe as NumberInput,
508
+ _e as RadioMenu,
509
+ fe as Select,
510
+ De as TextArea,
511
+ Ee as TextInput
506
512
  };
@@ -1 +1 @@
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"})});
1
+ (function(d,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):(d=typeof globalThis<"u"?globalThis:d||self,f(d["@mpen/react-basic-inputs"]={},d.jsxRuntime,d.React))})(this,function(d,f,r){"use strict";var Ne=Object.defineProperty;var Ie=(d,f,r)=>f in d?Ne(d,f,{enumerable:!0,configurable:!0,writable:!0,value:r}):d[f]=r;var L=(d,f,r)=>(Ie(d,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 $=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 i=t==null,m=r.useMemo(()=>t!=null&&e.some(c=>c.value==t),[e,t]),x=r.useMemo(()=>t==null||!n?null:n(t),[n,t]),a=r.useMemo(()=>{if(m)return e;const c=[...e];return i?s!=null&&c.unshift({text:s,hidden:!0,value:null,key:W}):x&&c.push(x),c},[m,e,i,x,s]),v=H(c=>{const g=c.target.selectedIndex,O=a[g];u==null||u({value:O.value,index:g,type:"change",timeStamp:c.timeStamp,target:c.target})}),o=r.useRef(null),b=r.useCallback(()=>{o.current&&(o.current.selectedIndex<0||a[o.current.selectedIndex].value!=t)&&(o.current.selectedIndex=a.findIndex(c=>c.value==t))},[a,t]),I=c=>{o.current=c,b()};$(()=>{b()},[b]);const N=new K;return f.jsx("select",{...l,onChange:v,ref:I,children:a.map((c,g)=>{const{value:O,text:h,uniqueKey:T,...S}=c,P=N.fix(c,g);return r.createElement("option",{...S,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 A=r.forwardRef(function({value:t="",onPaste:n,onChange:u,onInput:s,onBlur:l,formatOnChange:i=q,...m},x){const[a,v]=r.useState(t),o=r.useRef(t),b=r.useRef(!1);$(()=>{v(t),b.current=!1,o.current=t},[t]);const I={type:"text",...m,ref:x,value:a,onChange:N=>{v(N.target.value)},onInput:N=>{b.current=!0,s==null||s(N)},onBlur:N=>{const c=i(a);b.current&&(c!==o.current&&(u==null||u({type:"change",value:c,timeStamp:N.timeStamp,target:N.target}),o.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(A,{formatOnChange:e,...t,type:"text"})}const ne=r.forwardRef(function({onInput:t,style:n,initialHeight:u="auto",...s},l){const i=r.useRef(null),[m,x]=r.useState(u),a=r.useCallback(()=>{const o=i.current;if(!o)return;o.style.height=u;const b=`${o.scrollHeight}px`;x(b),o.style.height=b},[u]);r.useImperativeHandle(l,()=>({element:i.current,adjustHeight:a}),[a]);const v=E(o=>{a(),t==null||t(o)});return r.useLayoutEffect(()=>{a();const o=i.current;if(!o)return;const b=new ResizeObserver(I=>{a()});return b.observe(o),()=>{b.unobserve(o)}},[a]),f.jsx("textarea",{...s,style:{overflow:"hidden",resize:"none",...n,height:m},onInput:v,ref:i})});function ue(e){const t=r.useId(),n=e.name??t,u=e.valueEquals??Object.is,s=e.options??[],l=new K,i=E(m=>{const x=Number(m.target.value),a=s[x];a!=null&&e.onChange!=null&&e.onChange({value:a.value,index:x,type:"change",timeStamp:m.timeStamp,target:m.target})});return f.jsx("ul",{className:e.className,children:s.map((m,x)=>{const{value:a,text:v,key:o,itemClassName:b,labelClassName:I,inputClassName:N,textClassName:c,...g}=m,O=l.fix(m,x);return e.value!==void 0&&(g.checked=u(a,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:x,onChange:i,name:n,type:"radio"}),f.jsx("span",{className:c,children:v})]})},O)})})}function j(){return r.useRef(null)}function F(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();$(()=>{F(l),s.current!=null&&(s.current.value=e)},[e]);const i=()=>{s.current!=null&&s.current.value!==e&&(t==null||t({value:s.current.value}))};return f.jsx("input",{...u,ref:s,defaultValue:e,onInput:()=>{F(l),l.current=setTimeout(i,n)},onBlur:()=>{F(l),i()}})};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 p={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,p)),t!=null&&(l.defaultValue=D(t,p)),n!=null&&(l.min=D(n,p)),u!=null&&(l.max=D(u,p)),s!=null&&(l.onChange=i=>{s({value:i.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 w(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 k(e){return e===""?null:-new Date(e).getTimezoneOffset()}function xe(e,t,n){return e?t:k(n)}function me(e,t,n){return M(xe(e,t,n))}function ve({value:e,defaultValue:t,min:n,max:u,onChange:s,...l}){const[i,m]=r.useState(()=>w(e??t)!==null),[x,a]=r.useState(()=>w(e??t)),[v,o]=r.useState(()=>_(e??t)),b=oe(e,()=>{m(w(e)!==null),a(w(e)),o(_(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=i?x:k(v),c=r.useCallback(h=>{const T=h.currentTarget.value;o(T),I(T+me(i,x,T))},[I,i,x]),g=r.useCallback(h=>{a(h.value),I(v+M(h.value))},[I,v]),O=r.useCallback(h=>{const T=h.currentTarget.checked;m(T);let S;T?v&&x===null?(S=k(v),a(S)):S=x:S=k(v),I(v+M(S))},[x,v,I]);return f.jsxs("span",{children:[f.jsx("input",{type:"datetime-local",...l,value:v,onChange:c}),f.jsx("input",{type:"checkbox",title:i?"Use UTC offset from this device":"Enable UTC offset selection",checked:i,onChange:O}),f.jsx(C,{value:N,onChange:g,disabled:!i,options:de})]})}const be=r.forwardRef(function({placeholder:t,formatOnChange:n=ee,onChange:u,value:s,...l},i){const m={inputMode:"decimal",...l,formatOnChange:n,type:"number"};return s!==void 0&&(m.value=V(s)),t!=null&&(m.placeholder=String(t)),u!=null&&(m.onChange=x=>{u({...x,value:R(x.value)})}),f.jsx(A,{...m,ref:i})});d.ActionButton=se,d.DatetimeLocalInput=ie,d.DatetimeOffsetInput=ve,d.DebouncedInput=re,d.Input=A,d.NumberInput=be,d.RadioMenu=ue,d.Select=C,d.TextArea=ne,d.TextInput=te,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mpen/react-basic-inputs",
3
3
  "private": false,
4
- "version": "0.3.3",
4
+ "version": "0.3.4",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "dist"