@elliemae/ds-controlled-form 2.3.3-rc.0 → 2.4.0-rc.0

package/cjs/mask-hook/hooks/index.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var usePhoneMask = require('./usePhoneMask.js');
+var useNumberMask = require('./useNumberMask.js');
+var useSSNMask = require('./useSSNMask.js');
+var useZipCode = require('./useZipCode.js');
+
+
+
+exports.UsePhoneMaskWithSchema = usePhoneMask.UsePhoneMaskWithSchema;
+exports.usePhoneMask = usePhoneMask.usePhoneMask;
+exports.UseNumberMaskWithSchema = useNumberMask.UseNumberMaskWithSchema;
+exports.useNumberMask = useNumberMask.useNumberMask;
+exports.UseSSNMaskWithSchema = useSSNMask.UseSSNMaskWithSchema;
+exports.useSSNMask = useSSNMask.useSSNMask;
+exports.UseZipCodeMaskWithSchema = useZipCode.UseZipCodeMaskWithSchema;
+exports.useZipCode = useZipCode.useZipCode;

package/cjs/mask-hook/hooks/useNumberMask.js

@@ -0,0 +1,171 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/es.string.replace.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var dsUtilities = require('@elliemae/ds-utilities');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var setCursorPosition = require('../utils/setCursorPosition.js');
+var reactDescPropTypes = require('../react-desc-prop-types.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["valueSetter", "onChange", "onKeyDown", "onBlur"];
+
+const addThousandsSeparator = (n, separator) => n.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+
+const conformValue = (rawValue, cursorPos, lastKeyCode, opts) => {
+  const {
+    includeThousandsSeparator,
+    allowNegative,
+    prefix,
+    suffix,
+    decimalPlaces,
+    decimalRequired
+  } = opts;
+  const THOUSANDSSEPARATOR = ',';
+  let dotIdx = -1; // allow minus sign before and after the preffix
+
+  let finalPrefix = [prefix.length, 0].includes(rawValue.indexOf('-')) && allowNegative ? '-' : '';
+  let maskedValue = rawValue.split('').filter((char, idx) => {
+    // we take only the first dot
+    const validChar = char >= '0' && char <= '9' || char === '.' && dotIdx === -1 && decimalPlaces;
+    if (char === '.' && validChar) dotIdx = idx;
+    return validChar;
+  });
+  if (prefix && maskedValue.length) finalPrefix += prefix; // REMOVE FOLLOWING ZEROS IN INTEGER PART AFTER LEADER ZERO NUMBER
+
+  while (maskedValue.length >= 2 && maskedValue[0] === '0' && maskedValue[1] !== '.') {
+    maskedValue = maskedValue.splice(1);
+  }
+
+  dotIdx = maskedValue.findIndex(char => char === '.');
+  let integer = maskedValue.slice(0, dotIdx !== -1 ? dotIdx : maskedValue.length);
+  const decimal = maskedValue.slice(dotIdx, dotIdx + decimalPlaces + 1); // ADDING THOUSANDS SEPARATOR
+
+  if (includeThousandsSeparator) {
+    integer = addThousandsSeparator(integer.join(''), THOUSANDSSEPARATOR).split('');
+  } // MERGIN INT AND DECIMAL IF NECCESSARY
+
+
+  if (dotIdx !== -1 && !(lastKeyCode === 'Backspace' && decimal.length === 1)) {
+    if (integer.length) {
+      maskedValue = [...integer, ...decimal];
+    } else {
+      // if theres no integer add a zero to the left of the dot to cover .23 => 0.23 case
+      maskedValue = ['0', ...decimal];
+    }
+  } else {
+    // If decimal is required we add a dot after integer if exists
+    maskedValue = decimalRequired && integer.length ? [...integer, '.'] : integer;
+  } // remove orphans prefix for example "-$"
+
+
+  if (lastKeyCode === 'Backspace' && maskedValue.length === 0) {
+    finalPrefix = '';
+  } // SET REAL CURSOR POSITION AFTER ADDING DOT and COMMAS SEPARATORS
+
+
+  let maskedPos = 0; // 0 leading case we move the cursor to continue typing
+
+  if (maskedValue[maskedPos] === '0' && cursorPos === 1 + prefix.length) maskedPos += 1;
+
+  for (let i = 0; i < cursorPos; i += 1) {
+    if (maskedValue[maskedPos] === THOUSANDSSEPARATOR) maskedPos += 1;
+    if (maskedValue[maskedPos] === rawValue[i]) maskedPos += 1;
+  }
+
+  maskedPos += finalPrefix.length;
+  const finalSuffix = maskedValue.length ? suffix : '';
+  const maskedValueString = finalPrefix + maskedValue.join('') + finalSuffix;
+  return [maskedValueString, maskedPos];
+};
+
+const useNumberMask = props => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.DSMaskNumberHookDefaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, reactDescPropTypes.DSMaskNumberHookPropsTypes);
+
+  const {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown,
+    onBlur: userOnBlur
+  } = propsWithDefault,
+        opts = _objectWithoutProperties__default["default"](propsWithDefault, _excluded);
+
+  const lastKeyCode = React.useRef('Unidentified');
+  const scheduleAfterRender = dsUtilities.useCallbackAfterRender(); // Some times, the value of the mask is not gonna change (user types invalid char for example)
+  // This makes the input to go from "correct" -> "incorrect" -> "correct"
+  // But since the input is controlled, the input does not re-render
+  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async
+  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event
+
+  const [, setKey] = React.useState(0);
+  const onBlur = React.useCallback(e => {
+    const maskedValue = e.target.value;
+    const dotIdx = maskedValue.indexOf('.');
+    const minusIndex = maskedValue.indexOf('-');
+    const {
+      decimalRequired,
+      decimalPlaces,
+      suffix
+    } = opts;
+
+    if (decimalRequired) {
+      if (dotIdx > -1) {
+        const decimal = maskedValue.slice(dotIdx + 1);
+        let zerosRest = '';
+
+        while (decimal.length + zerosRest.length !== decimalPlaces) {
+          zerosRest += '0';
+        }
+
+        valueSetter(maskedValue + zerosRest);
+      }
+    } else if (maskedValue.length - suffix.length - 1 === dotIdx) {
+      // removing orphans dots
+      valueSetter(maskedValue.replace('.', ''));
+    } else if (maskedValue.length - 1 === minusIndex) {
+      // removing orphans minus
+      valueSetter(maskedValue.replace('-', ''));
+    }
+
+    if (userOnBlur) userOnBlur(e);
+  }, [userOnBlur, valueSetter, opts]);
+  const onKeyDown = React.useCallback(e => {
+    lastKeyCode.current = e.code;
+    if (userOnKeyDown) userOnKeyDown(e);
+  }, [userOnKeyDown]);
+  const onChange = React.useCallback(e => {
+    var _e$target$selectionEn;
+
+    const [mask, cursorPos] = conformValue(e.target.value, (_e$target$selectionEn = e.target.selectionEnd) !== null && _e$target$selectionEn !== void 0 ? _e$target$selectionEn : 0, lastKeyCode.current, opts);
+    valueSetter(prevMask => {
+      // Here we need to update the key
+      if (mask === prevMask) setKey(key => key + 1);
+      return mask;
+    });
+    if (userOnChange) userOnChange(e, mask);
+    scheduleAfterRender(() => setCursorPosition.setCursorPosition(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, userOnChange, opts]);
+  return {
+    onKeyDown,
+    onChange,
+    onBlur
+  };
+};
+const UseNumberMaskWithSchema = dsPropsHelpers.describe(useNumberMask);
+UseNumberMaskWithSchema.propTypes = reactDescPropTypes.DSMaskNumberHookPropsTypes;
+
+exports.UseNumberMaskWithSchema = UseNumberMaskWithSchema;
+exports.useNumberMask = useNumberMask;

package/cjs/mask-hook/hooks/usePhoneMask.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var dsUtilities = require('@elliemae/ds-utilities');
+var addSpecialCharacters = require('../utils/addSpecialCharacters.js');
+var getPartialMaskedPos = require('../utils/getPartialMaskedPos.js');
+var setCursorPosition = require('../utils/setCursorPosition.js');
+var reactDescPropTypes = require('../react-desc-prop-types.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["valueSetter", "onChange", "onKeyDown", "onBlur"];
+const phoneSpecialChars = [['(', 0], [') ', 4], ['-', 9]];
+const internationalPhoneSpecialChars = [['+1 (', 0], [') ', 7], ['-', 12]];
+
+const conformValue = (rawValue, cursorPos, lastKeyCode, opts) => {
+  const characters = rawValue.split(''); // Work with digits only
+
+  const {
+    isInternational
+  } = opts;
+  let maskedValue = characters.filter((char, idx, array) => {
+    if (isInternational && idx === 1 && char === '1' && array[0] === '+') {
+      return false;
+    }
+
+    return char >= '0' && char <= '9';
+  }); // We can't have zeros at the start of the array
+
+  while (maskedValue.length && maskedValue[0] === '0') maskedValue.splice(0, 1); // We only consider first 10 digits
+
+
+  maskedValue = maskedValue.slice(0, 10);
+  const maskedPos = getPartialMaskedPos.getPartialMaskedPos(rawValue, maskedValue, cursorPos);
+  return addSpecialCharacters.addSpecialCharacters(maskedValue, isInternational ? internationalPhoneSpecialChars : phoneSpecialChars, maskedPos, lastKeyCode);
+};
+
+const usePhoneMask = props => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.DSMaskPhoneHookDefaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, reactDescPropTypes.DSMaskPhoneHookPropsTypes);
+
+  const {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown,
+    onBlur
+  } = propsWithDefault,
+        opts = _objectWithoutProperties__default["default"](propsWithDefault, _excluded);
+
+  const lastKeyCode = React.useRef('Unidentified');
+  const scheduleAfterRender = dsUtilities.useCallbackAfterRender(); // Some times, the value of the mask is not gonna change (user types invalid char for example)
+  // This makes the input to go from "correct" -> "incorrect" -> "correct"
+  // But since the input is controlled, the input does not re-render
+  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async
+  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event
+
+  const [, setKey] = React.useState(0);
+  const onKeyDown = React.useCallback(e => {
+    lastKeyCode.current = e.code;
+    if (userOnKeyDown) userOnKeyDown(e);
+  }, [userOnKeyDown]);
+  const onChange = React.useCallback(e => {
+    var _e$target$selectionEn;
+
+    const [mask, cursorPos] = conformValue(e.target.value, (_e$target$selectionEn = e.target.selectionEnd) !== null && _e$target$selectionEn !== void 0 ? _e$target$selectionEn : 0, lastKeyCode.current, opts);
+    valueSetter(prevMask => {
+      // Here we need to update the key
+      if (mask === prevMask) setKey(key => key + 1);
+      return mask;
+    });
+    if (userOnChange) userOnChange(e, mask);
+    scheduleAfterRender(() => setCursorPosition.setCursorPosition(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, opts, userOnChange]);
+  return {
+    onKeyDown,
+    onChange
+  };
+};
+const UsePhoneMaskWithSchema = dsPropsHelpers.describe(usePhoneMask);
+UsePhoneMaskWithSchema.propTypes = reactDescPropTypes.DSMaskPhoneHookPropsTypes;
+
+exports.UsePhoneMaskWithSchema = UsePhoneMaskWithSchema;
+exports.usePhoneMask = usePhoneMask;

package/cjs/mask-hook/hooks/useSSNMask.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var dsUtilities = require('@elliemae/ds-utilities');
+var addSpecialCharacters = require('../utils/addSpecialCharacters.js');
+var getPartialMaskedPos = require('../utils/getPartialMaskedPos.js');
+var setCursorPosition = require('../utils/setCursorPosition.js');
+var reactDescPropTypes = require('../react-desc-prop-types.js');
+
+const ssnSpecialChars = [['-', 3], ['-', 6]];
+
+const conformValue = (rawValue, cursorPos, lastKeyCode) => {
+  // Work with digits only
+  let maskedValue = rawValue.split('').filter(char => char >= '0' && char <= '9'); // We can't have zeros at the start of the array
+
+  while (maskedValue.length && maskedValue[0] === '0') maskedValue.splice(0, 1); // We only consider first 9 digits
+
+
+  maskedValue = maskedValue.slice(0, 9);
+  const maskedPos = getPartialMaskedPos.getPartialMaskedPos(rawValue, maskedValue, cursorPos);
+  return addSpecialCharacters.addSpecialCharacters(maskedValue, ssnSpecialChars, maskedPos, lastKeyCode);
+};
+
+const useSSNMask = props => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.DSMaskHookDefaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, reactDescPropTypes.DSMaskHookPropsTypes);
+  const {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown
+  } = propsWithDefault;
+  const lastKeyCode = React.useRef('Unidentified');
+  const scheduleAfterRender = dsUtilities.useCallbackAfterRender(); // Some times, the value of the mask is not gonna change (user types invalid char for example)
+  // This makes the input to go from "correct" -> "incorrect" -> "correct"
+  // But since the input is controlled, the input does not re-render
+  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async
+  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event
+
+  const [, setKey] = React.useState(0);
+  const onKeyDown = React.useCallback(e => {
+    lastKeyCode.current = e.code;
+    if (userOnKeyDown) userOnKeyDown(e);
+  }, [userOnKeyDown]);
+  const onChange = React.useCallback(e => {
+    var _e$target$selectionEn;
+
+    const [mask, cursorPos] = conformValue(e.target.value, (_e$target$selectionEn = e.target.selectionEnd) !== null && _e$target$selectionEn !== void 0 ? _e$target$selectionEn : 0, lastKeyCode.current);
+    valueSetter(prevMask => {
+      // Here we need to update the key
+      if (mask === prevMask) setKey(key => key + 1);
+      return mask;
+    });
+    if (userOnChange) userOnChange(e, mask);
+    scheduleAfterRender(() => setCursorPosition.setCursorPosition(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, userOnChange]);
+  return {
+    onKeyDown,
+    onChange
+  };
+};
+const UseSSNMaskWithSchema = dsPropsHelpers.describe(useSSNMask);
+UseSSNMaskWithSchema.propTypes = reactDescPropTypes.DSMaskHookPropsTypes;
+
+exports.UseSSNMaskWithSchema = UseSSNMaskWithSchema;
+exports.useSSNMask = useSSNMask;

package/cjs/mask-hook/hooks/useZipCode.js

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var dsUtilities = require('@elliemae/ds-utilities');
+var addSpecialCharacters = require('../utils/addSpecialCharacters.js');
+var getPartialMaskedPos = require('../utils/getPartialMaskedPos.js');
+var setCursorPosition = require('../utils/setCursorPosition.js');
+var reactDescPropTypes = require('../react-desc-prop-types.js');
+
+const zipCodeSpecialChars = [['-', 5]];
+
+const conformValue = (rawValue, cursorPos, lastKeyCode) => {
+  // Work with digits only
+  let maskedValue = rawValue.split('').filter(char => char >= '0' && char <= '9'); // We only consider first 5 digits
+
+  maskedValue = maskedValue.slice(0, 6);
+  const maskedPos = getPartialMaskedPos.getPartialMaskedPos(rawValue, maskedValue, cursorPos);
+  return addSpecialCharacters.addSpecialCharacters(maskedValue, zipCodeSpecialChars, maskedPos, lastKeyCode);
+};
+
+const useZipCode = props => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.DSMaskHookDefaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, reactDescPropTypes.DSMaskHookPropsTypes);
+  const {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown
+  } = propsWithDefault;
+  const lastKeyCode = React.useRef('Unidentified');
+  const scheduleAfterRender = dsUtilities.useCallbackAfterRender(); // Some times, the value of the mask is not gonna change (user types invalid char for example)
+  // This makes the input to go from "correct" -> "incorrect" -> "correct"
+  // But since the input is controlled, the input does not re-render
+  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async
+  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event
+
+  const [, setKey] = React.useState(0);
+  const onKeyDown = React.useCallback(e => {
+    lastKeyCode.current = e.code;
+    if (userOnKeyDown) userOnKeyDown(e);
+  }, [userOnKeyDown]);
+  const onChange = React.useCallback(e => {
+    var _e$target$selectionEn;
+
+    const [mask, cursorPos] = conformValue(e.target.value, (_e$target$selectionEn = e.target.selectionEnd) !== null && _e$target$selectionEn !== void 0 ? _e$target$selectionEn : 0, lastKeyCode.current);
+    valueSetter(prevMask => {
+      // Here we need to update the key
+      if (mask === prevMask) setKey(key => key + 1);
+      return mask;
+    });
+    if (userOnChange) userOnChange(e, mask);
+    scheduleAfterRender(() => setCursorPosition.setCursorPosition(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, userOnChange]);
+  return {
+    onKeyDown,
+    onChange
+  };
+};
+const UseZipCodeMaskWithSchema = dsPropsHelpers.describe(useZipCode);
+UseZipCodeMaskWithSchema.propTypes = reactDescPropTypes.DSMaskHookPropsTypes;
+
+exports.UseZipCodeMaskWithSchema = UseZipCodeMaskWithSchema;
+exports.useZipCode = useZipCode;

package/cjs/mask-hook/index.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var usePhoneMask = require('./hooks/usePhoneMask.js');
+var useNumberMask = require('./hooks/useNumberMask.js');
+var useSSNMask = require('./hooks/useSSNMask.js');
+var useZipCode = require('./hooks/useZipCode.js');
+
+
+
+exports.UsePhoneMaskWithSchema = usePhoneMask.UsePhoneMaskWithSchema;
+exports.usePhoneMask = usePhoneMask.usePhoneMask;
+exports.UseNumberMaskWithSchema = useNumberMask.UseNumberMaskWithSchema;
+exports.useNumberMask = useNumberMask.useNumberMask;
+exports.UseSSNMaskWithSchema = useSSNMask.UseSSNMaskWithSchema;
+exports.useSSNMask = useSSNMask.useSSNMask;
+exports.UseZipCodeMaskWithSchema = useZipCode.UseZipCodeMaskWithSchema;
+exports.useZipCode = useZipCode.useZipCode;

package/cjs/mask-hook/react-desc-prop-types.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const DSMaskHookDefaultProps = {
+  onChange: () => null,
+  onKeyDown: () => null,
+  onBlur: () => null
+};
+const DSMaskPhoneHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
+  isInternational: false
+});
+const DSMaskNumberHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
+  suffix: '',
+  prefix: '',
+  decimalPlaces: 2,
+  allowNegative: false,
+  includeThousandsSeparator: true,
+  decimalRequired: false
+});
+const DSMaskHookPropsTypes = {
+  valueSetter: dsPropsHelpers.PropTypes.func.description('React set state function for the value').isRequired,
+  onChange: dsPropsHelpers.PropTypes.func.description('Callback for onChange'),
+  onKeyDown: dsPropsHelpers.PropTypes.func.description('Callback for onKeyDown')
+};
+const DSMaskPhoneHookPropsTypes = _objectSpread(_objectSpread({}, DSMaskHookPropsTypes), {}, {
+  isInternational: dsPropsHelpers.PropTypes.bool.description('Use or not internaltional phone mask number').defaultValue(false)
+});
+const DSMaskNumberHookPropsTypes = _objectSpread(_objectSpread({}, DSMaskHookPropsTypes), {}, {
+  suffix: dsPropsHelpers.PropTypes.string.description('String will be added at the end of the input value').defaultValue(''),
+  prefix: dsPropsHelpers.PropTypes.string.description('String will be added at the start of the input value').defaultValue(''),
+  decimalPlaces: dsPropsHelpers.PropTypes.number.description('Number of decimals allowed').defaultValue(2),
+  allowNegative: dsPropsHelpers.PropTypes.bool.description('Wether the input allows negative number').defaultValue(false),
+  includeThousandsSeparator: dsPropsHelpers.PropTypes.bool.description('Wether the integer part will be separated by thousands').defaultValue(true),
+  decimalRequired: dsPropsHelpers.PropTypes.bool.description('Wether decimal part is mandatory').defaultValue(false)
+});
+
+exports.DSMaskHookDefaultProps = DSMaskHookDefaultProps;
+exports.DSMaskHookPropsTypes = DSMaskHookPropsTypes;
+exports.DSMaskNumberHookDefaultProps = DSMaskNumberHookDefaultProps;
+exports.DSMaskNumberHookPropsTypes = DSMaskNumberHookPropsTypes;
+exports.DSMaskPhoneHookDefaultProps = DSMaskPhoneHookDefaultProps;
+exports.DSMaskPhoneHookPropsTypes = DSMaskPhoneHookPropsTypes;

