@jetbrains/ring-ui 7.0.60-beta.2 → 7.0.61

package/components/banner/banner.css

@@ -0,0 +1,102 @@
+.banner {
+  display: flex;
+  align-items: flex-start;
+
+  padding: calc(var(--ring-unit) * 1.5);
+
+  color: var(--ring-text-color);
+  border: 1px solid var(--ring-borders-color);
+
+  border-radius: var(--ring-unit);
+
+  line-height: var(--ring-line-height);
+  gap: var(--ring-unit);
+
+  &.inline {
+    border-right: none;
+    border-left: none;
+    border-radius: 0;
+  }
+
+  &.info {
+    border-color: var(--ring-border-hover-color);
+    background-color: var(--ring-main-container-light-color);
+
+    .icon {
+      color: var(--ring-main-color);
+    }
+  }
+
+  &.error {
+    border-color: var(--ring-error-border-color);
+    background-color: var(--ring-error-container-light-color);
+
+    .icon {
+      color: var(--ring-main-error-color);
+    }
+  }
+
+  &.success {
+    border-color: var(--ring-success-border-color);
+    background-color: var(--ring-success-container-light-color);
+
+    .icon {
+      color: var(--ring-main-success-color);
+    }
+  }
+
+  &.warning {
+    border-color: var(--ring-warning-border-color);
+    background-color: var(--ring-warning-container-light-color);
+
+    .icon {
+      color: var(--ring-main-warning-color);
+    }
+  }
+
+  &.purple {
+    border-color: var(--ring-purple-border-color);
+    background-color: var(--ring-purple-container-light-color);
+
+    .icon {
+      color: var(--ring-main-purple-color);
+    }
+  }
+
+  &.grey {
+    border-color: var(--ring-borders-color);
+    background-color: var(--ring-grey-container-light-color);
+
+    .icon {
+      color: var(--ring-secondary-color);
+    }
+  }
+}
+
+.title {
+  margin-bottom: calc(var(--ring-unit) / 2);
+
+  font-weight: var(--ring-font-weight-bold);
+}
+
+.description {
+  p {
+    margin: var(--ring-unit) 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.closeButtonWrapper {
+  margin-left: auto;
+}
+
+.closeButton {
+  color: var(--ring-text-color);
+}

package/components/banner/banner.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface BannerTranslations {
+    close: string;
+}
+export interface BannerProps {
+    title?: React.ReactNode;
+    children: React.ReactNode;
+    mode?: 'info' | 'error' | 'success' | 'warning' | 'purple' | 'grey';
+    withIcon?: boolean;
+    inline?: boolean;
+    onClose?: () => void;
+    closeButtonTitle?: string;
+    className?: string;
+    ['data-test']?: string;
+    translations?: BannerTranslations;
+}
+export declare function Banner(props: BannerProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Banner>;
+export default _default;

package/components/banner/banner.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import classnames from 'classnames';
+import infoIcon from '@jetbrains/icons/info-filled';
+import exceptionIcon from '@jetbrains/icons/exception';
+import successIcon from '@jetbrains/icons/success';
+import warningIcon from '@jetbrains/icons/warning';
+import closeIcon from '@jetbrains/icons/close';
+import Icon from '../icon/icon';
+import Link from '../link/link';
+import Tooltip from '../tooltip/tooltip';
+import styles from './banner.css';
+export function Banner(props) {
+    const { title, children, mode = 'info', withIcon = false, inline = false, onClose, closeButtonTitle, className, ['data-test']: dataTest, translations = {
+        close: 'Close',
+    }, } = props;
+    let icon = infoIcon;
+    if (mode === 'error') {
+        icon = exceptionIcon;
+    }
+    else if (mode === 'success') {
+        icon = successIcon;
+    }
+    else if (mode === 'warning') {
+        icon = warningIcon;
+    }
+    return (_jsxs("div", { className: classnames({
+            [styles.banner]: true,
+            [styles.inline]: inline,
+            [styles.info]: mode === 'info',
+            [styles.error]: mode === 'error',
+            [styles.success]: mode === 'success',
+            [styles.warning]: mode === 'warning',
+            [styles.purple]: mode === 'purple',
+            [styles.grey]: mode === 'grey',
+        }, className), "data-test": dataTest, children: [withIcon && _jsx(Icon, { glyph: icon, className: styles.icon }), _jsxs("div", { children: [title && _jsx("div", { className: styles.title, children: title }), _jsx("div", { className: styles.description, children: children })] }), onClose && (_jsx(Tooltip, { title: closeButtonTitle ?? translations.close, className: styles.closeButtonWrapper, children: _jsx(Link, { className: styles.closeButton, pseudo: true, onClick: onClose, "aria-label": "Close", children: _jsx(Icon, { glyph: closeIcon }) }) }))] }));
+}
+export default React.memo(Banner);

package/components/button/button.css

@@ -2,7 +2,8 @@
 
 @value glyph from "../icon/icon.css";
 
-:root {
+:root,
+:host {
   --ring-button-focus-border-color: var(--ring-border-hover-color);
   --ring-button-shadow: inset 0 0 0 1px;
   --ring-button-loader-width: calc(var(--ring-unit) * 8);

package/components/button/button.d.ts

@@ -51,7 +51,7 @@ export declare class Button extends PureComponent<ButtonProps> {
      * @deprecated Use icons with appropriate intrinsic sizes instead
      */
     static IconSize: typeof Size;
-    static contextType: React.Context<ControlsHeight>;
+    static contextType: React.Context<ControlsHeight | (() => ControlsHeight)>;
     context: React.ContextType<typeof ControlsHeightContext>;
     buttonRef: React.RefObject<HTMLButtonElement | null>;
     render(): import("react/jsx-runtime").JSX.Element;

package/components/button/button.js

@@ -40,7 +40,7 @@ export class Button extends PureComponent {
         const classes = getButtonClasses({
             ...this.props,
             inline: isInline,
-            height: height ?? this.context,
+            height: height ?? (typeof this.context === 'function' ? this.context() : this.context),
         });
         const content = (_jsxs(_Fragment, { children: [icon && (_jsx(Icon, { className: classNames(styles.icon, iconClassName), glyph: icon, size: iconSize, suppressSizeWarning: iconSuppressSizeWarning })), children, iconRight && _jsx(Icon, { className: classNames(styles.iconRight, iconRightClassName), glyph: iconRight }), dropdown && _jsx(Icon, { glyph: isInline ? chevron12pxDown : chevronDown, className: styles.dropdownIcon })] }));
         const isDisabled = disabled || loader || undefined;

package/components/button-group/button-group.css

@@ -2,7 +2,8 @@
 
 @value button, active, flat from "../button/button.css";
 
-:root {
+:root,
+:host {
   --ring-button-group-default-z-index: 1;
   --ring-button-group-disabled-z-index: 0;
   --ring-button-group-active-z-index: 2;

package/components/checkbox/checkbox.css

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
-:root {
+:root,
+:host {
   --ring-checkbox-disabled-check-color: var(--ring-white-text-color);
 }
 

package/components/date-picker/date-picker.css

@@ -4,8 +4,8 @@
 /* ensure styles order */
 @import "../input/input.css";
 
-:root {
-  /* stylelint-disable-next-line color-no-hex */
+:root,
+:host {
   --ring-date-picker-hover-color: var(--ring-border-hover-color);
 }
 

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, { cssPositioning: true, hidden: hidden, className: className, ref: popupRef, directions: [
+const PopupComponent = ({ hidden = false, className, popupRef, onClear, datePopupProps, onComplete, ...restProps }) => (_jsx(Popup, { 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, cssPositioning: true, 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, popupRef: this.popupRef, onClear: clear ? this.clear : null, datePopupProps: {
                     ...datePopupProps,
                     translations,
                     onChange: this.handleChange,

package/components/error-bubble/error-bubble.css

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
-:root {
+:root,
+:host {
   --ring-error-bubble-background-color: var(--ring-popup-background-color);
 }
 

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, { 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 }) }))] }));
+                    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 }) }))] }));
     }
 }

