@jetbrains/ring-ui 7.0.32 → 7.0.34

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 */
 

package/components/avatar/avatar.figma.js

@@ -22,7 +22,7 @@ switch (content) {
     props.push('username="Samuel Morse"');
     break;
   case 'label':
-    props.push('info="5"');
+    props.push(`info="${instance.findText('Content').textContent}"`);
     break;
   case 'icon':
     imports.push(

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

@@ -37,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;
 }

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

@@ -0,0 +1,33 @@
+// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=5990-752
+const figma = require('figma');
+
+const instance = figma.selectedInstance;
+const sizeString = instance.getString('Size');
+const [sizeSubstring] = sizeString.match(/\d+/) ?? [];
+const size = parseInt(sizeSubstring, 10);
+const children = instance.findConnectedInstances(() => true);
+
+const imports = ["import AvatarStack from '@jetbrains/ring-ui/components/avatar-stack/avatar-stack'"];
+const props = [];
+
+const DEFAULT_SIZE = 20;
+const isDefaultSize = size === DEFAULT_SIZE;
+if (!isDefaultSize) {
+  props.push(`size={Size.Size${size}}`);
+}
+
+const renderedChildren = children.map(child => {
+  const {example} = child.executeTemplate();
+  const [childImports, code] = example[0].code.split('\n\n');
+  return {imports: childImports, code};
+});
+
+export default {
+  id: 'avatar-stack',
+  example: figma.code`${imports.join('\n')}
+${renderedChildren[0].imports}
+
+<AvatarStack ${props.map(prop => `${prop} `).join('')}>
+  ${renderedChildren.map(({code}) => code).join('\n  ')}
+</AvatarStack>`,
+};

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

@@ -9,7 +9,7 @@ export default function AvatarStack({ children, className, size = Size.Size20, e
     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: {
+        }), ...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),

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/breadcrumbs/breadcrumbs.figma.js

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=460%3A2730
+const figma = require('figma');
+
+const instance = figma.selectedInstance;
+
+const imports = [
+  "import Breadcrumbs from '@jetbrains/ring-ui/components/breadcrumbs/breadcrumbs'",
+  "import Link from '@jetbrains/ring-ui/components/link/link'",
+];
+
+const children = instance
+  .findLayers(() => true)
+  .map(layer => layer.textContent)
+  .filter(text => text !== '/');
+
+export default {
+  id: 'breadcrumbs',
+  example: figma.code`${imports.join('\n')}
+
+<Breadcrumbs>
+  ${children
+    .map((text, index) => {
+      const props = [`href="/page${index + 1}"`];
+      if (index === children.length - 1) {
+        props.push('active');
+      }
+      return `<Link ${props.map(prop => `${prop} `).join('')}>${text}</Link>`;
+    })
+    .join('\n  ')}
+</Breadcrumbs>`,
+};

package/components/button/button.figma.js

@@ -1,3 +1,4 @@
+// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=9954-528
 const figma = require('figma');
 
 const instance = figma.selectedInstance;
@@ -42,7 +43,7 @@ switch (variant) {
   default:
 }
 
-let children = 'Button';
+const children = instance.findLayers(() => true)[0].findText('Button').textContent;
 const use12pxIcon = size === 'S' && variant !== 'Text';
 let useButtonGroup = false;
 switch (type) {
@@ -54,7 +55,6 @@ switch (type) {
     props.push('icon={downloadIcon}');
     break;
   case 'Icon':
-    children = null;
     imports.push(`import addIcon from '@jetbrains/icons/add${use12pxIcon ? '-12px' : ''}'`);
     props.push('icon={addIcon}');
     break;

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

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI-(Internal)?node-id=226-2666
+const figma = require('figma');
+
+const instance = figma.selectedInstance;
+const labelType = instance.getString('Label');
+const children = instance.findConnectedInstances(() => true);
+const label = instance.findText('Group description').textContent;
+
+const isFormLabel = labelType === 'form';
+const imports = [
+  `import ControlLabel${isFormLabel ? ', {LabelType}' : ''} from '@jetbrains/ring-ui/components/control-label/control-label'`,
+];
+const labelProps = [];
+if (isFormLabel) {
+  labelProps.push('type={LabelType.FORM}');
+}
+
+const renderedChildren = children.map(child => {
+  const {example} = child.executeTemplate();
+  const [childImports, code] = example[0].code.split('\n\n');
+  return {imports: childImports, code};
+});
+
+export default {
+  id: 'checkbox-group',
+  example: figma.code`${imports.join('\n')}
+${renderedChildren[0].imports}
+
+<ControlLabel ${labelProps.map(prop => `${prop} `).join('')}>${label}</ControlLabel>
+${renderedChildren.map(({code}) => code).join('\n<br />\n')}`,
+};

package/components/checkbox/checkbox.d.ts

@@ -23,6 +23,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>;
+    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: T | null) => void>;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/components/checkbox/checkbox.figma.js

@@ -0,0 +1,38 @@
+// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=224%3A1943
+const figma = require('figma');
+
+const instance = figma.selectedInstance;
+const selected = instance.getString('Selected');
+const hasLabel = instance.getBoolean('Label');
+const label = instance.findText('Label').textContent;
+const hasHelpText = instance.getBoolean('Help Text');
+const helpText = instance.findText('Description').textContent;
+const state = instance.getString('State');
+
+const imports = ["import Checkbox from '@jetbrains/ring-ui/components/checkbox/checkbox'"];
+const props = [];
+switch (selected) {
+  case 'selected':
+    props.push('defaultChecked');
+    break;
+  case 'intermediate':
+    props.push('indeterminate', 'defaultChecked');
+    break;
+  default:
+}
+if (hasLabel) {
+  props.push(`label="${label}"`);
+}
+if (hasHelpText) {
+  props.push(`help="${helpText}"`);
+}
+if (state === 'Disabled') {
+  props.push('disabled');
+}
+
+export default {
+  id: 'checkbox',
+  example: figma.code`${imports.join('\n')}
+
+<Checkbox ${props.map(prop => `${prop} `).join('')}/>`,
+};

package/components/error-bubble/error-bubble.css

@@ -19,7 +19,7 @@
   min-height: calc(var(--ring-unit) * 4);
   padding: calc(var(--ring-unit) - 1px) calc(var(--ring-unit) * 1.5 - 1px);
 
-  white-space: nowrap;
+  white-space: pre-wrap;
 
   color: var(--ring-error-color);
 

package/components/error-bubble/error-bubble.d.ts

@@ -1,7 +1,7 @@
 import { PureComponent, ReactElement } from 'react';
 export type ErrorBubbleProps<P> = Partial<P> & {
     className?: string | null | undefined;
-    children: ReactElement<P> | ReactElement<P>[];
+    children?: ReactElement<P> | ReactElement<P>[];
     error?: string | null | undefined;
 };
 /**

package/components/error-bubble/error-bubble.figma.js

@@ -0,0 +1,15 @@
+// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI-(Internal)?node-id=1228-2869
+const figma = require('figma');
+
+const instance = figma.selectedInstance;
+const error = instance.findLayers(() => true)[0].textContent;
+
+const imports = ["import ErrorBubble from '@jetbrains/ring-ui/components/error-bubble/error-bubble'"];
+const props = [`error={\`${error}\``];
+
+export default {
+  id: 'error-bubble',
+  example: figma.code`${imports.join('\n')}
+
+<ErrorBubble ${props.map(prop => `${prop} `).join('')}/>`,
+};

package/components/error-bubble/error-bubble.js

@@ -11,6 +11,7 @@ export default class ErrorBubble extends PureComponent {
     render() {
         const { children, className, ...restProps } = this.props;
         const errorBubbleClasses = classNames(styles.errorBubble, className);
-        return (_jsxs("div", { className: styles.errorBubbleWrapper, "data-test": "ring-error-bubble-wrapper", children: [Children.map(children, (child) => cloneElement(child, { ...child.props, ...restProps })), restProps.error && (_jsx(Popup, { trapFocus: false, className: styles.errorBubblePopup, hidden: false, attached: false, directions: [Directions.RIGHT_CENTER, Directions.RIGHT_BOTTOM, Directions.RIGHT_TOP], children: _jsx("div", { className: errorBubbleClasses, "data-test": "ring-error-bubble", children: restProps.error }) }))] }));
+        return (_jsxs("div", { className: styles.errorBubbleWrapper, "data-test": "ring-error-bubble-wrapper", children: [children &&
+                    Children.map(children, (child) => cloneElement(child, { ...child.props, ...restProps })), restProps.error && (_jsx(Popup, { trapFocus: false, className: styles.errorBubblePopup, hidden: false, attached: false, directions: [Directions.RIGHT_CENTER, Directions.RIGHT_BOTTOM, Directions.RIGHT_TOP], children: _jsx("div", { className: errorBubbleClasses, "data-test": "ring-error-bubble", children: restProps.error }) }))] }));
     }
 }

package/components/global/variables.css

@@ -39,18 +39,26 @@
   --ring-main-hover-color: rgb(var(--ring-main-hover-components)); /* #3369d6 */
   --ring-main-success-components: 32, 138, 60;
   --ring-main-success-color: rgb(var(--ring-main-success-components)); /* #208A3C */
-  --ring-main-success-hover-components: 31, 128, 57;
-  --ring-main-success-hover-color: rgb(var(--ring-main-success-hover-components)); /* #1F8039 */
+  --ring-main-success-hover-components: 31, 117, 54;
+  --ring-main-success-hover-color: rgb(var(--ring-main-success-hover-components)); /* #1F7536 */
   --ring-main-error-components: 204, 54, 69;
   --ring-main-error-color: rgb(var(--ring-main-error-components)); /* #CC3645 */
-  --ring-main-error-hover-components: 188, 48, 62;
-  --ring-main-error-hover-color: rgb(var(--ring-main-error-hover-components)); /* #BC303E */
+  --ring-main-error-hover-components: 173, 43, 56;
+  --ring-main-error-hover-color: rgb(var(--ring-main-error-hover-components)); /* #AD2B38 */
+  --ring-main-warning-components: 229, 109, 23;
+  --ring-main-warning-color: rgb(var(--ring-main-warning-components)); /* #E56D17 */
+  --ring-main-warning-hover-components: 206, 97, 23;
+  --ring-main-warning-hover-color: rgb(var(--ring-main-warning-hover-components)); /* #CE6117 */
   --ring-icon-error-components: 204, 54, 69;
   --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #CC3645 */ /* TODO: remove in 8.0 in favor of --ring-error-color */
-  --ring-icon-warning-components: 164, 103, 4;
-  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #A46704 */ /* TODO: remove in 8.0 in favor of --ring-warning-color */
-  --ring-icon-success-components: 31, 117, 54;
-  --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #1F7536 */ /* TODO: remove in 8.0 in favor of --ring-success-color */
+  --ring-icon-warning-components: 229, 109, 23;
+  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #E56D17 */
+  --ring-icon-success-components: 32, 138, 60;
+  --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #208A3C */
+  --ring-icon-highlight-components: 255, 175, 15;
+  --ring-icon-highlight-color: rgb(var(--ring-icon-highlight-components)); /* #FFAF0F */
+  --ring-icon-highlight-hover-components: 223, 147, 3;
+  --ring-icon-highlight-hover-color: rgb(var(--ring-icon-highlight-hover-components)); /* #DF9303 */
   --ring-pale-control-components: 194, 214, 252;
   --ring-pale-control-color: rgb(var(--ring-pale-control-components)); /* #C2D6FC */
   --ring-popup-border-components: 0, 28, 54;
@@ -81,10 +89,10 @@
   --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #223C72 */
   --ring-error-components: 204, 54, 69;
   --ring-error-color: rgb(var(--ring-error-components)); /* #CC3645 */
-  --ring-warning-components: 164, 103, 4;
-  --ring-warning-color: rgb(var(--ring-warning-components)); /* #A46704 */
+  --ring-warning-components: 184, 85, 22;
+  --ring-warning-color: rgb(var(--ring-warning-components)); /* #B85516 */ /* Prefer using warning icon + regular text color */
   --ring-success-components: 31, 117, 54;
-  --ring-success-color: rgb(var(--ring-success-components)); /* #1F7536 */
+  --ring-success-color: rgb(var(--ring-success-components)); /* #1F7536 */ /* Prefer using success icon + regular text color */
   --ring-text-components: 39, 40, 46;
   --ring-text-color: rgb(var(--ring-text-components)); /* #27282E */
   --ring-active-text-color: var(--ring-text-color);
@@ -117,8 +125,10 @@
   --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #D3D5DB */
   --ring-removed-background-components: 250, 212, 216;
   --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #FAD4D8 */
-  --ring-warning-background-components: 255, 241, 209;
-  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #FFF1D1 */
+  --ring-warning-background-components: 252, 230, 214;
+  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #FCE6D6 */
+  --ring-highlight-background-components: 255, 241, 209;
+  --ring-highlight-background-color: rgb(var(--ring-highlight-background-components)); /* #FFF1D1 */
   --ring-added-background-components: 197, 229, 204;
   --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #C5E5CC */
   --ring-disabled-background-components: 247, 248, 250;
@@ -133,10 +143,12 @@
   --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #FFFFFF50 */
   --ring-removed-subtle-background-components: 255, 247, 247;
   --ring-removed-subtle-background-color: rgb(var(--ring-removed-subtle-background-components)); /* #FFF7F7 */
-  --ring-warning-subtle-background-components: 255, 250, 235;
-  --ring-warning-subtle-background-color: rgb(var(--ring-warning-subtle-background-components)); /* #FFFAEB */
-  --ring-added-subtle-background-components: 242, 252, 243;
-  --ring-added-subtle-background-color: rgb(var(--ring-added-subtle-background-components)); /* #F2FCF3 */
+  --ring-warning-subtle-background-components: 255, 244, 235;
+  --ring-warning-subtle-background-color: rgb(var(--ring-warning-subtle-background-components)); /* #FFF4EB */
+  --ring-highlight-subtle-background-components: 255, 246, 222;
+  --ring-highlight-subtle-background-color: rgb(var(--ring-highlight-subtle-background-components)); /* #FFF6DE */
+  --ring-added-subtle-background-components: 230, 247, 233;
+  --ring-added-subtle-background-color: rgb(var(--ring-added-subtle-background-components)); /* #E6F7E9 */
 
   /* Code */
   --ring-code-background-color: var(--ring-content-background-color);

package/components/global/variables_dark.css

@@ -35,16 +35,24 @@
   --ring-main-success-color: rgb(var(--ring-main-success-components)); /* #57965C */
   --ring-main-success-hover-components: 78, 128, 82;
   --ring-main-success-hover-color: rgb(var(--ring-main-success-hover-components)); /* #4E8052 */
-  --ring-main-error-components: 189, 87, 87;
-  --ring-main-error-color: rgb(var(--ring-main-error-components)); /* #BD5757 */
-  --ring-main-error-hover-components: 156, 78, 78;
-  --ring-main-error-hover-color: rgb(var(--ring-main-error-hover-components)); /* #9C4E4E */
+  --ring-main-error-components: 219, 92, 92;
+  --ring-main-error-color: rgb(var(--ring-main-error-components)); /* #DB5C5C */
+  --ring-main-error-hover-components: 189, 87, 87;
+  --ring-main-error-hover-color: rgb(var(--ring-main-error-hover-components)); /* #BD5757 */
+  --ring-main-warning-components: 224, 136, 85;
+  --ring-main-warning-color: rgb(var(--ring-main-warning-components)); /* #E08855 */
+  --ring-main-warning-hover-components: 199, 125, 85;
+  --ring-main-warning-hover-color: rgb(var(--ring-main-warning-hover-components)); /* #C77D55 */
   --ring-icon-error-components: 227, 119, 116;
   --ring-icon-error-color: rgb(var(--ring-icon-error-components)); /* #E37774 */ /* TODO: remove in 8.0 in favor of --ring-error-color */
-  --ring-icon-warning-components: 242, 197, 92;
-  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #F2C55C */ /* TODO: remove in 8.0 in favor of --ring-warning-color */
-  --ring-icon-success-components: 115, 189, 121;
-  --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #73BD79 */ /* TODO: remove in 8.0 in favor of --ring-success-color */
+  --ring-icon-warning-components: 224, 136, 85;
+  --ring-icon-warning-color: rgb(var(--ring-icon-warning-components)); /* #E08855 */
+  --ring-icon-success-components: 95, 173, 101;
+  --ring-icon-success-color: rgb(var(--ring-icon-success-components)); /* #5FAD65 */
+  --ring-icon-highlight-components: 214, 174, 88;
+  --ring-icon-highlight-color: rgb(var(--ring-icon-highlight-components)); /* #D6AE58 */
+  --ring-icon-highlight-hover-components: 186, 151, 82;
+  --ring-icon-highlight-hover-color: rgb(var(--ring-icon-highlight-hover-components)); /* #BA9752 */
   --ring-popup-border-components: 57, 59, 64;
   --ring-popup-border-color: rgb(var(--ring-popup-border-components)); /* #393B40 */
   --ring-popup-shadow-color: rgba(0, 0, 0, 0.31);
@@ -69,10 +77,10 @@
   --ring-link-hover-color: rgb(var(--ring-link-hover-components)); /* #6B9BFA */
   --ring-error-components: 227, 119, 116;
   --ring-error-color: rgb(var(--ring-error-components)); /* #E37774 */
-  --ring-warning-components: 242, 197, 92;
-  --ring-warning-color: rgb(var(--ring-warning-components)); /* #F2C55C */
-  --ring-success-components: 115, 189, 121;
-  --ring-success-color: rgb(var(--ring-success-components)); /* #73BD79 */
+  --ring-warning-components: 224, 136, 85;
+  --ring-warning-color: rgb(var(--ring-warning-components)); /* #E08855 */ /* Prefer using warning icon + regular text color */
+  --ring-success-components: 95, 173, 101;
+  --ring-success-color: rgb(var(--ring-success-components)); /* #5FAD65 */ /* Prefer using success icon + regular text color */
   --ring-text-components: 223, 225, 229;
   --ring-text-color: rgb(var(--ring-text-components)); /* #DFE1E5 */
   --ring-active-text-components: 255, 255, 255;
@@ -104,8 +112,10 @@
   --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #393B40 */
   --ring-removed-background-components: 94, 56, 56;
   --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #5E3838 */
-  --ring-warning-background-components: 94, 77, 51;
-  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #5E4D33 */
+  --ring-warning-background-components: 97, 68, 56;
+  --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #614438 */
+  --ring-highlight-background-components: 94, 77, 51;
+  --ring-highlight-background-color: rgb(var(--ring-highlight-background-components)); /* #5E4D33 */
   --ring-added-background-components: 55, 82, 57;
   --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #375239 */
   --ring-disabled-background-components: 57, 59, 64;
@@ -119,8 +129,10 @@
   --ring-table-loader-background-color: rgba(var(--ring-content-background-components), 0.5); /* #2B2D3050 */
   --ring-removed-subtle-background-components: 64, 41, 41;
   --ring-removed-subtle-background-color: rgb(var(--ring-removed-subtle-background-components)); /* #402929 */
-  --ring-warning-subtle-background-components: 61, 50, 35;
-  --ring-warning-subtle-background-color: rgb(var(--ring-warning-subtle-background-components)); /* #3D3223 */
+  --ring-warning-subtle-background-components: 69, 50, 43;
+  --ring-warning-subtle-background-color: rgb(var(--ring-warning-subtle-background-components)); /* #45322B */
+  --ring-highlight-subtle-background-components: 61, 50, 35;
+  --ring-highlight-subtle-background-color: rgb(var(--ring-highlight-subtle-background-components)); /* #3D3223 */
   --ring-added-subtle-background-components: 37, 54, 39;
   --ring-added-subtle-background-color: rgb(var(--ring-added-subtle-background-components)); /* #253627 */
 

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;
 }
@@ -64,7 +65,7 @@ export declare class Input extends PureComponent<InputProps> {
     stretch(el: HTMLElement | null | undefined): void;
     adapt(): void;
     inputRef: (el: HTMLInputElement | HTMLTextAreaElement | null) => void;
-    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement | HTMLTextAreaElement> | undefined)[]) => (value: HTMLInputElement | HTMLTextAreaElement | null) => void>;
+    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement | HTMLTextAreaElement> | undefined)[]) => (value: T | null) => void>;
     clear: (e: React.MouseEvent<HTMLButtonElement>) => void;
     handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;

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/select/select.d.ts

