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

package/esm/index.js

@@ -1,14 +1,21 @@
-export { DSControlledCheckbox, DSControlledCheckboxWithSchema } from './controlled-checkbox/ControlledCheckbox.js';
-export { DSControlledDateRangePicker, DSControlledDateRangePickerWithSchema } from './controlled-date-range-picker/ControlledDateRangePicker.js';
-export { ControlledDateRangePickerDatatestid } from './controlled-date-range-picker/ControlledDateRangePickerDatatestid.js';
-export { CONTROLLED_DATE_RANGE_PICKER_TYPES } from './controlled-date-range-picker/ControlledDateRangePickerTypes.js';
-export { DSControlledDateTimePicker, DSControlledDateTimePickerWithSchema } from './controlled-date-time-picker/ControlledDateTimePicker.js';
-export { ControlledDateTimePickerDatatestid } from './controlled-date-time-picker/ControlledDateTimePickerDatatestid.js';
-export { CONTROLLED_DATE_TIME_PICKER_TYPES } from './controlled-date-time-picker/ControlledDateTimePickerTypes.js';
-export { deconstructValuesFromDateString, prependStringWithPlaceHolders } from './controlled-date-time-picker/utils/stringHelpers.js';
-export { getValidationDateTimeStringMetaInfo } from './controlled-date-time-picker/utils/dateTimeHelpers.js';
-export { getDateStringFromDay, getDateValuesFromDate, getDayFromDateString, getValidationDateStringMetaInfo } from './controlled-date-time-picker/utils/dateHelpers.js';
-export { getValidationTimeStringMetaInfo } from './controlled-date-time-picker/utils/timeHelpers.js';
-export { DSControlledToggle, DSControlledToggleWithSchema } from './controlled-toggle/ControlledToggle.js';
-export { DSAutocomplete, DSAutocompleteWithSchema } from './controlled-autocomplete/Autocomplete.js';
-export { DSComboBox, DSComboBoxWithSchema } from './controlled-combobox/ComboBox.js';
+export { DSAutocomplete, DSAutocompleteWithSchema } from './autocomplete/Autocomplete.js';
+export { DSControlledCheckbox, DSControlledCheckboxWithSchema } from './checkbox/ControlledCheckbox.js';
+export { DSComboBox, DSComboBoxWithSchema } from './combobox/ComboBox.js';
+export { DSControlledDateRangePicker, DSControlledDateRangePickerWithSchema } from './date-range-picker/ControlledDateRangePicker.js';
+export { ControlledDateRangePickerDatatestid } from './date-range-picker/ControlledDateRangePickerDatatestid.js';
+export { CONTROLLED_DATE_RANGE_PICKER_TYPES } from './date-range-picker/ControlledDateRangePickerTypes.js';
+export { DSControlledDateTimePicker, DSControlledDateTimePickerWithSchema } from './date-time-picker/ControlledDateTimePicker.js';
+export { ControlledDateTimePickerDatatestid } from './date-time-picker/ControlledDateTimePickerDatatestid.js';
+export { CONTROLLED_DATE_TIME_PICKER_TYPES } from './date-time-picker/ControlledDateTimePickerTypes.js';
+export { deconstructValuesFromDateString, prependStringWithPlaceHolders } from './date-time-picker/utils/stringHelpers.js';
+export { getValidationDateTimeStringMetaInfo } from './date-time-picker/utils/dateTimeHelpers.js';
+export { getDateStringFromDay, getDateValuesFromDate, getDayFromDateString, getValidationDateStringMetaInfo } from './date-time-picker/utils/dateHelpers.js';
+export { getValidationTimeStringMetaInfo } from './date-time-picker/utils/timeHelpers.js';
+export { UsePhoneMaskWithSchema, usePhoneMask } from './mask-hook/hooks/usePhoneMask.js';
+export { UseNumberMaskWithSchema, useNumberMask } from './mask-hook/hooks/useNumberMask.js';
+export { UseSSNMaskWithSchema, useSSNMask } from './mask-hook/hooks/useSSNMask.js';
+export { UseZipCodeMaskWithSchema, useZipCode } from './mask-hook/hooks/useZipCode.js';
+export { DSInputText, DSInputTextWithSchema } from './text-input/DSInputText.js';
+export { DSInputTextDataTestIds } from './text-input/exported-related/data-test-ids.js';
+export { DSInputTextName, DSInputTextSlots } from './text-input/exported-related/theming.js';
+export { DSControlledToggle, DSControlledToggleWithSchema } from './toggle/ControlledToggle.js';

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

@@ -0,0 +1,4 @@
+export { UsePhoneMaskWithSchema, usePhoneMask } from './usePhoneMask.js';
+export { UseNumberMaskWithSchema, useNumberMask } from './useNumberMask.js';
+export { UseSSNMaskWithSchema, useSSNMask } from './useSSNMask.js';
+export { UseZipCodeMaskWithSchema, useZipCode } from './useZipCode.js';

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

@@ -0,0 +1,162 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/es.string.replace.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 '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 '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 { DSMaskNumberHookPropsTypes, DSMaskNumberHookDefaultProps } from '../react-desc-prop-types.js';
+
+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 = useMemoMergePropsWithDefault(props, DSMaskNumberHookDefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, DSMaskNumberHookPropsTypes);
+
+  const {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown,
+    onBlur: userOnBlur
+  } = propsWithDefault,
+        opts = _objectWithoutProperties(propsWithDefault, _excluded);
+
+  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 onBlur = 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 = 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, 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(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, userOnChange, opts]);
+  return {
+    onKeyDown,
+    onChange,
+    onBlur
+  };
+};
+const UseNumberMaskWithSchema = describe(useNumberMask);
+UseNumberMaskWithSchema.propTypes = DSMaskNumberHookPropsTypes;
+
+export { UseNumberMaskWithSchema, useNumberMask };

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

