react-imask - npm Package Compare versions

Comparing version 6.6.2 to 7.0.0-alpha.0

dist/hook.d.ts

@@ -1,14 +0,15 @@
-import IMask from 'imask';
+import { type InputMask, type InputMaskElement, type FactoryOpts } from 'imask';
 import { Dispatch } from 'react';
 import type { MutableRefObject } 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 }?: Partial<Pick<ReactMaskProps<Opts, true, IMask.InputMask<Opts>['value'], MaskElement>, 'onAccept' | 'onComplete'>>): {
+import type { ReactMaskProps } from './mixin';
+export default function useIMask<MaskElement extends InputMaskElement, Opts extends FactoryOpts>(opts: Opts, { onAccept, onComplete }?: Partial<Pick<ReactMaskProps<MaskElement, Opts>, 'onAccept' | 'onComplete'>>): {
     ref: MutableRefObject<MaskElement>;
-    maskRef: MutableRefObject<IMask.InputMask<Opts>>;
-    value: IMask.InputMask<Opts>['value'];
-    setValue: Dispatch<IMask.InputMask<Opts>['value']>;
-    unmaskedValue: IMask.InputMask<Opts>['unmaskedValue'];
-    setUnmaskedValue: Dispatch<IMask.InputMask<Opts>['unmaskedValue']>;
-    typedValue: IMask.InputMask<Opts>['typedValue'];
-    setTypedValue: Dispatch<IMask.InputMask<Opts>['typedValue']>;
+    maskRef: MutableRefObject<InputMask<Opts>>;
+    value: InputMask<Opts>['value'];
+    setValue: Dispatch<InputMask<Opts>['value']>;
+    unmaskedValue: InputMask<Opts>['unmaskedValue'];
+    setUnmaskedValue: Dispatch<InputMask<Opts>['unmaskedValue']>;
+    typedValue: InputMask<Opts>['typedValue'];
+    setTypedValue: Dispatch<InputMask<Opts>['typedValue']>;
 };
+//# sourceMappingURL=hook.d.ts.map

dist/index.d.ts

@@ -6,1 +6,2 @@ import 'imask';
 export { default as useIMask } from './hook';
+//# sourceMappingURL=index.d.ts.map

dist/mixin.d.ts

 import React from 'react';
-import IMask from 'imask';
+import { type InputMask, type InputMaskElement, type FactoryOpts, type AllFactoryStaticOpts } from 'imask';
 export type Falsy = false | 0 | "" | null | undefined;
-export type ReactElement = IMask.MaskElement | HTMLTextAreaElement | HTMLInputElement;
-export type ReactElementProps<MaskElement extends ReactElement = ReactElement> = React.HTMLProps<MaskElement>;
-export type ReactMaskProps<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> = {
-    onAccept?: (value: Value, maskRef: IMask.InputMask<Opts>, e?: InputEvent) => void;
-    onComplete?: (value: Value, maskRef: IMask.InputMask<Opts>, e?: InputEvent) => void;
-    unmask?: Unmask;
-    value?: Value;
+type ReactMaskOpts = FactoryOpts & {
+    unmask?: 'typed' | boolean;
+};
+export type UnmaskValue<Opts extends ReactMaskOpts> = Opts['unmask'] extends 'typed' ? InputMask<Opts>['typedValue'] : Opts['unmask'] extends Falsy ? InputMask<Opts>['value'] : InputMask<Opts>['unmaskedValue'];
+export type ReactMaskProps<MaskElement extends InputMaskElement, Opts extends ReactMaskOpts = ReactMaskOpts> = {
+    onAccept?: (value: UnmaskValue<Opts>, maskRef: InputMask<Opts>, e?: InputEvent) => void;
+    onComplete?: (value: UnmaskValue<Opts>, maskRef: InputMask<Opts>, e?: InputEvent) => void;
+    unmask?: Opts['unmask'];
+    value?: UnmaskValue<Opts>;
     inputRef?: React.Ref<MaskElement>;
-    ref?: React.Ref<React.ComponentType<IMaskInputProps<Opts, Unmask, Value, MaskElement>>>;
+    ref?: React.Ref<React.ComponentType<IMaskInputProps<MaskElement>>>;
 };
-export type ReactMixinComponent<MaskElement extends ReactElement = ReactElement, MaskElementProps = ReactElementProps<MaskElement>> = React.ComponentType<MaskElementProps & {
+declare const MASK_PROPS: {
+    [key in keyof (AllFactoryStaticOpts & ReactMaskProps<InputMaskElement, AllFactoryStaticOpts>)]: any;
+};
+declare const NON_MASK_OPTIONS_PROPS_NAMES: readonly ["value", "unmask", "onAccept", "onComplete", "inputRef"];
+type ReactElementProps<MaskElement extends InputMaskElement> = Omit<Omit<React.HTMLProps<MaskElement>, keyof typeof MASK_PROPS>, typeof NON_MASK_OPTIONS_PROPS_NAMES[number]>;
+export type ReactMixinComponent<MaskElement extends InputMaskElement> = React.ComponentType<ReactElementProps<MaskElement> & {
     inputRef: React.Ref<MaskElement>;
 }>;
-export 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> = IMask.DeduceMaskedOptions<Opts> & ReactMaskProps<Opts, Unmask, Value, MaskElement>;
-export 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.ForwardRefExoticComponent<React.PropsWithoutRef<IMaskInputProps<Opts, Unmask, Value, MaskElement, MaskElementProps>> & React.RefAttributes<React.ComponentType<IMaskInputProps<Opts, Unmask, Value, MaskElement, MaskElementProps>>>>;
+export type IMaskMixinProps<MaskElement extends InputMaskElement, Props extends ReactMaskOpts & ReactMaskProps<MaskElement> = ReactMaskOpts & ReactMaskProps<MaskElement>> = Props & ReactMaskProps<MaskElement, Props>;
+export type IMaskInputProps<MaskElement extends InputMaskElement, Props extends IMaskMixinProps<MaskElement> = IMaskMixinProps<MaskElement>> = ReactElementProps<MaskElement> & IMaskMixinProps<MaskElement, Props>;
+export default function IMaskMixin<MaskElement extends InputMaskElement, Props extends IMaskInputProps<MaskElement>>(ComposedComponent: ReactMixinComponent<MaskElement>): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<React.ComponentType<Props>>>;
+export {};
+//# sourceMappingURL=mixin.d.ts.map

dist/react-imask.d.ts

@@ -6,1 +6,2 @@ import 'imask';
 export { default as useIMask } from './hook';
+//# sourceMappingURL=index.d.ts.map

dist/react-imask.js

@@ -7,66 +7,48 @@ (function (global, factory) {
 
-  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-  var IMask__default = /*#__PURE__*/_interopDefaultLegacy(IMask);
-  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-
-  function _objectDestructuringEmpty(obj) {
-    if (obj == null) throw new TypeError("Cannot destructure " + obj);
-  }
-  function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
-    }
-    return target;
-  }
-
-  // TODO should be imported from core
-
   const MASK_PROPS = {
     // common
-    mask: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array, PropTypes__default["default"].func, PropTypes__default["default"].string, PropTypes__default["default"].instanceOf(RegExp), PropTypes__default["default"].oneOf([Date, Number, IMask__default["default"].Masked]), PropTypes__default["default"].instanceOf(IMask__default["default"].Masked)]),
-    value: PropTypes__default["default"].any,
-    unmask: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].oneOf(['typed'])]),
-    prepare: PropTypes__default["default"].func,
-    validate: PropTypes__default["default"].func,
-    commit: PropTypes__default["default"].func,
-    overwrite: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].oneOf(['shift'])]),
-    eager: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].oneOf(['append', 'remove'])]),
-    skipInvalid: PropTypes__default["default"].bool,
+    mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func, PropTypes.string, PropTypes.instanceOf(RegExp), PropTypes.oneOf([Date, Number, IMask.Masked]), PropTypes.instanceOf(IMask.Masked)]),
+    value: PropTypes.any,
+    unmask: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['typed'])]),
+    prepare: PropTypes.func,
+    prepareChar: PropTypes.func,
+    validate: PropTypes.func,
+    commit: PropTypes.func,
+    overwrite: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['shift'])]),
+    eager: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['append', 'remove'])]),
+    skipInvalid: PropTypes.bool,
     // events
