@jetbrains/ring-ui 7.0.6 → 7.0.8

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

@@ -1,5 +1,4 @@
-import { PropsWithChildren } from 'react';
-import * as React from 'react';
+import React, { PropsWithChildren } from 'react';
 type Props = {
     minHeight?: number;
     className?: string;

package/components/collapse/collapse-content.js

@@ -1,5 +1,4 @@
-import { useState, useEffect, useRef, useContext, useMemo } from 'react';
-import * as React from 'react';
+import React, { useState, useEffect, useRef, useContext, useMemo } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
 import { getRect } from '../global/dom';
@@ -20,19 +19,26 @@ export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-te
     const contentRef = useRef(null);
     const initialContentHeight = useRef(minHeight);
     const contentHeight = useRef(DEFAULT_HEIGHT);
-    const [dimensions, setDimensions] = useState({
-        width: 0,
-        height: 0,
-    });
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
     const [height, setHeight] = useState(toPx(minHeight));
-    const [showFade, setShowFade] = useState(true);
+    const [showFade, setShowFade] = useState(collapsed);
+    const [shouldHideContent, setShouldHideContent] = useState(collapsed && minHeight <= DEFAULT_HEIGHT);
     useEffect(() => {
-        if (!collapsed) {
-            setShowFade(false);
-        }
-        else {
-            setShowFade(true);
+        function onTransitionEnd() {
+            if (initialContentHeight.current <= DEFAULT_HEIGHT) {
+                setShouldHideContent(collapsed);
+            }
         }
+        const container = containerRef.current;
+        container?.addEventListener('transitionend', onTransitionEnd);
+        return () => {
+            container?.removeEventListener('transitionend', onTransitionEnd);
+        };
+    }, [collapsed]);
+    useEffect(() => {
+        setShowFade(collapsed);
+        if (!collapsed)
+            setShouldHideContent(false);
     }, [collapsed]);
     useEffect(() => {
         if (contentRef.current) {
@@ -63,9 +69,10 @@ export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-te
         };
     }, [duration, height, collapsed, minHeight]);
     const fadeShouldBeVisible = useMemo(() => Boolean(minHeight && showFade), [minHeight, showFade]);
+    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)}>
-        {children}
+        {shouldRenderContent ? children : null}
       </div>
       {fadeShouldBeVisible && <div className={styles.fade}/>}
     </div>);

package/components/collapse/collapse.d.ts

@@ -5,6 +5,8 @@ type Props = {
     duration?: number;
     disableAnimation?: boolean;
     className?: string;
+    defaultCollapsed?: boolean;
+    collapsed?: boolean | null;
 };
 /**
  * @name Collapse

package/components/collapse/collapse.js

@@ -1,20 +1,21 @@
-import { useCallback, useId, useState } from 'react';
+import { useCallback, useId, useMemo, useState } from 'react';
 import * as React from 'react';
 import { CollapseContext } from './collapse-context';
 import { BASE_ANIMATION_DURATION } from './consts';
 /**
  * @name Collapse
  */
