@jetbrains/ring-ui 7.0.31 → 7.0.33

package/components/avatar/avatar-info.d.ts

@@ -4,5 +4,6 @@ interface InfoAvatarProps {
     size: Size;
     children?: ReactNode;
 }
+export declare const fontSizes: Record<Size, number>;
 export default function AvatarInfo({ size, children }: InfoAvatarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/avatar/avatar-info.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import styles from './avatar.css';
 import { Size } from './avatar-size';
-const fontSizes = {
+export const fontSizes = {
     [Size.Size16]: 9,
     [Size.Size18]: 9,
     [Size.Size20]: 9,

package/components/avatar/avatar.css

@@ -5,11 +5,13 @@
   object-fit: cover;
   object-position: center;
 
-  /* This is a "graceful degradation" fallback, while the real value is controlled by JS */
-
   border-radius: var(--ring-border-radius);
 }
 
+.round {
+  border-radius: 50%;
+}
+
 .avatarShadow {
   /* See https://stackoverflow.com/questions/21414925/why-doesnt-inset-box-shadow-work-over-images */
 
@@ -26,7 +28,7 @@
   color: var(--ring-secondary-color);
   border-radius: inherit;
 
-  background-color: var(--ring-disabled-background-color);
+  background-color: var(--ring-tag-background-color);
 }
 
 .subavatar {

package/components/avatar/avatar.figma.js

@@ -1,24 +1,45 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import figma from '@figma/code-connect';
-import Avatar, { Size } from './avatar';
-figma.connect(Avatar, 'https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?m=auto&node-id=5990-522&t=v8bItK8qotmnbysK-1', {
-    props: {
-        round: figma.boolean('Round'),
-        size: figma.enum('Size', {
-            '20 px': Size.Size20,
-            '24 px': Size.Size24,
-            '28 px': Size.Size28,
-            '32 px': Size.Size32,
-            '40px': Size.Size40,
-            '56px': Size.Size56,
-        }),
-        username: figma.enum('Content', {
-            name: 'Samuel Morse',
-        }),
-        url: figma.enum('Content', {
-            'color/image': 'avatar.png',
-        }),
-    },
-    example: props => _jsx(Avatar, { ...props }),
-    imports: ['import Avatar, {Size} from "@jetbrains/ring-ui/components/avatar/avatar"'],
-});
+// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=5990-522
+const figma = require('figma');
+
+const instance = figma.selectedInstance;
+
+const round = instance.getBoolean('Round');
+const size = parseInt(instance.getString('Size'), 10);
+const content = instance.getString('Content');
+
+const props = [];
+const DEFAULT_SIZE = 20;
+const isDefaultSize = size === DEFAULT_SIZE;
+const imports = [`import Avatar${isDefaultSize ? '' : ', {Size}'} from '@jetbrains/ring-ui/components/avatar/avatar'`];
+if (!isDefaultSize) {
+  props.push(`size={Size.Size${size}}`);
+}
+switch (content) {
+  case 'color/image':
+    props.push('url="avatar.png"');
+    break;
+  case 'name':
+    props.push('username="Samuel Morse"');
+    break;
+  case 'label':
+    props.push('info="5"');
+    break;
+  case 'icon':
+    imports.push(
+      "import Icon from '@jetbrains/ring-ui/components/icon/icon'",
+      "import warningIcon from '@jetbrains/icons/warning.svg'",
+    );
+    props.push('info={<Icon glyph={warningIcon} />}');
+    break;
+  default:
+}
+if (round) {
+  props.push('round');
+}
+
+export default {
+  id: 'avatar',
+  example: figma.code`${imports.join('\n')}
+
+<Avatar ${props.map(prop => `${prop} `).join('')}/>`,
+};

package/components/avatar/avatar.js

@@ -34,9 +34,7 @@ export default class Avatar extends PureComponent {
         }
         const sizeString = `${size}px`;
         const subavatarSizeString = `${subavatarSize}px`;
-        const borderRadius = size <= Size.Size18 ? 'var(--ring-border-radius-small)' : 'var(--ring-border-radius)';
         const styleObj = {
-            borderRadius: round ? '50%' : borderRadius,
             height: sizeString,
             width: sizeString,
             ...style,
@@ -47,8 +45,11 @@ export default class Avatar extends PureComponent {
             width: subavatarSizeString,
             ...style,
         };
+        const classes = classNames(styles.avatar, this.props.className, {
+            [styles.round]: round,
+        });
         if (!url || this.state.errorUrl === url) {
-            return (_jsxs("span", { ...restProps, "data-test": "avatar", className: classNames(styles.avatar, this.props.className, {
+            return (_jsxs("span", { ...restProps, "data-test": "avatar", className: classNames(classes, {
                     [styles.empty]: username == null && info == null,
                 }), style: styleObj, children: [username != null && _jsx(FallbackAvatar, { size: size, round: round, username: username }), info != null && _jsx(AvatarInfo, { size: size, children: info })] }));
         }
@@ -71,10 +72,10 @@ export default class Avatar extends PureComponent {
                 subavatarSizeString,
             };
             subavatarSrc = skipParams ? subavatar : encodeURL(urlStart, queryParams);
-            return (_jsxs("div", { children: [_jsx("img", { ...restProps, onError: this.handleError, onLoad: this.handleSuccess, className: classNames(styles.avatar, styles.avatarShadow, this.props.className), style: styleObj, src: src, alt: "User avatar" }), _jsx("img", { ...restProps, "data-test": "avatar", onError: this.handleError, onLoad: this.handleSuccess, className: classNames(styles.subavatar), style: styleObjGroup, src: subavatarSrc, alt: "Subavatar" })] }));
+            return (_jsxs("div", { children: [_jsx("img", { ...restProps, onError: this.handleError, onLoad: this.handleSuccess, className: classNames(classes, styles.avatarShadow), style: styleObj, src: src, alt: "User avatar" }), _jsx("img", { ...restProps, "data-test": "avatar", onError: this.handleError, onLoad: this.handleSuccess, className: classNames(styles.subavatar), style: styleObjGroup, src: subavatarSrc, alt: "Subavatar" })] }));
         }
         else {
-            return (_jsx("img", { ...restProps, "data-test": "avatar", onError: this.handleError, onLoad: this.handleSuccess, className: classNames(styles.avatar, styles.avatarShadow, this.props.className), style: styleObj, src: src, alt: "User avatar" }));
+            return (_jsx("img", { ...restProps, "data-test": "avatar", onError: this.handleError, onLoad: this.handleSuccess, className: classNames(classes, styles.avatarShadow), style: styleObj, src: src, alt: "User avatar" }));
         }
     }
 }

package/components/avatar-stack/avatar-stack.css

@@ -1,37 +1,31 @@
 .size20 {
   --ring-avatar-stack-offset: 12px;
   --ring-avatar-stack-mask-image: url('avatar-stack.mask-20.svg');
-  --ring-avatar-stack-extra-font-size: 9px
 }
 
 .size24 {
   --ring-avatar-stack-offset: 16px;
   --ring-avatar-stack-mask-image: url('avatar-stack.mask-24.svg');
-  --ring-avatar-stack-extra-font-size: 11px;
 }
 
 .size28 {
   --ring-avatar-stack-offset: 18px;
   --ring-avatar-stack-mask-image: url('avatar-stack.mask-28.svg');
-  --ring-avatar-stack-extra-font-size: var(--ring-font-size-smaller);
 }
 
 .size32 {
   --ring-avatar-stack-offset: 20px;
   --ring-avatar-stack-mask-image: url('avatar-stack.mask-32.svg');
-  --ring-avatar-stack-extra-font-size: var(--ring-font-size);
 }
 
 .size40 {
   --ring-avatar-stack-offset: 26px;
   --ring-avatar-stack-mask-image: url('avatar-stack.mask-40.svg');
-  --ring-avatar-stack-extra-font-size: var(--ring-font-size-larger);
 }
 
 .size56 {
   --ring-avatar-stack-offset: 42px;
   --ring-avatar-stack-mask-image: url('avatar-stack.mask-56.svg');
-  --ring-avatar-stack-extra-font-size: 22px;
 }
 
 .avatarStack {
@@ -43,29 +37,23 @@
 .item {
   position: relative;
 
-  margin-left: calc(var(--ring-avatar-stack-offset) * -1);
+  margin: -1px;
+  margin-left: calc(var(--ring-avatar-stack-offset) * -1 - 1px);
+  padding: 1px;
 
   transition: transform var(--ring-fast-ease);
   mask-image: var(--ring-avatar-stack-mask-image);
-  mask-position: calc(var(--ring-avatar-stack-offset) - 4px) -1px;
+  mask-position: calc(var(--ring-avatar-stack-offset) - 3px) 0;
   mask-repeat: no-repeat;
 
+  border-radius: calc(var(--ring-border-radius) + 1px);
 
-  /* make the gaps hoverable */
-  &::before {
-    position: absolute;
-    top: 0;
-    right: -1px;
-    bottom: 0;
-    left: -1px;
-
-    content: '';
-  }
+  background-color: var(--ring-content-background-color);
 }
 
 .item:nth-child(1) {
   --ring-avatar-stack-index: 0;
-  --ring-avatar-stack-offset: 0;
+  --ring-avatar-stack-offset: 0px;
 
   mask: none;
 }
@@ -80,38 +68,27 @@
 
 .extra {
   composes: item;
-
-  color: var(--ring-secondary-color);
-
-  border-radius: var(--ring-border-radius);
-
-  background-color: var(--ring-disabled-background-color);
-
-  font-size: var(--ring-avatar-stack-extra-font-size);
 }
 
-.extraText {
+.extraButton {
   composes: resetButton from "../global/global.css";
 
-  display: block;
-
-  width: 100%;
-  height: 100%;
-
   cursor: pointer;
-  transition: opacity var(--ring-fast-ease);
-  text-align: center;
-
-  opacity: 0;
 
   border-radius: var(--ring-border-radius);
 }
 
-.extraText:focus-visible {
+.extraButton:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px var(--ring-border-hover-color);
 }
 
+.extraText {
+  transition: opacity var(--ring-fast-ease);
+
+  opacity: 0;
+}
+
 .hovered .extraText,
 .avatarStack:hover .extraText,
 .avatarStack:focus-within .extraText {

package/components/avatar-stack/avatar-stack.js

@@ -2,11 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, useState } from 'react';
 import classNames from 'classnames';
 import DropdownMenu from '../dropdown-menu/dropdown-menu';
-import { Size } from '../avatar/avatar';
+import Avatar, { Size } from '../avatar/avatar';
+import { fontSizes } from '../avatar/avatar-info';
 import styles from './avatar-stack.css';
 export default function AvatarStack({ children, className, size = Size.Size20, extraItems, dropdownMenuProps, ...restProps }) {
     const [dropdownOpen, setDropdownOpen] = useState(false);
     return (_jsxs("div", { className: classNames(styles.avatarStack, className, styles[`size${size}`], {
             [styles.hovered]: dropdownOpen,
-        }), ...restProps, children: [Children.map(children, (child, index) => (_jsx("div", { className: styles.item, style: { '--ring-avatar-stack-index': index }, children: child }))), extraItems?.length ? (_jsx(DropdownMenu, { hoverMode: true, hoverShowTimeOut: 10, onShow: () => setDropdownOpen(true), onHide: () => setDropdownOpen(false), className: styles.extra, style: { width: size, height: size, '--ring-avatar-stack-index': Children.count(children) }, anchor: _jsx("button", { type: "button", className: styles.extraText, children: `+${extraItems.length}` }), data: extraItems, menuProps: { offset: 4, ...dropdownMenuProps?.menuProps }, ...dropdownMenuProps })) : null] }));
+        }), ...restProps, style: { height: size, ...restProps.style }, children: [Children.map(children, (child, index) => (_jsx("div", { className: styles.item, style: { '--ring-avatar-stack-index': index }, children: child }))), extraItems?.length ? (_jsx(DropdownMenu, { hoverMode: true, hoverShowTimeOut: 10, onShow: () => setDropdownOpen(true), onHide: () => setDropdownOpen(false), className: styles.extra, style: {
+                    width: size,
+                    height: size,
+                    '--ring-avatar-stack-index': Children.count(children),
+                    fontSize: fontSizes[size],
+                }, anchor: _jsx("button", { type: "button", className: styles.extraButton, children: _jsx(Avatar, { size: size, info: _jsx("span", { className: styles.extraText, children: `+${extraItems.length}` }) }) }), data: extraItems, menuProps: { offset: 4, ...dropdownMenuProps?.menuProps }, ...dropdownMenuProps })) : null] }));
 }

package/components/avatar-stack/avatar-stack.mask-56.svg

@@ -1,3 +1,3 @@
-<svg width="56px" height="56px" xmlns="http://www.w3.org/2000/svg">
-  <path fill="black" d="M 0 0 a 5 5 0 0 1 5 5 V 51 a 5 5 0 0 1 -5 5 H 56 V 0"/>
+<svg width="58px" height="58px" xmlns="http://www.w3.org/2000/svg">
+  <path fill="black" d="M 0 0 a 5 5 0 0 1 5 5 V 53 a 5 5 0 0 1 -5 5 H 58 V 0"/>
 </svg>

package/components/button/button.figma.js

@@ -1,70 +1,95 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import figma from '@figma/code-connect';
-import addIcon from '@jetbrains/icons/add';
-import add12pxIcon from '@jetbrains/icons/add-12px';
-import downloadIcon from '@jetbrains/icons/download';
-import download12pxIcon from '@jetbrains/icons/download-12px';
-import { ControlsHeight } from '../global/controls-height';
-import Button from './button';
-figma.connect(Button, 'https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=9954%3A528', {
-    props: {
-        height: figma.enum('Size', {
-            S: ControlsHeight.S,
-            M: ControlsHeight.M,
-            L: ControlsHeight.L,
-        }),
-        children: figma.enum('Type', {
-            Label: 'Button',
-            'L-Icon-Label': 'Button',
-            'R-Icon-Label': 'Button',
-        }),
-        icon: figma.enum('Type', {
-            'L-Icon-Label': figma.enum('Size', {
-                S: figma.enum('Variant', {
-                    Main: download12pxIcon,
-                    Green: download12pxIcon,
-                    'Red solid': download12pxIcon,
-                    Gray: download12pxIcon,
-                    Outlined: download12pxIcon,
-                    'Red outlined': download12pxIcon,
-                    Ghost: download12pxIcon,
-                    Text: downloadIcon,
-                }),
-                M: downloadIcon,
-                L: downloadIcon,
-            }),
-            Icon: figma.enum('Size', {
-                S: figma.enum('Variant', {
-                    Main: add12pxIcon,
-                    Green: add12pxIcon,
-                    'Red solid': add12pxIcon,
-                    Gray: add12pxIcon,
-                    Outlined: add12pxIcon,
-                    'Red outlined': add12pxIcon,
-                    Ghost: add12pxIcon,
-                    Text: addIcon,
-                }),
-                M: addIcon,
-                L: addIcon,
-            }),
-        }),
-        dropdown: figma.enum('Type', { 'R-Icon-Label': true }),
-        disabled: figma.enum('State', { Disabled: true }),
-        primary: figma.enum('Variant', { Main: true }),
-        success: figma.enum('Variant', { Green: true }),
-        error: figma.enum('Variant', { 'Red solid': true }),
-        secondary: figma.enum('Variant', { Gray: true }),
-        danger: figma.enum('Variant', { 'Red outlined': true }),
-        ghost: figma.enum('Variant', { Ghost: true }),
-        inline: figma.enum('Variant', { Text: true }),
-    },
-    example: ({ children, ...restProps }) => _jsx(Button, { ...restProps, children: children }),
-    imports: [
-        'import Button from "@jetbrains/ring-ui/components/button/button"',
-        'import {ControlsHeight} from "@jetbrains/ring-ui/components/global/controls-height"',
-        'import addIcon from "@jetbrains/icons/add"',
-        'import add12pxIcon from "@jetbrains/icons/add-12px"',
-        'import downloadIcon from "@jetbrains/icons/download"',
-        'import download12pxIcon from "@jetbrains/icons/download-12px"',
-    ],
-});
+const figma = require('figma');
+
+const instance = figma.selectedInstance;
+
+const size = instance.getString('Size');
+const type = instance.getString('Type');
+const state = instance.getString('State');
+const variant = instance.getString('Variant');
+
+const imports = ["import Button from '@jetbrains/ring-ui/components/button/button'"];
+const props = [];
+const DEFAULT_SIZE = 'M';
+const isDefaultSize = size === DEFAULT_SIZE;
+
+if (!isDefaultSize) {
+  imports.push("import {ControlsHeight} from '@jetbrains/ring-ui/components/global/controls-height'");
+  props.push(`height={ControlsHeight.${size}}`);
+}
+
+switch (variant) {
+  case 'Red outlined':
+    props.push('danger');
+    break;
+  case 'Main':
+    props.push('primary');
+    break;
+  case 'Green':
+    props.push('success');
+    break;
+  case 'Red solid':
+    props.push('error');
+    break;
+  case 'Gray':
+    props.push('secondary');
+    break;
+  case 'Ghost':
+    props.push('ghost');
+    break;
+  case 'Text':
+    props.push('inline');
+    break;
+  default:
+}
+
+let children = 'Button';
+const use12pxIcon = size === 'S' && variant !== 'Text';
+let useButtonGroup = false;
+switch (type) {
+  case 'R-Icon-Label':
+    props.push('dropdown');
+    break;
+  case 'L-Icon-Label':
+    imports.push(`import downloadIcon from '@jetbrains/icons/download${use12pxIcon ? '-12px' : ''}'`);
+    props.push('icon={downloadIcon}');
+    break;
+  case 'Icon':
+    children = null;
+    imports.push(`import addIcon from '@jetbrains/icons/add${use12pxIcon ? '-12px' : ''}'`);
+    props.push('icon={addIcon}');
+    break;
+  case 'Split':
+    imports.push("import ButtonGroup from '@jetbrains/ring-ui/components/button-group/button-group'");
+    imports.push(`import chevronDownIcon from '@jetbrains/icons/chevron-down${use12pxIcon ? '-12px' : ''}'`);
+    useButtonGroup = true;
+    break;
+  default:
+}
+
+switch (state) {
+  case 'Disabled':
+    props.push('disabled');
+    break;
+  default:
+}
+
+const joinedProps = props.map(prop => `${prop} `).join('');
+// prettier-ignore
+const button = children ?
+`<Button ${joinedProps}>
+  ${children}
+</Button>` : `<Button ${joinedProps}/>`;
+
+export default {
+  id: 'button',
+  example: figma.code`${imports.join('\n')}
+
+${
+  // prettier-ignore
+  useButtonGroup ?
+      `<ButtonGroup>
+  ${button}
+  <Button ${joinedProps} icon={chevronDownIcon} />
+</ButtonGroup>` : button
+}`,
+};

package/components/input/input.d.ts

@@ -29,6 +29,7 @@ export interface InputBaseProps {
     onClear?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | null | undefined;
     icon?: string | ComponentType | null | undefined;
     height?: ControlsHeight | undefined;
+    beforeInput?: ReactNode;
     afterInput?: ReactNode;
     translations?: InputTranslations | null | undefined;
 }

package/components/input/input.js

@@ -93,7 +93,7 @@ export class Input extends PureComponent {
         // Modifiers
         size, multiline, borderless, 
         // Props
-        label, labelType, error, help, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = this.context, afterInput, ...restProps } = this.props;
+        label, labelType, error, help, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = this.context, beforeInput, afterInput, ...restProps } = this.props;
         const { empty } = this.state;
         const clearable = !!onClear;
         const classes = classNames(className, styles.outerContainer, [styles[`size${size}`]], [styles[`height${height}`]], {
@@ -116,7 +116,7 @@ export class Input extends PureComponent {
             'aria-label': typeof label === 'string' && label ? label : placeholder,
             'data-enabled-shortcuts': Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null,
         };
-        return (_jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsxs("div", { className: classes, "data-test": "ring-input", children: [label && (_jsx(ControlLabel, { htmlFor: this.getId(), disabled: disabled, type: labelType, children: label })), _jsxs("div", { className: styles.container, children: [icon && _jsx(Icon, { glyph: icon, className: styles.icon }), multiline ? (_jsx("textarea", { onChange: this.handleTextareaChange, rows: 1, ...commonProps, ...restProps })) : (_jsx("input", { onChange: this.handleInputChange, ...commonProps, ...restProps })), clearable && !disabled && (_jsx(Button, { title: translations?.clear ?? translate('clear'), "data-test": "ring-input-clear", className: styles.clear, icon: closeIcon, onClick: this.clear })), afterInput] }), error ? (_jsx("div", { className: styles.errorText, children: error })) : (help && _jsx(ControlHelp, { className: styles.helpText, children: help }))] })) }));
+        return (_jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsxs("div", { className: classes, "data-test": "ring-input", children: [label && (_jsx(ControlLabel, { htmlFor: this.getId(), disabled: disabled, type: labelType, children: label })), _jsxs("div", { className: styles.container, children: [icon && _jsx(Icon, { glyph: icon, className: styles.icon }), beforeInput, multiline ? (_jsx("textarea", { onChange: this.handleTextareaChange, rows: 1, ...commonProps, ...restProps })) : (_jsx("input", { onChange: this.handleInputChange, ...commonProps, ...restProps })), clearable && !disabled && (_jsx(Button, { title: translations?.clear ?? translate('clear'), "data-test": "ring-input-clear", className: styles.clear, icon: closeIcon, onClick: this.clear })), afterInput] }), error ? (_jsx("div", { className: styles.errorText, children: error })) : (help && _jsx(ControlHelp, { className: styles.helpText, children: help }))] })) }));
     }
 }
 export default Input;

