@jetbrains/ring-ui 6.0.38 → 6.0.40

package/components/checkbox/checkbox.d.ts

@@ -42,5 +42,6 @@ export default class Checkbox extends PureComponent<CheckboxProps> {
     componentDidUpdate(prevProps: CheckboxProps): void;
     input?: HTMLInputElement | null;
     inputRef: (el: HTMLInputElement | null) => void;
+    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: HTMLInputElement | null) => void>;
     render(): import("react").JSX.Element;
 }

package/components/checkbox/checkbox.js

@@ -5,7 +5,7 @@ import checkmarkIcon from '@jetbrains/icons/checkmark-12px';
 import minusIcon from '@jetbrains/icons/remove-12px';
 import Icon from '../icon/icon';
 import { refObject } from '../global/prop-types';
-import composeRefs from '../global/composeRefs';
+import { createComposedRef } from '../global/composeRefs';
 import ControlHelp from '../control-help/control-help';
 import styles from './checkbox.css';
 /**
@@ -55,6 +55,7 @@ export default class Checkbox extends PureComponent {
         }
         this.input = el;
     };
+    composedInputRef = createComposedRef();
     render() {
         const { children, label, className, containerClassName, containerStyle, cellClassName, labelClassName, indeterminate, inputRef, help, ...restProps } = this.props;
         const classes = classNames(styles.input, className);
@@ -62,7 +63,7 @@ export default class Checkbox extends PureComponent {
         const cellClasses = classNames(styles.cell, cellClassName);
         const labelClasses = classNames(styles.label, labelClassName);
         return (<label className={containerClasses} style={containerStyle} data-test="ring-checkbox">
-        <input {...restProps} data-checked={restProps.checked} ref={composeRefs(this.inputRef, inputRef)} type="checkbox" className={classes}/>
+        <input {...restProps} data-checked={restProps.checked} ref={this.composedInputRef(this.inputRef, inputRef)} type="checkbox" className={classes}/>
         <div className={styles.cellWrapper}>
           <span className={cellClasses}>
             <Icon glyph={checkmarkIcon} className={styles.check}/>

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

@@ -35,6 +35,7 @@ export default class DateInput extends React.PureComponent<DateInputProps> {
         onClear: PropTypes.Requireable<(...args: any[]) => any>;
         locale: PropTypes.Requireable<object>;
     };
+    componentDidMount(): void;
     componentDidUpdate(prevProps: DateInputProps): void;
     static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
     context: React.ContextType<typeof DateInput.contextType>;

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

@@ -26,6 +26,9 @@ export default class DateInput extends React.PureComponent {
         onClear: PropTypes.func,
         locale: PropTypes.object
     };
+    componentDidMount() {
+        this.updateInput(this.props);
+    }
     componentDidUpdate(prevProps) {
         const { text, active } = this.props;
         if (text !== prevProps.text || active !== prevProps.active) {
@@ -36,7 +39,6 @@ export default class DateInput extends React.PureComponent {
     input;
     inputRef = (el) => {
         this.input = el;
-        this.updateInput(this.props);
     };
     updateInput({ text, active }) {
         const el = this.input;

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

@@ -28,7 +28,7 @@ const PopupComponent = ({ hidden = false, className, popupRef, onClear, datePopu
         Popup.PopupProps.Directions.BOTTOM_LEFT,
         Popup.PopupProps.Directions.TOP_LEFT,
         Popup.PopupProps.Directions.TOP_RIGHT
-    ]} {...restProps}>
+    ]} {...restProps} trapFocus>
     <DatePopup onClear={onClear} {...datePopupProps} onComplete={onComplete}/>
   </Popup>);
 PopupComponent.propTypes = {

package/components/global/composeRefs.d.ts

@@ -1,3 +1,5 @@
 import { Ref } from 'react';
-export default function composeRefs<T>(...refs: (Ref<T> | undefined)[]): (value: T | null) => void;
+declare function composeRefs<T>(...refs: (Ref<T> | undefined)[]): (value: T | null) => void;
+declare const _default: typeof composeRefs;
+export default _default;
 export declare function createComposedRef<T>(): import("memoize-one").MemoizedFn<(...refs: (Ref<T> | undefined)[]) => (value: T | null) => void>;

package/components/global/composeRefs.js

@@ -1,5 +1,6 @@
 import memoizeOne from 'memoize-one';
-export default function composeRefs(...refs) {
+import deprecate from 'util-deprecate';
+function composeRefs(...refs) {
     return (value) => refs.forEach(ref => {
         if (typeof ref === 'function') {
             ref(value);
@@ -9,6 +10,8 @@ export default function composeRefs(...refs) {
         }
     });
 }
+// TODO remove export in 7.0, composeRefs should be used only in createComposedRef and in useComposedRefs in the future
+export default deprecate(composeRefs, 'composeRefs is deprecated and will be removed in 7.0. Use createComposedRef instead.');
 export function createComposedRef() {
     return memoizeOne((composeRefs));
 }

package/components/global/focus-sensor-hoc.js

@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { refObject } from './prop-types';
-import composeRefs from './composeRefs';
+import { createComposedRef } from './composeRefs';
 function extractPropTypes({ propTypes }) {
     if (propTypes == null) {
         return propTypes;
@@ -46,6 +46,7 @@ export default function focusSensorHOC(ComposedComponent) {
                 this.node = node;
             }
         };
+        composedRef = createComposedRef();
         onFocusCapture = ({ target }) => {
             if (this._skipNextCapture) {
                 this._skipNextCapture = false;
@@ -79,7 +80,7 @@ export default function focusSensorHOC(ComposedComponent) {
         };
         render() {
             const { autofocus, focused, onFocus, onBlur, innerRef, scrollOnTableFocus, ...rest } = this.props;
-            return (<ComposedComponent {...rest} innerRef={composeRefs(innerRef, this.onRefUpdate)} focused={this.state.focused} onFocusReset={this.onFocusReset} onFocusRestore={this.onFocusRestore}/>);
+            return (<ComposedComponent {...rest} innerRef={this.composedRef(innerRef, this.onRefUpdate)} focused={this.state.focused} onFocusReset={this.onFocusReset} onFocusRestore={this.onFocusRestore}/>);
         }
     }
     FocusSensor.propTypes = {

package/components/global/rerender-hoc.js

@@ -1,10 +1,11 @@
 import { Component, forwardRef } from 'react';
-import composeRefs from './composeRefs';
+import { createComposedRef } from './composeRefs';
 export default function rerenderHOC(ComposedComponent) {
     class Rerenderer extends Component {
         state = this.props.props;
+        composedRef = createComposedRef();
         render() {
-            const ref = composeRefs(this.props.forwardedRef);
+            const ref = this.composedRef(this.props.forwardedRef);
             return (<ComposedComponent {...this.state} ref={instance => ref(instance != null ? { ...instance, rerender: this.setState.bind(this) } : null)}/>);
         }
     }

package/components/select/select.d.ts

@@ -259,6 +259,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     private _getAvatar;
     filter?: HTMLInputElement | null;
     filterRef: (el: HTMLInputElement | null) => void;
+    composedFilterRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: HTMLInputElement | null) => void>;
     getShortcutsMap(): {
         enter: () => true | undefined;
         esc: (event: KeyboardEvent) => boolean | undefined;

package/components/select/select.js

@@ -19,7 +19,7 @@ import rerenderHOC from '../global/rerender-hoc';
 import fuzzyHighlight from '../global/fuzzy-highlight';
 import memoize from '../global/memoize';
 import { I18nContext } from '../i18n/i18n-context';
-import composeRefs from '../global/composeRefs';
+import { createComposedRef } from '../global/composeRefs';
 import { refObject } from '../global/prop-types';
 import { isArray } from '../global/typescript-utils';
 import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
@@ -777,6 +777,7 @@ export default class Select extends Component {
     filterRef = (el) => {
         this.filter = el;
     };
+    composedFilterRef = createComposedRef();
     getShortcutsMap() {
         return {
             enter: this._onEnter,
@@ -815,7 +816,7 @@ export default class Select extends Component {
             case Type.INPUT: return (<>
           <div ref={this.nodeRef} className={classNames(classes, styles.inputMode)} data-test={dataTests('ring-select', dataTest)}>
             {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
-            <Input {...ariaProps} height={this.props.height} autoComplete="off" id={this.props.id} onClick={this._clickHandler} inputRef={composeRefs(this.filterRef, this.props.filterRef)} disabled={this.props.disabled} value={this.state.filterValue} borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS} style={style} size={Size.FULL} onChange={this._filterChangeHandler} onFocus={this._focusHandler} onBlur={this._blurHandler} 
+            <Input {...ariaProps} height={this.props.height} autoComplete="off" id={this.props.id} onClick={this._clickHandler} inputRef={this.composedFilterRef(this.filterRef, this.props.filterRef)} disabled={this.props.disabled} value={this.state.filterValue} borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS} style={style} size={Size.FULL} onChange={this._filterChangeHandler} onFocus={this._focusHandler} onBlur={this._blurHandler} 
             // Input with error style without description
             error={this.props.error != null ? '' : null} label={this.props.type === Type.INPUT ? this._getLabel() : null} placeholder={this.props.inputPlaceholder} onKeyDown={this.props.onKeyDown} data-test="ring-select__focus" enableShortcuts={shortcutsEnabled
                     ? Object.keys({

package/components/select/select__popup.d.ts

@@ -126,6 +126,7 @@ export default class SelectPopup<T = unknown> extends PureComponent<SelectPopupP
     list?: List<T> | null;
     listRef: (el: List<T> | null) => void;
     filterRef: (el: HTMLInputElement | null) => void;
+    composedFilterRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: HTMLInputElement | null) => void>;
     shortcutsScope: string;
     shortcutsMap: {
         tab: (event: Event) => void;

package/components/select/select__popup.js

@@ -24,7 +24,7 @@ import Button from '../button/button';
 import Text from '../text/text';
 import { ControlsHeight } from '../global/controls-height';
 import { refObject } from '../global/prop-types';
-import composeRefs from '../global/composeRefs';
+import { createComposedRef } from '../global/composeRefs';
 import { DEFAULT_DIRECTIONS } from '../popup/popup.consts';
 import SelectFilter from './select__filter';
 import styles from './select-popup.css';
@@ -186,7 +186,7 @@ export default class SelectPopup extends PureComponent {
         if (this.props.filter || this.props.tags) {
             return (<div className={styles.filterWrapper} data-test="ring-select-popup-filter">
           {!this.props.tags && (<Icon glyph={this.props.filterIcon ?? searchIcon} className={styles.filterIcon} data-test-custom="ring-select-popup-filter-icon"/>)}
-          <FilterWithShortcuts rgShortcutsOptions={this.state.popupFilterShortcutsOptions} rgShortcutsMap={this.popupFilterShortcutsMap} value={this.props.filterValue} inputRef={composeRefs(this.filterRef, this.props.filterRef)} onBlur={this.popupFilterOnBlur} onFocus={this.onFilterFocus} className="ring-js-shortcuts" inputClassName={classNames({ [styles.filterWithTagsInput]: this.props.tags })} placeholder={typeof this.props.filter === 'object'
+          <FilterWithShortcuts rgShortcutsOptions={this.state.popupFilterShortcutsOptions} rgShortcutsMap={this.popupFilterShortcutsMap} value={this.props.filterValue} inputRef={this.composedFilterRef(this.filterRef, this.props.filterRef)} onBlur={this.popupFilterOnBlur} onFocus={this.onFilterFocus} className="ring-js-shortcuts" inputClassName={classNames({ [styles.filterWithTagsInput]: this.props.tags })} placeholder={typeof this.props.filter === 'object'
                     ? this.props.filter.placeholder
                     : undefined} height={this.props.tags ? ControlsHeight.S : ControlsHeight.L} onChange={this.props.onFilter} onClick={this.onClickHandler} onClear={this.props.tags ? undefined : this.props.onClear} data-test-custom="ring-select-popup-filter-input" listId={this.props.listId} enableShortcuts={Object.keys(this.popupFilterShortcutsMap)}/>
         </div>);
@@ -309,6 +309,7 @@ export default class SelectPopup extends PureComponent {
         this.filter = el;
         this.caret = el && new Caret(el);
     };
+    composedFilterRef = createComposedRef();
     shortcutsScope = getUID('select-popup-');
     shortcutsMap = {
         tab: this.tabPress

package/components/tab-trap/tab-trap.d.ts

@@ -1,44 +1,18 @@
-import { Component, ReactNode, HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import * as React from 'react';
-import PropTypes from 'prop-types';
 export declare const FOCUSABLE_ELEMENTS = "input, button, select, textarea, a[href], *[tabindex]:not([data-trap-button]):not([data-scrollable-container])";
 export interface TabTrapProps extends HTMLAttributes<HTMLElement> {
     children: ReactNode;
-    trapDisabled: boolean;
-    autoFocusFirst: boolean;
-    focusBackOnClose: boolean;
-    focusBackOnExit: boolean;
+    trapDisabled?: boolean;
+    autoFocusFirst?: boolean;
+    focusBackOnClose?: boolean;
+    focusBackOnExit?: boolean;
 }
 /**
  * @name TabTrap
  */