-export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disableAnimation = false, className = '', onChange = () => { }, }) => {
-    const [collapsed, toggle] = useState(true);
+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(() => {
-        toggle(!collapsed);
-        onChange(!collapsed);
-    }, [toggle, onChange, collapsed]);
+        setInnerCollapsed(!finalCollapsedValue);
+        onChange(!finalCollapsedValue);
+    }, [setInnerCollapsed, onChange, finalCollapsedValue]);
     return (<div className={className}>
       <CollapseContext.Provider value={{
-            collapsed,
+            collapsed: finalCollapsedValue,
             setCollapsed,
             duration,
             disableAnimation,

package/components/dialog/dialog.css

@@ -24,6 +24,7 @@
   padding: 0;
 
   border: none;
+  background: transparent;
 }
 
 .container,
@@ -81,14 +82,26 @@
   cursor: pointer;
 }
 
-.clickableOverlay:hover + * .closeIcon {
+.closeIconOutside.closeIconOutside {
   color: var(--ring-icon-hover-color);
 }
 
-.closeButton:hover .closeIcon {
+.clickableOverlay:hover + * .closeIconInside {
   color: var(--ring-icon-hover-color);
 }
 
+.clickableOverlay:hover + * .closeIconOutside {
+  color: var(--ring-main-hover-color);
+}
+
+.closeButton:hover .closeIconInside {
+  color: var(--ring-icon-hover-color);
+}
+
+.closeButton:hover .closeIconOutside {
+  color: var(--ring-main-hover-color);
+}
+
 .clickableOverlay:active + * .closeIcon {
   color: var(--ring-main-color);
 }
@@ -99,16 +112,18 @@
 
 .closeButton.closeButton {
   position: absolute;
+
+  line-height: calc(var(--ring-unit) * 2);
 }
 
 .closeButtonOutside {
-  top: calc(var(--ring-unit) / 2);
+  top: var(--ring-unit);
   right: calc(var(--ring-unit) * -3);
 }
 
 .closeButtonInside {
-  top: calc(var(--ring-unit) * 1.5);
-  right: var(--ring-unit);
+  top: calc(var(--ring-unit) * 2);
+  right: calc(var(--ring-unit) * 2);
 }
 
 .documentWithoutScroll {

package/components/dialog/dialog.js

@@ -122,7 +122,10 @@ export default class Dialog extends PureComponent {
             {showCloseButton && (<Button icon={closeIcon} data-test="ring-dialog-close-button" className={classNames(styles.closeButton, {
                     [styles.closeButtonOutside]: !closeButtonInside,
                     [styles.closeButtonInside]: closeButtonInside,
-                })} iconClassName={styles.closeIcon} onClick={this.onCloseClick} title={closeButtonTitle} aria-label={closeButtonTitle || 'close dialog'}/>)}
+                })} iconClassName={classNames(styles.closeIcon, {
+                    [styles.closeIconOutside]: !closeButtonInside,
+                    [styles.closeIconInside]: closeButtonInside,
+                })} onClick={this.onCloseClick} title={closeButtonTitle} aria-label={closeButtonTitle || 'close dialog'}/>)}
           </AdaptiveIsland>
         </div>
       </>);

package/components/global/variables.css

@@ -152,6 +152,7 @@
   --ring-code-deletion-color: rgb(var(--ring-code-deletion-components)); /* #DFE1E5 */
 
   /* Metrics */
+  --ring-border-radius-large: var(--ring-unit);
   --ring-border-radius: 4px;
   --ring-border-radius-small: 2px;
   --ring-font-size-larger: 16px;

package/components/island/island.css

@@ -8,7 +8,7 @@
   flex-direction: column;
 
   border: 1px solid var(--ring-line-color);
-  border-radius: var(--ring-border-radius);
+  border-radius: var(--ring-border-radius-large);
 
   background-color: var(--ring-content-background-color);
   box-shadow: 0 1px 4px var(--ring-popup-shadow-color);

package/components/list/list.css

@@ -179,7 +179,12 @@
   transition: none;
 }
 