package/components/global/configuration.d.ts

@@ -0,0 +1,11 @@
+export declare enum ControlsHeight {
+    S = "S",
+    M = "M",
+    L = "L"
+}
+export interface RingUIConfiguration {
+    controlsHeight?: ControlsHeight;
+    popupsCssPositioning?: boolean;
+}
+export declare function configure(config: RingUIConfiguration): void;
+export declare function getConfiguration(): Required<RingUIConfiguration>;

package/components/global/configuration.js

@@ -0,0 +1,21 @@
+export var ControlsHeight;
+(function (ControlsHeight) {
+    ControlsHeight["S"] = "S";
+    ControlsHeight["M"] = "M";
+    ControlsHeight["L"] = "L";
+})(ControlsHeight || (ControlsHeight = {}));
+const globalConfiguration = {
+    controlsHeight: ControlsHeight.M,
+    popupsCssPositioning: true,
+};
+export function configure(config) {
+    if (config.controlsHeight !== undefined) {
+        globalConfiguration.controlsHeight = config.controlsHeight;
+    }
+    if (config.popupsCssPositioning !== undefined) {
+        globalConfiguration.popupsCssPositioning = config.popupsCssPositioning;
+    }
+}
+export function getConfiguration() {
+    return { ...globalConfiguration };
+}

