@jetbrains/ring-ui-built 7.0.60 → 7.0.61

package/components/login-dialog/login-dialog.js

@@ -37,12 +37,14 @@ import 'core-js/modules/es.string.replace.js';
 import '../global/memoize.js';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';
+import '../global/configuration.js';
 import '../_helpers/button__classes.js';
 import '../popup/popup.target.js';
 import '../popup/popup.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
 import '../loader/loader.js';

package/components/login-dialog/service.js

@@ -4,6 +4,8 @@ import { createRoot } from 'react-dom/client';
 import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height.js';
 import LoginDialog from './login-dialog.js';
 import 'react';
+import 'util-deprecate';
+import '../global/configuration.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import '../dialog/dialog.js';
 import 'react-dom';
@@ -30,7 +32,6 @@ import '../global/dom.js';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
-import 'util-deprecate';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
@@ -43,6 +44,7 @@ import '../popup/popup.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../_helpers/dialog__body-scroll-preventer.js';
 import 'scrollbar-width';
 import '../loader-screen/loader-screen.js';

package/components/message/message.js

@@ -24,9 +24,11 @@ import '../global/sniffer.js';
 import 'sniffr';
 import '../global/data-tests.js';
 import '../tab-trap/tab-trap.js';
+import '../global/configuration.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.target.js';
+import '../popup/position-css.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';

package/components/old-browsers-message/white-list.js

@@ -8,11 +8,11 @@ const MAJOR_VERSION_INDEX = 0;
 /**
  * SUPPORTED_BROWSERS are defined by Babel plugin, see babel config
  */
