@jetbrains/ring-ui 6.0.18 → 6.0.20

package/components/collapse/collapse-control.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-type ChildrenFunction = (collapsed: boolean) => React.ReactNode;
+type ChildrenFunction = (collapsed: boolean) => React.ReactElement;
 type Props = {
-    children: ChildrenFunction | React.ReactNode;
+    children: ChildrenFunction | React.ReactElement;
     'data-test'?: string | null | undefined;
 };
 /**

package/components/collapse/collapse-control.js

@@ -9,14 +9,14 @@ export const CollapseControl = ({ children, 'data-test': dataTest }) => {
     const { setCollapsed, collapsed, id } = useContext(CollapseContext);
     const child = useMemo(() => {
         if (typeof children === 'function') {
-            return <p data-test={dataTests(COLLAPSE_CONTROL_TEST_ID, dataTest)}>{children(collapsed)}</p>;
+            return children(collapsed);
         }
-        return <p data-test={dataTests(COLLAPSE_CONTROL_TEST_ID, dataTest)}>{children}</p>;
-    }, [children, collapsed, dataTest]);
-    return cloneElement(child, {
-        onClick: setCollapsed,
-        'aria-controls': `collapse-content-${id}`,
-        'aria-expanded': String(!collapsed)
-    });
+        return children;
+    }, [children, collapsed]);
+    return (<p data-test={dataTests(COLLAPSE_CONTROL_TEST_ID, dataTest)}>{cloneElement(child, {
+            onClick: setCollapsed,
+            'aria-controls': `collapse-content-${id}`,
+            'aria-expanded': String(!collapsed)
+        })}</p>);
 };
 export default CollapseControl;

package/components/global/variables_dark.css

@@ -82,10 +82,10 @@
   --ring-hover-background-color: rgb(var(--ring-hover-background-components)); /* #323D54 */
   --ring-navigation-background-components: 17, 19, 20;
   --ring-navigation-background-color: rgb(var(--ring-navigation-background-components)); /* #111314 */
-  --ring-tag-background-components: 56, 58, 64;
-  --ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #383A40 */
-  --ring-tag-hover-background-components: 54, 56, 61;
-  --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #36383D */
+  --ring-tag-background-components: 74, 77, 84;
+  --ring-tag-background-color: rgb(var(--ring-tag-background-components)); /* #4A4D54 */
+  --ring-tag-hover-background-components: 67, 69, 76;
+  --ring-tag-hover-background-color: rgb(var(--ring-tag-hover-background-components)); /* #43454C */
   --ring-removed-background-components: 94, 56, 53;
   --ring-removed-background-color: rgb(var(--ring-removed-background-components)); /* #5E3835 */
   --ring-warning-background-components: 87, 71, 47;

package/components/list/consts.d.ts

@@ -42,6 +42,7 @@ export type ListDataItem<T = unknown> = T & Partial<Omit<LinkProps, 'onClick' |
     glyph?: IconType | string | null | undefined;
     icon?: string | undefined;
     iconSize?: Size | null | undefined;
+    suppressSizeWarning?: boolean | null | undefined;
     rightGlyph?: IconType | string | null | undefined;
     title?: string | null | undefined;
     level?: number | null | undefined;

package/components/list/list__item.js

