@jetbrains/ring-ui 7.0.123 → 7.0.124

package/components/button-group/button-group.css

@@ -1,6 +1,6 @@
 @import '../global/variables.css';
 
-@value button, active as buttonActive, flat from '../button/button.css';
+@value button as buttonClass, active as buttonActive, flat from '../button/button.css';
 
 :root,
 :host {
@@ -37,7 +37,7 @@
   --ring-button-group-button-border-color: var(--ring-border-disabled-color);
 }
 
-.buttonGroup .button {
+.buttonGroup .buttonClass {
   position: relative;
 
   transition: none;
@@ -47,7 +47,7 @@
     0 -1px var(--ring-button-group-button-border-color) inset;
 }
 
-.buttonGroup .button[disabled] {
+.buttonGroup .buttonClass[disabled] {
   /* stylelint-disable selector-max-specificity */
   &::before,
   &::after {
@@ -75,8 +75,8 @@
   /* stylelint-enable */
 }
 
-.buttonGroup > .button:first-child,
-.buttonGroup > :first-child .button {
+.buttonGroup > .buttonClass:first-child,
+.buttonGroup > :first-child .buttonClass {
   box-shadow:
     0 1px var(--ring-button-group-button-border-color) inset,
     0 -1px var(--ring-button-group-button-border-color) inset,
@@ -88,8 +88,8 @@
   }
 }
 
-.buttonGroup > .button:last-child,
-.buttonGroup > :last-child .button {
+.buttonGroup > .buttonClass:last-child,
+.buttonGroup > :last-child .buttonClass {
   box-shadow:
     0 1px var(--ring-button-group-button-border-color) inset,
     0 -1px var(--ring-button-group-button-border-color) inset,
@@ -101,8 +101,8 @@
   }
 }
 
-.buttonGroup > .button:only-child,
-.buttonGroup > :only-child .button {
+.buttonGroup > .buttonClass:only-child,
+.buttonGroup > :only-child .buttonClass {
   box-shadow:
     0 1px var(--ring-button-group-button-border-color) inset,
     0 -1px var(--ring-button-group-button-border-color) inset,
@@ -116,15 +116,15 @@
 }
 
 /* stylelint-disable selector-max-specificity */
-.buttonGroup .button.button:hover:not(:disabled),
-.buttonGroup .button.button:active:not(:disabled) {
+.buttonGroup .buttonClass.buttonClass:hover:not(:disabled),
+.buttonGroup .buttonClass.buttonClass:active:not(:disabled) {
   --ring-button-border-radius-left: var(--ring-border-radius);
   --ring-button-border-radius-right: var(--ring-border-radius);
 
   box-shadow: var(--ring-button-shadow) var(--ring-button-border-color);
 }
 
-.buttonGroup .button.button:focus-visible {
+.buttonGroup .buttonClass.buttonClass:focus-visible {
   --ring-button-border-radius-left: var(--ring-border-radius);
   --ring-button-border-radius-right: var(--ring-border-radius);
 
@@ -133,14 +133,14 @@
     0 0 0 1px var(--ring-border-hover-color);
 }
 
-.buttonGroup .button.button.buttonActive {
+.buttonGroup .buttonClass.buttonClass.buttonActive {
   --ring-button-border-radius-left: var(--ring-border-radius);
   --ring-button-border-radius-right: var(--ring-border-radius);
 
   box-shadow: var(--ring-button-shadow) var(--ring-button-border-color);
 }
 
-.buttonGroup .button:focus-visible.buttonActive {
+.buttonGroup .buttonClass:focus-visible.buttonActive {
   --ring-button-border-radius-left: var(--ring-border-radius);
   --ring-button-border-radius-right: var(--ring-border-radius);
 
@@ -149,7 +149,7 @@
     0 0 0 1px var(--ring-border-hover-color);
 }
 
-.buttonGroup .button.buttonActive[disabled] {
+.buttonGroup .buttonClass.buttonActive[disabled] {
   box-shadow: var(--ring-button-shadow) var(--ring-border-hover-color);
 }
 /* stylelint-enable */
@@ -159,17 +159,17 @@
   composes: buttonGroup from '../button-toolbar/button-toolbar.css';
 }
 
-.common button {
+.common button:not(:where(.buttonClass)) {
   border-radius: 0;
 }
 
-.common .button {
+.common .buttonClass {
   --ring-button-border-radius-left: 0;
   --ring-button-border-radius-right: 0;
 }
 
 .split button,
-.split .button {
+.split .buttonClass {
   margin: 0 0 0 -1px;
 }
 
@@ -192,8 +192,8 @@
   border-bottom-left-radius: var(--ring-border-radius);
 }
 
-.common > .button:first-child,
-.common > :first-child .button {
+.common > .buttonClass:first-child,
+.common > :first-child .buttonClass {
   --ring-button-border-radius-left: var(--ring-border-radius);
 
   margin: 0;
@@ -204,8 +204,8 @@
   border-bottom-right-radius: var(--ring-border-radius);
 }
 
-.common > .button:last-child,
-.common > :last-child .button {
+.common > .buttonClass:last-child,
+.common > :last-child .buttonClass {
   --ring-button-border-radius-right: var(--ring-border-radius);
 }
 
@@ -218,7 +218,7 @@
 }
 
 .common {
-  & .button {
+  & .buttonClass {
     position: relative;
     z-index: var(--ring-button-group-default-z-index);
 

package/components/button-toolbar/button-toolbar.css

@@ -1,6 +1,6 @@
 @import '../global/variables.css';
 
-@value button from '../button/button.css';
+@value button as buttonClass from '../button/button.css';
 
 .buttonToolbar {
   display: inline-block;
@@ -13,7 +13,7 @@
 
 .buttonToolbar > button,
 .buttonToolbar > :global(.ring-button-group),
-.buttonToolbar > .button,
+.buttonToolbar > .buttonClass,
 .buttonToolbar > .buttonGroup,
 .buttonToolbar > .split,
 .buttonToolbar > .buttonToolbar {

package/components/contenteditable/contenteditable.js

@@ -1,5 +1,6 @@
 import { Component } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
+import { getTrustedHTML } from '../global/configuration';
 /**
  * @name ContentEditable
  */
@@ -23,7 +24,7 @@ class ContentEditableBase extends Component {
         return (<div {...props} ref={inputRef} 
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        disabled={disabled} role='textbox' tabIndex={disabled ? undefined : tabIndex} contentEditable={!this.props.disabled} dangerouslySetInnerHTML={{ __html }}/>);
+        disabled={disabled} role='textbox' tabIndex={disabled ? undefined : tabIndex} contentEditable={!this.props.disabled} dangerouslySetInnerHTML={{ __html: getTrustedHTML(__html) }}/>);
     }
 }
 const ContentEditable = ({ children, ...props }) => (<ContentEditableBase {...props} __html={renderToStaticMarkup(children)}/>);

package/components/global/configuration.d.ts

@@ -3,9 +3,14 @@ export declare enum ControlsHeight {
     M = "M",
     L = "L"
 }
+export interface RingUITrustedTypePolicy {
+    createHTML(html: string): TrustedHTML;
+}
 export interface RingUIConfiguration {
     controlsHeight?: ControlsHeight;
     popupsCssPositioning?: boolean;
+    trustedTypePolicy?: RingUITrustedTypePolicy | null;
 }
 export declare function configure(config: RingUIConfiguration): void;
 export declare function getConfiguration(): Required<RingUIConfiguration>;
+export declare function getTrustedHTML(html: string): string | TrustedHTML;

package/components/global/configuration.js

@@ -7,6 +7,7 @@ export var ControlsHeight;
 const globalConfiguration = {
     controlsHeight: ControlsHeight.M,
     popupsCssPositioning: true,
+    trustedTypePolicy: null,
 };
 export function configure(config) {
     if (config.controlsHeight !== undefined) {
@@ -15,7 +16,13 @@ export function configure(config) {
     if (config.popupsCssPositioning !== undefined) {
         globalConfiguration.popupsCssPositioning = config.popupsCssPositioning;
     }
+    if (config.trustedTypePolicy !== undefined) {
+        globalConfiguration.trustedTypePolicy = config.trustedTypePolicy;
+    }
 }
 export function getConfiguration() {
     return { ...globalConfiguration };
 }
+export function getTrustedHTML(html) {
+    return globalConfiguration.trustedTypePolicy?.createHTML(html) ?? html;
+}

package/components/icon/icon-svg.js

@@ -1,6 +1,7 @@
 // Inspired by https://github.com/sairion/svg-inline-react
 import { memo } from 'react';
 import classNames from 'classnames';
+import { getTrustedHTML } from '../global/configuration';
 import memoize from '../global/memoize';
 import styles from './icon.css';
 function convertReactSVGDOMProperty(str) {
@@ -27,7 +28,7 @@ function extractSVGProps(svgNode) {
 }
 const getSVGFromSource = memoize((src) => {
     const svgContainer = document.createElement('div');
-    svgContainer.innerHTML = src;
+    svgContainer.innerHTML = getTrustedHTML(src);
     const svg = svgContainer.firstElementChild;
     if (svg.remove) {
         svg.remove();
@@ -51,7 +52,7 @@ function IconSVG({ src, className, ...rest }) {
     }, className);
     const { props, html } = getSVGFromSource(src);
     return (<svg {...props} {...rest} className={glyphClasses} dangerouslySetInnerHTML={{
-            __html: html,
+            __html: getTrustedHTML(html),
         }}/>);
 }
 export default memo(IconSVG);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.123",
+  "version": "7.0.124",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -59,7 +59,7 @@
     "prelint-ci": "echo \"##teamcity[importData type='jslint' path='eslint-report.xml']\"",
     "lint-ci": "eslint --format jslint-xml . > eslint-report.xml && npm run stylelint-ci",
     "lint:js": "eslint",
-    "postbuild": "cpy './**/*.d.ts' ../dist --parents --cwd=components/",
+    "postbuild": "cpy './**/*.d.ts' ../dist --parents --cwd=components/ && node scripts/check-built-css.mjs",
     "_postinstall": "husky && npm run postinstall:gitconfig",
     "postinstall:gitconfig": "git config blame.ignoreRevsFile .git-blame-ignore-revs",
     "postpublish": "pinst --enable",
@@ -82,7 +82,7 @@
     "storybook-debug": "node --inspect-brk node_modules/@storybook/react/bin -p 9999",
     "stylelint": "stylelint --ignore-path .stylelintignore '**/*.css'",
     "stylelint-ci": "stylelint --ignore-path .stylelintignore --custom-formatter 'scripts/jslint-xml.js' '**/*.css' | xmlappend eslint-report.xml",
-    "test": "vitest src",
+    "test": "vitest src && npm test --workspace @jetbrains/rollup-css-plugin",
     "type-check": "(npm run type-check:create-d-ts && npm run type-check:main && npm run type-check:build) ; npm run type-check:cleanup-d-ts",
     "type-check:create-d-ts": "npx tcm src && npx tcm .storybook",
     "type-check:main": "tsc --noEmit -p tsconfig.json",
@@ -106,26 +106,26 @@
     "@eslint/compat": "^2.1.0",
     "@eslint/eslintrc": "^3.3.6",
     "@eslint/js": "^10.0.1",
-    "@figma/code-connect": "^1.4.9",
+    "@figma/code-connect": "^1.5.2",
     "@jetbrains/eslint-config": "^6.0.5",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
     "@jetbrains/rollup-css-plugin": "./packages/rollup-css-plugin",
     "@jetbrains/stylelint-config": "^4.0.2",
     "@jetbrains/typescript-plugin-css-modules": "^5.3.1",
-    "@primer/octicons": "^19.31.0",
+    "@primer/octicons": "^19.33.0",
     "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
-    "@storybook/addon-a11y": "10.5.4",
-    "@storybook/addon-docs": "^10.5.4",
-    "@storybook/addon-themes": "^10.5.4",
+    "@storybook/addon-a11y": "10.5.7",
+    "@storybook/addon-docs": "^10.5.7",
+    "@storybook/addon-themes": "^10.5.7",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "10.5.4",
+    "@storybook/react-webpack5": "10.5.7",
     "@storybook/test-runner": "^0.24.4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/user-event": "^14.6.3",
     "@types/chai-as-promised": "^8.0.2",
     "@types/chai-dom": "1.11.3",
     "@types/markdown-it": "^14.1.2",
@@ -134,13 +134,13 @@
     "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-react": "^6.0.4",
     "@vitest/eslint-plugin": "^1.6.24",
-    "acorn": "^8.17.0",
+    "acorn": "^8.18.0",
     "babel-plugin-require-context-hook": "^1.0.0",
     "caniuse-lite": "^1.0.30001799",
     "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.2.0",
-    "core-js": "^3.49.0",
+    "core-js": "^3.50.0",
     "cpy-cli": "^7.0.0",
     "dotenv-cli": "^11.0.0",
     "eslint": "^9.39.5",
@@ -154,11 +154,11 @@
     "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-storybook": "^10.5.4",
+    "eslint-plugin-storybook": "^10.5.7",
     "eslint-plugin-unicorn": "^72.0.0",
     "events": "^3.3.0",
     "glob": "^13.0.6",
-    "globals": "^17.7.0",
+    "globals": "^17.9.0",
     "html-webpack-plugin": "^5.6.8",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -167,7 +167,7 @@
     "jest-environment-jsdom": "^30.4.1",
     "jest-teamcity": "^1.12.0",
     "lint-staged": "^17.2.0",
-    "markdown-it": "^14.3.0",
+    "markdown-it": "^15.0.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
     "prettier": "^3.9.6",
@@ -176,10 +176,10 @@
     "react-dom": "^19.2.8",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.1.3",
-    "rollup": "^4.62.2",
+    "rollup": "^4.62.4",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "10.5.4",
+    "storybook": "10.5.7",
     "stylelint": "^17.14.1",
     "stylelint-config-sass-guidelines": "^13.0.0",
     "svg-inline-loader": "^0.8.2",
@@ -188,11 +188,11 @@
     "typed-css-modules": "^0.9.1",
     "typescript": "~6.0.3",
     "typescript-eslint": "^8.65.0",
-    "vite": "^8.1.5",
+    "vite": "^8.2.1",
     "vitest": "^4.1.10",
     "vitest-teamcity-reporter": "^0.6.1",
-    "webpack": "^5.109.0",
-    "webpack-cli": "^7.2.1",
+    "webpack": "^5.109.2",
+    "webpack-cli": "^7.2.2",
     "xmlappend": "^1.0.4"
   },
   "peerDependencies": {
@@ -227,7 +227,7 @@
     "babel-loader": "10.1.1",
     "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-transform-define": "^2.1.4",
-    "browserslist": "^4.28.7",
+    "browserslist": "^4.28.8",
     "change-case": "^5.4.4",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",
@@ -242,7 +242,7 @@
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
-    "postcss": "^8.5.23",
+    "postcss": "^8.5.26",
     "postcss-calc": "^10.1.1",
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.2.1",