@jetbrains/ring-ui 7.0.86 → 7.0.88

package/components/popup/popup.css

@@ -29,6 +29,8 @@
   top: unset;
   left: unset;
 
+  max-height: 100%;
+
   margin: 0;
 }
 

package/components/popup/popup.js

@@ -163,6 +163,7 @@ export default class Popup extends PureComponent {
                     left: this.props.left,
                     directions: this.props.directions,
                     offset: this.props.offset,
+                    maxHeight: this.props.maxHeight,
                 });
                 const { direction } = this.position();
                 if (direction) {

package/components/popup/position-css.d.ts

@@ -9,6 +9,7 @@ interface SetCSSAnchorPositioningParams {
     left?: number;
     directions: readonly Directions[];
     offset?: number;
+    maxHeight?: number | 'screen' | null;
 }
-export declare const setCSSAnchorPositioning: ({ popup, anchor, uid, minWidth, top, left, directions, offset, }: SetCSSAnchorPositioningParams) => void;
+export declare const setCSSAnchorPositioning: ({ popup, anchor, uid, minWidth, top, left, directions, offset, maxHeight, }: SetCSSAnchorPositioningParams) => void;
 export {};

package/components/popup/position-css.js

@@ -1,6 +1,6 @@
 import { getRect } from '../global/dom';
-import { calculateMinWidth } from './position';
-import { Directions } from './popup.consts';
+import { calculateMinWidth, MaxHeight } from './position';
+import { Directions, Dimension } from './popup.consts';
 export const supportsCSSAnchorPositioning = () => CSS?.supports?.('anchor-name', 'none');
 const getPositionArea = (direction) => {
     switch (direction) {
@@ -36,7 +36,7 @@ const getPositionFallbacks = (directions) => directions
     .slice(1)
     .map(direction => getPositionArea(direction)[1])
     .join(', ');
-export const setCSSAnchorPositioning = ({ popup, anchor, uid, minWidth, top, left, directions, offset, }) => {
+export const setCSSAnchorPositioning = ({ popup, anchor, uid, minWidth, top, left, directions, offset, maxHeight, }) => {
     const anchorName = anchor.style.getPropertyValue('anchor-name') || `--anchor-${uid}`;
     if (!anchor.style.getPropertyValue('anchor-name')) {
         anchor.style.setProperty('anchor-name', anchorName);
@@ -52,6 +52,20 @@ export const setCSSAnchorPositioning = ({ popup, anchor, uid, minWidth, top, lef
     if (left) {
         popup.style.left = `${left}px`;
     }
+    // When there is just 1 direction, the `max-height: 100%` from CSS should stay applied so popup doesn't overflow the anchor RG-2754
+    const SHOULD_AUTO_SHRINK = directions.length <= 1;
+    if (!SHOULD_AUTO_SHRINK) {
+        const screenWithMargin = `calc(100vh - ${Dimension.MARGIN * 2}px)`;
+        if (maxHeight === 'screen' || maxHeight === MaxHeight.SCREEN) {
+            popup.style.maxHeight = screenWithMargin;
+        }
+        else if (typeof maxHeight === 'number' && maxHeight > 0) {
+            popup.style.maxHeight = `min(${screenWithMargin}, ${maxHeight}px)`;
+        }
+    }
+    else {
+        popup.style.maxHeight = '';
+    }
     const [initialPositionStyle, initialPositionName] = getPositionArea(directions[0]);
     popup.style.setProperty('position-area', initialPositionStyle);
     if (offset) {

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

@@ -13,7 +13,7 @@ export interface QueryAssistSuggestion {
     completionStart?: number;
     completionEnd?: number;
 }
-export interface SuggestionItem {
+export interface SuggestionItem extends ListDataItem {
     data?: QueryAssistSuggestion;
 }
 export default class QueryAssistSuggestions {

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

@@ -1,7 +1,7 @@
 import { Component, type ComponentRef, type ReactNode, type SyntheticEvent } from 'react';
 import * as React from 'react';
 import Caret, { type Position } from '../caret/caret';
-import PopupMenu from '../popup-menu/popup-menu';
+import PopupMenu, { type PopupMenuAttrs } from '../popup-menu/popup-menu';
 import Button from '../button/button';
 import Icon from '../icon/icon';
 import { Size } from '../input/input';
@@ -134,6 +134,7 @@ export interface QueryAssistProps {
     'data-test'?: string | null | undefined;
     huge?: boolean | null | undefined;
     size: Size;
+    menuProps?: PopupMenuAttrs | null | undefined;
 }
 export interface StyleRange {
     style: string;

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

@@ -5,7 +5,8 @@ import debounce from 'just-debounce-it';
 import classNames from 'classnames';
 import { dequal } from 'dequal';
 import searchIcon from '@jetbrains/icons/search';
-import closeIcon from '@jetbrains/icons/close-12px';
+import closeIcon from '@jetbrains/icons/close';
+import close12pxIcon from '@jetbrains/icons/close-12px';
 import getUID from '../global/get-uid';
 import dataTests from '../global/data-tests';
 import { getRect, preventDefault } from '../global/dom';
@@ -679,7 +680,7 @@ export default class QueryAssist extends Component {
         const renderClear = this.props.clear && !!this.state.query;
         if (renderClear) {
             actions.push(<I18nContext.Consumer key={'clearAction'}>
-          {({ translate }) => (<Button icon={closeIcon} className={classNames(styles.clear, this.props.clearIconClassName)} title={this.props.translations?.clearTitle ?? translate('clearTitle')} ref={this.clearRef} onClick={this.clearQuery} data-test='query-assist-clear-icon'/>)}
+          {({ translate }) => (<Button icon={this.props.huge ? closeIcon : close12pxIcon} className={classNames(styles.clear, this.props.clearIconClassName)} title={this.props.translations?.clearTitle ?? translate('clearTitle')} ref={this.clearRef} onClick={this.clearQuery} data-test='query-assist-clear-icon'/>)}
         </I18nContext.Consumer>);
         }
         return actions;
@@ -735,7 +736,7 @@ export default class QueryAssist extends Component {
                   {actions}
                 </div>) : null}
 
-              <PopupMenu hidden={!this.state.showPopup} onCloseAttempt={this.closePopup} ref={this.popupRef} anchorElement={this.node} keepMounted attached className={this.props.popupClassName} directions={[PopupMenu.PopupProps.Directions.BOTTOM_RIGHT]} data={useCustomItemRender ? this.state.suggestions : this.renderSuggestions()} data-test='ring-query-assist-popup' hint={this.props.hint} shortcutsMap={this.listShortcutsMap} hintOnSelection={this.props.hintOnSelection} left={this.getPopupOffset(this.state.suggestions)} maxHeight={PopupMenu.PopupProps.MaxHeight.SCREEN} onMouseDown={this.trackPopupMouseState} onMouseUp={this.trackPopupMouseState} onSelect={item => this.handleComplete(item)}/>
+              <PopupMenu hidden={!this.state.showPopup} onCloseAttempt={this.closePopup} ref={this.popupRef} anchorElement={this.node} keepMounted attached className={this.props.popupClassName} directions={[PopupMenu.PopupProps.Directions.BOTTOM_RIGHT, PopupMenu.PopupProps.Directions.BOTTOM_LEFT]} data={useCustomItemRender ? this.state.suggestions : this.renderSuggestions()} data-test='ring-query-assist-popup' hint={this.props.hint} shortcutsMap={this.listShortcutsMap} hintOnSelection={this.props.hintOnSelection} left={this.getPopupOffset(this.state.suggestions)} maxHeight={PopupMenu.PopupProps.MaxHeight.SCREEN} onMouseDown={this.trackPopupMouseState} onMouseUp={this.trackPopupMouseState} onSelect={item => this.handleComplete(item)} {...this.props.menuProps}/>
 
               {glass && huge && (<div className={styles.rightSearchButton} data-test='query-assist-search-button'>
                   <Icon glyph={searchIcon} className={classNames(styles.rightSearchIcon, this.props.searchButtonClassName)} title={translations?.searchTitle ?? translate('searchTitle')} onClick={this.handleApply} ref={this.glassRef} data-test='query-assist-search-icon'/>

package/components/tabs/tabs.css

@@ -39,7 +39,10 @@
 
   position: relative;
 
-  display: inline-block;
+  /* Use inline-flex (not inline-block) to avoid Safari tab title alignment/layout bugs */
+
+  display: inline-flex;
+  align-items: center;
 
   padding: 0;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.86",
+  "version": "7.0.88",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -93,7 +93,7 @@
     "@babel/eslint-parser": "^7.28.5",
     "@csstools/css-parser-algorithms": "^3.0.4",
     "@csstools/stylelint-no-at-nest-rule": "^4.0.0",
-    "@eslint/compat": "^2.0.0",
+    "@eslint/compat": "^2.0.1",
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.39.2",
     "@figma/code-connect": "^1.3.12",
@@ -118,14 +118,14 @@
     "@types/chai-as-promised": "^8.0.2",
     "@types/chai-dom": "1.11.3",
     "@types/markdown-it": "^14.1.2",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-react": "^5.1.2",
-    "@vitest/eslint-plugin": "^1.6.5",
+    "@vitest/eslint-plugin": "^1.6.6",
     "acorn": "^8.15.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001762",
+    "caniuse-lite": "^1.0.30001763",
     "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.1.2",
@@ -164,7 +164,7 @@
     "react-dom": "^19.2.3",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.1.2",
-    "rollup": "^4.54.0",
+    "rollup": "^4.55.1",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
     "storybook": "10.1.11",
@@ -174,7 +174,7 @@
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.16",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.51.0",
+    "typescript-eslint": "^8.52.0",
     "vitest": "^4.0.16",
     "vitest-teamcity-reporter": "^0.4.1",
     "webpack": "^5.104.1",
@@ -223,7 +223,7 @@
     "element-resize-detector": "^1.2.4",
     "fastdom": "^1.0.12",
     "file-loader": "^6.2.0",
-    "focus-trap": "^7.7.1",
+    "focus-trap": "^7.8.0",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",
@@ -233,7 +233,7 @@
     "postcss-font-family-system-ui": "^5.0.0",
     "postcss-loader": "^8.2.0",
     "postcss-modules-values-replace": "^4.2.2",
-    "postcss-preset-env": "^10.6.0",
+    "postcss-preset-env": "^10.6.1",
     "react-compiler-runtime": "^1.0.0",
     "react-movable": "^3.4.1",
     "react-virtualized": "^9.22.6",