@jetbrains/ring-ui-built 7.0.0-beta.1 → 7.0.0-beta.10

package/components/date-picker/date-popup.js

@@ -1,10 +1,7 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, d as _objectSpread2, c as _objectWithoutProperties, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.map.js';
+import { _ as _defineProperty, b as _objectSpread2, a as _objectWithoutProperties } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.reduce.js';
-import 'core-js/modules/es.object.to-string.js';
 import * as React from 'react';
-import { createElement, Component } from 'react';
-import PropTypes from 'prop-types';
+import { Component, createElement } from 'react';
 import { isAfter } from 'date-fns/isAfter';
 import { isBefore } from 'date-fns/isBefore';
 import { isSameDay } from 'date-fns/isSameDay';
@@ -15,39 +12,28 @@ import DateInput from './date-input.js';
 import Months from './months.js';
 import Years from './years.js';
 import Weekdays from './weekdays.js';
-import { dateType, parseTime } from './consts.js';
+import { parseTime } from './consts.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.map.js';
-import 'core-js/modules/es.weak-map.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.array.filter.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.replace.js';
 import 'classnames';
 import '../_helpers/input.js';
-import 'core-js/modules/es.object.values.js';
 import '@jetbrains/icons/close-12px';
-import '../global/prop-types.js';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
-import '../icon/icon.js';
 import 'util-deprecate';
+import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
-import 'core-js/modules/es.string.starts-with.js';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../global/get-uid.js';
-import 'core-js/modules/es.regexp.to-string.js';
 import '../i18n/i18n-context.js';
 import '../i18n/i18n.js';
-import 'core-js/modules/es.set.js';
 import '../global/composeRefs.js';
-import 'core-js/modules/web.dom-collections.for-each.js';
 import 'memoize-one';
 import '../control-label/control-label.js';
 import '../control-help/control-help.js';
@@ -65,12 +51,8 @@ import 'date-fns/addDays';
 import 'date-fns/format';
 import 'date-fns/setDay';
 import './day.js';
-import 'core-js/modules/es.array.includes.js';
-import 'core-js/modules/es.string.includes.js';
 import 'date-fns/getDate';
 import 'date-fns/isToday';
-import 'core-js/modules/es.array.index-of.js';
-import 'core-js/modules/es.array.slice.js';
 import 'date-fns/add';
 import './month-names.js';
 import 'date-fns/isThisMonth';
@@ -84,110 +66,98 @@ import 'date-fns/isSameYear';
 import 'date-fns/isThisYear';
 import 'date-fns/setYear';
 
