@elliemae/ds-controlled-form 2.4.2-rc.0 → 2.4.2-rc.1

package/cjs/combobox/parts/controls-input/useKeyboardNavigation.js

@@ -32,6 +32,7 @@ const useKeyboardNavigation = () => {
     inputValue,
     showPopover,
     focusOptionIdx,
+    listRef,
     selectAllCheckboxRef,
     toggleSelectionButtonRef,
     setShowPopover,
@@ -51,6 +52,14 @@ const useKeyboardNavigation = () => {
 
     if (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) {
       setShowPopover(true);
+      window.requestAnimationFrame(() => {
+        if (listRef.current && window.scrollY < listRef.current.offsetHeight) {
+          window.scrollTo({
+            top: listRef.current.offsetHeight,
+            behavior: 'smooth'
+          });
+        }
+      });
     } // =============================================================================
     // ESCAPE
     // =============================================================================
@@ -71,7 +80,7 @@ const useKeyboardNavigation = () => {
 
 
     if (e.key === 'Enter' && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === constants.INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
-      onCreate(inputValue); //blank active item to force search last one
+      onCreate(inputValue); // blank active item to force search last one
 
       setFocusOptionIdx('');
       if (onFilter) onFilter(allOptions, '');
@@ -114,9 +123,12 @@ const useKeyboardNavigation = () => {
       e.stopPropagation();
 
       if ((showPopover || inline) && selectableOptions.length) {
-        const nextItemIndex = listHelper.findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);
-        setFocusOptionIdx(filteredOptions[nextItemIndex].dsId);
-        scrollOptionIntoView(filteredOptions[nextItemIndex].dsId);
+        const nextItemIndexIndex = listHelper.findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);
+
+        if (nextItemIndexIndex > -1) {
+          setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);
+          scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);
+        }
       }
     }
 
@@ -126,16 +138,19 @@ const useKeyboardNavigation = () => {
       if (!selectableOptions.length) return;
       const prevItemIndex = listHelper.findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable, -1);
 
-      if (showPopover || inline) {
-        setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);
-        scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);
-      } else {
-        setShowPopover(true);
-        setTimeout(() => {
-          const prevItem = listHelper.findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);
-          setFocusOptionIdx(filteredOptions[prevItem].dsId);
-          scrollOptionIntoView(filteredOptions[prevItem].dsId);
-        });
+      if (prevItemIndex > -1) {
+        if (showPopover || inline) {
+          setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);
+          scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);
+        } else {
+          // open menu and search last item to focused
+          setShowPopover(true);
+          const lastItemIndex = listHelper.findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);
+          setFocusOptionIdx(filteredOptions[lastItemIndex].dsId);
+          setTimeout(() => {
+            scrollOptionIntoView(filteredOptions[lastItemIndex].dsId);
+          });
+        }
       }
     } // =============================================================================
     // BACKSPACE
