carbon-addons-iot-react 2.149.0-next.8 → 2.149.1-next.0

package/es/components/DateTimePicker/DateTimePicker.js

@@ -7,17 +7,10 @@ import _extends from '@babel/runtime/helpers/extends';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.array.from.js';
-import 'core-js/modules/es.string.iterator.js';
-import 'core-js/modules/es.array.find-index.js';
-import 'core-js/modules/es.array.includes.js';
-import 'core-js/modules/es.string.includes.js';
-import 'core-js/modules/es.number.is-nan.js';
-import 'core-js/modules/es.number.constructor.js';
+import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.map.js';
-import React__default, { useEffect, useState, useRef, useCallback } from 'react';
+import React__default, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { TooltipDefinition, OrderedList, ListItem, FormGroup, RadioButtonGroup, RadioButton, NumberInput, Select, SelectItem, DatePicker, DatePickerInput, Button } from 'carbon-components-react';
 import { Calendar16 } from '@carbon/icons-react';
@@ -28,7 +21,7 @@ import { settings } from '../../constants/Settings.js';
 import dayjs from '../../utils/dayjs.js';
 import { handleSpecificKeyDown } from '../../utils/componentUtilityFunctions.js';
 import { Tooltip } from '../Tooltip/index.js';
-import { parseValue } from './dateTimePickerUtils.js';
+import { useDateTimePickerRangeKind, useDateTimePickerKeyboardInteraction, useDateTimePickerRef, useDateTimePickerFocus, useAbsoluteDateTimeValue, useRelativeDateTimeValue, useDateTimePickerTooltip, getIntervalValue, onDatePickerClose, parseValue, invalidEndDate, invalidStartDate } from './dateTimePickerUtils.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; }
 
@@ -97,10 +90,10 @@ var propTypes = {
       startDate: PropTypes.string.isRequired,
       startTime: PropTypes.string.isRequired,
 
-      /** Can be a full parseable DateTime string or a Date object */
+      /** Can be a full parsable DateTime string or a Date object */
       start: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
 
-      /** Can be a full parseable DateTime string or a Date object */
+      /** Can be a full parsable DateTime string or a Date object */
       end: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
       endDate: PropTypes.string.isRequired,
       endTime: PropTypes.string.isRequired
@@ -290,90 +283,94 @@ var DateTimePicker = function DateTimePicker(_ref) {
     dayjs.locale(locale);
   }, [locale]); // State
 
-  var _useState = useState(expanded),
+  var _useDateTimePickerRan = useDateTimePickerRangeKind(showRelativeOption),
+      _useDateTimePickerRan2 = _slicedToArray(_useDateTimePickerRan, 3),
+      customRangeKind = _useDateTimePickerRan2[0],
+      setCustomRangeKind = _useDateTimePickerRan2[1],
+      onCustomRangeChange = _useDateTimePickerRan2[2];
+
+  var _useDateTimePickerKey = useDateTimePickerKeyboardInteraction({
+    expanded: expanded,
+    setCustomRangeKind: setCustomRangeKind
+  }),
+      isExpanded = _useDateTimePickerKey.isExpanded,
+      setIsExpanded = _useDateTimePickerKey.setIsExpanded,
+      presetListRef = _useDateTimePickerKey.presetListRef,
+      onFieldInteraction = _useDateTimePickerKey.onFieldInteraction,
+      onNavigateRadioButton = _useDateTimePickerKey.onNavigateRadioButton,
+      onNavigatePresets = _useDateTimePickerKey.onNavigatePresets;
+
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      isExpanded = _useState2[0],
-      setIsExpanded = _useState2[1];
+      isCustomRange = _useState2[0],
+      setIsCustomRange = _useState2[1];
 
-  var _useState3 = useState(showRelativeOption ? PICKER_KINDS.RELATIVE : PICKER_KINDS.ABSOLUTE),
+  var _useState3 = useState(null),
       _useState4 = _slicedToArray(_useState3, 2),
-      customRangeKind = _useState4[0],
-      setCustomRangeKind = _useState4[1];
+      selectedPreset = _useState4[0],
+      setSelectedPreset = _useState4[1];
 
-  var _useState5 = useState(false),
+  var _useState5 = useState(null),
       _useState6 = _slicedToArray(_useState5, 2),
-      isCustomRange = _useState6[0],
-      setIsCustomRange = _useState6[1];
+      currentValue = _useState6[0],
+      setCurrentValue = _useState6[1];
 
   var _useState7 = useState(null),
       _useState8 = _slicedToArray(_useState7, 2),