package/components/global/controls-height.d.ts

@@ -1,8 +1,5 @@
-export declare enum ControlsHeight {
-    S = "S",
-    M = "M",
-    L = "L"
-}
-export declare const ControlsHeightContext: import("react").Context<ControlsHeight>;
-export declare function configureGlobalControlsHeight(value: ControlsHeight): void;
+import { ControlsHeight } from './configuration';
+export { ControlsHeight } from './configuration';
+export declare const configureGlobalControlsHeight: (value: ControlsHeight) => void;
 export declare function getGlobalControlsHeight(): ControlsHeight;
+export declare const ControlsHeightContext: import("react").Context<ControlsHeight | (() => ControlsHeight)>;

package/components/global/controls-height.js

@@ -1,16 +1,12 @@
 import { createContext } from 'react';
-export var ControlsHeight;
-(function (ControlsHeight) {
-    ControlsHeight["S"] = "S";
-    ControlsHeight["M"] = "M";
-    ControlsHeight["L"] = "L";
-})(ControlsHeight || (ControlsHeight = {}));
-export const ControlsHeightContext = createContext(ControlsHeight.M);
-let globalControlsHeight = ControlsHeight.M;
+import deprecate from 'util-deprecate';
+import { configure, ControlsHeight, getConfiguration } from './configuration';
+export { ControlsHeight } from './configuration';
 // This can be used if React Context is not applicable, for example for alertService or Auth dialog
-export function configureGlobalControlsHeight(value) {
-    globalControlsHeight = value;
-}
+export const configureGlobalControlsHeight = deprecate((value) => {
+    configure({ controlsHeight: value });
+}, 'Ring UI: configureGlobalControlsHeight() is deprecated, use configure() instead');
 export function getGlobalControlsHeight() {
-    return globalControlsHeight;
+    return getConfiguration().controlsHeight ?? ControlsHeight.M;
 }
+export const ControlsHeightContext = createContext(getGlobalControlsHeight);

package/components/global/variables.css

@@ -1,7 +1,8 @@
 /* stylelint-disable color-no-hex */
 
 .light,
