carbon-addons-iot-react 2.147.0-next.2 → 2.147.0-next.24

package/es/components/Card/Card.js

@@ -4,6 +4,7 @@ import 'core-js/modules/es.array.filter.js';
 import 'core-js/modules/es.object.get-own-property-descriptor.js';
 import 'core-js/modules/web.dom-collections.for-each.js';
 import 'core-js/modules/es.object.get-own-property-descriptors.js';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _extends from '@babel/runtime/helpers/extends';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
@@ -14,7 +15,7 @@ import 'core-js/modules/es.array.find.js';
 import 'core-js/modules/es.object.values.js';
 import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.slice.js';
-import React__default, { useEffect, useMemo, useCallback, useRef } from 'react';
+import React__default, { useEffect, useMemo, useState, useCallback, useRef } from 'react';
 import VisibilitySensor from 'react-visibility-sensor';
 import { Tooltip, SkeletonText } from 'carbon-components-react';
 import withSize from 'react-sizeme';
@@ -27,6 +28,7 @@ import { CardPropTypes } from '../../constants/CardPropTypes.js';
 import { getCardMinSize, filterValidAttributes } from '../../utils/componentUtilityFunctions.js';
 import { getUpdatedCardSize, useCardResizing } from '../../utils/cardUtilityFunctions.js';
 import useHasTextOverflow from '../../hooks/useHasTextOverflow.js';
+import { parseValue } from '../DateTimePicker/dateTimePickerUtils.js';
 import CardToolbar from './CardToolbar.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; }
@@ -247,7 +249,8 @@ var defaultProps = {
     deleteCardLabel: 'Delete card',
     closeLabel: 'Close',
     expandLabel: 'Expand to fullscreen',
-    overflowMenuDescription: 'Open and close list of options'
+    overflowMenuDescription: 'Open and close list of options',
+    toLabel: 'to'
   },
   onMouseDown: undefined,
   onMouseUp: undefined,
@@ -267,7 +270,7 @@ var Card = function Card(props) {
   var size = props.size,
       children = props.children,
       title = props.title,
-      subtitle = props.subtitle,
+      subtitleProp = props.subtitle,
       hasTitleWrap = props.hasTitleWrap;
       props.layout;
       var isLoading = props.isLoading,
@@ -317,16 +320,50 @@ var Card = function Card(props) {
   }));
 
   var strings = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
-  /** adds the id to the card action */
 