-    onAccept: PropTypes__default["default"].func,
-    onComplete: PropTypes__default["default"].func,
+    onAccept: PropTypes.func,
+    onComplete: PropTypes.func,
     // pattern
-    placeholderChar: PropTypes__default["default"].string,
-    displayChar: PropTypes__default["default"].string,
-    lazy: PropTypes__default["default"].bool,
-    definitions: PropTypes__default["default"].object,
-    blocks: PropTypes__default["default"].object,
+    placeholderChar: PropTypes.string,
+    displayChar: PropTypes.string,
+    lazy: PropTypes.bool,
+    definitions: PropTypes.object,
+    blocks: PropTypes.object,
+    // enum
+    enum: PropTypes.arrayOf(PropTypes.string),
+    // range
+    maxLength: PropTypes.number,
+    from: PropTypes.number,
+    to: PropTypes.number,
     // date
-    pattern: PropTypes__default["default"].string,
-    format: PropTypes__default["default"].func,
-    parse: PropTypes__default["default"].func,
-    autofix: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].oneOf(['pad'])]),
+    pattern: PropTypes.string,
+    format: PropTypes.func,
+    parse: PropTypes.func,
+    autofix: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['pad'])]),
     // number
-    radix: PropTypes__default["default"].string,
-    thousandsSeparator: PropTypes__default["default"].string,
-    mapToRadix: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-    scale: PropTypes__default["default"].number,
-    signed: PropTypes__default["default"].bool,
-    normalizeZeros: PropTypes__default["default"].bool,
-    padFractionalZeros: PropTypes__default["default"].bool,
-    min: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].instanceOf(Date)]),
-    max: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].instanceOf(Date)]),
+    radix: PropTypes.string,
+    thousandsSeparator: PropTypes.string,
+    mapToRadix: PropTypes.arrayOf(PropTypes.string),
+    scale: PropTypes.number,
+    normalizeZeros: PropTypes.bool,
+    padFractionalZeros: PropTypes.bool,
+    min: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]),
+    max: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]),
     // dynamic
