@elliemae/ds-form-helpers-mask-hooks 3.16.0-next.2 → 3.16.0-next.4

package/dist/cjs/hooks/useNumberMask.js

@@ -31,6 +31,7 @@ __export(useNumberMask_exports, {
 module.exports = __toCommonJS(useNumberMask_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_utils = require("../utils");
 var import_react_desc_prop_types = require("../react-desc-prop-types");
@@ -84,8 +85,8 @@ const conformValue = (rawValue, cursorPos, lastKeyCode, opts) => {
   return [maskedValueString, maskedPos];
 };
 const useNumberMask = (props) => {
-  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.DSMaskNumberHookDefaultProps);
-  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSMaskNumberHookPropsTypes, "useNumberMask");
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.DSMaskNumberHookDefaultProps);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSMaskNumberHookPropsTypes, "useNumberMask");
   const {
     valueSetter,
     onChange: userOnChange,
@@ -160,6 +161,6 @@ const getNumberMaskedValue = (value, opts) => {
   return maskedValue;
 };
 useNumberMask.displayName = "useNumberMask";
-const UseNumberMaskWithSchema = (0, import_ds_utilities.describe)(useNumberMask);
+const UseNumberMaskWithSchema = (0, import_ds_props_helpers.describe)(useNumberMask);
 UseNumberMaskWithSchema.propTypes = import_react_desc_prop_types.DSMaskNumberHookPropsTypes;
 //# sourceMappingURL=useNumberMask.js.map

package/dist/cjs/hooks/useNumberMask.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useNumberMask.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-params */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useCallbackAfterRender,\n} from '@elliemae/ds-utilities';\nimport { setCursorPosition } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskNumberHookDefaultProps, DSMaskNumberHookPropsTypes } from '../react-desc-prop-types';\n\nconst addThousandsSeparator = (n: string, separator: string) => n.replace(/\\B(?=(\\d{3})+(?!\\d))/g, separator);\n\nconst conformValue = (\n  rawValue: string,\n  cursorPos: number,\n  lastKeyCode: string,\n  opts: DSMaskT.NumberHookArgs,\n): [string, number] => {\n  const { includeThousandsSeparator, allowNegative, prefix, suffix, decimalPlaces, decimalRequired } = opts;\n  const THOUSANDSSEPARATOR = ',';\n\n  let dotIdx = -1;\n  // allow minus sign before and after the preffix\n  let finalPrefix = [prefix.length, 0].includes(rawValue.indexOf('-')) && allowNegative ? '-' : '';\n\n  let maskedValue = String(rawValue).split('').filter((char, idx) => {\n    // we take only the first dot\n    const validChar = (char >= '0' && char <= '9') || (char === '.' && dotIdx === -1 && decimalPlaces);\n    if (char === '.' && validChar) dotIdx = idx;\n    return validChar;\n  });\n\n  if (prefix && maskedValue.length) finalPrefix += prefix;\n\n  // REMOVE FOLLOWING ZEROS IN INTEGER PART AFTER LEADER ZERO NUMBER\n  while (maskedValue.length >= 2 && maskedValue[0] === '0' && maskedValue[1] !== '.') {\n    maskedValue = maskedValue.splice(1);\n  }\n  dotIdx = maskedValue.findIndex((char) => char === '.');\n\n  let integer = maskedValue.slice(0, dotIdx !== -1 ? dotIdx : maskedValue.length);\n  const decimal = maskedValue.slice(dotIdx, dotIdx + decimalPlaces + 1);\n  // ADDING THOUSANDS SEPARATOR\n  if (includeThousandsSeparator) {\n    integer = addThousandsSeparator(integer.join(''), THOUSANDSSEPARATOR).split('');\n  }\n\n  // MERGIN INT AND DECIMAL IF NECCESSARY\n  if (dotIdx !== -1 && !(lastKeyCode === 'Backspace' && decimal.length === 1)) {\n    if (integer.length) {\n      maskedValue = [...integer, ...decimal];\n    } else {\n      // if theres no integer add a zero to the left of the dot to cover .23 => 0.23 case\n      maskedValue = ['0', ...decimal];\n    }\n  } else {\n    // If decimal is required we add a dot after integer if exists\n    maskedValue = decimalRequired && integer.length ? [...integer, '.'] : integer;\n  }\n\n  // remove orphans prefix for example \"-$\"\n  if (lastKeyCode === 'Backspace' && maskedValue.length === 0) {\n    finalPrefix = '';\n  }\n\n  // SET REAL CURSOR POSITION AFTER ADDING DOT and COMMAS SEPARATORS\n  let maskedPos = 0;\n\n  // 0 leading case we move the cursor to continue typing\n  if (maskedValue[maskedPos] === '0' && cursorPos === 1 + prefix.length) maskedPos += 1;\n\n  for (let i = 0; i < cursorPos; i += 1) {\n    if (maskedValue[maskedPos] === THOUSANDSSEPARATOR) maskedPos += 1;\n    if (maskedValue[maskedPos] === rawValue[i]) maskedPos += 1;\n  }\n\n  maskedPos += finalPrefix.length;\n\n  const finalSuffix = maskedValue.length ? suffix : '';\n\n  const maskedValueString = finalPrefix + maskedValue.join('') + finalSuffix;\n  return [maskedValueString, maskedPos];\n};\n\nexport const useNumberMask: DSMaskT.NumberHook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskNumberHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskNumberHookPropsTypes, 'useNumberMask');\n\n  const {\n    valueSetter,\n    onChange: userOnChange,\n    onKeyDown: userOnKeyDown,\n    onBlur: userOnBlur,\n    ...opts\n  } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const maskedValue = e.target.value;\n      const dotIdx = maskedValue.indexOf('.');\n      const minusIndex = maskedValue.indexOf('-');\n\n      const { decimalRequired, decimalPlaces, suffix } = opts;\n\n      const suffixIndex = suffix.length ? maskedValue.indexOf(suffix) : -1;\n\n      if (decimalRequired) {\n        if (dotIdx > -1) {\n          const decimal = maskedValue.slice(dotIdx + 1, suffix.length ? -suffix.length : maskedValue.length);\n\n          let zerosRest = '';\n          while (decimal.length + zerosRest.length !== decimalPlaces) {\n            zerosRest += '0';\n          }\n\n          valueSetter((suffix.length ? maskedValue.slice(0, suffixIndex) : maskedValue) + zerosRest + suffix);\n        }\n      } else if (maskedValue.length - suffix.length - 1 === dotIdx) {\n        // removing orphans dots\n        valueSetter(maskedValue.replace('.', ''));\n      } else if (maskedValue.length - 1 === minusIndex) {\n        // removing orphans minus\n        valueSetter(maskedValue.replace('-', ''));\n      }\n      if (userOnBlur) userOnBlur(e);\n    },\n    [userOnBlur, valueSetter, opts],\n  );\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(\n        e.target.value,\n        e.target.selectionEnd ?? 0,\n        lastKeyCode.current,\n        opts as DSMaskT.NumberHookArgs,\n      );\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n        if (mask === prevMask) setKey((key) => key + 1);\n\n        return mask;\n      });\n      if (userOnChange) userOnChange(e, mask);\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, userOnChange, opts],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n    onBlur,\n  };\n};\n\nexport const getNumberMaskedValue = (value: string, opts: DSMaskT.NumberHookArgs) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '', opts);\n  return maskedValue;\n};\n\nuseNumberMask.displayName = 'useNumberMask';\nexport const UseNumberMaskWithSchema = describe(useNumberMask);\nUseNumberMaskWithSchema.propTypes = DSMaskNumberHookPropsTypes;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-params */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { setCursorPosition } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskNumberHookDefaultProps, DSMaskNumberHookPropsTypes } from '../react-desc-prop-types';\n\nconst addThousandsSeparator = (n: string, separator: string) => n.replace(/\\B(?=(\\d{3})+(?!\\d))/g, separator);\n\nconst conformValue = (\n  rawValue: string,\n  cursorPos: number,\n  lastKeyCode: string,\n  opts: DSMaskT.NumberHookArgs,\n): [string, number] => {\n  const { includeThousandsSeparator, allowNegative, prefix, suffix, decimalPlaces, decimalRequired } = opts;\n  const THOUSANDSSEPARATOR = ',';\n\n  let dotIdx = -1;\n  // allow minus sign before and after the preffix\n  let finalPrefix = [prefix.length, 0].includes(rawValue.indexOf('-')) && allowNegative ? '-' : '';\n\n  let maskedValue = String(rawValue)\n    .split('')\n    .filter((char, idx) => {\n      // we take only the first dot\n      const validChar = (char >= '0' && char <= '9') || (char === '.' && dotIdx === -1 && decimalPlaces);\n      if (char === '.' && validChar) dotIdx = idx;\n      return validChar;\n    });\n\n  if (prefix && maskedValue.length) finalPrefix += prefix;\n\n  // REMOVE FOLLOWING ZEROS IN INTEGER PART AFTER LEADER ZERO NUMBER\n  while (maskedValue.length >= 2 && maskedValue[0] === '0' && maskedValue[1] !== '.') {\n    maskedValue = maskedValue.splice(1);\n  }\n  dotIdx = maskedValue.findIndex((char) => char === '.');\n\n  let integer = maskedValue.slice(0, dotIdx !== -1 ? dotIdx : maskedValue.length);\n  const decimal = maskedValue.slice(dotIdx, dotIdx + decimalPlaces + 1);\n  // ADDING THOUSANDS SEPARATOR\n  if (includeThousandsSeparator) {\n    integer = addThousandsSeparator(integer.join(''), THOUSANDSSEPARATOR).split('');\n  }\n\n  // MERGIN INT AND DECIMAL IF NECCESSARY\n  if (dotIdx !== -1 && !(lastKeyCode === 'Backspace' && decimal.length === 1)) {\n    if (integer.length) {\n      maskedValue = [...integer, ...decimal];\n    } else {\n      // if theres no integer add a zero to the left of the dot to cover .23 => 0.23 case\n      maskedValue = ['0', ...decimal];\n    }\n  } else {\n    // If decimal is required we add a dot after integer if exists\n    maskedValue = decimalRequired && integer.length ? [...integer, '.'] : integer;\n  }\n\n  // remove orphans prefix for example \"-$\"\n  if (lastKeyCode === 'Backspace' && maskedValue.length === 0) {\n    finalPrefix = '';\n  }\n\n  // SET REAL CURSOR POSITION AFTER ADDING DOT and COMMAS SEPARATORS\n  let maskedPos = 0;\n\n  // 0 leading case we move the cursor to continue typing\n  if (maskedValue[maskedPos] === '0' && cursorPos === 1 + prefix.length) maskedPos += 1;\n\n  for (let i = 0; i < cursorPos; i += 1) {\n    if (maskedValue[maskedPos] === THOUSANDSSEPARATOR) maskedPos += 1;\n    if (maskedValue[maskedPos] === rawValue[i]) maskedPos += 1;\n  }\n\n  maskedPos += finalPrefix.length;\n\n  const finalSuffix = maskedValue.length ? suffix : '';\n\n  const maskedValueString = finalPrefix + maskedValue.join('') + finalSuffix;\n  return [maskedValueString, maskedPos];\n};\n\nexport const useNumberMask: DSMaskT.NumberHook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskNumberHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskNumberHookPropsTypes, 'useNumberMask');\n\n  const {\n    valueSetter,\n    onChange: userOnChange,\n    onKeyDown: userOnKeyDown,\n    onBlur: userOnBlur,\n    ...opts\n  } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const maskedValue = e.target.value;\n      const dotIdx = maskedValue.indexOf('.');\n      const minusIndex = maskedValue.indexOf('-');\n\n      const { decimalRequired, decimalPlaces, suffix } = opts;\n\n      const suffixIndex = suffix.length ? maskedValue.indexOf(suffix) : -1;\n\n      if (decimalRequired) {\n        if (dotIdx > -1) {\n          const decimal = maskedValue.slice(dotIdx + 1, suffix.length ? -suffix.length : maskedValue.length);\n\n          let zerosRest = '';\n          while (decimal.length + zerosRest.length !== decimalPlaces) {\n            zerosRest += '0';\n          }\n\n          valueSetter((suffix.length ? maskedValue.slice(0, suffixIndex) : maskedValue) + zerosRest + suffix);\n        }\n      } else if (maskedValue.length - suffix.length - 1 === dotIdx) {\n        // removing orphans dots\n        valueSetter(maskedValue.replace('.', ''));\n      } else if (maskedValue.length - 1 === minusIndex) {\n        // removing orphans minus\n        valueSetter(maskedValue.replace('-', ''));\n      }\n      if (userOnBlur) userOnBlur(e);\n    },\n    [userOnBlur, valueSetter, opts],\n  );\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(\n        e.target.value,\n        e.target.selectionEnd ?? 0,\n        lastKeyCode.current,\n        opts as DSMaskT.NumberHookArgs,\n      );\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n        if (mask === prevMask) setKey((key) => key + 1);\n\n        return mask;\n      });\n      if (userOnChange) userOnChange(e, mask);\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, userOnChange, opts],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n    onBlur,\n  };\n};\n\nexport const getNumberMaskedValue = (value: string, opts: DSMaskT.NumberHookArgs) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '', opts);\n  return maskedValue;\n};\n\nuseNumberMask.displayName = 'useNumberMask';\nexport const UseNumberMaskWithSchema = describe(useNumberMask);\nUseNumberMaskWithSchema.propTypes = DSMaskNumberHookPropsTypes;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/hooks/usePhoneMask.js

@@ -31,6 +31,7 @@ __export(usePhoneMask_exports, {
 module.exports = __toCommonJS(usePhoneMask_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_utils = require("../utils");
 var import_react_desc_prop_types = require("../react-desc-prop-types");
@@ -65,8 +66,8 @@ const conformValue = (rawValue, cursorPos, lastKeyCode, opts) => {
   );
 };
 const usePhoneMask = (props) => {
-  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.DSMaskPhoneHookDefaultProps);
-  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSMaskPhoneHookPropsTypes, "usePhoneMask");
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.DSMaskPhoneHookDefaultProps);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSMaskPhoneHookPropsTypes, "usePhoneMask");
   const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown, onBlur, ...opts } = propsWithDefault;
   const lastKeyCode = (0, import_react.useRef)("Unidentified");
   const scheduleAfterRender = (0, import_ds_utilities.useCallbackAfterRender)(true);
@@ -103,6 +104,6 @@ const getPhoneMaskedValue = (value, opts) => {
   return maskedValue;
 };
 usePhoneMask.displayName = "usePhoneMask";
-const UsePhoneMaskWithSchema = (0, import_ds_utilities.describe)(usePhoneMask);
+const UsePhoneMaskWithSchema = (0, import_ds_props_helpers.describe)(usePhoneMask);
 UsePhoneMaskWithSchema.propTypes = import_react_desc_prop_types.DSMaskPhoneHookPropsTypes;
 //# sourceMappingURL=usePhoneMask.js.map

