@elliemae/ds-controlled-form 2.4.1 → 2.4.2-rc.3

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

@@ -2,17 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 
-/* eslint-disable complexity */
 const useGetReferences = _ref => {
   let {
     isWithDateInputs,
     isWithTimeInputs,
+    isDateSelector,
+    isTimeSelector,
+    isDateTimeSelector,
     withAnyPicker,
     withClearBtn
   } = _ref;
-  // refs are used for "auto-advance" feature
+  // those 2 states are needed for focus tracking
+  const [firstSegment, setFirstSegment] = React.useState('');
+  const [lastSegment, setLastSegment] = React.useState(''); // refs are used for "auto-advance" feature
+
   const monthInputRef = React.useRef(null);
   const dayInputRef = React.useRef(null);
   const yearInputRef = React.useRef(null);
@@ -36,22 +42,38 @@ const useGetReferences = _ref => {
   const currMeridiemBtnRef = React.useRef(null);
   const nextMeridiemBtnRef = React.useRef(null);
   let firstSegmentRef = React.useRef(null);
-  if (isWithDateInputs) firstSegmentRef = monthInputRef;else if (isWithTimeInputs) firstSegmentRef = hourInputRef;else if (withAnyPicker) firstSegmentRef = pickerButtonRef; // we need some non-ref to force refresh of the hooks dependencies when using firstSegmentRef
 
-  const firstFragmentRefUpdateDeps = React.useMemo(() => ({
-    isWithDateInputs,
-    isWithTimeInputs,
-    withAnyPicker
-  }), [isWithDateInputs, isWithTimeInputs, withAnyPicker]);
+  if (isWithDateInputs) {
+    firstSegmentRef = monthInputRef;
+    if (firstSegment !== 'month-input') setFirstSegment('month-input');
+  } else if (isWithTimeInputs) {
+    firstSegmentRef = hourInputRef;
+    if (firstSegment !== 'hour-input') setFirstSegment('hour-input');
+  } else if (withAnyPicker) {
+    firstSegmentRef = pickerButtonRef;
+    if (isDateSelector && firstSegment !== 'date-picker-icon') setFirstSegment('date-picker-icon');
+    if (isTimeSelector && firstSegment !== 'time-picker-icon') setFirstSegment('time-picker-icon');
+    if (isDateTimeSelector && firstSegment !== 'datetime-picker-icon') setFirstSegment('datetime-picker-icon');
+  }
+
   let lastSegmentRef = React.useRef(null);
-  if (withAnyPicker) lastSegmentRef = pickerButtonRef;else if (withClearBtn) lastSegmentRef = clearButtonRef;else if (isWithTimeInputs) lastSegmentRef = meridiemInputRef;else if (isWithDateInputs) lastSegmentRef = yearInputRef; // we need some non-ref to force refresh of the hooks dependencies when using lastSegmentRef
 
-  const lastFragmentRefUpdateDeps = React.useMemo(() => ({
-    withAnyPicker,
-    withClearBtn,
-    isWithTimeInputs,
-    isWithDateInputs
-  }), [isWithDateInputs, isWithTimeInputs, withAnyPicker, withClearBtn]);
+  if (withAnyPicker) {
+    lastSegmentRef = pickerButtonRef;
+    if (isDateSelector && lastSegment !== 'date-picker-icon') setLastSegment('date-picker-icon');
+    if (isTimeSelector && lastSegment !== 'time-picker-icon') setLastSegment('time-picker-icon');
+    if (isDateTimeSelector && lastSegment !== 'datetime-picker-icon') setLastSegment('datetime-picker-icon');
+  } else if (withClearBtn) {
+    lastSegmentRef = clearButtonRef;
+    if (lastSegment !== 'clear-btn') setLastSegment('clear-btn');
+  } else if (isWithTimeInputs) {
+    lastSegmentRef = meridiemInputRef;
+    if (lastSegment !== 'meridiem-input') setLastSegment('meridiem-input');
+  } else if (isWithDateInputs) {
+    lastSegmentRef = yearInputRef;
+    if (lastSegment !== 'year-input') setLastSegment('year-input');
+  }
+
   return React.useMemo(() => ({
     monthInputRef,
     dayInputRef,
@@ -77,10 +99,9 @@ const useGetReferences = _ref => {
     nextMeridiemBtnRef,
     firstSegmentRef,
     lastSegmentRef,
-    firstFragmentRefUpdateDeps,
-    lastFragmentRefUpdateDeps
-  }), [firstFragmentRefUpdateDeps, lastFragmentRefUpdateDeps] // if we remove this last/first segment won't work
-  );
+    firstSegment,
+    lastSegment
+  }), [firstSegment, lastSegment]);
 };
 
 exports.useGetReferences = useGetReferences;

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

