@elliemae/ds-controlled-form 2.4.1-rc.1 → 2.4.1-rc.5

package/cjs/combobox/parts/menu-list/useItemRenderer.js

@@ -34,12 +34,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const useItemRenderer = () => {
   const {
     props: {
-      options,
+      filteredOptions,
       onCreate,
       onChange,
       selectedValues,
       onFilter,
-      innerRef
+      allOptions
     },
     setShowPopover,
     inputValue,
@@ -54,11 +54,11 @@ const useItemRenderer = () => {
       if (inputValue) {
         onCreate(inputValue);
         setInputValue('');
-        onFilter('');
+        onFilter(allOptions, inputValue);
       }
     } else if (option.type === constants.MENU_OPTION_TYPES.OPTION) {
       if (!option.disabled) {
-        if (onFilter) onFilter('');
+        if (onFilter) onFilter(allOptions, inputValue);
         setInputValue('');
 
         if (!multiple) {
@@ -72,7 +72,7 @@ const useItemRenderer = () => {
 
     e.stopPropagation();
     e.preventDefault();
-  }, [onFilter, selectedValues, onChange, setShowPopover, multiple, innerRef]); // prevent blur from controls input
+  }, [onFilter, selectedValues, onChange, setShowPopover, multiple]); // prevent blur from controls input
 
   const handleOnMouseDown = React.useCallback(e => {
     e.preventDefault();
@@ -83,7 +83,7 @@ const useItemRenderer = () => {
     }
 
     return virtualListHelpers.virtualItems.map(vItem => {
-      const option = options[vItem.index];
+      const option = filteredOptions[vItem.index];
       const generalProps = {
         wrapperStyles: {
           position: 'absolute',
@@ -133,7 +133,7 @@ const useItemRenderer = () => {
               height: "16px",
               gutter: "xxs",
               alignItems: "center"
-            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx__default["default"](styled.StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, label));
+            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx__default["default"](styled.StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, "\"".concat(label, "\"")));
           },
           label: option.label,
           onClick: e => handleClick(option, e)
@@ -142,7 +142,7 @@ const useItemRenderer = () => {
 
       return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
     });
-  }, [options, focusOptionIdx, selectedValues, innerRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.virtualItems]);
+  }, [filteredOptions, focusOptionIdx, selectedValues, virtualListHelpers]);
 };
 
 exports.useItemRenderer = useItemRenderer;

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

@@ -10,7 +10,7 @@ const useMenuListSetFocusOption = () => {
   const {
     props: {
       selectedValues,
-      options
+      filteredOptions
     },
     setFocusOptionIdx,
     hasFocus,
@@ -19,16 +19,16 @@ const useMenuListSetFocusOption = () => {
     scrollOptionIntoView
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const getFirstOption = 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]);
   React.useEffect(() => {
     scrollOptionIntoView(focusOptionIdx); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [focusOptionIdx]);
   React.useEffect(() => {
-    if (options.length === 0) {
+    if (filteredOptions.length === 0) {
       setFocusOptionIdx('');
     }
 
@@ -45,7 +45,7 @@ const useMenuListSetFocusOption = () => {
     }
 
     if (hasFocus) getFirstOption();
-  }, [getFirstOption, inputValue, selectedValues, hasFocus, setFocusOptionIdx, options.length]);
+  }, [getFirstOption, inputValue, selectedValues, hasFocus, setFocusOptionIdx, filteredOptions.length]);
 };
 
 exports.useMenuListSetFocusOption = useMenuListSetFocusOption;

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