package/dist/cjs/hooks/usePhoneMask.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/usePhoneMask.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-params */\nimport type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useCallbackAfterRender,\n} from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskPhoneHookPropsTypes, DSMaskPhoneHookDefaultProps } from '../react-desc-prop-types';\n\nconst phoneSpecialChars: [string, number][] = [\n  ['(', 0],\n  [') ', 4],\n  [' - ', 9],\n];\n\nconst internationalPhoneSpecialChars: [string, number][] = [\n  ['+1 (', 0],\n  [') ', 7],\n  [' - ', 12],\n];\n\nconst conformValue = (\n  rawValue: string,\n  cursorPos: number,\n  lastKeyCode: string,\n  opts: Partial<DSMaskT.PhoneHookArgs>,\n) => {\n  const characters = String(rawValue).split('');\n  // Work with digits only\n  const { isInternational } = opts;\n  let maskedValue = characters.filter((char, idx, array) => {\n    if (isInternational && idx === 1 && char === '1' && array[0] === '+') {\n      return false;\n    }\n    return char >= '0' && char <= '9';\n  });\n  // We can't have zeros at the start of the array\n  while (maskedValue.length && maskedValue[0] === '0') maskedValue.splice(0, 1);\n\n  // We only consider first 10 digits\n  maskedValue = maskedValue.slice(0, 10);\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n\n  return addSpecialCharacters(\n    maskedValue,\n    isInternational ? internationalPhoneSpecialChars : phoneSpecialChars,\n    maskedPos,\n    lastKeyCode,\n  );\n};\n\nexport const usePhoneMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskPhoneHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskPhoneHookPropsTypes, 'usePhoneMask');\n  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown, onBlur, ...opts } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current, opts);\n\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n        if (mask === prevMask) setKey((key) => key + 1);\n        return mask;\n      });\n\n      if (userOnChange) userOnChange(e, mask);\n\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, opts, userOnChange],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n  };\n};\n\nexport const getPhoneMaskedValue = (value: string, opts: Partial<DSMaskT.PhoneHookArgs>) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '', opts);\n  return maskedValue;\n};\n\nusePhoneMask.displayName = 'usePhoneMask';\nexport const UsePhoneMaskWithSchema = describe(usePhoneMask);\nUsePhoneMaskWithSchema.propTypes = DSMaskPhoneHookPropsTypes;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA8C;AAC9C,0BAKO;AACP,mBAA6E;AAE7E,mCAAuE;AAEvE,MAAM,oBAAwC;AAAA,EAC5C,CAAC,KAAK,CAAC;AAAA,EACP,CAAC,MAAM,CAAC;AAAA,EACR,CAAC,OAAO,CAAC;AACX;AAEA,MAAM,iCAAqD;AAAA,EACzD,CAAC,QAAQ,CAAC;AAAA,EACV,CAAC,MAAM,CAAC;AAAA,EACR,CAAC,OAAO,EAAE;AACZ;AAEA,MAAM,eAAe,CACnB,UACA,WACA,aACA,SACG;AACH,QAAM,aAAa,OAAO,QAAQ,EAAE,MAAM,EAAE;AAE5C,QAAM,EAAE,gBAAgB,IAAI;AAC5B,MAAI,cAAc,WAAW,OAAO,CAAC,MAAM,KAAK,UAAU;AACxD,QAAI,mBAAmB,QAAQ,KAAK,SAAS,OAAO,MAAM,OAAO,KAAK;AACpE,aAAO;AAAA,IACT;AACA,WAAO,QAAQ,OAAO,QAAQ;AAAA,EAChC,CAAC;AAED,SAAO,YAAY,UAAU,YAAY,OAAO;AAAK,gBAAY,OAAO,GAAG,CAAC;AAG5E,gBAAc,YAAY,MAAM,GAAG,EAAE;AAErC,QAAM,gBAAY,kCAAoB,UAAU,aAAa,SAAS;AAEtE,aAAO;AAAA,IACL;AAAA,IACA,kBAAkB,iCAAiC;AAAA,IACnD;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,eAA6B,CAAC,UAAU;AACnD,QAAM,uBAAmB,kDAA6B,OAAO,wDAA2B;AACxF,0DAA+B,kBAAkB,wDAA2B,cAAc;AAC1F,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,eAAe,WAAW,KAAK,IAAI;AAE3F,QAAM,kBAAc,qBAAO,cAAc;AAEzC,QAAM,0BAAsB,4CAAuB,IAAI;AAOvD,QAAM,CAAC,EAAE,MAAM,QAAI,uBAAS,CAAC;AAE7B,QAAM,gBAA0D;AAAA,IAC9D,CAAC,MAAM;AACL,kBAAY,UAAU,EAAE;AACxB,UAAI;AAAe,sBAAc,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,eAAuD;AAAA,IAC3D,CAAC,MAAM;AACL,YAAM,CAAC,MAAM,SAAS,IAAI,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY,SAAS,IAAI;AAE5G,kBAAY,CAAC,aAAa;AAExB,YAAI,SAAS;AAAU,iBAAO,CAAC,QAAQ,MAAM,CAAC;AAC9C,eAAO;AAAA,MACT,CAAC;AAED,UAAI;AAAc,qBAAa,GAAG,IAAI;AAEtC,0BAAoB,UAAM,gCAAkB,EAAE,QAAQ,SAAS,CAAC;AAAA,IAClE;AAAA,IACA,CAAC,aAAa,qBAAqB,MAAM,YAAY;AAAA,EACvD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,sBAAsB,CAAC,OAAe,SAAyC;AAC1F,QAAM,CAAC,WAAW,IAAI,aAAa,OAAO,MAAM,SAAS,GAAG,IAAI,IAAI;AACpE,SAAO;AACT;AAEA,aAAa,cAAc;AACpB,MAAM,6BAAyB,8BAAS,YAAY;AAC3D,uBAAuB,YAAY;",
+  "sourcesContent": ["/* eslint-disable max-params */\nimport type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskPhoneHookPropsTypes, DSMaskPhoneHookDefaultProps } from '../react-desc-prop-types';\n\nconst phoneSpecialChars: [string, number][] = [\n  ['(', 0],\n  [') ', 4],\n  [' - ', 9],\n];\n\nconst internationalPhoneSpecialChars: [string, number][] = [\n  ['+1 (', 0],\n  [') ', 7],\n  [' - ', 12],\n];\n\nconst conformValue = (\n  rawValue: string,\n  cursorPos: number,\n  lastKeyCode: string,\n  opts: Partial<DSMaskT.PhoneHookArgs>,\n) => {\n  const characters = String(rawValue).split('');\n  // Work with digits only\n  const { isInternational } = opts;\n  let maskedValue = characters.filter((char, idx, array) => {\n    if (isInternational && idx === 1 && char === '1' && array[0] === '+') {\n      return false;\n    }\n    return char >= '0' && char <= '9';\n  });\n  // We can't have zeros at the start of the array\n  while (maskedValue.length && maskedValue[0] === '0') maskedValue.splice(0, 1);\n\n  // We only consider first 10 digits\n  maskedValue = maskedValue.slice(0, 10);\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n\n  return addSpecialCharacters(\n    maskedValue,\n    isInternational ? internationalPhoneSpecialChars : phoneSpecialChars,\n    maskedPos,\n    lastKeyCode,\n  );\n};\n\nexport const usePhoneMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskPhoneHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskPhoneHookPropsTypes, 'usePhoneMask');\n  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown, onBlur, ...opts } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current, opts);\n\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n        if (mask === prevMask) setKey((key) => key + 1);\n        return mask;\n      });\n\n      if (userOnChange) userOnChange(e, mask);\n\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, opts, userOnChange],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n  };\n};\n\nexport const getPhoneMaskedValue = (value: string, opts: Partial<DSMaskT.PhoneHookArgs>) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '', opts);\n  return maskedValue;\n};\n\nusePhoneMask.displayName = 'usePhoneMask';\nexport const UsePhoneMaskWithSchema = describe(usePhoneMask);\nUsePhoneMaskWithSchema.propTypes = DSMaskPhoneHookPropsTypes;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA8C;AAC9C,8BAAuF;AACvF,0BAAuC;AACvC,mBAA6E;AAE7E,mCAAuE;AAEvE,MAAM,oBAAwC;AAAA,EAC5C,CAAC,KAAK,CAAC;AAAA,EACP,CAAC,MAAM,CAAC;AAAA,EACR,CAAC,OAAO,CAAC;AACX;AAEA,MAAM,iCAAqD;AAAA,EACzD,CAAC,QAAQ,CAAC;AAAA,EACV,CAAC,MAAM,CAAC;AAAA,EACR,CAAC,OAAO,EAAE;AACZ;AAEA,MAAM,eAAe,CACnB,UACA,WACA,aACA,SACG;AACH,QAAM,aAAa,OAAO,QAAQ,EAAE,MAAM,EAAE;AAE5C,QAAM,EAAE,gBAAgB,IAAI;AAC5B,MAAI,cAAc,WAAW,OAAO,CAAC,MAAM,KAAK,UAAU;AACxD,QAAI,mBAAmB,QAAQ,KAAK,SAAS,OAAO,MAAM,OAAO,KAAK;AACpE,aAAO;AAAA,IACT;AACA,WAAO,QAAQ,OAAO,QAAQ;AAAA,EAChC,CAAC;AAED,SAAO,YAAY,UAAU,YAAY,OAAO;AAAK,gBAAY,OAAO,GAAG,CAAC;AAG5E,gBAAc,YAAY,MAAM,GAAG,EAAE;AAErC,QAAM,gBAAY,kCAAoB,UAAU,aAAa,SAAS;AAEtE,aAAO;AAAA,IACL;AAAA,IACA,kBAAkB,iCAAiC;AAAA,IACnD;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,eAA6B,CAAC,UAAU;AACnD,QAAM,uBAAmB,sDAA6B,OAAO,wDAA2B;AACxF,8DAA+B,kBAAkB,wDAA2B,cAAc;AAC1F,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,eAAe,WAAW,KAAK,IAAI;AAE3F,QAAM,kBAAc,qBAAO,cAAc;AAEzC,QAAM,0BAAsB,4CAAuB,IAAI;AAOvD,QAAM,CAAC,EAAE,MAAM,QAAI,uBAAS,CAAC;AAE7B,QAAM,gBAA0D;AAAA,IAC9D,CAAC,MAAM;AACL,kBAAY,UAAU,EAAE;AACxB,UAAI;AAAe,sBAAc,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,eAAuD;AAAA,IAC3D,CAAC,MAAM;AACL,YAAM,CAAC,MAAM,SAAS,IAAI,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY,SAAS,IAAI;AAE5G,kBAAY,CAAC,aAAa;AAExB,YAAI,SAAS;AAAU,iBAAO,CAAC,QAAQ,MAAM,CAAC;AAC9C,eAAO;AAAA,MACT,CAAC;AAED,UAAI;AAAc,qBAAa,GAAG,IAAI;AAEtC,0BAAoB,UAAM,gCAAkB,EAAE,QAAQ,SAAS,CAAC;AAAA,IAClE;AAAA,IACA,CAAC,aAAa,qBAAqB,MAAM,YAAY;AAAA,EACvD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,sBAAsB,CAAC,OAAe,SAAyC;AAC1F,QAAM,CAAC,WAAW,IAAI,aAAa,OAAO,MAAM,SAAS,GAAG,IAAI,IAAI;AACpE,SAAO;AACT;AAEA,aAAa,cAAc;AACpB,MAAM,6BAAyB,kCAAS,YAAY;AAC3D,uBAAuB,YAAY;",
   "names": []
 }

package/dist/cjs/hooks/useRegExpMask.js

@@ -30,6 +30,7 @@ __export(useRegExpMask_exports, {
 module.exports = __toCommonJS(useRegExpMask_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_utils = require("../utils");
 var import_react_desc_prop_types = require("../react-desc-prop-types");
@@ -80,8 +81,8 @@ const conformValue = (rawValue, cursorPos, lastKeyCode, regExp, filledMask) => {
   return [maskWithSpecialsChars + specialCharsLeft, finalMaskedPos];
 };
 const useRegExpMask = (props) => {
-  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.DSMaskRegExpHookDefaultProps);
-  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSMaskRegExpHookPropsTypes, "useRegExpMask");
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.DSMaskRegExpHookDefaultProps);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSMaskRegExpHookPropsTypes, "useRegExpMask");
   const {
     valueSetter,
     onChange: userOnChange,
@@ -142,6 +143,6 @@ const useRegExpMask = (props) => {
   };
 };
 useRegExpMask.displayName = "useRegExpMask";
-const UseRegExpMaskWithSchema = (0, import_ds_utilities.describe)(useRegExpMask);
+const UseRegExpMaskWithSchema = (0, import_ds_props_helpers.describe)(useRegExpMask);
 UseRegExpMaskWithSchema.propTypes = import_react_desc_prop_types.DSMaskRegExpHookPropsTypes;
 //# sourceMappingURL=useRegExpMask.js.map

package/dist/cjs/hooks/useRegExpMask.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useRegExpMask.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable max-params */\nimport type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useCallbackAfterRender,\n} from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition, flatStringArray } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskRegExpHookPropsTypes, DSMaskRegExpHookDefaultProps } from '../react-desc-prop-types';\n\nconst isRegExp = (item: RegExp | string): item is RegExp => typeof item === 'object';\n\nconst conformValue = (\n  rawValue: string,\n  cursorPos: number,\n  lastKeyCode: string,\n  regExp: string[],\n  filledMask: boolean,\n) => {\n  const specialChars: [string, number][] = [];\n  const flatRegExp = flatStringArray(regExp);\n  const rawValueArray = String(rawValue).split('');\n  let offSet = 0;\n  let charsFound = 0;\n  let specialCharsLeft = '';\n  let fullRegExpMatched = false;\n  const maskedValue: string[] = [];\n  for (let i = 0; i < flatRegExp.length; i += 1) {\n    if (isRegExp(flatRegExp[i])) {\n      specialCharsLeft = '';\n      fullRegExpMatched = false;\n      for (let j = charsFound + offSet; j < rawValueArray.length; j += 1) {\n        const match = rawValueArray[j]?.match(flatRegExp[i]);\n        if (match) {\n          maskedValue.push(match[0]);\n          charsFound += 1;\n          fullRegExpMatched = true;\n          break;\n        } else {\n          offSet += 1;\n        }\n      }\n      if (filledMask && !fullRegExpMatched) {\n        maskedValue.push('_');\n      }\n    } else {\n      specialChars.push([flatRegExp[i], i]);\n      if (rawValueArray[i + offSet] === flatRegExp[i]) charsFound += 1;\n      specialCharsLeft += flatRegExp[i];\n    }\n  }\n  if (!fullRegExpMatched) specialCharsLeft = '';\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n  const [maskWithSpecialsChars, finalMaskedPos] = addSpecialCharacters(\n    maskedValue,\n    specialChars,\n    maskedPos,\n    lastKeyCode,\n  );\n\n  return [maskWithSpecialsChars + specialCharsLeft, finalMaskedPos];\n};\n\nexport const useRegExpMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskRegExpHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskRegExpHookPropsTypes, 'useRegExpMask');\n  const {\n    valueSetter,\n    onChange: userOnChange,\n    onKeyDown: userOnKeyDown,\n    onBlur: userOnBlur,\n    regExp,\n    filledMask,\n  } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(\n        e.target.value,\n        e.target.selectionEnd ?? 0,\n        lastKeyCode.current,\n        regExp,\n        filledMask,\n      );\n\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n\n        if (mask === prevMask) setKey((key) => key + 1);\n        return mask;\n      });\n\n      if (userOnChange) userOnChange(e, mask);\n\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, userOnChange],\n  );\n  const onBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (filledMask) {\n        const maskedValue = e.target.value.split('');\n\n        const flatRegExp = flatStringArray(regExp);\n        const firstUnderscoreIdx = maskedValue.findIndex((char, idx) => char === '_' && flatRegExp[idx] !== '_');\n        if (firstUnderscoreIdx > -1) valueSetter(maskedValue.slice(0, firstUnderscoreIdx).join(''));\n      }\n\n      if (userOnBlur) userOnBlur(e);\n    },\n    [valueSetter, userOnBlur],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n    onBlur,\n  };\n};\n\nuseRegExpMask.displayName = 'useRegExpMask';\nexport const UseRegExpMaskWithSchema = describe(useRegExpMask);\nUseRegExpMaskWithSchema.propTypes = DSMaskRegExpHookPropsTypes;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable max-params */\nimport type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition, flatStringArray } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskRegExpHookPropsTypes, DSMaskRegExpHookDefaultProps } from '../react-desc-prop-types';\n\nconst isRegExp = (item: RegExp | string): item is RegExp => typeof item === 'object';\n\nconst conformValue = (\n  rawValue: string,\n  cursorPos: number,\n  lastKeyCode: string,\n  regExp: string[],\n  filledMask: boolean,\n) => {\n  const specialChars: [string, number][] = [];\n  const flatRegExp = flatStringArray(regExp);\n  const rawValueArray = String(rawValue).split('');\n  let offSet = 0;\n  let charsFound = 0;\n  let specialCharsLeft = '';\n  let fullRegExpMatched = false;\n  const maskedValue: string[] = [];\n  for (let i = 0; i < flatRegExp.length; i += 1) {\n    if (isRegExp(flatRegExp[i])) {\n      specialCharsLeft = '';\n      fullRegExpMatched = false;\n      for (let j = charsFound + offSet; j < rawValueArray.length; j += 1) {\n        const match = rawValueArray[j]?.match(flatRegExp[i]);\n        if (match) {\n          maskedValue.push(match[0]);\n          charsFound += 1;\n          fullRegExpMatched = true;\n          break;\n        } else {\n          offSet += 1;\n        }\n      }\n      if (filledMask && !fullRegExpMatched) {\n        maskedValue.push('_');\n      }\n    } else {\n      specialChars.push([flatRegExp[i], i]);\n      if (rawValueArray[i + offSet] === flatRegExp[i]) charsFound += 1;\n      specialCharsLeft += flatRegExp[i];\n    }\n  }\n  if (!fullRegExpMatched) specialCharsLeft = '';\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n  const [maskWithSpecialsChars, finalMaskedPos] = addSpecialCharacters(\n    maskedValue,\n    specialChars,\n    maskedPos,\n    lastKeyCode,\n  );\n\n  return [maskWithSpecialsChars + specialCharsLeft, finalMaskedPos];\n};\n\nexport const useRegExpMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskRegExpHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskRegExpHookPropsTypes, 'useRegExpMask');\n  const {\n    valueSetter,\n    onChange: userOnChange,\n    onKeyDown: userOnKeyDown,\n    onBlur: userOnBlur,\n    regExp,\n    filledMask,\n  } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(\n        e.target.value,\n        e.target.selectionEnd ?? 0,\n        lastKeyCode.current,\n        regExp,\n        filledMask,\n      );\n\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n\n        if (mask === prevMask) setKey((key) => key + 1);\n        return mask;\n      });\n\n      if (userOnChange) userOnChange(e, mask);\n\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, userOnChange],\n  );\n  const onBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (filledMask) {\n        const maskedValue = e.target.value.split('');\n\n        const flatRegExp = flatStringArray(regExp);\n        const firstUnderscoreIdx = maskedValue.findIndex((char, idx) => char === '_' && flatRegExp[idx] !== '_');\n        if (firstUnderscoreIdx > -1) valueSetter(maskedValue.slice(0, firstUnderscoreIdx).join(''));\n      }\n\n      if (userOnBlur) userOnBlur(e);\n    },\n    [valueSetter, userOnBlur],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n    onBlur,\n  };\n};\n\nuseRegExpMask.displayName = 'useRegExpMask';\nexport const UseRegExpMaskWithSchema = describe(useRegExpMask);\nUseRegExpMaskWithSchema.propTypes = DSMaskRegExpHookPropsTypes;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/hooks/useSSNMask.js

