@elliemae/ds-controlled-form 3.0.0-alpha.2 → 3.0.0-next.10

package/dist/cjs/date-time-picker/utils/hooks/useGetDayFromDateString.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/date-time-picker/utils/hooks/useGetDayFromDateString.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useContext, useMemo } from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport { getDayFromDateString } from '../dateHelpers';\n\nexport const useGetDayFromDateString = (): Date => {\n  const { dateStringFromProps } = useContext(ControlledDateTimePickerContext);\n  return useMemo(() => getDayFromDateString(dateStringFromProps), [dateStringFromProps]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AACpC,yCAAgD;AAChD,yBAAqC;AAE9B,MAAM,0BAA0B,MAAY;AACjD,QAAM,EAAE,wBAAwB,6BAAW;AAC3C,SAAO,0BAAQ,MAAM,6CAAqB,sBAAsB,CAAC;AAAA;",
+  "names": []
+}

package/dist/cjs/date-time-picker/utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/date-time-picker/utils/hooks/useGetMonthYearFromDateStringOrEmptyStartingMonth.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useContext, useMemo } from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport { deconstructValuesFromDateString } from '../stringHelpers';\nimport type { DateMonth } from '../../index.d';\n\nexport const useGetMonthYearFromDateStringOrEmptyStartingMonth = (): {\n  year: number;\n  month: DateMonth;\n} => {\n  const {\n    dateStringFromProps,\n    props: { emptyPickerStartingMonth },\n  } = useContext(ControlledDateTimePickerContext);\n\n  return useMemo(() => {\n    const emptyPickerStartingMonthDefault = `${new Date().getMonth() + 1}/__/${new Date().getFullYear()}`;\n    const { month: stringMonthVal, year: stringYearVal } = deconstructValuesFromDateString(dateStringFromProps);\n\n    const { month: emptyStringSplitMonth, year: emptyStringSplitYear } = deconstructValuesFromDateString(\n      emptyPickerStartingMonth || emptyPickerStartingMonthDefault,\n    );\n    const userEmptyStringMonth = Number.parseInt(emptyStringSplitMonth, 10);\n    const userEmptyStringYear = Number.parseInt(emptyStringSplitYear, 10);\n\n    const month: DateMonth =\n      stringMonthVal === '' || stringMonthVal.length !== 2\n        ? ((userEmptyStringMonth - 1) as DateMonth)\n        : ((Number.parseInt(stringMonthVal, 10) - 1) as DateMonth); // month is 0~11 in javascript Date...\n\n    const year = stringYearVal === '' ? userEmptyStringYear : Number.parseInt(stringYearVal, 10);\n\n    return { year, month };\n  }, [dateStringFromProps, emptyPickerStartingMonth]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AACpC,yCAAgD;AAChD,2BAAgD;AAGzC,MAAM,oDAAoD,MAG5D;AACH,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE;AAAA,MACP,6BAAW;AAEf,SAAO,0BAAQ,MAAM;AACnB,UAAM,kCAAkC,GAAG,IAAI,OAAO,aAAa,QAAQ,IAAI,OAAO;AACtF,UAAM,EAAE,OAAO,gBAAgB,MAAM,kBAAkB,0DAAgC;AAEvF,UAAM,EAAE,OAAO,uBAAuB,MAAM,yBAAyB,0DACnE,4BAA4B;AAE9B,UAAM,uBAAuB,OAAO,SAAS,uBAAuB;AACpE,UAAM,sBAAsB,OAAO,SAAS,sBAAsB;AAElE,UAAM,QACJ,mBAAmB,MAAM,eAAe,WAAW,IAC7C,uBAAuB,IACvB,OAAO,SAAS,gBAAgB,MAAM;AAE9C,UAAM,OAAO,kBAAkB,KAAK,sBAAsB,OAAO,SAAS,eAAe;AAEzF,WAAO,EAAE,MAAM;AAAA,KACd,CAAC,qBAAqB;AAAA;",
+  "names": []
+}

package/dist/cjs/date-time-picker/utils/hooks/useGetStartingFocusedDay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/date-time-picker/utils/hooks/useGetStartingFocusedDay.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX';\nimport { deconstructValuesFromDateString } from '../stringHelpers';\nimport { convertToPositiveNumberIfPossible } from '../numberHelpers';\nimport { getDateValuesFromDate, isValidDayForTheMonth } from '../dateHelpers';\nimport { useGetDayFromDateString } from './useGetDayFromDateString';\nimport type { DateMonth } from '../../index.d';\n\ninterface useGetStartingFocusedDayRT {\n  startFocusedYear: number;\n  startFocusedDay: number;\n  startFocusedMonth: number;\n  startFocusedDate: Date;\n}\nconst empty: useGetStartingFocusedDayRT = {\n  startFocusedYear: null,\n  startFocusedDay: null,\n  startFocusedMonth: null,\n  startFocusedDate: null,\n};\nexport const useGetStartingFocusedDay = (): useGetStartingFocusedDayRT => {\n  const {\n    props: { onCalendarOpenFocusedDay },\n  } = useContext(ControlledDateTimePickerContext);\n  const dayFromInputValues = useGetDayFromDateString();\n\n  return useMemo(() => {\n    const {\n      month: inputValuesSplitMonth,\n      day: inputValuesSplitDay,\n      year: inputValuesDaySplitYear,\n    } = getDateValuesFromDate(dayFromInputValues);\n\n    let startFocusedMonth = null;\n    let startFocusedDay = null;\n    let startFocusedYear = null;\n    let startFocusedDate = null;\n    const isInputFilledAndValid =\n      inputValuesSplitMonth &&\n      inputValuesSplitDay &&\n      inputValuesDaySplitYear &&\n      isValidDayForTheMonth(inputValuesSplitMonth, inputValuesDaySplitYear, inputValuesSplitDay);\n    const isOnCalendarOpenFocusedDayEmpty = !onCalendarOpenFocusedDay;\n    const shouldFillWithOnCalendarOpenFocusedDay = !isInputFilledAndValid && !isOnCalendarOpenFocusedDayEmpty;\n    // if input was filled start focus is the filled value (if it's valid day for the month)\n    if (isInputFilledAndValid) {\n      startFocusedMonth = inputValuesSplitMonth;\n      startFocusedDay = inputValuesSplitDay;\n      startFocusedYear = inputValuesDaySplitYear;\n      startFocusedDate = dayFromInputValues;\n      // if input was not filled (or filled invalid) and there is no onCalendarOpenFocusedDay start focus is not a day\n    }\n\n    // if input was not filled and there is onCalendarOpenFocusedDay start focus is onCalendarOpenFocusedDay day\n    if (!isInputFilledAndValid && isOnCalendarOpenFocusedDayEmpty) return empty;\n\n    if (shouldFillWithOnCalendarOpenFocusedDay) {\n      const {\n        month: focusedDaySplitMonth,\n        day: focusedDaySplitDay,\n        year: focusedDaySplitYear,\n      } = deconstructValuesFromDateString(onCalendarOpenFocusedDay);\n      const monthAsInt = convertToPositiveNumberIfPossible(focusedDaySplitMonth);\n      const dayAsInt = convertToPositiveNumberIfPossible(focusedDaySplitDay);\n      const yearAsInt = convertToPositiveNumberIfPossible(focusedDaySplitYear);\n      // if this condition is false, return will be the same as return empty\n      // because startFocusedMonth/Day/Year/Date will be === null\n      // which is the expected result\n      if (\n        monthAsInt !== -1 &&\n        dayAsInt !== -1 &&\n        yearAsInt !== -1 &&\n        isValidDayForTheMonth((monthAsInt - 1) as DateMonth, yearAsInt, dayAsInt)\n      ) {\n        startFocusedMonth = monthAsInt;\n        startFocusedDay = dayAsInt;\n        startFocusedYear = yearAsInt;\n        startFocusedDate = new Date(yearAsInt, monthAsInt - 1, dayAsInt);\n      }\n    }\n    return {\n      startFocusedYear,\n      startFocusedDay,\n      startFocusedMonth,\n      startFocusedDate,\n    };\n  }, [dayFromInputValues, onCalendarOpenFocusedDay]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAoC;AACpC,yCAAgD;AAChD,2BAAgD;AAChD,2BAAkD;AAClD,yBAA6D;AAC7D,qCAAwC;AASxC,MAAM,QAAoC;AAAA,EACxC,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,kBAAkB;AAAA;AAEb,MAAM,2BAA2B,MAAkC;AACxE,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,MACP,6BAAW;AACf,QAAM,qBAAqB;AAE3B,SAAO,0BAAQ,MAAM;AACnB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAM;AAAA,QACJ,8CAAsB;AAE1B,QAAI,oBAAoB;AACxB,QAAI,kBAAkB;AACtB,QAAI,mBAAmB;AACvB,QAAI,mBAAmB;AACvB,UAAM,wBACJ,yBACA,uBACA,2BACA,8CAAsB,uBAAuB,yBAAyB;AACxE,UAAM,kCAAkC,CAAC;AACzC,UAAM,yCAAyC,CAAC,yBAAyB,CAAC;AAE1E,QAAI,uBAAuB;AACzB,0BAAoB;AACpB,wBAAkB;AAClB,yBAAmB;AACnB,yBAAmB;AAAA;AAKrB,QAAI,CAAC,yBAAyB;AAAiC,aAAO;AAEtE,QAAI,wCAAwC;AAC1C,YAAM;AAAA,QACJ,OAAO;AAAA,QACP,KAAK;AAAA,QACL,MAAM;AAAA,UACJ,0DAAgC;AACpC,YAAM,aAAa,4DAAkC;AACrD,YAAM,WAAW,4DAAkC;AACnD,YAAM,YAAY,4DAAkC;AAIpD,UACE,eAAe,MACf,aAAa,MACb,cAAc,MACd,8CAAuB,aAAa,GAAiB,WAAW,WAChE;AACA,4BAAoB;AACpB,0BAAkB;AAClB,2BAAmB;AACnB,2BAAmB,IAAI,KAAK,WAAW,aAAa,GAAG;AAAA;AAAA;AAG3D,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,KAED,CAAC,oBAAoB;AAAA;",
+  "names": []
+}

package/dist/cjs/date-time-picker/utils/hooks/useOnClickOutside.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/date-time-picker/utils/hooks/useOnClickOutside.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useEffect } from 'react';\n\nexport const useOnClickOutside = (ref, handler): void => {\n  useEffect(() => {\n    const listener = (event) => {\n      // Do nothing if clicking ref's element or descendent elements\n      if (!ref || ref?.contains?.(event.target)) {\n        return;\n      }\n      handler(event);\n    };\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [ref, handler]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0B;AAEnB,MAAM,oBAAoB,CAAC,KAAK,YAAkB;AACvD,8BAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAU;AAE1B,UAAI,CAAC,OAAO,KAAK,WAAW,MAAM,SAAS;AACzC;AAAA;AAEF,cAAQ;AAAA;AAEV,aAAS,iBAAiB,aAAa;AACvC,aAAS,iBAAiB,cAAc;AACxC,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa;AAC1C,eAAS,oBAAoB,cAAc;AAAA;AAAA,KAE5C,CAAC,KAAK;AAAA;",
+  "names": []
+}

package/dist/cjs/date-time-picker/utils/numberHelpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/date-time-picker/utils/numberHelpers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export const convertToPositiveNumberIfPossible = (numberString: string): number => {\n  const convertedNum = Number.parseInt(numberString, 10);\n  if (Number.isNaN(convertedNum)) return -1;\n  return convertedNum;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,oCAAoC,CAAC,iBAAiC;AACjF,QAAM,eAAe,OAAO,SAAS,cAAc;AACnD,MAAI,OAAO,MAAM;AAAe,WAAO;AACvC,SAAO;AAAA;",
+  "names": []
+}

package/dist/cjs/date-time-picker/utils/stringHelpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/date-time-picker/utils/stringHelpers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { monthNames, announcableCardinalDays } from './constants';\nimport { convertToPositiveNumberIfPossible } from './numberHelpers';\n/* eslint-disable max-lines */\nexport const prependStringWithPlaceHolders = (val: string, finalLength: number, placeholder = '0'): string => {\n  if (val.length === finalLength) return val;\n  const stringAsAnArray = val.split('').reverse();\n  return new Array(finalLength)\n    .fill(placeholder)\n    .map((_c, i) => (stringAsAnArray[i] ? stringAsAnArray[i] : placeholder))\n    .reverse()\n    .join('');\n};\nexport const fillStringWithPlaceHolders = (val: string, finalLength: number, placeholder = '_'): string => {\n  if (val.length === finalLength) return val;\n  const stringAsAnArray = val.split('');\n  return new Array(finalLength)\n    .fill(placeholder)\n    .map((_c, i) => (stringAsAnArray[i] ? stringAsAnArray[i] : placeholder))\n    .join('');\n};\n\nexport const getFormattedDateString = ({ month, day, year }: { month: string; day: string; year: string }): string => {\n  const finalMonth = fillStringWithPlaceHolders(month, 2);\n  const finalDay = fillStringWithPlaceHolders(day, 2);\n  const finalYear = fillStringWithPlaceHolders(year, 4);\n  return `${finalMonth}/${finalDay}/${finalYear}`;\n};\nexport const dateTimeToDate = (dateTime: string): string => dateTime?.split?.(' ')?.[0];\nexport const deconstructValuesFromDateString = (dateString: string): { month: string; day: string; year: string } => {\n  const [dirtyMonth = '', dirtyDay = '', dirtyYear = ''] = dateString?.split('/');\n  const replaceAllRegexp = /_/g;\n  return {\n    month: (dirtyMonth || '').replace(replaceAllRegexp, ''),\n    day: (dirtyDay || '').replace(replaceAllRegexp, ''),\n    year: (dirtyYear || '').replace(replaceAllRegexp, ''),\n  };\n};\nexport const deconstructValuesFromTimeString = (\n  timeString: string,\n): { hours: string; minutes: string; meridiem: string } => {\n  const [dirtyHour = '', dirtyMintuesAndMeridiem = ''] = timeString?.split(':');\n  const [dirtyMinutes = '', dirtyMeridiem = ''] = dirtyMintuesAndMeridiem?.split(' ');\n  const replaceAllRegexp = /_/g;\n  return {\n    hours: (dirtyHour || '').replace(replaceAllRegexp, ''),\n    minutes: (dirtyMinutes || '').replace(replaceAllRegexp, ''),\n    meridiem: (dirtyMeridiem || '').replace(replaceAllRegexp, ''),\n  };\n};\n// https://regex101.com/r/U5r5lh/1/\nconst dateRegExp = /^[0-9_][0-9_]\\/[0-9_][0-9_]\\/[0-9_]{4}$/;\nexport const isValidDateString = (testString: string): boolean => {\n  if (testString === '') return true;\n  const isValidDateRegexp = dateRegExp.test(testString);\n  if (!isValidDateRegexp) return false;\n  const { month, day, year } = deconstructValuesFromDateString(testString);\n  if (Number.parseInt(month, 10) > 12 || Number.parseInt(day, 10) > 31 || Number.parseInt(year, 10) > 9999)\n    return false;\n\n  return true;\n};\n\nexport const getFormattedTimeString = ({\n  hours,\n  minutes,\n  // seconds,\n  meridiem,\n}: {\n  hours: string;\n  minutes: string;\n  // seconds:string;\n  meridiem: string;\n}): string => {\n  const finalHour = fillStringWithPlaceHolders(hours, 2);\n  const finalMinutes = fillStringWithPlaceHolders(minutes, 2);\n  // const finalSeconds = fillStringWithPlaceHolders(seconds, 2); // <-- seconds format\n  const finalMeridiem = fillStringWithPlaceHolders(meridiem, 2);\n  // return `${finalHour}:${finalMinutes}:${finalSeconds} ${finalMeridiem}`;// <-- seconds format\n  return `${finalHour}:${finalMinutes} ${finalMeridiem}`;\n};\nexport const dateTimeToTime = (dateTime: string): string => {\n  const [\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    _date,\n    // timeNumbers = '__:__:__', // <-- seconds format\n    timeNumbers = '__:__',\n    timeMeridiem = '__',\n  ] = dateTime?.split?.(' ');\n  return `${timeNumbers} ${timeMeridiem}`;\n};\nexport const deconstructTimeValues = (\n  timeString: string,\n): {\n  hours: string;\n  minutes: string;\n  meridiem: string;\n} => {\n  const [dirtyTimes, dirtyMeridiem] = timeString?.split?.(' '); // <--['__:__','__']\n  const [dirtyHours, dirtyMinutes] = dirtyTimes.split?.(':'); // <--['__','__']\n  const regex = /_/g; // Note the 'g' flag, which matches all occurrences of the expression\n  const newValues = {\n    hours: (dirtyHours || '').replace(regex, ''),\n    minutes: (dirtyMinutes || '').replace(regex, ''),\n    // seconds: (dirtySeconds||\"\").replace(regex, ''),\n    meridiem: (dirtyMeridiem || '').replace(regex, ''),\n  };\n  return newValues;\n};\n\n// https://regex101.com/r/jeBmNT/1\nconst timeRegExp = /^[0-9_][0-9_]:[0-9_][0-9_]\\s[aApP_][mM_]$/;\nexport const isValidTimeString = (testString: string): boolean => {\n  if (testString === '') return true;\n  const isValidTimeRegexp = timeRegExp.test(testString);\n  if (!isValidTimeRegexp) return false;\n  const { hours, minutes } = deconstructTimeValues(testString);\n  if (Number.parseInt(hours, 10) > 12 || Number.parseInt(minutes, 10) > 60) return false;\n\n  return true;\n};\n\nexport const isIncompleteString = (testString: string, placeholder = '_'): boolean =>\n  testString === '' || testString.includes(placeholder);\n\nexport const isEmptyDateStringMask = (testString: string): boolean => testString === '__/__/____';\nexport const isEmptyTimeStringMask = (testString: string): boolean => testString === '__:__ __';\nexport const isEmptyDateTimeStringMask = (testString: string): boolean => testString === '__/__/____ __:__ __';\n\nexport const getAriaDayFromDateString = (dateString: string): string => {\n  const { month: monthString, day: dayString, year: yearString } = deconstructValuesFromDateString(dateString);\n  const monthNum = convertToPositiveNumberIfPossible(monthString);\n  const dayNum = convertToPositiveNumberIfPossible(dayString);\n  const yearNum = convertToPositiveNumberIfPossible(yearString);\n  if (monthNum === -1 || dayNum === -1 || yearNum === -1) return '';\n  return `${monthNames[monthNum - 1]} ${announcableCardinalDays[dayNum]} ${yearNum}`;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/date-time-picker/utils/timeHelpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/date-time-picker/utils/timeHelpers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { isIncompleteString } from './stringHelpers';\nimport type { internalInputsChangeMetaInfo } from '../index.d';\n\nexport const getValidationTimeStringMetaInfo = (\n  timeString: string,\n  getIsDisabledTime = (\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    timeS: string,\n  ) => false,\n): Partial<internalInputsChangeMetaInfo> => {\n  const metaInfo: Partial<internalInputsChangeMetaInfo> = {};\n  if (!isIncompleteString(timeString)) {\n    metaInfo.isDisabledTime = getIsDisabledTime(timeString);\n    if (metaInfo.isDisabledTime) metaInfo.suggestedErrorMsg = 'The selected time is not allowed';\n  }\n\n  return metaInfo;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAAmC;AAG5B,MAAM,kCAAkC,CAC7C,YACA,oBAAoB,CAElB,UACG,UACqC;AAC1C,QAAM,WAAkD;AACxD,MAAI,CAAC,6CAAmB,aAAa;AACnC,aAAS,iBAAiB,kBAAkB;AAC5C,QAAI,SAAS;AAAgB,eAAS,oBAAoB;AAAA;AAG5D,SAAO;AAAA;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -23,11 +23,13 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
 var src_exports = {};
 var React = __toESM(require("react"));
-__reExport(src_exports, require("./controlled-checkbox"));
-__reExport(src_exports, require("./controlled-date-range-picker"));
-__reExport(src_exports, require("./controlled-date-time-picker"));
-__reExport(src_exports, require("./controlled-toggle"));
-__reExport(src_exports, require("./controlled-autocomplete"));
-__reExport(src_exports, require("./controlled-combobox"));
+__reExport(src_exports, require("./autocomplete"));
+__reExport(src_exports, require("./checkbox"));
+__reExport(src_exports, require("./combobox"));
+__reExport(src_exports, require("./date-range-picker"));
+__reExport(src_exports, require("./date-time-picker"));
+__reExport(src_exports, require("./mask-hook"));
+__reExport(src_exports, require("./text-input"));
+__reExport(src_exports, require("./toggle"));
 module.exports = __toCommonJS(src_exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './controlled-checkbox';\nexport * from './controlled-date-range-picker';\nexport * from './controlled-date-time-picker';\nexport * from './controlled-toggle';\nexport * from './controlled-autocomplete';\nexport * from './controlled-combobox';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;",
+  "sourcesContent": ["export * from './autocomplete';\nexport * from './checkbox';\nexport * from './combobox';\nexport * from './date-range-picker';\nexport * from './date-time-picker';\nexport * from './mask-hook';\nexport * from './text-input';\nexport * from './toggle';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;AACd,wBAAc;",
   "names": []
 }

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

@@ -0,0 +1,31 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var hooks_exports = {};
+var React = __toESM(require("react"));
+__reExport(hooks_exports, require("./usePhoneMask"));
+__reExport(hooks_exports, require("./useNumberMask"));
+__reExport(hooks_exports, require("./useSSNMask"));
+__reExport(hooks_exports, require("./useZipCode"));
+module.exports = __toCommonJS(hooks_exports);
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,166 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var useNumberMask_exports = {};
+__export(useNumberMask_exports, {
+  UseNumberMaskWithSchema: () => UseNumberMaskWithSchema,
+  useNumberMask: () => useNumberMask
+});
+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");
+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 = (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);
+  const _a = propsWithDefault, {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown,
+    onBlur: userOnBlur
+  } = _a, opts = __objRest(_a, [
+    "valueSetter",
+    "onChange",
+    "onKeyDown",
+    "onBlur"
+  ]);
+  const lastKeyCode = (0, import_react.useRef)("Unidentified");
+  const scheduleAfterRender = (0, import_ds_utilities.useCallbackAfterRender)();
+  const [, setKey] = (0, import_react.useState)(0);
+  const onBlur = (0, import_react.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 = (0, import_react.useCallback)((e) => {
+    lastKeyCode.current = e.code;
+    if (userOnKeyDown)
+      userOnKeyDown(e);
+  }, [userOnKeyDown]);
+  const onChange = (0, import_react.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(() => (0, import_utils.setCursorPosition)(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, userOnChange, opts]);
+  return {
+    onKeyDown,
+    onChange,
+    onBlur
+  };
+};
+const UseNumberMaskWithSchema = (0, import_ds_props_helpers.describe)(useNumberMask);
+UseNumberMaskWithSchema.propTypes = import_react_desc_prop_types.DSMaskNumberHookPropsTypes;
+module.exports = __toCommonJS(useNumberMask_exports);
+//# sourceMappingURL=useNumberMask.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/mask-hook/hooks/useNumberMask.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,109 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var usePhoneMask_exports = {};
+__export(usePhoneMask_exports, {
+  UsePhoneMaskWithSchema: () => UsePhoneMaskWithSchema,
+  usePhoneMask: () => usePhoneMask
+});
+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");
+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 = (0, import_utils.getPartialMaskedPos)(rawValue, maskedValue, cursorPos);
+  return (0, import_utils.addSpecialCharacters)(maskedValue, isInternational ? internationalPhoneSpecialChars : phoneSpecialChars, maskedPos, lastKeyCode);
+};
+const usePhoneMask = (props) => {
+  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);
+  const _a = propsWithDefault, { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown, onBlur } = _a, opts = __objRest(_a, ["valueSetter", "onChange", "onKeyDown", "onBlur"]);
+  const lastKeyCode = (0, import_react.useRef)("Unidentified");
+  const scheduleAfterRender = (0, import_ds_utilities.useCallbackAfterRender)();
+  const [, setKey] = (0, import_react.useState)(0);
+  const onKeyDown = (0, import_react.useCallback)((e) => {
+    lastKeyCode.current = e.code;
+    if (userOnKeyDown)
+      userOnKeyDown(e);
+  }, [userOnKeyDown]);
+  const onChange = (0, import_react.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(() => (0, import_utils.setCursorPosition)(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, opts, userOnChange]);
+  return {
+    onKeyDown,
+    onChange
+  };
+};
+const UsePhoneMaskWithSchema = (0, import_ds_props_helpers.describe)(usePhoneMask);
+UsePhoneMaskWithSchema.propTypes = import_react_desc_prop_types.DSMaskPhoneHookPropsTypes;
+module.exports = __toCommonJS(usePhoneMask_exports);
+//# sourceMappingURL=usePhoneMask.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/mask-hook/hooks/usePhoneMask.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAqD;AACrD,8BAAuF;AACvF,0BAAuC;AACvC,mBAA6E;AAC7E,mCAAgF;AAEhF,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,sCAAoB,UAAU,aAAa;AAE7D,SAAO,uCACL,aACA,kBAAkB,iCAAiC,mBACnD,WACA;AAAA;AAIG,MAAM,eAA6B,CAAC,UAAU;AACnD,QAAM,mBAAmB,0DAA6B,OAAO;AAC7D,8DAA+B,kBAAkB;AACjD,QAA2F,uBAAnF,eAAa,UAAU,cAAc,WAAW,eAAe,WAAoB,IAAT,iBAAS,IAAT,CAA1E,eAAa,YAAwB,aAA0B;AAEvE,QAAM,cAAc,yBAAO;AAE3B,QAAM,sBAAsB;AAO5B,QAAM,CAAC,EAAE,UAAU,2BAAS;AAE5B,QAAM,YAA0D,8BAC9D,CAAC,MAAM;AACL,gBAAY,UAAU,EAAE;AACxB,QAAI;AAAe,oBAAc;AAAA,KAEnC,CAAC;AAGH,QAAM,WAAuD,8BAC3D,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,oCAAkB,EAAE,QAAQ;AAAA,KAExD,CAAC,aAAa,qBAAqB,MAAM;AAG3C,SAAO;AAAA,IACL;AAAA,IACA;AAAA;AAAA;AAIG,MAAM,yBAAyB,sCAAS;AAC/C,uBAAuB,YAAY;",
+  "names": []
+}

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

@@ -0,0 +1,82 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var useSSNMask_exports = {};
+__export(useSSNMask_exports, {
+  UseSSNMaskWithSchema: () => UseSSNMaskWithSchema,
+  useSSNMask: () => useSSNMask
+});
+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");
+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 = (0, import_utils.getPartialMaskedPos)(rawValue, maskedValue, cursorPos);
+  return (0, import_utils.addSpecialCharacters)(maskedValue, ssnSpecialChars, maskedPos, lastKeyCode);
+};
+const useSSNMask = (props) => {
+  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);
+  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;
+  const lastKeyCode = (0, import_react.useRef)("Unidentified");
+  const scheduleAfterRender = (0, import_ds_utilities.useCallbackAfterRender)();
+  const [, setKey] = (0, import_react.useState)(0);
+  const onKeyDown = (0, import_react.useCallback)((e) => {
+    lastKeyCode.current = e.code;
+    if (userOnKeyDown)
+      userOnKeyDown(e);
+  }, [userOnKeyDown]);
+  const onChange = (0, import_react.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(() => (0, import_utils.setCursorPosition)(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, userOnChange]);
+  return {
+    onKeyDown,
+    onChange
+  };
+};
+const UseSSNMaskWithSchema = (0, import_ds_props_helpers.describe)(useSSNMask);
+UseSSNMaskWithSchema.propTypes = import_react_desc_prop_types.DSMaskHookPropsTypes;
+module.exports = __toCommonJS(useSSNMask_exports);
+//# sourceMappingURL=useSSNMask.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/mask-hook/hooks/useSSNMask.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,8BAAuF;AACvF,0BAAuC;AACvC,mBAA6E;AAC7E,mCAAsE;AAEtE,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,sCAAoB,UAAU,aAAa;AAE7D,SAAO,uCAAqB,aAAa,iBAAiB,WAAW;AAAA;AAGhE,MAAM,aAA2B,CAAC,UAAU;AACjD,QAAM,mBAAmB,0DAA6B,OAAO;AAC7D,8DAA+B,kBAAkB;AAEjD,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,kBAAkB;AAE1E,QAAM,cAAc,yBAAO;AAE3B,QAAM,sBAAsB;AAO5B,QAAM,CAAC,EAAE,UAAU,2BAAS;AAE5B,QAAM,YAA0D,8BAC9D,CAAC,MAAM;AACL,gBAAY,UAAU,EAAE;AACxB,QAAI;AAAe,oBAAc;AAAA,KAEnC,CAAC;AAGH,QAAM,WAAuD,8BAC3D,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,oCAAkB,EAAE,QAAQ;AAAA,KAExD,CAAC,aAAa,qBAAqB;AAGrC,SAAO;AAAA,IACL;AAAA,IACA;AAAA;AAAA;AAIG,MAAM,uBAAuB,sCAAS;AAC7C,qBAAqB,YAAY;",
+  "names": []
+}