@jetbrains/ring-ui-built 7.0.107 → 7.0.108

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Component, createElement } from 'react';
 import { isAfter } from 'date-fns/isAfter';
 import { isBefore } from 'date-fns/isBefore';
-import { isSameDay } from 'date-fns/isSameDay';
 import { startOfDay } from 'date-fns/startOfDay';
 import { set } from 'date-fns';
 import memoize from '../global/memoize.js';
@@ -11,6 +10,8 @@ import Months from './months.js';
 import Years from './years.js';
 import Weekdays from './weekdays.js';
 import { parseTime } from './consts.js';
+import { animateDate } from './animate-date.js';
+import MonthNames from './month-names.js';
 import { s as styles } from '../_helpers/date-picker.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'classnames';
@@ -36,42 +37,36 @@ import 'memoize-one';
 import '../control-label/control-label.js';
 import '../control-help/control-help.js';
 import 'date-fns/addMonths';
-import 'date-fns/getDay';
-import 'date-fns/getDaysInMonth';
 import 'date-fns/startOfMonth';
-import 'date-fns/subMonths';
-import 'date-fns/endOfMonth';
-import '../global/schedule-raf.js';
-import '../global/linear-function.js';
-import '../global/use-event-callback.js';
 import './month.js';
-import 'date-fns/addDays';
 import 'date-fns/format';
-import 'date-fns/setDay';
+import 'date-fns/getDay';
 import './day.js';
+import 'core-js/modules/es.array.includes.js';
+import 'date-fns/addDays';
 import 'date-fns/getDate';
+import 'date-fns/isSameDay';
 import 'date-fns/isToday';
 import 'date-fns/add';
-import './month-names.js';
-import 'date-fns/isThisMonth';
-import 'date-fns/set';
-import 'date-fns/startOfYear';
-import './month-slider.js';
+import '../global/sniffer.js';
+import 'sniffr';
+import './use-intersection-observer.js';
+import './scroll-arith.js';
+import './use-scroll-behavior.js';
+import '../global/use-event-callback.js';
+import '../global/schedule-raf.js';
 import 'date-fns/addYears';
-import 'date-fns/subYears';
 import 'date-fns/getYear';
 import 'date-fns/isSameYear';
 import 'date-fns/isThisYear';
 import 'date-fns/setYear';
+import 'date-fns/startOfYear';
+import 'date-fns/setDay';
+import 'date-fns/isThisMonth';
+import '../global/linear-function.js';
+import './month-slider.js';
 
-const scrollExpDelay = 10;
 class DatePopup extends Component {
-  static sameDay(next, prev) {
-    if (next && prev) {
-      return isSameDay(next, prev);
-    }
-    return next === prev;
-  }
   static defaultProps = {
     onChange() {}
   };
@@ -92,21 +87,22 @@ class DatePopup extends Component {
       this.state = {
         ...defaultState,
         active,
-        scrollDate: parsedDate
+        scrollDate: {
+          date: parsedDate,
+          source: 'other'
+        }
       };
     } else {
       this.state = {
         ...defaultState,
         active: props.from && !props.to ? 'to' : 'from',
-        scrollDate: this.parse(props.from, 'from')
+        scrollDate: {
+          date: this.parse(props.from, 'from'),
+          source: 'other'
+        }
       };
     }
   }