@@ -31,6 +31,7 @@ __export(useSSNMask_exports, {
 module.exports = __toCommonJS(useSSNMask_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_utils = require("../utils");
 var import_react_desc_prop_types = require("../react-desc-prop-types");
@@ -47,8 +48,8 @@ const conformValue = (rawValue, cursorPos, lastKeyCode) => {
   return (0, import_utils.addSpecialCharacters)(maskedValue, ssnSpecialChars, maskedPos, lastKeyCode);
 };
 const useSSNMask = (props) => {
-  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.DSMaskHookDefaultProps);
-  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSMaskHookPropsTypes, "useSSNMask");
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.DSMaskHookDefaultProps);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSMaskHookPropsTypes, "useSSNMask");
   const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;
   const lastKeyCode = (0, import_react.useRef)("Unidentified");
   const scheduleAfterRender = (0, import_ds_utilities.useCallbackAfterRender)(true);
@@ -85,6 +86,6 @@ const getSSNMaskedValue = (value) => {
   return maskedValue;
 };
 useSSNMask.displayName = "useSSNMask";
-const UseSSNMaskWithSchema = (0, import_ds_utilities.describe)(useSSNMask);
+const UseSSNMaskWithSchema = (0, import_ds_props_helpers.describe)(useSSNMask);
 UseSSNMaskWithSchema.propTypes = import_react_desc_prop_types.DSMaskHookPropsTypes;
 //# sourceMappingURL=useSSNMask.js.map

package/dist/cjs/hooks/useSSNMask.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useSSNMask.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useCallbackAfterRender,\n} from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskHookDefaultProps, DSMaskHookPropsTypes } from '../react-desc-prop-types';\n\nconst ssnSpecialChars: [string, number][] = [\n  ['-', 3],\n  ['-', 6],\n];\n\nconst conformValue = (rawValue: string, cursorPos: number, lastKeyCode: string) => {\n  // Work with digits only\n  let maskedValue = String(rawValue).split('').filter((char) => char >= '0' && char <= '9');\n\n  // We can't have zeros at the start of the array\n  while (maskedValue.length && maskedValue[0] === '0') maskedValue.splice(0, 1);\n\n  // We only consider first 9 digits\n  maskedValue = maskedValue.slice(0, 9);\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n\n  return addSpecialCharacters(maskedValue, ssnSpecialChars, maskedPos, lastKeyCode);\n};\n\nexport const useSSNMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes, 'useSSNMask');\n\n  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current);\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n        if (mask === prevMask) setKey((key) => key + 1);\n\n        return mask;\n      });\n      if (userOnChange) userOnChange(e, mask);\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, userOnChange],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n  };\n};\n\nexport const getSSNMaskedValue = (value: string) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '');\n  return maskedValue;\n};\n\nuseSSNMask.displayName = 'useSSNMask';\nexport const UseSSNMaskWithSchema = describe(useSSNMask);\nUseSSNMaskWithSchema.propTypes = DSMaskHookPropsTypes;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8C;AAC9C,0BAKO;AACP,mBAA6E;AAE7E,mCAA6D;AAE7D,MAAM,kBAAsC;AAAA,EAC1C,CAAC,KAAK,CAAC;AAAA,EACP,CAAC,KAAK,CAAC;AACT;AAEA,MAAM,eAAe,CAAC,UAAkB,WAAmB,gBAAwB;AAEjF,MAAI,cAAc,OAAO,QAAQ,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,SAAS,QAAQ,OAAO,QAAQ,GAAG;AAGxF,SAAO,YAAY,UAAU,YAAY,OAAO;AAAK,gBAAY,OAAO,GAAG,CAAC;AAG5E,gBAAc,YAAY,MAAM,GAAG,CAAC;AAEpC,QAAM,gBAAY,kCAAoB,UAAU,aAAa,SAAS;AAEtE,aAAO,mCAAqB,aAAa,iBAAiB,WAAW,WAAW;AAClF;AAEO,MAAM,aAA2B,CAAC,UAAU;AACjD,QAAM,uBAAmB,kDAA6B,OAAO,mDAAsB;AACnF,0DAA+B,kBAAkB,mDAAsB,YAAY;AAEnF,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,cAAc,IAAI;AAE1E,QAAM,kBAAc,qBAAO,cAAc;AAEzC,QAAM,0BAAsB,4CAAuB,IAAI;AAOvD,QAAM,CAAC,EAAE,MAAM,QAAI,uBAAS,CAAC;AAE7B,QAAM,gBAA0D;AAAA,IAC9D,CAAC,MAAM;AACL,kBAAY,UAAU,EAAE;AACxB,UAAI;AAAe,sBAAc,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,eAAuD;AAAA,IAC3D,CAAC,MAAM;AACL,YAAM,CAAC,MAAM,SAAS,IAAI,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY,OAAO;AACtG,kBAAY,CAAC,aAAa;AAExB,YAAI,SAAS;AAAU,iBAAO,CAAC,QAAQ,MAAM,CAAC;AAE9C,eAAO;AAAA,MACT,CAAC;AACD,UAAI;AAAc,qBAAa,GAAG,IAAI;AACtC,0BAAoB,UAAM,gCAAkB,EAAE,QAAQ,SAAS,CAAC;AAAA,IAClE;AAAA,IACA,CAAC,aAAa,qBAAqB,YAAY;AAAA,EACjD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,oBAAoB,CAAC,UAAkB;AAClD,QAAM,CAAC,WAAW,IAAI,aAAa,OAAO,MAAM,SAAS,GAAG,EAAE;AAC9D,SAAO;AACT;AAEA,WAAW,cAAc;AAClB,MAAM,2BAAuB,8BAAS,UAAU;AACvD,qBAAqB,YAAY;",
+  "sourcesContent": ["import type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskHookDefaultProps, DSMaskHookPropsTypes } from '../react-desc-prop-types';\n\nconst ssnSpecialChars: [string, number][] = [\n  ['-', 3],\n  ['-', 6],\n];\n\nconst conformValue = (rawValue: string, cursorPos: number, lastKeyCode: string) => {\n  // Work with digits only\n  let maskedValue = String(rawValue)\n    .split('')\n    .filter((char) => char >= '0' && char <= '9');\n\n  // We can't have zeros at the start of the array\n  while (maskedValue.length && maskedValue[0] === '0') maskedValue.splice(0, 1);\n\n  // We only consider first 9 digits\n  maskedValue = maskedValue.slice(0, 9);\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n\n  return addSpecialCharacters(maskedValue, ssnSpecialChars, maskedPos, lastKeyCode);\n};\n\nexport const useSSNMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes, 'useSSNMask');\n\n  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current);\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n        if (mask === prevMask) setKey((key) => key + 1);\n\n        return mask;\n      });\n      if (userOnChange) userOnChange(e, mask);\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, userOnChange],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n  };\n};\n\nexport const getSSNMaskedValue = (value: string) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '');\n  return maskedValue;\n};\n\nuseSSNMask.displayName = 'useSSNMask';\nexport const UseSSNMaskWithSchema = describe(useSSNMask);\nUseSSNMaskWithSchema.propTypes = DSMaskHookPropsTypes;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8C;AAC9C,8BAAuF;AACvF,0BAAuC;AACvC,mBAA6E;AAE7E,mCAA6D;AAE7D,MAAM,kBAAsC;AAAA,EAC1C,CAAC,KAAK,CAAC;AAAA,EACP,CAAC,KAAK,CAAC;AACT;AAEA,MAAM,eAAe,CAAC,UAAkB,WAAmB,gBAAwB;AAEjF,MAAI,cAAc,OAAO,QAAQ,EAC9B,MAAM,EAAE,EACR,OAAO,CAAC,SAAS,QAAQ,OAAO,QAAQ,GAAG;AAG9C,SAAO,YAAY,UAAU,YAAY,OAAO;AAAK,gBAAY,OAAO,GAAG,CAAC;AAG5E,gBAAc,YAAY,MAAM,GAAG,CAAC;AAEpC,QAAM,gBAAY,kCAAoB,UAAU,aAAa,SAAS;AAEtE,aAAO,mCAAqB,aAAa,iBAAiB,WAAW,WAAW;AAClF;AAEO,MAAM,aAA2B,CAAC,UAAU;AACjD,QAAM,uBAAmB,sDAA6B,OAAO,mDAAsB;AACnF,8DAA+B,kBAAkB,mDAAsB,YAAY;AAEnF,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,cAAc,IAAI;AAE1E,QAAM,kBAAc,qBAAO,cAAc;AAEzC,QAAM,0BAAsB,4CAAuB,IAAI;AAOvD,QAAM,CAAC,EAAE,MAAM,QAAI,uBAAS,CAAC;AAE7B,QAAM,gBAA0D;AAAA,IAC9D,CAAC,MAAM;AACL,kBAAY,UAAU,EAAE;AACxB,UAAI;AAAe,sBAAc,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,eAAuD;AAAA,IAC3D,CAAC,MAAM;AACL,YAAM,CAAC,MAAM,SAAS,IAAI,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY,OAAO;AACtG,kBAAY,CAAC,aAAa;AAExB,YAAI,SAAS;AAAU,iBAAO,CAAC,QAAQ,MAAM,CAAC;AAE9C,eAAO;AAAA,MACT,CAAC;AACD,UAAI;AAAc,qBAAa,GAAG,IAAI;AACtC,0BAAoB,UAAM,gCAAkB,EAAE,QAAQ,SAAS,CAAC;AAAA,IAClE;AAAA,IACA,CAAC,aAAa,qBAAqB,YAAY;AAAA,EACjD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,oBAAoB,CAAC,UAAkB;AAClD,QAAM,CAAC,WAAW,IAAI,aAAa,OAAO,MAAM,SAAS,GAAG,EAAE;AAC9D,SAAO;AACT;AAEA,WAAW,cAAc;AAClB,MAAM,2BAAuB,kCAAS,UAAU;AACvD,qBAAqB,YAAY;",
   "names": []
 }

package/dist/cjs/hooks/useZipCodeMask.js

@@ -31,6 +31,7 @@ __export(useZipCodeMask_exports, {
 module.exports = __toCommonJS(useZipCodeMask_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_utils = require("../utils");
 var import_react_desc_prop_types = require("../react-desc-prop-types");
@@ -42,8 +43,8 @@ const conformValue = (rawValue, cursorPos, lastKeyCode) => {
   return (0, import_utils.addSpecialCharacters)(maskedValue, zipCodeSpecialChars, maskedPos, lastKeyCode);
 };
 const useZipCodeMask = (props) => {
-  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.DSMaskHookDefaultProps);
-  (0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSMaskHookPropsTypes, "useZipCodeMask");
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.DSMaskHookDefaultProps);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSMaskHookPropsTypes, "useZipCodeMask");
   const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;
   const lastKeyCode = (0, import_react.useRef)("Unidentified");
   const scheduleAfterRender = (0, import_ds_utilities.useCallbackAfterRender)(true);
@@ -80,6 +81,6 @@ const getUseZipMaskedValue = (value) => {
   return maskedValue;
 };
 useZipCodeMask.displayName = "useZipCodeMask";
-const UseZipCodeMaskWithSchema = (0, import_ds_utilities.describe)(useZipCodeMask);
+const UseZipCodeMaskWithSchema = (0, import_ds_props_helpers.describe)(useZipCodeMask);
 UseZipCodeMaskWithSchema.propTypes = import_react_desc_prop_types.DSMaskHookPropsTypes;
 //# sourceMappingURL=useZipCodeMask.js.map

package/dist/cjs/hooks/useZipCodeMask.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useZipCodeMask.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useCallbackAfterRender,\n} from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskHookDefaultProps, DSMaskHookPropsTypes } from '../react-desc-prop-types';\n\nconst zipCodeSpecialChars: [string, number][] = [['-', 5]];\n\nconst conformValue = (rawValue: string, cursorPos: number, lastKeyCode: string) => {\n  // Work with digits only\n  let maskedValue = String(rawValue).split('').filter((char) => char >= '0' && char <= '9');\n\n  // We only consider first 9 digits\n  maskedValue = maskedValue.slice(0, 9);\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n\n  return addSpecialCharacters(maskedValue, zipCodeSpecialChars, maskedPos, lastKeyCode);\n};\n\nexport const useZipCodeMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes, 'useZipCodeMask');\n  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current);\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n        if (mask === prevMask) setKey((key) => key + 1);\n\n        return mask;\n      });\n      if (userOnChange) userOnChange(e, mask);\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, userOnChange],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n  };\n};\n\nexport const getUseZipMaskedValue = (value: string) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '');\n  return maskedValue;\n};\n\nuseZipCodeMask.displayName = 'useZipCodeMask';\nexport const UseZipCodeMaskWithSchema = describe(useZipCodeMask);\nUseZipCodeMaskWithSchema.propTypes = DSMaskHookPropsTypes;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8C;AAC9C,0BAKO;AACP,mBAA6E;AAE7E,mCAA6D;AAE7D,MAAM,sBAA0C,CAAC,CAAC,KAAK,CAAC,CAAC;AAEzD,MAAM,eAAe,CAAC,UAAkB,WAAmB,gBAAwB;AAEjF,MAAI,cAAc,OAAO,QAAQ,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,SAAS,QAAQ,OAAO,QAAQ,GAAG;AAGxF,gBAAc,YAAY,MAAM,GAAG,CAAC;AAEpC,QAAM,gBAAY,kCAAoB,UAAU,aAAa,SAAS;AAEtE,aAAO,mCAAqB,aAAa,qBAAqB,WAAW,WAAW;AACtF;AAEO,MAAM,iBAA+B,CAAC,UAAU;AACrD,QAAM,uBAAmB,kDAA6B,OAAO,mDAAsB;AACnF,0DAA+B,kBAAkB,mDAAsB,gBAAgB;AACvF,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,cAAc,IAAI;AAE1E,QAAM,kBAAc,qBAAO,cAAc;AACzC,QAAM,0BAAsB,4CAAuB,IAAI;AAOvD,QAAM,CAAC,EAAE,MAAM,QAAI,uBAAS,CAAC;AAE7B,QAAM,gBAA0D;AAAA,IAC9D,CAAC,MAAM;AACL,kBAAY,UAAU,EAAE;AACxB,UAAI;AAAe,sBAAc,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,eAAuD;AAAA,IAC3D,CAAC,MAAM;AACL,YAAM,CAAC,MAAM,SAAS,IAAI,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY,OAAO;AACtG,kBAAY,CAAC,aAAa;AAExB,YAAI,SAAS;AAAU,iBAAO,CAAC,QAAQ,MAAM,CAAC;AAE9C,eAAO;AAAA,MACT,CAAC;AACD,UAAI;AAAc,qBAAa,GAAG,IAAI;AACtC,0BAAoB,UAAM,gCAAkB,EAAE,QAAQ,SAAS,CAAC;AAAA,IAClE;AAAA,IACA,CAAC,aAAa,qBAAqB,YAAY;AAAA,EACjD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,uBAAuB,CAAC,UAAkB;AACrD,QAAM,CAAC,WAAW,IAAI,aAAa,OAAO,MAAM,SAAS,GAAG,EAAE;AAC9D,SAAO;AACT;AAEA,eAAe,cAAc;AACtB,MAAM,+BAA2B,8BAAS,cAAc;AAC/D,yBAAyB,YAAY;",
+  "sourcesContent": ["import type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskHookDefaultProps, DSMaskHookPropsTypes } from '../react-desc-prop-types';\n\nconst zipCodeSpecialChars: [string, number][] = [['-', 5]];\n\nconst conformValue = (rawValue: string, cursorPos: number, lastKeyCode: string) => {\n  // Work with digits only\n  let maskedValue = String(rawValue)\n    .split('')\n    .filter((char) => char >= '0' && char <= '9');\n\n  // We only consider first 9 digits\n  maskedValue = maskedValue.slice(0, 9);\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n\n  return addSpecialCharacters(maskedValue, zipCodeSpecialChars, maskedPos, lastKeyCode);\n};\n\nexport const useZipCodeMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes, 'useZipCodeMask');\n  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current);\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n        if (mask === prevMask) setKey((key) => key + 1);\n\n        return mask;\n      });\n      if (userOnChange) userOnChange(e, mask);\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, userOnChange],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n  };\n};\n\nexport const getUseZipMaskedValue = (value: string) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '');\n  return maskedValue;\n};\n\nuseZipCodeMask.displayName = 'useZipCodeMask';\nexport const UseZipCodeMaskWithSchema = describe(useZipCodeMask);\nUseZipCodeMaskWithSchema.propTypes = DSMaskHookPropsTypes;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8C;AAC9C,8BAAuF;AACvF,0BAAuC;AACvC,mBAA6E;AAE7E,mCAA6D;AAE7D,MAAM,sBAA0C,CAAC,CAAC,KAAK,CAAC,CAAC;AAEzD,MAAM,eAAe,CAAC,UAAkB,WAAmB,gBAAwB;AAEjF,MAAI,cAAc,OAAO,QAAQ,EAC9B,MAAM,EAAE,EACR,OAAO,CAAC,SAAS,QAAQ,OAAO,QAAQ,GAAG;AAG9C,gBAAc,YAAY,MAAM,GAAG,CAAC;AAEpC,QAAM,gBAAY,kCAAoB,UAAU,aAAa,SAAS;AAEtE,aAAO,mCAAqB,aAAa,qBAAqB,WAAW,WAAW;AACtF;AAEO,MAAM,iBAA+B,CAAC,UAAU;AACrD,QAAM,uBAAmB,sDAA6B,OAAO,mDAAsB;AACnF,8DAA+B,kBAAkB,mDAAsB,gBAAgB;AACvF,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,cAAc,IAAI;AAE1E,QAAM,kBAAc,qBAAO,cAAc;AACzC,QAAM,0BAAsB,4CAAuB,IAAI;AAOvD,QAAM,CAAC,EAAE,MAAM,QAAI,uBAAS,CAAC;AAE7B,QAAM,gBAA0D;AAAA,IAC9D,CAAC,MAAM;AACL,kBAAY,UAAU,EAAE;AACxB,UAAI;AAAe,sBAAc,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,eAAuD;AAAA,IAC3D,CAAC,MAAM;AACL,YAAM,CAAC,MAAM,SAAS,IAAI,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY,OAAO;AACtG,kBAAY,CAAC,aAAa;AAExB,YAAI,SAAS;AAAU,iBAAO,CAAC,QAAQ,MAAM,CAAC;AAE9C,eAAO;AAAA,MACT,CAAC;AACD,UAAI;AAAc,qBAAa,GAAG,IAAI;AACtC,0BAAoB,UAAM,gCAAkB,EAAE,QAAQ,SAAS,CAAC;AAAA,IAClE;AAAA,IACA,CAAC,aAAa,qBAAqB,YAAY;AAAA,EACjD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,uBAAuB,CAAC,UAAkB;AACrD,QAAM,CAAC,WAAW,IAAI,aAAa,OAAO,MAAM,SAAS,GAAG,EAAE;AAC9D,SAAO;AACT;AAEA,eAAe,cAAc;AACtB,MAAM,+BAA2B,kCAAS,cAAc;AAC/D,yBAAyB,YAAY;",
   "names": []
 }

package/dist/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/cjs/react-desc-prop-types.js

@@ -35,7 +35,7 @@ __export(react_desc_prop_types_exports, {
 });
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
-var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 const DSMaskHookDefaultProps = {
   onChange: () => null,
   onKeyDown: () => null,
@@ -59,28 +59,28 @@ const DSMaskNumberHookDefaultProps = {
   decimalRequired: false
 };
 const DSMaskHookPropsTypes = {
-  valueSetter: import_ds_utilities.PropTypes.func.description("React set state function for the value").isRequired,
-  onChange: import_ds_utilities.PropTypes.func.description("Callback for onChange"),
-  onKeyDown: import_ds_utilities.PropTypes.func.description("Callback for onKeyDown")
+  valueSetter: import_ds_props_helpers.PropTypes.func.description("React set state function for the value").isRequired,
+  onChange: import_ds_props_helpers.PropTypes.func.description("Callback for onChange"),
+  onKeyDown: import_ds_props_helpers.PropTypes.func.description("Callback for onKeyDown")
 };
 const DSMaskRegExpHookPropsTypes = {
   ...DSMaskHookPropsTypes,
-  regExp: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.string, import_ds_utilities.PropTypes.instanceOf(RegExp)])).description(
+  regExp: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.instanceOf(RegExp)])).description(
     "Array with regexp or special chars per character"
   ).isRequired,
