@jetbrains/ring-ui 8.0.0-beta.2 → 8.0.0-beta.4

package/components/global/rerender-hoc.d.ts

@@ -1,4 +1,4 @@
-import { Component, type PropsWithoutRef } from 'react';
+import { Component, type Ref, type PropsWithoutRef } from 'react';
 export interface RerenderableComponent<P, S> extends Component<P, S> {
     node?: HTMLElement | null;
 }
@@ -7,4 +7,6 @@ export interface RerenderableComponentClass<P, S> {
 }
 export default function rerenderHOC<P extends {}, C extends Component<P, unknown>>(ComposedComponent: {
     new (props: P): C;
-}): import("react").ForwardRefExoticComponent<PropsWithoutRef<P> & import("react").RefAttributes<C>>;
+}): ({ ref, ...props }: PropsWithoutRef<P> & {
+    ref?: Ref<C>;
+}) => import("react").JSX.Element;

package/components/global/rerender-hoc.js

@@ -1,4 +1,4 @@
-import { Component, forwardRef } from 'react';
+import { Component } from 'react';
 import { createComposedRef } from './compose-refs';
 export default function rerenderHOC(ComposedComponent) {
     class Rerenderer extends Component {
@@ -9,7 +9,7 @@ export default function rerenderHOC(ComposedComponent) {
             return (<ComposedComponent {...this.state} ref={instance => ref(instance ? { ...instance, rerender: this.setState.bind(this) } : null)}/>);
         }
     }
-    return forwardRef(function RerendererForwardRef(props, ref) {
-        return <Rerenderer props={props} forwardedRef={ref}/>;
-    });
+    return function RerendererForwardRef({ ref, ...props }) {
+        return <Rerenderer props={props} forwardedRef={ref ?? null}/>;
+    };
 }

package/components/global/schedule-with-cleanup.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Schedules a timeout and returns a function that cancels it.
+ *
+ * Useful from React effects.
+ */
+export declare function setTimeoutWithCleanup(callback: () => void, delay?: number): () => void;
+/**
+ * Schedules an animation frame and returns a function that cancels it.
+ *
+ * Useful from React effects.
+ */
+export declare function requestAnimationFrameWithCleanup(callback: () => void): () => void;

package/components/global/schedule-with-cleanup.js

@@ -0,0 +1,34 @@
+/**
+ * Schedules a timeout and returns a function that cancels it.
+ *
+ * Useful from React effects.
+ */
+export function setTimeoutWithCleanup(callback, delay = 0) {
+    let timerId = window.setTimeout(() => {
+        callback();
+        timerId = null;
+    }, delay);
+    return () => {
+        if (timerId != null) {
+            window.clearTimeout(timerId);
+            timerId = null;
+        }
+    };
+}
+/**
+ * Schedules an animation frame and returns a function that cancels it.
+ *
+ * Useful from React effects.
+ */
+export function requestAnimationFrameWithCleanup(callback) {
+    let rafId = requestAnimationFrame(() => {
+        callback();
+        rafId = null;
+    });
+    return () => {
+        if (rafId != null) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+        }
+    };
+}

package/components/{legacy-table/selection.d.ts → global/table-selection.d.ts}

@@ -17,7 +17,7 @@ export interface CloneWithConfig<T> {
     selected?: Set<T> | readonly T[] | null | undefined;
     focused?: T | null | undefined;
 }