@@ -20,7 +20,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function noop() {}
 const ComboboxPropTypes = _objectSpread(_objectSpread({}, dsPropsHelpers.globalAttributesPropTypes), {}, {
   placeholder: dsPropsHelpers.PropTypes.string.description("input's placeholder value").defaultValue(''),
-  options: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.array, dsPropsHelpers.PropTypes.object]).isRequired.description('List of options').defaultValue([]),
+  allOptions: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.array, dsPropsHelpers.PropTypes.object]).isRequired.description('List of original options').defaultValue([]),
+  filteredOptions: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.array, dsPropsHelpers.PropTypes.object]).description('List of filtered options to show in the menu based on the current internal input filter value').defaultValue([]),
   selectedValues: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.object), dsPropsHelpers.PropTypes.object]).isRequired.description('Array of option or single option selected'),
   disabled: dsPropsHelpers.PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),
   autoFocus: dsPropsHelpers.PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),

package/cjs/combobox/utils/listHelper.js

@@ -10,6 +10,8 @@ require('core-js/modules/esnext.iterator.some.js');
 require('core-js/modules/esnext.async-iterator.find.js');
 require('core-js/modules/esnext.iterator.find.js');
 require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var constants = require('../constants.js');
 
 const getSelectableOptions = options => options.filter(option => option.type === constants.MENU_OPTION_TYPES.OPTION && !option.disabled);
@@ -34,15 +36,17 @@ const findInCircularList = function (list, from, criteria) {
 
   return from; // return same item
 };
+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 !== null && selectedValues !== void 0 && selectedValues.dsId) {
-      return selectedValues.dsId;
-    }
+    const lastValue = getLastValueSelected(selectedValues);
+    if (lastValue) return lastValue.dsId;
   }
 
   for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {
@@ -68,15 +72,39 @@ 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 === constants.MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
+const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
+  var _items2;
+
+  const items = [];
+  if (optionsToParse) optionsToParse.forEach(option => {
+    // const isSelectedValue = multiSelectedValue.find((item) => item?.dsId === option.dsId);
+    if (option.type === constants.MENU_OPTION_TYPES.OPTION && isSelected(multiSelectedValue, option)) {
+      items.push(option);
+    }
+
+    if (option.type === constants.MENU_OPTION_TYPES.SECTION) {
+      var _items;
+
+      if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === constants.MENU_OPTION_TYPES.SECTION) {
+        items[items.length - 1] = option;
+      } else {
+        items.push(option);
+      }
+    }
+  });
+
+  if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === constants.MENU_OPTION_TYPES.SECTION) {
+    items.pop();
   }
 
-  return selectedValues;
+  return items;
 };
+const getFilteredOptionsSelected = (filteredOption, selectedValues) => filteredOption.filter(option => option.type === constants.MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));
 
+exports.filterOptions = filterOptions;
 exports.findInCircularList = findInCircularList;
+exports.getFilteredOptionsSelected = getFilteredOptionsSelected;
 exports.getFirstOption = getFirstOption;
 exports.getLastValueSelected = getLastValueSelected;
 exports.getOptions = getOptions;
@@ -85,3 +113,4 @@ exports.getSuggestedValueOnChange = getSuggestedValueOnChange;
 exports.isSelected = isSelected;
 exports.isSelectedValueEmpty = isSelectedValueEmpty;
 exports.isSelectedValueMultiple = isSelectedValueMultiple;
+exports.selectedValuesWithSections = selectedValuesWithSections;

package/cjs/index.js

@@ -18,11 +18,14 @@ var timeHelpers = require('./date-time-picker/utils/timeHelpers.js');
 var usePhoneMask = require('./mask-hook/hooks/usePhoneMask.js');
 var useNumberMask = require('./mask-hook/hooks/useNumberMask.js');
 var useSSNMask = require('./mask-hook/hooks/useSSNMask.js');
-var useZipCode = require('./mask-hook/hooks/useZipCode.js');
+var useZipCodeMask = require('./mask-hook/hooks/useZipCodeMask.js');
 var DSInputText = require('./text-input/DSInputText.js');
 var dataTestIds = require('./text-input/exported-related/data-test-ids.js');
 var theming = require('./text-input/exported-related/theming.js');
 var ControlledToggle = require('./toggle/ControlledToggle.js');