-  filledMask: import_ds_utilities.PropTypes.bool.description("Show blank chars positions").defaultValue(false)
+  filledMask: import_ds_props_helpers.PropTypes.bool.description("Show blank chars positions").defaultValue(false)
 };
 const DSMaskPhoneHookPropsTypes = {
   ...DSMaskHookPropsTypes,
-  isInternational: import_ds_utilities.PropTypes.bool.description("Use or not internaltional phone mask number").defaultValue(false)
+  isInternational: import_ds_props_helpers.PropTypes.bool.description("Use or not internaltional phone mask number").defaultValue(false)
 };
 const DSMaskNumberHookPropsTypes = {
   ...DSMaskHookPropsTypes,
-  suffix: import_ds_utilities.PropTypes.string.description("String will be added at the end of the input value").defaultValue(""),
-  prefix: import_ds_utilities.PropTypes.string.description("String will be added at the start of the input value").defaultValue(""),
-  decimalPlaces: import_ds_utilities.PropTypes.number.description("Number of decimals allowed").defaultValue(2),
-  allowNegative: import_ds_utilities.PropTypes.bool.description("Wether the input allows negative number").defaultValue(false),
-  includeThousandsSeparator: import_ds_utilities.PropTypes.bool.description("Wether the integer part will be separated by thousands").defaultValue(true),
-  decimalRequired: import_ds_utilities.PropTypes.bool.description("Wether decimal part is mandatory").defaultValue(false)
+  suffix: import_ds_props_helpers.PropTypes.string.description("String will be added at the end of the input value").defaultValue(""),
+  prefix: import_ds_props_helpers.PropTypes.string.description("String will be added at the start of the input value").defaultValue(""),
+  decimalPlaces: import_ds_props_helpers.PropTypes.number.description("Number of decimals allowed").defaultValue(2),
+  allowNegative: import_ds_props_helpers.PropTypes.bool.description("Wether the input allows negative number").defaultValue(false),
+  includeThousandsSeparator: import_ds_props_helpers.PropTypes.bool.description("Wether the integer part will be separated by thousands").defaultValue(true),
+  decimalRequired: import_ds_props_helpers.PropTypes.bool.description("Wether decimal part is mandatory").defaultValue(false)
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\n\nexport declare namespace DSMaskT {\n  interface HookArgs {\n    valueSetter: React.Dispatch<React.SetStateAction<string>>;\n    onChange?: (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => void;\n    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n    onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  }\n\n  interface HookReturn {\n    onChange: React.ChangeEventHandler<HTMLInputElement>;\n    onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n    onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  }\n\n  export interface NumberHookArgs extends HookArgs {\n    suffix: string;\n    prefix: string;\n    decimalPlaces: number;\n    allowNegative: boolean;\n    includeThousandsSeparator: boolean;\n    decimalRequired: boolean;\n  }\n\n  export interface PhoneHookArgs extends HookArgs {\n    isInternational: boolean;\n  }\n\n  export interface RegExpHookArgs extends HookArgs {\n    filledMask: boolean;\n  }\n\n  export type Hook = ((args: HookArgs) => HookReturn) & { displayName: string };\n  export type PhoneHook = ((args: PhoneHookArgs) => HookReturn) & { displayName: string };\n  export type NumberHook = ((args: NumberHookArgs) => HookReturn) & { displayName: string };\n}\n\nexport const DSMaskHookDefaultProps: Partial<DSMaskT.HookReturn> = {\n  onChange: () => null,\n  onKeyDown: () => null,\n  onBlur: () => null,\n};\n\nexport const DSMaskPhoneHookDefaultProps: Partial<DSMaskT.PhoneHookArgs> = {\n  ...DSMaskHookDefaultProps,\n  isInternational: false,\n};\nexport const DSMaskRegExpHookDefaultProps: Partial<DSMaskT.RegExpHookArgs> = {\n  ...DSMaskHookDefaultProps,\n  filledMask: false,\n};\n\nexport const DSMaskNumberHookDefaultProps: Partial<DSMaskT.NumberHookArgs> = {\n  ...DSMaskHookDefaultProps,\n  suffix: '',\n  prefix: '',\n  decimalPlaces: 2,\n  allowNegative: false,\n  includeThousandsSeparator: true,\n  decimalRequired: false,\n};\n\nexport const DSMaskHookPropsTypes = {\n  valueSetter: PropTypes.func.description('React set state function for the value').isRequired,\n  onChange: PropTypes.func.description('Callback for onChange'),\n  onKeyDown: PropTypes.func.description('Callback for onKeyDown'),\n} as WeakValidationMap<unknown>;\n\nexport const DSMaskRegExpHookPropsTypes = {\n  ...DSMaskHookPropsTypes,\n  regExp: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)])).description(\n    'Array with regexp or special chars per character',\n  ).isRequired,\n  filledMask: PropTypes.bool.description('Show blank chars positions').defaultValue(false),\n} as WeakValidationMap<unknown>;\n\nexport const DSMaskPhoneHookPropsTypes = {\n  ...DSMaskHookPropsTypes,\n  isInternational: PropTypes.bool.description('Use or not internaltional phone mask number').defaultValue(false),\n} as WeakValidationMap<unknown>;\n\nexport const DSMaskNumberHookPropsTypes = {\n  ...DSMaskHookPropsTypes,\n  suffix: PropTypes.string.description('String will be added at the end of the input value').defaultValue(''),\n  prefix: PropTypes.string.description('String will be added at the start of the input value').defaultValue(''),\n  decimalPlaces: PropTypes.number.description('Number of decimals allowed').defaultValue(2),\n  allowNegative: PropTypes.bool.description('Wether the input allows negative number').defaultValue(false),\n  includeThousandsSeparator: PropTypes.bool\n    .description('Wether the integer part will be separated by thousands')\n    .defaultValue(true),\n  decimalRequired: PropTypes.bool.description('Wether decimal part is mandatory').defaultValue(false),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAwCnB,MAAM,yBAAsD;AAAA,EACjE,UAAU,MAAM;AAAA,EAChB,WAAW,MAAM;AAAA,EACjB,QAAQ,MAAM;AAChB;AAEO,MAAM,8BAA8D;AAAA,EACzE,GAAG;AAAA,EACH,iBAAiB;AACnB;AACO,MAAM,+BAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,YAAY;AACd;AAEO,MAAM,+BAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,eAAe;AAAA,EACf,2BAA2B;AAAA,EAC3B,iBAAiB;AACnB;AAEO,MAAM,uBAAuB;AAAA,EAClC,aAAa,8BAAU,KAAK,YAAY,wCAAwC,EAAE;AAAA,EAClF,UAAU,8BAAU,KAAK,YAAY,uBAAuB;AAAA,EAC5D,WAAW,8BAAU,KAAK,YAAY,wBAAwB;AAChE;AAEO,MAAM,6BAA6B;AAAA,EACxC,GAAG;AAAA,EACH,QAAQ,8BAAU,QAAQ,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,WAAW,MAAM,CAAC,CAAC,CAAC,EAAE;AAAA,IAC/F;AAAA,EACF,EAAE;AAAA,EACF,YAAY,8BAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AACzF;AAEO,MAAM,4BAA4B;AAAA,EACvC,GAAG;AAAA,EACH,iBAAiB,8BAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,KAAK;AAC/G;AAEO,MAAM,6BAA6B;AAAA,EACxC,GAAG;AAAA,EACH,QAAQ,8BAAU,OAAO,YAAY,oDAAoD,EAAE,aAAa,EAAE;AAAA,EAC1G,QAAQ,8BAAU,OAAO,YAAY,sDAAsD,EAAE,aAAa,EAAE;AAAA,EAC5G,eAAe,8BAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,CAAC;AAAA,EACxF,eAAe,8BAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EACvG,2BAA2B,8BAAU,KAClC,YAAY,wDAAwD,EACpE,aAAa,IAAI;AAAA,EACpB,iBAAiB,8BAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AACpG;",
+  "sourcesContent": ["import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\n\nexport declare namespace DSMaskT {\n  interface HookArgs {\n    valueSetter: React.Dispatch<React.SetStateAction<string>>;\n    onChange?: (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => void;\n    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n    onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  }\n\n  interface HookReturn {\n    onChange: React.ChangeEventHandler<HTMLInputElement>;\n    onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n    onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  }\n\n  export interface NumberHookArgs extends HookArgs {\n    suffix: string;\n    prefix: string;\n    decimalPlaces: number;\n    allowNegative: boolean;\n    includeThousandsSeparator: boolean;\n    decimalRequired: boolean;\n  }\n\n  export interface PhoneHookArgs extends HookArgs {\n    isInternational: boolean;\n  }\n\n  export interface RegExpHookArgs extends HookArgs {\n    filledMask: boolean;\n  }\n\n  export type Hook = ((args: HookArgs) => HookReturn) & { displayName: string };\n  export type PhoneHook = ((args: PhoneHookArgs) => HookReturn) & { displayName: string };\n  export type NumberHook = ((args: NumberHookArgs) => HookReturn) & { displayName: string };\n}\n\nexport const DSMaskHookDefaultProps: Partial<DSMaskT.HookReturn> = {\n  onChange: () => null,\n  onKeyDown: () => null,\n  onBlur: () => null,\n};\n\nexport const DSMaskPhoneHookDefaultProps: Partial<DSMaskT.PhoneHookArgs> = {\n  ...DSMaskHookDefaultProps,\n  isInternational: false,\n};\nexport const DSMaskRegExpHookDefaultProps: Partial<DSMaskT.RegExpHookArgs> = {\n  ...DSMaskHookDefaultProps,\n  filledMask: false,\n};\n\nexport const DSMaskNumberHookDefaultProps: Partial<DSMaskT.NumberHookArgs> = {\n  ...DSMaskHookDefaultProps,\n  suffix: '',\n  prefix: '',\n  decimalPlaces: 2,\n  allowNegative: false,\n  includeThousandsSeparator: true,\n  decimalRequired: false,\n};\n\nexport const DSMaskHookPropsTypes = {\n  valueSetter: PropTypes.func.description('React set state function for the value').isRequired,\n  onChange: PropTypes.func.description('Callback for onChange'),\n  onKeyDown: PropTypes.func.description('Callback for onKeyDown'),\n} as WeakValidationMap<unknown>;\n\nexport const DSMaskRegExpHookPropsTypes = {\n  ...DSMaskHookPropsTypes,\n  regExp: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)])).description(\n    'Array with regexp or special chars per character',\n  ).isRequired,\n  filledMask: PropTypes.bool.description('Show blank chars positions').defaultValue(false),\n} as WeakValidationMap<unknown>;\n\nexport const DSMaskPhoneHookPropsTypes = {\n  ...DSMaskHookPropsTypes,\n  isInternational: PropTypes.bool.description('Use or not internaltional phone mask number').defaultValue(false),\n} as WeakValidationMap<unknown>;\n\nexport const DSMaskNumberHookPropsTypes = {\n  ...DSMaskHookPropsTypes,\n  suffix: PropTypes.string.description('String will be added at the end of the input value').defaultValue(''),\n  prefix: PropTypes.string.description('String will be added at the start of the input value').defaultValue(''),\n  decimalPlaces: PropTypes.number.description('Number of decimals allowed').defaultValue(2),\n  allowNegative: PropTypes.bool.description('Wether the input allows negative number').defaultValue(false),\n  includeThousandsSeparator: PropTypes.bool\n    .description('Wether the integer part will be separated by thousands')\n    .defaultValue(true),\n  decimalRequired: PropTypes.bool.description('Wether decimal part is mandatory').defaultValue(false),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA0B;AAwCnB,MAAM,yBAAsD;AAAA,EACjE,UAAU,MAAM;AAAA,EAChB,WAAW,MAAM;AAAA,EACjB,QAAQ,MAAM;AAChB;AAEO,MAAM,8BAA8D;AAAA,EACzE,GAAG;AAAA,EACH,iBAAiB;AACnB;AACO,MAAM,+BAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,YAAY;AACd;AAEO,MAAM,+BAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,eAAe;AAAA,EACf,2BAA2B;AAAA,EAC3B,iBAAiB;AACnB;AAEO,MAAM,uBAAuB;AAAA,EAClC,aAAa,kCAAU,KAAK,YAAY,wCAAwC,EAAE;AAAA,EAClF,UAAU,kCAAU,KAAK,YAAY,uBAAuB;AAAA,EAC5D,WAAW,kCAAU,KAAK,YAAY,wBAAwB;AAChE;AAEO,MAAM,6BAA6B;AAAA,EACxC,GAAG;AAAA,EACH,QAAQ,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,WAAW,MAAM,CAAC,CAAC,CAAC,EAAE;AAAA,IAC/F;AAAA,EACF,EAAE;AAAA,EACF,YAAY,kCAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AACzF;AAEO,MAAM,4BAA4B;AAAA,EACvC,GAAG;AAAA,EACH,iBAAiB,kCAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,KAAK;AAC/G;AAEO,MAAM,6BAA6B;AAAA,EACxC,GAAG;AAAA,EACH,QAAQ,kCAAU,OAAO,YAAY,oDAAoD,EAAE,aAAa,EAAE;AAAA,EAC1G,QAAQ,kCAAU,OAAO,YAAY,sDAAsD,EAAE,aAAa,EAAE;AAAA,EAC5G,eAAe,kCAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,CAAC;AAAA,EACxF,eAAe,kCAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EACvG,2BAA2B,kCAAU,KAClC,YAAY,wDAAwD,EACpE,aAAa,IAAI;AAAA,EACpB,iBAAiB,kCAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AACpG;",
   "names": []
 }

package/dist/esm/hooks/useNumberMask.js

@@ -1,11 +1,7 @@
 import * as React from "react";
 import { useCallback, useRef, useState } from "react";
-import {
-  describe,
-  useMemoMergePropsWithDefault,
-  useValidateTypescriptPropTypes,
-  useCallbackAfterRender
-} from "@elliemae/ds-utilities";
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { useCallbackAfterRender } from "@elliemae/ds-utilities";
 import { setCursorPosition } from "../utils";
 import { DSMaskNumberHookDefaultProps, DSMaskNumberHookPropsTypes } from "../react-desc-prop-types";
 const addThousandsSeparator = (n, separator) => n.replace(/\B(?=(\d{3})+(?!\d))/g, separator);

package/dist/esm/hooks/useNumberMask.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useNumberMask.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useCallbackAfterRender,\n} from '@elliemae/ds-utilities';\nimport { setCursorPosition } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskNumberHookDefaultProps, DSMaskNumberHookPropsTypes } from '../react-desc-prop-types';\n\nconst addThousandsSeparator = (n: string, separator: string) => n.replace(/\\B(?=(\\d{3})+(?!\\d))/g, separator);\n\nconst conformValue = (\n  rawValue: string,\n  cursorPos: number,\n  lastKeyCode: string,\n  opts: DSMaskT.NumberHookArgs,\n): [string, number] => {\n  const { includeThousandsSeparator, allowNegative, prefix, suffix, decimalPlaces, decimalRequired } = opts;\n  const THOUSANDSSEPARATOR = ',';\n\n  let dotIdx = -1;\n  // allow minus sign before and after the preffix\n  let finalPrefix = [prefix.length, 0].includes(rawValue.indexOf('-')) && allowNegative ? '-' : '';\n\n  let maskedValue = String(rawValue).split('').filter((char, idx) => {\n    // we take only the first dot\n    const validChar = (char >= '0' && char <= '9') || (char === '.' && dotIdx === -1 && decimalPlaces);\n    if (char === '.' && validChar) dotIdx = idx;\n    return validChar;\n  });\n\n  if (prefix && maskedValue.length) finalPrefix += prefix;\n\n  // REMOVE FOLLOWING ZEROS IN INTEGER PART AFTER LEADER ZERO NUMBER\n  while (maskedValue.length >= 2 && maskedValue[0] === '0' && maskedValue[1] !== '.') {\n    maskedValue = maskedValue.splice(1);\n  }\n  dotIdx = maskedValue.findIndex((char) => char === '.');\n\n  let integer = maskedValue.slice(0, dotIdx !== -1 ? dotIdx : maskedValue.length);\n  const decimal = maskedValue.slice(dotIdx, dotIdx + decimalPlaces + 1);\n  // ADDING THOUSANDS SEPARATOR\n  if (includeThousandsSeparator) {\n    integer = addThousandsSeparator(integer.join(''), THOUSANDSSEPARATOR).split('');\n  }\n\n  // MERGIN INT AND DECIMAL IF NECCESSARY\n  if (dotIdx !== -1 && !(lastKeyCode === 'Backspace' && decimal.length === 1)) {\n    if (integer.length) {\n      maskedValue = [...integer, ...decimal];\n    } else {\n      // if theres no integer add a zero to the left of the dot to cover .23 => 0.23 case\n      maskedValue = ['0', ...decimal];\n    }\n  } else {\n    // If decimal is required we add a dot after integer if exists\n    maskedValue = decimalRequired && integer.length ? [...integer, '.'] : integer;\n  }\n\n  // remove orphans prefix for example \"-$\"\n  if (lastKeyCode === 'Backspace' && maskedValue.length === 0) {\n    finalPrefix = '';\n  }\n\n  // SET REAL CURSOR POSITION AFTER ADDING DOT and COMMAS SEPARATORS\n  let maskedPos = 0;\n\n  // 0 leading case we move the cursor to continue typing\n  if (maskedValue[maskedPos] === '0' && cursorPos === 1 + prefix.length) maskedPos += 1;\n\n  for (let i = 0; i < cursorPos; i += 1) {\n    if (maskedValue[maskedPos] === THOUSANDSSEPARATOR) maskedPos += 1;\n    if (maskedValue[maskedPos] === rawValue[i]) maskedPos += 1;\n  }\n\n  maskedPos += finalPrefix.length;\n\n  const finalSuffix = maskedValue.length ? suffix : '';\n\n  const maskedValueString = finalPrefix + maskedValue.join('') + finalSuffix;\n  return [maskedValueString, maskedPos];\n};\n\nexport const useNumberMask: DSMaskT.NumberHook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskNumberHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskNumberHookPropsTypes, 'useNumberMask');\n\n  const {\n    valueSetter,\n    onChange: userOnChange,\n    onKeyDown: userOnKeyDown,\n    onBlur: userOnBlur,\n    ...opts\n  } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const maskedValue = e.target.value;\n      const dotIdx = maskedValue.indexOf('.');\n      const minusIndex = maskedValue.indexOf('-');\n\n      const { decimalRequired, decimalPlaces, suffix } = opts;\n\n      const suffixIndex = suffix.length ? maskedValue.indexOf(suffix) : -1;\n\n      if (decimalRequired) {\n        if (dotIdx > -1) {\n          const decimal = maskedValue.slice(dotIdx + 1, suffix.length ? -suffix.length : maskedValue.length);\n\n          let zerosRest = '';\n          while (decimal.length + zerosRest.length !== decimalPlaces) {\n            zerosRest += '0';\n          }\n\n          valueSetter((suffix.length ? maskedValue.slice(0, suffixIndex) : maskedValue) + zerosRest + suffix);\n        }\n      } else if (maskedValue.length - suffix.length - 1 === dotIdx) {\n        // removing orphans dots\n        valueSetter(maskedValue.replace('.', ''));\n      } else if (maskedValue.length - 1 === minusIndex) {\n        // removing orphans minus\n        valueSetter(maskedValue.replace('-', ''));\n      }\n      if (userOnBlur) userOnBlur(e);\n    },\n    [userOnBlur, valueSetter, opts],\n  );\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(\n        e.target.value,\n        e.target.selectionEnd ?? 0,\n        lastKeyCode.current,\n        opts as DSMaskT.NumberHookArgs,\n      );\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n        if (mask === prevMask) setKey((key) => key + 1);\n\n        return mask;\n      });\n      if (userOnChange) userOnChange(e, mask);\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, userOnChange, opts],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n    onBlur,\n  };\n};\n\nexport const getNumberMaskedValue = (value: string, opts: DSMaskT.NumberHookArgs) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '', opts);\n  return maskedValue;\n};\n\nuseNumberMask.displayName = 'useNumberMask';\nexport const UseNumberMaskWithSchema = describe(useNumberMask);\nUseNumberMaskWithSchema.propTypes = DSMaskNumberHookPropsTypes;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { setCursorPosition } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskNumberHookDefaultProps, DSMaskNumberHookPropsTypes } from '../react-desc-prop-types';\n\nconst addThousandsSeparator = (n: string, separator: string) => n.replace(/\\B(?=(\\d{3})+(?!\\d))/g, separator);\n\nconst conformValue = (\n  rawValue: string,\n  cursorPos: number,\n  lastKeyCode: string,\n  opts: DSMaskT.NumberHookArgs,\n): [string, number] => {\n  const { includeThousandsSeparator, allowNegative, prefix, suffix, decimalPlaces, decimalRequired } = opts;\n  const THOUSANDSSEPARATOR = ',';\n\n  let dotIdx = -1;\n  // allow minus sign before and after the preffix\n  let finalPrefix = [prefix.length, 0].includes(rawValue.indexOf('-')) && allowNegative ? '-' : '';\n\n  let maskedValue = String(rawValue)\n    .split('')\n    .filter((char, idx) => {\n      // we take only the first dot\n      const validChar = (char >= '0' && char <= '9') || (char === '.' && dotIdx === -1 && decimalPlaces);\n      if (char === '.' && validChar) dotIdx = idx;\n      return validChar;\n    });\n\n  if (prefix && maskedValue.length) finalPrefix += prefix;\n\n  // REMOVE FOLLOWING ZEROS IN INTEGER PART AFTER LEADER ZERO NUMBER\n  while (maskedValue.length >= 2 && maskedValue[0] === '0' && maskedValue[1] !== '.') {\n    maskedValue = maskedValue.splice(1);\n  }\n  dotIdx = maskedValue.findIndex((char) => char === '.');\n\n  let integer = maskedValue.slice(0, dotIdx !== -1 ? dotIdx : maskedValue.length);\n  const decimal = maskedValue.slice(dotIdx, dotIdx + decimalPlaces + 1);\n  // ADDING THOUSANDS SEPARATOR\n  if (includeThousandsSeparator) {\n    integer = addThousandsSeparator(integer.join(''), THOUSANDSSEPARATOR).split('');\n  }\n\n  // MERGIN INT AND DECIMAL IF NECCESSARY\n  if (dotIdx !== -1 && !(lastKeyCode === 'Backspace' && decimal.length === 1)) {\n    if (integer.length) {\n      maskedValue = [...integer, ...decimal];\n    } else {\n      // if theres no integer add a zero to the left of the dot to cover .23 => 0.23 case\n      maskedValue = ['0', ...decimal];\n    }\n  } else {\n    // If decimal is required we add a dot after integer if exists\n    maskedValue = decimalRequired && integer.length ? [...integer, '.'] : integer;\n  }\n\n  // remove orphans prefix for example \"-$\"\n  if (lastKeyCode === 'Backspace' && maskedValue.length === 0) {\n    finalPrefix = '';\n  }\n\n  // SET REAL CURSOR POSITION AFTER ADDING DOT and COMMAS SEPARATORS\n  let maskedPos = 0;\n\n  // 0 leading case we move the cursor to continue typing\n  if (maskedValue[maskedPos] === '0' && cursorPos === 1 + prefix.length) maskedPos += 1;\n\n  for (let i = 0; i < cursorPos; i += 1) {\n    if (maskedValue[maskedPos] === THOUSANDSSEPARATOR) maskedPos += 1;\n    if (maskedValue[maskedPos] === rawValue[i]) maskedPos += 1;\n  }\n\n  maskedPos += finalPrefix.length;\n\n  const finalSuffix = maskedValue.length ? suffix : '';\n\n  const maskedValueString = finalPrefix + maskedValue.join('') + finalSuffix;\n  return [maskedValueString, maskedPos];\n};\n\nexport const useNumberMask: DSMaskT.NumberHook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskNumberHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskNumberHookPropsTypes, 'useNumberMask');\n\n  const {\n    valueSetter,\n    onChange: userOnChange,\n    onKeyDown: userOnKeyDown,\n    onBlur: userOnBlur,\n    ...opts\n  } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const maskedValue = e.target.value;\n      const dotIdx = maskedValue.indexOf('.');\n      const minusIndex = maskedValue.indexOf('-');\n\n      const { decimalRequired, decimalPlaces, suffix } = opts;\n\n      const suffixIndex = suffix.length ? maskedValue.indexOf(suffix) : -1;\n\n      if (decimalRequired) {\n        if (dotIdx > -1) {\n          const decimal = maskedValue.slice(dotIdx + 1, suffix.length ? -suffix.length : maskedValue.length);\n\n          let zerosRest = '';\n          while (decimal.length + zerosRest.length !== decimalPlaces) {\n            zerosRest += '0';\n          }\n\n          valueSetter((suffix.length ? maskedValue.slice(0, suffixIndex) : maskedValue) + zerosRest + suffix);\n        }\n      } else if (maskedValue.length - suffix.length - 1 === dotIdx) {\n        // removing orphans dots\n        valueSetter(maskedValue.replace('.', ''));\n      } else if (maskedValue.length - 1 === minusIndex) {\n        // removing orphans minus\n        valueSetter(maskedValue.replace('-', ''));\n      }\n      if (userOnBlur) userOnBlur(e);\n    },\n    [userOnBlur, valueSetter, opts],\n  );\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(\n        e.target.value,\n        e.target.selectionEnd ?? 0,\n        lastKeyCode.current,\n        opts as DSMaskT.NumberHookArgs,\n      );\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n        if (mask === prevMask) setKey((key) => key + 1);\n\n        return mask;\n      });\n      if (userOnChange) userOnChange(e, mask);\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, userOnChange, opts],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n    onBlur,\n  };\n};\n\nexport const getNumberMaskedValue = (value: string, opts: DSMaskT.NumberHookArgs) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '', opts);\n  return maskedValue;\n};\n\nuseNumberMask.displayName = 'useNumberMask';\nexport const UseNumberMaskWithSchema = describe(useNumberMask);\nUseNumberMaskWithSchema.propTypes = DSMaskNumberHookPropsTypes;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/hooks/usePhoneMask.js

@@ -1,11 +1,7 @@
 import * as React from "react";
 import { useCallback, useRef, useState } from "react";
-import {
-  describe,
-  useMemoMergePropsWithDefault,
-  useValidateTypescriptPropTypes,
-  useCallbackAfterRender
-} from "@elliemae/ds-utilities";
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { useCallbackAfterRender } from "@elliemae/ds-utilities";
 import { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from "../utils";
 import { DSMaskPhoneHookPropsTypes, DSMaskPhoneHookDefaultProps } from "../react-desc-prop-types";
 const phoneSpecialChars = [

package/dist/esm/hooks/usePhoneMask.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/usePhoneMask.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useCallbackAfterRender,\n} from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskPhoneHookPropsTypes, DSMaskPhoneHookDefaultProps } from '../react-desc-prop-types';\n\nconst phoneSpecialChars: [string, number][] = [\n  ['(', 0],\n  [') ', 4],\n  [' - ', 9],\n];\n\nconst internationalPhoneSpecialChars: [string, number][] = [\n  ['+1 (', 0],\n  [') ', 7],\n  [' - ', 12],\n];\n\nconst conformValue = (\n  rawValue: string,\n  cursorPos: number,\n  lastKeyCode: string,\n  opts: Partial<DSMaskT.PhoneHookArgs>,\n) => {\n  const characters = String(rawValue).split('');\n  // Work with digits only\n  const { isInternational } = opts;\n  let maskedValue = characters.filter((char, idx, array) => {\n    if (isInternational && idx === 1 && char === '1' && array[0] === '+') {\n      return false;\n    }\n    return char >= '0' && char <= '9';\n  });\n  // We can't have zeros at the start of the array\n  while (maskedValue.length && maskedValue[0] === '0') maskedValue.splice(0, 1);\n\n  // We only consider first 10 digits\n  maskedValue = maskedValue.slice(0, 10);\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n\n  return addSpecialCharacters(\n    maskedValue,\n    isInternational ? internationalPhoneSpecialChars : phoneSpecialChars,\n    maskedPos,\n    lastKeyCode,\n  );\n};\n\nexport const usePhoneMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskPhoneHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskPhoneHookPropsTypes, 'usePhoneMask');\n  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown, onBlur, ...opts } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current, opts);\n\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n        if (mask === prevMask) setKey((key) => key + 1);\n        return mask;\n      });\n\n      if (userOnChange) userOnChange(e, mask);\n\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, opts, userOnChange],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n  };\n};\n\nexport const getPhoneMaskedValue = (value: string, opts: Partial<DSMaskT.PhoneHookArgs>) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '', opts);\n  return maskedValue;\n};\n\nusePhoneMask.displayName = 'usePhoneMask';\nexport const UsePhoneMaskWithSchema = describe(usePhoneMask);\nUsePhoneMaskWithSchema.propTypes = DSMaskPhoneHookPropsTypes;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,aAAa,QAAQ,gBAAgB;AAC9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB,qBAAqB,yBAAyB;AAE7E,SAAS,2BAA2B,mCAAmC;AAEvE,MAAM,oBAAwC;AAAA,EAC5C,CAAC,KAAK,CAAC;AAAA,EACP,CAAC,MAAM,CAAC;AAAA,EACR,CAAC,OAAO,CAAC;AACX;AAEA,MAAM,iCAAqD;AAAA,EACzD,CAAC,QAAQ,CAAC;AAAA,EACV,CAAC,MAAM,CAAC;AAAA,EACR,CAAC,OAAO,EAAE;AACZ;AAEA,MAAM,eAAe,CACnB,UACA,WACA,aACA,SACG;AACH,QAAM,aAAa,OAAO,QAAQ,EAAE,MAAM,EAAE;AAE5C,QAAM,EAAE,gBAAgB,IAAI;AAC5B,MAAI,cAAc,WAAW,OAAO,CAAC,MAAM,KAAK,UAAU;AACxD,QAAI,mBAAmB,QAAQ,KAAK,SAAS,OAAO,MAAM,OAAO,KAAK;AACpE,aAAO;AAAA,IACT;AACA,WAAO,QAAQ,OAAO,QAAQ;AAAA,EAChC,CAAC;AAED,SAAO,YAAY,UAAU,YAAY,OAAO;AAAK,gBAAY,OAAO,GAAG,CAAC;AAG5E,gBAAc,YAAY,MAAM,GAAG,EAAE;AAErC,QAAM,YAAY,oBAAoB,UAAU,aAAa,SAAS;AAEtE,SAAO;AAAA,IACL;AAAA,IACA,kBAAkB,iCAAiC;AAAA,IACnD;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,eAA6B,CAAC,UAAU;AACnD,QAAM,mBAAmB,6BAA6B,OAAO,2BAA2B;AACxF,iCAA+B,kBAAkB,2BAA2B,cAAc;AAC1F,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,eAAe,WAAW,KAAK,IAAI;AAE3F,QAAM,cAAc,OAAO,cAAc;AAEzC,QAAM,sBAAsB,uBAAuB,IAAI;AAOvD,QAAM,CAAC,EAAE,MAAM,IAAI,SAAS,CAAC;AAE7B,QAAM,YAA0D;AAAA,IAC9D,CAAC,MAAM;AACL,kBAAY,UAAU,EAAE;AACxB,UAAI;AAAe,sBAAc,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,WAAuD;AAAA,IAC3D,CAAC,MAAM;AACL,YAAM,CAAC,MAAM,SAAS,IAAI,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY,SAAS,IAAI;AAE5G,kBAAY,CAAC,aAAa;AAExB,YAAI,SAAS;AAAU,iBAAO,CAAC,QAAQ,MAAM,CAAC;AAC9C,eAAO;AAAA,MACT,CAAC;AAED,UAAI;AAAc,qBAAa,GAAG,IAAI;AAEtC,0BAAoB,MAAM,kBAAkB,EAAE,QAAQ,SAAS,CAAC;AAAA,IAClE;AAAA,IACA,CAAC,aAAa,qBAAqB,MAAM,YAAY;AAAA,EACvD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,sBAAsB,CAAC,OAAe,SAAyC;AAC1F,QAAM,CAAC,WAAW,IAAI,aAAa,OAAO,MAAM,SAAS,GAAG,IAAI,IAAI;AACpE,SAAO;AACT;AAEA,aAAa,cAAc;AACpB,MAAM,yBAAyB,SAAS,YAAY;AAC3D,uBAAuB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskPhoneHookPropsTypes, DSMaskPhoneHookDefaultProps } from '../react-desc-prop-types';\n\nconst phoneSpecialChars: [string, number][] = [\n  ['(', 0],\n  [') ', 4],\n  [' - ', 9],\n];\n\nconst internationalPhoneSpecialChars: [string, number][] = [\n  ['+1 (', 0],\n  [') ', 7],\n  [' - ', 12],\n];\n\nconst conformValue = (\n  rawValue: string,\n  cursorPos: number,\n  lastKeyCode: string,\n  opts: Partial<DSMaskT.PhoneHookArgs>,\n) => {\n  const characters = String(rawValue).split('');\n  // Work with digits only\n  const { isInternational } = opts;\n  let maskedValue = characters.filter((char, idx, array) => {\n    if (isInternational && idx === 1 && char === '1' && array[0] === '+') {\n      return false;\n    }\n    return char >= '0' && char <= '9';\n  });\n  // We can't have zeros at the start of the array\n  while (maskedValue.length && maskedValue[0] === '0') maskedValue.splice(0, 1);\n\n  // We only consider first 10 digits\n  maskedValue = maskedValue.slice(0, 10);\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n\n  return addSpecialCharacters(\n    maskedValue,\n    isInternational ? internationalPhoneSpecialChars : phoneSpecialChars,\n    maskedPos,\n    lastKeyCode,\n  );\n};\n\nexport const usePhoneMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskPhoneHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskPhoneHookPropsTypes, 'usePhoneMask');\n  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown, onBlur, ...opts } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current, opts);\n\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n        if (mask === prevMask) setKey((key) => key + 1);\n        return mask;\n      });\n\n      if (userOnChange) userOnChange(e, mask);\n\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, opts, userOnChange],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n  };\n};\n\nexport const getPhoneMaskedValue = (value: string, opts: Partial<DSMaskT.PhoneHookArgs>) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '', opts);\n  return maskedValue;\n};\n\nusePhoneMask.displayName = 'usePhoneMask';\nexport const UsePhoneMaskWithSchema = describe(usePhoneMask);\nUsePhoneMaskWithSchema.propTypes = DSMaskPhoneHookPropsTypes;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,aAAa,QAAQ,gBAAgB;AAC9C,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,8BAA8B;AACvC,SAAS,sBAAsB,qBAAqB,yBAAyB;AAE7E,SAAS,2BAA2B,mCAAmC;AAEvE,MAAM,oBAAwC;AAAA,EAC5C,CAAC,KAAK,CAAC;AAAA,EACP,CAAC,MAAM,CAAC;AAAA,EACR,CAAC,OAAO,CAAC;AACX;AAEA,MAAM,iCAAqD;AAAA,EACzD,CAAC,QAAQ,CAAC;AAAA,EACV,CAAC,MAAM,CAAC;AAAA,EACR,CAAC,OAAO,EAAE;AACZ;AAEA,MAAM,eAAe,CACnB,UACA,WACA,aACA,SACG;AACH,QAAM,aAAa,OAAO,QAAQ,EAAE,MAAM,EAAE;AAE5C,QAAM,EAAE,gBAAgB,IAAI;AAC5B,MAAI,cAAc,WAAW,OAAO,CAAC,MAAM,KAAK,UAAU;AACxD,QAAI,mBAAmB,QAAQ,KAAK,SAAS,OAAO,MAAM,OAAO,KAAK;AACpE,aAAO;AAAA,IACT;AACA,WAAO,QAAQ,OAAO,QAAQ;AAAA,EAChC,CAAC;AAED,SAAO,YAAY,UAAU,YAAY,OAAO;AAAK,gBAAY,OAAO,GAAG,CAAC;AAG5E,gBAAc,YAAY,MAAM,GAAG,EAAE;AAErC,QAAM,YAAY,oBAAoB,UAAU,aAAa,SAAS;AAEtE,SAAO;AAAA,IACL;AAAA,IACA,kBAAkB,iCAAiC;AAAA,IACnD;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,eAA6B,CAAC,UAAU;AACnD,QAAM,mBAAmB,6BAA6B,OAAO,2BAA2B;AACxF,iCAA+B,kBAAkB,2BAA2B,cAAc;AAC1F,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,eAAe,WAAW,KAAK,IAAI;AAE3F,QAAM,cAAc,OAAO,cAAc;AAEzC,QAAM,sBAAsB,uBAAuB,IAAI;AAOvD,QAAM,CAAC,EAAE,MAAM,IAAI,SAAS,CAAC;AAE7B,QAAM,YAA0D;AAAA,IAC9D,CAAC,MAAM;AACL,kBAAY,UAAU,EAAE;AACxB,UAAI;AAAe,sBAAc,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,WAAuD;AAAA,IAC3D,CAAC,MAAM;AACL,YAAM,CAAC,MAAM,SAAS,IAAI,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY,SAAS,IAAI;AAE5G,kBAAY,CAAC,aAAa;AAExB,YAAI,SAAS;AAAU,iBAAO,CAAC,QAAQ,MAAM,CAAC;AAC9C,eAAO;AAAA,MACT,CAAC;AAED,UAAI;AAAc,qBAAa,GAAG,IAAI;AAEtC,0BAAoB,MAAM,kBAAkB,EAAE,QAAQ,SAAS,CAAC;AAAA,IAClE;AAAA,IACA,CAAC,aAAa,qBAAqB,MAAM,YAAY;AAAA,EACvD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,sBAAsB,CAAC,OAAe,SAAyC;AAC1F,QAAM,CAAC,WAAW,IAAI,aAAa,OAAO,MAAM,SAAS,GAAG,IAAI,IAAI;AACpE,SAAO;AACT;AAEA,aAAa,cAAc;AACpB,MAAM,yBAAyB,SAAS,YAAY;AAC3D,uBAAuB,YAAY;",
   "names": []
 }

package/dist/esm/hooks/useRegExpMask.js

@@ -1,11 +1,7 @@
 import * as React from "react";
 import { useCallback, useRef, useState } from "react";
-import {
-  describe,
-  useMemoMergePropsWithDefault,
-  useValidateTypescriptPropTypes,
-  useCallbackAfterRender
-} from "@elliemae/ds-utilities";
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { useCallbackAfterRender } from "@elliemae/ds-utilities";
 import { addSpecialCharacters, getPartialMaskedPos, setCursorPosition, flatStringArray } from "../utils";
 import { DSMaskRegExpHookPropsTypes, DSMaskRegExpHookDefaultProps } from "../react-desc-prop-types";
 const isRegExp = (item) => typeof item === "object";

package/dist/esm/hooks/useRegExpMask.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useRegExpMask.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable max-params */\nimport type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useCallbackAfterRender,\n} from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition, flatStringArray } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskRegExpHookPropsTypes, DSMaskRegExpHookDefaultProps } from '../react-desc-prop-types';\n\nconst isRegExp = (item: RegExp | string): item is RegExp => typeof item === 'object';\n\nconst conformValue = (\n  rawValue: string,\n  cursorPos: number,\n  lastKeyCode: string,\n  regExp: string[],\n  filledMask: boolean,\n) => {\n  const specialChars: [string, number][] = [];\n  const flatRegExp = flatStringArray(regExp);\n  const rawValueArray = String(rawValue).split('');\n  let offSet = 0;\n  let charsFound = 0;\n  let specialCharsLeft = '';\n  let fullRegExpMatched = false;\n  const maskedValue: string[] = [];\n  for (let i = 0; i < flatRegExp.length; i += 1) {\n    if (isRegExp(flatRegExp[i])) {\n      specialCharsLeft = '';\n      fullRegExpMatched = false;\n      for (let j = charsFound + offSet; j < rawValueArray.length; j += 1) {\n        const match = rawValueArray[j]?.match(flatRegExp[i]);\n        if (match) {\n          maskedValue.push(match[0]);\n          charsFound += 1;\n          fullRegExpMatched = true;\n          break;\n        } else {\n          offSet += 1;\n        }\n      }\n      if (filledMask && !fullRegExpMatched) {\n        maskedValue.push('_');\n      }\n    } else {\n      specialChars.push([flatRegExp[i], i]);\n      if (rawValueArray[i + offSet] === flatRegExp[i]) charsFound += 1;\n      specialCharsLeft += flatRegExp[i];\n    }\n  }\n  if (!fullRegExpMatched) specialCharsLeft = '';\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n  const [maskWithSpecialsChars, finalMaskedPos] = addSpecialCharacters(\n    maskedValue,\n    specialChars,\n    maskedPos,\n    lastKeyCode,\n  );\n\n  return [maskWithSpecialsChars + specialCharsLeft, finalMaskedPos];\n};\n\nexport const useRegExpMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskRegExpHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskRegExpHookPropsTypes, 'useRegExpMask');\n  const {\n    valueSetter,\n    onChange: userOnChange,\n    onKeyDown: userOnKeyDown,\n    onBlur: userOnBlur,\n    regExp,\n    filledMask,\n  } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(\n        e.target.value,\n        e.target.selectionEnd ?? 0,\n        lastKeyCode.current,\n        regExp,\n        filledMask,\n      );\n\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n\n        if (mask === prevMask) setKey((key) => key + 1);\n        return mask;\n      });\n\n      if (userOnChange) userOnChange(e, mask);\n\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, userOnChange],\n  );\n  const onBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (filledMask) {\n        const maskedValue = e.target.value.split('');\n\n        const flatRegExp = flatStringArray(regExp);\n        const firstUnderscoreIdx = maskedValue.findIndex((char, idx) => char === '_' && flatRegExp[idx] !== '_');\n        if (firstUnderscoreIdx > -1) valueSetter(maskedValue.slice(0, firstUnderscoreIdx).join(''));\n      }\n\n      if (userOnBlur) userOnBlur(e);\n    },\n    [valueSetter, userOnBlur],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n    onBlur,\n  };\n};\n\nuseRegExpMask.displayName = 'useRegExpMask';\nexport const UseRegExpMaskWithSchema = describe(useRegExpMask);\nUseRegExpMaskWithSchema.propTypes = DSMaskRegExpHookPropsTypes;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable max-params */\nimport type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition, flatStringArray } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskRegExpHookPropsTypes, DSMaskRegExpHookDefaultProps } from '../react-desc-prop-types';\n\nconst isRegExp = (item: RegExp | string): item is RegExp => typeof item === 'object';\n\nconst conformValue = (\n  rawValue: string,\n  cursorPos: number,\n  lastKeyCode: string,\n  regExp: string[],\n  filledMask: boolean,\n) => {\n  const specialChars: [string, number][] = [];\n  const flatRegExp = flatStringArray(regExp);\n  const rawValueArray = String(rawValue).split('');\n  let offSet = 0;\n  let charsFound = 0;\n  let specialCharsLeft = '';\n  let fullRegExpMatched = false;\n  const maskedValue: string[] = [];\n  for (let i = 0; i < flatRegExp.length; i += 1) {\n    if (isRegExp(flatRegExp[i])) {\n      specialCharsLeft = '';\n      fullRegExpMatched = false;\n      for (let j = charsFound + offSet; j < rawValueArray.length; j += 1) {\n        const match = rawValueArray[j]?.match(flatRegExp[i]);\n        if (match) {\n          maskedValue.push(match[0]);\n          charsFound += 1;\n          fullRegExpMatched = true;\n          break;\n        } else {\n          offSet += 1;\n        }\n      }\n      if (filledMask && !fullRegExpMatched) {\n        maskedValue.push('_');\n      }\n    } else {\n      specialChars.push([flatRegExp[i], i]);\n      if (rawValueArray[i + offSet] === flatRegExp[i]) charsFound += 1;\n      specialCharsLeft += flatRegExp[i];\n    }\n  }\n  if (!fullRegExpMatched) specialCharsLeft = '';\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n  const [maskWithSpecialsChars, finalMaskedPos] = addSpecialCharacters(\n    maskedValue,\n    specialChars,\n    maskedPos,\n    lastKeyCode,\n  );\n\n  return [maskWithSpecialsChars + specialCharsLeft, finalMaskedPos];\n};\n\nexport const useRegExpMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskRegExpHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskRegExpHookPropsTypes, 'useRegExpMask');\n  const {\n    valueSetter,\n    onChange: userOnChange,\n    onKeyDown: userOnKeyDown,\n    onBlur: userOnBlur,\n    regExp,\n    filledMask,\n  } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(\n        e.target.value,\n        e.target.selectionEnd ?? 0,\n        lastKeyCode.current,\n        regExp,\n        filledMask,\n      );\n\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n\n        if (mask === prevMask) setKey((key) => key + 1);\n        return mask;\n      });\n\n      if (userOnChange) userOnChange(e, mask);\n\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, userOnChange],\n  );\n  const onBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (filledMask) {\n        const maskedValue = e.target.value.split('');\n\n        const flatRegExp = flatStringArray(regExp);\n        const firstUnderscoreIdx = maskedValue.findIndex((char, idx) => char === '_' && flatRegExp[idx] !== '_');\n        if (firstUnderscoreIdx > -1) valueSetter(maskedValue.slice(0, firstUnderscoreIdx).join(''));\n      }\n\n      if (userOnBlur) userOnBlur(e);\n    },\n    [valueSetter, userOnBlur],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n    onBlur,\n  };\n};\n\nuseRegExpMask.displayName = 'useRegExpMask';\nexport const UseRegExpMaskWithSchema = describe(useRegExpMask);\nUseRegExpMaskWithSchema.propTypes = DSMaskRegExpHookPropsTypes;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/hooks/useSSNMask.js

