@jetbrains/ring-ui 7.0.79 → 7.0.81

package/components/avatar/fallback-avatar.js

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useState } from 'react';
 import getUID from '../global/get-uid';
 import { Size } from './avatar-size';
 const colorPairs = [
@@ -184,7 +184,7 @@ export default function FallbackAvatar({ username, size, round }) {
     const sizes = round ? SizesRound[size] : SizesSquare[size];
     const underscore = sizes.underscore;
     const radius = round ? '50%' : sizes.radius;
-    const gradientId = useMemo(() => getUID('gradient-'), []);
+    const [gradientId] = useState(() => getUID('gradient-'));
     return (<svg viewBox={`0 0 ${size} ${size}`} xmlns='http://www.w3.org/2000/svg'>
       <defs>
         <linearGradient id={gradientId} x1='1' y1='1' x2='0' y2='0'>

package/components/collapse/collapse-content.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useContext, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useContext } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
 import { getRect } from '../global/dom';
@@ -45,15 +45,13 @@ export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-te
             observer.observe(contentRef.current);
         }
     }, []);
-    const style = useMemo(() => {
-        const calculatedDuration = duration + contentHeight * DURATION_FACTOR;
-        return {
-            '--duration': `${calculatedDuration}ms`,
-            height,
-            opacity: collapsed && !minHeight ? HIDDEN : VISIBLE,
-        };
-    }, [duration, contentHeight, height, collapsed, minHeight]);
-    const fadeShouldBeVisible = useMemo(() => Boolean(minHeight && collapsed), [minHeight, collapsed]);
+    const calculatedDuration = duration + contentHeight * DURATION_FACTOR;
+    const style = {
+        '--duration': `${calculatedDuration}ms`,
+        height,
+        opacity: collapsed && !minHeight ? HIDDEN : VISIBLE,
+    };
+    const fadeShouldBeVisible = Boolean(minHeight && collapsed);
     const shouldRenderContent = disableAnimation ? !collapsed : !shouldHideContent;
     return (<div ref={containerRef} id={`collapse-content-${id}`} data-test={dataTests(COLLAPSE_CONTENT_CONTAINER_TEST_ID)} className={classNames(styles.container, { [styles.transition]: !disableAnimation })} style={style}>
       <div ref={contentRef} data-test={dataTests(COLLAPSE_CONTENT_TEST_ID, dataTest)}>

package/components/collapse/collapse-control.js

@@ -1,4 +1,4 @@
-import { useMemo, useContext, cloneElement } from 'react';
+import { useContext, cloneElement } from 'react';
 import * as React from 'react';
 import dataTests from '../global/data-tests';
 import { CollapseContext } from './collapse-context';
@@ -9,12 +9,7 @@ import { COLLAPSE_CONTROL_TEST_ID } from './consts';
 export const CollapseControl = ({ children, 'data-test': dataTest }) => {
     const { setCollapsed, collapsed, id } = useContext(CollapseContext);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const child = useMemo(() => {
-        if (typeof children === 'function') {
-            return children(collapsed);
-        }
-        return children;
-    }, [children, collapsed]);
+    const child = typeof children === 'function' ? children(collapsed) : children;
     return (<p data-test={dataTests(COLLAPSE_CONTROL_TEST_ID, dataTest)}>
       {/* eslint-disable-next-line */}
       {cloneElement(child, {

package/components/collapse/collapse.js

@@ -1,4 +1,4 @@
-import { useCallback, useId, useMemo, useState } from 'react';
+import { useId, useState } from 'react';
 import * as React from 'react';
 import { CollapseContext } from './collapse-context';
 import { BASE_ANIMATION_DURATION } from './consts';
@@ -8,11 +8,11 @@ import { BASE_ANIMATION_DURATION } from './consts';
 export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disableAnimation = false, className = '', onChange = () => { }, defaultCollapsed = true, collapsed = null, }) => {
     const [innerCollapsed, setInnerCollapsed] = useState(defaultCollapsed);
     const id = useId();
-    const finalCollapsedValue = useMemo(() => collapsed ?? innerCollapsed, [innerCollapsed, collapsed]);
-    const setCollapsed = useCallback(() => {
+    const finalCollapsedValue = collapsed ?? innerCollapsed;
+    const setCollapsed = () => {
         setInnerCollapsed(!finalCollapsedValue);
         onChange(!finalCollapsedValue);
-    }, [setInnerCollapsed, onChange, finalCollapsedValue]);
+    };
     return (<div className={className}>
       <CollapseContext.Provider value={{
             collapsed: finalCollapsedValue,

package/components/date-picker/months.js

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { addMonths } from 'date-fns/addMonths';
 import { getDay } from 'date-fns/getDay';
 import { getDaysInMonth } from 'date-fns/getDaysInMonth';
@@ -37,15 +37,12 @@ export default function Months(props) {
     const { scrollDate } = props;
     const monthDate = scrollDate instanceof Date ? scrollDate : new Date(scrollDate);
     const monthStart = startOfMonth(monthDate);
-    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]);
+    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

package/components/dropdown/dropdown.css

@@ -4,6 +4,10 @@
   display: inline-block;
 }
 
+.clickInterceptor {
+  display: contents;
+}
+
 .anchor.anchor {
   margin-inline: -3px;
   padding-inline: 3px;

package/components/dropdown/dropdown.js

@@ -125,10 +125,12 @@ export default class Dropdown extends Component {
             onContextMenu: hoverMode ? this.handlePopupInteraction : undefined,
             dontCloseOnAnchorClick: true,
         };
-        return (<div data-test={dataTests('ring-dropdown', dataTest)} {...restProps} onClick={clickMode ? this.onClick : undefined} 
-        // anchorElement should be a `button` or an `a`
-        role='presentation' onMouseEnter={hoverMode ? this.onMouseEnter : undefined} onMouseLeave={hoverMode ? this.onMouseLeave : undefined} className={classes}>
-        {anchorElement}
+        return (<div data-test={dataTests('ring-dropdown', dataTest)} {...restProps} onMouseEnter={hoverMode ? this.onMouseEnter : undefined} onMouseLeave={hoverMode ? this.onMouseLeave : undefined} className={classes}>
+        {clickMode ? (<div data-test='ring-dropdown-anchor-click-interceptor' className={styles.clickInterceptor} onClick={this.onClick} 
+            // anchorElement should be a `button` or an `a`
+            role='presentation'>
+            {anchorElement}
+          </div>) : (anchorElement)}
         {typeof children === 'function'
                 ? children(childProps)
                 : cloneElement(children, childProps)}

package/components/dropdown-menu/dropdown-menu.js

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo, cloneElement, } from 'react';
+import { forwardRef, cloneElement, useState, } from 'react';
 import List, { ActiveItemContext } from '../list/list';
 import Dropdown from '../dropdown/dropdown';
 import PopupMenu from '../popup-menu/popup-menu';
@@ -7,13 +7,13 @@ import Anchor from '../dropdown/anchor';
 import { isArray } from '../global/typescript-utils';
 const defaultAriaLabel = 'Dropdown menu';
 function DropdownAnchorWrapper({ anchor, pinned, active, activeListItemId, listId, ...restProps }) {
-    const anchorAriaProps = useMemo(() => ({
+    const anchorAriaProps = {
         ...(listId ? { 'aria-haspopup': true } : {}),
         ...(activeListItemId ? { 'aria-activedescendant': activeListItemId, 'aria-owns': listId } : {}),
         ...(active ? { 'aria-expanded': true } : {}),
-    }), [active, activeListItemId, listId]);
-    const anchorProps = useMemo(() => ({ active, pinned, ...restProps, ...anchorAriaProps }), [pinned, active, restProps, anchorAriaProps]);
-    const anchorComponentProps = useMemo(() => ({ ...anchorProps, pinned: `${anchorProps.pinned}` }), [anchorProps]);
+    };
+    const anchorProps = { active, pinned, ...restProps, ...anchorAriaProps };
+    const anchorComponentProps = { ...anchorProps, pinned: `${anchorProps.pinned}` };
     if (typeof anchor === 'string') {
         return <Anchor {...anchorComponentProps}>{anchor}</Anchor>;
     }
@@ -32,8 +32,9 @@ function renderDropdownMenuChildren({ children, popupMenuProps }) {
     return (popupProps) => children({ ...popupProps, ...popupMenuProps });
 }
 const DropdownMenu = forwardRef(function DropdownMenu({ id, anchor, ariaLabel, data, onSelect, menuProps, children, ...restDropdownProps }, forwardedRef) {
-    const listId = useMemo(() => id || getUID('dropdown-menu-list'), [id]);
-    const popupMenuProps = useMemo(() => ({
+    const [uid] = useState(() => getUID('dropdown-menu-list'));
+    const listId = id || uid;
+    const popupMenuProps = {
         ref: forwardedRef,
         id: listId,
         ariaLabel: ariaLabel || defaultAriaLabel,
@@ -42,7 +43,7 @@ const DropdownMenu = forwardRef(function DropdownMenu({ id, anchor, ariaLabel, d
         data,
         onSelect,
         ...menuProps,
-    }), [ariaLabel, data, forwardedRef, listId, menuProps, onSelect]);
+    };
     return (<ActiveItemContext.Provider>
       <Dropdown anchor={({ pinned, active, ...restAnchorProps }) => (<ActiveItemContext.ValueContext.Consumer>
             {activeItemId => (<DropdownAnchorWrapper anchor={anchor} pinned={pinned} active={active} activeListItemId={activeItemId} listId={listId} {...restAnchorProps}/>)}

package/components/editable-heading/editable-heading.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
 import Heading, { Levels } from '../heading/heading';
@@ -6,6 +6,7 @@ import Button from '../button/button';
 import { Size } from '../input/input';
 import getUID from '../global/get-uid';
 import Shortcuts from '../shortcuts/shortcuts';
+import useEventCallback from '../global/use-event-callback';
 import inputStyles from '../input/input.css';
 import styles from './editable-heading.css';
 export { Levels };
@@ -28,16 +29,13 @@ export const EditableHeading = (props) => {
     const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
     const isCancelDisabled = isSaving;
     const isShortcutsDisabled = !isInFocus || isSaving;
-    const shortcutsMap = React.useMemo(() => {
-        const map = {};
-        if (!isSaveDisabled) {
-            map.enter = onSave;
-        }
-        if (isCancelDisabled) {
-            map.esc = onCancel;
-        }
-        return map;
-    }, [isSaveDisabled, isCancelDisabled, onSave, onCancel]);
+    const shortcutsMap = {};
+    if (!isSaveDisabled) {
+        shortcutsMap.enter = onSave;
+    }
+    if (isCancelDisabled) {
+        shortcutsMap.esc = onCancel;
+    }
     const classes = classNames(styles.editableHeading, className, {
         [styles.fullSize]: isEditing && size === Size.FULL,
         [styles.isEditing]: isEditing,
@@ -48,61 +46,61 @@ export const EditableHeading = (props) => {
     });
     const headingClasses = classNames(styles.heading, headingClassName, styles[`size${size}`]);
     const inputClasses = classNames('ring-js-shortcuts', styles.input, styles.textarea, { [styles.textareaNotOverflow]: !isOverflow }, inputStyles[`size${size}`], styles[`level${level}`], inputClassName);
-    const stretch = useCallback((el) => {
+    const stretch = (el) => {
         if (!el || !el.style) {
             return;
         }
         el.style.height = '0';
         const { paddingTop, paddingBottom } = window.getComputedStyle(el);
         el.style.height = `${el.scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom)}px`;
-    }, []);
-    const checkValue = useCallback((el) => {
+    };
+    const checkValue = (el) => {
         if (multiline && el && el.scrollHeight >= el.clientHeight) {
             stretch(el);
         }
-    }, [stretch, multiline]);
-    const checkOverflow = useCallback((el) => {
+    };
+    const checkOverflow = (el) => {
         const scrollHeight = el.scrollHeight || 0;
         const clientHeight = el.clientHeight || 0;
         const scrollTop = el.scrollTop || 0;
         setIsScrolledToBottom(scrollHeight - clientHeight <= scrollTop);
         setIsOverflow(scrollHeight > clientHeight);
-    }, [setIsScrolledToBottom]);
-    const onHeadingMouseDown = React.useCallback(() => {
+    };
+    const onHeadingMouseDown = () => {
         setIsMouseDown(true);
-    }, []);
-    const onMouseMove = React.useCallback(() => {
+    };
+    const onMouseMove = useEventCallback(() => {
         if (!isMouseDown) {
             return;
         }
         setIsInSelectionMode(true);
-    }, [isMouseDown]);
-    const onMouseUp = React.useCallback(() => {
+    });
+    const onMouseUp = useEventCallback(() => {
         if (isMouseDown && !isInSelectionMode && !disabled) {
             onEdit();
         }
         setIsMouseDown(false);
         setIsInSelectionMode(false);
-    }, [isMouseDown, isInSelectionMode, disabled, onEdit]);
-    const onInputFocus = React.useCallback((e) => {
+    });
+    const onInputFocus = (e) => {
         setIsInFocus(true);
         checkValue(e.target);
         checkOverflow(e.target);
         onFocus?.(e);
-    }, [onFocus, checkOverflow, checkValue]);
-    const onInputChange = React.useCallback((e) => {
+    };
+    const onInputChange = (e) => {
         checkValue(e.target);
         checkOverflow(e.target);
         onChange?.(e);
-    }, [onChange, checkOverflow, checkValue]);
-    const onInputScroll = React.useCallback((e) => {
+    };
+    const onInputScroll = (e) => {
         checkOverflow(e.target);
         onScroll?.(e);
-    }, [onScroll, checkOverflow]);
-    const onInputBlur = React.useCallback((e) => {
+    };
+    const onInputBlur = (e) => {
         setIsInFocus(false);
         onBlur?.(e);
-    }, [onBlur]);
+    };
     useEffect(() => {
         window.addEventListener('mousemove', onMouseMove);
         window.addEventListener('mouseup', onMouseUp);

package/components/global/theme.d.ts

@@ -6,6 +6,7 @@ declare enum Theme {
 }
 export declare const ThemeContext: import("react").Context<{
     theme: Theme.LIGHT | Theme.DARK;
+    passToPopups?: boolean;
 }>;
 export declare const GLOBAL_DARK_CLASS_NAME = "ring-ui-theme-dark";
 export declare function useTheme(): Theme.LIGHT | Theme.DARK;

package/components/global/theme.js

@@ -1,9 +1,5 @@
-import { useMemo, useState, useEffect, forwardRef, useContext, createContext, } from 'react';
+import { useState, useEffect, forwardRef, createContext, } from 'react';
 import classNames from 'classnames';
-import { createPortal } from 'react-dom';
-import { PopupTarget, PopupTargetContext } from '../popup/popup.target';
-import { getPopupContainer } from '../popup/popup';
-import getUID from './get-uid';
 import defaultStyles from './variables.css';
 import styles from './variables_dark.css';
 var Theme;
@@ -12,7 +8,9 @@ var Theme;
     Theme["LIGHT"] = "light";
     Theme["DARK"] = "dark";
 })(Theme || (Theme = {}));
-export const ThemeContext = createContext({ theme: Theme.LIGHT });
+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)');
 export function useTheme() {
@@ -52,27 +50,23 @@ export function applyTheme(theme, container) {
 const DefaultWrapper = forwardRef(function Wrapper(props, ref) {
     return <div {...props} ref={ref}/>;
 });
-export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.AUTO, className, passToPopups, children, WrapperComponent = DefaultWrapper, target, ...restProps }, ref) {
+function ThemeProviderInner({ theme = Theme.AUTO, className, passToPopups, children, WrapperComponent = DefaultWrapper, target, wrapperRef, ...restProps }) {
     const systemTheme = useTheme();
     const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
-    const id = useMemo(() => getUID('popups-with-theme-'), []);
-    const themeValue = useMemo(() => ({ theme: resolvedTheme }), [resolvedTheme]);
+    const themeValue = { theme: resolvedTheme, passToPopups };
     useEffect(() => {
         if (target) {
             applyTheme(resolvedTheme, target);
         }
     }, [resolvedTheme, target]);
     const themeClasses = useThemeClasses(theme);
-    const parentTarget = useContext(PopupTargetContext);
     return (<ThemeContext.Provider value={themeValue}>
-      <WrapperComponent ref={ref} className={target ? undefined : classNames(className, themeClasses)} {...restProps}>
-        {passToPopups ? (<PopupTarget id={id}>
-            {popupTarget => (<>
-                {children}
-                {createPortal(<div className={themeClasses}>{popupTarget}</div>, (parentTarget && getPopupContainer(parentTarget)) || document.body)}
-              </>)}
-          </PopupTarget>) : (children)}
+      <WrapperComponent ref={wrapperRef} className={target ? undefined : classNames(className, themeClasses)} {...restProps}>
+        {children}
       </WrapperComponent>
     </ThemeContext.Provider>);
+}
+export const ThemeProvider = forwardRef(function ThemeProvider(props, ref) {
+    return <ThemeProviderInner {...props} wrapperRef={ref}/>;
 });
 export default Theme;

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

@@ -1,4 +1,5 @@
 import { useCallback, useLayoutEffect, useRef } from 'react';
+// TODO deprecate in favor of useEffectEvent after dropping support for React < 19.2
 export default function useEventCallback(fn) {
     const ref = useRef(null);
     useLayoutEffect(() => {

package/components/popup/popup.js

@@ -17,30 +17,9 @@ import position from './position';
 import { DEFAULT_DIRECTIONS, Dimension, Directions, Display, MaxHeight, MinWidth } from './popup.consts';
 import { PopupTargetContext, PopupTarget } from './popup.target';
 import { setCSSAnchorPositioning, supportsCSSAnchorPositioning } from './position-css';
+import { ThemeContext, WithThemeClasses } from '../global/theme';
 import styles from './popup.css';
 export { PopupTargetContext, PopupTarget };
-const isPossibleClientSideNavigation = (event) => {
-    const target = event.target;
-    const link = target.closest('a');
-    // Taken from https://github.com/nanostores/router/blob/80a333db4cf0789fda21a02715ebabca15192642/index.js#L58-L69
-    return (link &&
-        event.button === 0 && // Left mouse button
-        link.target !== '_blank' && // Not for new tab
-        link.origin === location.origin && // Not external link
-        link.rel !== 'external' && // Not external link
-        link.target !== '_self' && // Now manually disabled
-        !link.download && // Not download link
-        !event.altKey && // Not download link by user
-        !event.metaKey && // Not open in new tab by user
-        !event.ctrlKey && // Not open in new tab by user
-        !event.shiftKey && // Not open in new window by user
-        !event.defaultPrevented);
-};
-const stop = (event) => {
-    if (!isPossibleClientSideNavigation(event)) {
-        event.stopPropagation();
-    }
-};
 export const getPopupContainer = (target) => typeof target === 'string' ? document.querySelector(`[data-portaltarget=${target}]`) : target;
 /**
  * @constructor
@@ -301,35 +280,35 @@ export default class Popup extends PureComponent {
     render() {
         const { className, style, hidden, attached, keepMounted, client, onMouseDown, onMouseUp, onMouseOver, onMouseOut, onContextMenu, 'data-test': dataTest, largeBorderRadius, } = this.props;
         const showing = this.state.display === Display.SHOWING;
-        const classes = classNames(className, styles.popup, {
-            [styles.cssAnchoredPopup]: this.shouldUseCssPositioning(),
-            [styles.attached]: attached,
-            [styles.hidden]: hidden,
-            [styles.showing]: showing,
-            [styles.largeBorderRadius]: largeBorderRadius,
-        });
         const direction = (this.state.direction || '').toLowerCase().replace(/[_]/g, '-');
-        return (<PopupTargetContext.Consumer>
-        {value => {
-                this.ringPopupTarget = value;
-                return (<span 
-                // prevent bubbling through portal
-                onClick={stop} 
-                // This handler only blocks bubbling through React portal
-                role='presentation' ref={this.portalRef}>
-              {this.shouldUseShortcuts() && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>}
+        return (<ThemeContext.Consumer>
+        {theme => (<WithThemeClasses theme={theme.theme}>
+            {themeClasses => (<PopupTargetContext.Consumer>
+                {value => {
+                        this.ringPopupTarget = value;
+                        const classes = classNames(className, theme.passToPopups ? themeClasses : null, styles.popup, {
+                            [styles.cssAnchoredPopup]: this.shouldUseCssPositioning(),
+                            [styles.attached]: attached,
+                            [styles.hidden]: hidden,
+                            [styles.showing]: showing,
+                            [styles.largeBorderRadius]: largeBorderRadius,
+                        });
+                        return (<span ref={this.portalRef}>
+                      {this.shouldUseShortcuts() && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>}
 
-              {client !== false &&
-                        (keepMounted || !hidden) &&
-                        createPortal(<PopupTarget id={this.uid} ref={this.containerRef} onMouseOver={onMouseOver} onFocus={onMouseOver} onMouseOut={onMouseOut} onBlur={onMouseOut} onContextMenu={onContextMenu}>
-                    <div data-test={dataTests('ring-popup', dataTest)} data-test-shown={!hidden && !showing} data-test-direction={direction} ref={this.popupRef} className={classes} style={style} onMouseDown={onMouseDown} onMouseUp={onMouseUp} 
-                        // mouse handlers are used to track clicking on inner elements
-                        role='presentation'>
-                      {this.getInternalContent()}
-                    </div>
-                  </PopupTarget>, this.getContainer() || document.body)}
-            </span>);
-            }}
-      </PopupTargetContext.Consumer>);
+                      {client !== false &&
+                                (keepMounted || !hidden) &&
+                                createPortal(<PopupTarget id={this.uid} ref={this.containerRef} onMouseOver={onMouseOver} onFocus={onMouseOver} onMouseOut={onMouseOut} onBlur={onMouseOut} onContextMenu={onContextMenu}>
+                            <div data-test={dataTests('ring-popup', dataTest)} data-test-shown={!hidden && !showing} data-test-direction={direction} ref={this.popupRef} className={classes} style={style} onMouseDown={onMouseDown} onMouseUp={onMouseUp} 
+                                // mouse handlers are used to track clicking on inner elements
+                                role='presentation'>
+                              {this.getInternalContent()}
+                            </div>
+                          </PopupTarget>, this.getContainer() || document.body)}
+                    </span>);
+                    }}
+              </PopupTargetContext.Consumer>)}
+          </WithThemeClasses>)}
+      </ThemeContext.Consumer>);
     }
 }

package/components/slider/slider.js

@@ -1,22 +1,23 @@
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
 import { isArray } from '../global/typescript-utils';
 import Shortcuts from '../shortcuts/shortcuts';
 import getUID from '../global/get-uid';
 import { adjustValues, calculateMarks, calculateValue, HUNDRED, toPercent, toRange, validateValue } from './slider.utils';
+import useEventCallback from '../global/use-event-callback';
 import styles from './slider.css';
 export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1, disabled, marks, showTicks, showTag, className, renderTag, onChange, }) => {
     const ref = useRef(null);
     const previouslyDragged = useRef(false);
     const [values, setValues] = useState(defaultValue ?? min);
-    const validValues = useMemo(() => toRange(value ?? values, min, max), [max, min, value, values]);
+    const validValues = toRange(value ?? values, min, max);
     const validStep = step < 0 ? 0 : step;
     const isRange = isArray(defaultValue ?? value);
     const [isDragging, setIsDragging] = useState(false);
     const [draggedIndex, setDraggedIndex] = useState(-1);
     const [shortcutsScope] = useState(getUID('ring-slider-'));
-    const markValues = useMemo(() => {
+    const markValues = (() => {
         if (isArray(marks)) {
             return marks.map(mark => ({ ...mark, value: validateValue(mark.value, min, max) }));
         }
@@ -24,54 +25,51 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
             return calculateMarks(min, max, validStep);
         }
         return [];
-    }, [marks, max, min, validStep]);
-    const tickMarks = useMemo(() => {
+    })();
+    const tickMarks = (() => {
         if (showTicks) {
             return markValues.length ? markValues : calculateMarks(min, max, validStep);
         }
         return [];
-    }, [max, min, markValues, showTicks, validStep]);
-    const trackStart = useMemo(() => toPercent(isRange ? Math.min(...validValues) : min, min, max), [isRange, max, min, validValues]);
-    const trackLength = useMemo(() => toPercent(Math.max(...validValues), min, max) - trackStart, [max, min, trackStart, validValues]);
-    const handleValueChange = useCallback((nextValues) => {
+    })();
+    const trackStart = toPercent(isRange ? Math.min(...validValues) : min, min, max);
+    const trackLength = toPercent(Math.max(...validValues), min, max) - trackStart;
+    const handleValueChange = (nextValues) => {
         setValues(nextValues);
         onChange?.(isRange ? nextValues : nextValues[0]);
-    }, [isRange, onChange]);
-    const shortcutsMap = useMemo(() => {
-        const setValueAndSwap = (nextValue, index) => {
-            const nextValues = [...validValues];
-            nextValues[index] = nextValue;
-            if (nextValues[0] > nextValues[1]) {
-                const previousValue = nextValues[index];
-                nextValues.reverse();
-                const thumb = ref.current?.querySelector(`[role="slider"][data-index="${nextValues.indexOf(previousValue)}"]`);
-                thumb?.focus();
-            }
-            handleValueChange(nextValues);
-        };
-        const getIndex = (target) => Number(target?.getAttribute('data-index'));
-        const map = {};
-        if (!disabled) {
-            map.left = map.down = ({ target }) => {
-                const index = getIndex(target);
-                setValueAndSwap(Math.max(min, validValues[index] - validStep), index);
-            };
-            map.right = map.up = ({ target }) => {
-                const index = getIndex(target);
-                setValueAndSwap(Math.min(max, validValues[index] + validStep), index);
-            };
-            map.home = ({ target }) => {
-                const index = getIndex(target);
-                setValueAndSwap(min, index);
-            };
-            map.end = ({ target }) => {
-                const index = getIndex(target);
-                setValueAndSwap(max, index);
-            };
+    };
+    const setValueAndSwap = (nextValue, index) => {
+        const nextValues = [...validValues];
+        nextValues[index] = nextValue;
+        if (nextValues[0] > nextValues[1]) {
+            const previousValue = nextValues[index];
+            nextValues.reverse();
+            const thumb = ref.current?.querySelector(`[role="slider"][data-index="${nextValues.indexOf(previousValue)}"]`);
+            thumb?.focus();
         }
-        return map;
-    }, [disabled, handleValueChange, max, min, validStep, validValues]);
-    const handleMouseDown = useCallback((e) => {
+        handleValueChange(nextValues);
+    };
+    const getIndex = (target) => Number(target?.getAttribute('data-index'));
+    const shortcutsMap = {};
+    if (!disabled) {
+        shortcutsMap.left = shortcutsMap.down = ({ target }) => {
+            const index = getIndex(target);
+            setValueAndSwap(Math.max(min, validValues[index] - validStep), index);
+        };
+        shortcutsMap.right = shortcutsMap.up = ({ target }) => {
+            const index = getIndex(target);
+            setValueAndSwap(Math.min(max, validValues[index] + validStep), index);
+        };
+        shortcutsMap.home = ({ target }) => {
+            const index = getIndex(target);
+            setValueAndSwap(min, index);
+        };
+        shortcutsMap.end = ({ target }) => {
+            const index = getIndex(target);
+            setValueAndSwap(max, index);
+        };
+    }
+    const handleMouseDown = (e) => {
         e.stopPropagation();
         if (disabled) {
             return;
@@ -87,8 +85,8 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
         }
         setIsDragging(true);
         previouslyDragged.current = false;
-    }, [disabled, isRange, max, min, validStep, validValues]);
-    const handleMouseUp = useCallback(({ pageX }) => {
+    };
+    const handleMouseUp = useEventCallback(({ pageX }) => {
         const nextValues = adjustValues(validValues, ref, draggedIndex, pageX, max, min, validStep);
         if (nextValues[0] > nextValues[1]) {
             nextValues.reverse();
@@ -97,15 +95,15 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
         setDraggedIndex(-1);
         setIsDragging(false);
         previouslyDragged.current = true;
-    }, [validValues, draggedIndex, handleValueChange, max, min, validStep]);
-    const handleMouseMove = useCallback(({ pageX }) => {
+    });
+    const handleMouseMove = useEventCallback(({ pageX }) => {
         const nextValues = adjustValues(validValues, ref, draggedIndex, pageX, max, min, validStep);
         if (nextValues[0] > nextValues[1]) {
             nextValues.reverse();
             setDraggedIndex(prevState => (prevState === 0 ? 1 : 0));
         }
         handleValueChange(nextValues);
-    }, [validValues, draggedIndex, max, min, validStep, handleValueChange]);
+    });
     useEffect(() => {
         if (disabled) {
             return undefined;
@@ -122,7 +120,7 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
             window.removeEventListener('mousemove', handleMouseMove);
             window.removeEventListener('mouseup', handleMouseUp);
         };
-    }, [isDragging, handleMouseMove, handleMouseUp, disabled]);
+    }, [isDragging, disabled, handleMouseMove, handleMouseUp]);
     return (<div ref={ref} role='presentation' // contains interactive elements
      className={classNames(styles.slider, className, {
             [styles.disabled]: disabled,

package/components/tabs/collapsible-more.js

@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import classNames from 'classnames';
 import { Directions } from '../popup/popup.consts';
 import PopupMenu, { ListProps } from '../popup-menu/popup-menu';
@@ -15,7 +15,7 @@ export const AnchorLink = ({ hasActiveChildren, moreClassName, moreActiveClassNa
 };
 const morePopupDirections = [Directions.BOTTOM_CENTER, Directions.BOTTOM_LEFT, Directions.BOTTOM_RIGHT];
 export const MoreButton = memo(({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd, }) => {
-    const onSelectHandler = useMemo(() => (onSelect
+    const onSelectHandler = onSelect
         ? (listItem) => {
             if (listItem.disabled === true || listItem.custom === true) {
                 return;
@@ -23,37 +23,34 @@ export const MoreButton = memo(({ items, selected, onSelect, moreClassName, more
             const cb = onSelect(String(listItem.key));
             cb();
         }
-        : undefined), [onSelect]);
-    const hasActiveChild = useMemo(() => items.some(item => item.props.alwaysHidden && item.props.id === selected), [items, selected]);
-    const data = useMemo(() => {
-        const popupItems = getTabTitles({
-            items,
-            selected,
-            collapsed: true,
-        }).map(tab => {
-            const disabled = tab.props.disabled === true;
-            const custom = tab.props.child.type === CustomItem;
-            return {
-                template: tab,
-                key: tab.key,
-                rgItemType: ListProps.Type.CUSTOM,
-                className: morePopupItemClassName,
-                disabled,
-                custom,
-            };
+        : undefined;
+    const hasActiveChild = items.some(item => item.props.alwaysHidden && item.props.id === selected);
+    const data = getTabTitles({
+        items,
+        selected,
+        collapsed: true,
+    }).map(tab => {
+        const disabled = tab.props.disabled === true;
+        const custom = tab.props.child.type === CustomItem;
+        return {
+            template: tab,
+            key: tab.key,
+            rgItemType: ListProps.Type.CUSTOM,
+            className: morePopupItemClassName,
+            disabled,
+            custom,
+        };
+    });
+    if (morePopupBeforeEnd) {
+        data.push({
+            template: morePopupBeforeEnd,
+            key: 'before-end-content',
+            className: styles.morePopupBeforeEnd,
+            rgItemType: ListProps.Type.CUSTOM,
         });
-        if (morePopupBeforeEnd) {
-            popupItems.push({
-                template: morePopupBeforeEnd,
-                key: 'before-end-content',
-                className: styles.morePopupBeforeEnd,
-                rgItemType: ListProps.Type.CUSTOM,
-            });
-        }
-        return popupItems;
-    }, [items, morePopupBeforeEnd, morePopupItemClassName, selected]);
-    const popupAnchor = useMemo(() => (<AnchorLink moreClassName={moreClassName} moreActiveClassName={moreActiveClassName} hasActiveChildren={hasActiveChild}/>), [hasActiveChild, moreActiveClassName, moreClassName]);
-    const popup = useMemo(() => (<PopupMenu directions={morePopupDirections} className={morePopupClassName} onSelect={onSelectHandler} data={data}/>), [data, morePopupClassName, onSelectHandler]);
+    }
+    const popupAnchor = (<AnchorLink moreClassName={moreClassName} moreActiveClassName={moreActiveClassName} hasActiveChildren={hasActiveChild}/>);
+    const popup = (<PopupMenu directions={morePopupDirections} className={morePopupClassName} onSelect={onSelectHandler} data={data}/>);
     if (items.length === 0) {
         return null;
     }

package/components/tabs/collapsible-tabs.js

@@ -1,4 +1,4 @@
-import { useState, useRef, useMemo, useCallback, useEffect, memo } from 'react';
+import { useState, useRef, useCallback, useEffect, memo } from 'react';
 import classNames from 'classnames';
 import fastdom from 'fastdom';
 import { FakeMoreButton, MoreButton } from './collapsible-more';
@@ -15,24 +15,22 @@ export const CollapsibleTabs = ({ children, selected, onSelect, onLastVisibleInd
         hidden: [],
     });
     const measureRef = useRef(null);
-    const selectedIndex = useMemo(() => children.filter(tab => tab.props.alwaysHidden !== true).findIndex(tab => tab.props.id === selected) ?? null, [children, selected]);
-    const visibleElements = useMemo(() => {
-        let items;
-        if (preparedElements.ready) {
-            items = preparedElements.visible;
-        }
-        else {
-            items = initialVisibleItems
-                ? children.filter(item => item.props.alwaysHidden !== true).slice(0, initialVisibleItems)
-                : [];
-        }
-        return getTabTitles({
-            items,
-            selected,
-            onSelect,
-        });
-    }, [initialVisibleItems, children, preparedElements.ready, preparedElements.visible, onSelect, selected]);
-    const hiddenElements = useMemo(() => {
+    const selectedIndex = children.filter(tab => tab.props.alwaysHidden !== true).findIndex(tab => tab.props.id === selected) ?? null;
+    let items;
+    if (preparedElements.ready) {
+        items = preparedElements.visible;
+    }
+    else {
+        items = initialVisibleItems
+            ? children.filter(item => item.props.alwaysHidden !== true).slice(0, initialVisibleItems)
+            : [];
+    }
+    const visibleElements = getTabTitles({
+        items,
+        selected,
+        onSelect,
+    });
+    const hiddenElements = (() => {
         if (preparedElements.ready) {
             return preparedElements.hidden;
         }
@@ -40,7 +38,7 @@ export const CollapsibleTabs = ({ children, selected, onSelect, onLastVisibleInd
             return children.filter(item => !visibleElements.some(visibleItem => visibleItem.props.child === item));
         }
         return [];
-    }, [children, preparedElements.hidden, preparedElements.ready, visibleElements, initialVisibleItems]);
+    })();
     const adjustTabs = useCallback((entry) => {
         const containerWidth = entry.contentRect.width;
         const { tabs: tabsSizes, more = 0 } = elements.sizes;
@@ -119,10 +117,8 @@ export const CollapsibleTabs = ({ children, selected, onSelect, onLastVisibleInd
         };
     }, [children, elements.lastVisibleIndex, preparedElements, selected, selectedIndex]);
     // Get list of all possibly visible elements to render in a measure container
-    const childrenToMeasure = useMemo(() => {
-        const items = children.filter(tab => tab.props.alwaysHidden !== true);
-        return getTabTitles({ items, tabIndex: -1 });
-    }, [children]);
+    const childItems = children.filter(tab => tab.props.alwaysHidden !== true);
+    const childrenToMeasure = getTabTitles({ items: childItems, tabIndex: -1 });
     // Initial measure for tabs and more button sizes
     useEffect(() => {
         if (measureRef.current === null) {

package/components/upload/upload.js

@@ -1,14 +1,14 @@
-import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
+import { forwardRef, useImperativeHandle, useRef, useState, } from 'react';
 import classNames from 'classnames';
 import attachmentIcon from '@jetbrains/icons/attachment';
 import Icon from '../icon';
 import styles from './upload.css';
 const defaultRenderIcon = () => <Icon className={styles.attachmentIcon} glyph={attachmentIcon}/>;
-export const Upload = forwardRef(function Upload({ children, className, onFilesSelected, onFilesRejected, validate = () => true, variant = 'empty', multiple, renderIcon = defaultRenderIcon, accept, disabled, }, ref) {
+function UploadInner({ children, className, onFilesSelected, onFilesRejected, validate = () => true, variant = 'empty', multiple, renderIcon = defaultRenderIcon, accept, disabled, forwardedRef, }) {
     const fileInputRef = useRef(null);
     const [dragOver, setDragOver] = useState(false);
-    useImperativeHandle(ref, () => ({ openFilePicker: () => fileInputRef.current?.click() }), []);
-    const handleSelectedFiles = useCallback((files) => {
+    useImperativeHandle(forwardedRef, () => ({ openFilePicker: () => fileInputRef.current?.click() }), []);
+    const handleSelectedFiles = (files) => {
         if (!files.length) {
             return;
         }
@@ -18,16 +18,16 @@ export const Upload = forwardRef(function Upload({ children, className, onFilesS
             return;
         }
         onFilesSelected(files);
-    }, [onFilesRejected, onFilesSelected, validate]);
-    const onDragEnter = useCallback(() => setDragOver(true), []);
-    const onDragOver = useCallback(e => e.preventDefault(), []);
-    const onDragLeave = useCallback(() => setDragOver(false), []);
-    const onInputChange = useCallback(() => {
+    };
+    const onDragEnter = () => setDragOver(true);
+    const onDragOver = e => e.preventDefault();
+    const onDragLeave = () => setDragOver(false);
+    const onInputChange = () => {
         setDragOver(false);
         if (fileInputRef.current?.files) {
             handleSelectedFiles(Array.from(fileInputRef.current.files));
         }
-    }, [handleSelectedFiles]);
+    };
     return (<div className={classNames(className, styles.upload, {
             [styles.disabled]: disabled,
             [styles.dragOver]: dragOver,
@@ -38,5 +38,8 @@ export const Upload = forwardRef(function Upload({ children, className, onFilesS
       {renderIcon()}
       {children}
     </div>);
+}
+export const Upload = forwardRef(function Upload(props, ref) {
+    return <UploadInner {...props} forwardedRef={ref}/>;
 });
 export default Upload;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.79",
+  "version": "7.0.81",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -93,43 +93,43 @@
     "@babel/eslint-parser": "^7.28.5",
     "@csstools/css-parser-algorithms": "^3.0.4",
     "@csstools/stylelint-no-at-nest-rule": "^4.0.0",
-    "@eslint/compat": "^1.4.1",
-    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/compat": "^2.0.0",
+    "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.39.1",
-    "@figma/code-connect": "^1.3.8",
+    "@figma/code-connect": "^1.3.11",
     "@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",
-    "@primer/octicons": "^19.20.0",
+    "@primer/octicons": "^19.21.0",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
-    "@storybook/addon-a11y": "10.0.6",
-    "@storybook/addon-docs": "^10.0.6",
-    "@storybook/addon-themes": "^10.0.6",
+    "@storybook/addon-a11y": "10.1.2",
+    "@storybook/addon-docs": "^10.1.2",
+    "@storybook/addon-themes": "^10.1.2",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "10.0.6",
-    "@storybook/test-runner": "^0.24.1",
+    "@storybook/react-webpack5": "10.1.2",
+    "@storybook/test-runner": "^0.24.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/chai-as-promised": "^8.0.2",
     "@types/chai-dom": "1.11.3",
     "@types/markdown-it": "^14.1.2",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/webpack-env": "^1.18.8",
-    "@vitejs/plugin-react": "^5.0.4",
-    "@vitest/eslint-plugin": "^1.3.23",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/eslint-plugin": "^1.5.1",
     "acorn": "^8.15.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001754",
+    "caniuse-lite": "^1.0.30001757",
     "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.1.2",
-    "core-js": "^3.46.0",
+    "core-js": "^3.47.0",
     "cpy-cli": "^6.0.0",
     "dotenv-cli": "^11.0.0",
     "eslint": "^9.39.1",
@@ -142,42 +142,42 @@
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.0.6",
+    "eslint-plugin-storybook": "^10.1.2",
     "eslint-plugin-unicorn": "^62.0.0",
     "events": "^3.3.0",
-    "glob": "^11.1.0",
+    "glob": "^13.0.0",
     "globals": "^16.5.0",
-    "html-webpack-plugin": "^5.6.4",
+    "html-webpack-plugin": "^5.6.5",
     "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-teamcity": "^1.12.0",
-    "lint-staged": "^16.2.6",
+    "lint-staged": "^16.2.7",
     "markdown-it": "^14.1.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
-    "prettier": "^3.6.2",
+    "prettier": "^3.7.3",
     "raw-loader": "^4.0.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "regenerator-runtime": "^0.14.1",
-    "rimraf": "^6.1.0",
-    "rollup": "^4.53.1",
+    "rimraf": "^6.1.2",
+    "rollup": "^4.53.3",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "10.0.6",
-    "stylelint": "^16.25.0",
+    "storybook": "10.1.2",
+    "stylelint": "^16.26.1",
     "stylelint-config-sass-guidelines": "^12.1.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.14",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.3",
-    "vitest": "^3.2.4",
-    "vitest-teamcity-reporter": "^0.3.1",
-    "webpack": "^5.102.1",
+    "typescript-eslint": "^8.48.0",
+    "vitest": "^4.0.14",
+    "vitest-teamcity-reporter": "^0.4.1",
+    "webpack": "^5.103.0",
     "webpack-cli": "^6.0.1"
   },
   "peerDependencies": {
@@ -212,12 +212,12 @@
     "babel-loader": "10.0.0",
     "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-transform-define": "^2.1.4",
-    "browserslist": "^4.27.0",
+    "browserslist": "^4.28.0",
     "change-case": "^4.1.1",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",
     "css-loader": "^7.1.2",
-    "csstype": "^3.1.3",
+    "csstype": "^3.2.1",
     "date-fns": "^4.1.0",
     "dequal": "^2.0.3",
     "element-resize-detector": "^1.2.4",
@@ -240,7 +240,7 @@
     "react-waypoint": "^10.3.0",
     "scrollbar-width": "^3.1.1",
     "simply-uuid": "^1.0.1",
-    "sniffr": "^1.3.2",
+    "sniffr": "^1.4.0",
     "style-inject": "^0.3.0",
     "style-loader": "~4.0.0",
     "url-loader": "^4.1.1",