react-imask - npm Package Compare versions

Comparing version 6.4.2 to 6.4.3-alpha.0

dist/hook.d.ts

 import IMask from 'imask';
 import { Dispatch } from 'react';
-import type { MutableRefObject } from 'react';
-import type { ReactMaskProps, Falsy, ReactElement } from './mixin';
-export default function useIMask<Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions, Unmask extends ('typed' | boolean) = false, Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] : Unmask extends Falsy ? IMask.InputMask<Opts>['value'] : IMask.InputMask<Opts>['unmaskedValue'], MaskElement extends ReactElement = ReactElement>(opts: Opts, { onAccept, onComplete }?: Pick<ReactMaskProps<Opts, Unmask, Value, MaskElement>, 'onAccept' | 'onComplete'>): {
-    ref: MutableRefObject<MaskElement>;
-    maskRef: MutableRefObject<IMask.InputMask<Opts>>;
+import type { RefObject } from 'react';
+import type { ReactMaskProps, ReactElement } from './mixin';
+export default function useIMask<Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions, MaskElement extends ReactElement = HTMLInputElement>(opts: Opts, { onAccept, onComplete }?: Pick<ReactMaskProps<Opts, true, IMask.InputMask<Opts>['value'], MaskElement>, 'onAccept' | 'onComplete'>): {
+    ref: RefObject<MaskElement>;
+    maskRef: RefObject<IMask.InputMask<Opts>>;
     value: IMask.InputMask<Opts>['value'];
@@ -9,0 +9,0 @@ setValue: Dispatch<IMask.InputMask<Opts>['value']>;

dist/mixin.d.ts

@@ -11,10 +11,10 @@ import React from 'react';
     value?: Value;
-    inputRef?: React.RefCallback<MaskElement>;
+    inputRef?: React.Ref<MaskElement>;
     ref?: React.Ref<React.ComponentType<IMaskInputProps<Opts, Unmask, Value, MaskElement>>>;
 };
-export declare type ReactMixinComponent<MaskElement extends ReactElement = ReactElement> = React.ComponentType<ReactElementProps<MaskElement> & {
-    inputRef: React.RefCallback<MaskElement>;
+export declare type ReactMixinComponent<MaskElement extends ReactElement = ReactElement, MaskElementProps = ReactElementProps<MaskElement>> = React.ComponentType<MaskElementProps & {
+    inputRef: React.Ref<MaskElement>;
 }>;
 export declare type IMaskMixinProps<Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions, Unmask extends ('typed' | boolean) = false, Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] : Unmask extends Falsy ? IMask.InputMask<Opts>['value'] : IMask.InputMask<Opts>['unmaskedValue'], MaskElement extends ReactElement = ReactElement> = Opts & ReactMaskProps<Opts, Unmask, Value, MaskElement>;
-export declare type IMaskInputProps<Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions, Unmask extends ('typed' | boolean) = false, Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] : Unmask extends Falsy ? IMask.InputMask<Opts>['value'] : IMask.InputMask<Opts>['unmaskedValue'], MaskElement extends ReactElement = ReactElement> = ReactElementProps<MaskElement> & IMaskMixinProps<Opts, Unmask, Value, MaskElement>;
-export default function IMaskMixin<Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions, Unmask extends ('typed' | boolean) = false, Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] : Unmask extends Falsy ? IMask.InputMask<Opts>['value'] : IMask.InputMask<Opts>['unmaskedValue'], MaskElement extends ReactElement = ReactElement>(ComposedComponent: ReactMixinComponent<MaskElement>): React.ComponentType<IMaskInputProps<Opts, Unmask, Value, MaskElement>>;
+export declare type IMaskInputProps<Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions, Unmask extends ('typed' | boolean) = false, Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] : Unmask extends Falsy ? IMask.InputMask<Opts>['value'] : IMask.InputMask<Opts>['unmaskedValue'], MaskElement extends ReactElement = ReactElement, MaskElementProps = ReactElementProps<MaskElement>> = MaskElementProps & IMaskMixinProps<Opts, Unmask, Value, MaskElement>;
+export default function IMaskMixin<Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions, Unmask extends ('typed' | boolean) = false, Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] : Unmask extends Falsy ? IMask.InputMask<Opts>['value'] : IMask.InputMask<Opts>['unmaskedValue'], MaskElement extends ReactElement = ReactElement, MaskElementProps = ReactElementProps<MaskElement>>(ComposedComponent: ReactMixinComponent<MaskElement, MaskElementProps>): React.ComponentType<IMaskInputProps<Opts, Unmask, Value, MaskElement, MaskElementProps>>;

