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

package/cjs/date-time-picker/parts/TimeInputs/useTimeInputs.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var ControlledDateTimePickerCTX = require('../../ControlledDateTimePickerCTX.js');
-var constants = require('../../utils/constants.js');
 var stringHelpers = require('../../utils/stringHelpers.js');
 
 /* eslint-disable complexity */
@@ -13,66 +12,55 @@ const useTimeInputs = () => {
     props: {
       disabled
     },
-    lastSegmentRef,
     hours,
     minutes,
     meridiem,
-    hideDate,
     withAnyRightController,
     withAnyPicker,
     withClearBtn,
     isWithDateInputs,
-    hourInputRef,
-    minutesInputRef,
-    meridiemInputRef,
-    yearInputRef,
-    clearButtonRef,
-    pickerButtonRef,
-    monthInputRef,
     autoFocusHourInput,
     handleChangeHours,
     handleChangeMinutes,
     handleChangeMeridiem,
-    setLatestInteractionRegion,
-    minutesInterval
+    minutesInterval,
+    trackFocusFirstSegment,
+    trackFocusLastSegment,
+    trackFocusHourInput,
+    trackFocusMinuteInput,
+    trackFocusMeridiemInput,
+    trackFocusClearBtn,
+    trackFocusPicker,
+    trackFocusYearInput
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  const setLatestInteractionRegionTimeInputs = React.useCallback(() => {
-    setLatestInteractionRegion('time-inputs');
-  }, [setLatestInteractionRegion]);
   const onHomeKeyDown = React.useCallback(() => {
-    var _monthInputRef$curren, _monthInputRef$curren2, _hourInputRef$current, _hourInputRef$current2;
-
-    if (!hideDate) monthInputRef === null || monthInputRef === void 0 ? void 0 : (_monthInputRef$curren = monthInputRef.current) === null || _monthInputRef$curren === void 0 ? void 0 : (_monthInputRef$curren2 = _monthInputRef$curren.focus) === null || _monthInputRef$curren2 === void 0 ? void 0 : _monthInputRef$curren2.call(_monthInputRef$curren);else hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current = hourInputRef.current) === null || _hourInputRef$current === void 0 ? void 0 : (_hourInputRef$current2 = _hourInputRef$current.focus) === null || _hourInputRef$current2 === void 0 ? void 0 : _hourInputRef$current2.call(_hourInputRef$current);
-  }, [hideDate, monthInputRef, hourInputRef]);
+    trackFocusFirstSegment();
+  }, [trackFocusFirstSegment]);
   const onEndKeyDown = React.useCallback(() => {
-    var _pickerButtonRef$curr, _pickerButtonRef$curr2, _clearButtonRef$curre, _clearButtonRef$curre2, _meridiemInputRef$cur, _meridiemInputRef$cur2;
-
-    if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr = pickerButtonRef.current) === null || _pickerButtonRef$curr === void 0 ? void 0 : (_pickerButtonRef$curr2 = _pickerButtonRef$curr.focus) === null || _pickerButtonRef$curr2 === void 0 ? void 0 : _pickerButtonRef$curr2.call(_pickerButtonRef$curr);else if (withClearBtn) clearButtonRef === null || clearButtonRef === void 0 ? void 0 : (_clearButtonRef$curre = clearButtonRef.current) === null || _clearButtonRef$curre === void 0 ? void 0 : (_clearButtonRef$curre2 = _clearButtonRef$curre.focus) === null || _clearButtonRef$curre2 === void 0 ? void 0 : _clearButtonRef$curre2.call(_clearButtonRef$curre);else meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur = meridiemInputRef.current) === null || _meridiemInputRef$cur === void 0 ? void 0 : (_meridiemInputRef$cur2 = _meridiemInputRef$cur.focus) === null || _meridiemInputRef$cur2 === void 0 ? void 0 : _meridiemInputRef$cur2.call(_meridiemInputRef$cur);
-  }, [withAnyPicker, pickerButtonRef, withClearBtn, clearButtonRef, meridiemInputRef]);
+    trackFocusLastSegment();
+  }, [trackFocusLastSegment]);
   const onHoursFocus = React.useCallback(() => {
-    setLatestInteractionRegionTimeInputs();
-  }, [setLatestInteractionRegionTimeInputs]);
+    trackFocusHourInput();
+  }, [trackFocusHourInput]);
   const onHoursChange = React.useCallback(e => {
-    var _e$target, _minutesInputRef$curr, _minutesInputRef$curr2;
+    var _e$target;
 
     let newHours = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value; // converts hours 2~9 to 07~09
 
     if (Number.parseInt(newHours, 10) > 1) newHours = stringHelpers.prependStringWithPlaceHolders(newHours, 2);
     handleChangeHours(newHours, e); // auto-advance functionality:
 
-    if (newHours.length === 2) minutesInputRef === null || minutesInputRef === void 0 ? void 0 : (_minutesInputRef$curr = minutesInputRef.current) === null || _minutesInputRef$curr === void 0 ? void 0 : (_minutesInputRef$curr2 = _minutesInputRef$curr.focus) === null || _minutesInputRef$curr2 === void 0 ? void 0 : _minutesInputRef$curr2.call(_minutesInputRef$curr);
-  }, [minutesInputRef, handleChangeHours]);
+    if (newHours.length === 2) trackFocusMinuteInput();
+  }, [handleChangeHours, trackFocusMinuteInput]);
   const onHoursKeyDown = React.useCallback(e => {
-    var _lastSegmentRef$curre, _lastSegmentRef$curre2;
-
     const {
       key,
       ctrlKey,
       metaKey
     } = e;
     const hoursStringConvertedToInteger = Number.parseInt(hours, 10);
-    if (constants.homeEndArrowUpDownSemiKeys.includes(key)) e.preventDefault();
-    if (constants.homeEndArrowUpDownSemiKeys.includes(key)) e.stopPropagation();
+    if (['Home', 'End', 'ArrowUp', 'ArrowDown', ':'].includes(key)) e.preventDefault();
+    if (['Home', 'End', 'ArrowUp', 'ArrowDown', ':'].includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
 
@@ -85,24 +73,20 @@ const useTimeInputs = () => {
     }
 
     if (!Number.isNaN(hoursStringConvertedToInteger) && key === ':') {
-      var _minutesInputRef$curr3, _minutesInputRef$curr4;
-
       const newHours = stringHelpers.prependStringWithPlaceHolders("".concat(hoursStringConvertedToInteger), 2);
       handleChangeHours(newHours, e); // auto-advance functionality:
 
-      if (newHours.length === 2) minutesInputRef === null || minutesInputRef === void 0 ? void 0 : (_minutesInputRef$curr3 = minutesInputRef.current) === null || _minutesInputRef$curr3 === void 0 ? void 0 : (_minutesInputRef$curr4 = _minutesInputRef$curr3.focus) === null || _minutesInputRef$curr4 === void 0 ? void 0 : _minutesInputRef$curr4.call(_minutesInputRef$curr3);
+      if (newHours.length === 2) trackFocusMinuteInput();
     } // regressive backspace functionality
 
 
     if (key === 'Backspace' && hours.length === 0 && isWithDateInputs) {
-      var _yearInputRef$current, _yearInputRef$current2;
-
-      yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current = yearInputRef.current) === null || _yearInputRef$current === void 0 ? void 0 : (_yearInputRef$current2 = _yearInputRef$current.focus) === null || _yearInputRef$current2 === void 0 ? void 0 : _yearInputRef$current2.call(_yearInputRef$current);
+      trackFocusYearInput();
     } // focus last fragment on fill with now
 
 
-    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre = lastSegmentRef.current) === null || _lastSegmentRef$curre === void 0 ? void 0 : (_lastSegmentRef$curre2 = _lastSegmentRef$curre.focus) === null || _lastSegmentRef$curre2 === void 0 ? void 0 : _lastSegmentRef$curre2.call(_lastSegmentRef$curre);
-  }, [hours, onHomeKeyDown, onEndKeyDown, isWithDateInputs, lastSegmentRef, handleChangeHours, minutesInputRef, yearInputRef]);
+    if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
+  }, [hours, isWithDateInputs, trackFocusYearInput, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, trackFocusMinuteInput, handleChangeHours]);
   const onHoursBlur = React.useCallback(e => {
     var _e$target2;
 
@@ -114,30 +98,27 @@ const useTimeInputs = () => {
     });
   }, [handleChangeHours]);
   const onMinutesFocus = React.useCallback(() => {
-    setLatestInteractionRegionTimeInputs();
-  }, [setLatestInteractionRegionTimeInputs]);
+    trackFocusMinuteInput();
+  }, [trackFocusMinuteInput]);
   const onMinutesChange = React.useCallback(e => {
-    var _e$target3, _meridiemInputRef$cur3, _meridiemInputRef$cur4;
+    var _e$target3;
 
     let newMinutes = e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.value; // converts minutes 7~9 to 07~09
 
     if (Number.parseInt(newMinutes, 10) > 6) newMinutes = stringHelpers.prependStringWithPlaceHolders(newMinutes, 2);
     handleChangeMinutes(newMinutes, e); // auto-advance functionality:
-    // if (newMinutes.length === 2) secondsInputRef?.current?.focus?.();
 
-    if (newMinutes.length === 2) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur3 = meridiemInputRef.current) === null || _meridiemInputRef$cur3 === void 0 ? void 0 : (_meridiemInputRef$cur4 = _meridiemInputRef$cur3.focus) === null || _meridiemInputRef$cur4 === void 0 ? void 0 : _meridiemInputRef$cur4.call(_meridiemInputRef$cur3);
-  }, [meridiemInputRef, handleChangeMinutes]);
+    if (newMinutes.length === 2) trackFocusMeridiemInput();
+  }, [handleChangeMinutes, trackFocusMeridiemInput]);
   const onMinutesKeyDown = React.useCallback(e => {
-    var _lastSegmentRef$curre3, _lastSegmentRef$curre4;
-
     const {
       key,
       ctrlKey,
       metaKey
     } = e;
     const minutesStringConvertedToInteger = Number.parseInt(minutes, 10);
-    if (constants.homeEndArrowUpDownSpaceKeys.includes(key)) e.preventDefault();
-    if (constants.homeEndArrowUpDownSpaceKeys.includes(key)) e.stopPropagation();
+    if (['Home', 'End', 'ArrowUp', 'ArrowDown', ' '].includes(key)) e.preventDefault();
+    if (['Home', 'End', 'ArrowUp', 'ArrowDown', ' '].includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
 
@@ -150,25 +131,20 @@ const useTimeInputs = () => {
     }
 
     if (!Number.isNaN(minutesStringConvertedToInteger) && key === ' ') {
-      var _meridiemInputRef$cur5, _meridiemInputRef$cur6;
-
       const newMinutes = stringHelpers.prependStringWithPlaceHolders("".concat(minutesStringConvertedToInteger), 2);
       handleChangeMinutes(newMinutes, e); // auto-advance functionality:
-      // if (newMinutes.length === 2) secondsInputRef?.current?.focus?.();
 
-      if (newMinutes.length === 2) meridiemInputRef === null || meridiemInputRef === void 0 ? void 0 : (_meridiemInputRef$cur5 = meridiemInputRef.current) === null || _meridiemInputRef$cur5 === void 0 ? void 0 : (_meridiemInputRef$cur6 = _meridiemInputRef$cur5.focus) === null || _meridiemInputRef$cur6 === void 0 ? void 0 : _meridiemInputRef$cur6.call(_meridiemInputRef$cur5);
+      if (newMinutes.length === 2) trackFocusMeridiemInput();
     } // regressive backspace functionality
 
 
     if (key === 'Backspace' && (minutes === null || minutes === void 0 ? void 0 : minutes.length) === 0) {
-      var _hourInputRef$current3, _hourInputRef$current4;
-
-      hourInputRef === null || hourInputRef === void 0 ? void 0 : (_hourInputRef$current3 = hourInputRef.current) === null || _hourInputRef$current3 === void 0 ? void 0 : (_hourInputRef$current4 = _hourInputRef$current3.focus) === null || _hourInputRef$current4 === void 0 ? void 0 : _hourInputRef$current4.call(_hourInputRef$current3);
+      trackFocusHourInput();
     } // focus last fragment on fill with now
 
 
-    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre3 = lastSegmentRef.current) === null || _lastSegmentRef$curre3 === void 0 ? void 0 : (_lastSegmentRef$curre4 = _lastSegmentRef$curre3.focus) === null || _lastSegmentRef$curre4 === void 0 ? void 0 : _lastSegmentRef$curre4.call(_lastSegmentRef$curre3);
-  }, [minutes, onHomeKeyDown, onEndKeyDown, lastSegmentRef, minutesInterval, handleChangeMinutes, meridiemInputRef, hourInputRef]);
+    if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
+  }, [minutes, onHomeKeyDown, onEndKeyDown, trackFocusLastSegment, minutesInterval, handleChangeMinutes, trackFocusMeridiemInput, trackFocusHourInput]);
   const onMinutesBlur = React.useCallback(e => {
     var _e$target4;
 
@@ -178,8 +154,8 @@ const useTimeInputs = () => {
     });
   }, [handleChangeMinutes]);
   const onMeridiemFocus = React.useCallback(() => {
-    setLatestInteractionRegionTimeInputs();
-  }, [setLatestInteractionRegionTimeInputs]);
+    trackFocusMeridiemInput();
+  }, [trackFocusMeridiemInput]);
   const onMeridiemChange = React.useCallback(e => {
     var _e$target5, _e$target5$value, _e$target5$value$toUp;
 
@@ -191,35 +167,29 @@ const useTimeInputs = () => {
     handleChangeMeridiem(newMeridiem, e); // auto-advance functionality:
 
     if (newMeridiem.length === 2 && withAnyRightController) {
-      var _clearButtonRef$curre3, _clearButtonRef$curre4, _pickerButtonRef$curr3, _pickerButtonRef$curr4;
-
-      if (withClearBtn) (_clearButtonRef$curre3 = clearButtonRef.current) === null || _clearButtonRef$curre3 === void 0 ? void 0 : (_clearButtonRef$curre4 = _clearButtonRef$curre3.focus) === null || _clearButtonRef$curre4 === void 0 ? void 0 : _clearButtonRef$curre4.call(_clearButtonRef$curre3);else if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr3 = pickerButtonRef.current) === null || _pickerButtonRef$curr3 === void 0 ? void 0 : (_pickerButtonRef$curr4 = _pickerButtonRef$curr3.focus) === null || _pickerButtonRef$curr4 === void 0 ? void 0 : _pickerButtonRef$curr4.call(_pickerButtonRef$curr3);
+      if (withClearBtn) trackFocusClearBtn();else if (withAnyPicker) trackFocusPicker();
     }
-  }, [meridiem, handleChangeMeridiem, withAnyRightController, withClearBtn, clearButtonRef, withAnyPicker, pickerButtonRef]);
+  }, [meridiem, handleChangeMeridiem, withAnyRightController, withClearBtn, trackFocusClearBtn, withAnyPicker, trackFocusPicker]);
   const onMeridiemKeyDown = React.useCallback(e => {
-    var _lastSegmentRef$curre5, _lastSegmentRef$curre6;
-
     const {
       key,
       ctrlKey,
       metaKey
     } = e;
-    if (constants.homeEndArrowUpDownKeys.includes(key)) e.preventDefault();
-    if (constants.homeEndArrowUpDownKeys.includes(key)) e.stopPropagation();
+    if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) e.preventDefault();
+    if (['Home', 'End', 'ArrowUp', 'ArrowDown'].includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
     if (key === 'ArrowUp' && meridiem !== 'AM') handleChangeMeridiem('AM', e);
     if (key === 'ArrowDown' && meridiem !== 'PM') handleChangeMeridiem('PM', e); // regressive backspace functionality
 
     if (key === 'Backspace') {
-      var _minutesInputRef$curr5, _minutesInputRef$curr6;
-
-      if ((meridiem === null || meridiem === void 0 ? void 0 : meridiem.length) === 2) handleChangeMeridiem('', e);else minutesInputRef === null || minutesInputRef === void 0 ? void 0 : (_minutesInputRef$curr5 = minutesInputRef.current) === null || _minutesInputRef$curr5 === void 0 ? void 0 : (_minutesInputRef$curr6 = _minutesInputRef$curr5.focus) === null || _minutesInputRef$curr6 === void 0 ? void 0 : _minutesInputRef$curr6.call(_minutesInputRef$curr5);
+      if ((meridiem === null || meridiem === void 0 ? void 0 : meridiem.length) === 2) handleChangeMeridiem('', e);else trackFocusMinuteInput();
     } // focus last fragment on fill with now
 
 
-    if ((ctrlKey || metaKey) && key === ';') lastSegmentRef === null || lastSegmentRef === void 0 ? void 0 : (_lastSegmentRef$curre5 = lastSegmentRef.current) === null || _lastSegmentRef$curre5 === void 0 ? void 0 : (_lastSegmentRef$curre6 = _lastSegmentRef$curre5.focus) === null || _lastSegmentRef$curre6 === void 0 ? void 0 : _lastSegmentRef$curre6.call(_lastSegmentRef$curre5);
-  }, [onHomeKeyDown, onEndKeyDown, meridiem, handleChangeMeridiem, lastSegmentRef, minutesInputRef]);
+    if ((ctrlKey || metaKey) && key === ';') trackFocusLastSegment();
+  }, [onHomeKeyDown, onEndKeyDown, meridiem, handleChangeMeridiem, trackFocusLastSegment, trackFocusMinuteInput]);
   const onMeridiemBlur = React.useCallback(e => {
     var _e$target6, _e$target6$value, _e$target6$value$toUp;
 

package/cjs/date-time-picker/utils/constants.js

@@ -37,23 +37,11 @@ const announcableCardinalDays = {
   30: 'thirtieth',
   31: 'thirty first'
 };
-const homeEndAllArrowKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-const homeEndKeys = ['Home', 'End'];
-const homeEndArrowUpDownDashSlashesKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', '-', '/', '\\'];
-const homeEndArrowUpDownSpaceKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', ' '];
-const homeEndArrowUpDownSemiKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown', ':'];
-const homeEndArrowUpDownKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
 const defaultMetaInfo = {
   isAutomaticFillTrigger: false
 };
 
 exports.announcableCardinalDays = announcableCardinalDays;
 exports.defaultMetaInfo = defaultMetaInfo;
-exports.homeEndAllArrowKeys = homeEndAllArrowKeys;
-exports.homeEndArrowUpDownDashSlashesKeys = homeEndArrowUpDownDashSlashesKeys;
-exports.homeEndArrowUpDownKeys = homeEndArrowUpDownKeys;
-exports.homeEndArrowUpDownSemiKeys = homeEndArrowUpDownSemiKeys;
-exports.homeEndArrowUpDownSpaceKeys = homeEndArrowUpDownSpaceKeys;
-exports.homeEndKeys = homeEndKeys;
 exports.monthNames = monthNames;
 exports.weekDays = weekDays;

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

@@ -33,50 +33,52 @@ const useGetStartingFocusedDay = () => {
     onCalendarOpenFocusedDay
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const dayFromInputValues = useGetDayFromDateString.useGetDayFromDateString();
+  const {
+    month: inputValuesSplitMonth,
+    day: inputValuesSplitDay,
+    year: inputValuesDaySplitYear
+  } = dayFromInputValues ? dateHelpers.getDateValuesFromDate(dayFromInputValues) : {
+    month: null,
+    day: null,
+    year: null
+  };
+  const isInputFilledAndValid = inputValuesSplitMonth && inputValuesSplitDay && inputValuesDaySplitYear && dateHelpers.isValidDayForTheMonth(inputValuesSplitMonth, inputValuesDaySplitYear, inputValuesSplitDay);
+  const isOnCalendarOpenFocusedDayEmpty = !onCalendarOpenFocusedDay;
+  const shouldFillWithOnCalendarOpenFocusedDay = !isInputFilledAndValid && !isOnCalendarOpenFocusedDayEmpty;
   return React.useMemo(() => {
-    const startingDay = _objectSpread({}, empty);
+    const startingDay = _objectSpread({}, empty); // if input was filled start focus is the filled value (if it's valid day for the month)
 
-    if (dayFromInputValues) {
-      const {
-        month: inputValuesSplitMonth,
-        day: inputValuesSplitDay,
-        year: inputValuesDaySplitYear
-      } = dateHelpers.getDateValuesFromDate(dayFromInputValues);
-      const isInputFilledAndValid = inputValuesSplitMonth && inputValuesSplitDay && inputValuesDaySplitYear && dateHelpers.isValidDayForTheMonth(inputValuesSplitMonth, inputValuesDaySplitYear, inputValuesSplitDay);
-      const isOnCalendarOpenFocusedDayEmpty = !onCalendarOpenFocusedDay;
-      const shouldFillWithOnCalendarOpenFocusedDay = !isInputFilledAndValid && !isOnCalendarOpenFocusedDayEmpty; // if input was filled start focus is the filled value (if it's valid day for the month)
 
-      if (isInputFilledAndValid) {
-        startingDay.startFocusedMonth = inputValuesSplitMonth;
-        startingDay.startFocusedDay = inputValuesSplitDay;
-        startingDay.startFocusedYear = inputValuesDaySplitYear;
-        startingDay.startFocusedDate = dayFromInputValues; // if input was not filled (or filled invalid) and there is no onCalendarOpenFocusedDay start focus is not a day
-      } else if (isOnCalendarOpenFocusedDayEmpty) {
-        // if input was not filled and there is onCalendarOpenFocusedDay start focus is onCalendarOpenFocusedDay day
-        return empty;
-      } else if (shouldFillWithOnCalendarOpenFocusedDay) {
-        const {
-          month: focusedDaySplitMonth,
-          day: focusedDaySplitDay,
-          year: focusedDaySplitYear
-        } = stringHelpers.deconstructValuesFromDateString(onCalendarOpenFocusedDay);
-        const monthAsInt = numberHelpers.convertToPositiveNumberIfPossible(focusedDaySplitMonth);
-        const dayAsInt = numberHelpers.convertToPositiveNumberIfPossible(focusedDaySplitDay);
-        const yearAsInt = numberHelpers.convertToPositiveNumberIfPossible(focusedDaySplitYear); // if this condition is false, return will be the same as return empty
-        // because startFocusedMonth/Day/Year/Date will be === null
-        // which is the expected result
+    if (isInputFilledAndValid) {
+      startingDay.startFocusedMonth = inputValuesSplitMonth;
+      startingDay.startFocusedDay = inputValuesSplitDay;
+      startingDay.startFocusedYear = inputValuesDaySplitYear;
+      startingDay.startFocusedDate = dayFromInputValues; // if input was not filled (or filled invalid) and there is no onCalendarOpenFocusedDay start focus is not a day
+    } else if (isOnCalendarOpenFocusedDayEmpty) {
+      // if input was not filled and there is onCalendarOpenFocusedDay start focus is onCalendarOpenFocusedDay day
+      return empty;
+    } else if (shouldFillWithOnCalendarOpenFocusedDay) {
+      const {
+        month: focusedDaySplitMonth,
+        day: focusedDaySplitDay,
+        year: focusedDaySplitYear
+      } = stringHelpers.deconstructValuesFromDateString(onCalendarOpenFocusedDay);
+      const monthAsInt = numberHelpers.convertToPositiveNumberIfPossible(focusedDaySplitMonth);
+      const dayAsInt = numberHelpers.convertToPositiveNumberIfPossible(focusedDaySplitDay);
+      const yearAsInt = numberHelpers.convertToPositiveNumberIfPossible(focusedDaySplitYear); // if this condition is false, return will be the same as return empty
+      // because startFocusedMonth/Day/Year/Date will be === null
+      // which is the expected result
 
-        if (monthAsInt !== -1 && dayAsInt !== -1 && yearAsInt !== -1 && dateHelpers.isValidDayForTheMonth(monthAsInt - 1, yearAsInt, dayAsInt)) {
-          startingDay.startFocusedMonth = monthAsInt;
-          startingDay.startFocusedDay = dayAsInt;
-          startingDay.startFocusedYear = yearAsInt;
-          startingDay.startFocusedDate = new Date(yearAsInt, monthAsInt - 1, dayAsInt);
-        }
+      if (monthAsInt !== -1 && dayAsInt !== -1 && yearAsInt !== -1 && dateHelpers.isValidDayForTheMonth(monthAsInt - 1, yearAsInt, dayAsInt)) {
+        startingDay.startFocusedMonth = monthAsInt;
+        startingDay.startFocusedDay = dayAsInt;
+        startingDay.startFocusedYear = yearAsInt;
+        startingDay.startFocusedDate = new Date(yearAsInt, monthAsInt - 1, dayAsInt);
       }
     }
 
     return startingDay;
-  }, [dayFromInputValues, onCalendarOpenFocusedDay]);
+  }, [dayFromInputValues, inputValuesDaySplitYear, inputValuesSplitDay, inputValuesSplitMonth, isInputFilledAndValid, isOnCalendarOpenFocusedDayEmpty, onCalendarOpenFocusedDay, shouldFillWithOnCalendarOpenFocusedDay]);
 };
 
 exports.useGetStartingFocusedDay = useGetStartingFocusedDay;

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,70 @@
+'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 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 _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 xstyledProps = dsPropsHelpers.useGetXstyledProps(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(_objectSpread({
+    cols: cols,
+    "data-testid": dataTestIds.InputGroupDataTestIds.CONTAINER
+  }, globals), xstyledProps), {}, {
+    children: [leftAddon && /*#__PURE__*/_jsx__default["default"](styled.StyledLeftAddon, {
+      "data-testid": dataTestIds.InputGroupDataTestIds.LEFTADDON
+    }, void 0, leftAddon), /*#__PURE__*/_jsx__default["default"](styled.StyledInput, {
+      "data-testid": dataTestIds.InputGroupDataTestIds.INPUTCONTAINER
+    }, void 0, children), rightAddon && /*#__PURE__*/_jsx__default["default"](styled.StyledRightAddon, {
+      "data-testid": dataTestIds.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/exported-related/data-test-ids.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/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.InputGroupDataTestIds = dataTestIds.InputGroupDataTestIds;
+exports.DSInputGroupName = theming.DSInputGroupName;
+exports.DSInputGroupSlots = theming.DSInputGroupSlots;

package/cjs/input-group/exported-related/theming.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DSInputGroupName = 'ds-input-group';
+const DSInputGroupSlots = {
+  CONTAINER: 'root',
+  LEFT_ADDON: 'leftaddon',
+  RIGHT_ADDON: 'rightaddon'
+};
+
+exports.DSInputGroupName = DSInputGroupName;
+exports.DSInputGroupSlots = DSInputGroupSlots;

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,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var dsSystem = require('@elliemae/ds-system');
+var dsGrid = require('@elliemae/ds-grid');
+require('../text-input/DSInputText.js');
+var theming$1 = require('../text-input/exported-related/theming.js');
+require('../combobox/ComboBox.js');
+var theming$2 = require('../combobox/theming.js');
+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, _templateObject4, _templateObject5;
+const StyledContainer = dsSystem.styled(dsGrid.Grid, {
+  name: theming.DSInputGroupName,
+  slot: theming.DSInputGroupSlots.CONTAINER
+})(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  width: 100%;\n  height: 28px;\n\n  // input in left position with right addon\n  & > div:nth-child(1) {\n    .", "-", ",\n      .", "-", ",\n      .", "-", " {\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n  }\n\n  // input in center position with left and right addon\n  & > div:nth-child(2):nth-last-child(2) {\n    .", "-", ",\n      .", "-", ",\n      .", "-", " {\n      border-radius: 0;\n    }\n  }\n\n  // input in right position with left addon\n  & > div:nth-child(2):nth-last-child(1) {\n    .", "-", ",\n      .", "-", ",\n      .", "-", " {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n    }\n  }\n"])), theming$1.DSInputTextName, theming$1.DSInputTextSlots.INPUT_WRAPPER, theming$1.DSInputTextName, theming$1.DSInputTextSlots.INPUT, theming$2.DSComboBoxName, theming$2.DSComboboxSlots.INPUT_WRAPPER, theming$1.DSInputTextName, theming$1.DSInputTextSlots.INPUT_WRAPPER, theming$1.DSInputTextName, theming$1.DSInputTextSlots.INPUT, theming$2.DSComboBoxName, theming$2.DSComboboxSlots.INPUT_WRAPPER, theming$1.DSInputTextName, theming$1.DSInputTextSlots.INPUT_WRAPPER, theming$1.DSInputTextName, theming$1.DSInputTextSlots.INPUT, theming$2.DSComboBoxName, theming$2.DSComboboxSlots.INPUT_WRAPPER);
+const StyledAddon = dsSystem.styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  outline: 1px solid ", ";\n  outline-offset: -1px;\n  height: inherit;\n  display: flex;\n  button {\n    border-width: 1px;\n  }\n  &:hover {\n    z-index: 2;\n    button:not(:disabled) {\n      border: 1px solid ", ";\n    }\n  }\n  &:focus-within {\n    z-index: 2;\n  }\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral['400'];
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.brand['700'];
+});
+const StyledLeftAddon = dsSystem.styled(StyledAddon, {
+  name: theming.DSInputGroupName,
+  slot: theming.DSInputGroupSlots.LEFT_ADDON
+})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  border-top-left-radius: 2px;\n  border-bottom-left-radius: 2px;\n  margin-right: -1px;\n  &:hover {\n    button:not(:disabled) {\n      border-top-right-radius: 0px;\n      border-bottom-right-radius: 0px;\n    }\n  }\n"])));
+const StyledRightAddon = dsSystem.styled(StyledAddon, {
+  name: theming.DSInputGroupName,
+  slot: theming.DSInputGroupSlots.RIGHT_ADDON
+})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  border-top-right-radius: 2px;\n  border-bottom-right-radius: 2px;\n  margin-left: -1px;\n  &:hover {\n    button:not(:disabled) {\n      border-top-left-radius: 0px;\n      border-bottom-left-radius: 0px;\n    }\n  }\n"])));
+const StyledInput = dsSystem.styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  z-index: 1;\n"])));
+
+exports.StyledContainer = StyledContainer;
+exports.StyledInput = StyledInput;
+exports.StyledLeftAddon = StyledLeftAddon;
+exports.StyledRightAddon = StyledRightAddon;