@@ -1,11 +1,7 @@
 import * as React from "react";
 import { useCallback, useRef, useState } from "react";
-import {
-  describe,
-  useMemoMergePropsWithDefault,
-  useValidateTypescriptPropTypes,
-  useCallbackAfterRender
-} from "@elliemae/ds-utilities";
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { useCallbackAfterRender } from "@elliemae/ds-utilities";
 import { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from "../utils";
 import { DSMaskHookDefaultProps, DSMaskHookPropsTypes } from "../react-desc-prop-types";
 const ssnSpecialChars = [

package/dist/esm/hooks/useSSNMask.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useSSNMask.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useCallbackAfterRender,\n} from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskHookDefaultProps, DSMaskHookPropsTypes } from '../react-desc-prop-types';\n\nconst ssnSpecialChars: [string, number][] = [\n  ['-', 3],\n  ['-', 6],\n];\n\nconst conformValue = (rawValue: string, cursorPos: number, lastKeyCode: string) => {\n  // Work with digits only\n  let maskedValue = String(rawValue).split('').filter((char) => char >= '0' && char <= '9');\n\n  // We can't have zeros at the start of the array\n  while (maskedValue.length && maskedValue[0] === '0') maskedValue.splice(0, 1);\n\n  // We only consider first 9 digits\n  maskedValue = maskedValue.slice(0, 9);\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n\n  return addSpecialCharacters(maskedValue, ssnSpecialChars, maskedPos, lastKeyCode);\n};\n\nexport const useSSNMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes, 'useSSNMask');\n\n  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current);\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n        if (mask === prevMask) setKey((key) => key + 1);\n\n        return mask;\n      });\n      if (userOnChange) userOnChange(e, mask);\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, userOnChange],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n  };\n};\n\nexport const getSSNMaskedValue = (value: string) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '');\n  return maskedValue;\n};\n\nuseSSNMask.displayName = 'useSSNMask';\nexport const UseSSNMaskWithSchema = describe(useSSNMask);\nUseSSNMaskWithSchema.propTypes = DSMaskHookPropsTypes;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,QAAQ,gBAAgB;AAC9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB,qBAAqB,yBAAyB;AAE7E,SAAS,wBAAwB,4BAA4B;AAE7D,MAAM,kBAAsC;AAAA,EAC1C,CAAC,KAAK,CAAC;AAAA,EACP,CAAC,KAAK,CAAC;AACT;AAEA,MAAM,eAAe,CAAC,UAAkB,WAAmB,gBAAwB;AAEjF,MAAI,cAAc,OAAO,QAAQ,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,SAAS,QAAQ,OAAO,QAAQ,GAAG;AAGxF,SAAO,YAAY,UAAU,YAAY,OAAO;AAAK,gBAAY,OAAO,GAAG,CAAC;AAG5E,gBAAc,YAAY,MAAM,GAAG,CAAC;AAEpC,QAAM,YAAY,oBAAoB,UAAU,aAAa,SAAS;AAEtE,SAAO,qBAAqB,aAAa,iBAAiB,WAAW,WAAW;AAClF;AAEO,MAAM,aAA2B,CAAC,UAAU;AACjD,QAAM,mBAAmB,6BAA6B,OAAO,sBAAsB;AACnF,iCAA+B,kBAAkB,sBAAsB,YAAY;AAEnF,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,cAAc,IAAI;AAE1E,QAAM,cAAc,OAAO,cAAc;AAEzC,QAAM,sBAAsB,uBAAuB,IAAI;AAOvD,QAAM,CAAC,EAAE,MAAM,IAAI,SAAS,CAAC;AAE7B,QAAM,YAA0D;AAAA,IAC9D,CAAC,MAAM;AACL,kBAAY,UAAU,EAAE;AACxB,UAAI;AAAe,sBAAc,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,WAAuD;AAAA,IAC3D,CAAC,MAAM;AACL,YAAM,CAAC,MAAM,SAAS,IAAI,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY,OAAO;AACtG,kBAAY,CAAC,aAAa;AAExB,YAAI,SAAS;AAAU,iBAAO,CAAC,QAAQ,MAAM,CAAC;AAE9C,eAAO;AAAA,MACT,CAAC;AACD,UAAI;AAAc,qBAAa,GAAG,IAAI;AACtC,0BAAoB,MAAM,kBAAkB,EAAE,QAAQ,SAAS,CAAC;AAAA,IAClE;AAAA,IACA,CAAC,aAAa,qBAAqB,YAAY;AAAA,EACjD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,oBAAoB,CAAC,UAAkB;AAClD,QAAM,CAAC,WAAW,IAAI,aAAa,OAAO,MAAM,SAAS,GAAG,EAAE;AAC9D,SAAO;AACT;AAEA,WAAW,cAAc;AAClB,MAAM,uBAAuB,SAAS,UAAU;AACvD,qBAAqB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskHookDefaultProps, DSMaskHookPropsTypes } from '../react-desc-prop-types';\n\nconst ssnSpecialChars: [string, number][] = [\n  ['-', 3],\n  ['-', 6],\n];\n\nconst conformValue = (rawValue: string, cursorPos: number, lastKeyCode: string) => {\n  // Work with digits only\n  let maskedValue = String(rawValue)\n    .split('')\n    .filter((char) => char >= '0' && char <= '9');\n\n  // We can't have zeros at the start of the array\n  while (maskedValue.length && maskedValue[0] === '0') maskedValue.splice(0, 1);\n\n  // We only consider first 9 digits\n  maskedValue = maskedValue.slice(0, 9);\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n\n  return addSpecialCharacters(maskedValue, ssnSpecialChars, maskedPos, lastKeyCode);\n};\n\nexport const useSSNMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes, 'useSSNMask');\n\n  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current);\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n        if (mask === prevMask) setKey((key) => key + 1);\n\n        return mask;\n      });\n      if (userOnChange) userOnChange(e, mask);\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, userOnChange],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n  };\n};\n\nexport const getSSNMaskedValue = (value: string) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '');\n  return maskedValue;\n};\n\nuseSSNMask.displayName = 'useSSNMask';\nexport const UseSSNMaskWithSchema = describe(useSSNMask);\nUseSSNMaskWithSchema.propTypes = DSMaskHookPropsTypes;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,QAAQ,gBAAgB;AAC9C,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,8BAA8B;AACvC,SAAS,sBAAsB,qBAAqB,yBAAyB;AAE7E,SAAS,wBAAwB,4BAA4B;AAE7D,MAAM,kBAAsC;AAAA,EAC1C,CAAC,KAAK,CAAC;AAAA,EACP,CAAC,KAAK,CAAC;AACT;AAEA,MAAM,eAAe,CAAC,UAAkB,WAAmB,gBAAwB;AAEjF,MAAI,cAAc,OAAO,QAAQ,EAC9B,MAAM,EAAE,EACR,OAAO,CAAC,SAAS,QAAQ,OAAO,QAAQ,GAAG;AAG9C,SAAO,YAAY,UAAU,YAAY,OAAO;AAAK,gBAAY,OAAO,GAAG,CAAC;AAG5E,gBAAc,YAAY,MAAM,GAAG,CAAC;AAEpC,QAAM,YAAY,oBAAoB,UAAU,aAAa,SAAS;AAEtE,SAAO,qBAAqB,aAAa,iBAAiB,WAAW,WAAW;AAClF;AAEO,MAAM,aAA2B,CAAC,UAAU;AACjD,QAAM,mBAAmB,6BAA6B,OAAO,sBAAsB;AACnF,iCAA+B,kBAAkB,sBAAsB,YAAY;AAEnF,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,cAAc,IAAI;AAE1E,QAAM,cAAc,OAAO,cAAc;AAEzC,QAAM,sBAAsB,uBAAuB,IAAI;AAOvD,QAAM,CAAC,EAAE,MAAM,IAAI,SAAS,CAAC;AAE7B,QAAM,YAA0D;AAAA,IAC9D,CAAC,MAAM;AACL,kBAAY,UAAU,EAAE;AACxB,UAAI;AAAe,sBAAc,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,WAAuD;AAAA,IAC3D,CAAC,MAAM;AACL,YAAM,CAAC,MAAM,SAAS,IAAI,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY,OAAO;AACtG,kBAAY,CAAC,aAAa;AAExB,YAAI,SAAS;AAAU,iBAAO,CAAC,QAAQ,MAAM,CAAC;AAE9C,eAAO;AAAA,MACT,CAAC;AACD,UAAI;AAAc,qBAAa,GAAG,IAAI;AACtC,0BAAoB,MAAM,kBAAkB,EAAE,QAAQ,SAAS,CAAC;AAAA,IAClE;AAAA,IACA,CAAC,aAAa,qBAAqB,YAAY;AAAA,EACjD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,oBAAoB,CAAC,UAAkB;AAClD,QAAM,CAAC,WAAW,IAAI,aAAa,OAAO,MAAM,SAAS,GAAG,EAAE;AAC9D,SAAO;AACT;AAEA,WAAW,cAAc;AAClB,MAAM,uBAAuB,SAAS,UAAU;AACvD,qBAAqB,YAAY;",
   "names": []
 }

