@mpen/react-basic-inputs - npm Package Compare versions

Comparing version 0.2.9 to 0.2.10

dist/react-basic-inputs.d.ts

@@ -88,2 +88,27 @@ import { ComponentPropsWithoutRef } from 'react';
 
+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;
@@ -90,0 +115,0 @@

dist/react-basic-inputs.js

@@ -1,46 +0,46 @@
-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";
+var $ = Object.defineProperty;
+var k = (e, t, r) => t in e ? $(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var F = (e, t, r) => (k(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 g, useInsertionEffect as H, useEffect as j, useMemo as S, useCallback as _, createElement as q, forwardRef as T, useState as w, useImperativeHandle as z, useLayoutEffect as G, useId as P } from "react";
 const U = Object.freeze(() => {
 });
-function B(e) {
+function W(e) {
   return e;
 }
-let b;
-typeof window < "u" ? b = (e) => {
-  H(e);
-  const t = h(P);
-  L(() => {
+let p;
+typeof window < "u" ? p = (e) => {
+  Y(e);
+  const t = g(J);
+  H(() => {
     t.current = e;
   }, [e]);
-  const n = h(null);
-  return n.current || (n.current = function() {
+  const r = g(null);
+  return r.current || (r.current = function() {
     return t.current.apply(this, arguments);
-  }), n.current;
-} : b = U;
-function J(e) {
-  return b(e);
+  }), r.current;
+} : p = U;
+function B(e) {
+  return p(e);
 }
-function P() {
+function J() {
   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 C() {
+  var e = g(!0);
   return e.current ? (e.current = !1, !0) : e.current;
 }
 var O = function(e, t) {
-  var n = W();
+  var r = C();
   j(function() {
-    if (!n)
+    if (!r)
       return e();
   }, t);
 };
-function C(e, ...t) {
+function Q(e, ...t) {
   return typeof e == "function" ? e(...t) : e;
 }
-function G(e, t) {
+function X(e, t) {
   if (e.uniqueKey != null)
-    return C(e.uniqueKey, e, t);
+    return Q(e.uniqueKey, e, t);
   if (typeof e.value == "string")
@@ -51,5 +51,5 @@ return 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 {
@@ -59,15 +59,15 @@ }
 }
-class _ {
+class V {
   constructor() {
-    w(this, "usedKeys", /* @__PURE__ */ new Map());
+    F(this, "usedKeys", /* @__PURE__ */ new Map());
   }
-  fix(t, n) {
-    let u = G(t, n);
+  fix(t, r) {
+    let u = X(t, r);
     for (; ; ) {
-      let r = this.usedKeys.get(u);
-      if (r === void 0) {
+      let n = this.usedKeys.get(u);
+      if (n === void 0) {
         this.usedKeys.set(u, 1);
         break;
       }
-      this.usedKeys.set(u, ++r), u = `${u}(${r})`;
+      this.usedKeys.set(u, ++n), u = `${u}(${n})`;
     }
@@ -77,28 +77,28 @@ return u;
 }
-const Q = (e) => ({
+const Z = (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: te
+}), ee = "3c9369b7-0a5e-46ea-93c2-e8b9fec67fdb", te = "1a53f789-77f5-4ce6-a829-b00e563f1ee8";
+function oe({
   options: e,
   value: t,
-  invalidValueOption: n = Q,
+  invalidValueOption: r = Z,
   onChange: u,
-  placeholder: r,
+  placeholder: n,
   ...a
 }) {
-  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 f = t == null, l = S(() => t != null && e.some((s) => s.value == t), [e, t]), o = S(() => t == null || !r ? null : r(t), [r, t]), c = S(() => {
+    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];
+    return f ? n != null && s.unshift({ text: n, hidden: !0, value: null, key: ee }) : o && s.push(o), s;
+  }, [l, e, f, o, n]), x = B((s) => {
+    const I = s.target.selectedIndex, v = c[I];
     u == null || u({
-      value: N.value,
+      value: v.value,
       // option: opt,
       // event: ev,
-      index: g,
+      index: I,
       type: "change",
@@ -108,39 +108,55 @@ timeStamp: s.timeStamp,
     });
-  }), 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();
+  }), i = g(null), d = _(() => {
+    i.current && (i.current.selectedIndex < 0 || c[i.current.selectedIndex].value != t) && (i.current.selectedIndex = c.findIndex((s) => s.value == t));
+  }, [c, t]), b = (s) => {
+    i.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);
+    d();
+  }, [d]);
+  const m = new V();
+  return /* @__PURE__ */ N("select", { ...a, onChange: x, ref: b, children: c.map((s, I) => {
+    const { value: v, text: ie, uniqueKey: ce, ...R } = s, K = m.fix(s, I);
+    return /* @__PURE__ */ q("option", { ...R, key: K, value: K }, s.text);
   }) });
 }
-function ee(e) {
+function re(e) {
   return e ? String(e).replace(/\s+/gu, " ").trim() : "";
 }
-function p(e, t = 2) {
+function ne(e) {
+  try {
+    return e.toLocaleString("en-US", { useGrouping: !1, maximumFractionDigits: 20 });
+  } catch {
+    return e.toFixed(14).replace(/\.?0+$/, "");
+  }
+}
+function ue(e) {
+  return e ? e === "∞" || e === "+∞" ? Number.POSITIVE_INFINITY : e === "-∞" ? Number.NEGATIVE_INFINITY : Number.parseFloat(e) : Number.NaN;
+}
+function D(e) {
+  return Number.isNaN(e) ? "" : e === Number.POSITIVE_INFINITY ? "∞" : e === Number.NEGATIVE_INFINITY ? "-∞" : ne(e);
+}
+function se(e) {
+  return e ? D(Number.parseFloat(e)) : "";
+}
+function y(e, t = 2) {
   return String(e).padStart(t, "0");
 }
-function I(e) {
+function h(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;
+  let r = `${t.getFullYear()}-${y(t.getMonth() + 1)}-${y(t.getDate())}T${y(t.getHours())}:${y(t.getMinutes())}`;
+  return (t.getSeconds() !== 0 || t.getMilliseconds() !== 0) && (r += ":" + y(t.getSeconds()), t.getMilliseconds() !== 0 && (r += "." + y(t.getMilliseconds(), 3))), r;
 }
-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);
+const A = T(function({ value: t = "", onPaste: r, onChange: u, onInput: n, onBlur: a, formatOnChange: f = W, ...l }, o) {
+  const [c, x] = w(t), i = g(t), d = g(!1);
   O(() => {
-    y(t), l.current = !1, c.current = t;
+    x(t), d.current = !1, i.current = t;
   }, [t]);
-  const v = {
+  const b = {
     type: "text",
-    ...o,
-    ref: d,
-    value: i,
+    ...l,
+    ref: o,
+    value: c,
     onChange: (m) => {
-      y(m.target.value);
+      x(m.target.value);
     },
@@ -164,7 +180,7 @@ // TODO: fire a change event onPaste ?
     onInput: (m) => {
-      l.current = !0, r == null || r(m);
+      d.current = !0, n == null || n(m);
     },
     onBlur: (m) => {
-      const s = f(i);
-      l.current && (s !== c.current && (u == null || u({
+      const s = f(c);
+      d.current && (s !== i.current && (u == null || u({
         type: "change",
@@ -174,71 +190,71 @@ value: s,
         target: m.target
-      }), c.current = s), s !== m.target.value && y(s)), a == null || a(m);
+      }), i.current = s), s !== m.target.value && x(s)), a == null || a(m);
     }
   };
-  return /* @__PURE__ */ x("input", { ...v });
+  return /* @__PURE__ */ N("input", { ...b });
 });
-function le({ formatOnChange: e = ee, ...t }) {
-  return /* @__PURE__ */ x(te, { formatOnChange: e, ...t, type: "text" });
+function de({ formatOnChange: e = re, ...t }) {
+  return /* @__PURE__ */ N(A, { formatOnChange: e, ...t, type: "text" });
 }
-const ae = R(function({
+const me = T(function({
   onInput: t,
-  style: n,
+  style: r,
   initialHeight: u = "auto",
-  ...r
+  ...n
 }, a) {
-  const f = h(null), [o, d] = T(u), i = D(() => {
-    const c = f.current;
-    if (!c)
+  const f = g(null), [l, o] = w(u), c = _(() => {
+    const i = f.current;
+    if (!i)
       return;
-    c.style.height = u;
-    const l = `${c.scrollHeight}px`;
-    d(l), c.style.height = l;
+    i.style.height = u;
+    const d = `${i.scrollHeight}px`;
+    o(d), i.style.height = d;
   }, [u]);
-  F(a, () => ({
+  z(a, () => ({
     element: f.current,
-    adjustHeight: i
-  }), [i]);
-  const y = b((c) => {
-    i(), t == null || t(c);
+    adjustHeight: c
+  }), [c]);
+  const x = p((i) => {
+    c(), t == null || t(i);
   });
-  return z(() => {
-    i();
-    const c = f.current;
-    if (!c)
+  return G(() => {
+    c();
+    const i = f.current;
+    if (!i)
       return;
-    const l = new ResizeObserver((v) => {
-      i();
+    const d = new ResizeObserver((b) => {
+      c();
     });
-    return l.observe(c), () => {
-      l.unobserve(c);
+    return d.observe(i), () => {
+      d.unobserve(i);
     };
-  }, [i]), /* @__PURE__ */ x("textarea", { ...r, style: {
+  }, [c]), /* @__PURE__ */ N("textarea", { ...n, 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: x, ref: f });
 });
-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 Ne(e) {
+  const t = P(), r = e.name ?? t, u = e.valueEquals ?? Object.is, n = e.options ?? [], a = new V(), f = p((l) => {
+    const o = Number(l.target.value), c = n[o];
+    c != null && e.onChange != null && e.onChange({
+      value: c.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: n.map((l, o) => {
+    const { value: c, text: x, key: i, itemClassName: d, labelClassName: b, inputClassName: m, textClassName: s, ...I } = l, v = a.fix(l, o);
+    return e.value !== void 0 && (I.checked = u(c, e.value)), /* @__PURE__ */ N("li", { className: d, "aria-disabled": I.disabled, children: /* @__PURE__ */ L("label", { className: b, children: [
+      /* @__PURE__ */ N("input", { ...I, className: m, value: o, onChange: f, name: r, type: "radio" }),
+      /* @__PURE__ */ N("span", { className: s, children: x })
+    ] }) }, v);
   }) });
 }
 function M() {
-  return h(null);
+  return g(null);
 }
@@ -248,17 +264,17 @@ function E(e) {
 }
-const oe = ({
+const xe = ({
   value: e,
   onChange: t,
-  debounce: n = 500,
+  debounce: r = 500,
   ...u
 }) => {
-  const r = M(), a = M();
+  const n = M(), a = M();
   O(() => {
-    E(a), r.current != null && (r.current.value = e);
+    E(a), n.current != null && (n.current.value = e);
   }, [e]);
   const f = () => {
-    r.current != null && r.current.value !== e && (t == null || t({ value: r.current.value }));
+    n.current != null && n.current.value !== e && (t == null || t({ value: n.current.value }));
   };
-  return /* @__PURE__ */ x("input", { ...u, ref: r, defaultValue: e, onInput: () => {
-    E(a), a.current = setTimeout(f, n);
+  return /* @__PURE__ */ N("input", { ...u, ref: n, defaultValue: e, onInput: () => {
+    E(a), a.current = setTimeout(f, r);
   }, onBlur: () => {
@@ -268,19 +284,34 @@ E(a), f();
 };
-function de({ onClick: e, ...t }) {
-  return t.onClick = (n) => {
-    n.preventDefault(), e == null || e(n);
-  }, /* @__PURE__ */ x("button", { type: "button", ...t });
+function Ie({ onClick: e, ...t }) {
+  return t.onClick = (r) => {
+    r.preventDefault(), e == null || e(r);
+  }, /* @__PURE__ */ N("button", { type: "button", ...t });
 }
-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 });
+function ge({ value: e, defaultValue: t, min: r, max: u, ...n }) {
+  return e !== void 0 && (n.value = e === null ? "" : h(e)), t != null && (n.defaultValue = h(t)), r != null && (n.min = h(r)), u != null && (n.max = h(u)), /* @__PURE__ */ N("input", { type: "datetime-local", ...n });
 }
+const be = T(function({ placeholder: t, formatOnChange: r = se, onChange: u, value: n, ...a }, f) {
+  const l = {
+    inputMode: "decimal",
+    ...a,
+    formatOnChange: r,
+    type: "number"
+  };
+  return n !== void 0 && (l.value = D(n)), t != null && (l.placeholder = String(t)), u != null && (l.onChange = (o) => {
+    u({
+      ...o,
+      value: ue(o.value)
+    });
+  }), /* @__PURE__ */ N(A, { ...l, ref: f });
+});
 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
+  Ie as ActionButton,
+  ge as DatetimeLocalInput,
+  xe as DebouncedInput,
+  A as Input,
+  be as NumberInput,
+  Ne as RadioMenu,
+  oe as Select,
+  me as TextArea,
+  de as TextInput
 };

package.json

 {
   "name": "@mpen/react-basic-inputs",
   "private": false,
-  "version": "0.2.9",
+  "version": "0.2.10",
   "type": "module",
@@ -6,0 +6,0 @@ "files": ["dist"],

No alert changes

Improved metrics

Total package byte prevSize

27314

increased by11.35%

Lines of code

506

increased by12.2%

No dependency changes