@@ -0,0 +1,84 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+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/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 { DSMaskPhoneHookPropsTypes, DSMaskPhoneHookDefaultProps } from '../react-desc-prop-types.js';
+
+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(rawValue, maskedValue, cursorPos);
+  return addSpecialCharacters(maskedValue, isInternational ? internationalPhoneSpecialChars : phoneSpecialChars, maskedPos, lastKeyCode);
+};
+
+const usePhoneMask = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskPhoneHookDefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, DSMaskPhoneHookPropsTypes);
+
+  const {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown,
+    onBlur
+  } = propsWithDefault,
+        opts = _objectWithoutProperties(propsWithDefault, _excluded);
+
+  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, 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(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, opts, userOnChange]);
+  return {
+    onKeyDown,
+    onChange
+  };
+};
+const UsePhoneMaskWithSchema = describe(usePhoneMask);
+UsePhoneMaskWithSchema.propTypes = DSMaskPhoneHookPropsTypes;
+
+export { UsePhoneMaskWithSchema, usePhoneMask };

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

@@ -0,0 +1,67 @@
+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/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 { DSMaskHookPropsTypes, DSMaskHookDefaultProps } from '../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(rawValue, maskedValue, cursorPos);
+  return addSpecialCharacters(maskedValue, ssnSpecialChars, maskedPos, lastKeyCode);
+};
+
+const useSSNMask = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes);
+  const {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown
+  } = 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);
+    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]);
+  return {
+    onKeyDown,
+    onChange
+  };
+};
+const UseSSNMaskWithSchema = describe(useSSNMask);
+UseSSNMaskWithSchema.propTypes = DSMaskHookPropsTypes;
+
+export { UseSSNMaskWithSchema, useSSNMask };

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

@@ -0,0 +1,64 @@
+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/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 { DSMaskHookPropsTypes, DSMaskHookDefaultProps } from '../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(rawValue, maskedValue, cursorPos);
+  return addSpecialCharacters(maskedValue, zipCodeSpecialChars, maskedPos, lastKeyCode);
+};
+
+const useZipCode = props => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes);
+  const {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown
+  } = 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);
+    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]);
+  return {
+    onKeyDown,
+    onChange
+  };
+};
+const UseZipCodeMaskWithSchema = describe(useZipCode);
+UseZipCodeMaskWithSchema.propTypes = DSMaskHookPropsTypes;
+
+export { UseZipCodeMaskWithSchema, useZipCode };

package/esm/mask-hook/index.js

@@ -0,0 +1,4 @@
+export { UsePhoneMaskWithSchema, usePhoneMask } from './hooks/usePhoneMask.js';
+export { UseNumberMaskWithSchema, useNumberMask } from './hooks/useNumberMask.js';
+export { UseSSNMaskWithSchema, useSSNMask } from './hooks/useSSNMask.js';
+export { UseZipCodeMaskWithSchema, useZipCode } from './hooks/useZipCode.js';

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

@@ -0,0 +1,45 @@
+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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { PropTypes } from '@elliemae/ds-props-helpers';
+
+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(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: PropTypes.func.description('React set state function for the value').isRequired,
+  onChange: PropTypes.func.description('Callback for onChange'),
+  onKeyDown: PropTypes.func.description('Callback for onKeyDown')
+};
+const DSMaskPhoneHookPropsTypes = _objectSpread(_objectSpread({}, DSMaskHookPropsTypes), {}, {
+  isInternational: PropTypes.bool.description('Use or not internaltional phone mask number').defaultValue(false)
+});
+const DSMaskNumberHookPropsTypes = _objectSpread(_objectSpread({}, DSMaskHookPropsTypes), {}, {
+  suffix: PropTypes.string.description('String will be added at the end of the input value').defaultValue(''),
+  prefix: PropTypes.string.description('String will be added at the start of the input value').defaultValue(''),
+  decimalPlaces: PropTypes.number.description('Number of decimals allowed').defaultValue(2),
+  allowNegative: PropTypes.bool.description('Wether the input allows negative number').defaultValue(false),
+  includeThousandsSeparator: PropTypes.bool.description('Wether the integer part will be separated by thousands').defaultValue(true),
+  decimalRequired: PropTypes.bool.description('Wether decimal part is mandatory').defaultValue(false)
+});
+
+export { DSMaskHookDefaultProps, DSMaskHookPropsTypes, DSMaskNumberHookDefaultProps, DSMaskNumberHookPropsTypes, DSMaskPhoneHookDefaultProps, DSMaskPhoneHookPropsTypes };

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

@@ -0,0 +1,46 @@
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import '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];
+};
+
+export { addSpecialCharacters };

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

@@ -0,0 +1,11 @@
+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;
+};
+
+export { getPartialMaskedPos };

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

@@ -0,0 +1,4 @@
+export { addSpecialCharacters } from './addSpecialCharacters.js';
+export { getPartialMaskedPos } from './getPartialMaskedPos.js';
+export { setCursorPosition } from './setCursorPosition.js';
+export { filterNumbersOnly } from './sharedFilters.js';

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

@@ -0,0 +1,5 @@
+const setCursorPosition = (input, position) => {
+  input.setSelectionRange(position, position, 'forward');
+};
+
+export { setCursorPosition };

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

@@ -0,0 +1,14 @@
+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';
+
+/* 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');
+
+export { filterNumbersOnly };