@jetbrains/ring-ui 7.0.107 → 7.0.109

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

@@ -1,19 +1,2 @@
-import { PureComponent } from 'react';
 import { type CalendarProps } from './consts';
-interface YearsState {
-    scrollDate: Date | null;
-}
-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: import("react").RefObject<HTMLDivElement | null>;
-    handleWheel: (e: WheelEvent) => void;
-    render(): import("react").JSX.Element;
-}
-export {};
+export default function Years({ scrollDate, setScrollDate }: CalendarProps): import("react").JSX.Element;

package/components/date-picker/years.js

@@ -1,4 +1,4 @@
-import { createRef, PureComponent } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { addYears } from 'date-fns/addYears';
 import { getYear } from 'date-fns/getYear';
@@ -7,75 +7,95 @@ import { isSameYear } from 'date-fns/isSameYear';
 import { isThisYear } from 'date-fns/isThisYear';
 import { setYear } from 'date-fns/setYear';
 import { startOfYear } from 'date-fns/startOfYear';
-import { subYears } from 'date-fns/subYears';
-import linearFunction from '../global/linear-function';
-import units, { DOUBLE, HALF, yearDuration } from './consts';
+import units, { calendarSyncOnYearScrollUpdateDelay, yearsAnimationDuration, } from './consts';
+import { ScrollArith } from './scroll-arith';
+import { useScrollBehavior } from './use-scroll-behavior';
+import { animateDate } from './animate-date';
+import scheduleRAF from '../global/schedule-raf';
+import { useIntersectionObserver, useVisibility } from './use-intersection-observer';
 import styles from './date-picker.css';
