@mpen/react-basic-inputs 0.2.7 → 0.2.8

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.
@@ -14,6 +14,15 @@ export declare function ActionButton({ onClick, ...props }: ActionButtonProps):
14
14
 
15
15
  export declare type ActionButtonProps = RequiredKeys<ComponentPropsWithoutRef<'button'>, 'onClick'>;
16
16
 
17
+ export declare function DatetimeLocalInput({ value, defaultValue, min, max, ...props }: DatetimeLocalInputProps): JSX_2.Element;
18
+
19
+ export declare type DatetimeLocalInputProps = OverrideProps<'input', {
20
+ min?: number | string | Date;
21
+ max?: number | string | Date;
22
+ value?: number | string | Date;
23
+ defaultValue?: number | string | Date;
24
+ }, 'type'>;
25
+
17
26
  export declare const DebouncedInput: FC<DebouncedInputProps>;
18
27
 
19
28
  export declare type DebouncedInputChangeEvent = {
@@ -1,130 +1,138 @@
1
- var k = Object.defineProperty;
2
- var M = (e, t, r) => t in e ? k(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
3
- var O = (e, t, r) => (M(e, typeof t != "symbol" ? t + "" : t, r), r);
4
- import { jsx as x, jsxs as V } from "react/jsx-runtime";
5
- import { useDebugValue as D, useRef as v, useInsertionEffect as j, useEffect as q, useMemo as N, useCallback as w, createElement as H, forwardRef as R, useState as T, useImperativeHandle as L, useLayoutEffect as z, useId as F } from "react";
6
- const $ = Object.freeze(() => {
1
+ var V = Object.defineProperty;
2
+ var $ = (e, t, n) => t in e ? V(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
3
+ var w = (e, t, n) => ($(e, typeof t != "symbol" ? t + "" : t, n), n);
4
+ import { jsx as x, jsxs as k } from "react/jsx-runtime";
5
+ import { useDebugValue as H, useRef as h, useInsertionEffect as L, useEffect as j, useMemo as S, useCallback as D, createElement as q, forwardRef as R, useState as T, useImperativeHandle as F, useLayoutEffect as z, useId as Y } from "react";
6
+ const U = Object.freeze(() => {
7
7
  });
8
- function U(e) {
8
+ function B(e) {
9
9
  return e;
10
10
  }
11
11
  let b;
12
12
  typeof window < "u" ? b = (e) => {
13
- D(e);
14
- const t = v(B);
15
- j(() => {
13
+ H(e);
14
+ const t = h(P);
15
+ L(() => {
16
16
  t.current = e;
17
17
  }, [e]);
18
- const r = v(null);
19
- return r.current || (r.current = function() {
18
+ const n = h(null);
19
+ return n.current || (n.current = function() {
20
20
  return t.current.apply(this, arguments);
21
- }), r.current;
22
- } : b = $;
23
- function Y(e) {
21
+ }), n.current;
22
+ } : b = U;
23
+ function J(e) {
24
24
  return b(e);
25
25
  }
26
- function B() {
26
+ function P() {
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 J() {
30
- var e = v(!0);
29
+ function W() {
30
+ var e = h(!0);
31
31
  return e.current ? (e.current = !1, !0) : e.current;
32
32
  }
33
- var E = function(e, t) {
34
- var r = J();
35
- q(function() {
36
- if (!r)
33
+ var O = function(e, t) {
34
+ var n = W();
35
+ j(function() {
36
+ if (!n)
37
37
  return e();
38
38
  }, t);
39
39
  };
40
- function P(e, ...t) {
40
+ function C(e, ...t) {
41
41
  return typeof e == "function" ? e(...t) : e;
42
42
  }
43
- function W(e, t) {
43
+ function G(e, t) {
44
44
  if (e.uniqueKey != null)
45
- return P(e.uniqueKey, e, t);
45
+ return C(e.uniqueKey, e, t);
46
46
  if (typeof e.value == "string")
47
47
  return e.value;
48
48
  if (typeof e.value == "number")
49
49
  return String(e.value);
50
50
  try {
51
- const r = JSON.stringify(e.value);
52
- if (r !== void 0)
53
- return r;
51
+ const n = JSON.stringify(e.value);
52
+ if (n !== void 0)
53
+ return n;
54
54
  } catch {
55
55
  }
56
56
  return String(t);
57
57
  }
58
58
  class _ {
59
59
  constructor() {
60
- O(this, "usedKeys", /* @__PURE__ */ new Map());
60
+ w(this, "usedKeys", /* @__PURE__ */ new Map());
61
61
  }
62
- fix(t, r) {
63
- let s = W(t, r);
62
+ fix(t, n) {
63
+ let u = G(t, n);
64
64
  for (; ; ) {
65
- let u = this.usedKeys.get(s);
66
- if (u === void 0) {
67
- this.usedKeys.set(s, 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(s, ++u), s = `${s}(${u})`;
70
+ this.usedKeys.set(u, ++r), u = `${u}(${r})`;
71
71
  }
72
- return s;
72
+ return u;
73
73
  }
74
74
  }
75
- const C = (e) => ({
75
+ const Q = (e) => ({
76
76
  value: e,
77
77
  text: String(e),
78
78
  disabled: !0,
79
- key: Q
80
- }), G = "3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb", Q = "1a53f789-77f5-4ce6-a829-b00e563f1ee8";
81
- function se({
79
+ key: Z
80
+ }), X = "3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb", Z = "1a53f789-77f5-4ce6-a829-b00e563f1ee8";
81
+ function ie({
82
82
  options: e,
83
83
  value: t,
84
- invalidValueOption: r = C,
85
- onChange: s,
86
- placeholder: u,
87
- ...f
84
+ invalidValueOption: n = Q,
85
+ onChange: u,
86
+ placeholder: r,
87
+ ...a
88
88
  }) {
89
- const l = t == null, o = N(() => t != null && e.some((n) => n.value == t), [e, t]), d = N(() => t == null || !r ? null : r(t), [r, t]), i = N(() => {
89
+ const f = t == null, o = S(() => t != null && e.some((s) => s.value == t), [e, t]), d = S(() => t == null || !n ? null : n(t), [n, t]), i = S(() => {
90
90
  if (o)
91
91
  return e;
92
- const n = [...e];
93
- return l ? u != null && n.unshift({ text: u, hidden: !0, value: null, key: G }) : d && n.push(d), n;
94
- }, [o, e, l, d, u]), y = Y((n) => {
95
- const p = n.target.selectedIndex, g = i[p];
96
- s == null || s({
97
- value: g.value,
92
+ const s = [...e];
93
+ return f ? r != null && s.unshift({ text: r, hidden: !0, value: null, key: X }) : d && s.push(d), s;
94
+ }, [o, e, f, d, r]), y = J((s) => {
95
+ const g = s.target.selectedIndex, N = i[g];
96
+ u == null || u({
97
+ value: N.value,
98
98
  // option: opt,
99
99
  // event: ev,
100
- index: p,
100
+ index: g,
101
101
  type: "change",
102
- timeStamp: n.timeStamp,
103
- target: n.target
102
+ timeStamp: s.timeStamp,
103
+ target: s.target
104
104
  });
105
- }), c = v(null), a = w(() => {
106
- c.current && (c.current.selectedIndex < 0 || i[c.current.selectedIndex].value != t) && (c.current.selectedIndex = i.findIndex((n) => n.value == t));
107
- }, [i, t]), h = (n) => {
108
- c.current = n, a();
105
+ }), c = h(null), l = D(() => {
106
+ c.current && (c.current.selectedIndex < 0 || i[c.current.selectedIndex].value != t) && (c.current.selectedIndex = i.findIndex((s) => s.value == t));
107
+ }, [i, t]), v = (s) => {
108
+ c.current = s, l();
109
109
  };
110
- E(() => {
111
- a();
112
- }, [a]);
110
+ O(() => {
111
+ l();
112
+ }, [l]);
113
113
  const m = new _();
114
- return /* @__PURE__ */ x("select", { ...f, onChange: y, ref: h, children: i.map((n, p) => {
115
- const { value: g, text: ee, uniqueKey: te, ...A } = n, S = m.fix(n, p);
116
- return /* @__PURE__ */ H("option", { ...A, key: S, value: S }, n.text);
114
+ return /* @__PURE__ */ x("select", { ...a, onChange: y, ref: v, children: i.map((s, g) => {
115
+ const { value: N, text: ne, uniqueKey: re, ...A } = s, K = m.fix(s, g);
116
+ return /* @__PURE__ */ q("option", { ...A, key: K, value: K }, s.text);
117
117
  }) });
118
118
  }
119
- function X(e) {
119
+ function ee(e) {
120
120
  return e ? String(e).replace(/\s+/gu, " ").trim() : "";
121
121
  }
122
- const Z = R(function({ value: t = "", onPaste: r, onChange: s, onInput: u, onBlur: f, formatOnChange: l = U, ...o }, d) {
123
- const [i, y] = T(t), c = v(t), a = v(!1);
124
- E(() => {
125
- y(t), a.current = !1, c.current = t;
122
+ function p(e, t = 2) {
123
+ return String(e).padStart(t, "0");
124
+ }
125
+ function I(e) {
126
+ const t = new Date(e);
127
+ let n = `${t.getFullYear()}-${p(t.getMonth() + 1)}-${p(t.getDate())}T${p(t.getHours())}:${p(t.getMinutes())}`;
128
+ return (t.getSeconds() !== 0 || t.getMilliseconds() !== 0) && (n += ":" + p(t.getSeconds()), t.getMilliseconds() !== 0 && (n += "." + p(t.getMilliseconds(), 3))), n;
129
+ }
130
+ const te = R(function({ value: t = "", onPaste: n, onChange: u, onInput: r, onBlur: a, formatOnChange: f = B, ...o }, d) {
131
+ const [i, y] = T(t), c = h(t), l = h(!1);
132
+ O(() => {
133
+ y(t), l.current = !1, c.current = t;
126
134
  }, [t]);
127
- const h = {
135
+ const v = {
128
136
  type: "text",
129
137
  ...o,
130
138
  ref: d,
@@ -149,39 +157,39 @@ const Z = R(function({ value: t = "", onPaste: r, onChange: s, onInput: u, onBlu
149
157
  // // setCurrentValue(formatOnChange(ev.clipboardData.getData('text/plain')))
150
158
  // },
151
159
  onInput: (m) => {
152
- a.current = !0, u == null || u(m);
160
+ l.current = !0, r == null || r(m);
153
161
  },
154
162
  onBlur: (m) => {
155
- const n = l(i);
156
- a.current && (n !== c.current && (s == null || s({
163
+ const s = f(i);
164
+ l.current && (s !== c.current && (u == null || u({
157
165
  type: "change",
158
- value: n,
166
+ value: s,
159
167
  timeStamp: m.timeStamp,
160
168
  target: m.target
161
- }), c.current = n), n !== m.target.value && y(n)), f == null || f(m);
169
+ }), c.current = s), s !== m.target.value && y(s)), a == null || a(m);
162
170
  }
163
171
  };
164
- return /* @__PURE__ */ x("input", { ...h });
172
+ return /* @__PURE__ */ x("input", { ...v });
165
173
  });
166
- function ce({ formatOnChange: e = X, ...t }) {
167
- return /* @__PURE__ */ x(Z, { formatOnChange: e, ...t, type: "text" });
174
+ function le({ formatOnChange: e = ee, ...t }) {
175
+ return /* @__PURE__ */ x(te, { formatOnChange: e, ...t, type: "text" });
168
176
  }
169
- const ie = R(function({
177
+ const ae = R(function({
170
178
  onInput: t,
171
- style: r,
172
- initialHeight: s = "auto",
173
- ...u
174
- }, f) {
175
- const l = v(null), [o, d] = T(s), i = w(() => {
176
- const c = l.current;
179
+ style: n,
180
+ initialHeight: u = "auto",
181
+ ...r
182
+ }, a) {
183
+ const f = h(null), [o, d] = T(u), i = D(() => {
184
+ const c = f.current;
177
185
  if (!c)
178
186
  return;
179
- c.style.height = s;
180
- const a = `${c.scrollHeight}px`;
181
- d(a), c.style.height = a;
182
- }, [s]);
183
- L(f, () => ({
184
- element: l.current,
187
+ c.style.height = u;
188
+ const l = `${c.scrollHeight}px`;
189
+ d(l), c.style.height = l;
190
+ }, [u]);
191
+ F(a, () => ({
192
+ element: f.current,
185
193
  adjustHeight: i
186
194
  }), [i]);
187
195
  const y = b((c) => {
@@ -189,26 +197,26 @@ const ie = R(function({
189
197
  });
190
198
  return z(() => {
191
199
  i();
192
- const c = l.current;
200
+ const c = f.current;
193
201
  if (!c)
194
202
  return;
195
- const a = new ResizeObserver((h) => {
203
+ const l = new ResizeObserver((v) => {
196
204
  i();
197
205
  });
198
- return a.observe(c), () => {
199
- a.unobserve(c);
206
+ return l.observe(c), () => {
207
+ l.unobserve(c);
200
208
  };
201
- }, [i]), /* @__PURE__ */ x("textarea", { ...u, style: {
209
+ }, [i]), /* @__PURE__ */ x("textarea", { ...r, style: {
202
210
  overflow: "hidden",
203
211
  // these 2 styles aren't needed if the caller sets them in CSS.
204
212
  resize: "none",
205
- ...r,
213
+ ...n,
206
214
  height: o
207
- }, onInput: y, ref: l });
215
+ }, onInput: y, ref: f });
208
216
  });
209
- function ae(e) {
210
- const t = F(), r = e.name ?? t, s = e.valueEquals ?? Object.is, u = e.options ?? [], f = new _(), l = b((o) => {
211
- const d = Number(o.target.value), i = u[d];
217
+ function fe(e) {
218
+ const t = Y(), n = e.name ?? t, u = e.valueEquals ?? Object.is, r = e.options ?? [], a = new _(), f = b((o) => {
219
+ const d = Number(o.target.value), i = r[d];
212
220
  i != null && e.onChange != null && e.onChange({
213
221
  value: i.value,
214
222
  index: d,
@@ -217,50 +225,54 @@ function ae(e) {
217
225
  target: o.target
218
226
  });
219
227
  });
220
- return /* @__PURE__ */ x("ul", { className: e.className, children: u.map((o, d) => {
221
- const { value: i, text: y, key: c, itemClassName: a, labelClassName: h, inputClassName: m, textClassName: n, ...p } = o, g = f.fix(o, d);
222
- return e.value !== void 0 && (p.checked = s(i, e.value)), /* @__PURE__ */ x("li", { className: a, "aria-disabled": p.disabled, children: /* @__PURE__ */ V("label", { className: h, children: [
223
- /* @__PURE__ */ x("input", { ...p, className: m, value: d, onChange: l, name: r, type: "radio" }),
224
- /* @__PURE__ */ x("span", { className: n, children: y })
225
- ] }) }, g);
228
+ return /* @__PURE__ */ x("ul", { className: e.className, children: r.map((o, d) => {
229
+ const { value: i, text: y, key: c, itemClassName: l, labelClassName: v, inputClassName: m, textClassName: s, ...g } = o, N = a.fix(o, d);
230
+ return e.value !== void 0 && (g.checked = u(i, e.value)), /* @__PURE__ */ x("li", { className: l, "aria-disabled": g.disabled, children: /* @__PURE__ */ k("label", { className: v, children: [
231
+ /* @__PURE__ */ x("input", { ...g, className: m, value: d, onChange: f, name: n, type: "radio" }),
232
+ /* @__PURE__ */ x("span", { className: s, children: y })
233
+ ] }) }, N);
226
234
  }) });
227
235
  }
228
- function K() {
229
- return v(null);
236
+ function M() {
237
+ return h(null);
230
238
  }
231
- function I(e) {
239
+ function E(e) {
232
240
  e.current != null && (clearTimeout(e.current), e.current = null);
233
241
  }
234
- const fe = ({
242
+ const oe = ({
235
243
  value: e,
236
244
  onChange: t,
237
- debounce: r = 500,
238
- ...s
245
+ debounce: n = 500,
246
+ ...u
239
247
  }) => {
240
- const u = K(), f = K();
241
- E(() => {
242
- I(f), u.current != null && (u.current.value = e);
248
+ const r = M(), a = M();
249
+ O(() => {
250
+ E(a), r.current != null && (r.current.value = e);
243
251
  }, [e]);
244
- const l = () => {
245
- u.current != null && u.current.value !== e && (t == null || t({ value: u.current.value }));
252
+ const f = () => {
253
+ r.current != null && r.current.value !== e && (t == null || t({ value: r.current.value }));
246
254
  };
247
- return /* @__PURE__ */ x("input", { ...s, ref: u, defaultValue: e, onInput: () => {
248
- I(f), f.current = setTimeout(l, r);
255
+ return /* @__PURE__ */ x("input", { ...u, ref: r, defaultValue: e, onInput: () => {
256
+ E(a), a.current = setTimeout(f, n);
249
257
  }, onBlur: () => {
250
- I(f), l();
258
+ E(a), f();
251
259
  } });
252
260
  };
253
- function le({ onClick: e, ...t }) {
254
- return t.onClick = (r) => {
255
- r.preventDefault(), e == null || e(r);
261
+ function de({ onClick: e, ...t }) {
262
+ return t.onClick = (n) => {
263
+ n.preventDefault(), e == null || e(n);
256
264
  }, /* @__PURE__ */ x("button", { type: "button", ...t });
257
265
  }
266
+ function me({ value: e, defaultValue: t, min: n, max: u, ...r }) {
267
+ return e != null && (r.value = I(e)), t != null && (r.defaultValue = I(t)), n != null && (r.min = I(n)), u != null && (r.max = I(u)), /* @__PURE__ */ x("input", { type: "datetime-local", ...r });
268
+ }
258
269
  export {
259
- le as ActionButton,
260
- fe as DebouncedInput,
261
- Z as Input,
262
- ae as RadioMenu,
263
- se as Select,
264
- ie as TextArea,
265
- ce as TextInput
270
+ de as ActionButton,
271
+ me as DatetimeLocalInput,
272
+ oe as DebouncedInput,
273
+ te as Input,
274
+ fe as RadioMenu,
275
+ ie as Select,
276
+ ae as TextArea,
277
+ le as TextInput
266
278
  };
@@ -1 +1 @@
1
- (function(l,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],s):(l=typeof globalThis<"u"?globalThis:l||self,s(l["@mpen/react-basic-inputs"]={},l.jsxRuntime,l.React))})(this,function(l,s,n){"use strict";var J=Object.defineProperty;var W=(l,s,n)=>s in l?J(l,s,{enumerable:!0,configurable:!0,writable:!0,value:n}):l[s]=n;var w=(l,s,n)=>(W(l,typeof s!="symbol"?s+"":s,n),n);const M=Object.freeze(()=>{});function A(e){return e}let g;typeof window<"u"?g=e=>{n.useDebugValue(e);const t=n.useRef(_);n.useInsertionEffect(()=>{t.current=e},[e]);const r=n.useRef(null);return r.current||(r.current=function(){return t.current.apply(this,arguments)}),r.current}:g=M;function j(e){return g(e)}function _(){throw new Error("INVALID_USE_EVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.")}function k(){var e=n.useRef(!0);return e.current?(e.current=!1,!0):e.current}var N=function(e,t){var r=k();n.useEffect(function(){if(!r)return e()},t)};function q(e,...t){return typeof e=="function"?e(...t):e}function D(e,t){if(e.uniqueKey!=null)return q(e.uniqueKey,e,t);if(typeof e.value=="string")return e.value;if(typeof e.value=="number")return String(e.value);try{const r=JSON.stringify(e.value);if(r!==void 0)return r}catch{}return String(t)}class E{constructor(){w(this,"usedKeys",new Map)}fix(t,r){let f=D(t,r);for(;;){let c=this.usedKeys.get(f);if(c===void 0){this.usedKeys.set(f,1);break}this.usedKeys.set(f,++c),f=`${f}(${c})`}return f}}const V=e=>({value:e,text:String(e),disabled:!0,key:L}),H="3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb",L="1a53f789-77f5-4ce6-a829-b00e563f1ee8";function z({options:e,value:t,invalidValueOption:r=V,onChange:f,placeholder:c,...d}){const x=t==null,y=n.useMemo(()=>t!=null&&e.some(u=>u.value==t),[e,t]),m=n.useMemo(()=>t==null||!r?null:r(t),[r,t]),a=n.useMemo(()=>{if(y)return e;const u=[...e];return x?c!=null&&u.unshift({text:c,hidden:!0,value:null,key:H}):m&&u.push(m),u},[y,e,x,m,c]),h=j(u=>{const b=u.target.selectedIndex,I=a[b];f==null||f({value:I.value,index:b,type:"change",timeStamp:u.timeStamp,target:u.target})}),i=n.useRef(null),o=n.useCallback(()=>{i.current&&(i.current.selectedIndex<0||a[i.current.selectedIndex].value!=t)&&(i.current.selectedIndex=a.findIndex(u=>u.value==t))},[a,t]),v=u=>{i.current=u,o()};N(()=>{o()},[o]);const p=new E;return s.jsx("select",{...d,onChange:h,ref:v,children:a.map((u,b)=>{const{value:I,text:G,uniqueKey:Q,...C}=u,T=p.fix(u,b);return n.createElement("option",{...C,key:T,value:T},u.text)})})}function F(e){return e?String(e).replace(/\s+/gu," ").trim():""}const O=n.forwardRef(function({value:t="",onPaste:r,onChange:f,onInput:c,onBlur:d,formatOnChange:x=A,...y},m){const[a,h]=n.useState(t),i=n.useRef(t),o=n.useRef(!1);N(()=>{h(t),o.current=!1,i.current=t},[t]);const v={type:"text",...y,ref:m,value:a,onChange:p=>{h(p.target.value)},onInput:p=>{o.current=!0,c==null||c(p)},onBlur:p=>{const u=x(a);o.current&&(u!==i.current&&(f==null||f({type:"change",value:u,timeStamp:p.timeStamp,target:p.target}),i.current=u),u!==p.target.value&&h(u)),d==null||d(p)}};return s.jsx("input",{...v})});function $({formatOnChange:e=F,...t}){return s.jsx(O,{formatOnChange:e,...t,type:"text"})}const B=n.forwardRef(function({onInput:t,style:r,initialHeight:f="auto",...c},d){const x=n.useRef(null),[y,m]=n.useState(f),a=n.useCallback(()=>{const i=x.current;if(!i)return;i.style.height=f;const o=`${i.scrollHeight}px`;m(o),i.style.height=o},[f]);n.useImperativeHandle(d,()=>({element:x.current,adjustHeight:a}),[a]);const h=g(i=>{a(),t==null||t(i)});return n.useLayoutEffect(()=>{a();const i=x.current;if(!i)return;const o=new ResizeObserver(v=>{a()});return o.observe(i),()=>{o.unobserve(i)}},[a]),s.jsx("textarea",{...c,style:{overflow:"hidden",resize:"none",...r,height:y},onInput:h,ref:x})});function P(e){const t=n.useId(),r=e.name??t,f=e.valueEquals??Object.is,c=e.options??[],d=new E,x=g(y=>{const m=Number(y.target.value),a=c[m];a!=null&&e.onChange!=null&&e.onChange({value:a.value,index:m,type:"change",timeStamp:y.timeStamp,target:y.target})});return s.jsx("ul",{className:e.className,children:c.map((y,m)=>{const{value:a,text:h,key:i,itemClassName:o,labelClassName:v,inputClassName:p,textClassName:u,...b}=y,I=d.fix(y,m);return e.value!==void 0&&(b.checked=f(a,e.value)),s.jsx("li",{className:o,"aria-disabled":b.disabled,children:s.jsxs("label",{className:v,children:[s.jsx("input",{...b,className:p,value:m,onChange:x,name:r,type:"radio"}),s.jsx("span",{className:u,children:h})]})},I)})})}function K(){return n.useRef(null)}function S(e){e.current!=null&&(clearTimeout(e.current),e.current=null)}const U=({value:e,onChange:t,debounce:r=500,...f})=>{const c=K(),d=K();N(()=>{S(d),c.current!=null&&(c.current.value=e)},[e]);const x=()=>{c.current!=null&&c.current.value!==e&&(t==null||t({value:c.current.value}))};return s.jsx("input",{...f,ref:c,defaultValue:e,onInput:()=>{S(d),d.current=setTimeout(x,r)},onBlur:()=>{S(d),x()}})};function Y({onClick:e,...t}){return t.onClick=r=>{r.preventDefault(),e==null||e(r)},s.jsx("button",{type:"button",...t})}l.ActionButton=Y,l.DebouncedInput=U,l.Input=O,l.RadioMenu=P,l.Select=z,l.TextArea=B,l.TextInput=$,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
1
+ (function(f,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],c):(f=typeof globalThis<"u"?globalThis:f||self,c(f["@mpen/react-basic-inputs"]={},f.jsxRuntime,f.React))})(this,function(f,c,r){"use strict";var Q=Object.defineProperty;var X=(f,c,r)=>c in f?Q(f,c,{enumerable:!0,configurable:!0,writable:!0,value:r}):f[c]=r;var D=(f,c,r)=>(X(f,typeof c!="symbol"?c+"":c,r),r);const A=Object.freeze(()=>{});function j(e){return e}let I;typeof window<"u"?I=e=>{r.useDebugValue(e);const t=r.useRef(k);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}:I=A;function _(e){return I(e)}function k(){throw new Error("INVALID_USE_EVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.")}function V(){var e=r.useRef(!0);return e.current?(e.current=!1,!0):e.current}var E=function(e,t){var n=V();r.useEffect(function(){if(!n)return e()},t)};function $(e,...t){return typeof e=="function"?e(...t):e}function q(e,t){if(e.uniqueKey!=null)return $(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 M{constructor(){D(this,"usedKeys",new Map)}fix(t,n){let s=q(t,n);for(;;){let u=this.usedKeys.get(s);if(u===void 0){this.usedKeys.set(s,1);break}this.usedKeys.set(s,++u),s=`${s}(${u})`}return s}}const L=e=>({value:e,text:String(e),disabled:!0,key:F}),H="3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb",F="1a53f789-77f5-4ce6-a829-b00e563f1ee8";function z({options:e,value:t,invalidValueOption:n=L,onChange:s,placeholder:u,...d}){const y=t==null,m=r.useMemo(()=>t!=null&&e.some(i=>i.value==t),[e,t]),x=r.useMemo(()=>t==null||!n?null:n(t),[n,t]),a=r.useMemo(()=>{if(m)return e;const i=[...e];return y?u!=null&&i.unshift({text:u,hidden:!0,value:null,key:H}):x&&i.push(x),i},[m,e,y,x,u]),h=_(i=>{const p=i.target.selectedIndex,N=a[p];s==null||s({value:N.value,index:p,type:"change",timeStamp:i.timeStamp,target:i.target})}),l=r.useRef(null),o=r.useCallback(()=>{l.current&&(l.current.selectedIndex<0||a[l.current.selectedIndex].value!=t)&&(l.current.selectedIndex=a.findIndex(i=>i.value==t))},[a,t]),v=i=>{l.current=i,o()};E(()=>{o()},[o]);const g=new M;return c.jsx("select",{...d,onChange:h,ref:v,children:a.map((i,p)=>{const{value:N,text:Z,uniqueKey:R,...G}=i,w=g.fix(i,p);return r.createElement("option",{...G,key:w,value:w},i.text)})})}function Y(e){return e?String(e).replace(/\s+/gu," ").trim():""}function b(e,t=2){return String(e).padStart(t,"0")}function S(e){const t=new Date(e);let n=`${t.getFullYear()}-${b(t.getMonth()+1)}-${b(t.getDate())}T${b(t.getHours())}:${b(t.getMinutes())}`;return(t.getSeconds()!==0||t.getMilliseconds()!==0)&&(n+=":"+b(t.getSeconds()),t.getMilliseconds()!==0&&(n+="."+b(t.getMilliseconds(),3))),n}const T=r.forwardRef(function({value:t="",onPaste:n,onChange:s,onInput:u,onBlur:d,formatOnChange:y=j,...m},x){const[a,h]=r.useState(t),l=r.useRef(t),o=r.useRef(!1);E(()=>{h(t),o.current=!1,l.current=t},[t]);const v={type:"text",...m,ref:x,value:a,onChange:g=>{h(g.target.value)},onInput:g=>{o.current=!0,u==null||u(g)},onBlur:g=>{const i=y(a);o.current&&(i!==l.current&&(s==null||s({type:"change",value:i,timeStamp:g.timeStamp,target:g.target}),l.current=i),i!==g.target.value&&h(i)),d==null||d(g)}};return c.jsx("input",{...v})});function B({formatOnChange:e=Y,...t}){return c.jsx(T,{formatOnChange:e,...t,type:"text"})}const P=r.forwardRef(function({onInput:t,style:n,initialHeight:s="auto",...u},d){const y=r.useRef(null),[m,x]=r.useState(s),a=r.useCallback(()=>{const l=y.current;if(!l)return;l.style.height=s;const o=`${l.scrollHeight}px`;x(o),l.style.height=o},[s]);r.useImperativeHandle(d,()=>({element:y.current,adjustHeight:a}),[a]);const h=I(l=>{a(),t==null||t(l)});return r.useLayoutEffect(()=>{a();const l=y.current;if(!l)return;const o=new ResizeObserver(v=>{a()});return o.observe(l),()=>{o.unobserve(l)}},[a]),c.jsx("textarea",{...u,style:{overflow:"hidden",resize:"none",...n,height:m},onInput:h,ref:y})});function U(e){const t=r.useId(),n=e.name??t,s=e.valueEquals??Object.is,u=e.options??[],d=new M,y=I(m=>{const x=Number(m.target.value),a=u[x];a!=null&&e.onChange!=null&&e.onChange({value:a.value,index:x,type:"change",timeStamp:m.timeStamp,target:m.target})});return c.jsx("ul",{className:e.className,children:u.map((m,x)=>{const{value:a,text:h,key:l,itemClassName:o,labelClassName:v,inputClassName:g,textClassName:i,...p}=m,N=d.fix(m,x);return e.value!==void 0&&(p.checked=s(a,e.value)),c.jsx("li",{className:o,"aria-disabled":p.disabled,children:c.jsxs("label",{className:v,children:[c.jsx("input",{...p,className:g,value:x,onChange:y,name:n,type:"radio"}),c.jsx("span",{className:i,children:h})]})},N)})})}function K(){return r.useRef(null)}function O(e){e.current!=null&&(clearTimeout(e.current),e.current=null)}const C=({value:e,onChange:t,debounce:n=500,...s})=>{const u=K(),d=K();E(()=>{O(d),u.current!=null&&(u.current.value=e)},[e]);const y=()=>{u.current!=null&&u.current.value!==e&&(t==null||t({value:u.current.value}))};return c.jsx("input",{...s,ref:u,defaultValue:e,onInput:()=>{O(d),d.current=setTimeout(y,n)},onBlur:()=>{O(d),y()}})};function J({onClick:e,...t}){return t.onClick=n=>{n.preventDefault(),e==null||e(n)},c.jsx("button",{type:"button",...t})}function W({value:e,defaultValue:t,min:n,max:s,...u}){return e!=null&&(u.value=S(e)),t!=null&&(u.defaultValue=S(t)),n!=null&&(u.min=S(n)),s!=null&&(u.max=S(s)),c.jsx("input",{type:"datetime-local",...u})}f.ActionButton=J,f.DatetimeLocalInput=W,f.DebouncedInput=C,f.Input=T,f.RadioMenu=U,f.Select=z,f.TextArea=P,f.TextInput=B,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,11 +1,9 @@
1
1
  {
2
2
  "name": "@mpen/react-basic-inputs",
3
3
  "private": false,
4
- "version": "0.2.7",
4
+ "version": "0.2.8",
5
5
  "type": "module",
6
6
  "files": ["dist"],
7
- "main": "./dist/react-basic-inputs.umd.cjs",
8
- "module": "./dist/react-basic-inputs.js",
9
7
  "exports": {
10
8
  ".": {
11
9
  "import": "./dist/react-basic-inputs.js",
@@ -15,13 +13,15 @@
15
13
  },
16
14
  "scripts": {
17
15
  "dev": "bun run --bun vite",
18
- "build": "bun run --bun vite build",
16
+ "build": "run-p 'build:*'",
17
+ "build:libs": "bun run --bun vite build",
19
18
  "lint": "run-s 'lint:*'",
20
19
  "lint:ts": "bun run --bun tsc",
21
20
  "lint:es": "bun run --bun eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
22
21
  "preview": "bun run --bun vite preview",
23
22
  "_prepublishOnly": "bun run --bun build",
24
- "_publish": "npm publish --access=public"
23
+ "_publish": "npm publish --access=public",
24
+ "build:docs": "typedoc && hg addremove docs"
25
25
  },
26
26
  "peerDependencies": {
27
27
  "react": "^18.2.0"
@@ -42,6 +42,8 @@
42
42
  "react-dom": "^18.3.1",
43
43
  "react-use": "^17.5.0",
44
44
  "sass": "^1.77.2",
45
+ "typedoc": "^0.26.6",
46
+ "typedoc-plugin-missing-exports": "^3.0.0",
45
47
  "typescript": "^5.4.5",
46
48
  "vite": "^5.2.0",
47
49
  "vite-plugin-dts": "^3.9.1"