use-mask-input 2.1.0 → 3.0.1

package/README.md

@@ -2,11 +2,11 @@
 
 [![NPM](https://img.shields.io/npm/v/use-mask-input.svg)](https://www.npmjs.com/package/use-mask-input) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Bundle Size](https://badgen.net/bundlephobia/minzip/use-mask-input)](https://bundlephobia.com/result?p=use-mask-input)
 
-A React Hook for build elegant input masks.
+A React Hook for build elegant and simple input masks.
 
 ## Todo
-
-- [ ] Enhance bundle sizes
+- [x] Add react-final-form support
+- [x] Simplify API
 - [ ] Make tests :P
 - [ ] Better example page with GH pages
 
@@ -14,7 +14,8 @@ A React Hook for build elegant input masks.
 ## Features
 
 - ✨  Compatible with [React Hook Form](https://github.com/react-hook-form/react-hook-form)
-- 🎯  No complex API
+- 🏁  Compatible with [React Final Form](https://github.com/final-form/react-final-form)
+- 🎯  Simple API
 
 ## Install
 
@@ -26,27 +27,23 @@ yarn add use-mask-input
 
 ## Quickstart
 
-```tsx
+```jsx
 import React from 'react'
-import useMaskInput from 'use-mask-input';
+import { withMask } from 'use-mask-input';
 
 const App = () => {
-  const ref = useMaskInput({
-    mask: ['999-999', '999-9999']
-  })
-
   return (
-    <input type="text" ref={ref} />
+    <input type="text" ref={withMask('9999-9999')} />
   )
 }
 ```
 
 ## Usage with React Hook Forms
 
-```tsx
+```jsx
 import React from 'react';
 import { useForm } from 'react-hook-form';
-import useMaskInput, { maskRegister } from 'use-mask-input';
+import { withHookFormMask } from 'use-mask-input';
 
 function App() {
   const { register, handleSubmit } = useForm();
@@ -57,7 +54,7 @@ function App() {
     <form onSubmit={onSubmit}>
       <input
         type="text"
-        {...maskRegister(register('phone'), ['(99) 9999 9999', '(99) 9 9999 9999'])}
+        {...withHookFormMask(register('phone'), ['(99) 9999 9999', '(99) 9 9999 9999'])}
       />
       <button type="submit">Submit</button>
     </form>
@@ -65,6 +62,34 @@ function App() {
 }
 ```
 
+## Usage with React Final Form
+
+```jsx
+import React from 'react';
+import { Form, Field } from 'react-final-form';
+import { withHookFormMask } from 'use-mask-input';
+
+function App() {
+  ...
+  return (
+    <Form
+      onSubmit={onSubmit}
+      render={({ handleSubmit }) => (
+        <form onSubmit={handleSubmit}>
+          <Field
+            name="phone"
+            render={({ input, meta }) => (
+              <input ref={withMask('9999-9999')} {...input} />
+            )}
+          />
+          <button type="submit">Submit</button>
+        </form>
+      )}
+    />
+  );
+}
+```
+
 ## License
 
 MIT © [eduardoborges](https://github.com/eduardoborges)

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './useMaskInput';
-export { default as maskRegister } from './maskRegister';
+export { default as withHookFormMask } from './withHookFormMask';
+export { default as withMask } from './withMask';

package/dist/index.js

@@ -1,68 +1,2 @@
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var react = require('react');
-var Inputmask = _interopDefault(require('inputmask'));
-var flowright = _interopDefault(require('lodash.flowright'));
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-var useInputMask = function useInputMask(props) {
-  var mask = props.mask,
-      register = props.register,
-      options = props.options;
-  var ref = react.useRef(null);
-  react.useEffect(function () {
-    if (!ref.current) {
-      return;
-    }
-
-    var maskInput = Inputmask(_extends({
-      mask: mask
-    }, options));
-    maskInput.mask(ref.current);
-
-    if (register && ref.current) {
-      register(ref.current);
-    }
-  }, [mask, register, options]);
-  return ref;
-};
-
-var maskRegister = function maskRegister(registerReturn, mask, options) {
-  var newRef;
-
-  if (registerReturn) {
-    var ref = registerReturn.ref;
-    var maskInput = Inputmask(_extends({
-      mask: mask,
-      jitMasking: true
-    }, options));
-    newRef = flowright(ref, function (_ref) {
-      maskInput.mask(_ref);
-      return _ref;
-    });
-  }
-
-  return _extends({}, registerReturn, {
-    ref: newRef
-  });
-};
-
-exports.default = useInputMask;
-exports.maskRegister = maskRegister;
+var r=require("react"),t=require("inputmask"),e=require("lodash.flowright");function n(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var u=/*#__PURE__*/n(t),a=/*#__PURE__*/n(e);function i(){return i=Object.assign?Object.assign.bind():function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n])}return r},i.apply(this,arguments)}exports.default=function(t){var e=t.mask,n=t.register,a=t.options,f=r.useRef(null);return r.useEffect(function(){f.current&&(u.default(i({mask:e},a)).mask(f.current),n&&f.current&&n(f.current))},[e,n,a]),f},exports.withHookFormMask=function(r,t,e){var n;if(r){var f=r.ref,o=u.default(i({mask:t,jitMasking:!0},e));n=a.default(f,function(r){return o.mask(r),r})}return i({},r,{ref:n})},exports.withMask=function(r,t){return function(e){var n=u.default(i({mask:r},t));return e&&n.mask(e),e}};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/useMaskInput.ts","../src/maskRegister.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n  mask: Inputmask.Options['mask']\n  register?(element: HTMLElement): void\n  options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n  const { mask, register, options } = props;\n\n  const ref = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const maskInput = Inputmask({\n      mask,\n      ...options,\n    });\n\n    maskInput.mask(ref.current);\n\n    if (register && ref.current) {\n      register(ref.current);\n    }\n  }, [mask, register, options]);\n\n  return ref;\n};\n\nexport default useInputMask;\n","/* eslint-disable @typescript-eslint/space-before-blocks */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport Inputmask from 'inputmask';\nimport { UseFormRegisterReturn } from 'react-hook-form';\nimport flowright from 'lodash.flowright';\n\nconst maskRegister = (\n  registerReturn: UseFormRegisterReturn,\n  mask: Inputmask.Options['mask'],\n  options?: Inputmask.Options,\n) => {\n  //\n  let newRef;\n\n  if (registerReturn){\n    const { ref } = registerReturn;\n\n    const maskInput = Inputmask({\n      mask,\n      jitMasking: true,\n      ...options,\n    });\n\n    newRef = flowright(ref, (_ref) => {\n      maskInput.mask(_ref);\n      return _ref;\n    });\n  }\n\n  return {\n    ...registerReturn,\n    ref: newRef,\n  };\n};\n\nexport default maskRegister;\n"],"names":["useInputMask","props","mask","register","options","ref","useRef","useEffect","current","maskInput","Inputmask","maskRegister","registerReturn","newRef","jitMasking","flowright","_ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AASA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD;EACnB,IAAQC,IAAR,GAAoCD,KAApC,CAAQC,IAAR;MAAcC,QAAd,GAAoCF,KAApC,CAAcE,QAAd;MAAwBC,OAAxB,GAAoCH,KAApC,CAAwBG,OAAxB;EAEA,IAAMC,GAAG,GAAGC,YAAM,CAAmB,IAAnB,CAAlB;EAEAC,eAAS,CAAC;IACR,IAAI,CAACF,GAAG,CAACG,OAAT,EAAkB;MAChB;;;IAGF,IAAMC,SAAS,GAAGC,SAAS;MACzBR,IAAI,EAAJA;OACGE,OAFsB,EAA3B;IAKAK,SAAS,CAACP,IAAV,CAAeG,GAAG,CAACG,OAAnB;;IAEA,IAAIL,QAAQ,IAAIE,GAAG,CAACG,OAApB,EAA6B;MAC3BL,QAAQ,CAACE,GAAG,CAACG,OAAL,CAAR;;GAbK,EAeN,CAACN,IAAD,EAAOC,QAAP,EAAiBC,OAAjB,CAfM,CAAT;EAiBA,OAAOC,GAAP;AACD,CAvBD;;ACHA,IAAMM,YAAY,GAAG,SAAfA,YAAe,CACnBC,cADmB,EAEnBV,IAFmB,EAGnBE,OAHmB;EAMnB,IAAIS,MAAJ;;EAEA,IAAID,cAAJ,EAAmB;IACjB,IAAQP,GAAR,GAAgBO,cAAhB,CAAQP,GAAR;IAEA,IAAMI,SAAS,GAAGC,SAAS;MACzBR,IAAI,EAAJA,IADyB;MAEzBY,UAAU,EAAE;OACTV,OAHsB,EAA3B;IAMAS,MAAM,GAAGE,SAAS,CAACV,GAAD,EAAM,UAACW,IAAD;MACtBP,SAAS,CAACP,IAAV,CAAec,IAAf;MACA,OAAOA,IAAP;KAFgB,CAAlB;;;EAMF,oBACKJ,cADL;IAEEP,GAAG,EAAEQ;;AAER,CA3BD;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n  mask: Inputmask.Options['mask']\n  register?(element: HTMLElement): void\n  options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n  const { mask, register, options } = props;\n\n  const ref = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const maskInput = Inputmask({\n      mask,\n      ...options,\n    });\n\n    maskInput.mask(ref.current);\n\n    if (register && ref.current) {\n      register(ref.current);\n    }\n  }, [mask, register, options]);\n\n  return ref;\n};\n\nexport default useInputMask;\n","/* eslint-disable @typescript-eslint/space-before-blocks */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport Inputmask from 'inputmask';\nimport { UseFormRegisterReturn } from 'react-hook-form';\nimport flowright from 'lodash.flowright';\n\nconst withHookFormMask = (\n  registerReturn: UseFormRegisterReturn,\n  mask: Inputmask.Options['mask'],\n  options?: Inputmask.Options,\n) => {\n  //\n  let newRef;\n\n  if (registerReturn){\n    const { ref } = registerReturn;\n\n    const maskInput = Inputmask({\n      mask,\n      jitMasking: true,\n      ...options,\n    });\n\n    newRef = flowright(ref, (_ref) => {\n      maskInput.mask(_ref);\n      return _ref;\n    });\n  }\n\n  return {\n    ...registerReturn,\n    ref: newRef,\n  };\n};\n\nexport default withHookFormMask;\n","import Inputmask from 'inputmask';\n\nconst withFinalFormMask = (\n  mask: Inputmask.Options['mask'],\n  options?: Inputmask.Options,\n) => (input: HTMLElement | HTMLInputElement | null) => {\n  //\n  const maskInput = Inputmask({\n    mask,\n    ...options,\n  });\n\n  if (input) {\n    maskInput.mask(input);\n  }\n\n  return input;\n};\n\nexport default withFinalFormMask;\n"],"names":["props","mask","register","options","ref","useRef","useEffect","current","Inputmask","registerReturn","newRef","maskInput","jitMasking","flowright","_ref","_extends","input"],"mappings":"obASqB,SAACA,GACpB,IAAYC,EAAwBD,EAA5BC,KAAMC,EAAsBF,EAAtBE,SAAUC,EAAYH,EAAZG,QAElBC,EAAMC,SAAyB,MAmBrC,OAjBAC,EAASA,UAAC,WACHF,EAAIG,UAISC,EAAS,QACzBP,EAAAA,CAAAA,KAAAA,GACGE,IAGKF,KAAKG,EAAIG,SAEfL,GAAYE,EAAIG,SAClBL,EAASE,EAAIG,SAEjB,EAAG,CAACN,EAAMC,EAAUC,IAGtBC,CAAA,2BC1ByB,SACvBK,EACAR,EACAE,GAGA,IAAUO,EAEV,GAAID,EAAe,CACjB,IAAQL,EAAQK,EAARL,IAEOO,EAAGH,EAAS,QACzBP,EAAAA,CAAAA,KAAAA,EACAW,YAAY,GACTT,IAGLO,EAASG,EAAAA,QAAUT,EAAK,SAACU,GAEvB,OADAH,EAAUV,KAAKa,GAEjBA,CAAA,EACD,CAED,OAAAC,EAAA,CAAA,EACKN,EAAc,CACjBL,IAAKM,GAET,mBC/B0B,SACxBT,EACAE,UACIa,SAAAA,GAEJ,IAAeL,EAAGH,EAAAA,QAASO,EAAA,CACzBd,KAAAA,GACGE,IAOL,OAJIa,GACFL,EAAUV,KAAKe,GAInBA,CAAA,CAAC"}

package/dist/index.modern.mjs

@@ -0,0 +1,2 @@
+import{useRef as r,useEffect as t}from"react";import n from"inputmask";import s from"lodash.flowright";function a(){return a=Object.assign?Object.assign.bind():function(r){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(r[s]=n[s])}return r},a.apply(this,arguments)}const e=s=>{const{mask:e,register:o,options:i}=s,c=r(null);return t(()=>{c.current&&(n(a({mask:e},i)).mask(c.current),o&&c.current&&o(c.current))},[e,o,i]),c},o=(r,t,e)=>{let o;if(r){const{ref:i}=r,c=n(a({mask:t,jitMasking:!0},e));o=s(i,r=>(c.mask(r),r))}return a({},r,{ref:o})},i=(r,t)=>s=>{const e=n(a({mask:r},t));return s&&e.mask(s),s};export{e as default,o as withHookFormMask,i as withMask};
+//# sourceMappingURL=index.modern.mjs.map

