@elliemae/ds-controlled-form 2.4.1-rc.5 → 2.4.1-rc.6

package/cjs/index.js

@@ -18,6 +18,7 @@ var timeHelpers = require('./date-time-picker/utils/timeHelpers.js');
 var usePhoneMask = require('./mask-hook/hooks/usePhoneMask.js');
 var useNumberMask = require('./mask-hook/hooks/useNumberMask.js');
 var useSSNMask = require('./mask-hook/hooks/useSSNMask.js');
+var useRegExpMask = require('./mask-hook/hooks/useRegExpMask.js');
 var useZipCodeMask = require('./mask-hook/hooks/useZipCodeMask.js');
 var DSInputText = require('./text-input/DSInputText.js');
 var dataTestIds = require('./text-input/exported-related/data-test-ids.js');
@@ -61,6 +62,9 @@ exports.useNumberMask = useNumberMask.useNumberMask;
 exports.UseSSNMaskWithSchema = useSSNMask.UseSSNMaskWithSchema;
 exports.getSSNMaskedValue = useSSNMask.getSSNMaskedValue;
 exports.useSSNMask = useSSNMask.useSSNMask;
+exports.UseRegExpMaskWithSchema = useRegExpMask.UseRegExpMaskWithSchema;
+exports.isRegExp = useRegExpMask.isRegExp;
+exports.useRegExpMask = useRegExpMask.useRegExpMask;
 exports.UseZipCodeMaskWithSchema = useZipCodeMask.UseZipCodeMaskWithSchema;
 exports.getUseZipMaskedValue = useZipCodeMask.getUseZipMaskedValue;
 exports.useZipCodeMask = useZipCodeMask.useZipCodeMask;

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var usePhoneMask = require('./usePhoneMask.js');
 var useNumberMask = require('./useNumberMask.js');
 var useSSNMask = require('./useSSNMask.js');
+var useRegExpMask = require('./useRegExpMask.js');
 var useZipCodeMask = require('./useZipCodeMask.js');
 
 
@@ -18,6 +19,9 @@ exports.useNumberMask = useNumberMask.useNumberMask;
 exports.UseSSNMaskWithSchema = useSSNMask.UseSSNMaskWithSchema;
 exports.getSSNMaskedValue = useSSNMask.getSSNMaskedValue;
 exports.useSSNMask = useSSNMask.useSSNMask;
+exports.UseRegExpMaskWithSchema = useRegExpMask.UseRegExpMaskWithSchema;
+exports.isRegExp = useRegExpMask.isRegExp;
+exports.useRegExpMask = useRegExpMask.useRegExpMask;
 exports.UseZipCodeMaskWithSchema = useZipCodeMask.UseZipCodeMaskWithSchema;
 exports.getUseZipMaskedValue = useZipCodeMask.getUseZipMaskedValue;
 exports.useZipCodeMask = useZipCodeMask.useZipCodeMask;

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

@@ -14,6 +14,8 @@ 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');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 var reactDescPropTypes = require('../react-desc-prop-types.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

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

