@stenajs-webui/input-mask 21.2.0 → 21.3.0

package/dist/hooks/UseInputMask.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent, RefObject } from "react";
 import { InputMask, InputMaskPipe, InputMaskProvider } from "../masks/InputMask";
-export declare const useMaskedInput: (inputRef: RefObject<HTMLInputElement>, onChange: ((ev: ChangeEvent<HTMLInputElement>) => void) | undefined, onValueChange: ((value: string) => void) | undefined, mask: InputMask | InputMaskProvider, pipe?: InputMaskPipe, initialValue?: string, guide?: boolean, keepCharPositions?: boolean, placeholderChar?: string, showMask?: boolean) => {
+export declare const useMaskedInput: (inputRef: RefObject<HTMLInputElement>, onChange: ((ev: ChangeEvent<HTMLInputElement>) => void) | undefined, onValueChange: ((value: string) => void) | undefined, mask: InputMask | InputMaskProvider, pipe?: InputMaskPipe, initialValue?: string, guide?: boolean, keepCharPositions?: boolean, placeholderChar?: string, showMask?: boolean, enabled?: boolean) => {
     onChange: (event: ChangeEvent<HTMLInputElement>) => void;
 };

package/dist/index.es.js

@@ -1,67 +1,68 @@
-import { jsx as a } from "react/jsx-runtime";
-import { TextInput as x } from "@stenajs-webui/forms";
-import { useRef as I, useLayoutEffect as E } from "react";
-import { createTextMaskInputElement as T } from "text-mask-core";
-const M = (d, e, r, u, n, o = "", f = !1, c = !1, s = " ", m = !0) => {
-  const t = I(null);
-  return E(() => {
-    d.current && (t.current = T({
-      guide: f,
+import { jsx as x } from "react/jsx-runtime";
+import { TextInput as E } from "@stenajs-webui/forms";
+import { useRef as a, useLayoutEffect as T } from "react";
+import { createTextMaskInputElement as M } from "text-mask-core";
+const i = (d, e, u, f, n, o = "", c = !1, s = !1, m = " ", p = !0, r = !0) => {
+  const t = a(null);
+  return T(() => {
+    d.current && (t.current = M({
+      guide: c,
       inputElement: d.current,
-      keepCharPositions: c,
-      mask: u,
+      keepCharPositions: s,
+      mask: f,
       pipe: n,
-      placeholderChar: s,
-      showMask: m
-    }), t.current.update(o));
+      placeholderChar: m,
+      showMask: p
+    }), r && t.current.update(o));
   }, [
     d,
-    f,
     c,
-    u,
-    n,
     s,
+    f,
+    n,
     m,
-    o
+    p,
+    o,
+    r
   ]), {
-    onChange: (p) => {
-      t.current && t.current.update(), typeof e == "function" && e(p), typeof r == "function" && r(p.target.value);
+    onChange: (I) => {
+      t.current && t.current.update(), typeof e == "function" && e(I), typeof u == "function" && u(I.target.value);
     }
   };
-}, D = ({
+}, l = ({
   mask: d,
   pipe: e,
-  onChange: r,
-  onValueChange: u,
+  onChange: u,
+  onValueChange: f,
   value: n,
   guide: o,
-  keepCharPositions: f,
-  placeholderChar: c,
-  showMask: s,
-  ...m
+  keepCharPositions: c,
+  placeholderChar: s,
+  showMask: m,
+  ...p
 }) => {
-  const t = I(null), { onChange: p } = M(
-    t,
+  const r = a(null), { onChange: t } = i(
     r,
     u,
+    f,
     d,
     e,
     n,
     o,
-    f,
     c,
-    s
+    s,
+    m
   );
-  return /* @__PURE__ */ a(
-    x,
+  return /* @__PURE__ */ x(
+    E,
     {
-      ...m,
-      onChange: p,
+      ...p,
+      onChange: t,
       value: n,
-      inputRef: t
+      inputRef: r
     }
   );
-}, g = {
+}, A = {
   CREDIT_CARD: [
     /\d/,
     /\d/,
@@ -88,8 +89,8 @@ const M = (d, e, r, u, n, o = "", f = !1, c = !1, s = " ", m = !0) => {
   // 2019-12-29
 };
 export {
-  g as InputMasks,
-  D as MaskedTextInput,
-  M as useMaskedInput
+  A as InputMasks,
+  l as MaskedTextInput,
+  i as useMaskedInput
 };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/hooks/UseInputMask.ts","../src/components/MaskedTextInput.tsx","../src/masks/InputMasks.ts"],"sourcesContent":["import { ChangeEvent, RefObject, useLayoutEffect, useRef } from \"react\";\nimport { createTextMaskInputElement } from \"text-mask-core\";\nimport {\n  InputMask,\n  InputMaskPipe,\n  InputMaskProvider,\n} from \"../masks/InputMask\";\n\nexport const useMaskedInput = (\n  inputRef: RefObject<HTMLInputElement>,\n  onChange: ((ev: ChangeEvent<HTMLInputElement>) => void) | undefined,\n  onValueChange: ((value: string) => void) | undefined,\n  mask: InputMask | InputMaskProvider,\n  pipe?: InputMaskPipe,\n  initialValue: string = \"\",\n  guide: boolean = false,\n  keepCharPositions: boolean = false,\n  placeholderChar: string = \"\\u2000\",\n  showMask: boolean = true\n) => {\n  const textMask = useRef(null);\n\n  useLayoutEffect(() => {\n    if (!inputRef.current) return;\n\n    textMask.current = createTextMaskInputElement({\n      guide,\n      inputElement: inputRef.current,\n      keepCharPositions,\n      mask,\n      pipe,\n      placeholderChar,\n      showMask,\n    });\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (textMask.current as any).update(initialValue);\n  }, [\n    inputRef,\n    guide,\n    keepCharPositions,\n    mask,\n    pipe,\n    placeholderChar,\n    showMask,\n    initialValue,\n  ]);\n\n  return {\n    onChange: (event: ChangeEvent<HTMLInputElement>) => {\n      if (textMask.current) {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        (textMask.current as any).update();\n      }\n\n      if (typeof onChange === \"function\") {\n        onChange(event);\n      }\n      if (typeof onValueChange === \"function\") {\n        onValueChange(event.target.value);\n      }\n    },\n  };\n};\n","import { TextInput, TextInputProps } from \"@stenajs-webui/forms\";\nimport * as React from \"react\";\nimport { useRef } from \"react\";\nimport { useMaskedInput } from \"../hooks/UseInputMask\";\nimport {\n  InputMask,\n  InputMaskPipe,\n  InputMaskProvider,\n} from \"../masks/InputMask\";\n\nexport interface MaskedTextInputProps extends TextInputProps {\n  mask: InputMask | InputMaskProvider;\n  pipe?: InputMaskPipe;\n  guide?: boolean;\n  keepCharPositions?: boolean;\n  placeholderChar?: string;\n  showMask?: boolean;\n}\n\nexport const MaskedTextInput: React.FC<MaskedTextInputProps> = ({\n  mask,\n  pipe,\n  onChange,\n  onValueChange,\n  value,\n  guide,\n  keepCharPositions,\n  placeholderChar,\n  showMask,\n  ...textInputProps\n}) => {\n  const inputRef = useRef(null);\n  const { onChange: maskedOnChange } = useMaskedInput(\n    inputRef,\n    onChange,\n    onValueChange,\n    mask,\n    pipe,\n    value,\n    guide,\n    keepCharPositions,\n    placeholderChar,\n    showMask\n  );\n\n  return (\n    <TextInput\n      {...textInputProps}\n      onChange={maskedOnChange}\n      value={value}\n      inputRef={inputRef}\n    />\n  );\n};\n","export const InputMasks = {\n  CREDIT_CARD: [\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    \" \",\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    \" \",\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    \" \",\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    /\\d/,\n  ],\n  TIME: [/[012]/, /\\d/, \":\", /[012345]/, /\\d/],\n  ISO_DATE: [/\\d/, /\\d/, /\\d/, /\\d/, \"-\", /\\d/, /\\d/, \"-\", /\\d/, /\\d/], // 2019-12-29\n};\n"],"names":["useMaskedInput","inputRef","onChange","onValueChange","mask","pipe","initialValue","guide","keepCharPositions","placeholderChar","showMask","textMask","useRef","useLayoutEffect","createTextMaskInputElement","event","MaskedTextInput","value","textInputProps","maskedOnChange","jsx","TextInput","InputMasks"],"mappings":";;;;AAQO,MAAMA,IAAiB,CAC5BC,GACAC,GACAC,GACAC,GACAC,GACAC,IAAuB,IACvBC,IAAiB,IACjBC,IAA6B,IAC7BC,IAA0B,KAC1BC,IAAoB,OACjB;AACG,QAAAC,IAAWC,EAAO,IAAI;AAE5B,SAAAC,EAAgB,MAAM;AACpB,IAAKZ,EAAS,YAEdU,EAAS,UAAUG,EAA2B;AAAA,MAC5C,OAAAP;AAAA,MACA,cAAcN,EAAS;AAAA,MACvB,mBAAAO;AAAA,MACA,MAAAJ;AAAA,MACA,MAAAC;AAAA,MACA,iBAAAI;AAAA,MACA,UAAAC;AAAA,IAAA,CACD,GAGAC,EAAS,QAAgB,OAAOL,CAAY;AAAA,EAAA,GAC5C;AAAA,IACDL;AAAA,IACAM;AAAA,IACAC;AAAA,IACAJ;AAAA,IACAC;AAAA,IACAI;AAAA,IACAC;AAAA,IACAJ;AAAA,EAAA,CACD,GAEM;AAAA,IACL,UAAU,CAACS,MAAyC;AAClD,MAAIJ,EAAS,WAEVA,EAAS,QAAgB,UAGxB,OAAOT,KAAa,cACtBA,EAASa,CAAK,GAEZ,OAAOZ,KAAkB,cACbA,EAAAY,EAAM,OAAO,KAAK;AAAA,IAEpC;AAAA,EAAA;AAEJ,GC5CaC,IAAkD,CAAC;AAAA,EAC9D,MAAAZ;AAAA,EACA,MAAAC;AAAA,EACA,UAAAH;AAAA,EACA,eAAAC;AAAA,EACA,OAAAc;AAAA,EACA,OAAAV;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGQ;AACL,MAAM;AACE,QAAAjB,IAAWW,EAAO,IAAI,GACtB,EAAE,UAAUO,EAAA,IAAmBnB;AAAA,IACnCC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAY;AAAA,IACAV;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA;AAIA,SAAA,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,UAAUC;AAAA,MACV,OAAAF;AAAA,MACA,UAAAhB;AAAA,IAAA;AAAA,EAAA;AAGN,GCrDaqB,IAAa;AAAA,EACxB,aAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,MAAM,CAAC,SAAS,MAAM,KAAK,YAAY,IAAI;AAAA,EAC3C,UAAU,CAAC,MAAM,MAAM,MAAM,MAAM,KAAK,MAAM,MAAM,KAAK,MAAM,IAAI;AAAA;AACrE;"}
+{"version":3,"file":"index.es.js","sources":["../src/hooks/UseInputMask.ts","../src/components/MaskedTextInput.tsx","../src/masks/InputMasks.ts"],"sourcesContent":["import { ChangeEvent, RefObject, useLayoutEffect, useRef } from \"react\";\nimport { createTextMaskInputElement } from \"text-mask-core\";\nimport {\n  InputMask,\n  InputMaskPipe,\n  InputMaskProvider,\n} from \"../masks/InputMask\";\n\nexport const useMaskedInput = (\n  inputRef: RefObject<HTMLInputElement>,\n  onChange: ((ev: ChangeEvent<HTMLInputElement>) => void) | undefined,\n  onValueChange: ((value: string) => void) | undefined,\n  mask: InputMask | InputMaskProvider,\n  pipe?: InputMaskPipe,\n  initialValue: string = \"\",\n  guide: boolean = false,\n  keepCharPositions: boolean = false,\n  placeholderChar: string = \"\\u2000\",\n  showMask: boolean = true,\n  enabled: boolean = true\n) => {\n  const textMask = useRef(null);\n\n  useLayoutEffect(() => {\n    if (!inputRef.current) return;\n\n    textMask.current = createTextMaskInputElement({\n      guide,\n      inputElement: inputRef.current,\n      keepCharPositions,\n      mask,\n      pipe,\n      placeholderChar,\n      showMask,\n    });\n\n    if (enabled) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      (textMask.current as any).update(initialValue);\n    }\n  }, [\n    inputRef,\n    guide,\n    keepCharPositions,\n    mask,\n    pipe,\n    placeholderChar,\n    showMask,\n    initialValue,\n    enabled,\n  ]);\n\n  return {\n    onChange: (event: ChangeEvent<HTMLInputElement>) => {\n      if (textMask.current) {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        (textMask.current as any).update();\n      }\n\n      if (typeof onChange === \"function\") {\n        onChange(event);\n      }\n      if (typeof onValueChange === \"function\") {\n        onValueChange(event.target.value);\n      }\n    },\n  };\n};\n","import { TextInput, TextInputProps } from \"@stenajs-webui/forms\";\nimport * as React from \"react\";\nimport { useRef } from \"react\";\nimport { useMaskedInput } from \"../hooks/UseInputMask\";\nimport {\n  InputMask,\n  InputMaskPipe,\n  InputMaskProvider,\n} from \"../masks/InputMask\";\n\nexport interface MaskedTextInputProps extends TextInputProps {\n  mask: InputMask | InputMaskProvider;\n  pipe?: InputMaskPipe;\n  guide?: boolean;\n  keepCharPositions?: boolean;\n  placeholderChar?: string;\n  showMask?: boolean;\n}\n\nexport const MaskedTextInput: React.FC<MaskedTextInputProps> = ({\n  mask,\n  pipe,\n  onChange,\n  onValueChange,\n  value,\n  guide,\n  keepCharPositions,\n  placeholderChar,\n  showMask,\n  ...textInputProps\n}) => {\n  const inputRef = useRef(null);\n  const { onChange: maskedOnChange } = useMaskedInput(\n    inputRef,\n    onChange,\n    onValueChange,\n    mask,\n    pipe,\n    value,\n    guide,\n    keepCharPositions,\n    placeholderChar,\n    showMask\n  );\n\n  return (\n    <TextInput\n      {...textInputProps}\n      onChange={maskedOnChange}\n      value={value}\n      inputRef={inputRef}\n    />\n  );\n};\n","export const InputMasks = {\n  CREDIT_CARD: [\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    \" \",\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    \" \",\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    \" \",\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    /\\d/,\n  ],\n  TIME: [/[012]/, /\\d/, \":\", /[012345]/, /\\d/],\n  ISO_DATE: [/\\d/, /\\d/, /\\d/, /\\d/, \"-\", /\\d/, /\\d/, \"-\", /\\d/, /\\d/], // 2019-12-29\n};\n"],"names":["useMaskedInput","inputRef","onChange","onValueChange","mask","pipe","initialValue","guide","keepCharPositions","placeholderChar","showMask","enabled","textMask","useRef","useLayoutEffect","createTextMaskInputElement","event","MaskedTextInput","value","textInputProps","maskedOnChange","jsx","TextInput","InputMasks"],"mappings":";;;;AAQO,MAAMA,IAAiB,CAC5BC,GACAC,GACAC,GACAC,GACAC,GACAC,IAAuB,IACvBC,IAAiB,IACjBC,IAA6B,IAC7BC,IAA0B,KAC1BC,IAAoB,IACpBC,IAAmB,OAChB;AACG,QAAAC,IAAWC,EAAO,IAAI;AAE5B,SAAAC,EAAgB,MAAM;AACpB,IAAKb,EAAS,YAEdW,EAAS,UAAUG,EAA2B;AAAA,MAC5C,OAAAR;AAAA,MACA,cAAcN,EAAS;AAAA,MACvB,mBAAAO;AAAA,MACA,MAAAJ;AAAA,MACA,MAAAC;AAAA,MACA,iBAAAI;AAAA,MACA,UAAAC;AAAA,IAAA,CACD,GAEGC,KAEDC,EAAS,QAAgB,OAAON,CAAY;AAAA,EAC/C,GACC;AAAA,IACDL;AAAA,IACAM;AAAA,IACAC;AAAA,IACAJ;AAAA,IACAC;AAAA,IACAI;AAAA,IACAC;AAAA,IACAJ;AAAA,IACAK;AAAA,EAAA,CACD,GAEM;AAAA,IACL,UAAU,CAACK,MAAyC;AAClD,MAAIJ,EAAS,WAEVA,EAAS,QAAgB,UAGxB,OAAOV,KAAa,cACtBA,EAASc,CAAK,GAEZ,OAAOb,KAAkB,cACbA,EAAAa,EAAM,OAAO,KAAK;AAAA,IAEpC;AAAA,EAAA;AAEJ,GChDaC,IAAkD,CAAC;AAAA,EAC9D,MAAAb;AAAA,EACA,MAAAC;AAAA,EACA,UAAAH;AAAA,EACA,eAAAC;AAAA,EACA,OAAAe;AAAA,EACA,OAAAX;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGS;AACL,MAAM;AACE,QAAAlB,IAAWY,EAAO,IAAI,GACtB,EAAE,UAAUO,EAAA,IAAmBpB;AAAA,IACnCC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAa;AAAA,IACAX;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA;AAIA,SAAA,gBAAAW;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,UAAUC;AAAA,MACV,OAAAF;AAAA,MACA,UAAAjB;AAAA,IAAA;AAAA,EAAA;AAGN,GCrDasB,IAAa;AAAA,EACxB,aAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,MAAM,CAAC,SAAS,MAAM,KAAK,YAAY,IAAI;AAAA,EAC3C,UAAU,CAAC,MAAM,MAAM,MAAM,MAAM,KAAK,MAAM,MAAM,KAAK,MAAM,IAAI;AAAA;AACrE;"}

package/dist/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),T=require("@stenajs-webui/forms"),M=require("react"),i=require("text-mask-core"),p=(e,u,d,r,n,s="",c=!1,o=!1,f=" ",a=!0)=>{const t=M.useRef(null);return M.useLayoutEffect(()=>{e.current&&(t.current=i.createTextMaskInputElement({guide:c,inputElement:e.current,keepCharPositions:o,mask:r,pipe:n,placeholderChar:f,showMask:a}),t.current.update(s))},[e,c,o,r,n,f,a,s]),{onChange:I=>{t.current&&t.current.update(),typeof u=="function"&&u(I),typeof d=="function"&&d(I.target.value)}}},k=({mask:e,pipe:u,onChange:d,onValueChange:r,value:n,guide:s,keepCharPositions:c,placeholderChar:o,showMask:f,...a})=>{const t=M.useRef(null),{onChange:I}=p(t,d,r,e,u,n,s,c,o,f);return x.jsx(T.TextInput,{...a,onChange:I,value:n,inputRef:t})},l={CREDIT_CARD:[/\d/,/\d/,/\d/,/\d/," ",/\d/,/\d/,/\d/,/\d/," ",/\d/,/\d/,/\d/,/\d/," ",/\d/,/\d/,/\d/,/\d/],TIME:[/[012]/,/\d/,":",/[012345]/,/\d/],ISO_DATE:[/\d/,/\d/,/\d/,/\d/,"-",/\d/,/\d/,"-",/\d/,/\d/]};exports.InputMasks=l;exports.MaskedTextInput=k;exports.useMaskedInput=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),T=require("@stenajs-webui/forms"),M=require("react"),k=require("text-mask-core"),i=(e,r,d,s,n,c="",o=!1,f=!1,a=" ",I=!0,u=!0)=>{const t=M.useRef(null);return M.useLayoutEffect(()=>{e.current&&(t.current=k.createTextMaskInputElement({guide:o,inputElement:e.current,keepCharPositions:f,mask:s,pipe:n,placeholderChar:a,showMask:I}),u&&t.current.update(c))},[e,o,f,s,n,a,I,c,u]),{onChange:p=>{t.current&&t.current.update(),typeof r=="function"&&r(p),typeof d=="function"&&d(p.target.value)}}},E=({mask:e,pipe:r,onChange:d,onValueChange:s,value:n,guide:c,keepCharPositions:o,placeholderChar:f,showMask:a,...I})=>{const u=M.useRef(null),{onChange:t}=i(u,d,s,e,r,n,c,o,f,a);return x.jsx(T.TextInput,{...I,onChange:t,value:n,inputRef:u})},l={CREDIT_CARD:[/\d/,/\d/,/\d/,/\d/," ",/\d/,/\d/,/\d/,/\d/," ",/\d/,/\d/,/\d/,/\d/," ",/\d/,/\d/,/\d/,/\d/],TIME:[/[012]/,/\d/,":",/[012345]/,/\d/],ISO_DATE:[/\d/,/\d/,/\d/,/\d/,"-",/\d/,/\d/,"-",/\d/,/\d/]};exports.InputMasks=l;exports.MaskedTextInput=E;exports.useMaskedInput=i;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/hooks/UseInputMask.ts","../src/components/MaskedTextInput.tsx","../src/masks/InputMasks.ts"],"sourcesContent":["import { ChangeEvent, RefObject, useLayoutEffect, useRef } from \"react\";\nimport { createTextMaskInputElement } from \"text-mask-core\";\nimport {\n  InputMask,\n  InputMaskPipe,\n  InputMaskProvider,\n} from \"../masks/InputMask\";\n\nexport const useMaskedInput = (\n  inputRef: RefObject<HTMLInputElement>,\n  onChange: ((ev: ChangeEvent<HTMLInputElement>) => void) | undefined,\n  onValueChange: ((value: string) => void) | undefined,\n  mask: InputMask | InputMaskProvider,\n  pipe?: InputMaskPipe,\n  initialValue: string = \"\",\n  guide: boolean = false,\n  keepCharPositions: boolean = false,\n  placeholderChar: string = \"\\u2000\",\n  showMask: boolean = true\n) => {\n  const textMask = useRef(null);\n\n  useLayoutEffect(() => {\n    if (!inputRef.current) return;\n\n    textMask.current = createTextMaskInputElement({\n      guide,\n      inputElement: inputRef.current,\n      keepCharPositions,\n      mask,\n      pipe,\n      placeholderChar,\n      showMask,\n    });\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (textMask.current as any).update(initialValue);\n  }, [\n    inputRef,\n    guide,\n    keepCharPositions,\n    mask,\n    pipe,\n    placeholderChar,\n    showMask,\n    initialValue,\n  ]);\n\n  return {\n    onChange: (event: ChangeEvent<HTMLInputElement>) => {\n      if (textMask.current) {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        (textMask.current as any).update();\n      }\n\n      if (typeof onChange === \"function\") {\n        onChange(event);\n      }\n      if (typeof onValueChange === \"function\") {\n        onValueChange(event.target.value);\n      }\n    },\n  };\n};\n","import { TextInput, TextInputProps } from \"@stenajs-webui/forms\";\nimport * as React from \"react\";\nimport { useRef } from \"react\";\nimport { useMaskedInput } from \"../hooks/UseInputMask\";\nimport {\n  InputMask,\n  InputMaskPipe,\n  InputMaskProvider,\n} from \"../masks/InputMask\";\n\nexport interface MaskedTextInputProps extends TextInputProps {\n  mask: InputMask | InputMaskProvider;\n  pipe?: InputMaskPipe;\n  guide?: boolean;\n  keepCharPositions?: boolean;\n  placeholderChar?: string;\n  showMask?: boolean;\n}\n\nexport const MaskedTextInput: React.FC<MaskedTextInputProps> = ({\n  mask,\n  pipe,\n  onChange,\n  onValueChange,\n  value,\n  guide,\n  keepCharPositions,\n  placeholderChar,\n  showMask,\n  ...textInputProps\n}) => {\n  const inputRef = useRef(null);\n  const { onChange: maskedOnChange } = useMaskedInput(\n    inputRef,\n    onChange,\n    onValueChange,\n    mask,\n    pipe,\n    value,\n    guide,\n    keepCharPositions,\n    placeholderChar,\n    showMask\n  );\n\n  return (\n    <TextInput\n      {...textInputProps}\n      onChange={maskedOnChange}\n      value={value}\n      inputRef={inputRef}\n    />\n  );\n};\n","export const InputMasks = {\n  CREDIT_CARD: [\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    \" \",\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    \" \",\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    \" \",\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    /\\d/,\n  ],\n  TIME: [/[012]/, /\\d/, \":\", /[012345]/, /\\d/],\n  ISO_DATE: [/\\d/, /\\d/, /\\d/, /\\d/, \"-\", /\\d/, /\\d/, \"-\", /\\d/, /\\d/], // 2019-12-29\n};\n"],"names":["useMaskedInput","inputRef","onChange","onValueChange","mask","pipe","initialValue","guide","keepCharPositions","placeholderChar","showMask","textMask","useRef","useLayoutEffect","createTextMaskInputElement","event","MaskedTextInput","value","textInputProps","maskedOnChange","jsx","TextInput","InputMasks"],"mappings":"sMAQaA,EAAiB,CAC5BC,EACAC,EACAC,EACAC,EACAC,EACAC,EAAuB,GACvBC,EAAiB,GACjBC,EAA6B,GAC7BC,EAA0B,IAC1BC,EAAoB,KACjB,CACG,MAAAC,EAAWC,SAAO,IAAI,EAE5BC,OAAAA,EAAAA,gBAAgB,IAAM,CACfZ,EAAS,UAEdU,EAAS,QAAUG,6BAA2B,CAC5C,MAAAP,EACA,aAAcN,EAAS,QACvB,kBAAAO,EACA,KAAAJ,EACA,KAAAC,EACA,gBAAAI,EACA,SAAAC,CAAA,CACD,EAGAC,EAAS,QAAgB,OAAOL,CAAY,EAAA,EAC5C,CACDL,EACAM,EACAC,EACAJ,EACAC,EACAI,EACAC,EACAJ,CAAA,CACD,EAEM,CACL,SAAWS,GAAyC,CAC9CJ,EAAS,SAEVA,EAAS,QAAgB,SAGxB,OAAOT,GAAa,YACtBA,EAASa,CAAK,EAEZ,OAAOZ,GAAkB,YACbA,EAAAY,EAAM,OAAO,KAAK,CAEpC,CAAA,CAEJ,EC5CaC,EAAkD,CAAC,CAC9D,KAAAZ,EACA,KAAAC,EACA,SAAAH,EACA,cAAAC,EACA,MAAAc,EACA,MAAAV,EACA,kBAAAC,EACA,gBAAAC,EACA,SAAAC,EACA,GAAGQ,CACL,IAAM,CACE,MAAAjB,EAAWW,SAAO,IAAI,EACtB,CAAE,SAAUO,CAAA,EAAmBnB,EACnCC,EACAC,EACAC,EACAC,EACAC,EACAY,EACAV,EACAC,EACAC,EACAC,CAAA,EAIA,OAAAU,EAAA,IAACC,EAAA,UAAA,CACE,GAAGH,EACJ,SAAUC,EACV,MAAAF,EACA,SAAAhB,CAAA,CAAA,CAGN,ECrDaqB,EAAa,CACxB,YAAa,CACX,KACA,KACA,KACA,KACA,IACA,KACA,KACA,KACA,KACA,IACA,KACA,KACA,KACA,KACA,IACA,KACA,KACA,KACA,IACF,EACA,KAAM,CAAC,QAAS,KAAM,IAAK,WAAY,IAAI,EAC3C,SAAU,CAAC,KAAM,KAAM,KAAM,KAAM,IAAK,KAAM,KAAM,IAAK,KAAM,IAAI,CACrE"}
+{"version":3,"file":"index.js","sources":["../src/hooks/UseInputMask.ts","../src/components/MaskedTextInput.tsx","../src/masks/InputMasks.ts"],"sourcesContent":["import { ChangeEvent, RefObject, useLayoutEffect, useRef } from \"react\";\nimport { createTextMaskInputElement } from \"text-mask-core\";\nimport {\n  InputMask,\n  InputMaskPipe,\n  InputMaskProvider,\n} from \"../masks/InputMask\";\n\nexport const useMaskedInput = (\n  inputRef: RefObject<HTMLInputElement>,\n  onChange: ((ev: ChangeEvent<HTMLInputElement>) => void) | undefined,\n  onValueChange: ((value: string) => void) | undefined,\n  mask: InputMask | InputMaskProvider,\n  pipe?: InputMaskPipe,\n  initialValue: string = \"\",\n  guide: boolean = false,\n  keepCharPositions: boolean = false,\n  placeholderChar: string = \"\\u2000\",\n  showMask: boolean = true,\n  enabled: boolean = true\n) => {\n  const textMask = useRef(null);\n\n  useLayoutEffect(() => {\n    if (!inputRef.current) return;\n\n    textMask.current = createTextMaskInputElement({\n      guide,\n      inputElement: inputRef.current,\n      keepCharPositions,\n      mask,\n      pipe,\n      placeholderChar,\n      showMask,\n    });\n\n    if (enabled) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      (textMask.current as any).update(initialValue);\n    }\n  }, [\n    inputRef,\n    guide,\n    keepCharPositions,\n    mask,\n    pipe,\n    placeholderChar,\n    showMask,\n    initialValue,\n    enabled,\n  ]);\n\n  return {\n    onChange: (event: ChangeEvent<HTMLInputElement>) => {\n      if (textMask.current) {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        (textMask.current as any).update();\n      }\n\n      if (typeof onChange === \"function\") {\n        onChange(event);\n      }\n      if (typeof onValueChange === \"function\") {\n        onValueChange(event.target.value);\n      }\n    },\n  };\n};\n","import { TextInput, TextInputProps } from \"@stenajs-webui/forms\";\nimport * as React from \"react\";\nimport { useRef } from \"react\";\nimport { useMaskedInput } from \"../hooks/UseInputMask\";\nimport {\n  InputMask,\n  InputMaskPipe,\n  InputMaskProvider,\n} from \"../masks/InputMask\";\n\nexport interface MaskedTextInputProps extends TextInputProps {\n  mask: InputMask | InputMaskProvider;\n  pipe?: InputMaskPipe;\n  guide?: boolean;\n  keepCharPositions?: boolean;\n  placeholderChar?: string;\n  showMask?: boolean;\n}\n\nexport const MaskedTextInput: React.FC<MaskedTextInputProps> = ({\n  mask,\n  pipe,\n  onChange,\n  onValueChange,\n  value,\n  guide,\n  keepCharPositions,\n  placeholderChar,\n  showMask,\n  ...textInputProps\n}) => {\n  const inputRef = useRef(null);\n  const { onChange: maskedOnChange } = useMaskedInput(\n    inputRef,\n    onChange,\n    onValueChange,\n    mask,\n    pipe,\n    value,\n    guide,\n    keepCharPositions,\n    placeholderChar,\n    showMask\n  );\n\n  return (\n    <TextInput\n      {...textInputProps}\n      onChange={maskedOnChange}\n      value={value}\n      inputRef={inputRef}\n    />\n  );\n};\n","export const InputMasks = {\n  CREDIT_CARD: [\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    \" \",\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    \" \",\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    \" \",\n    /\\d/,\n    /\\d/,\n    /\\d/,\n    /\\d/,\n  ],\n  TIME: [/[012]/, /\\d/, \":\", /[012345]/, /\\d/],\n  ISO_DATE: [/\\d/, /\\d/, /\\d/, /\\d/, \"-\", /\\d/, /\\d/, \"-\", /\\d/, /\\d/], // 2019-12-29\n};\n"],"names":["useMaskedInput","inputRef","onChange","onValueChange","mask","pipe","initialValue","guide","keepCharPositions","placeholderChar","showMask","enabled","textMask","useRef","useLayoutEffect","createTextMaskInputElement","event","MaskedTextInput","value","textInputProps","maskedOnChange","jsx","TextInput","InputMasks"],"mappings":"sMAQaA,EAAiB,CAC5BC,EACAC,EACAC,EACAC,EACAC,EACAC,EAAuB,GACvBC,EAAiB,GACjBC,EAA6B,GAC7BC,EAA0B,IAC1BC,EAAoB,GACpBC,EAAmB,KAChB,CACG,MAAAC,EAAWC,SAAO,IAAI,EAE5BC,OAAAA,EAAAA,gBAAgB,IAAM,CACfb,EAAS,UAEdW,EAAS,QAAUG,6BAA2B,CAC5C,MAAAR,EACA,aAAcN,EAAS,QACvB,kBAAAO,EACA,KAAAJ,EACA,KAAAC,EACA,gBAAAI,EACA,SAAAC,CAAA,CACD,EAEGC,GAEDC,EAAS,QAAgB,OAAON,CAAY,EAC/C,EACC,CACDL,EACAM,EACAC,EACAJ,EACAC,EACAI,EACAC,EACAJ,EACAK,CAAA,CACD,EAEM,CACL,SAAWK,GAAyC,CAC9CJ,EAAS,SAEVA,EAAS,QAAgB,SAGxB,OAAOV,GAAa,YACtBA,EAASc,CAAK,EAEZ,OAAOb,GAAkB,YACbA,EAAAa,EAAM,OAAO,KAAK,CAEpC,CAAA,CAEJ,EChDaC,EAAkD,CAAC,CAC9D,KAAAb,EACA,KAAAC,EACA,SAAAH,EACA,cAAAC,EACA,MAAAe,EACA,MAAAX,EACA,kBAAAC,EACA,gBAAAC,EACA,SAAAC,EACA,GAAGS,CACL,IAAM,CACE,MAAAlB,EAAWY,SAAO,IAAI,EACtB,CAAE,SAAUO,CAAA,EAAmBpB,EACnCC,EACAC,EACAC,EACAC,EACAC,EACAa,EACAX,EACAC,EACAC,EACAC,CAAA,EAIA,OAAAW,EAAA,IAACC,EAAA,UAAA,CACE,GAAGH,EACJ,SAAUC,EACV,MAAAF,EACA,SAAAjB,CAAA,CAAA,CAGN,ECrDasB,EAAa,CACxB,YAAa,CACX,KACA,KACA,KACA,KACA,IACA,KACA,KACA,KACA,KACA,IACA,KACA,KACA,KACA,KACA,IACA,KACA,KACA,KACA,IACF,EACA,KAAM,CAAC,QAAS,KAAM,IAAK,WAAY,IAAI,EAC3C,SAAU,CAAC,KAAM,KAAM,KAAM,KAAM,IAAK,KAAM,KAAM,IAAK,KAAM,IAAI,CACrE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stenajs-webui/input-mask",
-  "version": "21.2.0",
+  "version": "21.3.0",
   "type": "module",
   "description": "",
   "author": "mattias800",
@@ -33,7 +33,7 @@
     "deploy": "gh-pages -d example/build"
   },
   "dependencies": {
-    "@stenajs-webui/forms": "21.2.0",
+    "@stenajs-webui/forms": "21.3.0",
     "text-mask-core": "^5.1.2"
   },
   "peerDependencies": {
@@ -52,5 +52,5 @@
   "files": [
     "dist"
   ],
-  "gitHead": "fe4132840a04c376668c828f9f91a9c509a207b2"
+  "gitHead": "f196cec822aae0bf9933dfc6b8e51a9b4bfd101d"
 }