package/components/table/table.d.ts

@@ -50,6 +50,7 @@ export interface TableProps<T extends SelectionItem> extends FocusSensorAddProps
     stickyHeaderOffset?: string | undefined;
     renderEmpty?: (() => ReactNode) | null | undefined;
     RowComponent: typeof Row;
+    customLoader?: ((loaderClassName?: string) => ReactNode) | null | undefined;
 }
 /**
  * Interactive table with selection and keyboard navigation support.

package/components/table/table.js

@@ -109,7 +109,7 @@ export class Table extends PureComponent {
         window.scrollTo(scrollX, scrollY);
     };
     render() {
-        const { data, selection, columns, caption, getItemKey, selectable, focused, isItemSelectable, getItemLevel, getItemClassName, getMetaColumnClassName, getItemDataTest, draggable, alwaysShowDragHandle, dragHandleTitle, loading, onSort, sortKey, sortOrder, loaderClassName, stickyHeader, stickyHeaderOffset, isItemCollapsible, isParentCollapsible, isItemCollapsed, onItemCollapse, onItemExpand, isDisabledSelectionVisible, getCheckboxTooltip, onItemDoubleClick, onItemClick, renderEmpty, RowComponent, } = this.props;
+        const { data, selection, columns, caption, getItemKey, selectable, focused, isItemSelectable, getItemLevel, getItemClassName, getMetaColumnClassName, getItemDataTest, draggable, alwaysShowDragHandle, dragHandleTitle, loading, onSort, sortKey, sortOrder, loaderClassName, stickyHeader, stickyHeaderOffset, isItemCollapsible, isParentCollapsible, isItemCollapsed, onItemCollapse, onItemExpand, isDisabledSelectionVisible, getCheckboxTooltip, onItemDoubleClick, onItemClick, renderEmpty, RowComponent, customLoader, } = this.props;
         // NOTE: Do not construct new object per render because it causes all rows rerendering
         const columnsArray = typeof columns === 'function' ? columns(null) : columns;
         const headerProps = {
@@ -152,7 +152,7 @@ export class Table extends PureComponent {
             const row = (_createElement(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) }));
             return isDragged ? (_jsx("table", { style: { ...props.style }, className: style.draggingTable, children: _jsx("tbody", { children: row }) })) : (row);
         };
-        return (_jsxs("div", { className: wrapperClasses, "data-test": "ring-table-wrapper", ref: this.props.innerRef, children: [focused && _jsx(Shortcuts, { map: this.props.shortcutsMap, scope: this.state.shortcutsScope }), _jsx("div", { role: "presentation", onMouseDown: this.onMouseDown, children: draggable ? (_jsx(List, { values: data, renderList: renderList, renderItem: renderItem, onChange: this.onSortEnd })) : (renderList({ children: data.map((value, index) => renderItem({ value, index })) })) }), loading && (_jsx("div", { className: style.loadingOverlay, children: _jsx(Loader, { className: loaderClassName }) }))] }));
+        return (_jsxs("div", { className: wrapperClasses, "data-test": "ring-table-wrapper", ref: this.props.innerRef, children: [focused && _jsx(Shortcuts, { map: this.props.shortcutsMap, scope: this.state.shortcutsScope }), _jsx("div", { role: "presentation", onMouseDown: this.onMouseDown, children: draggable ? (_jsx(List, { values: data, renderList: renderList, renderItem: renderItem, onChange: this.onSortEnd })) : (renderList({ children: data.map((value, index) => renderItem({ value, index })) })) }), loading && (_jsx("div", { className: style.loadingOverlay, children: customLoader ? customLoader(loaderClassName) : _jsx(Loader, { className: loaderClassName }) }))] }));
     }
 }
 const getContainer = () => disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(Table)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.31",
+  "version": "7.0.33",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -90,7 +90,7 @@
     "@babel/plugin-syntax-import-assertions": "^7.26.0",
     "@csstools/css-parser-algorithms": "^3.0.4",
     "@csstools/stylelint-no-at-nest-rule": "^4.0.0",
-    "@eslint/compat": "^1.2.6",
+    "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.20.0",
     "@figma/code-connect": "^1.3.1",
@@ -103,18 +103,18 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-replace": "^6.0.2",
-    "@storybook/addon-a11y": "8.5.6",
-    "@storybook/addon-docs": "8.5.6",
-    "@storybook/addon-essentials": "8.5.6",
-    "@storybook/addon-themes": "^8.5.6",
-    "@storybook/components": "8.5.6",
+    "@storybook/addon-a11y": "8.5.8",
+    "@storybook/addon-docs": "8.5.8",
+    "@storybook/addon-essentials": "8.5.8",
+    "@storybook/addon-themes": "^8.5.8",
+    "@storybook/components": "8.5.8",
     "@storybook/csf": "^0.1.13",
-    "@storybook/manager-api": "8.5.6",
-    "@storybook/preview-api": "8.5.6",
-    "@storybook/react": "8.5.6",
-    "@storybook/react-webpack5": "8.5.6",
-    "@storybook/test-runner": "^0.21.1",
-    "@storybook/theming": "8.5.6",
+    "@storybook/manager-api": "8.5.8",
+    "@storybook/preview-api": "8.5.8",
+    "@storybook/react": "8.5.8",
+    "@storybook/react-webpack5": "8.5.8",
+    "@storybook/test-runner": "^0.21.3",
+    "@storybook/theming": "8.5.8",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -127,7 +127,7 @@
     "@types/markdown-it": "^14.1.2",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@types/sinon": "^17.0.3",
+    "@types/sinon": "^17.0.4",
     "@types/sinon-chai": "^4.0.0",
     "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-react": "^4.3.4",
@@ -147,7 +147,7 @@
     "cpy-cli": "^5.0.0",
     "dotenv-cli": "^8.0.0",
     "enzyme": "^3.11.0",
-    "eslint": "^9.20.1",
+    "eslint": "^9.21.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-formatter-jslint-xml": "^8.40.0",
     "eslint-import-resolver-webpack": "^0.13.10",
@@ -159,7 +159,7 @@
     "eslint-plugin-storybook": "^0.11.3",
     "events": "^3.3.0",
     "glob": "^11.0.1",
-    "globals": "^15.15.0",
+    "globals": "^16.0.0",
     "html-webpack-plugin": "^5.6.3",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -171,7 +171,7 @@
     "markdown-it": "^14.1.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
-    "prettier": "^3.5.1",
+    "prettier": "^3.5.2",
     "raw-loader": "^4.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -183,14 +183,14 @@
     "sinon": "^19.0.2",
     "sinon-chai": "^4.0.0",
     "storage-mock": "^2.1.0",
-    "storybook": "8.5.6",
+    "storybook": "8.5.8",
     "stylelint": "^16.14.1",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.11",
     "typescript": "~5.7.3",
-    "typescript-eslint": "^8.24.1",
-    "vitest": "^3.0.5",
+    "typescript-eslint": "^8.25.0",
+    "vitest": "^3.0.7",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
     "webpack": "^5.98.0",
@@ -220,11 +220,11 @@
     "@babel/core": "^7.26.9",
     "@babel/preset-typescript": "^7.26.0",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^5.6.0",
+    "@jetbrains/icons": "^5.7.0",
     "@jetbrains/postcss-require-hover": "^0.1.3",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",
-    "@types/react-virtualized": "9.22.0",
+    "@types/react-virtualized": "9.22.2",
     "@types/util-deprecate": "^1.0.4",
     "babel-loader": "9.2.1",
     "babel-plugin-transform-define": "^2.1.4",
@@ -244,13 +244,13 @@
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.5.2",
+    "postcss": "^8.5.3",
     "postcss-calc": "^10.1.1",
     "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": "^10.1.4",
+    "postcss-preset-env": "^10.1.5",
     "react-movable": "^3.4.0",
     "react-virtualized": "^9.22.6",
     "react-waypoint": "^10.3.0",

package/components/avatar/avatar.figma.d.ts

@@ -1 +0,0 @@
-export {};

package/components/button/button.figma.d.ts

@@ -1 +0,0 @@
-export {};

package/components/button-group/button-group.figma.d.ts

@@ -1 +0,0 @@
-export {};

package/components/button-group/button-group.figma.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import figma from '@figma/code-connect';
-import chevronDownIcon from '@jetbrains/icons/chevron-down';
-import Button from '../button/button';
-import { ControlsHeight } from '../global/controls-height';
-import ButtonGroup from './button-group';
-figma.connect(ButtonGroup, 'https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=9954%3A528', {
-    props: {
-        height: figma.enum('Size', {
-            S: ControlsHeight.S,
-            M: ControlsHeight.M,
-            L: ControlsHeight.L,
-        }),
-        disabled: figma.enum('State', { Disabled: true }),
-        primary: figma.enum('Variant', { Main: true }),
-        success: figma.enum('Variant', { Green: true }),
-        error: figma.enum('Variant', { 'Red solid': true }),
-        secondary: figma.enum('Variant', { Gray: true }),
-        danger: figma.enum('Variant', { 'Red outlined': true }),
-        ghost: figma.enum('Variant', { Ghost: true }),
-        inline: figma.enum('Variant', { Text: true }),
-    },
-    variant: { Type: 'Split' },
-    example: props => (_jsxs(ButtonGroup, { children: [_jsx(Button, { ...props, children: 'Button' }), _jsx(Button, { ...props, icon: chevronDownIcon })] })),
-    imports: [
-        'import Button from "@jetbrains/ring-ui/components/button/button"',
-        'import {ControlsHeight} from "@jetbrains/ring-ui/components/global/controls-height"',
-        'import chevronDownIcon from "@jetbrains/icons/chevron-down"',
-    ],
-});