@@ -13,6 +13,8 @@ var dsUtilities = require('@elliemae/ds-utilities');
 var addSpecialCharacters = require('../utils/addSpecialCharacters.js');
 var getPartialMaskedPos = require('../utils/getPartialMaskedPos.js');
 var setCursorPosition = require('../utils/setCursorPosition.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 var reactDescPropTypes = require('../react-desc-prop-types.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

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

@@ -0,0 +1,122 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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');
+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');
+var flatStringArray = require('../utils/flatStringArray.js');
+var reactDescPropTypes = require('../react-desc-prop-types.js');
+
+const isRegExp = item => typeof item === 'object';
+
+const conformValue = (rawValue, cursorPos, lastKeyCode, regExp, filledMask) => {
+  const specialChars = [];
+  const flatRegExp = flatStringArray.flatStringArray(regExp);
+  const rawValueArray = rawValue.split('');
+  let offSet = 0;
+  let charsFound = 0;
+  let specialCharsLeft = '';
+  let fullRegExpMatched = false;
+  const maskedValue = [];
+
+  for (let i = 0; i < flatRegExp.length; i += 1) {
+    if (isRegExp(flatRegExp[i])) {
+      specialCharsLeft = '';
+      fullRegExpMatched = false;
+
+      for (let j = charsFound + offSet; j < rawValueArray.length; j += 1) {
+        var _rawValueArray$j;
+
+        const match = (_rawValueArray$j = rawValueArray[j]) === null || _rawValueArray$j === void 0 ? void 0 : _rawValueArray$j.match(flatRegExp[i]);
+
+        if (match) {
+          maskedValue.push(match[0]);
+          charsFound += 1;
+          fullRegExpMatched = true;
+          break;
+        } else {
+          offSet += 1;
+        }
+      }
+
+      if (filledMask && !fullRegExpMatched) {
+        maskedValue.push('_');
+      }
+    } else {
+      specialChars.push([flatRegExp[i], i]);
+      if (rawValueArray[i + offSet] === flatRegExp[i]) charsFound += 1;
+      specialCharsLeft += flatRegExp[i];
+    }
+  }
+
+  if (!fullRegExpMatched) specialCharsLeft = '';
+  const maskedPos = getPartialMaskedPos.getPartialMaskedPos(rawValue, maskedValue, cursorPos);
+  const [maskWithSpecialsChars, finalMaskedPos] = addSpecialCharacters.addSpecialCharacters(maskedValue, specialChars, maskedPos, lastKeyCode);
+  return [maskWithSpecialsChars + specialCharsLeft, finalMaskedPos];
+};
+
+const useRegExpMask = props => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.DSMaskRegExpHookDefaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, reactDescPropTypes.DSMaskRegExpHookPropsTypes);
+  const {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown,
+    onBlur: userOnBlur,
+    regExp,
+    filledMask
+  } = 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, regExp, filledMask);
+    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]);
+  const onBlur = React.useCallback(e => {
+    if (filledMask) {
+      const maskedValue = e.target.value.split('');
+      const flatRegExp = flatStringArray.flatStringArray(regExp);
+      const firstUnderscoreIdx = maskedValue.findIndex((char, idx) => char === '_' && flatRegExp[idx] !== '_');
+      if (firstUnderscoreIdx > -1) valueSetter(maskedValue.slice(0, firstUnderscoreIdx).join(''));
+    }
+
+    if (userOnBlur) userOnBlur(e);
+  }, [valueSetter, userOnBlur]);
+  return {
+    onKeyDown,
+    onChange,
+    onBlur
+  };
+};
+const UseRegExpMaskWithSchema = dsPropsHelpers.describe(useRegExpMask);
+UseRegExpMaskWithSchema.propTypes = reactDescPropTypes.DSMaskRegExpHookPropsTypes;
+
+exports.UseRegExpMaskWithSchema = UseRegExpMaskWithSchema;
+exports.isRegExp = isRegExp;
+exports.useRegExpMask = useRegExpMask;

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

@@ -12,6 +12,8 @@ var dsUtilities = require('@elliemae/ds-utilities');
 var addSpecialCharacters = require('../utils/addSpecialCharacters.js');
 var getPartialMaskedPos = require('../utils/getPartialMaskedPos.js');
 var setCursorPosition = require('../utils/setCursorPosition.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 var reactDescPropTypes = require('../react-desc-prop-types.js');
 
 const ssnSpecialChars = [['-', 3], ['-', 6]];

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

@@ -12,6 +12,8 @@ var dsUtilities = require('@elliemae/ds-utilities');
 var addSpecialCharacters = require('../utils/addSpecialCharacters.js');
 var getPartialMaskedPos = require('../utils/getPartialMaskedPos.js');
 var setCursorPosition = require('../utils/setCursorPosition.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 var reactDescPropTypes = require('../react-desc-prop-types.js');
 
 const zipCodeSpecialChars = [['-', 5]];

package/cjs/mask-hook/index.js

@@ -5,6 +5,7 @@ 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 useRegExpMask = require('./hooks/useRegExpMask.js');
 var useZipCodeMask = require('./hooks/useZipCodeMask.js');
 
 
@@ -18,6 +19,9 @@ exports.useNumberMask = useNumberMask.useNumberMask;
 exports.UseSSNMaskWithSchema = useSSNMask.UseSSNMaskWithSchema;
 exports.getSSNMaskedValue = useSSNMask.getSSNMaskedValue;
 exports.useSSNMask = useSSNMask.useSSNMask;
+exports.UseRegExpMaskWithSchema = useRegExpMask.UseRegExpMaskWithSchema;
+exports.isRegExp = useRegExpMask.isRegExp;
+exports.useRegExpMask = useRegExpMask.useRegExpMask;
 exports.UseZipCodeMaskWithSchema = useZipCodeMask.UseZipCodeMaskWithSchema;
 exports.getUseZipMaskedValue = useZipCodeMask.getUseZipMaskedValue;
 exports.useZipCodeMask = useZipCodeMask.useZipCodeMask;

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

@@ -25,6 +25,9 @@ const DSMaskHookDefaultProps = {
 const DSMaskPhoneHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
   isInternational: false
 });
+const DSMaskRegExpHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
+  filledMask: false
+});
 const DSMaskNumberHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
   suffix: '',
   prefix: '',
