@jetbrains/ring-ui-built 7.0.106 → 7.0.108

package/components/date-picker/months.js

@@ -1,225 +1,109 @@
 import { c } from 'react-compiler-runtime';
-import { useRef, useEffect, createElement } from 'react';
 import { addMonths } from 'date-fns/addMonths';
-import { getDay } from 'date-fns/getDay';
-import { getDaysInMonth } from 'date-fns/getDaysInMonth';
 import { startOfMonth } from 'date-fns/startOfMonth';
-import { subMonths } from 'date-fns/subMonths';
-import { endOfMonth } from 'date-fns/endOfMonth';
+import Month, { getMonthHeight } from './month.js';
+import units from './consts.js';
+import { ScrollArith } from './scroll-arith.js';
+import { useScrollBehavior } from './use-scroll-behavior.js';
 import scheduleRAF from '../global/schedule-raf.js';
-import linearFunction from '../global/linear-function.js';
-import useEventCallback from '../global/use-event-callback.js';
-import Month from './month.js';
-import MonthNames from './month-names.js';
-import units, { DOUBLE, HALF, WEEK, weekdays } from './consts.js';
+import { useIntersectionObserver } from './use-intersection-observer.js';
 import { s as styles } from '../_helpers/date-picker.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import 'date-fns/addDays';
+import { createElement } from 'react';
+import { jsx } from 'react/jsx-runtime';
 import 'date-fns/format';
-import 'date-fns/setDay';
+import 'date-fns/getDay';
+import 'date-fns';
 import './day.js';
+import 'core-js/modules/es.array.includes.js';
 import 'classnames';
+import 'date-fns/addDays';
 import 'date-fns/getDate';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/isSameDay';
 import 'date-fns/isToday';
 import 'date-fns/startOfDay';
-import 'date-fns/isThisMonth';
-import 'date-fns/set';
-import 'date-fns/startOfYear';
-import './month-slider.js';
-import 'date-fns/addYears';
-import 'date-fns/subYears';
 import 'date-fns/add';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../global/use-event-callback.js';
 