@@ -65,7 +65,7 @@ export default class ListItem extends PureComponent {
           <div className={styles.top} onMouseOut={this.stopBubbling} onBlur={this.stopBubbling}>
             {!showCheckbox && (<div className={styles.left}>
                 {leftNodes}
-                {glyph && (<Icon className={styles.glyph} glyph={glyph} size={this.props.iconSize}/>)}
+                {glyph && (<Icon className={styles.glyph} glyph={glyph} size={this.props.iconSize} suppressSizeWarning={this.props.suppressSizeWarning}/>)}
                 {(avatar || shouldShowGeneratedAvatar) && (<Avatar className={styles.avatar} url={avatar} size={AvatarSize.Size20} subavatar={subavatar} username={username}/>)}
               </div>)}
 
@@ -74,7 +74,7 @@ export default class ListItem extends PureComponent {
             {description && (<span className={styles.description} data-test="ring-list-item-description">{description}</span>)}
 
             <div className={styles.right}>
-              {rightGlyph && (<Icon className={styles.rightGlyph} glyph={rightGlyph} size={this.props.iconSize}/>)}
+              {rightGlyph && (<Icon className={styles.rightGlyph} glyph={rightGlyph} suppressSizeWarning={this.props.suppressSizeWarning} size={this.props.iconSize}/>)}
               {icon && (<div className={styles.icon} style={{ backgroundImage: `url("${icon}")` }}/>)}
               {rightNodes}
             </div>

package/components/popup/popup.js

@@ -16,7 +16,28 @@ import styles from './popup.css';
 import { DEFAULT_DIRECTIONS, Dimension, Directions, Display, MaxHeight, MinWidth } from './popup.consts';
 import { PopupTargetContext, PopupTarget } from './popup.target';
 export { PopupTargetContext, PopupTarget };
-const stop = (e) => e.stopPropagation();
+const isPossibleClientSideNavigation = (event) => {
+    const target = event.target;
+    const link = target.closest('a');
+    // Taken from https://github.com/nanostores/router/blob/80a333db4cf0789fda21a02715ebabca15192642/index.js#L58-L69
+    return link &&
+        event.button === 0 && // Left mouse button
+        link.target !== '_blank' && // Not for new tab
+        link.origin === location.origin && // Not external link
+        link.rel !== 'external' && // Not external link
+        link.target !== '_self' && // Now manually disabled
+        !link.download && // Not download link
+        !event.altKey && // Not download link by user
+        !event.metaKey && // Not open in new tab by user
+        !event.ctrlKey && // Not open in new tab by user
+        !event.shiftKey && // Not open in new window by user
+        event.defaultPrevented;
+};
+const stop = (event) => {
+    if (!isPossibleClientSideNavigation(event)) {
+        event.stopPropagation();
+    }
+};
 export const getPopupContainer = (target) => (typeof target === 'string' ? document.querySelector(`[data-portaltarget=${target}]`) : target);
 /**
  * @constructor

package/components/slider/slider.css

@@ -74,6 +74,8 @@
   position: absolute;
   z-index: 1;
 
+  box-sizing: border-box;
+
   width: calc(var(--ring-unit) * 1.5);
   height: calc(var(--ring-unit) * 1.5);
   margin-top: calc(var(--ring-unit) * -1);

package/components/slider/slider.js

@@ -122,7 +122,8 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
             window.removeEventListener('mouseup', handleMouseUp);
         };
     }, [isDragging, handleMouseMove, handleMouseUp, disabled]);
-    return (<div ref={ref} role="button" className={classNames(styles.slider, className, {
+    return (<div ref={ref} role="presentation" // contains interactive elements
+     className={classNames(styles.slider, className, {
             [styles.disabled]: disabled,
             [styles.marked]: !!marks || showTag
         })} tabIndex={-1} onMouseDown={handleMouseDown}>
@@ -143,10 +144,10 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
             return (
             // eslint-disable-next-line react/no-array-index-key
             <Fragment key={index}>
-            <button type="button" role="slider" aria-valuemin={min} aria-valuemax={max} aria-valuenow={numValue} data-index={index} style={{ left: `${percent}%` }} className={classNames(styles.thumb, {
+            <div tabIndex={0} aria-label="Pick value" role="slider" aria-valuemin={min} aria-valuemax={max} aria-valuenow={numValue} data-index={index} style={{ left: `${percent}%` }} className={classNames(styles.thumb, {
                     [styles.disabled]: disabled,
                     [styles.dragged]: isDragging && draggedIndex === index
-                })} disabled={disabled} onMouseDown={handleMouseDown}/>
+                })} onMouseDown={handleMouseDown}/>
             {showTag && (<div style={{ left: `${percent}%` }} className={classNames(styles.tag, { [styles.disabled]: disabled })} role="tooltip">
                 {renderTag ? renderTag(numValue) : numValue}
               </div>)}

package/components/user-agreement/service.js

@@ -198,7 +198,7 @@ export default class UserAgreementService {
     };
     hideDialog = (withoutNotifications) => {
         const { onDialogHide } = this.config;
-        this.reactRoot.unmount();
+        this.reactRoot.render(null);
         if (onDialogHide) {
             onDialogHide();
             this._dialogPromise = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "6.0.18",
+  "version": "6.0.20",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -34,8 +34,9 @@
     "apply-resolutions": "npx npm-force-resolutions@0.0.10",
     "_postinstall": "husky install",
     "prepare": "webpack -c .storybook/custom-header/webpack.config.js",
-    "a11y-audit": "jest a11y-audit.test.js",
-    "a11y-audit-ci": "jest a11y-audit.test.js --reporters=jest-teamcity; node report-metadata.js",
+    "prea11y-audit": "playwright install",
+    "a11y-audit": "test-storybook --url http://localhost:9999",
+    "a11y-audit-ci": "node a11y-audit-ci.mjs",
     "console-errors": "jest console-errors.test.js --watchAll",
     "console-errors-ci": "jest console-errors.test.js --reporters=jest-teamcity",
     "test": "karma start",
@@ -47,7 +48,7 @@
     "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy '**/*' '!**/*.ts' '!**/*.tsx' '!**/__mocks__/**' ../components --parents --cwd=src/",
     "build": "./node_modules/.bin/rollup -c --bundleConfigAsCjs",
     "postbuild": "cpy '**/*.d.ts' ../dist --parents --cwd=components/",
-    "serve": "npm --prefix packages/hermione run serve",
+    "serve": "http-server storybook-dist/ -p 9999",
     "start": "storybook dev -p 9999",
     "storybook-debug": "node --inspect-brk node_modules/@storybook/react/bin -p 9999",
     "lint:js": "eslint",
@@ -87,20 +88,19 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
-    "@storybook/addon-a11y": "8.0.8",
-    "@storybook/addon-docs": "8.0.8",
-    "@storybook/addon-essentials": "7.6.17",
-    "@storybook/addon-storyshots": "7.6.17",
-    "@storybook/addon-storyshots-puppeteer": "7.6.17",
-    "@storybook/addon-storysource": "8.0.8",
-    "@storybook/addons": "7.6.17",
-    "@storybook/components": "8.0.6",
-    "@storybook/preview-api": "7.6.17",
-    "@storybook/react": "7.6.17",
-    "@storybook/react-webpack5": "7.6.17",
-    "@storybook/source-loader": "8.0.6",
-    "@storybook/theming": "8.0.6",
-    "@testing-library/react": "^15.0.0",
+    "@storybook/addon-a11y": "8.0.9",
+    "@storybook/addon-docs": "8.0.9",
+    "@storybook/addon-essentials": "8.0.9",
+    "@storybook/addon-storysource": "8.0.9",
+    "@storybook/components": "8.0.9",
+    "@storybook/manager-api": "8.0.9",
+    "@storybook/preview-api": "8.0.9",
+    "@storybook/react": "8.0.9",
+    "@storybook/react-webpack5": "8.0.9",
+    "@storybook/source-loader": "8.0.9",
+    "@storybook/test-runner": "^0.17.0",
+    "@storybook/theming": "8.0.9",
+    "@testing-library/react": "^15.0.4",
     "@testing-library/user-event": "^14.5.2",
     "@types/chai": "^4.3.14",
     "@types/chai-as-promised": "^7.1.8",
@@ -108,22 +108,23 @@
     "@types/chai-enzyme": "^0.6.13",
     "@types/enzyme": "^3.10.18",
     "@types/markdown-it": "^14.0.1",
-    "@types/react": "^18.2.77",
+    "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "@types/sinon": "^17.0.3",
     "@types/sinon-chai": "^3.2.12",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
+    "@typescript-eslint/eslint-plugin": "^7.7.1",
+    "@typescript-eslint/parser": "^7.7.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.11.3",
+    "axe-playwright": "^2.0.1",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001610",
+    "caniuse-lite": "^1.0.30001612",
     "chai": "^5.1.0",
     "chai-as-promised": "^7.1.1",
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^1.0.0-rc.12",
-    "core-js": "^3.36.1",
+    "core-js": "^3.37.0",
     "cpy-cli": "^3.1.1",
     "enzyme": "^3.11.0",
     "eslint": "^8.57.0",
@@ -136,6 +137,7 @@
     "events": "^3.3.0",
     "glob": "^10.3.12",
     "html-webpack-plugin": "^5.6.0",
+    "http-server": "^14.1.1",
     "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",
     "imports-loader": "^5.0.0",
@@ -154,22 +156,22 @@
     "mocha": "^10.4.0",
     "pinst": "^3.0.0",
     "prettier": "^3.2.5",
-    "puppeteer": "^22.6.5",
+    "puppeteer": "^22.7.0",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^5.0.5",
-    "rollup": "^4.14.3",
+    "rollup": "^4.16.4",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-styles": "^4.0.0",
     "sinon": "^17.0.1",
     "sinon-chai": "^3.7.0",
     "storage-mock": "^2.1.0",
-    "storybook": "8.0.8",
+    "storybook": "8.0.9",
     "storybook-addon-themes": "^6.1.0",
-    "stylelint": "^16.3.1",
+    "stylelint": "^16.4.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.10",
@@ -202,8 +204,8 @@
     "@babel/core": "^7.24.4",
     "@babel/preset-typescript": "^7.24.1",
     "@jetbrains/babel-preset-jetbrains": "^2.3.2",
-    "@jetbrains/icons": "^4.1.0",
-    "@jetbrains/logos": "^2.2.28",
+    "@jetbrains/icons": "^4.2.0",
+    "@jetbrains/logos": "^3.0.0-canary.734b213.0",
     "@jetbrains/postcss-require-hover": "^0.1.2",
     "@types/combokeys": "^2.4.9",
     "@types/deep-equal": "^1.0.4",
@@ -237,7 +239,7 @@
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.1.1",
     "postcss-modules-values-replace": "^4.2.0",
-    "postcss-preset-env": "^9.5.5",
+    "postcss-preset-env": "^9.5.9",
     "prop-types": "^15.8.1",
     "react-movable": "^3.2.0",
     "react-virtualized": "^9.22.5",