@@ -38,6 +41,10 @@ const DSMaskHookPropsTypes = {
   onChange: dsPropsHelpers.PropTypes.func.description('Callback for onChange'),
   onKeyDown: dsPropsHelpers.PropTypes.func.description('Callback for onKeyDown')
 };
+const DSMaskRegExpHookPropsTypes = _objectSpread(_objectSpread({}, DSMaskHookPropsTypes), {}, {
+  regExp: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.string, dsPropsHelpers.PropTypes.instanceOf(RegExp)])).description('Array with regexp or special chars per character').isRequired,
+  filledMask: dsPropsHelpers.PropTypes.bool.description('Show blank chars positions').defaultValue(false)
+});
 const DSMaskPhoneHookPropsTypes = _objectSpread(_objectSpread({}, DSMaskHookPropsTypes), {}, {
   isInternational: dsPropsHelpers.PropTypes.bool.description('Use or not internaltional phone mask number').defaultValue(false)
 });
@@ -56,3 +63,5 @@ exports.DSMaskNumberHookDefaultProps = DSMaskNumberHookDefaultProps;
 exports.DSMaskNumberHookPropsTypes = DSMaskNumberHookPropsTypes;
 exports.DSMaskPhoneHookDefaultProps = DSMaskPhoneHookDefaultProps;
 exports.DSMaskPhoneHookPropsTypes = DSMaskPhoneHookPropsTypes;
+exports.DSMaskRegExpHookDefaultProps = DSMaskRegExpHookDefaultProps;
+exports.DSMaskRegExpHookPropsTypes = DSMaskRegExpHookPropsTypes;

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

@@ -38,10 +38,9 @@ const addSpecialCharacters = (maskWithoutSpecialChars, specialCharsDescr, masked
     });
   } 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;
-    });
+    for (let i = specialCharsDescr.length - 1; i >= 0; i -= 1) {
+      if (specialCharsDescr[i][1] + 1 <= finalMaskedPos && finalMaskedPos <= specialCharsDescr[i][1] + specialCharsDescr[i][0].length) [, finalMaskedPos] = specialCharsDescr[i];
+    }
   }
 
   return [finalMask.join(''), finalMaskedPos];

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+
+const flatStringArray = stringArray => stringArray.reduce((acc, curr) => {
+  if (typeof curr === 'string') {
+    return [...acc, ...curr.split('')];
+  }
+
+  return [...acc, curr];
+}, []);
+
+exports.flatStringArray = flatStringArray;

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

@@ -6,6 +6,7 @@ var addSpecialCharacters = require('./addSpecialCharacters.js');
 var getPartialMaskedPos = require('./getPartialMaskedPos.js');
 var setCursorPosition = require('./setCursorPosition.js');
 var sharedFilters = require('./sharedFilters.js');
+var flatStringArray = require('./flatStringArray.js');
 
 
 
@@ -13,3 +14,4 @@ exports.addSpecialCharacters = addSpecialCharacters.addSpecialCharacters;
 exports.getPartialMaskedPos = getPartialMaskedPos.getPartialMaskedPos;
 exports.setCursorPosition = setCursorPosition.setCursorPosition;
 exports.filterNumbersOnly = sharedFilters.filterNumbersOnly;
+exports.flatStringArray = flatStringArray.flatStringArray;

package/esm/index.js

@@ -14,6 +14,7 @@ export { getValidationTimeStringMetaInfo } from './date-time-picker/utils/timeHe
 export { UsePhoneMaskWithSchema, getPhoneMaskedValue, usePhoneMask } from './mask-hook/hooks/usePhoneMask.js';
 export { UseNumberMaskWithSchema, getNumberMaskedValue, useNumberMask } from './mask-hook/hooks/useNumberMask.js';
 export { UseSSNMaskWithSchema, getSSNMaskedValue, useSSNMask } from './mask-hook/hooks/useSSNMask.js';