-const {
-  unit,
-  cellSize,
-  calHeight
-} = units;
-const FridayToSunday = WEEK + weekdays.SU - weekdays.FR;
-const FIVELINES = 31;
-const TALLMONTH = 6;
-const SHORTMONTH = 5;
-const PADDING = 2;
-const MONTHSBACK = 2;
-function monthHeight(date) {
-  const monthStart = startOfMonth(date);
-  const daysSinceLastFriday = (getDay(monthStart) + FridayToSunday) % WEEK;
-  const monthLines = daysSinceLastFriday + getDaysInMonth(monthStart) > FIVELINES ? TALLMONTH : SHORTMONTH;
-  return monthLines * cellSize + unit * PADDING;
-}
-// in milliseconds per pixel
-function scrollSpeed(date) {
-  const monthStart = startOfMonth(date);
-  const monthEnd = endOfMonth(date);
-  return (Number(monthEnd) - Number(monthStart)) / monthHeight(monthStart);
+function getMonthHeightWithMargin(date, locale) {
+  return units.unit * 2 + getMonthHeight(date, locale);
 }
-const scrollSchedule = scheduleRAF();
-let dy = 0;
+const scrollArith = new ScrollArith({
+  itemsAround: 60,
+  floorToItem: startOfMonth,
+  shiftItems: addMonths,
+  getItemHeight: (item, locale) => getMonthHeightWithMargin(item, locale)
+});
+const scheduleScroll = scheduleRAF();
+/**
+ * In range selection (start/end dates across different months), the gap between months
+ * is correctly background-filled only when both months are reported as visible.
+ *
+ * To avoid an unpainted gap at the viewport boundary, the next month must be reported
+ * as visible slightly before it actually enters the viewport. We achieve this by
+ * extending the IntersectionObserver scrollMargin.
+ */
+const intersectionObserverScrollMargin = units.cellSize * 2;
 function Months(props) {
-  const $ = c(30);
-  if ($[0] !== "5d5fe78f7bda393a523d9472cfc721d7ae4d117fe8278fd6d3d9589b20c1969a") {
-    for (let $i = 0; $i < 30; $i += 1) {
+  const $ = c(11);
+  if ($[0] !== "4aa546d8594d34e20d23ddb1ac60f352dda8d4f0089b69b199ba5199e1f35dd5") {
+    for (let $i = 0; $i < 11; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "5d5fe78f7bda393a523d9472cfc721d7ae4d117fe8278fd6d3d9589b20c1969a";
+    $[0] = "4aa546d8594d34e20d23ddb1ac60f352dda8d4f0089b69b199ba5199e1f35dd5";
   }
   const {
-    scrollDate
+    scrollDate,
+    setScrollDate,
+    locale
   } = props;
-  let monthStart;
-  let months;
-  if ($[1] !== scrollDate) {
-    const monthDate = scrollDate instanceof Date ? scrollDate : new Date(scrollDate);
-    monthStart = startOfMonth(monthDate);
-    let month = subMonths(monthStart, MONTHSBACK);
-    months = [month];
-    for (let i = 0; i < MONTHSBACK * DOUBLE; i++) {
-      month = addMonths(month, 1);
-      months.push(month);
-    }
-    $[1] = scrollDate;
-    $[2] = monthStart;
-    $[3] = months;
-  } else {
-    monthStart = $[2];
-    months = $[3];
-  }
-  let pxToDate;
+  const {
+    containerRef,
+    items
+  } = useScrollBehavior(scrollDate, setScrollDate, locale, "monthsScroll", scrollArith, scheduleScroll);
+  const intersectionObserverHandle = useIntersectionObserver(containerRef, intersectionObserverScrollMargin);
   let t0;
-  if ($[4] !== monthStart || $[5] !== scrollDate) {
-    const currentSpeed = scrollSpeed(scrollDate);
-    pxToDate = linearFunction(0, Number(scrollDate), currentSpeed);
-    t0 = pxToDate.x(Number(monthStart));
-    $[4] = monthStart;
-    $[5] = scrollDate;
-    $[6] = pxToDate;
-    $[7] = t0;
-  } else {
-    pxToDate = $[6];
-    t0 = $[7];
-  }
-  const offset = t0;
-  const bottomOffset = monthHeight(scrollDate) + offset;
-  const componentRef = useRef(null);
-  let t1;
-  if ($[8] !== bottomOffset || $[9] !== months || $[10] !== offset || $[11] !== props || $[12] !== pxToDate) {
-    t1 = e => {
-      e.preventDefault();
-      dy = dy + e.deltaY;
-      scrollSchedule(() => {
-        let date;
-        if (dy < offset) {
-          date = pxToDate.y(offset) + (dy - offset) * scrollSpeed(months[1]);
-        } else {
-          if (dy > bottomOffset) {
-            date = pxToDate.y(bottomOffset) + (dy - bottomOffset) * scrollSpeed(months[MONTHSBACK + 1]);
-          } else {
-            date = pxToDate.y(dy);
-          }
-        }
-        props.onScroll(date);
-        dy = 0;
+  if ($[1] !== intersectionObserverHandle || $[2] !== items || $[3] !== props) {
+    let t1;
+    if ($[5] !== intersectionObserverHandle || $[6] !== props) {
+      t1 = month => /*#__PURE__*/createElement(Month, {
+        ...props,
+        month: month,
+        key: +month,
+        intersectionObserverHandle: intersectionObserverHandle
       });
-    };
-    $[8] = bottomOffset;
-    $[9] = months;
-    $[10] = offset;
-    $[11] = props;
-    $[12] = pxToDate;
-    $[13] = t1;
-  } else {
-    t1 = $[13];
-  }
-  const handleWheel = useEventCallback(t1);
-  let t2;
-  let t3;
-  if ($[14] !== handleWheel) {
-    t2 = () => {
-      const current = componentRef.current;
-      if (current) {
-        current.addEventListener("wheel", handleWheel, {
-          passive: false
-        });
-      }
-      return () => {
-        if (current) {
-          current.removeEventListener("wheel", handleWheel);
-        }
-      };
-    };
-    t3 = [handleWheel];
-    $[14] = handleWheel;
-    $[15] = t2;
-    $[16] = t3;
-  } else {
-    t2 = $[15];
-    t3 = $[16];
-  }
-  useEffect(t2, t3);
-  const t4 = Math.floor(calHeight * HALF - monthHeight(months[0]) - monthHeight(months[1]) + offset);
-  let t5;
-  if ($[17] !== t4) {
-    t5 = {
-      top: t4
-    };
-    $[17] = t4;
-    $[18] = t5;
-  } else {
-    t5 = $[18];
-  }
-  let t6;
-  if ($[19] !== months || $[20] !== props) {
-    t6 = months.map(date_0 => /*#__PURE__*/createElement(Month, {
-      ...props,
-      month: date_0,
-      key: +date_0
-    }));
-    $[19] = months;
-    $[20] = props;
-    $[21] = t6;
-  } else {
-    t6 = $[21];
-  }
-  let t7;
-  if ($[22] !== t5 || $[23] !== t6) {
-    t7 = /*#__PURE__*/jsx("div", {
-      style: t5,
-      className: styles.days,
-      children: t6
-    });
-    $[22] = t5;
-    $[23] = t6;
-    $[24] = t7;
-  } else {
-    t7 = $[24];
-  }
-  let t8;
-  if ($[25] !== props) {
-    t8 = /*#__PURE__*/jsx(MonthNames, {
-      ...props
-    });
-    $[25] = props;
-    $[26] = t8;
+      $[5] = intersectionObserverHandle;
+      $[6] = props;
+      $[7] = t1;
+    } else {
+      t1 = $[7];
+    }
+    t0 = items.map(t1);
+    $[1] = intersectionObserverHandle;
+    $[2] = items;
+    $[3] = props;
+    $[4] = t0;
   } else {
-    t8 = $[26];
+    t0 = $[4];
   }
-  let t9;
-  if ($[27] !== t7 || $[28] !== t8) {
-    t9 = /*#__PURE__*/jsxs("div", {
+  let t1;
+  if ($[8] !== containerRef || $[9] !== t0) {
+    t1 = /*#__PURE__*/jsx("div", {
       className: styles.months,
-      ref: componentRef,
-      children: [t7, t8]
+      ref: containerRef,
+      "data-test": "ring-date-popup--months",
+      children: t0
     });
-    $[27] = t7;
-    $[28] = t8;
-    $[29] = t9;
+    $[8] = containerRef;
+    $[9] = t0;
+    $[10] = t1;
   } else {
-    t9 = $[29];
+    t1 = $[10];
   }
-  return t9;
+  return t1;
 }
 
 export { Months as default };

package/components/date-picker/scroll-arith.d.ts

@@ -0,0 +1,35 @@
+import { type Locale } from 'date-fns';
+/**
+ * Scroll math helper for month/year scrollers.
+ *
+ * An "item" is a floor-boundary date representing the start of a visible period
+ * (e.g. start of a month or start of a year).
+ */
+export declare class ScrollArith {
+    private itemsAround;
+    private floorToItem;
+    private shiftItem;
+    private getItemHeight;
+    constructor(params: {
+        itemsAround: number;
+        floorToItem: (date: Date) => Date;
+        shiftItems: (date: Date, delta: number) => Date;
+        getItemHeight: (item: Date, locale: Locale | undefined) => number;
+    });
+    /**
+     * Builds a symmetric list of items centered around the given scrollDate.
+     */
+    getItems(scrollDate: Date | number): Date[];
+    /**
+     * Computes the scroll offset which places the `scrollDate` at the vertical center.
+     */
+    getScrollTop(items: Date[], scrollDate: Date | number, locale: Locale | undefined): number;
+    getItemsAndScrollTop(scrollDate: Date | number, locale: Locale | undefined): {
+        newItems: Date[];
+        newScrollTop: number;
+    };
+    /**
+     * Returns the date currently located in the vertical center of the calendar.
+     */
+    getScrollDate(items: Date[], scrollTop: number, locale: Locale | undefined): Date;
+}

package/components/date-picker/scroll-arith.js

@@ -0,0 +1,74 @@
+import units, { HALF } from './consts.js';
+import 'date-fns/add';
+import '../global/sniffer.js';
+import 'sniffr';
+
+/**
+ * Scroll math helper for month/year scrollers.
+ *
+ * An "item" is a floor-boundary date representing the start of a visible period
+ * (e.g. start of a month or start of a year).
+ */
+class ScrollArith {
+  itemsAround;
+  floorToItem;
+  shiftItem;
+  getItemHeight;
+  constructor(params) {
+    this.itemsAround = params.itemsAround;
+    this.floorToItem = params.floorToItem;
+    this.shiftItem = params.shiftItems;
+    this.getItemHeight = params.getItemHeight;
+  }
+  /**
+   * Builds a symmetric list of items centered around the given scrollDate.
+   */
+  getItems(scrollDate) {
+    const centerItem = this.floorToItem(new Date(scrollDate));
+    return Array.from({
+      length: 1 + this.itemsAround * 2
+    }, (_, index) => this.shiftItem(centerItem, index - this.itemsAround));
+  }
+  /**
+   * Computes the scroll offset which places the `scrollDate` at the vertical center.
+   */
+  getScrollTop(items, scrollDate, locale) {
+    const item = this.floorToItem(new Date(scrollDate));
+    const nextItem = this.shiftItem(item, 1);
+    let index = items.findIndex(it => Number(it) === Number(item));
+    if (index === -1) {
+      index = Number(item) < Number(items[0]) ? 0 : items.length - 1;
+    }
+    const itemFraction = (Number(scrollDate) - Number(item)) / (Number(nextItem) - Number(item));
+    const offsetWithinItem = itemFraction * this.getItemHeight(item, locale);
+    const heightBeforeItem = items.slice(0, index).reduce((totalHeight, it) => totalHeight + this.getItemHeight(it, locale), 0);
+    return heightBeforeItem + offsetWithinItem - units.calHeight * HALF;
+  }
+  getItemsAndScrollTop(scrollDate, locale) {
+    const newItems = this.getItems(scrollDate);
+    const newScrollTop = this.getScrollTop(newItems, scrollDate, locale);
+    return {
+      newItems,
+      newScrollTop
+    };
+  }
+  /**
+   * Returns the date currently located in the vertical center of the calendar.
+   */
+  getScrollDate(items, scrollTop, locale) {
+    let heightBeforeItem = 0;
+    for (const item of items) {
+      const itemHeight = this.getItemHeight(item, locale);
+      const offsetWithinItem = scrollTop - heightBeforeItem + units.calHeight * HALF;
+      if (offsetWithinItem < itemHeight) {
+        const itemFraction = offsetWithinItem / itemHeight;
+        const nextItem = this.shiftItem(item, 1);
+        return new Date(Number(item) + itemFraction * (Number(nextItem) - Number(item)));
+      }
+      heightBeforeItem += itemHeight;
+    }
+    return items[items.length - 1];
+  }
+}
+
+export { ScrollArith };

package/components/date-picker/use-intersection-observer.d.ts

@@ -0,0 +1,6 @@
+import { type RefObject } from 'react';
+export declare function useIntersectionObserver(containerRef: RefObject<HTMLElement | null>, scrollMargin?: number): IntersectionObserverHandle | null;
+export interface IntersectionObserverHandle {
+    observeVisibility(element: Element, setVisible: (isVisible: boolean) => void): () => void;
+}
+export declare function useVisibility(handle: IntersectionObserverHandle | null, elementRef: RefObject<Element | null>): boolean;

package/components/date-picker/use-intersection-observer.js

@@ -0,0 +1,93 @@
+import { c } from 'react-compiler-runtime';
+import { useState, useEffect } from 'react';
+
+function useIntersectionObserver(containerRef, t0) {
+  const $ = c(5);
+  if ($[0] !== "85eea0b6bda17bfb5987776c879da3db3d1a41e1157672102d3b021b57efb05a") {
+    for (let $i = 0; $i < 5; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "85eea0b6bda17bfb5987776c879da3db3d1a41e1157672102d3b021b57efb05a";
+  }
+  const scrollMargin = t0 === undefined ? 0 : t0;
+  const [handle, setHandle] = useState(null);
+  let t1;
+  let t2;
+  if ($[1] !== containerRef || $[2] !== scrollMargin) {
+    t1 = () => {
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+      const elementToSetVisible = new Map();
+      const observer = new IntersectionObserver(entries => {
+        for (const entry of entries) {
+          const setVisible = elementToSetVisible.get(entry.target);
+          setVisible?.(entry.isIntersecting);
+        }
+      }, {
+        root: container,
+        ...(scrollMargin ? {
+          scrollMargin: `${scrollMargin}px`
+        } : {})
+      });
+      setHandle({
+        observeVisibility(element, setVisible_0) {
+          elementToSetVisible.set(element, setVisible_0);
+          observer.observe(element);
+          return () => {
+            elementToSetVisible.delete(element);
+            observer.unobserve(element);
+          };
+        }
+      });
+      return () => {
+        observer.disconnect();
+        setHandle(null);
+      };
+    };
+    t2 = [containerRef, scrollMargin];
+    $[1] = containerRef;
+    $[2] = scrollMargin;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t1 = $[3];
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  return handle;
+}
+function useVisibility(handle, elementRef) {
+  const $ = c(5);
+  if ($[0] !== "85eea0b6bda17bfb5987776c879da3db3d1a41e1157672102d3b021b57efb05a") {
+    for (let $i = 0; $i < 5; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "85eea0b6bda17bfb5987776c879da3db3d1a41e1157672102d3b021b57efb05a";
+  }
+  const [isVisible, setIsVisible] = useState(false);
+  let t0;
+  let t1;
+  if ($[1] !== elementRef || $[2] !== handle) {
+    t0 = () => {
+      const element = elementRef.current;
+      if (!element || !handle) {
+        return;
+      }
+      return handle.observeVisibility(element, setIsVisible);
+    };
+    t1 = [handle, elementRef, setIsVisible];
+    $[1] = elementRef;
+    $[2] = handle;
+    $[3] = t0;
+    $[4] = t1;
+  } else {
+    t0 = $[3];
+    t1 = $[4];
+  }
+  useEffect(t0, t1);
+  return isVisible;
+}
+
+export { useIntersectionObserver, useVisibility };

package/components/date-picker/use-scroll-behavior.d.ts

@@ -0,0 +1,8 @@
+import { type Locale } from 'date-fns';
+import { type CalendarProps, type ScrollDate } from './consts';
+import { type ScrollArith } from './scroll-arith';
+import type scheduleRAF from '../global/schedule-raf';
+export declare function useScrollBehavior(scrollDate: ScrollDate, onContainerScroll: CalendarProps['setScrollDate'], locale: Locale | undefined, selfScrollDateSource: ScrollDate['source'], arith: ScrollArith, scheduleScroll: ReturnType<typeof scheduleRAF>): {
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    items: Date[];
+};