@elliemae/ds-controlled-form 2.4.1-rc.7 → 2.4.1-rc.8

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

@@ -0,0 +1,173 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var ControlledDateTimePickerTypes = require('../ControlledDateTimePickerTypes.js');
+var typeGuards = require('../utils/typeGuards.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const getDateTimeFlags = props => {
+  const {
+    type,
+    isClearable,
+    dateTime,
+    autoFocus
+  } = props;
+  const constants = {
+    hideDatePicker: true,
+    hideTimePicker: true,
+    isDateSelector: false,
+    isTimeSelector: false,
+    isDateTimeSelector: true,
+    isWithDateInputsOnly: false,
+    isWithTimeInputsOnly: false,
+    autoFocusHourInput: false,
+    autoFocusHourTimeWheel: false
+  };
+  const withAnyInputs = type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.FULL || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.INPUTS;
+  const hideDateTimePicker = 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 isControllerOnly = type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE_TIME.CONTROLLER_ONLY;
+  const withAnyPicker = !hideDateTimePicker;
+  const withClearBtn = withAnyInputs && isClearable && dateTime !== '' && dateTime !== '__/__/____ __:__ __';
+  const shouldPreserveClearableSpace = isClearable && withAnyInputs;
+
+  const finalFlags = _objectSpread({
+    hideDate: !withAnyInputs,
+    hideTime: !withAnyInputs,
+    hideDateTimePicker,
+    isControllerOnly,
+    isWithTimeWheelToo: !hideDateTimePicker,
+    isWithCalendarToo: !hideDateTimePicker,
+    withAnyInputs,
+    withAnyPicker,
+    withClearBtn,
+    isWithDateInputs: withAnyInputs,
+    isWithTimeInputs: withAnyInputs,
+    autoFocusMonthInput: withAnyInputs && autoFocus,
+    autoFocusPrevMonthArrow: isControllerOnly && autoFocus,
+    shouldPreserveClearableSpace,
+    withAnyRightController: withAnyPicker || withClearBtn || shouldPreserveClearableSpace
+  }, constants);
+
+  return finalFlags;
+};
+
+const getDateFlags = props => {
+  const {
+    type,
+    isClearable,
+    date,
+    autoFocus
+  } = props;
+  const constants = {
+    isDateSelector: true,
+    hideTime: true,
+    hideDateTimePicker: true,
+    hideTimePicker: true,
+    isTimeSelector: false,
+    isDateTimeSelector: false,
+    isWithCalendarToo: false,
+    isWithTimeWheelToo: false,
+    isWithTimeInputs: false,
+    isWithTimeInputsOnly: false,
+    autoFocusHourTimeWheel: false,
+    autoFocusHourInput: false
+  };
+  const withAnyInputs = type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.FULL || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.INPUTS;
+  const hideDatePicker = type !== ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.FULL && type !== ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.PICKER && type !== ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY;
+  const isControllerOnly = type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.DATE.CONTROLLER_ONLY;
+  const withAnyPicker = !hideDatePicker;
+  const withClearBtn = withAnyInputs && isClearable && date !== '' && date !== '__/__/____';
+  const shouldPreserveClearableSpace = isClearable && withAnyInputs;
+
+  const finalFlags = _objectSpread({
+    hideDate: !withAnyInputs,
+    hideDatePicker,
+    isControllerOnly,
+    withAnyInputs,
+    withAnyPicker,
+    withClearBtn,
+    isWithDateInputs: withAnyInputs,
+    isWithDateInputsOnly: withAnyInputs,
+    autoFocusMonthInput: withAnyInputs && autoFocus,
+    autoFocusPrevMonthArrow: isControllerOnly && autoFocus,
+    shouldPreserveClearableSpace,
+    withAnyRightController: withAnyPicker || withClearBtn || shouldPreserveClearableSpace
+  }, constants);
+
+  return finalFlags;
+};
+
+const getTimeFlags = props => {
+  const {
+    type,
+    isClearable,
+    time,
+    autoFocus
+  } = props;
+  const constants = {
+    hideDate: true,
+    hideDateTimePicker: true,
+    hideDatePicker: true,
+    isDateSelector: false,
+    isDateTimeSelector: false,
+    isWithDateInputs: false,
+    isWithDateInputsOnly: false,
+    isTimeSelector: true,
+    isWithTimeWheelToo: false,
+    isWithCalendarToo: false,
+    autoFocusMonthInput: false,
+    autoFocusPrevMonthArrow: false
+  };
+  const withAnyInputs = type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.FULL || type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.INPUTS;
+  const hideTimePicker = type !== ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.FULL && type !== ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.PICKER && type !== ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.CONTROLLER_ONLY;
+  const isControllerOnly = type === ControlledDateTimePickerTypes.CONTROLLED_DATE_TIME_PICKER_TYPES.TIME.CONTROLLER_ONLY;
+  const withClearBtn = withAnyInputs && isClearable && time !== '' && time !== '__:__ __';
+  const shouldPreserveClearableSpace = isClearable && withAnyInputs;
+  const withAnyPicker = !hideTimePicker;
+
+  const finalFlags = _objectSpread({
+    hideTime: !withAnyInputs,
+    hideTimePicker,
+    isControllerOnly,
+    withAnyInputs,
+    withAnyPicker,
+    withClearBtn,
+    isWithTimeInputs: withAnyInputs,
+    isWithTimeInputsOnly: withAnyInputs,
+    autoFocusHourInput: withAnyInputs && autoFocus,
+    autoFocusHourTimeWheel: isControllerOnly && autoFocus,
+    shouldPreserveClearableSpace,
+    withAnyRightController: withAnyPicker || withClearBtn || shouldPreserveClearableSpace
+  }, constants);
+
+  return finalFlags;
+};
+
+const useGetFlags = props => React.useMemo(() => {
+  if (typeGuards.getIsDateTime(props)) {
+    return getDateTimeFlags(props);
+  }
+
+  if (typeGuards.getIsDate(props)) {
+    return getDateFlags(props);
+  }
+
+  return getTimeFlags(props);
+}, [props]);
+
+exports.useGetFlags = useGetFlags;

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

