@jetbrains/ring-ui 7.0.16 → 7.0.18

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

@@ -0,0 +1 @@
+export {};

package/components/button/button.figma.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from '@figma/code-connect';
+import addIcon from '@jetbrains/icons/add';
+import add12pxIcon from '@jetbrains/icons/add-12px';
+import downloadIcon from '@jetbrains/icons/download';
+import download12pxIcon from '@jetbrains/icons/download-12px';
+import { ControlsHeight } from '../global/controls-height';
+import Button from './button';
+figma.connect(Button, 'https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=9954%3A528', {
+    props: {
+        height: figma.enum('Size', {
+            S: ControlsHeight.S,
+            M: ControlsHeight.M,
+            L: ControlsHeight.L,
+        }),
+        children: figma.enum('Type', {
+            Label: 'Button',
+            'L-Icon-Label': 'Button',
+            'R-Icon-Label': 'Button',
+        }),
+        icon: figma.enum('Type', {
+            'L-Icon-Label': figma.enum('Size', {
+                S: figma.enum('Variant', {
+                    Main: download12pxIcon,
+                    Green: download12pxIcon,
+                    'Red solid': download12pxIcon,
+                    Gray: download12pxIcon,
+                    Outlined: download12pxIcon,
+                    'Red outlined': download12pxIcon,
+                    Ghost: download12pxIcon,
+                    Text: downloadIcon,
+                }),
+                M: downloadIcon,
+                L: downloadIcon,
+            }),
+            Icon: figma.enum('Size', {
+                S: figma.enum('Variant', {
+                    Main: add12pxIcon,
+                    Green: add12pxIcon,
+                    'Red solid': add12pxIcon,
+                    Gray: add12pxIcon,
+                    Outlined: add12pxIcon,
+                    'Red outlined': add12pxIcon,
+                    Ghost: add12pxIcon,
+                    Text: addIcon,
+                }),
+                M: addIcon,
+                L: addIcon,
+            }),
+        }),
+        dropdown: figma.enum('Type', { 'R-Icon-Label': true }),
+        disabled: figma.enum('State', { Disabled: true }),
+        primary: figma.enum('Variant', { Main: true }),
+        success: figma.enum('Variant', { Green: true }),
+        error: figma.enum('Variant', { 'Red solid': true }),
+        secondary: figma.enum('Variant', { Gray: true }),
+        danger: figma.enum('Variant', { 'Red outlined': true }),
+        ghost: figma.enum('Variant', { Ghost: true }),
+        inline: figma.enum('Variant', { Text: true }),
+    },
+    example: ({ children, ...restProps }) => _jsx(Button, { ...restProps, children: children }),
+    imports: [
+        'import Button from "@jetbrains/ring-ui/components/button/button"',
+        'import {ControlsHeight} from "@jetbrains/ring-ui/components/global/controls-height"',
+        'import addIcon from "@jetbrains/icons/add"',
+        'import add12pxIcon from "@jetbrains/icons/add-12px"',
+        'import downloadIcon from "@jetbrains/icons/download"',
+        'import download12pxIcon from "@jetbrains/icons/download-12px"',
+    ],
+});

package/components/button-group/button-group.figma.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import figma from '@figma/code-connect';
+import chevronDownIcon from '@jetbrains/icons/chevron-down';
+import Button from '../button/button';
+import { ControlsHeight } from '../global/controls-height';
+import ButtonGroup from './button-group';
+figma.connect(ButtonGroup, 'https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=9954%3A528', {
+    props: {
+        height: figma.enum('Size', {
+            S: ControlsHeight.S,
+            M: ControlsHeight.M,
+            L: ControlsHeight.L,
+        }),
+        disabled: figma.enum('State', { Disabled: true }),
+        primary: figma.enum('Variant', { Main: true }),
+        success: figma.enum('Variant', { Green: true }),
+        error: figma.enum('Variant', { 'Red solid': true }),
+        secondary: figma.enum('Variant', { Gray: true }),
+        danger: figma.enum('Variant', { 'Red outlined': true }),
+        ghost: figma.enum('Variant', { Ghost: true }),
+        inline: figma.enum('Variant', { Text: true }),
+    },
+    variant: { Type: 'Split' },
+    example: props => (_jsxs(ButtonGroup, { children: [_jsx(Button, { ...props, children: 'Button' }), _jsx(Button, { ...props, icon: chevronDownIcon })] })),
+    imports: [
+        'import Button from "@jetbrains/ring-ui/components/button/button"',
+        'import {ControlsHeight} from "@jetbrains/ring-ui/components/global/controls-height"',
+        'import chevronDownIcon from "@jetbrains/icons/chevron-down"',
+    ],
+});

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.18",
   "description": "JetBrains UI library",
-  "author": "JetBrains",
+  "author": {
+    "name": "JetBrains"
+  },
   "license": "Apache-2.0",
   "packageManager": "npm@8.11.0",
   "files": [
@@ -46,6 +48,12 @@
     "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",
+    "figma-connect-publish": "npx figma connect publish --token=$FIGMA_CODE_CONNECT_TOKEN",
+    "figma-connect-publish-local": "dotenv -- npm run figma-connect-publish",
+    "figma-connect-unpublish": "npx figma connect unpublish --token=$FIGMA_CODE_CONNECT_TOKEN",
+    "figma-connect-unpublish-local": "dotenv -- npm run figma-connect-unpublish",
     "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 +81,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": {
@@ -85,10 +93,11 @@
     "@eslint/compat": "^1.2.4",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.17.0",
+    "@figma/code-connect": "^1.2.4",
     "@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",
@@ -99,12 +108,12 @@
     "@storybook/addon-essentials": "8.4.7",
     "@storybook/addon-themes": "^8.4.7",
     "@storybook/components": "8.4.7",
-    "@storybook/csf": "^0.1.12",
+    "@storybook/csf": "^0.1.13",
     "@storybook/manager-api": "8.4.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 +131,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.22",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.14.0",
     "axe-playwright": "^2.0.3",
@@ -133,8 +142,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": "^8.0.0",
     "enzyme": "^3.11.0",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
@@ -143,7 +154,7 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-storybook": "^0.11.1",
     "events": "^3.3.0",
@@ -156,7 +167,7 @@
     "jest": "~29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-teamcity": "^1.12.0",
-    "lint-staged": "^15.2.11",
+    "lint-staged": "^15.3.0",
     "markdown-it": "^14.1.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
@@ -167,7 +178,7 @@
     "react-test-renderer": "^19.0.0",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.28.1",
+    "rollup": "^4.29.1",
     "rollup-plugin-clear": "^2.0.7",
     "sinon": "^19.0.2",
     "sinon-chai": "^4.0.0",
@@ -178,12 +189,12 @@
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.11",
     "typescript": "~5.7.2",
-    "typescript-eslint": "^8.18.1",
+    "typescript-eslint": "^8.19.0",
     "vitest": "^2.1.8",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
     "webpack": "^5.97.1",
-    "webpack-cli": "^5.1.4",
+    "webpack-cli": "^6.0.1",
     "xmlappend": "^1.0.4"
   },
   "peerDependencies": {
@@ -239,8 +250,8 @@
     "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.2",
-    "react-movable": "^3.3.1",
+    "postcss-preset-env": "^10.1.3",
+    "react-movable": "^3.4.0",
     "react-virtualized": "^9.22.5",
     "react-waypoint": "^10.3.0",
     "scrollbar-width": "^3.1.1",
@@ -254,5 +265,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"
 }