package/dist/index.modern.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.modern.mjs","sources":["../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n  mask: Inputmask.Options['mask']\n  register?(element: HTMLElement): void\n  options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n  const { mask, register, options } = props;\n\n  const ref = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const maskInput = Inputmask({\n      mask,\n      ...options,\n    });\n\n    maskInput.mask(ref.current);\n\n    if (register && ref.current) {\n      register(ref.current);\n    }\n  }, [mask, register, options]);\n\n  return ref;\n};\n\nexport default useInputMask;\n","/* eslint-disable @typescript-eslint/space-before-blocks */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport Inputmask from 'inputmask';\nimport { UseFormRegisterReturn } from 'react-hook-form';\nimport flowright from 'lodash.flowright';\n\nconst withHookFormMask = (\n  registerReturn: UseFormRegisterReturn,\n  mask: Inputmask.Options['mask'],\n  options?: Inputmask.Options,\n) => {\n  //\n  let newRef;\n\n  if (registerReturn){\n    const { ref } = registerReturn;\n\n    const maskInput = Inputmask({\n      mask,\n      jitMasking: true,\n      ...options,\n    });\n\n    newRef = flowright(ref, (_ref) => {\n      maskInput.mask(_ref);\n      return _ref;\n    });\n  }\n\n  return {\n    ...registerReturn,\n    ref: newRef,\n  };\n};\n\nexport default withHookFormMask;\n","import Inputmask from 'inputmask';\n\nconst withFinalFormMask = (\n  mask: Inputmask.Options['mask'],\n  options?: Inputmask.Options,\n) => (input: HTMLElement | HTMLInputElement | null) => {\n  //\n  const maskInput = Inputmask({\n    mask,\n    ...options,\n  });\n\n  if (input) {\n    maskInput.mask(input);\n  }\n\n  return input;\n};\n\nexport default withFinalFormMask;\n"],"names":["useInputMask","props","mask","register","options","useRef","useEffect","ref","current","Inputmask","registerReturn","newRef","maskInput","_extends","jitMasking","flowright","_ref","withFinalFormMask","input"],"mappings":"2UASMA,MAAAA,EAAgBC,IACpB,MAAMC,KAAEA,EAAIC,SAAEA,EAAQC,QAAEA,GAAYH,IAExBI,EAAyB,MAmBrC,OAjBAC,EAAU,KACHC,EAAIC,UAISC,EAChBP,EAAAA,CAAAA,QACGE,IAGKF,KAAKK,EAAIC,SAEfL,GAAYI,EAAIC,SAClBL,EAASI,EAAIC,SACd,EACA,CAACN,EAAMC,EAAUC,IAGtBG,KC1ByB,CACvBG,EACAR,EACAE,KAGA,IAAUO,EAEV,GAAID,EAAe,CACjB,MAAMH,IAAEA,GAAQG,EAEVE,EAAYH,EAASI,EAAA,CACzBX,OACAY,YAAY,GACTV,IAGLO,EAASI,EAAUR,EAAMS,IACvBJ,EAAUV,KAAKc,GAEjBA,GACD,CAED,OAAAH,EAAA,CAAA,EACKH,EAAc,CACjBH,IAAKI,KC7BHM,EAAoB,CACxBf,EACAE,IACIc,IAEJ,MAAMN,EAAYH,EAASI,EAAA,CACzBX,QACGE,IAOL,OAJIc,GACFN,EAAUV,KAAKgB"}

package/dist/index.module.js

@@ -0,0 +1,2 @@
+import{useRef as r,useEffect as t}from"react";import n from"inputmask";import a from"lodash.flowright";function e(){return e=Object.assign?Object.assign.bind():function(r){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(r[a]=n[a])}return r},e.apply(this,arguments)}var i=function(a){var i=a.mask,o=a.register,u=a.options,s=r(null);return t(function(){s.current&&(n(e({mask:i},u)).mask(s.current),o&&s.current&&o(s.current))},[i,o,u]),s},o=function(r,t,i){var o;if(r){var u=r.ref,s=n(e({mask:t,jitMasking:!0},i));o=a(u,function(r){return s.mask(r),r})}return e({},r,{ref:o})},u=function(r,t){return function(a){var i=n(e({mask:r},t));return a&&i.mask(a),a}};export{i as default,o as withHookFormMask,u as withMask};
+//# sourceMappingURL=index.module.js.map