-  componentDidMount() {
-    if (this.componentRef.current) {
-      this.componentRef.current.addEventListener('wheel', this.handleWheel);
-    }
-  }
   componentDidUpdate(prevProps, prevState) {
     if (this.state.active !== prevState.active) {
       if (this.state.text && prevState.active) {
@@ -118,19 +114,11 @@ class DatePopup extends Component {
     }
   }
   componentWillUnmount() {
-    if (this.componentRef.current) {
-      this.componentRef.current.removeEventListener('wheel', this.handleWheel);
-    }
+    this.animationCleanup?.();
   }
-  _scrollDate;
-  _scrollTS;
+  animationCleanup = null;
   isInTimeMode = () => !this.props.range && this.props.withTime || false;
   componentRef = /*#__PURE__*/React.createRef();
-  handleWheel = e => {
-    if (e.cancelable) {
-      e.preventDefault();
-    }
-  };
   parse(text, type) {
     if (type === 'time') {
       return parseTime(String(text));
@@ -238,31 +226,6 @@ class DatePopup extends Component {
     }
     return false;
   };
-  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;
-      return;
-    }
-    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);
-  };
-  scrollTo = scrollDate => {
-    this._scrollDate = scrollDate;
-    if (!this._scrollTS) {
-      this.scheduleScroll();
-    }
-  };
   hoverHandler = hoverDate => this.setState({
     hoverDate
   });
@@ -273,7 +236,23 @@ class DatePopup extends Component {
     if (name !== 'time') {
       const parsed = this.parse(text, name);
       if (this.isValidDate(parsed)) {
-        this.scrollTo(Number(parsed));
+        this.animationCleanup?.();
+        const currentScrollDate = this.state.scrollDate?.date;
+        if (currentScrollDate != null) {
+          this.animationCleanup = animateDate(currentScrollDate, parsed, date => {
+            this.setState({
+              scrollDate: {
+                date,
+                source: 'other'
+              }
+            });
+          });
+        } else {
+          this.setScrollDate({
+            date: parsed,
+            source: 'other'
+          });
+        }
       }
     }
     this.setState({
@@ -295,9 +274,11 @@ class DatePopup extends Component {
       });
     }
   };
