@jetbrains/ring-ui 7.0.34 → 7.0.36

package/components/button/button.d.ts

@@ -23,6 +23,9 @@ export interface ButtonBaseProps {
     dropdown?: boolean | null | undefined;
     disabled?: boolean | undefined;
     icon?: string | IconType | null | undefined;
+    /**
+     * @deprecated Use icons with appropriate intrinsic sizes instead
+     */
     iconSize?: IconProps['size'];
     iconClassName?: string | null | undefined;
     iconSuppressSizeWarning?: boolean | null | undefined;
@@ -42,6 +45,9 @@ export type ButtonProps = ButtonButtonProps | ButtonLinkProps;
  * A component for displaying variously styled buttons.
  */
 export declare class Button extends PureComponent<ButtonProps> {
+    /**
+     * @deprecated Use icons with appropriate intrinsic sizes instead
+     */
     static IconSize: typeof Size;
     static contextType: React.Context<ControlsHeight>;
     context: React.ContextType<typeof ControlsHeightContext>;

package/components/button/button.js

@@ -17,6 +17,9 @@ const warnText = deprecate(() => { }, 'Button: "text" prop is deprecated and wil
  * A component for displaying variously styled buttons.
  */
 export class Button extends PureComponent {
+    /**
+     * @deprecated Use icons with appropriate intrinsic sizes instead
+     */
     static IconSize = Size;
     static contextType = ControlsHeightContext;
     buttonRef = createRef();

package/components/code/highlight.css

@@ -29,13 +29,6 @@
     color: var(--ring-code-meta-color);
   }
 
-  & :global(.hljs-tag) {
-    background: var(--ring-code-tag-background-color);
-    box-shadow:
-      0 1px var(--ring-code-tag-background-color),
-      0 -1px var(--ring-code-tag-background-color);
-  }
-
   & :global(.hljs-section),
   & :global(.hljs-literal),
   & :global(.hljs-keyword),

package/components/dialog/dialog.js

@@ -124,7 +124,7 @@ export default class Dialog extends PureComponent {
                                     [styles.closeIconInside]: closeButtonInside,
                                 }), onClick: this.onCloseClick, title: closeButtonTitle, "aria-label": closeButtonTitle || 'close dialog' }))] }) })] }));
         if (native) {
-            return (_jsx("dialog", { className: classNames(styles.nativeDialog, className), ref: this.nativeDialog, children: _jsx(PopupTarget, { id: this.uid, className: styles.popupTarget, children: target => (_jsxs(_Fragment, { children: [content, target] })) }) }));
+            return (_jsx("dialog", { className: classNames(styles.nativeDialog, className), ref: this.nativeDialog, "data-rg-modal-dialog-container": modal ? '' : undefined, children: _jsx(PopupTarget, { id: this.uid, className: styles.popupTarget, children: target => (_jsxs(_Fragment, { children: [content, target] })) }) }));
         }
         return (show && (_jsx(PopupTargetContext.Consumer, { children: contextTarget => {
                 let targetElement = document.body;
@@ -137,7 +137,7 @@ export default class Dialog extends PureComponent {
                         targetElement = container;
                     }
                 }
-                return createPortal(_jsx(PopupTarget, { id: this.uid, className: styles.popupTarget, children: target => (_jsxs(TabTrap, { trapDisabled: !trapFocus, "data-test": dataTests('ring-dialog-container', dataTest), ref: this.dialogRef, className: classes, role: "presentation", ...restProps, children: [content, target] })) }), targetElement);
+                return createPortal(_jsx(PopupTarget, { id: this.uid, className: styles.popupTarget, children: target => (_jsxs(TabTrap, { trapDisabled: !trapFocus, "data-test": dataTests('ring-dialog-container', dataTest), "data-rg-modal-dialog-container": "", ref: this.dialogRef, className: classes, role: "presentation", ...restProps, children: [content, target] })) }), targetElement);
             } })));
     }
 }

package/components/dialog/dialog__body-scroll-preventer.js