package/dist/index.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.js","sources":["../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n  mask: Inputmask.Options['mask']\n  register?(element: HTMLElement): void\n  options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n  const { mask, register, options } = props;\n\n  const ref = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const maskInput = Inputmask({\n      mask,\n      ...options,\n    });\n\n    maskInput.mask(ref.current);\n\n    if (register && ref.current) {\n      register(ref.current);\n    }\n  }, [mask, register, options]);\n\n  return ref;\n};\n\nexport default useInputMask;\n","/* eslint-disable @typescript-eslint/space-before-blocks */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport Inputmask from 'inputmask';\nimport { UseFormRegisterReturn } from 'react-hook-form';\nimport flowright from 'lodash.flowright';\n\nconst withHookFormMask = (\n  registerReturn: UseFormRegisterReturn,\n  mask: Inputmask.Options['mask'],\n  options?: Inputmask.Options,\n) => {\n  //\n  let newRef;\n\n  if (registerReturn){\n    const { ref } = registerReturn;\n\n    const maskInput = Inputmask({\n      mask,\n      jitMasking: true,\n      ...options,\n    });\n\n    newRef = flowright(ref, (_ref) => {\n      maskInput.mask(_ref);\n      return _ref;\n    });\n  }\n\n  return {\n    ...registerReturn,\n    ref: newRef,\n  };\n};\n\nexport default withHookFormMask;\n","import Inputmask from 'inputmask';\n\nconst withFinalFormMask = (\n  mask: Inputmask.Options['mask'],\n  options?: Inputmask.Options,\n) => (input: HTMLElement | HTMLInputElement | null) => {\n  //\n  const maskInput = Inputmask({\n    mask,\n    ...options,\n  });\n\n  if (input) {\n    maskInput.mask(input);\n  }\n\n  return input;\n};\n\nexport default withFinalFormMask;\n"],"names":["useInputMask","props","mask","register","options","ref","useRef","useEffect","current","Inputmask","withHookFormMask","registerReturn","newRef","maskInput","jitMasking","flowright","_ref","_extends","withFinalFormMask","input"],"mappings":"2UASMA,MAAe,SAACC,GACpB,IAAYC,EAAwBD,EAA5BC,KAAMC,EAAsBF,EAAtBE,SAAUC,EAAYH,EAAZG,QAElBC,EAAMC,EAAyB,MAmBrC,OAjBAC,EAAU,WACHF,EAAIG,UAISC,EAChBP,EAAAA,CAAAA,KAAAA,GACGE,IAGKF,KAAKG,EAAIG,SAEfL,GAAYE,EAAIG,SAClBL,EAASE,EAAIG,SAEjB,EAAG,CAACN,EAAMC,EAAUC,IAGtBC,CAAA,EC1BMK,EAAmB,SACvBC,EACAT,EACAE,GAGA,IAAUQ,EAEV,GAAID,EAAe,CACjB,IAAQN,EAAQM,EAARN,IAEOQ,EAAGJ,EAChBP,EAAAA,CAAAA,KAAAA,EACAY,YAAY,GACTV,IAGLQ,EAASG,EAAUV,EAAK,SAACW,GAEvB,OADAH,EAAUX,KAAKc,GAEjBA,CAAA,EACD,CAED,OAAAC,EAAA,CAAA,EACKN,EAAc,CACjBN,IAAKO,GAET,EC/BuBM,EAAG,SACxBhB,EACAE,UACIe,SAAAA,GAEJ,IAAeN,EAAGJ,EAASQ,EAAA,CACzBf,KAAAA,GACGE,IAOL,OAJIe,GACFN,EAAUX,KAAKiB,GAInBA,CAAA,CAAC"}

package/dist/index.umd.js

@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("inputmask"),require("lodash.flowright")):"function"==typeof define&&define.amd?define(["exports","react","inputmask","lodash.flowright"],e):e((t||self).useMaskInput={},t.react,t.inputmask,t.flowright)}(this,function(t,e,n,r){function u(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=/*#__PURE__*/u(n),i=/*#__PURE__*/u(r);function f(){return f=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},f.apply(this,arguments)}t.default=function(t){var n=t.mask,r=t.register,u=t.options,i=e.useRef(null);return e.useEffect(function(){i.current&&(a.default(f({mask:n},u)).mask(i.current),r&&i.current&&r(i.current))},[n,r,u]),i},t.withHookFormMask=function(t,e,n){var r;if(t){var u=t.ref,o=a.default(f({mask:e,jitMasking:!0},n));r=i.default(u,function(t){return o.mask(t),t})}return f({},t,{ref:r})},t.withMask=function(t,e){return function(n){var r=a.default(f({mask:t},e));return n&&r.mask(n),n}}});
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n  mask: Inputmask.Options['mask']\n  register?(element: HTMLElement): void\n  options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n  const { mask, register, options } = props;\n\n  const ref = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const maskInput = Inputmask({\n      mask,\n      ...options,\n    });\n\n    maskInput.mask(ref.current);\n\n    if (register && ref.current) {\n      register(ref.current);\n    }\n  }, [mask, register, options]);\n\n  return ref;\n};\n\nexport default useInputMask;\n","/* eslint-disable @typescript-eslint/space-before-blocks */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport Inputmask from 'inputmask';\nimport { UseFormRegisterReturn } from 'react-hook-form';\nimport flowright from 'lodash.flowright';\n\nconst withHookFormMask = (\n  registerReturn: UseFormRegisterReturn,\n  mask: Inputmask.Options['mask'],\n  options?: Inputmask.Options,\n) => {\n  //\n  let newRef;\n\n  if (registerReturn){\n    const { ref } = registerReturn;\n\n    const maskInput = Inputmask({\n      mask,\n      jitMasking: true,\n      ...options,\n    });\n\n    newRef = flowright(ref, (_ref) => {\n      maskInput.mask(_ref);\n      return _ref;\n    });\n  }\n\n  return {\n    ...registerReturn,\n    ref: newRef,\n  };\n};\n\nexport default withHookFormMask;\n","import Inputmask from 'inputmask';\n\nconst withFinalFormMask = (\n  mask: Inputmask.Options['mask'],\n  options?: Inputmask.Options,\n) => (input: HTMLElement | HTMLInputElement | null) => {\n  //\n  const maskInput = Inputmask({\n    mask,\n    ...options,\n  });\n\n  if (input) {\n    maskInput.mask(input);\n  }\n\n  return input;\n};\n\nexport default withFinalFormMask;\n"],"names":["props","mask","register","options","ref","useRef","useEffect","current","Inputmask","registerReturn","newRef","maskInput","jitMasking","flowright","_ref","_extends","input"],"mappings":"utBASqB,SAACA,GACpB,IAAYC,EAAwBD,EAA5BC,KAAMC,EAAsBF,EAAtBE,SAAUC,EAAYH,EAAZG,QAElBC,EAAMC,SAAyB,MAmBrC,OAjBAC,EAASA,UAAC,WACHF,EAAIG,UAISC,EAAS,QACzBP,EAAAA,CAAAA,KAAAA,GACGE,IAGKF,KAAKG,EAAIG,SAEfL,GAAYE,EAAIG,SAClBL,EAASE,EAAIG,SAEjB,EAAG,CAACN,EAAMC,EAAUC,IAGtBC,CAAA,qBC1ByB,SACvBK,EACAR,EACAE,GAGA,IAAUO,EAEV,GAAID,EAAe,CACjB,IAAQL,EAAQK,EAARL,IAEOO,EAAGH,EAAS,QACzBP,EAAAA,CAAAA,KAAAA,EACAW,YAAY,GACTT,IAGLO,EAASG,EAAAA,QAAUT,EAAK,SAACU,GAEvB,OADAH,EAAUV,KAAKa,GAEjBA,CAAA,EACD,CAED,OAAAC,EAAA,CAAA,EACKN,EAAc,CACjBL,IAAKM,GAET,aC/B0B,SACxBT,EACAE,UACIa,SAAAA,GAEJ,IAAeL,EAAGH,EAAAA,QAASO,EAAA,CACzBd,KAAAA,GACGE,IAOL,OAJIa,GACFL,EAAUV,KAAKe,GAInBA,CAAA,CAAC"}

package/dist/{maskRegister.d.ts → withHookFormMask.d.ts}

@@ -1,6 +1,6 @@
 import Inputmask from 'inputmask';
 import { UseFormRegisterReturn } from 'react-hook-form';
-declare const maskRegister: (registerReturn: UseFormRegisterReturn, mask: Inputmask.Options['mask'], options?: Inputmask.Options | undefined) => {
+declare const withHookFormMask: (registerReturn: UseFormRegisterReturn, mask: Inputmask.Options['mask'], options?: Inputmask.Options) => {
     ref: ((_ref: any) => void) | undefined;
     onChange: import("react-hook-form").ChangeHandler;
     onBlur: import("react-hook-form").ChangeHandler;
@@ -13,4 +13,4 @@ declare const maskRegister: (registerReturn: UseFormRegisterReturn, mask: Inputm
     required?: boolean | undefined;
     disabled?: boolean | undefined;
 };
-export default maskRegister;
+export default withHookFormMask;

package/dist/withMask.d.ts

@@ -0,0 +1,3 @@
+import Inputmask from 'inputmask';
+declare const withFinalFormMask: (mask: Inputmask.Options['mask'], options?: Inputmask.Options) => (input: HTMLElement | HTMLInputElement | null) => HTMLElement | HTMLInputElement | null;
+export default withFinalFormMask;

package/package.json

@@ -1,70 +1,78 @@
 {
   "name": "use-mask-input",
-  "version": "2.1.0",
+  "version": "3.0.1",
   "description": "A react Hook for build elegant input masks. Compatible with React Hook Form",
   "author": "eduardoborges",
   "license": "MIT",
   "repository": "https://github.com/eduardoborges/use-mask-input",
-  "main": "dist/index.js",
-  "module": "dist/index.modern.js",
-  "source": "src/index.tsx",
+  "source": "./src/index.tsx",
+  "exports": {
+    "require": "./dist/index.js",
+    "default": "./dist/index.modern.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.module.js",
+  "unpkg": "./dist/index.umd.js",
+  "types": "./dist/index.d.ts",
   "engines": {
-    "node": ">=10"
+    "node": ">=18"
   },
   "scripts": {
-    "build": "microbundle-crl --no-compress --format modern,cjs",
+    "build": "microbundle",
     "start": "vite",
     "prepare": "npm run build",
-    "test": "concurrently \"test:unit test:lint test:build\"",
+    "test": "concurrently 'npm run test:*'",
     "test:build": "npm run build",
-    "test:lint": "eslint .",
+    "test:lint": "eslint src",
     "test:unit": "",
-    "test:watch": "",
-    "predeploy": "npm install && npm run build"
+    "test:watch": ""
   },
   "peerDependencies": {
-    "react": "^17.x",
-    "react-dom": "^17.x"
+    "react": ">=17",
+    "react-dom": ">=17"
   },
   "devDependencies": {
-    "@semantic-release/changelog": "6.0.1",
+    "@semantic-release/changelog": "6.0.2",
     "@semantic-release/commit-analyzer": "9.0.2",
     "@semantic-release/git": "10.0.1",
-    "@semantic-release/github": "8.0.5",
-    "@semantic-release/npm": "^9.0.1",
+    "@semantic-release/github": "8.0.7",
+    "@semantic-release/npm": "9.0.2",
     "@semantic-release/release-notes-generator": "10.0.3",
     "@types/inputmask": "^5.0.3",
-    "@types/jest": "29.0.3",
+    "@types/jest": "29.2.6",
     "@types/lodash.flowright": "^3.5.7",
     "@types/node": "18",
-    "@types/react": "^17.x",
-    "@types/react-dom": "^17.x",
-    "@typescript-eslint/eslint-plugin": "^5.38.1",
-    "@typescript-eslint/parser": "^5.38.1",
-    "@vitejs/plugin-react": "2.1.0",
-    "concurrently": "^7.4.0",
+    "@types/react": ">=17",
+    "@types/react-dom": ">=17",
+    "@typescript-eslint/eslint-plugin": "5.49.0",
+    "@typescript-eslint/parser": "5.49.0",
+    "@vitejs/plugin-react": "3.0.1",
+    "concurrently": "7.6.0",
     "cross-env": "7.0.3",
-    "eslint": "^8.24.0",
-    "eslint-config-airbnb": "^19.0.4",
+    "eslint": "8.32.0",
+    "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-react": "7.32.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "gh-pages": "4.0.0",
-    "microbundle-crl": "0.13.11",
-    "semantic-release": "19.0.3",
-    "typescript": "4.8.3",
-    "vite": "3.1.3"
+    "gh-pages": "5.0.0",
+    "microbundle": "0.15.1",
+    "semantic-release": "20.0.3",
+    "typescript": "4.9.4",
+    "vite": "4.0.4",
+    "react-final-form": "6.5.9",
+    "react-hook-form": "^7.42.1",
+    "final-form": "4.20.9"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "inputmask": "^5.0.7",
-    "lodash.compose": "^2.4.1",
-    "lodash.flowright": "^3.5.0",
-    "react-hook-form": "^7.36.1"
+    "inputmask": "5.0.7",
+    "lodash.compose": "2.4.1",
+    "lodash.flowright": "3.5.0"
   },
   "bundleDependencies": [
     "inputmask"

package/src/example/App.example.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { Form, Field } from 'react-final-form';
+import { withHookFormMask, withMask } from '../index';
+
+function App() {
+  const { register, handleSubmit } = useForm();
+
+  const onSubmit = (data: any) => {
+    console.log(data);
+  };
+
+  return (
+    <>
+      <h3>Using simple ref</h3>
+      <input type="text" ref={withMask(['(99) 9999 9999', '(99) 9 9999 9999'])} />
+      <hr />
+      <h3>Using react-hook-form</h3>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <input
+          type="text"
+          {...withHookFormMask(register('phone'), ['(99) 9999 9999', '(99) 9 9999 9999'])}
+        />
+        <button type="submit">Submit</button>
+      </form>
+      <hr />
+
+      <Form
+        onSubmit={onSubmit}
+        render={({ handleSubmit: _handleSubmit }) => (
+          <form onSubmit={_handleSubmit}>
+            <h3>working with example react-final-form </h3>
+            <Field
+              name="phone"
+              render={({ input, meta }) => (
+                <label htmlFor="phone">
+                  Phone
+                  <input ref={withMask('9999-9999')} {...input} placeholder="Phone" />
+                  {meta.touched && meta.error && <span>{meta.error}</span>}
+                </label>
+              )}
+            />
+            <button type="submit">Submit</button>
+          </form>
+        )}
+      />
+    </>
+  );
+}
+
+export default App;

package/src/example/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { render } from 'react-dom';
+import App from './App.example';
+
+render(<App />, document.getElementById('root'));

package/src/index.tsx

@@ -0,0 +1,3 @@
+export { default } from './useMaskInput';
+export { default as withHookFormMask } from './withHookFormMask';
+export { default as withMask } from './withMask';

package/src/useMaskInput.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from 'react';
+import Inputmask from 'inputmask';
+
+interface UseInputMaskOptions {
+  mask: Inputmask.Options['mask']
+  register?(element: HTMLElement): void
+  options?: Inputmask.Options
+}
+
+const useInputMask = (props: UseInputMaskOptions) => {
+  const { mask, register, options } = props;
+
+  const ref = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const maskInput = Inputmask({
+      mask,
+      ...options,
+    });
+
+    maskInput.mask(ref.current);
+
+    if (register && ref.current) {
+      register(ref.current);
+    }
+  }, [mask, register, options]);
+
+  return ref;
+};
+
+export default useInputMask;

package/src/withHookFormMask.ts

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/space-before-blocks */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import Inputmask from 'inputmask';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import flowright from 'lodash.flowright';
+
+const withHookFormMask = (
+  registerReturn: UseFormRegisterReturn,
+  mask: Inputmask.Options['mask'],
+  options?: Inputmask.Options,
+) => {
+  //
+  let newRef;
+
+  if (registerReturn){
+    const { ref } = registerReturn;
+
+    const maskInput = Inputmask({
+      mask,
+      jitMasking: true,
+      ...options,
+    });
+
+    newRef = flowright(ref, (_ref) => {
+      maskInput.mask(_ref);
+      return _ref;
+    });
+  }
+
+  return {
+    ...registerReturn,
+    ref: newRef,
+  };
+};
+
+export default withHookFormMask;

package/src/withMask.ts

@@ -0,0 +1,20 @@
+import Inputmask from 'inputmask';
+
+const withFinalFormMask = (
+  mask: Inputmask.Options['mask'],
+  options?: Inputmask.Options,
+) => (input: HTMLElement | HTMLInputElement | null) => {
+  //
+  const maskInput = Inputmask({
+    mask,
+    ...options,
+  });
+
+  if (input) {
+    maskInput.mask(input);
+  }
+
+  return input;
+};
+
+export default withFinalFormMask;

package/dist/index.modern.js

@@ -1,66 +0,0 @@
-import { useRef, useEffect } from 'react';
-import Inputmask from 'inputmask';
-import flowright from 'lodash.flowright';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-var useInputMask = function useInputMask(props) {
-  var mask = props.mask,
-      register = props.register,
-      options = props.options;
-  var ref = useRef(null);
-  useEffect(function () {
-    if (!ref.current) {
-      return;
-    }
-
-    var maskInput = Inputmask(_extends({
-      mask: mask
-    }, options));
-    maskInput.mask(ref.current);
-
-    if (register && ref.current) {
-      register(ref.current);
-    }
-  }, [mask, register, options]);
-  return ref;
-};
-
-var maskRegister = function maskRegister(registerReturn, mask, options) {
-  var newRef;
-
-  if (registerReturn) {
-    var ref = registerReturn.ref;
-    var maskInput = Inputmask(_extends({
-      mask: mask,
-      jitMasking: true
-    }, options));
-    newRef = flowright(ref, function (_ref) {
-      maskInput.mask(_ref);
-      return _ref;
-    });
-  }
-
-  return _extends({}, registerReturn, {
-    ref: newRef
-  });
-};
-
-export default useInputMask;
-export { maskRegister };
-//# sourceMappingURL=index.modern.js.map

package/dist/index.modern.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.modern.js","sources":["../src/useMaskInput.ts","../src/maskRegister.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n  mask: Inputmask.Options['mask']\n  register?(element: HTMLElement): void\n  options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n  const { mask, register, options } = props;\n\n  const ref = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const maskInput = Inputmask({\n      mask,\n      ...options,\n    });\n\n    maskInput.mask(ref.current);\n\n    if (register && ref.current) {\n      register(ref.current);\n    }\n  }, [mask, register, options]);\n\n  return ref;\n};\n\nexport default useInputMask;\n","/* eslint-disable @typescript-eslint/space-before-blocks */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport Inputmask from 'inputmask';\nimport { UseFormRegisterReturn } from 'react-hook-form';\nimport flowright from 'lodash.flowright';\n\nconst maskRegister = (\n  registerReturn: UseFormRegisterReturn,\n  mask: Inputmask.Options['mask'],\n  options?: Inputmask.Options,\n) => {\n  //\n  let newRef;\n\n  if (registerReturn){\n    const { ref } = registerReturn;\n\n    const maskInput = Inputmask({\n      mask,\n      jitMasking: true,\n      ...options,\n    });\n\n    newRef = flowright(ref, (_ref) => {\n      maskInput.mask(_ref);\n      return _ref;\n    });\n  }\n\n  return {\n    ...registerReturn,\n    ref: newRef,\n  };\n};\n\nexport default maskRegister;\n"],"names":["useInputMask","props","mask","register","options","ref","useRef","useEffect","current","maskInput","Inputmask","maskRegister","registerReturn","newRef","jitMasking","flowright","_ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;AASA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD;EACnB,IAAQC,IAAR,GAAoCD,KAApC,CAAQC,IAAR;MAAcC,QAAd,GAAoCF,KAApC,CAAcE,QAAd;MAAwBC,OAAxB,GAAoCH,KAApC,CAAwBG,OAAxB;EAEA,IAAMC,GAAG,GAAGC,MAAM,CAAmB,IAAnB,CAAlB;EAEAC,SAAS,CAAC;IACR,IAAI,CAACF,GAAG,CAACG,OAAT,EAAkB;MAChB;;;IAGF,IAAMC,SAAS,GAAGC,SAAS;MACzBR,IAAI,EAAJA;OACGE,OAFsB,EAA3B;IAKAK,SAAS,CAACP,IAAV,CAAeG,GAAG,CAACG,OAAnB;;IAEA,IAAIL,QAAQ,IAAIE,GAAG,CAACG,OAApB,EAA6B;MAC3BL,QAAQ,CAACE,GAAG,CAACG,OAAL,CAAR;;GAbK,EAeN,CAACN,IAAD,EAAOC,QAAP,EAAiBC,OAAjB,CAfM,CAAT;EAiBA,OAAOC,GAAP;AACD,CAvBD;;ACHA,IAAMM,YAAY,GAAG,SAAfA,YAAe,CACnBC,cADmB,EAEnBV,IAFmB,EAGnBE,OAHmB;EAMnB,IAAIS,MAAJ;;EAEA,IAAID,cAAJ,EAAmB;IACjB,IAAQP,GAAR,GAAgBO,cAAhB,CAAQP,GAAR;IAEA,IAAMI,SAAS,GAAGC,SAAS;MACzBR,IAAI,EAAJA,IADyB;MAEzBY,UAAU,EAAE;OACTV,OAHsB,EAA3B;IAMAS,MAAM,GAAGE,SAAS,CAACV,GAAD,EAAM,UAACW,IAAD;MACtBP,SAAS,CAACP,IAAV,CAAec,IAAf;MACA,OAAOA,IAAP;KAFgB,CAAlB;;;EAMF,oBACKJ,cADL;IAEEP,GAAG,EAAEQ;;AAER,CA3BD;;;;;"}