@elliemae/ds-controlled-form 2.0.0-alpha.1 → 2.0.0-alpha.13

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

@@ -7,7 +7,15 @@ var React = require('react');
 var ControlledDateRangePickerCTX = require('../ControlledDateRangePickerCTX.js');
 var ControlledDateTimePicker = require('../../controlled-date-time-picker/ControlledDateTimePicker.js');
 var ControlledDateTimePickerTypes = require('../../controlled-date-time-picker/ControlledDateTimePickerTypes.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/es.string.replace.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 require('@babel/runtime/helpers/defineProperty');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -30,7 +38,7 @@ const ControlledDateRangeToDate = () => {
       handleToDateChange
     }
   } = React.useContext(ControlledDateRangePickerCTX.ControlledDateRangePickerContext);
-  return /*#__PURE__*/_jsx__default['default'](ControlledDateTimePicker.DSControlledDateTimePicker, {
+  return /*#__PURE__*/_jsx__default["default"](ControlledDateTimePicker.DSControlledDateTimePicker, {
     type: ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.INPUTS,
     date: toDate,
     onDateChange: handleToDateChange,

package/cjs/controlled-date-time-picker/ControlledDateTimePicker.js

@@ -18,9 +18,9 @@ var _ControlledDateTimePi;
 
 const DSControlledDateTimePicker = props => {
   const ctx = useControlledDateTimePicker.useControlledDateTimePicker(props);
-  return /*#__PURE__*/_jsx__default['default'](ControlledDateTimePickerCTX.ControlledDateTimePickerContext.Provider, {
+  return /*#__PURE__*/_jsx__default["default"](ControlledDateTimePickerCTX.ControlledDateTimePickerContext.Provider, {
     value: ctx
-  }, void 0, _ControlledDateTimePi || (_ControlledDateTimePi = /*#__PURE__*/_jsx__default['default'](ControlledDateTimePickerContent.ControlledDateTimePickerContent, {})));
+  }, void 0, _ControlledDateTimePi || (_ControlledDateTimePi = /*#__PURE__*/_jsx__default["default"](ControlledDateTimePickerContent.ControlledDateTimePickerContent, {})));
 };
 
 const DSControlledDateTimePickerWithSchema = reactDesc.describe(DSControlledDateTimePicker);

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

@@ -13,6 +13,7 @@ const defaultReturnFalse = () => false; // const mockedStringStateSetter: React.
 
 const mockedSetLatestInteractionRegion = noop;
 const defaultProps = {
+  // changing default type requires changing default booleans (hideDate, withAnyInputs, etc...) in the context too
   type: ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL,
   dateTime: '',
   date: '',
@@ -39,7 +40,9 @@ const defaultProps = {
   onCalendarOpenFocusedDay: undefined,
   minutesInterval: 1,
   isClearable: false,
+  disabled: false,
   hasError: false,
+  autoFocus: false,
   preventCloseOnSelection: false,
   pickerFooterMsg: undefined
 };
@@ -68,6 +71,9 @@ const defaultContext = {
   prevMeridiemBtnRef: /*#__PURE__*/React.createRef(),
   currMeridiemBtnRef: /*#__PURE__*/React.createRef(),
   nextMeridiemBtnRef: /*#__PURE__*/React.createRef(),
+  firstSegmentRef: /*#__PURE__*/React.createRef(),
+  lastSegmentRef: /*#__PURE__*/React.createRef(),
+  ariaCurrentValueForInputs: '',
   dateStringFromProps: '',
   tempDateString: '__/__/____',
   // setDateString: mockedStringStateSetter,
@@ -76,6 +82,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,
@@ -92,14 +104,23 @@ const defaultContext = {
   isControllerOnly: false,
   isWithTimeWheelToo: true,
   isWithCalendarToo: true,
+  isWithDateInputs: true,
+  isWithDateInputsOnly: false,
+  isWithTimeInputs: true,
+  isWithTimeInputsOnly: false,
+  autoFocusMonthInput: false,
+  autoFocusHourInput: false,
+  autoFocusPrevMonthArrow: false,
+  autoFocusHourTimeWheel: false,
   shouldPreserveClearableSpace: false,
   latestInteractionRegion: '',
-  setLatestInteractionRegion: mockedSetLatestInteractionRegion
+  setLatestInteractionRegion: mockedSetLatestInteractionRegion,
+  onGlobalKeyDown: noop
 };
 /** Context for cross component communication */
 
 const ControlledDateTimePickerContext = /*#__PURE__*/React.createContext(defaultContext);
 
 exports.ControlledDateTimePickerContext = ControlledDateTimePickerContext;
-exports['default'] = ControlledDateTimePickerContext;
+exports["default"] = ControlledDateTimePickerContext;
 exports.defaultProps = defaultProps;

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

@@ -19,16 +19,43 @@ const ControlledDateTimePickerDatatestid = {
     CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-trigger-icon'
   },
   CALENDAR: {
+    PREV_YEAR: 'ds-controlled-date-time-picker-calendar-prev-year',
+    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'
+    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',
+    NEXT_YEAR: 'ds-controlled-date-time-picker-calendar-next-year'
   },
   TIMEWHEEL: {
+    PREV_HOUR: 'ds-controlled-date-time-picker-timewheel-prev-hour',
     HOUR: 'ds-controlled-date-time-picker-timewheel-hour',
-    SELECTED_HOUR: 'ds-controlled-date-time-picker-timewheel-selected-hour',
+    CURRENT_HOUR: 'ds-controlled-date-time-picker-timewheel-current-hour',
+    NEXT_HOUR: 'ds-controlled-date-time-picker-timewheel-next-hour',
+    PREV_MINUTE: 'ds-controlled-date-time-picker-timewheel-prev-minute',
     MINUTE: 'ds-controlled-date-time-picker-timewheel-minute',
-    SELECTED_MINUTE: 'ds-controlled-date-time-picker-timewheel-selected-minute',
+    CURRENT_MINUTE: 'ds-controlled-date-time-picker-timewheel-current-minute',
+    NEXT_MINUTE: 'ds-controlled-date-time-picker-timewheel-next-minute',
+    PREV_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-prev-meridiem',
     MERIDIEM: 'ds-controlled-date-time-picker-timewheel-meridiem',
-    SELECTED_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-selected-meridiem'
+    CURRENT_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-current-meridiem',
+    NEXT_MERIDIEM: 'ds-controlled-date-time-picker-timewheel-next-meridiem'
+  },
+  CONTEXTUAL_MENU: {
+    CALENDAR: 'ds-controlled-date-time-picker-calendar-context-content-wrapper',
+    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-context-content-wrapper',
+    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-context-content-wrapper'
+  },
+  CONTROLLER_COMPONENT: {
+    CALENDAR: 'ds-controlled-date-time-picker-calendar-controller-wrapper',
+    TIMEWHEEL: 'ds-controlled-date-time-picker-timewheel-controller-wrapper',
+    CALENDAR_TIMEWHEEL: 'ds-controlled-date-time-picker-calendar-timewheel-controller-wrapper'
   },
   CLEAR_BUTTON: 'ds-controlled-date-time-picker-clear-btn'
 };

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

@@ -3,13 +3,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var useGetPropsWithDefault = require('./useGetPropsWithDefault.js');
+var useGetDestructuredValues = require('./useGetDestructuredValues.js');
 var ControlledDateTimePickerTypes = require('../ControlledDateTimePickerTypes.js');
 var useValidateProps = require('./useValidateProps.js');
 var dateHelpers = require('../utils/dateHelpers.js');
 var timeHelpers = require('../utils/timeHelpers.js');
 var stringHelpers = require('../utils/stringHelpers.js');
+var constants = require('../utils/constants.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -18,7 +27,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 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__default['default'](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; }
+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__default["default"](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 useControlledDateTimePicker = props => {
   // if we detect wrong props configuration we throw meaningful errors
   useValidateProps.useValidateProps(props); // refs are used for "auto-advance" feature
@@ -27,8 +36,7 @@ const useControlledDateTimePicker = props => {
   const dayInputRef = React.useRef();
   const yearInputRef = React.useRef();
   const hourInputRef = React.useRef();
-  const minutesInputRef = React.useRef(); // const secondsInputRef = useRef<HTMLInputElement>();
-
+  const minutesInputRef = React.useRef();
   const meridiemInputRef = React.useRef();
   const clearButtonRef = React.useRef();
   const pickerButtonRef = React.useRef();
@@ -42,20 +50,19 @@ const useControlledDateTimePicker = props => {
   const nextHourBtnRef = React.useRef();
   const prevMinutesBtnRef = React.useRef();
   const currMinutesBtnRef = React.useRef();
-  const nextMinutesBtnRef = React.useRef(); // const prevSecondsBtnRef = useRef<HTMLButtonElement>();
-  // const currSecondsBtnRef = useRef<HTMLButtonElement>();
-  // const nextSecondsBtnRef = useRef<HTMLButtonElement>();
-
+  const nextMinutesBtnRef = React.useRef();
   const prevMeridiemBtnRef = React.useRef();
   const currMeridiemBtnRef = React.useRef();
   const nextMeridiemBtnRef = React.useRef();
   const propsWithDefaults = useGetPropsWithDefault.useGetDatePickerWithDefaultsProps(props);
+  const dataAttrs = dsPropsHelpers.getDataProps(props);
   const {
     type,
     getIsDisabledDay,
     getIsOutOfRangeDay,
     getIsDisabledTime,
     isClearable,
+    autoFocus,
     onDateChange: appOnDateChange,
     onDateTimeChange: appOnDateTimeChange,
     onTimeChange: appOnTimeChange,
@@ -64,7 +71,10 @@ const useControlledDateTimePicker = props => {
     onYearChange: appOnYearChange,
     onHourChange: appOnHourChange,
     onMinuteChange: appOnMinuteChange,
-    onMeridiemChange: appOnMeridiemChange
+    onMeridiemChange: appOnMeridiemChange,
+    date: appDate,
+    time: appTime,
+    dateTime: appDateTime
   } = propsWithDefaults;
   const dateStringFromProps = React.useMemo(() => propsWithDefaults.dateTime && propsWithDefaults.dateTime !== '' ? stringHelpers.dateTimeToDate(propsWithDefaults.dateTime) : propsWithDefaults.date && propsWithDefaults.date !== '' ? propsWithDefaults.date : '__/__/____', [propsWithDefaults.date, propsWithDefaults.dateTime]); // don't use tempDateString to trigger useEffect for onDateChange
   // that is an anti-pattern and leads to a lot of issue
@@ -84,21 +94,65 @@ const useControlledDateTimePicker = props => {
   const isDateSelector = type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.FULL || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.INPUTS || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY;
   const isTimeSelector = type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.FULL || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.INPUTS || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.PICKER || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.CONTROLLER_ONLY;
   const isDateTimeSelector = type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.INPUTS || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
-  const isControllerOnly = React.useMemo(() => type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.CONTROLLER_ONLY, [type]);
-  const isWithTimeWheelToo = React.useMemo(() => type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY, [type]);
-  const isWithCalendarToo = React.useMemo(() => type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY, [type]);
+  const isControllerOnly = type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.CONTROLLER_ONLY;
+  const isWithTimeWheelToo = type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
+  const isWithCalendarToo = type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.PICKER || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
   const withAnyInputs = !hideDate || !hideTime;
   const withAnyPicker = !hideDateTimePicker || !hideTimePicker || !hideDatePicker;
-  const withClearBtn = isClearable && withAnyInputs && (dateStringFromProps !== '__/__/____' && dateStringFromProps !== '' || timeStringFromProps !== '__:__ __' && timeStringFromProps !== ''); // or time is not "empty-ish"
+  const withClearBtn = isClearable && withAnyInputs && (dateStringFromProps !== '__/__/____' && dateStringFromProps !== '' || // date is not "empty-ish"
+  timeStringFromProps !== '__:__ __' && timeStringFromProps !== ''); // or time is not "empty-ish"
 
+  const isWithDateInputs = withAnyInputs && (isDateTimeSelector || isDateSelector);
+  const isWithDateInputsOnly = withAnyInputs && isDateSelector;
+  const isWithTimeInputs = withAnyInputs && (isDateTimeSelector || isTimeSelector);
+  const isWithTimeInputsOnly = withAnyInputs && isTimeSelector;
+  const autoFocusMonthInput = isWithDateInputs && autoFocus;
+  const autoFocusHourInput = isWithTimeInputsOnly && autoFocus;
+  const autoFocusPrevMonthArrow = isControllerOnly && autoFocus;
+  const autoFocusHourTimeWheel = isControllerOnly && isTimeSelector && autoFocus;
   const shouldPreserveClearableSpace = isClearable && withAnyInputs;
   const withAnyRightController = withAnyPicker || withClearBtn || shouldPreserveClearableSpace;
   const [latestInteractionRegion, setLatestInteractionRegion] = React.useState('');
-  const getDateMetaInfo = React.useCallback((newDateString = null, metaInfo = {}) => {
+  let firstSegmentRef = React.useRef();
+  if (isWithDateInputs) firstSegmentRef = monthInputRef;else if (isWithTimeInputs) firstSegmentRef = hourInputRef;else if (withAnyPicker) firstSegmentRef = pickerButtonRef;
+  let lastSegmentRef = React.useRef();
+  if (withAnyPicker) lastSegmentRef = pickerButtonRef;else if (withClearBtn) lastSegmentRef = clearButtonRef;else if (isWithTimeInputs) lastSegmentRef = meridiemInputRef;else if (isWithDateInputs) lastSegmentRef = yearInputRef;
+  const {
+    month,
+    day,
+    year,
+    monthNum,
+    dayNum,
+    yearNum,
+    announcedMonth,
+    announcedDay,
+    announcedYear,
+    announcedDateValues,
+    hours,
+    minutes,
+    meridiem,
+    hoursNum,
+    minutesNum,
+    announcedHours,
+    announcedMinutes,
+    announcedMeridiem,
+    announcedTimeValues
+  } = useGetDestructuredValues.useGetDestructuredValues({
+    date: appDate,
+    time: appTime,
+    dateTime: appDateTime,
+    isDateTimeSelector
+  });
+  const ariaCurrentValueForInputs = "current values: ".concat(isWithDateInputs ? "".concat(announcedDateValues) : '').concat(isDateTimeSelector ? ', ' : '').concat(isWithTimeInputs ? "".concat(announcedTimeValues) : '');
+  const getDateMetaInfo = React.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), dateHelpers.getValidationDateStringMetaInfo(finalDateString, getIsOutOfRangeDay, getIsDisabledDay));
   }, [tempDateString, getIsDisabledDay, getIsOutOfRangeDay]);
-  const getTimeMetaInfo = React.useCallback((newTimeString = null, metaInfo = {}) => {
+  const getTimeMetaInfo = React.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), timeHelpers.getValidationTimeStringMetaInfo(finalTimeString, getIsDisabledTime));
   }, [tempTimeString, getIsDisabledTime]);
@@ -111,7 +165,7 @@ const useControlledDateTimePicker = props => {
     appOnTimeChange(appTimeString, metaInfo); // don't do this on useEffect to avoid complete chaos
 
     setTimeString(newTimeString);
-    const newDateTimeString = `${newDateString} ${newTimeString}`;
+    const newDateTimeString = "".concat(newDateString, " ").concat(newTimeString);
 
     const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
       newDateString,
@@ -128,7 +182,7 @@ const useControlledDateTimePicker = props => {
     appOnDateChange(appDateString, metaInfo); // don't do this on useEffect to avoid complete chaos
 
     setTempDateString(newDateString);
-    const newDateTimeString = `${newDateString} ${tempTimeString}`;
+    const newDateTimeString = "".concat(newDateString, " ").concat(tempTimeString);
 
     const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(tempTimeString, metaInfo)), getDateMetaInfo(newDateString, metaInfo)), {}, {
       newDateString,
@@ -144,7 +198,7 @@ const useControlledDateTimePicker = props => {
     appOnTimeChange(appTimeString, metaInfo); // don't do this on useEffect to avoid complete chaos
 
     setTimeString(newTimeString);
-    const newDateTimeString = `${tempDateString} ${newTimeString}`;
+    const newDateTimeString = "".concat(tempDateString, " ").concat(newTimeString);
 
     const newMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, getTimeMetaInfo(newTimeString, metaInfo)), getDateMetaInfo(tempDateString, metaInfo)), {}, {
       newDateTimeString,
@@ -155,6 +209,99 @@ const useControlledDateTimePicker = props => {
     const appDateTimeString = stringHelpers.isEmptyDateTimeStringMask(newDateTimeString) ? '' : newDateTimeString;
     appOnDateTimeChange(appDateTimeString, newMetaInfo); // don't do this on useEffect to avoid complete chaos
   }, [appOnTimeChange, tempDateString, getTimeMetaInfo, getDateMetaInfo, appOnDateTimeChange]);
+  const handleChangeMonth = React.useCallback(function (newMonth, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newDateString = stringHelpers.getFormattedDateString({
+      month: newMonth,
+      day,
+      year
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnMonthChange(newMonth, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [day, year, getIsOutOfRangeDay, getIsDisabledDay, appOnMonthChange, handleChangeComposedDateString]);
+  const handleChangeDay = React.useCallback(function (newDay, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newDateString = stringHelpers.getFormattedDateString({
+      month,
+      day: newDay,
+      year
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnDayChange(newDay, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, year, getIsOutOfRangeDay, getIsDisabledDay, appOnDayChange, handleChangeComposedDateString]);
+  const handleChangeYear = React.useCallback(function (newYear, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newDateString = stringHelpers.getFormattedDateString({
+      month,
+      day,
+      year: newYear
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(newDateString, getIsOutOfRangeDay, getIsDisabledDay)), {}, {
+      newDateString
+    });
+
+    appOnYearChange(newYear, e, finalMetaInfo);
+    handleChangeComposedDateString(newDateString, finalMetaInfo);
+  }, [month, day, getIsOutOfRangeDay, getIsDisabledDay, appOnYearChange, handleChangeComposedDateString]);
+  const handleChangeHours = React.useCallback(function (newHours, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newTimeString = stringHelpers.getFormattedTimeString({
+      hours: newHours,
+      minutes,
+      // seconds,
+      meridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), timeHelpers.getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnHourChange(newHours, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [minutes, meridiem, getIsDisabledTime, appOnHourChange, handleChangeComposedTimeString]);
+  const handleChangeMinutes = React.useCallback(function (newMinutes, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newTimeString = stringHelpers.getFormattedTimeString({
+      hours,
+      minutes: newMinutes,
+      // seconds,
+      meridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), timeHelpers.getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnMinuteChange(newMinutes, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [hours, meridiem, getIsDisabledTime, appOnMinuteChange, handleChangeComposedTimeString]);
+  const handleChangeMeridiem = React.useCallback(function (newMeridiem, e) {
+    let metaInfo = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : constants.defaultMetaInfo;
+    const newTimeString = stringHelpers.getFormattedTimeString({
+      hours,
+      minutes,
+      // seconds,
+      meridiem: newMeridiem
+    });
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread({}, metaInfo), timeHelpers.getValidationTimeStringMetaInfo(newTimeString, getIsDisabledTime)), {}, {
+      newTimeString
+    });
+
+    appOnMeridiemChange(newMeridiem, e, finalMetaInfo);
+    handleChangeComposedTimeString(newTimeString, finalMetaInfo);
+  }, [hours, minutes, getIsDisabledTime, appOnMeridiemChange, handleChangeComposedTimeString]);
   const handleClearAll = React.useCallback(e => {
     const metaInfo = {
       isAutomaticFillTrigger: false,
@@ -166,30 +313,64 @@ const useControlledDateTimePicker = props => {
 
     const datePartsChangesMetainfo = _objectSpread({}, metaInfo);
 
-    delete datePartsChangesMetainfo.newDateTimeString;
-    delete datePartsChangesMetainfo.newTimeString;
-
     const timePartsChangesMetainfo = _objectSpread({}, metaInfo);
 
-    delete timePartsChangesMetainfo.newDateTimeString;
-    delete timePartsChangesMetainfo.newDateString;
-    handleChangeComposedDateTimeString('__/__/____', '__:__ __', metaInfo);
-    appOnMonthChange('', e, datePartsChangesMetainfo);
-    appOnDayChange('', e, datePartsChangesMetainfo);
-    appOnYearChange('', e, datePartsChangesMetainfo);
-    appOnHourChange('', e, timePartsChangesMetainfo);
-    appOnMinuteChange('', e, timePartsChangesMetainfo);
-    appOnMeridiemChange('', e, timePartsChangesMetainfo);
-    setLatestInteractionRegion('clear-btn');
-  }, [appOnDayChange, appOnHourChange, appOnMeridiemChange, appOnMinuteChange, appOnMonthChange, appOnYearChange, handleChangeComposedDateTimeString, setLatestInteractionRegion]);
-  const ctx = React__default['default'].useMemo(() => ({
-    props: propsWithDefaults,
+    if (isDateSelector || isDateTimeSelector) {
+      delete datePartsChangesMetainfo.newDateTimeString;
+      delete datePartsChangesMetainfo.newTimeString;
+      appOnMonthChange('', e, datePartsChangesMetainfo);
+      appOnDayChange('', e, datePartsChangesMetainfo);
+      appOnYearChange('', e, datePartsChangesMetainfo);
+    }
+
+    if (isTimeSelector || isDateTimeSelector) {
+      delete timePartsChangesMetainfo.newDateTimeString;
+      delete timePartsChangesMetainfo.newDateString;
+      appOnHourChange('', e, timePartsChangesMetainfo);
+      appOnMinuteChange('', e, timePartsChangesMetainfo);
+      appOnMeridiemChange('', e, timePartsChangesMetainfo);
+    }
+
+    if (isDateTimeSelector) handleChangeComposedDateTimeString('__/__/____', '__:__ __', metaInfo);
+    if (isDateSelector) handleChangeComposedDateString('__/__/____', datePartsChangesMetainfo);
+    if (isTimeSelector) handleChangeComposedTimeString('__:__ __', timePartsChangesMetainfo);
+  }, [appOnDayChange, appOnHourChange, appOnMeridiemChange, appOnMinuteChange, appOnMonthChange, appOnYearChange, handleChangeComposedDateString, handleChangeComposedDateTimeString, handleChangeComposedTimeString, isDateSelector, isDateTimeSelector, isTimeSelector]);
+  const onFillWithCurrentDateKeys = React.useCallback(function () {
+    let metaInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      isAutomaticFillTrigger: true
+    };
+    const now = new Date();
+    const nowDateString = dateHelpers.getDateStringFromDay(now);
+    const nowTimeString = dateHelpers.getTimeStringFromDay(now);
+
+    const finalMetaInfo = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaInfo), dateHelpers.getValidationDateStringMetaInfo(nowDateString, getIsOutOfRangeDay, getIsDisabledDay)), timeHelpers.getValidationTimeStringMetaInfo(nowTimeString, getIsDisabledTime)), {}, {
+      newDateString: nowDateString
+    });
+
+    handleChangeComposedDateTimeString(nowDateString, nowTimeString, finalMetaInfo);
+  }, [getIsDisabledDay, getIsDisabledTime, getIsOutOfRangeDay, handleChangeComposedDateTimeString]);
+  const onGlobalKeyDown = React.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__default["default"].useMemo(() => ({
+    props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
+      dataAttrs
+    }),
     monthInputRef,
     dayInputRef,
     yearInputRef,
     hourInputRef,
     minutesInputRef,
-    // secondsInputRef,
     meridiemInputRef,
     clearButtonRef,
     pickerButtonRef,
@@ -208,6 +389,8 @@ const useControlledDateTimePicker = props => {
     currMeridiemBtnRef,
     nextMeridiemBtnRef,
     dateStringFromProps,
+    firstSegmentRef,
+    lastSegmentRef,
     tempDateString,
     setTempDateString,
     tempTimeString,
@@ -215,6 +398,12 @@ const useControlledDateTimePicker = props => {
     handleChangeComposedDateTimeString,
     handleChangeComposedDateString,
     handleChangeComposedTimeString,
+    handleChangeMonth,
+    handleChangeDay,
+    handleChangeYear,
+    handleChangeHours,
+    handleChangeMinutes,
+    handleChangeMeridiem,
     handleClearAll,
     hideDate,
     hideTime,
@@ -227,14 +416,43 @@ const useControlledDateTimePicker = props => {
     isControllerOnly,
     isWithTimeWheelToo,
     isWithCalendarToo,
+    isWithDateInputs,
+    isWithDateInputsOnly,
+    isWithTimeInputs,
+    isWithTimeInputsOnly,
+    autoFocusMonthInput,
+    autoFocusHourInput,
+    autoFocusPrevMonthArrow,
+    autoFocusHourTimeWheel,
     latestInteractionRegion,
     setLatestInteractionRegion,
     withAnyInputs,
     withAnyPicker,
     withClearBtn,
     withAnyRightController,
-    shouldPreserveClearableSpace
-  }), [propsWithDefaults, dateStringFromProps, tempDateString, tempTimeString, handleChangeComposedDateTimeString, handleChangeComposedDateString, handleChangeComposedTimeString, handleClearAll, hideDate, hideTime, hideDateTimePicker, hideDatePicker, hideTimePicker, isDateSelector, isTimeSelector, isDateTimeSelector, isControllerOnly, isWithTimeWheelToo, isWithCalendarToo, latestInteractionRegion, withAnyInputs, withAnyPicker, withClearBtn, withAnyRightController, shouldPreserveClearableSpace] // refs are mutable so we don't need to listen to them
+    shouldPreserveClearableSpace,
+    month,
+    day,
+    year,
+    monthNum,
+    dayNum,
+    yearNum,
+    announcedMonth,
+    announcedDay,
+    announcedYear,
+    announcedDateValues,
+    hours,
+    minutes,
+    meridiem,
+    hoursNum,
+    minutesNum,
+    announcedHours,
+    announcedMinutes,
+    announcedMeridiem,
+    announcedTimeValues,
+    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;
 };