+var DSControlledLargeTextInput = require('./large-text-input/DSControlledLargeTextInput.js');
+var dataTestIds$1 = require('./large-text-input/exported-related/data-test-ids.js');
+var theming$1 = require('./large-text-input/exported-related/theming.js');
 
 
 
@@ -31,6 +34,7 @@ exports.DSAutocompleteWithSchema = Autocomplete.DSAutocompleteWithSchema;
 exports.DSControlledCheckbox = ControlledCheckbox.DSControlledCheckbox;
 exports.DSControlledCheckboxWithSchema = ControlledCheckbox.DSControlledCheckboxWithSchema;
 exports.DSComboBox = ComboBox.DSComboBox;
+exports.DSComboBoxV3 = ComboBox.DSComboBox;
 exports.DSComboBoxWithSchema = ComboBox.DSComboBoxWithSchema;
 exports.DSControlledDateRangePicker = ControlledDateRangePicker.DSControlledDateRangePicker;
 exports.DSControlledDateRangePickerWithSchema = ControlledDateRangePicker.DSControlledDateRangePickerWithSchema;
@@ -49,13 +53,17 @@ exports.getDayFromDateString = dateHelpers.getDayFromDateString;
 exports.getValidationDateStringMetaInfo = dateHelpers.getValidationDateStringMetaInfo;
 exports.getValidationTimeStringMetaInfo = timeHelpers.getValidationTimeStringMetaInfo;
 exports.UsePhoneMaskWithSchema = usePhoneMask.UsePhoneMaskWithSchema;
+exports.getPhoneMaskedValue = usePhoneMask.getPhoneMaskedValue;
 exports.usePhoneMask = usePhoneMask.usePhoneMask;
 exports.UseNumberMaskWithSchema = useNumberMask.UseNumberMaskWithSchema;
+exports.getNumberMaskedValue = useNumberMask.getNumberMaskedValue;
 exports.useNumberMask = useNumberMask.useNumberMask;
 exports.UseSSNMaskWithSchema = useSSNMask.UseSSNMaskWithSchema;
+exports.getSSNMaskedValue = useSSNMask.getSSNMaskedValue;
 exports.useSSNMask = useSSNMask.useSSNMask;
-exports.UseZipCodeMaskWithSchema = useZipCode.UseZipCodeMaskWithSchema;
-exports.useZipCode = useZipCode.useZipCode;
+exports.UseZipCodeMaskWithSchema = useZipCodeMask.UseZipCodeMaskWithSchema;
+exports.getUseZipMaskedValue = useZipCodeMask.getUseZipMaskedValue;
+exports.useZipCodeMask = useZipCodeMask.useZipCodeMask;
 exports.DSInputText = DSInputText.DSInputText;
 exports.DSInputTextWithSchema = DSInputText.DSInputTextWithSchema;
 exports.DSInputTextDataTestIds = dataTestIds.DSInputTextDataTestIds;
@@ -63,3 +71,8 @@ exports.DSInputTextName = theming.DSInputTextName;
 exports.DSInputTextSlots = theming.DSInputTextSlots;
 exports.DSControlledToggle = ControlledToggle.DSControlledToggle;
 exports.DSControlledToggleWithSchema = ControlledToggle.DSControlledToggleWithSchema;
+exports.DSControlledLargeTextInput = DSControlledLargeTextInput.DSControlledLargeTextInput;
+exports.DSControlledLargeTextInputWithSchema = DSControlledLargeTextInput.DSControlledLargeTextInputWithSchema;
+exports.DSControlledLargetTextInputDatatestids = dataTestIds$1.DSControlledLargetTextInputDatatestids;
+exports.DSControlledLargeTextInputName = theming$1.DSControlledLargeTextInputName;
+exports.DSControlledLargeTextInputSlots = theming$1.DSControlledLargeTextInputSlots;

