@elliemae/ds-controlled-form 2.0.0-alpha.11 → 2.0.0-alpha.12

package/esm/controlled-date-range-picker/config/useControlledDateRangePicker.js

@@ -1,13 +1,23 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+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 { useMemo } from 'react';
 import { uid } from 'uid';
+import { getDataProps } from '@elliemae/ds-props-helpers';
 import { useGetDateRangePickerWithDefaultsProps } from './useGetPropsWithDefault.js';
 import { useRangePickerLogic } from './useRangePickerLogic.js';
 import { CONTROLLED_DATE_RANGE_PICKER_TYPES } from '../ControlledDateRangePickerTypes.js';
 
-/* eslint-disable max-lines */
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const useControlledDateRangePicker = props => {
   const instanceUID = useMemo(() => uid(6), []);
   const propsWithDefaults = useGetDateRangePickerWithDefaultsProps(props);
+  const dataAttrs = getDataProps(props);
   const {
     type
   } = propsWithDefaults;
@@ -16,13 +26,15 @@ const useControlledDateRangePicker = props => {
   const isControllerOnly = type === CONTROLLED_DATE_RANGE_PICKER_TYPES.CONTROLLER_ONLY;
   const rangePickerLogic = useRangePickerLogic(propsWithDefaults);
   const ctx = useMemo(() => ({
-    props: propsWithDefaults,
+    props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
+      dataAttrs
+    }),
     instanceUID,
     rangePickerLogic,
     withInputs,
     withIcon,
     isControllerOnly
-  }), [instanceUID, isControllerOnly, propsWithDefaults, rangePickerLogic, withIcon, withInputs]);
+  }), [instanceUID, isControllerOnly, dataAttrs, propsWithDefaults, rangePickerLogic, withIcon, withInputs]);
   return ctx;
 };
 

package/esm/controlled-date-range-picker/config/useRangePickerLogic.js

