@jetbrains/ring-ui 7.0.97 → 7.0.99

package/components/button/button.css

@@ -46,8 +46,10 @@
   --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-pressed-background-color: var(--ring-hover-background-color);
   --ring-button-active-background-color: var(--ring-main-container-light-color);
+  --ring-button-active-hover-background-color: var(--ring-hover-background-color);
+  --ring-button-active-pressed-background-color: var(--ring-selected-background-color);
   --ring-button-disabled-background-color: var(--ring-button-default-background-color);
 
   box-sizing: border-box;
@@ -89,8 +91,8 @@
   --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);
-  --ring-button-pressed-border-color: var(--ring-border-hover-color);
+  --ring-button-hover-border-color: var(--ring-border-accent-color);
+  --ring-button-pressed-border-color: var(--ring-border-accent-color);
   --ring-button-active-border-color: var(--ring-main-color);
   --ring-button-disabled-border-color: var(--ring-border-disabled-color);
   --ring-button-text-color: var(--ring-text-color);
@@ -174,7 +176,7 @@
 }
 
 .active {
-  --ring-button-disabled-background-color: var(--ring-hover-background-color);
+  --ring-button-disabled-background-color: var(--ring-main-container-light-color);
   --ring-button-disabled-border-color: var(--ring-border-hover-color);
 
   transition: none;
@@ -185,6 +187,14 @@
   --ring-button-border-color: var(--ring-button-active-border-color);
 }
 