-export default class Selection<T> {
+export default class TableSelection<T> {
     protected _rawData: readonly T[];
     protected _getChildren: (item: T) => readonly T[];
     protected _data: Set<T>;
@@ -28,19 +28,19 @@ export default class Selection<T> {
     constructor({ data, selected, focused, getKey, getChildren, isItemSelectable, }?: TableSelectionConfig<T>);
     protected _buildData(data: readonly T[] | null | undefined): Set<T>;
     protected _buildSelected(data: Set<T>, selected: Set<T>): Set<T>;
-    cloneWith({ data, selected, focused }: CloneWithConfig<T>): Selection<T>;
-    focus(value: T | null | undefined): Selection<T>;
-    moveUp(): Selection<T> | undefined;
-    moveDown(): Selection<T> | undefined;
-    moveStart(): Selection<T> | undefined;
-    moveEnd(): Selection<T> | undefined;
-    select(value?: T | null): Selection<T>;
-    deselect(value?: T | null): Selection<T>;
-    toggleSelection(value?: T | null): Selection<T>;
-    selectAll(): Selection<T>;
-    resetFocus(): Selection<T>;
-    resetSelection(): Selection<T>;
-    reset(): Selection<T>;
+    cloneWith({ data, selected, focused }: CloneWithConfig<T>): TableSelection<T>;
+    focus(value: T | null | undefined): TableSelection<T>;
+    moveUp(): TableSelection<T> | undefined;
+    moveDown(): TableSelection<T> | undefined;
+    moveStart(): TableSelection<T> | undefined;
+    moveEnd(): TableSelection<T> | undefined;
+    select(value?: T | null): TableSelection<T>;
+    deselect(value?: T | null): TableSelection<T>;
+    toggleSelection(value?: T | null): TableSelection<T>;
+    selectAll(): TableSelection<T>;
+    resetFocus(): TableSelection<T>;
+    resetSelection(): TableSelection<T>;
+    reset(): TableSelection<T>;
     isFocused(value: T | null): boolean;
     isSelected(value: T | null): boolean;
     getFocused(): T | null;

package/components/{legacy-table/selection.js → global/table-selection.js}

@@ -1,7 +1,7 @@
 /**
  * @deprecated SelectionItem is deprecated. Use your own item type and provide a `getKey` function instead if there is no `id` identifier in your item type.
  */
-export default class Selection {
+export default class TableSelection {
     _rawData;
     _getChildren;
     _data;
@@ -15,7 +15,7 @@ export default class Selection {
             return item.id;
         }
         // If there's no id provided on item and no getKey supplied, fail fast with a clear message
-        throw new Error('Selection: getKey is required when items have no "id" property');
+        throw new Error('TableSelection: getKey is required when items have no "id" property');
     }, getChildren = () => [], isItemSelectable = () => true, } = {}) {
         this._rawData = data;
         this._getChildren = getChildren;

package/components/global/theme.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactElement, type FunctionComponent } from 'react';
+import { type HTMLAttributes, type Ref, type ReactElement, type FunctionComponent } from 'react';
 declare enum Theme {
     AUTO = "auto",
     LIGHT = "light",
@@ -18,11 +18,12 @@ export interface WithThemeClassesProps {
 export declare function WithThemeClasses({ theme, children }: WithThemeClassesProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function applyTheme(theme: Theme.DARK | Theme.LIGHT, container: HTMLElement): void;
 type WrapperType = FunctionComponent<HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-export interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
+export interface ThemeProviderProps extends HTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLElement>;
     theme?: Theme;
     passToPopups?: boolean;
     WrapperComponent?: WrapperType;
     target?: HTMLElement;
 }
-export declare const ThemeProvider: import("react").ForwardRefExoticComponent<ThemeProviderProps & import("react").RefAttributes<HTMLElement>>;
+export declare function ThemeProvider({ ref, ...props }: ThemeProviderProps): import("react").JSX.Element;
 export default Theme;

package/components/global/theme.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, forwardRef, createContext, } from 'react';
+import { useState, useEffect, createContext, } from 'react';
 import classNames from 'classnames';
 import defaultStyles from './variables.css';
 import styles from './variables_dark.css';
@@ -47,9 +47,9 @@ export function applyTheme(theme, container) {
         container.classList.add(defaultStyles.light);
     }
 }
-const DefaultWrapper = forwardRef(function Wrapper(props, ref) {
-    return <div {...props} ref={ref}/>;
-});
+function DefaultWrapper(props) {
+    return <div {...props}/>;
+}
 function ThemeProviderInner({ theme = Theme.AUTO, className, passToPopups, children, WrapperComponent = DefaultWrapper, target, wrapperRef, ...restProps }) {
     const systemTheme = useTheme();
     const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
@@ -60,13 +60,13 @@ function ThemeProviderInner({ theme = Theme.AUTO, className, passToPopups, child
         }
     }, [resolvedTheme, target]);
     const themeClasses = useThemeClasses(theme);
-    return (<ThemeContext.Provider value={themeValue}>
+    return (<ThemeContext value={themeValue}>
       <WrapperComponent ref={wrapperRef} className={target ? undefined : classNames(className, themeClasses)} {...restProps}>
         {children}
       </WrapperComponent>
-    </ThemeContext.Provider>);
+    </ThemeContext>);
 }
-export const ThemeProvider = forwardRef(function ThemeProvider(props, ref) {
+export function ThemeProvider({ ref, ...props }) {
     return <ThemeProviderInner {...props} wrapperRef={ref}/>;
-});
+}
 export default Theme;

package/components/i18n/i18n-context.js

@@ -9,5 +9,5 @@ export const I18nContextHolder = ({ children, messages }) => {
     useEffect(() => {
         setTranslations(messages);
     }, [messages]);
-    return <I18nContext.Provider value={{ messages, translate }}>{children}</I18nContext.Provider>;
+    return <I18nContext value={{ messages, translate }}>{children}</I18nContext>;
 };

package/components/input/input.d.ts

@@ -69,7 +69,7 @@ export declare class Input extends PureComponent<InputProps> {
     stretch(el: HTMLElement | null | undefined): void;
     adapt(): void;
     inputRef: (el: HTMLInputElement | HTMLTextAreaElement | null) => void;
-    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement | HTMLTextAreaElement> | undefined)[]) => (value: T | null) => void>;
+    composedInputRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement | HTMLTextAreaElement> | undefined)[]) => (value: T | null) => () => void>;
     clear: (e: React.MouseEvent<HTMLButtonElement>) => void;
     handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;