-    dispatch: PropTypes__default["default"].func,
+    dispatch: PropTypes.func,
     // ref
-    inputRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
-      current: PropTypes__default["default"].object
+    inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+      current: PropTypes.object
     })])
@@ -77,9 +59,9 @@ };
   const MASK_OPTIONS_PROPS_NAMES = MASK_PROPS_NAMES.filter(pName => NON_MASK_OPTIONS_PROPS_NAMES.indexOf(pName) < 0);
-  // 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) {
-    const MaskedComponent = class extends React__default["default"].Component {
+    var _class;
+    const MaskedComponent = (_class = class MaskedComponent extends React.Component {
       constructor(props) {
         super(props);
+        this.element = void 0;
+        this.maskRef = void 0;
         this._inputRef = this._inputRef.bind(this);
@@ -103,3 +85,6 @@ }
           this.destroyMask();
-          if ('value' in props) this.element.value = props.value;
+          if ('value' in props) {
+            var _this$element;
+            if ((_this$element = this.element) != null && _this$element.isContentEditable && this.element.tagName !== 'INPUT' && this.element.tagName !== 'TEXTAREA') this.element.textContent = props.value;else this.element.value = props.value;
+          }
         }
@@ -116,5 +101,7 @@ }
       }
-      initMask() {
-        let maskOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._extractMaskOptionsFromProps(this.props);
-        this.maskRef = IMask__default["default"](this.element, maskOptions).on('accept', this._onAccept.bind(this)).on('complete', this._onComplete.bind(this));
+      initMask(maskOptions) {
+        if (maskOptions === void 0) {
+          maskOptions = this._extractMaskOptionsFromProps(this.props);
+        }
+        this.maskRef = IMask(this.element, maskOptions).on('accept', this._onAccept.bind(this)).on('complete', this._onComplete.bind(this));
         if ('value' in this.props) this.maskValue = this.props.value;
@@ -129,16 +116,16 @@ }
       _extractMaskOptionsFromProps(props) {
-        const cloneProps = Object.assign({}, (_objectDestructuringEmpty(props), props));
+        const {
+          ...cloneProps
+        } = props;
 
-        // keep only mask options props
-        Object.keys(cloneProps)
-        // TODO why need cast to string?
-        .filter(prop => MASK_OPTIONS_PROPS_NAMES.indexOf(prop) < 0).forEach(nonMaskProp => {
+        // keep only mask options
+        Object.keys(cloneProps).filter(prop => MASK_OPTIONS_PROPS_NAMES.indexOf(prop) < 0).forEach(nonMaskProp => {
           delete cloneProps[nonMaskProp];
         });
-
-        // TODO type actually should be IMask.DeduceMasked<Opts>
         return cloneProps;
       }
       _extractNonMaskProps(props) {
-        const cloneProps = Object.assign({}, (_objectDestructuringEmpty(props), props));
+        const {
+          ...cloneProps
+        } = props;
         MASK_PROPS_NAMES.forEach(maskProp => {
@@ -165,40 +152,38 @@ delete cloneProps[maskProp];
       render() {
-        return React__default["default"].createElement(ComposedComponent, Object.assign({}, this._extractNonMaskProps(this.props), {
+        return React.createElement(ComposedComponent, {
+          ...this._extractNonMaskProps(this.props),
           inputRef: this._inputRef
-        }));
+        });
       }
-    };
+    }, _class.displayName = void 0, _class.propTypes = void 0, _class);
     const nestedComponentName = ComposedComponent.displayName || ComposedComponent.name || 'Component';
-    MaskedComponent.displayName = "IMask(".concat(nestedComponentName, ")");
+    MaskedComponent.displayName = "IMask(" + nestedComponentName + ")";
     MaskedComponent.propTypes = MASK_PROPS;
-    return React__default["default"].forwardRef((props, ref) => React__default["default"].createElement(MaskedComponent, Object.assign({}, props, {
+    return React.forwardRef((props, ref) => React.createElement(MaskedComponent, {
+      ...props,
       ref
-    })));
+    }));
   }
 
-  const _excluded$1 = ["inputRef"];
   const IMaskInputClass = IMaskMixin(_ref => {
     let {
-        inputRef
-      } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-    return React__default["default"].createElement('input', Object.assign({}, props, {
+      inputRef,
+      ...props
+    } = _ref;
+    return React.createElement('input', {
+      ...props,
       ref: inputRef
-    }));
+    });
   });
-  const IMaskInputFn = (props, ref) =>
-  // TODO type
-  React__default["default"].createElement(IMaskInputClass, Object.assign({}, props, {
+  const IMaskInputFn = (props, ref) => React.createElement(IMaskInputClass, {
+    ...props,
     ref
-  }));
-  const IMaskInput = React__default["default"].forwardRef(IMaskInputFn);
+  });
+  const IMaskInput = React.forwardRef(IMaskInputFn);
 
-  const _excluded = ["value"],
-    _excluded2 = ["unmaskedValue"],
-    _excluded3 = ["typedValue"];
-  function useIMask(opts) {
+  function useIMask(opts, _temp) {
     let {
       onAccept,
       onComplete
-    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    } = _temp === void 0 ? {} : _temp;
     const ref = React.useRef(null);
@@ -213,3 +198,3 @@ const maskRef = React.useRef(null);
       var _maskRef$current;
-      (_maskRef$current = maskRef.current) === null || _maskRef$current === void 0 ? void 0 : _maskRef$current.destroy();
+      (_maskRef$current = maskRef.current) == null ? void 0 : _maskRef$current.destroy();
       maskRef.current = null;
@@ -228,16 +213,16 @@ }, []);
       setValue(m.value);
-      onAccept === null || onAccept === void 0 ? void 0 : onAccept(m.value, m, event);
+      onAccept == null ? void 0 : onAccept(m.value, m, event);
     }, [onAccept]);
