primereact 8.7.2 → 9.0.0-beta.1

package/inputmask/inputmask.d.ts

@@ -1,43 +1,135 @@
+/**
+ *
+ * InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/inputmask/)
+ *
+ * @module inputmask
+ *
+ */
 import * as React from 'react';
 import { InputText, InputTextProps } from '../inputtext';
-import TooltipOptions from '../tooltip/tooltipoptions';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { FormEvent } from '../ts-helpers';
 
-interface InputMaskCompleteParams {
+/**
+ * Custom complete event
+ * @see {@link InputMaskProps.onComplete}
+ * @event
+ */
+interface InputMaskCompleteEvent {
+    /**
+     * Browser event
+     */
     originalEvent: React.SyntheticEvent;
+    /**
+     * New value of the component
+     */
     value: string | undefined | null;
 }
 
-interface InputMaskChangeTargetOptions {
-    name: string;
-    id: string;
-    value: string;
-}
-
-interface InputMaskChangeParams {
-    originalEvent: React.SyntheticEvent;
-    value: string;
-    stopPropagation(): void;
-    preventDefault(): void;
-    target: InputMaskChangeTargetOptions;
-}
+/**
+ * Custom change event.
+ * @see {@link InputMaskProps.onChange}
+ * @extends {FormEvent}
+ * @event
+ */
+interface InputMaskChangeEvent extends FormEvent<string> {}
 
+/**
+ * Defines valid properties in InputMask component. In addition to these, all properties of {@link inputtext} can be used in this component.
+ * @group Properties
+ */
 export interface InputMaskProps extends Omit<InputTextProps, 'onChange'> {
-    mask?: string;
-    slotChar?: string;
-    autoClear?: boolean;
-    unmask?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    required?: boolean;
-    tooltip?: string;
-    tooltipOptions?: TooltipOptions;
-    onComplete?(e: InputMaskCompleteParams): void;
-    onChange?(e: InputMaskChangeParams): void;
+    /**
+     * Mask pattern.
+     */
+    mask?: string | undefined;
+    /**
+     * Placeholder character in mask.
+     * @defaultValue _
+     */
+    slotChar?: string | undefined;
+    /**
+     * Clears the incomplete value on blur.
+     * @defaultValue false
+     */
+    autoClear?: boolean | undefined;
+    /**
+     * Defines if model sets the raw unmasked value to bound value or the formatted mask value.
+     * @defaultValue false
+     */
+    unmask?: boolean | undefined;
+    /**
+     * When present, it specifies that the element value cannot be altered.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @defaultValue false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * When present, it specifies that the element must be filled out before submitting the form.
+     * @defaultValue false
+     */
+    required?: boolean | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     * @type {TooltipOptions}
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Callback to invoke on when user completes the mask pattern.
+     * @param {InputMaskCompleteEvent} event - Custom complete event
+     */
+    onComplete?(event: InputMaskCompleteEvent): void;
+    /**
+     * Callback to invoke on value change.
+     * @param {InputMaskChangeEvent} event - Custom change event
+     */
+    onChange?(event: InputMaskChangeEvent): void;
+    /**
+     * Callback to invoke when input receives focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event
+     */
     onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when input loses focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event
+     */
     onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
-    children?: React.ReactNode;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
 }
 
+/**
+ * **PrimeReact - InputMask**
+ *
+ * _InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone._
+ *
+ * [Live Demo](https://www.primefaces.org/primereact/inputmask/)
+ * --- ---
+ * ![PrimeReact](https://www.primefaces.org/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
 export declare class InputMask extends React.Component<InputMaskProps, any> {
-    public getElement(): InputText;
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get container element.
+     * @return {InputText} Container element
+     */
+    public getElement(): typeof InputText;
 }

package/inputmask/inputmask.esm.js

@@ -1,20 +1,18 @@
 import * as React from 'react';
 import { useMountEffect, useUpdateEffect } from 'primereact/hooks';
 import { InputText } from 'primereact/inputtext';
-import { ObjectUtils, classNames, DomHandler } from 'primereact/utils';
+import { DomHandler, ObjectUtils, classNames } from 'primereact/utils';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
@@ -35,19 +33,15 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   var defaultBuffer = React.useRef(null);
   var caretTimeoutId = React.useRef(null);
   var androidChrome = React.useRef(false);
