@jetbrains/ring-ui 5.1.1 → 6.0.1-beta.0

package/components/content-layout/content-layout.d.ts

@@ -1,4 +1,4 @@
-import { Component, HTMLAttributes } from 'react';
+import React, { Component, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 export interface ContentLayoutProps extends HTMLAttributes<HTMLElement> {
     responsive: boolean;
@@ -21,6 +21,6 @@ export default class ContentLayout extends Component<ContentLayoutProps> {
         contentNode: null;
     };
     saveContentNode: (contentNode: HTMLElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export { default as Sidebar } from './sidebar';

package/components/content-layout/sidebar.d.ts

@@ -1,4 +1,4 @@
-import { Component, HTMLAttributes } from 'react';
+import React, { Component, HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { Waypoint } from 'react-waypoint';
 export interface SidebarProps extends HTMLAttributes<HTMLElement> {
@@ -27,5 +27,5 @@ export default class Sidebar extends Component<SidebarProps> {
     shouldUseFixation(): boolean;
     shouldFixateBottom(): boolean;
     sidebarRef: (node: HTMLElement | null) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/contenteditable/contenteditable.d.ts

@@ -1,4 +1,4 @@
-import { Component, HTMLAttributes, Ref } from 'react';
+import React, { Component, HTMLAttributes, Ref } from 'react';
 import PropTypes from 'prop-types';
 /**
  * @name ContentEditable
@@ -28,12 +28,12 @@ declare class ContentEditableBase extends Component<ContentEditableBaseProps> {
     };
     shouldComponentUpdate(nextProps: ContentEditableBaseProps): boolean;
     componentDidUpdate(prevProps: ContentEditableBaseProps): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 type ContentEditableBaseAttrs = JSX.LibraryManagedAttributes<typeof ContentEditableBase, ContentEditableBaseProps>;
 export type ContentEditableProps = Omit<ContentEditableBaseAttrs, '__html'>;
 declare const ContentEditable: {
-    ({ children, ...props }: ContentEditableProps): JSX.Element;
+    ({ children, ...props }: ContentEditableProps): React.JSX.Element;
     propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         disabled: PropTypes.Requireable<boolean>;

package/components/control-label/control-label.css

@@ -0,0 +1,23 @@
+.label {
+  display: block;
+
+  margin-bottom: calc(var(--ring-unit) * 0.5);
+}
+
+.formLabel {
+  color: var(--ring-text-color);
+
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+}
+
+.secondaryLabel {
+  color: var(--ring-secondary-color);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+}
+
+.disabledLabel {
+  color: var(--ring-disabled-color);
+}

package/components/control-label/control-label.d.ts

@@ -0,0 +1,11 @@
+import React, { LabelHTMLAttributes } from 'react';
+export declare enum LabelType {
+    SECONDARY = "secondary",
+    FORM = "form"
+}
+interface ControlLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    disabled?: boolean;
+    type?: LabelType;
+}
+export declare const ControlLabel: React.FC<ControlLabelProps>;
+export default ControlLabel;

package/components/control-label/control-label.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './control-label.css';
+export var LabelType;
+(function (LabelType) {
+    LabelType["SECONDARY"] = "secondary";
+    LabelType["FORM"] = "form";
+})(LabelType || (LabelType = {}));
+const classNameByType = {
+    [LabelType.SECONDARY]: styles.secondaryLabel,
+    [LabelType.FORM]: styles.formLabel
+};
+export const ControlLabel = ({ children, type = LabelType.SECONDARY, disabled, ...rest }) => (<label className={classNames(styles.label, classNameByType[type], {
+        [styles.disabledLabel]: disabled
+    })} {...rest}>{children}</label>);
+ControlLabel.propTypes = {
+    label: PropTypes.node,
+    labelStyle: PropTypes.string,
+    disabled: PropTypes.bool
+};
+export default ControlLabel;

package/components/data-list/data-list.css

@@ -30,7 +30,8 @@
 
   outline: none;
 
-  @nest .dataList:not(.disabledHover) &:hover {
+  /* stylelint-disable-next-line selector-max-specificity */
+  .dataList:not(.disabledHover) &:hover {
     background-color: var(--ring-hover-background-color);
   }
 

package/components/data-list/data-list.d.ts

@@ -30,7 +30,7 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             componentWillUnmount(): void;
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
-            render(): JSX.Element;
+            render(): React.JSX.Element;
             context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
@@ -57,7 +57,7 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
             componentWillUnmount(): void;
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
-            render(): JSX.Element;
+            render(): React.JSX.Element;
             context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
@@ -80,6 +80,6 @@ export default class DataListContainer<T extends SelectionItem> extends Componen
         defaultProps: Partial<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>> | undefined;
         contextType?: React.Context<any> | undefined;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/components/data-list/data-list.mock.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { SelectionItem } from '../table/selection';
 export interface Item extends SelectionItem {
     title: ReactNode;
@@ -11,6 +11,6 @@ export declare const moreItems: {
     id: number;
     selectable: boolean;
     collapsible: boolean;
-    title: JSX.Element;
+    title: React.JSX.Element;
 }[];
 export default items;

package/components/data-list/item.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, ReactNode } from 'react';
+import React, { PureComponent, ReactNode } from 'react';
 import Selection, { SelectionItem } from '../table/selection';
 export declare enum moreLessButtonStates {
     UNUSED = 0,
@@ -45,6 +45,6 @@ export default class Item<T extends SelectionItem> extends PureComponent<ItemPro
     onShowLess: () => void;
     onFocus: () => void;
     onSelect: (selected: boolean) => void;
-    renderItem: (model: T, parentShift: number) => JSX.Element;
-    render(): JSX.Element;
+    renderItem: (model: T, parentShift: number) => React.JSX.Element;
+    render(): React.JSX.Element;
 }

package/components/data-list/title.d.ts

@@ -20,7 +20,7 @@ declare class Title extends PureComponent<TitleProps> {
     onCheckboxFocus: () => void;
     onCheckboxChange: () => void;
     toggleSelection(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 declare const _default: React.ComponentType<import("../global/focus-sensor-hoc").FocusSensorProps<TitleProps, HTMLDivElement, typeof Title>>;
 export default _default;

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

@@ -27,10 +27,10 @@ export declare const HALF = 0.5;
 export declare const dateType: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
 export declare function parseTime(time: string): string | null;
 export interface DateInputTranslations {
-    addFirstDate: string;
-    addSecondDate: string;
-    addTime: string;
-    selectName: string;
+    addFirstDate?: string;
+    addSecondDate?: string;
+    addTime?: string;
+    selectName?: string;
 }
 export interface DateSpecificPopupProps {
     withTime?: false | undefined;
@@ -66,7 +66,7 @@ export interface DatePopupBaseProps {
     to?: Date | number | string | null | undefined;
     minDate?: string | null | undefined;
     maxDate?: string | null | undefined;
-    translations: DateInputTranslations;
+    translations?: DateInputTranslations | null | undefined;
     fromPlaceholder?: string | null | undefined;
     toPlaceholder?: string | null | undefined;
     timePlaceholder?: string | null | undefined;

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

@@ -36,22 +36,13 @@ export default class DateInput extends React.PureComponent<DateInputProps> {
         onClear: PropTypes.Requireable<(...args: any[]) => any>;
         locale: PropTypes.Requireable<object>;
     };
-    static defaultProps: {
-        fromPlaceholder: null;
-        toPlaceholder: null;
-        timePlaceholder: null;
-        translations: {
-            addFirstDate: string;
-            addSecondDate: string;
-            addTime: string;
-            selectName: string;
-        };
-    };
     componentDidUpdate(prevProps: DateInputProps): void;
+    static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
+    context: React.ContextType<typeof DateInput.contextType>;
     input?: HTMLInputElement | null;
     inputRef: (el: HTMLInputElement | null) => void;
     updateInput({ text, active }: UpdateInputConfig): void;
     handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleKeyDown: (e: React.KeyboardEvent) => false | void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Input from '../input/input';
 import { ControlsHeight } from '../global/controls-height';
+import { I18nContext } from '../i18n/i18n-context';
 import { dateType } from './consts';
 import styles from './date-picker.css';
 export default class DateInput extends React.PureComponent {
@@ -26,23 +27,13 @@ export default class DateInput extends React.PureComponent {
         onClear: PropTypes.func,
         locale: PropTypes.object
     };
-    static defaultProps = {
-        fromPlaceholder: null,
-        toPlaceholder: null,
-        timePlaceholder: null,
-        translations: {
-            addFirstDate: 'Add first date',
-            addSecondDate: 'Add second date',
-            addTime: 'Add time',
-            selectName: 'Select %name%'
-        }
-    };
     componentDidUpdate(prevProps) {
         const { hidden, text, active } = this.props;
         if (!hidden && prevProps.hidden || text !== prevProps.text || active !== prevProps.active) {
             this.updateInput({ text, active });
         }
     }
+    static contextType = I18nContext;
     input;
     inputRef = (el) => {
         this.input = el;
@@ -67,6 +58,7 @@ export default class DateInput extends React.PureComponent {
     handleKeyDown = (e) => e.key === 'Enter' && this.props.onConfirm();
     render() {
         const { active, divider, text, time, name, hoverDate, date, displayFormat, translations, onActivate, onClear, fromPlaceholder, toPlaceholder, timePlaceholder, locale } = this.props;
+        const { translate } = this.context;
         let displayText = '';
         if (active && hoverDate) {
             displayText = displayFormat(hoverDate, locale);
@@ -83,13 +75,15 @@ export default class DateInput extends React.PureComponent {
         const placeholder = (() => {
             switch (name) {
                 case 'from':
-                    return fromPlaceholder || translations.addFirstDate;
+                    return fromPlaceholder || (translations?.addFirstDate ?? translate('addFirstDate'));
                 case 'to':
-                    return toPlaceholder || translations.addSecondDate;
+                    return toPlaceholder || (translations?.addSecondDate ?? translate('addSecondDate'));
                 case 'time':
-                    return timePlaceholder || translations.addTime;
+                    return timePlaceholder || (translations?.addTime ?? translate('addTime'));
                 default:
-                    return translations.selectName.replace('%name%', name);
+                    return (translations?.selectName ?? translate('selectName')).
+                        replace('%name%', name).
+                        replace('{{name}}', name);
             }
         })();
         const classes = classNames(styles.filter, styles[`${name}Input`], divider && styles[`${name}InputWithDivider`], 'ring-js-shortcuts');

package/components/date-picker/date-picker.css

@@ -123,7 +123,7 @@
   text-align: start;
   white-space: nowrap;
 
-  @nest .inline & {
+  .inline & {
     min-width: initial;
     padding: 0;
 

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

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import type { Locale } from 'date-fns';
 import Popup from '../popup/popup';
@@ -17,14 +17,14 @@ export type DatePickerProps = Omit<DatePopupProps, 'translations' | 'parseDateIn
     inline: boolean;
     popupClassName?: string | null | undefined;
     dropdownProps?: DropdownAttrs;
-    translations: DatePickerTranslations;
+    translations?: DatePickerTranslations | null | undefined;
     displayMonthFormat: (date: Date, locale: Locale | undefined) => string;
     displayDayFormat: (date: Date, locale: Locale | undefined) => string;
     displayTimeFormat: (date: Date, locale: Locale | undefined) => string;
     applyTimeInput: (date: Date, time: string | null | undefined) => Date;
-    datePlaceholder: string;
-    dateTimePlaceholder: string;
-    rangePlaceholder: string;
+    datePlaceholder?: string;
+    dateTimePlaceholder?: string;
+    rangePlaceholder?: string;
     disabled?: boolean | null | undefined;
     parseDateInput: (input: string | null | undefined) => Date | null;
     size?: Size;
@@ -62,6 +62,8 @@ export default class DatePicker extends PureComponent<DatePickerProps> {
         size: PropTypes.Requireable<Size>;
     };
     static defaultProps: DatePickerProps;
+    static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
+    context: React.ContextType<typeof DatePicker.contextType>;
     handleChange: (change: DatePickerChange | Date | null | undefined) => void;
     clear: () => void;
     popup?: Popup | null;
@@ -70,6 +72,6 @@ export default class DatePicker extends PureComponent<DatePickerProps> {
     parse: (arg: string | number | Date | null | undefined) => Date | null;
     formatTime(): string | null;
     getAnchorText: () => string;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type DatePickerAttrs = JSX.LibraryManagedAttributes<typeof DatePicker, DatePickerProps>;

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

@@ -17,11 +17,11 @@ import Icon from '../icon';
 import Button from '../button/button';
 import Link from '../link/link';
 import { Size } from '../input/input';
+import { I18nContext } from '../i18n/i18n-context';
 import DatePopup from './date-popup';
 import { dateType } from './consts';
 import styles from './date-picker.css';
 import formats from './formats';
-import DateInput from './date-input';
 const PopupComponent = ({ hidden = false, className, popupRef, onClear, datePopupProps, onComplete, ...restProps }) => (<Popup hidden={hidden} keepMounted className={className} ref={popupRef} directions={[
         Popup.PopupProps.Directions.BOTTOM_RIGHT,
         Popup.PopupProps.Directions.BOTTOM_LEFT,
@@ -84,17 +84,9 @@ export default class DatePicker extends PureComponent {
         displayMonthFormat: (date, locale) => (date ? formatDate(date, 'd MMM', { locale }) : ''),
         displayDayFormat: (date, locale) => (date ? formatDate(date, 'd', { locale }) : ''),
         displayTimeFormat: (date, locale) => (date ? formatDate(date, 'HH:mm', { locale }) : ''),
-        datePlaceholder: 'Set a date',
-        dateTimePlaceholder: 'Set date and time',
-        rangePlaceholder: 'Set a period',
         minDate: null,
         maxDate: null,
         onChange() { },
-        translations: {
-            setDate: 'Set a date',
-            setDateTime: 'Set date and time',
-            setPeriod: 'Set a period'
-        },
         applyTimeInput(date, timeString) {
             const [hours, minutes] = timeString?.split(':').map(Number) ?? [];
             return minutes != null ? set(date, { hours, minutes }) : date;
@@ -113,6 +105,7 @@ export default class DatePicker extends PureComponent {
             return null;
         }
     };
+    static contextType = I18nContext;
     handleChange = (change) => {
         const { onChange, withTime, applyTimeInput } = this.props;
         const adjustedChange = withTime && !(change instanceof Date) && change?.date != null
@@ -154,16 +147,19 @@ export default class DatePicker extends PureComponent {
     }
     getAnchorText = () => {
         const { range, datePlaceholder, dateTimePlaceholder, rangePlaceholder, withTime, displayFormat, displayMonthFormat, displayDayFormat, translations, locale } = this.props;
+        const { translate } = this.context;
         const date = this.parse(this.props.date);
         const from = this.parse(this.props.from);
         const to = this.parse(this.props.to);
         const time = this.formatTime();
         if (!range && !withTime) {
-            return date ? displayFormat(date, locale) : (datePlaceholder ?? translations.setDate);
+            return date
+                ? displayFormat(date, locale)
+                : (datePlaceholder ?? translations?.setDate ?? translate('setDate'));
         }
         else if (!range && withTime) {
             if (!date && !time) {
-                return dateTimePlaceholder ?? translations.setDateTime;
+                return dateTimePlaceholder ?? translations?.setDateTime ?? translate('setDateTime');
             }
             else {
                 return `${date && displayFormat(date, locale) || '—'}, ${time || '—'}`;
@@ -190,7 +186,7 @@ export default class DatePicker extends PureComponent {
             return `— ${displayFormat(to, locale)}`;
         }
         else {
-            return rangePlaceholder ?? translations.setPeriod;
+            return rangePlaceholder ?? translations?.setPeriod ?? translate('setPeriod');
         }
     };
     render() {
@@ -212,9 +208,7 @@ export default class DatePicker extends PureComponent {
               </Button>)} {...dropdownProps}>
         <PopupComponent className={popupClassName} popupRef={this.popupRef} onClear={clear ? this.clear : null} datePopupProps={{
                 ...datePopupProps,
-                // We want to provide translations further down to DateInput.
-                // Yet we should pass at least DateInput default translations not to have them empty.
-                translations: Object.assign({}, DateInput.defaultProps.translations, translations),
+                translations,
                 onChange: this.handleChange,
                 parseDateInput: this.parse,
                 time: this.formatTime()

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

@@ -52,5 +52,5 @@ export default class DatePopup extends Component<DatePopupProps, DatePopupState>
     selectHandler: (date: Date) => void;
     handleScroll: (scrollDate: number) => void;
     onClear: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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) {
@@ -265,6 +265,7 @@ export default class DatePopup extends Component {
         }
         this.select(changes);
         this.props.onClear?.(e);
+        this.componentRef.current?.querySelector('input')?.focus();
     };
     render() {
         const { range, hidden, withTime, locale } = this.props;

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

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { MonthsProps } from './consts';
 export interface DayProps extends MonthsProps {
@@ -26,5 +26,5 @@ export default class Day extends Component<DayProps> {
     inRange: (range: [Date, Date] | null) => boolean | null;
     isDisabled: (date: Date) => boolean;
     parse(text: string | null | undefined): Date | null;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import PropTypes from 'prop-types';
 import { MonthsProps } from './consts';
-declare function MonthNames(props: MonthsProps): JSX.Element;
+declare function MonthNames(props: MonthsProps): React.JSX.Element;
 declare namespace MonthNames {
     var propTypes: {
         scrollDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;

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

@@ -9,7 +9,7 @@ import startOfDay from 'date-fns/startOfDay';
 import startOfYear from 'date-fns/startOfYear';
 import linearFunction from '../global/linear-function';
 import MonthSlider from './month-slider';
-import { HALF, YEAR, MIDDLE_DAY, yearScrollSpeed, dateType } from './consts';
+import { YEAR, MIDDLE_DAY, yearScrollSpeed, dateType } from './consts';
 import styles from './date-picker.css';
 class MonthName extends PureComponent {
     static propTypes = {
@@ -19,7 +19,7 @@ class MonthName extends PureComponent {
     };
     handleClick = () => {
         const end = endOfMonth(this.props.month);
-        this.props.onScrollChange((+this.props.month + +end) * HALF);
+        this.props.onScrollChange(end.getTime());
     };
     render() {
         const { month, locale } = this.props;

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

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { LinearFunction } from '../global/linear-function';
 import { MonthsProps } from './consts';
@@ -24,6 +24,6 @@ export default class MonthSlider extends PureComponent<MonthSliderProps> {
     onMouseDown: () => void;
     onMouseUp: () => void;
     onMouseMove: (e: MouseEvent) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

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

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 import PropTypes from 'prop-types';
 import { MonthsProps } from './consts';
 export interface MonthProps extends MonthsProps {
     month: Date;
 }
-declare function Month(props: MonthProps): JSX.Element;
+declare function Month(props: MonthProps): React.JSX.Element;
 declare namespace Month {
     var propTypes: {
         month: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import PropTypes from 'prop-types';
 import { MonthsProps } from './consts';
-declare function Months(props: MonthsProps): JSX.Element;
+declare function Months(props: MonthsProps): React.JSX.Element;
 declare namespace Months {
     var propTypes: {
         onScroll: PropTypes.Requireable<(...args: any[]) => any>;

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)