@@ -0,0 +1,101 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var typeGuards = require('../utils/typeGuards.js');
+
+/* eslint-disable max-lines */
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+const defaultReturnFalse = () => false;
+
+const useGetPropsBasedOnType = propsWithDefaults => {
+  const isDateTime = typeGuards.getIsDateTime(propsWithDefaults);
+  const isDate = typeGuards.getIsDate(propsWithDefaults);
+  const isTime = typeGuards.getIsTime(propsWithDefaults);
+  /* -------------------------- -------------- --------------------------*/
+
+  /* -------------------------- DATE OPTIONALS --------------------------*/
+
+  /* -------------------------- -------------- --------------------------*/
+
+  const getIsDisabledDay = (isDateTime || isDate) && propsWithDefaults.getIsDisabledDay ? propsWithDefaults.getIsDisabledDay : defaultReturnFalse;
+  const getIsOutOfRangeDay = (isDateTime || isDate) && propsWithDefaults.getIsOutOfRangeDay ? propsWithDefaults.getIsOutOfRangeDay : defaultReturnFalse;
+  const appOnMonthChange = (isDateTime || isDate) && propsWithDefaults.onMonthChange ? propsWithDefaults.onMonthChange : noop;
+  const appOnDayChange = (isDateTime || isDate) && propsWithDefaults.onDayChange ? propsWithDefaults.onDayChange : noop;
+  const appOnYearChange = (isDateTime || isDate) && propsWithDefaults.onYearChange ? propsWithDefaults.onYearChange : noop;
+  const emptyPickerStartingMonthDefault = "".concat(new Date().getMonth() + 1, "/__/").concat(new Date().getFullYear());
+  const emptyPickerStartingMonth = (isDateTime || isDate) && propsWithDefaults.emptyPickerStartingMonth ? propsWithDefaults.emptyPickerStartingMonth : emptyPickerStartingMonthDefault;
+  const onCalendarOpenFocusedDay = (isDateTime || isDate) && propsWithDefaults.onCalendarOpenFocusedDay ? propsWithDefaults.onCalendarOpenFocusedDay : undefined;
+  /* -------------------------- -------------- --------------------------*/
+
+  /* -------------------------- TIME OPTIONALS --------------------------*/
+
+  /* -------------------------- -------------- --------------------------*/
+
+  const getIsDisabledTime = (isDateTime || isTime) && propsWithDefaults.getIsDisabledTime ? propsWithDefaults.getIsDisabledTime : defaultReturnFalse;
+  const appOnHourChange = (isDateTime || isTime) && propsWithDefaults.onHourChange ? propsWithDefaults.onHourChange : noop;
+  const appOnMinuteChange = (isDateTime || isTime) && propsWithDefaults.onMinuteChange ? propsWithDefaults.onMinuteChange : noop;
+  const appOnMeridiemChange = (isDateTime || isTime) && propsWithDefaults.onMeridiemChange ? propsWithDefaults.onMeridiemChange : noop;
+  const minutesInterval = (isDateTime || isTime) && propsWithDefaults.minutesInterval ? propsWithDefaults.minutesInterval : 1;
+  const onTimeWheelOpenStartingTime = (isDateTime || isTime) && propsWithDefaults.onTimeWheelOpenStartingTime ? propsWithDefaults.onTimeWheelOpenStartingTime : '01:00 AM';
+  /* --------- ------------------------------------ ---------------------*/
+
+  /* --------- SPECIFIC REQUIRED DATETIME OPTIONALS ---------------------*/
+
+  /* --------- ------------------------------------ ---------------------*/
+
+  const appOnDateChange = (isDateTime || isDate) && propsWithDefaults.onDateChange ? propsWithDefaults.onDateChange : noop;
+  const appOnTimeChange = (isDateTime || isTime) && propsWithDefaults.onTimeChange ? propsWithDefaults.onTimeChange : noop;
+  /* ---------------------- ---------------------- ----------------------*/
+
+  /* ---------------------- DATE-RELATED OPTIONALS ----------------------*/
+
+  /* ---------------------- ---------------------- ----------------------*/
+
+  const getIsStartRangeDay = (isDateTime || isDate) && propsWithDefaults.getIsStartRangeDay ? propsWithDefaults.getIsStartRangeDay : noop;
+  const getIsDayInRange = (isDateTime || isDate) && propsWithDefaults.getIsDayInRange ? propsWithDefaults.getIsDayInRange : noop;
+  const getIsEndRangeDay = (isDateTime || isDate) && propsWithDefaults.getIsEndRangeDay ? propsWithDefaults.getIsEndRangeDay : noop;
+  /* --------------------- ----------------------- ------------------------*/
+
+  /* --------------------- TYPE SPECIFIC REQUIREDS ------------------------*/
+
+  /* --------------------- ----------------------- ------------------------*/
+
+  const appDate = isDate ? propsWithDefaults.date : '';
+  const appTime = isTime ? propsWithDefaults.time : '';
+  const appDateTime = isDateTime ? propsWithDefaults.dateTime : '';
+  const appOnDateTimeChange = isDateTime ? propsWithDefaults.onDateTimeChange : noop;
+  return React.useMemo(() => ({
+    getIsDisabledDay,
+    getIsOutOfRangeDay,
+    getIsStartRangeDay,
+    getIsDayInRange,
+    getIsEndRangeDay,
+    appOnDateChange,
+    appOnMonthChange,
+    appOnDayChange,
+    appOnYearChange,
+    appDate,
+    getIsDisabledTime,
+    appOnTimeChange,
+    appOnHourChange,
+    appOnMinuteChange,
+    appOnMeridiemChange,
+    appTime,
+    appDateTime,
+    appOnDateTimeChange,
+    emptyPickerStartingMonth,
+    onCalendarOpenFocusedDay,
+    minutesInterval,
+    onTimeWheelOpenStartingTime,
+    isDate,
+    isTime,
+    isDateTime
+  }), [getIsDisabledDay, getIsOutOfRangeDay, getIsStartRangeDay, getIsDayInRange, getIsEndRangeDay, appOnDateChange, appOnMonthChange, appOnDayChange, appOnYearChange, appDate, getIsDisabledTime, appOnTimeChange, appOnHourChange, appOnMinuteChange, appOnMeridiemChange, appTime, appDateTime, appOnDateTimeChange, emptyPickerStartingMonth, onCalendarOpenFocusedDay, minutesInterval, onTimeWheelOpenStartingTime, isDate, isTime, isDateTime]);
+};
+
+exports.useGetPropsBasedOnType = useGetPropsBasedOnType;

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

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
-var ControlledDateTimePickerCTX = require('../ControlledDateTimePickerCTX.js');
+var propTypes = require('../propTypes.js');
 
