@elliemae/ds-controlled-form 2.3.0-next.18 → 2.3.0-next.19

package/esm/{controlled-date-time-picker → date-time-picker}/parts/Pickers/TimeWheel/Styleds.js

@@ -46,7 +46,7 @@ const hoverBgPerStatus = css(_templateObject4 || (_templateObject4 = _taggedTemp
   return theme.colors.neutral['000'];
 });
 const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-1nsw31l-0"
+  componentId: "sc-u44anw-0"
 })(["color:", ";width:26px;height:26px;"], _ref5 => {
   let {
     theme
@@ -54,7 +54,7 @@ const StyledIconTriggerButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
   return theme.colors.brand['600'];
 });
 const StyledWheelList = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1nsw31l-1"
+  componentId: "sc-u44anw-1"
 })(["width:100%;height:100%;margin:auto;padding:0;position:relative;display:flex;flex-direction:column;align-items:center;&:focus-within{&:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";box-shadow:0 0 2px ", ";}}"], _ref6 => {
   let {
     theme
@@ -67,7 +67,7 @@ const StyledWheelList = /*#__PURE__*/styled.div.withConfig({
   return theme.colors.brand[700];
 });
 const StyledTimePickerContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1nsw31l-2"
+  componentId: "sc-u44anw-2"
 })(["display:grid;position:relative;grid-template-columns:192px;grid-template-rows:36px 30px auto;grid-template-areas:'TimePickerHead' 'TimePickerWheelsLegend' 'VerticalWheelWrapper';", ""], _ref8 => {
   let {
     showShadow,
@@ -76,7 +76,7 @@ const StyledTimePickerContainer = /*#__PURE__*/styled.div.withConfig({
   return showShadow && !isControllerOnly ? "\n  box-shadow: 0 6px 20px 0 rgb(0 0 0 / 24%), 0 8px 17px 0 rgb(0 0 0 / 19%);\n  " : '';
 });
 const StyledTimePickerHead = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1nsw31l-3"
+  componentId: "sc-u44anw-3"
 })(["width:100%;grid-area:TimePickerHead;justify-content:center;align-items:center;background:", ";"], _ref9 => {
   let {
     theme
@@ -84,7 +84,7 @@ const StyledTimePickerHead = /*#__PURE__*/styled(Grid).withConfig({
   return theme.colors.neutral['050'];
 });
 const StyledTimePickerWheelsLegend = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1nsw31l-4"
+  componentId: "sc-u44anw-4"
 })(["width:100%;height:100;grid-area:TimePickerWheelsLegend;display:grid;grid-template-columns:", " ", " ", ";align-items:center;justify-content:center;text-align:center;background:", ";"], _ref10 => {
   let {
     theme
@@ -107,7 +107,7 @@ const StyledTimePickerWheelsLegend = /*#__PURE__*/styled.div.withConfig({
   return theme.colors.neutral['050'];
 });
 const StyledTimePickerWheelWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1nsw31l-5"
+  componentId: "sc-u44anw-5"
 })(["width:100%;background:", ";grid-area:VerticalWheelWrapper;display:grid;grid-template-columns:", " ", " ", ";grid-template-rows:100%;& ul:not(:last-child){position:relative;&:after{content:'';position:absolute;left:100%;top:5%;height:90%;width:1px;background:", ";}}"], _ref14 => {
   let {
     theme
@@ -135,7 +135,7 @@ const StyledTimePickerWheelWrapper = /*#__PURE__*/styled.div.withConfig({
   return theme.colors.neutral[200];
 });
 const StyledTimeBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-1nsw31l-6"
+  componentId: "sc-u44anw-6"
 })(["position:relative;height:", ";width:", ";border-radius:50%;&:hover{background-color:", ";}color:", ";", " ", " ", ";"], _ref19 => {
   let {
     theme
@@ -166,10 +166,10 @@ const StyledTimeBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
   return selected ? css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-weight: ", ";\n    background-color ", ";\n    "])), theme.fontWeights.semibold, isDisabled ? theme.colors.danger[900] : theme.colors.brand[700]) : "";
 });
 const StyledWheelListItem = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1nsw31l-7"
+  componentId: "sc-u44anw-7"
 })(["margin:auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;position:relative;"]);
 const StyledWheelChangeTimeBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-1nsw31l-8"
+  componentId: "sc-u44anw-8"
 })(["height:", ";width:", ";min-width:", ";border-radius:50%;"], _ref24 => {
   let {
     theme
@@ -187,7 +187,7 @@ const StyledWheelChangeTimeBtn = /*#__PURE__*/styled(DSButtonV2).withConfig({
   return theme.space.s;
 });
 const TimeWheelFooterMessage = /*#__PURE__*/styled.footer.withConfig({
-  componentId: "sc-1nsw31l-9"
+  componentId: "sc-u44anw-9"
 })(["border-top:solid 1px ", ";margin:0 ", ";padding:", " 0;color:", ";font-style:italic;font-weight:", ";font-size:", ";text-align:right;"], _ref27 => {
   let {
     theme

package/esm/{controlled-date-time-picker → date-time-picker}/parts/Styleds.js

@@ -4,16 +4,16 @@ import { DSButtonV2 } from '@elliemae/ds-button';
 
 /* eslint-disable max-lines */
 const ResettedInput = /*#__PURE__*/styled.input.withConfig({
-  componentId: "sc-1t4k08s-0"
+  componentId: "sc-2wbvze-0"
 })(["border:none;box-shadow:none;background:none;text-align:center;height:100%;display:flex;align-items:center;:focus{outline:none;}padding-top:2px;"]);
 const StyledSeparator = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1t4k08s-1"
+  componentId: "sc-2wbvze-1"
 })(["padding-top:2px;margin:auto;"]);
 const StyledColonSeparator = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1t4k08s-2"
+  componentId: "sc-2wbvze-2"
 })(["padding-bottom:1px;margin:auto;"]);
 const Styled2DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
-  componentId: "sc-1t4k08s-3"
+  componentId: "sc-2wbvze-3"
 })(["width:100%;height:100%;", ""], _ref => {
   let {
     disabled
@@ -21,7 +21,7 @@ const Styled2DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
   return disabled ? "color: #616b7f;" : "";
 });
 const StyledMin4DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
-  componentId: "sc-1t4k08s-4"
+  componentId: "sc-2wbvze-4"
 })(["width:100%;height:100%;", ""], _ref2 => {
   let {
     disabled
@@ -29,7 +29,7 @@ const StyledMin4DigitsInput = /*#__PURE__*/styled(ResettedInput).withConfig({
   return disabled ? "color: #616b7f;" : "";
 });
 const StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1t4k08s-5"
+  componentId: "sc-2wbvze-5"
 })(["width:max-content;align-items:center;", " border-color:", ";border-radius:2px;padding-left:", ";padding-right:", ";position:relative;", ""], _ref3 => {
   let {
     isControllerOnly
@@ -62,13 +62,13 @@ const StyledInputsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   return disabled ? "background-color: ".concat(theme.colors.neutral[100], ";") : "";
 });
 const StyledDateInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1t4k08s-6"
+  componentId: "sc-2wbvze-6"
 })(["display:grid;grid-template-columns:24px min-content 24px min-content 48px;grid-template-rows:min-content;padding:6px 0;gap:0px 0px;align-items:center;input,p{margin:0;}"]);
 const StyledTimeInputsWrapperGrid = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1t4k08s-7"