@@ -167,7 +182,7 @@ const useKeyboardNavigation = () => {
       setShowPopover(false);
     }
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setShowPopover, onCancel, onFilter, setInputValue, focusOptionIdx, showPopover, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
+  [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setShowPopover, onCancel, onFilter, setInputValue, listRef, focusOptionIdx, showPopover, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
   return {
     onInputKeyDown
   };

package/cjs/combobox/parts/header-list/HeaderList.js

@@ -22,6 +22,7 @@ const HeaderList = () => {
   const {
     props: {
       selectedValues,
+      filteredOptions,
       onSelectAll
     },
     showSelectedOptions,
@@ -40,15 +41,15 @@ const HeaderList = () => {
   } = useHeaderListHandlers.useHeaderListHandlers();
   return /*#__PURE__*/_jsx__default["default"](styled.StyledHeaderListWrapper, {
     onKeyDown: handleKeyDown,
-    onMouseDown: handleOnMouseDown
+    onMouseDown: handleOnMouseDown,
+    "data-testid": ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.HEADER_LIST
   }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledSelectAllCheckbox, {}, void 0, onSelectAll && /*#__PURE__*/_jsx__default["default"](ControlledCheckbox.DSControlledCheckbox, {
     checked: checkboxStatus,
-    "aria-controls": checkboxStatus === 'mixed' ? multiSelectedValues.map(item => item.dsId).join(' ') : '',
+    "aria-controls": filteredOptions.map(item => item.dsId).join(' '),
     name: "select-all-checkbox",
     "aria-label": "Select/Unselect All Items",
     id: "select-all-checkbox",
     onChange: handleSelectAllCheckboxChange,
-    "data-testid": ComboboxDataTestids.ComboboxDataTestid.MULTISELECT.SELECT_ALL_CHECKBOX,
     onKeyDown: handleCheckAllOnTab,
     innerRef: selectAllCheckboxRef
   })), /*#__PURE__*/_jsx__default["default"](styled.StyledSelectedItems, {}, void 0, multiSelectedValues.length > 0 ? /*#__PURE__*/_jsx__default["default"](styled.StyledButtonSelection, {

package/cjs/combobox/parts/header-list/useHeaderListHandlers.js

@@ -55,27 +55,31 @@ const useHeaderListHandlers = () => {
     e.preventDefault();
     setShowSelectedOptions(!showSelectedOptions);
   }, [setShowSelectedOptions, showSelectedOptions]); // when pressing escape on each header list button we close the menu
+  // and set focus on input
 
   const handleKeyDown = React.useCallback(e => {
     if (e.key === 'Escape') {
+      var _innerRef$current;
+
       setShowPopover(false);
+      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
     }
-  }, [setShowPopover]); // when hitting tab on selected values button filter we target the input again
+  }, [setShowPopover, innerRef]); // when hitting tab on selected values button filter we target the input again
 
   const handleFilterSelectionBtnOnTab = React.useCallback(e => {
     if (e.key === 'Tab' && !e.shiftKey) {
-      var _innerRef$current;
+      var _innerRef$current2;
 
       e.preventDefault();
-      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
+      (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
     }
   }, [innerRef]);
   const handleCheckAllOnTab = React.useCallback(e => {
     if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {
-      var _innerRef$current2;
+      var _innerRef$current3;
 
       e.preventDefault();
-      (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
+      (_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 ? void 0 : _innerRef$current3.focus();
     }
   }, [innerRef, multiSelectedValues]);
   React.useEffect(() => {

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

@@ -48,7 +48,9 @@ const MenuList = () => {
     inline: inline,
     onMouseDown: preventLoseInputFocus,
     width: width,
-    minWidth: menuMinWidth,
+    minWidth: menuMinWidth // we use width as key to force react virtual re-render on window resize
+    // and update the item height accordly
+    ,
     children: [withHeader && (_HeaderList || (_HeaderList = /*#__PURE__*/_jsx__default["default"](HeaderList.HeaderList, {}))), filteredOptions.length > 0 || onCreate ? /*#__PURE__*/jsxRuntime.jsx(styled.StyledVirtualListWrapper, {
       inline: inline,
       maxHeight: menuMaxHeight,
@@ -64,9 +66,10 @@ const MenuList = () => {
         }
       }, void 0, ItemRenderer)
     }) : _StyledNoResultsWrapp || (_StyledNoResultsWrapp = /*#__PURE__*/_jsx__default["default"](styled.StyledNoResultsWrapper, {
+      role: "alert",
       "aria-live": "polite"
     }, void 0, "No matches found"))]
-  }), [wrapperListRef, inline, preventLoseInputFocus, width, menuMinWidth, withHeader, filteredOptions.length, onCreate, menuMaxHeight, listRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.totalSize, ItemRenderer]);
+  }, width), [wrapperListRef, inline, preventLoseInputFocus, menuMinWidth, withHeader, filteredOptions.length, onCreate, menuMaxHeight, listRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.totalSize, ItemRenderer, width]);
 };
 
 exports.MenuList = MenuList;

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

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const StyledListWrapper = dsSystem.styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  min-width: ", ";\n  width: ", ";\n  background-color: #ffffff;\n"])), _ref => {
+const StyledListWrapper = dsSystem.styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  min-width: ", ";\n  width: ", ";\n  background-color: #ffffff;\n  max-height: ", ";\n  z-index: 100;\n"])), _ref => {
   let {
     inline,
     minWidth
@@ -21,18 +21,23 @@ const StyledListWrapper = dsSystem.styled.div(_templateObject || (_templateObjec
     width
   } = _ref2;
   return "".concat(width, "px");
+}, _ref3 => {
+  let {
+    maxHeight
+  } = _ref3;
+  return "".concat(maxHeight, "px");
 });
