@jetbrains/ring-ui 7.0.7 → 7.0.9

package/README.md

@@ -8,6 +8,7 @@ This collection of UI components aims to provide all the necessary building bloc
 ## Try now
 * Try the [codesandbox](https://codesandbox.io/p/sandbox/ring-ui-7-0-demo-z6v6ym), based on `create-react-app` tooling, to see and try the UI components
 * Check out [list of examples](https://jetbrains.github.io/ring-ui/master/index.html) for each component
+* Check out [Ring UI Design Guidelines](http://www.jetbrains.com/help/ring-ui)
 
 ## Installation
 

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/list/list.css

@@ -48,20 +48,24 @@
 
   box-sizing: border-box;
 
-  width: 100%;
+  width: calc(100% - 2 * var(--ring-unit));
 
   text-align: left;
   vertical-align: bottom;
   white-space: nowrap;
   text-decoration: none;
 
+  border-radius: var(--ring-border-radius);
+
   outline: none;
 
   font-size: var(--ring-font-size);
+
+  margin-inline: var(--ring-unit);
 }
 
 .item.item {
-  padding: 3px calc(var(--ring-unit) * 2) 5px;
+  padding: 3px var(--ring-unit) 5px;
 
   line-height: calc(var(--ring-unit) * 3);
 }
@@ -160,12 +164,17 @@
 
 /* Override :last-child */
 .hint.hint {
+  width: 100%;
+
   margin-bottom: 0;
 
   border-top: 1px solid var(--ring-line-color);
+  border-radius: 0;
   background-color: var(--ring-sidebar-background-color);
 
   font-size: var(--ring-font-size-smaller);
+  margin-inline: 0;
+  padding-inline: calc(2 * var(--ring-unit));
 }
 
 .action {
@@ -179,7 +188,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/list/list__item.js

@@ -12,7 +12,7 @@ import styles from './list.css';
  * @extends {ReactComponent}
  */
 const RING_UNIT = 8;
-const DEFAULT_PADDING = 16;
+const DEFAULT_PADDING = 8;
 const CHECKBOX_WIDTH = 28;
 export default class ListItem extends PureComponent {
     id = getUID('list-item-');

package/components/popup/popup.css

@@ -19,6 +19,10 @@
   box-shadow: var(--ring-popup-shadow);
 }
 
+.largeBorderRadius {
+  border-radius: var(--ring-border-radius-large);
+}
+
 .hidden {
   display: none;
 }

package/components/popup/popup.d.ts

@@ -31,6 +31,7 @@ export interface BasePopupProps {
     legacy: boolean;
     withTail?: boolean;
     tailOffset?: number;
+    largeBorderRadius?: boolean;
     anchorElement?: HTMLElement | null | undefined;
     target?: string | Element | null | undefined;
     className?: string | null | undefined;

package/components/popup/popup.js

@@ -256,12 +256,13 @@ export default class Popup extends PureComponent {
         esc: this._onEscPress,
     };
     render() {
-        const { className, style, hidden, attached, keepMounted, client, onMouseDown, onMouseUp, onMouseOver, onMouseOut, onContextMenu, 'data-test': dataTest, } = this.props;
+        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.attached]: attached,
             [styles.hidden]: hidden,
             [styles.showing]: showing,
+            [styles.largeBorderRadius]: largeBorderRadius,
         });
         const direction = (this.state.direction || '').toLowerCase().replace(/[_]/g, '-');
         return (<PopupTargetContext.Consumer>

package/components/popup-menu/popup-menu.d.ts

@@ -27,6 +27,7 @@ export default class PopupMenu<T = unknown> extends Popup<PopupMenuProps<T>> {
     static defaultProps: {
         renderOptimization: boolean;
         closeOnSelect: boolean;
+        largeBorderRadius: boolean;
         shortcuts: boolean;
         hidden: boolean;
         onOutsideClick(): void;

package/components/popup-menu/popup-menu.js

@@ -11,6 +11,7 @@ export default class PopupMenu extends Popup {
         ...Popup.defaultProps,
         renderOptimization: false,
         closeOnSelect: false,
+        largeBorderRadius: true,
     };
     onSelect = (item, event) => {
         if (this.props.closeOnSelect) {

package/components/select/select__popup.js

@@ -328,7 +328,7 @@ export default class SelectPopup extends PureComponent {
                 const list = this.getList(this.props.ringPopupTarget || ringPopupTarget);
                 const bottomLine = this.getBottomLine();
                 const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar || topbar;
-                return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} onOutsideClick={onOutsideClick} directions={directions} top={top} left={left} offset={offset} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style}>
+                return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick anchorElement={anchorElement} minWidth={minWidth} onCloseAttempt={onCloseAttempt} onOutsideClick={onOutsideClick} directions={directions} top={top} left={left} offset={offset} onMouseDown={this.mouseDownHandler} target={this.props.ringPopupTarget} autoCorrectTopOverflow={false} style={style} largeBorderRadius>
               <div dir={dir}>
                 {!hidden && filter && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>}
                 {topbar}

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.7",
+  "version": "7.0.9",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -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/test-runner": "^0.19.1",
-    "@storybook/theming": "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.20.0",
+    "@storybook/theming": "8.4.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -121,22 +121,22 @@
     "@types/sinon": "^17.0.3",
     "@types/sinon-chai": "^4.0.0",
     "@types/webpack-env": "^1.18.5",
-    "@vitejs/plugin-react": "^4.3.3",
-    "@vitest/eslint-plugin": "^1.1.10",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/eslint-plugin": "^1.1.12",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.14.0",
     "axe-playwright": "^2.0.3",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001680",
+    "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",
@@ -160,26 +160,26 @@
     "markdown-it": "^14.1.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.1",
     "raw-loader": "^4.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-test-renderer": "^18.3.1",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.27.2",
+    "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",
-    "stylelint": "^16.10.0",
+    "storybook": "8.4.5",
+    "stylelint": "^16.11.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",
-    "vitest": "^2.1.5",
+    "typescript-eslint": "^8.16.0",
+    "vitest": "^2.1.6",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
     "webpack": "^5.96.1",
@@ -209,11 +209,11 @@
     "@babel/core": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^5.2.0",
+    "@jetbrains/icons": "^5.3.0",
     "@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",