package/cjs/large-text-input/DSControlledLargeTextInput.js

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var reactDescPropTypes = require('./react-desc-prop-types.js');
+var styles = require('./styles.js');
+var dataTestIds = require('./exported-related/data-test-ids.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["maxLength", "value", "onChange", "innerRef", "resizable", "name", "id", "withoutCharacterCounter", "hasError"],
+      _excluded2 = ["className"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const DSControlledLargeTextInput = props => {
+  dsPropsHelpers.useValidateTypescriptPropTypes(props, reactDescPropTypes.propTypes);
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.defaultProps);
+
+  const {
+    maxLength,
+    value,
+    onChange,
+    innerRef,
+    resizable,
+    name,
+    id,
+    withoutCharacterCounter,
+    hasError
+  } = propsWithDefault,
+        otherProps = _objectWithoutProperties__default["default"](propsWithDefault, _excluded);
+
+  const _useGetGlobalAttribut = dsPropsHelpers.useGetGlobalAttributes(otherProps),
+        {
+    className
+  } = _useGetGlobalAttribut,
+        globalAttributes = _objectWithoutProperties__default["default"](_useGetGlobalAttribut, _excluded2);
+
+  const xstyledProps = dsPropsHelpers.useGetXstyledProps(otherProps);
+  const handleOnChange = React.useCallback(e => onChange(e.target.value, e), [onChange]);
+  return /*#__PURE__*/jsxRuntime.jsxs(styles.StyledContainer, _objectSpread(_objectSpread({
+    className: className,
+    "data-testid": dataTestIds.DSControlledLargetTextInputDatatestids.CONTAINER
+  }, xstyledProps), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(styles.StyledTextArea, _objectSpread({
+      ref: innerRef,
+      maxLength: maxLength,
+      "aria-multiline": true,
+      value: value,
+      onChange: handleOnChange,
+      resizable: resizable,
+      name: name,
+      id: id,
+      "data-testid": dataTestIds.DSControlledLargetTextInputDatatestids.INPUT,
+      hasError: hasError
+    }, globalAttributes)), maxLength && !withoutCharacterCounter && /*#__PURE__*/_jsx__default["default"](styles.StyledCharCounter, {
+      "data-testid": dataTestIds.DSControlledLargetTextInputDatatestids.CHAR_COUNTER
+    }, void 0, "".concat(value.length, "/").concat(maxLength))]
+  }));
+};
+
+const DSControlledLargeTextInputWithSchema = dsPropsHelpers.describe(DSControlledLargeTextInput);
+DSControlledLargeTextInputWithSchema.propTypes = reactDescPropTypes.propTypes;
+
+exports.DSControlledLargeTextInput = DSControlledLargeTextInput;
+exports.DSControlledLargeTextInputWithSchema = DSControlledLargeTextInputWithSchema;

package/cjs/large-text-input/exported-related/data-test-ids.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DSControlledLargetTextInputDatatestids = {
+  CONTAINER: 'ds-controlled-large-text-input-container',
+  CHAR_COUNTER: 'ds-controlled-large-text-input-char-counter',
+  INPUT: 'ds-controlled-large-text-input'
+};
+
+exports.DSControlledLargetTextInputDatatestids = DSControlledLargetTextInputDatatestids;

package/cjs/large-text-input/exported-related/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dataTestIds = require('./data-test-ids.js');
+var theming = require('./theming.js');
+
+
+
+exports.DSControlledLargetTextInputDatatestids = dataTestIds.DSControlledLargetTextInputDatatestids;
+exports.DSControlledLargeTextInputName = theming.DSControlledLargeTextInputName;
+exports.DSControlledLargeTextInputSlots = theming.DSControlledLargeTextInputSlots;

package/cjs/large-text-input/exported-related/theming.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DSControlledLargeTextInputName = 'ds-controlled-large-text-input';
+const DSControlledLargeTextInputSlots = {
+  CONTAINER: 'root',
+  INPUT: 'input',
+  CHAR_COUNTER: 'char-counter'
+};
+
+exports.DSControlledLargeTextInputName = DSControlledLargeTextInputName;
+exports.DSControlledLargeTextInputSlots = DSControlledLargeTextInputSlots;