-      selectedPreset = _useState8[0],
-      setSelectedPreset = _useState8[1];
+      lastAppliedValue = _useState8[0],
+      setLastAppliedValue = _useState8[1];
 
   var _useState9 = useState(null),
       _useState10 = _slicedToArray(_useState9, 2),
-      currentValue = _useState10[0],
-      setCurrentValue = _useState10[1];
-
-  var _useState11 = useState(null),
-      _useState12 = _slicedToArray(_useState11, 2),
-      lastAppliedValue = _useState12[0],
-      setLastAppliedValue = _useState12[1];
-
-  var _useState13 = useState(null),
-      _useState14 = _slicedToArray(_useState13, 2),
-      humanValue = _useState14[0],
-      setHumanValue = _useState14[1];
-
-  var _useState15 = useState(null),
-      _useState16 = _slicedToArray(_useState15, 2),
-      relativeValue = _useState16[0],
-      setRelativeValue = _useState16[1];
-
-  var _useState17 = useState(null),
-      _useState18 = _slicedToArray(_useState17, 2),
-      absoluteValue = _useState18[0],
-      setAbsoluteValue = _useState18[1];
-
-  var _useState19 = useState(true),
-      _useState20 = _slicedToArray(_useState19, 2),
-      focusOnFirstField = _useState20[0],
-      setFocusOnFirstField = _useState20[1];
-
-  var _useState21 = useState(false),
-      _useState22 = _slicedToArray(_useState21, 2),
-      isTooltipOpen = _useState22[0],
-      setIsTooltipOpen = _useState22[1];
-
-  var _useState23 = useState(false),
-      _useState24 = _slicedToArray(_useState23, 2),
-      relativeLastNumberInvalid = _useState24[0],
-      setRelativeLastNumberInvalid = _useState24[1];
-
-  var _useState25 = useState(false),
-      _useState26 = _slicedToArray(_useState25, 2),
-      relativeToTimeInvalid = _useState26[0],
-      setRelativeToTimeInvalid = _useState26[1];
-
-  var _useState27 = useState(false),
-      _useState28 = _slicedToArray(_useState27, 2),
-      absoluteStartTimeInvalid = _useState28[0],
-      setAbsoluteStartTimeInvalid = _useState28[1];
-
-  var _useState29 = useState(false),
-      _useState30 = _slicedToArray(_useState29, 2),
-      absoluteEndTimeInvalid = _useState30[0],
-      setAbsoluteEndTimeInvalid = _useState30[1]; // Refs
-
-
-  var _useState31 = useState(null),
-      _useState32 = _slicedToArray(_useState31, 2),
-      datePickerElem = _useState32[0],
-      setDatePickerElem = _useState32[1];
+      humanValue = _useState10[0],
+      setHumanValue = _useState10[1];
 
   var relativeSelect = useRef(null);