-// we have to merge the "default" nested default values with what the user gives us...
-const useGetDatePickerWithDefaultsProps = props => dsPropsHelpers.useMemoMergePropsWithDefault(props, ControlledDateTimePickerCTX.defaultProps);
+const useGetDatePickerWithDefaultsProps = props => dsPropsHelpers.useMemoMergePropsWithDefault(props, propTypes.defaultProps);
 
 exports.useGetDatePickerWithDefaultsProps = useGetDatePickerWithDefaultsProps;

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

@@ -0,0 +1,86 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/* eslint-disable complexity */
+const useGetReferences = _ref => {
+  let {
+    isWithDateInputs,
+    isWithTimeInputs,
+    withAnyPicker,
+    withClearBtn
+  } = _ref;
+  // refs are used for "auto-advance" feature
+  const monthInputRef = React.useRef(null);
+  const dayInputRef = React.useRef(null);
+  const yearInputRef = React.useRef(null);
+  const hourInputRef = React.useRef(null);
+  const minutesInputRef = React.useRef(null);
+  const meridiemInputRef = React.useRef(null);
+  const clearButtonRef = React.useRef(null);
+  const pickerButtonRef = React.useRef(null);
+  const prevYearBtnRef = React.useRef(null);
+  const prevMonthBtnRef = React.useRef(null);
+  const nextMonthBtnRef = React.useRef(null);
+  const nextYearBtnRef = React.useRef(null);
+  const calendarDaysWrapperRef = React.useRef(null);
+  const prevHourBtnRef = React.useRef(null);
+  const currHourBtnRef = React.useRef(null);
+  const nextHourBtnRef = React.useRef(null);
+  const prevMinutesBtnRef = React.useRef(null);
+  const currMinutesBtnRef = React.useRef(null);
+  const nextMinutesBtnRef = React.useRef(null);
+  const prevMeridiemBtnRef = React.useRef(null);
+  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]);
+  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]);
+  return React.useMemo(() => ({
+    monthInputRef,
+    dayInputRef,
+    yearInputRef,
+    hourInputRef,
+    minutesInputRef,
+    meridiemInputRef,
+    clearButtonRef,
+    pickerButtonRef,
+    prevYearBtnRef,
+    prevMonthBtnRef,
+    nextMonthBtnRef,
+    nextYearBtnRef,
+    calendarDaysWrapperRef,
+    prevHourBtnRef,
+    currHourBtnRef,
+    nextHourBtnRef,
+    prevMinutesBtnRef,
+    currMinutesBtnRef,
+    nextMinutesBtnRef,
+    prevMeridiemBtnRef,
+    currMeridiemBtnRef,
+    nextMeridiemBtnRef,
+    firstSegmentRef,
+    lastSegmentRef,
+    firstFragmentRefUpdateDeps,
+    lastFragmentRefUpdateDeps
+  }), [firstFragmentRefUpdateDeps, lastFragmentRefUpdateDeps] // if we remove this last/first segment won't work
+  );
+};
+
+exports.useGetReferences = useGetReferences;

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