package/cjs/large-text-input/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSControlledLargeTextInput = require('./DSControlledLargeTextInput.js');
+var dataTestIds = require('./exported-related/data-test-ids.js');
+var theming = require('./exported-related/theming.js');
+
+
+
+exports.DSControlledLargeTextInput = DSControlledLargeTextInput.DSControlledLargeTextInput;
+exports.DSControlledLargeTextInputWithSchema = DSControlledLargeTextInput.DSControlledLargeTextInputWithSchema;
+exports.DSControlledLargetTextInputDatatestids = dataTestIds.DSControlledLargetTextInputDatatestids;
+exports.DSControlledLargeTextInputName = theming.DSControlledLargeTextInputName;
+exports.DSControlledLargeTextInputSlots = theming.DSControlledLargeTextInputSlots;

package/cjs/large-text-input/react-desc-prop-types.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const noop = () => {};
+
+const defaultProps = {
+  value: '',
+  onChange: noop,
+  withoutCharacterCounter: false,
+  resizable: false,
+  hasError: false
+};
+const propTypes = _objectSpread(_objectSpread(_objectSpread({}, dsPropsHelpers.globalAttributesPropTypes), dsPropsHelpers.xstyledPropTypes), {}, {
+  value: dsPropsHelpers.PropTypes.string.description('Text are value.').defaultValue(''),
+  onChange: dsPropsHelpers.PropTypes.func.description('OnChange cb.').defaultValue('() => {}'),
+  resizable: dsPropsHelpers.PropTypes.bool.description('Enables to resize the component.').defaultValue(false),
+  rows: dsPropsHelpers.PropTypes.string.description('Sets the number of lines for the default height. Once lines are reached, scroll behavior enables.'),
+  withoutCharacterCounter: dsPropsHelpers.PropTypes.bool.description('Removes the character counter.').defaultValue(false),
+  id: dsPropsHelpers.PropTypes.string.description('Unique id.'),
+  innerRef: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.object, dsPropsHelpers.PropTypes.func]).description('Inner ref to the input.'),
+  maxLength: dsPropsHelpers.PropTypes.string.description('Max characters allowed.'),
+  disabled: dsPropsHelpers.PropTypes.bool.description('Set disabled state.'),
+  readOnly: dsPropsHelpers.PropTypes.bool.description('Set readonly state.'),
+  hasError: dsPropsHelpers.PropTypes.bool.description('Set error state.').defaultValue(false)
+});
+
+exports.defaultProps = defaultProps;
+exports.propTypes = propTypes;