@@ -14,7 +14,9 @@ const prevent = (key) => {
         getComputedStyle(document.documentElement).overflowY === 'scroll';
     document.documentElement.classList.add(styles.documentWithoutScroll);
     const scrollWidth = scrollbarWidth();
-    if (documentHasScroll && scrollWidth != null && scrollWidth > 0) {
+    const { scrollbarGutter } = getComputedStyle(document.documentElement);
+    const documentHasScrollbarGutter = scrollbarGutter === 'stable' || scrollbarGutter === 'both-edges';
+    if (documentHasScroll && scrollWidth != null && scrollWidth > 0 && !documentHasScrollbarGutter) {
         previousDocumentWidth = document.documentElement.style.width;
         document.documentElement.style.width = `calc(100% - ${scrollWidth}px)`;
     }

package/components/global/variables.css

@@ -154,10 +154,9 @@
   --ring-code-background-color: var(--ring-content-background-color);
   --ring-code-components: 0, 0, 0;
   --ring-code-color: rgb(var(--ring-code-components)); /* #000000 */
-  --ring-code-comment-components: 140, 140, 140;
-  --ring-code-comment-color: rgb(var(--ring-code-comment-components)); /* #8C8C8C */
-  --ring-code-meta-components: 158, 136, 13;
-  --ring-code-meta-color: rgb(var(--ring-code-meta-components)); /* #9E880D */
+  --ring-code-comment-color: var(--ring-secondary-color);
+  --ring-code-meta-components: 145, 76, 7;
+  --ring-code-meta-color: rgb(var(--ring-code-meta-components)); /* #914C07 */
   --ring-code-keyword-components: 0, 51, 179;
   --ring-code-keyword-color: rgb(var(--ring-code-keyword-components)); /* #0033B3 */
   --ring-code-tag-background-components: 235, 236, 240;

package/components/global/variables_dark.css

@@ -141,10 +141,9 @@
   --ring-code-background-color: rgb(var(--ring-code-background-components)); /* #1E1F22 */
   --ring-code-components: 189, 192, 201;
   --ring-code-color: rgb(var(--ring-code-components)); /* #BDC0C9 */
-  --ring-code-comment-components: 110, 121, 138;
-  --ring-code-comment-color: rgb(var(--ring-code-comment-components)); /* #6E798A */
-  --ring-code-meta-components: 184, 177, 103;
-  --ring-code-meta-color: rgb(var(--ring-code-meta-components)); /* #B8B167 */
+  --ring-code-comment-color: var(--ring-secondary-color);
+  --ring-code-meta-components: 86, 168, 245;
+  --ring-code-meta-color: rgb(var(--ring-code-meta-components)); /* #56A8F5 */
   --ring-code-keyword-components: 214, 154, 107;
   --ring-code-keyword-color: rgb(var(--ring-code-keyword-components)); /* #D69A6B */
   --ring-code-tag-background-components: 67, 69, 74;

package/components/icon/icon.d.ts

@@ -7,8 +7,17 @@ export type IconType = ComponentType<SVGAttributes<SVGSVGElement>>;
 export interface IconProps extends HTMLAttributes<HTMLElement> {
     color: Color;
     glyph: string | IconType | null;
+    /**
+     * @deprecated Use icons with appropriate intrinsic sizes instead
+     */
     height?: number | undefined;
+    /**
+     * @deprecated Use icons with appropriate intrinsic sizes instead
+     */
     size?: Size | number | null | undefined;
+    /**
+     * @deprecated Use icons with appropriate intrinsic sizes instead
+     */
     width?: number | undefined;
     loading?: boolean | null | undefined;
     suppressSizeWarning?: boolean | null | undefined;
@@ -20,6 +29,9 @@ export default class Icon extends PureComponent<IconProps> {
         glyph: string;
     };
     static Color: typeof Color;
+    /**
+     * @deprecated Use icons with appropriate intrinsic sizes instead
+     */
     static Size: typeof Size;
     warnSize(): void;
     getStyle(): {

package/components/icon/icon.js

@@ -18,6 +18,9 @@ export default class Icon extends PureComponent {
         glyph: '',
     };
     static Color = Color;
+    /**
+     * @deprecated Use icons with appropriate intrinsic sizes instead
+     */
     static Size = Size;
     warnSize() {
         if (this.props.suppressSizeWarning) {

package/components/icon/icon__constants.d.ts

@@ -13,6 +13,7 @@ export declare enum Color {
 }
 /**
  * @enum {number}
+ * @deprecated Use icons with appropriate intrinsic sizes instead
  */
 export declare enum Size {
     Size12 = 12,

package/components/icon/icon__constants.js

@@ -14,6 +14,7 @@ export var Color;
 })(Color || (Color = {}));
 /**
  * @enum {number}
+ * @deprecated Use icons with appropriate intrinsic sizes instead
  */
 export var Size;
 (function (Size) {

package/components/input/input.figma.js

@@ -0,0 +1,74 @@
+// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI-(Internal)?node-id=7538-7763
+const figma = require('figma');
+
+const instance = figma.selectedInstance;
+const size = instance.getString('Size');
+const state = instance.getString('State');
+const formVariant = instance.getBoolean('Form variant');
+const icon = instance.getBoolean('Icon');
+const clearable = instance.getBoolean('Clearable');
+const hasLabel = instance.getBoolean('Label');
+const label = instance.findText('Label').textContent;
+const hasHelpText = instance.getBoolean('Help text');
+const helpText = instance.findText('Help text').textContent;
+const hasText = instance.getBoolean('Text');
+const text = instance.findText('Text').textContent;
+const hasPlaceholder = instance.getBoolean('Placeholder');
+const placeholder = instance.findText('Placeholder').textContent;
+
+const imports = ["import Input from '@jetbrains/ring-ui/components/input/input'"];
+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 (state) {
+  case 'disabled':
+    props.push('disabled');
+    break;
+  case 'error':
+    props.push('error=""');
+    break;
+  default:
+}
+
+if (formVariant) {
+  imports.push("import {LabelType} from '../control-label/control-label'");
+  props.push('labelType={LabelType.FORM}');
+}
+
+if (icon) {
+  imports.push("import searchIcon from '@jetbrains/icons/search'");
+  props.push('icon={searchIcon}');
+}
+
+if (clearable) {
+  props.push('onClear={() => {}}');
+}
+
+if (hasLabel) {
+  props.push(`label="${label}"`);
+}
+
+if (hasHelpText) {
+  props.push(`help="${helpText}"`);
+}
+
+if (hasText) {
+  props.push(`defaultValue="${text}"`);
+}
+
+if (hasPlaceholder) {
+  props.push(`placeholder="${placeholder}"`);
+}
+
+export default {
+  id: 'input',
+  example: figma.code`${imports.join('\n')}
+
+<Input ${props.map(prop => `${prop} `).join('')}/>`,
+};

package/components/list/consts.d.ts

@@ -10,7 +10,7 @@ export declare enum Type {
     SEPARATOR = 0,
     LINK = 1,
     ITEM = 2,
-    HINT = 3,
+    HINT = 3,// doesn't work, TODO remove in 8.0
     CUSTOM = 4,
     TITLE = 5,
     MARGIN = 6
@@ -42,6 +42,9 @@ export type ListDataItem<T = unknown> = T & Partial<Omit<LinkProps, 'onClick' |
     subavatar?: string | null | undefined;
     glyph?: IconType | string | null | undefined;
     icon?: string | undefined;
+    /**
+     * @deprecated Use icons with appropriate intrinsic sizes instead
+     */
     iconSize?: Size | null | undefined;
     suppressSizeWarning?: boolean | null | undefined;
     rightGlyph?: IconType | string | null | undefined;

package/components/list/list.js

@@ -115,16 +115,21 @@ export default class List extends Component {
         }
     }
     shouldComponentUpdate(nextProps, nextState) {
-        return (nextProps !== this.props ||
+        return (Object.keys(nextProps).some(key => !Object.is(nextProps[key], this.props[key])) ||
             Object.keys(nextState).some(key => nextState[key] !== this.state[key]));
     }
     componentDidUpdate(prevProps) {
         if (this.virtualizedList && prevProps.data !== this.props.data) {
             this.virtualizedList.recomputeRowHeights();
         }
+        const { activeIndex } = this.state;
+        const isActiveItemRetainedPosition = activeIndex
+            ? prevProps.data[activeIndex]?.key === this.props.data[activeIndex]?.key
+            : false;
         if (this.props.activeIndex == null &&
             getDataHash(this.props.data) !== getDataHash(prevProps.data) &&
-            shouldActivateFirstItem(this.props)) {
+            shouldActivateFirstItem(this.props) &&
+            !isActiveItemRetainedPosition) {
             this.activateFirst();
         }
         this.checkOverflow();

package/components/list/list__custom.js

@@ -18,6 +18,6 @@ export default class ListCustom extends PureComponent {
         }, this.props['data-test']);
         const content = typeof template === 'function' ? template(this.props) : template;
         const TagName = tagName || 'span';
-        return (_jsx(TagName, { role: role || 'button', tabIndex: tabIndex, onClick: onClick, onKeyPress: this.handleKeyPress, onMouseOver: onMouseOver, onFocus: onMouseOver, onMouseUp: onMouseUp, className: classes, "data-test": dataTest, children: content }));
+        return (_jsx(TagName, { role: role || 'button', "aria-disabled": disabled, tabIndex: tabIndex, onClick: onClick, onKeyPress: this.handleKeyPress, onMouseOver: onMouseOver, onFocus: onMouseOver, onMouseUp: onMouseUp, className: classes, "data-test": dataTest, children: content }));
     }
 }

package/components/query-assist/query-assist.css

@@ -83,7 +83,7 @@
 }
 
 .input {
-  overflow: hidden;
+  overflow: auto;
 
   flex-grow: 1;
 

package/components/user-agreement/service.js

@@ -55,7 +55,12 @@ export default class UserAgreementService {
     userConsent = DEFAULT_CONSENT;
     intervalId;
     startChecking = () => {
-        this.intervalId = window.setInterval(this.checkConsentAndShowDialog, this.interval);
+        this.intervalId = window.setInterval(() => this.checkConsentAndShowDialog().catch(reason => {
+            if (reason === 'Postponed') {
+                return;
+            }
+            throw reason;
+        }), this.interval);
         window.addEventListener('storage', this.onStorageEvent);
         this.checkConsentAndShowDialog();
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.34",
+  "version": "7.0.36",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -85,8 +85,8 @@
   },
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@babel/cli": "^7.26.4",
-    "@babel/eslint-parser": "^7.26.8",
+    "@babel/cli": "^7.27.0",
+    "@babel/eslint-parser": "^7.27.0",
     "@babel/plugin-syntax-import-assertions": "^7.26.0",
     "@csstools/css-parser-algorithms": "^3.0.4",
     "@csstools/stylelint-no-at-nest-rule": "^4.0.0",
@@ -101,28 +101,26 @@
     "@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-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
-    "@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/addon-a11y": "8.6.11",
+    "@storybook/addon-docs": "8.6.11",
+    "@storybook/addon-essentials": "8.6.11",
+    "@storybook/addon-themes": "^8.6.11",
+    "@storybook/components": "8.6.11",
     "@storybook/csf": "^0.1.13",
-    "@storybook/manager-api": "8.6.4",
-    "@storybook/preview-api": "8.6.4",
-    "@storybook/react": "8.6.4",
-    "@storybook/react-webpack5": "8.6.4",
+    "@storybook/manager-api": "8.6.11",
+    "@storybook/preview-api": "8.6.11",
+    "@storybook/react": "8.6.11",
+    "@storybook/react-webpack5": "8.6.11",
     "@storybook/test-runner": "^0.22.0",
-    "@storybook/theming": "8.6.4",
+    "@storybook/theming": "8.6.11",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/chai": "^5.2.0",
+    "@types/chai": "^5.2.1",
     "@types/chai-as-promised": "^8.0.2",
     "@types/chai-dom": "0.0.10",
-    "@types/chai-enzyme": "^0.6.13",
-    "@types/enzyme": "^3.10.18",
     "@types/eslint__js": "^8.42.3",
     "@types/markdown-it": "^14.1.2",
     "@types/react": "^18.3.12",
@@ -131,32 +129,29 @@
     "@types/sinon-chai": "^4.0.0",
     "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/eslint-plugin": "^1.1.36",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "@vitest/eslint-plugin": "^1.1.38",
     "acorn": "^8.14.1",
     "axe-playwright": "^2.1.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001702",
+    "caniuse-lite": "^1.0.30001707",
     "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.27.0",
     "core-js": "^3.41.0",
     "cpy-cli": "^5.0.0",
     "dotenv-cli": "^8.0.0",
-    "enzyme": "^3.11.0",
-    "eslint": "^9.21.0",
+    "eslint": "^9.23.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-prettier": "^5.2.5",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-storybook": "^0.11.4",
+    "eslint-plugin-storybook": "^0.12.0",
     "events": "^3.3.0",
     "glob": "^11.0.1",
     "globals": "^16.0.0",
@@ -167,7 +162,7 @@
     "jest": "~29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-teamcity": "^1.12.0",
-    "lint-staged": "^15.4.3",
+    "lint-staged": "^15.5.0",
     "markdown-it": "^14.1.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
@@ -175,22 +170,22 @@
     "raw-loader": "^4.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-test-renderer": "^19.0.0",
+    "react-test-renderer": "^19.1.0",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.34.9",
+    "rollup": "^4.38.0",
     "rollup-plugin-clear": "^2.0.7",
-    "sinon": "^19.0.2",
+    "sinon": "^20.0.0",
     "sinon-chai": "^4.0.0",
     "storage-mock": "^2.1.0",
-    "storybook": "8.6.4",
-    "stylelint": "^16.15.0",
+    "storybook": "8.6.11",
+    "stylelint": "^16.17.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.14",
     "typescript": "~5.8.2",
-    "typescript-eslint": "^8.26.0",
-    "vitest": "^3.0.8",
+    "typescript-eslint": "^8.29.0",
+    "vitest": "^3.1.1",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
     "webpack": "^5.98.0",
@@ -217,10 +212,10 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.26.9",
-    "@babel/preset-typescript": "^7.26.0",
+    "@babel/core": "^7.26.10",
+    "@babel/preset-typescript": "^7.27.0",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^5.7.0",
+    "@jetbrains/icons": "^5.8.0",
     "@jetbrains/postcss-require-hover": "^0.1.3",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",