dist/react-imask.js

@@ -57,3 +57,3 @@ (function (global, factory) {
   function _getPrototypeOf(o) {
-    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
       return o.__proto__ || Object.getPrototypeOf(o);
@@ -65,7 +65,6 @@ };
   function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
       o.__proto__ = p;
       return o;
     };
-
     return _setPrototypeOf(o, p);
@@ -255,3 +254,5 @@ }
     // ref
-    inputRef: PropTypes__default["default"].func
+    inputRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
+      current: PropTypes__default["default"].object
+    })])
   };
@@ -263,2 +264,5 @@ var MASK_PROPS_NAMES = Object.keys(MASK_PROPS);
   });
+  // TODO
+  // 1. seems like it's wrong to have Opts as only mask options. Other component/input props should also be there. Where is "unmask" prop for instance?
+  // 2. Unmask should be infered from Opts (see https://github.com/uNmAnNeR/imaskjs/issues/554#issuecomment-1114014010)
   function IMaskMixin(ComposedComponent) {
@@ -295,11 +299,6 @@ var MaskedComponent = /*#__PURE__*/function (_React$Component) {
             if (this.maskRef) {
-              this.maskRef.updateOptions(maskOptions); // TODO
-
-              if ('value' in props && (props.value !== this.maskValue || // handle cases like Number('') === 0,
-              // for details see https://github.com/uNmAnNeR/imaskjs/issues/134
-              typeof props.value !== 'string' && this.maskRef.value === '' && !this.maskRef.el.isActive)) {
-                this.maskValue = props.value;
-              }
+              this.maskRef.updateOptions(maskOptions);
+              if ('value' in props) this.maskValue = props.value;
             } else {
-              this.initMask(maskOptions); // TODO
+              this.initMask(maskOptions);
             }
@@ -320,3 +319,6 @@ } else {
           this.element = el;
-          if (this.props.inputRef) this.props.inputRef(el);
+
+          if (this.props.inputRef) {
+            if (Object.prototype.hasOwnProperty.call(this.props.inputRef, 'current')) this.props.inputRef.current = el;else this.props.inputRef(el);
+          }
         }
@@ -425,17 +427,22 @@ }, {
 
-    var _useState = React.useState(''),
+    var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
-        value = _useState2[0],
-        setValue = _useState2[1];
+        initialized = _useState2[0],
+        setInitialized = _useState2[1];
 
     var _useState3 = React.useState(''),
         _useState4 = _slicedToArray(_useState3, 2),
-        unmaskedValue = _useState4[0],
-        setUnmaskedValue = _useState4[1];
+        value = _useState4[0],
+        setValue = _useState4[1];
 
     var _useState5 = React.useState(''),
         _useState6 = _slicedToArray(_useState5, 2),
-        typedValue = _useState6[0],
-        setTypedValue = _useState6[1];
+        unmaskedValue = _useState6[0],
+        setUnmaskedValue = _useState6[1];
 
+    var _useState7 = React.useState(),
+        _useState8 = _slicedToArray(_useState7, 2),
+        typedValue = _useState8[0],
+        setTypedValue = _useState8[1];
+
     var _destroyMask = React.useCallback(function () {
@@ -469,5 +476,3 @@ var _maskRef$current;
 
-          if (el.defaultValue !== maskRef.current.value) {
-            _onAccept();
-          }
+          _onAccept();
         }
@@ -477,2 +482,4 @@ } else {
       }
+
+      setInitialized(Boolean(mask));
     }, [opts, _destroyMask, _onAccept]);