package/cjs/large-text-input/styles.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var dsSystem = require('@elliemae/ds-system');
+var styledComponents = require('@xstyled/styled-components');
+var theming = require('./exported-related/theming.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject, _templateObject2, _templateObject3;
+const StyledContainer = dsSystem.styled('div', {
+  name: theming.DSControlledLargeTextInputName,
+  slot: theming.DSControlledLargeTextInputSlots.CONTAINER
+})(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  display: grid;\n  grid-gap: 4px;\n  grid-template-rows: auto auto;\n  grid-template-columns: fit-content;\n  ", "\n  ", "\n  ", "\n"])), styledComponents.layout, styledComponents.space, styledComponents.sizing);
+const StyledCharCounter = dsSystem.styled('span', {
+  name: theming.DSControlledLargeTextInputName,
+  slot: theming.DSControlledLargeTextInputSlots.CHAR_COUNTER
+})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  justify-self: flex-end;\n"])));
+const StyledTextArea = dsSystem.styled('textarea', {
+  name: theming.DSControlledLargeTextInputName,
+  slot: theming.DSControlledLargeTextInputSlots.INPUT
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  width: 100%;\n  ", "\n  &:disabled {\n    &:hover {\n      cursor: not-allowed;\n    }\n  }\n\n  ", "\n"])), _ref => {
+  let {
+    resizable
+  } = _ref;
+  return resizable ? "" : "resize: none;";
+}, _ref2 => {
+  let {
+    hasError
+  } = _ref2;
+  return hasError ? "border: 1px solid red;" : "";
+});
+
+exports.StyledCharCounter = StyledCharCounter;
+exports.StyledContainer = StyledContainer;
+exports.StyledTextArea = StyledTextArea;

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

@@ -5,15 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var usePhoneMask = require('./usePhoneMask.js');
 var useNumberMask = require('./useNumberMask.js');
 var useSSNMask = require('./useSSNMask.js');
-var useZipCode = require('./useZipCode.js');
+var useZipCodeMask = require('./useZipCodeMask.js');
 
 
 
 exports.UsePhoneMaskWithSchema = usePhoneMask.UsePhoneMaskWithSchema;
+exports.getPhoneMaskedValue = usePhoneMask.getPhoneMaskedValue;
 exports.usePhoneMask = usePhoneMask.usePhoneMask;
 exports.UseNumberMaskWithSchema = useNumberMask.UseNumberMaskWithSchema;
+exports.getNumberMaskedValue = useNumberMask.getNumberMaskedValue;
 exports.useNumberMask = useNumberMask.useNumberMask;
 exports.UseSSNMaskWithSchema = useSSNMask.UseSSNMaskWithSchema;
+exports.getSSNMaskedValue = useSSNMask.getSSNMaskedValue;
 exports.useSSNMask = useSSNMask.useSSNMask;
-exports.UseZipCodeMaskWithSchema = useZipCode.UseZipCodeMaskWithSchema;
-exports.useZipCode = useZipCode.useZipCode;
+exports.UseZipCodeMaskWithSchema = useZipCodeMask.UseZipCodeMaskWithSchema;
+exports.getUseZipMaskedValue = useZipCodeMask.getUseZipMaskedValue;
+exports.useZipCodeMask = useZipCodeMask.useZipCodeMask;

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

@@ -164,8 +164,13 @@ const useNumberMask = props => {
     onBlur
   };
 };
+const getNumberMaskedValue = (value, opts) => {
+  const [maskedValue] = conformValue(value, value.length - 1, '', opts);
+  return maskedValue;
+};
 const UseNumberMaskWithSchema = dsPropsHelpers.describe(useNumberMask);
 UseNumberMaskWithSchema.propTypes = reactDescPropTypes.DSMaskNumberHookPropsTypes;
 
 exports.UseNumberMaskWithSchema = UseNumberMaskWithSchema;
+exports.getNumberMaskedValue = getNumberMaskedValue;
 exports.useNumberMask = useNumberMask;

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

@@ -86,8 +86,13 @@ const usePhoneMask = props => {
     onChange
   };
 };
+const getPhoneMaskedValue = (value, opts) => {
+  const [maskedValue] = conformValue(value, value.length - 1, '', opts);
+  return maskedValue;
+};
 const UsePhoneMaskWithSchema = dsPropsHelpers.describe(usePhoneMask);
 UsePhoneMaskWithSchema.propTypes = reactDescPropTypes.DSMaskPhoneHookPropsTypes;
 
 exports.UsePhoneMaskWithSchema = UsePhoneMaskWithSchema;
+exports.getPhoneMaskedValue = getPhoneMaskedValue;
 exports.usePhoneMask = usePhoneMask;

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

@@ -65,8 +65,13 @@ const useSSNMask = props => {
     onChange
   };
 };
+const getSSNMaskedValue = value => {
+  const [maskedValue] = conformValue(value, value.length - 1, '');
+  return maskedValue;
+};
 const UseSSNMaskWithSchema = dsPropsHelpers.describe(useSSNMask);
 UseSSNMaskWithSchema.propTypes = reactDescPropTypes.DSMaskHookPropsTypes;
 
 exports.UseSSNMaskWithSchema = UseSSNMaskWithSchema;
+exports.getSSNMaskedValue = getSSNMaskedValue;
 exports.useSSNMask = useSSNMask;

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