package/dist/esm/hooks/useZipCodeMask.js

@@ -1,11 +1,7 @@
 import * as React from "react";
 import { useCallback, useRef, useState } from "react";
-import {
-  describe,
-  useMemoMergePropsWithDefault,
-  useValidateTypescriptPropTypes,
-  useCallbackAfterRender
-} from "@elliemae/ds-utilities";
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { useCallbackAfterRender } from "@elliemae/ds-utilities";
 import { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from "../utils";
 import { DSMaskHookDefaultProps, DSMaskHookPropsTypes } from "../react-desc-prop-types";
 const zipCodeSpecialChars = [["-", 5]];

package/dist/esm/hooks/useZipCodeMask.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useZipCodeMask.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport {\n  describe,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  useCallbackAfterRender,\n} from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskHookDefaultProps, DSMaskHookPropsTypes } from '../react-desc-prop-types';\n\nconst zipCodeSpecialChars: [string, number][] = [['-', 5]];\n\nconst conformValue = (rawValue: string, cursorPos: number, lastKeyCode: string) => {\n  // Work with digits only\n  let maskedValue = String(rawValue).split('').filter((char) => char >= '0' && char <= '9');\n\n  // We only consider first 9 digits\n  maskedValue = maskedValue.slice(0, 9);\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n\n  return addSpecialCharacters(maskedValue, zipCodeSpecialChars, maskedPos, lastKeyCode);\n};\n\nexport const useZipCodeMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes, 'useZipCodeMask');\n  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current);\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n        if (mask === prevMask) setKey((key) => key + 1);\n\n        return mask;\n      });\n      if (userOnChange) userOnChange(e, mask);\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, userOnChange],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n  };\n};\n\nexport const getUseZipMaskedValue = (value: string) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '');\n  return maskedValue;\n};\n\nuseZipCodeMask.displayName = 'useZipCodeMask';\nexport const UseZipCodeMaskWithSchema = describe(useZipCodeMask);\nUseZipCodeMaskWithSchema.propTypes = DSMaskHookPropsTypes;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,QAAQ,gBAAgB;AAC9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB,qBAAqB,yBAAyB;AAE7E,SAAS,wBAAwB,4BAA4B;AAE7D,MAAM,sBAA0C,CAAC,CAAC,KAAK,CAAC,CAAC;AAEzD,MAAM,eAAe,CAAC,UAAkB,WAAmB,gBAAwB;AAEjF,MAAI,cAAc,OAAO,QAAQ,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,SAAS,QAAQ,OAAO,QAAQ,GAAG;AAGxF,gBAAc,YAAY,MAAM,GAAG,CAAC;AAEpC,QAAM,YAAY,oBAAoB,UAAU,aAAa,SAAS;AAEtE,SAAO,qBAAqB,aAAa,qBAAqB,WAAW,WAAW;AACtF;AAEO,MAAM,iBAA+B,CAAC,UAAU;AACrD,QAAM,mBAAmB,6BAA6B,OAAO,sBAAsB;AACnF,iCAA+B,kBAAkB,sBAAsB,gBAAgB;AACvF,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,cAAc,IAAI;AAE1E,QAAM,cAAc,OAAO,cAAc;AACzC,QAAM,sBAAsB,uBAAuB,IAAI;AAOvD,QAAM,CAAC,EAAE,MAAM,IAAI,SAAS,CAAC;AAE7B,QAAM,YAA0D;AAAA,IAC9D,CAAC,MAAM;AACL,kBAAY,UAAU,EAAE;AACxB,UAAI;AAAe,sBAAc,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,WAAuD;AAAA,IAC3D,CAAC,MAAM;AACL,YAAM,CAAC,MAAM,SAAS,IAAI,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY,OAAO;AACtG,kBAAY,CAAC,aAAa;AAExB,YAAI,SAAS;AAAU,iBAAO,CAAC,QAAQ,MAAM,CAAC;AAE9C,eAAO;AAAA,MACT,CAAC;AACD,UAAI;AAAc,qBAAa,GAAG,IAAI;AACtC,0BAAoB,MAAM,kBAAkB,EAAE,QAAQ,SAAS,CAAC;AAAA,IAClE;AAAA,IACA,CAAC,aAAa,qBAAqB,YAAY;AAAA,EACjD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,uBAAuB,CAAC,UAAkB;AACrD,QAAM,CAAC,WAAW,IAAI,aAAa,OAAO,MAAM,SAAS,GAAG,EAAE;AAC9D,SAAO;AACT;AAEA,eAAe,cAAc;AACtB,MAAM,2BAA2B,SAAS,cAAc;AAC/D,yBAAyB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from '../utils';\nimport type { DSMaskT } from '../react-desc-prop-types';\nimport { DSMaskHookDefaultProps, DSMaskHookPropsTypes } from '../react-desc-prop-types';\n\nconst zipCodeSpecialChars: [string, number][] = [['-', 5]];\n\nconst conformValue = (rawValue: string, cursorPos: number, lastKeyCode: string) => {\n  // Work with digits only\n  let maskedValue = String(rawValue)\n    .split('')\n    .filter((char) => char >= '0' && char <= '9');\n\n  // We only consider first 9 digits\n  maskedValue = maskedValue.slice(0, 9);\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n\n  return addSpecialCharacters(maskedValue, zipCodeSpecialChars, maskedPos, lastKeyCode);\n};\n\nexport const useZipCodeMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes, 'useZipCodeMask');\n  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n  const scheduleAfterRender = useCallbackAfterRender(true);\n\n  // Some times, the value of the mask is not gonna change (user types invalid char for example)\n  // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n  // But since the input is controlled, the input does not re-render\n  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n  const [, setKey] = useState(0);\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      lastKeyCode.current = e.code;\n      if (userOnKeyDown) userOnKeyDown(e);\n    },\n    [userOnKeyDown],\n  );\n\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current);\n      valueSetter((prevMask) => {\n        // Here we need to update the key\n        if (mask === prevMask) setKey((key) => key + 1);\n\n        return mask;\n      });\n      if (userOnChange) userOnChange(e, mask);\n      scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n    },\n    [valueSetter, scheduleAfterRender, userOnChange],\n  );\n\n  return {\n    onKeyDown,\n    onChange,\n  };\n};\n\nexport const getUseZipMaskedValue = (value: string) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '');\n  return maskedValue;\n};\n\nuseZipCodeMask.displayName = 'useZipCodeMask';\nexport const UseZipCodeMaskWithSchema = describe(useZipCodeMask);\nUseZipCodeMaskWithSchema.propTypes = DSMaskHookPropsTypes;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,QAAQ,gBAAgB;AAC9C,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,8BAA8B;AACvC,SAAS,sBAAsB,qBAAqB,yBAAyB;AAE7E,SAAS,wBAAwB,4BAA4B;AAE7D,MAAM,sBAA0C,CAAC,CAAC,KAAK,CAAC,CAAC;AAEzD,MAAM,eAAe,CAAC,UAAkB,WAAmB,gBAAwB;AAEjF,MAAI,cAAc,OAAO,QAAQ,EAC9B,MAAM,EAAE,EACR,OAAO,CAAC,SAAS,QAAQ,OAAO,QAAQ,GAAG;AAG9C,gBAAc,YAAY,MAAM,GAAG,CAAC;AAEpC,QAAM,YAAY,oBAAoB,UAAU,aAAa,SAAS;AAEtE,SAAO,qBAAqB,aAAa,qBAAqB,WAAW,WAAW;AACtF;AAEO,MAAM,iBAA+B,CAAC,UAAU;AACrD,QAAM,mBAAmB,6BAA6B,OAAO,sBAAsB;AACnF,iCAA+B,kBAAkB,sBAAsB,gBAAgB;AACvF,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,cAAc,IAAI;AAE1E,QAAM,cAAc,OAAO,cAAc;AACzC,QAAM,sBAAsB,uBAAuB,IAAI;AAOvD,QAAM,CAAC,EAAE,MAAM,IAAI,SAAS,CAAC;AAE7B,QAAM,YAA0D;AAAA,IAC9D,CAAC,MAAM;AACL,kBAAY,UAAU,EAAE;AACxB,UAAI;AAAe,sBAAc,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,WAAuD;AAAA,IAC3D,CAAC,MAAM;AACL,YAAM,CAAC,MAAM,SAAS,IAAI,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY,OAAO;AACtG,kBAAY,CAAC,aAAa;AAExB,YAAI,SAAS;AAAU,iBAAO,CAAC,QAAQ,MAAM,CAAC;AAE9C,eAAO;AAAA,MACT,CAAC;AACD,UAAI;AAAc,qBAAa,GAAG,IAAI;AACtC,0BAAoB,MAAM,kBAAkB,EAAE,QAAQ,SAAS,CAAC;AAAA,IAClE;AAAA,IACA,CAAC,aAAa,qBAAqB,YAAY;AAAA,EACjD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,uBAAuB,CAAC,UAAkB;AACrD,QAAM,CAAC,WAAW,IAAI,aAAa,OAAO,MAAM,SAAS,GAAG,EAAE;AAC9D,SAAO;AACT;AAEA,eAAe,cAAc;AACtB,MAAM,2BAA2B,SAAS,cAAc;AAC/D,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/react-desc-prop-types.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { PropTypes } from "@elliemae/ds-utilities";
+import { PropTypes } from "@elliemae/ds-props-helpers";
 const DSMaskHookDefaultProps = {
   onChange: () => null,
   onKeyDown: () => null,

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\n\nexport declare namespace DSMaskT {\n  interface HookArgs {\n    valueSetter: React.Dispatch<React.SetStateAction<string>>;\n    onChange?: (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => void;\n    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n    onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  }\n\n  interface HookReturn {\n    onChange: React.ChangeEventHandler<HTMLInputElement>;\n    onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n    onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  }\n\n  export interface NumberHookArgs extends HookArgs {\n    suffix: string;\n    prefix: string;\n    decimalPlaces: number;\n    allowNegative: boolean;\n    includeThousandsSeparator: boolean;\n    decimalRequired: boolean;\n  }\n\n  export interface PhoneHookArgs extends HookArgs {\n    isInternational: boolean;\n  }\n\n  export interface RegExpHookArgs extends HookArgs {\n    filledMask: boolean;\n  }\n\n  export type Hook = ((args: HookArgs) => HookReturn) & { displayName: string };\n  export type PhoneHook = ((args: PhoneHookArgs) => HookReturn) & { displayName: string };\n  export type NumberHook = ((args: NumberHookArgs) => HookReturn) & { displayName: string };\n}\n\nexport const DSMaskHookDefaultProps: Partial<DSMaskT.HookReturn> = {\n  onChange: () => null,\n  onKeyDown: () => null,\n  onBlur: () => null,\n};\n\nexport const DSMaskPhoneHookDefaultProps: Partial<DSMaskT.PhoneHookArgs> = {\n  ...DSMaskHookDefaultProps,\n  isInternational: false,\n};\nexport const DSMaskRegExpHookDefaultProps: Partial<DSMaskT.RegExpHookArgs> = {\n  ...DSMaskHookDefaultProps,\n  filledMask: false,\n};\n\nexport const DSMaskNumberHookDefaultProps: Partial<DSMaskT.NumberHookArgs> = {\n  ...DSMaskHookDefaultProps,\n  suffix: '',\n  prefix: '',\n  decimalPlaces: 2,\n  allowNegative: false,\n  includeThousandsSeparator: true,\n  decimalRequired: false,\n};\n\nexport const DSMaskHookPropsTypes = {\n  valueSetter: PropTypes.func.description('React set state function for the value').isRequired,\n  onChange: PropTypes.func.description('Callback for onChange'),\n  onKeyDown: PropTypes.func.description('Callback for onKeyDown'),\n} as WeakValidationMap<unknown>;\n\nexport const DSMaskRegExpHookPropsTypes = {\n  ...DSMaskHookPropsTypes,\n  regExp: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)])).description(\n    'Array with regexp or special chars per character',\n  ).isRequired,\n  filledMask: PropTypes.bool.description('Show blank chars positions').defaultValue(false),\n} as WeakValidationMap<unknown>;\n\nexport const DSMaskPhoneHookPropsTypes = {\n  ...DSMaskHookPropsTypes,\n  isInternational: PropTypes.bool.description('Use or not internaltional phone mask number').defaultValue(false),\n} as WeakValidationMap<unknown>;\n\nexport const DSMaskNumberHookPropsTypes = {\n  ...DSMaskHookPropsTypes,\n  suffix: PropTypes.string.description('String will be added at the end of the input value').defaultValue(''),\n  prefix: PropTypes.string.description('String will be added at the start of the input value').defaultValue(''),\n  decimalPlaces: PropTypes.number.description('Number of decimals allowed').defaultValue(2),\n  allowNegative: PropTypes.bool.description('Wether the input allows negative number').defaultValue(false),\n  includeThousandsSeparator: PropTypes.bool\n    .description('Wether the integer part will be separated by thousands')\n    .defaultValue(true),\n  decimalRequired: PropTypes.bool.description('Wether decimal part is mandatory').defaultValue(false),\n} as WeakValidationMap<unknown>;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\n\nexport declare namespace DSMaskT {\n  interface HookArgs {\n    valueSetter: React.Dispatch<React.SetStateAction<string>>;\n    onChange?: (e: React.ChangeEvent<HTMLInputElement>, mask?: string) => void;\n    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n    onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  }\n\n  interface HookReturn {\n    onChange: React.ChangeEventHandler<HTMLInputElement>;\n    onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;\n    onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  }\n\n  export interface NumberHookArgs extends HookArgs {\n    suffix: string;\n    prefix: string;\n    decimalPlaces: number;\n    allowNegative: boolean;\n    includeThousandsSeparator: boolean;\n    decimalRequired: boolean;\n  }\n\n  export interface PhoneHookArgs extends HookArgs {\n    isInternational: boolean;\n  }\n\n  export interface RegExpHookArgs extends HookArgs {\n    filledMask: boolean;\n  }\n\n  export type Hook = ((args: HookArgs) => HookReturn) & { displayName: string };\n  export type PhoneHook = ((args: PhoneHookArgs) => HookReturn) & { displayName: string };\n  export type NumberHook = ((args: NumberHookArgs) => HookReturn) & { displayName: string };\n}\n\nexport const DSMaskHookDefaultProps: Partial<DSMaskT.HookReturn> = {\n  onChange: () => null,\n  onKeyDown: () => null,\n  onBlur: () => null,\n};\n\nexport const DSMaskPhoneHookDefaultProps: Partial<DSMaskT.PhoneHookArgs> = {\n  ...DSMaskHookDefaultProps,\n  isInternational: false,\n};\nexport const DSMaskRegExpHookDefaultProps: Partial<DSMaskT.RegExpHookArgs> = {\n  ...DSMaskHookDefaultProps,\n  filledMask: false,\n};\n\nexport const DSMaskNumberHookDefaultProps: Partial<DSMaskT.NumberHookArgs> = {\n  ...DSMaskHookDefaultProps,\n  suffix: '',\n  prefix: '',\n  decimalPlaces: 2,\n  allowNegative: false,\n  includeThousandsSeparator: true,\n  decimalRequired: false,\n};\n\nexport const DSMaskHookPropsTypes = {\n  valueSetter: PropTypes.func.description('React set state function for the value').isRequired,\n  onChange: PropTypes.func.description('Callback for onChange'),\n  onKeyDown: PropTypes.func.description('Callback for onKeyDown'),\n} as WeakValidationMap<unknown>;\n\nexport const DSMaskRegExpHookPropsTypes = {\n  ...DSMaskHookPropsTypes,\n  regExp: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)])).description(\n    'Array with regexp or special chars per character',\n  ).isRequired,\n  filledMask: PropTypes.bool.description('Show blank chars positions').defaultValue(false),\n} as WeakValidationMap<unknown>;\n\nexport const DSMaskPhoneHookPropsTypes = {\n  ...DSMaskHookPropsTypes,\n  isInternational: PropTypes.bool.description('Use or not internaltional phone mask number').defaultValue(false),\n} as WeakValidationMap<unknown>;\n\nexport const DSMaskNumberHookPropsTypes = {\n  ...DSMaskHookPropsTypes,\n  suffix: PropTypes.string.description('String will be added at the end of the input value').defaultValue(''),\n  prefix: PropTypes.string.description('String will be added at the start of the input value').defaultValue(''),\n  decimalPlaces: PropTypes.number.description('Number of decimals allowed').defaultValue(2),\n  allowNegative: PropTypes.bool.description('Wether the input allows negative number').defaultValue(false),\n  includeThousandsSeparator: PropTypes.bool\n    .description('Wether the integer part will be separated by thousands')\n    .defaultValue(true),\n  decimalRequired: PropTypes.bool.description('Wether decimal part is mandatory').defaultValue(false),\n} as WeakValidationMap<unknown>;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAwCnB,MAAM,yBAAsD;AAAA,EACjE,UAAU,MAAM;AAAA,EAChB,WAAW,MAAM;AAAA,EACjB,QAAQ,MAAM;AAChB;AAEO,MAAM,8BAA8D;AAAA,EACzE,GAAG;AAAA,EACH,iBAAiB;AACnB;AACO,MAAM,+BAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,YAAY;AACd;AAEO,MAAM,+BAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,eAAe;AAAA,EACf,2BAA2B;AAAA,EAC3B,iBAAiB;AACnB;AAEO,MAAM,uBAAuB;AAAA,EAClC,aAAa,UAAU,KAAK,YAAY,wCAAwC,EAAE;AAAA,EAClF,UAAU,UAAU,KAAK,YAAY,uBAAuB;AAAA,EAC5D,WAAW,UAAU,KAAK,YAAY,wBAAwB;AAChE;AAEO,MAAM,6BAA6B;AAAA,EACxC,GAAG;AAAA,EACH,QAAQ,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,WAAW,MAAM,CAAC,CAAC,CAAC,EAAE;AAAA,IAC/F;AAAA,EACF,EAAE;AAAA,EACF,YAAY,UAAU,KAAK,YAAY,4BAA4B,EAAE,aAAa,KAAK;AACzF;AAEO,MAAM,4BAA4B;AAAA,EACvC,GAAG;AAAA,EACH,iBAAiB,UAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,KAAK;AAC/G;AAEO,MAAM,6BAA6B;AAAA,EACxC,GAAG;AAAA,EACH,QAAQ,UAAU,OAAO,YAAY,oDAAoD,EAAE,aAAa,EAAE;AAAA,EAC1G,QAAQ,UAAU,OAAO,YAAY,sDAAsD,EAAE,aAAa,EAAE;AAAA,EAC5G,eAAe,UAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,CAAC;AAAA,EACxF,eAAe,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EACvG,2BAA2B,UAAU,KAClC,YAAY,wDAAwD,EACpE,aAAa,IAAI;AAAA,EACpB,iBAAiB,UAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,KAAK;AACpG;",
   "names": []
 }

