'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _extends = require('@babel/runtime/helpers/extends');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
require('core-js/modules/es.symbol.js');
require('core-js/modules/es.array.concat.js');
require('core-js/modules/es.array.filter.js');
require('core-js/modules/es.array.includes.js');
require('core-js/modules/es.array.map.js');
require('core-js/modules/es.object.get-own-property-descriptor.js');
require('core-js/modules/es.object.get-own-property-descriptors.js');
require('core-js/modules/es.object.keys.js');
require('core-js/modules/es.object.to-string.js');
require('core-js/modules/es.regexp.exec.js');
require('core-js/modules/es.string.includes.js');
require('core-js/modules/es.string.replace.js');
require('core-js/modules/es.string.split.js');
require('core-js/modules/web.dom-collections.for-each.js');
var React = require('react');
var ReactDOM = require('react-dom');
var PropTypes = require('prop-types');
var react = require('@carbon/react');
var classnames = require('classnames');
var uuid = require('uuid');
var warning = require('warning');
var useLangDirection = require('../../utils/useLangDirection.js');
var TimePickerSpinner = require('../TimePickerSpinner/TimePickerSpinner.js');
var TimePickerDropdown = require('../TimePicker/TimePickerDropdown.js');
var Settings = require('../../constants/Settings.js');
var dayjs = require('../../utils/dayjs.js');
var DateConstants = require('../../constants/DateConstants.js');
var Button = require('../Button/Button.js');
var FlyoutMenu = require('../FlyoutMenu/FlyoutMenu.js');
var componentUtilityFunctions = require('../../utils/componentUtilityFunctions.js');
var dateTimePickerUtils = require('./dateTimePickerUtils.js');
var iconsReact = require('@carbon/icons-react');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var _extends__default = /*#__PURE__*/_interopDefault(_extends);
var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
var React__default = /*#__PURE__*/_interopDefault(React);
var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);
var warning__default = /*#__PURE__*/_interopDefault(warning);

