@jetbrains/ring-ui 5.0.99 → 5.1.1

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 | null;
+export declare function maxHeightForDirection(direction: Directions, anchorNode: Element, container?: Element): number;
 export default function position(attrs: PositionAttrs): {
     styles: PositionStyles;
     direction: Directions | null;

package/components/popup/position.js

@@ -46,7 +46,9 @@ 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.popup.clientHeight;
+    const popupHeight = attrs.maxHeight && typeof attrs.maxHeight === 'number'
+        ? Math.min(attrs.popup.scrollHeight, attrs.maxHeight)
+        : attrs.popup.scrollHeight;
     const verticalDiff = styles.top + popupHeight - viewportMaxX;
     const bottomOverflow = Math.max(verticalDiff, 0);
     return topOverflow + bottomOverflow;
@@ -76,37 +78,26 @@ 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;
+export function maxHeightForDirection(direction, anchorNode, container = document.documentElement) {
+    const MIN_POPUP_SIZE = 8;
+    const domRect = anchorNode.getBoundingClientRect();
+    let topMaxHeight;
+    let bottomMaxHeight;
+    if (container === document.documentElement) {
+        topMaxHeight = Math.max(domRect.top, MIN_POPUP_SIZE);
+        bottomMaxHeight = Math.max(getWindowHeight() - domRect.top - domRect.height, MIN_POPUP_SIZE);
     }
-    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;
+    else {
+        const containerRect = container.getBoundingClientRect();
+        topMaxHeight = Math.max(domRect.top - containerRect.top, 0);
+        const containerHeight = Math.max(containerRect.height, 
+        // 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".
+        container === document.documentElement ? container.clientHeight : 0);
+        bottomMaxHeight = Math.max(containerHeight - (topMaxHeight + domRect.height), 0);
     }
-    return styles;
-}
-export function maxHeightForDirection(direction, anchorNode, containerNode) {
-    const container = containerNode || document.documentElement;
-    const domRect = anchorNode.getBoundingClientRect();
-    const containerRect = container.getBoundingClientRect();
-    const topMaxHeight = Math.max(domRect.top - containerRect.top, 0);
-    const containerHeight = Math.max(containerRect.height, 
-    // XXX
-    // If container is the document element
-    // then we check client height too because we may have situation when
-    // "height" from "getBoundingClientRect" less then "clientHeight".
-    container === document.documentElement ? container.clientHeight : 0);
-    const bottomMaxHeight = Math.max(containerHeight - (topMaxHeight + domRect.height), 0);
     switch (direction) {
         case Directions.TOP_LEFT:
         case Directions.TOP_CENTER:
@@ -126,7 +117,8 @@ export function maxHeightForDirection(direction, anchorNode, containerNode) {
         case Directions.LEFT_CENTER:
             return (domRect.height / 2) + Math.min(bottomMaxHeight / 2, topMaxHeight / 2);
         default:
-            return null;
+            const exhaustiveCheck = direction;
+            throw new Error(exhaustiveCheck);
     }
 }
 export default function position(attrs) {
@@ -146,7 +138,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 {
@@ -161,7 +153,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
@@ -178,16 +170,14 @@ export default function position(attrs) {
     else if (maxHeight) {
         styles.maxHeight = maxHeight;
     }
-    if (autoCorrectTopOverflow) {
-        styles = handleTopOffScreen({
-            sidePadding,
-            styles,
-            anchorRect,
-            maxHeight,
-            direction: chosenDirection,
-            popupScrollHeight: popup?.scrollHeight ?? 0,
-            scroll
-        });
+    if (autoCorrectTopOverflow && chosenDirection && anchor) {
+        const maxForDirection = maxHeightForDirection(chosenDirection, anchor) - sidePadding;
+        if (!styles.maxHeight || styles.maxHeight > maxForDirection) {
+            styles.maxHeight = maxForDirection;
+            if (styles.top === 0) {
+                styles.top = sidePadding;
+            }
+        }
     }
     if (minWidth === MinWidth.TARGET || minWidth === 'target') {
         styles.minWidth = anchorRect.width;

package/components/select/select__popup.js

@@ -278,7 +278,7 @@ export default class SelectPopup extends PureComponent {
         const anchorNode = this.props.anchorElement;
         const containerNode = getPopupContainer(ringPopupTarget) || document.documentElement;
         return anchorNode != null
-            ? Math.min(directions.reduce((maxHeight, direction) => (Math.max(maxHeight, maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : null) ?? 0)), minMaxHeight), userDefinedMaxHeight)
+            ? Math.min(directions.reduce((maxHeight, direction) => (Math.max(maxHeight, maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : undefined) ?? 0)), minMaxHeight), userDefinedMaxHeight)
             : userDefinedMaxHeight;
     });
     popupRef = (el) => {

package/components/user-card/card.js

@@ -60,25 +60,27 @@ export default class UserCard extends PureComponent {
             {!!avatarInfo && avatarInfo}
           </div>
           <div className={styles.userInformation}>
-            <div className={styles.userNameLine}>
-              {user.href && (<Link href={user.href} className={styles.userName}>
-                  {user.name}
-                </Link>)}
-              {!user.href && <span className={styles.userName}>{user.name}</span>}
-              {typeof user.online === 'boolean' &&
+            <div className={styles.userInformationGeneral}>
+              <div className={styles.userNameLine}>
+                {user.href && (<Link href={user.href} className={styles.userName}>
+                    {user.name}
+                  </Link>)}
+                {!user.href && <span className={styles.userName}>{user.name}</span>}
+                {typeof user.online === 'boolean' &&
                 (<span className={userActiveStatusClasses} title={user.online ? wording.online : wording.offline}/>)}
-              {!!info && <span className={styles.userNameInfo}>{info}</span>}
-              {user.banned &&
+                {!!info && <span className={styles.userNameInfo}>{info}</span>}
+                {user.banned &&
                 (<span className={classNames(badgeStyles.badge, badgeStyles.invalid)} title={user.banReason}>{wording.banned}</span>)}
+              </div>
+              <div className={styles.userLogin}>{user.login}</div>
+              {user.email && (<span className={styles.userEmailWrapper}>
+                  <Link pseudo onClick={this.copyEmail} className={styles.userEmail}>
+                    {user.email}
+                  </Link>
+                  {user.unverifiedEmail && (<span className={styles.unverifiedLabel}>{wording.unverified}</span>)}
+                  <Icon title={wording.copyToClipboard} className={styles.userCopyIcon} onClick={this.copyEmail} glyph={copyIcon} size={IconSize.Size14} suppressSizeWarning/>
+                </span>)}
             </div>
-            <div className={styles.userLogin}>{user.login}</div>
-            {user.email && (<span className={styles.userEmailWrapper}>
-                <Link pseudo onClick={this.copyEmail} className={styles.userEmail}>
-                  {user.email}
-                </Link>
-                {user.unverifiedEmail && (<span className={styles.unverifiedLabel}>{wording.unverified}</span>)}
-                <Icon title={wording.copyToClipboard} className={styles.userCopyIcon} onClick={this.copyEmail} glyph={copyIcon} size={IconSize.Size14} suppressSizeWarning/>
-              </span>)}
             {children}
           </div>
         </div>

package/components/user-card/user-card.css

@@ -28,6 +28,10 @@
   line-height: 18px;
 }
 
+.userInformationGeneral {
+  height: 56px;
+}
+
 .userNameLine {
   height: var(--ring-line-height-lowest);
 

package/dist/_helpers/card.js

@@ -10,7 +10,7 @@ import { m as modules_6c9187df } from './badge.js';
 import Icon from '../icon/icon.js';
 import { Size as Size$1 } from '../icon/icon__constants.js';
 
-var modules_a4196c17 = {"unit":"8px","light":"light_rui_6e59","userCardSpaced":"userCardSpaced_rui_6e59","userInformationContainer":"userInformationContainer_rui_6e59","userAvatar":"userAvatar_rui_6e59","userInformation":"userInformation_rui_6e59","userNameLine":"userNameLine_rui_6e59","userName":"userName_rui_6e59","userLogin":"userLogin_rui_6e59","userEmail":"userEmail_rui_6e59","userCopyIcon":"userCopyIcon_rui_6e59","userEmailWrapper":"userEmailWrapper_rui_6e59","unverifiedLabel":"unverifiedLabel_rui_6e59","userNameInfo":"userNameInfo_rui_6e59","userActiveStatus":"userActiveStatus_rui_6e59","online":"online_rui_6e59"};
+var modules_a4196c17 = {"unit":"8px","light":"light_rui_6e59","userCardSpaced":"userCardSpaced_rui_6e59","userInformationContainer":"userInformationContainer_rui_6e59","userAvatar":"userAvatar_rui_6e59","userInformation":"userInformation_rui_6e59","userInformationGeneral":"userInformationGeneral_rui_6e59","userNameLine":"userNameLine_rui_6e59","userName":"userName_rui_6e59","userLogin":"userLogin_rui_6e59","userEmail":"userEmail_rui_6e59","userCopyIcon":"userCopyIcon_rui_6e59","userEmailWrapper":"userEmailWrapper_rui_6e59","unverifiedLabel":"unverifiedLabel_rui_6e59","userNameInfo":"userNameInfo_rui_6e59","userActiveStatus":"userActiveStatus_rui_6e59","online":"online_rui_6e59"};
 
 class UserCard extends PureComponent {
   constructor() {
@@ -46,6 +46,8 @@ class UserCard extends PureComponent {
       url: user.avatarUrl
     }), !!avatarInfo && avatarInfo), /*#__PURE__*/React.createElement("div", {
       className: modules_a4196c17.userInformation
+    }, /*#__PURE__*/React.createElement("div", {
+      className: modules_a4196c17.userInformationGeneral
     }, /*#__PURE__*/React.createElement("div", {
       className: modules_a4196c17.userNameLine
     }, user.href && /*#__PURE__*/React.createElement(Link, {
@@ -78,7 +80,7 @@ class UserCard extends PureComponent {
       glyph: copyIcon,
       size: Size$1.Size14,
       suppressSizeWarning: true
-    })), children)));
+    }))), children)));
   }
 }
 _defineProperty(UserCard, "propTypes", {

package/dist/analytics/analytics.js

@@ -84,6 +84,6 @@ class Analytics {
     return suffix;
   }
 }
-var analyticsInstance = new Analytics();
+var analytics = new Analytics();
 
-export { Analytics, analyticsInstance as default };
+export { Analytics, analytics as default };

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 | null;
+export declare function maxHeightForDirection(direction: Directions, anchorNode: Element, container?: Element): number;
 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.popup.clientHeight;
+  const popupHeight = attrs.maxHeight && typeof attrs.maxHeight === 'number' ? Math.min(attrs.popup.scrollHeight, attrs.maxHeight) : attrs.popup.scrollHeight;
   const verticalDiff = styles.top + popupHeight - viewportMaxX;
   const bottomOverflow = Math.max(verticalDiff, 0);
   return topOverflow + bottomOverflow;
@@ -101,50 +101,26 @@ 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;
+function maxHeightForDirection(direction, anchorNode) {
+  let container = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : document.documentElement;
+  const MIN_POPUP_SIZE = 8;
   const domRect = anchorNode.getBoundingClientRect();
-  const containerRect = container.getBoundingClientRect();
-  const topMaxHeight = Math.max(domRect.top - containerRect.top, 0);
-  const containerHeight = Math.max(containerRect.height,
-  // XXX
-  // If container is the document element
-  // then we check client height too because we may have situation when
-  // "height" from "getBoundingClientRect" less then "clientHeight".
-  container === document.documentElement ? container.clientHeight : 0);
-  const bottomMaxHeight = Math.max(containerHeight - (topMaxHeight + domRect.height), 0);
+  let topMaxHeight;
+  let bottomMaxHeight;
+  if (container === document.documentElement) {
+    topMaxHeight = Math.max(domRect.top, MIN_POPUP_SIZE);
+    bottomMaxHeight = Math.max(getWindowHeight() - domRect.top - domRect.height, MIN_POPUP_SIZE);
+  } else {
+    const containerRect = container.getBoundingClientRect();
+    topMaxHeight = Math.max(domRect.top - containerRect.top, 0);
+    const containerHeight = Math.max(containerRect.height,
+    // 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".
+    container === document.documentElement ? container.clientHeight : 0);
+    bottomMaxHeight = Math.max(containerHeight - (topMaxHeight + domRect.height), 0);
+  }
   switch (direction) {
     case Directions.TOP_LEFT:
     case Directions.TOP_CENTER:
@@ -164,7 +140,8 @@ function maxHeightForDirection(direction, anchorNode, containerNode) {
     case Directions.LEFT_CENTER:
       return domRect.height / 2 + Math.min(bottomMaxHeight / 2, topMaxHeight / 2);
     default:
-      return null;
+      const exhaustiveCheck = direction;
+      throw new Error(exhaustiveCheck);
   }
 }
 function position(attrs) {
@@ -200,7 +177,9 @@ 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.
@@ -208,18 +187,20 @@ function position(attrs) {
       concat(directions[0]).filter(direction => directionsMatrix[direction]).map(direction => ({
         styles: directionsMatrix[direction],
         direction
-      })).sort((_ref2, _ref3) => {
+      })).sort((_ref, _ref2) => {
         let {
           styles: stylesA
-        } = _ref2;
+        } = _ref;
         let {
           styles: stylesB
-        } = _ref3;
+        } = _ref2;
         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
@@ -235,17 +216,14 @@ function position(attrs) {
   } else if (maxHeight) {
     styles.maxHeight = maxHeight;
   }
-  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 (autoCorrectTopOverflow && chosenDirection && anchor) {
+    const maxForDirection = maxHeightForDirection(chosenDirection, anchor) - sidePadding;
+    if (!styles.maxHeight || styles.maxHeight > maxForDirection) {
+      styles.maxHeight = maxForDirection;
+      if (styles.top === 0) {
+        styles.top = sidePadding;
+      }
+    }
   }
   if (minWidth === MinWidth.TARGET || minWidth === 'target') {
     styles.minWidth = anchorRect.width;

package/dist/select/select__popup.js

@@ -166,7 +166,7 @@ class SelectPopup extends PureComponent {
       const containerNode = getPopupContainer(ringPopupTarget) || document.documentElement;
       return anchorNode != null ? Math.min(directions.reduce((maxHeight, direction) => {
         var _maxHeightForDirectio;
-        return Math.max(maxHeight, (_maxHeightForDirectio = maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : null)) !== null && _maxHeightForDirectio !== void 0 ? _maxHeightForDirectio : 0);
+        return Math.max(maxHeight, (_maxHeightForDirectio = maxHeightForDirection(direction, anchorNode, getStyles(containerNode).position !== 'static' ? containerNode : undefined)) !== null && _maxHeightForDirectio !== void 0 ? _maxHeightForDirectio : 0);
       }, minMaxHeight), userDefinedMaxHeight) : userDefinedMaxHeight;
     }));
     _defineProperty(this, "popupRef", el => {