@elliemae/ds-controlled-form 3.0.0-alpha.3 → 3.0.0-next.11

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/mask-hook/hooks/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './usePhoneMask';\nexport * from './useNumberMask';\nexport * from './useSSNMask';\nexport * from './useZipCode';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;",
+  "names": []
+}

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

@@ -0,0 +1,138 @@
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+import { useCallback, useRef, useState } from "react";
+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);
+const conformValue = (rawValue, cursorPos, lastKeyCode, opts) => {
+  const { includeThousandsSeparator, allowNegative, prefix, suffix, decimalPlaces, decimalRequired } = opts;
+  const THOUSANDSSEPARATOR = ",";
+  let dotIdx = -1;
+  let finalPrefix = [prefix.length, 0].includes(rawValue.indexOf("-")) && allowNegative ? "-" : "";
+  let maskedValue = rawValue.split("").filter((char, idx) => {
+    const validChar = char >= "0" && char <= "9" || char === "." && dotIdx === -1 && decimalPlaces;
+    if (char === "." && validChar)
+      dotIdx = idx;
+    return validChar;
+  });
+  if (prefix && maskedValue.length)
+    finalPrefix += prefix;
+  while (maskedValue.length >= 2 && maskedValue[0] === "0" && maskedValue[1] !== ".") {
+    maskedValue = maskedValue.splice(1);
+  }
+  dotIdx = maskedValue.findIndex((char) => char === ".");
+  let integer = maskedValue.slice(0, dotIdx !== -1 ? dotIdx : maskedValue.length);
+  const decimal = maskedValue.slice(dotIdx, dotIdx + decimalPlaces + 1);
+  if (includeThousandsSeparator) {
+    integer = addThousandsSeparator(integer.join(""), THOUSANDSSEPARATOR).split("");
+  }
+  if (dotIdx !== -1 && !(lastKeyCode === "Backspace" && decimal.length === 1)) {
+    if (integer.length) {
+      maskedValue = [...integer, ...decimal];
+    } else {
+      maskedValue = ["0", ...decimal];
+    }
+  } else {
+    maskedValue = decimalRequired && integer.length ? [...integer, "."] : integer;
+  }
+  if (lastKeyCode === "Backspace" && maskedValue.length === 0) {
+    finalPrefix = "";
+  }
+  let maskedPos = 0;
+  if (maskedValue[maskedPos] === "0" && cursorPos === 1 + prefix.length)
+    maskedPos += 1;
+  for (let i = 0; i < cursorPos; i += 1) {
+    if (maskedValue[maskedPos] === THOUSANDSSEPARATOR)
+      maskedPos += 1;
+    if (maskedValue[maskedPos] === rawValue[i])
+      maskedPos += 1;
+  }
+  maskedPos += finalPrefix.length;
+  const finalSuffix = maskedValue.length ? suffix : "";
+  const maskedValueString = finalPrefix + maskedValue.join("") + finalSuffix;
+  return [maskedValueString, maskedPos];
+};
+const useNumberMask = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskNumberHookDefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, DSMaskNumberHookPropsTypes);
+  const _a = propsWithDefault, {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown,
+    onBlur: userOnBlur
+  } = _a, opts = __objRest(_a, [
+    "valueSetter",
+    "onChange",
+    "onKeyDown",
+    "onBlur"
+  ]);
+  const lastKeyCode = useRef("Unidentified");
+  const scheduleAfterRender = useCallbackAfterRender();
+  const [, setKey] = useState(0);
+  const onBlur = useCallback((e) => {
+    const maskedValue = e.target.value;
+    const dotIdx = maskedValue.indexOf(".");
+    const minusIndex = maskedValue.indexOf("-");
+    const { decimalRequired, decimalPlaces, suffix } = opts;
+    if (decimalRequired) {
+      if (dotIdx > -1) {
+        const decimal = maskedValue.slice(dotIdx + 1);
+        let zerosRest = "";
+        while (decimal.length + zerosRest.length !== decimalPlaces) {
+          zerosRest += "0";
+        }
+        valueSetter(maskedValue + zerosRest);
+      }
+    } else if (maskedValue.length - suffix.length - 1 === dotIdx) {
+      valueSetter(maskedValue.replace(".", ""));
+    } else if (maskedValue.length - 1 === minusIndex) {
+      valueSetter(maskedValue.replace("-", ""));
+    }
+    if (userOnBlur)
+      userOnBlur(e);
+  }, [userOnBlur, valueSetter, opts]);
+  const onKeyDown = useCallback((e) => {
+    lastKeyCode.current = e.code;
+    if (userOnKeyDown)
+      userOnKeyDown(e);
+  }, [userOnKeyDown]);
+  const onChange = useCallback((e) => {
+    const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current, opts);
+    valueSetter((prevMask) => {
+      if (mask === prevMask)
+        setKey((key) => key + 1);
+      return mask;
+    });
+    if (userOnChange)
+      userOnChange(e, mask);
+    scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, userOnChange, opts]);
+  return {
+    onKeyDown,
+    onChange,
+    onBlur
+  };
+};
+const UseNumberMaskWithSchema = describe(useNumberMask);
+UseNumberMaskWithSchema.propTypes = DSMaskNumberHookPropsTypes;
+export {
+  UseNumberMaskWithSchema,
+  useNumberMask
+};
+//# sourceMappingURL=useNumberMask.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/mask-hook/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 React, { 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 { DSMaskNumberHookDefaultProps, DSMaskNumberHookPropsTypes, DSMaskT } 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 = 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);\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();\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      const { decimalRequired, decimalPlaces, suffix } = opts;\n      if (decimalRequired) {\n        if (dotIdx > -1) {\n          const decimal = maskedValue.slice(dotIdx + 1);\n          let zerosRest = '';\n          while (decimal.length + zerosRest.length !== decimalPlaces) {\n            zerosRest += '0';\n          }\n          valueSetter(maskedValue + zerosRest);\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 UseNumberMaskWithSchema = describe(useNumberMask);\nUseNumberMaskWithSchema.propTypes = DSMaskNumberHookPropsTypes;\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,81 @@
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+import { useCallback, useRef, useState } from "react";
+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 = [
+  ["(", 0],
+  [") ", 4],
+  ["-", 9]
+];
+const internationalPhoneSpecialChars = [
+  ["+1 (", 0],
+  [") ", 7],
+  ["-", 12]
+];
+const conformValue = (rawValue, cursorPos, lastKeyCode, opts) => {
+  const characters = rawValue.split("");
+  const { isInternational } = opts;
+  let maskedValue = characters.filter((char, idx, array) => {
+    if (isInternational && idx === 1 && char === "1" && array[0] === "+") {
+      return false;
+    }
+    return char >= "0" && char <= "9";
+  });
+  while (maskedValue.length && maskedValue[0] === "0")
+    maskedValue.splice(0, 1);
+  maskedValue = maskedValue.slice(0, 10);
+  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);
+  return addSpecialCharacters(maskedValue, isInternational ? internationalPhoneSpecialChars : phoneSpecialChars, maskedPos, lastKeyCode);
+};
+const usePhoneMask = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskPhoneHookDefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, DSMaskPhoneHookPropsTypes);
+  const _a = propsWithDefault, { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown, onBlur } = _a, opts = __objRest(_a, ["valueSetter", "onChange", "onKeyDown", "onBlur"]);
+  const lastKeyCode = useRef("Unidentified");
+  const scheduleAfterRender = useCallbackAfterRender();
+  const [, setKey] = useState(0);
+  const onKeyDown = useCallback((e) => {
+    lastKeyCode.current = e.code;
+    if (userOnKeyDown)
+      userOnKeyDown(e);
+  }, [userOnKeyDown]);
+  const onChange = useCallback((e) => {
+    const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current, opts);
+    valueSetter((prevMask) => {
+      if (mask === prevMask)
+        setKey((key) => key + 1);
+      return mask;
+    });
+    if (userOnChange)
+      userOnChange(e, mask);
+    scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, opts, userOnChange]);
+  return {
+    onKeyDown,
+    onChange
+  };
+};
+const UsePhoneMaskWithSchema = describe(usePhoneMask);
+UsePhoneMaskWithSchema.propTypes = DSMaskPhoneHookPropsTypes;
+export {
+  UsePhoneMaskWithSchema,
+  usePhoneMask
+};
+//# sourceMappingURL=usePhoneMask.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/mask-hook/hooks/usePhoneMask.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport React, { 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 { DSMaskPhoneHookPropsTypes, DSMaskPhoneHookDefaultProps, DSMaskT } 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 = 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);\n  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown, onBlur, ...opts } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender();\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 UsePhoneMaskWithSchema = describe(usePhoneMask);\nUsePhoneMaskWithSchema.propTypes = DSMaskPhoneHookPropsTypes;\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA,MAAM,oBAAwC;AAAA,EAC5C,CAAC,KAAK;AAAA,EACN,CAAC,MAAM;AAAA,EACP,CAAC,KAAK;AAAA;AAGR,MAAM,iCAAqD;AAAA,EACzD,CAAC,QAAQ;AAAA,EACT,CAAC,MAAM;AAAA,EACP,CAAC,KAAK;AAAA;AAGR,MAAM,eAAe,CACnB,UACA,WACA,aACA,SACG;AACH,QAAM,aAAa,SAAS,MAAM;AAElC,QAAM,EAAE,oBAAoB;AAC5B,MAAI,cAAc,WAAW,OAAO,CAAC,MAAM,KAAK,UAAU;AACxD,QAAI,mBAAmB,QAAQ,KAAK,SAAS,OAAO,MAAM,OAAO,KAAK;AACpE,aAAO;AAAA;AAET,WAAO,QAAQ,OAAO,QAAQ;AAAA;AAGhC,SAAO,YAAY,UAAU,YAAY,OAAO;AAAK,gBAAY,OAAO,GAAG;AAG3E,gBAAc,YAAY,MAAM,GAAG;AAEnC,QAAM,YAAY,oBAAoB,UAAU,aAAa;AAE7D,SAAO,qBACL,aACA,kBAAkB,iCAAiC,mBACnD,WACA;AAAA;AAIG,MAAM,eAA6B,CAAC,UAAU;AACnD,QAAM,mBAAmB,6BAA6B,OAAO;AAC7D,iCAA+B,kBAAkB;AACjD,QAA2F,uBAAnF,eAAa,UAAU,cAAc,WAAW,eAAe,WAAoB,IAAT,iBAAS,IAAT,CAA1E,eAAa,YAAwB,aAA0B;AAEvE,QAAM,cAAc,OAAO;AAE3B,QAAM,sBAAsB;AAO5B,QAAM,CAAC,EAAE,UAAU,SAAS;AAE5B,QAAM,YAA0D,YAC9D,CAAC,MAAM;AACL,gBAAY,UAAU,EAAE;AACxB,QAAI;AAAe,oBAAc;AAAA,KAEnC,CAAC;AAGH,QAAM,WAAuD,YAC3D,CAAC,MAAM;AACL,UAAM,CAAC,MAAM,aAAa,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY,SAAS;AAExG,gBAAY,CAAC,aAAa;AAExB,UAAI,SAAS;AAAU,eAAO,CAAC,QAAQ,MAAM;AAC7C,aAAO;AAAA;AAGT,QAAI;AAAc,mBAAa,GAAG;AAElC,wBAAoB,MAAM,kBAAkB,EAAE,QAAQ;AAAA,KAExD,CAAC,aAAa,qBAAqB,MAAM;AAG3C,SAAO;AAAA,IACL;AAAA,IACA;AAAA;AAAA;AAIG,MAAM,yBAAyB,SAAS;AAC/C,uBAAuB,YAAY;",
+  "names": []
+}

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { useCallback, useRef, useState } from "react";
+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 = [
+  ["-", 3],
+  ["-", 6]
+];
+const conformValue = (rawValue, cursorPos, lastKeyCode) => {
+  let maskedValue = rawValue.split("").filter((char) => char >= "0" && char <= "9");
+  while (maskedValue.length && maskedValue[0] === "0")
+    maskedValue.splice(0, 1);
+  maskedValue = maskedValue.slice(0, 9);
+  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);
+  return addSpecialCharacters(maskedValue, ssnSpecialChars, maskedPos, lastKeyCode);
+};
+const useSSNMask = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes);
+  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;
+  const lastKeyCode = useRef("Unidentified");
+  const scheduleAfterRender = useCallbackAfterRender();
+  const [, setKey] = useState(0);
+  const onKeyDown = useCallback((e) => {
+    lastKeyCode.current = e.code;
+    if (userOnKeyDown)
+      userOnKeyDown(e);
+  }, [userOnKeyDown]);
+  const onChange = useCallback((e) => {
+    const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current);
+    valueSetter((prevMask) => {
+      if (mask === prevMask)
+        setKey((key) => key + 1);
+      return mask;
+    });
+    if (userOnChange)
+      userOnChange(e, mask);
+    scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, userOnChange]);
+  return {
+    onKeyDown,
+    onChange
+  };
+};
+const UseSSNMaskWithSchema = describe(useSSNMask);
+UseSSNMaskWithSchema.propTypes = DSMaskHookPropsTypes;
+export {
+  UseSSNMaskWithSchema,
+  useSSNMask
+};
+//# sourceMappingURL=useSSNMask.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/mask-hook/hooks/useSSNMask.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { 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 { DSMaskHookDefaultProps, DSMaskHookPropsTypes, DSMaskT } 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 = 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);\n\n  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender();\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 UseSSNMaskWithSchema = describe(useSSNMask);\nUseSSNMaskWithSchema.propTypes = DSMaskHookPropsTypes;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,kBAAsC;AAAA,EAC1C,CAAC,KAAK;AAAA,EACN,CAAC,KAAK;AAAA;AAGR,MAAM,eAAe,CAAC,UAAkB,WAAmB,gBAAwB;AAEjF,MAAI,cAAc,SAAS,MAAM,IAAI,OAAO,CAAC,SAAS,QAAQ,OAAO,QAAQ;AAG7E,SAAO,YAAY,UAAU,YAAY,OAAO;AAAK,gBAAY,OAAO,GAAG;AAG3E,gBAAc,YAAY,MAAM,GAAG;AAEnC,QAAM,YAAY,oBAAoB,UAAU,aAAa;AAE7D,SAAO,qBAAqB,aAAa,iBAAiB,WAAW;AAAA;AAGhE,MAAM,aAA2B,CAAC,UAAU;AACjD,QAAM,mBAAmB,6BAA6B,OAAO;AAC7D,iCAA+B,kBAAkB;AAEjD,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,kBAAkB;AAE1E,QAAM,cAAc,OAAO;AAE3B,QAAM,sBAAsB;AAO5B,QAAM,CAAC,EAAE,UAAU,SAAS;AAE5B,QAAM,YAA0D,YAC9D,CAAC,MAAM;AACL,gBAAY,UAAU,EAAE;AACxB,QAAI;AAAe,oBAAc;AAAA,KAEnC,CAAC;AAGH,QAAM,WAAuD,YAC3D,CAAC,MAAM;AACL,UAAM,CAAC,MAAM,aAAa,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY;AAC/F,gBAAY,CAAC,aAAa;AAExB,UAAI,SAAS;AAAU,eAAO,CAAC,QAAQ,MAAM;AAE7C,aAAO;AAAA;AAET,QAAI;AAAc,mBAAa,GAAG;AAClC,wBAAoB,MAAM,kBAAkB,EAAE,QAAQ;AAAA,KAExD,CAAC,aAAa,qBAAqB;AAGrC,SAAO;AAAA,IACL;AAAA,IACA;AAAA;AAAA;AAIG,MAAM,uBAAuB,SAAS;AAC7C,qBAAqB,YAAY;",
+  "names": []
+}

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

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { useCallback, useRef, useState } from "react";
+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]];
+const conformValue = (rawValue, cursorPos, lastKeyCode) => {
+  let maskedValue = rawValue.split("").filter((char) => char >= "0" && char <= "9");
+  maskedValue = maskedValue.slice(0, 6);
+  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);
+  return addSpecialCharacters(maskedValue, zipCodeSpecialChars, maskedPos, lastKeyCode);
+};
+const useZipCode = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes);
+  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;
+  const lastKeyCode = useRef("Unidentified");
+  const scheduleAfterRender = useCallbackAfterRender();
+  const [, setKey] = useState(0);
+  const onKeyDown = useCallback((e) => {
+    lastKeyCode.current = e.code;
+    if (userOnKeyDown)
+      userOnKeyDown(e);
+  }, [userOnKeyDown]);
+  const onChange = useCallback((e) => {
+    const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current);
+    valueSetter((prevMask) => {
+      if (mask === prevMask)
+        setKey((key) => key + 1);
+      return mask;
+    });
+    if (userOnChange)
+      userOnChange(e, mask);
+    scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, userOnChange]);
+  return {
+    onKeyDown,
+    onChange
+  };
+};
+const UseZipCodeMaskWithSchema = describe(useZipCode);
+UseZipCodeMaskWithSchema.propTypes = DSMaskHookPropsTypes;
+export {
+  UseZipCodeMaskWithSchema,
+  useZipCode
+};
+//# sourceMappingURL=useZipCode.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/mask-hook/hooks/useZipCode.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { 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 { DSMaskHookDefaultProps, DSMaskHookPropsTypes, DSMaskT } 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 = rawValue.split('').filter((char) => char >= '0' && char <= '9');\n\n  // We only consider first 5 digits\n  maskedValue = maskedValue.slice(0, 6);\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n\n  return addSpecialCharacters(maskedValue, zipCodeSpecialChars, maskedPos, lastKeyCode);\n};\n\nexport const useZipCode: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes);\n\n  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\n\n  const scheduleAfterRender = useCallbackAfterRender();\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 UseZipCodeMaskWithSchema = describe(useZipCode);\nUseZipCodeMaskWithSchema.propTypes = DSMaskHookPropsTypes;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,sBAA0C,CAAC,CAAC,KAAK;AAEvD,MAAM,eAAe,CAAC,UAAkB,WAAmB,gBAAwB;AAEjF,MAAI,cAAc,SAAS,MAAM,IAAI,OAAO,CAAC,SAAS,QAAQ,OAAO,QAAQ;AAG7E,gBAAc,YAAY,MAAM,GAAG;AAEnC,QAAM,YAAY,oBAAoB,UAAU,aAAa;AAE7D,SAAO,qBAAqB,aAAa,qBAAqB,WAAW;AAAA;AAGpE,MAAM,aAA2B,CAAC,UAAU;AACjD,QAAM,mBAAmB,6BAA6B,OAAO;AAC7D,iCAA+B,kBAAkB;AAEjD,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,kBAAkB;AAE1E,QAAM,cAAc,OAAO;AAE3B,QAAM,sBAAsB;AAO5B,QAAM,CAAC,EAAE,UAAU,SAAS;AAE5B,QAAM,YAA0D,YAC9D,CAAC,MAAM;AACL,gBAAY,UAAU,EAAE;AACxB,QAAI;AAAe,oBAAc;AAAA,KAEnC,CAAC;AAGH,QAAM,WAAuD,YAC3D,CAAC,MAAM;AACL,UAAM,CAAC,MAAM,aAAa,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY;AAC/F,gBAAY,CAAC,aAAa;AAExB,UAAI,SAAS;AAAU,eAAO,CAAC,QAAQ,MAAM;AAE7C,aAAO;AAAA;AAET,QAAI;AAAc,mBAAa,GAAG;AAClC,wBAAoB,MAAM,kBAAkB,EAAE,QAAQ;AAAA,KAExD,CAAC,aAAa,qBAAqB;AAGrC,SAAO;AAAA,IACL;AAAA,IACA;AAAA;AAAA;AAIG,MAAM,2BAA2B,SAAS;AACjD,yBAAyB,YAAY;",
+  "names": []
+}

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