-const StyledList = dsSystem.styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  position: relative;\n  padding: 0;\n"])));
-const StyledVirtualListWrapper = dsSystem.styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  overflow-y: auto;\n  margin-top: ", ";\n\n  max-height: ", ";\n"])), _ref3 => {
+const StyledList = dsSystem.styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  position: relative;\n  padding: 0;\n  background-color: #ffffff;\n"])));
+const StyledVirtualListWrapper = dsSystem.styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  overflow-y: auto;\n  margin-top: ", ";\n  max-height: ", ";\n"])), _ref4 => {
   let {
     withHeader
-  } = _ref3;
+  } = _ref4;
   return withHeader ? '28px' : '';
-}, _ref4 => {
+}, _ref5 => {
   let {
     maxHeight
-  } = _ref4;
-  return !maxHeight ? '400px' : "".concat(maxHeight, "px");
+  } = _ref5;
+  return maxHeight ? "".concat(maxHeight, "px") : '300px';
 });
 const StyledCreatableLabel = dsSystem.styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  font-weight: bold;\n  font-style: italic;\n"])));
 const StyledNoResultsWrapper = dsSystem.styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  padding: 16px;\n"])));

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

@@ -87,9 +87,10 @@ const useItemRenderer = () => {
       const generalProps = {
         wrapperStyles: {
           position: 'absolute',
-          top: vItem.start,
+          top: 0,
           left: 0,
-          width: '100%'
+          width: '100%',
+          transform: "translateY(".concat(vItem.start, "px)")
         },
         key: "".concat(option.dsId),
         innerRef: vItem.measureRef
@@ -114,8 +115,8 @@ const useItemRenderer = () => {
           onClick: e => handleClick(option, e),
           onMouseDown: handleOnMouseDown,
           isActive: option.dsId === focusOptionIdx,
-          isSelected: listHelper.isSelected(selectedValues, option),
-          tabIndex: -1
+          isSelected: listHelper.isSelected(selectedValues, option) //tabIndex={-1}
+
         }));
       }
 

package/cjs/combobox/parts/multi-selected-values-container/MultiSelectedValuesContainer.js