package/dist/types/hooks/useNumberMask.d.ts

@@ -1,4 +1,4 @@
 import type { DSMaskT } from '../react-desc-prop-types';
 export declare const useNumberMask: DSMaskT.NumberHook;
 export declare const getNumberMaskedValue: (value: string, opts: DSMaskT.NumberHookArgs) => string;
-export declare const UseNumberMaskWithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<DSMaskT.NumberHookArgs>;
+export declare const UseNumberMaskWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<DSMaskT.NumberHookArgs>;

package/dist/types/hooks/usePhoneMask.d.ts

@@ -1,4 +1,4 @@
 import type { DSMaskT } from '../react-desc-prop-types';
 export declare const usePhoneMask: DSMaskT.Hook;
 export declare const getPhoneMaskedValue: (value: string, opts: Partial<DSMaskT.PhoneHookArgs>) => string;
-export declare const UsePhoneMaskWithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<DSMaskT.HookArgs>;
+export declare const UsePhoneMaskWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<DSMaskT.HookArgs>;

package/dist/types/hooks/useRegExpMask.d.ts

@@ -1,3 +1,3 @@
 import type { DSMaskT } from '../react-desc-prop-types';
 export declare const useRegExpMask: DSMaskT.Hook;
-export declare const UseRegExpMaskWithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<DSMaskT.HookArgs>;
+export declare const UseRegExpMaskWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<DSMaskT.HookArgs>;

