@mpen/react-basic-inputs 0.2.9 → 0.3.0

package/dist/react-basic-inputs.d.ts

@@ -14,15 +14,24 @@ export declare function ActionButton({ onClick, ...props }: ActionButtonProps):
 
 export declare type ActionButtonProps = RequiredKeys<ComponentPropsWithoutRef<'button'>, 'onClick'>;
 
-export declare function DatetimeLocalInput({ value, defaultValue, min, max, ...props }: DatetimeLocalInputProps): JSX_2.Element;
+export declare function DatetimeLocalInput({ value, defaultValue, min, max, onChange, ...props }: DatetimeLocalInputProps): JSX_2.Element;
+
+export declare type DatetimeLocalInputChangeEvent = {
+    isoString: string | null;
+    value: number | null;
+    date: Date | null;
+};
 
 export declare type DatetimeLocalInputProps = OverrideProps<'input', {
-    min?: number | string | Date;
-    max?: number | string | Date;
-    value?: number | string | Date | null;
-    defaultValue?: number | string | Date;
+    min?: DateValue;
+    max?: DateValue;
+    value?: DateValue | null;
+    defaultValue?: DateValue;
+    onChange?: (ev: DatetimeLocalInputChangeEvent) => void;
 }, 'type'>;
 
+export declare type DateValue = number | string | Date;
+
 export declare const DebouncedInput: FC<DebouncedInputProps>;
 
 export declare type DebouncedInputChangeEvent = {
@@ -85,6 +94,31 @@ export declare type InvalidValueToOption<T> = (value: T) => SelectOption<T>;
  */
 declare type NonNil = {};
 
+export declare type NumberChangeEvent = {
+    value: number;
+    type: 'change';
+    timeStamp: number;
+    target: HtmlInputElement;
+};
+
+export declare type NumberChangeEventHandler = EventCallback<NumberChangeEvent>;
+
+export declare const NumberInput: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange" | "formatOnChange"> & {
+onChange?: InputChangeEventHandler | undefined;
+value?: string | undefined;
+formatOnChange?: ((value: string) => string) | undefined;
+} & RefAttributes<HTMLInputElement>, "ref">, "value" | "onChange" | "placeholder" | "type"> & {
+value?: number | undefined;
+placeholder?: string | number | undefined;
+onChange?: NumberChangeEventHandler | undefined;
+} & RefAttributes<HTMLInputElement>>;
+
+export declare type NumberInputProps = OverrideProps<typeof Input, {
+    value?: number;
+    placeholder?: string | number;
+    onChange?: NumberChangeEventHandler;
+}, 'type'>;
+
 declare type Override<Base, Extension, DeleteKeys extends PropertyKey = never> = Omit<Base, keyof Extension | DeleteKeys> & Extension;
 
 declare type OverrideProps<Base extends ElementType, Extension, DeleteKeys extends PropertyKey = never> = Override<ComponentPropsWithoutRef<Base>, Extension, DeleteKeys>;

package/dist/react-basic-inputs.js