+  var getTheSubtitle = useMemo(function () {
+    if (subtitleProp) {
+      return subtitleProp;
+    }
+
+    if (mergedAvailableActions.range === 'full' || mergedAvailableActions.range === 'iconOnly') {
+      var _parseValue = parseValue(timeRange, dateTimeMask, strings.toLabel),
+          readableValue = _parseValue.readableValue;
+
+      return readableValue;
+    }
+
+    return undefined;
+  }, [dateTimeMask, mergedAvailableActions.range, strings.toLabel, subtitleProp, timeRange]);
+
+  var _useState = useState(getTheSubtitle),
+      _useState2 = _slicedToArray(_useState, 2),
+      subtitle = _useState2[0],
+      setSubtitle = _useState2[1];
+
+  useEffect(function () {
+    setSubtitle(getTheSubtitle);
+  }, [getTheSubtitle, subtitleProp]);
+  /** adds the id to the card action */
 
   var cachedOnCardAction = useCallback(function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    return onCardAction.apply(void 0, [id].concat(args));
-  }, [onCardAction, id]);
+    var action = args[0],
+        value = args[1];
+
+    if (action === 'CHANGE_TIME_RANGE' && !subtitleProp) {
+      if (value.timeRangeKind === 'PRESET') {
+        setSubtitle(value.timeRangeValue.tooltipValue);
+      } else if (!value.range) {
+        setSubtitle(value.timeRangeValue.humanValue);
+      }
+    }
+
+    onCardAction.apply(void 0, [id].concat(args));
+  }, [subtitleProp, onCardAction, id]);
 
   var getChildSize = function getChildSize(cardSize, cardTitle) {
     var childSize = _objectSpread(_objectSpread({}, cardSize), {}, {
@@ -604,7 +641,7 @@ Card.__docgenInfo = {
     },
     "i18n": {
       "defaultValue": {
-        "value": "{\n  noDataLabel: 'No data is available for this time range.',\n  noDataShortLabel: 'No data',\n  errorLoadingDataLabel: 'Error loading data for this card: ',\n  errorLoadingDataShortLabel: 'Data error.',\n  timeRangeLabel: 'Time range',\n  rollingPeriodLabel: 'Rolling period',\n  defaultLabel: 'Default',\n  last24HoursLabel: 'Last 24 hrs',\n  last7DaysLabel: 'Last 7 days',\n  lastMonthLabel: 'Last month',\n  lastQuarterLabel: 'Last quarter',\n  lastYearLabel: 'Last year',\n  periodToDateLabel: 'Period to date',\n  thisWeekLabel: 'This week',\n  thisMonthLabel: 'This month',\n  thisQuarterLabel: 'This quarter',\n  thisYearLabel: 'This year',\n  selectTimeRangeLabel: 'Select time range',\n  hourlyLabel: 'Hourly',\n  dailyLabel: 'Daily',\n  weeklyLabel: 'Weekly',\n  monthlyLabel: 'Monthly',\n  editCardLabel: 'Edit card',\n  cloneCardLabel: 'Clone card',\n  deleteCardLabel: 'Delete card',\n  closeLabel: 'Close',\n  expandLabel: 'Expand to fullscreen',\n  overflowMenuDescription: 'Open and close list of options',\n}",
+        "value": "{\n  noDataLabel: 'No data is available for this time range.',\n  noDataShortLabel: 'No data',\n  errorLoadingDataLabel: 'Error loading data for this card: ',\n  errorLoadingDataShortLabel: 'Data error.',\n  timeRangeLabel: 'Time range',\n  rollingPeriodLabel: 'Rolling period',\n  defaultLabel: 'Default',\n  last24HoursLabel: 'Last 24 hrs',\n  last7DaysLabel: 'Last 7 days',\n  lastMonthLabel: 'Last month',\n  lastQuarterLabel: 'Last quarter',\n  lastYearLabel: 'Last year',\n  periodToDateLabel: 'Period to date',\n  thisWeekLabel: 'This week',\n  thisMonthLabel: 'This month',\n  thisQuarterLabel: 'This quarter',\n  thisYearLabel: 'This year',\n  selectTimeRangeLabel: 'Select time range',\n  hourlyLabel: 'Hourly',\n  dailyLabel: 'Daily',\n  weeklyLabel: 'Weekly',\n  monthlyLabel: 'Monthly',\n  editCardLabel: 'Edit card',\n  cloneCardLabel: 'Clone card',\n  deleteCardLabel: 'Delete card',\n  closeLabel: 'Close',\n  expandLabel: 'Expand to fullscreen',\n  overflowMenuDescription: 'Open and close list of options',\n  toLabel: 'to',\n}",
         "computed": false
       },
       "required": false

package/es/components/Card/CardRangePicker.js

@@ -5,7 +5,7 @@ import 'core-js/modules/es.array.filter.js';
 import 'core-js/modules/es.object.keys.js';
 import 'core-js/modules/es.array.includes.js';
 import 'core-js/modules/es.string.includes.js';
-import React__default, { useState, useCallback } from 'react';
+import React__default, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { EventSchedule16 } from '@carbon/icons-react';
 import { ToolbarItem, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
@@ -58,12 +58,23 @@ var CardRangePicker = function CardRangePicker(_ref) {
     });
     setTimeRange(value);
   }, [setTimeRange, onCardAction]);
+  useEffect(function () {
+    setTimeRange(timeRangeProp);
+  }, [timeRangeProp]);
+
+  var getTimeRangeText = function getTimeRangeText(key) {
+    var _timeRangeOptions$key;
+
+    var defaultText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    return typeof timeRangeOptions[key] === 'string' ? timeRangeOptions[key] : ((_timeRangeOptions$key = timeRangeOptions[key]) === null || _timeRangeOptions$key === void 0 ? void 0 : _timeRangeOptions$key.label) || defaultText;
+  };
+
   return /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(iotPrefix, "--card--toolbar-date-range-wrapper")
   }, /*#__PURE__*/React__default.createElement(ToolbarItem, null, /*#__PURE__*/React__default.createElement("div", {
     id: "timeRange",
     className: classnames("".concat(iotPrefix, "--card--toolbar-timerange-label"), _defineProperty({}, "".concat(iotPrefix, "--card--toolbar-timerange-label--hidden"), cardWidth < 400))
-  }, timeRangeOptions[timeRange] || i18n.defaultLabel), /*#__PURE__*/React__default.createElement(OverflowMenu, {
+  }, getTimeRangeText(timeRange, i18n.defaultLabel)), /*#__PURE__*/React__default.createElement(OverflowMenu, {
     className: classnames("".concat(iotPrefix, "--card--toolbar-date-range-action")),
     flipped: true,
     title: i18n.selectTimeRangeLabel,
@@ -87,7 +98,7 @@ var CardRangePicker = function CardRangePicker(_ref) {
       onClick: function onClick() {
         return handleTimeRange(i);
       },
-      itemText: timeRangeOptions[i],
+      itemText: getTimeRangeText(i),
       className: classnames(_defineProperty({}, "".concat(iotPrefix, "--card--overflow-menuitem-active"), timeRange === i))
     });
   }), Object.keys(timeRangeOptions).filter(function (i) {
@@ -99,7 +110,7 @@ var CardRangePicker = function CardRangePicker(_ref) {
       onClick: function onClick() {
         return handleTimeRange(i);
       },
-      itemText: timeRangeOptions[i],
+      itemText: getTimeRangeText(i),
       className: classnames(_defineProperty({}, "".concat(iotPrefix, "--card--overflow-menuitem-active"), timeRange === i))
     });
   }))));