-.hover:not(.error) {
+.item:hover:not(.error) {
+  background-color: var(--ring-hover-background-color);
+}
+
+/* TODO rename .hover to .selected in 8.0 */
+.item.hover:not(.error) {
   background-color: var(--ring-selected-background-color);
 }
 

package/components/list/list.d.ts

@@ -67,7 +67,6 @@ export interface ListState<T = unknown> {
     needScrollToActive: boolean;
     scrolling: boolean;
     hasOverflow: boolean;
-    disabledHover: boolean;
     scrolledToBottom: boolean;
 }
 interface RenderVirtualizedInnerParams extends Partial<WindowScrollerChildProps> {
@@ -109,7 +108,6 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     componentDidUpdate(prevProps: ListProps<T>): void;
     componentWillUnmount(): void;
     scheduleScrollListener: (cb: () => void) => void;
-    scheduleHoverListener: (cb: () => void) => void;
     static isItemType: typeof isItemType;
     static ListHint: typeof ListHint;
     static ListProps: {
@@ -129,7 +127,6 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     virtualizedList?: VirtualizedList | null;
     unmounted?: boolean;
     container?: HTMLElement | null;
-    hoverHandler: (arg: number) => () => void;
     private _bufferSize;
     sizeCacheKey: (index: number) => string | Type.ITEM | Type.MARGIN;
     private _cache;
@@ -142,15 +139,12 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     downHandler: (e: KeyboardEvent) => void;
     homeHandler: (e: KeyboardEvent) => void;
     endHandler: (e: KeyboardEvent) => void;
-    onDocumentMouseMove: () => void;
-    onDocumentKeyDown: (e: KeyboardEvent) => void;
     moveHandler(index: number, retryCallback: (e: KeyboardEvent) => void, e: KeyboardEvent): void;
     mouseHandler: () => void;
     scrollHandler: () => void;
     enterHandler: (event: KeyboardEvent, shortcut?: string) => boolean;
     getFirst(): ListDataItem<T> | undefined;
     getSelected(): ListDataItem<T> | null;
-    clearSelected: () => void;
     defaultItemHeight(): number;
     scrollEndHandler: () => void;
     checkOverflow: () => void;

package/components/list/list.js

@@ -77,7 +77,6 @@ export default class List extends Component {
         needScrollToActive: false,
         scrolling: false,
         hasOverflow: false,
-        disabledHover: false,
         scrolledToBottom: false,
     };
     static getDerivedStateFromProps(nextProps, prevState) {
@@ -110,8 +109,6 @@ export default class List extends Component {
         return nextState;
     }
     componentDidMount() {
-        document.addEventListener('mousemove', this.onDocumentMouseMove);
-        document.addEventListener('keydown', this.onDocumentKeyDown, true);
         if (this.props.activeIndex == null && shouldActivateFirstItem(this.props)) {
             this.activateFirst();
         }
@@ -133,11 +130,8 @@ export default class List extends Component {
     }
     componentWillUnmount() {
         this.unmounted = true;
-        document.removeEventListener('mousemove', this.onDocumentMouseMove);
-        document.removeEventListener('keydown', this.onDocumentKeyDown, true);
     }
     scheduleScrollListener = scheduleRAF();
-    scheduleHoverListener = scheduleRAF();
     static isItemType = isItemType;
     static ListHint = ListHint;
     static ListProps = {
@@ -147,18 +141,6 @@ export default class List extends Component {
     virtualizedList;
     unmounted;
     container;
-    hoverHandler = memoize((index) => () => this.scheduleHoverListener(() => {
-        if (this.state.disabledHover) {
-            return;
-        }
-        if (this.container) {
-            this.setState({
-                activeIndex: index,
-                activeItem: this.props.data[index],
-                needScrollToActive: false,
-            });
-        }
-    }));
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
     _bufferSize = 10; // keep X items above and below of the visible area
     // reuse size cache for similar items
@@ -260,17 +242,6 @@ export default class List extends Component {
     endHandler = (e) => {
         this.moveHandler(this.props.data.length - 1, this.upHandler, e);
     };
-    onDocumentMouseMove = () => {
-        if (this.state.disabledHover) {
-            this.setState({ disabledHover: false });
-        }
-    };
-    onDocumentKeyDown = (e) => {
-        const metaKeys = [16, 17, 18, 19, 20, 91]; // eslint-disable-line @typescript-eslint/no-magic-numbers
-        if (!this.state.disabledHover && !metaKeys.includes(e.keyCode)) {
-            this.setState({ disabledHover: true });
-        }
-    };
     moveHandler(index, retryCallback, e) {
         let correctedIndex;
         if (this.props.data.length === 0 || !this.hasActivatableItems()) {
@@ -330,12 +301,6 @@ export default class List extends Component {
     getSelected() {
         return this.state.activeIndex != null ? this.props.data[this.state.activeIndex] : null;
     }
-    clearSelected = () => {
-        this.setState({
-            activeIndex: null,
-            needScrollToActive: false,
-        });
-    };
     defaultItemHeight() {
         return this.props.compact ? Dimension.COMPACT_ITEM_HEIGHT : Dimension.ITEM_HEIGHT;
     }
@@ -404,7 +369,6 @@ export default class List extends Component {
             if (itemProps.hoverClassName != null && itemProps.hover) {
                 itemProps.className = classNames(itemProps.className, itemProps.hoverClassName);
             }
-            itemProps.onMouseOver = this.hoverHandler(realIndex);
             itemProps.tabIndex = -1;
             itemProps.scrolling = isScrolling;
             const selectHandler = this.selectHandler(realIndex);
@@ -528,7 +492,7 @@ export default class List extends Component {
         const classes = classNames(styles.list, this.props.className);
         return (<>
         <ActiveItemContext.Updater value={this.getId(this.state.activeItem)} skipUpdate={this.props.hidden || !isActivatable(this.state.activeItem)}/>
-        <div id={this.props.id} ref={this.containerRef} className={classes} onMouseOut={this.props.onMouseOut} onBlur={this.props.onMouseOut} onMouseLeave={this.clearSelected} data-test="ring-list">
+        <div id={this.props.id} ref={this.containerRef} className={classes} onMouseOut={this.props.onMouseOut} onBlur={this.props.onMouseOut} data-test="ring-list">
           {this.props.shortcuts && (<Shortcuts map={this.props.shortcutsMap ? { ...this.shortcutsMap, ...this.props.shortcutsMap } : this.shortcutsMap} scope={this.shortcutsScope}/>)}
           {this.props.renderOptimization
                 ? this.renderVirtualized(maxHeight, rowCount)

package/components/panel/panel.js

@@ -8,7 +8,7 @@ export default class Panel extends PureComponent {
     render() {
         const { className, children, ...props } = this.props;
         const classes = classNames(styles.panel, className);
-        return (<div {...props} className={classes}>
+        return (<div data-test="ring-panel" {...props} className={classes}>
         {children}
       </div>);
     }

package/components/tabs/collapsible-more.d.ts

@@ -10,7 +10,7 @@ export declare const AnchorLink: ({ hasActiveChildren, moreClassName, moreActive
 export interface MoreButtonProps {
     items: ReactElement<TabProps>[];
     selected?: string | undefined;
-    onSelect: (key: string) => () => void;
+    onSelect?: ((key: string) => () => void) | null | undefined;
     moreClassName?: string | null | undefined;
     moreActiveClassName?: string | null | undefined;
     morePopupClassName?: string | null | undefined;

package/components/tabs/collapsible-more.js

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import classNames from 'classnames';
 import { Directions } from '../popup/popup.consts';
 import PopupMenu, { ListProps } from '../popup-menu/popup-menu';
@@ -15,13 +15,15 @@ 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 = useCallback((listItem) => {
-        if (listItem.disabled === true || listItem.custom === true) {
-            return;
+    const onSelectHandler = useMemo(() => onSelect != null
+        ? (listItem) => {
+            if (listItem.disabled === true || listItem.custom === true) {
+                return;
+            }
+            const cb = onSelect(String(listItem.key));
+            cb();
         }
-        const cb = onSelect(String(listItem.key));
-        cb();
-    }, [onSelect]);
+        : undefined, [onSelect]);
     const hasActiveChild = useMemo(() => items.some(item => item.props.alwaysHidden && item.props.id === selected), [items, selected]);
     const data = useMemo(() => {
         const popupItems = getTabTitles({

package/components/tabs/collapsible-tab.js

@@ -3,8 +3,7 @@ import classNames from 'classnames';
 import styles from './tabs.css';
 import TabLink from './tab-link';
 import { CustomItem } from './custom-item';
-function noop() { }
-const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect = noop, collapsed = false, tabIndex, }) {
+const TabTitle = React.memo(function TabTitle({ selected, child, handleSelect, collapsed = false, tabIndex, }) {
     if (child == null || typeof child !== 'object' || child.type === CustomItem) {
         return child;
     }

package/components/tabs/collapsible-tabs.d.ts

@@ -3,7 +3,7 @@ import { TabProps } from './tab';
 export interface CollapsibleTabsProps {
     children: ReactElement<TabProps>[];
     selected?: string | undefined;
-    onSelect: (key: string) => () => void;
+    onSelect?: ((key: string) => () => void) | undefined;
     moreClassName?: string | null | undefined;
     moreActiveClassName?: string | null | undefined;
     morePopupClassName?: string | null | undefined;

package/components/tabs/dumb-tabs.d.ts

@@ -7,17 +7,14 @@ export { CustomItem };
 export type Children = readonly (Children | null | boolean)[] | ReactElement<TabProps> | null | boolean;
 export interface TabsProps extends Omit<CollapsibleTabsProps, 'onSelect' | 'children'> {
     children: Children;
-    onSelect: (key: string) => void;
+    onSelect?: ((key: string) => void) | null | undefined;
     className?: string | null | undefined;
     tabContainerClassName?: string | null | undefined;
     autoCollapse?: boolean | null | undefined;
     'data-test'?: string | null | undefined;
 }
 declare class Tabs extends PureComponent<TabsProps> {
-    static defaultProps: {
-        onSelect(): void;
-    };
-    handleSelect: (arg: string) => () => void;
+    handleSelect: (arg: string) => () => void | undefined;
     getTabTitle: (child: ReactElement<TabProps>, i: number) => React.JSX.Element;
     render(): React.JSX.Element;
 }

package/components/tabs/dumb-tabs.js

@@ -9,29 +9,26 @@ import CollapsibleTabs from './collapsible-tabs';
 import { CustomItem } from './custom-item';
 export { CustomItem };
 class Tabs extends PureComponent {
-    static defaultProps = {
-        onSelect() { },
-    };
-    handleSelect = memoize((key) => () => this.props.onSelect(key));
+    handleSelect = memoize((key) => () => this.props.onSelect?.(key));
     getTabTitle = (child, i) => {
         if (child == null || typeof child !== 'object' || child.type === CustomItem) {
             return child;
         }
-        const { selected } = this.props;
+        const { selected, onSelect } = this.props;
         const { title, titleProps, id, disabled, href, className, activeClassName } = child.props;
         const key = id || String(i);
         const isSelected = key === selected;
         const titleClasses = classNames(styles.title, className, isSelected && activeClassName, {
             [styles.selected]: isSelected,
         });
-        return (<TabLink title={title} isSelected={isSelected} key={key} href={href} className={titleClasses} disabled={disabled} onPlainLeftClick={this.handleSelect(key)} {...titleProps}/>);
+        return (<TabLink title={title} isSelected={isSelected} key={key} href={href} className={titleClasses} disabled={disabled} onPlainLeftClick={onSelect != null ? this.handleSelect(key) : undefined} {...titleProps}/>);
     };
     render() {
-        const { className, tabContainerClassName, children, selected, autoCollapse, 'data-test': dataTest, ...restProps } = this.props;
+        const { className, tabContainerClassName, children, selected, autoCollapse, 'data-test': dataTest, onSelect, ...restProps } = this.props;
         const classes = classNames(styles.tabs, className);
         const childrenArray = React.Children.toArray(children).filter(Boolean);
         return (<div className={classes} data-test={dataTests('ring-dumb-tabs', dataTest)}>
-        {autoCollapse === true ? (<CollapsibleTabs {...restProps} onSelect={this.handleSelect} selected={selected}>
+        {autoCollapse === true ? (<CollapsibleTabs {...restProps} onSelect={onSelect != null ? this.handleSelect : undefined} selected={selected}>
             {childrenArray}
           </CollapsibleTabs>) : (<div className={styles.titles}>{childrenArray.map(this.getTabTitle)}</div>)}
         <div className={classNames(tabContainerClassName)}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.6",
+  "version": "7.0.8",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -83,8 +83,8 @@
     "@csstools/css-parser-algorithms": "^3.0.4",
     "@csstools/stylelint-no-at-nest-rule": "^4.0.0",
     "@eslint/compat": "^1.2.3",
-    "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.14.0",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.15.0",
     "@jetbrains/eslint-config": "^6.0.4",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
     "@jetbrains/stylelint-config": "^4.0.2",
@@ -94,18 +94,18 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
-    "@storybook/addon-a11y": "8.4.4",
-    "@storybook/addon-docs": "8.4.4",
-    "@storybook/addon-essentials": "8.4.4",
-    "@storybook/addon-themes": "^8.4.4",
-    "@storybook/components": "8.4.4",
+    "@storybook/addon-a11y": "8.4.5",
+    "@storybook/addon-docs": "8.4.5",
+    "@storybook/addon-essentials": "8.4.5",
+    "@storybook/addon-themes": "^8.4.5",
+    "@storybook/components": "8.4.5",
     "@storybook/csf": "^0.1.11",
-    "@storybook/manager-api": "8.4.4",
-    "@storybook/preview-api": "8.4.4",
-    "@storybook/react": "8.4.4",
-    "@storybook/react-webpack5": "8.4.4",
+    "@storybook/manager-api": "8.4.5",
+    "@storybook/preview-api": "8.4.5",
+    "@storybook/react": "8.4.5",
+    "@storybook/react-webpack5": "8.4.5",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "8.4.4",
+    "@storybook/theming": "8.4.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -127,16 +127,16 @@
     "acorn": "^8.14.0",
     "axe-playwright": "^2.0.3",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001679",
+    "caniuse-lite": "^1.0.30001684",
     "chai": "^5.1.2",
-    "chai-as-promised": "^8.0.0",
+    "chai-as-promised": "^8.0.1",
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^1.0.0-rc.12",
     "core-js": "^3.39.0",
     "cpy-cli": "^5.0.0",
     "enzyme": "^3.11.0",
-    "eslint": "^9.14.0",
+    "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-formatter-jslint-xml": "^8.40.0",
     "eslint-import-resolver-webpack": "^0.13.9",
@@ -145,13 +145,13 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-storybook": "^0.11.0",
+    "eslint-plugin-storybook": "^0.11.1",
     "events": "^3.3.0",
     "glob": "^11.0.0",
     "globals": "^15.12.0",
     "html-webpack-plugin": "^5.6.3",
     "http-server": "^14.1.1",
-    "husky": "^9.1.6",
+    "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "~29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -167,18 +167,18 @@
     "react-test-renderer": "^18.3.1",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.26.0",
+    "rollup": "^4.27.4",
     "rollup-plugin-clear": "^2.0.7",
     "sinon": "^19.0.2",
     "sinon-chai": "^4.0.0",
     "storage-mock": "^2.1.0",
-    "storybook": "8.4.4",
+    "storybook": "8.4.5",
     "stylelint": "^16.10.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.10",
     "typescript": "~5.6.3",
-    "typescript-eslint": "^8.14.0",
+    "typescript-eslint": "^8.15.0",
     "vitest": "^2.1.5",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
@@ -213,7 +213,7 @@
     "@jetbrains/postcss-require-hover": "^0.1.2",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",
-    "@types/react-virtualized": "9.21.30",
+    "@types/react-virtualized": "9.22.0",
     "@types/util-deprecate": "^1.0.4",
     "babel-loader": "9.2.1",
     "babel-plugin-transform-define": "^2.1.4",
@@ -229,7 +229,7 @@
     "es6-error": "^4.1.1",
     "fastdom": "^1.0.12",
     "file-loader": "^6.2.0",
-    "focus-trap": "^7.6.0",
+    "focus-trap": "^7.6.2",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
@@ -239,7 +239,7 @@
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.1.1",
     "postcss-modules-values-replace": "^4.2.0",
-    "postcss-preset-env": "^10.1.0",
+    "postcss-preset-env": "^10.1.1",
     "react-movable": "^3.3.1",
     "react-virtualized": "^9.22.5",
     "react-waypoint": "^10.3.0",