@jetbrains/ring-ui 7.0.106 → 7.0.108

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

@@ -1,22 +1,39 @@
 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 { addMonths, getYear, startOfMonth } from 'date-fns';
 import linearFunction from '../global/linear-function';
 import MonthSlider from './month-slider';
 import { YEAR, MIDDLE_DAY, yearScrollSpeed } from './consts';
+import { animateDate } from './animate-date';
 import styles from './date-picker.css';
 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, locale } = this.props;
+        const { monthIndex, locale } = this.props;
+        const month = this.getMiddleDay(monthIndex);
         return (<button type='button' className={classNames(styles.monthName, {
                 [styles.today]: isThisMonth(month),
             })} onClick={this.handleClick}>
@@ -24,25 +41,21 @@ class MonthName extends PureComponent {
       </button>);
     }
 }
+const monthsIndices = Array.from({ length: YEAR }, (_, i) => i);
 export default function MonthNames(props) {
     const { scrollDate, locale } = props;
-    const months = [];
-    for (let i = 0; i < YEAR; i++) {
-        const middleDay = set(scrollDate, { month: i, date: MIDDLE_DAY });
-        months.push(startOfDay(middleDay));
-    }
-    const pxToDate = linearFunction(0, Number(startOfYear(scrollDate)), yearScrollSpeed);
+    const pxToDate = linearFunction(0, Number(startOfYear(scrollDate.date)), yearScrollSpeed);
     let top = 0;
     let bottom = 0;
     if (props.currentRange) {
         [top, bottom] = props.currentRange.map(date => Math.floor(pxToDate.x(Number(date))));
     }
-    return (<div className={styles.monthNames}>
-      {months.map(month => (<MonthName key={+month} month={month} onScrollChange={props.onScrollChange} locale={locale}/>))}
+    return (<div className={styles.monthNames} data-test='ring-date-popup--month-names'>
+      {monthsIndices.map(monthIndex => (<MonthName key={monthIndex} scrollDate={scrollDate} monthIndex={monthIndex} setScrollDate={props.setScrollDate} locale={locale}/>))}
       {props.currentRange && (<div className={styles.range} style={{
                 top: top - 1,
                 height: bottom + 1 - (top - 1),
             }}/>)}
-      <MonthSlider {...props} pxToDate={pxToDate}/>
+      <MonthSlider {...props}/>
     </div>);
 }

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;

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

@@ -1,47 +1,45 @@
-import { PureComponent } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import { addYears } from 'date-fns/addYears';
-import { startOfDay } from 'date-fns/startOfDay';
-import { subYears } from 'date-fns/subYears';
-import linearFunction from '../global/linear-function';
-import units, { yearScrollSpeed } from './consts';
+import { startOfYear } from 'date-fns';
+import units from './consts';
+import scheduleRAF from '../global/schedule-raf';
 import styles from './date-picker.css';
-const COVERYEARS = 3;
-export default class MonthSlider extends PureComponent {
-    state = {
-        dragging: false,
-    };
-    componentDidUpdate(prevProps, prevState) {
-        if (this.state.dragging && !prevState.dragging) {
-            window.addEventListener('mousemove', this.onMouseMove);
-            window.addEventListener('mouseup', this.onMouseUp);
-        }
-        else if (!this.state.dragging && prevState.dragging) {
-            window.removeEventListener('mousemove', this.onMouseMove);
-            window.removeEventListener('mouseup', this.onMouseUp);
-        }
-    }
-    onMouseDown = () => {
-        this.setState({ dragging: true });
-    };
-    onMouseUp = () => {
-        this.setState({ dragging: false });
-    };
-    onMouseMove = (e) => {
-        this.props.onScroll(linearFunction(0, Number(this.props.scrollDate), yearScrollSpeed).y(e.movementY));
-    };
-    render() {
-        let year = subYears(startOfDay(this.props.scrollDate), 1);
-        const years = [year];
-        for (let i = 0; i <= COVERYEARS; i++) {
-            year = addYears(year, 1);
-            years.push(year);
-        }
-        const classes = classNames(styles.monthSlider, { [styles.dragging]: this.state.dragging });
-        return (<div>
-        {years.map(date => (<button type='button' key={+date} className={classes} style={{
-                    top: Math.floor(this.props.pxToDate.x(Number(date)) - units.cellSize),
-                }} onMouseDown={this.onMouseDown}/>))}
-      </div>);
-    }
+const scheduleScroll = scheduleRAF();
+export default function MonthSlider({ scrollDate, setScrollDate, }) {
+    const [dragStart, setDragStart] = useState(null);
+    const onPointerDown = useCallback((e) => {
+        const pointerId = e.pointerId;
+        setDragStart({ y: e.pageY, scrollDate: Number(scrollDate.date), pointerId });
+        e.currentTarget.setPointerCapture(pointerId);
+    }, [scrollDate]);
+    const onPointerMove = useCallback((e) => {
+        scheduleScroll(() => {
+            if (!dragStart)
+                return;
+            const { y: startY, scrollDate: startDate } = dragStart;
+            const yearFraction = (e.pageY - startY) / units.calHeight;
+            const startDatePlusOneYear = Number(addYears(new Date(startDate), 1));
+            const newScrollDate = startDate + yearFraction * (startDatePlusOneYear - startDate);
+            setScrollDate({ date: newScrollDate, source: 'other' });
+        });
+    }, [setScrollDate, dragStart]);
+    const onPointerUp = useCallback((e) => {
+        if (!dragStart)
+            return;
+        const { pointerId } = dragStart;
+        setDragStart(null);
+        e.currentTarget.releasePointerCapture?.(pointerId);
+    }, [dragStart]);
+    const offsets = useMemo(() => {
+        const yearStart = startOfYear(scrollDate.date);
+        const yearEnd = addYears(yearStart, 1);
+        const yearFraction = (Number(scrollDate.date) - Number(yearStart)) / (Number(yearEnd) - Number(yearStart));
+        return [yearFraction - 1, yearFraction, yearFraction + 1];
+    }, [scrollDate]);
+    return (<>
+      {offsets.map(offset => (<button type='button' key={Math.floor(offset)} className={classNames(styles.monthSlider, dragStart && styles.dragging)} style={{
+                top: offset * units.calHeight - units.cellSize,
+            }} onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={onPointerUp} onPointerCancel={onPointerUp}/>))}
+    </>);
 }

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

@@ -1,5 +1,9 @@
+import { type Locale } from 'date-fns';
 import { type MonthsProps } from './consts';
+import { type IntersectionObserverHandle } from './use-intersection-observer';
 export interface MonthProps extends MonthsProps {
     month: Date;
+    intersectionObserverHandle: IntersectionObserverHandle | null;
 }
 export default function Month(props: MonthProps): import("react").JSX.Element;
+export declare function getMonthHeight(monthStart: Date | number, locale: Locale | undefined): number;

package/components/date-picker/month.js

@@ -1,27 +1,41 @@
-import { addDays } from 'date-fns/addDays';
-import { endOfMonth } from 'date-fns/endOfMonth';
 import { format } from 'date-fns/format';
 import { getDay } from 'date-fns/getDay';
-import { setDay } from 'date-fns/setDay';
+import { getDaysInMonth, setDate } from 'date-fns';
+import { useRef } from 'react';
 import Day from './day';
-import { WEEK, weekdays, shiftWeekArray, getWeekStartsOn, FIFTH_DAY } from './consts';
+import units, { WEEK, getWeekStartsOn } from './consts';
+import { useVisibility } from './use-intersection-observer';
 import styles from './date-picker.css';
 export default function Month(props) {
-    const start = props.month;
-    const end = endOfMonth(start);
-    const { locale } = props;
-    // pad with empty cells starting from last friday
-    const weekday = getDay(start);
-    const weekDays = shiftWeekArray(Object.values(weekdays), getWeekStartsOn(props.locale));
-    const fifthDayOfWeek = weekDays[FIFTH_DAY];
-    let day = setDay(start, weekday >= fifthDayOfWeek ? fifthDayOfWeek : fifthDayOfWeek - WEEK);
-    const days = [];
-    while (day < end) {
-        days.push(day);
-        day = addDays(day, 1);
-    }
-    return (<div className={styles.month}>
-      <span className={styles.monthTitle}>{format(props.month, 'LLLL', { locale })}</span>
-      {days.map(date => (<Day {...props} day={date} empty={date < start} key={+date}/>))}
+    const { month, locale, intersectionObserverHandle } = props;
+    const containerRef = useRef(null);
+    const visible = useVisibility(intersectionObserverHandle, containerRef);
+    return (<div className={styles.month} ref={containerRef} style={visible ? {} : { height: getMonthHeight(month, locale) }}>
+      {visible && (<>
+          <span className={styles.monthTitle}>{format(month, 'LLLL', { locale })}</span>
+
+          {Array.from({ length: getPaddingCellsNum(month, locale) }, (_, i) => (<Day {...props} day={new Date(0)} empty key={`e_${i}`}/>))}
+
+          {Array.from({ length: getDaysInMonth(month) }, (_, i) => (<Day {...props} day={setDate(month, i + 1)} empty={false} key={i}/>))}
+        </>)}
     </div>);
 }
+const cellsPerMonthName = 4;
+/**
+ * Between the month name and the first month day
+ */
+function getPaddingCellsNum(monthStart, locale) {
+    const monthStartWeekdaySundayBased = getDay(monthStart);
+    const weekStartDay = getWeekStartsOn(locale);
+    const monthStartWeekday = (monthStartWeekdaySundayBased - weekStartDay + WEEK) % WEEK;
+    if (monthStartWeekday >= cellsPerMonthName)
+        return monthStartWeekday - cellsPerMonthName;
+    const upperPadding = WEEK - cellsPerMonthName;
+    const lowerPadding = monthStartWeekday;
+    return upperPadding + lowerPadding;
+}
+export function getMonthHeight(monthStart, locale) {
+    const totalCells = cellsPerMonthName + getPaddingCellsNum(monthStart, locale) + getDaysInMonth(new Date(monthStart));
+    const monthLines = Math.ceil(totalCells / WEEK);
+    return monthLines * units.cellSize;
+}

package/components/date-picker/months.js

@@ -1,89 +1,36 @@
-import { useEffect, useRef } 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';
+import units from './consts';
+import { ScrollArith } from './scroll-arith';
+import { useScrollBehavior } from './use-scroll-behavior';
 import scheduleRAF from '../global/schedule-raf';
-import linearFunction from '../global/linear-function';
-import useEventCallback from '../global/use-event-callback';
-import Month from './month';
-import MonthNames from './month-names';
-import units, { DOUBLE, HALF, WEEK, weekdays } from './consts';
+import { useIntersectionObserver } from './use-intersection-observer';
 import styles from './date-picker.css';
-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;
+function getMonthHeightWithMargin(date, locale) {
+    return units.unit * 2 + getMonthHeight(date, locale);
 }
-// in milliseconds per pixel
-function scrollSpeed(date) {
-    const monthStart = startOfMonth(date);
-    const monthEnd = endOfMonth(date);
-    return (Number(monthEnd) - Number(monthStart)) / monthHeight(monthStart);
-}
-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;
 export default function Months(props) {
-    const { scrollDate } = props;
-    const monthDate = scrollDate instanceof Date ? scrollDate : new Date(scrollDate);
-    const monthStart = startOfMonth(monthDate);
-    let month = subMonths(monthStart, MONTHSBACK);
-    const months = [month];
-    for (let i = 0; i < MONTHSBACK * DOUBLE; i++) {
-        month = addMonths(month, 1);
-        months.push(month);
-    }
-    const currentSpeed = scrollSpeed(scrollDate);
-    const pxToDate = linearFunction(0, Number(scrollDate), currentSpeed);
-    const offset = pxToDate.x(Number(monthStart)); // is a negative number
-    const bottomOffset = monthHeight(scrollDate) + offset;
-    const componentRef = useRef(null);
-    const handleWheel = useEventCallback((e) => {
-        e.preventDefault();
-        dy += e.deltaY;
-        scrollSchedule(() => {
-            let date;
-            // adjust scroll speed to prevent glitches
-            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;
-        });
-    });
-    useEffect(() => {
-        const current = componentRef.current;
-        if (current) {
-            current.addEventListener('wheel', handleWheel, { passive: false });
-        }
-        return () => {
-            if (current) {
-                current.removeEventListener('wheel', handleWheel);
-            }
-        };
-    }, [handleWheel]);
-    return (<div className={styles.months} ref={componentRef}>
-      <div style={{
-            top: Math.floor(calHeight * HALF - monthHeight(months[0]) - monthHeight(months[1]) + offset),
-        }} className={styles.days}>
-        {months.map(date => (<Month {...props} month={date} key={+date}/>))}
-      </div>
-      <MonthNames {...props}/>
+    const { scrollDate, setScrollDate, locale } = props;
+    const { containerRef, items } = useScrollBehavior(scrollDate, setScrollDate, locale, 'monthsScroll', scrollArith, scheduleScroll);
+    const intersectionObserverHandle = useIntersectionObserver(containerRef, intersectionObserverScrollMargin);
+    return (<div className={styles.months} ref={containerRef} data-test='ring-date-popup--months'>
+      {items.map(month => (<Month {...props} month={month} key={+month} intersectionObserverHandle={intersectionObserverHandle}/>))}
     </div>);
 }

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,65 @@
+import units, { HALF } from './consts';
+/**
+ * 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 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];
+    }
+}

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,48 @@
+import { useEffect, useState } from 'react';
+export function useIntersectionObserver(containerRef, scrollMargin = 0) {
+    const [handle, setHandle] = useState(null);
+    useEffect(() => {
+        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) {
+                elementToSetVisible.set(element, setVisible);
+                observer.observe(element);
+                return () => {
+                    elementToSetVisible.delete(element);
+                    observer.unobserve(element);
+                };
+            },
+        });
+        return () => {
+            observer.disconnect();
+            setHandle(null);
+        };
+    }, [containerRef, scrollMargin]);
+    return handle;
+}
+export function useVisibility(handle, elementRef) {
+    const [isVisible, setIsVisible] = useState(false);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element || !handle)
+            return;
+        return handle.observeVisibility(element, setIsVisible);
+    }, [handle, elementRef, setIsVisible]);
+    return isVisible;
+}

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[];
+};

package/components/date-picker/use-scroll-behavior.js

@@ -0,0 +1,94 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import units, { isSafariOnIPhone, scrollerReRenderDelayIPhone } from './consts';
+import useEventCallback from '../global/use-event-callback';
+export function useScrollBehavior(scrollDate, onContainerScroll, locale, selfScrollDateSource, arith, scheduleScroll) {
+    const [items, setItems] = useState(() => arith.getItems(scrollDate.date));
+    const [scrollTop, setScrollTop] = useState(() => arith.getScrollTop(items, scrollDate.date, locale));
+    const containerRef = useRef(null);
+    const syncSelfState = useEventCallback((newScrollDate) => {
+        const newScrollTopOnExistingItems = arith.getScrollTop(items, newScrollDate, locale);
+        if (isNearEdge(newScrollTopOnExistingItems, containerRef.current)) {
+            const { newItems, newScrollTop } = arith.getItemsAndScrollTop(newScrollDate, locale);
+            setItems(newItems);
+            setScrollTop(newScrollTop);
+        }
+        else {
+            setScrollTop(newScrollTopOnExistingItems);
+        }
+    });
+    const didMountRef = useRef(false);
+    useEffect(function onExternalScrollDateChange() {
+        if (!didMountRef.current) {
+            didMountRef.current = true;
+            return;
+        }
+        const container = containerRef.current;
+        if (!container)
+            return;
+        if (scrollDate.source === selfScrollDateSource)
+            return;
+        syncSelfState(scrollDate.date);
+    }, [scrollDate, selfScrollDateSource, syncSelfState]);
+    const ignoreNextScrollEventRef = useRef(true);
+    useLayoutEffect(function setContainerScrollFromState() {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        ignoreNextScrollEventRef.current = true;
+        container.scrollTop = scrollTop;
+    }, [items, scrollTop]);
+    const updateStateTimerRef = useRef(null);
+    const handleScroll = useEventCallback(() => {
+        scheduleScroll(() => {
+            if (updateStateTimerRef.current != null) {
+                window.clearTimeout(updateStateTimerRef.current);
+                updateStateTimerRef.current = null;
+            }
+            const container = containerRef.current;
+            if (!container)
+                return;
+            if (ignoreNextScrollEventRef.current) {
+                ignoreNextScrollEventRef.current = false;
+                return;
+            }
+            const currentScrollTop = container.scrollTop;
+            const newScrollDate = arith.getScrollDate(items, currentScrollTop, locale);
+            onContainerScroll({ date: newScrollDate, source: selfScrollDateSource });
+            if (isNearEdge(currentScrollTop, container)) {
+                function updateState() {
+                    const { newItems, newScrollTop } = arith.getItemsAndScrollTop(newScrollDate, locale);
+                    setItems(newItems);
+                    setScrollTop(newScrollTop);
+                    updateStateTimerRef.current = null;
+                }
+                if (isSafariOnIPhone) {
+                    // `scrollend` is too young so far
+                    updateStateTimerRef.current = window.setTimeout(updateState, scrollerReRenderDelayIPhone);
+                }
+                else {
+                    updateState();
+                }
+            }
+        });
+    });
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        container.addEventListener('scroll', handleScroll);
+        return () => {
+            container.removeEventListener('scroll', handleScroll);
+            if (updateStateTimerRef.current != null) {
+                window.clearTimeout(updateStateTimerRef.current);
+                updateStateTimerRef.current = null;
+            }
+        };
+    }, [handleScroll]);
+    return { containerRef, items };
+}
+function isNearEdge(scrollTop, container) {
+    const scrollHeight = container.scrollHeight;
+    // eslint-disable-next-line no-magic-numbers
+    const scrollDistanceNearEdge = isSafariOnIPhone ? 5 : units.calHeight * 2;
+    return scrollTop <= scrollDistanceNearEdge || scrollHeight - units.calHeight - scrollTop <= scrollDistanceNearEdge;
+}