@@ -491,17 +498,11 @@ React.useEffect(function () {
       var mask = maskRef.current;
-
-      if (mask && mask.value !== value) {
-        mask.value = value;
-      }
+      if (mask && initialized) mask.value = value;
     }, [value]);
     React.useEffect(function () {
       var mask = maskRef.current;
-
-      if (mask && mask.unmaskedValue !== unmaskedValue) {
-        mask.unmaskedValue = unmaskedValue;
-      }
+      if (mask && initialized) mask.unmaskedValue = unmaskedValue;
     }, [unmaskedValue]);
     React.useEffect(function () {
       var mask = maskRef.current;
-      if (mask) mask.typedValue = typedValue;
+      if (mask && initialized) mask.typedValue = typedValue;
     }, [typedValue]);
@@ -508,0 +509,0 @@ React.useEffect(function () {

esm/hook.d.ts

 import IMask from 'imask';
 import { Dispatch } from 'react';
-import type { MutableRefObject } from 'react';
-import type { ReactMaskProps, Falsy, ReactElement } from './mixin';
-export default function useIMask<Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions, Unmask extends ('typed' | boolean) = false, Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] : Unmask extends Falsy ? IMask.InputMask<Opts>['value'] : IMask.InputMask<Opts>['unmaskedValue'], MaskElement extends ReactElement = ReactElement>(opts: Opts, { onAccept, onComplete }?: Pick<ReactMaskProps<Opts, Unmask, Value, MaskElement>, 'onAccept' | 'onComplete'>): {
-    ref: MutableRefObject<MaskElement>;
-    maskRef: MutableRefObject<IMask.InputMask<Opts>>;
+import type { RefObject } from 'react';
+import type { ReactMaskProps, ReactElement } from './mixin';
+export default function useIMask<Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions, MaskElement extends ReactElement = HTMLInputElement>(opts: Opts, { onAccept, onComplete }?: Pick<ReactMaskProps<Opts, true, IMask.InputMask<Opts>['value'], MaskElement>, 'onAccept' | 'onComplete'>): {
+    ref: RefObject<MaskElement>;
+    maskRef: RefObject<IMask.InputMask<Opts>>;
     value: IMask.InputMask<Opts>['value'];
@@ -9,0 +9,0 @@ setValue: Dispatch<IMask.InputMask<Opts>['value']>;

esm/hook.js

@@ -1,2 +0,2 @@
-import { _ as _slicedToArray } from './_rollupPluginBabelHelpers-9b6cc24f.js';
+import { _ as _slicedToArray } from './_rollupPluginBabelHelpers-089ae9b3.js';
 import IMask from 'imask/esm/imask';
@@ -13,17 +13,22 @@ import { useRef, useState, useCallback, useEffect } from 'react';
 
-  var _useState = useState(''),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
+      initialized = _useState2[0],
+      setInitialized = _useState2[1];
 
   var _useState3 = useState(''),
       _useState4 = _slicedToArray(_useState3, 2),
-      unmaskedValue = _useState4[0],
-      setUnmaskedValue = _useState4[1];
+      value = _useState4[0],
+      setValue = _useState4[1];
 
   var _useState5 = useState(''),
       _useState6 = _slicedToArray(_useState5, 2),
-      typedValue = _useState6[0],
-      setTypedValue = _useState6[1];
+      unmaskedValue = _useState6[0],
+      setUnmaskedValue = _useState6[1];
 
+  var _useState7 = useState(),
+      _useState8 = _slicedToArray(_useState7, 2),
+      typedValue = _useState8[0],
+      setTypedValue = _useState8[1];
+
   var _destroyMask = useCallback(function () {
@@ -57,5 +62,3 @@ var _maskRef$current;
 
-        if (el.defaultValue !== maskRef.current.value) {
-          _onAccept();
-        }
+        _onAccept();
       }
@@ -65,2 +68,4 @@ } else {
     }
+
+    setInitialized(Boolean(mask));
   }, [opts, _destroyMask, _onAccept]);
@@ -79,17 +84,11 @@ useEffect(function () {
     var mask = maskRef.current;
-
-    if (mask && mask.value !== value) {
-      mask.value = value;
-    }
+    if (mask && initialized) mask.value = value;
   }, [value]);
   useEffect(function () {
     var mask = maskRef.current;
-
-    if (mask && mask.unmaskedValue !== unmaskedValue) {
-      mask.unmaskedValue = unmaskedValue;
-    }
+    if (mask && initialized) mask.unmaskedValue = unmaskedValue;
   }, [unmaskedValue]);
   useEffect(function () {
     var mask = maskRef.current;
-    if (mask) mask.typedValue = typedValue;
+    if (mask && initialized) mask.typedValue = typedValue;
   }, [typedValue]);
@@ -96,0 +95,0 @@ useEffect(function () {

esm/index.js

@@ -6,4 +6,4 @@ import 'imask/esm';
 export { default as useIMask } from './hook.js';
-import './_rollupPluginBabelHelpers-9b6cc24f.js';
+import './_rollupPluginBabelHelpers-089ae9b3.js';
 import 'react';
 import 'prop-types';

esm/input.js

@@ -1,2 +0,2 @@
-import { f as _objectWithoutProperties } from './_rollupPluginBabelHelpers-9b6cc24f.js';
+import { f as _objectWithoutProperties } from './_rollupPluginBabelHelpers-089ae9b3.js';
 import React from 'react';
@@ -3,0 +3,0 @@ import IMaskMixin from './mixin.js';

esm/mixin.d.ts

@@ -11,10 +11,10 @@ import React from 'react';
     value?: Value;
-    inputRef?: React.RefCallback<MaskElement>;
+    inputRef?: React.Ref<MaskElement>;
     ref?: React.Ref<React.ComponentType<IMaskInputProps<Opts, Unmask, Value, MaskElement>>>;
 };
-export declare type ReactMixinComponent<MaskElement extends ReactElement = ReactElement> = React.ComponentType<ReactElementProps<MaskElement> & {
-    inputRef: React.RefCallback<MaskElement>;
+export declare type ReactMixinComponent<MaskElement extends ReactElement = ReactElement, MaskElementProps = ReactElementProps<MaskElement>> = React.ComponentType<MaskElementProps & {
+    inputRef: React.Ref<MaskElement>;
 }>;
 export declare type IMaskMixinProps<Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions, Unmask extends ('typed' | boolean) = false, Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] : Unmask extends Falsy ? IMask.InputMask<Opts>['value'] : IMask.InputMask<Opts>['unmaskedValue'], MaskElement extends ReactElement = ReactElement> = Opts & ReactMaskProps<Opts, Unmask, Value, MaskElement>;
-export declare type IMaskInputProps<Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions, Unmask extends ('typed' | boolean) = false, Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] : Unmask extends Falsy ? IMask.InputMask<Opts>['value'] : IMask.InputMask<Opts>['unmaskedValue'], MaskElement extends ReactElement = ReactElement> = ReactElementProps<MaskElement> & IMaskMixinProps<Opts, Unmask, Value, MaskElement>;
-export default function IMaskMixin<Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions, Unmask extends ('typed' | boolean) = false, Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] : Unmask extends Falsy ? IMask.InputMask<Opts>['value'] : IMask.InputMask<Opts>['unmaskedValue'], MaskElement extends ReactElement = ReactElement>(ComposedComponent: ReactMixinComponent<MaskElement>): React.ComponentType<IMaskInputProps<Opts, Unmask, Value, MaskElement>>;
+export declare type IMaskInputProps<Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions, Unmask extends ('typed' | boolean) = false, Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] : Unmask extends Falsy ? IMask.InputMask<Opts>['value'] : IMask.InputMask<Opts>['unmaskedValue'], MaskElement extends ReactElement = ReactElement, MaskElementProps = ReactElementProps<MaskElement>> = MaskElementProps & IMaskMixinProps<Opts, Unmask, Value, MaskElement>;
+export default function IMaskMixin<Opts extends IMask.AnyMaskedOptions = IMask.AnyMaskedOptions, Unmask extends ('typed' | boolean) = false, Value = Unmask extends 'typed' ? IMask.InputMask<Opts>['typedValue'] : Unmask extends Falsy ? IMask.InputMask<Opts>['value'] : IMask.InputMask<Opts>['unmaskedValue'], MaskElement extends ReactElement = ReactElement, MaskElementProps = ReactElementProps<MaskElement>>(ComposedComponent: ReactMixinComponent<MaskElement, MaskElementProps>): React.ComponentType<IMaskInputProps<Opts, Unmask, Value, MaskElement, MaskElementProps>>;