+export { UseRegExpMaskWithSchema, isRegExp, useRegExpMask } from './mask-hook/hooks/useRegExpMask.js';
 export { UseZipCodeMaskWithSchema, getUseZipMaskedValue, useZipCodeMask } from './mask-hook/hooks/useZipCodeMask.js';
 export { DSInputText, DSInputTextWithSchema } from './text-input/DSInputText.js';
 export { DSInputTextDataTestIds } from './text-input/exported-related/data-test-ids.js';

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

@@ -1,4 +1,5 @@
 export { UsePhoneMaskWithSchema, getPhoneMaskedValue, usePhoneMask } from './usePhoneMask.js';
 export { UseNumberMaskWithSchema, getNumberMaskedValue, useNumberMask } from './useNumberMask.js';
 export { UseSSNMaskWithSchema, getSSNMaskedValue, useSSNMask } from './useSSNMask.js';
+export { UseRegExpMaskWithSchema, isRegExp, useRegExpMask } from './useRegExpMask.js';
 export { UseZipCodeMaskWithSchema, getUseZipMaskedValue, useZipCodeMask } from './useZipCodeMask.js';

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

@@ -10,6 +10,8 @@ import { useCallbackAfterRender } from '@elliemae/ds-utilities';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import { setCursorPosition } from '../utils/setCursorPosition.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import { DSMaskNumberHookPropsTypes, DSMaskNumberHookDefaultProps } from '../react-desc-prop-types.js';
 
 const _excluded = ["valueSetter", "onChange", "onKeyDown", "onBlur"];

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

@@ -9,6 +9,8 @@ import { useCallbackAfterRender } from '@elliemae/ds-utilities';
 import { addSpecialCharacters } from '../utils/addSpecialCharacters.js';
 import { getPartialMaskedPos } from '../utils/getPartialMaskedPos.js';
 import { setCursorPosition } from '../utils/setCursorPosition.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import { DSMaskPhoneHookPropsTypes, DSMaskPhoneHookDefaultProps } from '../react-desc-prop-types.js';
 
 const _excluded = ["valueSetter", "onChange", "onKeyDown", "onBlur"];

package/esm/mask-hook/hooks/useRegExpMask.js

@@ -0,0 +1,116 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useState, useCallback } from 'react';
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { useCallbackAfterRender } from '@elliemae/ds-utilities';
+import { addSpecialCharacters } from '../utils/addSpecialCharacters.js';
+import { getPartialMaskedPos } from '../utils/getPartialMaskedPos.js';
+import { setCursorPosition } from '../utils/setCursorPosition.js';
+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 { flatStringArray } from '../utils/flatStringArray.js';
+import { DSMaskRegExpHookPropsTypes, DSMaskRegExpHookDefaultProps } from '../react-desc-prop-types.js';
+
+const isRegExp = item => typeof item === 'object';
+
+const conformValue = (rawValue, cursorPos, lastKeyCode, regExp, filledMask) => {
+  const specialChars = [];
+  const flatRegExp = flatStringArray(regExp);
+  const rawValueArray = rawValue.split('');
+  let offSet = 0;
+  let charsFound = 0;
+  let specialCharsLeft = '';
+  let fullRegExpMatched = false;
+  const maskedValue = [];
+
+  for (let i = 0; i < flatRegExp.length; i += 1) {
+    if (isRegExp(flatRegExp[i])) {
+      specialCharsLeft = '';
+      fullRegExpMatched = false;
+
+      for (let j = charsFound + offSet; j < rawValueArray.length; j += 1) {
+        var _rawValueArray$j;
+
+        const match = (_rawValueArray$j = rawValueArray[j]) === null || _rawValueArray$j === void 0 ? void 0 : _rawValueArray$j.match(flatRegExp[i]);
+
+        if (match) {
+          maskedValue.push(match[0]);
+          charsFound += 1;
+          fullRegExpMatched = true;
+          break;
+        } else {
+          offSet += 1;
+        }
+      }
+
+      if (filledMask && !fullRegExpMatched) {
+        maskedValue.push('_');
+      }
+    } else {
+      specialChars.push([flatRegExp[i], i]);
+      if (rawValueArray[i + offSet] === flatRegExp[i]) charsFound += 1;
+      specialCharsLeft += flatRegExp[i];
+    }
+  }
+
+  if (!fullRegExpMatched) specialCharsLeft = '';
+  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);
+  const [maskWithSpecialsChars, finalMaskedPos] = addSpecialCharacters(maskedValue, specialChars, maskedPos, lastKeyCode);
+  return [maskWithSpecialsChars + specialCharsLeft, finalMaskedPos];
+};
+
+const useRegExpMask = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskRegExpHookDefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, DSMaskRegExpHookPropsTypes);
+  const {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown,
+    onBlur: userOnBlur,
+    regExp,
+    filledMask
+  } = propsWithDefault;
+  const lastKeyCode = useRef('Unidentified');
+  const scheduleAfterRender = 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] = useState(0);
+  const onKeyDown = useCallback(e => {
+    lastKeyCode.current = e.code;
+    if (userOnKeyDown) userOnKeyDown(e);
+  }, [userOnKeyDown]);
+  const onChange = 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, regExp, filledMask);
+    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(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, userOnChange]);
+  const onBlur = useCallback(e => {
+    if (filledMask) {
+      const maskedValue = e.target.value.split('');
+      const flatRegExp = flatStringArray(regExp);
+      const firstUnderscoreIdx = maskedValue.findIndex((char, idx) => char === '_' && flatRegExp[idx] !== '_');
+      if (firstUnderscoreIdx > -1) valueSetter(maskedValue.slice(0, firstUnderscoreIdx).join(''));
+    }
+
+    if (userOnBlur) userOnBlur(e);
+  }, [valueSetter, userOnBlur]);
+  return {
+    onKeyDown,
+    onChange,
+    onBlur
+  };
+};
+const UseRegExpMaskWithSchema = describe(useRegExpMask);
+UseRegExpMaskWithSchema.propTypes = DSMaskRegExpHookPropsTypes;
+
+export { UseRegExpMaskWithSchema, isRegExp, useRegExpMask };

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

