@elliemae/ds-controlled-form 3.0.0-next.14 → 3.0.0-next.18

package/dist/cjs/combobox/parts/menu-list/useMenuListSetFocusOption.js

@@ -34,7 +34,7 @@ var import_react = require("react");
 var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX"));
 const useMenuListSetFocusOption = () => {
   const {
-    props: { selectedValues, options },
+    props: { selectedValues, filteredOptions },
     setFocusOptionIdx,
     hasFocus,
     focusOptionIdx,
@@ -42,17 +42,17 @@ const useMenuListSetFocusOption = () => {
     scrollOptionIntoView
   } = (0, import_react.useContext)(import_ComboBoxCTX.default);
   const getFirstOption = (0, import_react.useCallback)(() => {
-    for (let i = 0; i < options.length; i += 1)
-      if (!["section", "separator"].includes(options[i].type) && !options[i].disabled) {
-        setFocusOptionIdx(options[i].dsId);
+    for (let i = 0; i < filteredOptions.length; i += 1)
+      if (!["section", "separator"].includes(filteredOptions[i].type) && !filteredOptions[i].disabled) {
+        setFocusOptionIdx(filteredOptions[i].dsId);
         break;
       }
-  }, [options, setFocusOptionIdx]);
+  }, [filteredOptions, setFocusOptionIdx]);
   (0, import_react.useEffect)(() => {
     scrollOptionIntoView(focusOptionIdx);
   }, [focusOptionIdx]);
   (0, import_react.useEffect)(() => {
-    if (options.length === 0) {
+    if (filteredOptions.length === 0) {
       setFocusOptionIdx("");
     }
     if (hasFocus && inputValue === "") {
@@ -68,7 +68,7 @@ const useMenuListSetFocusOption = () => {
     }
     if (hasFocus)
       getFirstOption();
-  }, [getFirstOption, inputValue, selectedValues, hasFocus, setFocusOptionIdx, options.length]);
+  }, [getFirstOption, inputValue, selectedValues, hasFocus, setFocusOptionIdx, filteredOptions.length]);
 };
 module.exports = __toCommonJS(useMenuListSetFocusOption_exports);
 //# sourceMappingURL=useMenuListSetFocusOption.js.map