+  componentId: "sc-2wbvze-7"
 })(["display:grid;grid-template-columns:24px min-content 24px min-content 24px min-content 24px;grid-template-rows:min-content;padding:6px 0;gap:0px 0px;align-items:center;input,p{margin:0;}"]);
 const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1t4k08s-8"
+  componentId: "sc-2wbvze-8"
 })(["position:relative;", ":before{content:'';position:absolute;top:0px;left:-1px;width:100%;height:100%;border-radius:2px;z-index:-1;", "}"], _ref8 => {
   let {
     isControllerOnly
@@ -83,7 +83,7 @@ const StyledPickersIconsWrapperGrid = /*#__PURE__*/styled(Grid).withConfig({
   return isControllerOnly ? "" : "\n    border-left: 1px solid ".concat(hasError ? theme.colors.danger[900] : theme.colors.neutral[200], "\n    ");
 });
 const StyledFocusWithIn = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1t4k08s-9"
+  componentId: "sc-2wbvze-9"
 })(["position:relative;&:focus-within{&:after{display:block;content:' ';position:absolute;top:-5px;left:-2px;width:calc(100% + 4px);height:calc(100% + 10px);border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], _ref10 => {
   let {
     theme
@@ -91,7 +91,7 @@ const StyledFocusWithIn = /*#__PURE__*/styled(Grid).withConfig({
   return theme.colors.brand[700];
 });
 const StyledClearButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-1t4k08s-10"
+  componentId: "sc-2wbvze-10"
 })(["height:26px;position:relative;visibility:", ";"], _ref11 => {
   let {
     shouldDisplay

package/esm/index.js

@@ -1,18 +1,21 @@
-export { DSAutocomplete, DSAutocompleteWithSchema } from './controlled-autocomplete/Autocomplete.js';
-export { DSControlledCheckbox, DSControlledCheckboxWithSchema } from './controlled-checkbox/ControlledCheckbox.js';
-export { DSComboBox, DSComboBoxWithSchema } from './controlled-combobox/ComboBox.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 { UsePhoneMaskWithSchema, usePhoneMask } from './controlled-mask-hook/hooks/usePhoneMask.js';
-export { DSInputText, DSInputTextWithSchema } from './controlled-text-input/DSInputText.js';
-export { DSInputTextDataTestIds } from './controlled-text-input/exported-related/data-test-ids.js';
-export { DSInputTextName, DSInputTextSlots } from './controlled-text-input/exported-related/theming.js';
-export { DSControlledToggle, DSControlledToggleWithSchema } from './controlled-toggle/ControlledToggle.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,158 @@
+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;
+  let isNegative = false;
+  let finalPrefix = ''; // Work with digits and dots only
+
+  let maskedValue = rawValue.split('').filter((char, idx) => {
+    const validChar = char >= '0' && char <= '9' || char === '.' && dotIdx === -1 && idx > prefix.length + (isNegative ? 1 : 0) && decimalPlaces || char === '-' && (idx === 0 || prefix.length && idx === 1 && !isNegative) && allowNegative; // Allow first dot only
+
+    if (char === '.' && validChar) dotIdx = idx;
+
+    if (char === '-' && validChar) {
+      isNegative = true;
+      finalPrefix += '-';
+      return false;
+    }
+
+    return validChar;
+  });
+  if (prefix) 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)) {
+    maskedValue = [...integer, ...decimal];
+  } else {
+    // If decimal is required we add a dot after integer if exists
+    maskedValue = decimalRequired && integer.length ? [...integer, '.'] : integer;
+  }
+
+  if (lastKeyCode === 'Backspace' && maskedValue.length === 0) {
+    finalPrefix = '';
+  } // SET REAL CURSOR POSITION AFTER ADDING SIMBOLS
+
+
+  let maskedPos = 0;
+
+  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 {
+      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('.', ''));
+    }
+
+    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], ['-', 13]];
+
+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/{controlled-mask-hook/hooks/usePhoneMask.js → mask-hook/hooks/useSSNMask.js}