-    const _onComplete = React.useCallback(() => maskRef.current && (onComplete === null || onComplete === void 0 ? void 0 : onComplete(maskRef.current.value, maskRef.current)), [onComplete]);
+    const _onComplete = React.useCallback(() => maskRef.current && (onComplete == null ? void 0 : onComplete(maskRef.current.value, maskRef.current)), [onComplete]);
     React.useEffect(() => {
       const el = ref.current;
-      if (!el || !(opts !== null && opts !== void 0 && opts.mask)) return _destroyMask();
+      if (!el || !(opts != null && opts.mask)) return _destroyMask();
       const mask = maskRef.current;
       if (!mask) {
-        if (el && opts !== null && opts !== void 0 && opts.mask) {
-          maskRef.current = IMask__default["default"](el, opts);
+        if (el && opts != null && opts.mask) {
+          maskRef.current = IMask(el, opts);
           _onAccept();
         }
       } else {
-        mask === null || mask === void 0 ? void 0 : mask.updateOptions(opts);
+        mask == null ? void 0 : mask.updateOptions(opts);
       }
@@ -258,5 +243,5 @@ setInitialized(Boolean(maskRef.current));
       const {
-          value: lastAcceptValue
-        } = lastAcceptState,
-        state = _objectWithoutPropertiesLoose(lastAcceptState, _excluded);
+        value: lastAcceptValue,
+        ...state
+      } = lastAcceptState;
       const mask = maskRef.current;
@@ -268,5 +253,5 @@ if (mask && initialized && lastAcceptValue !== value) mask.value = value;
       const {
-          unmaskedValue: lastAcceptUnmaskedValue
-        } = lastAcceptState,
-        state = _objectWithoutPropertiesLoose(lastAcceptState, _excluded2);
+        unmaskedValue: lastAcceptUnmaskedValue,
+        ...state
+      } = lastAcceptState;
       const mask = maskRef.current;
@@ -278,5 +263,5 @@ if (mask && initialized && lastAcceptUnmaskedValue !== unmaskedValue) mask.unmaskedValue = unmaskedValue;
       const {
-          typedValue: lastAcceptTypedValue
-        } = lastAcceptState,
-        state = _objectWithoutPropertiesLoose(lastAcceptState, _excluded3);
+        typedValue: lastAcceptTypedValue,
+        ...state
+      } = lastAcceptState;
       const mask = maskRef.current;