package/dist/cjs/combobox/parts/menu-list/useMenuListSetFocusOption.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/combobox/parts/menu-list/useMenuListSetFocusOption.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport { useEffect, useCallback, useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nexport const useMenuListSetFocusOption = (): void => {\n  const {\n    props: { selectedValues, options },\n    setFocusOptionIdx,\n    hasFocus,\n    focusOptionIdx,\n    inputValue,\n    scrollOptionIntoView,\n  } = useContext(ComboBoxContext);\n\n  const getFirstOption = useCallback(() => {\n    for (let i = 0; i < options.length; i += 1)\n      if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n        setFocusOptionIdx(options[i].dsId);\n        break;\n      }\n  }, [options, setFocusOptionIdx]);\n\n  useEffect(() => {\n    scrollOptionIntoView(focusOptionIdx);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [focusOptionIdx]);\n\n  useEffect(() => {\n    if (options.length === 0) {\n      setFocusOptionIdx('');\n    }\n    if (hasFocus && inputValue === '') {\n      if (Array.isArray(selectedValues)) {\n        if (selectedValues && selectedValues.length > 0) {\n          setFocusOptionIdx(selectedValues[selectedValues.length - 1].dsId);\n          return;\n        }\n      } else if (selectedValues) {\n        setFocusOptionIdx(selectedValues.dsId);\n        return;\n      }\n    }\n    if (hasFocus) getFirstOption();\n  }, [getFirstOption, inputValue, selectedValues, hasFocus, setFocusOptionIdx, options.length]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmD;AACnD,yBAA4B;AAErB,MAAM,4BAA4B,MAAY;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAEf,QAAM,iBAAiB,8BAAY,MAAM;AACvC,aAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,UAAI,CAAC,CAAC,WAAW,aAAa,SAAS,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,UAAU;AAC/E,0BAAkB,QAAQ,GAAG;AAC7B;AAAA;AAAA,KAEH,CAAC,SAAS;AAEb,8BAAU,MAAM;AACd,yBAAqB;AAAA,KAEpB,CAAC;AAEJ,8BAAU,MAAM;AACd,QAAI,QAAQ,WAAW,GAAG;AACxB,wBAAkB;AAAA;AAEpB,QAAI,YAAY,eAAe,IAAI;AACjC,UAAI,MAAM,QAAQ,iBAAiB;AACjC,YAAI,kBAAkB,eAAe,SAAS,GAAG;AAC/C,4BAAkB,eAAe,eAAe,SAAS,GAAG;AAC5D;AAAA;AAAA,iBAEO,gBAAgB;AACzB,0BAAkB,eAAe;AACjC;AAAA;AAAA;AAGJ,QAAI;AAAU;AAAA,KACb,CAAC,gBAAgB,YAAY,gBAAgB,UAAU,mBAAmB,QAAQ;AAAA;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport { useEffect, useCallback, useContext } from 'react';\nimport ComboBoxContext from '../../ComboBoxCTX';\n\nexport const useMenuListSetFocusOption = (): void => {\n  const {\n    props: { selectedValues, filteredOptions },\n    setFocusOptionIdx,\n    hasFocus,\n    focusOptionIdx,\n    inputValue,\n    scrollOptionIntoView,\n  } = useContext(ComboBoxContext);\n\n  const getFirstOption = useCallback(() => {\n    for (let i = 0; i < filteredOptions.length; i += 1)\n      if (!['section', 'separator'].includes(filteredOptions[i].type) && !filteredOptions[i].disabled) {\n        setFocusOptionIdx(filteredOptions[i].dsId);\n        break;\n      }\n  }, [filteredOptions, setFocusOptionIdx]);\n\n  useEffect(() => {\n    scrollOptionIntoView(focusOptionIdx);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [focusOptionIdx]);\n\n  useEffect(() => {\n    if (filteredOptions.length === 0) {\n      setFocusOptionIdx('');\n    }\n    if (hasFocus && inputValue === '') {\n      if (Array.isArray(selectedValues)) {\n        if (selectedValues && selectedValues.length > 0) {\n          setFocusOptionIdx(selectedValues[selectedValues.length - 1].dsId);\n          return;\n        }\n      } else if (selectedValues) {\n        setFocusOptionIdx(selectedValues.dsId);\n        return;\n      }\n    }\n    if (hasFocus) getFirstOption();\n  }, [getFirstOption, inputValue, selectedValues, hasFocus, setFocusOptionIdx, filteredOptions.length]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmD;AACnD,yBAA4B;AAErB,MAAM,4BAA4B,MAAY;AACnD,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,6BAAW;AAEf,QAAM,iBAAiB,8BAAY,MAAM;AACvC,aAAS,IAAI,GAAG,IAAI,gBAAgB,QAAQ,KAAK;AAC/C,UAAI,CAAC,CAAC,WAAW,aAAa,SAAS,gBAAgB,GAAG,SAAS,CAAC,gBAAgB,GAAG,UAAU;AAC/F,0BAAkB,gBAAgB,GAAG;AACrC;AAAA;AAAA,KAEH,CAAC,iBAAiB;AAErB,8BAAU,MAAM;AACd,yBAAqB;AAAA,KAEpB,CAAC;AAEJ,8BAAU,MAAM;AACd,QAAI,gBAAgB,WAAW,GAAG;AAChC,wBAAkB;AAAA;AAEpB,QAAI,YAAY,eAAe,IAAI;AACjC,UAAI,MAAM,QAAQ,iBAAiB;AACjC,YAAI,kBAAkB,eAAe,SAAS,GAAG;AAC/C,4BAAkB,eAAe,eAAe,SAAS,GAAG;AAC5D;AAAA;AAAA,iBAEO,gBAAgB;AACzB,0BAAkB,eAAe;AACjC;AAAA;AAAA;AAGJ,QAAI;AAAU;AAAA,KACb,CAAC,gBAAgB,YAAY,gBAAgB,UAAU,mBAAmB,gBAAgB;AAAA;",
   "names": []
 }

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

@@ -53,7 +53,8 @@ function noop(..._args) {
 }
 const ComboboxPropTypes = __spreadProps(__spreadValues({}, import_ds_props_helpers.globalAttributesPropTypes), {
   placeholder: import_ds_props_helpers.PropTypes.string.description("input's placeholder value").defaultValue(""),
-  options: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.array, import_ds_props_helpers.PropTypes.object]).isRequired.description("List of options").defaultValue([]),
+  allOptions: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.array, import_ds_props_helpers.PropTypes.object]).isRequired.description("List of original options").defaultValue([]),
+  filteredOptions: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.array, import_ds_props_helpers.PropTypes.object]).description("List of filtered options to show in the menu based on the current internal input filter value").defaultValue([]),
   selectedValues: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.object), import_ds_props_helpers.PropTypes.object]).isRequired.description("Array of option or single option selected"),
   disabled: import_ds_props_helpers.PropTypes.bool.description("wheter or not the input is disabled").defaultValue("false"),
   autoFocus: import_ds_props_helpers.PropTypes.bool.description("Whether the combo box uses auto focus or not").defaultValue("false"),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/combobox/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport { DSMaskT } from '../mask-hook';\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\n  export interface CommonItemOptions {\n    dsId: string;\n    disabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n  }\n\n  export interface ItemOption extends CommonItemOptions {\n    value: string;\n    label: string;\n    type: 'option';\n  }\n\n  export interface ItemCreatableOption extends CommonItemOptions {\n    label: string;\n    type: 'creatable';\n  }\n\n  export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n  export interface PropsOptional {\n    inputMinWidth?: number;\n    menuMinWidth?: number;\n    menuMaxHeight?: number;\n    placeholder?: string;\n    autoFocus?: boolean;\n    onCreate?: (label: string) => void;\n    onFilter?: (value: string) => void;\n    onMenuOpen?: () => void;\n    onMenuClose?: () => void;\n    onCancel?: () => void;\n    onBlur?: () => void;\n    onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;\n    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n  }\n\n  export interface RequiredProps {\n    options: OptionTypes[];\n    selectedValues: SelectedOptionsT;\n    onChange: (\n      suggestedValue: ItemOption | OptionTypes[] | null,\n      selectedOption: ItemOption,\n      event: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: string;\n    placementOrderPreference: string[];\n    hasError: boolean;\n    inline: boolean;\n    withoutPortal: boolean;\n    zIndex: number;\n    disabled: boolean;\n    innerRef: React.RefObject<HTMLInputElement>;\n    useMask: DSMaskT.Hook | typeof noop;\n  }\n\n  export interface Props extends Partial<DefaultProps>, RequiredProps, PropsOptional {}\n\n  export interface InternalProps extends DefaultProps, RequiredProps, PropsOptional {}\n}\n\nexport const ComboboxPropTypes = {\n  ...globalAttributesPropTypes,\n  placeholder: PropTypes.string.description(\"input's placeholder value\").defaultValue(''),\n  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .isRequired.description('List of options')\n    .defaultValue([]),\n  selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description(\n    'Array of option or single option selected',\n  ),\n  disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),\n  autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),\n  hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),\n  onChange: PropTypes.func.isRequired\n    .description('function triggered when an option is selected it will send the options selected')\n    .defaultValue('() => {}'),\n  onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),\n  onCreate: PropTypes.func\n    .description(\n      'function triggered when user select \"create\" a new item whenever is not a match in the all option list',\n    )\n    .defaultValue(''),\n  onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),\n  onMenuOpen: PropTypes.func.description('function triggered when user open the menu list').defaultValue('() => {}'),\n  onMenuClose: PropTypes.func.description('function triggered when user close the menu list').defaultValue('() => {}'),\n  inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),\n  menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n  menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n  withoutPortal: PropTypes.bool\n    .description('Whether the combobox menu is rendered in a portal or not')\n    .defaultValue(false),\n  zIndex: PropTypes.number.description('The z-index of the combobox menu').defaultValue(10),\n  innerRef: PropTypes.object.description('ref to the components container'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAqD;AAE9C,iBAAsC,OAAgB;AAAA;AAyEtD,MAAM,oBAAoB,iCAC5B,oDAD4B;AAAA,EAE/B,aAAa,kCAAU,OAAO,YAAY,6BAA6B,aAAa;AAAA,EACpF,SAAS,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,SACtD,WAAW,YAAY,mBACvB,aAAa;AAAA,EAChB,gBAAgB,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,SAAS,kCAAU,SAAS,WAAW,YACtG;AAAA,EAEF,UAAU,kCAAU,KAAK,YAAY,uCAAuC,aAAa;AAAA,EACzF,WAAW,kCAAU,KAAK,YAAY,gDAAgD,aAAa;AAAA,EACnG,UAAU,kCAAU,KAAK,YAAY,0CAA0C,aAAa;AAAA,EAC5F,UAAU,kCAAU,KAAK,WACtB,YAAY,mFACZ,aAAa;AAAA,EAChB,UAAU,kCAAU,KAAK,YAAY,2DAA2D,aAAa;AAAA,EAC7G,UAAU,kCAAU,KACjB,YACC,0GAED,aAAa;AAAA,EAChB,UAAU,kCAAU,KAAK,YAAY,8CAA8C,aAAa;AAAA,EAChG,YAAY,kCAAU,KAAK,YAAY,mDAAmD,aAAa;AAAA,EACvG,aAAa,kCAAU,KAAK,YAAY,oDAAoD,aAAa;AAAA,EACzG,eAAe,kCAAU,IAAI,YAAY,oDAAoD,aAAa;AAAA,EAC1G,cAAc,kCAAU,IAAI,YAAY,uCAAuC,aAAa;AAAA,EAC5F,eAAe,kCAAU,IAAI,YAAY,wCAAwC,aAAa;AAAA,EAC9F,eAAe,kCAAU,KACtB,YAAY,4DACZ,aAAa;AAAA,EAChB,QAAQ,kCAAU,OAAO,YAAY,oCAAoC,aAAa;AAAA,EACtF,UAAU,kCAAU,OAAO,YAAY;AAAA;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable no-unused-vars */\nimport React from 'react';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport { DSMaskT } from '../mask-hook';\nexport function noop<T extends unknown[]>(..._args: T): void {}\n\nexport declare namespace DSComboboxT {\n  export interface CommonItemOptions {\n    dsId: string;\n    disabled?: boolean;\n    render?: React.ComponentType<unknown>;\n  }\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n  }\n\n  export interface ItemOption extends CommonItemOptions {\n    value: string;\n    label: string;\n    type: 'option';\n  }\n\n  export interface ItemCreatableOption extends CommonItemOptions {\n    label: string;\n    type: 'creatable';\n  }\n\n  export type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;\n\n  export type SelectedOptionsT = ItemOption[] | ItemOption | null;\n  export interface PropsOptional {\n    inputMinWidth?: number;\n    menuMinWidth?: number;\n    menuMaxHeight?: number;\n    placeholder?: string;\n    autoFocus?: boolean;\n    filteredOptions: OptionTypes[];\n    onCreate?: (label: string) => void;\n    onFilter?: (newOptions: OptionTypes[], inputValue: string) => void;\n    onMenuOpen?: () => void;\n    onMenuClose?: () => void;\n    onCancel?: () => void;\n    onBlur?: () => void;\n    onSelectAll?: (suggestedValue: OptionTypes[] | [], event: React.MouseEvent | React.KeyboardEvent) => null;\n    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption) => void;\n  }\n\n  export interface RequiredProps {\n    allOptions: OptionTypes[];\n    selectedValues: SelectedOptionsT;\n    onChange: (\n      suggestedValue: ItemOption | OptionTypes[] | null,\n      selectedOption: ItemOption,\n      event: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n  }\n  export interface DefaultProps {\n    startPlacementPreference: string;\n    placementOrderPreference: string[];\n    hasError: boolean;\n    inline: boolean;\n    withoutPortal: boolean;\n    zIndex: number;\n    disabled: boolean;\n    innerRef: React.RefObject<HTMLInputElement>;\n    useMask: DSMaskT.Hook | typeof noop;\n  }\n\n  export interface Props extends Partial<DefaultProps>, RequiredProps, PropsOptional {}\n\n  export interface InternalProps extends DefaultProps, RequiredProps, PropsOptional {}\n}\n\nexport const ComboboxPropTypes = {\n  ...globalAttributesPropTypes,\n  placeholder: PropTypes.string.description(\"input's placeholder value\").defaultValue(''),\n  allOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .isRequired.description('List of original options')\n    .defaultValue([]),\n  filteredOptions: PropTypes.oneOfType([PropTypes.array, PropTypes.object])\n    .description('List of filtered options to show in the menu based on the current internal input filter value')\n    .defaultValue([]),\n  selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).isRequired.description(\n    'Array of option or single option selected',\n  ),\n  disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),\n  autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),\n  hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),\n  onChange: PropTypes.func.isRequired\n    .description('function triggered when an option is selected it will send the options selected')\n    .defaultValue('() => {}'),\n  onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),\n  onCreate: PropTypes.func\n    .description(\n      'function triggered when user select \"create\" a new item whenever is not a match in the all option list',\n    )\n    .defaultValue(''),\n  onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),\n  onMenuOpen: PropTypes.func.description('function triggered when user open the menu list').defaultValue('() => {}'),\n  onMenuClose: PropTypes.func.description('function triggered when user close the menu list').defaultValue('() => {}'),\n  inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),\n  menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n  menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n  withoutPortal: PropTypes.bool\n    .description('Whether the combobox menu is rendered in a portal or not')\n    .defaultValue(false),\n  zIndex: PropTypes.number.description('The z-index of the combobox menu').defaultValue(10),\n  innerRef: PropTypes.object.description('ref to the components container'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAqD;AAE9C,iBAAsC,OAAgB;AAAA;AA0EtD,MAAM,oBAAoB,iCAC5B,oDAD4B;AAAA,EAE/B,aAAa,kCAAU,OAAO,YAAY,6BAA6B,aAAa;AAAA,EACpF,YAAY,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,SACzD,WAAW,YAAY,4BACvB,aAAa;AAAA,EAChB,iBAAiB,kCAAU,UAAU,CAAC,kCAAU,OAAO,kCAAU,SAC9D,YAAY,iGACZ,aAAa;AAAA,EAChB,gBAAgB,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,SAAS,kCAAU,SAAS,WAAW,YACtG;AAAA,EAEF,UAAU,kCAAU,KAAK,YAAY,uCAAuC,aAAa;AAAA,EACzF,WAAW,kCAAU,KAAK,YAAY,gDAAgD,aAAa;AAAA,EACnG,UAAU,kCAAU,KAAK,YAAY,0CAA0C,aAAa;AAAA,EAC5F,UAAU,kCAAU,KAAK,WACtB,YAAY,mFACZ,aAAa;AAAA,EAChB,UAAU,kCAAU,KAAK,YAAY,2DAA2D,aAAa;AAAA,EAC7G,UAAU,kCAAU,KACjB,YACC,0GAED,aAAa;AAAA,EAChB,UAAU,kCAAU,KAAK,YAAY,8CAA8C,aAAa;AAAA,EAChG,YAAY,kCAAU,KAAK,YAAY,mDAAmD,aAAa;AAAA,EACvG,aAAa,kCAAU,KAAK,YAAY,oDAAoD,aAAa;AAAA,EACzG,eAAe,kCAAU,IAAI,YAAY,oDAAoD,aAAa;AAAA,EAC1G,cAAc,kCAAU,IAAI,YAAY,uCAAuC,aAAa;AAAA,EAC5F,eAAe,kCAAU,IAAI,YAAY,wCAAwC,aAAa;AAAA,EAC9F,eAAe,kCAAU,KACtB,YAAY,4DACZ,aAAa;AAAA,EAChB,QAAQ,kCAAU,OAAO,YAAY,oCAAoC,aAAa;AAAA,EACtF,UAAU,kCAAU,OAAO,YAAY;AAAA;",
   "names": []
 }

package/dist/cjs/combobox/utils/listHelper.js

@@ -27,7 +27,9 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
 var listHelper_exports = {};
 __export(listHelper_exports, {
+  filterOptions: () => filterOptions,
   findInCircularList: () => findInCircularList,
+  getFilteredOptionsSelected: () => getFilteredOptionsSelected,
   getFirstOption: () => getFirstOption,
   getLastValueSelected: () => getLastValueSelected,
   getOptions: () => getOptions,
@@ -35,7 +37,8 @@ __export(listHelper_exports, {
   getSuggestedValueOnChange: () => getSuggestedValueOnChange,
   isSelected: () => isSelected,
   isSelectedValueEmpty: () => isSelectedValueEmpty,
-  isSelectedValueMultiple: () => isSelectedValueMultiple
+  isSelectedValueMultiple: () => isSelectedValueMultiple,
+  selectedValuesWithSections: () => selectedValuesWithSections
 });
 var React = __toESM(require("react"));
 var import_constants = require("../constants");
@@ -58,14 +61,18 @@ const findInCircularList = (list, from, criteria, step = 1) => {
   }
   return from;
 };
+const getLastValueSelected = (selectedValues) => {
+  if (Array.isArray(selectedValues)) {
+    return selectedValues[selectedValues.length - 1];
+  }
+  return selectedValues;
+};
 const getFirstOption = (options, selectedValues, inputValue) => {
   if (!inputValue) {
-    if (Array.isArray(selectedValues) && selectedValues.length > 0) {
-      return selectedValues[selectedValues.length - 1].dsId;
-    }
-    if (selectedValues?.dsId) {
-      return selectedValues.dsId;
-    }
+    const lastValue = getLastValueSelected(selectedValues);
+    console.log(lastValue, "lastValue");
+    if (lastValue)
+      return lastValue.dsId;
   }
   for (let i = 0; i < options.length; i += 1)
     if (!["section", "separator"].includes(options[i].type) && !options[i].disabled) {
@@ -86,11 +93,27 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
   }
   return selectedOption;
 };
-const getLastValueSelected = (selectedValues) => {
-  if (Array.isArray(selectedValues)) {
-    return selectedValues[selectedValues.length - 1];
+const filterOptions = (inputValue, options) => options.filter((option) => option.type === import_constants.MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
+const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
+  const items = [];
+  if (optionsToParse)
+    optionsToParse.forEach((option) => {
+      if (option.type === import_constants.MENU_OPTION_TYPES.OPTION && isSelected(multiSelectedValue, option)) {
+        items.push(option);
+      }
+      if (option.type === import_constants.MENU_OPTION_TYPES.SECTION) {
+        if (items[items.length - 1]?.type === import_constants.MENU_OPTION_TYPES.SECTION) {
+          items[items.length - 1] = option;
+        } else {
+          items.push(option);
+        }
+      }
+    });
+  if (items[items.length - 1]?.type === import_constants.MENU_OPTION_TYPES.SECTION) {
+    items.pop();
   }
-  return selectedValues;
+  return items;
 };
+const getFilteredOptionsSelected = (filteredOption, selectedValues) => filteredOption.filter((option) => option.type === import_constants.MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));
 module.exports = __toCommonJS(listHelper_exports);
 //# sourceMappingURL=listHelper.js.map

package/dist/cjs/combobox/utils/listHelper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/combobox/utils/listHelper.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nimport { isOption } from '../sharedTypes';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n  options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n  options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n  Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n  if (isSelectedValueMultiple(value)) {\n    const multiValue = value as DSComboboxT.ItemOption[];\n    return multiValue.some((item) => item?.value === activeOption?.value);\n  }\n  const singleValue = value as DSComboboxT.ItemOption;\n  return singleValue?.value === activeOption.value;\n};\n\nexport const findInCircularList = (\n  list: DSComboboxT.OptionTypes[],\n  from: number,\n  criteria: (item: DSComboboxT.OptionTypes) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from > -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (criteria(list[i])) return i;\n  }\n  return from; // return same item\n};\n\nexport const getFirstOption = (\n  options: DSComboboxT.OptionTypes[],\n  selectedValues: DSComboboxT.SelectedOptionsT,\n  inputValue: string,\n): string => {\n  if (!inputValue) {\n    if (Array.isArray(selectedValues) && selectedValues.length > 0) {\n      return selectedValues[selectedValues.length - 1].dsId;\n    }\n    if (selectedValues?.dsId) {\n      return selectedValues.dsId;\n    }\n  }\n\n  for (let i = 0; i < options.length; i += 1)\n    if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n      return options[i].dsId;\n    }\n  return '';\n};\n\nexport const getSuggestedValueOnChange = (\n  selectedOption: DSComboboxT.ItemOption,\n  selectedValues: DSComboboxT.SelectedOptionsT,\n) => {\n  if (Array.isArray(selectedValues)) {\n    const isFound = selectedValues.find((item) => item.type === 'option' && item.value === selectedOption.value);\n    if (isFound) {\n      return selectedValues.filter((item) => item.type === 'option' && item.value !== selectedOption.value);\n    }\n    return [...selectedValues, selectedOption];\n  }\n  if (selectedValues && selectedValues.dsId === selectedOption.dsId) {\n    return null;\n  }\n  return selectedOption;\n};\n\nexport const getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n  if (Array.isArray(selectedValues)) {\n    return selectedValues[selectedValues.length - 1];\n  }\n  return selectedValues;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAkC;AAE3B,MAAM,uBAAuB,CAAC,YACnC,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,mCAAkB,UAAU,CAAC,OAAO;AAE1E,MAAM,aAAa,CAAC,YACzB,QAAQ,OAAO,CAAC,WAAW,OAAO,SAAS,mCAAkB;AAExD,MAAM,uBAAuB,CAAC,UACnC,MAAM,QAAQ,SAAS,MAAM,WAAW,IAAI,CAAC;AAExC,MAAM,0BAA0B,CAAC,UAAiD,MAAM,QAAQ;AAEhG,MAAM,aAAa,CAAC,OAAqC,iBAAkD;AAChH,MAAI,wBAAwB,QAAQ;AAClC,UAAM,aAAa;AACnB,WAAO,WAAW,KAAK,CAAC,SAAS,MAAM,UAAU,cAAc;AAAA;AAEjE,QAAM,cAAc;AACpB,SAAO,aAAa,UAAU,aAAa;AAAA;AAGtC,MAAM,qBAAqB,CAChC,MACA,MACA,UACA,OAAO,MAEI;AACX,WACM,IAAK,QAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,IAAK,KAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,SAAS,KAAK;AAAK,aAAO;AAAA;AAEhC,SAAO;AAAA;AAGF,MAAM,iBAAiB,CAC5B,SACA,gBACA,eACW;AACX,MAAI,CAAC,YAAY;AACf,QAAI,MAAM,QAAQ,mBAAmB,eAAe,SAAS,GAAG;AAC9D,aAAO,eAAe,eAAe,SAAS,GAAG;AAAA;AAEnD,QAAI,gBAAgB,MAAM;AACxB,aAAO,eAAe;AAAA;AAAA;AAI1B,WAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AACvC,QAAI,CAAC,CAAC,WAAW,aAAa,SAAS,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,UAAU;AAC/E,aAAO,QAAQ,GAAG;AAAA;AAEtB,SAAO;AAAA;AAGF,MAAM,4BAA4B,CACvC,gBACA,mBACG;AACH,MAAI,MAAM,QAAQ,iBAAiB;AACjC,UAAM,UAAU,eAAe,KAAK,CAAC,SAAS,KAAK,SAAS,YAAY,KAAK,UAAU,eAAe;AACtG,QAAI,SAAS;AACX,aAAO,eAAe,OAAO,CAAC,SAAS,KAAK,SAAS,YAAY,KAAK,UAAU,eAAe;AAAA;AAEjG,WAAO,CAAC,GAAG,gBAAgB;AAAA;AAE7B,MAAI,kBAAkB,eAAe,SAAS,eAAe,MAAM;AACjE,WAAO;AAAA;AAET,SAAO;AAAA;AAGF,MAAM,uBAAuB,CAAC,mBAAiD;AACpF,MAAI,MAAM,QAAQ,iBAAiB;AACjC,WAAO,eAAe,eAAe,SAAS;AAAA;AAEhD,SAAO;AAAA;",
+  "sourcesContent": ["import { DSComboboxT } from '../react-desc-prop-types';\nimport { MENU_OPTION_TYPES } from '../constants';\nexport const getSelectableOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n  options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && !option.disabled);\n\nexport const getOptions = (options: Array<DSComboboxT.OptionTypes>): Array<DSComboboxT.OptionTypes> =>\n  options.filter((option) => option.type === MENU_OPTION_TYPES.OPTION);\n\nexport const isSelectedValueEmpty = (value: DSComboboxT.SelectedOptionsT): boolean =>\n  Array.isArray(value) ? value.length === 0 : !value;\n\nexport const isSelectedValueMultiple = (value: DSComboboxT.SelectedOptionsT): boolean => Array.isArray(value);\n\nexport const isSelected = (value: DSComboboxT.SelectedOptionsT, activeOption: DSComboboxT.ItemOption): boolean => {\n  if (isSelectedValueMultiple(value)) {\n    const multiValue = value as DSComboboxT.ItemOption[];\n    return multiValue.some((item) => item?.value === activeOption?.value);\n  }\n  const singleValue = value as DSComboboxT.ItemOption;\n  return singleValue?.value === activeOption.value;\n};\n\nexport const findInCircularList = (\n  list: DSComboboxT.OptionTypes[],\n  from: number,\n  criteria: (item: DSComboboxT.OptionTypes) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from > -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (criteria(list[i])) return i;\n  }\n  return from; // return same item\n};\n\nexport const getLastValueSelected = (selectedValues: DSComboboxT.SelectedOptionsT) => {\n  if (Array.isArray(selectedValues)) {\n    return selectedValues[selectedValues.length - 1];\n  }\n  return selectedValues;\n};\n\nexport const getFirstOption = (\n  options: DSComboboxT.OptionTypes[],\n  selectedValues: DSComboboxT.SelectedOptionsT,\n  inputValue: string,\n): string => {\n  if (!inputValue) {\n    const lastValue = getLastValueSelected(selectedValues);\n    console.log(lastValue, 'lastValue');\n    if (lastValue) return lastValue.dsId;\n  }\n\n  for (let i = 0; i < options.length; i += 1)\n    if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {\n      return options[i].dsId;\n    }\n  return '';\n};\n\nexport const getSuggestedValueOnChange = (\n  selectedOption: DSComboboxT.ItemOption,\n  selectedValues: DSComboboxT.SelectedOptionsT,\n) => {\n  if (Array.isArray(selectedValues)) {\n    const isFound = selectedValues.find((item) => item.type === 'option' && item.value === selectedOption.value);\n    if (isFound) {\n      return selectedValues.filter((item) => item.type === 'option' && item.value !== selectedOption.value);\n    }\n    return [...selectedValues, selectedOption];\n  }\n  if (selectedValues && selectedValues.dsId === selectedOption.dsId) {\n    return null;\n  }\n  return selectedOption;\n};\n\nexport const filterOptions = (inputValue: string, options: DSComboboxT.OptionTypes[]) =>\n  options.filter(\n    (option) =>\n      option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()),\n  );\n\nexport const selectedValuesWithSections = (\n  optionsToParse: DSComboboxT.OptionTypes[],\n  multiSelectedValue: DSComboboxT.ItemOption[],\n) => {\n  const items = [] as DSComboboxT.OptionTypes[];\n\n  if (optionsToParse)\n    optionsToParse.forEach((option) => {\n      // const isSelectedValue = multiSelectedValue.find((item) => item?.dsId === option.dsId);\n      if (option.type === MENU_OPTION_TYPES.OPTION && isSelected(multiSelectedValue, option)) {\n        items.push(option);\n      }\n\n      if (option.type === MENU_OPTION_TYPES.SECTION) {\n        if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {\n          items[items.length - 1] = option;\n        } else {\n          items.push(option);\n        }\n      }\n    });\n  if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {\n    items.pop();\n  }\n\n  return items;\n};\n\nexport const getFilteredOptionsSelected = (\n  filteredOption: DSComboboxT.OptionTypes[],\n  selectedValues: DSComboboxT.ItemOption[],\n) => filteredOption.filter((option) => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -26,6 +26,6 @@ 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"));
+__reExport(hooks_exports, require("./useZipCodeMask"));
 module.exports = __toCommonJS(hooks_exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +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"],
+  "sourcesContent": ["export * from './usePhoneMask';\nexport * from './useNumberMask';\nexport * from './useSSNMask';\nexport * from './useZipCodeMask';\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

@@ -42,6 +42,7 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 var useNumberMask_exports = {};
 __export(useNumberMask_exports, {
   UseNumberMaskWithSchema: () => UseNumberMaskWithSchema,
+  getNumberMaskedValue: () => getNumberMaskedValue,
   useNumberMask: () => useNumberMask
 });
 var React = __toESM(require("react"));
@@ -160,6 +161,10 @@ const useNumberMask = (props) => {
     onBlur
   };
 };
+const getNumberMaskedValue = (value, opts) => {
+  const [maskedValue] = conformValue(value, value.length - 1, "", opts);
+  return maskedValue;
+};
 const UseNumberMaskWithSchema = (0, import_ds_props_helpers.describe)(useNumberMask);
 UseNumberMaskWithSchema.propTypes = import_react_desc_prop_types.DSMaskNumberHookPropsTypes;
 module.exports = __toCommonJS(useNumberMask_exports);

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

@@ -1,7 +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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",
+  "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 getNumberMaskedValue = (value: string, opts: DSMaskT.NumberHookArgs) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '', opts);\n  return maskedValue;\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

@@ -42,6 +42,7 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 var usePhoneMask_exports = {};
 __export(usePhoneMask_exports, {
   UsePhoneMaskWithSchema: () => UsePhoneMaskWithSchema,
+  getPhoneMaskedValue: () => getPhoneMaskedValue,
   usePhoneMask: () => usePhoneMask
 });
 var React = __toESM(require("react"));
@@ -103,6 +104,10 @@ const usePhoneMask = (props) => {
     onChange
   };
 };
+const getPhoneMaskedValue = (value, opts) => {
+  const [maskedValue] = conformValue(value, value.length - 1, "", opts);
+  return maskedValue;
+};
 const UsePhoneMaskWithSchema = (0, import_ds_props_helpers.describe)(usePhoneMask);
 UsePhoneMaskWithSchema.propTypes = import_react_desc_prop_types.DSMaskPhoneHookPropsTypes;
 module.exports = __toCommonJS(usePhoneMask_exports);

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

@@ -1,7 +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,OAAO;AAAA;AAGV,MAAM,iCAAqD;AAAA,EACzD,CAAC,QAAQ;AAAA,EACT,CAAC,MAAM;AAAA,EACP,CAAC,OAAO;AAAA;AAGV,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;",
+  "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 getPhoneMaskedValue = (value: string, opts: Partial<DSMaskT.PhoneHookArgs>) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '', opts);\n  return maskedValue;\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;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,OAAO;AAAA;AAGV,MAAM,iCAAqD;AAAA,EACzD,CAAC,QAAQ;AAAA,EACT,CAAC,MAAM;AAAA,EACP,CAAC,OAAO;AAAA;AAGV,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,sBAAsB,CAAC,OAAe,SAAyC;AAC1F,QAAM,CAAC,eAAe,aAAa,OAAO,MAAM,SAAS,GAAG,IAAI;AAChE,SAAO;AAAA;AAGF,MAAM,yBAAyB,sCAAS;AAC/C,uBAAuB,YAAY;",
   "names": []
 }

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