@@ -8,6 +8,8 @@ import { useCallbackAfterRender } from '@elliemae/ds-utilities';
 import { addSpecialCharacters } from '../utils/addSpecialCharacters.js';
 import { getPartialMaskedPos } from '../utils/getPartialMaskedPos.js';
 import { setCursorPosition } from '../utils/setCursorPosition.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import { DSMaskHookPropsTypes, DSMaskHookDefaultProps } from '../react-desc-prop-types.js';
 
 const ssnSpecialChars = [['-', 3], ['-', 6]];

package/esm/mask-hook/hooks/useZipCodeMask.js

@@ -8,6 +8,8 @@ import { useCallbackAfterRender } from '@elliemae/ds-utilities';
 import { addSpecialCharacters } from '../utils/addSpecialCharacters.js';
 import { getPartialMaskedPos } from '../utils/getPartialMaskedPos.js';
 import { setCursorPosition } from '../utils/setCursorPosition.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import { DSMaskHookPropsTypes, DSMaskHookDefaultProps } from '../react-desc-prop-types.js';
 
 const zipCodeSpecialChars = [['-', 5]];

package/esm/mask-hook/index.js

@@ -1,4 +1,5 @@
 export { UsePhoneMaskWithSchema, getPhoneMaskedValue, usePhoneMask } from './hooks/usePhoneMask.js';
 export { UseNumberMaskWithSchema, getNumberMaskedValue, useNumberMask } from './hooks/useNumberMask.js';
 export { UseSSNMaskWithSchema, getSSNMaskedValue, useSSNMask } from './hooks/useSSNMask.js';
+export { UseRegExpMaskWithSchema, isRegExp, useRegExpMask } from './hooks/useRegExpMask.js';
 export { UseZipCodeMaskWithSchema, getUseZipMaskedValue, useZipCodeMask } from './hooks/useZipCodeMask.js';

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

@@ -17,6 +17,9 @@ const DSMaskHookDefaultProps = {
 const DSMaskPhoneHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
   isInternational: false
 });
+const DSMaskRegExpHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
+  filledMask: false
+});
 const DSMaskNumberHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
   suffix: '',
   prefix: '',
@@ -30,6 +33,10 @@ const DSMaskHookPropsTypes = {
   onChange: PropTypes.func.description('Callback for onChange'),
   onKeyDown: PropTypes.func.description('Callback for onKeyDown')
 };