@@ -10,21 +10,21 @@ import { getPartialMaskedPos } from '../utils/getPartialMaskedPos.js';
 import { setCursorPosition } from '../utils/setCursorPosition.js';
 import { DSMaskHookPropsTypes, DSMaskHookDefaultProps } from '../react-desc-prop-types.js';
 
-const phoneSpecialChars = [['(', 0], [') ', 4], ['-', 9]];
+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 10 digits
+  while (maskedValue.length && maskedValue[0] === '0') maskedValue.splice(0, 1); // We only consider first 9 digits
 
 
-  maskedValue = maskedValue.slice(0, 10);
+  maskedValue = maskedValue.slice(0, 9);
   const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);
-  return addSpecialCharacters(maskedValue, phoneSpecialChars, maskedPos, lastKeyCode);
+  return addSpecialCharacters(maskedValue, ssnSpecialChars, maskedPos, lastKeyCode);
 };
 
-const usePhoneMask = props => {
+const useSSNMask = props => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes);
   const {
@@ -61,7 +61,7 @@ const usePhoneMask = props => {
     onChange
   };
 };
-const UsePhoneMaskWithSchema = describe(usePhoneMask);
-UsePhoneMaskWithSchema.propTypes = DSMaskHookPropsTypes;
+const UseSSNMaskWithSchema = describe(useSSNMask);
+UseSSNMaskWithSchema.propTypes = DSMaskHookPropsTypes;
 
-export { UsePhoneMaskWithSchema, usePhoneMask };
+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';