@@ -28,6 +28,7 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 var useSSNMask_exports = {};
 __export(useSSNMask_exports, {
   UseSSNMaskWithSchema: () => UseSSNMaskWithSchema,
+  getSSNMaskedValue: () => getSSNMaskedValue,
   useSSNMask: () => useSSNMask
 });
 var React = __toESM(require("react"));
@@ -76,6 +77,10 @@ const useSSNMask = (props) => {
     onChange
   };
 };
+const getSSNMaskedValue = (value) => {
+  const [maskedValue] = conformValue(value, value.length - 1, "");
+  return maskedValue;
+};
 const UseSSNMaskWithSchema = (0, import_ds_props_helpers.describe)(useSSNMask);
 UseSSNMaskWithSchema.propTypes = import_react_desc_prop_types.DSMaskHookPropsTypes;
 module.exports = __toCommonJS(useSSNMask_exports);

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

@@ -1,7 +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;",
+  "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 getSSNMaskedValue = (value: string) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '');\n  return maskedValue;\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;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,oBAAoB,CAAC,UAAkB;AAClD,QAAM,CAAC,eAAe,aAAa,OAAO,MAAM,SAAS,GAAG;AAC5D,SAAO;AAAA;AAGF,MAAM,uBAAuB,sCAAS;AAC7C,qBAAqB,YAAY;",
   "names": []
 }