-var _excluded = ["from", "to", "date", "time"];
-var scrollExpDelay = 10;
-var DatePopup = /*#__PURE__*/function (_Component) {
-  function DatePopup(props) {
-    var _this;
-    _classCallCheck(this, DatePopup);
-    _this = _callSuper(this, DatePopup, [props]);
-    _defineProperty(_this, "_scrollDate", void 0);
-    _defineProperty(_this, "_scrollTS", void 0);
-    _defineProperty(_this, "isInTimeMode", function () {
-      return !_this.props.range && _this.props.withTime || false;
-    });
-    _defineProperty(_this, "componentRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_this, "handleWheel", function (e) {
+const _excluded = ["from", "to", "date", "time"];
+const scrollExpDelay = 10;
+class DatePopup extends Component {
+  static sameDay(next, prev) {
+    if (next && prev) {
+      return isSameDay(next, prev);
+    }
+    return next === prev;
+  }
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "_scrollDate", void 0);
+    _defineProperty(this, "_scrollTS", void 0);
+    _defineProperty(this, "isInTimeMode", () => !this.props.range && this.props.withTime || false);
+    _defineProperty(this, "componentRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "handleWheel", e => {
       if (e.cancelable) {
         e.preventDefault();
       }
     });
-    _defineProperty(_this, "isValidDate", function (parsedText) {
-      var minDate = _this.parse(_this.props.minDate, 'date');
-      var maxDate = _this.parse(_this.props.maxDate, 'date');
+    _defineProperty(this, "isValidDate", parsedText => {
+      const minDate = this.parse(this.props.minDate, 'date');
+      const maxDate = this.parse(this.props.maxDate, 'date');
       if (parsedText) {
         return !(minDate && isBefore(parsedText, minDate) || maxDate && isAfter(parsedText, maxDate));
       }
       return false;
     });
-    _defineProperty(_this, "scheduleScroll", function () {
-      var current = _this.state.scrollDate && _this.parse(_this.state.scrollDate, 'date') || _this.parse(_this.props[_this.state.active], 'date') || new Date();
-      var goal = _this._scrollDate;
+    _defineProperty(this, "scheduleScroll", () => {
+      const current = this.state.scrollDate && this.parse(this.state.scrollDate, 'date') || this.parse(this.props[this.state.active], 'date') || new Date();
+      const goal = this._scrollDate;
       if (!current || !goal || DatePopup.sameDay(goal, current)) {
-        _this._scrollDate = null;
-        _this._scrollTS = null;
+        this._scrollDate = null;
+        this._scrollTS = null;
         return;
       }
-      if (_this._scrollTS) {
-        var diff = goal - Number(current);
-        var dt = Date.now() - _this._scrollTS;
-        var next = goal - diff * Math.pow(Math.E, -dt / scrollExpDelay);
-        _this.setState({
+      if (this._scrollTS) {
+        const diff = goal - Number(current);
+        const dt = Date.now() - this._scrollTS;
+        const next = goal - diff * Math.E ** (-dt / scrollExpDelay);
+        this.setState({
           scrollDate: next
         });
       }
-      _this._scrollTS = Date.now();
-      window.requestAnimationFrame(_this.scheduleScroll);
+      this._scrollTS = Date.now();
+      window.requestAnimationFrame(this.scheduleScroll);
     });
-    _defineProperty(_this, "scrollTo", function (scrollDate) {
-      _this._scrollDate = scrollDate;
-      if (!_this._scrollTS) {
-        _this.scheduleScroll();
+    _defineProperty(this, "scrollTo", scrollDate => {
+      this._scrollDate = scrollDate;
+      if (!this._scrollTS) {
+        this.scheduleScroll();
       }
     });
-    _defineProperty(_this, "hoverHandler", function (hoverDate) {
-      return _this.setState({
-        hoverDate
-      });
-    });
-    _defineProperty(_this, "handleActivate", memoize(function (name) {
-      return function () {
-        return _this.setState({
-          active: name
-        });
-      };
+    _defineProperty(this, "hoverHandler", hoverDate => this.setState({
+      hoverDate
     }));
-    _defineProperty(_this, "handleInput", function (text, name) {
+    _defineProperty(this, "handleActivate", memoize(name => () => this.setState({
+      active: name
+    })));
+    _defineProperty(this, "handleInput", (text, name) => {
       if (name !== 'time') {
-        var parsed = _this.parse(text, name);
-        if (_this.isValidDate(parsed)) {
-          _this.scrollTo(Number(parsed));
+        const parsed = this.parse(text, name);
+        if (this.isValidDate(parsed)) {
+          this.scrollTo(Number(parsed));
         }
       }
-      _this.setState({
+      this.setState({
         text,
         hoverDate: null
       });
     });
-    _defineProperty(_this, "handleConfirm", memoize(function (name) {
-      return function () {
-        return _this.confirm(name);
-      };
-    }));
-    _defineProperty(_this, "selectHandler", function (date) {
-      if (_this.isInTimeMode()) {
-        _this.setState({
+    _defineProperty(this, "handleConfirm", memoize(name => () => this.confirm(name)));
+    _defineProperty(this, "selectHandler", date => {
+      if (this.isInTimeMode()) {
+        this.setState({
           active: 'time'
-        }, function () {
-          return _this.select({
-            date
-          });
-        });
+        }, () => this.select({
+          date
+        }));
       } else {
-        _this.select({
-          [_this.state.active]: date
+        this.select({
+          [this.state.active]: date
         });
       }
     });
-    _defineProperty(_this, "handleScroll", function (scrollDate) {
-      return _this.setState({
-        scrollDate
-      });
-    });
-    _defineProperty(_this, "onClear", function (e) {
+    _defineProperty(this, "handleScroll", scrollDate => this.setState({
+      scrollDate
+    }));
+    _defineProperty(this, "onClear", e => {
       var _this$props$onClear, _this$props, _this$componentRef$cu;
-      var changes;
-      if (_this.props.range) {
+      let changes;
+      if (this.props.range) {
         changes = {
           from: null,
           to: null
@@ -197,297 +167,257 @@ var DatePopup = /*#__PURE__*/function (_Component) {
           date: null
         };
       }
-      _this.select(changes);
-      (_this$props$onClear = (_this$props = _this.props).onClear) === null || _this$props$onClear === void 0 || _this$props$onClear.call(_this$props, e);
-      (_this$componentRef$cu = _this.componentRef.current) === null || _this$componentRef$cu === void 0 || (_this$componentRef$cu = _this$componentRef$cu.querySelector('input')) === null || _this$componentRef$cu === void 0 || _this$componentRef$cu.focus();
+      this.select(changes);
+      (_this$props$onClear = (_this$props = this.props).onClear) === null || _this$props$onClear === void 0 || _this$props$onClear.call(_this$props, e);
+      (_this$componentRef$cu = this.componentRef.current) === null || _this$componentRef$cu === void 0 || (_this$componentRef$cu = _this$componentRef$cu.querySelector('input')) === null || _this$componentRef$cu === void 0 || _this$componentRef$cu.focus();
     });
-    var defaultState = {
+    const defaultState = {
       text: null,
       hoverDate: null,
       scrollDate: null
     };
-    var range = props.range,
-      withTime = props.withTime;
+    const {
+      range,
+      withTime
+    } = props;
     if (!range) {
-      var parsedDate = _this.parse(props.date, 'date');
-      var active = withTime && parsedDate && !props.time ? 'time' : 'date';
-      _this.state = _objectSpread2(_objectSpread2({}, defaultState), {}, {
+      const parsedDate = this.parse(props.date, 'date');
+      const active = withTime && parsedDate && !props.time ? 'time' : 'date';
+      this.state = _objectSpread2(_objectSpread2({}, defaultState), {}, {
         active
       });
     } else if (props.from && !props.to) {
-      _this.state = _objectSpread2(_objectSpread2({}, defaultState), {}, {
+      this.state = _objectSpread2(_objectSpread2({}, defaultState), {}, {
         active: 'to'
       });
     } else {
-      _this.state = _objectSpread2(_objectSpread2({}, defaultState), {}, {
+      this.state = _objectSpread2(_objectSpread2({}, defaultState), {}, {
         active: 'from'
       });
     }
-    return _this;
   }
-  _inherits(DatePopup, _Component);
-  return _createClass(DatePopup, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.componentRef.current) {
-        this.componentRef.current.addEventListener('wheel', this.handleWheel);
-      }
+  componentDidMount() {
+    if (this.componentRef.current) {
+      this.componentRef.current.addEventListener('wheel', this.handleWheel);
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (this.state.active !== prevState.active) {
-        if (this.state.text && prevState.active) {
-          this.confirm(prevState.active);
-        }
-        this.setState({
-          text: null
-        });
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.active !== prevState.active) {
+      if (this.state.text && prevState.active) {
+        this.confirm(prevState.active);
       }
+      this.setState({
+        text: null
+      });
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.componentRef.current) {
-        this.componentRef.current.removeEventListener('wheel', this.handleWheel);
-      }
+  }
+  componentWillUnmount() {
+    if (this.componentRef.current) {
+      this.componentRef.current.removeEventListener('wheel', this.handleWheel);
     }
-  }, {
-    key: "parse",
-    value: function parse(text, type) {
-      if (type === 'time') {
-        return parseTime(String(text));
-      }
-      return this.props.parseDateInput(text);
+  }
+  parse(text, type) {
+    if (type === 'time') {
+      return parseTime(String(text));
     }
-  }, {
-    key: "select",
-    value: function select(changes) {
-      var _this$props2 = this.props,
-        range = _this$props2.range,
-        withTime = _this$props2.withTime;
-      var prevActive = this.state.active;
-      if (!range && !withTime) {
-        this.setState({
-          text: null,
-          scrollDate: null
-        });
-        var adjustedDate = changes.date && set(new Date(), {
-          year: changes.date.getFullYear(),
-          month: changes.date.getMonth(),
-          date: changes.date.getDate()
-        });
-        this.props.onChange(adjustedDate);
+    return this.props.parseDateInput(text);
+  }
+  select(changes) {
+    const {
+      range,
+      withTime
+    } = this.props;
+    const prevActive = this.state.active;
+    if (!range && !withTime) {
+      this.setState({
+        text: null,
+        scrollDate: null
+      });
+      const adjustedDate = changes.date && set(new Date(), {
+        year: changes.date.getFullYear(),
+        month: changes.date.getMonth(),
+        date: changes.date.getDate()
+      });
+      this.props.onChange(adjustedDate);
+      this.props.onComplete();
+    } else if (!range && withTime) {
+      const date = this.parse(this.props.date, 'date');
+      const time = this.parse(this.props.time, 'time');
+      const changeToSubmit = {
+        date: changes.date || date,
+        time: changes.time || time
+      };
+      this.setState({
+        active: changes.date ? 'time' : 'date',
+        text: null,
+        scrollDate: null
+      });
+      this.props.onChange(changeToSubmit);
+      if (!changes.date && prevActive === 'time' && changeToSubmit.date && changeToSubmit.time) {
         this.props.onComplete();
-      } else if (!range && withTime) {
-        var date = this.parse(this.props.date, 'date');
-        var time = this.parse(this.props.time, 'time');
-        var changeToSubmit = {
-          date: changes.date || date,
-          time: changes.time || time
-        };
-        this.setState({
-          active: changes.date ? 'time' : 'date',
-          text: null,
-          scrollDate: null
-        });
-        this.props.onChange(changeToSubmit);
-        if (!changes.date && prevActive === 'time' && changeToSubmit.date && changeToSubmit.time) {
-          this.props.onComplete();
-        }
-      } else {
-        var _this$props$changes = _objectSpread2(_objectSpread2({}, this.props), changes),
-          from = _this$props$changes.from,
-          to = _this$props$changes.to;
-        from = this.parse(from, 'from');
-        to = this.parse(to, 'to');
-        // proceed to setting the end by default
-        var active = 'to';
-        var complete = false;
-        // end is before beginning
-        if (from && to && isAfter(startOfDay(from), startOfDay(to))) {
-          // ignore the old end when beginning is changed
-          if (changes.from) {
-            to = null;
-            // treat range as reverse when end is changed
-          } else if (changes.to) {
-            to = from;
-            from = changes.to;
-          }
+      }
+    } else {
+      let {
+        from,
+        to
+      } = _objectSpread2(_objectSpread2({}, this.props), changes);
+      from = this.parse(from, 'from');
+      to = this.parse(to, 'to');
+      // proceed to setting the end by default
+      let active = 'to';
+      let complete = false;
+      // end is before beginning
+      if (from && to && isAfter(startOfDay(from), startOfDay(to))) {
+        // ignore the old end when beginning is changed
+        if (changes.from) {
+          to = null;
+          // treat range as reverse when end is changed
         } else if (changes.to) {
-          active = 'from';
-          complete = !!from;
-        }
-        this.setState({
-          active,
-          hoverDate: null,
-          text: null
-        });
-        this.props.onChange({
-          from,
-          to
-        });
-        if (complete) {
-          this.props.onComplete();
+          to = from;
+          from = changes.to;
         }
+      } else if (changes.to) {
+        active = 'from';
+        complete = !!from;
+      }
+      this.setState({
+        active,
+        hoverDate: null,
+        text: null
+      });
+      this.props.onChange({
+        from,
+        to
+      });
+      if (complete) {
+        this.props.onComplete();
       }
     }
-  }, {
-    key: "confirm",
-    value: function confirm(name) {
-      var text = this.state.text;
-      var result;
-      if (name === 'time') {
-        result = this.parse(text, name);
-        var time = this.parse('time' in this.props ? this.props.time : '', 'time');
-        var emptyCase = this.state.active === 'time' ? '00:00' : null;
-        result = result || time || emptyCase;
-      } else {
-        result = this.parse(text, name);
-        if (!this.isValidDate(result)) {
-          result = this.parse(name in this.props ? this.props[name] : '', name);
-        }
+  }
+  confirm(name) {
+    const text = this.state.text;
+    let result;
+    if (name === 'time') {
+      result = this.parse(text, name);
+      const time = this.parse('time' in this.props ? this.props.time : '', 'time');
+      const emptyCase = this.state.active === 'time' ? '00:00' : null;
+      result = result || time || emptyCase;
+    } else {
+      result = this.parse(text, name);
+      if (!this.isValidDate(result)) {
+        result = this.parse(name in this.props ? this.props[name] : '', name);
       }
-      this.select({
-        [name]: result
-      });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props3 = this.props,
-        range = _this$props3.range,
-        withTime = _this$props3.withTime,
-        locale = _this$props3.locale;
-      var _this$props4 = this.props;
-        _this$props4.from;
-        _this$props4.to;
-        _this$props4.date;
-        var time = _this$props4.time,
-        restProps = _objectWithoutProperties(_this$props4, _excluded);
-      var parsedDate = this.parse(this.props.date, 'date');
-      var parsedTo = this.parse(this.props.to, 'to');
-      var names = range ? ['from', 'to'] : ['date'];
-      var dates = names.reduce(function (obj, key) {
-        var value = _this2.props[key];
-        return _objectSpread2(_objectSpread2({}, obj), {}, {
-          [key]: _this2.parse(value, key)
-        });
-      }, {});
-      var activeDate = this.state.active !== 'time' ? this.state.hoverDate || (this.state.text != null ? this.parse(this.state.text, 'date') : null) : this.state.hoverDate || null;
-      var currentRange = range && dates.from && dates.to && [dates.from, dates.to] || null;
-      var activeRange = null;
-      if (range && activeDate) {
-        switch (this.state.active) {
-          case 'from':
-            if (dates.to && isAfter(startOfDay(activeDate), startOfDay(dates.to))) {
-              activeRange = [activeDate, dates.to];
-            }
-            break;
-          case 'to':
-            if (!dates.from) {
-              break;
-            }
-            if (isBefore(startOfDay(activeDate), startOfDay(dates.from))) {
-              activeRange = [activeDate, dates.from];
-            } else {
-              activeRange = [dates.from, activeDate];
-            }
+    this.select({
+      [name]: result
+    });
+  }
+  render() {
+    const {
+      range,
+      withTime,
+      locale
+    } = this.props;
+    const _this$props2 = this.props,
+      {
+        from,
+        to,
+        date,
+        time
+      } = _this$props2,
+      restProps = _objectWithoutProperties(_this$props2, _excluded);
+    const parsedDate = this.parse(this.props.date, 'date');
+    const parsedTo = this.parse(this.props.to, 'to');
+    const names = range ? ['from', 'to'] : ['date'];
+    const dates = names.reduce((obj, key) => {
+      const value = this.props[key];
+      return _objectSpread2(_objectSpread2({}, obj), {}, {
+        [key]: this.parse(value, key)
+      });
+    }, {});
+    const activeDate = this.state.active !== 'time' ? this.state.hoverDate || (this.state.text != null ? this.parse(this.state.text, 'date') : null) : this.state.hoverDate || null;
+    const currentRange = range && dates.from && dates.to && [dates.from, dates.to] || null;
+    let activeRange = null;
+    if (range && activeDate) {
+      switch (this.state.active) {
+        case 'from':
+          if (dates.to && isAfter(startOfDay(activeDate), startOfDay(dates.to))) {
+            activeRange = [activeDate, dates.to];
+          }
+          break;
+        case 'to':
+          if (!dates.from) {
             break;
-        }
+          }
+          if (isBefore(startOfDay(activeDate), startOfDay(dates.from))) {
+            activeRange = [activeDate, dates.from];
+          } else {
+            activeRange = [dates.from, activeDate];
+          }
+          break;
       }
-      var scrollDate = withTime && !range ? this.state.scrollDate || dates.date || new Date() : this.state.scrollDate || dates[this.state.active] || new Date();
-      var calendarProps = _objectSpread2(_objectSpread2(_objectSpread2({}, restProps), dates), {}, {
-        scrollDate,
-        activeDate,
-        currentRange,
-        activeRange,
-        onScroll: this.handleScroll,
-        onScrollChange: this.scrollTo
-      });
-      var clearable = Boolean(this.props.onClear);
-      return /*#__PURE__*/jsxs("div", {
-        className: modules_0c7b7d96.datePopup,
-        "data-test": "ring-date-popup",
-        ref: this.componentRef,
-        children: [/*#__PURE__*/jsxs("div", {
-          className: modules_0c7b7d96.filterWrapper,
-          children: [names.map(function (name) {
-            var onClear;
-            if (clearable && name !== 'from' && !_this2.isInTimeMode()) {
-              onClear = _this2.onClear.bind(_this2);
-            }
-            return /*#__PURE__*/createElement(DateInput, _objectSpread2(_objectSpread2(_objectSpread2({}, _this2.props), _this2.state), {}, {
-              divider: name === 'from' && (dates[name] != null || parsedTo != null),
-              name: name,
-              key: name,
-              date: dates[name],
-              active: _this2.state.active === name,
-              onActivate: _this2.handleActivate(name),
-              onInput: _this2.handleInput,
-              onConfirm: _this2.handleConfirm(name),
-              onClear: onClear,
-              locale: locale
-            }));
-          }), this.isInTimeMode() ? /*#__PURE__*/createElement(DateInput, _objectSpread2(_objectSpread2({}, this.props), {}, {
-            text: this.state.text,
-            divider: !!parsedDate,
-            hoverDate: null,
-            name: 'time',
-            key: 'time',
-            date: null,
-            time: time,
-            active: this.state.active === 'time',
-            onActivate: this.handleActivate('time'),
+    }
+    const scrollDate = withTime && !range ? this.state.scrollDate || dates.date || new Date() : this.state.scrollDate || dates[this.state.active] || new Date();
+    const calendarProps = _objectSpread2(_objectSpread2(_objectSpread2({}, restProps), dates), {}, {
+      scrollDate,
+      activeDate,
+      currentRange,
+      activeRange,
+      onScroll: this.handleScroll,
+      onScrollChange: this.scrollTo
+    });
+    const clearable = Boolean(this.props.onClear);
+    return /*#__PURE__*/jsxs("div", {
+      className: modules_0c7b7d96.datePopup,
+      "data-test": "ring-date-popup",
+      ref: this.componentRef,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: modules_0c7b7d96.filterWrapper,
+        children: [names.map(name => {
+          let onClear;
+          if (clearable && name !== 'from' && !this.isInTimeMode()) {
+            onClear = this.onClear.bind(this);
+          }
+          return /*#__PURE__*/createElement(DateInput, _objectSpread2(_objectSpread2(_objectSpread2({}, this.props), this.state), {}, {
+            divider: name === 'from' && (dates[name] != null || parsedTo != null),
+            name: name,
+            key: name,
+            date: dates[name],
+            active: this.state.active === name,
+            onActivate: this.handleActivate(name),
             onInput: this.handleInput,
-            onConfirm: this.handleConfirm('time'),
-            onClear: clearable && this.onClear || undefined,
+            onConfirm: this.handleConfirm(name),
+            onClear: onClear,
             locale: locale
-          })) : '']
-        }), /*#__PURE__*/jsx(Weekdays, {
+          }));
+        }), this.isInTimeMode() ? /*#__PURE__*/createElement(DateInput, _objectSpread2(_objectSpread2({}, this.props), {}, {
+          text: this.state.text,
+          divider: !!parsedDate,
+          hoverDate: null,
+          name: 'time',
+          key: 'time',
+          date: null,
+          time: time,
+          active: this.state.active === 'time',
+          onActivate: this.handleActivate('time'),
+          onInput: this.handleInput,
+          onConfirm: this.handleConfirm('time'),
+          onClear: clearable && this.onClear || undefined,
           locale: locale
-        }), /*#__PURE__*/jsxs("div", {
-          className: modules_0c7b7d96.calendar,
-          children: [/*#__PURE__*/jsx(Months, _objectSpread2(_objectSpread2({}, calendarProps), {}, {
-            onHover: this.hoverHandler,
-            onSelect: this.selectHandler,
-            locale: locale
-          })), /*#__PURE__*/jsx(Years, _objectSpread2({}, calendarProps))]
-        }), this.props.renderAfterCalendar && this.props.renderAfterCalendar(this.state)]
-      });
-    }
-  }], [{
-    key: "sameDay",
-    value: function sameDay(next, prev) {
-      if (next && prev) {
-        return isSameDay(next, prev);
-      }
-      return next === prev;
-    }
-  }]);
-}(Component);
-_defineProperty(DatePopup, "propTypes", {
-  className: PropTypes.string,
-  date: dateType,
-  range: PropTypes.bool,
-  withTime: PropTypes.bool,
-  time: PropTypes.string,
-  from: dateType,
-  to: dateType,
-  renderAfterCalendar: PropTypes.func,
-  displayFormat: PropTypes.func,
-  parseDateInput: PropTypes.func,
-  onChange: PropTypes.func,
-  onComplete: PropTypes.func,
-  onClear: PropTypes.func,
-  minDate: dateType,
-  maxDate: dateType,
-  fromPlaceholder: PropTypes.string,
-  toPlaceholder: PropTypes.string,
-  timePlaceholder: PropTypes.string,
-  locale: PropTypes.object
-});
+        })) : '']
+      }), /*#__PURE__*/jsx(Weekdays, {
+        locale: locale
+      }), /*#__PURE__*/jsxs("div", {
+        className: modules_0c7b7d96.calendar,
+        children: [/*#__PURE__*/jsx(Months, _objectSpread2(_objectSpread2({}, calendarProps), {}, {
+          onHover: this.hoverHandler,
+          onSelect: this.selectHandler,
+          locale: locale
+        })), /*#__PURE__*/jsx(Years, _objectSpread2({}, calendarProps))]
+      }), this.props.renderAfterCalendar && this.props.renderAfterCalendar(this.state)]
+    });
+  }
+}
 _defineProperty(DatePopup, "defaultProps", {
   onChange() {}
 });