+const DSMaskRegExpHookPropsTypes = _objectSpread(_objectSpread({}, DSMaskHookPropsTypes), {}, {
+  regExp: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)])).description('Array with regexp or special chars per character').isRequired,
+  filledMask: PropTypes.bool.description('Show blank chars positions').defaultValue(false)
+});
 const DSMaskPhoneHookPropsTypes = _objectSpread(_objectSpread({}, DSMaskHookPropsTypes), {}, {
   isInternational: PropTypes.bool.description('Use or not internaltional phone mask number').defaultValue(false)
 });
@@ -42,4 +49,4 @@ const DSMaskNumberHookPropsTypes = _objectSpread(_objectSpread({}, DSMaskHookPro
   decimalRequired: PropTypes.bool.description('Wether decimal part is mandatory').defaultValue(false)
 });
 
-export { DSMaskHookDefaultProps, DSMaskHookPropsTypes, DSMaskNumberHookDefaultProps, DSMaskNumberHookPropsTypes, DSMaskPhoneHookDefaultProps, DSMaskPhoneHookPropsTypes };
+export { DSMaskHookDefaultProps, DSMaskHookPropsTypes, DSMaskNumberHookDefaultProps, DSMaskNumberHookPropsTypes, DSMaskPhoneHookDefaultProps, DSMaskPhoneHookPropsTypes, DSMaskRegExpHookDefaultProps, DSMaskRegExpHookPropsTypes };

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

@@ -34,10 +34,9 @@ const addSpecialCharacters = (maskWithoutSpecialChars, specialCharsDescr, masked
     });
   } 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;
-    });
+    for (let i = specialCharsDescr.length - 1; i >= 0; i -= 1) {
+      if (specialCharsDescr[i][1] + 1 <= finalMaskedPos && finalMaskedPos <= specialCharsDescr[i][1] + specialCharsDescr[i][0].length) [, finalMaskedPos] = specialCharsDescr[i];
+    }
   }
 
   return [finalMask.join(''), finalMaskedPos];

package/esm/mask-hook/utils/flatStringArray.js

@@ -0,0 +1,14 @@
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+
+const flatStringArray = stringArray => stringArray.reduce((acc, curr) => {
+  if (typeof curr === 'string') {
+    return [...acc, ...curr.split('')];
+  }
+
+  return [...acc, curr];
+}, []);
+
+export { flatStringArray };

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

@@ -2,3 +2,4 @@ export { addSpecialCharacters } from './addSpecialCharacters.js';
 export { getPartialMaskedPos } from './getPartialMaskedPos.js';
 export { setCursorPosition } from './setCursorPosition.js';
 export { filterNumbersOnly } from './sharedFilters.js';
+export { flatStringArray } from './flatStringArray.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-controlled-form",
-  "version": "2.4.1-rc.5",
+  "version": "2.4.1-rc.6",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Controllers",
   "module": "./esm/index.js",
@@ -91,6 +91,10 @@
       "import": "./esm/mask-hook/utils/getPartialMaskedPos.js",
       "require": "./cjs/mask-hook/utils/getPartialMaskedPos.js"
     },
+    "./mask-hook/utils/flatStringArray": {
+      "import": "./esm/mask-hook/utils/flatStringArray.js",
+      "require": "./cjs/mask-hook/utils/flatStringArray.js"
+    },
     "./mask-hook/utils/addSpecialCharacters": {
       "import": "./esm/mask-hook/utils/addSpecialCharacters.js",
       "require": "./cjs/mask-hook/utils/addSpecialCharacters.js"
@@ -111,6 +115,10 @@
       "import": "./esm/mask-hook/hooks/useSSNMask.js",
       "require": "./cjs/mask-hook/hooks/useSSNMask.js"
     },