package/dist/cjs/mask-hook/hooks/{useZipCode.js → useZipCodeMask.js}

@@ -25,10 +25,11 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
     return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
   };
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var useZipCode_exports = {};
-__export(useZipCode_exports, {
+var useZipCodeMask_exports = {};
+__export(useZipCodeMask_exports, {
   UseZipCodeMaskWithSchema: () => UseZipCodeMaskWithSchema,
-  useZipCode: () => useZipCode
+  getUseZipMaskedValue: () => getUseZipMaskedValue,
+  useZipCodeMask: () => useZipCodeMask
 });
 var React = __toESM(require("react"));
 var import_react = require("react");
@@ -39,11 +40,11 @@ var import_react_desc_prop_types = require("../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);
+  maskedValue = maskedValue.slice(0, 9);
   const maskedPos = (0, import_utils.getPartialMaskedPos)(rawValue, maskedValue, cursorPos);
   return (0, import_utils.addSpecialCharacters)(maskedValue, zipCodeSpecialChars, maskedPos, lastKeyCode);
 };
-const useZipCode = (props) => {
+const useZipCodeMask = (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;
@@ -71,7 +72,11 @@ const useZipCode = (props) => {
     onChange
   };
 };
-const UseZipCodeMaskWithSchema = (0, import_ds_props_helpers.describe)(useZipCode);
+const getUseZipMaskedValue = (value) => {
+  const [maskedValue] = conformValue(value, value.length - 1, "");
+  return maskedValue;
+};
+const UseZipCodeMaskWithSchema = (0, import_ds_props_helpers.describe)(useZipCodeMask);
 UseZipCodeMaskWithSchema.propTypes = import_react_desc_prop_types.DSMaskHookPropsTypes;
-module.exports = __toCommonJS(useZipCode_exports);
-//# sourceMappingURL=useZipCode.js.map
+module.exports = __toCommonJS(useZipCodeMask_exports);
+//# sourceMappingURL=useZipCodeMask.js.map

package/dist/cjs/mask-hook/hooks/{useZipCode.js.map → useZipCodeMask.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/mask-hook/hooks/useZipCode.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 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", "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,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,sCAAoB,UAAU,aAAa;AAE7D,SAAO,uCAAqB,aAAa,qBAAqB,WAAW;AAAA;AAGpE,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,2BAA2B,sCAAS;AACjD,yBAAyB,YAAY;",
+  "sources": ["../../../../src/mask-hook/hooks/useZipCodeMask.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 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 9 digits\n  maskedValue = maskedValue.slice(0, 9);\n\n  const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n\n  return addSpecialCharacters(maskedValue, zipCodeSpecialChars, maskedPos, lastKeyCode);\n};\n\nexport const useZipCodeMask: DSMaskT.Hook = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes);\n  const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;\n\n  const lastKeyCode = useRef('Unidentified');\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 getUseZipMaskedValue = (value: string) => {\n  const [maskedValue] = conformValue(value, value.length - 1, '');\n  return maskedValue;\n};\n\nexport const UseZipCodeMaskWithSchema = describe(useZipCodeMask);\nUseZipCodeMaskWithSchema.propTypes = DSMaskHookPropsTypes;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,8BAAuF;AACvF,0BAAuC;AACvC,mBAA6E;AAC7E,mCAAsE;AAEtE,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,sCAAoB,UAAU,aAAa;AAE7D,SAAO,uCAAqB,aAAa,qBAAqB,WAAW;AAAA;AAGpE,MAAM,iBAA+B,CAAC,UAAU;AACrD,QAAM,mBAAmB,0DAA6B,OAAO;AAC7D,8DAA+B,kBAAkB;AACjD,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,kBAAkB;AAE1E,QAAM,cAAc,yBAAO;AAC3B,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,CAAC,UAAkB;AACrD,QAAM,CAAC,eAAe,aAAa,OAAO,MAAM,SAAS,GAAG;AAC5D,SAAO;AAAA;AAGF,MAAM,2BAA2B,sCAAS;AACjD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/autocomplete/Autocomplete.js

@@ -1,11 +1,10 @@
 import * as React from "react";
 import React2 from "react";
-import { describe } from "react-desc";
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { useMemoMergePropsWithDefault, describe, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
 import { useAutocomplete } from "./config/useAutocomplete";
 import { Container } from "./parts/container";
-import { propTypes } from "./propTypes";
 import { AutocompleteContext, defaultProps } from "./AutocompleteCTX";
+import { propTypes } from "./react-desc-prop-types";
 const DSAutocomplete = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, propTypes);

package/dist/esm/autocomplete/Autocomplete.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/autocomplete/Autocomplete.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from 'react-desc';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useAutocomplete } from './config/useAutocomplete';\nimport { Container } from './parts/container';\nimport { propTypes } from './propTypes';\nimport { AutocompleteContext, defaultProps } from './AutocompleteCTX';\nimport type { AutocompletePropsT } from './index.d';\n\nconst DSAutocomplete = (props: AutocompletePropsT): JSX.Element => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, propTypes);\n  const ctx = useAutocomplete(props);\n  return (\n    <AutocompleteContext.Provider value={ctx}>\n      <Container />\n    </AutocompleteContext.Provider>\n  );\n};\nDSAutocomplete.propTypes = propTypes;\nconst DSAutocompleteWithSchema = describe(DSAutocomplete);\nDSAutocompleteWithSchema.propTypes = propTypes;\n\nexport { DSAutocomplete, DSAutocompleteWithSchema };\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,iBAAiB,CAAC,UAA2C;AACjE,QAAM,mBAAmB,6BAA6B,OAAO;AAE7D,iCAA+B,kBAAkB;AACjD,QAAM,MAAM,gBAAgB;AAC5B,SACE,qCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KACnC,qCAAC,WAAD;AAAA;AAIN,eAAe,YAAY;AAC3B,MAAM,2BAA2B,SAAS;AAC1C,yBAAyB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { useMemoMergePropsWithDefault, describe, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useAutocomplete } from './config/useAutocomplete';\nimport { Container } from './parts/container';\nimport { AutocompleteContext, defaultProps } from './AutocompleteCTX';\nimport { DSAutocompleteT, propTypes } from './react-desc-prop-types';\n\nconst DSAutocomplete: React.ComponentType<DSAutocompleteT.Props> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n\n  useValidateTypescriptPropTypes(propsWithDefault, propTypes);\n  const ctx = useAutocomplete(props);\n  return (\n    <AutocompleteContext.Provider value={ctx}>\n      <Container />\n    </AutocompleteContext.Provider>\n  );\n};\nDSAutocomplete.propTypes = propTypes as WeakValidationMap<unknown>;\nconst DSAutocompleteWithSchema = describe(DSAutocomplete);\nDSAutocompleteWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSAutocomplete, DSAutocompleteWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,iBAA6D,CAAC,UAAU;AAC5E,QAAM,mBAAmB,6BAA6B,OAAO;AAE7D,iCAA+B,kBAAkB;AACjD,QAAM,MAAM,gBAAgB;AAC5B,SACE,qCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KACnC,qCAAC,WAAD;AAAA;AAIN,eAAe,YAAY;AAC3B,MAAM,2BAA2B,SAAS;AAC1C,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/autocomplete/AutocompleteCTX.js

@@ -2,18 +2,10 @@ import * as React from "react";
 import { createContext, createRef } from "react";
 import { noop } from "lodash";
 const defaultProps = {
-  placeholder: "",
-  options: [],
-  selectedValues: "",
-  hasError: false,
-  isLoading: false,
-  autoFocus: false,
+  zIndex: 10,
+  withoutPortal: false,
   startPlacementPreference: "bottom-start",
-  placementOrderPreference: ["bottom-start", "bottom-end"],
-  onChange: noop,
-  onKeyDown: noop,
-  onFilter: noop,
-  onMenuOpen: noop
+  placementOrderPreference: ["bottom-start", "bottom-end"]
 };
 const defaultContext = {
   props: defaultProps,
@@ -24,9 +16,6 @@ const defaultContext = {
   setReferenceElement: noop,
   inputRef: createRef(),
   listRef: createRef(),
-  wrapperListRef: createRef(),
-  controlsWrapperRef: createRef(),
-  selectedOptionsRef: createRef(),
   focusOptionIdx: "",
   setCurrentOption: noop
 };

package/dist/esm/autocomplete/AutocompleteCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/autocomplete/AutocompleteCTX.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport { noop } from 'lodash';\nimport type { AutocompletePropsT, AutocompleteContextT } from './index.d';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n\nexport const defaultProps: AutocompletePropsT = {\n  placeholder: '',\n  options: [],\n  selectedValues: '',\n  hasError: false,\n  isLoading: false,\n  autoFocus: false,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'bottom-end'],\n  onChange: noop,\n  onKeyDown: noop,\n  onFilter: noop,\n  onMenuOpen: noop,\n};\nconst defaultContext = {\n  props: defaultProps,\n  showPopover: false,\n  setShowPopover: noop,\n  scrollOptionIntoView: noop,\n  referenceElement: null,\n  setReferenceElement: noop,\n  inputRef: createRef<HTMLInputElement>(),\n  listRef: createRef<HTMLDivElement>(),\n  wrapperListRef: createRef<HTMLDivElement>(),\n  controlsWrapperRef: createRef<HTMLInputElement>(),\n  selectedOptionsRef: createRef<HTMLInputElement>(),\n  focusOptionIdx: '',\n  setCurrentOption: noop,\n};\n/** Context for cross component communication */\nexport const AutocompleteContext = createContext<AutocompleteContextT>(defaultContext);\n\nexport default AutocompleteContext;\n"],
-  "mappings": "AAAA;ACAA;AACA;AAIO,MAAM,eAAmC;AAAA,EAC9C,aAAa;AAAA,EACb,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB;AAAA,EAC3C,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA;AAEd,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA;AAGb,MAAM,sBAAsB,cAAoC;AAEvE,IAAO,0BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport { noop } from 'lodash';\nimport { DSAutocompleteT } from './react-desc-prop-types';\nimport { DSAutoCompleteInternalsT } from './sharedTypes';\n// eslint-disable-next-line @typescript-eslint/no-empty-function\n\nexport const defaultProps: DSAutocompleteT.DefaultProps = {\n  zIndex: 10,\n  withoutPortal: false,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'bottom-end'],\n};\nconst defaultContext = {\n  props: defaultProps as DSAutocompleteT.InternalProps,\n  showPopover: false,\n  setShowPopover: noop,\n  scrollOptionIntoView: noop,\n  referenceElement: null,\n  setReferenceElement: noop,\n  inputRef: createRef<HTMLInputElement>(),\n  listRef: createRef<HTMLDivElement>(),\n  focusOptionIdx: '',\n  setCurrentOption: noop,\n};\n/** Context for cross component communication */\nexport const AutocompleteContext = createContext<DSAutoCompleteInternalsT.AutocompleteContext>(defaultContext);\n\nexport default AutocompleteContext;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAKO,MAAM,eAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,0BAA0B;AAAA,EAC1B,0BAA0B,CAAC,gBAAgB;AAAA;AAE7C,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,kBAAkB;AAAA;AAGb,MAAM,sBAAsB,cAA4D;AAE/F,IAAO,0BAAQ;",
   "names": []
 }

package/dist/esm/autocomplete/AutocompleteDataTestids.js

@@ -1,14 +1,8 @@
 import * as React from "react";
 const AutocompleteDataTestid = {
-  INPUT: "autocomplete-input",
   LIST: "autocomplete-menu-list",
-  SELECTED_VALUES: "autocomplete-selected-values",
-  SELECT_ALL_BUTTON: "autocomplete-all-btn",
-  CLEAR_ALL_BUTTON: "autocomplete-clear-btn",
-  DROPDOWN: "autocomplete-dropdown-btn",
   OPTION: "autocomplete-option",
-  SHOW_ALL_BUTTON: "autocomplete-show-all-btn",
-  SHOW_SELECTED_OPTIONS_BUTTON: "autocomplete-selected-options-btn"
+  CONTAINER: "autocomplete-container"
 };
 export {
   AutocompleteDataTestid