package/components/island/adaptive-island-hoc.js

@@ -17,11 +17,11 @@ export default function adaptiveIslandHOC(ComposedComponent) {
             }
         };
         render() {
-            return (<PhaseContext.Provider value={this.state.phase}>
-          <ScrollHandlerContext.Provider value={this.onContentScroll}>
+            return (<PhaseContext value={this.state.phase}>
+          <ScrollHandlerContext value={this.onContentScroll}>
             <ComposedComponent {...this.props}/>
-          </ScrollHandlerContext.Provider>
-        </PhaseContext.Provider>);
+          </ScrollHandlerContext>
+        </PhaseContext>);
         }
     };
 }

package/components/island/content.d.ts

@@ -1,11 +1,13 @@
-import { Component, type HTMLAttributes } from 'react';
+import { Component, type Ref, type HTMLAttributes } from 'react';
 import createResizeDetector from 'element-resize-detector';
 export interface IslandContentProps extends Omit<HTMLAttributes<HTMLElement>, 'onScroll'> {
+    ref?: Ref<Content>;
     fade?: boolean | null | undefined;
     onScrollToBottom?: (() => void) | null | undefined;
     scrollableWrapperClassName?: string | null | undefined;
 }
 export interface IslandContentInnerProps extends IslandContentProps {
+    ref?: Ref<Content>;
     onScroll: (node: HTMLElement) => void;
     bottomBorder: boolean;
 }
@@ -29,5 +31,8 @@ declare class Content extends Component<IslandContentInnerProps> {
     setScrollableNodeAndCalculatePosition: (node: HTMLElement | null) => void;
     render(): import("react").JSX.Element;
 }
-declare const ContentWrapper: import("react").ForwardRefExoticComponent<IslandContentProps & import("react").RefAttributes<Content>>;
+declare const ContentWrapper: {
+    ({ ...props }: IslandContentProps): import("react").JSX.Element;
+    displayName: string;
+};
 export default ContentWrapper;

package/components/island/content.js

@@ -1,4 +1,4 @@
-import { forwardRef, Component } from 'react';
+import { Component } from 'react';
 import classNames from 'classnames';
 import createResizeDetector from 'element-resize-detector';
 import scheduleRAF from '../global/schedule-raf';