@@ -0,0 +1,3 @@
+import * as React from "react";
+export * from "./hooks";
+//# sourceMappingURL=index.js.map

package/dist/esm/mask-hook/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/mask-hook/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './hooks';\nexport type { DSMaskT } from './react-desc-prop-types';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

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

@@ -0,0 +1,62 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import { PropTypes } from "@elliemae/ds-props-helpers";
+const DSMaskHookDefaultProps = {
+  onChange: () => null,
+  onKeyDown: () => null,
+  onBlur: () => null
+};
+const DSMaskPhoneHookDefaultProps = __spreadProps(__spreadValues({}, DSMaskHookDefaultProps), {
+  isInternational: false
+});
+const DSMaskNumberHookDefaultProps = __spreadProps(__spreadValues({}, DSMaskHookDefaultProps), {
+  suffix: "",
+  prefix: "",
+  decimalPlaces: 2,
+  allowNegative: false,
+  includeThousandsSeparator: true,
+  decimalRequired: false
+});
+const DSMaskHookPropsTypes = {
+  valueSetter: PropTypes.func.description("React set state function for the value").isRequired,
+  onChange: PropTypes.func.description("Callback for onChange"),
+  onKeyDown: PropTypes.func.description("Callback for onKeyDown")
+};
+const DSMaskPhoneHookPropsTypes = __spreadProps(__spreadValues({}, DSMaskHookPropsTypes), {
+  isInternational: PropTypes.bool.description("Use or not internaltional phone mask number").defaultValue(false)
+});
+const DSMaskNumberHookPropsTypes = __spreadProps(__spreadValues({}, DSMaskHookPropsTypes), {
+  suffix: PropTypes.string.description("String will be added at the end of the input value").defaultValue(""),
+  prefix: PropTypes.string.description("String will be added at the start of the input value").defaultValue(""),
+  decimalPlaces: PropTypes.number.description("Number of decimals allowed").defaultValue(2),
+  allowNegative: PropTypes.bool.description("Wether the input allows negative number").defaultValue(false),
+  includeThousandsSeparator: PropTypes.bool.description("Wether the integer part will be separated by thousands").defaultValue(true),
+  decimalRequired: PropTypes.bool.description("Wether decimal part is mandatory").defaultValue(false)
+});
+export {
+  DSMaskHookDefaultProps,
+  DSMaskHookPropsTypes,
+  DSMaskNumberHookDefaultProps,
+  DSMaskNumberHookPropsTypes,
+  DSMaskPhoneHookDefaultProps,
+  DSMaskPhoneHookPropsTypes
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/mask-hook/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\nimport React, { WeakValidationMap } 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 type Hook = (args: HookArgs) => HookReturn;\n  export type PhoneHook = (args: PhoneHookArgs) => HookReturn;\n  export type NumberHook = (args: NumberHookArgs) => HookReturn;\n}\n\nexport const DSMaskHookDefaultProps: Partial<DSMaskT.PhoneHookArgs> = {\n  onChange: () => null,\n  onKeyDown: () => null,\n  onBlur: () => null,\n};\n\nexport const DSMaskPhoneHookDefaultProps: Partial<DSMaskT.PhoneHookArgs> = {\n  ...DSMaskHookDefaultProps,\n  isInternational: 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 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;ACAA;AAmCO,MAAM,yBAAyD;AAAA,EACpE,UAAU,MAAM;AAAA,EAChB,WAAW,MAAM;AAAA,EACjB,QAAQ,MAAM;AAAA;AAGT,MAAM,8BAA8D,iCACtE,yBADsE;AAAA,EAEzE,iBAAiB;AAAA;AAGZ,MAAM,+BAAgE,iCACxE,yBADwE;AAAA,EAE3E,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,eAAe;AAAA,EACf,2BAA2B;AAAA,EAC3B,iBAAiB;AAAA;AAGZ,MAAM,uBAAuB;AAAA,EAClC,aAAa,UAAU,KAAK,YAAY,0CAA0C;AAAA,EAClF,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,WAAW,UAAU,KAAK,YAAY;AAAA;AAGjC,MAAM,4BAA4B,iCACpC,uBADoC;AAAA,EAEvC,iBAAiB,UAAU,KAAK,YAAY,+CAA+C,aAAa;AAAA;AAGnG,MAAM,6BAA6B,iCACrC,uBADqC;AAAA,EAExC,QAAQ,UAAU,OAAO,YAAY,sDAAsD,aAAa;AAAA,EACxG,QAAQ,UAAU,OAAO,YAAY,wDAAwD,aAAa;AAAA,EAC1G,eAAe,UAAU,OAAO,YAAY,8BAA8B,aAAa;AAAA,EACvF,eAAe,UAAU,KAAK,YAAY,2CAA2C,aAAa;AAAA,EAClG,2BAA2B,UAAU,KAClC,YAAY,0DACZ,aAAa;AAAA,EAChB,iBAAiB,UAAU,KAAK,YAAY,oCAAoC,aAAa;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+const addSpecialCharacters = (maskWithoutSpecialChars, specialCharsDescr, maskedPos, lastKeyCode) => {
+  const finalMask = maskWithoutSpecialChars;
+  let finalMaskedPos = maskedPos;
+  specialCharsDescr.forEach(([chars, pos]) => {
+    if (finalMask.length > pos) {
+      finalMask.splice(pos, 0, ...chars);
+      if (finalMaskedPos >= pos)
+        finalMaskedPos += chars.length;
+    }
+  });
+  if (lastKeyCode !== "Backspace" && finalMaskedPos < finalMask.length) {
+    specialCharsDescr.forEach(([chars, pos]) => {
+      if (finalMaskedPos === pos)
+        finalMaskedPos += chars.length;
+    });
+  } else if (lastKeyCode === "Backspace" && finalMaskedPos) {
+    specialCharsDescr.forEach(([chars, pos]) => {
+      if (pos + 1 <= finalMaskedPos && finalMaskedPos <= pos + chars.length)
+        finalMaskedPos = pos;
+    });
+  }
+  return [finalMask.join(""), finalMaskedPos];
+};
+export {
+  addSpecialCharacters
+};
+//# sourceMappingURL=addSpecialCharacters.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/mask-hook/utils/addSpecialCharacters.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/**\n *\n * @param {string[]} maskWithoutSpecialChars An array of characters with the unfinished mask\n * @param {[string, number][]} specialCharsDescr An array of tuples. Each tuple contains a string and a position (What string to add in a particular position)\n * @param {number} maskedPos Current masked position\n * @param {string} lastKeyCode Last key code of the user\n * @returns {[string, number]} A tuple containing the final mask and the final masked position\n */\nexport const addSpecialCharacters = (\n  maskWithoutSpecialChars: string[],\n  specialCharsDescr: [string, number][],\n  maskedPos: number,\n  lastKeyCode: string,\n): [string, number] => {\n  const finalMask = maskWithoutSpecialChars;\n  let finalMaskedPos = maskedPos;\n\n  // We insert the special chars in the respective positions, tweaking the masked pos\n  specialCharsDescr.forEach(([chars, pos]) => {\n    if (finalMask.length > pos) {\n      finalMask.splice(pos, 0, ...chars);\n      if (finalMaskedPos >= pos) finalMaskedPos += chars.length;\n    }\n  });\n\n  if (lastKeyCode !== 'Backspace' && finalMaskedPos < finalMask.length) {\n    // If not erasing, move the cursor forward if we are in a special chars area\n    specialCharsDescr.forEach(([chars, pos]) => {\n      if (finalMaskedPos === pos) finalMaskedPos += chars.length;\n    });\n  } else if (lastKeyCode === 'Backspace' && finalMaskedPos) {\n    // If erasing, move the cursor back if we are in a special chars area\n    specialCharsDescr.forEach(([chars, pos]) => {\n      if (pos + 1 <= finalMaskedPos && finalMaskedPos <= pos + chars.length) finalMaskedPos = pos;\n    });\n  }\n\n  return [finalMask.join(''), finalMaskedPos];\n};\n"],
+  "mappings": "AAAA;ACSO,MAAM,uBAAuB,CAClC,yBACA,mBACA,WACA,gBACqB;AACrB,QAAM,YAAY;AAClB,MAAI,iBAAiB;AAGrB,oBAAkB,QAAQ,CAAC,CAAC,OAAO,SAAS;AAC1C,QAAI,UAAU,SAAS,KAAK;AAC1B,gBAAU,OAAO,KAAK,GAAG,GAAG;AAC5B,UAAI,kBAAkB;AAAK,0BAAkB,MAAM;AAAA;AAAA;AAIvD,MAAI,gBAAgB,eAAe,iBAAiB,UAAU,QAAQ;AAEpE,sBAAkB,QAAQ,CAAC,CAAC,OAAO,SAAS;AAC1C,UAAI,mBAAmB;AAAK,0BAAkB,MAAM;AAAA;AAAA,aAE7C,gBAAgB,eAAe,gBAAgB;AAExD,sBAAkB,QAAQ,CAAC,CAAC,OAAO,SAAS;AAC1C,UAAI,MAAM,KAAK,kBAAkB,kBAAkB,MAAM,MAAM;AAAQ,yBAAiB;AAAA;AAAA;AAI5F,SAAO,CAAC,UAAU,KAAK,KAAK;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+const getPartialMaskedPos = (rawValue, maskWithoutSpecialChars, cursorPos) => {
+  let maskedPos = 0;
+  for (let i = 0; i < cursorPos; i += 1) {
+    if (maskWithoutSpecialChars[maskedPos] === rawValue[i])
+      maskedPos += 1;
+  }
+  return maskedPos;
+};
+export {
+  getPartialMaskedPos
+};
+//# sourceMappingURL=getPartialMaskedPos.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/mask-hook/utils/getPartialMaskedPos.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const getPartialMaskedPos = (rawValue: string, maskWithoutSpecialChars: string[], cursorPos: number): number => {\n  let maskedPos = 0;\n  for (let i = 0; i < cursorPos; i += 1) {\n    if (maskWithoutSpecialChars[maskedPos] === rawValue[i]) maskedPos += 1;\n  }\n  return maskedPos;\n};\n"],
+  "mappings": "AAAA;ACAO,MAAM,sBAAsB,CAAC,UAAkB,yBAAmC,cAA8B;AACrH,MAAI,YAAY;AAChB,WAAS,IAAI,GAAG,IAAI,WAAW,KAAK,GAAG;AACrC,QAAI,wBAAwB,eAAe,SAAS;AAAI,mBAAa;AAAA;AAEvE,SAAO;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+export * from "./addSpecialCharacters";
+export * from "./getPartialMaskedPos";
+export * from "./setCursorPosition";
+export * from "./sharedFilters";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/mask-hook/utils/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './addSpecialCharacters';\nexport * from './getPartialMaskedPos';\nexport * from './setCursorPosition';\nexport * from './sharedFilters';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;",
+  "names": []
+}

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+const setCursorPosition = (input, position) => {
+  input.setSelectionRange(position, position, "forward");
+};
+export {
+  setCursorPosition
+};
+//# sourceMappingURL=setCursorPosition.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/mask-hook/utils/setCursorPosition.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const setCursorPosition = (input: HTMLInputElement, position: number) => {\n  input.setSelectionRange(position, position, 'forward');\n};\n"],
+  "mappings": "AAAA;ACAO,MAAM,oBAAoB,CAAC,OAAyB,aAAqB;AAC9E,QAAM,kBAAkB,UAAU,UAAU;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+const filterNumbersOnly = (charactersToFilter) => charactersToFilter.filter((char) => char >= "0" && char <= "9");
+export {
+  filterNumbersOnly
+};
+//# sourceMappingURL=sharedFilters.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/mask-hook/utils/sharedFilters.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/**\n *\n * @param {string[]} charactersToFilter An array of characters to filter from\n * @returns [string] the filtered array including only 0~9 characters\n */\nexport const filterNumbersOnly = (charactersToFilter: string[]): string[] =>\n  charactersToFilter.filter((char) => char >= '0' && char <= '9');\n"],
+  "mappings": "AAAA;ACMO,MAAM,oBAAoB,CAAC,uBAChC,mBAAmB,OAAO,CAAC,SAAS,QAAQ,OAAO,QAAQ;",
+  "names": []
+}