-  handleScroll = scrollDate => this.setState({
-    scrollDate
-  });
+  setScrollDate = scrollDate => {
+    this.setState({
+      scrollDate
+    });
+  };
   onClear = e => {
     let changes;
     if (this.props.range) {
@@ -359,7 +340,10 @@ class DatePopup extends Component {
           break;
       }
     }
-    const scrollDate = this.state.scrollDate || new Date();
+    const scrollDate = this.state.scrollDate || {
+      date: new Date(),
+      source: 'other'
+    };
     const calendarProps = {
       ...restProps,
       ...dates,
@@ -367,8 +351,7 @@ class DatePopup extends Component {
       activeDate,
       currentRange,
       activeRange,
-      onScroll: this.handleScroll,
-      onScrollChange: this.scrollTo
+      setScrollDate: this.setScrollDate
     };
     const clearable = Boolean(this.props.onClear);
     return /*#__PURE__*/jsxs("div", {
@@ -421,6 +404,10 @@ class DatePopup extends Component {
           onHover: this.hoverHandler,
           onSelect: this.selectHandler,
           locale: locale
+        }), /*#__PURE__*/jsx(MonthNames, {
+          ...calendarProps,
+          onHover: this.hoverHandler,
+          onSelect: this.selectHandler
         }), /*#__PURE__*/jsx(Years, {
           ...calendarProps
         })]

package/components/date-picker/day.js

@@ -1,3 +1,4 @@
+import 'core-js/modules/es.array.includes.js';
 import { Component } from 'react';
 import classNames from 'classnames';
 import { addDays } from 'date-fns/addDays';
@@ -13,6 +14,8 @@ import { getDayNumInWeek, weekdays } from './consts.js';
 import { s as styles } from '../_helpers/date-picker.js';
 import { jsx } from 'react/jsx-runtime';
 import 'date-fns/add';
+import '../global/sniffer.js';
+import 'sniffr';
 
 let hoverTO;
 class Day extends Component {
@@ -61,32 +64,38 @@ class Day extends Component {
     const spreadRange = makeSpreadRange(currentRange);
     const disabled = this.isDisabled(day);
     const activeSpreadRange = makeSpreadRange(activeRange);
+    const className = classNames(styles.day, dayInWeekClass, {
+      [styles.current]: ['date', 'from', 'to'].some(this.is),
+      [styles.active]: !disabled && this.is('activeDate'),
+      [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day)),
+      [styles.empty]: empty,
+      [styles.from]: currentRange && this.isDay(currentRange[0]) && !reverse || activeRange && this.isDay(activeRange[0]),
+      [styles.to]: currentRange && this.isDay(currentRange[1]) || activeRange && this.isDay(activeRange[1]),
+      [styles.between]: this.inRange(currentRange),
+      [styles.activeBetween]: !disabled && this.inRange(activeRange),
+      [styles.first]: getDate(day) === 1,
+      [styles.spread]: this.inRange(spreadRange),
+      [styles.activeSpread]: !disabled && this.inRange(activeSpreadRange),
+      [styles.disabled]: disabled
+    });
+    if (empty) {
+      return /*#__PURE__*/jsx("div", {
+        className: className
+      });
+    }
     return (
       /*#__PURE__*/
       // TODO make keyboard navigation actually work
       jsx("button", {
         type: "button",
-        className: classNames(styles.day, dayInWeekClass, {
-          [styles.current]: ['date', 'from', 'to'].some(this.is),
-          [styles.active]: !disabled && this.is('activeDate'),
-          [styles.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day)),
-          [styles.empty]: empty,
-          [styles.from]: currentRange && this.isDay(currentRange[0]) && !reverse || activeRange && this.isDay(activeRange[0]),
-          [styles.to]: currentRange && this.isDay(currentRange[1]) || activeRange && this.isDay(activeRange[1]),
-          [styles.between]: this.inRange(currentRange),
-          [styles.activeBetween]: !disabled && this.inRange(activeRange),
-          [styles.first]: getDate(day) === 1,
-          [styles.spread]: this.inRange(spreadRange),
-          [styles.activeSpread]: !disabled && this.inRange(activeSpreadRange),
-          [styles.disabled]: disabled
-        }),
+        className: className,
         onClick: this.handleClick,
         onMouseOver: this.handleMouseOver,
         onFocus: this.handleMouseOver,
         onMouseOut: this.handleMouseOut,
         onBlur: this.handleMouseOut,
         disabled: disabled,
-        children: empty || /*#__PURE__*/jsx("span", {
+        children: /*#__PURE__*/jsx("span", {
           className: classNames({
             [styles.today]: isToday(day)
           }),

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

@@ -1,31 +1,50 @@
 import { c } from 'react-compiler-runtime';
 import { PureComponent } from 'react';
 import classNames from 'classnames';
-import { endOfMonth } from 'date-fns/endOfMonth';
 import { format } from 'date-fns/format';
 import { isThisMonth } from 'date-fns/isThisMonth';
-import { set } from 'date-fns/set';
-import { startOfDay } from 'date-fns/startOfDay';
 import { startOfYear } from 'date-fns/startOfYear';
+import { startOfMonth, addMonths, getYear } from 'date-fns';
 import linearFunction from '../global/linear-function.js';
 import MonthSlider from './month-slider.js';
-import { YEAR, MIDDLE_DAY, yearScrollSpeed } from './consts.js';
+import { YEAR, yearScrollSpeed, MIDDLE_DAY } from './consts.js';
+import { animateDate } from './animate-date.js';
 import { s as styles } from '../_helpers/date-picker.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import 'date-fns/addYears';
-import 'date-fns/subYears';
+import '../global/schedule-raf.js';
 import 'date-fns/add';
+import '../global/sniffer.js';
+import 'sniffr';
 
 class MonthName extends PureComponent {
+  componentWillUnmount() {
+    this.animationCleanup?.();
+  }
+  animationCleanup = null;
   handleClick = () => {
-    const end = endOfMonth(this.props.month);
-    this.props.onScrollChange(end.getTime());
+    const start = startOfMonth(this.getMiddleDay(this.props.monthIndex));
+    const nextStart = addMonths(start, 1);
+    // Because the space between months belongs to the next month, we position the target month a bit to the top
+    // eslint-disable-next-line no-magic-numbers
+    const targetDate = new Date(0.4 * Number(start) + 0.6 * Number(nextStart));
+    this.animationCleanup?.();
+    this.animationCleanup = animateDate(this.props.scrollDate.date, targetDate, date => {
+      this.props.setScrollDate({
+        date,
+        source: 'other'
+      });
+    });
   };
+  getMiddleDay(monthIndex) {
+    return new Date(getYear(this.props.scrollDate.date), monthIndex, MIDDLE_DAY);
+  }
   render() {
     const {
-      month,
+      monthIndex,
       locale
     } = this.props;
+    const month = this.getMiddleDay(monthIndex);
     return /*#__PURE__*/jsx("button", {
       type: "button",
       className: classNames(styles.monthName, {
@@ -38,77 +57,63 @@ class MonthName extends PureComponent {
     });
   }
 }
+const monthsIndices = Array.from({
+  length: YEAR
+}, (_, i) => i);
 function MonthNames(props) {
-  const $ = c(25);
-  if ($[0] !== "bc2d18bdf292acf1ee5e9f58d8bdc0707131612de3d6a30b9b3c175a40cf30a9") {
-    for (let $i = 0; $i < 25; $i += 1) {
+  const $ = c(21);
+  if ($[0] !== "633552d635d6cf61dab4cfd31bcb62cbd2b7859ba7d592e2891928ab59b43fa8") {
+    for (let $i = 0; $i < 21; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "bc2d18bdf292acf1ee5e9f58d8bdc0707131612de3d6a30b9b3c175a40cf30a9";
+    $[0] = "633552d635d6cf61dab4cfd31bcb62cbd2b7859ba7d592e2891928ab59b43fa8";
   }
   const {
     scrollDate,
     locale
   } = props;
-  let months;
-  if ($[1] !== scrollDate) {
-    months = [];
-    for (let i = 0; i < YEAR; i++) {
-      const middleDay = set(scrollDate, {
-        month: i,
-        date: MIDDLE_DAY
-      });
-      months.push(startOfDay(middleDay));
-    }
-    $[1] = scrollDate;
-    $[2] = months;
-  } else {
-    months = $[2];
-  }
   let bottom;
-  let pxToDate;
   let top;
-  if ($[3] !== props.currentRange || $[4] !== scrollDate) {
+  if ($[1] !== props.currentRange || $[2] !== scrollDate.date) {
     let t0;
-    if ($[8] !== scrollDate) {
-      t0 = startOfYear(scrollDate);
-      $[8] = scrollDate;
-      $[9] = t0;
+    if ($[5] !== scrollDate.date) {
+      t0 = startOfYear(scrollDate.date);
+      $[5] = scrollDate.date;
+      $[6] = t0;
     } else {
-      t0 = $[9];
+      t0 = $[6];
     }
-    pxToDate = linearFunction(0, Number(t0), yearScrollSpeed);
+    const pxToDate = linearFunction(0, Number(t0), yearScrollSpeed);
     top = 0;
     bottom = 0;
     if (props.currentRange) {
       [top, bottom] = props.currentRange.map(date => Math.floor(pxToDate.x(Number(date))));
     }
-    $[3] = props.currentRange;
-    $[4] = scrollDate;
-    $[5] = bottom;
-    $[6] = pxToDate;
-    $[7] = top;
+    $[1] = props.currentRange;
+    $[2] = scrollDate.date;
+    $[3] = bottom;
+    $[4] = top;
   } else {
-    bottom = $[5];
-    pxToDate = $[6];
-    top = $[7];
+    bottom = $[3];
+    top = $[4];
   }
   let t0;
-  if ($[10] !== locale || $[11] !== months || $[12] !== props.onScrollChange) {
-    t0 = months.map(month => /*#__PURE__*/jsx(MonthName, {
-      month: month,
-      onScrollChange: props.onScrollChange,
+  if ($[7] !== locale || $[8] !== props.setScrollDate || $[9] !== scrollDate) {
+    t0 = monthsIndices.map(monthIndex => /*#__PURE__*/jsx(MonthName, {
+      scrollDate: scrollDate,
+      monthIndex: monthIndex,
+      setScrollDate: props.setScrollDate,
       locale: locale
-    }, +month));
-    $[10] = locale;
-    $[11] = months;
-    $[12] = props.onScrollChange;
-    $[13] = t0;
+    }, monthIndex));
+    $[7] = locale;
+    $[8] = props.setScrollDate;
+    $[9] = scrollDate;
+    $[10] = t0;
   } else {
-    t0 = $[13];
+    t0 = $[10];
   }
   let t1;
-  if ($[14] !== bottom || $[15] !== props.currentRange || $[16] !== top) {
+  if ($[11] !== bottom || $[12] !== props.currentRange || $[13] !== top) {
     t1 = props.currentRange && /*#__PURE__*/jsx("div", {
       className: styles.range,
       style: {
@@ -116,37 +121,36 @@ function MonthNames(props) {
         height: bottom + 1 - (top - 1)
       }
     });
-    $[14] = bottom;
-    $[15] = props.currentRange;
-    $[16] = top;
-    $[17] = t1;
+    $[11] = bottom;
+    $[12] = props.currentRange;
+    $[13] = top;
+    $[14] = t1;
   } else {
-    t1 = $[17];
+    t1 = $[14];
   }
   let t2;
-  if ($[18] !== props || $[19] !== pxToDate) {
+  if ($[15] !== props) {
     t2 = /*#__PURE__*/jsx(MonthSlider, {
-      ...props,
-      pxToDate: pxToDate
+      ...props
     });
-    $[18] = props;
-    $[19] = pxToDate;
-    $[20] = t2;
+    $[15] = props;
+    $[16] = t2;
   } else {
-    t2 = $[20];
+    t2 = $[16];
   }
   let t3;
-  if ($[21] !== t0 || $[22] !== t1 || $[23] !== t2) {
+  if ($[17] !== t0 || $[18] !== t1 || $[19] !== t2) {
     t3 = /*#__PURE__*/jsxs("div", {
       className: styles.monthNames,
+      "data-test": "ring-date-popup--month-names",
       children: [t0, t1, t2]
     });
-    $[21] = t0;
-    $[22] = t1;
-    $[23] = t2;
-    $[24] = t3;
+    $[17] = t0;
+    $[18] = t1;
+    $[19] = t2;
+    $[20] = t3;
   } else {
-    t3 = $[24];
+    t3 = $[20];
   }
   return t3;
 }

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

@@ -1,20 +1,5 @@
-import { PureComponent } from 'react';
-import { type LinearFunction } from '../global/linear-function';
-import { type MonthsProps } from './consts';
-export interface MonthSliderProps extends MonthsProps {
-    pxToDate: LinearFunction;
-}
-interface MonthSliderState {
-    dragging: boolean;
-}
-export default class MonthSlider extends PureComponent<MonthSliderProps> {
-    state: {
-        dragging: boolean;
-    };
-    componentDidUpdate(prevProps: MonthSliderProps, prevState: MonthSliderState): void;
-    onMouseDown: () => void;
-    onMouseUp: () => void;
-    onMouseMove: (e: MouseEvent) => void;
-    render(): import("react").JSX.Element;
-}
-export {};
+import { type ScrollDate } from './consts';
+export default function MonthSlider({ scrollDate, setScrollDate, }: {
+    scrollDate: ScrollDate;
+    setScrollDate: (scrollDate: ScrollDate) => void;
+}): import("react").JSX.Element;