feat/types

.babelrc

@@ -37,9 +37,7 @@
       ]
     },
     "rollup": {
-      "plugins": [
-        "babel-plugin-dev-expression"
-      ]
+      "plugins": ["babel-plugin-dev-expression"]
     }
   }
-}
+}

.eslintrc.js

@@ -1,22 +1,22 @@
 const OFF = 0;
-const WARN = 1;
+// const WARN = 1;
 const ERROR = 2;
 
 module.exports = {
-  parser: "babel-eslint",
+  parser: "@babel/eslint-parser",
   parserOptions: {
-    ecmaVersion: 2018
+    ecmaVersion: 2018,
   },
   extends: ["airbnb", "prettier"],
   plugins: ["prettier", "react-hooks"],
   env: {
-    browser: true
+    browser: true,
   },
   rules: {
     "react/jsx-filename-extension": OFF,
     "react/jsx-props-no-spreading": OFF,
     "react/require-default-props": OFF,
-    'react/no-find-dom-node': OFF,
+    "react/no-find-dom-node": OFF,
     "react/prop-types": [ERROR, { ignore: ["value", "defaultValue"] }],
     "react-hooks/rules-of-hooks": ERROR,
     "react-hooks/exhaustive-deps": ERROR,
@@ -25,9 +25,12 @@ module.exports = {
     "no-plusplus": OFF,
     "global-require": OFF,
     "consistent-return": OFF,
-    "prefer-const": [ERROR, {
-        "destructuring": "all"
-    }],
+    "prefer-const": [
+      ERROR,
+      {
+        destructuring: "all",
+      },
+    ],
     "prettier/prettier": ERROR,
-  }
+  },
 };

.husky/pre-commit

@@ -0,0 +1 @@
+npx --no lint-staged

.size-snapshot.json

@@ -1,22 +1,22 @@
 {
   "dist/react-input-mask.js": {
-    "bundled": 72731,
-    "minified": 23443,
-    "gzipped": 7886
+    "bundled": 72798,
+    "minified": 23579,
+    "gzipped": 7913
   },
   "lib/react-input-mask.development.js": {
-    "bundled": 29131,
-    "minified": 12358,
-    "gzipped": 4109
+    "bundled": 29196,
+    "minified": 12423,
+    "gzipped": 4126
   },
   "dist/react-input-mask.min.js": {
-    "bundled": 30580,
-    "minified": 10544,
-    "gzipped": 3782
+    "bundled": 30623,
+    "minified": 10612,
+    "gzipped": 3797
   },
   "lib/react-input-mask.production.min.js": {
-    "bundled": 28000,
-    "minified": 11281,
-    "gzipped": 3783
+    "bundled": 28043,
+    "minified": 11346,
+    "gzipped": 3793
   }
 }

README.md

