@jetbrains/ring-ui 5.0.87 → 5.0.89

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

package/components/popup/position.js

@@ -76,25 +76,6 @@ 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();
@@ -104,7 +85,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 then "clientHeight".
+    // "height" from "getBoundingClientRect" less than "clientHeight".
     container === document.documentElement ? container.clientHeight : 0);
     const bottomMaxHeight = Math.max(containerHeight - (topMaxHeight + domRect.height), 0);
     switch (direction) {
@@ -126,7 +107,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) {
@@ -178,16 +160,11 @@ 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) {
+        styles.maxHeight = maxHeightForDirection(chosenDirection, anchor, container) - sidePadding;
+        if (styles.top === 0) {
+            styles.top = sidePadding;
+        }
     }
     if (minWidth === MinWidth.TARGET || minWidth === 'target') {
         styles.minWidth = anchorRect.width;

package/components/radio/radio.css

@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: row;
 
-  padding: 6px 0;
+  padding: 2px 0;
 
   text-align: left;
 

package/components/select-ng/select-ng__lazy.js

@@ -1,6 +1,6 @@
 import angular from 'angular';
 
-import React from 'react';
+import React, {cloneElement} from 'react';
 
 import {render, hydrate} from '../global/react-render-adapter';
 import {RerenderableSelect} from '../select/select';
@@ -68,9 +68,12 @@ class SelectLazy {
   _clickHandler() {
     this.detachEvents();
     if (this.type === 'dropdown') {
-      render(this.reactSelect, this.container);
-      // Hack for React17, where click event is not triggered on just rendered Select node
-      this.selectInstance?._openPopupIfClosed?.();
+      render(cloneElement(this.reactSelect, {
+        ref: node => {
+          this.selectRef(node);
+          node?._openPopupIfClosed?.();
+        }
+      }), this.container);
     } else {
       hydrate(this.reactSelect, this.container);
     }

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

package/dist/popup/position.js

@@ -101,38 +101,6 @@ 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();
@@ -142,7 +110,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 then "clientHeight".
+  // "height" from "getBoundingClientRect" less than "clientHeight".
   container === document.documentElement ? container.clientHeight : 0);
   const bottomMaxHeight = Math.max(containerHeight - (topMaxHeight + domRect.height), 0);
   switch (direction) {
@@ -164,7 +132,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) {
@@ -208,13 +177,13 @@ 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;
@@ -235,17 +204,11 @@ 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) {
+    styles.maxHeight = maxHeightForDirection(chosenDirection, anchor, container) - sidePadding;
+    if (styles.top === 0) {
+      styles.top = sidePadding;
+    }
   }
   if (minWidth === MinWidth.TARGET || minWidth === 'target') {
     styles.minWidth = anchorRect.width;

package/dist/select-ng/select-ng__lazy.js

@@ -1,6 +1,6 @@
 import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
 import angular from 'angular';
-import React from 'react';
+import React, { cloneElement } from 'react';
 import { render, hydrate } from '../global/react-render-adapter.js';
 import { RerenderableSelect } from '../select/select.js';
 import 'react-dom';
@@ -138,9 +138,12 @@ class SelectLazy {
   _clickHandler() {
     this.detachEvents();
     if (this.type === 'dropdown') {
-      render(this.reactSelect, this.container);
-      // Hack for React17, where click event is not triggered on just rendered Select node
-      this.selectInstance?._openPopupIfClosed?.();
+      render( /*#__PURE__*/cloneElement(this.reactSelect, {
+        ref: node => {
+          this.selectRef(node);
+          node?._openPopupIfClosed?.();
+        }
+      }), this.container);
     } else {
       hydrate(this.reactSelect, this.container);
     }