-
   var caret = function caret(first, last) {
     var range, begin, end;
     var inputEl = elementRef.current;
-
     if (!inputEl || !inputEl.offsetParent || inputEl !== document.activeElement) {
       return;
     }
-
     if (typeof first === 'number') {
       begin = first;
       end = typeof last === 'number' ? last : begin;
-
       if (inputEl.setSelectionRange) {
         inputEl.setSelectionRange(begin, end);
       } else if (inputEl['createTextRange']) {
@@ -66,57 +60,44 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         begin = 0 - range.duplicate().moveStart('character', -100000);
         end = begin + range.text.length;
       }
-
       return {
         begin: begin,
         end: end
       };
     }
   };
-
   var isCompleted = function isCompleted() {
     for (var i = firstNonMaskPos.current; i <= lastRequiredNonMaskPos.current; i++) {
       if (tests.current[i] && buffer.current[i] === getPlaceholder(i)) {
         return false;
       }
     }
-
     return true;
   };
-
   var getPlaceholder = React.useCallback(function (i) {
     if (i < props.slotChar.length) {
       return props.slotChar.charAt(i);
     }
-
     return props.slotChar.charAt(0);
   }, [props.slotChar]);
-
   var getValue = function getValue() {
     return props.unmask ? getUnmaskedValue() : elementRef.current && elementRef.current.value;
   };
-
   var seekNext = function seekNext(pos) {
     while (++pos < len.current && !tests.current[pos]) {
     }
-
     return pos;
   };
-
   var seekPrev = function seekPrev(pos) {
     while (--pos >= 0 && !tests.current[pos]) {
     }
-
     return pos;
   };
-
   var shiftL = function shiftL(begin, end) {
     var i, j;
-
     if (begin < 0) {
       return;
     }
-
     for (i = begin, j = seekNext(end); i < len.current; i++) {
       if (tests.current[i]) {
         if (j < len.current && tests.current[i].test(buffer.current[j])) {
@@ -125,24 +106,19 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         } else {
           break;
         }
-
         j = seekNext(j);
       }
     }
-
     writeBuffer();
     caret(Math.max(firstNonMaskPos.current, begin));
   };
