@jetbrains/ring-ui 7.0.16 → 7.0.17

package/components/button/button.css

@@ -39,12 +39,12 @@
 }
 
 .button {
-  --ring-button-default-background-color: var(--ring-content-background-color);
+  --ring-button-default-background-color: transparent;
   --ring-button-background-color: var(--ring-button-default-background-color);
   --ring-button-hover-background-color: var(--ring-content-background-color);
   --ring-button-pressed-background-color: var(--ring-selected-background-color);
   --ring-button-active-background-color: var(--ring-hover-background-color);
-  --ring-button-disabled-background-color: var(--ring-content-background-color);
+  --ring-button-disabled-background-color: var(--ring-button-default-background-color);
 
   box-sizing: border-box;
   margin: 0;
@@ -82,6 +82,7 @@
 }
 
 .block {
+  --ring-button-default-background-color: var(--ring-content-background-color);
   --ring-button-default-border-color: var(--ring-borders-color);
   --ring-button-border-color: var(--ring-button-default-border-color);
   --ring-button-hover-border-color: var(--ring-border-hover-color);
@@ -259,6 +260,7 @@
 }
 
 .ghost {
+  --ring-button-default-background-color: transparent;
   --ring-button-hover-background-color: var(--ring-tag-hover-background-color);
   --ring-button-text-color: var(--ring-secondary-color);
 

package/components/dialog/dialog.js

@@ -114,7 +114,9 @@ export default class Dialog extends PureComponent {
         const shortcutsMap = this.getShortcutsMap();
         const content = (_jsxs(_Fragment, { children: [_jsx(Shortcuts, { map: shortcutsMap, scope: this.state.shortcutsScope, options: this.props.shortcutOptions }), (onOverlayClick !== noop || onCloseAttempt !== noop) && (_jsx("div", { 
                     // click handler is duplicated in close button
-                    role: "presentation", className: styles.clickableOverlay, onClick: this.handleClick, "data-test": "ring-dialog-overlay" })), _jsx("div", { className: styles.innerContainer, children: _jsxs(AdaptiveIsland, { className: classNames(styles.content, contentClassName, { [styles.dense]: dense }), "data-test": "ring-dialog", role: "dialog", "aria-label": label, children: [children, showCloseButton && (_jsx(Button, { icon: closeIcon, "data-test": "ring-dialog-close-button", className: classNames(styles.closeButton, {
+                    role: "presentation", className: styles.clickableOverlay, onClick: this.handleClick, "data-test": "ring-dialog-overlay" })), _jsx("div", { className: styles.innerContainer, children: _jsxs(AdaptiveIsland, { className: classNames(styles.content, contentClassName, {
+                            [styles.dense]: dense,
+                        }), "data-test": "ring-dialog", role: "dialog", "aria-label": label, children: [children, showCloseButton && (_jsx(Button, { icon: closeIcon, "data-test": "ring-dialog-close-button", className: classNames(styles.closeButton, {
                                     [styles.closeButtonOutside]: !closeButtonInside,
                                     [styles.closeButtonInside]: closeButtonInside,
                                 }), iconClassName: classNames(styles.closeIcon, {

package/components/global/focus-sensor-hoc.js

@@ -20,7 +20,8 @@ export default function focusSensorHOC(ComposedComponent) {
         }
         componentDidUpdate(prevProps) {
             const { focused } = this.props;
-            if (focused && !prevProps.focused) {
+            const isInFocus = this.node?.contains(document.activeElement);
+            if (focused && (!isInFocus || !prevProps.focused)) {
                 this.onFocusRestore();
             }
             else if (!focused && prevProps.focused) {

package/components/list/list.js

@@ -365,6 +365,8 @@ export default class List extends Component {
             if (cleanedProps.href) {
                 cleanedProps.rgItemType = Type.LINK;
             }
+            cleanedProps.description =
+                typeof cleanedProps.description === 'string' ? cleanedProps.description.trim() : cleanedProps.description;
             const itemProps = Object.assign({ rgItemType: DEFAULT_ITEM_TYPE }, restProps);
             itemKey = key || itemId;
             itemProps.hover = isActive;

package/components/popup/popup.d.ts

@@ -121,6 +121,7 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
     private _redraw;
     private _getAnchor;
     private _listenersEnabled?;
+    private _prevTimeout?;
     /**
      * @param {boolean} enable
      * @private

package/components/popup/popup.js

@@ -70,9 +70,6 @@ export default class Popup extends PureComponent {
         display: Display.SHOWING,
     };
     componentDidMount() {
-        if (!this.props.client) {
-            this.setState({ client: true });
-        }
         if (!this.props.hidden) {
             this._setListenersEnabled(true);
         }
@@ -192,13 +189,15 @@ export default class Popup extends PureComponent {
         return this.props.anchorElement || this.parent;
     }
     _listenersEnabled;
+    _prevTimeout;
     /**
      * @param {boolean} enable
      * @private
      */
     _setListenersEnabled(enable) {
         if (enable && !this._listenersEnabled) {
-            setTimeout(() => {
+            clearTimeout(this._prevTimeout);
+            this._prevTimeout = window.setTimeout(() => {
                 this._listenersEnabled = true;
                 this.listeners.add(window, 'resize', this._redraw);
                 if (this.props.autoPositioningOnScroll) {
@@ -215,6 +214,7 @@ export default class Popup extends PureComponent {
         }
         if (!enable && this._listenersEnabled) {
             this.listeners.removeAll();
+            clearTimeout(this._prevTimeout);
             this._listenersEnabled = false;
         }
     }
@@ -269,7 +269,7 @@ export default class Popup extends PureComponent {
                     // prevent bubbling through portal
                     onClick: stop, 
                     // This handler only blocks bubbling through React portal
-                    role: "presentation", ref: this.portalRef, children: [this.shouldUseShortcuts() && _jsx(Shortcuts, { map: this.shortcutsMap, scope: this.shortcutsScope }), (client || this.state.client) &&
+                    role: "presentation", ref: this.portalRef, children: [this.shouldUseShortcuts() && _jsx(Shortcuts, { map: this.shortcutsMap, scope: this.shortcutsScope }), client !== false &&
                             (keepMounted || !hidden) &&
                             createPortal(_jsx(PopupTarget, { id: this.uid, ref: this.containerRef, onMouseOver: onMouseOver, onFocus: onMouseOver, onMouseOut: onMouseOut, onBlur: onMouseOut, onContextMenu: onContextMenu, children: _jsx("div", { "data-test": dataTests('ring-popup', dataTest), "data-test-shown": !hidden && !showing, "data-test-direction": direction, ref: this.popupRef, className: classes, style: style, onMouseDown: onMouseDown, onMouseUp: onMouseUp, 
                                     // mouse handlers are used to track clicking on inner elements

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.16",
+  "version": "7.0.17",
   "description": "JetBrains UI library",
-  "author": "JetBrains",
+  "author": {
+    "name": "JetBrains"
+  },
   "license": "Apache-2.0",
   "packageManager": "npm@8.11.0",
   "files": [
@@ -46,6 +48,8 @@
     "screenshots-test-ci": "npm --prefix packages/screenshots run test-ci",
     "screenshots-gather": "npm --prefix packages/screenshots run gather",
     "build-stories": "storybook build --quiet -c .storybook -o storybook-dist",
+    "chromatic": "npx chromatic --build-script-name build-stories --exit-once-uploaded",
+    "chromatic-local": "dotenv -- npm run publish-stories",
     "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/",
@@ -73,7 +77,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "ssh://github.com/JetBrains/ring-ui.git"
+    "url": "git+ssh://git@github.com/JetBrains/ring-ui.git"
   },
   "readmeFilename": "README.md",
   "devDependencies": {
@@ -87,8 +91,8 @@
     "@eslint/js": "^9.17.0",
     "@jetbrains/eslint-config": "^6.0.4",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
-    "@jetbrains/stylelint-config": "^4.0.2",
     "@jetbrains/rollup-css-plugin": "./packages/rollup-css-plugin",
+    "@jetbrains/stylelint-config": "^4.0.2",
     "@primer/octicons": "^19.14.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
@@ -104,7 +108,7 @@
     "@storybook/preview-api": "8.4.7",
     "@storybook/react": "8.4.7",
     "@storybook/react-webpack5": "8.4.7",
-    "@storybook/test-runner": "^0.20.1",
+    "@storybook/test-runner": "^0.21.0",
     "@storybook/theming": "8.4.7",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
@@ -122,7 +126,7 @@
     "@types/sinon-chai": "^4.0.0",
     "@types/webpack-env": "^1.18.5",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/eslint-plugin": "^1.1.18",
+    "@vitest/eslint-plugin": "^1.1.20",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.14.0",
     "axe-playwright": "^2.0.3",
@@ -133,8 +137,10 @@
     "chai-dom": "^1.10.0",
     "chai-enzyme": "1.0.0-beta.1",
     "cheerio": "^1.0.0-rc.12",
+    "chromatic": "^11.20.2",
     "core-js": "^3.39.0",
     "cpy-cli": "^5.0.0",
+    "dotenv-cli": "^7.4.4",
     "enzyme": "^3.11.0",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
@@ -183,7 +189,7 @@
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
     "webpack": "^5.97.1",
-    "webpack-cli": "^5.1.4",
+    "webpack-cli": "^6.0.0",
     "xmlappend": "^1.0.4"
   },
   "peerDependencies": {
@@ -254,5 +260,9 @@
   "engines": {
     "node": ">=14.0",
     "npm": ">=6.0.0"
-  }
+  },
+  "bugs": {
+    "url": "https://github.com/JetBrains/ring-ui/issues"
+  },
+  "homepage": "https://github.com/JetBrains/ring-ui#readme"
 }