@jetbrains/ring-ui 7.0.59 → 7.0.60-beta.0

package/README.md

@@ -4,7 +4,7 @@
 [![official JetBrains project](https://jb.gg/badges/official-flat-square.svg)](https://github.com/JetBrains#jetbrains-on-github)
 
 - [Design guildelines](https://www.jetbrains.com/help/ring-ui/welcome.html)
-- [Figma library[(https://www.figma.com/design/j7UivSrGze5xCDKrqzR7Fa/RingUI--Community)
+- [Figma library](https://www.figma.com/design/j7UivSrGze5xCDKrqzR7Fa/RingUI--Community)
 - [Usage examples in Storybook][docsite]
 - [GitHub repository](https://github.com/JetBrains/ring-ui)
 - [Issues in YouTrack](https://youtrack.jetbrains.com/issues/RG)

package/components/alert-service/alert-service.d.ts

@@ -5,10 +5,11 @@ export interface AlertItem extends Partial<Omit<AlertProps, 'children'>> {
     message: ReactNode;
     ref?: Ref<Alert>;
 }
+export declare const DEFAULT_ALERT_TIMEOUT = 10000;
 /**
  * @name Alert Service
  */
-declare class AlertService {
+export declare class AlertService {
     defaultTimeout: number;
     showingAlerts: AlertItem[];
     containerElement: HTMLDivElement;

package/components/alert-service/alert-service.js

@@ -2,11 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
 import getUID from '../global/get-uid';
 import Alert, { ANIMATION_TIME, Container as AlertContainer } from '../alert/alert';
+export const DEFAULT_ALERT_TIMEOUT = 10000; // 10 seconds
 /**
  * @name Alert Service
  */
-class AlertService {
-    defaultTimeout = 0;
+export class AlertService {
+    defaultTimeout = DEFAULT_ALERT_TIMEOUT;
     // This alerts are stored in inverse order (last shown is first in array)
     showingAlerts = [];
     containerElement = document.createElement('div');

package/components/button/button.css

@@ -43,7 +43,7 @@
   --ring-button-background-color: var(--ring-button-default-background-color);
   --ring-button-hover-background-color: var(--ring-content-background-color);
   --ring-button-pressed-background-color: var(--ring-selected-background-color);
-  --ring-button-active-background-color: var(--ring-hover-background-color);
+  --ring-button-active-background-color: var(--ring-main-container-light-color);
   --ring-button-disabled-background-color: var(--ring-button-default-background-color);
 
   box-sizing: border-box;

package/components/data-list/item.js

@@ -50,10 +50,10 @@ export default class Item extends PureComponent {
         const { title, items, showMoreLessButton, level, parentShift, showFocus, selectable, selected, partialSelected, collapsible, collapsed, onCollapse, onExpand, } = this.props;
         let moreLessButton;
         if (showMoreLessButton === moreLessButtonStates.MORE || showMoreLessButton === moreLessButtonStates.MORE_LOADING) {
-            moreLessButton = (_jsxs(Text, { info: true, children: [_jsx(Link, { inherit: true, pseudo: true, onClick: this.onShowMore, children: 'Show more' }), showMoreLessButton === moreLessButtonStates.MORE_LOADING && (_jsx(LoaderInline, { className: styles.showMoreLoader }))] }));
+            moreLessButton = (_jsxs(Text, { info: true, size: Text.Size.S, children: [_jsx(Link, { inherit: true, pseudo: true, onClick: this.onShowMore, children: 'Show more' }), showMoreLessButton === moreLessButtonStates.MORE_LOADING && (_jsx(LoaderInline, { className: styles.showMoreLoader }))] }));
         }
         else if (showMoreLessButton === moreLessButtonStates.LESS) {
-            moreLessButton = (_jsx(Text, { info: true, children: _jsx(Link, { inherit: true, pseudo: true, onClick: this.onShowLess, children: 'Show less' }) }));
+            moreLessButton = (_jsx(Text, { info: true, size: Text.Size.S, children: _jsx(Link, { inherit: true, pseudo: true, onClick: this.onShowLess, children: 'Show less' }) }));
         }
         let collapserExpander = null;
         if (collapsible) {

package/components/date-picker/date-picker.js

@@ -21,7 +21,7 @@ import { I18nContext } from '../i18n/i18n-context';
 import DatePopup from './date-popup';
 import styles from './date-picker.css';
 import formats from './formats';
-const PopupComponent = ({ hidden = false, className, popupRef, onClear, datePopupProps, onComplete, ...restProps }) => (_jsx(Popup, { hidden: hidden, className: className, ref: popupRef, directions: [
+const PopupComponent = ({ hidden = false, className, popupRef, onClear, datePopupProps, onComplete, ...restProps }) => (_jsx(Popup, { cssPositioning: true, hidden: hidden, className: className, ref: popupRef, directions: [
         Popup.PopupProps.Directions.BOTTOM_RIGHT,
         Popup.PopupProps.Directions.BOTTOM_LEFT,
         Popup.PopupProps.Directions.TOP_LEFT,
@@ -152,7 +152,7 @@ export default class DatePicker extends PureComponent {
         const classes = classNames(styles.datePicker, className, styles[`size${this.props.size}`], {
             [styles.inline]: inline,
         });
-        return (_jsx(Dropdown, { className: classes, disabled: this.props.disabled, "data-test": "ring-date-picker", anchor: inline ? (_jsx(Link, { "data-test-ring-dropdown-anchor": true, className: styles.anchor, disabled: this.props.disabled ?? false, pseudo: true, children: this.getAnchorText() })) : (_jsx(Button, { "data-test-ring-dropdown-anchor": true, className: styles.anchor, inline: false, disabled: this.props.disabled ?? false, ...this.props.buttonAttributes, children: anchorContent })), ...dropdownProps, children: _jsx(PopupComponent, { className: popupClassName, popupRef: this.popupRef, onClear: clear ? this.clear : null, datePopupProps: {
+        return (_jsx(Dropdown, { className: classes, disabled: this.props.disabled, "data-test": "ring-date-picker", anchor: inline ? (_jsx(Link, { "data-test-ring-dropdown-anchor": true, className: styles.anchor, disabled: this.props.disabled ?? false, pseudo: true, children: this.getAnchorText() })) : (_jsx(Button, { "data-test-ring-dropdown-anchor": true, className: styles.anchor, inline: false, disabled: this.props.disabled ?? false, ...this.props.buttonAttributes, children: anchorContent })), ...dropdownProps, children: _jsx(PopupComponent, { className: popupClassName, cssPositioning: true, popupRef: this.popupRef, onClear: clear ? this.clear : null, datePopupProps: {
                     ...datePopupProps,
                     translations,
                     onChange: this.handleChange,

package/components/error-bubble/error-bubble.js

@@ -12,6 +12,6 @@ export default class ErrorBubble extends PureComponent {
         const { children, className, ...restProps } = this.props;
         const errorBubbleClasses = classNames(styles.errorBubble, className);
         return (_jsxs("div", { className: styles.errorBubbleWrapper, "data-test": "ring-error-bubble-wrapper", children: [children &&
-                    Children.map(children, (child) => cloneElement(child, { ...child.props, ...restProps })), restProps.error && (_jsx(Popup, { trapFocus: false, className: styles.errorBubblePopup, hidden: false, attached: false, directions: [Directions.RIGHT_CENTER, Directions.RIGHT_BOTTOM, Directions.RIGHT_TOP], children: _jsx("div", { className: errorBubbleClasses, "data-test": "ring-error-bubble", children: restProps.error }) }))] }));
+                    Children.map(children, (child) => cloneElement(child, { ...child.props, ...restProps })), restProps.error && (_jsx(Popup, { cssPositioning: true, trapFocus: false, className: styles.errorBubblePopup, hidden: false, attached: false, directions: [Directions.RIGHT_CENTER, Directions.RIGHT_BOTTOM, Directions.RIGHT_TOP], children: _jsx("div", { className: errorBubbleClasses, "data-test": "ring-error-bubble", children: restProps.error }) }))] }));
     }
 }

package/components/header/services.js

@@ -33,7 +33,7 @@ export default class Services extends PureComponent {
         const servicesWithIcons = sortedServices.filter(service => service.iconUrl && service.homeUrl);
         const servicesWithOutIcons = sortedServices.filter(service => !service.iconUrl && service.homeUrl);
         const separatorIsRequired = servicesWithIcons.length !== 0 && servicesWithOutIcons.length !== 0;
-        return (_jsx(Dropdown, { ...props, anchor: makeAnchor(loading), initShown: initShown, children: _jsxs(Popup, { className: classNames(styles.services, { [darkStyles.dark]: theme === Theme.DARK }), top: -3, children: [servicesWithIcons.map(service => {
+        return (_jsx(Dropdown, { ...props, anchor: makeAnchor(loading), initShown: initShown, children: _jsxs(Popup, { cssPositioning: true, className: classNames(styles.services, { [darkStyles.dark]: theme === Theme.DARK }), top: -3, children: [servicesWithIcons.map(service => {
                         const isActive = this.serviceIsActive(service);
                         return (_jsx(Services.Link, { active: isActive, className: isActive ? styles.activeItem : styles.item, service: service }, service.id));
                     }), separatorIsRequired && _jsx("div", { className: styles.line }, "separator"), servicesWithOutIcons.map(service => {

package/components/input/input.d.ts

@@ -17,8 +17,8 @@ export interface InputTranslations {
     clear: string;
 }
 export interface InputBaseProps {
-    size: Size;
-    enableShortcuts: boolean | string[];
+    size?: Size;
+    enableShortcuts?: boolean | string[];
     children?: string | undefined;
     inputClassName?: string | null | undefined;
     label?: ReactNode;
@@ -37,11 +37,11 @@ export interface InputBaseProps {
 type Override<D, S> = Omit<D, keyof S> & S;
 export type InputSpecificProps = Override<InputHTMLAttributes<HTMLInputElement>, InputBaseProps> & {
     multiline?: false | undefined;
-    inputRef: Ref<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
 };
 type TextAreaSpecificProps = Override<TextareaHTMLAttributes<HTMLTextAreaElement>, InputBaseProps> & {
     multiline: true;
-    inputRef: Ref<HTMLTextAreaElement>;
+    inputRef?: Ref<HTMLTextAreaElement>;
 };
 export type InputProps = InputSpecificProps | TextAreaSpecificProps;
 export declare class Input extends PureComponent<InputProps> {

package/components/message/message.js

@@ -98,6 +98,6 @@ export default class Message extends Component {
         const tailClasses = classNames(styles.tail, tailClassName);
         const popupDirections = this.props.direction ? [this.props.direction] : this.props.directions;
         const { direction } = this.state;
-        return (_jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsx(WithThemeClasses, { theme: theme, children: themeClasses => (_jsx(Popup, { ref: this.popupRef, hidden: false, directions: popupDirections, className: classNames(classes, themeClasses), offset: UNIT * 2, onDirectionChange: this._onDirectionChange, ...popupProps, children: _jsxs(ThemeProvider, { theme: theme, passToPopups: true, children: [direction && _jsx("div", { className: tailClasses, style: getTailOffsets(this.getTailOffset())[direction] }), icon && _jsx(Icon, { className: styles.icon, glyph: icon }), title && (_jsx("h1", { "data-test": "rgMessageTitle", className: styles.title, children: title })), children && _jsx("div", { className: styles.description, children: children }), (onClose || buttonProps) && (_jsx(Button, { className: styles.gotIt, onClick: onClose, primary: true, ...buttonProps, children: translations?.gotIt ?? translate('gotIt') })), onDismiss && (_jsx(Button, { onClick: onDismiss, inline: true, children: translations?.dismiss ?? translate('dismiss') }))] }) })) })) }));
+        return (_jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsx(WithThemeClasses, { theme: theme, children: themeClasses => (_jsx(Popup, { ref: this.popupRef, cssPositioning: true, hidden: false, directions: popupDirections, className: classNames(classes, themeClasses), offset: UNIT * 2, onDirectionChange: this._onDirectionChange, ...popupProps, children: _jsxs(ThemeProvider, { theme: theme, passToPopups: true, children: [direction && _jsx("div", { className: tailClasses, style: getTailOffsets(this.getTailOffset())[direction] }), icon && _jsx(Icon, { className: styles.icon, glyph: icon }), title && (_jsx("h1", { "data-test": "rgMessageTitle", className: styles.title, children: title })), children && _jsx("div", { className: styles.description, children: children }), (onClose || buttonProps) && (_jsx(Button, { className: styles.gotIt, onClick: onClose, primary: true, ...buttonProps, children: translations?.gotIt ?? translate('gotIt') })), onDismiss && (_jsx(Button, { onClick: onDismiss, inline: true, children: translations?.dismiss ?? translate('dismiss') }))] }) })) })) }));
     }
 }

package/components/popup/popup.css

@@ -3,10 +3,7 @@
 .popup {
   composes: font from "../global/global.css";
 
-  position: fixed;
   z-index: var(--ring-overlay-z-index);
-  top: -100vh;
-  left: -100vw;
 
   overflow-y: auto;
 
@@ -19,6 +16,86 @@
   box-shadow: var(--ring-popup-shadow);
 }
 
+.jsAnchoredPopup {
+  position: fixed;
+
+  top: -100vh;
+  left: -100vw;
+}
+
+:root {
+  --ring-popup-offset: 8px;
+}
+
+.cssAnchoredPopup {
+  --ring-popup-offset: 0;
+
+  position: absolute;
+
+  margin: 0
+}
+
+@position-try --bottom-right {
+  position-area: block-end span-inline-end;
+  margin-block-start: var(--ring-popup-offset);
+}
+
+@position-try --bottom-left {
+  position-area: block-end span-inline-start;
+  margin-block-start: var(--ring-popup-offset);
+}
+
+@position-try --bottom-center {
+  position-area: block-end center;
+  margin-block-start: var(--ring-popup-offset);
+}
+
+@position-try --top-center {
+  position-area: block-start center;
+  margin-block-end: var(--ring-popup-offset);
+}
+
+@position-try --top-right {
+  position-area: block-start span-inline-end;
+  margin-block-end: var(--ring-popup-offset);
+}
+
+@position-try --top-left {
+  position-area: block-start span-inline-start;
+  margin-block-end: var(--ring-popup-offset);
+}
+
+@position-try --right-center {
+  position-area: center inline-end;
+  margin-inline-start: var(--ring-popup-offset);
+}
+
+@position-try --right-top {
+  position-area: span-block-start inline-end;
+  margin-inline-start: var(--ring-popup-offset);
+}
+
+@position-try --right-bottom {
+  position-area: span-block-end inline-end;
+  margin-inline-start: var(--ring-popup-offset);
+}
+
+@position-try --left-center {
+  position-area: center inline-start;
+  margin-inline-end: var(--ring-popup-offset);
+}
+
+@position-try --left-top {
+  position-area: span-block-start inline-start;
+  margin-inline-end: var(--ring-popup-offset);
+}
+
+@position-try --left-bottom {
+  position-area: span-block-end inline-start;
+  margin-inline-end: var(--ring-popup-offset);
+}
+
+
 .largeBorderRadius {
   border-radius: var(--ring-border-radius-large);
 }

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;
@@ -83,6 +84,7 @@ export default class Popup<P extends BasePopupProps = PopupProps> extends PureCo
         trapFocus: boolean;
         autoFocusFirst: boolean;
         legacy: boolean;
+        cssPositioning: boolean;
     };
     state: PopupState;
     componentDidMount(): void;

package/components/popup/popup.js

@@ -15,6 +15,7 @@ import position from './position';
 import styles from './popup.css';
 import { DEFAULT_DIRECTIONS, Dimension, Directions, Display, MaxHeight, MinWidth } from './popup.consts';
 import { PopupTargetContext, PopupTarget } from './popup.target';
+import { setCSSAnchorPositioning, supportsCSSAnchorPositioning } from './position-css';
 export { PopupTargetContext, PopupTarget };
 const isPossibleClientSideNavigation = (event) => {
     const target = event.target;
@@ -65,6 +66,7 @@ export default class Popup extends PureComponent {
         trapFocus: false,
         autoFocusFirst: false,
         legacy: false,
+        cssPositioning: false,
     };
     state = {
         display: Display.SHOWING,
@@ -160,21 +162,37 @@ export default class Popup extends PureComponent {
     };
     _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(([key, value]) => {
-                    const propKey = key;
-                    if (typeof value === 'number') {
-                        popup.style[propKey] = `${value}px`;
-                    }
-                    else {
-                        popup.style[propKey] = value.toString();
-                    }
+            if (this.props.cssPositioning && supportsCSSAnchorPositioning() && 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(([key, value]) => {
+                        const propKey = key;
+                        if (typeof value === 'number') {
+                            popup.style[propKey] = `${value}px`;
+                        }
+                        else {
+                            popup.style[propKey] = value.toString();
+                        }
+                    });
+                    if (direction != null) {
+                        this._updateDirection(direction);
+                    }
                 }
             }
             this.setState(this.calculateDisplay);
@@ -199,16 +217,20 @@ export default 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.props.cssPositioning || !supportsCSSAnchorPositioning()) {
+                    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;
         }
@@ -257,8 +279,11 @@ export default class Popup extends PureComponent {
     };
     render() {
         const { className, style, hidden, attached, keepMounted, client, onMouseDown, onMouseUp, onMouseOver, onMouseOut, onContextMenu, 'data-test': dataTest, largeBorderRadius, } = this.props;
+        const useCssPositioning = this.props.cssPositioning && supportsCSSAnchorPositioning();
         const showing = this.state.display === Display.SHOWING;
         const classes = classNames(className, styles.popup, {
+            [styles.jsAnchoredPopup]: !useCssPositioning,
+            [styles.cssAnchoredPopup]: useCssPositioning,
             [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,77 @@
+import { getRect } from '../global/dom';
+import { calculateMinWidth } from './position';
+import { Directions } from './popup.consts';
+export const supportsCSSAnchorPositioning = () => {
+    return CSS?.supports?.('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(', ');
+};
+export const setCSSAnchorPositioning = ({ popup, anchor, uid, minWidth, top, left, directions, offset, }) => {
+    const anchorName = anchor.style.getPropertyValue('anchor-name') || `--anchor-${uid}`;
+    if (!anchor.style.getPropertyValue('anchor-name')) {
+        anchor.style.setProperty('anchor-name', anchorName);
+    }
+    // Set positioning properties on the popup using setProperty
+    popup.style.position = 'absolute';
+    popup.style.setProperty('position-anchor', anchorName);
+    const calculatedMinWidth = calculateMinWidth(getRect(anchor).width, minWidth);
+    if (calculatedMinWidth !== null) {
+        popup.style.minWidth = `${calculatedMinWidth}px`;
+    }
+    if (top) {
+        popup.style.top = `${top}px`;
+    }
+    if (left) {
+        popup.style.left = `${left}px`;
+    }
+    const [initialPositionStyle, initialPositionName] = getPositionArea(directions[0]);
+    popup.style.setProperty('position-area', initialPositionStyle);
+    if (offset) {
+        popup.style.setProperty('--ring-popup-offset', `${offset}px`);
+        if (initialPositionName.startsWith('--bottom') || initialPositionName.startsWith('--top')) {
+            popup.style.margin = `${offset}px 0`;
+        }
+        else {
+            popup.style.margin = `0 ${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);
+    }
+};

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

@@ -126,6 +126,15 @@ export function maxHeightForDirection(direction, anchorNode, containerNode) {
             return null;
     }
 }
+export function calculateMinWidth(anchorWidth, minWidth) {
+    if (minWidth === MinWidth.TARGET || minWidth === 'target') {
+        return anchorWidth;
+    }
+    else if (minWidth) {
+        return anchorWidth < minWidth ? minWidth : anchorWidth;
+    }
+    return null;
+}
 export default function position(attrs) {
     const { popup, anchor, container, directions, autoPositioning, sidePadding, top, left, offset, maxHeight, minWidth, autoCorrectTopOverflow = true, } = attrs;
     let styles = {
@@ -185,11 +194,9 @@ export default 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, direction: chosenDirection };
 }

package/components/popup-menu/popup-menu.d.ts

@@ -47,6 +47,7 @@ export default class PopupMenu<T = unknown> extends Popup<PopupMenuProps<T>> {
         trapFocus: boolean;
         autoFocusFirst: boolean;
         legacy: boolean;
+        cssPositioning: boolean;
         data: never[];
         restoreActiveIndex: boolean;
         activateSingleItem: boolean;

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

@@ -704,7 +704,7 @@ export default class QueryAssist extends Component {
         return (_jsx(ControlsHeightContext.Provider, { value: ControlsHeight.M, children: _jsx(I18nContext.Consumer, { children: ({ translate }) => (_jsxs("div", { "data-test": dataTests('ring-query-assist', dataTest), className: containerClasses, role: "presentation", ref: this.nodeRef, children: [this.state.shortcuts && _jsx(Shortcuts, { map: this.shortcutsMap, scope: this.shortcutsScope }), renderGlass && !huge && (_jsx(Icon, { glyph: searchIcon, className: styles.icon, title: translations?.searchTitle ?? translate('searchTitle'), ref: this.glassRef, "data-test": "query-assist-search-icon" })), renderLoader && (_jsx("div", { className: classNames(styles.icon, styles.loader, {
                                 [styles.loaderOnTheRight]: !glass && !huge,
                                 [styles.loaderActive]: renderLoader,
-                            }), ref: this.loaderRef, children: _jsx(LoaderInline, {}) })), _jsx(ContentEditable, { "aria-label": translations?.searchTitle ?? translate('searchTitle'), className: inputClasses, "data-test": "ring-query-assist-input", inputRef: this.inputRef, disabled: this.props.disabled, onComponentUpdate: () => this.setCaretPosition({ fromContentEditable: true }), onBlur: this.handleFocusChange, onClick: this.handleCaretMove, onCompositionStart: this.trackCompositionState, onCompositionEnd: this.trackCompositionState, onFocus: this.handleFocusChange, onInput: this.handleInput, onKeyUp: this.handleInput, onKeyDown: this.handleEnter, onPaste: this.handlePaste, spellCheck: "false", children: this.state.query && _jsx("span", { children: this.renderQuery() }) }), renderPlaceholder && (_jsx("button", { type: "button", className: placeholderStyles, ref: this.placeholderRef, onClick: this.handleCaretMove, "data-test": "query-assist-placeholder", disabled: this.props.disabled, tabIndex: -1, children: this.props.placeholder })), actions.length ? (_jsx("div", { "data-test": "ring-query-assist-actions", className: styles.actions, children: actions })) : null, _jsx(PopupMenu, { hidden: !this.state.showPopup, onCloseAttempt: this.closePopup, ref: this.popupRef, anchorElement: this.node, keepMounted: true, attached: true, className: this.props.popupClassName, directions: [PopupMenu.PopupProps.Directions.BOTTOM_RIGHT], data: useCustomItemRender ? this.state.suggestions : this.renderSuggestions(), "data-test": "ring-query-assist-popup", hint: this.props.hint, shortcutsMap: this.listShortcutsMap, hintOnSelection: this.props.hintOnSelection, left: this.getPopupOffset(this.state.suggestions), maxHeight: PopupMenu.PopupProps.MaxHeight.SCREEN, onMouseDown: this.trackPopupMouseState, onMouseUp: this.trackPopupMouseState, onSelect: item => this.handleComplete(item) }), glass && huge && (_jsx("div", { className: styles.rightSearchButton, "data-test": "query-assist-search-button", children: _jsx(Icon, { glyph: searchIcon, className: styles.rightSearchIcon, title: translations?.searchTitle ?? translate('searchTitle'), onClick: this.handleApply, ref: this.glassRef, "data-test": "query-assist-search-icon" }) }))] })) }) }));
+                            }), ref: this.loaderRef, children: _jsx(LoaderInline, {}) })), _jsx(ContentEditable, { "aria-label": translations?.searchTitle ?? translate('searchTitle'), className: inputClasses, "data-test": "ring-query-assist-input", inputRef: this.inputRef, disabled: this.props.disabled, onComponentUpdate: () => this.setCaretPosition({ fromContentEditable: true }), onBlur: this.handleFocusChange, onClick: this.handleCaretMove, onCompositionStart: this.trackCompositionState, onCompositionEnd: this.trackCompositionState, onFocus: this.handleFocusChange, onInput: this.handleInput, onKeyUp: this.handleInput, onKeyDown: this.handleEnter, onPaste: this.handlePaste, spellCheck: "false", children: this.state.query && _jsx("span", { children: this.renderQuery() }) }), renderPlaceholder && (_jsx("button", { type: "button", className: placeholderStyles, ref: this.placeholderRef, onClick: this.handleCaretMove, "data-test": "query-assist-placeholder", disabled: this.props.disabled, tabIndex: -1, children: this.props.placeholder })), actions.length ? (_jsx("div", { "data-test": "ring-query-assist-actions", className: styles.actions, children: actions })) : null, _jsx(PopupMenu, { cssPositioning: true, hidden: !this.state.showPopup, onCloseAttempt: this.closePopup, ref: this.popupRef, anchorElement: this.node, keepMounted: true, attached: true, className: this.props.popupClassName, directions: [PopupMenu.PopupProps.Directions.BOTTOM_RIGHT], data: useCustomItemRender ? this.state.suggestions : this.renderSuggestions(), "data-test": "ring-query-assist-popup", hint: this.props.hint, shortcutsMap: this.listShortcutsMap, hintOnSelection: this.props.hintOnSelection, left: this.getPopupOffset(this.state.suggestions), maxHeight: PopupMenu.PopupProps.MaxHeight.SCREEN, onMouseDown: this.trackPopupMouseState, onMouseUp: this.trackPopupMouseState, onSelect: item => this.handleComplete(item) }), glass && huge && (_jsx("div", { className: styles.rightSearchButton, "data-test": "query-assist-search-button", children: _jsx(Icon, { glyph: searchIcon, className: styles.rightSearchIcon, title: translations?.searchTitle ?? translate('searchTitle'), onClick: this.handleApply, ref: this.glassRef, "data-test": "query-assist-search-icon" }) }))] })) }) }));
     }
 }
 export const RerenderableQueryAssist = rerenderHOC(QueryAssist);

package/components/select/select__popup.js

@@ -310,7 +310,7 @@ export default class SelectPopup extends PureComponent {
                 const list = this.getList(this.props.ringPopupTarget || ringPopupTarget);
                 const bottomLine = this.getBottomLine();
                 const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar || topbar;
-                return (_jsx(Popup, { trapFocus: false, ref: this.popupRef, hidden: hidden || !hasContent, attached: isInputMode, className: classes, dontCloseOnAnchorClick: true, anchorElement: anchorElement, minWidth: minWidth, onCloseAttempt: onCloseAttempt, onOutsideClick: onOutsideClick, directions: directions, top: top, left: left, offset: offset, onMouseDown: this.mouseDownHandler, target: this.props.ringPopupTarget, autoCorrectTopOverflow: false, style: style, largeBorderRadius: true, children: _jsxs("div", { dir: dir, children: [!hidden && filter && _jsx(Shortcuts, { map: this.shortcutsMap, scope: this.shortcutsScope }), topbar, hidden ? _jsx("div", {}) : filterWithTags, selectAll, list, bottomLine, toolbar] }) }));
+                return (_jsx(Popup, { trapFocus: false, cssPositioning: true, ref: this.popupRef, hidden: hidden || !hasContent, attached: isInputMode, className: classes, dontCloseOnAnchorClick: true, anchorElement: anchorElement, minWidth: minWidth, onCloseAttempt: onCloseAttempt, onOutsideClick: onOutsideClick, directions: directions, top: top, left: left, offset: offset, onMouseDown: this.mouseDownHandler, target: this.props.ringPopupTarget, autoCorrectTopOverflow: false, style: style, largeBorderRadius: true, children: _jsxs("div", { dir: dir, children: [!hidden && filter && _jsx(Shortcuts, { map: this.shortcutsMap, scope: this.shortcutsScope }), topbar, hidden ? _jsx("div", {}) : filterWithTags, selectAll, list, bottomLine, toolbar] }) }));
             } }));
     }
 }

package/components/tabs/collapsible-more.js

@@ -52,7 +52,7 @@ export const MoreButton = memo(({ items, selected, onSelect, moreClassName, more
         return popupItems;
     }, [items, morePopupBeforeEnd, morePopupItemClassName, selected]);
     const popupAnchor = useMemo(() => (_jsx(AnchorLink, { moreClassName: moreClassName, moreActiveClassName: moreActiveClassName, hasActiveChildren: hasActiveChild })), [hasActiveChild, moreActiveClassName, moreClassName]);
-    const popup = useMemo(() => (_jsx(PopupMenu, { directions: morePopupDirections, className: morePopupClassName, onSelect: onSelectHandler, data: data })), [data, morePopupClassName, onSelectHandler]);
+    const popup = useMemo(() => (_jsx(PopupMenu, { cssPositioning: true, directions: morePopupDirections, className: morePopupClassName, onSelect: onSelectHandler, data: data })), [data, morePopupClassName, onSelectHandler]);
     if (items.length === 0) {
         return null;
     }

package/components/text/text.d.ts

@@ -1,17 +1,28 @@
 import { Component, HTMLAttributes } from 'react';
-type TextSize = 's' | 'm' | 'l';
+declare const TextSizes: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+type TextSize = (typeof TextSizes)[keyof typeof TextSizes];
 export interface TextProps extends HTMLAttributes<HTMLElement> {
     info?: boolean | null | undefined;
     size?: TextSize;
     'data-test'?: string | null | undefined;
     bold?: boolean | null | undefined;
 }
-declare const TextSize: Record<string, TextSize>;
 /**
  * @name Text
  */
 export default class Text extends Component<TextProps> {
-    static Size: Record<string, TextSize>;
+    static defaultProps: {
+        size: "m";
+    };
+    static Size: {
+        readonly S: "s";
+        readonly M: "m";
+        readonly L: "l";
+    };
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/components/text/text.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import classNames from 'classnames';
 import styles from './text.css';
-const TextSize = {
+const TextSizes = {
     S: 's',
     M: 'm',
     L: 'l',
@@ -11,7 +11,10 @@ const TextSize = {
  * @name Text
  */
 export default class Text extends Component {
-    static Size = TextSize;
+    static defaultProps = {
+        size: TextSizes.M,
+    };
+    static Size = TextSizes;
     render() {
         const { children, className, info, size, bold, ...restProps } = this.props;
         const classes = classNames(styles.text, className, {

package/components/user-card/tooltip.js

@@ -20,7 +20,7 @@ export default class UserCardTooltip extends Component {
     };
     render() {
         const { children, renderUserCard, renderNoUser, dropdownProps, user, ...restProps } = this.props;
-        return (_jsx(Dropdown, { anchor: children, hoverMode: true, clickMode: false, ...dropdownProps, children: _jsx(Popup, { attached: false, children: user
+        return (_jsx(Dropdown, { anchor: children, hoverMode: true, clickMode: false, ...dropdownProps, children: _jsx(Popup, { attached: false, cssPositioning: true, children: user
                     ? renderUserCard({
                         ...restProps,
                         user,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.59",
+  "version": "7.0.60-beta.0",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -102,9 +102,9 @@
     "@babel/eslint-parser": "^7.28.0",
     "@csstools/css-parser-algorithms": "^3.0.4",
     "@csstools/stylelint-no-at-nest-rule": "^4.0.0",
-    "@eslint/compat": "^1.3.1",
+    "@eslint/compat": "^1.3.2",
     "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.32.0",
+    "@eslint/js": "^9.33.0",
     "@figma/code-connect": "^1.3.4",
     "@jetbrains/eslint-config": "^6.0.5",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
@@ -115,11 +115,11 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
-    "@storybook/addon-a11y": "9.0.18",
-    "@storybook/addon-docs": "^9.0.18",
-    "@storybook/addon-themes": "^9.0.18",
+    "@storybook/addon-a11y": "9.1.2",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-themes": "^9.1.2",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "9.0.18",
+    "@storybook/react-webpack5": "9.1.2",
     "@storybook/test-runner": "^0.23.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
@@ -129,33 +129,33 @@
     "@types/chai-dom": "1.11.3",
     "@types/eslint__js": "^9.14.0",
     "@types/markdown-it": "^14.1.2",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
     "@types/webpack-env": "^1.18.8",
-    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react": "^5.0.0",
     "@vitest/eslint-plugin": "^1.3.4",
     "acorn": "^8.15.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001726",
+    "caniuse-lite": "^1.0.30001731",
     "chai": "^5.2.1",
     "chai-as-promised": "^8.0.1",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.1.2",
-    "chromatic": "^13.1.2",
-    "core-js": "^3.44.0",
-    "cpy-cli": "^5.0.0",
+    "chromatic": "^13.1.3",
+    "core-js": "^3.45.0",
+    "cpy-cli": "^6.0.0",
     "dotenv-cli": "^10.0.0",
-    "eslint": "^9.32.0",
+    "eslint": "^9.33.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-formatter-jslint-xml": "^8.40.0",
     "eslint-import-resolver-exports": "^1.0.0-beta.5",
     "eslint-import-resolver-webpack": "^0.13.10",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.5.3",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-storybook": "^9.0.18",
+    "eslint-plugin-storybook": "^9.1.2",
     "events": "^3.3.0",
     "glob": "^11.0.3",
     "globals": "^16.3.0",
@@ -166,30 +166,30 @@
     "jest": "~30.0.5",
     "jest-environment-jsdom": "^30.0.5",
     "jest-teamcity": "^1.12.0",
-    "lint-staged": "^16.1.2",
+    "lint-staged": "^16.1.5",
     "markdown-it": "^14.1.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
     "prettier": "^3.6.2",
     "raw-loader": "^4.0.2",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
     "rollup": "^4.46.2",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "9.0.18",
-    "stylelint": "^16.23.0",
+    "storybook": "9.1.2",
+    "stylelint": "^16.23.1",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.14",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.38.0",
+    "typescript": "~5.9.2",
+    "typescript-eslint": "^8.39.1",
     "vitest": "^3.2.4",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.101.0",
+    "webpack": "^5.101.1",
     "webpack-cli": "^6.0.1",
     "xmlappend": "^1.0.4"
   },
@@ -216,7 +216,7 @@
     "@babel/core": "^7.28.0",
     "@babel/preset-typescript": "^7.27.1",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
-    "@jetbrains/icons": "^5.10.0",
+    "@jetbrains/icons": "^5.12.0",
     "@jetbrains/postcss-require-hover": "^0.2.0",
     "@types/combokeys": "^2.4.9",
     "@types/element-resize-detector": "^1.1.6",