use-mask-input 3.0.6 → 3.1.1

package/README.md

@@ -1,28 +1,24 @@
-# use-mask-input
+# 🥸 use-mask-input
 
-[![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)
+[![NPM](https://img.shields.io/npm/v/use-mask-input.svg)](https://www.npmjs.com/package/use-mask-input) [![Bundle Size](https://badgen.net/bundlephobia/minzip/use-mask-input)](https://bundlephobia.com/result?p=use-mask-input)
 
 A React Hook for build elegant and simple input masks.
 
-## Todo
-- [x] Add react-final-form support
-- [x] Simplify API
-- [ ] Make tests :P
-- [ ] Better example page with GH pages
-
+---
 
 ## Features
-
+- 🎯  Simple API
 - ✨  Compatible with [React Hook Form](https://github.com/react-hook-form/react-hook-form)
 - 🏁  Compatible with [React Final Form](https://github.com/final-form/react-final-form)
-- 🎯  Simple API
+
+## Know Issues
+
+- Not compatible with Next.js, but we are working on it
 
 ## Install
 
-```bash
-npm install --save use-mask-input
-## or
-yarn add use-mask-input
+```sh
+npm i use-mask-input
 ```
 
 ## Quickstart
@@ -64,10 +60,12 @@ function App() {
 
 ## Usage with React Final Form
 
+Just use `withMask` normaly.
+
 ```jsx
 import React from 'react';
 import { Form, Field } from 'react-final-form';
-import { withHookFormMask } from 'use-mask-input';
+import { withMask } from 'use-mask-input';
 
 function App() {
   ...
@@ -89,7 +87,3 @@ function App() {
   );
 }
 ```
-
-## License
-
-MIT © [eduardoborges](https://github.com/eduardoborges)

package/dist/index.cjs

@@ -0,0 +1,191 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var Inputmask = require('inputmask');
+
+const isServer = !(typeof window !== 'undefined' && window.document && window.document.createElement);
+function flow(...funcs) {
+    const { length  } = funcs;
+    let index = length;
+    while(index--){
+        if (typeof funcs[index] !== 'function') {
+            throw new TypeError('Expected a function');
+        }
+    }
+    return (...args)=>{
+        let i = 0;
+        let result = length ? funcs[i].apply(this, args) : args[0];
+        while(++i < length){
+            result = funcs[i].call(this, result);
+        }
+        return result;
+    };
+}
+
+function _define_property$2(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$2(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$2(target, key, source[key]);
+        });
+    }
+    return target;
+}
+const useInputMask = (props)=>{
+    const { mask , register , options  } = props;
+    const ref = react.useRef(null);
+    if (isServer) return ref;
+    react.useEffect(()=>{
+        if (!isServer) {
+            if (!ref.current) return;
+            const maskInput = Inputmask(_object_spread$2({
+                mask
+            }, options));
+            maskInput.mask(ref.current);
+            if (register && ref.current) {
+                register(ref.current);
+            }
+        }
+    }, [
+        mask,
+        register,
+        options
+    ]);
+    return ref;
+};
+
+function _define_property$1(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$1(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$1(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+const withHookFormMask = (register, mask, options)=>{
+    //
+    let newRef;
+    if (register) {
+        const { ref  } = register;
+        const maskInput = Inputmask(_object_spread$1({
+            mask
+        }, options));
+        newRef = flow((_ref)=>{
+            if (_ref) maskInput.mask(_ref);
+            return _ref;
+        }, ref);
+    }
+    return _object_spread_props(_object_spread$1({}, register), {
+        ref: newRef
+    });
+};
+
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+const withMask = (mask, options)=>(input)=>{
+        //
+        if (isServer) return input;
+        const maskInput = Inputmask(_object_spread({
+            mask
+        }, options));
+        if (input) {
+            maskInput.mask(input);
+        }
+        return input;
+    };
+
+exports.default = useInputMask;
+exports.withHookFormMask = withHookFormMask;
+exports.withMask = withMask;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/utils.ts","../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["export const isServer = !(\n  typeof window !== 'undefined'\n  && window.document\n  && window.document.createElement\n);\n\nexport function flow(...funcs: Array<Function>) : Function {\n  const { length } = funcs;\n  let index = length;\n  while (index--) {\n    if (typeof funcs[index] !== 'function') {\n      throw new TypeError('Expected a function');\n    }\n  }\n  return (...args: Array<Function>) => {\n    let i = 0;\n    let result = length ? funcs[i].apply(this, args) : args[0];\n    while (++i < length) {\n      result = funcs[i].call(this, result);\n    }\n    return result;\n  };\n}\n","import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\nimport { isServer } from './utils';\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  const ref = useRef<HTMLInputElement>(null);\n  if (isServer) return ref;\n\n  useEffect(() => {\n    if (!isServer) {\n      if (!ref.current) return;\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    }\n  }, [mask, register, options]);\n\n  return ref;\n};\n\nexport default useInputMask;\n","import Inputmask from 'inputmask';\nimport { flow } from './utils';\nimport { Mask, Options, Register } from './types';\n\nexport const withHookFormMask = (register: Register, mask: Mask, options?: Options) => {\n  //\n  let newRef;\n\n  if (register) {\n    const { ref } = register;\n\n    const maskInput = Inputmask({\n      mask,\n      ...options,\n    });\n\n    newRef = flow((_ref: HTMLElement) => {\n      if (_ref) maskInput.mask(_ref);\n      return _ref;\n    }, ref);\n  }\n\n  return {\n    ...register,\n    ref: newRef,\n  };\n};\n","import Inputmask from 'inputmask';\nimport { isServer } from './utils';\nimport { Input, Mask, Options } from './types';\n\nexport const withMask = (mask: Mask, options?: Options) => (input: Input) => {\n  //\n  if (isServer) return input;\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"],"names":["isServer","window","document","createElement","flow","funcs","length","index","TypeError","args","i","result","apply","call","useInputMask","props","mask","register","options","ref","useRef","useEffect","current","maskInput","Inputmask","_object_spread","withHookFormMask","newRef","_ref","withMask","input"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,3 +1,34 @@
-export { default } from './useMaskInput';
-export { default as withHookFormMask } from './withHookFormMask';
-export { default as withMask } from './withMask';
+import * as react from 'react';
+import Inputmask$1 from 'inputmask';
+import * as react_hook_form from 'react-hook-form';
+import { UseFormRegisterReturn } from 'react-hook-form';
+
+interface UseInputMaskOptions {
+    mask: Inputmask$1.Options['mask'];
+    register?(element: HTMLElement): void;
+    options?: Inputmask$1.Options;
+}
+declare const useInputMask: (props: UseInputMaskOptions) => react.RefObject<HTMLInputElement>;
+
+type Register = UseFormRegisterReturn;
+type Mask = Inputmask.Options['mask'];
+type Options = Inputmask.Options;
+type Input = HTMLInputElement | HTMLTextAreaElement | HTMLElement | HTMLInputElement | null;
+
+declare const withHookFormMask: (register: Register, mask: Mask, options?: Options) => {
+    ref: Function | undefined;
+    onChange: react_hook_form.ChangeHandler;
+    onBlur: react_hook_form.ChangeHandler;
+    name: string;
+    min?: string | number | undefined;
+    max?: string | number | undefined;
+    maxLength?: number | undefined;
+    minLength?: number | undefined;
+    pattern?: string | undefined;
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+};
+
+declare const withMask: (mask: Mask, options?: Options) => (input: Input) => Input;
+
+export { useInputMask as default, withHookFormMask, withMask };

package/dist/index.js

@@ -1,2 +1,185 @@
-function r(r){return r&&"object"==typeof r&&"default"in r?r.default:r}var t=require("react"),e=r(require("inputmask")),n=r(require("lodash.flowright"));function u(){return(u=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}).apply(this,arguments)}exports.default=function(r){var n=r.mask,a=r.register,i=r.options,o=t.useRef(null);return t.useEffect(function(){o.current&&(e(u({mask:n},i)).mask(o.current),a&&o.current&&a(o.current))},[n,a,i]),o},exports.withHookFormMask=function(r,t,a){var i;if(r){var o=r.ref,s=e(u({mask:t,jitMasking:!0},a));i=n(o,function(r){return r&&s.mask(r),r})}return u({},r,{ref:i})},exports.withMask=function(r,t){return function(n){var a=e(u({mask:r},t));return n&&a.mask(n),n}};
+import { useRef, useEffect } from 'react';
+import Inputmask from 'inputmask';
+
+const isServer = !(typeof window !== 'undefined' && window.document && window.document.createElement);
+function flow(...funcs) {
+    const { length  } = funcs;
+    let index = length;
+    while(index--){
+        if (typeof funcs[index] !== 'function') {
+            throw new TypeError('Expected a function');
+        }
+    }
+    return (...args)=>{
+        let i = 0;
+        let result = length ? funcs[i].apply(this, args) : args[0];
+        while(++i < length){
+            result = funcs[i].call(this, result);
+        }
+        return result;
+    };
+}
+
+function _define_property$2(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$2(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$2(target, key, source[key]);
+        });
+    }
+    return target;
+}
+const useInputMask = (props)=>{
+    const { mask , register , options  } = props;
+    const ref = useRef(null);
+    if (isServer) return ref;
+    useEffect(()=>{
+        if (!isServer) {
+            if (!ref.current) return;
+            const maskInput = Inputmask(_object_spread$2({
+                mask
+            }, options));
+            maskInput.mask(ref.current);
+            if (register && ref.current) {
+                register(ref.current);
+            }
+        }
+    }, [
+        mask,
+        register,
+        options
+    ]);
+    return ref;
+};
+
+function _define_property$1(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$1(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$1(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+const withHookFormMask = (register, mask, options)=>{
+    //
+    let newRef;
+    if (register) {
+        const { ref  } = register;
+        const maskInput = Inputmask(_object_spread$1({
+            mask
+        }, options));
+        newRef = flow((_ref)=>{
+            if (_ref) maskInput.mask(_ref);
+            return _ref;
+        }, ref);
+    }
+    return _object_spread_props(_object_spread$1({}, register), {
+        ref: newRef
+    });
+};
+
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+const withMask = (mask, options)=>(input)=>{
+        //
+        if (isServer) return input;
+        const maskInput = Inputmask(_object_spread({
+            mask
+        }, options));
+        if (input) {
+            maskInput.mask(input);
+        }
+        return input;
+    };
+
+export { useInputMask as default, withHookFormMask, withMask };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"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) return;\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 type { 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      if (_ref) 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","useRef","useEffect","ref","current","Inputmask","registerReturn","jitMasking","newRef","flowright","_ref","maskInput","input"],"mappings":"2YASqB,SAACA,GACpB,MAAoCA,EAA5BC,KAAMC,EAAsBF,EAAtBE,SAAUC,EAAYH,EAAZG,UAEZC,SAAyB,MAiBrC,OAfAC,YAAU,WACHC,EAAIC,UAESC,KAChBP,KAAAA,GACGE,IAGKF,KAAKK,EAAIC,SAEfL,GAAYI,EAAIC,SAClBL,EAASI,EAAIC,WAEd,CAACN,EAAMC,EAAUC,gCCrBG,SACvBM,EACAR,EACAE,GAGA,MAEA,GAAIM,EAAe,CACjB,MAAgBA,EAARH,MAEUE,KAChBP,KAAAA,EACAS,YAAY,GACTP,IAGLQ,EAASC,EAAUN,EAAK,SAACO,GAEvB,OADIA,GAAMC,EAAUb,KAAKY,OAK7B,YACKJ,GACHH,IAAKK,sBC7BiB,SACxBV,EACAE,mBACIY,GAEJ,MAAkBP,KAChBP,KAAAA,GACGE,IAOL,OAJIY,GACFD,EAAUb,KAAKc"}
+{"version":3,"file":"index.js","sources":["../src/utils.ts","../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["export const isServer = !(\n  typeof window !== 'undefined'\n  && window.document\n  && window.document.createElement\n);\n\nexport function flow(...funcs: Array<Function>) : Function {\n  const { length } = funcs;\n  let index = length;\n  while (index--) {\n    if (typeof funcs[index] !== 'function') {\n      throw new TypeError('Expected a function');\n    }\n  }\n  return (...args: Array<Function>) => {\n    let i = 0;\n    let result = length ? funcs[i].apply(this, args) : args[0];\n    while (++i < length) {\n      result = funcs[i].call(this, result);\n    }\n    return result;\n  };\n}\n","import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\nimport { isServer } from './utils';\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  const ref = useRef<HTMLInputElement>(null);\n  if (isServer) return ref;\n\n  useEffect(() => {\n    if (!isServer) {\n      if (!ref.current) return;\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    }\n  }, [mask, register, options]);\n\n  return ref;\n};\n\nexport default useInputMask;\n","import Inputmask from 'inputmask';\nimport { flow } from './utils';\nimport { Mask, Options, Register } from './types';\n\nexport const withHookFormMask = (register: Register, mask: Mask, options?: Options) => {\n  //\n  let newRef;\n\n  if (register) {\n    const { ref } = register;\n\n    const maskInput = Inputmask({\n      mask,\n      ...options,\n    });\n\n    newRef = flow((_ref: HTMLElement) => {\n      if (_ref) maskInput.mask(_ref);\n      return _ref;\n    }, ref);\n  }\n\n  return {\n    ...register,\n    ref: newRef,\n  };\n};\n","import Inputmask from 'inputmask';\nimport { isServer } from './utils';\nimport { Input, Mask, Options } from './types';\n\nexport const withMask = (mask: Mask, options?: Options) => (input: Input) => {\n  //\n  if (isServer) return input;\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"],"names":["isServer","window","document","createElement","flow","funcs","length","index","TypeError","args","i","result","apply","call","useInputMask","props","mask","register","options","ref","useRef","useEffect","current","maskInput","Inputmask","_object_spread","withHookFormMask","newRef","_ref","withMask","input"],"mappings":"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"}

package/package.json

@@ -1,71 +1,72 @@
 {
   "name": "use-mask-input",
-  "version": "3.0.6",
+  "version": "3.1.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",
-  "source": "src/index.tsx",
-  "main": "dist/index.js",
-  "module": "dist/index.modern.js",
-  "unpkg": "dist/index.umd.js",
-  "types": "dist/index.d.ts",
+  "source": "./src/index.tsx",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs",
+    "types": "./dist/index.d.ts"
+  },
   "engines": {
-    "node": ">=16"
+    "node": ">=16",
+    "npm": ">=7"
   },
   "scripts": {
-    "build": "microbundle-crl --format modern,cjs,umd",
-    "start": "vite",
-    "prepare": "npm run build",
-    "lint": "eslint src"
+    "build": "./sh build",
+    "dev": "./sh dev",
+    "lint": "./sh lint",
+    "test": "./sh test",
+    "prepare": "./sh prepare",
+    "example": "./sh example"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "inputmask": "5.0.8"
   },
   "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17"
+    "react": ">=16.4 || 17 || 18",
+    "react-dom": ">=16.4 || 17 || 18"
   },
   "devDependencies": {
-    "@semantic-release/changelog": "6.0.2",
+    "@semantic-release/changelog": "6.0.3",
     "@semantic-release/commit-analyzer": "9.0.2",
     "@semantic-release/git": "10.0.1",
     "@semantic-release/github": "8.0.7",
-    "@semantic-release/npm": "9.0.2",
-    "@semantic-release/release-notes-generator": "10.0.3",
+    "@semantic-release/npm": "10.0.3",
+    "@semantic-release/release-notes-generator": "11.0.1",
     "@types/inputmask": "^5.0.3",
-    "@types/jest": "29.4.0",
-    "@types/lodash.flowright": "^3.5.7",
-    "@types/node": "18",
-    "@types/react": ">=17",
-    "@types/react-dom": ">=17",
-    "@typescript-eslint/eslint-plugin": "5.50.0",
-    "@typescript-eslint/parser": "5.50.0",
-    "@vitejs/plugin-react": "3.0.1",
-    "concurrently": "7.6.0",
-    "cross-env": "7.0.3",
-    "eslint": "8.33.0",
+    "@types/node": "16",
+    "@types/react": ">=16.4 || ^17.0.0 || ^18.0.0",
+    "@types/react-dom": ">=16.4 || ^17.0.0 || ^18.0.0",
+    "@typescript-eslint/eslint-plugin": "5.59.2",
+    "@typescript-eslint/parser": "5.59.2",
+    "eslint": "8.39.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jsx-a11y": "6.7.1",
-    "eslint-plugin-react": "7.32.1",
+    "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "final-form": "4.20.9",
-    "microbundle": "0.15.1",
-    "microbundle-crl": "^0.13.11",
-    "react-final-form": "6.5.9",
-    "react-hook-form": "^7.42.1",
-    "semantic-release": "20.1.0",
-    "typescript": "4.9.5",
-    "vite": "4.1.1"
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "dependencies": {
-    "inputmask": "5.0.7",
-    "lodash.flowright": "3.5.0"
+    "react-hook-form": "^7",
+    "read-pkg": "^8.0.0",
+    "rollup": "^3.21.4",
+    "rollup-plugin-dts": "^5.3.0",
+    "rollup-plugin-swc3": "^0.8.1",
+    "semantic-release": "21.0.2",
+    "simple-git-hooks": "^2.8.1",
+    "typescript": "4.9",
+    "vitest": "^0.31.0"
   },
-  "bundleDependencies": [
-    "inputmask"
-  ]
+  "simple-git-hooks": {
+    "pre-commit": "npm run lint && npm run test && npm run build"
+  }
 }

package/src/index.tsx

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

package/src/types.ts

@@ -0,0 +1,6 @@
+import type { UseFormRegisterReturn } from 'react-hook-form';
+
+export type Register = UseFormRegisterReturn;
+export type Mask = Inputmask.Options['mask'];
+export type Options = Inputmask.Options;
+export type Input = HTMLInputElement | HTMLTextAreaElement | HTMLElement | HTMLInputElement | null;