package/dist/types/hooks/useSSNMask.d.ts

@@ -1,4 +1,4 @@
 import type { DSMaskT } from '../react-desc-prop-types';
 export declare const useSSNMask: DSMaskT.Hook;
 export declare const getSSNMaskedValue: (value: string) => string;
-export declare const UseSSNMaskWithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<DSMaskT.HookArgs>;
+export declare const UseSSNMaskWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<DSMaskT.HookArgs>;

package/dist/types/hooks/useZipCodeMask.d.ts

@@ -1,4 +1,4 @@
 import type { DSMaskT } from '../react-desc-prop-types';
 export declare const useZipCodeMask: DSMaskT.Hook;
 export declare const getUseZipMaskedValue: (value: string) => string;
-export declare const UseZipCodeMaskWithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<DSMaskT.HookArgs>;
+export declare const UseZipCodeMaskWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<DSMaskT.HookArgs>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-helpers-mask-hooks",
-  "version": "3.16.0-next.2",
+  "version": "3.16.0-next.4",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Helpers - Text Masks Hooks",
   "files": [
@@ -35,8 +35,9 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-system": "3.16.0-next.2",
-    "@elliemae/ds-utilities": "3.16.0-next.2"
+    "@elliemae/ds-props-helpers": "3.16.0-next.4",
+    "@elliemae/ds-system": "3.16.0-next.4",
+    "@elliemae/ds-utilities": "3.16.0-next.4"
   },
   "devDependencies": {
     "@elliemae/pui-theme": "~2.6.0",
@@ -45,7 +46,7 @@
     "@testing-library/user-event": "~13.5.0",
     "styled-components": "~5.3.6",
     "styled-system": "~5.1.5",
-    "@elliemae/ds-form-input-text": "3.16.0-next.2"
+    "@elliemae/ds-form-input-text": "3.16.0-next.4"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.6.0",
@@ -65,7 +66,7 @@
     "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
     "dts": "node ../../scripts/dts.mjs",
     "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
-    "dev:build": "pnpm --filter {.}... build && pnpm --filter {.}... dts",
+    "dev:build": "pnpm --filter {.}... build",
     "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
     "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
   }