@@ -1,144 +1,155 @@
-var V = Object.defineProperty;
-var $ = (e, t, n) => t in e ? V(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var w = (e, t, n) => ($(e, typeof t != "symbol" ? t + "" : t, n), n);
-import { jsx as x, jsxs as k } from "react/jsx-runtime";
-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";
-const U = Object.freeze(() => {
+var k = Object.defineProperty;
+var H = (e, t, r) => t in e ? k(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var K = (e, t, r) => (H(e, typeof t != "symbol" ? t + "" : t, r), r);
+import { jsx as N, jsxs as L } from "react/jsx-runtime";
+import { useDebugValue as Y, useRef as x, useInsertionEffect as j, useEffect as q, useMemo as E, useCallback as D, createElement as z, forwardRef as M, useState as F, useImperativeHandle as P, useLayoutEffect as U, useId as G } from "react";
+const W = Object.freeze(() => {
 });
 function B(e) {
   return e;
 }
-let b;
-typeof window < "u" ? b = (e) => {
-  H(e);
-  const t = h(P);
-  L(() => {
+let v;
+typeof window < "u" ? v = (e) => {
+  Y(e);
+  const t = x(Q);
+  j(() => {
     t.current = e;
   }, [e]);
-  const n = h(null);
-  return n.current || (n.current = function() {
+  const r = x(null);
+  return r.current || (r.current = function() {
     return t.current.apply(this, arguments);
-  }), n.current;
-} : b = U;
+  }), r.current;
+} : v = W;
 function J(e) {
-  return b(e);
+  return v(e);
 }
-function P() {
+function Q() {
   throw new Error("INVALID_USE_EVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.");
 }
-function W() {
-  var e = h(!0);
+function X() {
+  var e = x(!0);
   return e.current ? (e.current = !1, !0) : e.current;
 }
-var O = function(e, t) {
-  var n = W();
-  j(function() {
-    if (!n)
+var w = function(e, t) {
+  var r = X();
+  q(function() {
+    if (!r)
       return e();
   }, t);
 };
-function C(e, ...t) {
+function Z(e, ...t) {
   return typeof e == "function" ? e(...t) : e;
 }
-function G(e, t) {
+function C(e, t) {
   if (e.uniqueKey != null)
-    return C(e.uniqueKey, e, t);
+    return Z(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;
+    const r = JSON.stringify(e.value);
+    if (r !== void 0)
+      return r;
   } catch {
   }
   return String(t);
 }
-class _ {
+class A {
   constructor() {
-    w(this, "usedKeys", /* @__PURE__ */ new Map());
+    K(this, "usedKeys", /* @__PURE__ */ new Map());
   }
-  fix(t, n) {
-    let u = G(t, n);
+  fix(t, r) {
+    let n = C(t, r);
     for (; ; ) {
-      let r = this.usedKeys.get(u);
-      if (r === void 0) {
-        this.usedKeys.set(u, 1);
+      let u = this.usedKeys.get(n);
+      if (u === void 0) {
+        this.usedKeys.set(n, 1);
         break;
       }
-      this.usedKeys.set(u, ++r), u = `${u}(${r})`;
+      this.usedKeys.set(n, ++u), n = `${n}(${u})`;
     }
-    return u;
+    return n;
   }
 }
-const Q = (e) => ({
+const ee = (e) => ({
   value: e,
   text: String(e),
   disabled: !0,
-  key: Z
-}), X = "3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb", Z = "1a53f789-77f5-4ce6-a829-b00e563f1ee8";
-function ie({
+  key: re
+}), te = "3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb", re = "1a53f789-77f5-4ce6-a829-b00e563f1ee8";
+function de({
   options: e,
   value: t,
-  invalidValueOption: n = Q,
-  onChange: u,
-  placeholder: r,
-  ...a
+  invalidValueOption: r = ee,
+  onChange: n,
+  placeholder: u,
+  ...c
 }) {
-  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(() => {
-    if (o)
+  const i = t == null, l = E(() => t != null && e.some((s) => s.value == t), [e, t]), o = E(() => t == null || !r ? null : r(t), [r, t]), a = E(() => {
+    if (l)
       return e;
     const s = [...e];
-    return f ? r != null && s.unshift({ text: r, hidden: !0, value: null, key: X }) : d && s.push(d), s;
-  }, [o, e, f, d, r]), y = J((s) => {
-    const g = s.target.selectedIndex, N = i[g];
-    u == null || u({
-      value: N.value,
+    return i ? u != null && s.unshift({ text: u, hidden: !0, value: null, key: te }) : o && s.push(o), s;
+  }, [l, e, i, o, u]), g = J((s) => {
+    const I = s.target.selectedIndex, S = a[I];
+    n == null || n({
+      value: S.value,
       // option: opt,
       // event: ev,
-      index: g,
+      index: I,
       type: "change",
       timeStamp: s.timeStamp,
       target: s.target
     });
-  }), c = h(null), l = D(() => {
-    c.current && (c.current.selectedIndex < 0 || i[c.current.selectedIndex].value != t) && (c.current.selectedIndex = i.findIndex((s) => s.value == t));
-  }, [i, t]), v = (s) => {
-    c.current = s, l();
+  }), f = x(null), d = D(() => {
+    f.current && (f.current.selectedIndex < 0 || a[f.current.selectedIndex].value != t) && (f.current.selectedIndex = a.findIndex((s) => s.value == t));
+  }, [a, t]), y = (s) => {
+    f.current = s, d();
   };
-  O(() => {
-    l();
-  }, [l]);
-  const m = new _();
-  return /* @__PURE__ */ x("select", { ...a, onChange: y, ref: v, children: i.map((s, g) => {
-    const { value: N, text: ne, uniqueKey: re, ...A } = s, K = m.fix(s, g);
-    return /* @__PURE__ */ q("option", { ...A, key: K, value: K }, s.text);
+  w(() => {
+    d();
+  }, [d]);
+  const m = new A();
+  return /* @__PURE__ */ N("select", { ...c, onChange: g, ref: y, children: a.map((s, I) => {
+    const { value: S, text: le, uniqueKey: ie, ...R } = s, _ = m.fix(s, I);
+    return /* @__PURE__ */ z("option", { ...R, key: _, value: _ }, s.text);
   }) });
 }
-function ee(e) {
+function ne(e) {
   return e ? String(e).replace(/\s+/gu, " ").trim() : "";
 }
-function p(e, t = 2) {
-  return String(e).padStart(t, "0");
+function ue(e) {
+  try {
+    return e.toLocaleString("en-US", { useGrouping: !1, maximumFractionDigits: 20 });
+  } catch {
+    return e.toFixed(14).replace(/\.?0+$/, "");
+  }
 }
-function I(e) {
-  const t = new Date(e);
-  let n = `${t.getFullYear()}-${p(t.getMonth() + 1)}-${p(t.getDate())}T${p(t.getHours())}:${p(t.getMinutes())}`;
-  return (t.getSeconds() !== 0 || t.getMilliseconds() !== 0) && (n += ":" + p(t.getSeconds()), t.getMilliseconds() !== 0 && (n += "." + p(t.getMilliseconds(), 3))), n;
+function se(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 ? "-∞" : ue(e);
+}
+function ce(e) {
+  return e ? V(Number.parseFloat(e)) : "";
+}
+function b(e, t = 2) {
+  return String(e).padStart(t, "0");
 }
-const te = R(function({ value: t = "", onPaste: n, onChange: u, onInput: r, onBlur: a, formatOnChange: f = B, ...o }, d) {
-  const [i, y] = T(t), c = h(t), l = h(!1);
-  O(() => {
-    y(t), l.current = !1, c.current = t;
+const p = M(function({ value: t = "", onPaste: r, onChange: n, onInput: u, onBlur: c, formatOnChange: i = B, ...l }, o) {
+  const [a, g] = F(t), f = x(t), d = x(!1);
+  w(() => {
+    g(t), d.current = !1, f.current = t;
   }, [t]);
-  const v = {
+  const y = {
     type: "text",
-    ...o,
-    ref: d,
-    value: i,
+    ...l,
+    ref: o,
+    value: a,
     onChange: (m) => {
-      y(m.target.value);
+      g(m.target.value);
     },
     // TODO: fire a change event onPaste ?
     // formatOnPaste?
@@ -157,122 +168,164 @@ const te = R(function({ value: t = "", onPaste: n, onChange: u, onInput: r, onBl
     //     // setCurrentValue(formatOnChange(ev.clipboardData.getData('text/plain')))
     // },
     onInput: (m) => {
-      l.current = !0, r == null || r(m);
+      d.current = !0, u == null || u(m);
     },
     onBlur: (m) => {
-      const s = f(i);
-      l.current && (s !== c.current && (u == null || u({
+      const s = i(a);
+      d.current && (s !== f.current && (n == null || n({
         type: "change",
         value: s,
         timeStamp: m.timeStamp,
         target: m.target
-      }), c.current = s), s !== m.target.value && y(s)), a == null || a(m);
+      }), f.current = s), s !== m.target.value && g(s)), c == null || c(m);
     }
   };
-  return /* @__PURE__ */ x("input", { ...v });
+  return /* @__PURE__ */ N("input", { ...y });
 });
-function le({ formatOnChange: e = ee, ...t }) {
-  return /* @__PURE__ */ x(te, { formatOnChange: e, ...t, type: "text" });
+function me({ formatOnChange: e = ne, ...t }) {
+  return /* @__PURE__ */ N(p, { formatOnChange: e, ...t, type: "text" });
 }
-const ae = R(function({
+const Ne = M(function({
   onInput: t,
-  style: n,
-  initialHeight: u = "auto",
-  ...r
-}, a) {
-  const f = h(null), [o, d] = T(u), i = D(() => {
-    const c = f.current;
-    if (!c)
+  style: r,
+  initialHeight: n = "auto",
+  ...u
+}, c) {
+  const i = x(null), [l, o] = F(n), a = D(() => {
+    const f = i.current;
+    if (!f)
       return;
-    c.style.height = u;
-    const l = `${c.scrollHeight}px`;
-    d(l), c.style.height = l;
-  }, [u]);
-  F(a, () => ({
-    element: f.current,
-    adjustHeight: i
-  }), [i]);
-  const y = b((c) => {
-    i(), t == null || t(c);
+    f.style.height = n;
+    const d = `${f.scrollHeight}px`;
+    o(d), f.style.height = d;
+  }, [n]);
+  P(c, () => ({
+    element: i.current,
+    adjustHeight: a
+  }), [a]);
+  const g = v((f) => {
+    a(), t == null || t(f);
   });
-  return z(() => {
-    i();
-    const c = f.current;
-    if (!c)
+  return U(() => {
+    a();
+    const f = i.current;
+    if (!f)
       return;
-    const l = new ResizeObserver((v) => {
-      i();
+    const d = new ResizeObserver((y) => {
+      a();
     });
-    return l.observe(c), () => {
-      l.unobserve(c);
+    return d.observe(f), () => {
+      d.unobserve(f);
     };
-  }, [i]), /* @__PURE__ */ x("textarea", { ...r, style: {
+  }, [a]), /* @__PURE__ */ N("textarea", { ...u, style: {
     overflow: "hidden",
     // these 2 styles aren't needed if the caller sets them in CSS.
     resize: "none",
-    ...n,
-    height: o
-  }, onInput: y, ref: f });
+    ...r,
+    height: l
+  }, onInput: g, ref: i });
 });
-function fe(e) {
-  const t = Y(), n = e.name ?? t, u = e.valueEquals ?? Object.is, r = e.options ?? [], a = new _(), f = b((o) => {
-    const d = Number(o.target.value), i = r[d];
-    i != null && e.onChange != null && e.onChange({
-      value: i.value,
-      index: d,
+function ge(e) {
+  const t = G(), r = e.name ?? t, n = e.valueEquals ?? Object.is, u = e.options ?? [], c = new A(), i = v((l) => {
+    const o = Number(l.target.value), a = u[o];
+    a != null && e.onChange != null && e.onChange({
+      value: a.value,
+      index: o,
       type: "change",
-      timeStamp: o.timeStamp,
-      target: o.target
+      timeStamp: l.timeStamp,
+      target: l.target
     });
   });
-  return /* @__PURE__ */ x("ul", { className: e.className, children: r.map((o, d) => {
-    const { value: i, text: y, key: c, itemClassName: l, labelClassName: v, inputClassName: m, textClassName: s, ...g } = o, N = a.fix(o, d);
-    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: [
-      /* @__PURE__ */ x("input", { ...g, className: m, value: d, onChange: f, name: n, type: "radio" }),
-      /* @__PURE__ */ x("span", { className: s, children: y })
-    ] }) }, N);
+  return /* @__PURE__ */ N("ul", { className: e.className, children: u.map((l, o) => {
+    const { value: a, text: g, key: f, itemClassName: d, labelClassName: y, inputClassName: m, textClassName: s, ...I } = l, S = c.fix(l, o);
+    return e.value !== void 0 && (I.checked = n(a, e.value)), /* @__PURE__ */ N("li", { className: d, "aria-disabled": I.disabled, children: /* @__PURE__ */ L("label", { className: y, children: [
+      /* @__PURE__ */ N("input", { ...I, className: m, value: o, onChange: i, name: r, type: "radio" }),
+      /* @__PURE__ */ N("span", { className: s, children: g })
+    ] }) }, S);
   }) });
 }
-function M() {
-  return h(null);
+function $() {
+  return x(null);
 }
-function E(e) {
+function O(e) {
   e.current != null && (clearTimeout(e.current), e.current = null);
 }
-const oe = ({
+const Ie = ({
   value: e,
   onChange: t,
-  debounce: n = 500,
-  ...u
+  debounce: r = 500,
+  ...n
 }) => {
-  const r = M(), a = M();
-  O(() => {
-    E(a), r.current != null && (r.current.value = e);
+  const u = $(), c = $();
+  w(() => {
+    O(c), u.current != null && (u.current.value = e);
   }, [e]);
-  const f = () => {
-    r.current != null && r.current.value !== e && (t == null || t({ value: r.current.value }));
+  const i = () => {
+    u.current != null && u.current.value !== e && (t == null || t({ value: u.current.value }));
   };
-  return /* @__PURE__ */ x("input", { ...u, ref: r, defaultValue: e, onInput: () => {
-    E(a), a.current = setTimeout(f, n);
+  return /* @__PURE__ */ N("input", { ...n, ref: u, defaultValue: e, onInput: () => {
+    O(c), c.current = setTimeout(i, r);
   }, onBlur: () => {
-    E(a), f();
+    O(c), i();
   } });
 };
-function de({ onClick: e, ...t }) {
-  return t.onClick = (n) => {
-    n.preventDefault(), e == null || e(n);
-  }, /* @__PURE__ */ x("button", { type: "button", ...t });
+function be({ onClick: e, ...t }) {
+  return t.onClick = (r) => {
+    r.preventDefault(), e == null || e(r);
+  }, /* @__PURE__ */ N("button", { type: "button", ...t });
+}
+function h(e, t) {
+  const r = new Date(e);
+  let n = `${r.getFullYear()}-${b(r.getMonth() + 1)}-${b(r.getDate())}T${b(r.getHours())}:${b(r.getMinutes())}`;
+  const u = (t == null ? void 0 : t.milliseconds) || (t == null ? void 0 : t.milliseconds) == null && r.getMilliseconds() !== 0;
+  if (((t == null ? void 0 : t.seconds) || (t == null ? void 0 : t.seconds) == null && (r.getSeconds() !== 0 || u)) && (n += `:${b(r.getSeconds())}`, u && (n += `.${b(r.getMilliseconds(), 3)}`)), t != null && t.offset) {
+    const i = -r.getTimezoneOffset(), l = i >= 0 ? "+" : "-", o = Math.floor(Math.abs(i) / 60), a = Math.abs(i) % 60;
+    n += `${l}${b(o)}:${b(a)}`;
+  }
+  return n;
 }
-function me({ value: e, defaultValue: t, min: n, max: u, ...r }) {
-  return e !== void 0 && (r.value = e === null ? "" : 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 });
+const T = { offset: !1 };
+function xe({ value: e, defaultValue: t, min: r, max: n, onChange: u, ...c }) {
+  return e !== void 0 && (c.value = e === null ? "" : h(e, T)), t != null && (c.defaultValue = h(t, T)), r != null && (c.min = h(r, T)), n != null && (c.max = h(n, T)), u != null && (c.onChange = (i) => {
+    if (i.currentTarget.value.length) {
+      const l = new Date(i.currentTarget.valueAsNumber);
+      u({
+        isoString: h(l, { offset: !0 }),
+        // isoString: date.toISOString(),
+        value: l.valueOf(),
+        date: l
+      });
+    } else
+      u({
+        // isoStringWithOffset: null,
+        isoString: null,
+        value: null,
+        date: null
+      });
+  }), /* @__PURE__ */ N("input", { type: "datetime-local", ...c });
 }
+const ye = M(function({ placeholder: t, formatOnChange: r = ce, onChange: n, value: u, ...c }, i) {
+  const l = {
+    inputMode: "decimal",
+    ...c,
+    formatOnChange: r,
+    type: "number"
+  };
+  return u !== void 0 && (l.value = V(u)), t != null && (l.placeholder = String(t)), n != null && (l.onChange = (o) => {
+    n({
+      ...o,
+      value: se(o.value)
+    });
+  }), /* @__PURE__ */ N(p, { ...l, ref: i });
+});
 export {
-  de as ActionButton,
-  me as DatetimeLocalInput,
-  oe as DebouncedInput,
-  te as Input,
-  fe as RadioMenu,
-  ie as Select,
-  ae as TextArea,
-  le as TextInput
+  be as ActionButton,
+  xe as DatetimeLocalInput,
+  Ie as DebouncedInput,
+  p as Input,
+  ye as NumberInput,
+  ge as RadioMenu,
+  de as Select,
+  Ne as TextArea,
+  me as TextInput
 };

package/dist/react-basic-inputs.umd.cjs

@@ -1 +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!==void 0&&(u.value=e===null?"":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"})});
+(function(o,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):(o=typeof globalThis<"u"?globalThis:o||self,c(o["@mpen/react-basic-inputs"]={},o.jsxRuntime,o.React))})(this,function(o,c,s){"use strict";var re=Object.defineProperty;var ne=(o,c,s)=>c in o?re(o,c,{enumerable:!0,configurable:!0,writable:!0,value:s}):o[c]=s;var $=(o,c,s)=>(ne(o,typeof c!="symbol"?c+"":c,s),s);const p=Object.freeze(()=>{});function F(e){return e}let S;typeof window<"u"?S=e=>{s.useDebugValue(e);const t=s.useRef(j);s.useInsertionEffect(()=>{t.current=e},[e]);const r=s.useRef(null);return r.current||(r.current=function(){return t.current.apply(this,arguments)}),r.current}:S=p;function V(e){return S(e)}function j(){throw new Error("INVALID_USE_EVENT_INVOCATION: the callback from useEvent cannot be invoked before the component has mounted.")}function k(){var e=s.useRef(!0);return e.current?(e.current=!1,!0):e.current}var O=function(e,t){var r=k();s.useEffect(function(){if(!r)return e()},t)};function L(e,...t){return typeof e=="function"?e(...t):e}function q(e,t){if(e.uniqueKey!=null)return L(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 D{constructor(){$(this,"usedKeys",new Map)}fix(t,r){let n=q(t,r);for(;;){let u=this.usedKeys.get(n);if(u===void 0){this.usedKeys.set(n,1);break}this.usedKeys.set(n,++u),n=`${n}(${u})`}return n}}const H=e=>({value:e,text:String(e),disabled:!0,key:P}),Y="3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb",P="1a53f789-77f5-4ce6-a829-b00e563f1ee8";function z({options:e,value:t,invalidValueOption:r=H,onChange:n,placeholder:u,...l}){const a=t==null,i=s.useMemo(()=>t!=null&&e.some(f=>f.value==t),[e,t]),N=s.useMemo(()=>t==null||!r?null:r(t),[r,t]),d=s.useMemo(()=>{if(i)return e;const f=[...e];return a?u!=null&&f.unshift({text:u,hidden:!0,value:null,key:Y}):N&&f.push(N),f},[i,e,a,N,u]),g=V(f=>{const x=f.target.selectedIndex,E=d[x];n==null||n({value:E.value,index:x,type:"change",timeStamp:f.timeStamp,target:f.target})}),m=s.useRef(null),I=s.useCallback(()=>{m.current&&(m.current.selectedIndex<0||d[m.current.selectedIndex].value!=t)&&(m.current.selectedIndex=d.findIndex(f=>f.value==t))},[d,t]),h=f=>{m.current=f,I()};O(()=>{I()},[I]);const b=new D;return c.jsx("select",{...l,onChange:g,ref:h,children:d.map((f,x)=>{const{value:E,text:ue,uniqueKey:se,...te}=f,K=b.fix(f,x);return s.createElement("option",{...te,key:K,value:K},f.text)})})}function U(e){return e?String(e).replace(/\s+/gu," ").trim():""}function G(e){try{return e.toLocaleString("en-US",{useGrouping:!1,maximumFractionDigits:20})}catch{return e.toFixed(14).replace(/\.?0+$/,"")}}function B(e){return e?e==="∞"||e==="+∞"?Number.POSITIVE_INFINITY:e==="-∞"?Number.NEGATIVE_INFINITY:Number.parseFloat(e):Number.NaN}function _(e){return Number.isNaN(e)?"":e===Number.POSITIVE_INFINITY?"∞":e===Number.NEGATIVE_INFINITY?"-∞":G(e)}function W(e){return e?_(Number.parseFloat(e)):""}function y(e,t=2){return String(e).padStart(t,"0")}const M=s.forwardRef(function({value:t="",onPaste:r,onChange:n,onInput:u,onBlur:l,formatOnChange:a=F,...i},N){const[d,g]=s.useState(t),m=s.useRef(t),I=s.useRef(!1);O(()=>{g(t),I.current=!1,m.current=t},[t]);const h={type:"text",...i,ref:N,value:d,onChange:b=>{g(b.target.value)},onInput:b=>{I.current=!0,u==null||u(b)},onBlur:b=>{const f=a(d);I.current&&(f!==m.current&&(n==null||n({type:"change",value:f,timeStamp:b.timeStamp,target:b.target}),m.current=f),f!==b.target.value&&g(f)),l==null||l(b)}};return c.jsx("input",{...h})});function J({formatOnChange:e=U,...t}){return c.jsx(M,{formatOnChange:e,...t,type:"text"})}const C=s.forwardRef(function({onInput:t,style:r,initialHeight:n="auto",...u},l){const a=s.useRef(null),[i,N]=s.useState(n),d=s.useCallback(()=>{const m=a.current;if(!m)return;m.style.height=n;const I=`${m.scrollHeight}px`;N(I),m.style.height=I},[n]);s.useImperativeHandle(l,()=>({element:a.current,adjustHeight:d}),[d]);const g=S(m=>{d(),t==null||t(m)});return s.useLayoutEffect(()=>{d();const m=a.current;if(!m)return;const I=new ResizeObserver(h=>{d()});return I.observe(m),()=>{I.unobserve(m)}},[d]),c.jsx("textarea",{...u,style:{overflow:"hidden",resize:"none",...r,height:i},onInput:g,ref:a})});function Q(e){const t=s.useId(),r=e.name??t,n=e.valueEquals??Object.is,u=e.options??[],l=new D,a=S(i=>{const N=Number(i.target.value),d=u[N];d!=null&&e.onChange!=null&&e.onChange({value:d.value,index:N,type:"change",timeStamp:i.timeStamp,target:i.target})});return c.jsx("ul",{className:e.className,children:u.map((i,N)=>{const{value:d,text:g,key:m,itemClassName:I,labelClassName:h,inputClassName:b,textClassName:f,...x}=i,E=l.fix(i,N);return e.value!==void 0&&(x.checked=n(d,e.value)),c.jsx("li",{className:I,"aria-disabled":x.disabled,children:c.jsxs("label",{className:h,children:[c.jsx("input",{...x,className:b,value:N,onChange:a,name:r,type:"radio"}),c.jsx("span",{className:f,children:g})]})},E)})})}function A(){return s.useRef(null)}function w(e){e.current!=null&&(clearTimeout(e.current),e.current=null)}const X=({value:e,onChange:t,debounce:r=500,...n})=>{const u=A(),l=A();O(()=>{w(l),u.current!=null&&(u.current.value=e)},[e]);const a=()=>{u.current!=null&&u.current.value!==e&&(t==null||t({value:u.current.value}))};return c.jsx("input",{...n,ref:u,defaultValue:e,onInput:()=>{w(l),l.current=setTimeout(a,r)},onBlur:()=>{w(l),a()}})};function Z({onClick:e,...t}){return t.onClick=r=>{r.preventDefault(),e==null||e(r)},c.jsx("button",{type:"button",...t})}function v(e,t){const r=new Date(e);let n=`${r.getFullYear()}-${y(r.getMonth()+1)}-${y(r.getDate())}T${y(r.getHours())}:${y(r.getMinutes())}`;const u=(t==null?void 0:t.milliseconds)||(t==null?void 0:t.milliseconds)==null&&r.getMilliseconds()!==0;if(((t==null?void 0:t.seconds)||(t==null?void 0:t.seconds)==null&&(r.getSeconds()!==0||u))&&(n+=`:${y(r.getSeconds())}`,u&&(n+=`.${y(r.getMilliseconds(),3)}`)),t!=null&&t.offset){const a=-r.getTimezoneOffset(),i=a>=0?"+":"-",N=Math.floor(Math.abs(a)/60),d=Math.abs(a)%60;n+=`${i}${y(N)}:${y(d)}`}return n}const T={offset:!1};function R({value:e,defaultValue:t,min:r,max:n,onChange:u,...l}){return e!==void 0&&(l.value=e===null?"":v(e,T)),t!=null&&(l.defaultValue=v(t,T)),r!=null&&(l.min=v(r,T)),n!=null&&(l.max=v(n,T)),u!=null&&(l.onChange=a=>{if(a.currentTarget.value.length){const i=new Date(a.currentTarget.valueAsNumber);u({isoString:v(i,{offset:!0}),value:i.valueOf(),date:i})}else u({isoString:null,value:null,date:null})}),c.jsx("input",{type:"datetime-local",...l})}const ee=s.forwardRef(function({placeholder:t,formatOnChange:r=W,onChange:n,value:u,...l},a){const i={inputMode:"decimal",...l,formatOnChange:r,type:"number"};return u!==void 0&&(i.value=_(u)),t!=null&&(i.placeholder=String(t)),n!=null&&(i.onChange=N=>{n({...N,value:B(N.value)})}),c.jsx(M,{...i,ref:a})});o.ActionButton=Z,o.DatetimeLocalInput=R,o.DebouncedInput=X,o.Input=M,o.NumberInput=ee,o.RadioMenu=Q,o.Select=z,o.TextArea=C,o.TextInput=J,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mpen/react-basic-inputs",
   "private": false,
-  "version": "0.2.9",
+  "version": "0.3.0",
   "type": "module",
   "files": ["dist"],
   "exports": {