Fix/remove finddomnode

.babelrc

@@ -4,7 +4,7 @@
     "@babel/preset-react"
   ],
   "plugins": [
-    ["@babel/plugin-proposal-class-properties", { "loose": true }],
+    ["@babel/plugin-proposal-class-properties", { "loose": true }]
   ],
   "env": {
     "test": {

.gitignore

@@ -2,4 +2,5 @@ node_modules
 lib
 dist
 npm-debug.log
-browserStack.json
+browserStack.json
+Session.vim

.size-snapshot.json

@@ -1,22 +1,22 @@
 {
   "dist/react-input-mask.js": {
-    "bundled": 79669,
-    "minified": 26008,
-    "gzipped": 8342
+    "bundled": 72731,
+    "minified": 23443,
+    "gzipped": 7886
   },
   "lib/react-input-mask.development.js": {
-    "bundled": 30278,
-    "minified": 12895,
-    "gzipped": 4267
+    "bundled": 29131,
+    "minified": 12358,
+    "gzipped": 4109
   },
   "dist/react-input-mask.min.js": {
-    "bundled": 44160,
-    "minified": 15279,
-    "gzipped": 5298
+    "bundled": 30580,
+    "minified": 10544,
+    "gzipped": 3782
   },
   "lib/react-input-mask.production.min.js": {
-    "bundled": 28947,
-    "minified": 11818,
-    "gzipped": 3931
+    "bundled": 28000,
+    "minified": 11281,
+    "gzipped": 3783
   }
 }

README.md

@@ -146,10 +146,42 @@ function InvalidInput(props) {
 }
 ```
 
+**Caveat**: To support both class and function component children InputMask used to use `ReactDOM.findDOMNode`, which is now [deprecated](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage). To handle removing this, direct child class components are **no longer supported**. The `children` component is now either:
+
+1. a function component that implments `React.forwardRef`
+
+    ```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} />;
+    });
+    ```
+
+For more information see the [Material UI Composition guide - caveat with Refs](https://mui.com/material-ui/guides/composition/#caveat-with-refs).
+
 # Known Issues
 ### Autofill
 Browser's autofill requires either empty value in input or value which exactly matches beginning of the autofilled value. I.e. autofilled value "+1 (555) 123-4567" will work with "+1" or "+1 (5", but won't work with "+1 (\_\_\_) \_\_\_-\_\_\_\_" or "1 (555)". There are several possible solutions:
-1. Set `maskChar` to null and trim space after "+1" with `beforeMaskedStateChange` if no more digits are entered.
+1. Set `maskPlaceholder` to null and trim space after "+1" with `beforeMaskedStateChange` if no more digits are entered.
 2. Apply mask only if value is not empty. In general, this is the most reliable solution because we can't be sure about formatting in autofilled value.
 3. Use less formatting in the mask.
 
@@ -162,11 +194,12 @@ 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.
 
 There is a few possible workarounds
+
 ```js
 // Start typing without calling focus() explicitly.
 // type() is an action command and focuses input anyway
@@ -186,7 +219,13 @@ cy.get("input")
   .wait(50)
   .type("12345")
   .should("have.value", "12/34/5___");
-````
+```
+
+# Building
+
+Running `npm install` runs `lint`, `test`, `clean` 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`.
 
 # Thanks
 Thanks to [BrowserStack](https://www.browserstack.com/) for the help with testing on real devices

dev/index.js

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

index.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-unresolved */
 
 if (process.env.NODE_ENV === "production") {
-  module.exports = require("./lib/react-input-mask.production.min.js");
+  module.exports = require("./lib/react-input-mask.production.min");
 } else {
-  module.exports = require("./lib/react-input-mask.development.js");
+  module.exports = require("./lib/react-input-mask.development");
 }