package/cjs/mask-hook/utils/addSpecialCharacters.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+
+/* eslint-disable max-params */
+
+/**
+ *
+ * @param {string[]} maskWithoutSpecialChars An array of characters with the unfinished mask
+ * @param {[string, number][]} specialCharsDescr An array of tuples. Each tuple contains a string and a position (What string to add in a particular position)
+ * @param {number} maskedPos Current masked position
+ * @param {string} lastKeyCode Last key code of the user
+ * @returns {[string, number]} A tuple containing the final mask and the final masked position
+ */
+const addSpecialCharacters = (maskWithoutSpecialChars, specialCharsDescr, maskedPos, lastKeyCode) => {
+  const finalMask = maskWithoutSpecialChars;
+  let finalMaskedPos = maskedPos; // We insert the special chars in the respective positions, tweaking the masked pos
+
+  specialCharsDescr.forEach(_ref => {
+    let [chars, pos] = _ref;
+
+    if (finalMask.length > pos) {
+      finalMask.splice(pos, 0, ...chars);
+      if (finalMaskedPos >= pos) finalMaskedPos += chars.length;
+    }
+  });
+
+  if (lastKeyCode !== 'Backspace' && finalMaskedPos < finalMask.length) {
+    // If not erasing, move the cursor forward if we are in a special chars area
+    specialCharsDescr.forEach(_ref2 => {
+      let [chars, pos] = _ref2;
+      if (finalMaskedPos === pos) finalMaskedPos += chars.length;
+    });
+  } else if (lastKeyCode === 'Backspace' && finalMaskedPos) {
+    // If erasing, move the cursor back if we are in a special chars area
+    specialCharsDescr.forEach(_ref3 => {
+      let [chars, pos] = _ref3;
+      if (pos + 1 <= finalMaskedPos && finalMaskedPos <= pos + chars.length) finalMaskedPos = pos;
+    });
+  }
+
+  return [finalMask.join(''), finalMaskedPos];
+};
+
+exports.addSpecialCharacters = addSpecialCharacters;

