@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

package/dist/date-picker/consts.js

@@ -6,7 +6,7 @@ const unit = 8; // px;
 const units = {
   unit,
 
-  /* eslint-disable no-magic-numbers */
+  /* eslint-disable @typescript-eslint/no-magic-numbers */
   cellSize: unit * 3,
   calHeight: unit * 36,
   yearHeight: unit * 4
@@ -34,25 +34,6 @@ const yearDuration = durationToMillis({
 const yearScrollSpeed = yearDuration / (YEAR * units.cellSize);
 const DOUBLE = 2;
 const HALF = 0.5;
-function linear(x0, y0, a) {
-  return {
-    y(x) {
-      return +y0 + (x - x0) * a;
-    },
-
-    x(y) {
-      return +x0 + (y - y0) / a;
-    }
-
-  };
-}
-const deprecatedPropType = replacement => (props, propName) => {
-  if (propName in props) {
-    return new Error(`"${propName}" prop is deprecated and will be removed in 5.0. ${replacement} instead. See https://github.com/JetBrains/ring-ui/blob/master/CHANGELOG.md#310 for details`);
-  }
-
-  return undefined;
-};
 const dateType = PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]);
 function parseTime(time) {
   let result = null;
@@ -66,4 +47,4 @@ function parseTime(time) {
   return result;
 }
 
-export { DOUBLE, HALF, MIDDLE_DAY, WEEK, YEAR, dateType, units as default, deprecatedPropType, linear, parseTime, weekdays, yearDuration, yearScrollSpeed };
+export { DOUBLE, HALF, MIDDLE_DAY, WEEK, YEAR, dateType, units as default, parseTime, weekdays, yearDuration, yearScrollSpeed };

package/dist/date-picker/date-input.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DatePopupBaseProps, Field } from './consts';
+export interface UpdateInputConfig {
+    active: boolean;
+    text: string | null;
+}
+export interface DateInputProps extends DatePopupBaseProps, UpdateInputConfig {
+    divider: boolean;
+    name: Field;
+    hoverDate: Date | null;
+    date: Date | null | undefined;
+    time?: string | null | undefined;
+    onInput: (value: string, name: Field) => void;
+    onActivate: () => void;
+    onConfirm: () => void;
+}
+export default class DateInput extends React.PureComponent<DateInputProps> {
+    static propTypes: {
+        active: PropTypes.Requireable<boolean>;
+        divider: PropTypes.Requireable<boolean>;
+        name: PropTypes.Requireable<string>;
+        text: PropTypes.Requireable<string>;
+        hoverDate: PropTypes.Requireable<string | number | Date>;
+        date: PropTypes.Requireable<string | number | Date>;
+        time: PropTypes.Requireable<string>;
+        displayFormat: PropTypes.Requireable<(...args: any[]) => any>;
+        hidden: PropTypes.Requireable<boolean>;
+        translations: PropTypes.Requireable<object>;
+        fromPlaceholder: PropTypes.Requireable<string>;
+        toPlaceholder: PropTypes.Requireable<string>;
+        timePlaceholder: PropTypes.Requireable<string>;
+        onInput: PropTypes.Requireable<(...args: any[]) => any>;
+        onActivate: PropTypes.Requireable<(...args: any[]) => any>;
+        onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        locale: PropTypes.Requireable<object>;
+    };
+    static defaultProps: {
+        fromPlaceholder: null;
+        toPlaceholder: null;
+        timePlaceholder: null;
+        translations: {
+            addFirstDate: string;
+            addSecondDate: string;
+            addTime: string;
+            selectName: string;
+        };
+    };
+    componentDidUpdate(prevProps: DateInputProps): void;
+    input?: HTMLInputElement | null;
+    inputRef: (el: HTMLInputElement | null) => void;
+    updateInput({ text, active }: UpdateInputConfig): void;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleKeyDown: (e: React.KeyboardEvent) => false | void;
+    render(): JSX.Element;
+}

package/dist/date-picker/date-input.js

@@ -2,11 +2,12 @@ import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import Input from '../input/input.js';
+import ThemedInput from '../input/input.js';
 import { dateType } from './consts.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
 import '@jetbrains/icons/close';
 import '../global/theme.js';
+import '../global/prop-types.js';
 import '../button/button.js';
 import 'focus-visible';
 import '@jetbrains/icons/chevron-10px';
@@ -19,6 +20,7 @@ import '../global/memoize.js';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 import '../global/get-uid.js';
+import '../global/composeRefs.js';
 import '../_helpers/input.js';
 import 'date-fns/add';
 
@@ -26,12 +28,14 @@ class DateInput extends React.PureComponent {
   constructor() {
     super(...arguments);
 
+    _defineProperty(this, "input", void 0);
+
     _defineProperty(this, "inputRef", el => {
       this.input = el;
       this.updateInput(this.props);
     });
 
-    _defineProperty(this, "handleChange", e => this.props.onInput(e.target.value, e.target.dataset.name));
+    _defineProperty(this, "handleChange", e => this.props.onInput(e.currentTarget.value, e.currentTarget.dataset.name));
 
     _defineProperty(this, "handleKeyDown", e => e.key === 'Enter' && this.props.onConfirm());
   }
@@ -120,7 +124,7 @@ class DateInput extends React.PureComponent {
     })();
 
     const classes = classNames(modules_0c7b7d96.filter, modules_0c7b7d96[`${name}Input`], divider && modules_0c7b7d96[`${name}InputWithDivider`], 'ring-js-shortcuts');
-    return /*#__PURE__*/React.createElement(Input, {
+    return /*#__PURE__*/React.createElement(ThemedInput, {
       autoComplete: "off",
       borderless: true,
       "data-name": name,

package/dist/date-picker/date-picker.d.ts

@@ -0,0 +1,70 @@
+import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import type { Locale } from 'date-fns';
+import Popup from '../popup/popup';
+import { DropdownAttrs } from '../dropdown/dropdown';
+import { DatePopupProps } from './date-popup';
+import { DateInputTranslations, DatePickerChange } from './consts';
+export interface DatePickerTranslations extends Partial<DateInputTranslations> {
+    setDate: string;
+    setDateTime: string;
+    setPeriod: string;
+}
+export declare type DatePickerProps = Omit<DatePopupProps, 'translations' | 'parseDateInput' | 'onComplete' | 'hidden'> & {
+    className: string;
+    clear: boolean;
+    popupClassName?: string | null | undefined;
+    dropdownProps?: DropdownAttrs;
+    translations: DatePickerTranslations;
+    displayMonthFormat: (date: Date, locale: Locale | undefined) => string;
+    displayDayFormat: (date: Date, locale: Locale | undefined) => string;
+    displayTimeFormat: (date: Date, locale: Locale | undefined) => string;
+    applyTimeInput: (date: Date, time: string | null | undefined) => Date;
+    datePlaceholder: string;
+    dateTimePlaceholder: string;
+    rangePlaceholder: string;
+    disabled?: boolean | null | undefined;
+    parseDateInput: (input: string | null | undefined) => Date | null;
+};
+/**
+ * @name Date Picker
+ */
+export default class DatePicker extends PureComponent<DatePickerProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        popupClassName: PropTypes.Requireable<string>;
+        date: PropTypes.Requireable<string | number | Date>;
+        withTime: PropTypes.Requireable<boolean>;
+        range: PropTypes.Requireable<boolean>;
+        from: PropTypes.Requireable<string | number | Date>;
+        to: PropTypes.Requireable<string | number | Date>;
+        clear: PropTypes.Requireable<boolean>;
+        displayFormat: PropTypes.Requireable<(...args: any[]) => any>;
+        displayMonthFormat: PropTypes.Requireable<(...args: any[]) => any>;
+        displayDayFormat: PropTypes.Requireable<(...args: any[]) => any>;
+        displayTimeFormat: PropTypes.Requireable<(...args: any[]) => any>;
+        parseDateInput: PropTypes.Requireable<(...args: any[]) => any>;
+        applyTimeInput: PropTypes.Requireable<(...args: any[]) => any>;
+        datePlaceholder: PropTypes.Requireable<string>;
+        dateTimePlaceholder: PropTypes.Requireable<string>;
+        rangePlaceholder: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        dropdownProps: PropTypes.Requireable<object>;
+        disabled: PropTypes.Requireable<boolean>;
+        minDate: PropTypes.Requireable<string | number | Date>;
+        maxDate: PropTypes.Requireable<string | number | Date>;
+        translations: PropTypes.Requireable<object>;
+        locale: PropTypes.Requireable<object>;
+    };
+    static defaultProps: DatePickerProps;
+    handleChange: (change: DatePickerChange | Date | null | undefined) => void;
+    clear: () => void;
+    popup?: Popup | null;
+    popupRef: (el: Popup | null) => void;
+    closePopup: () => void;
+    parse: (arg: string | number | Date | null | undefined) => Date | null;
+    formatTime(): string | null;
+    getAnchorText: () => string;
+    render(): JSX.Element;
+}
+export declare type DatePickerAttrs = JSX.LibraryManagedAttributes<typeof DatePicker, DatePickerProps>;

package/dist/date-picker/date-picker.js

@@ -13,7 +13,7 @@ import memoize from '../global/memoize.js';
 import Popup from '../popup/popup.js';
 import Dropdown from '../dropdown/dropdown.js';
 import DatePopup from './date-popup.js';
-import { dateType, deprecatedPropType } from './consts.js';
+import { dateType } from './consts.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
 import formats from './formats.js';
 import DateInput from './date-input.js';
@@ -32,6 +32,7 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
+import '../global/typescript-utils.js';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/startOfDay';
@@ -71,16 +72,18 @@ import 'date-fns/add';
 import '../input/input.js';
 import '@jetbrains/icons/close';
 import '../global/theme.js';
+import '../global/prop-types.js';
 import '../button/button.js';
 import 'focus-visible';
 import '@jetbrains/icons/chevron-10px';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
+import '../global/composeRefs.js';
 import '../_helpers/input.js';
 
 const PopupComponent = _ref => {
   let {
-    hidden,
+    hidden = false,
     className,
     popupRef,
     onClear,
@@ -121,16 +124,11 @@ class DatePicker extends PureComponent {
     _defineProperty(this, "handleChange", change => {
       const {
         onChange,
-        onDateChange,
         withTime,
         applyTimeInput
       } = this.props;
-      const adjustedChange = withTime && change.date != null ? applyTimeInput(change.date, change.time) : change;
+      const adjustedChange = withTime && !(change instanceof Date) && (change === null || change === void 0 ? void 0 : change.date) != null ? applyTimeInput(change.date, change.time) : change;
       onChange(adjustedChange);
-
-      if (onDateChange != null) {
-        onDateChange(adjustedChange);
-      }
     });
 
     _defineProperty(this, "clear", () => {
@@ -146,12 +144,16 @@ class DatePicker extends PureComponent {
       this.handleChange(change);
     });
 
+    _defineProperty(this, "popup", void 0);
+
     _defineProperty(this, "popupRef", el => {
       this.popup = el;
     });
 
     _defineProperty(this, "closePopup", () => {
-      this.popup._onCloseAttempt();
+      var _this$popup;
+
+      (_this$popup = this.popup) === null || _this$popup === void 0 ? void 0 : _this$popup._onCloseAttempt();
     });
 
     _defineProperty(this, "parse", memoize(date => {
@@ -187,44 +189,44 @@ class DatePicker extends PureComponent {
       const from = this.parse(this.props.from);
       const to = this.parse(this.props.to);
       const time = this.formatTime();
-      let text;
 
       if (!range && !withTime) {
-        text = date ? displayFormat(date, locale) : datePlaceholder || translations.setDate;
+        return date ? displayFormat(date, locale) : datePlaceholder || translations.setDate;
       } else if (!range && withTime) {
         if (!date && !time) {
-          text = dateTimePlaceholder || translations.setDateTime;
+          return dateTimePlaceholder || translations.setDateTime;
         } else {
-          text = `${date && displayFormat(date, locale) || '—'}, ${time || '—'}`;
+          return `${date && displayFormat(date, locale) || '—'}, ${time || '—'}`;
         }
-      } else if (!from && !to) {
-        text = rangePlaceholder || translations.setPeriod;
-      } else if (!to) {
-        text = `${displayFormat(from, locale)} —`;
-      } else if (!from) {
-        text = `— ${displayFormat(to, locale)}`;
-      } else if (!isSameYear(from, to)) {
-        text = `${displayFormat(from, locale)} — ${displayFormat(to, locale)}`;
-      } else if (!isSameMonth(from, to)) {
-        text = `${displayMonthFormat(from, locale)} — ${displayFormat(to, locale)}`;
-      } else if (!isSameDay(from, to)) {
-        text = `${displayDayFormat(from, locale)} — ${displayFormat(to, locale)}`;
+      } else if (from && to) {
+        if (!isSameYear(from, to)) {
+          return `${displayFormat(from, locale)} — ${displayFormat(to, locale)}`;
+        } else if (!isSameMonth(from, to)) {
+          return `${displayMonthFormat(from, locale)} — ${displayFormat(to, locale)}`;
+        } else if (!isSameDay(from, to)) {
+          return `${displayDayFormat(from, locale)} — ${displayFormat(to, locale)}`;
+        } else {
+          return `${displayFormat(to, locale)}`;
+        }
+      } else if (from) {
+        return `${displayFormat(from, locale)} —`;
+      } else if (to) {
+        return `— ${displayFormat(to, locale)}`;
       } else {
-        text = `${displayFormat(to, locale)}`;
+        return rangePlaceholder || translations.setPeriod;
       }
-
-      return text;
     });
   }
 
   formatTime() {
     const {
-      displayTimeFormat
+      displayTimeFormat,
+      locale
     } = this.props;
     const date = this.parse(this.props.date);
 
     if (date != null) {
-      return displayTimeFormat(date);
+      return displayTimeFormat(date, locale);
     }
 
     return null;
@@ -247,10 +249,7 @@ class DatePicker extends PureComponent {
       translations,
       ...datePopupProps
     } = this.props;
-    const classes = classNames(modules_0c7b7d96.datePicker, className); // We want to provide translations further down to DateInput.
-    // Yet we should pass at least DateInput default translations not to have them empty.
-
-    datePopupProps.translations = Object.assign({}, DateInput.defaultProps.translations, translations);
+    const classes = classNames(modules_0c7b7d96.datePicker, className);
     return /*#__PURE__*/React.createElement(Dropdown, _extends({
       className: classes,
       anchor: text
@@ -259,6 +258,9 @@ class DatePicker extends PureComponent {
       popupRef: this.popupRef,
       onClear: clear ? this.clear : null,
       datePopupProps: { ...datePopupProps,
+        // We want to provide translations further down to DateInput.
+        // Yet we should pass at least DateInput default translations not to have them empty.
+        translations: Object.assign({}, DateInput.defaultProps.translations, translations),
         onChange: this.handleChange,
         parseDateInput: this.parse,
         time: this.formatTime()
@@ -288,8 +290,6 @@ _defineProperty(DatePicker, "propTypes", {
   dateTimePlaceholder: PropTypes.string,
   rangePlaceholder: PropTypes.string,
   onChange: PropTypes.func,
-  // TODO: Remove in 5.0
-  onDateChange: deprecatedPropType('Use "onChange"'),
   dropdownProps: PropTypes.object,
   disabled: PropTypes.bool,
   minDate: dateType,
@@ -333,9 +333,9 @@ _defineProperty(DatePicker, "defaultProps", {
   },
 
   applyTimeInput(date, timeString) {
-    var _timeString$split;
+    var _timeString$split$map;
 
-    const [hours, minutes] = (_timeString$split = timeString === null || timeString === void 0 ? void 0 : timeString.split(':')) !== null && _timeString$split !== void 0 ? _timeString$split : [];
+    const [hours, minutes] = (_timeString$split$map = timeString === null || timeString === void 0 ? void 0 : timeString.split(':').map(Number)) !== null && _timeString$split$map !== void 0 ? _timeString$split$map : [];
     return minutes != null ? set(date, {
       hours,
       minutes

package/dist/date-picker/date-popup.d.ts

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { DatePickerChange, DatePopupBaseProps, DateSpecificPopupProps, DatePopupState, RangeSpecificPopupProps, TimeSpecificPopupProps, Field } from './consts';
+export declare type DatePopupProps = DatePopupBaseProps & (DateSpecificPopupProps | TimeSpecificPopupProps | RangeSpecificPopupProps);
+export default class DatePopup extends Component<DatePopupProps, DatePopupState> {
+    static sameDay(next: Date | number | null, prev: Date | number | null): boolean;
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        date: PropTypes.Requireable<string | number | Date>;
+        range: PropTypes.Requireable<boolean>;
+        withTime: PropTypes.Requireable<boolean>;
+        time: PropTypes.Requireable<string>;
+        from: PropTypes.Requireable<string | number | Date>;
+        to: PropTypes.Requireable<string | number | Date>;
+        renderAfterCalendar: PropTypes.Requireable<(...args: any[]) => any>;
+        displayFormat: PropTypes.Requireable<(...args: any[]) => any>;
+        parseDateInput: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onComplete: PropTypes.Requireable<(...args: any[]) => any>;
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        minDate: PropTypes.Requireable<string | number | Date>;
+        maxDate: PropTypes.Requireable<string | number | Date>;
+        hidden: PropTypes.Requireable<boolean>;
+        fromPlaceholder: PropTypes.Requireable<string>;
+        toPlaceholder: PropTypes.Requireable<string>;
+        timePlaceholder: PropTypes.Requireable<string>;
+        locale: PropTypes.Requireable<object>;
+    };
+    static defaultProps: {
+        onChange(): void;
+    };
+    constructor(props: DatePopupProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: DatePopupBaseProps, prevState: DatePopupState): void;
+    componentWillUnmount(): void;
+    private _scrollDate?;
+    private _scrollTS?;
+    isInTimeMode: () => boolean;
+    componentRef: React.RefObject<HTMLDivElement>;
+    handleWheel: (e: WheelEvent) => void;
+    parse(text: string | null | undefined, type: 'time'): string;
+    parse(text: Date | number | string | null | undefined, type?: 'date' | 'from' | 'to'): Date;
+    select(changes: DatePickerChange): void;
+    confirm(name: Field): void;
+    isValidDate: (parsedText: Date) => boolean;
+    scheduleScroll: () => void;
+    scrollTo: (scrollDate: number) => void;
+    hoverHandler: (hoverDate: Date) => void;
+    handleActivate: (arg: Field) => () => void;
+    handleInput: (text: string, name: Field) => void;
+    handleConfirm: (arg: Field) => () => void;
+    selectHandler: (date: Date) => void;
+    handleScroll: (scrollDate: number) => void;
+    onClear: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    render(): JSX.Element;
+}

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

@@ -22,12 +22,14 @@ import '../icon/icon__svg.js';
 import '../input/input.js';
 import '@jetbrains/icons/close';
 import '../global/theme.js';
+import '../global/prop-types.js';
 import '../button/button.js';
 import 'focus-visible';
 import '@jetbrains/icons/chevron-10px';
 import '../link/clickableLink.js';
 import '../_helpers/button__classes.js';
 import '../global/get-uid.js';
+import '../global/composeRefs.js';
 import '../_helpers/input.js';
 import 'date-fns/add';
 import 'date-fns/addMonths';
@@ -71,6 +73,10 @@ class DatePopup extends Component {
   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());
@@ -101,7 +107,7 @@ class DatePopup extends Component {
       }
 
       if (this._scrollTS) {
-        const diff = goal - current;
+        const diff = goal - Number(current);
 
         const dt = Date.now() - this._scrollTS;
 
@@ -132,10 +138,12 @@ class DatePopup extends Component {
     })));
 
     _defineProperty(this, "handleInput", (text, name) => {
-      const parsed = this.parse(text, name);
+      if (name !== 'time') {
+        const parsed = this.parse(text, name);
 
-      if (name !== 'time' && this.isValidDate(parsed)) {
-        this.scrollTo(parsed);
+        if (this.isValidDate(parsed)) {
+          this.scrollTo(Number(parsed));
+        }
       }
 
       this.setState({
@@ -165,6 +173,8 @@ class DatePopup extends Component {
     }));
 
     _defineProperty(this, "onClear", e => {
+      var _this$props$onClear, _this$props;
+
       let changes;
 
       if (this.props.range) {
@@ -179,7 +189,7 @@ class DatePopup extends Component {
       }
 
       this.select(changes);
-      this.props.onClear(e);
+      (_this$props$onClear = (_this$props = this.props).onClear) === null || _this$props$onClear === void 0 ? void 0 : _this$props$onClear.call(_this$props, e);
     });
 
     const defaultState = {
@@ -189,20 +199,16 @@ class DatePopup extends Component {
     };
     const {
       range,
-      from,
-      to,
-      date: _date,
-      time,
       withTime
     } = props;
 
     if (!range) {
-      const parsedDate = this.parse(_date, 'date');
-      const active = withTime && parsedDate && !time ? 'time' : 'date';
+      const parsedDate = this.parse(props.date, 'date');
+      const active = withTime && parsedDate && !props.time ? 'time' : 'date';
       this.state = { ...defaultState,
         active
       };
-    } else if (from && !to) {
+    } else if (props.from && !props.to) {
       this.state = { ...defaultState,
         active: 'to'
       };
@@ -242,7 +248,7 @@ class DatePopup extends Component {
 
   parse(text, type) {
     if (type === 'time') {
-      return parseTime(text);
+      return parseTime(String(text));
     }
 
     return this.props.parseDateInput(text);
@@ -254,8 +260,6 @@ class DatePopup extends Component {
       withTime
     } = this.props;
     const prevActive = this.state.active;
-    const date = this.parse(this.props.date, 'date');
-    const time = this.parse(this.props.time, 'time');
 
     if (!range && !withTime) {
       this.setState({
@@ -265,6 +269,8 @@ class DatePopup extends Component {
       this.props.onChange(changes.date);
       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
@@ -323,14 +329,19 @@ class DatePopup extends Component {
 
   confirm(name) {
     const text = this.state.text;
-    let result = this.parse(text, name);
+    let result;
 
     if (name === 'time') {
-      const time = this.parse(this.props.time, '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 if (!this.isValidDate(result)) {
-      result = this.parse(this.props[name], name);
+    } else {
+      result = this.parse(text, name);
+
+      if (!this.isValidDate(result)) {
+        result = this.parse(name in this.props ? this.props[name] : '', name);
+      }
     }
 
     this.select({
@@ -343,19 +354,25 @@ class DatePopup extends Component {
       range,
       hidden,
       withTime,
-      time,
       locale
     } = this.props;
+    const {
+      from,
+      to,
+      date,
+      time,
+      ...restProps
+    } = this.props;
     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 date = this.props[key];
+      const value = this.props[key];
       return { ...obj,
-        [key]: this.parse(date, key)
+        [key]: this.parse(value, key)
       };
     }, {});
-    const activeDate = this.state.active !== 'time' ? this.state.hoverDate || this.state.text && this.parse(this.state.text, 'date') : this.state.hoverDate || null;
+    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;
 
@@ -384,8 +401,7 @@ class DatePopup extends Component {
     }
 
     const scrollDate = withTime && !range ? this.state.scrollDate || dates.date || new Date() : this.state.scrollDate || dates[this.state.active] || new Date();
-    const calendarProps = { ...this.props,
-      ...this.state,
+    const calendarProps = { ...restProps,
       ...dates,
       scrollDate,
       activeDate,
@@ -424,7 +440,8 @@ class DatePopup extends Component {
         onClear: onClear,
         locale: locale
       }));
-    }), this.isInTimeMode() ? /*#__PURE__*/React.createElement(DateInput, _extends({}, this.props, this.state, {
+    }), this.isInTimeMode() ? /*#__PURE__*/React.createElement(DateInput, _extends({}, this.props, {
+      text: this.state.text,
       divider: !!parsedDate,
       hoverDate: null,
       name: 'time',

package/dist/date-picker/day.d.ts

@@ -0,0 +1,30 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { MonthsProps } from './consts';
+export interface DayProps extends MonthsProps {
+    day: Date;
+    empty: boolean;
+}
+export default class Day extends Component<DayProps> {
+    static propTypes: {
+        day: PropTypes.Requireable<string | number | Date>;
+        from: PropTypes.Requireable<string | number | Date>;
+        currentRange: PropTypes.Requireable<(string | number | Date | null | undefined)[]>;
+        activeRange: PropTypes.Requireable<(string | number | Date | null | undefined)[]>;
+        empty: PropTypes.Requireable<boolean>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        parseDateInput: PropTypes.Requireable<(...args: any[]) => any>;
+        onHover: PropTypes.Requireable<(...args: any[]) => any>;
+        minDate: PropTypes.Requireable<string | number | Date>;
+        maxDate: PropTypes.Requireable<string | number | Date>;
+    };
+    handleClick: () => void;
+    handleMouseOver: () => void;
+    handleMouseOut: () => void;
+    isDay: (date: Date) => boolean;
+    is: (name: 'date' | 'from' | 'to' | 'activeDate') => boolean;
+    inRange: (range: [Date, Date] | null) => boolean | null;
+    isDisabled: (date: Date) => boolean;
+    parse(text: string | null | undefined): Date | null;
+    render(): JSX.Element;
+}