@elliemae/ds-form 1.60.0 → 2.0.0-alpha.12

package/esm/InputMask/DSInputMaskDeprecated.js

@@ -1,71 +1,55 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
-import _createClass from '@babel/runtime/helpers/esm/createClass';
-import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
-import _inherits from '@babel/runtime/helpers/esm/inherits';
-import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import React, { Component } from 'react';
 import { isEqual } from 'lodash';
-import PropTypes from 'prop-types';
 import { conformToMask, adjustCaretPosition } from 'text-mask-core';
 import setCaretPosition from './utils/setCaretPosition.js';
 import DSTextBox from '../TextBox/DSTextBox.js';
-import 'react-desc';
-import '../Input/DSInput.js';
-import '../Input/InputImpl.js';
-import '@babel/runtime/helpers/esm/typeof';
-import '@elliemae/ds-classnames';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-button';
-import '@elliemae/ds-tooltip';
-import '../Input/InputAddonWrapper.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-
-var _excluded = ["autoFocus", "style", "disabled", "className", "name", "maxLength", "minLength", "fluidWidth", "placeholder", "onKeyDown", "onClick", "onChange", "onFocus", "onBlur", "onPaste", "onKeyUp", "hasError", "readOnly", "type", "innerRef", "clearable", "leftComponent", "rightComponent", "value"];
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["autoFocus", "style", "disabled", "className", "name", "maxLength", "minLength", "fluidWidth", "placeholder", "onKeyDown", "onClick", "onChange", "onFocus", "onBlur", "onPaste", "onKeyUp", "hasError", "readOnly", "type", "innerRef", "clearable", "leftComponent", "rightComponent", "value"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var getValueFromEventOrString = function getValueFromEventOrString(e) {
-  var value = e;
+const getValueFromEventOrString = e => {
+  let value = e;
 
   if (e && e.target) {
-    var eValue = e.target.value;
+    const {
+      target: {
+        value: eValue
+      }
+    } = e;
     value = eValue;
   }
 
   return value;
 };
 
-var getRawMask = function getRawMask(mask) {
-  var rawValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+const getRawMask = function (mask) {
+  let rawValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   return typeof mask === 'function' ? mask(rawValue) : mask;
 }; // this is not safe because we don't take in consideration a lot of cases
 // just a monkeypatch untill we get the v2 going,
 // this work with "internal" masks...
 
 
-var UNSAFEGetRawValue = function UNSAFEGetRawValue(value, mask) {
+const UNSAFEGetRawValue = (value, mask) => {
   var _safeValue$split, _safeValue$split$filt;
 
-  var safeValue = getValueFromEventOrString(value);
+  const safeValue = getValueFromEventOrString(value);
   if (!safeValue) return '';
-  var rawMask = getRawMask(mask, value);
-  var characterToStrip = rawMask.filter(function (char) {
-    return typeof char === 'string';
-  });
-  return safeValue === null || safeValue === void 0 ? void 0 : (_safeValue$split = safeValue.split('')) === null || _safeValue$split === void 0 ? void 0 : (_safeValue$split$filt = _safeValue$split.filter(function (char) {
-    var indexCharToStrip = characterToStrip.findIndex(function (strip) {
-      return strip === char;
-    });
+  const rawMask = getRawMask(mask, value);
+  const characterToStrip = rawMask.filter(char => typeof char === 'string');
+  return safeValue === null || safeValue === void 0 ? void 0 : (_safeValue$split = safeValue.split('')) === null || _safeValue$split === void 0 ? void 0 : (_safeValue$split$filt = _safeValue$split.filter(char => {
+    const indexCharToStrip = characterToStrip.findIndex(strip => strip === char);
 
     if (indexCharToStrip >= 0) {
       characterToStrip.splice(indexCharToStrip, 1);
@@ -79,19 +63,15 @@ var UNSAFEGetRawValue = function UNSAFEGetRawValue(value, mask) {
 // this work with "internal" masks...
 
 
-var UNSAFEIsRawValue = function UNSAFEIsRawValue(value, mask) {
+const UNSAFEIsRawValue = (value, mask) => {
   var _safeValue$split2;
 
-  var safeValue = getValueFromEventOrString(value);
+  const safeValue = getValueFromEventOrString(value);
   if (!safeValue) return false;
-  var rawMask = getRawMask(mask, safeValue);
-  var characterToStrip = rawMask.filter(function (char) {
-    return typeof char === 'string';
-  });
-  if (safeValue) safeValue === null || safeValue === void 0 ? void 0 : (_safeValue$split2 = safeValue.split('')) === null || _safeValue$split2 === void 0 ? void 0 : _safeValue$split2.forEach(function (char) {
-    var indexCharToStrip = characterToStrip.findIndex(function (strip) {
-      return strip === char;
-    });
+  const rawMask = getRawMask(mask, safeValue);
+  const characterToStrip = rawMask.filter(char => typeof char === 'string');
+  if (safeValue) safeValue === null || safeValue === void 0 ? void 0 : (_safeValue$split2 = safeValue.split('')) === null || _safeValue$split2 === void 0 ? void 0 : _safeValue$split2.forEach(char => {
+    const indexCharToStrip = characterToStrip.findIndex(strip => strip === char);
 
     if (indexCharToStrip >= 0) {
       characterToStrip.splice(indexCharToStrip, 1);
@@ -102,43 +82,38 @@ var UNSAFEIsRawValue = function UNSAFEIsRawValue(value, mask) {
   return characterToStrip.length !== 0;
 };
 
-var DSInputMaskDeprecated = /*#__PURE__*/function (_Component) {
-  _inherits(DSInputMaskDeprecated, _Component);
-
-  var _super = _createSuper(DSInputMaskDeprecated);
-
-  function DSInputMaskDeprecated(props) {
+class DSInputMaskDeprecated extends Component {
+  constructor(props) {
     var _this;
 
-    _classCallCheck(this, DSInputMaskDeprecated);
-
-    _this = _super.call(this, props);
-    _this.lastkey = null;
-    _this.lastkeycode = null;
-
-    _this.conformValue = function (rawValueOrEvent, currentCaretPosition) {
-      var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-          _ref$skipCaretPositio = _ref.skipCaretPositioning,
-          skipCaretPositioning = _ref$skipCaretPositio === void 0 ? false : _ref$skipCaretPositio,
-          _ref$skipOnChangeCall = _ref.skipOnChangeCallback,
-          skipOnChangeCallback = _ref$skipOnChangeCall === void 0 ? false : _ref$skipOnChangeCall;
-
-      var previousConformedValue = _this.state.previousConformedValue;
-      var _this$props = _this.props,
-          onChange = _this$props.onChange,
-          mask = _this$props.mask,
-          _this$props$placehold = _this$props.placeholderChar,
-          placeholderChar = _this$props$placehold === void 0 ? '_' : _this$props$placehold,
-          pipe = _this$props.pipe;
-      var rawValue = getValueFromEventOrString(rawValueOrEvent); // short-circuit logic if user cleared the input
+    super(props);
+    _this = this;
+    this.lastkey = null;
+    this.lastkeycode = null;
+
+    this.conformValue = function (rawValueOrEvent, currentCaretPosition) {
+      let {
+        skipCaretPositioning = false,
+        skipOnChangeCallback = false
+      } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      const {
+        previousConformedValue
+      } = _this.state;
+      const {
+        onChange,
+        mask,
+        placeholderChar = '_',
+        pipe
+      } = _this.props;
+      const rawValue = getValueFromEventOrString(rawValueOrEvent); // short-circuit logic if user cleared the input
 
       if (rawValue.length === 0) {
         _this.setState({
           maskedValue: rawValue,
           previousConformedValue: rawValue,
           focus: true
-        }, function () {
-          var event = {
+        }, () => {
+          const event = {
             target: {
               value: rawValue,
               originalValue: rawValue
@@ -151,33 +126,33 @@ var DSInputMaskDeprecated = /*#__PURE__*/function (_Component) {
         return;
       }
 
-      var rawMaskWithTraps = getRawMask(mask, rawValue);
-      var rawMask = rawMaskWithTraps.filter(function (val) {
-        return val !== '[]';
-      }); // generate the final result we want to put in the state and in the input box
+      const rawMaskWithTraps = getRawMask(mask, rawValue);
+      const rawMask = rawMaskWithTraps.filter(val => val !== '[]'); // generate the final result we want to put in the state and in the input box
 
-      var conformToMaskResults = conformToMask(rawValue, rawMask, _objectSpread({
+      const conformToMaskResults = conformToMask(rawValue, rawMask, _objectSpread({
         guide: false,
-        placeholderChar: placeholderChar
+        placeholderChar
       }, previousConformedValue && {
-        previousConformedValue: previousConformedValue
+        previousConformedValue
       }));
-      var pipelessConformed = conformToMaskResults.conformedValue; // when the last character must be always preserved we need to manually ensure it
+      const {
+        conformedValue: pipelessConformed
+      } = conformToMaskResults; // when the last character must be always preserved we need to manually ensure it
       //  because
       //    conformToMask -> guide: false will interpeter the last character
       //     will remove the last character if it's part of the mask
       //   we may want to add a prop for this in the future?
       //   this is used for example with "decimal" and "percentage" masks
 
-      var conformedValueEnsureLastMaskChar = pipelessConformed;
-      var lastMaskChar = rawMask[rawMask.length - 1];
-      var lastValueChar = pipelessConformed.charAt(pipelessConformed.length - 1);
+      let conformedValueEnsureLastMaskChar = pipelessConformed;
+      const lastMaskChar = rawMask[rawMask.length - 1];
+      const lastValueChar = pipelessConformed.charAt(pipelessConformed.length - 1);
 
       if (typeof lastMaskChar === 'string' && lastMaskChar !== lastValueChar) {
         conformedValueEnsureLastMaskChar = pipelessConformed + lastMaskChar;
       }
 
-      var pipeResult = {
+      let pipeResult = {
         indexesOfPipedChars: [],
         value: conformedValueEnsureLastMaskChar,
         valid: true
@@ -188,36 +163,37 @@ var DSInputMaskDeprecated = /*#__PURE__*/function (_Component) {
       //   probably pipe is never used, because this never worked before...
       //   we will deprecate the "pipe" props in the future
 
-      var conformedValue = pipeResult.valid ? pipeResult.value : previousConformedValue; // generate the "placeholder" used in calculating new caret position
+      const conformedValue = pipeResult.valid ? pipeResult.value : previousConformedValue; // generate the "placeholder" used in calculating new caret position
       // this means we need
       //   empty string as a value
       //   guide:true
       //   we can ignore "previousConformedValue" parameter
 
-      var generatedPlaceHolder = conformToMask('', rawMask, {
+      const generatedPlaceHolder = conformToMask('', rawMask, {
         guide: true,
-        placeholderChar: placeholderChar
+        placeholderChar
       });
-      var _pipeResult = pipeResult,
-          indexesOfPipedChars = _pipeResult.indexesOfPipedChars;
-      var adjustCaretPositionOpts = {
-        previousConformedValue: previousConformedValue,
-        conformedValue: conformedValue,
-        currentCaretPosition: currentCaretPosition,
-        rawValue: rawValue,
-        placeholderChar: placeholderChar,
+      const {
+        indexesOfPipedChars
+      } = pipeResult;
+      const adjustCaretPositionOpts = {
+        previousConformedValue,
+        conformedValue,
+        currentCaretPosition,
+        rawValue,
+        placeholderChar,
         placeholder: generatedPlaceHolder.conformedValue,
-        indexesOfPipedChars: indexesOfPipedChars,
+        indexesOfPipedChars,
         caretTrapIndexes: []
       };
-      var caretPos = adjustCaretPosition(adjustCaretPositionOpts);
+      const caretPos = adjustCaretPosition(adjustCaretPositionOpts);
 
       _this.setState({
         maskedValue: conformedValue,
         previousConformedValue: conformedValue,
         focus: true
-      }, function () {
-        var event = {
+      }, () => {
+        const event = {
           target: {
             value: conformedValue,
             originalValue: rawValue
@@ -225,208 +201,170 @@ var DSInputMaskDeprecated = /*#__PURE__*/function (_Component) {
           lastkey: _this.lastkey
         };
         if (!skipOnChangeCallback) onChange(event);
-        if (!skipCaretPositioning) setTimeout(function () {
-          return setCaretPosition(_this.inputref, caretPos);
-        });
+        if (!skipCaretPositioning) setTimeout(() => setCaretPosition(_this.inputref, caretPos));
       });
     };
 
-    _this.handleOnChange = function (e) {
+    this.handleOnChange = e => {
       var _e$target;
 
-      var rawValue = (e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '';
-      var selectionEnd = e.target.selectionEnd;
-      var currentCaretPosition = selectionEnd;
-
-      _this.conformValue(rawValue, currentCaretPosition);
+      const rawValue = (e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '';
+      const {
+        selectionEnd
+      } = e.target;
+      const currentCaretPosition = selectionEnd;
+      this.conformValue(rawValue, currentCaretPosition);
     };
 
-    _this.handleKeyDown = function (e) {
+    this.handleKeyDown = e => {
       e.stopPropagation();
-      var onKeyDown = _this.props.onKeyDown;
-      _this.lastkey = e.key;
-      _this.lastkeycode = e.keyCode;
+      const {
+        onKeyDown
+      } = this.props;
+      this.lastkey = e.key;
+      this.lastkeycode = e.keyCode;
       onKeyDown(e);
     };
 
-    _this.handleBlur = function (e) {
-      var onBlur = _this.props.onBlur;
-
-      _this.setState({
+    this.handleBlur = e => {
+      const {
+        onBlur
+      } = this.props;
+      this.setState({
         focus: false
       });
-
       onBlur(e);
     };
 
-    _this.inputref = /*#__PURE__*/React.createRef();
-    _this.state = {
+    this.inputref = /*#__PURE__*/React.createRef();
+    this.state = {
       maskedValue: '',
       previousConformedValue: ''
     };
-    _this.conformValue = _this.conformValue.bind(_assertThisInitialized(_this));
-    return _this;
+    this.conformValue = this.conformValue.bind(this);
   }
 
-  _createClass(DSInputMaskDeprecated, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props2 = this.props,
-          value = _this$props2.value,
-          mask = _this$props2.mask;
-      var isAlreadyRaw = UNSAFEIsRawValue(value, mask);
-      var rawVal = isAlreadyRaw ? value : UNSAFEGetRawValue(value, mask);
-      if (rawVal === '') return; // if value from props is raw, we invoke onChange
-      //  not invoking onChange on a raw value breaks the internal components depending on this...
+  componentDidMount() {
+    const {
+      value,
+      mask
+    } = this.props;
+    const isAlreadyRaw = UNSAFEIsRawValue(value, mask);
+    const rawVal = isAlreadyRaw ? value : UNSAFEGetRawValue(value, mask);
+    if (rawVal === '') return; // if value from props is raw, we invoke onChange
+    //  not invoking onChange on a raw value breaks the internal components depending on this...
+
+    const shouldSkipOnChange = !isAlreadyRaw;
+    this.conformValue(rawVal, rawVal.length, {
+      skipCaretPositioning: true,
+      skipOnChangeCallback: shouldSkipOnChange
+    });
+  }
 
-      var shouldSkipOnChange = !isAlreadyRaw;
+  componentDidUpdate(prevProps) {
+    // ensure the mask is re-applied when value/mask props changes.
+    // this is required by internal implementations like DSDateRangePicker
+    const {
+      value: prevValOrEvent,
+      mask: prevMask
+    } = prevProps;
+    const {
+      value: valOrEvent,
+      mask
+    } = this.props;
+    const value = getValueFromEventOrString(valOrEvent);
+    const isAlreadyRaw = UNSAFEIsRawValue(value, mask);
+    const rawVal = isAlreadyRaw ? value : UNSAFEGetRawValue(value, mask);
+    if (rawVal === '') return;
+    const rawMask = getRawMask(mask, rawVal);
+    const prevVal = getValueFromEventOrString(prevValOrEvent);
+    const prevIsAlreadyRaw = UNSAFEIsRawValue(prevVal, prevMask);
+    const prevRawVal = prevIsAlreadyRaw ? prevVal : UNSAFEGetRawValue(prevVal, prevMask);
+    const prevRawMask = getRawMask(prevMask, prevRawVal); // we need to compare "raw" masks, because mask sometimes are functions
+    //  and if we don't compare raw mask, isEqual will produce unexpected result
+    //  which would lead to infinite loops
+
+    if (prevVal !== value || !isEqual(prevRawMask, rawMask)) {
+      // if value from props is raw, we invoke onChange
+      //  not invoking onChange on a raw value breaks the internal components depending on this...
+      const shouldSkipOnChange = !isAlreadyRaw;
       this.conformValue(rawVal, rawVal.length, {
         skipCaretPositioning: true,
         skipOnChangeCallback: shouldSkipOnChange
       });
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      // ensure the mask is re-applied when value/mask props changes.
-      // this is required by internal implementations like DSDateRangePicker
-      var prevValOrEvent = prevProps.value,
-          prevMask = prevProps.mask;
-      var _this$props3 = this.props,
-          valOrEvent = _this$props3.value,
-          mask = _this$props3.mask;
-      var value = getValueFromEventOrString(valOrEvent);
-      var isAlreadyRaw = UNSAFEIsRawValue(value, mask);
-      var rawVal = isAlreadyRaw ? value : UNSAFEGetRawValue(value, mask);
-      if (rawVal === '') return;
-      var rawMask = getRawMask(mask, rawVal);
-      var prevVal = getValueFromEventOrString(prevValOrEvent);
-      var prevIsAlreadyRaw = UNSAFEIsRawValue(prevVal, prevMask);
-      var prevRawVal = prevIsAlreadyRaw ? prevVal : UNSAFEGetRawValue(prevVal, prevMask);
-      var prevRawMask = getRawMask(prevMask, prevRawVal); // we need to compare "raw" masks, because mask sometimes are functions
-      //  and if we don't compare raw mask, isEqual will produce unexpected result
-      //  which would lead to infinite loops
-
-      if (prevVal !== value || !isEqual(prevRawMask, rawMask)) {
-        // if value from props is raw, we invoke onChange
-        //  not invoking onChange on a raw value breaks the internal components depending on this...
-        var shouldSkipOnChange = !isAlreadyRaw;
-        this.conformValue(rawVal, rawVal.length, {
-          skipCaretPositioning: true,
-          skipOnChangeCallback: shouldSkipOnChange
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props4 = this.props;
-          _this$props4.autoFocus;
-          var style = _this$props4.style,
-          disabled = _this$props4.disabled,
-          className = _this$props4.className,
-          name = _this$props4.name,
-          maxLength = _this$props4.maxLength,
-          minLength = _this$props4.minLength,
-          fluidWidth = _this$props4.fluidWidth,
-          placeholder = _this$props4.placeholder;
-          _this$props4.onKeyDown;
-          var onClick = _this$props4.onClick;
-          _this$props4.onChange;
-          var onFocus = _this$props4.onFocus;
-          _this$props4.onBlur;
-          var onPaste = _this$props4.onPaste,
-          onKeyUp = _this$props4.onKeyUp,
-          hasError = _this$props4.hasError,
-          readOnly = _this$props4.readOnly,
-          type = _this$props4.type;
-          _this$props4.innerRef;
-          var _this$props4$clearabl = _this$props4.clearable,
-          clearable = _this$props4$clearabl === void 0 ? false : _this$props4$clearabl,
-          leftComponent = _this$props4.leftComponent,
-          rightComponent = _this$props4.rightComponent,
-          value = _this$props4.value,
-          rest = _objectWithoutProperties(_this$props4, _excluded);
-
-      var _this$state = this.state,
-          maskedValue = _this$state.maskedValue,
-          focus = _this$state.focus; // if component is "controlled" we print the value from the props
-      // if it's not controlled we use the internal state
-      // handleOnChange has the logic to invoke the onChange with the mask applied
-      // if the dev controls the component but pass down a value not conformed to the mask
-      // it's a problem to be fixed on the dev side.
-      // this means no "get derived state from props" mumbo-jumbos
-
-      var propsValue = getValueFromEventOrString(value);
-      var finalValue = typeof propsValue === 'string' || typeof propsValue === 'number' ? propsValue : maskedValue;
-      return /*#__PURE__*/React.createElement(DSTextBox, _extends({}, rest, {
-        "aria-label": rest['aria-label'],
-        className: className,
-        clearable: clearable,
-        disabled: disabled,
-        fluidWidth: fluidWidth,
-        hasError: hasError,
-        isActive: focus,
-        leftComponent: leftComponent,
-        maxLength: maxLength,
-        minLength: minLength,
-        name: name,
-        onBlur: this.handleBlur,
-        onChange: this.handleOnChange,
-        onClick: onClick,
-        onFocus: onFocus,
-        onKeyDown: this.handleKeyDown,
-        onKeyUp: onKeyUp,
-        onPaste: onPaste,
-        placeholder: placeholder,
-        readOnly: readOnly,
-        rightComponent: rightComponent,
-        style: style,
-        type: type,
-        value: finalValue
-      }));
-    }
-  }]);
-
-  return DSInputMaskDeprecated;
-}(Component);
-
-DSInputMaskDeprecated.propTypes = {
-  autoFocus: PropTypes.bool,
-  style: PropTypes.object,
-  disabled: PropTypes.bool,
-  className: PropTypes.string,
-  name: PropTypes.string,
-  maxLength: PropTypes.number,
-  minLength: PropTypes.number,
-  fluidWidth: PropTypes.bool,
-  placeholder: PropTypes.string,
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  leftComponent: PropTypes.element,
-  rightComponent: PropTypes.element,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onPaste: PropTypes.func,
-  onKeyUp: PropTypes.func,
-  hasError: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  onClick: PropTypes.func,
-  clearable: PropTypes.bool,
-  type: PropTypes.string,
-
-  /**
-   * Ref for the component
-   */
-  innerRef: PropTypes.any,
-
-  /**
-   * Mask type
-   */
-  mask: PropTypes.any,
-  placeholderChar: PropTypes.string
-};
+  }
+
+  render() {
+    const _this$props = this.props,
+          {
+      autoFocus,
+      style,
+      disabled,
+      className,
+      name,
+      maxLength,
+      minLength,
+      fluidWidth,
+      placeholder,
+      onKeyDown,
+      onClick,
+      onChange,
+      onFocus,
+      onBlur,
+      onPaste,
+      onKeyUp,
+      hasError,
+      readOnly,
+      type,
+      innerRef,
+      clearable = false,
+      leftComponent,
+      rightComponent,
+      value
+    } = _this$props,
+          rest = _objectWithoutProperties(_this$props, _excluded);
+
+    const {
+      maskedValue,
+      focus
+    } = this.state; // if component is "controlled" we print the value from the props
+    // if it's not controlled we use the internal state
+    // handleOnChange has the logic to invoke the onChange with the mask applied
+    // if the dev controls the component but pass down a value not conformed to the mask
+    // it's a problem to be fixed on the dev side.
+    // this means no "get derived state from props" mumbo-jumbos
+
+    const propsValue = getValueFromEventOrString(value);
+    const finalValue = typeof propsValue === 'string' || typeof propsValue === 'number' ? propsValue : maskedValue;
+    return /*#__PURE__*/jsx(DSTextBox, _objectSpread(_objectSpread({}, rest), {}, {
+      "aria-label": rest['aria-label'],
+      className: className,
+      clearable: clearable,
+      disabled: disabled,
+      fluidWidth: fluidWidth,
+      hasError: hasError,
+      isActive: focus,
+      leftComponent: leftComponent,
+      maxLength: maxLength,
+      minLength: minLength,
+      name: name,
+      onBlur: this.handleBlur,
+      onChange: this.handleOnChange,
+      onClick: onClick,
+      onFocus: onFocus,
+      onKeyDown: this.handleKeyDown,
+      onKeyUp: onKeyUp,
+      onPaste: onPaste,
+      placeholder: placeholder,
+      readOnly: readOnly,
+      rightComponent: rightComponent,
+      style: style,
+      type: type,
+      value: finalValue
+    }));
+  }
+
+}
 
 export { DSInputMaskDeprecated as default };
-//# sourceMappingURL=DSInputMaskDeprecated.js.map