@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

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';
@@ -70,17 +71,19 @@ import './weekdays.js';
 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 '../global/controls-height.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

@@ -21,13 +21,15 @@ import '../_helpers/icon.js';
 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 '../global/controls-height.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;
+}

package/dist/date-picker/day.js

@@ -37,14 +37,17 @@ class Day extends Component {
 
     _defineProperty(this, "isDay", date => isSameDay(this.props.day, date));
 
-    _defineProperty(this, "is", name => this.props[name] && this.isDay(this.props[name]));
+    _defineProperty(this, "is", name => {
+      const value = this.props[name];
+      return value != null && this.isDay(value);
+    });
 
     _defineProperty(this, "inRange", range => range && isAfter(startOfDay(this.props.day), startOfDay(range[0])) && isBefore(startOfDay(this.props.day), startOfDay(range[1])));
 
     _defineProperty(this, "isDisabled", date => {
       const min = this.parse(this.props.minDate);
       const max = this.parse(this.props.maxDate);
-      return this.props.minDate && isBefore(startOfDay(date), startOfDay(min)) || this.props.maxDate && isAfter(startOfDay(date), startOfDay(max));
+      return min != null && isBefore(startOfDay(date), startOfDay(min)) || max != null && isAfter(startOfDay(date), startOfDay(max));
     });
   }
 
@@ -103,7 +106,8 @@ class Day extends Component {
   }
 
 }
-Day.propTypes = {
+
+_defineProperty(Day, "propTypes", {
   day: dateType,
   from: dateType,
   currentRange: PropTypes.arrayOf(dateType),
@@ -114,6 +118,6 @@ Day.propTypes = {
   onHover: PropTypes.func,
   minDate: dateType,
   maxDate: dateType
-};
+});
 
 export { Day as default };

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

@@ -0,0 +1,2 @@
+declare const _default: string[];
+export default _default;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { MonthsProps } from './consts';
+declare function MonthNames(props: MonthsProps): JSX.Element;
+declare namespace MonthNames {
+    var propTypes: {
+        scrollDate: PropTypes.Requireable<string | number | Date>;
+        onScrollChange: PropTypes.Requireable<(...args: any[]) => any>;
+        currentRange: PropTypes.Requireable<(string | number | Date | null | undefined)[]>;
+        locale: PropTypes.Requireable<string>;
+    };
+}
+export default MonthNames;

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

@@ -1,4 +1,4 @@
-import { a as _extends, _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -44,11 +44,12 @@ class MonthName extends PureComponent {
 
 }
 
-MonthName.propTypes = {
+_defineProperty(MonthName, "propTypes", {
   month: dateType,
   onScrollChange: PropTypes.func,
   locale: PropTypes.string
-};
+});
+
 function MonthNames(props) {
   const {
     scrollDate,
@@ -64,12 +65,12 @@ function MonthNames(props) {
     months.push(startOfDay(middleDay));
   }
 
-  const pxToDate = linearFunction(0, startOfYear(scrollDate), yearScrollSpeed);
+  const pxToDate = linearFunction(0, Number(startOfYear(scrollDate)), yearScrollSpeed);
   let top = 0;
   let bottom = 0;
 
   if (props.currentRange) {
-    [top, bottom] = props.currentRange.map(date => Math.floor(pxToDate.x(date)));
+    [top, bottom] = props.currentRange.map(date => Math.floor(pxToDate.x(Number(date))));
   }
 
   return /*#__PURE__*/React.createElement("div", {

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

@@ -0,0 +1,29 @@
+import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { LinearFunction } from '../global/linear-function';
+import { MonthsProps } from './consts';
+export interface MonthSliderProps extends MonthsProps {
+    pxToDate: LinearFunction;
+}
+interface MonthSliderState {
+    dragging: boolean;
+}
+export default class MonthSlider extends PureComponent<MonthSliderProps> {
+    static propTypes: {
+        scrollDate: PropTypes.Requireable<string | number | Date>;
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        pxToDate: PropTypes.Requireable<PropTypes.InferProps<{
+            x: PropTypes.Requireable<(...args: any[]) => any>;
+            y: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
+    };
+    state: {
+        dragging: boolean;
+    };
+    componentDidUpdate(prevProps: MonthSliderProps, prevState: MonthSliderState): void;
+    onMouseDown: () => void;
+    onMouseUp: () => void;
+    onMouseMove: (e: MouseEvent) => void;
+    render(): JSX.Element;
+}
+export {};

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

@@ -32,7 +32,7 @@ class MonthSlider extends PureComponent {
     });
 
     _defineProperty(this, "onMouseMove", e => {
-      this.props.onScroll(linearFunction(0, this.props.scrollDate, yearScrollSpeed).y(e.movementY));
+      this.props.onScroll(linearFunction(0, Number(this.props.scrollDate), yearScrollSpeed).y(e.movementY));
     });
   }
 
@@ -63,7 +63,7 @@ class MonthSlider extends PureComponent {
       key: +date,
       className: classes,
       style: {
-        top: Math.floor(this.props.pxToDate.x(date) - units.cellSize)
+        top: Math.floor(this.props.pxToDate.x(Number(date)) - units.cellSize)
       },
       onMouseDown: this.onMouseDown
     })));

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { MonthsProps } from './consts';
+export interface MonthProps extends MonthsProps {
+    month: Date;
+}
+declare function Month(props: MonthProps): JSX.Element;
+declare namespace Month {
+    var propTypes: {
+        month: PropTypes.Requireable<string | number | Date>;
+        locale: PropTypes.Requireable<string>;
+    };
+}
+export default Month;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { MonthsProps } from './consts';
+declare function Months(props: MonthsProps): JSX.Element;
+declare namespace Months {
+    var propTypes: {
+        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
+        scrollDate: PropTypes.Requireable<string | number | Date>;
+    };
+}
+export default Months;

package/dist/date-picker/months.js

@@ -56,7 +56,7 @@ function monthHeight(date) {
 function scrollSpeed(date) {
   const monthStart = startOfMonth(date);
   const monthEnd = endOfMonth(date);
-  return (monthEnd - monthStart) / monthHeight(monthStart);
+  return (Number(monthEnd) - Number(monthStart)) / monthHeight(monthStart);
 }
 
 const scrollSchedule = scheduleRAF();
@@ -79,8 +79,8 @@ function Months(props) {
   }
 
   const currentSpeed = scrollSpeed(scrollDate);
-  const pxToDate = linearFunction(0, scrollDate, currentSpeed);
-  const offset = pxToDate.x(monthStart); // is a negative number
+  const pxToDate = linearFunction(0, Number(scrollDate), currentSpeed);
+  const offset = pxToDate.x(Number(monthStart)); // is a negative number
 
   const bottomOffset = monthHeight(scrollDate) + offset;
   return /*#__PURE__*/React.createElement("div", {

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { Locale } from 'date-fns';
+import PropTypes from 'prop-types';
+interface WeekdaysProps {
+    locale: Locale | undefined;
+}
+declare function Weekdays(props: WeekdaysProps): JSX.Element;
+declare namespace Weekdays {
+    var propTypes: {
+        locale: PropTypes.Requireable<string>;
+    };
+}
+export default Weekdays;