-
   var shiftR = function shiftR(pos) {
     var i, c, j, t;
-
     for (i = pos, c = getPlaceholder(pos); i < len.current; i++) {
       if (tests.current[i]) {
         j = seekNext(i);
         t = buffer.current[i];
         buffer.current[i] = c;
-
         if (j < len.current && tests.current[j].test(t)) {
           c = t;
         } else {
@@ -151,82 +127,67 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       }
     }
   };
-
   var handleAndroidInput = function handleAndroidInput(e) {
     var curVal = elementRef.current.value;
     var pos = caret();
-
     if (oldVal.current.length && oldVal.current.length > curVal.length) {
       // a deletion or backspace happened
       checkVal(true);
-
       while (pos.begin > 0 && !tests.current[pos.begin - 1]) {
         pos.begin--;
       }
-
       if (pos.begin === 0) {
         while (pos.begin < firstNonMaskPos.current && !tests.current[pos.begin]) {
           pos.begin++;
         }
       }
-
       caret(pos.begin, pos.begin);
     } else {
       checkVal(true);
-
       while (pos.begin < len.current && !tests.current[pos.begin]) {
         pos.begin++;
       }
-
       caret(pos.begin, pos.begin);
     }
-
     if (props.onComplete && isCompleted()) {
       props.onComplete({
         originalEvent: e,
         value: getValue()
       });
     }
-
     updateModel(e);
   };
-
   var onBlur = function onBlur(e) {
     focus.current = false;
     checkVal();
     updateModel(e);
     updateFilledState();
     props.onBlur && props.onBlur(e);
-
     if (elementRef.current.value !== focusText.current) {
       var event = document.createEvent('HTMLEvents');
       event.initEvent('change', true, false);
       elementRef.current.dispatchEvent(event);
     }
   };
-
   var onKeyDown = function onKeyDown(e) {
     if (props.readOnly) {
       return;
     }
-
     var k = e.which || e.keyCode,
-        pos,
-        begin,
-        end;
-    var iPhone = /iphone/i.test(DomHandler.getUserAgent());
-    oldVal.current = elementRef.current.value; //backspace, delete, and escape get special treatment
+      pos,
+      begin,
+      end;
+    oldVal.current = elementRef.current.value;
 
-    if (k === 8 || k === 46 || iPhone && k === 127) {
+    //backspace, delete, and escape get special treatment
+    if (k === 8 || k === 46 || DomHandler.isIOS() && k === 127) {
       pos = caret();
       begin = pos.begin;
       end = pos.end;
-
       if (end - begin === 0) {
         begin = k !== 46 ? seekPrev(begin) : end = seekNext(begin - 1);
         end = k === 46 ? seekNext(end) : end;
       }
-
       clearBuffer(begin, end);
       shiftL(begin, end - 1);
       updateModel(e);
@@ -243,19 +204,16 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       e.preventDefault();
     }
   };
-
   var onKeyPress = function onKeyPress(e) {
     if (props.readOnly) {
       return;
     }
-
     var k = e.which || e.keyCode,
-        pos = caret(),
-        p,
-        c,
-        next,
-        completed;
-
+      pos = caret(),
+      p,
+      c,
+      next,
+      completed;
     if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {
       //Ignore
       return;
@@ -264,40 +222,31 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         clearBuffer(pos.begin, pos.end);
         shiftL(pos.begin, pos.end - 1);
       }
-
       p = seekNext(pos.begin - 1);
-
       if (p < len.current) {
         c = String.fromCharCode(k);
-
         if (tests.current[p].test(c)) {
           shiftR(p);
           buffer.current[p] = c;
           writeBuffer();
           next = seekNext(p);
-
-          if (/android/i.test(DomHandler.getUserAgent())) {
+          if (DomHandler.isAndroid()) {
             //Path for CSP Violation on FireFox OS 1.1
             var proxy = function proxy() {
               caret(next);
             };
-
             setTimeout(proxy, 0);
           } else {
             caret(next);
           }
-
           if (pos.begin <= lastRequiredNonMaskPos.current) {
             completed = isCompleted();
           }
         }
       }
-
       e.preventDefault();
     }
-
     updateModel(e);
-
     if (props.onComplete && completed) {
       props.onComplete({
         originalEvent: e,
@@ -305,44 +254,36 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       });
     }
   };
-
   var clearBuffer = function clearBuffer(start, end) {
     var i;
-
     for (i = start; i < end && i < len.current; i++) {
       if (tests.current[i]) {
         buffer.current[i] = getPlaceholder(i);
       }
     }
   };
-
   var writeBuffer = function writeBuffer() {
     elementRef.current.value = buffer.current.join('');
   };
-
   var checkVal = function checkVal(allow) {
-    isValueChecked.current = true; //try to place characters where they belong
-
+    isValueChecked.current = true;
+    //try to place characters where they belong
     var test = elementRef.current.value,
-        lastMatch = -1,
-        i,
-        c,
-        pos;
-
+      lastMatch = -1,
+      i,
+      c,
+      pos;
     for (i = 0, pos = 0; i < len.current; i++) {
       if (tests.current[i]) {
         buffer.current[i] = getPlaceholder(i);
-
         while (pos++ < test.length) {
           c = test.charAt(pos - 1);
-
           if (tests.current[i].test(c)) {
             buffer.current[i] = c;
             lastMatch = i;
             break;
           }
         }
-
         if (pos > test.length) {
           clearBuffer(i + 1, len.current);
           break;
@@ -351,13 +292,11 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         if (buffer.current[i] === test.charAt(pos)) {
           pos++;
         }
-
         if (i < partialPosition.current) {
           lastMatch = i;
         }
       }
     }
-
     if (allow) {
       writeBuffer();
     } else if (lastMatch + 1 < partialPosition.current) {
@@ -375,15 +314,12 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       writeBuffer();
       elementRef.current.value = elementRef.current.value.substring(0, lastMatch + 1);
     }
-
     return partialPosition.current ? i : firstNonMaskPos.current;
   };
-
   var onFocus = function onFocus(e) {
     if (props.readOnly) {
       return;
     }
-
     focus.current = true;
     clearTimeout(caretTimeoutId.current);
     var pos;
@@ -393,33 +329,26 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       if (elementRef.current !== document.activeElement) {
         return;
       }
-
       writeBuffer();
-
       if (pos === props.mask.replace('?', '').length) {
         caret(0, pos);
       } else {
         caret(pos);
       }
-
       updateFilledState();
     }, 10);
     props.onFocus && props.onFocus(e);
   };
-
   var onInput = function onInput(event) {
     androidChrome.current ? handleAndroidInput(event) : handleInputChange(event);
   };
-
   var handleInputChange = function handleInputChange(e) {
     if (props.readOnly) {
       return;
     }
-
     var pos = checkVal(true);
     caret(pos);
     updateModel(e);
-
     if (props.onComplete && isCompleted()) {
       props.onComplete({
         originalEvent: e,
@@ -427,21 +356,16 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       });
     }
   };
-
   var getUnmaskedValue = React.useCallback(function () {
     var unmaskedBuffer = [];
-
     for (var i = 0; i < buffer.current.length; i++) {
       var c = buffer.current[i];
-
       if (tests.current[i] && c !== getPlaceholder(i)) {
         unmaskedBuffer.push(c);
       }
     }
-
     return unmaskedBuffer.join('');
   }, [getPlaceholder]);
-
   var updateModel = function updateModel(e) {
     if (props.onChange) {
       var val = props.unmask ? getUnmaskedValue() : e && e.target.value;
@@ -458,14 +382,11 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       });
     }
   };