@@ -18,14 +18,14 @@ const zipCodeSpecialChars = [['-', 5]];
 
 const conformValue = (rawValue, cursorPos, lastKeyCode) => {
   // Work with digits only
-  let maskedValue = rawValue.split('').filter(char => char >= '0' && char <= '9'); // We only consider first 5 digits
+  let maskedValue = rawValue.split('').filter(char => char >= '0' && char <= '9'); // We only consider first 9 digits
 
-  maskedValue = maskedValue.slice(0, 6);
+  maskedValue = maskedValue.slice(0, 9);
   const maskedPos = getPartialMaskedPos.getPartialMaskedPos(rawValue, maskedValue, cursorPos);
   return addSpecialCharacters.addSpecialCharacters(maskedValue, zipCodeSpecialChars, maskedPos, lastKeyCode);
 };
 
-const useZipCode = props => {
+const useZipCodeMask = props => {
   const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.DSMaskHookDefaultProps);
   dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, reactDescPropTypes.DSMaskHookPropsTypes);
   const {
@@ -62,8 +62,13 @@ const useZipCode = props => {
     onChange
   };
 };
-const UseZipCodeMaskWithSchema = dsPropsHelpers.describe(useZipCode);
+const getUseZipMaskedValue = value => {
+  const [maskedValue] = conformValue(value, value.length - 1, '');
+  return maskedValue;
+};
+const UseZipCodeMaskWithSchema = dsPropsHelpers.describe(useZipCodeMask);
 UseZipCodeMaskWithSchema.propTypes = reactDescPropTypes.DSMaskHookPropsTypes;
 
 exports.UseZipCodeMaskWithSchema = UseZipCodeMaskWithSchema;
-exports.useZipCode = useZipCode;
+exports.getUseZipMaskedValue = getUseZipMaskedValue;
+exports.useZipCodeMask = useZipCodeMask;

package/cjs/mask-hook/index.js

@@ -5,15 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var usePhoneMask = require('./hooks/usePhoneMask.js');
 var useNumberMask = require('./hooks/useNumberMask.js');
 var useSSNMask = require('./hooks/useSSNMask.js');
-var useZipCode = require('./hooks/useZipCode.js');
+var useZipCodeMask = require('./hooks/useZipCodeMask.js');
 
 
 
 exports.UsePhoneMaskWithSchema = usePhoneMask.UsePhoneMaskWithSchema;
+exports.getPhoneMaskedValue = usePhoneMask.getPhoneMaskedValue;
 exports.usePhoneMask = usePhoneMask.usePhoneMask;
 exports.UseNumberMaskWithSchema = useNumberMask.UseNumberMaskWithSchema;
+exports.getNumberMaskedValue = useNumberMask.getNumberMaskedValue;
 exports.useNumberMask = useNumberMask.useNumberMask;
 exports.UseSSNMaskWithSchema = useSSNMask.UseSSNMaskWithSchema;
+exports.getSSNMaskedValue = useSSNMask.getSSNMaskedValue;
 exports.useSSNMask = useSSNMask.useSSNMask;
-exports.UseZipCodeMaskWithSchema = useZipCode.UseZipCodeMaskWithSchema;
-exports.useZipCode = useZipCode.useZipCode;
+exports.UseZipCodeMaskWithSchema = useZipCodeMask.UseZipCodeMaskWithSchema;
+exports.getUseZipMaskedValue = useZipCodeMask.getUseZipMaskedValue;
+exports.useZipCodeMask = useZipCodeMask.useZipCodeMask;

package/esm/autocomplete/Autocomplete.js

@@ -1,11 +1,10 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import { describe } from 'react-desc';
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { useAutocomplete } from './config/useAutocomplete.js';
 import { Container } from './parts/container/Container.js';
-import { propTypes } from './propTypes.js';
 import { defaultProps, AutocompleteContext } from './AutocompleteCTX.js';
+import { propTypes } from './react-desc-prop-types.js';
 
 var _Container;