-const { yearHeight, calHeight } = units;
-let scrollTO;
-const YEARSBACK = 5;
-const scrollDelay = 100;
-export default 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 && !this.state.scrollDate;
-    }
-    componentWillUnmount() {
-        if (this.componentRef.current) {
-            this.componentRef.current.removeEventListener('wheel', this.handleWheel);
-        }
-    }
-    stoppedScrolling;
-    setYear(date) {
-        if (scrollTO) {
-            window.clearTimeout(scrollTO);
-            scrollTO = null;
-        }
-        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,
+const { yearHeight } = units;
+const scrollArith = new ScrollArith({
+    itemsAround: 100,
+    floorToItem: startOfYear,
+    shiftItems: addYears,
+    getItemHeight: () => yearHeight,
+});
+const scheduleScroll = scheduleRAF();
+/**
+ * Reduces "empty" years during fast scrolling.
+ */
+const intersectionObserverScrollMargin = units.calHeight / 2;
+export default function Years({ scrollDate, setScrollDate }) {
+    const [localScrollDate, setLocalScrollDate] = useState(scrollDate);
+    const syncCleanupRef = useRef(null);
+    const animationCleanupRef = useRef(null);
+    const syncCalendarScrollDate = useCallback((newLocalScrollDate) => {
+        syncCleanupRef.current?.();
+        animationCleanupRef.current?.();
+        let timerId = window.setTimeout(() => {
+            const newScrollDateWithPreservedMonthAndDay = setYear(scrollDate.date, getYear(newLocalScrollDate.date));
+            setScrollDate({
+                date: newScrollDateWithPreservedMonthAndDay,
+                source: 'yearsScroll',
+            });
+            animationCleanupRef.current = animateDate(newLocalScrollDate.date, newScrollDateWithPreservedMonthAndDay, date => {
+                setLocalScrollDate({
+                    date,
+                    source: 'other',
+                });
+            }, yearsAnimationDuration);
+        }, calendarSyncOnYearScrollUpdateDelay);
+        syncCleanupRef.current = () => {
+            if (timerId != null) {
+                window.clearTimeout(timerId);
+                timerId = null;
+            }
+        };
+    }, [scrollDate, setScrollDate, setLocalScrollDate]);
+    useEffect(() => function cleanup() {
+        syncCleanupRef.current?.();
+        animationCleanupRef.current?.();
+    }, []);
+    useEffect(function syncLocalScrollDate() {
+        if (scrollDate.source === 'yearsScroll')
+            return;
+        let timerId = window.setTimeout(() => {
+            setLocalScrollDate(scrollDate);
+            timerId = null;
         });
-        if (scrollTO) {
-            window.clearTimeout(scrollTO);
-        }
-        scrollTO = window.setTimeout(() => this.setYear(newScrollDate), scrollDelay);
-    };
-    render() {
-        const { onScrollChange, scrollDate } = this.props;
-        const date = this.state.scrollDate || scrollDate;
-        const yearStart = startOfYear(date);
-        let year = subYears(yearStart, YEARSBACK);
-        const years = [year];
-        for (let i = 0; i < YEARSBACK * DOUBLE; i++) {
-            year = addYears(year, 1);
-            years.push(year);
-        }
-        const pxToDate = linearFunction(0, Number(years[0]), yearDuration / yearHeight);
-        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))),
-            }}>
-        {years.map(item => (<button type='button' key={+item} className={classNames(styles.year, {
-                    [styles.currentYear]: isSameYear(item, date),
-                    [styles.today]: isThisYear(item),
-                })} onClick={function handleClick() {
-                    onScrollChange(Number(setYear(scrollDate, getYear(item))));
-                }}>
-            {format(item, 'yyyy')}
-          </button>))}
-      </div>);
-    }
+        return () => {
+            if (timerId != null) {
+                window.clearTimeout(timerId);
+                timerId = null;
+            }
+        };
+    }, [scrollDate, setLocalScrollDate]);
+    const handleYearClick = useCallback((year) => {
+        const newScrollDate = setYear(localScrollDate.date, getYear(year));
+        setScrollDate({
+            date: newScrollDate,
+            source: 'yearsScroll',
+        });
+        syncCleanupRef.current?.();
+        animationCleanupRef.current?.();
+        animationCleanupRef.current = animateDate(localScrollDate.date, newScrollDate, date => {
+            setLocalScrollDate({
+                date,
+                source: 'other',
+            });
+        }, yearsAnimationDuration);
+    }, [localScrollDate.date, setScrollDate]);
+    const { containerRef, items } = useScrollBehavior(localScrollDate, syncCalendarScrollDate, undefined, 'yearsScroll', scrollArith, scheduleScroll);
+    const intersectionObserverHandle = useIntersectionObserver(containerRef, intersectionObserverScrollMargin);
+    return (<div className={styles.years} ref={containerRef} data-test='ring-date-popup--years'>
+      {items.map(year => (<Year year={year} scrollDate={localScrollDate.date} handleYearClick={handleYearClick} key={+year} intersectionObserverHandle={intersectionObserverHandle}/>))}
+    </div>);
+}
+function Year({ year, scrollDate, handleYearClick, intersectionObserverHandle, }) {
+    const buttonRef = useRef(null);
+    const visible = useVisibility(intersectionObserverHandle, buttonRef);
+    return (<button type='button' ref={buttonRef} key={+year} disabled={!visible} className={classNames(styles.year, visible && isSameYear(year, scrollDate) && styles.currentYear, visible && isThisYear(year) && styles.today)} onClick={visible ? () => handleYearClick(year) : undefined}>
+      {visible ? format(year, 'yyyy') : '\u00A0'}
+    </button>);
 }

package/components/footer/footer.d.ts

@@ -24,5 +24,5 @@ export interface FooterProps {
     center?: FooterItems | null | undefined;
     right?: FooterItems | null | undefined;
 }
-declare const Footer: import("react").NamedExoticComponent<FooterProps>;
+declare const Footer: import("react").MemoExoticComponent<({ floating, className, left, center, right }: FooterProps) => import("react").JSX.Element>;
 export default Footer;

package/components/global/dom.d.ts

@@ -3,7 +3,7 @@
  */
 import { type SyntheticEvent } from 'react';
 import type { PropertiesHyphen } from 'csstype';
