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

package/cjs/date-time-picker/config/useValidateProps.js

@@ -2,46 +2,77 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/es.error.cause.js');
 var stringHelpers = require('../utils/stringHelpers.js');
 var numberHelpers = require('../utils/numberHelpers.js');
 var typeGuards = require('../utils/typeGuards.js');
 
-/* eslint-disable max-statements */
-const PREPEND = "ControlledDateTimePicker:\n  Invalid configuration detected::\n  \n    ";
+const PREPEND = `ControlledDateTimePicker:
+  Invalid configuration detected::
+  
+    `;
 const NOT_A_DEFECT = ''; // '\n\n\t\tThis is not a defect, please check\n\n\t\thttps://qa.dimsum.rd.elliemae.io/?path=/story/components-desktop-components-d-controlledform-date-time-picker--basic\n\n\t\tfor instructions on how to use the component correctly\n\n';
 
-const INLINE_RECEIVED_PREPEND = "\n\n    Received:";
+const INLINE_RECEIVED_PREPEND = `
+
+    Received:`;
 
 const throwInvalidDateTimeError = invalidValue => {
-  throw new Error("".concat(PREPEND, "the \"dateTime\" you are providing is not respecting the format it must respect.").concat(INLINE_RECEIVED_PREPEND).concat(invalidValue, "(").concat(typeof invalidValue, ")").concat(NOT_A_DEFECT));
+  throw new Error(`${PREPEND}the "dateTime" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`);
 };
 
 const throwInvalidDaterror = invalidValue => {
-  throw new Error("".concat(PREPEND, "the \"date\" you are providing is not respecting the format it must respect.").concat(INLINE_RECEIVED_PREPEND).concat(invalidValue, "(").concat(typeof invalidValue, ")").concat(NOT_A_DEFECT));
+  throw new Error(`${PREPEND}the "date" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`);
 };
 
 const throwInvalidTimerror = invalidValue => {
-  throw new Error("".concat(PREPEND, "the \"time\" you are providing is not respecting the format it must respect.").concat(INLINE_RECEIVED_PREPEND).concat(invalidValue, "(").concat(typeof invalidValue, ")").concat(NOT_A_DEFECT));
+  throw new Error(`${PREPEND}the "time" you are providing is not respecting the format it must respect.${INLINE_RECEIVED_PREPEND}${invalidValue}(${typeof invalidValue})${NOT_A_DEFECT}`);
 };
 
 const throwUncontrolledDateError = (date, onDateChange) => {
-  throw new Error("".concat(PREPEND, "you are trying to use a date selector while providing a non-string \"date\" or providing a non-function to \"onDateChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    date: ").concat(date, "(").concat(typeof date, ")\n    onDateChange: (").concat(typeof onDateChange, ")\n  ").concat(NOT_A_DEFECT));
+  throw new Error(`${PREPEND}you are trying to use a date selector while providing a non-string "date" or providing a non-function to "onDateChange"
+  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations
+
+  Received:
+    date: ${date}(${typeof date})
+    onDateChange: (${typeof onDateChange})
+  ${NOT_A_DEFECT}`);
 };
 
 const throwUncontrolledTimeError = (time, onTimeChange) => {
-  throw new Error("".concat(PREPEND, "you are trying to use a time selector while providing a non-string \"time\" or providing a non-function to \"onTimeChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    time: ").concat(time, "(").concat(typeof time, ")\n    onTimeChange: (").concat(typeof onTimeChange, ")\n  ").concat(NOT_A_DEFECT));
+  throw new Error(`${PREPEND}you are trying to use a time selector while providing a non-string "time" or providing a non-function to "onTimeChange"
+  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations
+
+  Received:
+    time: ${time}(${typeof time})
+    onTimeChange: (${typeof onTimeChange})
+  ${NOT_A_DEFECT}`);
 };
 
 const throwUncontrolledDateTimeError = (dateTime, onDateTimeChange) => {
-  throw new Error("".concat(PREPEND, "you are trying to use a date-time selector while providing a non-string \"dateTime\" or providing a non-function to \"onDateTimeChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    dateTime: ").concat(dateTime, "(").concat(typeof dateTime, ")\n    onDateTimeChange: (").concat(typeof onDateTimeChange, ")\n  ").concat(NOT_A_DEFECT));
+  throw new Error(`${PREPEND}you are trying to use a date-time selector while providing a non-string "dateTime" or providing a non-function to "onDateTimeChange"
+  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations
+
+  Received:
+    dateTime: ${dateTime}(${typeof dateTime})
+    onDateTimeChange: (${typeof onDateTimeChange})
+  ${NOT_A_DEFECT}`);
 };
 
 const throwInvalidEmptyPickerStartingMonthError = emptyPickerStartingMonth => {
-  throw new Error("".concat(PREPEND, "the provided emptyPickerStartingMonth props is invalid. please provide a string with the format mm/__/yyyy, (mm 01~12, yyyy 0001~9999) \n\n  Received:\n    ").concat(emptyPickerStartingMonth, "(").concat(typeof emptyPickerStartingMonth, ")\n  ").concat(NOT_A_DEFECT));
+  throw new Error(`${PREPEND}the provided emptyPickerStartingMonth props is invalid. please provide a string with the format mm/__/yyyy, (mm 01~12, yyyy 0001~9999) 
+
+  Received:
+    ${emptyPickerStartingMonth}(${typeof emptyPickerStartingMonth})
+  ${NOT_A_DEFECT}`);
 };
 
 const throwInvalidOnCalendarOpenFocusedDayError = onCalendarOpenFocusedDay => {
-  throw new Error("".concat(PREPEND, "the provided onCalendarOpenFocusedDay props is invalid. please provide a string with the format mm/dd/yyyy, (mm 01~12, dd 01~31, yyyy 0001~9999) \n\n  Received:\n    ").concat(onCalendarOpenFocusedDay, "(").concat(typeof onCalendarOpenFocusedDay, ")\n  ").concat(NOT_A_DEFECT));
+  throw new Error(`${PREPEND}the provided onCalendarOpenFocusedDay props is invalid. please provide a string with the format mm/dd/yyyy, (mm 01~12, dd 01~31, yyyy 0001~9999) 
+
+  Received:
+    ${onCalendarOpenFocusedDay}(${typeof onCalendarOpenFocusedDay})
+  ${NOT_A_DEFECT}`);
 };
 
 const useValidateProps = props => {

package/cjs/date-time-picker/parts/ClearButton/ClearButton.js

@@ -9,12 +9,13 @@ 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');
-require('react');
+var React = require('react');
 var dsIcons = require('@elliemae/ds-icons');
 var dsIcon = require('@elliemae/ds-icon');
 var DSButton = require('@elliemae/ds-button');
 var Styleds = require('../Styleds.js');
 var ControlledDateTimePickerDatatestid = require('../../ControlledDateTimePickerDatatestid.js');
+var ControlledDateTimePickerCTX = require('../../ControlledDateTimePickerCTX.js');
 var useClearButton = require('./useClearButton.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -36,12 +37,19 @@ const ClearButton = () => {
   const styledsAttrs = {
     shouldDisplay: withClearBtn
   };
+  const {
+    latestInteractionRegion,
+    currFocusDescriber
+  } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return /*#__PURE__*/jsxRuntime.jsx(Styleds.StyledClearButton, _objectSpread(_objectSpread({
     "aria-label": "clear selected date",
     buttonType: "icon",
     size: DSButton.BUTTON_SIZES.M,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.CLEAR_BUTTON,
-    innerRef: clearButtonRef,
+    innerRef: DomElem => {
+      clearButtonRef.current = DomElem;
+      if (latestInteractionRegion === 'clear-btn' && currFocusDescriber === 'clear-btn') DomElem?.focus?.();
+    },
     onClick: onClearClick,
     onKeyDown: onClearButtonKeyDown
   }, styledsAttrs), {}, {

package/cjs/date-time-picker/parts/ClearButton/useClearButton.js

@@ -15,32 +15,21 @@ const useClearButton = () => {
     withAnyInputs,
     isWithTimeInputs,
     isWithDateInputs,
-    isTimeSelector,
-    hourInputRef,
-    monthInputRef,
-    pickerButtonRef,
-    meridiemInputRef,
-    yearInputRef,
-    setLatestInteractionRegion
+    trackFocusFirstSegment,
+    trackFocusMeridiemInput,
+    trackFocusYearInput,
+    trackFocusPicker
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
-  const focusFirstRegion = React.useCallback(() => {
-    var _hourInputRef$current, _hourInputRef$current2, _monthInputRef$curren, _monthInputRef$curren2;
-
-    if (withAnyInputs) if (isTimeSelector) 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);else 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);
-  }, [withAnyInputs, isTimeSelector, hourInputRef, monthInputRef]);
   const onClearClick = React.useCallback(e => {
     handleClearAll(e);
-    setLatestInteractionRegion('clear-btn');
-    focusFirstRegion();
-  }, [focusFirstRegion, handleClearAll, setLatestInteractionRegion]);
+    trackFocusFirstSegment();
+  }, [handleClearAll, trackFocusFirstSegment]);
   const onHomeKeyDown = React.useCallback(() => {
-    focusFirstRegion();
-  }, [focusFirstRegion]);
+    trackFocusFirstSegment();
+  }, [trackFocusFirstSegment]);
   const onEndKeyDown = React.useCallback(() => {
-    var _pickerButtonRef$curr, _pickerButtonRef$curr2;
-
-    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);
-  }, [withAnyPicker, pickerButtonRef]);
+    if (withAnyPicker) trackFocusPicker();
+  }, [withAnyPicker, trackFocusPicker]);
   const onClearButtonKeyDown = React.useCallback(e => {
     const {
       key
@@ -53,11 +42,9 @@ const useClearButton = () => {
     if (key === 'End') onEndKeyDown();
 
     if (key === 'Backspace' && withAnyInputs) {
-      var _meridiemInputRef$cur, _meridiemInputRef$cur2, _yearInputRef$current, _yearInputRef$current2;
-
-      if (isWithTimeInputs) 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);else if (isWithDateInputs) 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);
+      if (isWithTimeInputs) trackFocusMeridiemInput();else if (isWithDateInputs) trackFocusYearInput();
     }
-  }, [isWithDateInputs, isWithTimeInputs, meridiemInputRef, onEndKeyDown, onHomeKeyDown, withAnyInputs, yearInputRef]);
+  }, [isWithDateInputs, isWithTimeInputs, onEndKeyDown, onHomeKeyDown, trackFocusMeridiemInput, trackFocusYearInput, withAnyInputs]);
   return React.useMemo(() => ({
     onClearClick,
     onClearButtonKeyDown,

package/cjs/date-time-picker/parts/ControlledDateTimePickerContent.js

@@ -41,13 +41,13 @@ const ControlledDateTimePickerContent = () => {
     hideTime,
     hideTimePicker,
     hideDateTimePicker,
-    setLatestInteractionRegion,
     withAnyPicker,
     withAnyRightController,
     shouldPreserveClearableSpace,
     isControllerOnly,
     dataAttrs,
-    onGlobalKeyDown
+    onGlobalKeyDown,
+    trackFocusResetter
   } = React__default["default"].useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   const styledsAttrs = {
     justPicker: hideDate && hideTime,
@@ -55,9 +55,6 @@ const ControlledDateTimePickerContent = () => {
     hasError,
     isControllerOnly
   };
-  const resetLatestInteraction = React__default["default"].useCallback(() => {
-    setLatestInteractionRegion('');
-  }, [setLatestInteractionRegion]);
   const mainCols = [];
   if (!hideDate) mainCols.push('auto');
   if (!hideTime) mainCols.push('auto');
@@ -70,9 +67,9 @@ const ControlledDateTimePickerContent = () => {
       cols: mainCols,
       gutter: "xxs",
       pr: hideDatePicker && hideTimePicker && hideDateTimePicker ? '2px' : undefined,
-      onBlur: resetLatestInteraction,
       onKeyDown: onGlobalKeyDown,
-      disabled: disabled
+      disabled: disabled,
+      onBlur: trackFocusResetter
     }, styledsAttrs), dataAttrs), {}, {
       children: [hideDate ? null : _DateInputs || (_DateInputs = /*#__PURE__*/_jsx__default["default"](DateInputs.DateInputs, {})), hideTime ? null : _TimeInputs || (_TimeInputs = /*#__PURE__*/_jsx__default["default"](TimeInputs.TimeInputs, {})), withAnyRightController ? /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
         cols: rightControlCols

package/cjs/date-time-picker/parts/DateInputs/DDInput.js

@@ -29,12 +29,11 @@ const DDInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     disabled,
     contextRef,
     placeholder,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    isFocused
   } = _ref;
   const validateOnChange = React.useCallback(e => {
-    var _e$target;
-
-    if (isInvalidDay(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidDay(e?.target?.value)) {
       e.preventDefault();
       return;
     }
@@ -47,9 +46,12 @@ const DDInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     onFocus: onFocus,
     onKeyDown: onKeyDown,
     value: value,
-    ref: contextRef,
+    ref: DomElem => {
+      contextRef.current = DomElem;
+      if (isFocused) DomElem?.focus?.();
+    },
     placeholder: placeholder,
-    "aria-label": "day input field, ".concat(ariaCurrentValueForInputs),
+    "aria-label": `day input field, ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY,
     disabled: disabled,
     "aria-disabled": disabled

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

@@ -43,7 +43,9 @@ const DateInputs = () => {
     monthInputRef,
     dayInputRef,
     yearInputRef,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    latestInteractionRegion,
+    currFocusDescriber
   } = React.useContext(ControlledDateTimePickerCTX.ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     cols: [config.fixedValues.smallInputWidth, config.fixedValues.separatorWidth, config.fixedValues.smallInputWidth, config.fixedValues.separatorWidth, config.fixedValues.largeInputWidth]
@@ -57,7 +59,8 @@ const DateInputs = () => {
     autoFocusMonthInput: autoFocusMonthInput,
     placeholder: "MM",
     ariaCurrentValueForInputs: ariaCurrentValueForInputs,
-    disabled: disabled
+    disabled: disabled,
+    isFocused: latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'month-input'
   })), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](Styleds.StyledSeparator, {
     alignItems: "center"
   }, void 0, "/")), /*#__PURE__*/_jsx__default["default"](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default["default"](DDInput.DDInput, {
@@ -69,7 +72,8 @@ const DateInputs = () => {
     contextRef: dayInputRef,
     placeholder: "DD",
     ariaCurrentValueForInputs: ariaCurrentValueForInputs,
-    disabled: disabled
+    disabled: disabled,
+    isFocused: latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'day-input'
   })), _StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/_jsx__default["default"](Styleds.StyledSeparator, {
     alignItems: "center"
   }, void 0, "/")), /*#__PURE__*/_jsx__default["default"](Styleds.StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx__default["default"](YYYYInput.YYYYInput, {
@@ -81,7 +85,8 @@ const DateInputs = () => {
     contextRef: yearInputRef,
     placeholder: "YYYY",
     ariaCurrentValueForInputs: ariaCurrentValueForInputs,
-    disabled: disabled
+    disabled: disabled,
+    isFocused: latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'year-input'
   })));
 };
 

package/cjs/date-time-picker/parts/DateInputs/MMInput.js

@@ -30,12 +30,11 @@ const MMInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     placeholder,
     contextRef,
     autoFocusMonthInput,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    isFocused
   } = _ref;
   const validateOnChange = React.useCallback(e => {
-    var _e$target;
-
-    if (isInvalidMonth(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidMonth(e?.target?.value)) {
       e.preventDefault();
       return;
     }
@@ -49,9 +48,12 @@ const MMInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     onFocus: onFocus,
     onKeyDown: onKeyDown,
     value: value,
-    ref: contextRef,
+    ref: DomElem => {
+      contextRef.current = DomElem;
+      if (isFocused) DomElem?.focus?.();
+    },
     placeholder: placeholder,
-    "aria-label": "month input field, ".concat(ariaCurrentValueForInputs),
+    "aria-label": `month input field, ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH,
     disabled: disabled,
     "aria-disabled": disabled

package/cjs/date-time-picker/parts/DateInputs/YYYYInput.js

@@ -29,12 +29,11 @@ const YYYYInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     disabled,
     placeholder,
     contextRef,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    isFocused
   } = _ref;
   const validateOnChange = React.useCallback(e => {
-    var _e$target;
-
-    if (isInvalidYear(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value)) {
+    if (isInvalidYear(e?.target?.value)) {
       e.preventDefault();
       return;
     }
@@ -47,9 +46,12 @@ const YYYYInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     onFocus: onFocus,
     onKeyDown: onKeyDown,
     value: value,
-    ref: contextRef,
+    ref: DomElem => {
+      contextRef.current = DomElem;
+      if (isFocused) DomElem?.focus?.();
+    },
     placeholder: placeholder,
-    "aria-label": "year input field, ".concat(ariaCurrentValueForInputs),
+    "aria-label": `year input field, ${ariaCurrentValueForInputs}`,
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.YEAR,
     disabled: disabled,
     "aria-disabled": disabled