@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var dateHelpers = require('../utils/dateHelpers.js');
+var timeHelpers = require('../utils/timeHelpers.js');
+var stringHelpers = require('../utils/stringHelpers.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const useGlobalKeyHandlers = _ref => {
+  let {
+    propsBasedOnType,
+    changeHandlers,
+    DOMRefs,
+    flags
+  } = _ref;
+  const {
+    getIsOutOfRangeDay,
+    getIsDisabledDay,
+    getIsDisabledTime,
+    appOnMonthChange,
+    appOnDayChange,
+    appOnYearChange,
+    appOnHourChange,
+    appOnMinuteChange,
+    appOnMeridiemChange
+  } = propsBasedOnType;
+  const {
+    handleChangeComposedDateTimeString,
+    handleClearAll
+  } = changeHandlers;
+  const {
+    lastSegmentRef,
+    clearButtonRef
+  } = DOMRefs;
+  const {
+    shouldPreserveClearableSpace
+  } = flags;
+  const onFillWithCurrentDateKeys = React.useCallback(function (e) {
+    let metaInfo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      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
+    });
+
+    const {
+      month,
+      day,
+      year
+    } = stringHelpers.deconstructValuesFromDateString(nowDateString);
+    appOnMonthChange(month, e, metaInfo);
+    appOnDayChange(day, e, metaInfo);
+    appOnYearChange(year, e, metaInfo);
+    const {
+      hours,
+      minutes,
+      meridiem
+    } = stringHelpers.deconstructValuesFromTimeString(nowTimeString);
+    appOnHourChange(hours, e, metaInfo);
+    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]);
+  const onGlobalKeyDown = React.useCallback(e => {
+    const {
+      key,
+      ctrlKey,
+      metaKey
+    } = e;
+
+    if ((ctrlKey || metaKey) && key === ';') {
+      onFillWithCurrentDateKeys(e);
+    }
+
+    if ((ctrlKey || metaKey) && (key === 'Delete' || key === 'Backspace')) handleClearAll(e);
+  }, [handleClearAll, onFillWithCurrentDateKeys]);
+  return React.useMemo(() => ({
+    onFillWithCurrentDateKeys,
+    onGlobalKeyDown
+  }), [onFillWithCurrentDateKeys, onGlobalKeyDown]);
+};
+
+exports.useGlobalKeyHandlers = useGlobalKeyHandlers;

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

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var typeGuards = require('../utils/typeGuards.js');
+var stringHelpers = require('../utils/stringHelpers.js');
+
+const useRelevantValueFromProps = props => {
+  const dateStringFromProps = React.useMemo(() => {
+    if (typeGuards.getIsDateTime(props)) return props.dateTime !== '' ? stringHelpers.dateTimeToDate(props.dateTime) : '__/__/____';
+    if (typeGuards.getIsDate(props)) return props.date !== '' ? props.date : '__/__/____';
+    return '__/__/____';
+  }, [props]);
+  const timeStringFromProps = React.useMemo(() => {
+    if (typeGuards.getIsDateTime(props)) return props.dateTime !== '' ? stringHelpers.dateTimeToTime(props.dateTime) : '__:__ __';
+    if (typeGuards.getIsTime(props)) return props.time !== '' ? props.time : '__:__ __';
+    return '__:__ __';
+  }, [props]); // don't use tempDateString to trigger useEffect for onDateChange
+  // that is an anti-pattern and leads to a lot of issue
+  // if you don't believe me, check date-time-picker v1 which is doing it
+
+  const [tempDateString, setTempDateString] = React.useState(dateStringFromProps); // don't use tempTimeString to trigger useEffect for onTimeChange
+  // that is an anti-pattern and leads to a lot of issue
+  // if you don't believe me, check date-time-picker v1 which is doing it
+
+  const [tempTimeString, setTimeString] = React.useState(timeStringFromProps);
+  return React.useMemo(() => ({
+    dateStringFromProps,
+    timeStringFromProps,
+    tempDateString,
+    setTempDateString,
+    tempTimeString,
+    setTimeString
+  }), [dateStringFromProps, tempDateString, tempTimeString, timeStringFromProps]);
+};
+
+exports.useRelevantValueFromProps = useRelevantValueFromProps;

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ControlledDateTimePickerTypes = require('../ControlledDateTimePickerTypes.js');
 var stringHelpers = require('../utils/stringHelpers.js');
 var numberHelpers = require('../utils/numberHelpers.js');
