@jetbrains/ring-ui 5.0.91 → 5.0.93

package/components/popup/position.d.ts

@@ -23,7 +23,7 @@ export interface PositionAttrs {
     autoCorrectTopOverflow: boolean;
 }
 export declare const positionPropKeys: readonly ["directions", "autoPositioning", "autoCorrectTopOverflow", "sidePadding", "top", "left", "offset", "maxHeight", "minWidth"];
-export declare function maxHeightForDirection(direction: Directions, anchorNode: Element, containerNode?: Element | null): number;
+export declare function maxHeightForDirection(direction: Directions, anchorNode: Element, containerNode?: Element | null): number | null;
 export default function position(attrs: PositionAttrs): {
     styles: PositionStyles;
     direction: Directions | null;

package/components/popup/position.js

@@ -46,9 +46,7 @@ function verticalOverflow(styles, scrollingCoordinates, attrs) {
     const viewportMinX = scrollingCoordinates.top + attrs.sidePadding;
     const viewportMaxX = scrollingCoordinates.top + containerHeight - attrs.sidePadding;
     const topOverflow = Math.max(viewportMinX - styles.top, 0);
-    const popupHeight = attrs.maxHeight && typeof attrs.maxHeight === 'number'
-        ? Math.min(attrs.popup.scrollHeight, attrs.maxHeight)
-        : attrs.popup.scrollHeight;
+    const popupHeight = attrs.popup.clientHeight;
     const verticalDiff = styles.top + popupHeight - viewportMaxX;
     const bottomOverflow = Math.max(verticalDiff, 0);
     return topOverflow + bottomOverflow;
@@ -78,6 +76,25 @@ const defaultcontainerRect = {
     top: 0,
     left: 0
 };
+function handleTopOffScreen({ sidePadding, styles, anchorRect, maxHeight, popupScrollHeight, direction, scroll }) {
+    const BORDER_COMPENSATION = 1;
+    const { TOP_LEFT, TOP_RIGHT, TOP_CENTER, RIGHT_TOP, LEFT_TOP } = Directions;
+    const openedToTop = direction != null && [TOP_LEFT, TOP_RIGHT, TOP_CENTER, RIGHT_TOP, LEFT_TOP].includes(direction);
+    if (!openedToTop) {
+        return styles;
+    }
+    const isAttachedToAnchorTop = direction != null && [TOP_LEFT, TOP_CENTER, TOP_RIGHT].includes(direction);
+    const attachingPointY = (isAttachedToAnchorTop ? anchorRect.top : anchorRect.bottom);
+    const effectiveHeight = maxHeight && typeof maxHeight === 'number'
+        ? Math.min(popupScrollHeight, maxHeight)
+        : popupScrollHeight;
+    const hypotheticalTop = attachingPointY - effectiveHeight;
+    if (hypotheticalTop <= sidePadding) {
+        styles.top = sidePadding + scroll.top;
+        styles.maxHeight = attachingPointY - sidePadding + BORDER_COMPENSATION;
+    }
+    return styles;
+}
 export function maxHeightForDirection(direction, anchorNode, containerNode) {
     const container = containerNode || document.documentElement;
     const domRect = anchorNode.getBoundingClientRect();
@@ -87,7 +104,7 @@ export function maxHeightForDirection(direction, anchorNode, containerNode) {
     // XXX
     // If container is the document element
     // then we check client height too because we may have situation when
-    // "height" from "getBoundingClientRect" less than "clientHeight".
+    // "height" from "getBoundingClientRect" less then "clientHeight".
     container === document.documentElement ? container.clientHeight : 0);
     const bottomMaxHeight = Math.max(containerHeight - (topMaxHeight + domRect.height), 0);
     switch (direction) {
@@ -109,8 +126,7 @@ export function maxHeightForDirection(direction, anchorNode, containerNode) {
         case Directions.LEFT_CENTER:
             return (domRect.height / 2) + Math.min(bottomMaxHeight / 2, topMaxHeight / 2);
         default:
-            const exhaustiveCheck = direction;
-            throw new Error(exhaustiveCheck);
+            return null;
     }
 }
 export default function position(attrs) {
@@ -130,7 +146,7 @@ export default function position(attrs) {
         const overflowAttrs = { ...attrs, popup };
         const directionsMatrix = getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset);
         if (!autoPositioning || directions.length === 1) {
-            styles = { ...directionsMatrix[directions[0]] };
+            styles = directionsMatrix[directions[0]];
             chosenDirection = directions[0];
         }
         else {
@@ -145,7 +161,7 @@ export default function position(attrs) {
                     horizontalOverflow(stylesB, scroll, overflowAttrs);
                 return overflowA - overflowB;
             });
-            styles = { ...sortedByIncreasingOverflow[0].styles };
+            styles = sortedByIncreasingOverflow[0].styles;
             chosenDirection = sortedByIncreasingOverflow[0].direction;
         }
         // because of the anchor negative margin top and left also may become negative
@@ -162,11 +178,16 @@ export default function position(attrs) {
     else if (maxHeight) {
         styles.maxHeight = maxHeight;
     }
-    if (autoCorrectTopOverflow && chosenDirection && anchor) {
-        styles.maxHeight = maxHeightForDirection(chosenDirection, anchor, container) - sidePadding;
-        if (styles.top === 0) {
-            styles.top = sidePadding;
-        }
+    if (autoCorrectTopOverflow) {
+        styles = handleTopOffScreen({
+            sidePadding,
+            styles,
+            anchorRect,
+            maxHeight,
+            direction: chosenDirection,
+            popupScrollHeight: popup?.scrollHeight ?? 0,
+            scroll
+        });
     }
     if (minWidth === MinWidth.TARGET || minWidth === 'target') {
         styles.minWidth = anchorRect.width;

package/components/query-assist/query-assist.css

@@ -69,8 +69,6 @@
 }
 
 .huge {
-  --ring-input-padding-block: 5px;
-
   max-height: calc(var(--ring-input-padding-inline) * 4);
 
   padding: 0 0 0 var(--ring-input-padding-inline);
@@ -79,15 +77,9 @@
     padding-right: var(--ring-input-padding-inline);
   }
 
-  & .placeholder {
-    padding-left: 0;
-  }
-
   @nest [dir=rtl] & {
     padding: 0 var(--ring-input-padding-inline) 0 0;
 
-    border: 1px solid var(--ring-borders-color);
-
     & .actions {
       padding: 0 var(--ring-input-padding-inline);
     }
@@ -167,7 +159,7 @@
   color: var(--ring-disabled-color);
 
   @nest [dir=rtl] & {
-    padding-right: calc(var(--ring-input-padding-inline) * 3 - var(--ring-input-padding-block));
+    padding-right: calc(var(--ring-input-padding-inline) * 3 + var(--ring-input-padding-block) * 2);
 
     text-align: right;
   }
@@ -229,6 +221,14 @@
 
     border-color: var(--ring-border-hover-color);
   }
+
+  @nest [dir=rtl] & {
+    border-right: 1px solid var(--ring-borders-color);
+    border-left: 0;
+    border-radius: var(--ring-border-radius);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 }
 
 .clear {
@@ -256,6 +256,10 @@
   padding-left: 0;
 
   @nest [dir=rtl] & {
-    padding-right: 0;
+    padding-right: calc(var(--ring-input-padding-block) * 3);
   }
 }
+
+.loaderActive {
+  padding-right: calc(var(--ring-input-padding-inline) - var(--ring-input-padding-block));
+}

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

@@ -777,12 +777,11 @@ export default class QueryAssist extends Component {
         const inputClasses = classNames(this.props.inputClassName, {
             [`${styles.input} ring-js-shortcuts`]: true,
             [styles.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
-            [styles.inputGap2]: actions.length === 2,
-            [styles.inputLeftGap]: this.isRenderingGlassOrLoader() && glass
+            [styles.inputGap2]: actions.length === 2 // TODO: replace with flex-box layout
         });
         const placeholderStyles = classNames({
             [styles.placeholder]: true,
-            [styles.withoutGlass]: !renderGlass
+            [styles.withoutGlass]: !this.isRenderingGlassOrLoader() || (!renderLoader && huge)
         });
         return (<ControlsHeightContext.Provider value={ControlsHeight.M}>
         <div data-test={dataTests('ring-query-assist', dataTest)} className={containerClasses} role="presentation" ref={this.nodeRef}>
@@ -791,7 +790,8 @@ export default class QueryAssist extends Component {
           {renderGlass && !huge && (<Icon glyph={searchIcon} className={styles.icon} title={this.props.translations.searchTitle} ref={this.glassRef} data-test="query-assist-search-icon"/>)}
 
           {renderLoader && (<div className={classNames(styles.icon, styles.loader, {
-                    [styles.loaderOnTheRight]: !glass
+                    [styles.loaderOnTheRight]: !glass,
+                    [styles.loaderActive]: renderLoader
                 })} ref={this.loaderRef}>
               <LoaderInline />
             </div>)}

package/dist/_helpers/query-assist__suggestions.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import List from '../list/list.js';
 
-var modules_da7ab055 = {"unit":"8px","button-shadow":"inset 0 0 0 1px","height":"var(--ring-button-height)","loaderWidth":"64px","overInputZIndex":"2","inputGap":"24px","light":"light_rui_d22e","heightS":"heightS_rui_d22e","heightM":"heightM_rui_d22e","heightL":"heightL_rui_d22e","button":"button_rui_d22e","active":"active_rui_d22e","withIcon":"withIcon_rui_d22e","icon":"icon_rui_d22e","primary":"primary_rui_d22e","loader":"loader_rui_d22e","loaderBackground":"loaderBackground_rui_d22e","danger":"danger_rui_d22e","text":"text_rui_d22e","content":"content_rui_d22e","text-loading":"text-loading_rui_d22e","inline":"inline_rui_d22e","withNormalIcon":"withNormalIcon_rui_d22e","withDangerIcon":"withDangerIcon_rui_d22e","progress":"progress_rui_d22e","delayed":"delayed_rui_d22e","short":"short_rui_d22e","dropdownIcon":"dropdownIcon_rui_d22e","queryAssist":"queryAssist_rui_d22e","error":"error_rui_d22e","queryAssistDisabled":"queryAssistDisabled_rui_d22e","huge":"huge_rui_d22e","actions":"actions_rui_d22e","placeholder":"placeholder_rui_d22e resetButton_rui_8bff","input":"input_rui_d22e","letter-text":"letter-text_rui_d22e","letterDefault":"letterDefault_rui_d22e","letter-field-name":"letter-field-name_rui_d22e","letter-field-value":"letter-field-value_rui_d22e","letter-operator":"letter-operator_rui_d22e","letter-error":"letter-error_rui_d22e","highlight":"highlight_rui_d22e","service":"service_rui_d22e","letter":"letter_rui_d22e","rightSearchButton":"rightSearchButton_rui_d22e","clear":"clear_rui_d22e","loaderOnTheRight":"loaderOnTheRight_rui_d22e","withoutGlass":"withoutGlass_rui_d22e"};
+var modules_da7ab055 = {"unit":"8px","button-shadow":"inset 0 0 0 1px","height":"var(--ring-button-height)","loaderWidth":"64px","overInputZIndex":"2","inputGap":"24px","light":"light_rui_d22e","heightS":"heightS_rui_d22e","heightM":"heightM_rui_d22e","heightL":"heightL_rui_d22e","button":"button_rui_d22e","active":"active_rui_d22e","withIcon":"withIcon_rui_d22e","icon":"icon_rui_d22e","primary":"primary_rui_d22e","loader":"loader_rui_d22e","loaderBackground":"loaderBackground_rui_d22e","danger":"danger_rui_d22e","text":"text_rui_d22e","content":"content_rui_d22e","text-loading":"text-loading_rui_d22e","inline":"inline_rui_d22e","withNormalIcon":"withNormalIcon_rui_d22e","withDangerIcon":"withDangerIcon_rui_d22e","progress":"progress_rui_d22e","delayed":"delayed_rui_d22e","short":"short_rui_d22e","dropdownIcon":"dropdownIcon_rui_d22e","queryAssist":"queryAssist_rui_d22e","error":"error_rui_d22e","queryAssistDisabled":"queryAssistDisabled_rui_d22e","huge":"huge_rui_d22e","actions":"actions_rui_d22e","input":"input_rui_d22e","letter-text":"letter-text_rui_d22e","letterDefault":"letterDefault_rui_d22e","letter-field-name":"letter-field-name_rui_d22e","letter-field-value":"letter-field-value_rui_d22e","letter-operator":"letter-operator_rui_d22e","letter-error":"letter-error_rui_d22e","highlight":"highlight_rui_d22e","service":"service_rui_d22e","placeholder":"placeholder_rui_d22e resetButton_rui_8bff","letter":"letter_rui_d22e","rightSearchButton":"rightSearchButton_rui_d22e","clear":"clear_rui_d22e","loaderOnTheRight":"loaderOnTheRight_rui_d22e","withoutGlass":"withoutGlass_rui_d22e","loaderActive":"loaderActive_rui_d22e"};
 
 const ICON_ID_LENGTH = 44;
 class QueryAssistSuggestions {

package/dist/popup/position.d.ts

@@ -23,7 +23,7 @@ export interface PositionAttrs {
     autoCorrectTopOverflow: boolean;
 }
 export declare const positionPropKeys: readonly ["directions", "autoPositioning", "autoCorrectTopOverflow", "sidePadding", "top", "left", "offset", "maxHeight", "minWidth"];
-export declare function maxHeightForDirection(direction: Directions, anchorNode: Element, containerNode?: Element | null): number;
+export declare function maxHeightForDirection(direction: Directions, anchorNode: Element, containerNode?: Element | null): number | null;
 export default function position(attrs: PositionAttrs): {
     styles: PositionStyles;
     direction: Directions | null;

package/dist/popup/position.js

@@ -81,7 +81,7 @@ function verticalOverflow(styles, scrollingCoordinates, attrs) {
   const viewportMinX = scrollingCoordinates.top + attrs.sidePadding;
   const viewportMaxX = scrollingCoordinates.top + containerHeight - attrs.sidePadding;
   const topOverflow = Math.max(viewportMinX - styles.top, 0);
-  const popupHeight = attrs.maxHeight && typeof attrs.maxHeight === 'number' ? Math.min(attrs.popup.scrollHeight, attrs.maxHeight) : attrs.popup.scrollHeight;
+  const popupHeight = attrs.popup.clientHeight;
   const verticalDiff = styles.top + popupHeight - viewportMaxX;
   const bottomOverflow = Math.max(verticalDiff, 0);
   return topOverflow + bottomOverflow;
@@ -101,6 +101,38 @@ const defaultcontainerRect = {
   top: 0,
   left: 0
 };
+function handleTopOffScreen(_ref) {
+  let {
+    sidePadding,
+    styles,
+    anchorRect,
+    maxHeight,
+    popupScrollHeight,
+    direction,
+    scroll
+  } = _ref;
+  const BORDER_COMPENSATION = 1;
+  const {
+    TOP_LEFT,
+    TOP_RIGHT,
+    TOP_CENTER,
+    RIGHT_TOP,
+    LEFT_TOP
+  } = Directions;
+  const openedToTop = direction != null && [TOP_LEFT, TOP_RIGHT, TOP_CENTER, RIGHT_TOP, LEFT_TOP].includes(direction);
+  if (!openedToTop) {
+    return styles;
+  }
+  const isAttachedToAnchorTop = direction != null && [TOP_LEFT, TOP_CENTER, TOP_RIGHT].includes(direction);
+  const attachingPointY = isAttachedToAnchorTop ? anchorRect.top : anchorRect.bottom;
+  const effectiveHeight = maxHeight && typeof maxHeight === 'number' ? Math.min(popupScrollHeight, maxHeight) : popupScrollHeight;
+  const hypotheticalTop = attachingPointY - effectiveHeight;
+  if (hypotheticalTop <= sidePadding) {
+    styles.top = sidePadding + scroll.top;
+    styles.maxHeight = attachingPointY - sidePadding + BORDER_COMPENSATION;
+  }
+  return styles;
+}
 function maxHeightForDirection(direction, anchorNode, containerNode) {
   const container = containerNode || document.documentElement;
   const domRect = anchorNode.getBoundingClientRect();
@@ -110,7 +142,7 @@ function maxHeightForDirection(direction, anchorNode, containerNode) {
   // XXX
   // If container is the document element
   // then we check client height too because we may have situation when
-  // "height" from "getBoundingClientRect" less than "clientHeight".
+  // "height" from "getBoundingClientRect" less then "clientHeight".
   container === document.documentElement ? container.clientHeight : 0);
   const bottomMaxHeight = Math.max(containerHeight - (topMaxHeight + domRect.height), 0);
   switch (direction) {
@@ -132,8 +164,7 @@ function maxHeightForDirection(direction, anchorNode, containerNode) {
     case Directions.LEFT_CENTER:
       return domRect.height / 2 + Math.min(bottomMaxHeight / 2, topMaxHeight / 2);
     default:
-      const exhaustiveCheck = direction;
-      throw new Error(exhaustiveCheck);
+      return null;
   }
 }
 function position(attrs) {
@@ -169,9 +200,7 @@ function position(attrs) {
     };
     const directionsMatrix = getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset);
     if (!autoPositioning || directions.length === 1) {
-      styles = {
-        ...directionsMatrix[directions[0]]
-      };
+      styles = directionsMatrix[directions[0]];
       chosenDirection = directions[0];
     } else {
       const sortedByIncreasingOverflow = directions.
@@ -179,20 +208,18 @@ function position(attrs) {
       concat(directions[0]).filter(direction => directionsMatrix[direction]).map(direction => ({
         styles: directionsMatrix[direction],
         direction
-      })).sort((_ref, _ref2) => {
+      })).sort((_ref2, _ref3) => {
         let {
           styles: stylesA
-        } = _ref;
+        } = _ref2;
         let {
           styles: stylesB
-        } = _ref2;
+        } = _ref3;
         const overflowA = verticalOverflow(stylesA, scroll, overflowAttrs) + horizontalOverflow(stylesA, scroll, overflowAttrs);
         const overflowB = verticalOverflow(stylesB, scroll, overflowAttrs) + horizontalOverflow(stylesB, scroll, overflowAttrs);
         return overflowA - overflowB;
       });
-      styles = {
-        ...sortedByIncreasingOverflow[0].styles
-      };
+      styles = sortedByIncreasingOverflow[0].styles;
       chosenDirection = sortedByIncreasingOverflow[0].direction;
     }
     // because of the anchor negative margin top and left also may become negative
@@ -208,11 +235,17 @@ function position(attrs) {
   } else if (maxHeight) {
     styles.maxHeight = maxHeight;
   }
-  if (autoCorrectTopOverflow && chosenDirection && anchor) {
-    styles.maxHeight = maxHeightForDirection(chosenDirection, anchor, container) - sidePadding;
-    if (styles.top === 0) {
-      styles.top = sidePadding;
-    }
+  if (autoCorrectTopOverflow) {
+    var _popup$scrollHeight;
+    styles = handleTopOffScreen({
+      sidePadding,
+      styles,
+      anchorRect,
+      maxHeight,
+      direction: chosenDirection,
+      popupScrollHeight: (_popup$scrollHeight = popup?.scrollHeight) !== null && _popup$scrollHeight !== void 0 ? _popup$scrollHeight : 0,
+      scroll
+    });
   }
   if (minWidth === MinWidth.TARGET || minWidth === 'target') {
     styles.minWidth = anchorRect.width;

package/dist/query-assist/query-assist.js

@@ -776,12 +776,12 @@ class QueryAssist extends Component {
     const inputClasses = classNames(this.props.inputClassName, {
       [`${modules_da7ab055.input} ring-js-shortcuts`]: true,
       [modules_da7ab055.inputGap]: actions.length || this.isRenderingGlassOrLoader() && !glass,
-      [modules_da7ab055.inputGap2]: actions.length === 2,
-      [modules_da7ab055.inputLeftGap]: this.isRenderingGlassOrLoader() && glass
+      [modules_da7ab055.inputGap2]: actions.length === 2 // TODO: replace with flex-box layout
     });
+
     const placeholderStyles = classNames({
       [modules_da7ab055.placeholder]: true,
-      [modules_da7ab055.withoutGlass]: !renderGlass
+      [modules_da7ab055.withoutGlass]: !this.isRenderingGlassOrLoader() || !renderLoader && huge
     });
     return /*#__PURE__*/React.createElement(ControlsHeightContext.Provider, {
       value: ControlsHeight.M
@@ -801,7 +801,8 @@ class QueryAssist extends Component {
       "data-test": "query-assist-search-icon"
     }), renderLoader && /*#__PURE__*/React.createElement("div", {
       className: classNames(modules_da7ab055.icon, modules_da7ab055.loader, {
-        [modules_da7ab055.loaderOnTheRight]: !glass
+        [modules_da7ab055.loaderOnTheRight]: !glass,
+        [modules_da7ab055.loaderActive]: renderLoader
       }),
       ref: this.loaderRef
     }, /*#__PURE__*/React.createElement(LoaderInline, null)), /*#__PURE__*/React.createElement(ContentEditable, {