@@ -57,7 +57,7 @@ class Content extends Component {
         this.calculateScrollPosition();
     };
     render() {
-        const { children, className, bottomBorder, scrollableWrapperClassName, onScroll, onScrollToBottom, fade, tabIndex, ...restProps } = this.props;
+        const { ref, children, className, bottomBorder, scrollableWrapperClassName, onScroll, onScrollToBottom, fade, tabIndex, ...restProps } = this.props;
         const { scrolledToTop, scrolledToBottom } = this.state;
         const classes = classNames(styles.content, className, {
             [styles.contentWithTopFade]: fade && !scrolledToTop,
@@ -75,11 +75,11 @@ class Content extends Component {
       </div>);
     }
 }
-const ContentWrapper = forwardRef((props, ref) => (<ScrollHandlerContext.Consumer>
+const ContentWrapper = ({ ...props }) => (<ScrollHandlerContext.Consumer>
     {onScroll => {
         const addProps = onScroll ? { onScroll, bottomBorder: true } : {};
-        return <Content {...props} {...addProps} ref={ref}/>;
+        return <Content {...props} {...addProps}/>;
     }}
-  </ScrollHandlerContext.Consumer>));
+  </ScrollHandlerContext.Consumer>);
 ContentWrapper.displayName = 'ContentWrapper';
 export default ContentWrapper;

package/components/legacy-table/cell.js

@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
-import style from './table.css';
+import style from './legacy-table.css';
 export default class Cell extends PureComponent {
     render() {
         const classes = classNames(style.cell, this.props.className);

package/components/legacy-table/header-cell.js

@@ -4,7 +4,7 @@ import sortableIcon from '@jetbrains/icons/unsorted-12px';
 import sortedIcon from '@jetbrains/icons/chevron-12px-down';
 import Icon from '../icon/icon';
 import dataTests from '../global/data-tests';
-import style from './table.css';
+import style from './legacy-table.css';
 export default class HeaderCell extends PureComponent {
     static defaultProps = {
         onSort: () => { },

package/components/legacy-table/header.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import Checkbox from '../checkbox/checkbox';
 import getUID from '../global/get-uid';
 import HeaderCell from './header-cell';
-import style from './table.css';
+import style from './legacy-table.css';
 export default class Header extends PureComponent {
     static defaultProps = {
         selectable: true,

package/components/legacy-table/multitable.d.ts

@@ -1,6 +1,6 @@
 import { PureComponent, type ReactElement } from 'react';
 import { type TableAttrs } from './table';
-import { type SelectionItem } from './selection';
+import { type SelectionItem } from '../global/table-selection';
 type TableComponent = ReactElement<TableAttrs<SelectionItem>>;
 export interface MultiTableProps {
     children: TableComponent[];

package/components/legacy-table/row.d.ts

@@ -55,7 +55,7 @@ export default class Row<T extends object> extends PureComponent<RowProps<T>> {
     onDoubleClick: () => void;
     row?: HTMLElement | null;
     rowRef: (el: HTMLElement | null) => void;
-    composedRowRef: import("memoize-one").MemoizedFn<(...refs: (React.Ref<HTMLElement> | undefined)[]) => (value: T_1 | null) => void>;
+    composedRowRef: import("memoize-one").MemoizedFn<(...refs: (React.Ref<HTMLElement> | undefined)[]) => (value: T_1 | null) => () => void>;
     render(): React.JSX.Element;
 }
 export type RowAttrs<T extends object> = React.JSX.LibraryManagedAttributes<typeof Row, RowProps<T>>;

package/components/legacy-table/row.js

@@ -11,7 +11,7 @@ import dataTests from '../global/data-tests';
 import getUID from '../global/get-uid';
 import { createComposedRef } from '../global/compose-refs';
 import Cell from './cell';
-import style from './table.css';
+import style from './legacy-table.css';
 const DragHandle = ({ alwaysShowDragHandle, dragHandleTitle = 'Drag to reorder' }) => {
     const classes = classNames(style.dragHandle, {
         [style.visibleDragHandle]: alwaysShowDragHandle,

package/components/legacy-table/selection-adapter.d.ts

@@ -1,6 +1,6 @@
-import type Selection from './selection';
-import type { SelectionItem } from './selection';
-export default function selectionAdapter(getSelection: () => Selection<SelectionItem>): {
+import type TableSelection from '../global/table-selection';
+import type { SelectionItem } from '../global/table-selection';
+export default function selectionAdapter(getSelection: () => TableSelection<SelectionItem>): {
     readonly size: number;
     readonly items: SelectionItem[];
 };

package/components/legacy-table/selection-shortcuts-hoc.d.ts

@@ -1,16 +1,16 @@
 import { type ComponentClass } from 'react';
 import { type ShortcutsMap } from '../shortcuts/core';
-import type Selection from './selection';
+import type TableSelection from '../global/table-selection';
 export interface SelectionShortcutsOuterProps<T extends object> {
-    selection: Selection<T>;
+    selection: TableSelection<T>;
     selectable?: boolean | undefined;
-    onSelect?: ((selection: Selection<T>) => void) | undefined;
+    onSelect?: ((selection: TableSelection<T>) => void) | undefined;
     shortcuts?: ShortcutsMap | undefined;
 }
 export interface SelectionShortcutsAddProps<T extends object> {
-    selection: Selection<T>;
+    selection: TableSelection<T>;
     selectable: boolean;
-    onSelect: (selection: Selection<T>) => void;
+    onSelect: (selection: TableSelection<T>) => void;
     shortcutsMap: ShortcutsMap;
 }
 export type SelectionShortcutsProps<T extends object, P> = Omit<P, keyof SelectionShortcutsAddProps<T>> & SelectionShortcutsOuterProps<T>;

package/components/legacy-table/simple-table.d.ts

@@ -1,6 +1,6 @@
 import { PureComponent } from 'react';
 import { type TableAttrs } from './table';
-import Selection, { type SelectionItem } from './selection';
+import TableSelection, { type SelectionItem } from '../global/table-selection';
 export interface SimpleTableProps<T extends SelectionItem> extends Omit<TableAttrs<T>, 'selection' | 'onSelect' | 'selectable'> {
 }
 declare class SimpleTable<T extends SelectionItem> extends PureComponent<SimpleTableProps<T>> {
@@ -9,7 +9,7 @@ declare class SimpleTable<T extends SelectionItem> extends PureComponent<SimpleT
         wideFirstColumn: boolean;
     };
     state: {
-        selection: Selection<T>;
+        selection: TableSelection<T>;
     };
     classes: string;
     render(): import("react").JSX.Element;

package/components/legacy-table/simple-table.js

@@ -1,15 +1,15 @@
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import Table from './table';
-import Selection from './selection';
-import style from './table.css';
+import TableSelection from '../global/table-selection';
+import style from './legacy-table.css';
 class SimpleTable extends PureComponent {
     static defaultProps = {
         selectable: false,
         wideFirstColumn: false,
     };
     state = {
-        selection: new Selection({
+        selection: new TableSelection({
             data: this.props.data,
         }),
     };

package/components/legacy-table/smart-table.d.ts

@@ -1,19 +1,19 @@
 import { PureComponent } from 'react';
 import { type TableAttrs } from './table';
-import Selection, { type SelectionItem } from './selection';
+import TableSelection, { type SelectionItem } from '../global/table-selection';
 export interface SmartTableProps<T extends SelectionItem> extends Omit<TableAttrs<T>, 'selection' | 'onSelect'> {
-    onSelectionChange: (selection: Selection<T>) => void;
-    selection?: Selection<T>;
+    onSelectionChange: (selection: TableSelection<T>) => void;
+    selection?: TableSelection<T>;
 }
 declare class SmartTable<T extends SelectionItem> extends PureComponent<SmartTableProps<T>> {
     static defaultProps: {
         onSelectionChange: () => void;
     };
     state: {
-        selection: Selection<T>;
+        selection: TableSelection<T>;
     };
     UNSAFE_componentWillReceiveProps(nextProps: SmartTableProps<T>): void;
-    onSelect: (selection: Selection<T>) => void;
+    onSelect: (selection: TableSelection<T>) => void;
     render(): import("react").JSX.Element;
 }
 export default SmartTable;

package/components/legacy-table/smart-table.js

@@ -1,12 +1,12 @@
 import { PureComponent } from 'react';
 import Table from './table';
-import Selection from './selection';
+import TableSelection from '../global/table-selection';
 class SmartTable extends PureComponent {
     static defaultProps = {
         onSelectionChange: () => { },
     };
     state = {
-        selection: new Selection({
+        selection: new TableSelection({
             data: this.props.data,
             isItemSelectable: this.props.isItemSelectable,
         }),
@@ -18,7 +18,7 @@ class SmartTable extends PureComponent {
         }
         else if (this.props.data !== data || this.props.isItemSelectable !== isItemSelectable) {
             this.setState({
-                selection: new Selection({ data, isItemSelectable }),
+                selection: new TableSelection({ data, isItemSelectable }),
             });
         }
     }

package/components/legacy-table/table.js

@@ -13,7 +13,7 @@ import Header from './header';
 import selectionShortcutsHOC from './selection-shortcuts-hoc';
 import disableHoverHOC from './disable-hover-hoc';
 import Row from './row-with-focus-sensor';
-import style from './table.css';
+import style from './legacy-table.css';
 /**
  * Interactive table with selection and keyboard navigation support.
  */

package/components/login-dialog/service.js

@@ -7,9 +7,9 @@ const reactRoot = createRoot(containerElement);
  * Renders LoginDialog into virtual node to skip maintaining container
  */
 function renderLoginDialog(props) {
-    reactRoot.render(<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+    reactRoot.render(<ControlsHeightContext value={getGlobalControlsHeight()}>
       <LoginDialog {...props}/>
-    </ControlsHeightContext.Provider>);
+    </ControlsHeightContext>);
 }
 function noop() { }
 export default function showAuthDialog(props = { onCancel: noop }) {

package/components/popup/popup.d.ts

@@ -45,6 +45,8 @@ export interface BasePopupProps {
     onMouseUp?: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
     onMouseOver?: ((e: React.SyntheticEvent<HTMLElement>) => void) | undefined;
     onMouseOut?: ((e: React.SyntheticEvent<HTMLElement>) => void) | undefined;
+    onMouseEnter?: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
+    onMouseLeave?: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
     onContextMenu?: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
     onDirectionChange?: ((direction: Directions) => void) | null | undefined;
     onShow?: (() => void) | null | undefined;

package/components/popup/popup.js

@@ -282,7 +282,7 @@ export default class Popup extends PureComponent {
         esc: this._onEscPress,
     };
     render() {
-        const { className, style, hidden, attached, keepMounted, client, onMouseDown, onMouseUp, onMouseOver, onMouseOut, onContextMenu, 'data-test': dataTest, largeBorderRadius, } = this.props;
+        const { className, style, hidden, attached, keepMounted, client, onMouseDown, onMouseUp, onMouseOver, onMouseOut, onMouseEnter, onMouseLeave, onContextMenu, 'data-test': dataTest, largeBorderRadius, } = this.props;
         const showing = this.state.display === Display.SHOWING;
         const direction = (this.state.direction || '').toLowerCase().replace(/[_]/g, '-');
         return (<ThemeContext.Consumer>
@@ -305,7 +305,7 @@ export default class Popup extends PureComponent {
 
                       {client !== false &&
                                 (keepMounted || !hidden) &&
-                                createPortal(<PopupTarget id={this.uid} ref={this.containerRef} onMouseOver={onMouseOver} onFocus={onMouseOver} onMouseOut={onMouseOut} onBlur={onMouseOut} onContextMenu={onContextMenu}>
+                                createPortal(<PopupTarget id={this.uid} ref={this.containerRef} onMouseOver={onMouseOver} onFocus={onMouseOver} onMouseOut={onMouseOut} onBlur={onMouseOut} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onContextMenu={onContextMenu}>
                             <div data-test={dataTests('ring-popup', dataTest)} data-test-shown={!hidden && !showing} data-test-direction={direction} ref={this.popupRef} className={classes} style={style} onMouseDown={onMouseDown} onMouseUp={onMouseUp} 
                                 // mouse handlers are used to track clicking on inner elements
                                 role='presentation'>

package/components/popup/popup.target.d.ts

@@ -1,13 +1,14 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import { type HTMLAttributes, type Ref, type ReactNode } from 'react';
 interface ComplexConfig {
     target: string | Element | undefined;
     cssPositioning?: boolean;
 }
 export declare const PopupTargetContext: import("react").Context<string | Element | ComplexConfig | undefined>;
 export interface PopupTargetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    ref?: Ref<HTMLDivElement>;
     id: string;
     children: ReactNode | ((target: ReactNode) => ReactNode);
 }
 export declare function normalizePopupTarget(value: string | Element | undefined | ComplexConfig): string | Element | undefined;
-export declare const PopupTarget: import("react").ForwardRefExoticComponent<PopupTargetProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function PopupTarget({ ref, id, children, ...restProps }: PopupTargetProps): import("react").JSX.Element;
 export {};

package/components/popup/popup.target.js

@@ -1,13 +1,11 @@
-import { createContext, forwardRef } from 'react';
+import { createContext } from 'react';
 export const PopupTargetContext = createContext(undefined);
 export function normalizePopupTarget(value) {
     return typeof value === 'string' || value instanceof Element ? value : value?.target;
 }
-export const PopupTarget = forwardRef(function PopupTarget({ id, children, ...restProps }, ref) {
+export function PopupTarget({ ref, id, children, ...restProps }) {
     const target = (<div {...restProps} data-portaltarget={id} ref={ref}>
       {typeof children !== 'function' && children}
     </div>);
-    return (<PopupTargetContext.Provider value={id}>
-      {typeof children === 'function' ? children(target) : target}
-    </PopupTargetContext.Provider>);
-});
+    return (<PopupTargetContext value={id}>{typeof children === 'function' ? children(target) : target}</PopupTargetContext>);
+}

package/components/query-assist/query-assist.d.ts

@@ -285,5 +285,7 @@ export default class QueryAssist extends Component<QueryAssistProps> {
     render(): React.JSX.Element;
 }
 export type QueryAssistAttrs = React.JSX.LibraryManagedAttributes<typeof QueryAssist, QueryAssistProps>;
-export declare const RerenderableQueryAssist: React.ForwardRefExoticComponent<QueryAssistProps & React.RefAttributes<QueryAssist>>;
+export declare const RerenderableQueryAssist: ({ ref, ...props }: QueryAssistProps & {
+    ref?: React.Ref<QueryAssist> | undefined;
+}) => React.JSX.Element;
 export {};

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

@@ -733,7 +733,7 @@ export default class QueryAssist extends Component {
             [styles.hugePlaceholder]: huge,
             [styles.withoutGlass]: !glass || (!renderLoader && huge),
         });
-        return (<ControlsHeightContext.Provider value={ControlsHeight.M}>
+        return (<ControlsHeightContext value={ControlsHeight.M}>
         <I18nContext.Consumer>
           {({ translate }) => (<div data-test={dataTests('ring-query-assist', dataTest)} className={containerClasses} role='presentation' ref={this.nodeRef}>
               {this.state.shortcuts && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>}
@@ -768,7 +768,7 @@ export default class QueryAssist extends Component {
                 </div>)}
             </div>)}
         </I18nContext.Consumer>
-      </ControlsHeightContext.Provider>);
+      </ControlsHeightContext>);
     }
 }
 export const RerenderableQueryAssist = rerenderHOC(QueryAssist);

package/components/radio/radio-item.d.ts

@@ -1,4 +1,4 @@
-import { Component, type InputHTMLAttributes, type ReactNode } from 'react';
+import { Component, type Ref, type InputHTMLAttributes, type ReactNode } from 'react';
 export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
     value?: string | undefined;
     onChange?: ((value: string) => void) | null | undefined;
@@ -17,7 +17,7 @@ export declare class RadioItemInner extends Component<RadioItemInnerProps> {
     render(): import("react").JSX.Element;
 }
 export interface RadioItemProps extends RadioItemInnerProps {
+    ref?: Ref<RadioItemInner>;
     value: string;
 }
-declare const RadioItem: import("react").ForwardRefExoticComponent<RadioItemProps & import("react").RefAttributes<RadioItemInner>>;
-export default RadioItem;
+export default function RadioItem({ ref, ...props }: RadioItemProps): import("react").JSX.Element;

package/components/radio/radio-item.js

@@ -1,4 +1,4 @@
-import { Component, createContext, forwardRef } from 'react';
+import { Component, createContext } from 'react';
 import classNames from 'classnames';
 import getUID from '../global/get-uid';
 import ControlHelp from '../control-help/control-help';
@@ -28,9 +28,8 @@ export class RadioItemInner extends Component {
       </label>);
     }
 }
-const RadioItem = forwardRef(function RadioItem(props, ref) {
+export default function RadioItem({ ref, ...props }) {
     return (<RadioContext.Consumer>
       {({ value, onChange, ...restContext }) => (<RadioItemInner ref={ref} {...restContext} checked={value !== undefined ? value === props.value : undefined} onChange={onChange ? () => onChange(props.value) : undefined} {...props}/>)}
     </RadioContext.Consumer>);
-});
-export default RadioItem;
+}