@@ -299,6 +284,3 @@ if (mask && initialized && lastAcceptTypedValue !== typedValue) mask.typedValue = typedValue;
 
-  Object.defineProperty(exports, 'IMask', {
-    enumerable: true,
-    get: function () { return IMask__default["default"]; }
-  });
+  exports.IMask = IMask;
   exports.IMaskInput = IMaskInput;
@@ -308,5 +290,3 @@ exports.IMaskMixin = IMaskMixin;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-
 }));
 //# sourceMappingURL=react-imask.js.map

esm/hook.d.ts

@@ -1,14 +0,15 @@
-import IMask from 'imask';
+import { type InputMask, type InputMaskElement, type FactoryOpts } from 'imask';
 import { Dispatch } from 'react';
 import type { MutableRefObject } 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 }?: Partial<Pick<ReactMaskProps<Opts, true, IMask.InputMask<Opts>['value'], MaskElement>, 'onAccept' | 'onComplete'>>): {
+import type { ReactMaskProps } from './mixin';
+export default function useIMask<MaskElement extends InputMaskElement, Opts extends FactoryOpts>(opts: Opts, { onAccept, onComplete }?: Partial<Pick<ReactMaskProps<MaskElement, Opts>, 'onAccept' | 'onComplete'>>): {
     ref: MutableRefObject<MaskElement>;
-    maskRef: MutableRefObject<IMask.InputMask<Opts>>;
-    value: IMask.InputMask<Opts>['value'];
-    setValue: Dispatch<IMask.InputMask<Opts>['value']>;
-    unmaskedValue: IMask.InputMask<Opts>['unmaskedValue'];
-    setUnmaskedValue: Dispatch<IMask.InputMask<Opts>['unmaskedValue']>;
-    typedValue: IMask.InputMask<Opts>['typedValue'];
-    setTypedValue: Dispatch<IMask.InputMask<Opts>['typedValue']>;
+    maskRef: MutableRefObject<InputMask<Opts>>;
+    value: InputMask<Opts>['value'];
+    setValue: Dispatch<InputMask<Opts>['value']>;
+    unmaskedValue: InputMask<Opts>['unmaskedValue'];
+    setUnmaskedValue: Dispatch<InputMask<Opts>['unmaskedValue']>;
+    typedValue: InputMask<Opts>['typedValue'];
+    setTypedValue: Dispatch<InputMask<Opts>['typedValue']>;
 };
+//# sourceMappingURL=hook.d.ts.map

esm/hook.js

@@ -1,13 +0,9 @@
-import { _ as _objectWithoutPropertiesLoose } from './_rollupPluginBabelHelpers-2cac7098.js';
 import IMask from 'imask/esm/imask';
 import { useRef, useState, useCallback, useEffect } from 'react';
 
-const _excluded = ["value"],
-  _excluded2 = ["unmaskedValue"],
-  _excluded3 = ["typedValue"];
-function useIMask(opts) {
+function useIMask(opts, _temp) {
   let {
     onAccept,
     onComplete
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  } = _temp === void 0 ? {} : _temp;
   const ref = useRef(null);
@@ -22,3 +18,3 @@ const maskRef = useRef(null);
     var _maskRef$current;
-    (_maskRef$current = maskRef.current) === null || _maskRef$current === void 0 ? void 0 : _maskRef$current.destroy();
+    (_maskRef$current = maskRef.current) == null ? void 0 : _maskRef$current.destroy();
     maskRef.current = null;
@@ -37,11 +33,11 @@ }, []);
     setValue(m.value);
-    onAccept === null || onAccept === void 0 ? void 0 : onAccept(m.value, m, event);
+    onAccept == null ? void 0 : onAccept(m.value, m, event);
   }, [onAccept]);