-:root {
+:root,
+:host {
   --ring-unit: 8px;
 
   /* Element */
@@ -239,6 +240,7 @@
   --ring-font-family: system-ui, Arial, sans-serif;
   --ring-font-family-monospace: Menlo, "Bitstream Vera Sans Mono", "Ubuntu Mono", Consolas, "Courier New", Courier,
     monospace;
+  --ring-font-weight-medium: 500;
   --ring-font-weight-bold: 600;
   --ring-font-variant-numeric: lining-nums tabular-nums slashed-zero;
 

package/components/header/header.css

@@ -2,7 +2,8 @@
 
 @value link, active from "../link/link.css";
 
-:root {
+:root,
+:host {
   --ring-header-link-color: var(--ring-link-color);
 }
 

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, { cssPositioning: true, 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, { 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

@@ -1,6 +1,6 @@
 import { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
 import * as React from 'react';
-import { ControlsHeight } from '../global/controls-height';
+import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
 import { LabelType } from '../control-label/control-label';
 declare function noop(): void;
 /**
@@ -58,7 +58,8 @@ export declare class Input extends PureComponent<InputProps> {
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;
-    static contextType: React.Context<ControlsHeight>;
+    static contextType: React.Context<ControlsHeight | (() => ControlsHeight)>;
+    context: React.ContextType<typeof ControlsHeightContext>;
     frame?: number;
     input?: HTMLInputElement | HTMLTextAreaElement | null;
     id: string;

package/components/input/input.js

@@ -97,7 +97,7 @@ export class Input extends PureComponent {
         // Modifiers
         size, multiline, borderless, 
         // Props
-        label, labelType, error, help, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = this.context, beforeInput, afterInput, autogrow, ...restProps } = this.props;
+        label, labelType, error, help, className, inputClassName, children, value, onClear, disabled, inputRef, onChange, enableShortcuts, id, placeholder, icon, translations, height = typeof this.context === 'function' ? this.context() : this.context, beforeInput, afterInput, autogrow, ...restProps } = this.props;
         const { empty } = this.state;
         const clearable = !!onClear;
         const classes = classNames(className, styles.outerContainer, [styles[`size${size}`]], [styles[`height${height}`]], {

package/components/input-size/input-size.css

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
-:root {
+:root,
+:host {
   --ring-input-xs: calc(var(--ring-unit) * 12);
   --ring-input-s: calc(var(--ring-unit) * 12);
   --ring-input-m: calc(var(--ring-unit) * 30);

package/components/loader/__mocks__/loader__core.js

@@ -0,0 +1,5 @@
+export default class LoaderCore {
+  startAnimation() {}
+  stopAnimation() {}
+  destroy() {}
+}

package/components/loader-inline/loader-inline.css

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
-:root {
+:root,
+:host {
   /* stylelint-disable-next-line color-no-hex */
   --ring-loader-inline-stops: #ff00eb, #bd3bff, #008eff, #58ba00, #f48700, #ff00eb;
 }

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, 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') }))] }) })) })) }));
+        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') }))] }) })) })) }));
     }
 }

package/components/old-browsers-message/__mocks__/old-browsers-message.js

@@ -0,0 +1 @@
+export function stop() {}

package/components/popup/popup.d.ts

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

@@ -11,6 +11,7 @@ import { Listeners, getStyles } from '../global/dom';
 import Shortcuts from '../shortcuts/shortcuts';
 import dataTests from '../global/data-tests';
 import TabTrap from '../tab-trap/tab-trap';
+import { getConfiguration } from '../global/configuration';
 import position from './position';
 import styles from './popup.css';
 import { DEFAULT_DIRECTIONS, Dimension, Directions, Display, MaxHeight, MinWidth } from './popup.consts';
@@ -66,7 +67,6 @@ export default class Popup extends PureComponent {
         trapFocus: false,
         autoFocusFirst: false,
         legacy: false,
-        cssPositioning: false,
     };
     state = {
         display: Display.SHOWING,
@@ -160,11 +160,19 @@ export default class Popup extends PureComponent {
             }
         }
     };
+    shouldUseCssPositioning() {
+        if (!supportsCSSAnchorPositioning()) {
+            return false;
+        }
+        return this.props.cssPositioning !== undefined
+            ? this.props.cssPositioning
+            : getConfiguration().popupsCssPositioning;
+    }
     _updatePosition = () => {
         const popup = this.popup;
         const anchor = this._getAnchor();
         if (popup) {
-            if (this.props.cssPositioning && supportsCSSAnchorPositioning() && anchor) {
+            if (this.shouldUseCssPositioning() && anchor) {
                 // Use CSS Anchor positioning
                 setCSSAnchorPositioning({
                     popup,
@@ -219,7 +227,7 @@ export default class Popup extends PureComponent {
                 this._listenersEnabled = true;
                 // 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()) {
+                if (!this.shouldUseCssPositioning()) {
                     this.listeners.add(window, 'resize', this._redraw);
                     if (this.props.autoPositioningOnScroll) {
                         this.listeners.add(window, 'scroll', this._redraw);
@@ -279,10 +287,9 @@ 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.cssAnchoredPopup]: useCssPositioning,
+            [styles.cssAnchoredPopup]: this.shouldUseCssPositioning(),
             [styles.attached]: attached,
             [styles.hidden]: hidden,
             [styles.showing]: showing,

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

@@ -47,7 +47,6 @@ 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/progress-bar/progress-bar.css

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
-:root {
+:root,
+:host {
   --ring-progress-bar-background-color: rgba(0, 0, 0, 0.2);
   --ring-progress-bar-line-background-color: rgba(255, 255, 255, 0.6);
 }

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, { 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" }) }))] })) }) }));
+                            }), 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" }) }))] })) }) }));
     }
 }
 export const RerenderableQueryAssist = rerenderHOC(QueryAssist);

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

@@ -737,7 +737,7 @@ export default class Select extends Component {
         const { selected } = this.state;
         const { disabled, clear, 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?.icon) {
             icons.push(_jsx("button", { title: "Toggle options popup", type: "button", className: styles.selectedIcon, disabled: this.props.disabled, onClick: this._clickHandler, style: { backgroundImage: `url(${selected.icon})` } }, "selected"));
         }

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, 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] }) }));
+                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] }) }));
             } }));
     }
 }

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, { cssPositioning: true, directions: morePopupDirections, className: morePopupClassName, onSelect: onSelectHandler, data: data })), [data, morePopupClassName, onSelectHandler]);
+    const popup = useMemo(() => (_jsx(PopupMenu, { directions: morePopupDirections, className: morePopupClassName, onSelect: onSelectHandler, data: data })), [data, morePopupClassName, onSelectHandler]);
     if (items.length === 0) {
         return null;
     }