@@ -1,25 +1,33 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+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 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import '../../controlled-date-time-picker/ControlledDateTimePicker.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/es.string.replace.js';
 import { getDayFromDateString } from '../../controlled-date-time-picker/utils/dateHelpers.js';
 
 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; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const useRangePickerLogic = ({
-  fromDate,
-  onFromDateChange,
-  onMonthFromChange,
-  onDayFromChange,
-  onYearFromChange,
-  toDate,
-  onMonthToChange,
-  onDayToChange,
-  onYearToChange,
-  onToDateChange
-}) => {
+const useRangePickerLogic = _ref => {
+  let {
+    fromDate,
+    onFromDateChange,
+    onMonthFromChange,
+    onDayFromChange,
+    onYearFromChange,
+    toDate,
+    onMonthToChange,
+    onDayToChange,
+    onYearToChange,
+    onToDateChange
+  } = _ref;
   // the implementation is based on controlled-date-time-picker that is not meant to "understand"
   // the "from" - "to" logic on click, we are "overloading" the "from" - "to" logic here
   // we track wheter we are going to set the "from" OR "to" controlled date based on this toggle

package/esm/controlled-date-range-picker/parts/ControlledDateRangeCalendar.js

@@ -2,8 +2,15 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
 import { DSControlledDateTimePicker } from '../../controlled-date-time-picker/ControlledDateTimePicker.js';
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../controlled-date-time-picker/ControlledDateTimePickerTypes.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import '@babel/runtime/helpers/esm/defineProperty';
 import { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX.js';
 

package/esm/controlled-date-range-picker/parts/ControlledDateRangeContent.js

@@ -1,3 +1,9 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+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 { useContext } from 'react';
 import styled from 'styled-components';
@@ -5,25 +11,39 @@ import { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCT
 import { ControlledDateRangeFromDate } from './ControlledDateRangeFromDate.js';
 import { ControlledDateRangeToDate } from './ControlledDateRangeToDate.js';
 import { ControlledDateRangeCalendar } from './ControlledDateRangeCalendar.js';
+import { ControlledDateRangePickerDatatestid } from '../ControlledDateRangePickerDatatestid.js';
 import { jsxs, Fragment } from 'react/jsx-runtime';
 
 var _ControlledDateRangeF, _ControlledDateRangeT, _ControlledDateRangeC;
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const StyledWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-e4pfvj-0"
-})(["display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto;", " grid-auto-flow:row;grid-template-areas:'. .';justify-content:center;align-items:center;"], ({
-  isControllerOnly
-}) => isControllerOnly ? undefined : 'gap: 0px 8px;');
+})(["display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto;", " grid-auto-flow:row;grid-template-areas:'. .';justify-content:center;align-items:center;"], _ref => {
+  let {
+    isControllerOnly
+  } = _ref;
+  return isControllerOnly ? undefined : 'gap: 0px 8px;';
+});
 const ControlledDateRangeContent = () => {
   const {
+    props: {
+      dataAttrs
+    },
     withIcon,
     withInputs,
     isControllerOnly
   } = useContext(ControlledDateRangePickerContext);
-  return /*#__PURE__*/_jsx(StyledWrapper, {
-    isControllerOnly: isControllerOnly
-  }, void 0, withInputs ? /*#__PURE__*/jsxs(Fragment, {
-    children: [_ControlledDateRangeF || (_ControlledDateRangeF = /*#__PURE__*/_jsx(ControlledDateRangeFromDate, {})), _ControlledDateRangeT || (_ControlledDateRangeT = /*#__PURE__*/_jsx(ControlledDateRangeToDate, {}))]
-  }) : null, withIcon || isControllerOnly ? _ControlledDateRangeC || (_ControlledDateRangeC = /*#__PURE__*/_jsx(ControlledDateRangeCalendar, {})) : null);
+  return /*#__PURE__*/jsxs(StyledWrapper, _objectSpread(_objectSpread({
+    isControllerOnly: isControllerOnly,
+    "data-testid": ControlledDateRangePickerDatatestid.WRAPPER
+  }, dataAttrs), {}, {
+    children: [withInputs ? /*#__PURE__*/jsxs(Fragment, {
+      children: [_ControlledDateRangeF || (_ControlledDateRangeF = /*#__PURE__*/_jsx(ControlledDateRangeFromDate, {})), _ControlledDateRangeT || (_ControlledDateRangeT = /*#__PURE__*/_jsx(ControlledDateRangeToDate, {}))]
+    }) : null, withIcon || isControllerOnly ? _ControlledDateRangeC || (_ControlledDateRangeC = /*#__PURE__*/_jsx(ControlledDateRangeCalendar, {})) : null]
+  }));
 };
 
 export { ControlledDateRangeContent };

package/esm/controlled-date-range-picker/parts/ControlledDateRangeFromDate.js