-  const _onComplete = useCallback(() => maskRef.current && (onComplete === null || onComplete === void 0 ? void 0 : onComplete(maskRef.current.value, maskRef.current)), [onComplete]);
+  const _onComplete = useCallback(() => maskRef.current && (onComplete == null ? void 0 : onComplete(maskRef.current.value, maskRef.current)), [onComplete]);
   useEffect(() => {
     const el = ref.current;
-    if (!el || !(opts !== null && opts !== void 0 && opts.mask)) return _destroyMask();
+    if (!el || !(opts != null && opts.mask)) return _destroyMask();
     const mask = maskRef.current;
     if (!mask) {
-      if (el && opts !== null && opts !== void 0 && opts.mask) {
+      if (el && opts != null && opts.mask) {
         maskRef.current = IMask(el, opts);
@@ -51,3 +47,3 @@ _onAccept();
     } else {
-      mask === null || mask === void 0 ? void 0 : mask.updateOptions(opts);
+      mask == null ? void 0 : mask.updateOptions(opts);
     }
@@ -68,5 +64,5 @@ setInitialized(Boolean(maskRef.current));
     const {
-        value: lastAcceptValue
-      } = lastAcceptState,
-      state = _objectWithoutPropertiesLoose(lastAcceptState, _excluded);
+      value: lastAcceptValue,
+      ...state
+    } = lastAcceptState;
     const mask = maskRef.current;
@@ -78,5 +74,5 @@ if (mask && initialized && lastAcceptValue !== value) mask.value = value;
     const {
-        unmaskedValue: lastAcceptUnmaskedValue
-      } = lastAcceptState,
-      state = _objectWithoutPropertiesLoose(lastAcceptState, _excluded2);
+      unmaskedValue: lastAcceptUnmaskedValue,
+      ...state
+    } = lastAcceptState;
     const mask = maskRef.current;
@@ -88,5 +84,5 @@ if (mask && initialized && lastAcceptUnmaskedValue !== unmaskedValue) mask.unmaskedValue = unmaskedValue;
     const {
-        typedValue: lastAcceptTypedValue
-      } = lastAcceptState,
-      state = _objectWithoutPropertiesLoose(lastAcceptState, _excluded3);
+      typedValue: lastAcceptTypedValue,
+      ...state
+    } = lastAcceptState;
     const mask = maskRef.current;
@@ -93,0 +89,0 @@ if (mask && initialized && lastAcceptTypedValue !== typedValue) mask.typedValue = typedValue;

esm/index.d.ts

@@ -6,1 +6,2 @@ import 'imask';
 export { default as useIMask } from './hook';
+//# sourceMappingURL=index.d.ts.map

esm/index.js

@@ -6,4 +6,3 @@ import 'imask/esm';
 export { default as useIMask } from './hook.js';
-import './_rollupPluginBabelHelpers-2cac7098.js';
 import 'react';
 import 'prop-types';

esm/input.js

@@ -1,2 +0,1 @@
-import { _ as _objectWithoutPropertiesLoose } from './_rollupPluginBabelHelpers-2cac7098.js';
 import React from 'react';
@@ -7,19 +6,18 @@ import IMaskMixin from './mixin.js';
 
-const _excluded = ["inputRef"];
 const IMaskInputClass = IMaskMixin(_ref => {
   let {
-      inputRef
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return React.createElement('input', Object.assign({}, props, {
+    inputRef,
+    ...props
+  } = _ref;
+  return React.createElement('input', {
+    ...props,
     ref: inputRef
-  }));
+  });
 });
-const IMaskInputFn = (props, ref) =>
-// TODO type
-React.createElement(IMaskInputClass, Object.assign({}, props, {
+const IMaskInputFn = (props, ref) => React.createElement(IMaskInputClass, {
+  ...props,
   ref
-}));
+});
 const IMaskInput = React.forwardRef(IMaskInputFn);
 
 export { IMaskInput as default };

esm/mixin.d.ts

 import React from 'react';
-import IMask from 'imask';
+import { type InputMask, type InputMaskElement, type FactoryOpts, type AllFactoryStaticOpts } from 'imask';
 export type Falsy = false | 0 | "" | null | undefined;
-export type ReactElement = IMask.MaskElement | HTMLTextAreaElement | HTMLInputElement;
-export type ReactElementProps<MaskElement extends ReactElement = ReactElement> = React.HTMLProps<MaskElement>;
-export type ReactMaskProps<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> = {
-    onAccept?: (value: Value, maskRef: IMask.InputMask<Opts>, e?: InputEvent) => void;
-    onComplete?: (value: Value, maskRef: IMask.InputMask<Opts>, e?: InputEvent) => void;
-    unmask?: Unmask;
-    value?: Value;
+type ReactMaskOpts = FactoryOpts & {
+    unmask?: 'typed' | boolean;
+};
+export type UnmaskValue<Opts extends ReactMaskOpts> = Opts['unmask'] extends 'typed' ? InputMask<Opts>['typedValue'] : Opts['unmask'] extends Falsy ? InputMask<Opts>['value'] : InputMask<Opts>['unmaskedValue'];
+export type ReactMaskProps<MaskElement extends InputMaskElement, Opts extends ReactMaskOpts = ReactMaskOpts> = {
+    onAccept?: (value: UnmaskValue<Opts>, maskRef: InputMask<Opts>, e?: InputEvent) => void;
+    onComplete?: (value: UnmaskValue<Opts>, maskRef: InputMask<Opts>, e?: InputEvent) => void;
+    unmask?: Opts['unmask'];
+    value?: UnmaskValue<Opts>;
     inputRef?: React.Ref<MaskElement>;
-    ref?: React.Ref<React.ComponentType<IMaskInputProps<Opts, Unmask, Value, MaskElement>>>;
+    ref?: React.Ref<React.ComponentType<IMaskInputProps<MaskElement>>>;
 };
-export type ReactMixinComponent<MaskElement extends ReactElement = ReactElement, MaskElementProps = ReactElementProps<MaskElement>> = React.ComponentType<MaskElementProps & {
+declare const MASK_PROPS: {
+    [key in keyof (AllFactoryStaticOpts & ReactMaskProps<InputMaskElement, AllFactoryStaticOpts>)]: any;
+};
+declare const NON_MASK_OPTIONS_PROPS_NAMES: readonly ["value", "unmask", "onAccept", "onComplete", "inputRef"];
+type ReactElementProps<MaskElement extends InputMaskElement> = Omit<Omit<React.HTMLProps<MaskElement>, keyof typeof MASK_PROPS>, typeof NON_MASK_OPTIONS_PROPS_NAMES[number]>;
+export type ReactMixinComponent<MaskElement extends InputMaskElement> = React.ComponentType<ReactElementProps<MaskElement> & {
     inputRef: React.Ref<MaskElement>;
 }>;
-export 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> = IMask.DeduceMaskedOptions<Opts> & ReactMaskProps<Opts, Unmask, Value, MaskElement>;
-export 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.ForwardRefExoticComponent<React.PropsWithoutRef<IMaskInputProps<Opts, Unmask, Value, MaskElement, MaskElementProps>> & React.RefAttributes<React.ComponentType<IMaskInputProps<Opts, Unmask, Value, MaskElement, MaskElementProps>>>>;
+export type IMaskMixinProps<MaskElement extends InputMaskElement, Props extends ReactMaskOpts & ReactMaskProps<MaskElement> = ReactMaskOpts & ReactMaskProps<MaskElement>> = Props & ReactMaskProps<MaskElement, Props>;
+export type IMaskInputProps<MaskElement extends InputMaskElement, Props extends IMaskMixinProps<MaskElement> = IMaskMixinProps<MaskElement>> = ReactElementProps<MaskElement> & IMaskMixinProps<MaskElement, Props>;
+export default function IMaskMixin<MaskElement extends InputMaskElement, Props extends IMaskInputProps<MaskElement>>(ComposedComponent: ReactMixinComponent<MaskElement>): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<React.ComponentType<Props>>>;
+export {};
+//# sourceMappingURL=mixin.d.ts.map

esm/mixin.js

@@ -1,2 +0,1 @@
-import { a as _objectDestructuringEmpty } from './_rollupPluginBabelHelpers-2cac7098.js';
 import React from 'react';
@@ -6,4 +5,2 @@ import PropTypes from 'prop-types';
 
-// TODO should be imported from core
-
 const MASK_PROPS = {
@@ -15,2 +12,3 @@ // common
   prepare: PropTypes.func,
+  prepareChar: PropTypes.func,
   validate: PropTypes.func,
@@ -30,2 +28,8 @@ commit: PropTypes.func,
   blocks: PropTypes.object,
+  // enum
+  enum: PropTypes.arrayOf(PropTypes.string),
+  // range
+  maxLength: PropTypes.number,
+  from: PropTypes.number,
+  to: PropTypes.number,
   // date
@@ -41,3 +45,2 @@ pattern: PropTypes.string,
   scale: PropTypes.number,
-  signed: PropTypes.bool,
   normalizeZeros: PropTypes.bool,
@@ -57,9 +60,9 @@ padFractionalZeros: PropTypes.bool,
 const MASK_OPTIONS_PROPS_NAMES = MASK_PROPS_NAMES.filter(pName => NON_MASK_OPTIONS_PROPS_NAMES.indexOf(pName) < 0);
-// 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) {
-  const MaskedComponent = class extends React.Component {
+  var _class;
+  const MaskedComponent = (_class = class MaskedComponent extends React.Component {
     constructor(props) {
       super(props);
+      this.element = void 0;
+      this.maskRef = void 0;
       this._inputRef = this._inputRef.bind(this);
@@ -83,3 +86,6 @@ }
         this.destroyMask();
-        if ('value' in props) this.element.value = props.value;
+        if ('value' in props) {
+          var _this$element;
+          if ((_this$element = this.element) != null && _this$element.isContentEditable && this.element.tagName !== 'INPUT' && this.element.tagName !== 'TEXTAREA') this.element.textContent = props.value;else this.element.value = props.value;
+        }
       }
@@ -96,4 +102,6 @@ }
     }
-    initMask() {
-      let maskOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._extractMaskOptionsFromProps(this.props);
+    initMask(maskOptions) {
+      if (maskOptions === void 0) {
+        maskOptions = this._extractMaskOptionsFromProps(this.props);
+      }
       this.maskRef = IMask(this.element, maskOptions).on('accept', this._onAccept.bind(this)).on('complete', this._onComplete.bind(this));
@@ -109,16 +117,16 @@ if ('value' in this.props) this.maskValue = this.props.value;
     _extractMaskOptionsFromProps(props) {
-      const cloneProps = Object.assign({}, (_objectDestructuringEmpty(props), props));
+      const {
+        ...cloneProps
+      } = props;
 
-      // keep only mask options props
-      Object.keys(cloneProps)
-      // TODO why need cast to string?
-      .filter(prop => MASK_OPTIONS_PROPS_NAMES.indexOf(prop) < 0).forEach(nonMaskProp => {
+      // keep only mask options
+      Object.keys(cloneProps).filter(prop => MASK_OPTIONS_PROPS_NAMES.indexOf(prop) < 0).forEach(nonMaskProp => {
         delete cloneProps[nonMaskProp];
       });
-
-      // TODO type actually should be IMask.DeduceMasked<Opts>
       return cloneProps;
     }
     _extractNonMaskProps(props) {
-      const cloneProps = Object.assign({}, (_objectDestructuringEmpty(props), props));
+      const {
+        ...cloneProps
+      } = props;
       MASK_PROPS_NAMES.forEach(maskProp => {
@@ -145,15 +153,17 @@ delete cloneProps[maskProp];
     render() {
-      return React.createElement(ComposedComponent, Object.assign({}, this._extractNonMaskProps(this.props), {
+      return React.createElement(ComposedComponent, {
+        ...this._extractNonMaskProps(this.props),
         inputRef: this._inputRef
-      }));
+      });
     }
-  };
+  }, _class.displayName = void 0, _class.propTypes = void 0, _class);
   const nestedComponentName = ComposedComponent.displayName || ComposedComponent.name || 'Component';
-  MaskedComponent.displayName = "IMask(".concat(nestedComponentName, ")");
+  MaskedComponent.displayName = "IMask(" + nestedComponentName + ")";
   MaskedComponent.propTypes = MASK_PROPS;
-  return React.forwardRef((props, ref) => React.createElement(MaskedComponent, Object.assign({}, props, {
+  return React.forwardRef((props, ref) => React.createElement(MaskedComponent, {
+    ...props,
     ref
-  })));
+  }));
 }
 
 export { IMaskMixin as default };

package.json

 {
   "name": "react-imask",
-  "version": "6.6.2",
+  "version": "7.0.0-alpha.0",
   "license": "MIT",
@@ -10,5 +10,7 @@ "author": "Alexey Kryazhev",
   "module": "esm/index.js",
-  "types": "dist/index.d.ts",
+  "types": "esm/index.d.ts",
+  "type": "module",
   "repository": "https://github.com/uNmAnNeR/imaskjs/tree/master/packages/react-imask",
   "scripts": {
+    "prebuild": "rimraf --glob \"{dist,esm}\"",
     "build": "tsc --emitDeclarationOnly && rollup -c",
@@ -24,3 +26,3 @@ "watch": "rollup -c -w"
   "dependencies": {
-    "imask": "^6.6.2",
+    "imask": "^7.0.0-alpha.0",
     "prop-types": "^15.8.1"
@@ -34,6 +36,6 @@ },
   },
-  "gitHead": "1d54172d7ba720e80be6c95470a5a13b839fa7ba",
+  "gitHead": "1b57d8fa92475907912d3f33de97523079454727",
   "devDependencies": {
-    "@types/react": "^18.0.20",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.2.8",
+    "@types/react-dom": "^18.2.4",
     "react": "^18.2.0",
@@ -40,0 +42,0 @@ "react-dom": "^18.2.0"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

352697

increased by372.68%

Number of package files

22

increased by15.79%

Lines of code

6741

increased by807.27%

Is type module

Yes

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@babel/runtime-corejs3@7.25.6(transitive)

• + Addedcore-js-pure@3.38.1(transitive)

• + Addedimask@7.6.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• - Removedimask@6.6.3(transitive)

• Updatedimask@^7.0.0-alpha.0