-export declare const getStyles: ((elt: Element, pseudoElt?: string | null) => CSSStyleDeclaration) & typeof getComputedStyle;
+export declare const getStyles: typeof window.getComputedStyle;
 export declare function isMounted(node: Node | Range | null | undefined): boolean;
 export interface Rect {
     top: number;

package/components/global/dom.js

@@ -1,7 +1,7 @@
 /**
  * @name DOM
  */
-export const getStyles = window.getComputedStyle.bind(window);
+export const getStyles = (...args) => window.getComputedStyle(...args);
 export function isMounted(node) {
     if (node === document) {
         return true;

package/components/global/theme.js

@@ -12,9 +12,9 @@ export const ThemeContext = createContext({
     theme: Theme.LIGHT,
 });
 export const GLOBAL_DARK_CLASS_NAME = 'ring-ui-theme-dark';
-const darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
+const darkMatcher = typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)') : undefined;
 export function useTheme() {
-    const [dark, setDark] = useState(darkMatcher.matches);
+    const [dark, setDark] = useState(darkMatcher?.matches ?? false);
     useEffect(() => {
         const onChange = (e) => setDark(e.matches);
         darkMatcher.addEventListener('change', onChange);

package/components/heading/heading.d.ts

@@ -15,11 +15,11 @@ declare const Heading: ComponentType<HeadingProps> & {
     Levels: typeof Levels;
 };
 export default Heading;
-declare const H1: import("react").NamedExoticComponent<HTMLAttributes<HTMLHeadingElement>>;
-declare const H2: import("react").NamedExoticComponent<HTMLAttributes<HTMLHeadingElement>>;
-declare const H3: import("react").NamedExoticComponent<HTMLAttributes<HTMLHeadingElement>>;
+declare const H1: import("react").MemoExoticComponent<(props: HTMLAttributes<HTMLHeadingElement>) => import("react").JSX.Element>;
+declare const H2: import("react").MemoExoticComponent<(props: HTMLAttributes<HTMLHeadingElement>) => import("react").JSX.Element>;
+declare const H3: import("react").MemoExoticComponent<(props: HTMLAttributes<HTMLHeadingElement>) => import("react").JSX.Element>;
 export interface H4Props extends HTMLAttributes<HTMLHeadingElement> {
     bold?: boolean | null | undefined;
 }
-declare const H4: import("react").NamedExoticComponent<H4Props>;
+declare const H4: import("react").MemoExoticComponent<({ className, bold, ...restProps }: H4Props) => import("react").JSX.Element>;
 export { H1, H2, H3, H4 };

package/components/util-stories.d.ts

@@ -0,0 +1 @@
+export declare const hideAddonsPanelParam = "hideAddonsPanel";

package/components/util-stories.js

@@ -0,0 +1 @@
+export const hideAddonsPanelParam = 'hideAddonsPanel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.107",
+  "version": "7.0.109",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -103,26 +103,26 @@
     "@babel/eslint-parser": "^7.28.6",
     "@csstools/css-parser-algorithms": "^4.0.0",
     "@csstools/stylelint-no-at-nest-rule": "^5.0.0",
-    "@eslint/compat": "^2.0.3",
+    "@eslint/compat": "^2.1.0",
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
-    "@figma/code-connect": "^1.4.1",
+    "@figma/code-connect": "^1.4.4",
     "@jetbrains/eslint-config": "^6.0.5",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
     "@jetbrains/rollup-css-plugin": "./packages/rollup-css-plugin",
     "@jetbrains/stylelint-config": "^4.0.2",
     "@jetbrains/typescript-plugin-css-modules": "^5.3.1",
-    "@primer/octicons": "^19.22.0",
+    "@primer/octicons": "^19.25.0",
     "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
-    "@storybook/addon-a11y": "10.2.16",
-    "@storybook/addon-docs": "^10.2.16",
-    "@storybook/addon-themes": "^10.2.16",
+    "@storybook/addon-a11y": "10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-themes": "^10.3.6",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "10.2.16",
-    "@storybook/test-runner": "^0.24.2",
+    "@storybook/react-webpack5": "10.3.6",
+    "@storybook/test-runner": "^0.24.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -132,15 +132,15 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/webpack-env": "^1.18.8",
-    "@vitejs/plugin-react": "^5.1.4",
-    "@vitest/eslint-plugin": "^1.6.9",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/eslint-plugin": "^1.6.17",
     "acorn": "^8.16.0",
     "babel-plugin-require-context-hook": "^1.0.0",
     "caniuse-lite": "^1.0.30001777",
     "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.2.0",
-    "core-js": "^3.48.0",
+    "core-js": "^3.49.0",
     "cpy-cli": "^7.0.0",
     "dotenv-cli": "^11.0.0",
     "eslint": "^9.39.2",
@@ -148,50 +148,51 @@
     "eslint-formatter-jslint-xml": "^9.0.1",
     "eslint-import-resolver-exports": "^1.0.0-beta.5",
     "eslint-import-resolver-typescript": "^4.4.4",
-    "eslint-import-resolver-webpack": "^0.13.10",
+    "eslint-import-resolver-webpack": "^0.13.11",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.2.16",
-    "eslint-plugin-unicorn": "^63.0.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-storybook": "^10.3.6",
+    "eslint-plugin-unicorn": "^64.0.0",
     "events": "^3.3.0",
     "glob": "^13.0.6",
-    "globals": "^17.4.0",
-    "html-webpack-plugin": "^5.6.6",
+    "globals": "^17.6.0",
+    "html-webpack-plugin": "^5.6.7",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "~30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
+    "jest": "~30.4.2",
+    "jest-environment-jsdom": "^30.4.1",
     "jest-teamcity": "^1.12.0",
-    "lint-staged": "^16.3.2",
+    "lint-staged": "^17.0.4",
     "markdown-it": "^14.1.1",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
-    "prettier": "^3.8.1",
+    "prettier": "^3.8.3",
     "raw-loader": "^4.0.2",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.1.3",
-    "rollup": "^4.59.0",
+    "rollup": "^4.60.3",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "10.2.16",
-    "stylelint": "^17.4.0",
+    "storybook": "10.3.6",
+    "stylelint": "^17.11.0",
     "stylelint-config-sass-guidelines": "^13.0.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
-    "terser-webpack-plugin": "^5.3.17",
+    "terser-webpack-plugin": "^5.6.0",
     "typed-css-modules": "^0.9.1",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.56.1",
-    "vitest": "^4.0.18",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.59.3",
+    "vite": "^8.0.11",
+    "vitest": "^4.1.5",
     "vitest-teamcity-reporter": "^0.4.1",
-    "webpack": "^5.105.4",
-    "webpack-cli": "^7.0.0",
+    "webpack": "^5.106.2",
+    "webpack-cli": "^7.0.2",
     "xmlappend": "^1.0.4"
   },
   "peerDependencies": {
@@ -217,16 +218,16 @@
     "@babel/core": "^7.29.0",
     "@babel/preset-typescript": "^7.28.5",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^5.17.0",
+    "@jetbrains/icons": "^5.22.0",
     "@jetbrains/postcss-require-hover": "^0.2.0",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",
     "@types/react-virtualized": "9.22.3",
     "@types/util-deprecate": "^1.0.4",
-    "babel-loader": "10.1.0",
+    "babel-loader": "10.1.1",
     "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-transform-define": "^2.1.4",
-    "browserslist": "^4.28.1",
+    "browserslist": "^4.28.2",
     "change-case": "^4.1.1",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",
@@ -237,16 +238,16 @@
     "element-resize-detector": "^1.2.4",
     "fastdom": "^1.0.12",
     "file-loader": "^6.2.0",
-    "focus-trap": "^8.0.0",
+    "focus-trap": "^8.2.0",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.14",
     "postcss-calc": "^10.1.1",
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.2.1",
     "postcss-modules-values-replace": "^4.2.2",
-    "postcss-preset-env": "^11.2.0",
+    "postcss-preset-env": "^11.2.1",
     "react-compiler-runtime": "^1.0.0",
     "react-movable": "^3.4.1",
     "react-virtualized": "^9.22.6",

package/typings.d.ts

@@ -3,6 +3,11 @@ declare module '*.svg' {
   export default source;
 }
 
+declare module 'file-loader?*' {
+  const source: string;
+  export default source;
+}
+
 declare module '*.png' {
   const source: string;
   export default source;