+var typeGuards = require('../utils/typeGuards.js');
 
-/* eslint-disable max-len */
+/* eslint-disable max-statements */
 const PREPEND = "ControlledDateTimePicker:\n  Invalid configuration detected::\n  \n    ";
 const NOT_A_DEFECT = ''; // '\n\n\t\tThis is not a defect, please check\n\n\t\thttps://qa.dimsum.rd.elliemae.io/?path=/story/components-desktop-components-d-controlledform-date-time-picker--basic\n\n\t\tfor instructions on how to use the component correctly\n\n';
 
@@ -25,15 +25,15 @@ const throwInvalidTimerror = invalidValue => {
 };
 
 const throwUncontrolledDateError = (date, onDateChange) => {
-  throw new Error("".concat(PREPEND, "you are trying to use a date selector while providing a non-string \"date\" or providing a non-function to \"onDateChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    ").concat(date, "(").concat(typeof date, ")\n    ").concat(onDateChange, "(").concat(typeof onDateChange, ")\n  ").concat(NOT_A_DEFECT));
+  throw new Error("".concat(PREPEND, "you are trying to use a date selector while providing a non-string \"date\" or providing a non-function to \"onDateChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    date: ").concat(date, "(").concat(typeof date, ")\n    onDateChange: (").concat(typeof onDateChange, ")\n  ").concat(NOT_A_DEFECT));
 };
 
 const throwUncontrolledTimeError = (time, onTimeChange) => {
-  throw new Error("".concat(PREPEND, "you are trying to use a time selector while providing a non-string \"time\" or providing a non-function to \"onTimeChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    ").concat(time, "(").concat(typeof time, ")\n    ").concat(onTimeChange, "(").concat(typeof onTimeChange, ")\n  ").concat(NOT_A_DEFECT));
+  throw new Error("".concat(PREPEND, "you are trying to use a time selector while providing a non-string \"time\" or providing a non-function to \"onTimeChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    time: ").concat(time, "(").concat(typeof time, ")\n    onTimeChange: (").concat(typeof onTimeChange, ")\n  ").concat(NOT_A_DEFECT));
 };
 
 const throwUncontrolledDateTimeError = (dateTime, onDateTimeChange) => {
-  throw new Error("".concat(PREPEND, "you are trying to use a date-time selector while providing a non-string \"dateTime\" or providing a non-function to \"onDateTimeChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    ").concat(dateTime, "(").concat(typeof dateTime, ")\n    ").concat(onDateTimeChange, "(").concat(typeof onDateTimeChange, ")\n  ").concat(NOT_A_DEFECT));
+  throw new Error("".concat(PREPEND, "you are trying to use a date-time selector while providing a non-string \"dateTime\" or providing a non-function to \"onDateTimeChange\"\n  the full-controlled pattern must be used\n\tcheck https://reactjs.org/docs/forms.html#controlled-components for more informations\n\n  Received:\n    dateTime: ").concat(dateTime, "(").concat(typeof dateTime, ")\n    onDateTimeChange: (").concat(typeof onDateTimeChange, ")\n  ").concat(NOT_A_DEFECT));
 };
 
 const throwInvalidEmptyPickerStartingMonthError = emptyPickerStartingMonth => {
@@ -45,55 +45,60 @@ const throwInvalidOnCalendarOpenFocusedDayError = onCalendarOpenFocusedDay => {
 };
 
 const useValidateProps = props => {
-  const {
-    type,
-    dateTime,
-    date,
-    time,
-    onDateChange,
-    onTimeChange,
-    onDateTimeChange,
-    emptyPickerStartingMonth,
-    onCalendarOpenFocusedDay
-  } = 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;
-  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;
-  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; // validate generic use-cases
-
-  if (emptyPickerStartingMonth) {
+  // validate date-related props
+  if (typeGuards.getIsDateTime(props) || typeGuards.getIsDate(props)) {
     const {
-      month: stringMonthVal,
-      year: stringYearVal
-    } = stringHelpers.deconstructValuesFromDateString(emptyPickerStartingMonth);
-    const monthNum = numberHelpers.convertToPositiveNumberIfPossible(stringMonthVal);
-    const yearNum = numberHelpers.convertToPositiveNumberIfPossible(stringYearVal);
-    if (monthNum <= 0 || monthNum >= 13 || yearNum <= 0 || yearNum > 9999) throwInvalidEmptyPickerStartingMonthError(emptyPickerStartingMonth);
-  }
-
-  if (onCalendarOpenFocusedDay) {
-    const {
-      month: stringMonthVal,
-      day: stringDayVal,
-      year: stringYearVal
-    } = stringHelpers.deconstructValuesFromDateString(onCalendarOpenFocusedDay);
-    const monthNum = numberHelpers.convertToPositiveNumberIfPossible(stringMonthVal);
-    const dayNum = numberHelpers.convertToPositiveNumberIfPossible(stringDayVal);
-    const yearNum = numberHelpers.convertToPositiveNumberIfPossible(stringYearVal);
-    if (monthNum <= 0 || monthNum >= 13 || dayNum <= 0 || dayNum >= 31 || yearNum <= 0 || yearNum > 9999) throwInvalidOnCalendarOpenFocusedDayError(onCalendarOpenFocusedDay);
+      emptyPickerStartingMonth,
+      onCalendarOpenFocusedDay
+    } = props; // validate generic use-cases
+
+    if (emptyPickerStartingMonth) {
+      const {
+        month: stringMonthVal,
+        year: stringYearVal
+      } = stringHelpers.deconstructValuesFromDateString(emptyPickerStartingMonth);
+      const monthNum = numberHelpers.convertToPositiveNumberIfPossible(stringMonthVal);
+      const yearNum = numberHelpers.convertToPositiveNumberIfPossible(stringYearVal);
+      if (monthNum <= 0 || monthNum >= 13 || yearNum <= 0 || yearNum > 9999) throwInvalidEmptyPickerStartingMonthError(emptyPickerStartingMonth);
+    }
+
+    if (onCalendarOpenFocusedDay) {
+      const {
+        month: stringMonthVal,
+        day: stringDayVal,
+        year: stringYearVal
+      } = stringHelpers.deconstructValuesFromDateString(onCalendarOpenFocusedDay);
+      const monthNum = numberHelpers.convertToPositiveNumberIfPossible(stringMonthVal);
+      const dayNum = numberHelpers.convertToPositiveNumberIfPossible(stringDayVal);
+      const yearNum = numberHelpers.convertToPositiveNumberIfPossible(stringYearVal);
+      if (monthNum <= 0 || monthNum >= 13 || dayNum <= 0 || dayNum >= 31 || yearNum <= 0 || yearNum > 9999) throwInvalidOnCalendarOpenFocusedDayError(onCalendarOpenFocusedDay);
+    }
   } // validate full datetime cases
 
 
-  if (isDateTimeSelector) {
+  if (typeGuards.getIsDateTime(props)) {
+    const {
+      dateTime,
+      onDateTimeChange
+    } = props;
     if (typeof dateTime !== 'string' || typeof onDateTimeChange !== 'function') throwUncontrolledDateTimeError(dateTime, onDateTimeChange);else if (!stringHelpers.isValidDateString(stringHelpers.dateTimeToDate(dateTime)) || !stringHelpers.isValidTimeString(stringHelpers.dateTimeToTime(dateTime))) throwInvalidDateTimeError(stringHelpers.dateTimeToTime(dateTime));
   } // validate date-only cases
 
 
-  if (isDateSelector) {
+  if (typeGuards.getIsDate(props)) {
+    const {
+      date,
+      onDateChange
+    } = props;
     if (typeof date !== 'string' || typeof onDateChange !== 'function') throwUncontrolledDateError(date, onDateChange);else if (!stringHelpers.isValidDateString(date)) throwInvalidDaterror(date);
   } // validate time-only cases
 
 
-  if (isTimeSelector) {
+  if (typeGuards.getIsTime(props)) {
+    const {
+      time,
+      onTimeChange
+    } = props;
     if (typeof time !== 'string' || typeof onTimeChange !== 'function') throwUncontrolledTimeError(time, onTimeChange);else if (!stringHelpers.isValidTimeString(time)) throwInvalidTimerror(time);
   }
 };