package/cjs/mask-hook/utils/getPartialMaskedPos.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const getPartialMaskedPos = (rawValue, maskWithoutSpecialChars, cursorPos) => {
+  let maskedPos = 0;
+
+  for (let i = 0; i < cursorPos; i += 1) {
+    if (maskWithoutSpecialChars[maskedPos] === rawValue[i]) maskedPos += 1;
+  }
+
+  return maskedPos;
+};
+
+exports.getPartialMaskedPos = getPartialMaskedPos;

package/cjs/mask-hook/utils/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var addSpecialCharacters = require('./addSpecialCharacters.js');
+var getPartialMaskedPos = require('./getPartialMaskedPos.js');
+var setCursorPosition = require('./setCursorPosition.js');
+var sharedFilters = require('./sharedFilters.js');
+
+
+
+exports.addSpecialCharacters = addSpecialCharacters.addSpecialCharacters;
+exports.getPartialMaskedPos = getPartialMaskedPos.getPartialMaskedPos;
+exports.setCursorPosition = setCursorPosition.setCursorPosition;
+exports.filterNumbersOnly = sharedFilters.filterNumbersOnly;

package/cjs/mask-hook/utils/setCursorPosition.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const setCursorPosition = (input, position) => {
+  input.setSelectionRange(position, position, 'forward');
+};
+
+exports.setCursorPosition = setCursorPosition;

package/cjs/mask-hook/utils/sharedFilters.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+
+/* eslint-disable max-params */
+
+/**
+ *
+ * @param {string[]} charactersToFilter An array of characters to filter from
+ * @returns [string] the filtered array including only 0~9 characters
+ */
+const filterNumbersOnly = charactersToFilter => charactersToFilter.filter(char => char >= '0' && char <= '9');
+
+exports.filterNumbersOnly = filterNumbersOnly;