package/components/tabs/tabs.css

@@ -3,7 +3,8 @@
 /* ensure styles order */
 @import "../link/link.css";
 
-:root {
+:root,
+:host {
   --ring-selected-tab-color: var(--ring-text-color);
 }
 

package/components/tags-input/tags-input.d.ts

@@ -4,7 +4,7 @@ import Select, { SelectItem } from '../select/select';
 import { TagType } from '../tags-list/tags-list';
 import Caret from '../caret/caret';
 import { Size } from '../input/input';
-import { ControlsHeight } from '../global/controls-height';
+import { ControlsHeight, ControlsHeightContext } from '../global/controls-height';
 import { Filter } from '../select/select__popup';
 import { TagAttrs } from '../tag/tag';
 import { LabelType } from '../control-label/control-label';
@@ -82,7 +82,8 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
     componentDidMount(): void;
     static ngModelStateField: string;
     ngModelStateField: string;
-    static contextType: React.Context<ControlsHeight>;
+    static contextType: React.Context<ControlsHeight | (() => ControlsHeight)>;
+    context: React.ContextType<typeof ControlsHeightContext>;
     id: string;
     node?: HTMLElement | null;
     nodeRef: (node: HTMLElement | null) => void;

package/components/tags-input/tags-input.js

@@ -221,7 +221,7 @@ export default class TagsInput extends PureComponent {
     };
     render() {
         const { focused, tags, activeIndex } = this.state;
-        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, labelType, height = this.context, label, } = this.props;
+        const { disabled, canNotBeEmpty, allowAddNewTags, filter, size, labelType, height = typeof this.context === 'function' ? this.context() : this.context, label, } = this.props;
         const classes = classNames(styles.tagsInput, [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
             [styles.tagsInputDisabled]: disabled,
             [styles.tagsInputFocused]: focused,

package/components/tooltip/tooltip.css

@@ -1,6 +1,7 @@
 @import "../global/variables.css";
 
-:root {
+:root,
+:host {
   --ring-tooltip-background-color: var(--ring-content-background-color);
   --ring-tooltip-text-color: var(--ring-text-color);
 }

package/components/tooltip/tooltip.js

@@ -97,6 +97,13 @@ export default class Tooltip extends Component {
                 }
                 this.hidePopup();
             });
+            this.listeners.add(this.containerNode, 'focusin', this.tryToShowPopup);
+            this.listeners.add(this.containerNode, 'focusout', ev => {
+                if (ev.relatedTarget && this.popup?.container?.contains(ev.relatedTarget)) {
+                    return;
+                }
+                this.hidePopup();
+            });
         }
         this.listeners.add(document, 'scroll', () => scheduleScroll(this.hidePopup), { passive: true });
     }

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, cssPositioning: true, children: user
+        return (_jsx(Dropdown, { anchor: children, hoverMode: true, clickMode: false, ...dropdownProps, children: _jsx(Popup, { attached: false, children: user
                     ? renderUserCard({
                         ...restProps,
                         user,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.60-beta.2",
+  "version": "7.0.61",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -12,7 +12,6 @@
     "components",
     "postcss.config.js",
     "webpack.config.js",
-    "jslint-xml.js",
     "typings.d.ts"
   ],
   "exports": {
@@ -45,52 +44,50 @@
     "components": "./components/"
   },
   "scripts": {
-    "apply-resolutions": "npx npm-force-resolutions@0.0.10",
-    "_postinstall": "husky && npm run postinstall:gitconfig",
-    "postinstall:gitconfig": "git config blame.ignoreRevsFile .git-blame-ignore-revs",
-    "prepare": "webpack -c .storybook/custom-header/webpack.config.js",
-    "prea11y-audit": "playwright install",
     "a11y-audit": "test-storybook --url http://localhost:9999 && DARK=true test-storybook --url http://localhost:9999",
-    "a11y-audit-ci": "node a11y-audit-ci.mjs",
-    "console-errors": "jest console-errors.test.js --watchAll",
-    "console-errors-ci": "jest console-errors.test.js --reporters=jest-teamcity",
-    "test": "vitest src",
-    "screenshots-gui": "npm --prefix packages/screenshots run gui",
-    "screenshots-test": "npm --prefix packages/screenshots run test",
-    "screenshots-test-ci": "npm --prefix packages/screenshots run test-ci",
-    "screenshots-gather": "npm --prefix packages/screenshots run gather",
+    "a11y-audit-ci": "node scripts/a11y-audit-ci.mjs",
+    "apply-resolutions": "npx npm-force-resolutions@0.0.10",
+    "build": "BROWSERSLIST_ENV=dist ./node_modules/.bin/rollup -c --bundleConfigAsCjs",
     "build-stories": "storybook build --quiet -c .storybook -o storybook-dist",
-    "chromatic": "npx chromatic --build-script-name build-stories --exit-once-uploaded",
-    "chromatic-local": "dotenv -- npm run publish-stories",
+    "console-errors": "jest scripts/console-errors.test.js --watchAll",
+    "console-errors-ci": "jest scripts/console-errors.test.js --reporters=jest-teamcity",
     "figma-connect-publish": "npx figma connect publish --token=$FIGMA_CODE_CONNECT_TOKEN",
     "figma-connect-publish-local": "dotenv -- npm run figma-connect-publish",
     "figma-connect-unpublish": "npx figma connect unpublish --token=$FIGMA_CODE_CONNECT_TOKEN",
     "figma-connect-unpublish-local": "dotenv -- npm run figma-connect-unpublish",
-    "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy './**/*' '!**/*.stories.*' '!**/*.ts' '!**/*.tsx' '!**/__mocks__/**' ../components --parents --cwd=src/",
-    "build": "BROWSERSLIST_ENV=dist ./node_modules/.bin/rollup -c --bundleConfigAsCjs",
+    "lint": "npm run lint:js . && npm run stylelint",
+    "lint-ci": "eslint --format jslint-xml . > eslint-report.xml && npm run stylelint-ci",
+    "lint:js": "eslint",
     "postbuild": "cpy './**/*.d.ts' ../dist --parents --cwd=components/",
+    "_postinstall": "husky && npm run postinstall:gitconfig",
+    "postinstall:gitconfig": "git config blame.ignoreRevsFile .git-blame-ignore-revs",
+    "postpublish": "pinst --enable",
+    "postrelease-ci": "git push --follow-tags",
+    "prea11y-audit": "playwright install",
+    "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy './**/*' '!**/*.stories.*' '!**/*.ts' '!**/*.tsx' '!**/test-helpers/mocks/**' ../components --parents --cwd=src/",
+    "prelint-ci": "echo \"##teamcity[importData type='jslint' path='eslint-report.xml']\"",
+    "prepare": "webpack -c .storybook/custom-header/webpack.config.js",
+    "prepublishOnly": "pinst --disable",
+    "prerelease-built-ci": "node scripts/prepare-built-package.js",
+    "prerelease-ci": "git pull",
+    "pretest-ci": "npm run lint-ci",
+    "release-built-ci": "npm publish --access=public $NPM_PUBLISH_PARAMS",
+    "release-ci": "npm version $NPM_VERSION_PARAMS && npm publish --access=public $NPM_PUBLISH_PARAMS",
+    "screenshots-gather": "npm --prefix packages/screenshots run gather",
+    "screenshots-gui": "npm --prefix packages/screenshots run gui",
+    "screenshots-test": "npm --prefix packages/screenshots run test",
+    "screenshots-test-ci": "npm --prefix packages/screenshots run test-ci",
     "serve": "http-server storybook-dist/ -p 9999",
     "start": "storybook dev -p 9999",
     "storybook-debug": "node --inspect-brk node_modules/@storybook/react/bin -p 9999",
-    "lint:js": "eslint",
-    "lint": "npm run lint:js . && npm run stylelint",
-    "prelint-ci": "echo \"##teamcity[importData type='jslint' path='eslint-report.xml']\"",
-    "lint-ci": "eslint --format jslint-xml . > eslint-report.xml && npm run stylelint-ci",
-    "stylelint-ci": "stylelint --ignore-path .stylelintignore --custom-formatter './jslint-xml.js' '**/*.css' | xmlappend eslint-report.xml",
     "stylelint": "stylelint --ignore-path .stylelintignore '**/*.css'",
-    "validate-tc-config": "mvn --file .teamcity/pom.xml org.jetbrains.teamcity:teamcity-configs-maven-plugin:generate -e",
-    "pretest-ci": "npm run lint-ci",
-    "typecheck": "tsc",
+    "stylelint-ci": "stylelint --ignore-path .stylelintignore --custom-formatter 'scripts/jslint-xml.js' '**/*.css' | xmlappend eslint-report.xml",
+    "test": "vitest src",
     "test-ci": "npm run test",
-    "typecheck-ci": "node tsc-teamcity",
-    "prerelease-ci": "git pull",
-    "release-ci": "npm version $NPM_VERSION_PARAMS && npm publish --access=public $NPM_PUBLISH_PARAMS",
-    "postrelease-ci": "git push --follow-tags",
-    "prerelease-built-ci": "node prepare-built-package.js",
-    "release-built-ci": "npm publish --access=public $NPM_PUBLISH_PARAMS",
-    "prepublishOnly": "pinst --disable",
-    "postpublish": "pinst --enable",
-    "update-styles": "node design-tokens/update-styles.mjs"
+    "typecheck": "tsc",
+    "typecheck-ci": "node scripts/tsc-teamcity",
+    "update-styles": "node scripts/update-styles.mjs",
+    "validate-tc-config": "mvn --file .teamcity/pom.xml org.jetbrains.teamcity:teamcity-configs-maven-plugin:generate -e"
   },
   "repository": {
     "type": "git",
@@ -98,54 +95,51 @@
   },
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@babel/cli": "^7.28.0",
-    "@babel/eslint-parser": "^7.28.0",
+    "@babel/cli": "^7.28.3",
+    "@babel/eslint-parser": "^7.28.4",
     "@csstools/css-parser-algorithms": "^3.0.4",
     "@csstools/stylelint-no-at-nest-rule": "^4.0.0",
     "@eslint/compat": "^1.3.2",
     "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.33.0",
-    "@figma/code-connect": "^1.3.4",
+    "@eslint/js": "^9.35.0",
+    "@figma/code-connect": "^1.3.5",
     "@jetbrains/eslint-config": "^6.0.5",
     "@jetbrains/logos": "3.0.0-canary.734b213.0",
     "@jetbrains/rollup-css-plugin": "./packages/rollup-css-plugin",
     "@jetbrains/stylelint-config": "^4.0.2",
-    "@primer/octicons": "^19.15.5",
+    "@primer/octicons": "^19.17.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
-    "@storybook/addon-a11y": "9.1.2",
-    "@storybook/addon-docs": "^9.1.2",
-    "@storybook/addon-themes": "^9.1.2",
+    "@storybook/addon-a11y": "9.1.5",
+    "@storybook/addon-docs": "^9.1.5",
+    "@storybook/addon-themes": "^9.1.5",
     "@storybook/csf": "^0.1.13",
-    "@storybook/react-webpack5": "9.1.2",
+    "@storybook/react-webpack5": "9.1.5",
     "@storybook/test-runner": "^0.23.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/chai": "^5.2.2",
     "@types/chai-as-promised": "^8.0.2",
     "@types/chai-dom": "1.11.3",
     "@types/eslint__js": "^9.14.0",
     "@types/markdown-it": "^14.1.2",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "@types/webpack-env": "^1.18.8",
-    "@vitejs/plugin-react": "^5.0.0",
-    "@vitest/eslint-plugin": "^1.3.4",
+    "@vitejs/plugin-react": "^5.0.2",
+    "@vitest/eslint-plugin": "^1.3.9",
     "acorn": "^8.15.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001731",
-    "chai": "^5.2.1",
-    "chai-as-promised": "^8.0.1",
+    "caniuse-lite": "^1.0.30001741",
+    "chai-as-promised": "^8.0.2",
     "chai-dom": "^1.12.1",
     "cheerio": "^1.1.2",
-    "chromatic": "^13.1.3",
-    "core-js": "^3.45.0",
+    "core-js": "^3.45.1",
     "cpy-cli": "^6.0.0",
     "dotenv-cli": "^10.0.0",
-    "eslint": "^9.33.0",
+    "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-formatter-jslint-xml": "^8.40.0",
     "eslint-import-resolver-exports": "^1.0.0-beta.5",
@@ -155,18 +149,18 @@
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-storybook": "^9.1.2",
+    "eslint-plugin-storybook": "^9.1.5",
     "events": "^3.3.0",
     "glob": "^11.0.3",
     "globals": "^16.3.0",
-    "html-webpack-plugin": "^5.6.3",
+    "html-webpack-plugin": "^5.6.4",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "~30.0.5",
-    "jest-environment-jsdom": "^30.0.5",
+    "jest": "~30.1.3",
+    "jest-environment-jsdom": "^30.1.2",
     "jest-teamcity": "^1.12.0",
-    "lint-staged": "^16.1.5",
+    "lint-staged": "^16.1.6",
     "markdown-it": "^14.1.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
@@ -176,20 +170,20 @@
     "react-dom": "^19.1.1",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
-    "rollup": "^4.46.2",
+    "rollup": "^4.50.0",
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
-    "storybook": "9.1.2",
+    "storybook": "9.1.5",
     "stylelint": "^16.23.1",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.3.14",
     "typescript": "~5.9.2",
-    "typescript-eslint": "^8.39.1",
+    "typescript-eslint": "^8.42.0",
     "vitest": "^3.2.4",
     "vitest-teamcity-reporter": "^0.3.1",
     "wallaby-webpack": "^3.9.16",
-    "webpack": "^5.101.1",
+    "webpack": "^5.101.3",
     "webpack-cli": "^6.0.1",
     "xmlappend": "^1.0.4"
   },
@@ -213,7 +207,7 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.28.0",
+    "@babel/core": "^7.28.4",
     "@babel/preset-typescript": "^7.27.1",
     "@jetbrains/babel-preset-jetbrains": "^2.4.0",
     "@jetbrains/icons": "^5.12.0",
@@ -224,7 +218,7 @@
     "@types/util-deprecate": "^1.0.4",
     "babel-loader": "10.0.0",
     "babel-plugin-transform-define": "^2.1.4",
-    "browserslist": "^4.25.1",
+    "browserslist": "^4.25.4",
     "change-case": "^4.1.1",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",
@@ -243,9 +237,9 @@
     "postcss-calc": "^10.1.1",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
-    "postcss-loader": "^8.1.1",
+    "postcss-loader": "^8.2.0",
     "postcss-modules-values-replace": "^4.2.2",
-    "postcss-preset-env": "^10.2.4",
+    "postcss-preset-env": "^10.3.1",
     "react-movable": "^3.4.1",
     "react-virtualized": "^9.22.6",
     "react-waypoint": "^10.3.0",

package/jslint-xml.js

@@ -1,39 +0,0 @@
-const xmlEscape = s =>
-  // eslint-disable-next-line no-control-regex
-  `${s}`.replace(/[<>&"'\x00-\x1F\x7F\u0080-\uFFFF]/g, c => {
-    switch (c) {
-      case '<':
-        return '&lt;';
-      case '>':
-        return '&gt;';
-      case '&':
-        return '&amp;';
-      case '"':
-        return '&quot;';
-      case "'":
-        return '&apos;';
-      default:
-        return `&#${c.charCodeAt(0)};`;
-    }
-  });
-
-module.exports = results => {
-  const files = results.map(file => {
-    const warnings = file.warnings.map(({column, line, text}) => {
-      const css = file._postcssResult && file._postcssResult.css;
-      const lines = (css && css.split('\n')) || [];
-      const evidence = lines[line - 1];
-
-      return [
-        `<issue line="${line}"`,
-        ` char="${column}"`,
-        ` evidence="${evidence ? xmlEscape(evidence) : ''}"`,
-        ` reason="${xmlEscape(text)}" />`,
-      ].join('');
-    });
-
-    return `<file name="${file.source}">${warnings.join('')}</file>`;
-  });
-
-  return `<?xml version="1.0" encoding="utf-8"?><jslint>${files.join('')}</jslint>`;
-};