+    "./mask-hook/hooks/useRegExpMask": {
+      "import": "./esm/mask-hook/hooks/useRegExpMask.js",
+      "require": "./cjs/mask-hook/hooks/useRegExpMask.js"
+    },
     "./mask-hook/hooks/usePhoneMask": {
       "import": "./esm/mask-hook/hooks/usePhoneMask.js",
       "require": "./cjs/mask-hook/hooks/usePhoneMask.js"
@@ -800,20 +808,20 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.4.1-rc.5",
-    "@elliemae/ds-circular-progress-indicator": "2.4.1-rc.5",
-    "@elliemae/ds-controlled-form": "2.4.1-rc.5",
-    "@elliemae/ds-form": "2.4.1-rc.5",
-    "@elliemae/ds-form-layout-blocks": "2.4.1-rc.5",
-    "@elliemae/ds-grid": "2.4.1-rc.5",
-    "@elliemae/ds-icon": "2.4.1-rc.5",
-    "@elliemae/ds-icons": "2.4.1-rc.5",
-    "@elliemae/ds-pills": "2.4.1-rc.5",
-    "@elliemae/ds-popperjs": "2.4.1-rc.5",
-    "@elliemae/ds-props-helpers": "2.4.1-rc.5",
-    "@elliemae/ds-system": "2.4.1-rc.5",
-    "@elliemae/ds-tooltip": "2.4.1-rc.5",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.1-rc.5",
+    "@elliemae/ds-button": "2.4.1-rc.6",
+    "@elliemae/ds-circular-progress-indicator": "2.4.1-rc.6",
+    "@elliemae/ds-controlled-form": "2.4.1-rc.6",
+    "@elliemae/ds-form": "2.4.1-rc.6",
+    "@elliemae/ds-form-layout-blocks": "2.4.1-rc.6",
+    "@elliemae/ds-grid": "2.4.1-rc.6",
+    "@elliemae/ds-icon": "2.4.1-rc.6",
+    "@elliemae/ds-icons": "2.4.1-rc.6",
+    "@elliemae/ds-pills": "2.4.1-rc.6",
+    "@elliemae/ds-popperjs": "2.4.1-rc.6",
+    "@elliemae/ds-props-helpers": "2.4.1-rc.6",
+    "@elliemae/ds-system": "2.4.1-rc.6",
+    "@elliemae/ds-tooltip": "2.4.1-rc.6",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.1-rc.6",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5",

package/types/mask-hook/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './usePhoneMask';
 export * from './useNumberMask';
 export * from './useSSNMask';
+export * from './useRegExpMask';
 export * from './useZipCodeMask';

package/types/mask-hook/hooks/useRegExpMask.d.ts

@@ -0,0 +1,4 @@
+import { DSMaskT } from '../react-desc-prop-types';
+export declare const isRegExp: (item: RegExp | string) => item is RegExp;
+export declare const useRegExpMask: DSMaskT.Hook;
+export declare const UseRegExpMaskWithSchema: import("@elliemae/ds-props-helpers/types/propTypes/types").DocumentedReactComponent<DSMaskT.HookArgs>;

package/types/mask-hook/react-desc-prop-types.d.ts

@@ -22,13 +22,18 @@ export declare namespace DSMaskT {
     interface PhoneHookArgs extends HookArgs {
         isInternational: boolean;
     }
+    interface RegExpHookArgs extends HookArgs {
+        filledMask: boolean;
+    }
     type Hook = (args: HookArgs) => HookReturn;
     type PhoneHook = (args: PhoneHookArgs) => HookReturn;
     type NumberHook = (args: NumberHookArgs) => HookReturn;
 }
-export declare const DSMaskHookDefaultProps: Partial<DSMaskT.PhoneHookArgs>;
+export declare const DSMaskHookDefaultProps: Partial<DSMaskT.HookReturn>;
 export declare const DSMaskPhoneHookDefaultProps: Partial<DSMaskT.PhoneHookArgs>;
+export declare const DSMaskRegExpHookDefaultProps: Partial<DSMaskT.RegExpHookArgs>;
 export declare const DSMaskNumberHookDefaultProps: Partial<DSMaskT.NumberHookArgs>;
 export declare const DSMaskHookPropsTypes: React.WeakValidationMap<unknown>;
+export declare const DSMaskRegExpHookPropsTypes: React.WeakValidationMap<unknown>;
 export declare const DSMaskPhoneHookPropsTypes: React.WeakValidationMap<unknown>;
 export declare const DSMaskNumberHookPropsTypes: React.WeakValidationMap<unknown>;

package/types/mask-hook/tests/useRegExpMask.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/mask-hook/utils/flatStringArray.d.ts

@@ -0,0 +1 @@
+export declare const flatStringArray: (stringArray: string[]) => string[];

package/types/mask-hook/utils/index.d.ts

@@ -2,3 +2,4 @@ export * from './addSpecialCharacters';
 export * from './getPartialMaskedPos';
 export * from './setCursorPosition';
 export * from './sharedFilters';
+export * from './flatStringArray';