@jetbrains/ring-ui 5.0.143 → 5.0.145

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

@@ -67,7 +67,7 @@ export default class DatePopup extends Component {
     }
     componentDidMount() {
         if (this.componentRef.current) {
-            this.componentRef.current.addEventListener('wheel', this.handleWheel, { passive: true });
+            this.componentRef.current.addEventListener('wheel', this.handleWheel);
         }
     }
     componentDidUpdate(prevProps, prevState) {

package/components/date-picker/months.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import addMonths from 'date-fns/addMonths';
 import getDay from 'date-fns/getDay';
@@ -8,6 +8,7 @@ import subMonths from 'date-fns/subMonths';
 import endOfMonth from 'date-fns/endOfMonth';
 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 styles from './date-picker.css';
@@ -37,38 +38,54 @@ 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 months = useMemo(() => {
+        let month = subMonths(monthStart, MONTHSBACK);
+        const result = [month];
+        for (let i = 0; i < MONTHSBACK * DOUBLE; i++) {
+            month = addMonths(month, 1);
+            result.push(month);
+        }
+        return result;
+    }, [monthStart]);
     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;
-    return (<div className={styles.months} onWheel={function handleWheel(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;
-            });
-        }}>
+    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 !== null) {
+            current.addEventListener('wheel', handleWheel, { passive: false });
+        }
+        return () => {
+            if (current !== null) {
+                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)

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

@@ -13,9 +13,13 @@ export default class Years extends PureComponent<CalendarProps> {
     state: {
         scrollDate: null;
     };
+    componentDidMount(): void;
     componentDidUpdate(prevProps: CalendarProps, prevState: YearsState): void;
+    componentWillUnmount(): void;
     stoppedScrolling?: boolean;
     setYear(date: number): void;
+    componentRef: React.RefObject<HTMLDivElement>;
+    handleWheel: (e: WheelEvent) => void;
     render(): React.JSX.Element;
 }
 export {};

package/components/date-picker/years.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { createRef, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import addYears from 'date-fns/addYears';
@@ -23,9 +23,19 @@ export default class Years extends PureComponent {
         onScrollChange: PropTypes.func
     };
     state = { scrollDate: null };
+    componentDidMount() {
+        if (this.componentRef.current) {
+            this.componentRef.current.addEventListener('wheel', this.handleWheel);
+        }
+    }
     componentDidUpdate(prevProps, prevState) {
         this.stoppedScrolling = prevState.scrollDate != null && !this.state.scrollDate;
     }
+    componentWillUnmount() {
+        if (this.componentRef.current) {
+            this.componentRef.current.removeEventListener('wheel', this.handleWheel);
+        }
+    }
     stoppedScrolling;
     setYear(date) {
         if (scrollTO) {
@@ -35,6 +45,20 @@ export default class Years extends PureComponent {
         this.setState({ scrollDate: null });
         this.props.onScroll(Number(setYear(this.props.scrollDate, getYear(date))));
     }
+    componentRef = createRef();
+    handleWheel = (e) => {
+        const { scrollDate } = this.props;
+        const date = this.state.scrollDate || scrollDate;
+        e.preventDefault();
+        const newScrollDate = linearFunction(0, Number(date), yearDuration / yearHeight).y(e.deltaY);
+        this.setState({
+            scrollDate: newScrollDate
+        });
+        if (scrollTO) {
+            window.clearTimeout(scrollTO);
+        }
+        scrollTO = window.setTimeout(() => this.setYear(newScrollDate), scrollDelay);
+    };
     render() {
         const { onScrollChange, scrollDate } = this.props;
         const date = this.state.scrollDate || scrollDate;
@@ -46,19 +70,7 @@ export default class Years extends PureComponent {
             years.push(year);
         }
         const pxToDate = linearFunction(0, Number(years[0]), yearDuration / yearHeight);
-        const handleWheel = (e) => {
-            e.preventDefault();
-            const newScrollDate = linearFunction(0, Number(date), yearDuration / yearHeight).
-                y(e.deltaY);
-            this.setState({
-                scrollDate: newScrollDate
-            });
-            if (scrollTO) {
-                window.clearTimeout(scrollTO);
-            }
-            scrollTO = window.setTimeout(() => this.setYear(newScrollDate), scrollDelay);
-        };
-        return (<div className={styles.years} onWheel={handleWheel} style={{
+        return (<div className={styles.years} ref={this.componentRef} style={{
                 transition: this.stoppedScrolling ? 'top .2s ease-out 0s' : 'none',
                 top: Math.floor(calHeight * HALF - pxToDate.x(Number(date)))
             }}>

package/components/global/use-event-callback.d.ts

@@ -0,0 +1 @@
+export default function useEventCallback<I extends unknown[], O>(fn: (...args: I) => O): (...args: I) => O;

package/components/global/use-event-callback.js

@@ -0,0 +1,14 @@
+import { useCallback, useLayoutEffect, useRef } from 'react';
+export default function useEventCallback(fn) {
+    const ref = useRef();
+    useLayoutEffect(() => {
+        ref.current = fn;
+    });
+    return useCallback((...args) => {
+        const { current } = ref;
+        if (current == null) {
+            throw new Error('callback created in useEventCallback can only be called from event handlers');
+        }
+        return current(...args);
+    }, []);
+}

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

@@ -68,6 +68,7 @@ import 'date-fns/startOfMonth';
 import 'date-fns/subMonths';
 import 'date-fns/endOfMonth';
 import '../global/linear-function.js';
+import '../global/use-event-callback.js';
 import './month.js';
 import 'date-fns/addDays';
 import 'date-fns/setDay';

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

@@ -42,6 +42,7 @@ 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';
@@ -126,9 +127,7 @@ class DatePopup extends Component {
   }
   componentDidMount() {
     if (this.componentRef.current) {
-      this.componentRef.current.addEventListener('wheel', this.handleWheel, {
-        passive: true
-      });
+      this.componentRef.current.addEventListener('wheel', this.handleWheel);
     }
   }
   componentDidUpdate(prevProps, prevState) {

package/dist/date-picker/months.js

@@ -1,5 +1,5 @@
 import { _ as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
-import React from 'react';
+import React, { useMemo, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import addMonths from 'date-fns/addMonths';
 import getDay from 'date-fns/getDay';
@@ -9,6 +9,7 @@ import subMonths from 'date-fns/subMonths';
 import endOfMonth from 'date-fns/endOfMonth';
 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 { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
@@ -63,35 +64,53 @@ function Months(props) {
   } = 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 months = useMemo(() => {
+    let month = subMonths(monthStart, MONTHSBACK);
+    const result = [month];
+    for (let i = 0; i < MONTHSBACK * DOUBLE; i++) {
+      month = addMonths(month, 1);
+      result.push(month);
+    }
+    return result;
+  }, [monthStart]);
   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;
-  return /*#__PURE__*/React.createElement("div", {
-    className: modules_0c7b7d96.months,
-    onWheel: function handleWheel(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;
+  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 !== null) {
+      current.addEventListener('wheel', handleWheel, {
+        passive: false
       });
     }
+    return () => {
+      if (current !== null) {
+        current.removeEventListener('wheel', handleWheel);
+      }
+    };
+  }, [handleWheel]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: modules_0c7b7d96.months,
+    ref: componentRef
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       top: Math.floor(calHeight * HALF - monthHeight(months[0]) - monthHeight(months[1]) + offset)

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

@@ -13,9 +13,13 @@ export default class Years extends PureComponent<CalendarProps> {
     state: {
         scrollDate: null;
     };
+    componentDidMount(): void;
     componentDidUpdate(prevProps: CalendarProps, prevState: YearsState): void;
+    componentWillUnmount(): void;
     stoppedScrolling?: boolean;
     setYear(date: number): void;
+    componentRef: React.RefObject<HTMLDivElement>;
+    handleWheel: (e: WheelEvent) => void;
     render(): React.JSX.Element;
 }
 export {};

package/dist/date-picker/years.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, createRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import addYears from 'date-fns/addYears';
@@ -11,7 +11,7 @@ import startOfYear from 'date-fns/startOfYear';
 import subYears from 'date-fns/subYears';
 import linearFunction from '../global/linear-function.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
-import units, { dateType, DOUBLE, HALF, yearDuration } from './consts.js';
+import units, { dateType, yearDuration, DOUBLE, HALF } from './consts.js';
 import 'date-fns/add';
 
 const {
@@ -30,9 +30,19 @@ class Years extends PureComponent {
   state = {
     scrollDate: null
   };
+  componentDidMount() {
+    if (this.componentRef.current) {
+      this.componentRef.current.addEventListener('wheel', this.handleWheel);
+    }
+  }
   componentDidUpdate(prevProps, prevState) {
     this.stoppedScrolling = prevState.scrollDate != null && !this.state.scrollDate;
   }
+  componentWillUnmount() {
+    if (this.componentRef.current) {
+      this.componentRef.current.removeEventListener('wheel', this.handleWheel);
+    }
+  }
   stoppedScrolling;
   setYear(date) {
     if (scrollTO) {
@@ -44,6 +54,22 @@ class Years extends PureComponent {
     });
     this.props.onScroll(Number(setYear(this.props.scrollDate, getYear(date))));
   }
+  componentRef = /*#__PURE__*/createRef();
+  handleWheel = e => {
+    const {
+      scrollDate
+    } = this.props;
+    const date = this.state.scrollDate || scrollDate;
+    e.preventDefault();
+    const newScrollDate = linearFunction(0, Number(date), yearDuration / yearHeight).y(e.deltaY);
+    this.setState({
+      scrollDate: newScrollDate
+    });
+    if (scrollTO) {
+      window.clearTimeout(scrollTO);
+    }
+    scrollTO = window.setTimeout(() => this.setYear(newScrollDate), scrollDelay);
+  };
   render() {
     const {
       onScrollChange,
@@ -58,20 +84,9 @@ class Years extends PureComponent {
       years.push(year);
     }
     const pxToDate = linearFunction(0, Number(years[0]), yearDuration / yearHeight);
-    const handleWheel = e => {
-      e.preventDefault();
-      const newScrollDate = linearFunction(0, Number(date), yearDuration / yearHeight).y(e.deltaY);
-      this.setState({
-        scrollDate: newScrollDate
-      });
-      if (scrollTO) {
-        window.clearTimeout(scrollTO);
-      }
-      scrollTO = window.setTimeout(() => this.setYear(newScrollDate), scrollDelay);
-    };
     return /*#__PURE__*/React.createElement("div", {
       className: modules_0c7b7d96.years,
-      onWheel: handleWheel,
+      ref: this.componentRef,
       style: {
         transition: this.stoppedScrolling ? 'top .2s ease-out 0s' : 'none',
         top: Math.floor(calHeight * HALF - pxToDate.x(Number(date)))

package/dist/global/use-event-callback.d.ts

@@ -0,0 +1 @@
+export default function useEventCallback<I extends unknown[], O>(fn: (...args: I) => O): (...args: I) => O;

package/dist/global/use-event-callback.js

@@ -0,0 +1,19 @@
+import { useRef, useLayoutEffect, useCallback } from 'react';
+
+function useEventCallback(fn) {
+  const ref = useRef();
+  useLayoutEffect(() => {
+    ref.current = fn;
+  });
+  return useCallback(function () {
+    const {
+      current
+    } = ref;
+    if (current == null) {
+      throw new Error('callback created in useEventCallback can only be called from event handlers');
+    }
+    return current(...arguments);
+  }, []);
+}
+
+export { useEventCallback as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "5.0.143",
+  "version": "5.0.145",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -126,7 +126,7 @@
     "core-js": "^3.30.2",
     "cpy-cli": "^3.1.1",
     "enzyme": "^3.11.0",
-    "eslint": "^8.41.0",
+    "eslint": "^8.42.0",
     "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-angular": "^4.1.0",
     "eslint-plugin-bdd": "^2.1.1",
@@ -176,8 +176,8 @@
     "terser-webpack-plugin": "^5.3.9",
     "typescript": "~5.1.3",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.85.0",
-    "webpack-cli": "^5.1.1",
+    "webpack": "^5.85.1",
+    "webpack-cli": "^5.1.3",
     "xmlappend": "^1.0.4"
   },
   "peerDependencies": {