var _excluded = ["testId", "defaultValue", "dateTimeMask", "presets", "intervals", "relatives", "expanded", "disabled", "invalid", "showRelativeOption", "showCustomRangeLink", "hasTimeInput", "renderPresetTooltipText", "hideBackButton", "onCancel", "onApply", "onClear", "i18n", "light", "locale", "hasIconOnly", "menuOffset", "datePickerType", "renderInPortal", "useAutoPositioning", "style", "closeOnSelect"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var iotPrefix = Settings.settings.iotPrefix,
  prefix = Settings.settings.prefix;
var DateTimePickerDefaultValuePropTypes = PropTypes__default.default.oneOfType([PropTypes__default.default.exact({
  timeRangeKind: PropTypes__default.default.oneOf([DateConstants.PICKER_KINDS.PRESET]).isRequired,
  timeRangeValue: PropTypes__default.default.exact({
    id: PropTypes__default.default.string,
    label: PropTypes__default.default.string.isRequired,
    /** offset is in minutes */
    offset: PropTypes__default.default.number.isRequired
  }).isRequired
}).isRequired, PropTypes__default.default.exact({
  timeRangeKind: PropTypes__default.default.oneOf([DateConstants.PICKER_KINDS.RELATIVE]).isRequired,
  timeRangeValue: PropTypes__default.default.exact({
    lastNumber: PropTypes__default.default.number.isRequired,
    lastInterval: PropTypes__default.default.string.isRequired,
    relativeToWhen: PropTypes__default.default.string.isRequired,
    relativeToTime: PropTypes__default.default.string.isRequired
  }).isRequired
}).isRequired, PropTypes__default.default.exact({
  timeRangeKind: PropTypes__default.default.oneOf([DateConstants.PICKER_KINDS.ABSOLUTE]).isRequired,
  timeRangeValue: PropTypes__default.default.exact({
    startDate: PropTypes__default.default.string.isRequired,
    startTime: PropTypes__default.default.string.isRequired,
    /** Can be a full parsable DateTime string or a Date object */
    start: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.instanceOf(Date)]),
    /** Can be a full parsable DateTime string or a Date object */
    end: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.instanceOf(Date)]),
    endDate: PropTypes__default.default.string.isRequired,
    endTime: PropTypes__default.default.string.isRequired
  }).isRequired
}).isRequired, PropTypes__default.default.exact({
  timeRangeKind: PropTypes__default.default.oneOf([DateConstants.PICKER_KINDS.SINGLE]).isRequired,
  timeSingleValue: PropTypes__default.default.exact({
    /** Can be a full parsable DateTime string or a Date object */
    start: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.instanceOf(Date)]),
    startDate: PropTypes__default.default.string.isRequired,
    startTime: PropTypes__default.default.string.isRequired
  }).isRequired
}).isRequired]);
var propTypes = {
  testId: PropTypes__default.default.string,
  /** default value for the picker */
  defaultValue: DateTimePickerDefaultValuePropTypes,
  /** the dayjs.js format for the human readable interval value */
  dateTimeMask: PropTypes__default.default.string,
  /** a list of options to for the default presets */
  presets: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
    id: PropTypes__default.default.string,
    label: PropTypes__default.default.string,
    offset: PropTypes__default.default.number
  })),
  /** a list of options to put on the 'Last' interval dropdown */
  intervals: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
    label: PropTypes__default.default.string,
    value: PropTypes__default.default.string
  })),
  /** a list of options to put on the 'Relative to' dropdown */
  relatives: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
    label: PropTypes__default.default.string,
    value: PropTypes__default.default.string
  })),
  /** show the picker in the expanded state */
  expanded: PropTypes__default.default.bool,
  /** hide the back button and display cancel button while only using absolute range selector */
  hideBackButton: PropTypes__default.default.bool,
  /** disable the input */
  disabled: PropTypes__default.default.bool,
  /** specify the input in invalid state */
  invalid: PropTypes__default.default.bool,
  /** show the relative custom range picker */
  showRelativeOption: PropTypes__default.default.bool,
  /** show the custom range link */
  showCustomRangeLink: PropTypes__default.default.bool,
  /** show time input fields */
  hasTimeInput: PropTypes__default.default.bool,
  /**
   * Function hook used to provide the appropriate tooltip content for the preset time
   * picker. This function takes in the currentValue and should return a string message.
   */
  renderPresetTooltipText: PropTypes__default.default.func,
  /** triggered on cancel */
  onCancel: PropTypes__default.default.func,
  /** triggered on apply with returning object with similar signature to defaultValue */
  onApply: PropTypes__default.default.func,
  /** call back function for clear values in single select */
  onClear: PropTypes__default.default.func,
  /** All the labels that need translation */
  i18n: PropTypes__default.default.shape({
    toLabel: PropTypes__default.default.string,
    toNowLabel: PropTypes__default.default.string,
    calendarLabel: PropTypes__default.default.string,
    presetLabels: PropTypes__default.default.arrayOf(PropTypes__default.default.string),
    intervalLabels: PropTypes__default.default.arrayOf(PropTypes__default.default.string),
    relativeLabels: PropTypes__default.default.arrayOf(PropTypes__default.default.string),
    customRangeLinkLabel: PropTypes__default.default.string,
    customRangeLabel: PropTypes__default.default.string,
    relativeLabel: PropTypes__default.default.string,
    lastLabel: PropTypes__default.default.string,
    invalidNumberLabel: PropTypes__default.default.string,
    relativeToLabel: PropTypes__default.default.string,
    absoluteLabel: PropTypes__default.default.string,
    startDateLabel: PropTypes__default.default.string,
    endDateLabel: PropTypes__default.default.string,
    startTimeLabel: PropTypes__default.default.string,
    endTimeLabel: PropTypes__default.default.string,
    applyBtnLabel: PropTypes__default.default.string,
    cancelBtnLabel: PropTypes__default.default.string,
    backBtnLabel: PropTypes__default.default.string,
    resetBtnLabel: PropTypes__default.default.string,
    increment: PropTypes__default.default.string,
    decrement: PropTypes__default.default.string,
    hours: PropTypes__default.default.string,
    minutes: PropTypes__default.default.string,
    number: PropTypes__default.default.string,
    timePickerInvalidText: PropTypes__default.default.string,
    invalidText: PropTypes__default.default.string,
    amString: PropTypes__default.default.string,
    pmString: PropTypes__default.default.string
  }),
  /** Light version  */
  light: PropTypes__default.default.bool,
  /** The language locale used to format the days of the week, months, and numbers. */
  locale: PropTypes__default.default.string,
  /** Unique id of the component */
  id: PropTypes__default.default.string,
  /** Optionally renders only an icon rather than displaying the current selected time */
  hasIconOnly: PropTypes__default.default.bool,
  /** Allow repositioning the flyout menu */
  menuOffset: PropTypes__default.default.shape({
    left: PropTypes__default.default.number,
    top: PropTypes__default.default.number,
    inputTop: PropTypes__default.default.number,
    inputBottom: PropTypes__default.default.number
  }),
  /** Date picker types are single and range, default is range */
  datePickerType: PropTypes__default.default.string,
  /** If set to true it will render outside of the current DOM in a portal, otherwise render as a child */
  renderInPortal: PropTypes__default.default.bool,
  /** Auto reposition if flyout menu offscreen */
  useAutoPositioning: PropTypes__default.default.bool,
  style: PropTypes__default.default.objectOf(PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])),
  /** If is set to true Datepicker will close after date select */
  closeOnSelect: PropTypes__default.default.bool
};
var defaultProps = {
  testId: 'date-time-picker',
  defaultValue: null,
  dateTimeMask: dayjs.DAYJS_INPUT_FORMATS.RANGE,
  presets: DateConstants.PRESET_VALUES,
  intervals: [{
    label: 'minutes',
    value: DateConstants.INTERVAL_VALUES.MINUTES
  }, {
    label: 'hours',
    value: DateConstants.INTERVAL_VALUES.HOURS
  }, {
    label: 'days',
    value: DateConstants.INTERVAL_VALUES.DAYS
  }, {
    label: 'weeks',
    value: DateConstants.INTERVAL_VALUES.WEEKS
  }, {
    label: 'months',
    value: DateConstants.INTERVAL_VALUES.MONTHS
  }, {
    label: 'years',
    value: DateConstants.INTERVAL_VALUES.YEARS
  }],
  relatives: [{
    label: 'Today',
    value: DateConstants.RELATIVE_VALUES.TODAY
  }, {
    label: 'Yesterday',
    value: DateConstants.RELATIVE_VALUES.YESTERDAY
  }],
  expanded: false,
  disabled: false,
  invalid: false,
  showRelativeOption: true,
  hideBackButton: false,
  showCustomRangeLink: true,
  hasTimeInput: true,
  renderPresetTooltipText: null,
  onCancel: null,
  onApply: null,
  onClear: null,
  i18n: {
    toLabel: 'to',
    toNowLabel: 'to Now',
    calendarLabel: 'Calendar',
    presetLabels: [],
    intervalLabels: [],
    relativeLabels: [],
    customRangeLinkLabel: 'Custom Range',
    customRangeLabel: 'Custom range',
    relativeLabel: 'Relative',
    lastLabel: 'Last',
    invalidNumberLabel: 'Number is not valid',
    relativeToLabel: 'Relative to',
    absoluteLabel: 'Absolute',
    startTimeLabel: 'Start time',
    startDateLabel: 'Start Date',
    endDateLabel: 'End Date',
    startAriaLabel: 'Date time start',
    endAriaLabel: 'Date time end',
    endTimeLabel: 'End time',
    applyBtnLabel: 'Apply',
    cancelBtnLabel: 'Cancel',
    backBtnLabel: 'Back',
    resetBtnLabel: 'Clear',
    increment: 'Increment',
    decrement: 'Decrement',
    hours: 'hours',
    minutes: 'minutes',
    number: 'number',
    timePickerInvalidText: undefined,
    invalidText: 'Time is required',
    invalidDateText: 'Date is required',
    amString: 'AM',
    pmString: 'PM'
  },
  light: false,
  locale: 'en',
  id: undefined,
  hasIconOnly: false,
  menuOffset: undefined,
  datePickerType: 'range',
  renderInPortal: true,
  useAutoPositioning: false,
  style: {},
  closeOnSelect: true
};
var CalendarPortal = function CalendarPortal(_ref) {
  var anchorRef = _ref.anchorRef,
    _ref$isOpen = _ref.isOpen,
    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
    _ref$onClose = _ref.onClose,
    onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
    children = _ref.children;
  var _React$useState = React__default.default.useState(null),
    _React$useState2 = _slicedToArray__default.default(_React$useState, 2),
    container = _React$useState2[0],
    setContainer = _React$useState2[1];
  var portalContentRef = React__default.default.useRef(null);
  var _React$useState3 = React__default.default.useState({
      top: 0,
      left: 0
    }),
    _React$useState4 = _slicedToArray__default.default(_React$useState3, 2),
    position = _React$useState4[0],
    setPosition = _React$useState4[1];
  var portalWidth = 316;

  // Decide container once the anchor exists (modal or body)
  React__default.default.useEffect(function () {
    var anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
    if (!anchor) {
      setContainer(document.body);
      return;
    }
    var modal = anchor.closest('.cds--modal-container');
    setContainer(modal || document.body);
  }, [anchorRef, isOpen]);
  var updatePosition = React__default.default.useCallback(function () {
    var anchor = anchorRef.current;
    var portal = portalContentRef.current;
    var cont = container;
    if (!anchor || !portal || !cont) return false;
    var rect = anchor.getBoundingClientRect();
    var _window = window,
      innerWidth = _window.innerWidth,
      innerHeight = _window.innerHeight;
    var portalHeight = portal.offsetHeight;
    var inModal = cont !== document.body;
    var top;
    var left;
    if (inModal) {
      // ----- inside modal: absolute, relative to modal rect -----
      var modalRect = cont.getBoundingClientRect();
      var topSpace = rect.top - modalRect.top;
      var bottomSpace = modalRect.bottom - rect.bottom;
      var fitsBelow = bottomSpace >= portalHeight;
      var fitsAbove = topSpace >= portalHeight;
      top = fitsBelow ? rect.bottom - modalRect.top : fitsAbove ? rect.top - portalHeight - modalRect.top : rect.bottom - portalHeight - modalRect.top;
      left = rect.right - portalWidth - modalRect.left;

      // clamp within modal width
      var modalWidth = cont.clientWidth;
      left = Math.max(0, Math.min(left, modalWidth - portalWidth));
    } else {
      // ----- in body: FIXED, relative to viewport (no scroll offsets) -----
      var _topSpace = rect.top;
      var _bottomSpace = innerHeight - rect.bottom;
      var _fitsBelow = _bottomSpace >= portalHeight;
      var _fitsAbove = _topSpace >= portalHeight;
      top = _fitsBelow ? rect.bottom : _fitsAbove ? rect.top - portalHeight : Math.max(0, innerHeight - portalHeight);
      left = rect.right - portalWidth;
      left = Math.max(0, Math.min(left, innerWidth - portalWidth));
    }
    setPosition(function (prev) {
      return prev.top === top && prev.left === left ? prev : {
        top: top,
        left: left
      };
    });
    return true;
  }, [anchorRef, container]);

  // Run after open + after content lays out
  React__default.default.useLayoutEffect(function () {
    if (!isOpen) return;
    updatePosition();
  }, [isOpen, updatePosition]);

  // Reposition on resize/scroll. In modal, listen to modal scroller too.
  React__default.default.useEffect(function () {
    if (!isOpen || !container) return;
    var inModal = container !== document.body;
    var modalScroller = inModal ? container.querySelector('.cds--modal-content') || container : null;
    var onRescroll = function onRescroll() {
      return updatePosition();
    };
    window.addEventListener('resize', onRescroll);
    window.addEventListener('scroll', onRescroll, {
      capture: true
    });
    if (modalScroller) modalScroller.addEventListener('scroll', onRescroll, {
      capture: true
    });

    // If the calendar's size changes (months switch), keep it stuck to the anchor
    var ro = new ResizeObserver(onRescroll);
    if (portalContentRef.current) ro.observe(portalContentRef.current);

    // eslint-disable-next-line consistent-return
    return function () {
      window.removeEventListener('resize', onRescroll);
      window.removeEventListener('scroll', onRescroll, {
        capture: true
      });
      if (modalScroller) modalScroller.removeEventListener('scroll', onRescroll, {
        capture: true
      });
      ro.disconnect();
    };
  }, [isOpen, container, updatePosition]);

  // Close on outside click
  React__default.default.useEffect(function () {
    if (!isOpen) return;
    var handleClickOutside = function handleClickOutside(e) {
      var anchor = anchorRef.current;
      if (portalContentRef.current && !portalContentRef.current.contains(e.target) && anchor && !anchor.contains(e.target)) {
        onClose();
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    // eslint-disable-next-line consistent-return
    return function () {
      return document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isOpen, onClose, anchorRef]);
  if (!isOpen || !container) return null;
  var inModal = container !== document.body;
  var stylePosition = inModal ? 'absolute' : 'fixed';
  return /*#__PURE__*/ReactDOM__default.default.createPortal(/*#__PURE__*/React__default.default.createElement("div", {
    ref: portalContentRef,
    className: "datetime-picker-portal",
    style: {
      position: stylePosition,
      top: position.top,
      left: position.left,
      width: portalWidth,
      backgroundColor: 'white',
      padding: 10,
      zIndex: 9999,
      overflowY: 'auto',
      overflowX: 'hidden',
      maxHeight: 400
    }
  }, children), container);
};
var DateTimePicker = function DateTimePicker(_ref2) {
  var _style$zIndex2;
  var testId = _ref2.testId,
    defaultValue = _ref2.defaultValue,
    dateTimeMask = _ref2.dateTimeMask,
    presets = _ref2.presets,
    intervals = _ref2.intervals,
    relatives = _ref2.relatives,
    expanded = _ref2.expanded,
    disabled = _ref2.disabled,
    invalid = _ref2.invalid,
    showRelativeOption = _ref2.showRelativeOption,
    showCustomRangeLink = _ref2.showCustomRangeLink,
    hasTimeInput = _ref2.hasTimeInput,
    renderPresetTooltipText = _ref2.renderPresetTooltipText,
    hideBackButton = _ref2.hideBackButton,
    onCancel = _ref2.onCancel,
    onApply = _ref2.onApply,
    onClear = _ref2.onClear,
    i18n = _ref2.i18n,
    light = _ref2.light,
    locale = _ref2.locale,
    hasIconOnly = _ref2.hasIconOnly,
    menuOffset = _ref2.menuOffset,
    datePickerType = _ref2.datePickerType,
    renderInPortal = _ref2.renderInPortal,
    useAutoPositioning = _ref2.useAutoPositioning,
    style = _ref2.style,
    closeOnSelect = _ref2.closeOnSelect,
    others = _objectWithoutProperties__default.default(_ref2, _excluded);
  var id = React.useRef(others.id || uuid.v4()).current;
  React__default.default.useEffect(function () {
    {
      warning__default.default(false, 'The `DateTimePickerV2` is an experimental component and could be lacking unit test and documentation. Be aware that minor version bumps could introduce breaking changes. For the reasons listed above use of this component in production is highly discouraged') ;
    }
  }, []);
  var langDir = useLangDirection.useLangDirection();
  var mergedI18n = React.useMemo(function () {
    return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
  }, [i18n]);
  var is24hours = React.useMemo(function () {
    var _dateTimeMask$split = dateTimeMask.split(' '),
      _dateTimeMask$split2 = _slicedToArray__default.default(_dateTimeMask$split, 2),
      time = _dateTimeMask$split2[1];
    var hoursMask = time === null || time === void 0 ? void 0 : time.split(':')[0];
    return hoursMask ? hoursMask.includes('H') : false;
  }, [dateTimeMask]);
  var isSingleSelect = React.useMemo(function () {
    return datePickerType === 'single';
  }, [datePickerType]);

  // initialize the dayjs locale
  React.useEffect(function () {
    dayjs.default.locale(locale);
  }, [locale]);

  // State
  var _useDateTimePickerRan = dateTimePickerUtils.useDateTimePickerRangeKind(showRelativeOption),
    _useDateTimePickerRan2 = _slicedToArray__default.default(_useDateTimePickerRan, 3),
    customRangeKind = _useDateTimePickerRan2[0],
    setCustomRangeKind = _useDateTimePickerRan2[1],
    onCustomRangeChange = _useDateTimePickerRan2[2];
  var _useState = React.useState(false),
    _useState2 = _slicedToArray__default.default(_useState, 2),
    isCustomRange = _useState2[0],
    setIsCustomRange = _useState2[1];
  var _useState3 = React.useState(null),
    _useState4 = _slicedToArray__default.default(_useState3, 2),
    selectedPreset = _useState4[0],
    setSelectedPreset = _useState4[1];
  var _useState5 = React.useState(null),
    _useState6 = _slicedToArray__default.default(_useState5, 2),
    currentValue = _useState6[0],
    setCurrentValue = _useState6[1];
  var _useState7 = React.useState(null),
    _useState8 = _slicedToArray__default.default(_useState7, 2),
    lastAppliedValue = _useState8[0],
    setLastAppliedValue = _useState8[1];
  var _useState9 = React.useState(null),
    _useState10 = _slicedToArray__default.default(_useState9, 2),
    humanValue = _useState10[0],
    setHumanValue = _useState10[1];
  var _useState11 = React.useState(false),
    _useState12 = _slicedToArray__default.default(_useState11, 2),
    defaultTimeValueUpdate = _useState12[0],
    setDefaultTimeValueUpdate = _useState12[1];
  var _useState13 = React.useState(invalid),
    _useState14 = _slicedToArray__default.default(_useState13, 2),
    invalidState = _useState14[0],
    setInvalidState = _useState14[1];
  var relativeSelect = React.useRef(null);
  var containerRef = React.useRef();
  var dropdownRef = React.useRef();
  var datePickerRef = React.useRef();
  var updatedStyle = React.useMemo(function () {
    var _style$zIndex;
    return _objectSpread(_objectSpread({}, style), {}, {
      '--zIndex': (_style$zIndex = style.zIndex) !== null && _style$zIndex !== void 0 ? _style$zIndex : 0
    });
  }, [style]);
  var _useAbsoluteDateTimeV = dateTimePickerUtils.useAbsoluteDateTimeValue(),
    absoluteValue = _useAbsoluteDateTimeV.absoluteValue,
    setAbsoluteValue = _useAbsoluteDateTimeV.setAbsoluteValue,
    resetAbsoluteValue = _useAbsoluteDateTimeV.resetAbsoluteValue,
    isValid12HourTime = _useAbsoluteDateTimeV.isValid12HourTime,
    isValid24HourTime = _useAbsoluteDateTimeV.isValid24HourTime;
  var _useRelativeDateTimeV = dateTimePickerUtils.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 _useDateTimePickerKey = dateTimePickerUtils.useDateTimePickerKeyboardInteraction({
      expanded: expanded,
      setCustomRangeKind: setCustomRangeKind
    }),
    isExpanded = _useDateTimePickerKey.isExpanded,
    setIsExpanded = _useDateTimePickerKey.setIsExpanded,
    presetListRef = _useDateTimePickerKey.presetListRef,
    onFieldInteraction = _useDateTimePickerKey.onFieldInteraction,
    onNavigateRadioButton = _useDateTimePickerKey.onNavigateRadioButton,
    onNavigatePresets = _useDateTimePickerKey.onNavigatePresets,
    onFieldClick = _useDateTimePickerKey.onFieldClick;
  var _useState15 = React.useState(null),
    _useState16 = _slicedToArray__default.default(_useState15, 2),
    singleDateValue = _useState16[0],
    setSingleDateValue = _useState16[1];
  var _useState17 = React.useState(null),
    _useState18 = _slicedToArray__default.default(_useState17, 2),
    singleTimeValue = _useState18[0],
    setSingleTimeValue = _useState18[1];
  var _useState19 = React.useState(null),
    _useState20 = _slicedToArray__default.default(_useState19, 2),
    rangeStartTimeValue = _useState20[0],
    setRangeStartTimeValue = _useState20[1];
  var _useState21 = React.useState(null),
    _useState22 = _slicedToArray__default.default(_useState21, 2),
    rangeEndTimeValue = _useState22[0],
    setRangeEndTimeValue = _useState22[1];
  var _useState23 = React.useState(false),
    _useState24 = _slicedToArray__default.default(_useState23, 2),
    invalidRangeStartTime = _useState24[0],
    setInvalidRangeStartTime = _useState24[1];
  var _useState25 = React.useState(false),
    _useState26 = _slicedToArray__default.default(_useState25, 2),
    invalidRangeEndTime = _useState26[0],
    setInvalidRangeEndTime = _useState26[1];
  var _useState27 = React.useState(false),
    _useState28 = _slicedToArray__default.default(_useState27, 2),
    invalidRangeStartDate = _useState28[0],
    setInvalidRangeStartDate = _useState28[1];
  var dateTimePickerBaseValue = {
    kind: '',
    preset: {
      id: presets[0].id,
      label: presets[0].label,
      offset: presets[0].offset
    },
    relative: {
      lastNumber: null,
      lastInterval: intervals[0].value,
      relativeToWhen: relatives[0].value,
      relativeToTime: null
    },
    absolute: {
      startDate: null,
      startTime: null,
      endDate: null,
      endTime: null
    },
    single: {
      startDate: null,
      startTime: null
    }
  };
  var translatedMeridian = {
    AM: mergedI18n.amString,
    am: mergedI18n.amString,
    PM: mergedI18n.pmString,
    pm: mergedI18n.pmString
  };
  var getLocalizedTimeValue = function getLocalizedTimeValue(timeValue) {
    return !is24hours && timeValue ? timeValue === null || timeValue === void 0 ? void 0 : timeValue.replace(/am|AM|pm|PM/g, function (matched) {
      return translatedMeridian[matched];
    }) : timeValue;
  };
  var getTranslatedTimeValue = function getTranslatedTimeValue(timeValue) {
    if (!timeValue) {
      return timeValue;
    }
    var localizedMeridian = _defineProperty__default.default(_defineProperty__default.default({}, mergedI18n.amString, 'AM'), mergedI18n.pmString, 'PM');
    var time = timeValue.split(' ')[0];
    var meridian = localizedMeridian[timeValue.split(' ')[1]];
    return is24hours ? timeValue : "".concat(time, " ").concat(meridian);
  };

  /**
   * Transforms a default or selected value into a full blown returnable object
   * @param {Object} [preset] clicked preset
   * @param {string} preset.label preset label
   * @param {number} preset.offset preset offset in minutes
   * @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;
    var value = _objectSpread({}, dateTimePickerBaseValue);
    if (isCustomRange) {
      if (customRangeKind === DateConstants.PICKER_KINDS.RELATIVE) {
        value.relative = relativeValue;
      } else if (customRangeKind === DateConstants.PICKER_KINDS.ABSOLUTE) {
        value.absolute = _objectSpread(_objectSpread({}, absoluteValue), {}, {
          startTime: hasTimeInput ? rangeStartTimeValue : null,
          endTime: hasTimeInput ? rangeEndTimeValue : null
        });
      } else {
        value.single = _objectSpread(_objectSpread({}, singleDateValue), {}, {
          startTime: hasTimeInput && singleTimeValue !== '' ? singleTimeValue : null
        });
      }
      value.kind = customRangeKind;
    } else {
      var preset = presets.filter(function (p) {
        var filteredPreset;
        if (p.id) {
          filteredPreset = p.id === (clickedPreset ? clickedPreset.id : selectedPreset);
        } else {
          filteredPreset = p.offset === (clickedPreset ? clickedPreset.offset : selectedPreset);
        }
        return filteredPreset;
      }).pop();
      value.preset = preset;
      value.kind = DateConstants.PICKER_KINDS.PRESET;
    }
    setCurrentValue(value);
    var parsedValue = dateTimePickerUtils.parseValue(value, dateTimeMask, mergedI18n.toLabel, hasTimeInput);
    setHumanValue(getLocalizedTimeValue(parsedValue.readableValue));
    return _objectSpread(_objectSpread({}, value), parsedValue);
  };
  React.useEffect(function () {
    if (absoluteValue || relativeValue || singleDateValue || singleTimeValue || rangeStartTimeValue || rangeEndTimeValue) {
      renderValue();
    }
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [absoluteValue, relativeValue, singleDateValue, singleTimeValue, rangeStartTimeValue, rangeEndTimeValue]);
  var onDatePickerChange = function onDatePickerChange(_ref3) {
    var _ref4 = _slicedToArray__default.default(_ref3, 2),
      start = _ref4[0],
      end = _ref4[1];
    var newAbsolute = _objectSpread({}, absoluteValue);
    newAbsolute.start = start;
    newAbsolute.startDate = start ? dayjs.default(newAbsolute.start).format('MM/DD/YYYY') : '';
    newAbsolute.end = end;
    newAbsolute.endDate = end ? dayjs.default(newAbsolute.end).format('MM/DD/YYYY') : '';
    setAbsoluteValue(newAbsolute);
    setInvalidRangeStartTime(dateTimePickerUtils.invalidStartDate(newAbsolute.startTime, newAbsolute.endTime, newAbsolute));
    setInvalidRangeEndTime(dateTimePickerUtils.invalidStartDate(newAbsolute.startTime, newAbsolute.endTime, newAbsolute));
  };
  var onSingleDatePickerChange = function onSingleDatePickerChange(start) {
    var newSingleDate = _objectSpread({}, singleDateValue);
    newSingleDate.start = start;
    newSingleDate.startDate = dayjs.default(newSingleDate.start).format('MM/DD/YYYY');
    setSingleDateValue(newSingleDate);
    setInvalidRangeStartDate(!newSingleDate.startDate);
  };
  var onPresetClick = function onPresetClick(preset) {
    var _preset$id;
    setSelectedPreset((_preset$id = preset.id) !== null && _preset$id !== void 0 ? _preset$id : preset.offset);
    renderValue(preset);
  };
  var parseDefaultValue = function parseDefaultValue(parsableValue) {
    var currentCustomRangeKind = showRelativeOption ? DateConstants.PICKER_KINDS.RELATIVE : datePickerType === 'range' ? DateConstants.PICKER_KINDS.ABSOLUTE : DateConstants.PICKER_KINDS.SINGLE;
    if (parsableValue !== null) {
      if (parsableValue.timeRangeKind === DateConstants.PICKER_KINDS.PRESET) {
        // preset
        resetAbsoluteValue();
        resetRelativeValue();
        setCustomRangeKind(currentCustomRangeKind);
        onPresetClick(parsableValue.timeRangeValue);
      }
      if (parsableValue.timeRangeKind === DateConstants.PICKER_KINDS.RELATIVE) {
        // relative
        resetAbsoluteValue();
        setIsCustomRange(true);
        setCustomRangeKind(currentCustomRangeKind);
        setRelativeValue(parsableValue.timeRangeValue);
      }
      if (parsableValue.timeRangeKind === DateConstants.PICKER_KINDS.ABSOLUTE) {
        // absolute
        // range
        var absolute = _objectSpread({}, parsableValue.timeRangeValue);
        resetRelativeValue();
        setIsCustomRange(true);
        setCustomRangeKind(DateConstants.PICKER_KINDS.ABSOLUTE);
        if (!absolute.hasOwnProperty('start')) {
          absolute.start = dayjs.default("".concat(absolute.startDate, " ").concat(absolute.startTime)).valueOf();
        }
        if (!absolute.hasOwnProperty('end')) {
          absolute.end = dayjs.default("".concat(absolute.endDate, " ").concat(absolute.endTime)).valueOf();
        }
        absolute.startDate = dayjs.default(absolute.start).format('MM/DD/YYYY');
        absolute.startTime = is24hours ? dayjs.default(absolute.start).format('HH:mm') : dayjs.default(absolute.start).format('hh:mm A');
        absolute.endDate = dayjs.default(absolute.end).format('MM/DD/YYYY');
        absolute.endTime = is24hours ? dayjs.default(absolute.end).format('HH:mm') : dayjs.default(absolute.end).format('hh:mm A');
        setAbsoluteValue(absolute);
        setRangeStartTimeValue(absolute.startTime);
        setRangeEndTimeValue(absolute.endTime);
      }
      if (parsableValue.timeRangeKind === DateConstants.PICKER_KINDS.SINGLE) {
        // single
        var single = _objectSpread({}, parsableValue.timeSingleValue);
        resetRelativeValue();
        setIsCustomRange(true);
        setCustomRangeKind(DateConstants.PICKER_KINDS.SINGLE);
        if (!single.hasOwnProperty('start') && single.startDate && single.startTime) {
          single.start = dayjs.default("".concat(single.startDate, " ").concat(single.startTime)).valueOf();
        }
        single.startDate = single.start ? dayjs.default(single.start).format('MM/DD/YYYY') : null;
        single.startTime = single.start ? is24hours ? dayjs.default(single.start).format('HH:mm') : dayjs.default(single.start).format('hh:mm A') : null;
        setSingleDateValue(single);
        setSingleTimeValue(single.startTime);
      }
    } else {
      resetAbsoluteValue();
      resetRelativeValue();
      setCustomRangeKind(currentCustomRangeKind);
      onPresetClick(presets[0]);
    }
  };
  var toggleIsCustomRange = function toggleIsCustomRange(event) {
    // stop the event from bubbling
    event.stopPropagation();
    setIsCustomRange(!isCustomRange);

    // If value was changed reset when going back to Preset
    if (absoluteValue.startDate !== '' || relativeValue.lastNumber > 0) {
      if (selectedPreset) {
        onPresetClick(presets.filter(function (p) {
          var _p$id;
          return (_p$id = p.id) !== null && _p$id !== void 0 ? _p$id : p.offset === selectedPreset;
        })[0]);
        resetAbsoluteValue();
        resetRelativeValue();
      } else {
        onPresetClick(presets[0]);
        resetAbsoluteValue();
        resetRelativeValue();
      }
    }
  };
  React.useEffect(function () {
    /* istanbul ignore else */
    if (defaultValue || humanValue === null) {
      parseDefaultValue(defaultValue);
      setLastAppliedValue(defaultValue);
    }
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [defaultValue]);
  var tooltipValue = renderPresetTooltipText ? renderPresetTooltipText(currentValue) : datePickerType === 'range' ? dateTimePickerUtils.getIntervalValue({
    currentValue: currentValue,
    mergedI18n: mergedI18n,
    dateTimeMask: dateTimeMask,
    humanValue: humanValue
  }) : isSingleSelect ? humanValue : dateTimeMask;
  var disableAbsoluteApply = isCustomRange && customRangeKind === DateConstants.PICKER_KINDS.ABSOLUTE && (invalidRangeStartTime || invalidRangeEndTime || (absoluteValue === null || absoluteValue === void 0 ? void 0 : absoluteValue.startDate) === '' && (absoluteValue === null || absoluteValue === void 0 ? void 0 : absoluteValue.endDate) === '' || (hasTimeInput ? !rangeStartTimeValue || !rangeEndTimeValue : false));
  var disableRelativeApply = isCustomRange && customRangeKind === DateConstants.PICKER_KINDS.RELATIVE && (relativeLastNumberInvalid || relativeToTimeInvalid);
  var disableApply = disableRelativeApply || disableAbsoluteApply;
  React.useEffect(function () {
    return setInvalidState(invalid);
  }, [invalid]);
  var onApplyClick = function onApplyClick() {
    var value = renderValue();
    var returnValue = {
      timeRangeKind: value.kind,
      timeRangeValue: null,
      timeSingleValue: null
    };
    var isValid = true;
    switch (value.kind) {
      case DateConstants.PICKER_KINDS.ABSOLUTE:
        value.absolute.startTime = getLocalizedTimeValue(value.absolute.startTime);
        value.absolute.endTime = getLocalizedTimeValue(value.absolute.endTime);
        returnValue.timeRangeValue = _objectSpread(_objectSpread({}, value.absolute), {}, {
          humanValue: humanValue,
          tooltipValue: tooltipValue,
          ISOStart: value.absolute.start ? new Date(value.absolute.start).toISOString() : undefined,
          ISOEnd: value.absolute.end ? new Date(value.absolute.end).toISOString() : undefined
        });
        break;
      case DateConstants.PICKER_KINDS.SINGLE:
        isValid = value.single.startDate && !invalidRangeStartDate && (hasTimeInput ? !invalidRangeStartTime && value.single.startTime : true);
        setInvalidRangeStartTime(hasTimeInput ? !value.single.startTime : false);
        setInvalidRangeStartDate(!value.single.startDate);
        value.single.startTime = getLocalizedTimeValue(value.single.startTime);
        returnValue.timeSingleValue = _objectSpread(_objectSpread({}, value.single), {}, {
          humanValue: humanValue,
          tooltipValue: tooltipValue,
          ISOStart: new Date(value.single.start).toISOString()
        });
        setDefaultTimeValueUpdate(!defaultTimeValueUpdate);
        break;
      case DateConstants.PICKER_KINDS.RELATIVE:
        returnValue.timeRangeValue = _objectSpread(_objectSpread({}, value.relative), {}, {
          humanValue: humanValue,
          tooltipValue: tooltipValue
        });
        break;
      default:
        returnValue.timeRangeValue = _objectSpread(_objectSpread({}, value.preset), {}, {
          tooltipValue: tooltipValue
        });
        break;
    }
    setLastAppliedValue(returnValue);
    if (onApply && isValid) {
      setIsExpanded(false);
      onApply(returnValue);
    }
  };
  var onCancelClick = function onCancelClick() {
    parseDefaultValue(lastAppliedValue);
    setIsExpanded(false);

    /* istanbul ignore else */
    if (onCancel) {
      onCancel();
    }
  };
  var onClearClick = function onClearClick() {
    setSingleDateValue({
      start: null,
      startDate: null
    });
    setSingleTimeValue(null);
    setDefaultTimeValueUpdate(!defaultTimeValueUpdate);
    setInvalidRangeStartDate(false);
    setIsExpanded(false);
    var returnValue = {
      timeRangeKind: DateConstants.PICKER_KINDS.SINGLE,
      timeRangeValue: null,
      timeSingleValue: null
    };
    returnValue.timeSingleValue = {
      ISOStart: null,
      humanValue: dateTimeMask,
      start: null,
      startDate: null,
      startTime: null,
      tooltipValue: dateTimeMask
    };
    onClear(returnValue);
  };
  var closeDropdown = dateTimePickerUtils.useCloseDropdown({
    isExpanded: isExpanded,
    isCustomRange: isCustomRange,
    setIsCustomRange: setIsCustomRange,
    setIsExpanded: setIsExpanded,
    parseDefaultValue: parseDefaultValue,
    defaultValue: defaultValue,
    setCustomRangeKind: setCustomRangeKind,
    lastAppliedValue: lastAppliedValue,
    singleTimeValue: singleTimeValue,
    setSingleDateValue: setSingleDateValue,
    setSingleTimeValue: setSingleTimeValue
  });
  var onClickOutside = dateTimePickerUtils.useDateTimePickerClickOutside(closeDropdown, containerRef);
  componentUtilityFunctions.useOnClickOutside(dropdownRef, onClickOutside);

  // eslint-disable-next-line react/prop-types
  var CustomFooter = function CustomFooter() {
    return /*#__PURE__*/React__default.default.createElement("div", {
      className: "".concat(iotPrefix, "--date-time-picker__menu-btn-set")
    }, isCustomRange && !isSingleSelect && !hideBackButton ? /*#__PURE__*/React__default.default.createElement(Button, _extends__default.default({
      kind: "secondary",
      className: "".concat(iotPrefix, "--date-time-picker__menu-btn ").concat(iotPrefix, "--date-time-picker__menu-btn-back"),
      size: "md"
    }, others, {
      onClick: toggleIsCustomRange,
      onKeyUp: componentUtilityFunctions.handleSpecificKeyDown(['Enter', ' '], toggleIsCustomRange)
    }), mergedI18n.backBtnLabel, "id=", "back-".concat(others.id)) : isSingleSelect ? /*#__PURE__*/React__default.default.createElement(Button, _extends__default.default({
      kind: "secondary",
      className: "".concat(iotPrefix, "--date-time-picker__menu-btn ").concat(iotPrefix, "--date-time-picker__menu-btn-reset"),
      size: "md"
    }, others, {
      id: "clear-".concat(others.id),
      onClick: onClearClick,
      onMouseDown: function onMouseDown(e) {
        return e.preventDefault();
      },
      onKeyUp: componentUtilityFunctions.handleSpecificKeyDown(['Enter', ' '], onClearClick)
    }), mergedI18n.resetBtnLabel) : /*#__PURE__*/React__default.default.createElement(Button, _extends__default.default({
      kind: "secondary",
      className: "".concat(iotPrefix, "--date-time-picker__menu-btn ").concat(iotPrefix, "--date-time-picker__menu-btn-cancel"),
      onClick: onCancelClick,
      size: "md"
    }, others, {
      id: "cancel-".concat(others.id),
      onKeyUp: componentUtilityFunctions.handleSpecificKeyDown(['Enter', ' '], onCancelClick)
    }), mergedI18n.cancelBtnLabel), /*#__PURE__*/React__default.default.createElement(Button, _extends__default.default({
      kind: "primary",
      className: "".concat(iotPrefix, "--date-time-picker__menu-btn ").concat(iotPrefix, "--date-time-picker__menu-btn-apply")
    }, others, {
      id: "apply-".concat(others.id),
      onClick: onApplyClick,
      onKeyUp: componentUtilityFunctions.handleSpecificKeyDown(['Enter', ' '], onApplyClick),
      onMouseDown: function onMouseDown(e) {
        return e.preventDefault();
      },
      size: "md",
      disabled: customRangeKind === DateConstants.PICKER_KINDS.SINGLE ? false : disableApply
    }), mergedI18n.applyBtnLabel));
  };
  var handleRangeTimeValueChange = function handleRangeTimeValueChange(startState, endState) {
    var translatedStartTimeValue = getTranslatedTimeValue(startState);
    var translatedEndTimeValue = getTranslatedTimeValue(endState);
    setRangeStartTimeValue(translatedStartTimeValue);
    setRangeEndTimeValue(translatedEndTimeValue);
    setInvalidRangeStartTime(absoluteValue && dateTimePickerUtils.invalidStartDate(translatedStartTimeValue, translatedEndTimeValue, absoluteValue) || (is24hours ? !isValid24HourTime(translatedStartTimeValue) : !isValid12HourTime(translatedStartTimeValue)));
    setInvalidRangeEndTime(absoluteValue && dateTimePickerUtils.invalidEndDate(translatedStartTimeValue, translatedEndTimeValue, absoluteValue) || (is24hours ? !isValid24HourTime(translatedEndTimeValue) : !isValid12HourTime(translatedEndTimeValue)));
  };
  var handleSingleTimeValueChange = function handleSingleTimeValueChange(startState) {
    var translatedTimeValue = getTranslatedTimeValue(startState);
    setSingleTimeValue(translatedTimeValue);
    setInvalidRangeStartTime(is24hours ? !isValid24HourTime(translatedTimeValue) : !isValid12HourTime(translatedTimeValue));
  };
  var menuOffsetLeft = menuOffset !== null && menuOffset !== void 0 && menuOffset.left ? menuOffset.left : langDir === 'ltr' ? 0 : hasIconOnly ? -15 : 288;
  var menuOffsetTop = menuOffset !== null && menuOffset !== void 0 && menuOffset.top ? menuOffset.top : 0;
  var _useCustomHeight = dateTimePickerUtils.useCustomHeight({
      containerRef: containerRef,
      isSingleSelect: isSingleSelect,
      isCustomRange: isCustomRange,
      showRelativeOption: showRelativeOption,
      customRangeKind: customRangeKind,
      setIsExpanded: setIsExpanded
    }),
    _useCustomHeight2 = _slicedToArray__default.default(_useCustomHeight, 9),
    offTop = _useCustomHeight2[0],
    inputTop = _useCustomHeight2[2],
    inputBottom = _useCustomHeight2[3],
    customHeight = _useCustomHeight2[4],
    maxHeight = _useCustomHeight2[5],
    invalidDateWarningHeight = _useCustomHeight2[6],
    invalidTimeWarningHeight = _useCustomHeight2[7],
    timeInputHeight = _useCustomHeight2[8];
  var direction = useAutoPositioning ? offTop ? FlyoutMenu.FlyoutMenuDirection.BottomEnd : FlyoutMenu.FlyoutMenuDirection.TopEnd : FlyoutMenu.FlyoutMenuDirection.BottomEnd;
  var splitToken = humanValue !== null && humanValue !== void 0 && humanValue.includes(' hh') ? ' hh' : ' HH';
  var datePlaceHolder = humanValue === null || humanValue === void 0 ? void 0 : humanValue.split(splitToken)[0];
  var datePickerContent = /*#__PURE__*/React__default.default.createElement("div", {
    ref: dropdownRef,
    className: "".concat(iotPrefix, "--date-time-picker__menu-scroll"),
    style: {
      '--wrapper-width': '20rem',
      height: customHeight,
      maxHeight: maxHeight + (invalidRangeStartTime || invalidRangeEndTime ? invalidTimeWarningHeight : 0) + (invalidRangeStartDate ? invalidDateWarningHeight : 0) - (!hasTimeInput ? timeInputHeight : 0)
    },
    role: "presentation",
    onClick: function onClick(event) {
      return event.stopPropagation();
    } // need to stop the event so that it will not close the menu
    ,
    onKeyDown: function onKeyDown(event) {
      return event.stopPropagation();
    } // need to stop the event so that it will not close the menu
    ,
    tabIndex: "-1"
  }, !isCustomRange ?
  /*#__PURE__*/
  // Catch bubbled Up/Down keys from the preset list and move focus.
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
  React__default.default.createElement("div", {
    ref: presetListRef,
    onKeyDown: componentUtilityFunctions.handleSpecificKeyDown(['ArrowUp', 'ArrowDown'], onNavigatePresets)
  }, /*#__PURE__*/React__default.default.createElement(react.OrderedList, {
    nested: false
  }, tooltipValue ? /*#__PURE__*/React__default.default.createElement(react.ListItem, {
    className: "".concat(iotPrefix, "--date-time-picker__listitem ").concat(iotPrefix, "--date-time-picker__listitem--current")
  }, tooltipValue) : null, showCustomRangeLink ? /*#__PURE__*/React__default.default.createElement(react.ListItem, {
    onClick: toggleIsCustomRange,
    onKeyDown: componentUtilityFunctions.handleSpecificKeyDown(['Enter', ' '], toggleIsCustomRange),
    className: "".concat(iotPrefix, "--date-time-picker__listitem ").concat(iotPrefix, "--date-time-picker__listitem--preset ").concat(iotPrefix, "--date-time-picker__listitem--custom"),
    tabIndex: 0
  }, mergedI18n.customRangeLinkLabel) : null, presets.map(function (preset, i) {
    var _preset$id2;
    return /*#__PURE__*/React__default.default.createElement(react.ListItem, {
      key: i,
      onClick: function onClick() {
        return onPresetClick(preset);
      },
      onKeyDown: componentUtilityFunctions.handleSpecificKeyDown(['Enter', ' '], function () {
        return onPresetClick(preset);
      }),
      className: classnames__default.default("".concat(iotPrefix, "--date-time-picker__listitem ").concat(iotPrefix, "--date-time-picker__listitem--preset"), _defineProperty__default.default({}, "".concat(iotPrefix, "--date-time-picker__listitem--preset-selected"), selectedPreset === ((_preset$id2 = preset.id) !== null && _preset$id2 !== void 0 ? _preset$id2 : preset.offset))),
      tabIndex: 0
    }, mergedI18n.presetLabels[i] || preset.label);
  }))) : /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(iotPrefix, "--date-time-picker__custom-wrapper"),
    style: {
      '--wrapper-width': '20rem'
    }
  }, showRelativeOption ? /*#__PURE__*/React__default.default.createElement(react.FormGroup, {
    legendText: mergedI18n.customRangeLabel,
    className: "".concat(iotPrefix, "--date-time-picker__menu-formgroup")
  }, /*#__PURE__*/React__default.default.createElement(react.RadioButtonGroup, {
    valueSelected: customRangeKind,
    onChange: onCustomRangeChange,
    name: "".concat(id, "-radiogroup")
  }, /*#__PURE__*/React__default.default.createElement(react.RadioButton, {
    value: DateConstants.PICKER_KINDS.RELATIVE,
    id: "".concat(id, "-relative"),
    labelText: mergedI18n.relativeLabel,
    onKeyDown: componentUtilityFunctions.handleSpecificKeyDown(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'], onNavigateRadioButton)
  }), /*#__PURE__*/React__default.default.createElement(react.RadioButton, {
    value: DateConstants.PICKER_KINDS.ABSOLUTE,
    id: "".concat(id, "-absolute"),
    labelText: mergedI18n.absoluteLabel,
    onKeyDown: componentUtilityFunctions.handleSpecificKeyDown(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'], onNavigateRadioButton)
  }))) : null, showRelativeOption && customRangeKind === DateConstants.PICKER_KINDS.RELATIVE ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(react.FormGroup, {
    legendText: mergedI18n.lastLabel,
    className: "".concat(iotPrefix, "--date-time-picker__menu-formgroup")
  }, /*#__PURE__*/React__default.default.createElement("div", {
    className: classnames__default.default("".concat(iotPrefix, "--date-time-picker__fields-wrapper"), "".concat(iotPrefix, "--date-time-picker__fields-wrapper--with-gap"))
  }, /*#__PURE__*/React__default.default.createElement(react.Layer, null, /*#__PURE__*/React__default.default.createElement(react.NumberInput, {
    id: "".concat(id, "-last-number"),
    invalidText: mergedI18n.invalidNumberLabel,
    step: 1,
    min: 0,
    value: relativeValue ? relativeValue.lastNumber : 0,
    onChange: onRelativeLastNumberChange,
    translateWithId: function translateWithId(messageId) {
      return messageId === 'increment.number' ? "".concat(i18n.increment, " ").concat(i18n.number) : messageId === 'decrement.number' ? "".concat(i18n.decrement, " ").concat(i18n.number) : null;
    }
  })), /*#__PURE__*/React__default.default.createElement(react.Layer, null, /*#__PURE__*/React__default.default.createElement(react.Select, _extends__default.default({}, others, {
    id: "".concat(id, "-last-interval"),
    defaultValue: relativeValue ? relativeValue.lastInterval : DateConstants.INTERVAL_VALUES.MINUTES,
    onChange: onRelativeLastIntervalChange,
    hideLabel: true
  }), intervals.map(function (interval, i) {
    return /*#__PURE__*/React__default.default.createElement(react.SelectItem, {
      key: i,
      value: interval.value,
      text: mergedI18n.intervalLabels[i] || interval.label
    });
  }))))), /*#__PURE__*/React__default.default.createElement(react.FormGroup, {
    legendText: mergedI18n.relativeToLabel,
    className: "".concat(iotPrefix, "--date-time-picker__menu-formgroup")
  }, /*#__PURE__*/React__default.default.createElement("div", {
    className: classnames__default.default("".concat(iotPrefix, "--date-time-picker__fields-wrapper"), "".concat(iotPrefix, "--date-time-picker__fields-wrapper--with-gap"))
  }, /*#__PURE__*/React__default.default.createElement(react.Layer, null, /*#__PURE__*/React__default.default.createElement(react.Select, _extends__default.default({}, others, {
    ref: relativeSelect,
    id: "".concat(id, "-relative-to-when"),
    defaultValue: relativeValue ? relativeValue.relativeToWhen : '',
    onChange: onRelativeToWhenChange,
    hideLabel: true
  }), relatives.map(function (relative, i) {
    return /*#__PURE__*/React__default.default.createElement(react.SelectItem, {
      key: i,
      value: relative.value,
      text: mergedI18n.relativeLabels[i] || relative.label
    });
  }))), hasTimeInput ? /*#__PURE__*/React__default.default.createElement(react.Layer, null, /*#__PURE__*/React__default.default.createElement(TimePickerSpinner.default, {
    id: "".concat(id, "-relative-to-time"),
    invalid: relativeToTimeInvalid,
    value: relativeValue ? relativeValue.relativeToTime : '',
    i18n: i18n,
    onChange: onRelativeToTimeChange,
    spinner: true,
    autoComplete: "off"
  })) : null))) : /*#__PURE__*/React__default.default.createElement("div", {
    "data-testid": "".concat(testId, "-datepicker")
  }, /*#__PURE__*/React__default.default.createElement(react.FormGroup, {
    className: "".concat(iotPrefix, "--date-time-picker__menu-formgroup")
  }, /*#__PURE__*/React__default.default.createElement(react.Layer, null, /*#__PURE__*/React__default.default.createElement(react.DatePicker, {
    datePickerType: datePickerType,
    dateFormat: "m/d/Y",
    onChange: datePickerType === 'single' ? onSingleDatePickerChange : onDatePickerChange,
    value: absoluteValue && datePickerType === 'range' ? [absoluteValue.startDate, absoluteValue.endDate] : singleDateValue && datePickerType === 'single' ? [singleDateValue === null || singleDateValue === void 0 ? void 0 : singleDateValue.startDate] : null,
    locale: locale === null || locale === void 0 ? void 0 : locale.split('-')[0],
    closeOnSelect: closeOnSelect
  }, /*#__PURE__*/React__default.default.createElement(react.DatePickerInput, {
    labelText: mergedI18n.startDateLabel,
    "aria-label": mergedI18n.startAriaLabel,
    id: "".concat(id, "-date-picker-input-start"),
    invalid: invalidRangeStartDate,
    invalidText: mergedI18n.invalidDateText,
    placeholder: datePlaceHolder
  }), datePickerType === 'range' ? /*#__PURE__*/React__default.default.createElement(react.DatePickerInput, {
    labelText: mergedI18n.endDateLabel,
    "aria-label": mergedI18n.endAriaLabel,
    id: "".concat(id, "-date-picker-input-end")
  }) : null))), hasTimeInput ? /*#__PURE__*/React__default.default.createElement(react.FormGroup, {
    legendText: "",
    className: "".concat(iotPrefix, "--date-time-picker__menu-formgroup")
  }, /*#__PURE__*/React__default.default.createElement(react.Layer, null, /*#__PURE__*/React__default.default.createElement(TimePickerDropdown.default, {
    className: "".concat(iotPrefix, "--time-picker-dropdown"),
    id: id,
    key: defaultTimeValueUpdate,
    value: isSingleSelect ? getLocalizedTimeValue(singleTimeValue) : getLocalizedTimeValue(rangeStartTimeValue),
    secondaryValue: getLocalizedTimeValue(rangeEndTimeValue),
    hideLabel: !mergedI18n.startTimeLabel,
    hideSecondaryLabel: !mergedI18n.endTimeLabel,
    onChange: function onChange(startState, endState) {
      return isSingleSelect ? handleSingleTimeValueChange(startState) : handleRangeTimeValueChange(startState, endState);
    },
    type: isSingleSelect ? 'single' : 'range',
    invalid: [invalidRangeStartTime, invalidRangeEndTime],
    i18n: {
      labelText: mergedI18n.startTimeLabel,
      secondaryLabelText: mergedI18n.endTimeLabel,
      invalidText: mergedI18n.timePickerInvalidText,
      amString: mergedI18n.amString,
      pmString: mergedI18n.pmString
    },
    size: "md",
    testId: "".concat(testId, "--time-picker-dropdown"),
    style: {
      zIndex: "".concat(((_style$zIndex2 = style.zIndex) !== null && _style$zIndex2 !== void 0 ? _style$zIndex2 : 0) + 10000)
    },
    is24hours: is24hours
  }))) : /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(iotPrefix, "--date-time-picker__no-formgroup")
  }))));
  var tooltipField = /*#__PURE__*/React__default.default.createElement("div", {
    className: classnames__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, "".concat(iotPrefix, "--date-time-picker__box--full"), !hasIconOnly), "".concat(iotPrefix, "--date-time-picker__box--light"), light), "".concat(iotPrefix, "--date-time-picker__box--disabled"), disabled), "".concat(iotPrefix, "--date-time-picker__box--invalid"), invalidState))
  }, !hasIconOnly ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
    "data-testid": "".concat(testId, "__field"),
    className: "".concat(iotPrefix, "--date-time-picker__field")
  }, isExpanded || currentValue && currentValue.kind !== DateConstants.PICKER_KINDS.PRESET || humanValue ? /*#__PURE__*/React__default.default.createElement("span", {
    className: classnames__default.default(_defineProperty__default.default({}, "".concat(iotPrefix, "--date-time-picker__disabled"), disabled || isSingleSelect && (!(singleDateValue !== null && singleDateValue !== void 0 && singleDateValue.startDate) || (hasTimeInput ? !singleTimeValue : false)))),
    title: humanValue
  }, humanValue) : null), renderInPortal ? /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(iotPrefix, "--in-portal-calender-icon")
  }, invalidState ? /*#__PURE__*/React__default.default.createElement(iconsReact.WarningFilled, null) : /*#__PURE__*/React__default.default.createElement(iconsReact.Calendar, null)) : '') : null, renderInPortal === true ? /*#__PURE__*/React__default.default.createElement(CalendarPortal, {
    anchorRef: datePickerRef,
    isOpen: isExpanded
  }, datePickerContent, CustomFooter()) : /*#__PURE__*/React__default.default.createElement(FlyoutMenu.default, {
    isOpen: isExpanded,
    buttonSize: hasIconOnly ? FlyoutMenu.FlyoutMenuButtonSize.Default : FlyoutMenu.FlyoutMenuButtonSize.Small,
    renderIcon: invalidState ? iconsReact.WarningFilled : iconsReact.Calendar,
    disabled: disabled,
    buttonProps: {
      size: 'lg',
      tooltipPosition: 'top',
      tabIndex: -1,
      className: classnames__default.default("".concat(iotPrefix, "--date-time-picker--trigger-button"), _defineProperty__default.default(_defineProperty__default.default({}, "".concat(iotPrefix, "--date-time-picker--trigger-button--invalid"), invalid), "".concat(iotPrefix, "--date-time-picker--trigger-button--disabled"), disabled))
    },
    hideTooltip: true,
    passive: false,
    triggerId: "test-trigger-".concat(id),
    light: light,
    menuOffset: {
      top: menuOffsetTop,
      left: menuOffsetLeft,
      inputTop: inputTop,
      inputBottom: inputBottom
    },
    testId: "".concat(testId, "-datepicker-flyout"),
    direction: direction,
    tooltipFocusTrap: false,
    renderInPortal: renderInPortal,
    useAutoPositioning: false,
    tooltipClassName: classnames__default.default("".concat(iotPrefix, "--date-time-picker--tooltip"), _defineProperty__default.default({}, "".concat(iotPrefix, "--date-time-picker--tooltip--icon"), hasIconOnly)),
    tooltipContentClassName: "".concat(iotPrefix, "--date-time-picker--menu"),
    style: updatedStyle
  }, datePickerContent, CustomFooter()));
  return /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(iotPrefix, "--date-time-pickerv2"),
    ref: containerRef
  }, /*#__PURE__*/React__default.default.createElement("div", {
    ref: datePickerRef,
    "data-testid": testId,
    id: "".concat(id, "-").concat(iotPrefix, "--date-time-pickerv2__wrapper"),
    className: classnames__default.default("".concat(iotPrefix, "--date-time-pickerv2__wrapper"), _defineProperty__default.default(_defineProperty__default.default({}, "".concat(iotPrefix, "--date-time-pickerv2__wrapper--disabled"), disabled), "".concat(iotPrefix, "--date-time-pickerv2__wrapper--invalid"), invalidState)),
    style: {
      '--wrapper-width': hasIconOnly ? '3rem' : '20rem'
    },
    role: "button",
    onClick: onFieldClick,
    onKeyDown: componentUtilityFunctions.handleSpecificKeyDown(['Enter', ' ', 'Escape', 'ArrowDown'], function (event) {
      // the onApplyClick event gets blocked when called via the keyboard from the flyout menu's
      // custom footer. This is a catch to ensure the onApplyCLick is called correctly for preset
      // ranges via the keyboard.
      if ((event.key === 'Enter' || event.key === ' ') && event.target.classList.contains("".concat(iotPrefix, "--date-time-picker__menu-btn-apply")) && !isCustomRange) {
        onApplyClick();
      }
      onFieldInteraction(event);
    }),
    tabIndex: 0
  }, tooltipField), invalidState && !hasIconOnly ? /*#__PURE__*/React__default.default.createElement("p", {
    className: classnames__default.default("".concat(prefix, "--form__helper-text"), "".concat(iotPrefix, "--date-time-picker__helper-text--invalid"))
  }, mergedI18n.invalidText) : null);
};
DateTimePicker.propTypes = propTypes;
DateTimePicker.defaultProps = defaultProps;
DateTimePicker.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "DateTimePicker",
  "props": {
    "testId": {
      "defaultValue": {
        "value": "'date-time-picker'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "defaultValue": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "default value for the picker",
      "type": {
        "name": "custom",
        "raw": "DateTimePickerDefaultValuePropTypes"
      },
      "required": false
    },
    "dateTimeMask": {
      "defaultValue": {
        "value": "DAYJS_INPUT_FORMATS.RANGE",
        "computed": true
      },
      "description": "the dayjs.js format for the human readable interval value",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "presets": {
      "defaultValue": {
        "value": "PRESET_VALUES",
        "computed": true
      },
      "description": "a list of options to for the default presets",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "id": {
              "name": "string",
              "required": false
            },
            "label": {
              "name": "string",
              "required": false
            },
            "offset": {
              "name": "number",
              "required": false
            }
          }
        }
      },
      "required": false
    },
    "intervals": {
      "defaultValue": {
        "value": "[\n  {\n    label: 'minutes',\n    value: INTERVAL_VALUES.MINUTES,\n  },\n  {\n    label: 'hours',\n    value: INTERVAL_VALUES.HOURS,\n  },\n  {\n    label: 'days',\n    value: INTERVAL_VALUES.DAYS,\n  },\n  {\n    label: 'weeks',\n    value: INTERVAL_VALUES.WEEKS,\n  },\n  {\n    label: 'months',\n    value: INTERVAL_VALUES.MONTHS,\n  },\n  {\n    label: 'years',\n    value: INTERVAL_VALUES.YEARS,\n  },\n]",
        "computed": false
      },
      "description": "a list of options to put on the 'Last' interval dropdown",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "label": {
              "name": "string",
              "required": false
            },
            "value": {
              "name": "string",
              "required": false
            }
          }
        }
      },
      "required": false
    },
    "relatives": {
      "defaultValue": {
        "value": "[\n  {\n    label: 'Today',\n    value: RELATIVE_VALUES.TODAY,\n  },\n  {\n    label: 'Yesterday',\n    value: RELATIVE_VALUES.YESTERDAY,\n  },\n]",
        "computed": false
      },
      "description": "a list of options to put on the 'Relative to' dropdown",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "label": {
              "name": "string",
              "required": false
            },
            "value": {
              "name": "string",
              "required": false
            }
          }
        }
      },
      "required": false
    },
    "expanded": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "show the picker in the expanded state",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "disable the input",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "invalid": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "specify the input in invalid state",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "showRelativeOption": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "description": "show the relative custom range picker",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "hideBackButton": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "hide the back button and display cancel button while only using absolute range selector",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "showCustomRangeLink": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "description": "show the custom range link",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "hasTimeInput": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "description": "show time input fields",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "renderPresetTooltipText": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Function hook used to provide the appropriate tooltip content for the preset time\npicker. This function takes in the currentValue and should return a string message.",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onCancel": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "triggered on cancel",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onApply": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "triggered on apply with returning object with similar signature to defaultValue",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onClear": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "call back function for clear values in single select",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  toLabel: 'to',\n  toNowLabel: 'to Now',\n  calendarLabel: 'Calendar',\n  presetLabels: [],\n  intervalLabels: [],\n  relativeLabels: [],\n  customRangeLinkLabel: 'Custom Range',\n  customRangeLabel: 'Custom range',\n  relativeLabel: 'Relative',\n  lastLabel: 'Last',\n  invalidNumberLabel: 'Number is not valid',\n  relativeToLabel: 'Relative to',\n  absoluteLabel: 'Absolute',\n  startTimeLabel: 'Start time',\n  startDateLabel: 'Start Date',\n  endDateLabel: 'End Date',\n  startAriaLabel: 'Date time start',\n  endAriaLabel: 'Date time end',\n  endTimeLabel: 'End time',\n  applyBtnLabel: 'Apply',\n  cancelBtnLabel: 'Cancel',\n  backBtnLabel: 'Back',\n  resetBtnLabel: 'Clear',\n  increment: 'Increment',\n  decrement: 'Decrement',\n  hours: 'hours',\n  minutes: 'minutes',\n  number: 'number',\n  timePickerInvalidText: undefined,\n  invalidText: 'Time is required',\n  invalidDateText: 'Date is required',\n  amString: 'AM',\n  pmString: 'PM',\n}",
        "computed": false
      },
      "description": "All the labels that need translation",
      "type": {
        "name": "shape",
        "value": {
          "toLabel": {
            "name": "string",
            "required": false
          },
          "toNowLabel": {
            "name": "string",
            "required": false
          },
          "calendarLabel": {
            "name": "string",
            "required": false
          },
          "presetLabels": {
            "name": "arrayOf",
            "value": {
              "name": "string"
            },
            "required": false
          },
          "intervalLabels": {
            "name": "arrayOf",
            "value": {
              "name": "string"
            },
            "required": false
          },
          "relativeLabels": {
            "name": "arrayOf",
            "value": {
              "name": "string"
            },
            "required": false
          },
          "customRangeLinkLabel": {
            "name": "string",
            "required": false
          },
          "customRangeLabel": {
            "name": "string",
            "required": false
          },
          "relativeLabel": {
            "name": "string",
            "required": false
          },
          "lastLabel": {
            "name": "string",
            "required": false
          },
          "invalidNumberLabel": {
            "name": "string",
            "required": false
          },
          "relativeToLabel": {
            "name": "string",
            "required": false
          },
          "absoluteLabel": {
            "name": "string",
            "required": false
          },
          "startDateLabel": {
            "name": "string",
            "required": false
          },
          "endDateLabel": {
            "name": "string",
            "required": false
          },
          "startTimeLabel": {
            "name": "string",
            "required": false
          },
          "endTimeLabel": {
            "name": "string",
            "required": false
          },
          "applyBtnLabel": {
            "name": "string",
            "required": false
          },
          "cancelBtnLabel": {
            "name": "string",
            "required": false
          },
          "backBtnLabel": {
            "name": "string",
            "required": false
          },
          "resetBtnLabel": {
            "name": "string",
            "required": false
          },
          "increment": {
            "name": "string",
            "required": false
          },
          "decrement": {
            "name": "string",
            "required": false
          },
          "hours": {
            "name": "string",
            "required": false
          },
          "minutes": {
            "name": "string",
            "required": false
          },
          "number": {
            "name": "string",
            "required": false
          },
          "timePickerInvalidText": {
            "name": "string",
            "required": false
          },
          "invalidText": {
            "name": "string",
            "required": false
          },
          "amString": {
            "name": "string",
            "required": false
          },
          "pmString": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "light": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Light version",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "locale": {
      "defaultValue": {
        "value": "'en'",
        "computed": false
      },
      "description": "The language locale used to format the days of the week, months, and numbers.",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "id": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Unique id of the component",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "hasIconOnly": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Optionally renders only an icon rather than displaying the current selected time",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "menuOffset": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Allow repositioning the flyout menu",
      "type": {
        "name": "shape",
        "value": {
          "left": {
            "name": "number",
            "required": false
          },
          "top": {
            "name": "number",
            "required": false
          },
          "inputTop": {
            "name": "number",
            "required": false
          },
          "inputBottom": {
            "name": "number",
            "required": false
          }
        }
      },
      "required": false
    },
    "datePickerType": {
      "defaultValue": {
        "value": "'range'",
        "computed": false
      },
      "description": "Date picker types are single and range, default is range",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "renderInPortal": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "description": "If set to true it will render outside of the current DOM in a portal, otherwise render as a child",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "useAutoPositioning": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Auto reposition if flyout menu offscreen",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "style": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "objectOf",
        "value": {
          "name": "union",
          "value": [{
            "name": "string"
          }, {
            "name": "number"
          }]
        }
      },
      "required": false
    },
    "closeOnSelect": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "description": "If is set to true Datepicker will close after date select",
      "type": {
        "name": "bool"
      },
      "required": false
    }
  }
};
var DateTimePickerNew = DateTimePicker;

exports.DateTimePickerDefaultValuePropTypes = DateTimePickerDefaultValuePropTypes;
exports.default = DateTimePickerNew;
exports.defaultProps = defaultProps;
exports.propTypes = propTypes;