@@ -3,8 +3,15 @@ import { useContext } from 'react';
 import { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX.js';
 import { DSControlledDateTimePicker } from '../../controlled-date-time-picker/ControlledDateTimePicker.js';
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../controlled-date-time-picker/ControlledDateTimePickerTypes.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import '@babel/runtime/helpers/esm/defineProperty';
 
 const ControlledDateRangeFromDate = () => {

package/esm/controlled-date-range-picker/parts/ControlledDateRangeToDate.js

@@ -3,8 +3,15 @@ import { useContext } from 'react';
 import { ControlledDateRangePickerContext } from '../ControlledDateRangePickerCTX.js';
 import { DSControlledDateTimePicker } from '../../controlled-date-time-picker/ControlledDateTimePicker.js';
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../controlled-date-time-picker/ControlledDateTimePickerTypes.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import '@babel/runtime/helpers/esm/defineProperty';
 
 const ControlledDateRangeToDate = () => {

package/esm/controlled-date-time-picker/ControlledDateTimePickerCTX.js

@@ -36,6 +36,7 @@ const defaultProps = {
   onCalendarOpenFocusedDay: undefined,
   minutesInterval: 1,
   isClearable: false,
+  disabled: false,
   hasError: false,
   autoFocus: false,
   preventCloseOnSelection: false,
@@ -66,6 +67,9 @@ const defaultContext = {
   prevMeridiemBtnRef: /*#__PURE__*/createRef(),
   currMeridiemBtnRef: /*#__PURE__*/createRef(),
   nextMeridiemBtnRef: /*#__PURE__*/createRef(),
+  firstSegmentRef: /*#__PURE__*/createRef(),
+  lastSegmentRef: /*#__PURE__*/createRef(),
+  ariaCurrentValueForInputs: '',
   dateStringFromProps: '',
   tempDateString: '__/__/____',
   // setDateString: mockedStringStateSetter,
@@ -74,6 +78,12 @@ const defaultContext = {
   handleChangeComposedDateTimeString: noop,
   handleChangeComposedDateString: noop,
   handleChangeComposedTimeString: noop,
+  handleChangeMonth: noop,
+  handleChangeDay: noop,
+  handleChangeYear: noop,
+  handleChangeHours: noop,
+  handleChangeMinutes: noop,
+  handleChangeMeridiem: noop,
   handleClearAll: noop,
   hideDate: false,
   hideTime: false,
@@ -100,7 +110,8 @@ const defaultContext = {
   autoFocusHourTimeWheel: false,
   shouldPreserveClearableSpace: false,
   latestInteractionRegion: '',
-  setLatestInteractionRegion: mockedSetLatestInteractionRegion
+  setLatestInteractionRegion: mockedSetLatestInteractionRegion,
+  onGlobalKeyDown: noop
 };
 /** Context for cross component communication */
 

package/esm/controlled-date-time-picker/ControlledDateTimePickerDatatestid.js

@@ -19,6 +19,11 @@ const ControlledDateTimePickerDatatestid = {
     PREV_MONTH: 'ds-controlled-date-time-picker-calendar-prev-month',
     DAY: 'ds-controlled-date-time-picker-calendar-day',
     FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-focused-day',
+    START_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-start-range-day',
+    // <-nuevo
+    IN_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-in-range-day',
+    // <-nuevo
+    END_RANGE_DAY: 'ds-controlled-date-time-picker-calendar-end-range-day',
     SELECTED_DAY: 'ds-controlled-date-time-picker-calendar-selected-day',
     SELECTED_FOCUSED_DAY: 'ds-controlled-date-time-picker-calendar-selected-focused-day',
     NEXT_MONTH: 'ds-controlled-date-time-picker-calendar-next-month',

package/esm/controlled-date-time-picker/config/useControlledDateTimePicker.js

@@ -1,13 +1,20 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+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 'core-js/modules/web.dom-collections.iterator.js';
 import React, { useRef, useMemo, useState, useCallback } from 'react';
+import { getDataProps } from '@elliemae/ds-props-helpers';
 import { useGetDatePickerWithDefaultsProps } from './useGetPropsWithDefault.js';
 import { useGetDestructuredValues } from './useGetDestructuredValues.js';
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../ControlledDateTimePickerTypes.js';
 import { useValidateProps } from './useValidateProps.js';
-import { getValidationDateStringMetaInfo } from '../utils/dateHelpers.js';
+import { getValidationDateStringMetaInfo, getDateStringFromDay, getTimeStringFromDay } from '../utils/dateHelpers.js';
 import { getValidationTimeStringMetaInfo } from '../utils/timeHelpers.js';
-import { dateTimeToDate, dateTimeToTime, isEmptyDateStringMask, isEmptyTimeStringMask, isEmptyDateTimeStringMask } from '../utils/stringHelpers.js';
+import { dateTimeToDate, dateTimeToTime, getFormattedDateString, getFormattedTimeString, isEmptyDateStringMask, isEmptyTimeStringMask, isEmptyDateTimeStringMask } from '../utils/stringHelpers.js';
+import { defaultMetaInfo } from '../utils/constants.js';
 
 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; }
 
@@ -20,8 +27,7 @@ const useControlledDateTimePicker = props => {
   const dayInputRef = useRef();
   const yearInputRef = useRef();
   const hourInputRef = useRef();
-  const minutesInputRef = useRef(); // const secondsInputRef = useRef<HTMLInputElement>();
-
+  const minutesInputRef = useRef();
   const meridiemInputRef = useRef();
   const clearButtonRef = useRef();
   const pickerButtonRef = useRef();
@@ -35,14 +41,12 @@ const useControlledDateTimePicker = props => {
   const nextHourBtnRef = useRef();
   const prevMinutesBtnRef = useRef();
   const currMinutesBtnRef = useRef();
-  const nextMinutesBtnRef = useRef(); // const prevSecondsBtnRef = useRef<HTMLButtonElement>();
-  // const currSecondsBtnRef = useRef<HTMLButtonElement>();
-  // const nextSecondsBtnRef = useRef<HTMLButtonElement>();
-
+  const nextMinutesBtnRef = useRef();
   const prevMeridiemBtnRef = useRef();
   const currMeridiemBtnRef = useRef();
   const nextMeridiemBtnRef = useRef();
   const propsWithDefaults = useGetDatePickerWithDefaultsProps(props);
+  const dataAttrs = getDataProps(props);
   const {
     type,
     getIsDisabledDay,
@@ -100,6 +104,10 @@ const useControlledDateTimePicker = props => {
   const shouldPreserveClearableSpace = isClearable && withAnyInputs;
   const withAnyRightController = withAnyPicker || withClearBtn || shouldPreserveClearableSpace;
   const [latestInteractionRegion, setLatestInteractionRegion] = useState('');
+  let firstSegmentRef = useRef();
+  if (isWithDateInputs) firstSegmentRef = monthInputRef;else if (isWithTimeInputs) firstSegmentRef = hourInputRef;else if (withAnyPicker) firstSegmentRef = pickerButtonRef;
+  let lastSegmentRef = useRef();
+  if (withAnyPicker) lastSegmentRef = pickerButtonRef;else if (withClearBtn) lastSegmentRef = clearButtonRef;else if (isWithTimeInputs) lastSegmentRef = meridiemInputRef;else if (isWithDateInputs) lastSegmentRef = yearInputRef;
   const {
     month,
     day,
@@ -127,11 +135,15 @@ const useControlledDateTimePicker = props => {
     isDateTimeSelector
   });
   const ariaCurrentValueForInputs = "current values: ".concat(isWithDateInputs ? "".concat(announcedDateValues) : '').concat(isDateTimeSelector ? ', ' : '').concat(isWithTimeInputs ? "".concat(announcedTimeValues) : '');
-  const getDateMetaInfo = useCallback((newDateString = null, metaInfo = {}) => {
+  const getDateMetaInfo = useCallback(function () {
+    let newDateString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    let metaInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const finalDateString = newDateString || tempDateString;
     return _objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(finalDateString, getIsOutOfRangeDay, getIsDisabledDay));
   }, [tempDateString, getIsDisabledDay, getIsOutOfRangeDay]);
-  const getTimeMetaInfo = useCallback((newTimeString = null, metaInfo = {}) => {
+  const getTimeMetaInfo = useCallback(function () {
+    let newTimeString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    let metaInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const finalTimeString = newTimeString || tempTimeString;
     return _objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(finalTimeString, getIsDisabledTime));
   }, [tempTimeString, getIsDisabledTime]);
@@ -188,6 +200,99 @@ const useControlledDateTimePicker = props => {
     const appDateTimeString = isEmptyDateTimeStringMask(newDateTimeString) ? '' : newDateTimeString;
     appOnDateTimeChange(appDateTimeString, newMetaInfo); // don't do this on useEffect to avoid complete chaos
   }, [appOnTimeChange, tempDateString, getTimeMetaInfo, getDateMetaInfo, appOnDateTimeChange]);
+  const handleChangeMonth = useCallback(function (newMonth, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newDateString = getFormattedDateString({
+      month: newMonth,
+      day,
+      year
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnMonthChange(newMonth, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [day, year, getIsOutOfRangeDay, getIsDisabledDay, appOnMonthChange, handleChangeComposedDateString]);
+  const handleChangeDay = useCallback(function (newDay, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newDateString = getFormattedDateString({
+      month,
+      day: newDay,
+      year
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnDayChange(newDay, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, year, getIsOutOfRangeDay, getIsDisabledDay, appOnDayChange, handleChangeComposedDateString]);
+  const handleChangeYear = useCallback(function (newYear, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newDateString = getFormattedDateString({
+      month,
+      day,
+      year: newYear
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnYearChange(newYear, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, day, getIsOutOfRangeDay, getIsDisabledDay, appOnYearChange, handleChangeComposedDateString]);
+  const handleChangeHours = useCallback(function (newHours, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newTimeString = getFormattedTimeString({
+      hours: newHours,
+      minutes,
+      // seconds,
+      meridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnHourChange(newHours, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [minutes, meridiem, getIsDisabledTime, appOnHourChange, handleChangeComposedTimeString]);
+  const handleChangeMinutes = useCallback(function (newMinutes, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newTimeString = getFormattedTimeString({
+      hours,
+      minutes: newMinutes,
+      // seconds,
+      meridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnMinuteChange(newMinutes, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [hours, meridiem, getIsDisabledTime, appOnMinuteChange, handleChangeComposedTimeString]);
+  const handleChangeMeridiem = useCallback(function (newMeridiem, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultMetaInfo;
+    const newTimeString = getFormattedTimeString({
+      hours,
+      minutes,
+      // seconds,
+      meridiem: newMeridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnMeridiemChange(newMeridiem, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [hours, minutes, getIsDisabledTime, appOnMeridiemChange, handleChangeComposedTimeString]);
   const handleClearAll = useCallback(e => {
     const metaInfo = {
       isAutomaticFillTrigger: false,
@@ -220,16 +325,43 @@ const useControlledDateTimePicker = props => {
     if (isDateTimeSelector) handleChangeComposedDateTimeString('__/__/____', '__:__ __', metaInfo);
     if (isDateSelector) handleChangeComposedDateString('__/__/____', datePartsChangesMetainfo);
     if (isTimeSelector) handleChangeComposedTimeString('__:__ __', timePartsChangesMetainfo);
-    setLatestInteractionRegion('clear-btn');
   }, [appOnDayChange, appOnHourChange, appOnMeridiemChange, appOnMinuteChange, appOnMonthChange, appOnYearChange, handleChangeComposedDateString, handleChangeComposedDateTimeString, handleChangeComposedTimeString, isDateSelector, isDateTimeSelector, isTimeSelector]);
+  const onFillWithCurrentDateKeys = useCallback(function () {
+    let metaInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      isAutomaticFillTrigger: true
+    };
+    const now = new Date();
+    const nowDateString = getDateStringFromDay(now);
+    const nowTimeString = getTimeStringFromDay(now);
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaInfo), getValidationDateStringMetaInfo(nowDateString, getIsOutOfRangeDay, getIsDisabledDay)), getValidationTimeStringMetaInfo(nowTimeString, getIsDisabledTime)), {}, {
+      newDateString: nowDateString
+    });
+
+    handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);
+  }, [getIsDisabledDay, getIsDisabledTime, getIsOutOfRangeDay, handleChangeComposedDateTimeString]);
+  const onGlobalKeyDown = useCallback(e => {
+    const {
+      key,
+      ctrlKey,
+      metaKey
+    } = e;
+
+    if ((ctrlKey || metaKey) && key === ';') {
+      onFillWithCurrentDateKeys();
+    }
+
+    if ((ctrlKey || metaKey) && (key === 'Delete' || key === 'Backspace')) handleClearAll(e);
+  }, [handleClearAll, onFillWithCurrentDateKeys]);
   const ctx = React.useMemo(() => ({
-    props: propsWithDefaults,
+    props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
+      dataAttrs
+    }),
     monthInputRef,
     dayInputRef,
     yearInputRef,
     hourInputRef,
     minutesInputRef,
-    // secondsInputRef,
     meridiemInputRef,
     clearButtonRef,
     pickerButtonRef,
@@ -248,6 +380,8 @@ const useControlledDateTimePicker = props => {
     currMeridiemBtnRef,
     nextMeridiemBtnRef,
     dateStringFromProps,
+    firstSegmentRef,
+    lastSegmentRef,
     tempDateString,
     setTempDateString,
     tempTimeString,
@@ -255,6 +389,12 @@ const useControlledDateTimePicker = props => {
     handleChangeComposedDateTimeString,
     handleChangeComposedDateString,
     handleChangeComposedTimeString,
+    handleChangeMonth,
+    handleChangeDay,
+    handleChangeYear,
+    handleChangeHours,
+    handleChangeMinutes,
+    handleChangeMeridiem,
     handleClearAll,
     hideDate,
     hideTime,
@@ -301,8 +441,9 @@ const useControlledDateTimePicker = props => {
     announcedMinutes,
     announcedMeridiem,
     announcedTimeValues,
-    ariaCurrentValueForInputs
-  }), [propsWithDefaults, dateStringFromProps, tempDateString, tempTimeString, handleChangeComposedDateTimeString, handleChangeComposedDateString, handleChangeComposedTimeString, handleClearAll, hideDate, hideTime, hideDateTimePicker, hideDatePicker, hideTimePicker, isDateSelector, isTimeSelector, isDateTimeSelector, isControllerOnly, isWithTimeWheelToo, isWithCalendarToo, isWithDateInputs, isWithDateInputsOnly, isWithTimeInputs, isWithTimeInputsOnly, autoFocusMonthInput, autoFocusHourInput, autoFocusPrevMonthArrow, autoFocusHourTimeWheel, latestInteractionRegion, withAnyInputs, withAnyPicker, withClearBtn, withAnyRightController, shouldPreserveClearableSpace, month, day, year, monthNum, dayNum, yearNum, announcedMonth, announcedDay, announcedYear, announcedDateValues, hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues, ariaCurrentValueForInputs] // refs are mutable so we don't need to listen to them
+    ariaCurrentValueForInputs,
+    onGlobalKeyDown
+  }), [dataAttrs, propsWithDefaults, dateStringFromProps, tempDateString, tempTimeString, handleChangeComposedDateTimeString, handleChangeComposedDateString, handleChangeComposedTimeString, handleChangeMonth, handleChangeDay, handleChangeYear, handleChangeHours, handleChangeMinutes, handleChangeMeridiem, handleClearAll, hideDate, hideTime, hideDateTimePicker, hideDatePicker, hideTimePicker, isDateSelector, isTimeSelector, isDateTimeSelector, isControllerOnly, isWithTimeWheelToo, isWithCalendarToo, isWithDateInputs, isWithDateInputsOnly, isWithTimeInputs, isWithTimeInputsOnly, autoFocusMonthInput, autoFocusHourInput, autoFocusPrevMonthArrow, autoFocusHourTimeWheel, latestInteractionRegion, withAnyInputs, withAnyPicker, withClearBtn, withAnyRightController, shouldPreserveClearableSpace, month, day, year, monthNum, dayNum, yearNum, announcedMonth, announcedDay, announcedYear, announcedDateValues, hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues, ariaCurrentValueForInputs, onGlobalKeyDown] // refs are mutable so we don't need to listen to them
   );
   return ctx;
 };

package/esm/controlled-date-time-picker/config/useGetDestructuredValues.js

@@ -8,11 +8,12 @@ import { monthNames, announcableCardinalDays } from '../utils/constants.js';
 // our source of truth is either the date props or dateTime props
 // based on wheter it's a dateTime picker
 // or a date picker (it's date picker when hideTime is true)
-const useGetDestructuredDateValues = ({
-  date,
-  dateTime,
-  isDateTimeSelector
-}) => {
+const useGetDestructuredDateValues = _ref => {
+  let {
+    date,
+    dateTime,
+    isDateTimeSelector
+  } = _ref;
   const dateStringFromProps = isDateTimeSelector ? dateTimeToDate(dateTime) : date;
   const deconstructedValues = deconstructValuesFromDateString(dateStringFromProps);
   const {
@@ -44,11 +45,12 @@ const useGetDestructuredDateValues = ({
 // based on wheter it's a dateTime picker
 // or a time picker (it's time picker when hideDate is true)
 
-const useGetDestructuredTimeValues = ({
-  time,
-  dateTime,
-  isDateTimeSelector
-}) => {
+const useGetDestructuredTimeValues = _ref2 => {
+  let {
+    time,
+    dateTime,
+    isDateTimeSelector
+  } = _ref2;
   const timeStringFromProps = isDateTimeSelector ? dateTimeToTime(dateTime) : time;
   const deconstructedValues = deconstructTimeValues(timeStringFromProps);
   const {
@@ -77,12 +79,13 @@ const useGetDestructuredTimeValues = ({
     announcedTimeValues
   }), [hours, minutes, meridiem, hoursNum, minutesNum, announcedHours, announcedMinutes, announcedMeridiem, announcedTimeValues]);
 };
-const useGetDestructuredValues = ({
-  date,
-  time,
-  dateTime,
-  isDateTimeSelector
-}) => {
+const useGetDestructuredValues = _ref3 => {
+  let {
+    date,
+    time,
+    dateTime,
+    isDateTimeSelector
+  } = _ref3;
   const {
     month,
     day,

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

@@ -1,6 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import CloseMedium from '@elliemae/ds-icons/CloseMedium';
+import { CloseMedium } from '@elliemae/ds-icons';
 import { DSIconColors } from '@elliemae/ds-icon';
 import { BUTTON_SIZES, BUTTON_VARIANT } from '@elliemae/ds-button';
 import { StyledClearButton } from '../Styleds.js';

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

@@ -9,10 +9,15 @@ const useClearButton = () => {
     withAnyPicker,
     withClearBtn,
     withAnyInputs,
+    isWithTimeInputs,
+    isWithDateInputs,
     isTimeSelector,
     hourInputRef,
     monthInputRef,
-    pickerButtonRef
+    pickerButtonRef,
+    meridiemInputRef,
+    yearInputRef,
+    setLatestInteractionRegion
   } = useContext(ControlledDateTimePickerContext);
   const focusFirstRegion = useCallback(() => {
     var _hourInputRef$current, _hourInputRef$current2, _monthInputRef$curren, _monthInputRef$curren2;
@@ -21,8 +26,9 @@ const useClearButton = () => {
   }, [withAnyInputs, isTimeSelector, hourInputRef, monthInputRef]);
   const onClearClick = useCallback(e => {
     handleClearAll(e);
+    setLatestInteractionRegion('clear-btn');
     focusFirstRegion();
-  }, [focusFirstRegion, handleClearAll]);
+  }, [focusFirstRegion, handleClearAll, setLatestInteractionRegion]);
   const onHomeKeyDown = useCallback(() => {
     focusFirstRegion();
   }, [focusFirstRegion]);
@@ -41,7 +47,13 @@ const useClearButton = () => {
     if (stopPropagationKeys.includes(key)) e.stopPropagation();
     if (key === 'Home') onHomeKeyDown();
     if (key === 'End') onEndKeyDown();
-  }, [onEndKeyDown, onHomeKeyDown]);
+
+    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);
+    }
+  }, [isWithDateInputs, isWithTimeInputs, meridiemInputRef, onEndKeyDown, onHomeKeyDown, withAnyInputs, yearInputRef]);
   return useMemo(() => ({
     onClearClick,
     onClearButtonKeyDown,