@@ -262,7 +262,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>;
+    composedFilterRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: T_1 | null) => void>;
     getShortcutsMap(): {
         enter: () => true | undefined;
         esc: (event: KeyboardEvent) => boolean | undefined;

package/components/select/select__popup.d.ts

@@ -126,7 +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>;
+    composedFilterRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: T_1 | null) => void>;
     shortcutsScope: string;
     shortcutsMap: {
         tab: (event: Event) => void;

package/components/table/row.d.ts

@@ -55,7 +55,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>;
+    composedRowRef: import("memoize-one").MemoizedFn<(...refs: (React.Ref<HTMLElement> | undefined)[]) => (value: T_1 | null) => void>;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export type RowAttrs<T extends SelectionItem> = React.JSX.LibraryManagedAttributes<typeof Row, RowProps<T>>;

package/components/table/table.d.ts

@@ -50,7 +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;
+    renderLoader?: ((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, customLoader, } = 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, renderLoader, } = 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: customLoader ? customLoader(loaderClassName) : _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: renderLoader ? renderLoader(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.32",
+  "version": "7.0.34",
   "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",
@@ -98,28 +98,28 @@
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
     "@jetbrains/rollup-css-plugin": "./packages/rollup-css-plugin",
     "@jetbrains/stylelint-config": "^4.0.2",
-    "@primer/octicons": "^19.15.0",
+    "@primer/octicons": "^19.15.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@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.6.4",
+    "@storybook/addon-docs": "8.6.4",
+    "@storybook/addon-essentials": "8.6.4",
+    "@storybook/addon-themes": "^8.6.4",
+    "@storybook/components": "8.6.4",
     "@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.6.4",
+    "@storybook/preview-api": "8.6.4",
+    "@storybook/react": "8.6.4",
+    "@storybook/react-webpack5": "8.6.4",
+    "@storybook/test-runner": "^0.22.0",
+    "@storybook/theming": "8.6.4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/chai": "^5.0.1",
-    "@types/chai-as-promised": "^8.0.1",
+    "@types/chai": "^5.2.0",
+    "@types/chai-as-promised": "^8.0.2",
     "@types/chai-dom": "0.0.10",
     "@types/chai-enzyme": "^0.6.13",
     "@types/enzyme": "^3.10.18",
@@ -127,39 +127,39 @@
     "@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",
-    "@vitest/eslint-plugin": "^1.1.31",
+    "@vitest/eslint-plugin": "^1.1.36",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
-    "acorn": "^8.14.0",
+    "acorn": "^8.14.1",
     "axe-playwright": "^2.1.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001700",
+    "caniuse-lite": "^1.0.30001702",
     "chai": "^5.2.0",
     "chai-as-promised": "^8.0.1",
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^1.0.0-rc.12",
-    "chromatic": "^11.25.2",
-    "core-js": "^3.40.0",
+    "chromatic": "^11.27.0",
+    "core-js": "^3.41.0",
     "cpy-cli": "^5.0.0",
     "dotenv-cli": "^8.0.0",
     "enzyme": "^3.11.0",
-    "eslint": "^9.20.1",
-    "eslint-config-prettier": "^10.0.1",
+    "eslint": "^9.21.0",
+    "eslint-config-prettier": "^10.1.1",
     "eslint-formatter-jslint-xml": "^8.40.0",
     "eslint-import-resolver-webpack": "^0.13.10",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-storybook": "^0.11.3",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "^0.11.4",
     "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,26 +171,26 @@
     "markdown-it": "^14.1.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
-    "prettier": "^3.5.1",
+    "prettier": "^3.5.3",
     "raw-loader": "^4.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-test-renderer": "^19.0.0",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.34.8",
+    "rollup": "^4.34.9",
     "rollup-plugin-clear": "^2.0.7",
     "sinon": "^19.0.2",
     "sinon-chai": "^4.0.0",
     "storage-mock": "^2.1.0",
-    "storybook": "8.5.6",
-    "stylelint": "^16.14.1",
+    "storybook": "8.6.4",
+    "stylelint": "^16.15.0",
     "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",
+    "terser-webpack-plugin": "^5.3.14",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "^8.26.0",
+    "vitest": "^3.0.8",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
     "webpack": "^5.98.0",
@@ -220,13 +220,13 @@
     "@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-loader": "10.0.0",
     "babel-plugin-transform-define": "^2.1.4",
     "browserslist": "^4.24.4",
     "change-case": "^4.1.1",
@@ -244,14 +244,14 @@
     "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",
-    "react-movable": "^3.4.0",
+    "postcss-preset-env": "^10.1.5",
+    "react-movable": "^3.4.1",
     "react-virtualized": "^9.22.6",
     "react-waypoint": "^10.3.0",
     "scrollbar-width": "^3.1.1",