-if (!["and_chr 139", "and_ff 142", "and_qq 14.9", "and_uc 15.5", "android 139", "chrome 139", "chrome 138", "chrome 137", "chrome 136", "chrome 135", "chrome 134", "chrome 133", "chrome 132", "chrome 131", "chrome 130", "chrome 125", "chrome 112", "chrome 109", "edge 139", "edge 138", "edge 137", "firefox 142", "firefox 141", "firefox 140", "firefox 128", "firefox 118", "firefox 115", "ios_saf 18.5-18.6", "ios_saf 18.4", "ios_saf 18.3", "ios_saf 18.2", "ios_saf 18.1", "ios_saf 18.0", "ios_saf 17.6-17.7", "ios_saf 17.5", "ios_saf 16.6-16.7", "ios_saf 15.6-15.8", "ios_saf 11.0-11.2", "kaios 3.0-3.1", "kaios 2.5", "op_mini all", "op_mob 80", "opera 117", "opera 116", "safari 18.5-18.6", "safari 18.4", "safari 17.6", "safari 17.1", "safari 16.6", "safari 15.6", "samsung 28", "samsung 27"]) {
+if (!["and_chr 139", "and_ff 142", "and_qq 14.9", "and_uc 15.5", "android 139", "chrome 140", "chrome 139", "chrome 138", "chrome 137", "chrome 136", "chrome 135", "chrome 134", "chrome 133", "chrome 132", "chrome 131", "chrome 130", "chrome 125", "chrome 112", "chrome 109", "edge 140", "edge 139", "edge 138", "edge 137", "firefox 142", "firefox 141", "firefox 140", "firefox 128", "firefox 118", "firefox 115", "ios_saf 18.5-18.6", "ios_saf 18.4", "ios_saf 18.3", "ios_saf 18.2", "ios_saf 18.1", "ios_saf 18.0", "ios_saf 17.6-17.7", "ios_saf 17.5", "ios_saf 16.6-16.7", "ios_saf 15.6-15.8", "ios_saf 11.0-11.2", "kaios 3.0-3.1", "kaios 2.5", "op_mini all", "op_mob 80", "opera 121", "opera 120", "safari 18.5-18.6", "safari 18.4", "safari 17.6", "safari 17.1", "safari 16.6", "safari 15.6", "samsung 28", "samsung 27"]) {
   // eslint-disable-next-line no-console
   console.warn('Ring UI: no SUPPORTED_BROWSERS passed. Please check babel config.');
 }
-const SUPPORTED = ["and_chr 139", "and_ff 142", "and_qq 14.9", "and_uc 15.5", "android 139", "chrome 139", "chrome 138", "chrome 137", "chrome 136", "chrome 135", "chrome 134", "chrome 133", "chrome 132", "chrome 131", "chrome 130", "chrome 125", "chrome 112", "chrome 109", "edge 139", "edge 138", "edge 137", "firefox 142", "firefox 141", "firefox 140", "firefox 128", "firefox 118", "firefox 115", "ios_saf 18.5-18.6", "ios_saf 18.4", "ios_saf 18.3", "ios_saf 18.2", "ios_saf 18.1", "ios_saf 18.0", "ios_saf 17.6-17.7", "ios_saf 17.5", "ios_saf 16.6-16.7", "ios_saf 15.6-15.8", "ios_saf 11.0-11.2", "kaios 3.0-3.1", "kaios 2.5", "op_mini all", "op_mob 80", "opera 117", "opera 116", "safari 18.5-18.6", "safari 18.4", "safari 17.6", "safari 17.1", "safari 16.6", "safari 15.6", "samsung 28", "samsung 27"] || [];
+const SUPPORTED = ["and_chr 139", "and_ff 142", "and_qq 14.9", "and_uc 15.5", "android 139", "chrome 140", "chrome 139", "chrome 138", "chrome 137", "chrome 136", "chrome 135", "chrome 134", "chrome 133", "chrome 132", "chrome 131", "chrome 130", "chrome 125", "chrome 112", "chrome 109", "edge 140", "edge 139", "edge 138", "edge 137", "firefox 142", "firefox 141", "firefox 140", "firefox 128", "firefox 118", "firefox 115", "ios_saf 18.5-18.6", "ios_saf 18.4", "ios_saf 18.3", "ios_saf 18.2", "ios_saf 18.1", "ios_saf 18.0", "ios_saf 17.6-17.7", "ios_saf 17.5", "ios_saf 16.6-16.7", "ios_saf 15.6-15.8", "ios_saf 11.0-11.2", "kaios 3.0-3.1", "kaios 2.5", "op_mini all", "op_mob 80", "opera 121", "opera 120", "safari 18.5-18.6", "safari 18.4", "safari 17.6", "safari 17.1", "safari 16.6", "safari 15.6", "samsung 28", "samsung 27"] || [];
 const WHITE_LISTED_BROWSERS = ['chrome', 'firefox', 'safari', 'edge'];
 const WHITE_LIST = SUPPORTED.reduce((acc, item) => {
   var _item$match;

package/components/pager/pager.js

@@ -18,6 +18,7 @@ import '@jetbrains/icons/chevron-12px-down';
 import 'util-deprecate';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';
+import '../global/configuration.js';
 import '../_helpers/button__classes.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
@@ -53,6 +54,7 @@ import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
+import '../popup/position-css.js';
 import '../list/list.js';
 import 'core-js/modules/es.symbol.description.js';
 import 'react-virtualized/dist/es/List';

package/components/popup/popup.d.ts

@@ -32,6 +32,7 @@ export interface BasePopupProps {
     withTail?: boolean;
     tailOffset?: number;
     largeBorderRadius?: boolean;
+    cssPositioning?: boolean;
     anchorElement?: HTMLElement | null | undefined;
     target?: string | Element | null | undefined;
     className?: string | null | undefined;
@@ -117,6 +118,7 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
         direction: Directions | null;
     };
     private _updateDirection;
+    private shouldUseCssPositioning;
     private _updatePosition;
     private _redraw;
     private _getAnchor;

package/components/popup/popup.js

@@ -12,16 +12,18 @@ import { Listeners, getStyles } from '../global/dom.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
 import joinDataTestAttributes from '../global/data-tests.js';
 import TabTrap from '../tab-trap/tab-trap.js';
+import { getConfiguration } from '../global/configuration.js';
 import position from './position.js';
 import { DEFAULT_DIRECTIONS, MaxHeight, MinWidth, Dimension, Directions, Display } from './popup.consts.js';
 import { PopupTargetContext, PopupTarget } from './popup.target.js';
+import { setCSSAnchorPositioning, supportsCSSAnchorPositioning } from './position-css.js';
 import '../shortcuts/core.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 import 'core-js/modules/es.array.sort.js';
 
-var styles = {"popup":"ring-popup-popup ring-global-font","largeBorderRadius":"ring-popup-largeBorderRadius","hidden":"ring-popup-hidden","showing":"ring-popup-showing","attached":"ring-popup-attached"};
+var styles = {"popup":"ring-popup-popup ring-global-font","cssAnchoredPopup":"ring-popup-cssAnchoredPopup","largeBorderRadius":"ring-popup-largeBorderRadius","hidden":"ring-popup-hidden","showing":"ring-popup-showing","attached":"ring-popup-attached"};
 
 const isPossibleClientSideNavigation = event => {
   const target = event.target;
@@ -103,24 +105,39 @@ class Popup extends PureComponent {
     });
     _defineProperty(this, "_updatePosition", () => {
       const popup = this.popup;
+      const anchor = this._getAnchor();
       if (popup) {
-        popup.style.position = 'absolute';
-        if (this.isVisible()) {
-          const {
-            styles: style,
-            direction
-          } = this.position();
-          Object.entries(style).forEach(_ref => {
-            let [key, value] = _ref;
-            const propKey = key;
-            if (typeof value === 'number') {
-              popup.style[propKey] = "".concat(value, "px");
-            } else {
-              popup.style[propKey] = value.toString();
-            }
+        if (this.shouldUseCssPositioning() && anchor) {
+          // Use CSS Anchor positioning
+          setCSSAnchorPositioning({
+            popup,
+            anchor,
+            uid: this.uid,
+            minWidth: this.props.minWidth,
+            top: this.props.top,
+            left: this.props.left,
+            directions: this.props.directions,
+            offset: this.props.offset
           });
-          if (direction != null) {
-            this._updateDirection(direction);
+        } else {
+          popup.style.position = 'absolute';
+          if (this.isVisible()) {
+            const {
+              styles: style,
+              direction
+            } = this.position();
+            Object.entries(style).forEach(_ref => {
+              let [key, value] = _ref;
+              const propKey = key;
+              if (typeof value === 'number') {
+                popup.style[propKey] = "".concat(value, "px");
+              } else {
+                popup.style[propKey] = value.toString();
+              }
+            });
+            if (direction != null) {
+              this._updateDirection(direction);
+            }
           }
         }
         this.setState(this.calculateDisplay);
@@ -217,6 +234,12 @@ class Popup extends PureComponent {
       minWidth
     });
   }
+  shouldUseCssPositioning() {
+    if (!supportsCSSAnchorPositioning()) {
+      return false;
+    }
+    return this.props.cssPositioning !== undefined ? this.props.cssPositioning : getConfiguration().popupsCssPositioning;
+  }
   _getAnchor() {
     return this.props.anchorElement || this.parent;
   }
@@ -229,16 +252,20 @@ class Popup extends PureComponent {
       clearTimeout(this._prevTimeout);
       this._prevTimeout = window.setTimeout(() => {
         this._listenersEnabled = true;
-        this.listeners.add(window, 'resize', this._redraw);
-        if (this.props.autoPositioningOnScroll) {
-          this.listeners.add(window, 'scroll', this._redraw);
+        // CSS positioning doesn't need resize/scroll listeners as it's handled by CSS
+        // But we need them if CSS positioning isn't supported
+        if (!this.shouldUseCssPositioning()) {
+          this.listeners.add(window, 'resize', this._redraw);
+          if (this.props.autoPositioningOnScroll) {
+            this.listeners.add(window, 'scroll', this._redraw);
+          }
+          let el = this._getAnchor();
+          while (el) {
+            this.listeners.add(el, 'scroll', this._redraw);
+            el = el.parentElement;
+          }
         }
         this.listeners.add(document, 'pointerdown', this._onDocumentClick, true);
-        let el = this._getAnchor();
-        while (el) {
-          this.listeners.add(el, 'scroll', this._redraw);
-          el = el.parentElement;
-        }
       }, 0);
       return;
     }
@@ -288,6 +315,7 @@ class Popup extends PureComponent {
     } = this.props;
     const showing = this.state.display === Display.SHOWING;
     const classes = classNames(className, styles.popup, {
+      [styles.cssAnchoredPopup]: this.shouldUseCssPositioning(),
       [styles.attached]: attached,
       [styles.hidden]: hidden,
       [styles.showing]: showing,

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

@@ -0,0 +1,14 @@
+import { Directions } from './popup.consts';
+export declare const supportsCSSAnchorPositioning: () => boolean;
+interface SetCSSAnchorPositioningParams {
+    popup: HTMLElement;
+    anchor: HTMLElement;
+    uid: string;
+    minWidth?: number | 'target' | null;
+    top?: number;
+    left?: number;
+    directions: readonly Directions[];
+    offset?: number;
+}
+export declare const setCSSAnchorPositioning: ({ popup, anchor, uid, minWidth, top, left, directions, offset, }: SetCSSAnchorPositioningParams) => void;
+export {};

package/components/popup/position-css.js

@@ -0,0 +1,89 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { getRect } from '../global/dom.js';
+import { calculateMinWidth } from './position.js';
+import { Directions } from './popup.consts.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.array.sort.js';
+
+const supportsCSSAnchorPositioning = () => {
+  var _CSS, _CSS$supports;
+  return (_CSS = CSS) === null || _CSS === void 0 || (_CSS$supports = _CSS.supports) === null || _CSS$supports === void 0 ? void 0 : _CSS$supports.call(_CSS, 'anchor-name', 'none');
+};
+const getPositionArea = direction => {
+  switch (direction) {
+    case Directions.BOTTOM_RIGHT:
+      return ['block-end span-inline-end', '--bottom-right'];
+    case Directions.BOTTOM_LEFT:
+      return ['block-end span-inline-start', '--bottom-left'];
+    case Directions.BOTTOM_CENTER:
+      return ['block-end center', '--bottom-center'];
+    case Directions.TOP_CENTER:
+      return ['block-start center', '--top-center'];
+    case Directions.TOP_RIGHT:
+      return ['block-start span-inline-end', '--top-right'];
+    case Directions.TOP_LEFT:
+      return ['block-start span-inline-start', '--top-left'];
+    case Directions.RIGHT_CENTER:
+      return ['center inline-end', '--right-center'];
+    case Directions.RIGHT_TOP:
+      return ['span-block-start inline-end', '--right-top'];
+    case Directions.RIGHT_BOTTOM:
+      return ['span-block-end inline-end', '--right-bottom'];
+    case Directions.LEFT_CENTER:
+      return ['center inline-start', '--left-center'];
+    case Directions.LEFT_TOP:
+      return ['span-block-start inline-start', '--left-top'];
+    case Directions.LEFT_BOTTOM:
+      return ['span-block-end inline-start', '--left-bottom'];
+    default:
+      return ['block-end span-inline-end', '--bottom-right'];
+  }
+};
+const getPositionFallbacks = directions => {
+  return directions.slice(1).map(direction => getPositionArea(direction)[1]).join(', ');
+};
+const setCSSAnchorPositioning = _ref => {
+  let {
+    popup,
+    anchor,
+    uid,
+    minWidth,
+    top,
+    left,
+    directions,
+    offset
+  } = _ref;
+  const anchorName = anchor.style.getPropertyValue('anchor-name') || "--anchor-".concat(uid);
+  if (!anchor.style.getPropertyValue('anchor-name')) {
+    anchor.style.setProperty('anchor-name', anchorName);
+  }
+  popup.style.setProperty('position-anchor', anchorName);
+  const calculatedMinWidth = calculateMinWidth(getRect(anchor).width, minWidth);
+  if (calculatedMinWidth !== null) {
+    popup.style.minWidth = "".concat(calculatedMinWidth, "px");
+  }
+  if (top) {
+    popup.style.transform = "translateY(".concat(top, "px)");
+  }
+  if (left) {
+    popup.style.left = "".concat(left, "px");
+  }
+  const [initialPositionStyle, initialPositionName] = getPositionArea(directions[0]);
+  popup.style.setProperty('position-area', initialPositionStyle);
+  if (offset) {
+    popup.style.setProperty('--ring-popup-offset', "".concat(offset, "px"));
+    if (initialPositionName.startsWith('--bottom') || initialPositionName.startsWith('--top')) {
+      popup.style.margin = "".concat(offset, "px 0");
+    } else {
+      popup.style.margin = "0 ".concat(offset, "px");
+    }
+  }
+  // Add fallbacks for better positioning if there are multiple directions
+  const fallbacks = getPositionFallbacks(directions);
+  if (fallbacks) {
+    popup.style.setProperty('position-try-fallbacks', fallbacks);
+  }
+};
+
+export { setCSSAnchorPositioning, supportsCSSAnchorPositioning };

package/components/popup/position.d.ts

@@ -24,6 +24,7 @@ export interface PositionAttrs {
 }
 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 calculateMinWidth(anchorWidth: number, minWidth: PositionAttrs['minWidth']): number | null;
 export default function position(attrs: PositionAttrs): {
     styles: PositionStyles;
     direction: Directions | null;

package/components/popup/position.js

@@ -1,7 +1,7 @@
 import { b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.sort.js';
 import { getRect, isMounted, getDocumentScrollLeft, getDocumentScrollTop, getWindowHeight } from '../global/dom.js';
-import { MaxHeight, Dimension, MinWidth, Directions } from './popup.consts.js';
+import { MaxHeight, Dimension, Directions, MinWidth } from './popup.consts.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 
@@ -171,6 +171,14 @@ function maxHeightForDirection(direction, anchorNode, containerNode) {
       return null;
   }
 }
+function calculateMinWidth(anchorWidth, minWidth) {
+  if (minWidth === MinWidth.TARGET || minWidth === 'target') {
+    return anchorWidth;
+  } else if (minWidth) {
+    return anchorWidth < minWidth ? minWidth : anchorWidth;
+  }
+  return null;
+}
 function position(attrs) {
   const {
     popup,
@@ -250,10 +258,9 @@ function position(attrs) {
       scroll
     });
   }
-  if (minWidth === MinWidth.TARGET || minWidth === 'target') {
-    styles.minWidth = anchorRect.width;
-  } else if (minWidth) {
-    styles.minWidth = anchorRect.width < minWidth ? minWidth : anchorRect.width;
+  const newMinWidth = calculateMinWidth(anchorRect.width, minWidth);
+  if (newMinWidth !== null) {
+    styles.minWidth = newMinWidth;
   }
   return {
     styles,
@@ -261,4 +268,4 @@ function position(attrs) {
   };
 }
 
-export { Dimension, Directions, MaxHeight, MinWidth, position as default, maxHeightForDirection, positionPropKeys };
+export { Dimension, Directions, MaxHeight, MinWidth, calculateMinWidth, position as default, maxHeightForDirection, positionPropKeys };

package/components/popup-menu/popup-menu.js

@@ -18,10 +18,12 @@ import '../global/sniffer.js';
 import 'sniffr';
 import '../global/data-tests.js';
 import '../tab-trap/tab-trap.js';
+import '../global/configuration.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
+import '../popup/position-css.js';
 import 'core-js/modules/es.symbol.description.js';
 import 'core-js/modules/es.string.trim.js';
 import 'react-virtualized/dist/es/List';

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

@@ -21,10 +21,11 @@ import Shortcuts from '../shortcuts/shortcuts.js';
 import rerenderHOC from '../global/rerender-hoc.js';
 import { Button } from '../button/button.js';
 import Icon from '../icon/icon.js';
-import { ControlsHeightContext, ControlsHeight } from '../global/controls-height.js';
+import { ControlsHeightContext } from '../global/controls-height.js';
 import { S as Size, i as inputStyles } from '../_helpers/input.js';
 import { I18nContext } from '../i18n/i18n-context.js';
 import { Q as QueryAssistSuggestions, s as styles } from '../_helpers/query-assist__suggestions.js';
+import { ControlsHeight } from '../global/configuration.js';
 import 'react-dom/server';
 import '../popup/popup.js';
 import 'react-dom';
@@ -34,6 +35,7 @@ import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
+import '../popup/position-css.js';
 import '../list/list.js';
 import 'core-js/modules/es.string.trim.js';
 import 'react-virtualized/dist/es/List';

package/components/select/select.d.ts

@@ -5,7 +5,7 @@ import { Size } from '../input/input';
 import { LabelType } from '../control-label/control-label';
 import { ListDataItem } from '../list/consts';
 import { Directions } from '../popup/popup.consts';
-import { ControlsHeight } from '../global/controls-height';
+import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
 import SelectPopup, { Filter, FilterFn, Multiple, Tags } from './select__popup';
 /**
  * @name Select
@@ -206,7 +206,8 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     static getDerivedStateFromProps<T = unknown>(nextProps: SelectProps<T>, prevState: SelectState<T>): Partial<SelectState<T>>;
     state: SelectState<T>;
     componentDidUpdate(prevProps: SelectProps<T>, prevState: SelectState<T>): void;
-    static contextType: React.Context<ControlsHeight>;
+    static contextType: React.Context<ControlsHeight | (() => ControlsHeight)>;
+    context: React.ContextType<typeof ControlsHeightContext>;
     static Type: typeof Type;
     static Size: typeof Size;
     id: string;

package/components/select/select.js

@@ -25,8 +25,9 @@ import memoize from '../global/memoize.js';
 import { I18nContext } from '../i18n/i18n-context.js';
 import { createComposedRef } from '../global/composeRefs.js';
 import { isArray } from '../global/typescript-utils.js';
-import { ControlsHeightContext, ControlsHeight } from '../global/controls-height.js';
+import { ControlsHeightContext } from '../global/controls-height.js';
 import SelectPopup from './select__popup.js';
+import { ControlsHeight } from '../global/configuration.js';
 import { Size as Size$1 } from '../avatar/avatar-size.js';
 import { A as Anchor } from '../_helpers/anchor.js';
 import '@jetbrains/icons/chevron-12px-down';
@@ -47,6 +48,7 @@ import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
+import '../popup/position-css.js';
 import '../shortcuts/core.js';
 import 'combokeys';
 import '../global/sniffer.js';
@@ -889,7 +891,7 @@ class Select extends Component {
       hideArrow
     } = this.props;
     const icons = [];
-    const height = this.props.height || this.context;
+    const height = this.props.height || (typeof this.context === 'function' ? this.context() : this.context);
     if (!Array.isArray(selected) && selected !== null && selected !== void 0 && selected.icon) {
       icons.push(jsx("button", {
         title: "Toggle options popup",

package/components/select/select__filter.js

@@ -21,6 +21,7 @@ import 'core-js/modules/es.string.replace.js';
 import '../global/memoize.js';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';
+import '../global/configuration.js';
 import '../_helpers/button__classes.js';
 import '../global/get-uid.js';
 import '../global/composeRefs.js';

package/components/select/select__popup.js

@@ -20,10 +20,11 @@ import Caret from '../caret/caret.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
 import { Button } from '../button/button.js';
 import Text from '../text/text.js';
-import { ControlsHeight } from '../global/controls-height.js';
+import '../global/controls-height.js';
 import { createComposedRef } from '../global/composeRefs.js';
 import { DEFAULT_DIRECTIONS } from '../popup/popup.consts.js';
 import { s as styles, S as SelectFilter } from '../_helpers/select__filter.js';
+import { ControlsHeight } from '../global/configuration.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
@@ -33,6 +34,7 @@ import 'react-dom';
 import '../global/schedule-raf.js';
 import '../global/data-tests.js';
 import '../tab-trap/tab-trap.js';
+import '../popup/position-css.js';
 import 'core-js/modules/es.array.sort.js';
 import 'core-js/modules/es.symbol.description.js';
 import 'core-js/modules/es.string.trim.js';

package/components/storage/storage.js

@@ -27,6 +27,7 @@ import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';
+import '../global/configuration.js';
 import '../_helpers/button__classes.js';
 import '../_helpers/theme.js';
 import 'react-dom';
@@ -42,6 +43,7 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../alert/container.js';
 
 

package/components/storage/storage__local.js

@@ -26,6 +26,7 @@ import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';
+import '../global/configuration.js';
 import '../_helpers/button__classes.js';
 import '../_helpers/theme.js';
 import 'react-dom';
@@ -41,6 +42,7 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
+import '../popup/position-css.js';
 import '../alert/container.js';
 
 /**