@@ -29,7 +29,7 @@ const MultiSelectedValuesContainer = () => {
   const correctPillsToShow = useGroupPills.useGroupPills();
   return React.useMemo(() => /*#__PURE__*/_jsx__default["default"]("div", {
     style: {
-      width: 'max-content'
+      width: multiSelectedValue.length > 0 ? 'max-content' : '0px'
     },
     "data-testid": ComboboxDataTestids.ComboboxDataTestid.SELECTED_VALUES
   }, void 0, /*#__PURE__*/_jsx__default["default"](dsPills.DSPillGroupV2, {

package/cjs/combobox/parts/multi-selected-values-container/RemovableSelectedValuePill.js

@@ -33,6 +33,8 @@ const RemovableSelectedValuePill = props => {
     onRemove: e => {
       var _innerRef$current;
 
+      // preventing the menu to be opened
+      e.stopPropagation();
       onChange(listHelper.getSuggestedValueOnChange(pill, selectedValues), pill, e);
       (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
     }

package/cjs/combobox/parts/multi-selected-values-container/useGroupPills.js

@@ -29,8 +29,11 @@ const useGroupPills = () => {
     controlsWrapperRef,
     pillGroupRef
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
-  const multiSelectedValues = selectedValues;
-  const [pillsToShow, setPillsToShow] = React.useState(multiSelectedValues.length);
+  const multiSelectedValues = selectedValues; // 30 represent 30 pills maximum to calculate the grouped pill. this fix the load time issue
+  // when combobox is receiving a huge amount of options.
+
+  const selectedValuesLength = Math.min(30, multiSelectedValues.length);
+  const [pillsToShow, setPillsToShow] = React.useState(selectedValuesLength);
   const {
     width
   } = dsUtilities.useOnElementResize(controlsWrapperRef);
@@ -38,28 +41,28 @@ const useGroupPills = () => {
     width: widthInput
   } = dsUtilities.useOnElementResize(innerRef || null);
   React.useEffect(() => {
-    if (multiSelectedValues.length !== pillsToShow) {
-      setPillsToShow(multiSelectedValues.length);
+    if (selectedValuesLength !== pillsToShow) {
+      setPillsToShow(selectedValuesLength);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [multiSelectedValues.length, width, widthInput]);
+  }, [selectedValuesLength, width, widthInput]);
   React.useLayoutEffect(() => {
-    if (selectedOptionsRef.current) {
+    if (selectedOptionsRef.current && pillGroupRef.current) {
       if (pillGroupRef.current) pillGroupRef.current.style.width = 'max-content';
       let lastPillFit = -1;
       let currentWidth = 0;
       const referenceWidth = selectedOptionsRef.current.offsetWidth;
-      const pills = [...selectedOptionsRef.current.querySelectorAll(disabled ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable')];
+      const pills = [...pillGroupRef.current.querySelectorAll(disabled ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable')];
       const pillsWidth = pills.map(pill => pill === null || pill === void 0 ? void 0 : pill.offsetWidth);
       pillsWidth.forEach((pillWidth, idx) => {
         currentWidth += pillWidth;
 
-        if (currentWidth + getGroupedPillWidth(multiSelectedValues.length - idx - 1) <= referenceWidth) {
+        if (currentWidth + getGroupedPillWidth(selectedValuesLength - idx - 1) <= referenceWidth) {
           lastPillFit = idx;
         }
       });
 
-      if (!(multiSelectedValues.length > 0 && pillsToShow !== multiSelectedValues.length)) {
+      if (!(selectedValuesLength > 0 && pillsToShow !== selectedValuesLength)) {
         const nextPillsToShow = lastPillFit + 1;
 
         if (nextPillsToShow !== pillsToShow) {
@@ -69,7 +72,7 @@ const useGroupPills = () => {
 
       if (pillGroupRef.current) pillGroupRef.current.style.width = 'fit-content';
     }
-  }, [selectedOptionsRef, innerRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput, disabled]);
+  }, [selectedOptionsRef, innerRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput, disabled, selectedValuesLength]);
   return pillsToShow || 1;
 };
 

package/cjs/combobox/theming.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DSComboBoxName = 'ds-combobox';
+const DSComboboxSlots = {
+  CONTAINER: 'root',
+  INPUT_WRAPPER: 'input-wrapper',
+  INPUT: 'input'
+};
+
+exports.DSComboBoxName = DSComboBoxName;
+exports.DSComboboxSlots = DSComboboxSlots;

package/cjs/combobox/utils/listHelper.js

@@ -51,7 +51,8 @@ const getFirstOption = (options, selectedValues, inputValue) => {
 
   for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type) && !options[i].disabled) {
     return options[i].dsId;
-  }
+  } // list of disabled item results return ''
+
 
   return '';
 };

package/cjs/index.js

@@ -3,8 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Autocomplete = require('./autocomplete/Autocomplete.js');
+var InputGroup = require('./input-group/InputGroup.js');
+var InputGroupDataTestIds = require('./input-group/InputGroupDataTestIds.js');
 var ControlledCheckbox = require('./checkbox/ControlledCheckbox.js');
 var ComboBox = require('./combobox/ComboBox.js');
+var theming = require('./combobox/theming.js');
+var ComboboxDataTestids = require('./combobox/ComboboxDataTestids.js');
 var ControlledDateRangePicker = require('./date-range-picker/ControlledDateRangePicker.js');
 var ControlledDateRangePickerDatatestid = require('./date-range-picker/ControlledDateRangePickerDatatestid.js');
 var ControlledDateRangePickerTypes = require('./date-range-picker/ControlledDateRangePickerTypes.js');
@@ -22,21 +26,27 @@ var useRegExpMask = require('./mask-hook/hooks/useRegExpMask.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 theming$1 = 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');
+var theming$2 = require('./large-text-input/exported-related/theming.js');
 
 
 
 exports.DSAutocomplete = Autocomplete.DSAutocomplete;
 exports.DSAutocompleteWithSchema = Autocomplete.DSAutocompleteWithSchema;
+exports.DSInputGroup = InputGroup.DSInputGroup;
+exports.DSInputGroupWithSchema = InputGroup.DSInputGroupWithSchema;
+exports.InputGroupDataTestIds = InputGroupDataTestIds.InputGroupDataTestIds;
 exports.DSControlledCheckbox = ControlledCheckbox.DSControlledCheckbox;
 exports.DSControlledCheckboxWithSchema = ControlledCheckbox.DSControlledCheckboxWithSchema;
 exports.DSComboBox = ComboBox.DSComboBox;
 exports.DSComboBoxV3 = ComboBox.DSComboBox;
 exports.DSComboBoxWithSchema = ComboBox.DSComboBoxWithSchema;
+exports.DSComboBoxName = theming.DSComboBoxName;
+exports.DSComboboxSlots = theming.DSComboboxSlots;
+exports.ComboboxDataTestid = ComboboxDataTestids.ComboboxDataTestid;
 exports.DSControlledDateRangePicker = ControlledDateRangePicker.DSControlledDateRangePicker;
 exports.DSControlledDateRangePickerWithSchema = ControlledDateRangePicker.DSControlledDateRangePickerWithSchema;
 exports.ControlledDateRangePickerDatatestid = ControlledDateRangePickerDatatestid.ControlledDateRangePickerDatatestid;
@@ -63,7 +73,6 @@ exports.UseSSNMaskWithSchema = useSSNMask.UseSSNMaskWithSchema;
 exports.getSSNMaskedValue = useSSNMask.getSSNMaskedValue;
 exports.useSSNMask = useSSNMask.useSSNMask;
 exports.UseRegExpMaskWithSchema = useRegExpMask.UseRegExpMaskWithSchema;
-exports.isRegExp = useRegExpMask.isRegExp;
 exports.useRegExpMask = useRegExpMask.useRegExpMask;
 exports.UseZipCodeMaskWithSchema = useZipCodeMask.UseZipCodeMaskWithSchema;
 exports.getUseZipMaskedValue = useZipCodeMask.getUseZipMaskedValue;
@@ -71,12 +80,12 @@ exports.useZipCodeMask = useZipCodeMask.useZipCodeMask;
 exports.DSInputText = DSInputText.DSInputText;
 exports.DSInputTextWithSchema = DSInputText.DSInputTextWithSchema;
 exports.DSInputTextDataTestIds = dataTestIds.DSInputTextDataTestIds;
-exports.DSInputTextName = theming.DSInputTextName;
-exports.DSInputTextSlots = theming.DSInputTextSlots;
+exports.DSInputTextName = theming$1.DSInputTextName;
+exports.DSInputTextSlots = theming$1.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;
+exports.DSControlledLargeTextInputName = theming$2.DSControlledLargeTextInputName;
+exports.DSControlledLargeTextInputSlots = theming$2.DSControlledLargeTextInputSlots;

package/cjs/input-group/InputGroup.js

@@ -0,0 +1,69 @@
+'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 _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var styled = require('./styled.js');
+var reactDescPropTypes = require('./react-desc-prop-types.js');
+var InputGroupDataTestIds = require('./InputGroupDataTestIds.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+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 DSInputGroup = props => {
+  dsPropsHelpers.useValidateTypescriptPropTypes(props, reactDescPropTypes.propTypes);
+  const {
+    children,
+    leftAddon,
+    rightAddon
+  } = props;
+  const globals = dsPropsHelpers.useGetGlobalAttributes(props);
+  const cols = React.useMemo(() => {
+    if (leftAddon && rightAddon) {
+      return ['max-content', 'auto', 'max-content'];
+    }
+
+    if (leftAddon && !rightAddon) {
+      return ['max-content', 'auto'];
+    }
+
+    if (!leftAddon && rightAddon) {
+      return ['auto', 'max-content'];
+    }
+
+    return ['auto'];
+  }, [leftAddon, rightAddon]);
+  return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledContainer, _objectSpread(_objectSpread({
+    cols: cols,
+    "data-testid": InputGroupDataTestIds.InputGroupDataTestIds.CONTAINER
+  }, globals), {}, {
+    children: [leftAddon && /*#__PURE__*/_jsx__default["default"](styled.StyledLeftAddon, {
+      "data-testid": InputGroupDataTestIds.InputGroupDataTestIds.LEFTADDON
+    }, void 0, leftAddon), /*#__PURE__*/_jsx__default["default"](styled.StyledInput, {
+      "data-testid": InputGroupDataTestIds.InputGroupDataTestIds.INPUTCONTAINER
+    }, void 0, children), rightAddon && /*#__PURE__*/_jsx__default["default"](styled.StyledRightAddon, {
+      "data-testid": InputGroupDataTestIds.InputGroupDataTestIds.RIGHTADDON
+    }, void 0, rightAddon)]
+  }));
+};
+
+const DSInputGroupWithSchema = dsPropsHelpers.describe(DSInputGroup);
+DSInputGroupWithSchema.propTypes = reactDescPropTypes.propTypes;
+
+exports.DSInputGroup = DSInputGroup;
+exports.DSInputGroupWithSchema = DSInputGroupWithSchema;

package/cjs/input-group/InputGroupDataTestIds.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const InputGroupDataTestIds = {
+  CONTAINER: 'ds-input-group-container',
+  LEFTADDON: 'ds-input-group-left-addon',
+  RIGHTADDON: 'ds-input-group-right-addon',
+  INPUTCONTAINER: 'ds-input-group-input-container'
+};
+
+exports.InputGroupDataTestIds = InputGroupDataTestIds;

package/cjs/input-group/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var InputGroup = require('./InputGroup.js');
+var InputGroupDataTestIds = require('./InputGroupDataTestIds.js');
+
+
+
+exports.DSInputGroup = InputGroup.DSInputGroup;
+exports.DSInputGroupWithSchema = InputGroup.DSInputGroupWithSchema;
+exports.InputGroupDataTestIds = InputGroupDataTestIds.InputGroupDataTestIds;

package/cjs/input-group/react-desc-prop-types.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const propTypes = {
+  leftAddon: dsPropsHelpers.PropTypes.element.description('Component to be added at the left side of the input'),
+  rightAddon: dsPropsHelpers.PropTypes.element.description('Component to be added at the right side of the input'),
+  children: dsPropsHelpers.PropTypes.node.isRequired.description('React component to apply autocomplete functionality').defaultValue('')
+};
+
+exports.propTypes = propTypes;

package/cjs/input-group/styled.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var dsGrid = require('@elliemae/ds-grid');
+require('../text-input/DSInputText.js');
+var theming = require('../text-input/exported-related/theming.js');
+require('../combobox/ComboBox.js');
+var theming$1 = require('../combobox/theming.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+const StyledContainer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-12elcva-0"
+})(["width:100%;height:28px;& > div:nth-child(1){.", "-", ",.", "-", ",.", "-", "{border-top-right-radius:0;border-bottom-right-radius:0;}}& > div:nth-child(2):nth-last-child(2){.", "-", ",.", "-", ",.", "-", "{border-radius:0;}}& > div:nth-child(2):nth-last-child(1){.", "-", ",.", "-", ",.", "-", "{border-top-left-radius:0;border-bottom-left-radius:0;}}"], theming.DSInputTextName, theming.DSInputTextSlots.INPUT_WRAPPER, theming.DSInputTextName, theming.DSInputTextSlots.INPUT, theming$1.DSComboBoxName, theming$1.DSComboboxSlots.INPUT_WRAPPER, theming.DSInputTextName, theming.DSInputTextSlots.INPUT_WRAPPER, theming.DSInputTextName, theming.DSInputTextSlots.INPUT, theming$1.DSComboBoxName, theming$1.DSComboboxSlots.INPUT_WRAPPER, theming.DSInputTextName, theming.DSInputTextSlots.INPUT_WRAPPER, theming.DSInputTextName, theming.DSInputTextSlots.INPUT, theming$1.DSComboBoxName, theming$1.DSComboboxSlots.INPUT_WRAPPER);
+const StyledAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-12elcva-1"
+})(["outline:1px solid ", ";outline-offset:-1px;height:inherit;display:flex;button{border-width:1px;}&:hover{z-index:1;button:not(:disabled){border:1px solid ", ";}}&:focus-within{z-index:1;}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral['400'];
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.brand['700'];
+});
+const StyledLeftAddon = /*#__PURE__*/styled__default["default"](StyledAddon).withConfig({
+  componentId: "sc-12elcva-2"
+})(["border-top-left-radius:2px;border-bottom-left-radius:2px;margin-right:-1px;&:hover{button:not(:disabled){border-top-right-radius:0px;border-bottom-right-radius:0px;}}"]);
+const StyledRightAddon = /*#__PURE__*/styled__default["default"](StyledAddon).withConfig({
+  componentId: "sc-12elcva-3"
+})(["border-top-right-radius:2px;border-bottom-right-radius:2px;margin-left:-1px;&:hover{button:not(:disabled){border-top-left-radius:0px;border-bottom-left-radius:0px;}}"]);
+const StyledInput = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-12elcva-4"
+})(["&:focus-within,&:hover{z-index:1;}"]);
+
+exports.StyledContainer = StyledContainer;
+exports.StyledInput = StyledInput;
+exports.StyledLeftAddon = StyledLeftAddon;
+exports.StyledRightAddon = StyledRightAddon;

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

@@ -20,7 +20,6 @@ exports.UseSSNMaskWithSchema = useSSNMask.UseSSNMaskWithSchema;
 exports.getSSNMaskedValue = useSSNMask.getSSNMaskedValue;
 exports.useSSNMask = useSSNMask.useSSNMask;
 exports.UseRegExpMaskWithSchema = useRegExpMask.UseRegExpMaskWithSchema;
-exports.isRegExp = useRegExpMask.isRegExp;
 exports.useRegExpMask = useRegExpMask.useRegExpMask;
 exports.UseZipCodeMaskWithSchema = useZipCodeMask.UseZipCodeMaskWithSchema;
 exports.getUseZipMaskedValue = useZipCodeMask.getUseZipMaskedValue;

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

@@ -22,8 +22,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 
 const _excluded = ["valueSetter", "onChange", "onKeyDown", "onBlur"];
-const phoneSpecialChars = [['(', 0], [') ', 4], ['-', 9]];
-const internationalPhoneSpecialChars = [['+1 (', 0], [') ', 7], ['-', 12]];
+const phoneSpecialChars = [['(', 0], [') ', 4], [' - ', 9]];
+const internationalPhoneSpecialChars = [['+1 (', 0], [') ', 7], [' - ', 12]];
 
 const conformValue = (rawValue, cursorPos, lastKeyCode, opts) => {
   const characters = rawValue.split(''); // Work with digits only

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

@@ -118,5 +118,4 @@ const UseRegExpMaskWithSchema = dsPropsHelpers.describe(useRegExpMask);
 UseRegExpMaskWithSchema.propTypes = reactDescPropTypes.DSMaskRegExpHookPropsTypes;
 
 exports.UseRegExpMaskWithSchema = UseRegExpMaskWithSchema;
-exports.isRegExp = isRegExp;
 exports.useRegExpMask = useRegExpMask;

package/cjs/mask-hook/index.js

@@ -20,7 +20,6 @@ exports.UseSSNMaskWithSchema = useSSNMask.UseSSNMaskWithSchema;
 exports.getSSNMaskedValue = useSSNMask.getSSNMaskedValue;
 exports.useSSNMask = useSSNMask.useSSNMask;
 exports.UseRegExpMaskWithSchema = useRegExpMask.UseRegExpMaskWithSchema;
-exports.isRegExp = useRegExpMask.isRegExp;
 exports.useRegExpMask = useRegExpMask.useRegExpMask;
 exports.UseZipCodeMaskWithSchema = useZipCodeMask.UseZipCodeMaskWithSchema;
 exports.getUseZipMaskedValue = useZipCodeMask.getUseZipMaskedValue;

package/cjs/text-input/styled/borders.js

@@ -15,7 +15,7 @@ const readOnlyBorderCss = dsSystem.css(_templateObject2 || (_templateObject2 = _
 const disabledBorderCss = commonBorderCss;
 const hasErrorBorderCss = dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), dsSystem.th.color('danger-900'));
 const hoverBorderCss = dsSystem.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid ", ";\n"])), dsSystem.th.color('brand-700'));
-const focusBorderCss = dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid transparent;\n  outline: 2px solid ", ";\n  outline-offset: -1px;\n"])), dsSystem.th.color('brand-700'));
+const focusBorderCss = dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid transparent;\n  outline: 2px solid ", ";\n  outline-offset: -2px;\n"])), dsSystem.th.color('brand-700'));
 const getBorderCss = props => {
   if (props.isDisabled) return disabledBorderCss;
   if (props.hasFocus) return focusBorderCss;