package/es/components/Card/CardToolbar.js

@@ -17,7 +17,7 @@ import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
 import classnames from 'classnames';
 import keyBy from 'lodash/keyBy';
 import { settings } from '../../constants/Settings.js';
-import { TimeRangeOptionsPropTypes, DATE_PICKER_OPTIONS } from '../../constants/CardPropTypes.js';
+import { TimeRangeOptionsPropTypes } from '../../constants/CardPropTypes.js';
 import { CARD_ACTIONS } from '../../constants/LayoutConstants.js';
 import DateTimePicker, { DateTimePickerDefaultValuePropTypes } from '../DateTimePicker/DateTimePickerV2.js';
 import Button from '../Button/Button.js';
@@ -196,8 +196,7 @@ var CardToolbar = function CardToolbar(_ref) {
     i18n: mergedI18n,
     dateTimeMask: dateTimeMask,
     locale: locale,
-    hasIconOnly: // make sure the card is actually sized
-    width > 0 && width < 320 || availableActions.range === DATE_PICKER_OPTIONS.ICON_ONLY,
+    hasIconOnly: true,
     presets: Object.entries(timeRangeOptions).reduce(function (acc, _ref2) {
       var _ref3 = _slicedToArray(_ref2, 2),
           timeRangeOptionKey = _ref3[0],

package/es/components/ComboBox/ComboBox.js

@@ -27,6 +27,7 @@ import { ComboBox as ComboBox$1, Tag } from 'carbon-components-react';
 import pick from 'lodash/pick';
 import { settings } from '../../constants/Settings.js';
 import { filterValidAttributes } from '../../utils/componentUtilityFunctions.js';
+import { keyboardKeys } from '../../constants/KeyCodeConstants.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; }
 
@@ -205,7 +206,7 @@ var ComboBox = function ComboBox(_ref) {
     // Current value of input
     var currentValue = comboRef.current.value.trim();
 
-    if (evt.key === 'Enter' && currentValue) {
+    if (evt.key === keyboardKeys.ENTER && currentValue) {
       var newItem = {
         id: "".concat(iotPrefix, "-input-").concat(currentValue.split(' ').join('-'), "-").concat(currentValue.length),
         text: currentValue

package/es/components/DateTimePicker/DateTimePicker.js

@@ -8,15 +8,13 @@ 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.number.constructor.js';
-import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.split.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.constructor.js';
 import 'core-js/modules/es.array.map.js';
 import React__default, { useEffect, useState, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
@@ -29,6 +27,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';
 
 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; }
 
@@ -96,6 +95,12 @@ var propTypes = {
     timeRangeValue: PropTypes.exact({
       startDate: PropTypes.string.isRequired,
       startTime: PropTypes.string.isRequired,
+
+      /** Can be a full parseable 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 */
+      end: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
       endDate: PropTypes.string.isRequired,
       endTime: PropTypes.string.isRequired
     }).isRequired
@@ -340,13 +345,28 @@ var DateTimePicker = function DateTimePicker(_ref) {
   var _useState23 = useState(false),
       _useState24 = _slicedToArray(_useState23, 2),
       relativeLastNumberInvalid = _useState24[0],
-      setRelativeLastNumberInvalid = _useState24[1]; // Refs
+      setRelativeLastNumberInvalid = _useState24[1];
 
-
-  var _useState25 = useState(null),
+  var _useState25 = useState(false),
       _useState26 = _slicedToArray(_useState25, 2),
-      datePickerElem = _useState26[0],
-      setDatePickerElem = _useState26[1];
+      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];
 
   var relativeSelect = useRef(null);
   var presetListRef = useRef(null);
@@ -411,84 +431,6 @@ var DateTimePicker = function DateTimePicker(_ref) {
       clearTimeout(timeout);
     };
   }, [datePickerElem, id]);
-  /**
-   * Parses a value object into a human readable value
-   * @param {Object} value - the currently selected value
-   * @param {string} value.kind - preset/relative/absolute
-   * @param {Object} value.preset - the preset selection
-   * @param {Object} value.relative - the relative time selection
-   * @param {Object} value.absolute - the absolute time selection
-   * @returns {Object} a human readable value and a furtherly augmented value object
-   */
-
-  var parseValue = function parseValue(value) {
-    setCurrentValue(value);
-    var readableValue = '';
-
-    var returnValue = _objectSpread({}, value);
-
-    switch (value.kind) {
-      case PICKER_KINDS.RELATIVE:
-        {
-          var endDate = dayjs();
-
-          if (value.relative.relativeToWhen !== '') {
-            endDate = value.relative.relativeToWhen === RELATIVE_VALUES.YESTERDAY ? dayjs().add(-1, INTERVAL_VALUES.DAYS) : dayjs(); // wait to parse it until fully typed
-
-            if (value.relative.relativeToTime.length === 5) {
-              endDate = endDate.hour(Number(value.relative.relativeToTime.split(':')[0]));
-              endDate = endDate.minute(Number(value.relative.relativeToTime.split(':')[1]));
-            }
-
-            var startDate = endDate.clone().subtract(value.relative.lastNumber, value.relative.lastInterval ? value.relative.lastInterval : INTERVAL_VALUES.MINUTES);
-            returnValue.relative.start = new Date(startDate.valueOf());
-            returnValue.relative.end = new Date(endDate.valueOf());
-            readableValue = "".concat(dayjs(startDate).format(dateTimeMask), " ").concat(strings.toLabel, " ").concat(dayjs(endDate).format(dateTimeMask));
-          }
-
-          break;
-        }
-
-      case PICKER_KINDS.ABSOLUTE:
-        {
-          var _startDate = dayjs(value.absolute.start); // wait to parse it until fully typed
-
-
-          if (value.absolute.startTime && value.absolute.startTime.length === 5) {
-            _startDate = _startDate.hours(value.absolute.startTime.split(':')[0]);
-            _startDate = _startDate.minutes(value.absolute.startTime.split(':')[1]);
-          }
-
-          returnValue.absolute.start = new Date(_startDate.valueOf());
-
-          if (value.absolute.end) {
-            var _endDate = dayjs(value.absolute.end); // wait to parse it until fully typed
-
-
-            if (value.absolute.endTime && value.absolute.endTime.length === 5) {
-              _endDate = _endDate.hours(value.absolute.endTime.split(':')[0]);
-              _endDate = _endDate.minutes(value.absolute.endTime.split(':')[1]);
-            }
-
-            returnValue.absolute.end = new Date(_endDate.valueOf());
-            readableValue = "".concat(dayjs(_startDate).format(dateTimeMask), " ").concat(strings.toLabel, " ").concat(dayjs(_endDate).format(dateTimeMask));
-          } else {
-            readableValue = "".concat(dayjs(_startDate).format(dateTimeMask), " ").concat(strings.toLabel, " ").concat(dayjs(_startDate).format(dateTimeMask));
-          }
-
-          break;
-        }
-
-      default:
-        readableValue = value.preset.label;
-        break;
-    }
-
-    setHumanValue(readableValue);
-    return _objectSpread({
-      readableValue: readableValue
-    }, returnValue);
-  };
   /**
    * Transforms a default or selected value into a full blown returnable object
    * @param {Object} [preset] clicked preset
@@ -497,7 +439,6 @@ var DateTimePicker = function DateTimePicker(_ref) {
    * @returns {Object} the augmented value itself and the human readable value
    */
 
-
   var renderValue = function renderValue() {
     var clickedPreset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
 
@@ -527,7 +468,10 @@ var DateTimePicker = function DateTimePicker(_ref) {
       value.kind = PICKER_KINDS.PRESET;
     }
 
-    return _objectSpread(_objectSpread({}, value), parseValue(value));
+    setCurrentValue(value);
+    var parsedValue = parseValue(value, dateTimeMask, strings.toLabel);
+    setHumanValue(parsedValue.readableValue);
+    return _objectSpread(_objectSpread({}, value), parsedValue);
   };
 
   useEffect(function () {
@@ -874,7 +818,8 @@ var DateTimePicker = function DateTimePicker(_ref) {
     changeRelativePropertyValue('relativeToWhen', event.currentTarget.value);
   };
 
-  var onRelativeToTimeChange = function onRelativeToTimeChange(pickerValue) {
+  var onRelativeToTimeChange = function onRelativeToTimeChange(pickerValue, evt, meta) {
+    setRelativeToTimeInvalid(meta.invalid);
     changeRelativePropertyValue('relativeToTime', pickerValue);
   }; // Util func to update the absolute value
 
@@ -887,15 +832,20 @@ var DateTimePicker = function DateTimePicker(_ref) {
   }; // on change functions that trigger a absolute value update
 
 
-  var onAbsoluteStartTimeChange = function onAbsoluteStartTimeChange(pickerValue) {
+  var onAbsoluteStartTimeChange = function onAbsoluteStartTimeChange(pickerValue, evt, meta) {
+    setAbsoluteStartTimeInvalid(meta.invalid);
     changeAbsolutePropertyValue('startTime', pickerValue);
   };
 
-  var onAbsoluteEndTimeChange = function onAbsoluteEndTimeChange(pickerValue) {
+  var onAbsoluteEndTimeChange = function onAbsoluteEndTimeChange(pickerValue, evt, meta) {
+    setAbsoluteEndTimeInvalid(meta.invalid);
     changeAbsolutePropertyValue('endTime', pickerValue);
   };
 
   var tooltipValue = renderPresetTooltipText ? renderPresetTooltipText(currentValue) : getIntervalValue();
+  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
@@ -1056,7 +1006,9 @@ var DateTimePicker = function DateTimePicker(_ref) {
         })[0] || relative.label
       });
     })), hasTimeInput ? /*#__PURE__*/React__default.createElement(TimePickerSpinner, {
+      key: "".concat(id, "-relative-to-time"),
       id: "".concat(id, "-relative-to-time"),
+      invalid: relativeToTimeInvalid,
       value: relativeValue ? relativeValue.relativeToTime : '',
       i18n: i18n,
       light: true,
@@ -1090,6 +1042,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
       className: "".concat(iotPrefix, "--date-time-picker__fields-wrapper")
     }, /*#__PURE__*/React__default.createElement(TimePickerSpinner, {
       id: "".concat(id, "-start-time"),
+      invalid: absoluteStartTimeInvalid,
       labelText: strings.startTimeLabel,
       value: absoluteValue ? absoluteValue.startTime : '00:00',
       i18n: i18n,
@@ -1099,6 +1052,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
       autoComplete: "off"
     }), /*#__PURE__*/React__default.createElement(TimePickerSpinner, {
       id: "".concat(id, "-end-time"),
+      invalid: absoluteEndTimeInvalid,
       labelText: strings.endTimeLabel,
       value: absoluteValue ? absoluteValue.endTime : '00:00',
       i18n: i18n,
@@ -1137,7 +1091,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
       ,
       onKeyUp: handleSpecificKeyDown(['Enter', ' '], onApplyClick),
       size: "field",
-      disabled: isCustomRange && customRangeKind === PICKER_KINDS.RELATIVE && relativeLastNumberInvalid
+      disabled: disableApply
     }), strings.applyBtnLabel)))))
   );
 };
@@ -1264,6 +1218,28 @@ DateTimePicker.__docgenInfo = {
                   "name": "string",
                   "required": true
                 },
+                "start": {
+                  "name": "union",
+                  "value": [{
+                    "name": "string"
+                  }, {
+                    "name": "instanceOf",
+                    "value": "Date"
+                  }],
+                  "description": "Can be a full parseable DateTime string or a Date object",
+                  "required": false
+                },
+                "end": {
+                  "name": "union",
+                  "value": [{
+                    "name": "string"
+                  }, {
+                    "name": "instanceOf",
+                    "value": "Date"
+                  }],
+                  "description": "Can be a full parseable DateTime string or a Date object",
+                  "required": false
+                },
                 "endDate": {
                   "name": "string",
                   "required": true