@@ -3,6 +3,7 @@
 <!--
 [![Build Status](https://img.shields.io/travis/sanniassin/react-input-mask/master.svg?style=flat)](https://travis-ci.org/sanniassin/react-input-mask) [![npm version](https://img.shields.io/npm/v/react-input-mask.svg?style=flat)](https://www.npmjs.com/package/react-input-mask) [![npm downloads](https://img.shields.io/npm/dm/react-input-mask.svg?style=flat)](https://www.npmjs.com/package/react-input-mask)
 -->
+
 [![npm version](https://img.shields.io/npm/v/@mona-health/react-input-mask.svg?style=flat)](https://www.npmjs.com/package/@mona-health/react-input-mask)
 
 Input masking component for React. Made with attention to UX.
@@ -27,8 +28,8 @@ react-input-mask v3 requires **React 16.8.0 or later.** If you need support for
 # Usage
 
 ```jsx
-import React from 'react'
-import InputMask from '@mona-health/react-input-mask'
+import React from "react";
+import InputMask from "@mona-health/react-input-mask";
 
 function DateInput(props) {
   return (
@@ -117,13 +118,13 @@ Selection positions will be `null` if input isn't focused and during rendering.
 // Trim trailing slashes
 function beforeMaskedStateChange({ nextState }) {
   let { value } = nextState;
-  if (value.endsWith('/')) {
+  if (value.endsWith("/")) {
     value = value.slice(0, -1);
   }
 
   return {
     ...nextState,
-    value
+    value,
   };
 }
 
@@ -143,9 +144,9 @@ Please note that `beforeMaskedStateChange` executes more often than `onChange` a
 To use another component instead of regular `<input />` provide it as children. The following properties, if used, should always be defined on the `InputMask` component itself: `onChange`, `onMouseDown`, `onFocus`, `onBlur`, `value`, `disabled`, `readOnly`.
 
 ```jsx
-import React from 'react';
-import InputMask from '@mona-health/react-input-mask';
-import MaterialInput from '@material-ui/core/Input';
+import React from "react";
+import InputMask from "@mona-health/react-input-mask";
+import MaterialInput from "@material-ui/core/Input";
 
 // Will work fine
 function Input(props) {
@@ -170,31 +171,30 @@ function InvalidInput(props) {
 
 1. a function component that implments `React.forwardRef`
 
-    ```jsx
-    const FunctionalInputComponent = React.forwardRef((props, ref) => {
-      return (
-        <input ref={ref} {...props} />
-      );
-    });
-    ```
+   ```jsx
+   const FunctionalInputComponent = React.forwardRef((props, ref) => {
+     return <input ref={ref} {...props} />;
+   });
+   ```
+
 2. a class component that is wrapped in a function component that implements `React.forwardRef` (`innerRef` can be called anything as long as it's not `ref`)
 
-    ```jsx
-    class InnerClassInputComponent extends React.Component {
-      render() {
-        const { innerRef, ...restProps } = this.props;
-        return (
-          <div>
-            <input ref={innerRef} {...restProps} />
-          </div>
-        );
-      }
-    }
-
-    const ClassInputComponent = React.forwardRef((props, ref) => {
-      return <InnerClassInputComponent innerRef={ref} {...props} />;
-    });
-    ```
+   ```jsx
+   class InnerClassInputComponent extends React.Component {
+     render() {
+       const { innerRef, ...restProps } = this.props;
+       return (
+         <div>
+           <input ref={innerRef} {...restProps} />
+         </div>
+       );
+     }
+   }
+
+   const ClassInputComponent = React.forwardRef((props, ref) => {
+     return <InnerClassInputComponent innerRef={ref} {...props} />;
+   });
+   ```
 
 For more information see the [Material UI Composition guide - caveat with Refs](https://mui.com/material-ui/guides/composition/#caveat-with-refs).
 
@@ -215,10 +215,7 @@ Please note that it might lead to worse user experience (should I enter +1 if in
 The following sequence could fail
 
 ```js
-cy.get('input')
-  .focus()
-  .type('12345')
-  .should('have.value', '12/34/5___'); // expected <input> to have value 12/34/5___, but the value was 23/45/____
+cy.get("input").focus().type("12345").should("have.value", "12/34/5___"); // expected <input> to have value 12/34/5___, but the value was 23/45/____
 ```
 
 Since [focus is not an action command](https://docs.cypress.io/api/commands/focus.html#Focus-is-not-an-action-command), it behaves differently than the real user interaction and, therefore, less reliable.
@@ -228,27 +225,22 @@ There is a few possible workarounds
 ```js
 // Start typing without calling focus() explicitly.
 // type() is an action command and focuses input anyway
-cy.get('input')
-  .type('12345')
-  .should('have.value', '12/34/5___')
+cy.get("input").type("12345").should("have.value", "12/34/5___");
 
 // Use click() instead of focus()
-cy.get('input')
-  .click()
-  .type('12345')
-  .should('have.value', '12/34/5___')
+cy.get("input").click().type("12345").should("have.value", "12/34/5___");
 
 // Or wait a little after focus()
-cy.get('input')
+cy.get("input")
   .focus()
   .wait(50)
-  .type('12345')
-  .should('have.value', '12/34/5___');
+  .type("12345")
+  .should("have.value", "12/34/5___");
 ```
 
 # Building
 
-Running `npm install` runs `lint`, `test`, `clean` and `build` scripts too.
+Running `npm install` runs `lint`, `test`, `clean`, `types` and `build` scripts too.
 
 Set the `CHROME_BIN` environment variable which is the path to the Chrome binary to prevent karma errors in `npm run test`.
 

dev/index.html

@@ -1,11 +1,14 @@
 <!doctype html>
 <html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
-</head>
-<body>
-  <div id="root"></div>
-  <div id="console"></div>
-</body>
-</html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, user-scalable=no"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <div id="console"></div>
+  </body>
+</html>

dev/index.js

@@ -6,7 +6,7 @@ import InputMask from "../src";
 function Input() {
   const [value, setValue] = useState("");
 
-  const onChange = event => {
+  const onChange = (event) => {
     setValue(event.target.value);
   };
 

karma.conf.js

@@ -1,11 +1,11 @@
-module.exports = config => {
+module.exports = (config) => {
   config.set({
     // define browsers
     customLaunchers: {
       ChromeHeadlessNoSandbox: {
         base: "ChromeHeadless",
-        flags: ["--no-sandbox"]
-      }
+        flags: ["--no-sandbox"],
+      },
     },
 
     // start these browsers
@@ -23,7 +23,7 @@ module.exports = config => {
     files: [
       "node_modules/@babel/polyfill/dist/polyfill.min.js",
       "node_modules/console-polyfill/index.js",
-      "tests/input/*.js"
+      "tests/input/*.js",
     ],
 
     // list of files to exclude
@@ -32,7 +32,7 @@ module.exports = config => {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
-      "tests/input/*.js": ["webpack"]
+      "tests/input/*.js": ["webpack"],
     },
 
     // test results reporter to use
@@ -60,16 +60,16 @@ module.exports = config => {
     webpack: {
       devtool: false,
       performance: {
-        hints: false
+        hints: false,
       },
       mode: "development",
       output: {
-        filename: "[name].js"
+        filename: "[name].js",
       },
       resolve: {
-        modules: ["node_modules", "."]
+        modules: ["node_modules", "."],
       },
-      module: require("./webpack.config").module
-    }
+      module: require("./webpack.config").module,
+    },
   });
 };