{"_id":"@mona-health/react-input-mask","_rev":"15-41bfdf824808caed8c60bc9c38dfeab3","name":"@mona-health/react-input-mask","dist-tags":{"alpha":"3.0.0-alpha.10","latest":"3.0.3"},"versions":{"3.0.0-alpha.7":{"name":"@mona-health/react-input-mask","description":"(yet another) Masked input component for React","version":"3.0.0-alpha.7","homepage":"https://github.com/mona-health/react-input-mask","license":"MIT","author":{"name":"Nikita Lobachev","email":"sanniassin@gmail.com"},"contributors":[{"name":"Ian Channing","email":"ian.channing@mona.health"}],"keywords":["react","input","mask","masked","react-component"],"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"devDependencies":{"@babel/cli":"^7.8.3","@babel/core":"^7.8.3","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-transform-modules-commonjs":"^7.8.3","@babel/plugin-transform-proto-to-assign":"^7.8.3","@babel/polyfill":"^7.8.3","@babel/preset-env":"^7.8.3","@babel/preset-react":"^7.8.3","@babel/register":"^7.8.3","babel-eslint":"^10.0.3","babel-loader":"^8.0.6","babel-plugin-dev-expression":"^0.2.2","babel-plugin-minify-dead-code-elimination":"^0.5.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","chai":"^4.2.0","console-polyfill":"^0.3.0","cross-env":"^5.2.1","eslint":"^6.8.0","eslint-config-airbnb":"^18.0.1","eslint-config-prettier":"^6.9.0","eslint-plugin-import":"^2.20.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-react":"^7.18.0","eslint-plugin-react-hooks":"^1.7.0","html-webpack-plugin":"^3.2.0","husky":"^3.1.0","karma":"^4.4.1","karma-chrome-launcher":"^3.1.0","karma-mocha":"^1.3.0","karma-webpack":"^4.0.2","lint-staged":"^9.5.0","mocha":"^6.2.2","prettier":"^1.19.1","puppeteer":"^1.20.0","react":"^16.12.0","react-dom":"^16.12.0","rollup":"^1.29.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-replace":"^2.2.0","rollup-plugin-size-snapshot":"^0.10.0","rollup-plugin-terser":"^5.2.0","webpack":"^4.41.5","webpack-cli":"^3.3.10","webpack-dev-server":"^3.10.1"},"main":"index.js","lint-staged":{"*.js":"eslint"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"scripts":{"clean":"rimraf lib dist","build":"cross-env BABEL_ENV=rollup rollup -c","start":"cross-env BABEL_ENV=test NODE_ENV=development webpack-dev-server","prepare":"npm run lint && npm test && npm run clean && npm run build","lint":"eslint ./src ./tests ./*.js","lint-fix":"eslint --fix ./src ./tests ./*.js","test":"npm run build && npm run test:input && npm run test:server-render && npm run test:build","test:input":"cross-env NODE_ENV=test BABEL_ENV=test karma start","test:server-render":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/server-render","test:build":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/build"},"repository":{"type":"git","url":"git+https://github.com/mona-health/react-input-mask.git"},"dependencies":{"invariant":"^2.2.4","prop-types":"^15.7.2","warning":"^4.0.3"},"gitHead":"0b3b26674c88625f3371e90e2f367b7249b7a39f","bugs":{"url":"https://github.com/mona-health/react-input-mask/issues"},"_id":"@mona-health/react-input-mask@3.0.0-alpha.7","_nodeVersion":"16.19.1","_npmVersion":"9.5.0","dist":{"integrity":"sha512-NjO+5rGseZxfPFXEJ+N6XVq0z2wamMG0gGFUtD3TqNQi+j8Ev68+ApynrT3WJMtWIz7E69yutZ7VggUss24SeA==","shasum":"1ecf5579b1d60926970845e7d4671e47727a17f1","tarball":"https://registry.npmjs.org/@mona-health/react-input-mask/-/react-input-mask-3.0.0-alpha.7.tgz","fileCount":8,"unpackedSize":137402,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDj8ntGMEbVlWenYU375LPbDNYPV4yv7EKX3EJQ9+xUAwIhANoIJb6+aURFdj1wWWonN6NUx7w1o2i/NnIGsDqDo67C"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/L9PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQgBAAjobQXSeyoEFatJUqdj6KpNpg9nWxGtw6mzsER1n8JUhumWNt\r\nB7VtvjCZN/Z6syyUWgwOPuYavUdRiIU5zwcLnRefwQXNknm7J88Zik40G5+k\r\nQ8ucxLNB5yie8RPKBaRMSsCZsO+geblQQHSE/3It4KqKeIdQUkJk4zBXAjLz\r\n6g+2Ks1FR9nuS+T7B8UH6pkXKUMspl5aEXPZ116mNrYRypbbVB+1gc0Dnjta\r\n/jVxyEG0otzGjqU2eIyDRtBcPKMM7f4v970R/9iQKHqvWUrZvYSehdAfTBVh\r\nNdZAeNdAiEPUvlJBPOUXZDCYGksO8wYEW6Ipnu+O8II2wPa3nvdYr3lMnNaO\r\n8pk7UHmsxPLN6Rv0w/8KVoCgMYio4qH4ODpO1upQ/7jirFLUK2McavA+N2ID\r\nmmUey+aOXYyHBpx2Xims/sXaNCjpVlR5JESCVc6LMf7tVrvbWw3QXuysgByX\r\nO0ZEoFYHN60ZjcPuHR73pAY4BN6JEZIrH7v3cJBBZH8Ma0MCv9HIjahKkJZ5\r\nY5TPLnxCFk7RgI9y9FbaqpP4dLROiBuN9eGk8JqYEkaEo4Bx4WVYY9heZa9E\r\nQZ0RBUXxRewA8KsPrxTgDJoBBWaGNusL8XfegobE5YMINFPi+oq+m8OD4QpL\r\njSD5GEkwbliQBYyai8vQHYcxh8k3Xln203Q=\r\n=Df78\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ianchanning","email":"ian_channing@hotmail.com"},"directories":{},"maintainers":[{"name":"ianchanning","email":"ian_channing@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-input-mask_3.0.0-alpha.7_1677508431668_0.45534723452450865"},"_hasShrinkwrap":false,"deprecated":"v3 is now live! Upgrade to @latest"},"3.0.0-alpha.8":{"name":"@mona-health/react-input-mask","description":"(yet another) Masked input component for React","version":"3.0.0-alpha.8","homepage":"https://github.com/mona-health/react-input-mask","license":"MIT","author":{"name":"Nikita Lobachev","email":"sanniassin@gmail.com"},"contributors":[{"name":"Ian Channing","email":"ian.channing@mona.health"}],"keywords":["react","input","mask","masked","react-component"],"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"devDependencies":{"@babel/cli":"^7.8.3","@babel/core":"^7.8.3","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-transform-modules-commonjs":"^7.8.3","@babel/plugin-transform-proto-to-assign":"^7.8.3","@babel/polyfill":"^7.8.3","@babel/preset-env":"^7.8.3","@babel/preset-react":"^7.8.3","@babel/register":"^7.8.3","babel-eslint":"^10.0.3","babel-loader":"^8.0.6","babel-plugin-dev-expression":"^0.2.2","babel-plugin-minify-dead-code-elimination":"^0.5.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","chai":"^4.2.0","console-polyfill":"^0.3.0","cross-env":"^5.2.1","eslint":"^6.8.0","eslint-config-airbnb":"^18.0.1","eslint-config-prettier":"^6.9.0","eslint-plugin-import":"^2.20.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-react":"^7.18.0","eslint-plugin-react-hooks":"^1.7.0","html-webpack-plugin":"^3.2.0","husky":"^3.1.0","karma":"^4.4.1","karma-chrome-launcher":"^3.1.0","karma-mocha":"^1.3.0","karma-webpack":"^4.0.2","lint-staged":"^9.5.0","mocha":"^6.2.2","prettier":"^1.19.1","puppeteer":"^1.20.0","react":"^16.12.0","react-dom":"^16.12.0","rollup":"^1.29.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-replace":"^2.2.0","rollup-plugin-size-snapshot":"^0.10.0","rollup-plugin-terser":"^5.2.0","webpack":"^4.41.5","webpack-cli":"^3.3.10","webpack-dev-server":"^3.10.1"},"main":"index.js","lint-staged":{"*.js":"eslint"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"scripts":{"clean":"rimraf lib dist","build":"cross-env BABEL_ENV=rollup rollup -c","start":"cross-env BABEL_ENV=test NODE_ENV=development webpack-dev-server","prepare":"npm run lint && npm test && npm run clean && npm run build","lint":"eslint ./src ./tests ./*.js","lint-fix":"eslint --fix ./src ./tests ./*.js","test":"npm run build && npm run test:input && npm run test:server-render && npm run test:build","test:input":"cross-env NODE_ENV=test BABEL_ENV=test karma start","test:server-render":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/server-render","test:build":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/build"},"repository":{"type":"git","url":"git+https://github.com/mona-health/react-input-mask.git"},"dependencies":{"invariant":"^2.2.4","prop-types":"^15.7.2","warning":"^4.0.3"},"readme":"# react-input-mask\n\n\n\nInput masking component for React. Made with attention to UX.\n\n**This is a development branch for version 3.0. For the latest stable version [see v2 branch](https://github.com/sanniassin/react-input-mask/tree/v2).**\n\n#### [Demo](http://sanniassin.github.io/react-input-mask/demo.html)\n\n# Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Properties](#properties)\n- [Known Issues](#known-issues)\n\n# Installation\n\n```sh\nnpm install --save mona-health/react-input-mask@alpha\n```\n\nreact-input-mask v3 requires **React 16.8.0 or later.** If you need support for older versions, use [version 2](https://github.com/sanniassin/react-input-mask/tree/v2).\n\n# Usage\n\n```jsx\nimport React from 'react'\nimport InputMask from '@mona-health/react-input-mask'\n\nfunction DateInput(props) {\n return (\n \n );\n}\n```\n\n# Properties\n\n| Name | Type | Default | Description |\n| :-------------------------------------------------------: | :-------------------------------: | :-----: | :------------------------------------------------------------------------------------------- |\n| **[`mask`](#mask)** | `{String\\|Array}` | | Mask format |\n| **[`maskPlaceholder`](#maskplaceholder)** | `{String}` | `_` | Placeholder to cover unfilled parts of the mask |\n| **[`alwaysShowMask`](#alwaysshowmask)** | `{Boolean}` | `false` | Whether mask prefix and placeholder should be displayed when input is empty and has no focus |\n| **[`beforeMaskedStateChange`](#beforemaskedstatechange)** | `{Function}` | | Function to modify value and selection before applying mask |\n| **[`children`](#children)** | `{ReactElement}` | | Custom render function for integration with other input components |\n\n### `mask`\n\nMask format. Can be either a string or array of characters and regular expressions.

\n\n```jsx\n\n```\n\nSimple masks can be defined as strings. The following characters will define mask format:\n\n| Character | Allowed input |\n| :-------: | :-----------: |\n| 9 | 0-9 |\n| a | a-z, A-Z |\n| \\* | 0-9, a-z, A-Z |\n\nAny format character can be escaped with a backslash.

\n\nMore complex masks can be defined as an array of regular expressions and constant characters.\n\n```jsx\n// Canadian postal code mask\nconst firstLetter = /(?!.*[DFIOQU])[A-VXY]/i;\nconst letter = /(?!.*[DFIOQU])[A-Z]/i;\nconst digit = /[0-9]/;\nconst mask = [firstLetter, digit, letter, \" \", digit, letter, digit];\nreturn ;\n```\n\n### `maskPlaceholder`\n\n```jsx\n// Will be rendered as 12/--/--\n\n\n// Will be rendered as 12/mm/yy\n\n\n// Will be rendered as 12/\n\n```\n\nCharacter or string to cover unfilled parts of the mask. Default character is \"\\_\". If set to `null` or empty string, unfilled parts will be empty as in a regular input.\n\n### `alwaysShowMask`\n\nIf enabled, mask prefix and placeholder will be displayed even when input is empty and has no focus.\n\n### `beforeMaskedStateChange`\n\nIn case you need to customize masking behavior, you can provide `beforeMaskedStateChange` function to change masked value and cursor position before it's applied to the input.\n\nIt receieves an object with `previousState`, `currentState` and `nextState` properties. Each state is an object with `value` and `selection` properites where `value` is a string and selection is an object containing `start` and `end` positions of the selection.\n\n1. **previousState:** Input state before change. Only defined on `change` event.\n2. **currentState:** Current raw input state. Not defined during component render.\n3. **nextState:** Input state with applied mask. Contains `value` and `selection` fields.\n\nSelection positions will be `null` if input isn't focused and during rendering.\n\n`beforeMaskedStateChange` must return a new state with `value` and `selection`.\n\n```jsx\n// Trim trailing slashes\nfunction beforeMaskedStateChange({ nextState }) {\n let { value } = nextState;\n if (value.endsWith('/')) {\n value = value.slice(0, -1);\n }\n\n return {\n ...nextState,\n value\n };\n}\n\nreturn (\n \n);\n```\n\nPlease note that `beforeMaskedStateChange` executes more often than `onChange` and must be pure.\n\n### `children`\n\nTo use another component instead of regular `` 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`.\n\n```jsx\nimport React from 'react';\nimport InputMask from '@mona-health/react-input-mask';\nimport MaterialInput from '@material-ui/core/Input';\n\n// Will work fine\nfunction Input(props) {\n return (\n \n \n \n );\n}\n\n// Will throw an error because InputMask's and children's onChange props aren't the same\nfunction InvalidInput(props) {\n return (\n \n \n \n );\n}\n```\n\n**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:\n\n1. a function component that implments `React.forwardRef`\n\n ```jsx\n const FunctionalInputComponent = React.forwardRef((props, ref) => {\n return (\n \n );\n });\n ```\n2. 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`)\n\n ```jsx\n class InnerClassInputComponent extends React.Component {\n render() {\n const { innerRef, ...restProps } = this.props;\n return (\n
\n \n
\n );\n }\n }\n\n const ClassInputComponent = React.forwardRef((props, ref) => {\n return ;\n });\n ```\n\nFor more information see the [Material UI Composition guide - caveat with Refs](https://mui.com/material-ui/guides/composition/#caveat-with-refs).\n\n# Known Issues\n\n### Autofill\n\nBrowser'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:\n\n1. Set `maskPlaceholder` to null and trim space after \"+1\" with `beforeMaskedStateChange` if no more digits are entered.\n2. 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.\n3. Use less formatting in the mask.\n\nPlease note that it might lead to worse user experience (should I enter +1 if input is empty?). You should choose what's more important to your users — smooth typing experience or autofill. Phone and ZIP code inputs are very likely to be autofilled and it's a good idea to care about it, while security confirmation code in two-factor authorization shouldn't care about autofill at all.\n\n### Cypress tests\n\nThe following sequence could fail\n\n```js\ncy.get('input')\n .focus()\n .type('12345')\n .should('have.value', '12/34/5___'); // expected to have value 12/34/5___, but the value was 23/45/____\n```\n\nSince [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.\n\nThere is a few possible workarounds\n\n```js\n// Start typing without calling focus() explicitly.\n// type() is an action command and focuses input anyway\ncy.get('input')\n .type('12345')\n .should('have.value', '12/34/5___')\n\n// Use click() instead of focus()\ncy.get('input')\n .click()\n .type('12345')\n .should('have.value', '12/34/5___')\n\n// Or wait a little after focus()\ncy.get('input')\n .focus()\n .wait(50)\n .type('12345')\n .should('have.value', '12/34/5___');\n```\n\n# Building\n\nRunning `npm install` runs `lint`, `test`, `clean` and `build` scripts too.\n\nSet the `CHROME_BIN` environment variable which is the path to the Chrome binary to prevent karma errors in `npm run test`.\n\n# Thanks\n\nThanks to [BrowserStack](https://www.browserstack.com/) for the help with testing on real devices\n","readmeFilename":"README.md","gitHead":"785be6e5d23a3cdb8337faf8be545f64c3221866","bugs":{"url":"https://github.com/mona-health/react-input-mask/issues"},"_id":"@mona-health/react-input-mask@3.0.0-alpha.8","_nodeVersion":"16.19.1","_npmVersion":"9.5.0","dist":{"integrity":"sha512-p6Q/1ei2sE5skJaOl7QwHKEUf22v0/j9LMiAuK3lzWsgZi6rjkNeCzt1V35kl6Sw3MA595VAf4n94yUq4PI4Og==","shasum":"ab5ea70c62f4e66ed790f57c46e1f01ebc7d477c","tarball":"https://registry.npmjs.org/@mona-health/react-input-mask/-/react-input-mask-3.0.0-alpha.8.tgz","fileCount":8,"unpackedSize":137406,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTJJgYCTO1yMdS2+2VqfQLnh+AMcX9pdU8h3zZEZTjigIhAMR6opKhMrg85/hnUyu06s4gGojUc6zcm6qBAkdEvq1c"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/MQsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrkcw//aH7LLS5m3sLAywweNSHA57G823rSAZyAcgAvDu8evOWYEs6X\r\nurJWRXFpUkdEMMnBycZhyBBuNAwjtWUHxqNJwZVXyf+IXdsJ3qxldiX6bix6\r\nNh0YtLwqSnr3PV+dYVc7DWre8W986HVSbsoSN/s1zjnSsJuUe3ywhB2M3O18\r\nXaEqXK8c1405SQ4UcbkZrK4opwjzB1g1GrQHATvU7jLxQdcD3tNRqSW7KoKd\r\nn+cz2N8MAI6JrJEEETAu4lqnws7T7LqUVARYkv6LpMpjPvIM4tv5+IP1pPr1\r\nIi2qePk5eaJh8QVCEpkyYlvWpk+wTdzTFFW3eRh77LDxGKEE/IfwLhTF3qFB\r\n0UutKFo118D2GfBwDI4e1FJ7jfjAs2M6ggRcCS/v41Eq0f09IOUJc3QUepB2\r\nmW4yDkZ9YYJR05Pf5WmJMZugeRZBpwsNxyV/yk3XLYZgpyzmMSoqA1FeHGny\r\nj/9/iqGSh2+46SUnyB2NYn2PGk8FoOIssTtu4sQyXmTeji4i/+l9s4c8DbeC\r\nmWVG/+aFBOcltke98Cd66sgxxSCX0kuulIfXK4xXJ2mm16VEGsumGiO2do3N\r\nzDG+6qHWAYdt1q/G2hRurWQk2kEv3hZljp5FLpmySgj1SJnMGO8j8h8cRHjR\r\n3ajBcTqNuWwgNI7E9KWNVqM7wzPZ6OhO26Y=\r\n=WvHI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ianchanning","email":"ian_channing@hotmail.com"},"directories":{},"maintainers":[{"name":"ianchanning","email":"ian_channing@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-input-mask_3.0.0-alpha.8_1677509676292_0.010841787492532395"},"_hasShrinkwrap":false,"deprecated":"v3 is now live! Upgrade to @latest"},"3.0.0-alpha.9":{"name":"@mona-health/react-input-mask","description":"(yet another) Masked input component for React","version":"3.0.0-alpha.9","homepage":"https://github.com/mona-health/react-input-mask","license":"MIT","author":{"name":"Nikita Lobachev","email":"sanniassin@gmail.com"},"contributors":[{"name":"Ian Channing","email":"ian.channing@mona.health"}],"keywords":["react","input","mask","masked","react-component"],"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"devDependencies":{"@babel/cli":"^7.8.3","@babel/core":"^7.8.3","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-transform-modules-commonjs":"^7.8.3","@babel/plugin-transform-proto-to-assign":"^7.8.3","@babel/polyfill":"^7.8.3","@babel/preset-env":"^7.8.3","@babel/preset-react":"^7.8.3","@babel/register":"^7.8.3","babel-eslint":"^10.0.3","babel-loader":"^8.0.6","babel-plugin-dev-expression":"^0.2.2","babel-plugin-minify-dead-code-elimination":"^0.5.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","chai":"^4.2.0","console-polyfill":"^0.3.0","cross-env":"^5.2.1","eslint":"^6.8.0","eslint-config-airbnb":"^18.0.1","eslint-config-prettier":"^6.9.0","eslint-plugin-import":"^2.20.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-react":"^7.18.0","eslint-plugin-react-hooks":"^1.7.0","html-webpack-plugin":"^3.2.0","husky":"^3.1.0","karma":"^4.4.1","karma-chrome-launcher":"^3.1.0","karma-mocha":"^1.3.0","karma-webpack":"^4.0.2","lint-staged":"^9.5.0","mocha":"^6.2.2","prettier":"^1.19.1","puppeteer":"^1.20.0","react":"^16.12.0","react-dom":"^16.12.0","rollup":"^1.29.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-replace":"^2.2.0","rollup-plugin-size-snapshot":"^0.10.0","rollup-plugin-terser":"^5.2.0","webpack":"^4.41.5","webpack-cli":"^3.3.10","webpack-dev-server":"^3.10.1"},"main":"index.js","lint-staged":{"*.js":"eslint"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"scripts":{"clean":"rimraf lib dist","build":"cross-env BABEL_ENV=rollup rollup -c","start":"cross-env BABEL_ENV=test NODE_ENV=development webpack-dev-server","prepare":"npm run lint && npm test && npm run clean && npm run build","lint":"eslint ./src ./tests ./*.js","lint-fix":"eslint --fix ./src ./tests ./*.js","test":"npm run build && npm run test:input && npm run test:server-render && npm run test:build","test:input":"cross-env NODE_ENV=test BABEL_ENV=test karma start","test:server-render":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/server-render","test:build":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/build"},"repository":{"type":"git","url":"git+https://github.com/mona-health/react-input-mask.git"},"dependencies":{"invariant":"^2.2.4","prop-types":"^15.7.2","warning":"^4.0.3"},"readme":"# react-input-mask\n\n\n\nInput masking component for React. Made with attention to UX.\n\n**This is a development branch for version 3.0. For the latest stable version [see v2 branch](https://github.com/sanniassin/react-input-mask/tree/v2).**\n\n#### [Demo](http://sanniassin.github.io/react-input-mask/demo.html)\n\n# Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Properties](#properties)\n- [Known Issues](#known-issues)\n\n# Installation\n\n```sh\nnpm install --save @mona-health/react-input-mask@alpha\n```\n\nreact-input-mask v3 requires **React 16.8.0 or later.** If you need support for older versions, use [version 2](https://github.com/sanniassin/react-input-mask/tree/v2).\n\n# Usage\n\n```jsx\nimport React from 'react'\nimport InputMask from '@mona-health/react-input-mask'\n\nfunction DateInput(props) {\n return (\n \n );\n}\n```\n\n# Properties\n\n| Name | Type | Default | Description |\n| :-------------------------------------------------------: | :-------------------------------: | :-----: | :------------------------------------------------------------------------------------------- |\n| **[`mask`](#mask)** | `{String\\|Array}` | | Mask format |\n| **[`maskPlaceholder`](#maskplaceholder)** | `{String}` | `_` | Placeholder to cover unfilled parts of the mask |\n| **[`alwaysShowMask`](#alwaysshowmask)** | `{Boolean}` | `false` | Whether mask prefix and placeholder should be displayed when input is empty and has no focus |\n| **[`beforeMaskedStateChange`](#beforemaskedstatechange)** | `{Function}` | | Function to modify value and selection before applying mask |\n| **[`children`](#children)** | `{ReactElement}` | | Custom render function for integration with other input components |\n\n### `mask`\n\nMask format. Can be either a string or array of characters and regular expressions.

\n\n```jsx\n\n```\n\nSimple masks can be defined as strings. The following characters will define mask format:\n\n| Character | Allowed input |\n| :-------: | :-----------: |\n| 9 | 0-9 |\n| a | a-z, A-Z |\n| \\* | 0-9, a-z, A-Z |\n\nAny format character can be escaped with a backslash.

\n\nMore complex masks can be defined as an array of regular expressions and constant characters.\n\n```jsx\n// Canadian postal code mask\nconst firstLetter = /(?!.*[DFIOQU])[A-VXY]/i;\nconst letter = /(?!.*[DFIOQU])[A-Z]/i;\nconst digit = /[0-9]/;\nconst mask = [firstLetter, digit, letter, \" \", digit, letter, digit];\nreturn ;\n```\n\n### `maskPlaceholder`\n\n```jsx\n// Will be rendered as 12/--/--\n\n\n// Will be rendered as 12/mm/yy\n\n\n// Will be rendered as 12/\n\n```\n\nCharacter or string to cover unfilled parts of the mask. Default character is \"\\_\". If set to `null` or empty string, unfilled parts will be empty as in a regular input.\n\n### `alwaysShowMask`\n\nIf enabled, mask prefix and placeholder will be displayed even when input is empty and has no focus.\n\n### `beforeMaskedStateChange`\n\nIn case you need to customize masking behavior, you can provide `beforeMaskedStateChange` function to change masked value and cursor position before it's applied to the input.\n\nIt receieves an object with `previousState`, `currentState` and `nextState` properties. Each state is an object with `value` and `selection` properites where `value` is a string and selection is an object containing `start` and `end` positions of the selection.\n\n1. **previousState:** Input state before change. Only defined on `change` event.\n2. **currentState:** Current raw input state. Not defined during component render.\n3. **nextState:** Input state with applied mask. Contains `value` and `selection` fields.\n\nSelection positions will be `null` if input isn't focused and during rendering.\n\n`beforeMaskedStateChange` must return a new state with `value` and `selection`.\n\n```jsx\n// Trim trailing slashes\nfunction beforeMaskedStateChange({ nextState }) {\n let { value } = nextState;\n if (value.endsWith('/')) {\n value = value.slice(0, -1);\n }\n\n return {\n ...nextState,\n value\n };\n}\n\nreturn (\n \n);\n```\n\nPlease note that `beforeMaskedStateChange` executes more often than `onChange` and must be pure.\n\n### `children`\n\nTo use another component instead of regular `` 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`.\n\n```jsx\nimport React from 'react';\nimport InputMask from '@mona-health/react-input-mask';\nimport MaterialInput from '@material-ui/core/Input';\n\n// Will work fine\nfunction Input(props) {\n return (\n \n \n \n );\n}\n\n// Will throw an error because InputMask's and children's onChange props aren't the same\nfunction InvalidInput(props) {\n return (\n \n \n \n );\n}\n```\n\n**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:\n\n1. a function component that implments `React.forwardRef`\n\n ```jsx\n const FunctionalInputComponent = React.forwardRef((props, ref) => {\n return (\n \n );\n });\n ```\n2. 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`)\n\n ```jsx\n class InnerClassInputComponent extends React.Component {\n render() {\n const { innerRef, ...restProps } = this.props;\n return (\n
\n \n
\n );\n }\n }\n\n const ClassInputComponent = React.forwardRef((props, ref) => {\n return ;\n });\n ```\n\nFor more information see the [Material UI Composition guide - caveat with Refs](https://mui.com/material-ui/guides/composition/#caveat-with-refs).\n\n# Known Issues\n\n### Autofill\n\nBrowser'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:\n\n1. Set `maskPlaceholder` to null and trim space after \"+1\" with `beforeMaskedStateChange` if no more digits are entered.\n2. 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.\n3. Use less formatting in the mask.\n\nPlease note that it might lead to worse user experience (should I enter +1 if input is empty?). You should choose what's more important to your users — smooth typing experience or autofill. Phone and ZIP code inputs are very likely to be autofilled and it's a good idea to care about it, while security confirmation code in two-factor authorization shouldn't care about autofill at all.\n\n### Cypress tests\n\nThe following sequence could fail\n\n```js\ncy.get('input')\n .focus()\n .type('12345')\n .should('have.value', '12/34/5___'); // expected to have value 12/34/5___, but the value was 23/45/____\n```\n\nSince [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.\n\nThere is a few possible workarounds\n\n```js\n// Start typing without calling focus() explicitly.\n// type() is an action command and focuses input anyway\ncy.get('input')\n .type('12345')\n .should('have.value', '12/34/5___')\n\n// Use click() instead of focus()\ncy.get('input')\n .click()\n .type('12345')\n .should('have.value', '12/34/5___')\n\n// Or wait a little after focus()\ncy.get('input')\n .focus()\n .wait(50)\n .type('12345')\n .should('have.value', '12/34/5___');\n```\n\n# Building\n\nRunning `npm install` runs `lint`, `test`, `clean` and `build` scripts too.\n\nSet the `CHROME_BIN` environment variable which is the path to the Chrome binary to prevent karma errors in `npm run test`.\n\n# Thanks\n\nThanks to [BrowserStack](https://www.browserstack.com/) for the help with testing on real devices\n","readmeFilename":"README.md","gitHead":"0c5a79d8f49074bf916644e6622089fe0a8e97f0","bugs":{"url":"https://github.com/mona-health/react-input-mask/issues"},"_id":"@mona-health/react-input-mask@3.0.0-alpha.9","_nodeVersion":"16.19.1","_npmVersion":"9.5.0","dist":{"integrity":"sha512-L0VcLg/jsVDEfGCDkYfcxJiZvJMFjHMu5NTx4LEV9fqrQBZSBKba+EpkvCwyfdPoGXA9/DpIC9sL/OnmZSHAbA==","shasum":"086ceeea3e709e13a9203e7b0def86cb02ecdad3","tarball":"https://registry.npmjs.org/@mona-health/react-input-mask/-/react-input-mask-3.0.0-alpha.9.tgz","fileCount":8,"unpackedSize":137407,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAKg1iuwai6jn7/c7hZQVU37IUnsx8D8xT7hujagKtX3AiEA5VfaS3wY1LFGBQnj9w4Nzn44TR7hTPgGjXO3SvmG1DQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/MVYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKDA/+JgEMjGAJ2raSGdQL8g32BAdzWh3DqvSmd3wkDT2wChnPfc1Z\r\nSfuv3N6wNoQzjjTheRdFZYElM+Us4EjmKIPatIxRs7z1J0h06aXJ15YAp/kh\r\nAlJObCdS0oelcPUyNE/o1BIkqqOXgL/87ZNZa6Qfs3AAroo0hWe6Rd/v096u\r\nTa83uD3VrJz7kWxGKGJPSlHrrsqn9xjBIc21O+lF4J3gApIlLb0yVaDKovuk\r\ndowSfql3CaOW7dvDGAFdXA57A2b6kb9WGg5SJsqXW6kdSztJfD/btdP3yQX6\r\noKrbBIlCTnlXoDzOol54ou+goWZOgVRGXIcjbU+xftlUa0BARaXOdVIYxnhF\r\nIvHy0SO3s3bHcrg22vkUNq/7KAsUUKEVPRig2U/f45M+VTQ08fBB2oELK4cF\r\nge6Gzq11yH5GxECwFrLlAkoedFTMVQxHRj7CDTPNOzLZ8NQf+1VAqaLVuXhr\r\ncuc0m/Ax6F0vSqUPhvZVaMIBFxoiS7vvtyMBz8xr5xqGA9I58OwBaMa2skiP\r\nIEbqfaFCVL82fCHvlyyq/XpKfiaqPGJqjtUdLR32ugaT3P6FYszS7XuNtg9M\r\nYVT13ny2f1BcKdddd9kqRT0JG29vis4a/JgSqmKPg6XMLEVanegfSREVFu3B\r\nkRPOg4Tzb3xIwuSBvUg84phEw7uG7nNUPe4=\r\n=bQFS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ianchanning","email":"ian_channing@hotmail.com"},"directories":{},"maintainers":[{"name":"ianchanning","email":"ian_channing@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-input-mask_3.0.0-alpha.9_1677509976133_0.5072619580939755"},"_hasShrinkwrap":false,"deprecated":"v3 is now live! Upgrade to @latest"},"3.0.0-alpha.10":{"name":"@mona-health/react-input-mask","description":"(yet another) Masked input component for React","version":"3.0.0-alpha.10","homepage":"https://github.com/mona-health/react-input-mask","license":"MIT","author":{"name":"Nikita Lobachev","email":"sanniassin@gmail.com"},"contributors":[{"name":"Ian Channing","email":"ian.channing@mona.health"}],"keywords":["react","input","mask","masked","react-component"],"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"devDependencies":{"@babel/cli":"^7.8.3","@babel/core":"^7.8.3","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-transform-modules-commonjs":"^7.8.3","@babel/plugin-transform-proto-to-assign":"^7.8.3","@babel/polyfill":"^7.8.3","@babel/preset-env":"^7.8.3","@babel/preset-react":"^7.8.3","@babel/register":"^7.8.3","babel-eslint":"^10.0.3","babel-loader":"^8.0.6","babel-plugin-dev-expression":"^0.2.2","babel-plugin-minify-dead-code-elimination":"^0.5.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","chai":"^4.2.0","console-polyfill":"^0.3.0","cross-env":"^5.2.1","eslint":"^6.8.0","eslint-config-airbnb":"^18.0.1","eslint-config-prettier":"^6.9.0","eslint-plugin-import":"^2.20.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-react":"^7.18.0","eslint-plugin-react-hooks":"^1.7.0","html-webpack-plugin":"^3.2.0","husky":"^3.1.0","karma":"^4.4.1","karma-chrome-launcher":"^3.1.0","karma-mocha":"^1.3.0","karma-webpack":"^4.0.2","lint-staged":"^9.5.0","mocha":"^6.2.2","prettier":"^1.19.1","puppeteer":"^1.20.0","react":"^16.12.0","react-dom":"^16.12.0","rollup":"^1.29.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-replace":"^2.2.0","rollup-plugin-size-snapshot":"^0.10.0","rollup-plugin-terser":"^5.2.0","webpack":"^4.41.5","webpack-cli":"^3.3.10","webpack-dev-server":"^3.10.1"},"main":"index.js","lint-staged":{"*.js":"eslint"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"scripts":{"clean":"rimraf lib dist","build":"cross-env BABEL_ENV=rollup rollup -c","start":"cross-env BABEL_ENV=test NODE_ENV=development webpack-dev-server","prepare":"npm run lint && npm test && npm run clean && npm run build","lint":"eslint ./src ./tests ./*.js","lint-fix":"eslint --fix ./src ./tests ./*.js","test":"npm run build && npm run test:input && npm run test:server-render && npm run test:build","test:input":"cross-env NODE_ENV=test BABEL_ENV=test karma start","test:server-render":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/server-render","test:build":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/build"},"repository":{"type":"git","url":"git+https://github.com/mona-health/react-input-mask.git"},"dependencies":{"invariant":"^2.2.4","prop-types":"^15.7.2","warning":"^4.0.3"},"readme":"# @mona-health/react-input-mask\n\n\n[![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)\n\nInput masking component for React. Made with attention to UX.\n\n**This is a development branch for version 3.0. For the latest stable version [see v2 branch](https://github.com/sanniassin/react-input-mask/tree/v2).**\n\n#### [Demo](http://sanniassin.github.io/react-input-mask/demo.html)\n\n# Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Properties](#properties)\n- [Known Issues](#known-issues)\n\n# Installation\n\n```sh\nnpm install --save @mona-health/react-input-mask@alpha\n```\n\nreact-input-mask v3 requires **React 16.8.0 or later.** If you need support for older versions, use [version 2](https://github.com/sanniassin/react-input-mask/tree/v2).\n\n# Usage\n\n```jsx\nimport React from 'react'\nimport InputMask from '@mona-health/react-input-mask'\n\nfunction DateInput(props) {\n return (\n \n );\n}\n```\n\n# Properties\n\n| Name | Type | Default | Description |\n| :-------------------------------------------------------: | :-------------------------------: | :-----: | :------------------------------------------------------------------------------------------- |\n| **[`mask`](#mask)** | `{String\\|Array}` | | Mask format |\n| **[`maskPlaceholder`](#maskplaceholder)** | `{String}` | `_` | Placeholder to cover unfilled parts of the mask |\n| **[`alwaysShowMask`](#alwaysshowmask)** | `{Boolean}` | `false` | Whether mask prefix and placeholder should be displayed when input is empty and has no focus |\n| **[`beforeMaskedStateChange`](#beforemaskedstatechange)** | `{Function}` | | Function to modify value and selection before applying mask |\n| **[`children`](#children)** | `{ReactElement}` | | Custom render function for integration with other input components |\n\n### `mask`\n\nMask format. Can be either a string or array of characters and regular expressions.

\n\n```jsx\n\n```\n\nSimple masks can be defined as strings. The following characters will define mask format:\n\n| Character | Allowed input |\n| :-------: | :-----------: |\n| 9 | 0-9 |\n| a | a-z, A-Z |\n| \\* | 0-9, a-z, A-Z |\n\nAny format character can be escaped with a backslash.

\n\nMore complex masks can be defined as an array of regular expressions and constant characters.\n\n```jsx\n// Canadian postal code mask\nconst firstLetter = /(?!.*[DFIOQU])[A-VXY]/i;\nconst letter = /(?!.*[DFIOQU])[A-Z]/i;\nconst digit = /[0-9]/;\nconst mask = [firstLetter, digit, letter, \" \", digit, letter, digit];\nreturn ;\n```\n\n### `maskPlaceholder`\n\n```jsx\n// Will be rendered as 12/--/--\n\n\n// Will be rendered as 12/mm/yy\n\n\n// Will be rendered as 12/\n\n```\n\nCharacter or string to cover unfilled parts of the mask. Default character is \"\\_\". If set to `null` or empty string, unfilled parts will be empty as in a regular input.\n\n### `alwaysShowMask`\n\nIf enabled, mask prefix and placeholder will be displayed even when input is empty and has no focus.\n\n### `beforeMaskedStateChange`\n\nIn case you need to customize masking behavior, you can provide `beforeMaskedStateChange` function to change masked value and cursor position before it's applied to the input.\n\nIt receieves an object with `previousState`, `currentState` and `nextState` properties. Each state is an object with `value` and `selection` properites where `value` is a string and selection is an object containing `start` and `end` positions of the selection.\n\n1. **previousState:** Input state before change. Only defined on `change` event.\n2. **currentState:** Current raw input state. Not defined during component render.\n3. **nextState:** Input state with applied mask. Contains `value` and `selection` fields.\n\nSelection positions will be `null` if input isn't focused and during rendering.\n\n`beforeMaskedStateChange` must return a new state with `value` and `selection`.\n\n```jsx\n// Trim trailing slashes\nfunction beforeMaskedStateChange({ nextState }) {\n let { value } = nextState;\n if (value.endsWith('/')) {\n value = value.slice(0, -1);\n }\n\n return {\n ...nextState,\n value\n };\n}\n\nreturn (\n \n);\n```\n\nPlease note that `beforeMaskedStateChange` executes more often than `onChange` and must be pure.\n\n### `children`\n\nTo use another component instead of regular `` 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`.\n\n```jsx\nimport React from 'react';\nimport InputMask from '@mona-health/react-input-mask';\nimport MaterialInput from '@material-ui/core/Input';\n\n// Will work fine\nfunction Input(props) {\n return (\n \n \n \n );\n}\n\n// Will throw an error because InputMask's and children's onChange props aren't the same\nfunction InvalidInput(props) {\n return (\n \n \n \n );\n}\n```\n\n**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:\n\n1. a function component that implments `React.forwardRef`\n\n ```jsx\n const FunctionalInputComponent = React.forwardRef((props, ref) => {\n return (\n \n );\n });\n ```\n2. 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`)\n\n ```jsx\n class InnerClassInputComponent extends React.Component {\n render() {\n const { innerRef, ...restProps } = this.props;\n return (\n
\n \n
\n );\n }\n }\n\n const ClassInputComponent = React.forwardRef((props, ref) => {\n return ;\n });\n ```\n\nFor more information see the [Material UI Composition guide - caveat with Refs](https://mui.com/material-ui/guides/composition/#caveat-with-refs).\n\n# Known Issues\n\n### Autofill\n\nBrowser'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:\n\n1. Set `maskPlaceholder` to null and trim space after \"+1\" with `beforeMaskedStateChange` if no more digits are entered.\n2. 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.\n3. Use less formatting in the mask.\n\nPlease note that it might lead to worse user experience (should I enter +1 if input is empty?). You should choose what's more important to your users — smooth typing experience or autofill. Phone and ZIP code inputs are very likely to be autofilled and it's a good idea to care about it, while security confirmation code in two-factor authorization shouldn't care about autofill at all.\n\n### Cypress tests\n\nThe following sequence could fail\n\n```js\ncy.get('input')\n .focus()\n .type('12345')\n .should('have.value', '12/34/5___'); // expected to have value 12/34/5___, but the value was 23/45/____\n```\n\nSince [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.\n\nThere is a few possible workarounds\n\n```js\n// Start typing without calling focus() explicitly.\n// type() is an action command and focuses input anyway\ncy.get('input')\n .type('12345')\n .should('have.value', '12/34/5___')\n\n// Use click() instead of focus()\ncy.get('input')\n .click()\n .type('12345')\n .should('have.value', '12/34/5___')\n\n// Or wait a little after focus()\ncy.get('input')\n .focus()\n .wait(50)\n .type('12345')\n .should('have.value', '12/34/5___');\n```\n\n# Building\n\nRunning `npm install` runs `lint`, `test`, `clean` and `build` scripts too.\n\nSet the `CHROME_BIN` environment variable which is the path to the Chrome binary to prevent karma errors in `npm run test`.\n\n# Thanks\n\nThanks to [BrowserStack](https://www.browserstack.com/) for the help with testing on real devices\n","readmeFilename":"README.md","gitHead":"cf53cc850e8998345ded4d8d97a059fcb518b68f","bugs":{"url":"https://github.com/mona-health/react-input-mask/issues"},"_id":"@mona-health/react-input-mask@3.0.0-alpha.10","_nodeVersion":"16.19.1","_npmVersion":"9.5.0","dist":{"integrity":"sha512-4AKh3Ys7jADWHS8rOb4iHxYE8vQrWe5yMTMJUma12PXTvxM2fnB2dBusVHkWYaYwVjXAUZimsfbjiTl0HdPI2Q==","shasum":"0c57c00f143ec19b4c4d24695616a99068270d58","tarball":"https://registry.npmjs.org/@mona-health/react-input-mask/-/react-input-mask-3.0.0-alpha.10.tgz","fileCount":8,"unpackedSize":137574,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCS+0flXUIOOMqhpzvKHb19QPHHDq4C9jqGhoO9DPVUcAIhAJgnAP/W4Ddl1X1vic6uLknVc6eB4orLhzoWH2FOcpKa"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NEIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofWA/9GYWlB1ciHsVq26eP1s8/Oa+1ECMdtp3nqESr7htWyXbkQgvb\r\nua2ogKbqtGAMncHFJOAKwqoxlLZIUH4PXEY1NYj4jZZCkrrpGX5g8DPf8cbL\r\ntwq5QUUor1sQEMLQzCnjShJmoMEcNs9VifILsC4OVpWc/JgMdIvYgBF7YeEz\r\nT/KzDsdgXfhSM0yJBlZ546fTI+lnU4PUpWfTYzDaF5VjFwBKWHdQuI5s4rK7\r\nkLN7zTlZQXfhDY172IW4uHQplH4tMNdobHi7JFD+6lalxyXPUiuy8f5wzRZO\r\nk7buZqGalLYIvCbJLMcgUXGqtWpH2ZU4aofcm5zskMgmZoShdQYLTjsqqKgQ\r\ne4LJ79j9WQAuQ4EthXsI4CJiWgrSOfjxjeJY5eHSlExzsBf/fIgF5AYljWWA\r\nNye86EXQR8dNPk9AbS/ahScshvsXJyJ3k2CxhaHB9ETQquxDPrXoN0xhnE7r\r\nCflU3VpRKZsUi0cymuM3Au0QVTSnOYCSuHX5ASU1yn2vzGzwoQYLm+/+NjB8\r\nVVxGt0FKmTbOEnZKUy8gTkMPAd/451wMX9oJy6lf9NcRWWjiTysraGEFg1C+\r\nUiy0a7zDTA25xMk0fBQuG5FXwI8KpyWXoCiIklQOuUWoWtny0thDAcBkx5Do\r\nIvyCN465FTVZq3OjpkwlVnacXCjxhKeHD3E=\r\n=lieR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ianchanning","email":"ian_channing@hotmail.com"},"directories":{},"maintainers":[{"name":"ianchanning","email":"ian_channing@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-input-mask_3.0.0-alpha.10_1677512968567_0.45136797937495876"},"_hasShrinkwrap":false,"deprecated":"v3 is now live! Upgrade to @latest"},"3.0.0-alpha.11":{"name":"@mona-health/react-input-mask","description":"(yet another) Masked input component for React","version":"3.0.0-alpha.11","homepage":"https://github.com/mona-health/react-input-mask","license":"MIT","author":{"name":"Nikita Lobachev","email":"sanniassin@gmail.com"},"contributors":[{"name":"Ian Channing","email":"ian.channing@mona.health"}],"keywords":["react","input","mask","masked","react-component"],"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"devDependencies":{"@babel/cli":"^7.8.3","@babel/core":"^7.8.3","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-transform-modules-commonjs":"^7.8.3","@babel/plugin-transform-proto-to-assign":"^7.8.3","@babel/polyfill":"^7.8.3","@babel/preset-env":"^7.8.3","@babel/preset-react":"^7.8.3","@babel/register":"^7.8.3","babel-eslint":"^10.0.3","babel-loader":"^8.0.6","babel-plugin-dev-expression":"^0.2.2","babel-plugin-minify-dead-code-elimination":"^0.5.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","chai":"^4.2.0","console-polyfill":"^0.3.0","cross-env":"^5.2.1","eslint":"^6.8.0","eslint-config-airbnb":"^18.0.1","eslint-config-prettier":"^6.9.0","eslint-plugin-import":"^2.20.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-react":"^7.18.0","eslint-plugin-react-hooks":"^1.7.0","html-webpack-plugin":"^3.2.0","husky":"^3.1.0","karma":"^4.4.1","karma-chrome-launcher":"^3.1.0","karma-mocha":"^1.3.0","karma-webpack":"^4.0.2","lint-staged":"^9.5.0","mocha":"^6.2.2","prettier":"^1.19.1","puppeteer":"^1.20.0","react":"^16.12.0","react-dom":"^16.12.0","rollup":"^1.29.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-replace":"^2.2.0","rollup-plugin-size-snapshot":"^0.10.0","rollup-plugin-terser":"^5.2.0","webpack":"^4.41.5","webpack-cli":"^3.3.10","webpack-dev-server":"^3.10.1"},"main":"index.js","lint-staged":{"*.js":"eslint"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"scripts":{"clean":"rimraf lib dist","build":"cross-env BABEL_ENV=rollup rollup -c","start":"cross-env BABEL_ENV=test NODE_ENV=development webpack-dev-server","prepare":"npm run lint && npm test && npm run clean && npm run build","lint":"eslint ./src ./tests ./*.js","lint-fix":"eslint --fix ./src ./tests ./*.js","test":"npm run build && npm run test:input && npm run test:server-render && npm run test:build","test:input":"cross-env NODE_ENV=test BABEL_ENV=test karma start","test:server-render":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/server-render","test:build":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/build"},"repository":{"type":"git","url":"git+https://github.com/mona-health/react-input-mask.git"},"dependencies":{"invariant":"^2.2.4","prop-types":"^15.7.2","warning":"^4.0.3"},"gitHead":"6d95f84713ad0f78027f1d9ad6b96952069c966d","bugs":{"url":"https://github.com/mona-health/react-input-mask/issues"},"_id":"@mona-health/react-input-mask@3.0.0-alpha.11","_nodeVersion":"16.19.1","_npmVersion":"9.5.0","dist":{"integrity":"sha512-TnluTptDqF9+nAmoXovztDxB/B6wLTQyXMAWS+4gZ7TdIrlbh0vzmLOUH7/GcALzn3u/pCvz1JdiR5c8dp6l6A==","shasum":"08236b3278acbb2308217f11a93bc9ffd2ae71d9","tarball":"https://registry.npmjs.org/@mona-health/react-input-mask/-/react-input-mask-3.0.0-alpha.11.tgz","fileCount":8,"unpackedSize":137574,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUXB3OVwkXU/dJLhE/MMYAek9X7VegPibdSe/EY/AY0gIhANE1pQ69EGf7qwF+FBjAsr5Ik3mylzt7OznJXWBdKYHC"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NGTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrsgg/5Afzmugh5k189IwC4M4qvaeOlWB3e6+6AOFi868SrY72sNe95\r\nkU8zou9hUuLh9c1A1tvs4M14rbyxyFnB2/EWGw2mWkuG8UqwHCsGePEkHzau\r\n7dKNPnwGTJvmDH4bS9b2RCMb68ITTpTGNq74ELUGi6mWngMePK/KdjArfrJR\r\n4ytU4HhEqIVkXze1API5XHPw2KwBK03CIGuLCCS8C3hhG45nKOBwzuM2OdqA\r\nKG+8XBf1AtMJY/SRhF3/ST+pxGTkPAIF9sUZF2nqKzaoaCpmmQf6lvxUvzd0\r\njMirOlZB/hf4JUtbY5/xo482VRmkQFQ1xQqR7s5dLAxqeqgxilKf8mAmrQrC\r\nDWhVIr1HH2FEKGCincF6EKtQ2lysG5g+LP9eYpllN9IbzvhqQZiHzqTfoS0Q\r\n4PcubbGiQvgau9tgkC1c1PGKW+LZ03mcC8y9VuHpmtdwaACET1akgnhH+uDC\r\nL+y3OzlEcIq3L3z4sb5NTFAjdodgzXdi3LA17y3k0i3juiEDunKVB0Emw8YO\r\nBx87LfaFzWa3va5FQFG9LhzrMdqEVJY/WT5hFCnESWXgzMb0qcnrtnbjgKEC\r\npflhEuEJzgUpCMBypsXIna7Hse/LjLURslJLggAhwdx27OgiZs+bazhIVDuq\r\n4570x0m3Xn//+El5RwNtHu/jXAtlmInMa74=\r\n=rn5t\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ianchanning","email":"ian_channing@hotmail.com"},"directories":{},"maintainers":[{"name":"ianchanning","email":"ian_channing@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-input-mask_3.0.0-alpha.11_1677513107387_0.6113303526401548"},"_hasShrinkwrap":false,"deprecated":"v3 is now live! Upgrade to @latest"},"3.0.0":{"name":"@mona-health/react-input-mask","description":"(yet another) Masked input component for React","version":"3.0.0","homepage":"https://github.com/mona-health/react-input-mask","license":"MIT","author":{"name":"Nikita Lobachev","email":"sanniassin@gmail.com"},"contributors":[{"name":"Ian Channing","email":"ian.channing@mona.health"}],"keywords":["react","input","mask","masked","react-component"],"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"devDependencies":{"@babel/cli":"^7.8.3","@babel/core":"^7.8.3","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-transform-modules-commonjs":"^7.8.3","@babel/plugin-transform-proto-to-assign":"^7.8.3","@babel/polyfill":"^7.8.3","@babel/preset-env":"^7.8.3","@babel/preset-react":"^7.8.3","@babel/register":"^7.8.3","babel-eslint":"^10.0.3","babel-loader":"^8.0.6","babel-plugin-dev-expression":"^0.2.2","babel-plugin-minify-dead-code-elimination":"^0.5.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","chai":"^4.2.0","console-polyfill":"^0.3.0","cross-env":"^5.2.1","eslint":"^6.8.0","eslint-config-airbnb":"^18.0.1","eslint-config-prettier":"^6.9.0","eslint-plugin-import":"^2.20.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-react":"^7.18.0","eslint-plugin-react-hooks":"^1.7.0","html-webpack-plugin":"^3.2.0","husky":"^3.1.0","karma":"^4.4.1","karma-chrome-launcher":"^3.1.0","karma-mocha":"^1.3.0","karma-webpack":"^4.0.2","lint-staged":"^9.5.0","mocha":"^6.2.2","prettier":"^1.19.1","puppeteer":"^1.20.0","react":"^16.12.0","react-dom":"^16.12.0","rollup":"^1.29.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-replace":"^2.2.0","rollup-plugin-size-snapshot":"^0.10.0","rollup-plugin-terser":"^5.2.0","webpack":"^4.41.5","webpack-cli":"^3.3.10","webpack-dev-server":"^3.10.1"},"main":"index.js","lint-staged":{"*.js":"eslint"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"scripts":{"clean":"rimraf lib dist","build":"cross-env BABEL_ENV=rollup rollup -c","start":"cross-env BABEL_ENV=test NODE_ENV=development webpack-dev-server","prepare":"npm run lint && npm test && npm run clean && npm run build","lint":"eslint ./src ./tests ./*.js","lint-fix":"eslint --fix ./src ./tests ./*.js","test":"npm run build && npm run test:input && npm run test:server-render && npm run test:build","test:input":"cross-env NODE_ENV=test BABEL_ENV=test karma start","test:server-render":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/server-render","test:build":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/build"},"repository":{"type":"git","url":"git+https://github.com/mona-health/react-input-mask.git"},"dependencies":{"invariant":"^2.2.4","prop-types":"^15.7.2","warning":"^4.0.3"},"gitHead":"dbd401e6b2c10d75e31b0019015fd4e5275a34ad","bugs":{"url":"https://github.com/mona-health/react-input-mask/issues"},"_id":"@mona-health/react-input-mask@3.0.0","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-81XkH2YLCVIxse6aOAGH6/m/9MelRK9n7Tc2rncSVhbVCQZ5EiR4DaRtpWmQe90Fyzs3b5JenvabbV2DFxeh4w==","shasum":"a5b1b285955ff1f7cd0bde2dfe1deb6908f8938a","tarball":"https://registry.npmjs.org/@mona-health/react-input-mask/-/react-input-mask-3.0.0.tgz","fileCount":8,"unpackedSize":137565,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwVo3rju7OsGnY8O5WVLORWgmtF4MKwQUKi+902ossgwIhANAZ2xexQbTgmV6EcfiQzNFCJ3rIt4Gs1FxYLhoGbbnY"}]},"_npmUser":{"name":"ianchanning","email":"ian_channing@hotmail.com"},"directories":{},"maintainers":[{"name":"stef_rommes","email":"stef.rommes@mona.health"},{"name":"ianchanning","email":"ian_channing@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-input-mask_3.0.0_1693215381360_0.2792263670410562"},"_hasShrinkwrap":false},"3.0.1":{"name":"@mona-health/react-input-mask","description":"(yet another) Masked input component for React","version":"3.0.1","homepage":"https://github.com/mona-health/react-input-mask","license":"MIT","author":{"name":"Nikita Lobachev","email":"sanniassin@gmail.com"},"contributors":[{"name":"Ian Channing","email":"ian.channing@mona.health"}],"keywords":["react","input","mask","masked","react-component"],"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"devDependencies":{"@babel/cli":"^7.8.3","@babel/core":"^7.8.3","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-transform-modules-commonjs":"^7.8.3","@babel/plugin-transform-proto-to-assign":"^7.8.3","@babel/polyfill":"^7.8.3","@babel/preset-env":"^7.8.3","@babel/preset-react":"^7.8.3","@babel/register":"^7.8.3","babel-eslint":"^10.0.3","babel-loader":"^8.0.6","babel-plugin-dev-expression":"^0.2.2","babel-plugin-minify-dead-code-elimination":"^0.5.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","chai":"^4.2.0","console-polyfill":"^0.3.0","cross-env":"^5.2.1","eslint":"^6.8.0","eslint-config-airbnb":"^18.0.1","eslint-config-prettier":"^6.9.0","eslint-plugin-import":"^2.20.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.2","eslint-plugin-react":"^7.18.0","eslint-plugin-react-hooks":"^1.7.0","html-webpack-plugin":"^3.2.0","husky":"^3.1.0","karma":"^4.4.1","karma-chrome-launcher":"^3.1.0","karma-mocha":"^1.3.0","karma-webpack":"^4.0.2","lint-staged":"^9.5.0","mocha":"^6.2.2","prettier":"^1.19.1","puppeteer":"^1.20.0","react":"^16.12.0","react-dom":"^16.12.0","rollup":"^1.29.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-replace":"^2.2.0","rollup-plugin-size-snapshot":"^0.10.0","rollup-plugin-terser":"^5.2.0","webpack":"^4.41.5","webpack-cli":"^3.3.10","webpack-dev-server":"^3.10.1"},"main":"index.js","lint-staged":{"*.js":"eslint"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"scripts":{"clean":"rimraf lib dist","build":"cross-env BABEL_ENV=rollup rollup -c","start":"cross-env BABEL_ENV=test NODE_ENV=development webpack-dev-server","prepare":"npm run lint && npm test && npm run clean && npm run build","lint":"eslint ./src ./tests ./*.js","lint-fix":"eslint --fix ./src ./tests ./*.js","test":"npm run build && npm run test:input && npm run test:server-render && npm run test:build","test:input":"cross-env NODE_ENV=test BABEL_ENV=test karma start","test:server-render":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/server-render","test:build":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/build"},"repository":{"type":"git","url":"git+https://github.com/mona-health/react-input-mask.git"},"dependencies":{"invariant":"^2.2.4","prop-types":"^15.7.2","warning":"^4.0.3"},"gitHead":"6681298410ef09260f7eadb4f400f768a485d225","bugs":{"url":"https://github.com/mona-health/react-input-mask/issues"},"_id":"@mona-health/react-input-mask@3.0.1","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-DAa5VPmjSk01tqXgoCDgqUmiKTFVR51SkS4fJPAuNNbatvlcJn5SzXeG7T9zMZJJ00pu2KD24Bxc7BxbGF6M1g==","shasum":"1fbf8fd52b6754749fc8428789f5b18dcb889535","tarball":"https://registry.npmjs.org/@mona-health/react-input-mask/-/react-input-mask-3.0.1.tgz","fileCount":8,"unpackedSize":137405,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZsLG4dN3RTH7cHbb7yX+VYNjQPKsRCP/qB7t6FCzWowIgd68T+9b0WbEMiOQmCNRsC8hTbHHv3usI/Y8jrhjtzfs="}]},"_npmUser":{"name":"ianchanning","email":"ian_channing@hotmail.com"},"directories":{},"maintainers":[{"name":"stef_rommes","email":"stef.rommes@mona.health"},{"name":"ianchanning","email":"ian_channing@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-input-mask_3.0.1_1693215669047_0.9295380037318299"},"_hasShrinkwrap":false},"3.0.2":{"name":"@mona-health/react-input-mask","description":"(yet another) Masked input component for React","version":"3.0.2","homepage":"https://github.com/mona-health/react-input-mask","license":"MIT","author":{"name":"Nikita Lobachev","email":"sanniassin@gmail.com"},"contributors":[{"name":"Ian Channing","email":"ian_channing@hotmail.com"}],"keywords":["react","input","mask","masked","react-component"],"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"devDependencies":{"@babel/cli":"^7.8.3","@babel/core":"^7.8.3","@babel/eslint-parser":"^7.23.10","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-private-methods":"^7.18.6","@babel/plugin-proposal-private-property-in-object":"^7.21.11","@babel/plugin-transform-modules-commonjs":"^7.8.3","@babel/plugin-transform-proto-to-assign":"^7.8.3","@babel/polyfill":"^7.8.3","@babel/preset-env":"^7.8.3","@babel/preset-react":"^7.8.3","@babel/register":"^7.8.3","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@rollup/plugin-terser":"^0.4.4","babel-loader":"^9.1.3","babel-plugin-dev-expression":"^0.2.2","babel-plugin-minify-dead-code-elimination":"^0.5.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","chai":"^4.2.0","console-polyfill":"^0.3.0","cross-env":"^7.0.3","eslint":"^8.57.0","eslint-config-airbnb":"^19.0.4","eslint-config-prettier":"^9.1.0","eslint-plugin-import":"^2.20.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^5.1.3","eslint-plugin-react":"^7.18.0","eslint-plugin-react-hooks":"^4.6.0","html-webpack-plugin":"^5.6.0","husky":"^9.0.11","karma":"^6.4.3","karma-chrome-launcher":"^3.1.0","karma-mocha":"^2.0.1","karma-webpack":"^5.0.1","lint-staged":"^15.2.2","mocha":"^10.3.0","prettier":"^3.2.5","puppeteer":"^22.3.0","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^5.0.5","rollup":"^4.12.0","typescript":"^5.3.3","webpack":"^5.90.3","webpack-cli":"^5.1.4","webpack-dev-server":"^5.0.2"},"main":"index.js","types":"./dist/index.js","lint-staged":{"*.js":"eslint"},"scripts":{"clean":"rimraf lib dist","build":"cross-env BABEL_ENV=rollup rollup -c","start":"cross-env BABEL_ENV=test NODE_ENV=development webpack-dev-server","prepare":"husky && npm run lint && npm test && npm run clean && npm run types","lint":"eslint ./src ./tests ./*.js","lint-fix":"eslint --fix ./src ./tests ./*.js","test":"npm run build && npm run test:input && npm run test:server-render && npm run test:build","test:input":"cross-env NODE_ENV=test BABEL_ENV=test karma start","test:server-render":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/server-render","test:build":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/build","types":"tsc"},"repository":{"type":"git","url":"git+https://github.com/mona-health/react-input-mask.git"},"dependencies":{"invariant":"^2.2.4","prop-types":"^15.7.2","warning":"^4.0.3"},"_id":"@mona-health/react-input-mask@3.0.2","gitHead":"7c0953216e1aa1814dbd38ac879625abcbce6bdb","bugs":{"url":"https://github.com/mona-health/react-input-mask/issues"},"_nodeVersion":"20.11.0","_npmVersion":"10.4.0","dist":{"integrity":"sha512-FeCjhDJhoyPU4Gu8DNLRFFgqMgHJTbUnLLIrdvyW2YJls9wW2mlAgJ6X5QA8QYFr2JRp9mdmqtQwbiROjGV1GQ==","shasum":"b7ed8b8de976f7e3ec48a0b793d78d283d098657","tarball":"https://registry.npmjs.org/@mona-health/react-input-mask/-/react-input-mask-3.0.2.tgz","fileCount":24,"unpackedSize":19978,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqY7166IxpClwZ1J/MfMQJqb+DyVXuex1Lmo8K/w/DsQIgOjZ0KA014/8kJLGZ/K3+zqmQqGCS522o4oDAEdSUBZI="}]},"_npmUser":{"name":"ianchanning","email":"ian_channing@hotmail.com"},"directories":{},"maintainers":[{"name":"stef_rommes","email":"stef.rommes@mona.health"},{"name":"ianchanning","email":"ian_channing@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-input-mask_3.0.2_1709477820062_0.7560097129080521"},"_hasShrinkwrap":false,"deprecated":"broken build, please upgrade to v3.0.3"},"3.0.3":{"name":"@mona-health/react-input-mask","description":"(yet another) Masked input component for React","version":"3.0.3","homepage":"https://github.com/mona-health/react-input-mask","license":"MIT","author":{"name":"Nikita Lobachev","email":"sanniassin@gmail.com"},"contributors":[{"name":"Ian Channing","email":"ian_channing@hotmail.com"}],"keywords":["react","input","mask","masked","react-component"],"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"devDependencies":{"@babel/cli":"^7.8.3","@babel/core":"^7.8.3","@babel/eslint-parser":"^7.23.10","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-proposal-private-methods":"^7.18.6","@babel/plugin-proposal-private-property-in-object":"^7.21.11","@babel/plugin-transform-modules-commonjs":"^7.8.3","@babel/plugin-transform-proto-to-assign":"^7.8.3","@babel/polyfill":"^7.8.3","@babel/preset-env":"^7.8.3","@babel/preset-react":"^7.8.3","@babel/register":"^7.8.3","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@rollup/plugin-terser":"^0.4.4","babel-loader":"^9.1.3","babel-plugin-dev-expression":"^0.2.2","babel-plugin-minify-dead-code-elimination":"^0.5.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","chai":"^4.2.0","console-polyfill":"^0.3.0","cross-env":"^7.0.3","eslint":"^8.57.0","eslint-config-airbnb":"^19.0.4","eslint-config-prettier":"^9.1.0","eslint-plugin-import":"^2.20.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^5.1.3","eslint-plugin-react":"^7.18.0","eslint-plugin-react-hooks":"^4.6.0","html-webpack-plugin":"^5.6.0","husky":"^9.0.11","karma":"^6.4.3","karma-chrome-launcher":"^3.1.0","karma-mocha":"^2.0.1","karma-webpack":"^5.0.1","lint-staged":"^15.2.2","mocha":"^10.3.0","prettier":"^3.2.5","puppeteer":"^22.3.0","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^5.0.5","rollup":"^4.12.0","typescript":"^5.3.3","webpack":"^5.90.3","webpack-cli":"^5.1.4","webpack-dev-server":"^5.0.2"},"main":"index.js","types":"./dist/index.js","lint-staged":{"*.js":"eslint"},"scripts":{"clean":"rimraf lib dist","build":"cross-env BABEL_ENV=rollup rollup -c","start":"cross-env BABEL_ENV=test NODE_ENV=development webpack-dev-server","prepare":"husky && npm run lint && npm test && npm run clean && npm run types && npm run build","lint":"eslint ./src ./tests ./*.js","lint-fix":"eslint --fix ./src ./tests ./*.js","test":"npm run build && npm run test:input && npm run test:server-render && npm run test:build","test:input":"cross-env NODE_ENV=test BABEL_ENV=test karma start","test:server-render":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/server-render","test:build":"cross-env BABEL_ENV=test mocha --require @babel/register ./tests/build","types":"tsc"},"repository":{"type":"git","url":"git+https://github.com/mona-health/react-input-mask.git"},"dependencies":{"invariant":"^2.2.4","prop-types":"^15.7.2","warning":"^4.0.3"},"_id":"@mona-health/react-input-mask@3.0.3","gitHead":"749eb2ea9399ea6c143e9cf0823f3953288f64dc","bugs":{"url":"https://github.com/mona-health/react-input-mask/issues"},"_nodeVersion":"20.11.0","_npmVersion":"10.4.0","dist":{"integrity":"sha512-E8t4ZAaHjmPT1NS/9nlIGR7OsyshP7hs5OwqEYnVslm/eaWrQg5ZziB6r5IOxGmFUyB+G1muFPobVPA08L2sJg==","shasum":"7e0200e29e59c4498290c3a001eb72112ee8bffc","tarball":"https://registry.npmjs.org/@mona-health/react-input-mask/-/react-input-mask-3.0.3.tgz","fileCount":28,"unpackedSize":144941,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8vLuxtTXRgjSISDdrw3CgkaLtOfzBo8iG/4kQeuYPjAIgOjrI98ghPNpx63CVrN4+n4W2tAOKQjkIfySHjt1ITdo="}]},"_npmUser":{"name":"ianchanning","email":"ian_channing@hotmail.com"},"directories":{},"maintainers":[{"name":"stef_rommes","email":"stef.rommes@mona.health"},{"name":"ianchanning","email":"ian_channing@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-input-mask_3.0.3_1709550302065_0.016959008464153102"},"_hasShrinkwrap":false}},"time":{"created":"2023-02-27T14:33:51.564Z","3.0.0-alpha.7":"2023-02-27T14:33:51.855Z","modified":"2024-03-04T11:08:55.806Z","3.0.0-alpha.8":"2023-02-27T14:54:36.462Z","3.0.0-alpha.9":"2023-02-27T14:59:36.303Z","3.0.0-alpha.10":"2023-02-27T15:49:28.726Z","3.0.0-alpha.11":"2023-02-27T15:51:47.587Z","3.0.0":"2023-08-28T09:36:21.523Z","3.0.1":"2023-08-28T09:41:09.292Z","3.0.2":"2024-03-03T14:57:00.200Z","3.0.3":"2024-03-04T11:05:02.216Z"},"maintainers":[{"name":"ianchanning","email":"ian_channing@hotmail.com"},{"name":"stef_rommes","email":"stef.rommes@mona.health"}],"description":"(yet another) Masked input component for React","homepage":"https://github.com/mona-health/react-input-mask","keywords":["react","input","mask","masked","react-component"],"repository":{"type":"git","url":"git+https://github.com/mona-health/react-input-mask.git"},"contributors":[{"name":"Ian Channing","email":"ian_channing@hotmail.com"}],"author":{"name":"Nikita Lobachev","email":"sanniassin@gmail.com"},"bugs":{"url":"https://github.com/mona-health/react-input-mask/issues"},"license":"MIT","readme":"# @mona-health/react-input-mask\n\n\n\n[![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)\n\nInput masking component for React. Made with attention to UX.\n\n#### [Demo](http://sanniassin.github.io/react-input-mask/demo.html)\n\n# Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Properties](#properties)\n- [Known Issues](#known-issues)\n\n# Installation\n\n```sh\nnpm install --save @mona-health/react-input-mask\n```\n\nreact-input-mask v3 requires **React 16.8.0 or later.** If you need support for older versions, use [version 2](https://github.com/sanniassin/react-input-mask/tree/v2).\n\n# Usage\n\n```jsx\nimport React from \"react\";\nimport InputMask from \"@mona-health/react-input-mask\";\n\nfunction DateInput(props) {\n return (\n \n );\n}\n```\n\n# Properties\n\n| Name | Type | Default | Description |\n| :-------------------------------------------------------: | :-------------------------------: | :-----: | :------------------------------------------------------------------------------------------- |\n| **[`mask`](#mask)** | `{String\\|Array}` | | Mask format |\n| **[`maskPlaceholder`](#maskplaceholder)** | `{String}` | `_` | Placeholder to cover unfilled parts of the mask |\n| **[`alwaysShowMask`](#alwaysshowmask)** | `{Boolean}` | `false` | Whether mask prefix and placeholder should be displayed when input is empty and has no focus |\n| **[`beforeMaskedStateChange`](#beforemaskedstatechange)** | `{Function}` | | Function to modify value and selection before applying mask |\n| **[`children`](#children)** | `{ReactElement}` | | Custom render function for integration with other input components |\n\n### `mask`\n\nMask format. Can be either a string or array of characters and regular expressions.

\n\n```jsx\n\n```\n\nSimple masks can be defined as strings. The following characters will define mask format:\n\n| Character | Allowed input |\n| :-------: | :-----------: |\n| 9 | 0-9 |\n| a | a-z, A-Z |\n| \\* | 0-9, a-z, A-Z |\n\nAny format character can be escaped with a backslash.

\n\nMore complex masks can be defined as an array of regular expressions and constant characters.\n\n```jsx\n// Canadian postal code mask\nconst firstLetter = /(?!.*[DFIOQU])[A-VXY]/i;\nconst letter = /(?!.*[DFIOQU])[A-Z]/i;\nconst digit = /[0-9]/;\nconst mask = [firstLetter, digit, letter, \" \", digit, letter, digit];\nreturn ;\n```\n\n### `maskPlaceholder`\n\n```jsx\n// Will be rendered as 12/--/--\n\n\n// Will be rendered as 12/mm/yy\n\n\n// Will be rendered as 12/\n\n```\n\nCharacter or string to cover unfilled parts of the mask. Default character is \"\\_\". If set to `null` or empty string, unfilled parts will be empty as in a regular input.\n\n### `alwaysShowMask`\n\nIf enabled, mask prefix and placeholder will be displayed even when input is empty and has no focus.\n\n### `beforeMaskedStateChange`\n\nIn case you need to customize masking behavior, you can provide `beforeMaskedStateChange` function to change masked value and cursor position before it's applied to the input.\n\nIt receieves an object with `previousState`, `currentState` and `nextState` properties. Each state is an object with `value` and `selection` properites where `value` is a string and selection is an object containing `start` and `end` positions of the selection.\n\n1. **previousState:** Input state before change. Only defined on `change` event.\n2. **currentState:** Current raw input state. Not defined during component render.\n3. **nextState:** Input state with applied mask. Contains `value` and `selection` fields.\n\nSelection positions will be `null` if input isn't focused and during rendering.\n\n`beforeMaskedStateChange` must return a new state with `value` and `selection`.\n\n```jsx\n// Trim trailing slashes\nfunction beforeMaskedStateChange({ nextState }) {\n let { value } = nextState;\n if (value.endsWith(\"/\")) {\n value = value.slice(0, -1);\n }\n\n return {\n ...nextState,\n value,\n };\n}\n\nreturn (\n \n);\n```\n\nPlease note that `beforeMaskedStateChange` executes more often than `onChange` and must be pure.\n\n### `children`\n\nTo use another component instead of regular `` 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`.\n\n```jsx\nimport React from \"react\";\nimport InputMask from \"@mona-health/react-input-mask\";\nimport MaterialInput from \"@material-ui/core/Input\";\n\n// Will work fine\nfunction Input(props) {\n return (\n \n \n \n );\n}\n\n// Will throw an error because InputMask's and children's onChange props aren't the same\nfunction InvalidInput(props) {\n return (\n \n \n \n );\n}\n```\n\n**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:\n\n1. a function component that implments `React.forwardRef`\n\n ```jsx\n const FunctionalInputComponent = React.forwardRef((props, ref) => {\n return ;\n });\n ```\n\n2. 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`)\n\n ```jsx\n class InnerClassInputComponent extends React.Component {\n render() {\n const { innerRef, ...restProps } = this.props;\n return (\n
\n \n
\n );\n }\n }\n\n const ClassInputComponent = React.forwardRef((props, ref) => {\n return ;\n });\n ```\n\nFor more information see the [Material UI Composition guide - caveat with Refs](https://mui.com/material-ui/guides/composition/#caveat-with-refs).\n\n# Known Issues\n\n### Autofill\n\nBrowser'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:\n\n1. Set `maskPlaceholder` to null and trim space after \"+1\" with `beforeMaskedStateChange` if no more digits are entered.\n2. 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.\n3. Use less formatting in the mask.\n\nPlease note that it might lead to worse user experience (should I enter +1 if input is empty?). You should choose what's more important to your users — smooth typing experience or autofill. Phone and ZIP code inputs are very likely to be autofilled and it's a good idea to care about it, while security confirmation code in two-factor authorization shouldn't care about autofill at all.\n\n### Cypress tests\n\nThe following sequence could fail\n\n```js\ncy.get(\"input\").focus().type(\"12345\").should(\"have.value\", \"12/34/5___\"); // expected to have value 12/34/5___, but the value was 23/45/____\n```\n\nSince [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.\n\nThere is a few possible workarounds\n\n```js\n// Start typing without calling focus() explicitly.\n// type() is an action command and focuses input anyway\ncy.get(\"input\").type(\"12345\").should(\"have.value\", \"12/34/5___\");\n\n// Use click() instead of focus()\ncy.get(\"input\").click().type(\"12345\").should(\"have.value\", \"12/34/5___\");\n\n// Or wait a little after focus()\ncy.get(\"input\")\n .focus()\n .wait(50)\n .type(\"12345\")\n .should(\"have.value\", \"12/34/5___\");\n```\n\n# Building\n\nRunning `npm install` runs `lint`, `test`, `clean`, `types` and `build` scripts too.\n\nSet the `CHROME_BIN` environment variable which is the path to the Chrome binary to prevent karma errors in `npm run test`.\n\n# Thanks\n\nThanks to [BrowserStack](https://www.browserstack.com/) for the help with testing on real devices\n","readmeFilename":"README.md"}