esm/mixin.js

@@ -1,2 +0,2 @@
-import { a as _inherits, b as _createSuper, c as _createClass, d as _classCallCheck, e as _assertThisInitialized } from './_rollupPluginBabelHelpers-9b6cc24f.js';
+import { a as _inherits, b as _createSuper, c as _createClass, d as _classCallCheck, e as _assertThisInitialized } from './_rollupPluginBabelHelpers-089ae9b3.js';
 import React from 'react';
@@ -42,3 +42,5 @@ import PropTypes from 'prop-types';
   // ref
-  inputRef: PropTypes.func
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })])
 };
@@ -50,2 +52,5 @@ var MASK_PROPS_NAMES = Object.keys(MASK_PROPS);
 });
+// TODO
+// 1. seems like it's wrong to have Opts as only mask options. Other component/input props should also be there. Where is "unmask" prop for instance?
+// 2. Unmask should be infered from Opts (see https://github.com/uNmAnNeR/imaskjs/issues/554#issuecomment-1114014010)
 function IMaskMixin(ComposedComponent) {
@@ -82,11 +87,6 @@ var MaskedComponent = /*#__PURE__*/function (_React$Component) {
           if (this.maskRef) {
-            this.maskRef.updateOptions(maskOptions); // TODO
-
-            if ('value' in props && (props.value !== this.maskValue || // handle cases like Number('') === 0,
-            // for details see https://github.com/uNmAnNeR/imaskjs/issues/134
-            typeof props.value !== 'string' && this.maskRef.value === '' && !this.maskRef.el.isActive)) {
-              this.maskValue = props.value;
-            }
+            this.maskRef.updateOptions(maskOptions);
+            if ('value' in props) this.maskValue = props.value;
           } else {
-            this.initMask(maskOptions); // TODO
+            this.initMask(maskOptions);
           }
@@ -107,3 +107,6 @@ } else {
         this.element = el;
-        if (this.props.inputRef) this.props.inputRef(el);
+
+        if (this.props.inputRef) {
+          if (Object.prototype.hasOwnProperty.call(this.props.inputRef, 'current')) this.props.inputRef.current = el;else this.props.inputRef(el);
+        }
       }
@@ -110,0 +113,0 @@ }, {

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "6.4.2",
+  "version": "6.4.3-alpha.0",
   "homepage": "https://imask.js.org/",
@@ -24,3 +24,3 @@ "description": "React input mask",
   "dependencies": {
-    "imask": "^6.4.2",
+    "imask": "^6.4.3-alpha.0",
     "prop-types": "^15.7.2"
@@ -34,9 +34,9 @@ },
   },
-  "gitHead": "4cb5df3142822c5de910001a4294b764c439c478",
+  "gitHead": "0fbfbfff14a55795c59144c74c1a0fdc2ae99133",
   "devDependencies": {
-    "@types/react": "^17.0.15",
-    "@types/react-dom": "^17.0.9",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@types/react": "^18.0.20",
+    "@types/react-dom": "^18.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

README.md

@@ -87,3 +87,3 @@ # React IMask Plugin
     setTypedValue,
-  } = useIMask(opts);
+  } = useIMask(opts, /* { onAccept, onComplete } */);
   
@@ -95,4 +95,1 @@ return (
 ```
-
-## Support Development
-[Paypal](https://www.paypal.me/alexeykryazhev/3)

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

94746

decreased by-62.9%

Lines of code

1131

decreased by-33.04%

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

94

decreased by-3.09%

Dependency changes

• Updatedimask@^6.4.3-alpha.0