-  var presetListRef = useRef(null);
-  var previousActiveElement = useRef(null);
+
+  var _useDateTimePickerRef = useDateTimePickerRef({
+    id: id
+  }),
+      _useDateTimePickerRef2 = _slicedToArray(_useDateTimePickerRef, 2),
+      datePickerElem = _useDateTimePickerRef2[0],
+      pickerRefCallback = _useDateTimePickerRef2[1];
+
+  var _useDateTimePickerFoc = useDateTimePickerFocus(datePickerElem),
+      _useDateTimePickerFoc2 = _slicedToArray(_useDateTimePickerFoc, 2),
+      focusOnFirstField = _useDateTimePickerFoc2[0],
+      setFocusOnFirstField = _useDateTimePickerFoc2[1];
+
+  var _useAbsoluteDateTimeV = useAbsoluteDateTimeValue(),
+      absoluteValue = _useAbsoluteDateTimeV.absoluteValue,
+      setAbsoluteValue = _useAbsoluteDateTimeV.setAbsoluteValue,
+      absoluteStartTimeInvalid = _useAbsoluteDateTimeV.absoluteStartTimeInvalid,
+      setAbsoluteStartTimeInvalid = _useAbsoluteDateTimeV.setAbsoluteStartTimeInvalid,
+      absoluteEndTimeInvalid = _useAbsoluteDateTimeV.absoluteEndTimeInvalid,
+      setAbsoluteEndTimeInvalid = _useAbsoluteDateTimeV.setAbsoluteEndTimeInvalid,
+      onAbsoluteStartTimeChange = _useAbsoluteDateTimeV.onAbsoluteStartTimeChange,
+      onAbsoluteEndTimeChange = _useAbsoluteDateTimeV.onAbsoluteEndTimeChange,
+      resetAbsoluteValue = _useAbsoluteDateTimeV.resetAbsoluteValue;
+
+  var _useRelativeDateTimeV = useRelativeDateTimeValue({
+    defaultInterval: intervals[0].value,
+    defaultRelativeTo: relatives[0].value
+  }),
+      relativeValue = _useRelativeDateTimeV.relativeValue,
+      setRelativeValue = _useRelativeDateTimeV.setRelativeValue,
+      relativeToTimeInvalid = _useRelativeDateTimeV.relativeToTimeInvalid,
+      resetRelativeValue = _useRelativeDateTimeV.resetRelativeValue,
+      relativeLastNumberInvalid = _useRelativeDateTimeV.relativeLastNumberInvalid,
+      onRelativeLastNumberChange = _useRelativeDateTimeV.onRelativeLastNumberChange,
+      onRelativeLastIntervalChange = _useRelativeDateTimeV.onRelativeLastIntervalChange,
+      onRelativeToWhenChange = _useRelativeDateTimeV.onRelativeToWhenChange,
+      onRelativeToTimeChange = _useRelativeDateTimeV.onRelativeToTimeChange;
+
+  var _useDateTimePickerToo = useDateTimePickerTooltip({
+    isExpanded: isExpanded
+  }),
+      _useDateTimePickerToo2 = _slicedToArray(_useDateTimePickerToo, 2),
+      isTooltipOpen = _useDateTimePickerToo2[0],
+      toggleTooltip = _useDateTimePickerToo2[1];
+
   var dateTimePickerBaseValue = {
     kind: '',
     preset: {
@@ -394,48 +391,6 @@ var DateTimePicker = function DateTimePicker(_ref) {
       endTime: null
     }
   };
-  /**
-   * A callback ref to capture the DateTime node. When a user changes from Relative to Absolute
-   * the calendar would capture focus and move the users position adding confusion to where they
-   * are on the page. This also checks if they're currently focused on the Absolute radio button
-   * and captures it so focus can be restored after the calendar has been reparented below.
-   */
-
-  var handleDatePickerRef = useCallback(function (node) {
-    var _document$activeEleme;
-
-    if (((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.getAttribute('value')) === PICKER_KINDS.ABSOLUTE) {
-      previousActiveElement.current = document.activeElement;
-    }
-
-    setDatePickerElem(node);
-  }, []);
-  useEffect(function () {
-    var timeout = setTimeout(function () {
-      if (datePickerElem) {
-        datePickerElem.cal.open(); // while waiting for https://github.com/carbon-design-system/carbon/issues/5713
-        // the only way to display the calendar inline is to reparent its DOM to our component
-
-        var wrapper = document.getElementById("".concat(id, "-").concat(iotPrefix, "--date-time-picker__wrapper"));
-
-        if (typeof wrapper !== 'undefined' && wrapper !== null) {
-          var dp = document.getElementById("".concat(id, "-").concat(iotPrefix, "--date-time-picker__wrapper")).getElementsByClassName("".concat(iotPrefix, "--date-time-picker__datepicker"))[0];
-          dp.appendChild(datePickerElem.cal.calendarContainer);
-        } // if we were focused on the Absolute radio button previously, restore focus to it.
-
-        /* istanbul ignore if */
-
-
-        if (previousActiveElement.current) {
-          previousActiveElement.current.focus();
-          previousActiveElement.current = null;
-        }
-      }
-    }, 0);
-    return function () {
-      clearTimeout(timeout);
-    };
-  }, [datePickerElem, id]);
   /**
    * Transforms a default or selected value into a full blown returnable object
    * @param {Object} [preset] clicked preset
@@ -486,162 +441,10 @@ var DateTimePicker = function DateTimePicker(_ref) {
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [absoluteValue, relativeValue]);
 
-  var getFocusableSiblings = function getFocusableSiblings() {
-    /* istanbul ignore else */
-    if (presetListRef !== null && presetListRef !== void 0 && presetListRef.current) {
-      var siblings = presetListRef.current.querySelectorAll('[tabindex]');
-      return Array.from(siblings).filter(function (sibling) {
-        return parseInt(sibling.getAttribute('tabindex'), 10) !== -1;
-      });
-    }
-
-    return [];
-  };
-
-  var onFieldInteraction = function onFieldInteraction(_ref2) {
-    var key = _ref2.key;
-
-    switch (key) {
-      case 'Escape':
-        setIsExpanded(false);
-        break;
-      // if the input box is focused and a down arrow is pressed this
-      // moves focus to the first item in the preset list that has a tabindex
-
-      case 'ArrowDown':
-        /* istanbul ignore else */
-        if (presetListRef !== null && presetListRef !== void 0 && presetListRef.current) {
-          var _listItems$;
-
-          var listItems = getFocusableSiblings();
-          /* istanbul ignore else */
-
-          if (listItems !== null && listItems !== void 0 && (_listItems$ = listItems[0]) !== null && _listItems$ !== void 0 && _listItems$.focus) {
-            listItems[0].focus();
-          }
-        }
-
-        break;
-
-      default:
-        setIsExpanded(!isExpanded);
-        break;
-    }
-  };
-  /**
-   * Moves up the preset list to the previous focusable element or wraps around to the bottom
-   * if already at the top.
-   */
-
-
-  var moveToPreviousElement = function moveToPreviousElement() {
-    var siblings = getFocusableSiblings();
-    var index = siblings.findIndex(function (elem) {
-      return elem === document.activeElement;
-    });
-    var previous = siblings[index - 1];
-
-    if (previous) {
-      previous.focus();
-    } else {
-      siblings[siblings.length - 1].focus();
-    }
-  };
-  /**
-   * Moves down the preset list to the next focusable element or wraps around to the top
-   * if already at the bottom
-   */
-
-
-  var moveToNextElement = function moveToNextElement() {
-    var siblings = getFocusableSiblings();
-    var index = siblings.findIndex(function (elem) {
-      return elem === document.activeElement;
-    });
-    var next = siblings[index + 1];
-
-    if (next) {
-      next.focus();
-    } else {
-      siblings[0].focus();
-    }
-  };
-
-  var onNavigatePresets = function onNavigatePresets(_ref3) {
-    var key = _ref3.key;
-
-    switch (key) {
-      case 'ArrowUp':
-        moveToPreviousElement();
-        break;
-
-      case 'ArrowDown':
-        moveToNextElement();
-        break;
-    }
-  };
-  /**
-   * Allows navigation back and forth between the radio buttons for Relative/Absolute
-   *
-   * @param {KeyboardEvent} e
-   */
-
-
-  var onNavigateRadioButton = function onNavigateRadioButton(e) {
-    if (e.target.getAttribute('id').includes('absolute')) {
-      setCustomRangeKind(PICKER_KINDS.RELATIVE);
-      document.activeElement.parentNode.previousSibling.querySelector('input[type="radio"]').focus();
-    } else {
-      setCustomRangeKind(PICKER_KINDS.ABSOLUTE);
-      document.activeElement.parentNode.nextSibling.querySelector('input[type="radio"]').focus();
-    }
-  };
-
-  useEffect(function () {
-    if (datePickerElem && datePickerElem.inputField && datePickerElem.toInputField) {
-      if (focusOnFirstField) {
-        datePickerElem.inputField.click();
-      } else {
-        datePickerElem.toInputField.click();
-      }
-    }
-  }, [datePickerElem, focusOnFirstField]);
-
-  var isValidDate = function isValidDate(date, time) {
-    var isValid24HoursRegex = /^([01][0-9]|2[0-3]):([0-5][0-9])$/;
-    return date instanceof Date && !Number.isNaN(date) && isValid24HoursRegex.test(time);
-  }; // Validates absolute start date
-
-
-  var invalidStartDate = function invalidStartDate(startTime, endTime, absoluteValues) {
-    // If start and end date have been selected
-    if (absoluteValues.hasOwnProperty('start') && absoluteValues.hasOwnProperty('end') && isValidDate(new Date(absoluteValues.start), startTime)) {
-      var startDate = new Date("".concat(absoluteValues.startDate, " ").concat(startTime));
-      var endDate = new Date("".concat(absoluteValues.endDate, " ").concat(endTime));
-      return startDate >= endDate;
-    } // Return invalid date if start time and end date not selected or if inputted time is not valid
-
-
-    return true;
-  }; // Validates absolute end date
-
-
-  var invalidEndDate = function invalidEndDate(startTime, endTime, absoluteValues) {
-    // If start and end date have been selected
-    if (absoluteValues.hasOwnProperty('start') && absoluteValues.hasOwnProperty('end') && isValidDate(new Date(absoluteValues.end), endTime)) {
-      var startDate = new Date("".concat(absoluteValues.startDate, " ").concat(startTime));
-      var endDate = new Date("".concat(absoluteValues.endDate, " ").concat(endTime));
-      return startDate >= endDate;
-    } // Return invalid date if start time and end date not selected or if inputted time is not valid
-
-
-    return true;
-  };
-
-  var onDatePickerChange = function onDatePickerChange(_ref4, _, flatpickr) {
-    var _ref5 = _slicedToArray(_ref4, 2),
-        start = _ref5[0],
-        end = _ref5[1];
+  var onDatePickerChange = function onDatePickerChange(_ref2, _, flatpickr) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+        start = _ref3[0],
+        end = _ref3[1];
 
     var calendarInFocus = document.activeElement.closest(".".concat(iotPrefix, "--date-time-picker__datepicker"));
     var daysDidntChange = dayjs(absoluteValue.start).isSame(dayjs(start)) && dayjs(absoluteValue.end).isSame(dayjs(end));
@@ -693,19 +496,6 @@ var DateTimePicker = function DateTimePicker(_ref) {
     setAbsoluteStartTimeInvalid(invalidStartDate(newAbsolute.startTime, newAbsolute.endTime, newAbsolute));
   };
 
-  var onDatePickerClose = function onDatePickerClose(range, single, flatpickr) {
-    // force it to stay open
-
-    /* istanbul ignore else */
-    if (flatpickr) {
-      flatpickr.open();
-    }
-  };
-
-  var onCustomRangeChange = function onCustomRangeChange(kind) {
-    setCustomRangeKind(kind);
-  };
-
   var onPresetClick = function onPresetClick(preset) {
     var _preset$id;
 
@@ -713,24 +503,6 @@ var DateTimePicker = function DateTimePicker(_ref) {
     renderValue(preset);
   };
 
-  var resetRelativeValue = function resetRelativeValue() {
-    setRelativeValue({
-      lastNumber: 0,
-      lastInterval: intervals[0].value,
-      relativeToWhen: relatives[0].value,
-      relativeToTime: ''
-    });
-  };
-
-  var resetAbsoluteValue = function resetAbsoluteValue() {
-    setAbsoluteValue({
-      startDate: '',
-      startTime: '00:00',
-      endDate: '',
-      endTime: '00:00'
-    });
-  };
-
   var parseDefaultValue = function parseDefaultValue(parsableValue) {
     var currentCustomRangeKind = showRelativeOption ? PICKER_KINDS.RELATIVE : PICKER_KINDS.ABSOLUTE;
 
@@ -847,96 +619,16 @@ var DateTimePicker = function DateTimePicker(_ref) {
       onApply(returnValue);
     }
   };
-  /**
-   * Get an alternative human readable value for a preset to show in tooltips and dropdown
-   * ie. 'Last 30 minutes' displays '2020-04-01 11:30 to Now' on the tooltip
-   * @returns {string} an interval string, starting point in time to now
-   */
-
 
-  var getIntervalValue = function getIntervalValue() {
-    if (currentValue) {
-      if (currentValue.kind === PICKER_KINDS.PRESET) {
-        return "".concat(dayjs().subtract(currentValue.preset.offset, 'minutes').format(dateTimeMask), " ").concat(strings.toNowLabel);
-      }
-
-      return humanValue;
-    }
-
-    return '';
-  }; // Util func to update the relative value
-
-
-  var changeRelativePropertyValue = function changeRelativePropertyValue(property, value) {
-    var newRelative = _objectSpread({}, relativeValue);
-
-    newRelative[property] = value;
-    setRelativeValue(newRelative);
-  }; // on change functions that trigger a relative value update
-
-
-  var onRelativeLastNumberChange = function onRelativeLastNumberChange(event) {
-    var valid = !event.imaginaryTarget.getAttribute('data-invalid');
-    setRelativeLastNumberInvalid(!valid);
-
-    if (valid) {
-      changeRelativePropertyValue('lastNumber', Number(event.imaginaryTarget.value));
-    }
-  };
-
-  var onRelativeLastIntervalChange = function onRelativeLastIntervalChange(event) {
-    changeRelativePropertyValue('lastInterval', event.currentTarget.value);
-  };
-
-  var onRelativeToWhenChange = function onRelativeToWhenChange(event) {
-    changeRelativePropertyValue('relativeToWhen', event.currentTarget.value);
-  };
-
-  var onRelativeToTimeChange = function onRelativeToTimeChange(pickerValue, evt, meta) {
-    setRelativeToTimeInvalid(meta.invalid);
-    changeRelativePropertyValue('relativeToTime', pickerValue);
-  }; // Util func to update the absolute value
-
-
-  var changeAbsolutePropertyValue = function changeAbsolutePropertyValue(property, value) {
-    var newAbsolute = _objectSpread({}, absoluteValue);
-
-    newAbsolute[property] = value;
-    setAbsoluteValue(newAbsolute);
-  }; // on change functions that trigger a absolute value update
-
-
-  var onAbsoluteStartTimeChange = function onAbsoluteStartTimeChange(pickerValue, evt, meta) {
-    setAbsoluteStartTimeInvalid(meta.invalid || invalidStartDate(pickerValue, absoluteValue.endTime, absoluteValue));
-    setAbsoluteEndTimeInvalid(invalidEndDate(pickerValue, absoluteValue.endTime, absoluteValue));
-    changeAbsolutePropertyValue('startTime', pickerValue);
-  };
-
-  var onAbsoluteEndTimeChange = function onAbsoluteEndTimeChange(pickerValue, evt, meta) {
-    setAbsoluteEndTimeInvalid(meta.invalid || invalidEndDate(absoluteValue.startTime, pickerValue, absoluteValue));
-    setAbsoluteStartTimeInvalid(invalidStartDate(absoluteValue.startTime, pickerValue, absoluteValue));
-    changeAbsolutePropertyValue('endTime', pickerValue);
-  };
-
-  var tooltipValue = renderPresetTooltipText ? renderPresetTooltipText(currentValue) : getIntervalValue();
+  var tooltipValue = renderPresetTooltipText ? renderPresetTooltipText(currentValue) : getIntervalValue({
+    currentValue: currentValue,
+    strings: strings,
+    dateTimeMask: dateTimeMask,
+    humanValue: humanValue
+  });
   var disableRelativeApply = isCustomRange && customRangeKind === PICKER_KINDS.RELATIVE && (relativeLastNumberInvalid || relativeToTimeInvalid);
   var disableAbsoluteApply = isCustomRange && customRangeKind === PICKER_KINDS.ABSOLUTE && (absoluteStartTimeInvalid || absoluteEndTimeInvalid);
   var disableApply = disableRelativeApply || disableAbsoluteApply;
-  /**
-   * Shows and hides the tooltip with the humanValue (Relative) or full-range (Absolute) when
-   * the user focuses or hovers on the input
-   */
-
-  var toggleTooltip = function toggleTooltip() {
-    if (isExpanded) {
-      setIsTooltipOpen(false);
-    } else {
-      setIsTooltipOpen(function (prev) {
-        return !prev;
-      });
-    }
-  };
-
   return (
     /*#__PURE__*/
     // Escape handler added to allow pressing escape to close the picker from any via event bubbling
@@ -966,7 +658,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     }, isExpanded || currentValue && currentValue.kind !== PICKER_KINDS.PRESET ? /*#__PURE__*/React__default.createElement("span", {
       title: humanValue
     }, humanValue) : humanValue ? /*#__PURE__*/React__default.createElement(TooltipDefinition, {
-      align: "start",
+      align: "center",
       direction: "bottom",
       tooltipText: tooltipValue,
       triggerClassName: ""
@@ -1098,7 +790,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     }, /*#__PURE__*/React__default.createElement(DatePicker, {
       datePickerType: "range",
       dateFormat: "m/d/Y",
-      ref: handleDatePickerRef,
+      ref: pickerRefCallback,
       onChange: onDatePickerChange,
       onClose: onDatePickerClose,
       value: absoluteValue ? [absoluteValue.startDate, absoluteValue.endDate] : '',
@@ -1302,7 +994,7 @@ DateTimePicker.__docgenInfo = {
                     "name": "instanceOf",
                     "value": "Date"
                   }],
-                  "description": "Can be a full parseable DateTime string or a Date object",
+                  "description": "Can be a full parsable DateTime string or a Date object",
                   "required": false
                 },
                 "end": {
@@ -1313,7 +1005,7 @@ DateTimePicker.__docgenInfo = {
                     "name": "instanceOf",
                     "value": "Date"
                   }],
-                  "description": "Can be a full parseable DateTime string or a Date object",
+                  "description": "Can be a full parsable DateTime string or a Date object",
                   "required": false
                 },
                 "endDate": {