@elliemae/ds-controlled-form 2.0.0-next.7 → 2.0.0-rc.10

package/cjs/controlled-date-time-picker/parts/DateInputs/useDateInputs.js

@@ -2,11 +2,17 @@
 
 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 React = require('react');
 var ControlledDateTimePickerCTX = require('../../ControlledDateTimePickerCTX.js');
 var stringHelpers = require('../../utils/stringHelpers.js');
 var dateHelpers = require('../../utils/dateHelpers.js');
+var constants = require('../../utils/constants.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,7 +28,8 @@ const useDateInputs = () => {
       onDayChange: appOnDayChange,
       onYearChange: appOnYearChange,
       getIsDisabledDay,
-      getIsOutOfRangeDay
+      getIsOutOfRangeDay,
+      disabled
     },
     month,
     day,
@@ -40,7 +47,8 @@ const useDateInputs = () => {
     withClearBtn,
     withAnyPicker,
     withAnyRightController,
-    autoFocusMonthInput
+    autoFocusMonthInput,
+    lastSegmentRef
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const onHomeKeyDown = React.useCallback(() => {
     var _monthInputRef$curren, _monthInputRef$curren2;
@@ -55,9 +63,8 @@ const useDateInputs = () => {
   const setLatestInteractionRegionDateInputs = React.useCallback(() => {
     setLatestInteractionRegion('date-inputs');
   }, [setLatestInteractionRegion]);
-  const handleChangeMonth = React.useCallback((newMonth, e, metaInfo = {
-    isAutomaticFillTrigger: false
-  }) => {
+  const handleChangeMonth = React.useCallback(function (newMonth, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
     const newDateString = stringHelpers.getFormattedDateString({
       month: newMonth,
       day,
@@ -85,25 +92,39 @@ const useDateInputs = () => {
     if (newMonth.length === 2) dayInputRef === null || dayInputRef === void 0 ? void 0 : (_dayInputRef$current = dayInputRef.current) === null || _dayInputRef$current === void 0 ? void 0 : (_dayInputRef$current$ = _dayInputRef$current.focus) === null || _dayInputRef$current$ === void 0 ? void 0 : _dayInputRef$current$.call(_dayInputRef$current);
   }, [dayInputRef, handleChangeMonth]);
   const onMonthKeyDown = React.useCallback(e => {
+    var _lastSegmentRef$curre, _lastSegmentRef$curre2;
+
     const {
-      key
+      key,
+      ctrlKey,
+      metaKey
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
-    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    const monthStringConvertedToInteger = Number.parseInt(month, 10);
+    if (constants.homeEndArrowUpDownDashSlashesKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndArrowUpDownDashSlashesKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
 
     if (key === 'ArrowUp' || key === 'ArrowDown') {
-      const monthStringConvertedToInteger = Number.parseInt(month, 10);
       const monthInteger = Number.isNaN(monthStringConvertedToInteger) ? 0 : monthStringConvertedToInteger;
       let newMonth;
       if (key === 'ArrowUp') newMonth = monthInteger + 1 <= 12 ? monthInteger + 1 : monthInteger;else newMonth = monthInteger - 1 > 0 ? monthInteger - 1 : 1;
       newMonth = stringHelpers.prependStringWithPlaceHolders("".concat(newMonth), 2);
       handleChangeMonth(newMonth, e);
     }
-  }, [onHomeKeyDown, onEndKeyDown, month, handleChangeMonth]);
+
+    if (!Number.isNaN(monthStringConvertedToInteger) && (key === '-' || key === '/' || key === '\\')) {
+      var _dayInputRef$current2, _dayInputRef$current3;
+
+      const newMonth = stringHelpers.prependStringWithPlaceHolders("".concat(monthStringConvertedToInteger), 2);
+      handleChangeMonth(newMonth, e); // auto-advance functionality:
+
+      if (newMonth.length === 2) dayInputRef === null || dayInputRef === void 0 ? void 0 : (_dayInputRef$current2 = dayInputRef.current) === null || _dayInputRef$current2 === void 0 ? void 0 : (_dayInputRef$current3 = _dayInputRef$current2.focus) === null || _dayInputRef$current3 === void 0 ? void 0 : _dayInputRef$current3.call(_dayInputRef$current2);
+    } // 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);
+  }, [month, onHomeKeyDown, onEndKeyDown, lastSegmentRef, handleChangeMonth, dayInputRef]);
   const onMonthBlur = React.useCallback(e => {
     var _e$target2;
 
@@ -114,9 +135,8 @@ const useDateInputs = () => {
       isAutomaticFillTrigger: true
     });
   }, [handleChangeMonth]);
-  const handleChangeDay = React.useCallback((newDay, e, metaInfo = {
-    isAutomaticFillTrigger: false
-  }) => {
+  const handleChangeDay = React.useCallback(function (newDay, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
     const newDateString = stringHelpers.getFormattedDateString({
       month,
       day: newDay,
@@ -144,25 +164,46 @@ const useDateInputs = () => {
     if (newDay.length === 2) yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current3 = yearInputRef.current) === null || _yearInputRef$current3 === void 0 ? void 0 : (_yearInputRef$current4 = _yearInputRef$current3.focus) === null || _yearInputRef$current4 === void 0 ? void 0 : _yearInputRef$current4.call(_yearInputRef$current3);
   }, [handleChangeDay, yearInputRef]);
   const onDayKeyDown = React.useCallback(e => {
+    var _lastSegmentRef$curre3, _lastSegmentRef$curre4;
+
     const {
-      key
+      key,
+      ctrlKey,
+      metaKey
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
-    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    const dayStringConvertedToInteger = Number.parseInt(day, 10);
+    if (constants.homeEndArrowUpDownDashSlashesKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndArrowUpDownDashSlashesKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
 
     if (key === 'ArrowUp' || key === 'ArrowDown') {
-      const dayStringConvertedToInteger = Number.parseInt(day, 10);
       const dayInteger = Number.isNaN(dayStringConvertedToInteger) ? 0 : dayStringConvertedToInteger;
       let newDay;
       if (key === 'ArrowUp') newDay = dayInteger + 1 <= 31 ? dayInteger + 1 : dayInteger;else newDay = dayInteger - 1 > 0 ? dayInteger - 1 : 1;
       newDay = stringHelpers.prependStringWithPlaceHolders("".concat(newDay), 2);
       handleChangeDay(newDay, e);
     }
-  }, [onHomeKeyDown, onEndKeyDown, handleChangeDay, day]);
+
+    if (!Number.isNaN(dayStringConvertedToInteger) && (key === '-' || key === '/' || key === '\\')) {
+      var _yearInputRef$current5, _yearInputRef$current6;
+
+      const newDay = stringHelpers.prependStringWithPlaceHolders("".concat(dayStringConvertedToInteger), 2);
+      handleChangeDay(newDay, e); // auto-advance functionality:
+
+      if (newDay.length === 2) yearInputRef === null || yearInputRef === void 0 ? void 0 : (_yearInputRef$current5 = yearInputRef.current) === null || _yearInputRef$current5 === void 0 ? void 0 : (_yearInputRef$current6 = _yearInputRef$current5.focus) === null || _yearInputRef$current6 === void 0 ? void 0 : _yearInputRef$current6.call(_yearInputRef$current5);
+    } // regressive backspace functionality
+
+
+    if (key === 'Backspace' && (day === null || day === void 0 ? void 0 : day.length) === 0) {
+      var _monthInputRef$curren3, _monthInputRef$curren4;
+
+      monthInputRef === null || monthInputRef === void 0 ? void 0 : (_monthInputRef$curren3 = monthInputRef.current) === null || _monthInputRef$curren3 === void 0 ? void 0 : (_monthInputRef$curren4 = _monthInputRef$curren3.focus) === null || _monthInputRef$curren4 === void 0 ? void 0 : _monthInputRef$curren4.call(_monthInputRef$curren3);
+    } // 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);
+  }, [day, onHomeKeyDown, onEndKeyDown, lastSegmentRef, handleChangeDay, yearInputRef, monthInputRef]);
   const onDayBlur = React.useCallback(e => {
     var _e$target4;
 
@@ -173,9 +214,8 @@ const useDateInputs = () => {
       isAutomaticFillTrigger: true
     });
   }, [handleChangeDay]);
-  const handleChangeYear = React.useCallback((newYear, e, metaInfo = {
-    isAutomaticFillTrigger: false
-  }) => {
+  const handleChangeYear = React.useCallback(function (newYear, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
     const newDateString = stringHelpers.getFormattedDateString({
       month,
       day,
@@ -209,25 +249,52 @@ const useDateInputs = () => {
     }
   }, [handleChangeYear, hideTime, hourInputRef, withAnyRightController, withAnyPicker, pickerButtonRef, withClearBtn, clearButtonRef]);
   const onYearKeyDown = React.useCallback(e => {
+    var _lastSegmentRef$curre5, _lastSegmentRef$curre6;
+
     const {
-      key
+      key,
+      ctrlKey,
+      metaKey
     } = e;
-    const preventDefaultKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
-    const stopPropagationKeys = ['Home', 'End', 'ArrowUp', 'ArrowDown'];
-    if (preventDefaultKeys.includes(key)) e.preventDefault();
-    if (stopPropagationKeys.includes(key)) e.stopPropagation();
+    const yearStringConvertedToInteger = Number.parseInt(year, 10);
+    if (constants.homeEndArrowUpDownSpaceKeys.includes(key)) e.preventDefault();
+    if (constants.homeEndArrowUpDownSpaceKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
 
     if (key === 'ArrowUp' || key === 'ArrowDown') {
-      const yearStringConvertedToInteger = Number.parseInt(year, 10);
       const yearInteger = Number.isNaN(yearStringConvertedToInteger) ? 0 : yearStringConvertedToInteger;
       let newYear;
       if (key === 'ArrowUp') newYear = yearInteger + 1 <= 9999 ? yearInteger + 1 : yearInteger;else newYear = yearInteger - 1 > 0 ? yearInteger - 1 : 1;
       newYear = stringHelpers.prependStringWithPlaceHolders("".concat(newYear), 4);
       handleChangeYear(newYear, e);
     }
-  }, [onHomeKeyDown, onEndKeyDown, handleChangeYear, year]);
+
+    if (!Number.isNaN(yearStringConvertedToInteger) && key === ' ') {
+      const newYear = stringHelpers.prependStringWithPlaceHolders("".concat(yearStringConvertedToInteger), 4);
+      handleChangeYear(newYear, e); // auto-advance functionality:
+
+      if (newYear.length === 4) {
+        var _hourInputRef$current3, _hourInputRef$current4;
+
+        if (!hideTime) 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);else if (withAnyRightController) {
+          var _clearButtonRef$curre5, _clearButtonRef$curre6, _pickerButtonRef$curr5, _pickerButtonRef$curr6;
+
+          if (withClearBtn) (_clearButtonRef$curre5 = clearButtonRef.current) === null || _clearButtonRef$curre5 === void 0 ? void 0 : (_clearButtonRef$curre6 = _clearButtonRef$curre5.focus) === null || _clearButtonRef$curre6 === void 0 ? void 0 : _clearButtonRef$curre6.call(_clearButtonRef$curre5);else if (withAnyPicker) pickerButtonRef === null || pickerButtonRef === void 0 ? void 0 : (_pickerButtonRef$curr5 = pickerButtonRef.current) === null || _pickerButtonRef$curr5 === void 0 ? void 0 : (_pickerButtonRef$curr6 = _pickerButtonRef$curr5.focus) === null || _pickerButtonRef$curr6 === void 0 ? void 0 : _pickerButtonRef$curr6.call(_pickerButtonRef$curr5); // pending approval from Seda, check which one should be focused first...
+        }
+      }
+    } // regressive backspace functionality
+
+
+    if (key === 'Backspace' && (year === null || year === void 0 ? void 0 : year.length) === 0) {
+      var _dayInputRef$current4, _dayInputRef$current5;
+
+      dayInputRef === null || dayInputRef === void 0 ? void 0 : (_dayInputRef$current4 = dayInputRef.current) === null || _dayInputRef$current4 === void 0 ? void 0 : (_dayInputRef$current5 = _dayInputRef$current4.focus) === null || _dayInputRef$current5 === void 0 ? void 0 : _dayInputRef$current5.call(_dayInputRef$current4);
+    } // 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);
+  }, [year, onHomeKeyDown, onEndKeyDown, lastSegmentRef, handleChangeYear, hideTime, hourInputRef, withAnyRightController, withClearBtn, clearButtonRef, withAnyPicker, pickerButtonRef, dayInputRef]);
   const onYearBlur = React.useCallback(e => {
     var _e$target6;
 
@@ -241,6 +308,7 @@ const useDateInputs = () => {
     day,
     year,
     autoFocusMonthInput,
+    disabled,
     onMonthFocus,
     onMonthChange,
     onDayFocus,
@@ -253,7 +321,7 @@ const useDateInputs = () => {
     onMonthKeyDown,
     onDayKeyDown,
     onYearKeyDown
-  }), [month, day, year, autoFocusMonthInput, onMonthFocus, onMonthChange, onDayFocus, onDayChange, onYearFocus, onYearChange, onMonthBlur, onDayBlur, onYearBlur, onMonthKeyDown, onDayKeyDown, onYearKeyDown]);
+  }), [month, day, year, autoFocusMonthInput, disabled, onMonthFocus, onMonthChange, onDayFocus, onDayChange, onYearFocus, onYearChange, onMonthBlur, onDayBlur, onYearBlur, onMonthKeyDown, onDayKeyDown, onYearKeyDown]);
 };
 
 exports.useDateInputs = useDateInputs;

package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/Calendar.js

@@ -16,9 +16,10 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 var _CalendarIconTrigger, _CalendarWrapper;
 
-const WrappedCalendarContext = ({
-  children
-}) => {
+const WrappedCalendarContext = _ref => {
+  let {
+    children
+  } = _ref;
   const ctx = useConfigCalendarCTX.useConfigCalendarCTX();
   return /*#__PURE__*/_jsx__default["default"](CalendarContext.CalendarContext.Provider, {
     value: ctx

package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/CalendarBody.js

@@ -14,12 +14,15 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _CalendarWeekDays, _StyledBody;
-const CalendarBody = /*#__PURE__*/React__default["default"].memo(({
-  weekRowsNum
-}) => /*#__PURE__*/_jsx__default["default"]("span", {
-  role: "grid",
-  "aria-colcount": 7,
-  "aria-rowcount": weekRowsNum
-}, void 0, _CalendarWeekDays || (_CalendarWeekDays = /*#__PURE__*/_jsx__default["default"](CalendarWeekDays.CalendarWeekDays, {})), _StyledBody || (_StyledBody = /*#__PURE__*/_jsx__default["default"](Styleds.StyledBody, {}, void 0, /*#__PURE__*/_jsx__default["default"](CalendarMonthDays.CalendarMonthDays, {})))));
+const CalendarBody = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    weekRowsNum
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"]("span", {
+    role: "grid",
+    "aria-colcount": 7,
+    "aria-rowcount": weekRowsNum
+  }, void 0, _CalendarWeekDays || (_CalendarWeekDays = /*#__PURE__*/_jsx__default["default"](CalendarWeekDays.CalendarWeekDays, {})), _StyledBody || (_StyledBody = /*#__PURE__*/_jsx__default["default"](Styleds.StyledBody, {}, void 0, /*#__PURE__*/_jsx__default["default"](CalendarMonthDays.CalendarMonthDays, {}))));
+});
 
 exports.CalendarBody = CalendarBody;

package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/CalendarContent.js

@@ -20,9 +20,10 @@ var _CalendarHead, _CalendarFooter;
 // is required for styled-components, without this we can't styled(CalendarContent)...
 // https://stackoverflow.com/questions/52542817/styled-components-not-applying-style-to-custom-functional-react-component
 
-const CalendarContent = ({
-  className = ''
-}) => {
+const CalendarContent = _ref => {
+  let {
+    className = ''
+  } = _ref;
   const {
     isControllerOnly,
     daysMatrixByWeekday

package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/CalendarContext.js

@@ -10,6 +10,7 @@ const noop = () => {};
 const defaultCalendarContext = {
   ariaCurrentValueForInputs: '',
   showCalendar: false,
+  disabled: false,
   setShowCalendar: noop,
   closeCalendar: noop,
   setPopperElement: noop,

package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/CalendarDaysList.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var Day = require('./Day.js');
 var Styleds = require('./Styleds.js');
@@ -13,33 +15,36 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const CalendarDaysList = /*#__PURE__*/React__default["default"].memo(({
-  invisibleFirstDay,
-  daysMatrixByWeekday,
-  invisibleLastDay,
-  innerRef
-}) => /*#__PURE__*/jsxRuntime.jsxs("div", {
-  ref: innerRef,
-  role: "rowgroup",
-  children: [/*#__PURE__*/_jsx__default["default"](Day.Day, {
-    metaDay: invisibleFirstDay,
-    isInvisible: true
-  }, "ds-calendar-".concat(invisibleFirstDay.day.toString())), daysMatrixByWeekday.map((week, i) => /*#__PURE__*/_jsx__default["default"](Styleds.StyledWeekDaysListWrapper, {
-    role: "row",
-    "aria-rowindex": i + 1,
-    cols: ['32px', '32px', '32px', '32px', '32px', '32px', '32px'],
-    rows: ['28px'],
-    py: "xxxs",
-    px: "2px",
-    justifyContent: "space-between",
-    alignItems: "center"
-  }, "ds-calendar-week-".concat(week[0].day.toString(), "-").concat(week[6].day.toString()), week.map((metaDay, z) => /*#__PURE__*/_jsx__default["default"](Day.Day, {
-    metaDay: metaDay,
-    colIndex: z + 1
-  }, "ds-calendar-".concat(metaDay.day.toString()))))), /*#__PURE__*/_jsx__default["default"](Day.Day, {
-    metaDay: invisibleLastDay,
-    isInvisible: true
-  }, "ds-calendar-".concat(invisibleLastDay.day.toString()))]
-}));
+const CalendarDaysList = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    invisibleFirstDay,
+    daysMatrixByWeekday,
+    invisibleLastDay,
+    innerRef
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ref: innerRef,
+    role: "rowgroup",
+    children: [/*#__PURE__*/_jsx__default["default"](Day.Day, {
+      metaDay: invisibleFirstDay,
+      isInvisible: true
+    }, "ds-calendar-".concat(invisibleFirstDay.day.toString())), daysMatrixByWeekday.map((week, i) => /*#__PURE__*/_jsx__default["default"](Styleds.StyledWeekDaysListWrapper, {
+      role: "row",
+      "aria-rowindex": i + 1,
+      cols: ['32px', '32px', '32px', '32px', '32px', '32px', '32px'],
+      rows: ['28px'],
+      py: "xxxs",
+      px: "2px",
+      justifyContent: "space-between",
+      alignItems: "center"
+    }, "ds-calendar-week-".concat(week[0].day.toString(), "-").concat(week[6].day.toString()), week.map((metaDay, z) => /*#__PURE__*/_jsx__default["default"](Day.Day, {
+      metaDay: metaDay,
+      colIndex: z + 1
+    }, "ds-calendar-".concat(metaDay.day.toString()))))), /*#__PURE__*/_jsx__default["default"](Day.Day, {
+      metaDay: invisibleLastDay,
+      isInvisible: true
+    }, "ds-calendar-".concat(invisibleLastDay.day.toString()))]
+  });
+});
 
 exports.CalendarDaysList = CalendarDaysList;

package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/CalendarHead.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
-var dsButton = require('@elliemae/ds-button');
-var ChevronDoubleLeft = require('@elliemae/ds-icons/ChevronDoubleLeft');
-var ChevronLeft = require('@elliemae/ds-icons/ChevronLeft');
-var ChevronRight = require('@elliemae/ds-icons/ChevronRight');
-var ChevronDoubleRight = require('@elliemae/ds-icons/ChevronDoubleRight');
+var DSButton = require('@elliemae/ds-button');
+var dsIcons = require('@elliemae/ds-icons');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
 var dateHelpers = require('../../../utils/dateHelpers.js');
 var Styleds = require('./Styleds.js');
@@ -17,10 +14,6 @@ var CalendarContext = require('./CalendarContext.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var ChevronDoubleLeft__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDoubleLeft);
-var ChevronLeft__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLeft);
-var ChevronRight__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRight);
-var ChevronDoubleRight__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDoubleRight);
 
 var _ChevronDoubleLeft, _ChevronLeft, _ChevronRight, _ChevronDoubleRight;
 
@@ -58,14 +51,14 @@ const CalendarHead = () => {
   return /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeader, {}, void 0, /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeaderButton, {
     "aria-label": "previous year",
     buttonType: "raw",
-    size: dsButton.BUTTON_SIZES.M,
+    size: DSButton.BUTTON_SIZES.M,
     onClick: handlePrevYear,
     innerRef: prevYearBtnRef,
     onKeyDown: handlePrevYearKeyDown,
     onFocus: onPrevYearFocus,
     tabIndex: isControllerOnly ? -1 : 1,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_YEAR
-  }, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx__default["default"](ChevronDoubleLeft__default["default"], {
+  }, void 0, _ChevronDoubleLeft || (_ChevronDoubleLeft = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDoubleLeft, {
     height: 14,
     width: 14,
     fill: "#25292f"
@@ -73,36 +66,36 @@ const CalendarHead = () => {
     autoFocus: autoFocusPrevMonthArrow,
     "aria-label": "previous month",
     buttonType: "raw",
-    size: dsButton.BUTTON_SIZES.M,
+    size: DSButton.BUTTON_SIZES.M,
     onClick: handlePrevMonth,
     innerRef: prevMonthBtnRef,
     onKeyDown: handlePrevMonthKeyDown,
     onFocus: onPrevMonthFocus,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.PREV_MONTH // this is a tabstop for when the calendar is open
 
-  }, void 0, _ChevronLeft || (_ChevronLeft = /*#__PURE__*/_jsx__default["default"](ChevronLeft__default["default"], {
+  }, void 0, _ChevronLeft || (_ChevronLeft = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronLeft, {
     fill: "#25292f"
   }))), /*#__PURE__*/_jsx__default["default"]("h3", {}, void 0, currentFormatedDate), /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeaderButton, {
     "aria-label": "next month",
     buttonType: "raw",
-    size: dsButton.BUTTON_SIZES.M,
+    size: DSButton.BUTTON_SIZES.M,
     onClick: handleNextMonth,
     innerRef: nextMonthBtnRef,
     onKeyDown: handleNextMonthKeyDown,
     onFocus: onNextMonthFocus,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_MONTH
-  }, void 0, _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx__default["default"](ChevronRight__default["default"], {
+  }, void 0, _ChevronRight || (_ChevronRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronRight, {
     fill: "#25292f"
   }))), /*#__PURE__*/_jsx__default["default"](Styleds.StyledHeaderButton, {
     "aria-label": "next year",
     buttonType: "raw",
-    size: dsButton.BUTTON_SIZES.M,
+    size: DSButton.BUTTON_SIZES.M,
     onClick: handleNextYear,
     innerRef: nextYearBtnRef,
     onKeyDown: handleNextYearKeyDown,
     onFocus: onNextYearFocus,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.NEXT_YEAR
-  }, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx__default["default"](ChevronDoubleRight__default["default"], {
+  }, void 0, _ChevronDoubleRight || (_ChevronDoubleRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDoubleRight, {
     height: 14,
     width: 14,
     fill: "#25292f"

package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/CalendarIconTrigger.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
-var dsIcon = require('@elliemae/ds-icon');
-var dsButton = require('@elliemae/ds-button');
-var DatePicker = require('@elliemae/ds-icons/DatePicker');
+var DSButton = require('@elliemae/ds-button');
+var dsIcons = require('@elliemae/ds-icons');
 var ControlledDateTimePickerDatatestid = require('../../../ControlledDateTimePickerDatatestid.js');
 var CalendarContext = require('./CalendarContext.js');
 var Styleds = require('./Styleds.js');
@@ -14,8 +13,8 @@ var Styleds = require('./Styleds.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(DatePicker);
 
+var _DatePicker;
 // this is particularly usefull due to how usePopper needs to check the references
 // since references are saved in a immutable way, we make sure to shortcircuit useless-re-renders
 
@@ -24,20 +23,20 @@ const CalendarIconTrigger = () => {
     handleToggleCalendar,
     handleSetTriggerRef,
     handlePickerIconKeyDown,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    disabled
   } = React.useContext(CalendarContext.CalendarContext);
   return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](Styleds.StyledIconTriggerButton, {
     "aria-label": "date picker context menu trigger, ".concat(ariaCurrentValueForInputs),
     buttonType: "icon",
-    size: dsButton.BUTTON_SIZES.M,
-    variant: dsButton.BUTTON_VARIANT.DEFAULT,
+    size: DSButton.BUTTON_SIZES.M,
+    variant: DSButton.BUTTON_VARIANT.DEFAULT,
     innerRef: handleSetTriggerRef,
     onClick: handleToggleCalendar,
     onKeyDown: handlePickerIconKeyDown,
-    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR
-  }, void 0, /*#__PURE__*/_jsx__default["default"](DatePicker__default["default"], {
-    color: dsIcon.DSIconColors.PRIMARY
-  })), [handlePickerIconKeyDown, handleSetTriggerRef, handleToggleCalendar, ariaCurrentValueForInputs]);
+    "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.PICKER_ICONS.CALENDAR,
+    disabled: disabled
+  }, void 0, _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](dsIcons.DatePicker, {}))), [ariaCurrentValueForInputs, handleSetTriggerRef, handleToggleCalendar, handlePickerIconKeyDown, disabled]);
 };
 
 exports.CalendarIconTrigger = CalendarIconTrigger;

package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/CalendarWrapper.js

@@ -2,6 +2,11 @@
 
 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');

package/cjs/controlled-date-time-picker/parts/Pickers/Calendar/Day.js

@@ -2,8 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+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 React = require('react');
 var dateHelpers = require('../../../utils/dateHelpers.js');
 var constants = require('../../../utils/constants.js');
@@ -16,8 +21,8 @@ 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);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -25,11 +30,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const displayNone = {
   display: 'none'
 };
-const Day = ({
-  metaDay,
-  colIndex,
-  isInvisible
-}) => {
+const Day = _ref => {
+  let {
+    metaDay,
+    colIndex,
+    isInvisible
+  } = _ref;
   const {
     day,
     isCurrMonthDay,
@@ -79,10 +85,11 @@ const Day = ({
 
     if (!isDisabled && !isOutOfRange) {
       const newDateString = dateHelpers.getDateStringFromDay(day);
-      const metaInfo = {
-        isAutomaticFillTrigger: false,
+
+      const metaInfo = _objectSpread(_objectSpread({}, constants.defaultMetaInfo), {}, {
         newDateString
-      };
+      });
+
       const {
         month,
         day: dayNumber,
@@ -104,6 +111,9 @@ const Day = ({
   if (isSelected) dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_DAY;
   if (isFocused) dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.FOCUSED_DAY;
   if (isFocused && isSelected) dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.SELECTED_FOCUSED_DAY;
+  if (isStartRangeDay) dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.START_RANGE_DAY;
+  if (isEndRangeDay) dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.END_RANGE_DAY;
+  if (isDayInRange) dataTestid = ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CALENDAR.IN_RANGE_DAY;
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     className: dayClassModifiers,
     style: isHidden ? displayNone : undefined,