+.active:hover {
+  --ring-button-active-background-color: var(--ring-button-active-hover-background-color);
+}
+
+.active:active {
+  --ring-button-active-background-color: var(--ring-button-active-pressed-background-color);
+}
+
 .disabled {
   cursor: auto;
 
@@ -196,6 +206,8 @@
 .danger {
   --ring-button-pressed-background-color: var(--ring-button-danger-active-color);
   --ring-button-active-background-color: var(--ring-button-danger-active-color);
+  --ring-button-active-hover-background-color: var(--ring-button-danger-active-color);
+  --ring-button-active-pressed-background-color: var(--ring-button-danger-active-color);
   --ring-button-focus-border-color: var(--ring-removed-background-color);
   --ring-button-hover-border-color: var(--ring-button-danger-hover-color);
   --ring-button-pressed-border-color: var(--ring-button-danger-hover-color);
@@ -224,6 +236,8 @@
   --ring-button-hover-background-color: var(--ring-main-hover-color);
   --ring-button-pressed-background-color: var(--ring-button-primary-background-color);
   --ring-button-active-background-color: var(--ring-button-primary-background-color);
+  --ring-button-active-hover-background-color: var(--ring-main-hover-color);
+  --ring-button-active-pressed-background-color: var(--ring-button-primary-background-color);
   --ring-button-disabled-background-color: var(--ring-border-hover-color);
   --ring-button-pressed-border-color: var(--ring-button-primary-border-color);
   --ring-button-active-border-color: var(--ring-button-primary-border-color);
@@ -237,6 +251,8 @@
   --ring-button-hover-background-color: var(--ring-main-success-hover-color);
   --ring-button-pressed-background-color: var(--ring-main-success-hover-color);
   --ring-button-active-background-color: var(--ring-main-success-hover-color);
+  --ring-button-active-hover-background-color: var(--ring-main-success-hover-color);
+  --ring-button-active-pressed-background-color: var(--ring-main-success-hover-color);
   --ring-button-disabled-background-color: var(--ring-added-background-color);
   --ring-button-focus-border-color: var(--ring-border-hover-success-color);
   --ring-button-pressed-border-color: var(--ring-success-color);
@@ -252,6 +268,8 @@
   --ring-button-hover-background-color: var(--ring-main-error-hover-color);
   --ring-button-pressed-background-color: var(--ring-main-error-hover-color);
   --ring-button-active-background-color: var(--ring-main-error-hover-color);
+  --ring-button-active-hover-background-color: var(--ring-main-error-hover-color);
+  --ring-button-active-pressed-background-color: var(--ring-main-error-hover-color);
   --ring-button-disabled-background-color: var(--ring-removed-background-color);
   --ring-button-focus-border-color: var(--ring-border-hover-error-color);
   --ring-button-pressed-border-color: var(--ring-error-color);

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

@@ -119,7 +119,7 @@
 .buttonGroup .button.button:hover:not(:disabled),
 .buttonGroup .button.button:active:not(:disabled) {
   border-radius: var(--ring-border-radius);
-  box-shadow: var(--ring-button-shadow) var(--ring-border-hover-color);
+  box-shadow: var(--ring-button-shadow) var(--ring-button-border-color);
 }
 
 .buttonGroup .button.button:focus-visible {
@@ -131,13 +131,13 @@
 
 .buttonGroup .button.button.active {
   border-radius: var(--ring-border-radius);
-  box-shadow: var(--ring-button-shadow) var(--ring-main-color);
+  box-shadow: var(--ring-button-shadow) var(--ring-button-border-color);
 }
 
 .buttonGroup .button:focus-visible.active {
   border-radius: var(--ring-border-radius);
   box-shadow:
-    var(--ring-button-shadow) var(--ring-main-color),
+    var(--ring-button-shadow) var(--ring-button-border-color),
     0 0 0 1px var(--ring-border-hover-color);
 }
 

package/components/list/list.d.ts

@@ -150,6 +150,7 @@ export default class List<T = unknown> extends Component<ListProps<T>, ListState
     getSelected(): ListDataItem<T> | null;
     defaultItemHeight(): number;
     scrollEndHandler: () => void;
+    scrollToActive: () => void;
     checkOverflow: () => void;
     getVisibleListHeight(maxHeight: number): number;
     private _deprecatedGenerateKeyFromContent;

package/components/list/list.js

@@ -119,6 +119,9 @@ export default class List extends Component {
             shouldActivateFirstItem(this.props)) {
             this.activateFirst();
         }
+        if (!this.props.renderOptimization) {
+            this.scrollToActive();
+        }
     }
     shouldComponentUpdate(nextProps, nextState) {
         return (Object.keys(nextProps).some(key => !Object.is(nextProps[key], this.props[key])) ||
@@ -129,18 +132,8 @@ export default class List extends Component {
             this.virtualizedList.recomputeRowHeights();
         }
         const { activeIndex } = this.state;
-        if (!this.props.disableScrollToActive && activeIndex != null && activeIndex !== prevState.activeIndex) {
-            if (this.virtualizedList) {
-                this.virtualizedList.scrollToRow(activeIndex + 1);
-            }
-            else {
-                const itemId = this.getId(this.props.data[activeIndex]);
-                if (itemId) {
-                    document.getElementById(itemId)?.scrollIntoView?.({
-                        block: 'center',
-                    });
-                }
-            }
+        if (activeIndex != null && activeIndex !== prevState.activeIndex) {
+            this.scrollToActive();
         }
         const isActiveItemRetainedPosition = activeIndex != null ? prevProps.data[activeIndex]?.key === this.props.data[activeIndex]?.key : false;
         if ((this.props.activeIndex === null || this.props.activeIndex === undefined) &&
@@ -338,6 +331,21 @@ export default class List extends Component {
             }
         }
     });
+    scrollToActive = () => {
+        const { activeIndex } = this.state;
+        if (this.props.disableScrollToActive || activeIndex == null) {
+            return;
+        }
+        if (this.virtualizedList) {
+            this.virtualizedList.scrollToRow(activeIndex + 1);
+        }
+        else {
+            const itemId = this.getId(this.props.data[activeIndex]);
+            if (itemId) {
+                document.getElementById(itemId)?.scrollIntoView?.({ block: 'center' });
+            }
+        }
+    };
     checkOverflow = () => {
         if (this.inner) {
             this.setState({
@@ -449,7 +457,11 @@ export default class List extends Component {
         return props;
     };
     virtualizedListRef = (el) => {
+        const isFirstAssignment = el != null && this.virtualizedList == null;
         this.virtualizedList = el;
+        if (isFirstAssignment) {
+            this.scrollToActive();
+        }
     };
     containerRef = (el) => {
         this.container = el;

package/components/query-assist/query-assist.d.ts

@@ -157,7 +157,7 @@ interface CaretPositionParams {
     forceSetCaret?: boolean | null | undefined;
 }
 interface HistoryEntry {
-    query: string | null | undefined;
+    normalizedQuery: string;
     caret: Position | number;
 }
 /**
@@ -218,7 +218,8 @@ export default class QueryAssist extends Component<QueryAssistProps> {
     immediateState: QueryAssistChange;
     requestData?: (afterCompletion?: boolean) => void;
     ngModelStateField: string;
-    historyStack: HistoryEntry[];
+    undoHistoryStack: HistoryEntry[];
+    redoHistoryStack: HistoryEntry[];
     mouseIsDownOnPopup?: boolean;
     handleFocusChange: (e: SyntheticEvent) => void;
     node?: HTMLElement | null;
@@ -233,9 +234,11 @@ export default class QueryAssist extends Component<QueryAssistProps> {
     handleInput: (e: Event | SyntheticEvent) => void;
     handleEnter: (e: React.KeyboardEvent) => void;
     handleTab: (e: Event) => boolean | void;
-    setState: (state: Partial<QueryAssistState>, resolve?: () => void) => void;
+    setState: (state: Partial<QueryAssistState>, resolve?: () => void, undoOrRedo?: boolean) => void;
     private _pushHistory;
     undo: (e: Event) => void;
+    redo: (e: Event) => void;
+    private _undoOrRedo;
     handlePaste: (e: React.ClipboardEvent) => void;
     handleCaretMove: (e: Event | SyntheticEvent) => void;
     handleStyleRangesResponse: ({ suggestions, ...restProps }: QueryAssistResponse) => Promise<void>;

package/components/query-assist/query-assist.js

@@ -118,7 +118,7 @@ export default class QueryAssist extends Component {
             this.requestStyleRanges().catch(noop);
         }
         this.setCaretPosition();
-        this._pushHistory(this.state);
+        this._pushHistory(this.state.query);
     }
     shouldComponentUpdate(props, state) {
         return (state.query !== this.state.query ||
@@ -163,8 +163,8 @@ export default class QueryAssist extends Component {
     immediateState;
     requestData;
     ngModelStateField = ngModelStateField;
-    // An array of {query: string; caret: number}[]
-    historyStack = [];
+    undoHistoryStack = [];
+    redoHistoryStack = [];
     mouseIsDownOnPopup;
     handleFocusChange = (e) => {
         // otherwise it's blur and false
@@ -290,6 +290,9 @@ export default class QueryAssist extends Component {
         if (this.props.autoOpen === 'force' || props.query.length > 0) {
             this.requestData?.();
         }
+        else {
+            this.handleResponse({ caret: props.caret });
+        }
     };
     // It's necessary to prevent new element creation before any other hooks
     handleEnter = (e) => {
@@ -313,31 +316,45 @@ export default class QueryAssist extends Component {
         }
         return true;
     };
-    setState = (state, resolve) => {
+    setState = (state, resolve, undoOrRedo = false) => {
         super.setState(state, () => {
-            this._pushHistory(state);
+            if (!undoOrRedo && 'query' in state) {
+                this._pushHistory(state.query);
+            }
             resolve?.();
         });
     };
-    _pushHistory(state) {
-        const queryIsSet = 'query' in state;
-        const queryIsSame = this.historyStack[0]?.query === state.query;
-        if (queryIsSet && !queryIsSame) {
-            this.historyStack.unshift({
-                query: state.query,
+    _pushHistory(query) {
+        const normalizedQuery = query ?? '';
+        if (!this.undoHistoryStack.length || this.undoHistoryStack[0].normalizedQuery !== normalizedQuery) {
+            this.undoHistoryStack.unshift({
+                normalizedQuery,
                 caret: this.caret?.getPosition({ avoidFocus: true }) ?? -1,
             });
+            this.redoHistoryStack = [];
         }
     }
     undo = (e) => {
-        const previous = this.historyStack.splice(0, 2)[1];
-        if (!previous) {
+        this._undoOrRedo(e, false);
+    };
+    redo = (e) => {
+        this._undoOrRedo(e, true);
+    };
+    _undoOrRedo = (e, redo) => {
+        const stack = redo ? this.redoHistoryStack : this.undoHistoryStack;
+        const [current, previous] = stack;
+        const stateToApply = redo ? current : previous;
+        if (!stateToApply) {
             return;
         }
-        this.setState({ query: previous.query }, () => {
-            this.caret?.setPosition(previous.caret);
+        stack.shift();
+        e.preventDefault?.();
+        this.setState({ query: stateToApply.normalizedQuery }, () => {
+            const oppositeStack = redo ? this.undoHistoryStack : this.redoHistoryStack;
+            oppositeStack.unshift(current);
+            this.caret?.setPosition(stateToApply.caret);
             this.handleInput(e);
-        });
+        }, true);
     };
     handlePaste = (e) => {
         const INSERT_COMMAND = 'insertText';
@@ -368,7 +385,7 @@ export default class QueryAssist extends Component {
         }
     };
     handleStyleRangesResponse = ({ suggestions, ...restProps }) => this.handleResponse(restProps);
-    handleResponse = ({ query = '', caret = 0, styleRanges, suggestions = [] }, afterCompletion = false) => new Promise((resolve, reject) => {
+    handleResponse = ({ query = '', caret = 0, styleRanges = [], suggestions = [] }, afterCompletion = false) => new Promise((resolve, reject) => {
         if (query === this.getQuery() &&
             (caret === this.immediateState.caret || this.immediateState.caret === undefined)) {
             // Do not setState on unmounted component
@@ -665,6 +682,7 @@ export default class QueryAssist extends Component {
         'ctrl+space': this.handleCtrlSpace,
         tab: this.handleTab,
         'meta+z': this.undo,
+        'meta+shift+z': this.redo,
         right: noop,
         left: noop,
         space: noop,

package/components/tooltip/tooltip.d.ts

@@ -13,6 +13,7 @@ export interface TooltipProps extends Omit<AllHTMLAttributes<HTMLSpanElement>, '
     selfOverflowOnly?: boolean | null | undefined;
     popupProps?: Partial<PopupAttrs> | null | undefined;
     title?: ReactNode | null | undefined;
+    hide?: boolean | null | undefined;
     theme?: Theme | 'inherit';
     'data-test'?: string | null | undefined;
     long?: boolean | null | undefined;
@@ -21,6 +22,7 @@ export interface TooltipProps extends Omit<AllHTMLAttributes<HTMLSpanElement>, '
  * @name Tooltip
  */
 export default class Tooltip extends Component<TooltipProps> {
+    private static isShow;
     static defaultProps: {
         title: string;
         selfOverflowOnly: boolean;

package/components/tooltip/tooltip.js

@@ -13,6 +13,9 @@ const TooltipContext = createContext(undefined);
  * @name Tooltip
  */
 export default class Tooltip extends Component {
+    static isShow({ title, hide }) {
+        return !!title && !hide;
+    }
     static defaultProps = {
         title: '',
         selfOverflowOnly: false,
@@ -24,15 +27,17 @@ export default class Tooltip extends Component {
         showNestedPopup: false,
     };
     componentDidMount() {
-        if (this.props.title) {
+        if (Tooltip.isShow(this.props)) {
             this.addListeners();
         }
     }
     componentDidUpdate(prevProps) {
-        if (!prevProps.title && this.props.title) {
+        const prevShow = Tooltip.isShow(prevProps);
+        const currShow = Tooltip.isShow(this.props);
+        if (!prevShow && currShow) {
             this.addListeners();
         }
-        else if (prevProps.title && !this.props.title) {
+        else if (prevShow && !currShow) {
             this.hidePopup();
             this.listeners.removeAll();
         }
@@ -50,10 +55,9 @@ export default class Tooltip extends Component {
         this.containerNode = el;
     };
     tryToShowPopup = () => {
-        const { delay, title } = this.props;
-        if (!title) {
+        if (!Tooltip.isShow(this.props))
             return;
-        }
+        const { delay } = this.props;
         if (delay) {
             clearTimeout(this.timeout);
             this.timeout = window.setTimeout(this.showPopup, delay);
@@ -125,8 +129,8 @@ export default class Tooltip extends Component {
         this.setState({ showNestedPopup: false });
     };
     render() {
-        const { children, 'data-test': dataTest, title, delay, theme, selfOverflowOnly, popupProps, long, ...restProps } = this.props;
-        const ariaProps = typeof title === 'string' && !!title ? { 'aria-label': title, role: 'tooltip' } : {};
+        const { children, 'data-test': dataTest, title, delay, theme, selfOverflowOnly, popupProps, long, hide, ...restProps } = this.props;
+        const ariaProps = typeof title === 'string' && Tooltip.isShow({ title, hide }) ? { 'aria-label': title, role: 'tooltip' } : {};
         const { onNestedTooltipShow, onNestedTooltipHide } = this;
         const popup = (<Popup trapFocus={false} anchorElement={this.containerNode} hidden={!this.state.showPopup || this.state.showNestedPopup} onCloseAttempt={this.hidePopup} maxHeight={400} attached={false} onMouseOut={this.hideIfMovedOutsidePopup} top={4} dontCloseOnAnchorClick ref={this.popupRef} {...popupProps} className={classNames(styles.tooltip, { [styles.long]: long, [styles.inheritedTheme]: theme === 'inherit' }, popupProps?.className)}>
         {title}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.97",
+  "version": "7.0.99",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -117,11 +117,11 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
-    "@storybook/addon-a11y": "10.2.13",
-    "@storybook/addon-docs": "^10.2.13",
-    "@storybook/addon-themes": "^10.2.13",
+    "@storybook/addon-a11y": "10.2.14",
+    "@storybook/addon-docs": "^10.2.14",
+    "@storybook/addon-themes": "^10.2.14",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "10.2.13",
+    "@storybook/react-webpack5": "10.2.14",
     "@storybook/test-runner": "^0.24.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
@@ -145,7 +145,7 @@
     "dotenv-cli": "^11.0.0",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-formatter-jslint-xml": "^8.40.0",
+    "eslint-formatter-jslint-xml": "^9.0.1",
     "eslint-import-resolver-exports": "^1.0.0-beta.5",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-import-resolver-webpack": "^0.13.10",
@@ -154,11 +154,11 @@
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.2.13",
+    "eslint-plugin-storybook": "^10.2.14",
     "eslint-plugin-unicorn": "^63.0.0",
     "events": "^3.3.0",
     "glob": "^13.0.6",
-    "globals": "^17.3.0",
+    "globals": "^17.4.0",
     "html-webpack-plugin": "^5.6.6",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -166,7 +166,7 @@
     "jest": "~30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "jest-teamcity": "^1.12.0",
-    "lint-staged": "^16.2.7",
+    "lint-staged": "^16.3.1",
     "markdown-it": "^14.1.1",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
@@ -179,7 +179,7 @@
     "rollup": "^4.59.0",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "10.2.13",
+    "storybook": "10.2.14",
     "stylelint": "^17.4.0",
     "stylelint-config-sass-guidelines": "^13.0.0",
     "svg-inline-loader": "^0.8.2",
@@ -217,7 +217,7 @@
     "@babel/core": "^7.29.0",
     "@babel/preset-typescript": "^7.28.5",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^5.16.0",
+    "@jetbrains/icons": "^5.17.0",
     "@jetbrains/postcss-require-hover": "^0.2.0",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",