@jetbrains/ring-ui 5.0.143 → 5.0.144

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/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';

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/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.144",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",