@jetbrains/ring-ui 7.0.85 → 7.0.86

package/components/input/input.d.ts

@@ -21,6 +21,7 @@ export interface InputBaseProps {
     enableShortcuts?: boolean | string[];
     children?: string | undefined;
     inputClassName?: string | null | undefined;
+    clearButtonClassName?: string | null | undefined;
     label?: ReactNode;
     labelType?: LabelType;
     error?: ReactNode | null | undefined;

package/components/input/input.js

@@ -129,7 +129,7 @@ export class Input extends PureComponent {
               {icon && <Icon glyph={icon} className={styles.icon}/>}
               {beforeInput}
               {multiline ? (<textarea onChange={this.handleTextareaChange} rows={1} {...commonProps} {...restProps}/>) : (<input onChange={this.handleInputChange} {...commonProps} {...restProps}/>)}
-              {clearable && !disabled && (<Button title={translations?.clear ?? translate('clear')} data-test='ring-input-clear' className={styles.clear} icon={closeIcon} onClick={this.clear}/>)}
+              {clearable && !disabled && (<Button title={translations?.clear ?? translate('clear')} data-test='ring-input-clear' className={classNames(styles.clear, this.props.clearButtonClassName)} icon={closeIcon} onClick={this.clear}/>)}
               {afterInput}
             </div>
             {error ? (<div className={styles.errorText}>{error}</div>) : (help && <ControlHelp className={styles.helpText}>{help}</ControlHelp>)}

package/components/list/consts.d.ts

@@ -77,5 +77,9 @@ export interface ListDataItemAddProps {
     onCheckboxChange: (e: React.ChangeEvent) => void;
     isFirst?: boolean;
     'data-test'?: string | null | undefined;
+    itemClassName?: string | null | undefined;
+    labelClassName?: string | null | undefined;
+    descriptionClassName?: string | null | undefined;
+    detailsClassName?: string | null | undefined;
 }
 export type ListDataItemProps<T = unknown> = Omit<ListDataItem<T>, keyof ListDataItemAddProps> & ListDataItemAddProps;

package/components/list/list-item.js

@@ -22,7 +22,7 @@ export default class ListItem extends PureComponent {
     _isString = (val) => typeof val === 'string' || val instanceof String;
     // eslint-disable-next-line complexity
     render() {
-        const { disabled, checkbox, avatar, subavatar, glyph, icon, rightGlyph, description, label, title, details, hover, level, tabIndex, onClick, onCheckboxChange, onMouseOver, onMouseDown, onMouseUp, rightNodes, leftNodes, showGeneratedAvatar, username, labelWrapper, rgItemType, scrolling, 'data-test': dataTest, className, url, LinkComponent, compact, hoverClassName, children, ...restLinkProps // TODO use an allow list in 8.0
+        const { disabled, checkbox, avatar, subavatar, glyph, icon, rightGlyph, description, label, title, details, hover, level, tabIndex, onClick, onCheckboxChange, onMouseOver, onMouseDown, onMouseUp, rightNodes, leftNodes, showGeneratedAvatar, username, labelWrapper, rgItemType, scrolling, 'data-test': dataTest, className, url, LinkComponent, compact, hoverClassName, children, itemClassName, labelClassName, descriptionClassName, detailsClassName, ...restLinkProps // TODO use an allow list in 8.0
          } = this.props;
         const checkable = checkbox !== undefined;
         const shouldShowGeneratedAvatar = showGeneratedAvatar && !!username;
@@ -32,7 +32,7 @@ export default class ListItem extends PureComponent {
         const detailsClasses = classNames({
             [styles.details]: details,
             [styles.padded]: icon !== undefined || checkbox !== undefined || glyph !== undefined,
-        });
+        }, detailsClassName);
         const style = {
             paddingLeft: `${(Number(level) || 0) * RING_UNIT + DEFAULT_PADDING + (showCheckbox ? CHECKBOX_WIDTH : 0)}px`,
         };
@@ -53,7 +53,7 @@ export default class ListItem extends PureComponent {
             'ring-list-item-selected': checkbox,
             'ring-list-link': isLink,
         }, dataTest);
-        const labelElement = (<span className={styles.label} title={computedTitle} data-test='ring-list-item-label'>
+        const labelElement = (<span className={classNames(styles.label, labelClassName)} title={computedTitle} data-test='ring-list-item-label'>
         {label ?? children}
       </span>);
         const commonProps = {
@@ -77,7 +77,7 @@ export default class ListItem extends PureComponent {
 
             {labelWrapper ? labelWrapper(labelElement) : labelElement}
 
-            {description && (<span className={styles.description} data-test='ring-list-item-description'>
+            {description && (<span className={classNames(styles.description, descriptionClassName)} data-test='ring-list-item-description'>
                 {description}
               </span>)}
 
@@ -92,7 +92,7 @@ export default class ListItem extends PureComponent {
         </>),
         };
         const LinkComponentToUse = LinkComponent ? linkHOC(LinkComponent) : Link;
-        return (<div className={styles.itemContainer} data-test={combinedDataTest}>
+        return (<div className={classNames(styles.itemContainer, itemClassName)} data-test={combinedDataTest}>
         {showCheckbox && (<div className={styles.checkboxContainer}>
             <Checkbox aria-labelledby={this.id} checked={checkbox} disabled={disabled} onChange={onCheckboxChange} onClick={this.stopBubbling}/>
           </div>)}

package/components/list/list.d.ts

@@ -34,6 +34,10 @@ export interface ListProps<T = unknown> {
     ariaLabel: string;
     id?: string | undefined;
     className?: string | null | undefined;
+    itemClassName?: string | null | undefined;
+    labelClassName?: string | null | undefined;
+    descriptionClassName?: string | null | undefined;
+    detailsClassName?: string | null | undefined;
     hint?: ReactNode;
     hintOnSelection?: string | null | undefined;
     maxHeight?: number | null | undefined;

package/components/list/list.js

@@ -399,6 +399,11 @@ export default class List extends Component {
             if (itemProps.compact === null || itemProps.compact === undefined) {
                 itemProps.compact = this.props.compact;
             }
+            // Add global className props for sub-elements
+            itemProps.itemClassName = this.props.itemClassName;
+            itemProps.labelClassName = this.props.labelClassName;
+            itemProps.descriptionClassName = this.props.descriptionClassName;
+            itemProps.detailsClassName = this.props.detailsClassName;
             let ItemComponent;
             const isFirst = index === 1;
             switch (itemProps.rgItemType) {

package/components/query-assist/query-assist.d.ts

@@ -81,6 +81,14 @@ export interface QueryAssistProps {
      * Additional class for the input
      */
     inputClassName?: string | null | undefined;
+    /**
+     * Additional class for the search button/icon
+     */
+    searchButtonClassName?: string | null | undefined;
+    /**
+     * Additional class for the clear icon
+     */
+    clearIconClassName?: string | null | undefined;
     /**
      * Data source function
      */

package/components/query-assist/query-assist.js

@@ -679,7 +679,7 @@ export default class QueryAssist extends Component {
         const renderClear = this.props.clear && !!this.state.query;
         if (renderClear) {
             actions.push(<I18nContext.Consumer key={'clearAction'}>
-          {({ translate }) => (<Button icon={closeIcon} className={styles.clear} title={this.props.translations?.clearTitle ?? translate('clearTitle')} ref={this.clearRef} onClick={this.clearQuery} data-test='query-assist-clear-icon'/>)}
+          {({ translate }) => (<Button icon={closeIcon} className={classNames(styles.clear, this.props.clearIconClassName)} title={this.props.translations?.clearTitle ?? translate('clearTitle')} ref={this.clearRef} onClick={this.clearQuery} data-test='query-assist-clear-icon'/>)}
         </I18nContext.Consumer>);
         }
         return actions;
@@ -712,7 +712,7 @@ export default class QueryAssist extends Component {
           {({ translate }) => (<div data-test={dataTests('ring-query-assist', dataTest)} className={containerClasses} role='presentation' ref={this.nodeRef}>
               {this.state.shortcuts && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>}
 
-              {renderGlass && !huge && (<Icon glyph={searchIcon} className={styles.icon} title={translations?.searchTitle ?? translate('searchTitle')} ref={this.glassRef} data-test='query-assist-search-icon'/>)}
+              {renderGlass && !huge && (<Icon glyph={searchIcon} className={classNames(styles.icon, this.props.searchButtonClassName)} title={translations?.searchTitle ?? translate('searchTitle')} ref={this.glassRef} data-test='query-assist-search-icon'/>)}
 
               {renderLoader && (<div className={classNames(styles.icon, styles.loader, {
                         [styles.loaderOnTheRight]: !glass && !huge,
@@ -738,7 +738,7 @@ export default class QueryAssist extends Component {
               <PopupMenu hidden={!this.state.showPopup} onCloseAttempt={this.closePopup} ref={this.popupRef} anchorElement={this.node} keepMounted attached className={this.props.popupClassName} directions={[PopupMenu.PopupProps.Directions.BOTTOM_RIGHT]} data={useCustomItemRender ? this.state.suggestions : this.renderSuggestions()} data-test='ring-query-assist-popup' hint={this.props.hint} shortcutsMap={this.listShortcutsMap} hintOnSelection={this.props.hintOnSelection} left={this.getPopupOffset(this.state.suggestions)} maxHeight={PopupMenu.PopupProps.MaxHeight.SCREEN} onMouseDown={this.trackPopupMouseState} onMouseUp={this.trackPopupMouseState} onSelect={item => this.handleComplete(item)}/>
 
               {glass && huge && (<div className={styles.rightSearchButton} data-test='query-assist-search-button'>
-                  <Icon glyph={searchIcon} className={styles.rightSearchIcon} title={translations?.searchTitle ?? translate('searchTitle')} onClick={this.handleApply} ref={this.glassRef} data-test='query-assist-search-icon'/>
+                  <Icon glyph={searchIcon} className={classNames(styles.rightSearchIcon, this.props.searchButtonClassName)} title={translations?.searchTitle ?? translate('searchTitle')} onClick={this.handleApply} ref={this.glassRef} data-test='query-assist-search-icon'/>
                 </div>)}
             </div>)}
         </I18nContext.Consumer>

package/components/select/select.d.ts

@@ -44,7 +44,7 @@ export interface CustomAnchorProps {
     wrapperProps: HTMLAttributes<HTMLElement> & DataTestProps & {
         ref: RefCallback<HTMLElement>;
     };
-    buttonProps: Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'children'> & {
+    buttonProps: Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'children' | 'className'> & {
         onClick: () => void;
     } & DataTestProps;
     popup: ReactNode;
@@ -94,6 +94,7 @@ export interface BaseSelectProps<T = unknown> {
     targetElement?: HTMLElement | null | undefined;
     className?: string | null | undefined;
     buttonClassName?: string | null | undefined;
+    toolbarClassName?: string | null | undefined;
     id?: string | undefined;
     getInitial?: (() => string) | null | undefined;
     minWidth?: number | undefined;

package/components/select/select.js

@@ -484,7 +484,7 @@ export default class Select extends Component {
         }
         return (<div className={classNames({
                 [styles.toolbar]: Boolean(this.state.addButton || renderBottomToolbar),
-            })} data-test='ring-select-toolbar'>
+            }, this.props.toolbarClassName)} data-test='ring-select-toolbar'>
         {renderBottomToolbar && renderBottomToolbar()}
         {this.state.addButton && (<Button inline delayed={delayed} className={classNames(styles.button, styles.buttonSpaced)} onClick={this.addHandler} data-test='ring-select-toolbar-button'>
             {prefix ? `${prefix} ${label}` : label}
@@ -872,6 +872,7 @@ export default class Select extends Component {
                                 disabled: this.props.disabled,
                                 children: this._getPlaceholder(),
                                 'data-test': 'ring-select__focus',
+                                className: this.props.buttonClassName ?? undefined,
                             },
                             popup: this._renderPopup(),
                         })}

package/components/table/header.d.ts

@@ -13,6 +13,7 @@ export interface HeaderProps {
     sortOrder: boolean;
     caption?: string | null | undefined;
     checkboxDisabled?: boolean | undefined;
+    className?: string | null | undefined;
 }
 export default class Header extends PureComponent<HeaderProps> {
     static defaultProps: {

package/components/table/header.js

@@ -40,7 +40,7 @@ export default class Header extends PureComponent {
         return (<thead id={this.id} data-test='ring-table-header' style={{ top: topStickOffset }} className={classNames({
                 [style.tableHead]: true,
                 [style.subHeaderSticky]: sticky,
-            })}>
+            }, this.props.className)}>
         {caption && (<tr data-test='ring-table-header-row'>
             <th className={classNames(style.headerCell, style.caption)} colSpan={regularCells.length + 1} data-test='ring-table-header-cell'>
               {caption}

package/components/table/row-with-focus-sensor.d.ts

@@ -1,14 +1,13 @@
 import { PureComponent } from 'react';
 import { type FocusSensorProps } from '../global/focus-sensor-hoc';
 import Row, { type RowProps } from './row';
-import { type SelectionItem } from './selection';
-export interface RowWithFocusSensorCallbacksProps<T extends SelectionItem> extends Omit<FocusSensorProps<RowProps<T>, HTMLTableRowElement, typeof Row>, 'onFocus'> {
+export interface RowWithFocusSensorCallbacksProps<T extends object> extends Omit<FocusSensorProps<RowProps<T>, HTMLTableRowElement, typeof Row>, 'onFocus'> {
     onFocus?: (item: T) => void;
     onSelect?: (item: T, selected: boolean) => void;
     onCollapse?: (item: T) => void;
     onExpand?: (item: T) => void;
 }
-export default class RowWithFocusSensorCallbacks<T extends SelectionItem> extends PureComponent<RowWithFocusSensorCallbacksProps<T>> {
+export default class RowWithFocusSensorCallbacks<T extends object> extends PureComponent<RowWithFocusSensorCallbacksProps<T>> {
     RowWithFocusSensor: import("react").ComponentClass<FocusSensorProps<RowProps<T>, HTMLDivElement, typeof Row>, any>;
     onFocus: () => void;
     onSelect: (item: T, selected: boolean) => void;

package/components/table/row.d.ts

@@ -2,8 +2,7 @@ import { type HTMLAttributes, PureComponent } from 'react';
 import * as React from 'react';
 import { type FocusSensorAddProps } from '../global/focus-sensor-hoc';
 import { type Column } from './header-cell';
-import { type SelectionItem } from './selection';
-export interface RowProps<T extends SelectionItem> extends Omit<HTMLAttributes<HTMLTableRowElement>, 'onClick' | 'onDoubleClick' | 'onSelect'>, FocusSensorAddProps<HTMLTableRowElement> {
+export interface RowProps<T extends object> extends Omit<HTMLAttributes<HTMLTableRowElement>, 'onClick' | 'onDoubleClick' | 'onSelect'>, FocusSensorAddProps<HTMLTableRowElement> {
     item: T;
     columns: readonly Column<T>[] | ((item: T) => readonly Column<T>[]);
     selectable: boolean;
@@ -27,8 +26,9 @@ export interface RowProps<T extends SelectionItem> extends Omit<HTMLAttributes<H
     autofocus?: boolean | null | undefined;
     'data-test'?: string | null | undefined;
     metaColumnClassName?: string | null | undefined;
+    cellClassName?: string | null | undefined;
 }
-export default class Row<T extends SelectionItem> extends PureComponent<RowProps<T>> {
+export default class Row<T extends object> extends PureComponent<RowProps<T>> {
     static defaultProps: {
         selectable: boolean;
         showFocus: boolean;
@@ -58,4 +58,4 @@ export default class Row<T extends SelectionItem> extends PureComponent<RowProps
     composedRowRef: import("memoize-one").MemoizedFn<(...refs: (React.Ref<HTMLElement> | undefined)[]) => (value: T_1 | null) => void>;
     render(): React.JSX.Element;
 }
-export type RowAttrs<T extends SelectionItem> = React.JSX.LibraryManagedAttributes<typeof Row, RowProps<T>>;
+export type RowAttrs<T extends object> = React.JSX.LibraryManagedAttributes<typeof Row, RowProps<T>>;

package/components/table/row.js

@@ -70,7 +70,7 @@ export default class Row extends PureComponent {
     };
     composedRowRef = createComposedRef();
     render() {
-        const { item, columns: columnProps, selectable, selected, showFocus, draggable, alwaysShowDragHandle, dragHandleTitle, level, collapsible, parentCollapsible, collapsed, onCollapse, onExpand, showDisabledSelection, onSelect, checkboxTooltip, innerRef, focused, autofocus, onFocusReset, onFocusRestore, onHover, className, metaColumnClassName, 'data-test': dataTest, ...restProps } = this.props;
+        const { item, columns: columnProps, selectable, selected, showFocus, draggable, alwaysShowDragHandle, dragHandleTitle, level, collapsible, parentCollapsible, collapsed, onCollapse, onExpand, showDisabledSelection, onSelect, checkboxTooltip, innerRef, focused, autofocus, onFocusReset, onFocusRestore, onHover, className, metaColumnClassName, cellClassName, 'data-test': dataTest, ...restProps } = this.props;
         const classes = classNames(className, {
             [style.row]: true,
             [style.rowFocused]: showFocus,
@@ -107,7 +107,7 @@ export default class Row extends PureComponent {
             const getValue = column.getValue || (() => item[column.id]);
             const getDataTest = column.getDataTest || (() => column.id);
             const value = getValue(item, column);
-            const cellClasses = classNames({ [style.cellRight]: column.rightAlign }, column.className);
+            const cellClasses = classNames({ [style.cellRight]: column.rightAlign }, column.className, cellClassName);
             const showMetaColumn = draggable || selectable || collapsible || showDisabledSelection || !!level;
             return (<Cell colSpan={column.colSpan} key={column.id} className={cellClasses} data-test={getDataTest(item, column)}>
           {index === 0 && showMetaColumn && metaColumn}

package/components/table/selection-shortcuts-hoc.d.ts

@@ -1,18 +1,17 @@
 import { type ComponentClass } from 'react';
 import { type ShortcutsMap } from '../shortcuts/core';
 import type Selection from './selection';
-import type { SelectionItem } from './selection';
-export interface SelectionShortcutsOuterProps<T extends SelectionItem> {
+export interface SelectionShortcutsOuterProps<T extends object> {
     selection: Selection<T>;
     selectable?: boolean | undefined;
     onSelect?: ((selection: Selection<T>) => void) | undefined;
     shortcuts?: ShortcutsMap | undefined;
 }
-export interface SelectionShortcutsAddProps<T extends SelectionItem> {
+export interface SelectionShortcutsAddProps<T extends object> {
     selection: Selection<T>;
     selectable: boolean;
     onSelect: (selection: Selection<T>) => void;
     shortcutsMap: ShortcutsMap;
 }
-export type SelectionShortcutsProps<T extends SelectionItem, P> = Omit<P, keyof SelectionShortcutsAddProps<T>> & SelectionShortcutsOuterProps<T>;
-export default function selectionShortcutsHOC<T extends SelectionItem, P extends SelectionShortcutsAddProps<T>>(ComposedComponent: ComponentClass<P>): ComponentClass<SelectionShortcutsProps<T, P>>;
+export type SelectionShortcutsProps<T extends object, P> = Omit<P, keyof SelectionShortcutsAddProps<T>> & SelectionShortcutsOuterProps<T>;
+export default function selectionShortcutsHOC<T extends object, P extends SelectionShortcutsAddProps<T>>(ComposedComponent: ComponentClass<P>): ComponentClass<SelectionShortcutsProps<T, P>>;

package/components/table/selection.d.ts

@@ -1,7 +1,10 @@
+/**
+ * @deprecated SelectionItem is deprecated. Use your own item type and provide a `getKey` function instead if there is no `id` identifier in your item type.
+ */
 export interface SelectionItem {
     id: string | number;
 }
-export interface TableSelectionConfig<T extends SelectionItem> {
+export interface TableSelectionConfig<T extends object> {
     data?: readonly T[] | undefined;
     selected?: Set<T> | undefined;
     focused?: T | null | undefined;
@@ -14,7 +17,7 @@ export interface CloneWithConfig<T> {
     selected?: Set<T> | readonly T[] | null | undefined;
     focused?: T | null | undefined;
 }
-export default class Selection<T extends SelectionItem> {
+export default class Selection<T extends object> {
     protected _rawData: readonly T[];
     protected _getChildren: (item: T) => readonly T[];
     protected _data: Set<T>;

package/components/table/selection.js

@@ -1,3 +1,6 @@
+/**
+ * @deprecated SelectionItem is deprecated. Use your own item type and provide a `getKey` function instead if there is no `id` identifier in your item type.
+ */
 export default class Selection {
     _rawData;
     _getChildren;
@@ -6,7 +9,14 @@ export default class Selection {
     _focused;
     _getKey;
     _isItemSelectable;
-    constructor({ data = [], selected = new Set(), focused = null, getKey = item => item.id, getChildren = () => [], isItemSelectable = () => true, } = {}) {
+    constructor({ data = [], selected = new Set(), focused = null, getKey = (item) => {
+        // Default behavior stays backward compatible: use item's "id" if present
+        if ('id' in item) {
+            return item.id;
+        }
+        // If there's no id provided on item and no getKey supplied, fail fast with a clear message
+        throw new Error('Selection: getKey is required when items have no "id" property');
+    }, getChildren = () => [], isItemSelectable = () => true, } = {}) {
         this._rawData = data;
         this._getChildren = getChildren;
         this._data = this._buildData(data);

package/components/table/table.d.ts

@@ -5,7 +5,6 @@ import { Component, PureComponent, type ReactNode, type SyntheticEvent } from 'r
 import * as React from 'react';
 import { type OnChangeMeta } from 'react-movable/lib/types';
 import { type FocusSensorAddProps, type FocusSensorProps } from '../global/focus-sensor-hoc';
-import { type SelectionItem } from './selection';
 import { type SelectionShortcutsAddProps, type SelectionShortcutsProps } from './selection-shortcuts-hoc';
 import { type DisableHoverAddProps, type DisableHoverProps } from './disable-hover-hoc';
 import Row from './row-with-focus-sensor';
@@ -15,7 +14,7 @@ export interface ReorderParams<T> {
     oldIndex: number;
     newIndex: number;
 }
-export interface TableProps<T extends SelectionItem> extends FocusSensorAddProps<HTMLTableRowElement>, SelectionShortcutsAddProps<T>, DisableHoverAddProps {
+export interface TableProps<T extends object> extends FocusSensorAddProps<HTMLTableRowElement>, SelectionShortcutsAddProps<T>, DisableHoverAddProps {
     data: readonly T[];
     columns: readonly Column<T>[] | ((item: T | null) => readonly Column<T>[]);
     isItemSelectable: (item: T) => boolean;
@@ -45,6 +44,9 @@ export interface TableProps<T extends SelectionItem> extends FocusSensorAddProps
     isDisabledSelectionVisible: (item: T) => boolean;
     getCheckboxTooltip: (item: T) => string | undefined;
     className?: string | null | undefined;
+    wrapperClassName?: string | null | undefined;
+    headerClassName?: string | null | undefined;
+    cellClassName?: string | null | undefined;
     loaderClassName?: string | undefined;
     caption?: string | null | undefined;
     stickyHeaderOffset?: string | undefined;
@@ -55,13 +57,13 @@ export interface TableProps<T extends SelectionItem> extends FocusSensorAddProps
 /**
  * Interactive table with selection and keyboard navigation support.
  */
-export declare class Table<T extends SelectionItem> extends PureComponent<TableProps<T>> {
+export declare class Table<T extends object> extends PureComponent<TableProps<T>> {
     static defaultProps: {
         isItemSelectable: () => boolean;
         loading: boolean;
         onSort: () => void;
         onReorder: () => void;
-        getItemKey: (item: SelectionItem) => string | number;
+        getItemKey: (item: object) => string | number;
         sortKey: string;
         sortOrder: boolean;
         draggable: boolean;
@@ -100,8 +102,8 @@ export declare class Table<T extends SelectionItem> extends PureComponent<TableP
     restoreFocusWithoutScroll: () => void;
     render(): React.JSX.Element;
 }
-export type TableAttrs<T extends SelectionItem> = DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>;
-export default class TableContainer<T extends SelectionItem> extends Component<TableAttrs<T>> {
+export type TableAttrs<T extends object> = DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>;
+export default class TableContainer<T extends object> extends Component<TableAttrs<T>> {
     Table: React.ComponentClass<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>, any>;
     render(): React.JSX.Element;
 }

package/components/table/table.js

@@ -23,7 +23,14 @@ export class Table extends PureComponent {
         loading: false,
         onSort: () => { },
         onReorder: () => { },
-        getItemKey: (item) => item.id,
+        getItemKey: (item) => {
+            // Default behavior stays backward compatible: use item's "id" if present
+            if ('id' in item) {
+                return item.id;
+            }
+            // If there's no id provided on item and no getKey supplied, fail fast with a clear message
+            throw new Error('Table: getItemKey is required when items have no "id" property');
+        },
         sortKey: 'id',
         sortOrder: true,
         draggable: false,
@@ -121,6 +128,7 @@ export class Table extends PureComponent {
             sortOrder,
             sticky: stickyHeader,
             topStickOffset: stickyHeaderOffset,
+            className: this.props.headerClassName,
         };
         const selectedSize = selection.getSelected().size;
         const allSelectedSize = selection.selectAll().getSelected().size;
@@ -130,7 +138,7 @@ export class Table extends PureComponent {
         const wrapperClasses = classNames({
             [style.tableWrapper]: true,
             [style.loading]: loading,
-        });
+        }, this.props.wrapperClassName);
         const classes = classNames(this.props.className, {
             [style.table]: true,
             [style.wideFirstColumn]: this.props.wideFirstColumn,
@@ -157,7 +165,7 @@ export class Table extends PureComponent {
                 return null;
             }
             const { ref, ...restProps } = props;
-            const row = (<RowComponent innerRef={ref} level={getItemLevel(value)} item={value} showFocus={selection.isFocused(value)} autofocus={selection.isFocused(value)} focused={focused && selection.isFocused(value)} selectable={selectable && isItemSelectable(value)} selected={selectable && selection.isSelected(value)} onFocus={this.onRowFocus} onSelect={this.onRowSelect} onDoubleClick={onItemDoubleClick} onClick={onItemClick} collapsible={isItemCollapsible(value)} parentCollapsible={isParentCollapsible(value)} collapsed={isItemCollapsed(value)} onCollapse={onItemCollapse} onExpand={onItemExpand} showDisabledSelection={isDisabledSelectionVisible(value)} checkboxTooltip={getCheckboxTooltip(value)} className={classNames(getItemClassName(value), { [style.draggingRow]: isDragged })} metaColumnClassName={getMetaColumnClassName(value)} draggable={draggable} alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle} columns={columns} data-test={getItemDataTest(value)} {...restProps} key={restProps.key ?? getItemKey(value)}/>);
+            const row = (<RowComponent innerRef={ref} level={getItemLevel(value)} item={value} showFocus={selection.isFocused(value)} autofocus={selection.isFocused(value)} focused={focused && selection.isFocused(value)} selectable={selectable && isItemSelectable(value)} selected={selectable && selection.isSelected(value)} onFocus={this.onRowFocus} onSelect={this.onRowSelect} onDoubleClick={onItemDoubleClick} onClick={onItemClick} collapsible={isItemCollapsible(value)} parentCollapsible={isParentCollapsible(value)} collapsed={isItemCollapsed(value)} onCollapse={onItemCollapse} onExpand={onItemExpand} showDisabledSelection={isDisabledSelectionVisible(value)} checkboxTooltip={getCheckboxTooltip(value)} className={classNames(getItemClassName(value), { [style.draggingRow]: isDragged })} metaColumnClassName={getMetaColumnClassName(value)} draggable={draggable} alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle} columns={columns} data-test={getItemDataTest(value)} cellClassName={this.props.cellClassName} {...restProps} key={restProps.key ?? getItemKey(value)}/>);
             return isDragged ? (<table style={{ ...props.style }} className={style.draggingTable}>
           <tbody>{row}</tbody>
         </table>) : (row);

package/components/tag/tag.d.ts

@@ -25,6 +25,7 @@ export interface TagProps {
     children?: ReactNode;
     className?: string | null | undefined;
     containerClassName?: string | null | undefined;
+    removeButtonClassName?: string | null | undefined;
     rgTagIcon?: string | IconType | null | undefined;
     icon?: string | undefined;
     avatar?: string | null | undefined;

package/components/tag/tag.js

@@ -90,7 +90,7 @@ export default class Tag extends PureComponent {
     }
     renderRemoveIcon() {
         if (!this.props.readOnly && this.props.onRemove) {
-            return (<Button title='Remove' icon={closeIcon} data-test='ring-tag-remove' className={styles.remove} onClick={this.props.onRemove} style={{ '--ring-secondary-color': this.props.textColor }} height={ControlsHeight.M}/>);
+            return (<Button title='Remove' icon={closeIcon} data-test='ring-tag-remove' className={classNames(styles.remove, this.props.removeButtonClassName)} onClick={this.props.onRemove} style={{ '--ring-secondary-color': this.props.textColor }} height={ControlsHeight.M}/>);
         }
         return null;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.85",
+  "version": "7.0.86",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -106,11 +106,11 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
-    "@storybook/addon-a11y": "10.1.10",
-    "@storybook/addon-docs": "^10.1.10",
-    "@storybook/addon-themes": "^10.1.10",
+    "@storybook/addon-a11y": "10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-themes": "^10.1.11",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "10.1.10",
+    "@storybook/react-webpack5": "10.1.11",
     "@storybook/test-runner": "^0.24.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.1",
@@ -122,10 +122,10 @@
     "@types/react-dom": "^19.2.3",
     "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-react": "^5.1.2",
-    "@vitest/eslint-plugin": "^1.6.1",
+    "@vitest/eslint-plugin": "^1.6.5",
     "acorn": "^8.15.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001761",
+    "caniuse-lite": "^1.0.30001762",
     "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.1.2",
@@ -142,11 +142,11 @@
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.1.10",
+    "eslint-plugin-storybook": "^10.1.11",
     "eslint-plugin-unicorn": "^62.0.0",
     "events": "^3.3.0",
     "glob": "^13.0.0",
-    "globals": "^16.5.0",
+    "globals": "^17.0.0",
     "html-webpack-plugin": "^5.6.5",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -167,14 +167,14 @@
     "rollup": "^4.54.0",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "10.1.10",
+    "storybook": "10.1.11",
     "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.16",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.50.0",
+    "typescript-eslint": "^8.51.0",
     "vitest": "^4.0.16",
     "vitest-teamcity-reporter": "^0.4.1",
     "webpack": "^5.104.1",
@@ -223,7 +223,7 @@
     "element-resize-detector": "^1.2.4",
     "fastdom": "^1.0.12",
     "file-loader": "^6.2.0",
-    "focus-trap": "^7.7.0",
+    "focus-trap": "^7.7.1",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
@@ -233,7 +233,7 @@
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.2.0",
     "postcss-modules-values-replace": "^4.2.2",
-    "postcss-preset-env": "^10.5.0",
+    "postcss-preset-env": "^10.6.0",
     "react-compiler-runtime": "^1.0.0",
     "react-movable": "^3.4.1",
     "react-virtualized": "^9.22.6",