-export default class TabTrap extends Component<TabTrapProps> {
-    static propTypes: {
-        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        trapDisabled: PropTypes.Requireable<boolean>;
-        autoFocusFirst: PropTypes.Requireable<boolean>;
-        focusBackOnClose: PropTypes.Requireable<boolean>;
-        focusBackOnExit: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: {
-        trapDisabled: boolean;
-        autoFocusFirst: boolean;
-        focusBackOnClose: boolean;
-        focusBackOnExit: boolean;
-    };
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    previousFocusedNode?: Element | null;
-    trapWithoutFocus?: boolean;
-    restoreFocus: () => void;
-    node?: HTMLElement | null;
-    containerRef: (node: HTMLElement | null) => void;
-    focusElement: (first?: boolean) => void;
-    focusFirst: () => void;
-    focusLast: () => void;
-    focusLastIfEnabled: (event: React.FocusEvent) => void;
-    handleBlurIfWithoutFocus: (event: React.FocusEvent) => void;
-    trapButtonNode?: HTMLElement | null;
-    trapButtonRef: (node: HTMLElement | null) => void;
-    render(): React.JSX.Element;
+interface TabTrap {
+    node: HTMLElement | null;
 }
+declare const TabTrap: React.ForwardRefExoticComponent<TabTrapProps & React.RefAttributes<TabTrap>>;
+export default TabTrap;

package/components/tab-trap/tab-trap.js

@@ -1,61 +1,74 @@
-import { Component } from 'react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isNodeInVisiblePartOfPage } from '../global/dom';
 import styles from './tab-trap.css';
 export const FOCUSABLE_ELEMENTS = 'input, button, select, textarea, a[href], *[tabindex]:not([data-trap-button]):not([data-scrollable-container])';
-/**
- * @name TabTrap
- */
-export default class TabTrap extends Component {
-    static propTypes = {
-        children: PropTypes.node.isRequired,
-        trapDisabled: PropTypes.bool,
-        autoFocusFirst: PropTypes.bool,
-        focusBackOnClose: PropTypes.bool,
-        focusBackOnExit: PropTypes.bool
-    };
-    static defaultProps = {
-        trapDisabled: false,
-        autoFocusFirst: true,
-        focusBackOnClose: true,
-        focusBackOnExit: false
-    };
-    componentDidMount() {
-        this.previousFocusedNode = document.activeElement;
-        if (this.props.autoFocusFirst) {
-            this.focusFirst();
-        }
-        else if (!this.props.trapDisabled &&
-            (!this.node || !this.node.contains(this.previousFocusedNode))) {
-            this.trapWithoutFocus = true;
-            this.trapButtonNode?.focus();
-        }
+// eslint-disable-next-line @typescript-eslint/no-shadow
+const TabTrap = forwardRef(function TabTrap({ children, trapDisabled = false, autoFocusFirst = true, focusBackOnClose = true, focusBackOnExit = false, ...restProps }, ref) {
+    const nodeRef = useRef(null);
+    const trapButtonNodeRef = useRef(null);
+    const previousFocusedNodeRef = useRef(null);
+    const trapWithoutFocusRef = useRef(false);
+    const mountedRef = useRef(false);
+    // It's the same approach as in focus-trap-react:
+    // https://github.com/focus-trap/focus-trap-react/commit/3b22fca9eebeb883edc89548850fe5a5b9d6d50e
+    // We can't do it in useEffect because it's too late, some children might have already
+    // focused itself.
+    if (previousFocusedNodeRef.current === null) {
+        previousFocusedNodeRef.current = document.activeElement;
     }
-    componentWillUnmount() {
-        if (this.props.focusBackOnClose) {
-            this.restoreFocus();
+    useImperativeHandle(ref, () => ({ node: nodeRef.current }), []);
+    const focusFirst = useCallback(() => focusElement(true), []);
+    const focusLast = () => focusElement(false);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    useEffect(() => {
+        if (autoFocusFirst) {
+            focusFirst();
         }
-    }
-    previousFocusedNode;
-    trapWithoutFocus;
-    restoreFocus = () => {
-        const { previousFocusedNode } = this;
+        else if (!trapDisabled) {
+            const previousFocusedElementIsInContainer = previousFocusedNodeRef.current &&
+                nodeRef.current?.contains(previousFocusedNodeRef.current);
+            // The component wrapped in TabTrap can already have a focused element (e.g. Date Picker),
+            // so we need to check if it does. If so, we don't need to focus anything.
+            const currentlyFocusedElementIsInContainer = nodeRef.current?.
+                contains(document.activeElement);
+            if (!nodeRef.current ||
+                (!previousFocusedElementIsInContainer && !currentlyFocusedElementIsInContainer)) {
+                trapWithoutFocusRef.current = true;
+                trapButtonNodeRef.current?.focus();
+            }
+        }
+        return () => {
+            if (focusBackOnClose) {
+                restoreFocus();
+            }
+        };
+    }, [autoFocusFirst, trapDisabled, focusBackOnClose, focusFirst]);
+    function restoreFocus() {
+        const previousFocusedNode = previousFocusedNodeRef.current;
         if (previousFocusedNode instanceof HTMLElement &&
             previousFocusedNode.focus &&
             isNodeInVisiblePartOfPage(previousFocusedNode)) {
-            previousFocusedNode.focus({ preventScroll: true });
-        }
-    };
-    node;
-    containerRef = (node) => {
-        if (!node) {
-            return;
+            // If no delay is added, restoring focus caused by pressing Enter will trigger
+            // the onClick event on the previousFocusedNode, e.g.
+            // https://youtrack.jetbrains.com/issue/RG-2450/Anchor-should-be-focused-after-closing-datepicker#focus=Comments-27-10044234.0-0.
+            setTimeout(() => {
+                // This is to prevent the focus from being restored the first time
+                // componentWillUnmount is called in StrictMode.
+                if (!mountedRef.current) {
+                    previousFocusedNode.focus({ preventScroll: true });
+                }
+            });
         }
-        this.node = node;
-    };
-    focusElement = (first = true) => {
-        const { node } = this;
+    }
+    function focusElement(first = true) {
+        const node = nodeRef.current;
         if (!node) {
             return;
         }
@@ -65,62 +78,58 @@ export default class TabTrap extends Component {
         if (toBeFocused) {
             toBeFocused.focus();
         }
-    };
-    focusFirst = () => this.focusElement(true);
-    focusLast = () => this.focusElement(false);
-    focusLastIfEnabled = (event) => {
-        if (this.trapWithoutFocus) {
+    }
+    function focusLastIfEnabled(event) {
+        if (trapWithoutFocusRef.current) {
             return;
         }
-        if (this.props.focusBackOnExit) {
+        if (focusBackOnExit) {
             const prevFocused = event.nativeEvent.relatedTarget;
-            if (prevFocused != null && this.node != null && prevFocused instanceof Element &&
-                this.node.contains(prevFocused)) {
-                this.restoreFocus();
+            if (prevFocused != null && nodeRef.current != null && prevFocused instanceof Element &&
+                nodeRef.current.contains(prevFocused)) {
+                restoreFocus();
             }
         }
         else {
-            this.focusLast();
+            focusLast();
         }
-    };
-    handleBlurIfWithoutFocus = (event) => {
-        if (!this.trapWithoutFocus) {
+    }
+    function handleBlurIfWithoutFocus(event) {
+        if (!trapWithoutFocusRef.current) {
             return;
         }
-        this.trapWithoutFocus = false;
+        trapWithoutFocusRef.current = false;
         const newFocused = event.nativeEvent.relatedTarget;
         if (!newFocused) {
             return;
         }
-        if (newFocused instanceof Element && this.node?.contains(newFocused)) {
-            return;
-        }
-        this.focusLast();
-    };
-    trapButtonNode;
-    trapButtonRef = (node) => {
-        if (!node) {
+        if (newFocused instanceof Element && nodeRef.current?.contains(newFocused)) {
             return;
         }
-        this.trapButtonNode = node;
-    };
-    render() {
-        const { children, trapDisabled, autoFocusFirst, focusBackOnClose, focusBackOnExit, ...restProps } = this.props;
-        if (trapDisabled) {
-            return (<div ref={this.containerRef} {...restProps}>
-          {children}
-        </div>);
-        }
-        return (<div ref={this.containerRef} {...restProps}>
-        <div 
-        // It never actually stays focused
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0} ref={this.trapButtonRef} className={styles.trapButton} onFocus={this.focusLastIfEnabled} onBlur={this.handleBlurIfWithoutFocus} data-trap-button/>
+        focusLast();
+    }
+    if (trapDisabled) {
+        return (<div ref={nodeRef} {...restProps}>
         {children}
-        <div 
-        // It never actually stays focused
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0} onFocus={focusBackOnExit ? this.restoreFocus : this.focusFirst} data-trap-button/>
       </div>);
     }
-}
+    return (<div ref={nodeRef} {...restProps}>
+      <div 
+    // It never actually stays focused
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex={0} ref={trapButtonNodeRef} className={styles.trapButton} onFocus={focusLastIfEnabled} onBlur={handleBlurIfWithoutFocus} data-trap-button/>
+      {children}
+      <div 
+    // It never actually stays focused
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex={0} onFocus={focusBackOnExit ? restoreFocus : focusFirst} data-trap-button/>
+    </div>);
+});
+TabTrap.propTypes = {
+    children: PropTypes.node.isRequired,
+    trapDisabled: PropTypes.bool,
+    autoFocusFirst: PropTypes.bool,
+    focusBackOnClose: PropTypes.bool,
+    focusBackOnExit: PropTypes.bool
+};
+export default TabTrap;

package/components/table/row.d.ts

@@ -56,6 +56,7 @@ export default class Row<T extends SelectionItem> extends PureComponent<RowProps
     onDoubleClick: () => void;
     row?: HTMLElement | null;
     rowRef: (el: HTMLElement | null) => void;
+    composedRowRef: import("memoize-one").MemoizedFn<(...refs: (React.Ref<HTMLElement> | undefined)[]) => (value: HTMLElement | null) => void>;
     render(): React.JSX.Element;
 }
 export type RowAttrs<T extends SelectionItem> = JSX.LibraryManagedAttributes<typeof Row, RowProps<T>>;

package/components/table/row.js

@@ -10,7 +10,7 @@ import Button from '../button/button';
 import Tooltip from '../tooltip/tooltip';
 import dataTests from '../global/data-tests';
 import getUID from '../global/get-uid';
-import composeRefs from '../global/composeRefs';
+import { createComposedRef } from '../global/composeRefs';
 import Cell from './cell';
 import style from './table.css';
 const DragHandle = ({ alwaysShowDragHandle, dragHandleTitle = 'Drag to reorder' }) => {
@@ -73,6 +73,7 @@ export default class Row extends PureComponent {
     rowRef = (el) => {
         this.row = el;
     };
+    composedRowRef = createComposedRef();
     render() {
         const { item, columns: columnProps, selectable, selected, showFocus, draggable, alwaysShowDragHandle, dragHandleTitle, level, collapsible, parentCollapsible, collapsed, maxColSpan, onCollapse, onExpand, showDisabledSelection, onSelect, checkboxTooltip, innerRef, focused, autofocus, onFocusReset, onFocusRestore, onHover, className, metaColumnClassName, 'data-test': dataTest, ...restProps } = this.props;
         const classes = classNames(className, {
@@ -127,7 +128,7 @@ export default class Row extends PureComponent {
           {value}
         </Cell>);
         });
-        return (<tr id={this.id} ref={composeRefs(this.rowRef, innerRef)} className={classes} tabIndex={0} data-test={dataTests('ring-table-row', dataTest)} {...testAttrs} {...restProps} onMouseMove={this.onMouseEnter} onClick={this.onClick} onDoubleClick={this.onDoubleClick}>{cells}</tr>);
+        return (<tr id={this.id} ref={this.composedRowRef(this.rowRef, innerRef)} className={classes} tabIndex={0} data-test={dataTests('ring-table-row', dataTest)} {...testAttrs} {...restProps} onMouseMove={this.onMouseEnter} onClick={this.onClick} onDoubleClick={this.onDoubleClick}>{cells}</tr>);
     }
 }
 Row.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "6.0.38",
+  "version": "6.0.40",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -45,9 +45,9 @@
     "screenshots-test-ci": "npm --prefix packages/screenshots run test-ci",
     "screenshots-gather": "npm --prefix packages/screenshots run gather",
     "build-stories": "storybook build --quiet -c .storybook -o storybook-dist",
-    "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy '**/*' '!**/*.ts' '!**/*.tsx' '!**/__mocks__/**' ../components --parents --cwd=src/",
+    "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy './**/*' '!**/*.ts' '!**/*.tsx' '!**/__mocks__/**' ../components --parents --cwd=src/",
     "build": "./node_modules/.bin/rollup -c --bundleConfigAsCjs",
-    "postbuild": "cpy '**/*.d.ts' ../dist --parents --cwd=components/",
+    "postbuild": "cpy './**/*.d.ts' ../dist --parents --cwd=components/",
     "serve": "http-server storybook-dist/ -p 9999",
     "start": "storybook dev -p 9999",
     "storybook-debug": "node --inspect-brk node_modules/@storybook/react/bin -p 9999",
@@ -78,7 +78,7 @@
   "devDependencies": {
     "@babel/cli": "^7.24.7",
     "@babel/eslint-parser": "^7.24.7",
-    "@csstools/css-parser-algorithms": "^2.6.1",
+    "@csstools/css-parser-algorithms": "^2.7.0",
     "@csstools/stylelint-no-at-nest-rule": "^2.0.0",
     "@jetbrains/eslint-config": "^5.4.2",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
@@ -112,21 +112,21 @@
     "@types/sinon": "^17.0.3",
     "@types/sinon-chai": "^3.2.12",
     "@types/webpack-env": "^1.18.5",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.12.0",
     "axe-playwright": "^2.0.1",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001638",
+    "caniuse-lite": "^1.0.30001639",
     "chai": "^5.1.1",
     "chai-as-promised": "^8.0.0",
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^1.0.0-rc.12",
     "core-js": "^3.37.1",
-    "cpy-cli": "^3.1.1",
+    "cpy-cli": "^5.0.0",
     "enzyme": "^3.11.0",
     "eslint": "^8.57.0",
     "eslint-import-resolver-webpack": "^0.13.8",
@@ -134,6 +134,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
     "events": "^3.3.0",
     "glob": "^10.4.2",
@@ -167,7 +168,7 @@
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.10",
-    "typescript": "~5.5.2",
+    "typescript": "~5.5.3",
     "vitest": "^1.6.0",
     "vitest-teamcity-reporter": "^0.3.0",
     "wallaby-webpack": "^3.9.16",
@@ -219,20 +220,19 @@
     "deep-equal": "^2.2.3",
     "element-resize-detector": "^1.2.4",
     "es6-error": "^4.1.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
     "fastdom": "^1.0.12",
     "file-loader": "^6.2.0",
     "focus-trap": "^7.5.4",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "postcss-calc": "^10.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.1.1",
     "postcss-modules-values-replace": "^4.2.0",
-    "postcss-preset-env": "^9.5.14",
+    "postcss-preset-env": "^9.5.15",
     "prop-types": "^15.8.1",
     "react-movable": "^3.2.0",
     "react-virtualized": "^9.22.5",