-
   var updateFilledState = function updateFilledState() {
     if (elementRef.current && elementRef.current.value && elementRef.current.value.length > 0) DomHandler.addClass(elementRef.current, 'p-filled');else DomHandler.removeClass(elementRef.current, 'p-filled');
   };
-
   var updateValue = function updateValue(allow) {
     var pos;
-
     if (elementRef.current) {
       if (props.value == null) {
         elementRef.current.value = '';
@@ -479,18 +400,14 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
           }
         }, 10);
       }
-
       focusText.current = elementRef.current.value;
     }
-
     updateFilledState();
     return pos;
   };
-
   var isValueUpdated = React.useCallback(function () {
     return props.unmask ? props.value !== getUnmaskedValue() : defaultBuffer.current !== elementRef.current.value && elementRef.current.value !== props.value;
   }, [props.unmask, props.value, getUnmaskedValue]);
-
   var init = function init() {
     if (props.mask) {
       tests.current = [];
@@ -502,23 +419,18 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         a: '[A-Za-z]',
         '*': '[A-Za-z0-9]'
       };
-      var ua = DomHandler.getUserAgent();
-      androidChrome.current = /chrome/i.test(ua) && /android/i.test(ua);
+      androidChrome.current = DomHandler.isChrome() && DomHandler.isAndroid();
       var maskTokens = props.mask.split('');
-
       for (var i = 0; i < maskTokens.length; i++) {
         var c = maskTokens[i];
-
         if (c === '?') {
           len.current--;
           partialPosition.current = i;
         } else if (defs[c]) {
           tests.current.push(new RegExp(defs[c]));
-
           if (firstNonMaskPos.current === null) {
             firstNonMaskPos.current = tests.current.length - 1;
           }
-
           if (i < partialPosition.current) {
             lastRequiredNonMaskPos.current = tests.current.length - 1;
           }
@@ -526,24 +438,22 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
           tests.current.push(null);
         }
       }
-
       buffer.current = [];
-
       for (var _i = 0; _i < maskTokens.length; _i++) {
         var _c = maskTokens[_i];
-
         if (_c !== '?') {
           if (defs[_c]) buffer.current.push(getPlaceholder(_i));else buffer.current.push(_c);
         }
       }
-
       defaultBuffer.current = buffer.current.join('');
     }
   };
-
   React.useImperativeHandle(ref, function () {
     return {
       props: props,
+      focus: function focus() {
+        return DomHandler.focus(elementRef.current);
+      },
       getElement: function getElement() {
         return elementRef.current;
       }
@@ -559,7 +469,6 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   useUpdateEffect(function () {
     init();
     caret(updateValue(true));
-
     if (props.unmask) {
       updateModel();
     }