@@ -24,8 +24,8 @@ const useGlobalKeyHandlers = _ref => {
   let {
     propsBasedOnType,
     changeHandlers,
-    DOMRefs,
-    flags
+    flags,
+    focusTrackers
   } = _ref;
   const {
     getIsOutOfRangeDay,
@@ -42,13 +42,13 @@ const useGlobalKeyHandlers = _ref => {
     handleChangeComposedDateTimeString,
     handleClearAll
   } = changeHandlers;
-  const {
-    lastSegmentRef,
-    clearButtonRef
-  } = DOMRefs;
   const {
     shouldPreserveClearableSpace
   } = flags;
+  const {
+    trackFocusClearBtn,
+    trackFocusLastSegment
+  } = focusTrackers;
   const onFillWithCurrentDateKeys = React.useCallback(function (e) {
     let metaInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
       isAutomaticFillTrigger: true
@@ -78,12 +78,8 @@ const useGlobalKeyHandlers = _ref => {
     appOnMinuteChange(minutes, e, metaInfo);
     appOnMeridiemChange(meridiem, e, metaInfo);
     handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);
-    setTimeout(() => {
-      var _clearButtonRef$curre, _lastSegmentRef$curre;
-
-      if (shouldPreserveClearableSpace) (_clearButtonRef$curre = clearButtonRef.current) === null || _clearButtonRef$curre === void 0 ? void 0 : _clearButtonRef$curre.focus();else (_lastSegmentRef$curre = lastSegmentRef.current) === null || _lastSegmentRef$curre === void 0 ? void 0 : _lastSegmentRef$curre.focus();
-    });
-  }, [appOnDayChange, appOnHourChange, appOnMeridiemChange, appOnMinuteChange, appOnMonthChange, appOnYearChange, clearButtonRef, getIsDisabledDay, getIsDisabledTime, getIsOutOfRangeDay, handleChangeComposedDateTimeString, lastSegmentRef, shouldPreserveClearableSpace]);
+    if (shouldPreserveClearableSpace) trackFocusClearBtn();else trackFocusLastSegment();
+  }, [appOnDayChange, appOnHourChange, appOnMeridiemChange, appOnMinuteChange, appOnMonthChange, appOnYearChange, getIsDisabledDay, getIsDisabledTime, getIsOutOfRangeDay, handleChangeComposedDateTimeString, shouldPreserveClearableSpace, trackFocusClearBtn, trackFocusLastSegment]);
   const onGlobalKeyDown = React.useCallback(e => {
     const {
       key,

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,21 @@ 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 => {
+      var _DomElem$focus;
+
+      clearButtonRef.current = DomElem;
+      if (latestInteractionRegion === 'clear-btn' && currFocusDescriber === 'clear-btn') DomElem === null || DomElem === void 0 ? void 0 : (_DomElem$focus = DomElem.focus) === null || _DomElem$focus === void 0 ? void 0 : _DomElem$focus.call(DomElem);
+    },
     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,7 +29,8 @@ const DDInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     disabled,
     contextRef,
     placeholder,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    isFocused
   } = _ref;
   const validateOnChange = React.useCallback(e => {
     var _e$target;
@@ -47,7 +48,12 @@ const DDInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     onFocus: onFocus,
     onKeyDown: onKeyDown,
     value: value,
-    ref: contextRef,
+    ref: DomElem => {
+      var _DomElem$focus;
+
+      contextRef.current = DomElem;
+      if (isFocused) DomElem === null || DomElem === void 0 ? void 0 : (_DomElem$focus = DomElem.focus) === null || _DomElem$focus === void 0 ? void 0 : _DomElem$focus.call(DomElem);
+    },
     placeholder: placeholder,
     "aria-label": "day input field, ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.DAY,

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,7 +30,8 @@ const MMInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     placeholder,
     contextRef,
     autoFocusMonthInput,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    isFocused
   } = _ref;
   const validateOnChange = React.useCallback(e => {
     var _e$target;
@@ -49,7 +50,12 @@ const MMInput = /*#__PURE__*/React__default["default"].memo(_ref => {
     onFocus: onFocus,
     onKeyDown: onKeyDown,
     value: value,
-    ref: contextRef,
+    ref: DomElem => {
+      var _DomElem$focus;
+
+      contextRef.current = DomElem;
+      if (isFocused) DomElem === null || DomElem === void 0 ? void 0 : (_DomElem$focus = DomElem.focus) === null || _DomElem$focus === void 0 ? void 0 : _DomElem$focus.call(DomElem);
+    },
     placeholder: placeholder,
     "aria-label": "month input field, ".concat(ariaCurrentValueForInputs),
     "data-testid": ControlledDateTimePickerDatatestid.ControlledDateTimePickerDatatestid.DATE_INPUTS.MONTH,

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

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