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

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

@@ -1,14 +1,20 @@
-import { useRef, useMemo } from 'react';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useRef, useMemo } from '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] = useState('');
+  const [lastSegment, setLastSegment] = useState(''); // refs are used for "auto-advance" feature
+
   const monthInputRef = useRef(null);
   const dayInputRef = useRef(null);
   const yearInputRef = useRef(null);
@@ -32,22 +38,38 @@ const useGetReferences = _ref => {
   const currMeridiemBtnRef = useRef(null);
   const nextMeridiemBtnRef = useRef(null);
   let firstSegmentRef = 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 = 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 = 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 = 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 useMemo(() => ({
     monthInputRef,
     dayInputRef,
@@ -73,10 +95,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]);
 };
 
 export { useGetReferences };

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

@@ -16,8 +16,8 @@ const useGlobalKeyHandlers = _ref => {
   let {
     propsBasedOnType,
     changeHandlers,
-    DOMRefs,
-    flags
+    flags,
+    focusTrackers
   } = _ref;
   const {
     getIsOutOfRangeDay,
@@ -34,13 +34,13 @@ const useGlobalKeyHandlers = _ref => {
     handleChangeComposedDateTimeString,
     handleClearAll
   } = changeHandlers;
-  const {
-    lastSegmentRef,
-    clearButtonRef
-  } = DOMRefs;
   const {
     shouldPreserveClearableSpace
   } = flags;
+  const {
+    trackFocusClearBtn,
+    trackFocusLastSegment
+  } = focusTrackers;
   const onFillWithCurrentDateKeys = useCallback(function (e) {
     let metaInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
       isAutomaticFillTrigger: true
@@ -70,12 +70,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 = useCallback(e => {
     const {
       key,

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

@@ -5,12 +5,13 @@ import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
+import { useContext } from 'react';
 import { CloseMedium } from '@elliemae/ds-icons';
 import { DSIconColors } from '@elliemae/ds-icon';
 import { BUTTON_SIZES } from '@elliemae/ds-button';
 import { StyledClearButton } from '../Styleds.js';
 import { ControlledDateTimePickerDatatestid } from '../../ControlledDateTimePickerDatatestid.js';
+import { ControlledDateTimePickerContext } from '../../ControlledDateTimePickerCTX.js';
 import { useClearButton } from './useClearButton.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -27,12 +28,21 @@ const ClearButton = () => {
   const styledsAttrs = {
     shouldDisplay: withClearBtn
   };
+  const {
+    latestInteractionRegion,
+    currFocusDescriber
+  } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/jsx(StyledClearButton, _objectSpread(_objectSpread({
     "aria-label": "clear selected date",
     buttonType: "icon",
     size: BUTTON_SIZES.M,
     "data-testid": 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/esm/date-time-picker/parts/ClearButton/useClearButton.js

@@ -11,32 +11,21 @@ const useClearButton = () => {
     withAnyInputs,
     isWithTimeInputs,
     isWithDateInputs,
-    isTimeSelector,
-    hourInputRef,
-    monthInputRef,
-    pickerButtonRef,
-    meridiemInputRef,
-    yearInputRef,
-    setLatestInteractionRegion
+    trackFocusFirstSegment,
+    trackFocusMeridiemInput,
+    trackFocusYearInput,
+    trackFocusPicker
   } = useContext(ControlledDateTimePickerContext);
-  const focusFirstRegion = 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 = useCallback(e => {
     handleClearAll(e);
-    setLatestInteractionRegion('clear-btn');
-    focusFirstRegion();
-  }, [focusFirstRegion, handleClearAll, setLatestInteractionRegion]);
+    trackFocusFirstSegment();
+  }, [handleClearAll, trackFocusFirstSegment]);
   const onHomeKeyDown = useCallback(() => {
-    focusFirstRegion();
-  }, [focusFirstRegion]);
+    trackFocusFirstSegment();
+  }, [trackFocusFirstSegment]);
   const onEndKeyDown = 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 = useCallback(e => {
     const {
       key
@@ -49,11 +38,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 useMemo(() => ({
     onClearClick,
     onClearButtonKeyDown,

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

@@ -31,13 +31,13 @@ const ControlledDateTimePickerContent = () => {
     hideTime,
     hideTimePicker,
     hideDateTimePicker,
-    setLatestInteractionRegion,
     withAnyPicker,
     withAnyRightController,
     shouldPreserveClearableSpace,
     isControllerOnly,
     dataAttrs,
-    onGlobalKeyDown
+    onGlobalKeyDown,
+    trackFocusResetter
   } = React.useContext(ControlledDateTimePickerContext);
   const styledsAttrs = {
     justPicker: hideDate && hideTime,
@@ -45,9 +45,6 @@ const ControlledDateTimePickerContent = () => {
     hasError,
     isControllerOnly
   };
-  const resetLatestInteraction = React.useCallback(() => {
-    setLatestInteractionRegion('');
-  }, [setLatestInteractionRegion]);
   const mainCols = [];
   if (!hideDate) mainCols.push('auto');
   if (!hideTime) mainCols.push('auto');
@@ -60,9 +57,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(DateInputs, {})), hideTime ? null : _TimeInputs || (_TimeInputs = /*#__PURE__*/_jsx(TimeInputs, {})), withAnyRightController ? /*#__PURE__*/_jsx(Grid, {
         cols: rightControlCols

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

@@ -21,7 +21,8 @@ const DDInput = /*#__PURE__*/React.memo(_ref => {
     disabled,
     contextRef,
     placeholder,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    isFocused
   } = _ref;
   const validateOnChange = useCallback(e => {
     var _e$target;
@@ -39,7 +40,12 @@ const DDInput = /*#__PURE__*/React.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.DATE_INPUTS.DAY,

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

@@ -35,7 +35,9 @@ const DateInputs = () => {
     monthInputRef,
     dayInputRef,
     yearInputRef,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    latestInteractionRegion,
+    currFocusDescriber
   } = useContext(ControlledDateTimePickerContext);
   return /*#__PURE__*/_jsx(Grid, {
     cols: [fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.smallInputWidth, fixedValues.separatorWidth, fixedValues.largeInputWidth]
@@ -49,7 +51,8 @@ const DateInputs = () => {
     autoFocusMonthInput: autoFocusMonthInput,
     placeholder: "MM",
     ariaCurrentValueForInputs: ariaCurrentValueForInputs,
-    disabled: disabled
+    disabled: disabled,
+    isFocused: latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'month-input'
   })), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx(StyledSeparator, {
     alignItems: "center"
   }, void 0, "/")), /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(DDInput, {
@@ -61,7 +64,8 @@ const DateInputs = () => {
     contextRef: dayInputRef,
     placeholder: "DD",
     ariaCurrentValueForInputs: ariaCurrentValueForInputs,
-    disabled: disabled
+    disabled: disabled,
+    isFocused: latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'day-input'
   })), _StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/_jsx(StyledSeparator, {
     alignItems: "center"
   }, void 0, "/")), /*#__PURE__*/_jsx(StyledFocusWithIn, {}, void 0, /*#__PURE__*/_jsx(YYYYInput, {
@@ -73,7 +77,8 @@ const DateInputs = () => {
     contextRef: yearInputRef,
     placeholder: "YYYY",
     ariaCurrentValueForInputs: ariaCurrentValueForInputs,
-    disabled: disabled
+    disabled: disabled,
+    isFocused: latestInteractionRegion === 'date-inputs' && currFocusDescriber === 'year-input'
   })));
 };
 

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

@@ -22,7 +22,8 @@ const MMInput = /*#__PURE__*/React.memo(_ref => {
     placeholder,
     contextRef,
     autoFocusMonthInput,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    isFocused
   } = _ref;
   const validateOnChange = useCallback(e => {
     var _e$target;
@@ -41,7 +42,12 @@ const MMInput = /*#__PURE__*/React.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.DATE_INPUTS.MONTH,

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

@@ -21,7 +21,8 @@ const YYYYInput = /*#__PURE__*/React.memo(_ref => {
     disabled,
     placeholder,
     contextRef,
-    ariaCurrentValueForInputs
+    ariaCurrentValueForInputs,
+    isFocused
   } = _ref;
   const validateOnChange = useCallback(e => {
     var _e$target;
@@ -39,7 +40,12 @@ const YYYYInput = /*#__PURE__*/React.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.DATE_INPUTS.YEAR,