@jetbrains/ring-ui 7.0.87 → 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.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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.87",
+  "version": "7.0.88",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"