@jetbrains/ring-ui 7.0.124 → 8.0.0-beta.10

package/components/table/table.js

@@ -1,191 +1,327 @@
-/**
- * @name Table
- */
-import { Component, PureComponent } from 'react';
-import * as React from 'react';
+import React, { Fragment, useRef } from 'react';
 import classNames from 'classnames';
-import { arrayMove, List } from 'react-movable';
-import focusSensorHOC from '../global/focus-sensor-hoc';
-import getUID from '../global/get-uid';
-import Shortcuts from '../shortcuts/shortcuts';
-import Loader from '../loader/loader';
-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 { SpacerRow, useVirtualItems, VirtualizationContext } from './internal/virtualization';
+import { DefaultItemRenderer } from './default-item-renderer';
+import { defaultRowHeight, TablePropsContext } from './table-const';
+import { focusWithTemporaryTabIndex } from '../global/focus-with-temporary-tabindex';
+import { ReorderAnimationContext, useReorderAnimationContextValue } from './internal/reorder-animation-context';
+import { useComposedRef } from '../global/compose-refs';
+import { TableHeader } from './internal/table-header';
+import { keyboardFocusableAttrName } from './table-primitives';
+import { isWithinNavigableElement } from '../global/is-within-navigable-element';
+import { ReorderLayoutContext, useReorderLayoutContextValue } from './internal/reorder-layout-context';
+import styles from './table.css';
 /**
- * Interactive table with selection and keyboard navigation support.
+ * Table component replacing the tables in the `legacy-table` folder.
+ *
+ * This documentation provides an overview of the most common usage patterns.
+ * See individual props and exported components for detailed behavior.
+ *
+ * ## Minimal usage
+ *
+ * You need the following props:
+ * - `data`
+ * - `getKey`
+ * - `columns`
+ *   - `key`
+ *   - `name` (optional but needed in most cases)
+ *   - `renderCell` (optional but needed in most cases)
+ *
+ * ## Item rendering
+ *
+ * If `renderItem` is not specified, each item is rendered using
+ * `DefaultItemRenderer` (from `table/default-item-renderer`)
+ * as if the following code were used:
+ *
+ * ```tsx
+ * <Table
+ *   renderItem={(_item, index, _items) => (
+ *     <DefaultItemRenderer index={index} />
+ *   )}
+ * />
+ * ```
+ *
+ * `DefaultItemRenderer` renders a table row using the column definitions
+ * (`Column.renderCell`) and provides built-in support for features such as
+ * selection, keyboard navigation, and virtualization. It also accepts all
+ * standard `tr` attributes, including `ref`.
+ *
+ * Use `renderItem` to configure `DefaultItemRenderer` for each item:
+ *
+ * ```tsx
+ * <Table
+ *   renderItem={(item, index, items) => (
+ *     <DefaultItemRenderer
+ *       index={index}
+ *       keyboardFocusable
+ *       className='my-item'
+ *       onClick={e => handleClick(e, item, items)}
+ *     />
+ *   )}
+ * />
+ * ```
+ *
+ * If you need complete control over rendering, `renderItem` can instead
+ * return your own table rows. See "Custom item rendering" below.
+ *
+ * ## Selection
+ *
+ * Selection is typically implemented using the following props
+ * of the `DefaultItemRenderer`:
+ *
+ * - `clickable`
+ * - `selected`
+ * - `onClick` or `onPointerUp`, etc.
+ *
+ * The following utilities (from `global`) may come in handy:
+ *
+ * - `TableSelection` class to manage selection state
+ *   - An alternative approach is to keep a `selected` field on each item
+ * - `isWithinInteractiveElement()` to check if a click was made on a control
+ *   or on "empty space"
+ *
+ * ```tsx
+ * <Table
+ *   renderItem={(item, index) => (
+ *     <DefaultItemRenderer
+ *       index={index}
+ *       clickable
+ *       selected={selection.isSelected(item)}
+ *       onClick={e => {
+ *         if (!isWithinInteractiveElement(e)) {
+ *           setSelection(selection.toggleSelection(item));
+ *         }
+ *       }}
+ *     />
+ *   )}
+ * />
+ * ```
+ *
+ * Note that for accessibility reasons, you should have a cell with a checkbox
+ * to display and toggle item selection.
+ *
+ * ## Row focus
+ *
+ * The table implements the ["roving tabindex"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets#technique_1_roving_tabindex)
+ * technique to focus rows with the up/down arrow keys.
+ * Rows can also be focused on click or other pointer events.
+ * To support it, use the following props of the `DefaultItemRenderer`:
+ *
+ * - `keyboardFocusable`
+ * - `clickable`, if you want to react to hover
+ * - `onClick`, if you want to focus on click
+ *
+ * Useful utils:
+ * - `focusWithTemporaryTabIndex()` from `global` to focus a row temporarily
+ *   patching its `tabindex`.
+ *
+ * ```tsx
+ * <Table
+ *   renderItem={(item, index) => (
+ *     <DefaultItemRenderer
+ *       index={index}
+ *       clickable
+ *       keyboardFocusable
+ *       onClick={e => {
+ *         if (!isWithinInteractiveElement(e)) {
+ *           focusWithTemporaryTabIndex(e.currentTarget);
+ *         }
+ *       }}
+ *     />
+ *   )}
+ * />
+ * ```
+ *
+ * Note that the table does not implement standard accessibility patterns such
+ * as `grid` or `treegrid`, so row focus is not announced by screen readers.
+ * Make sure all essential actions remain available without row focus, for
+ * example via standard Tab navigation.
+ *
+ * ## Sorting
+ *
+ * You need the following to support sorting:
+ *
+ * - Set `Column.sortOrder` to `'none'`, `'ascending'` or `'descending'`
+ *   to render the sort button, `aria-sort`, and indicate the current
+ *   sort order.
+ * - Handle `TableProps.onSort` callback in the client code.
+ *
+ * ## Deleting columns
+ *
+ * You need the following to support deleting columns:
+ *
+ * - Set `Column.deletable` to `true`. This will render a delete button in the
+ *   column header.
+ * - Make sure the `column` has a proper `name` or `key` prop, which will be
+ *   automatically included in the aria-label of the column delete button.
+ * - Handle `TableProps.onColumnDelete` callback in the client code. It is
+ *   expected to update `columns` by removing the corresponding column.
+ *
+ * ## Moving columns
+ *
+ * - Set `Column.canReorder` to `true` or to predicate specifying possible
+ *   insertion targets.
+ *   This will render a reorder button in the column header.
+ * - Make sure the `column` has a proper `name` or `key` prop, which will be
+ *   automatically included in the aria-label of the column reorder button.
+ * - Handle `TableProps.onColumnReorder` callback in the client code. It is
+ *   expected to update `columns` by moving the corresponding column to the
+ *   new position.
+ *
+ * ## Item reorder
+ *
+ * To allow the user to reorder rows by dragging:
+ *
+ * - Place `ItemReorderHandle` (from `table/table-primitives`) anywhere inside
+ *   a cell. It renders a drag icon button the user can grab to reorder the row.
+ * - Handle `TableProps.onItemReorder`. It is expected to update `data` by
+ *   moving the item to the new position.
+ * - Optionally, set `TableProps.canReorderItem` to restrict which positions
+ *   an item may be dropped into.
+ *
+ * By default, dragging shows a drag frame (a border around the dragged row)
+ * and an insertion indicator (a line between rows showing where the item will
+ * land). To implement fully custom drag visuals, set `noDragFrame` and
+ * `noHandleTranslate` on `ItemReorderHandle` and use its `onUserDrag` callback
+ * to track the drag lifecycle.
+ *
+ * ## Row virtualization
+ *
+ * To render only rows near the viewport while replacing off-screen rows with
+ * spacers, use:
+ *
+ * - `virtualizeRows` prop set to `true`
+ * - `scrollerRef` — required when the scrollable container is not the whole
+ *    document
+ * - `estimateHeight` — recommended when rows are expected to be taller than
+ *   the default height (e.g. multiline or custom content)
+ * - Fine-tuning props: `lookaheadPx`, `retentionMarginPx`,
+ *   `minScrollAndResizeDeltaPx`
+ *
+ * ## Custom item rendering
+ *
+ * Use the `renderItem` prop to render an item in a completely custom way.
+ * The prop is expected to return one or more table rows for the item.
+ * Use `TableRow` and `TableCell` from `table/table-primitives` to apply
+ * the default row and cell styles.
+ *
+ * ### Focus
+ *
+ * Just like `DefaultItemRenderer`, `TableRow` accepts the
+ * `keyboardFocusable` prop.
+ *
+ * Focusable rows rendered by either component form a single keyboard
+ * navigation sequence.
+ *
+ * ### Virtualization
+ *
+ * If `Table.virtualizeRows` is set to `true`, you need to handle visibility
+ * for your custom-rendered component yourself with the
+ * `useItemVirtualization()` hook (from `table/item-virtualization`). The hook
+ * allows observing the intersection of one or multiple elements rendered for
+ * the item, and, based on their intersection status, reporting the item as
+ * eligible for virtualization.
+ *
+ * If you use `DefaultItemRenderer` as part of your custom row renderer,
+ * set the `noItemVirtualization` prop to `true`, otherwise it will also try
+ * to control the virtualization, possibly reporting incorrect item height.
+ *
+ * ### Item reorder
+ *
+ * If `TableProps.onItemReorder` is set and your item spans multiple rows, call
+ * `useReorderItemLayout()` (from `table/reorder-item-layout`) to register the
+ * item's boundaries so the insertion indicator and insertion point calculation
+ * are correct. If `DefaultItemRenderer` is included inside your custom renderer,
+ * set its `noReorderLayout` prop to `true` to prevent double registration.
+ *
+ * ### Reorder animation
+ *
+ * After a column or item is reordered, the table briefly highlights the moved
+ * element. To apply the same animation in your custom-rendered rows, use
+ * `useReorderAnimation()` (from `table/reorder-animation`) to get information
+ * about the currently animated column or item.
  */
-export class Table extends PureComponent {
-    static defaultProps = {
-        isItemSelectable: () => true,
-        loading: false,
-        onSort: () => { },
-        onReorder: () => { },
-        getItemKey: (item) => {
-            // Default behavior stays backward compatible: use item's "id" if present
-            if ('id' in item) {
-                return item.id;
-            }
-            // If there's no id provided on item and no getKey supplied, fail fast with a clear message
-            throw new Error('Table: getItemKey is required when items have no "id" property');
-        },
-        sortKey: 'id',
-        sortOrder: true,
-        draggable: false,
-        alwaysShowDragHandle: false,
-        stickyHeader: true,
-        getItemLevel: () => 0,
-        getItemClassName: () => null,
-        getMetaColumnClassName: () => null,
-        getItemDataTest: () => null,
-        isItemCollapsible: () => false,
-        isParentCollapsible: () => false,
-        isItemCollapsed: () => false,
-        onItemCollapse: () => { },
-        onItemExpand: () => { },
-        onItemDoubleClick: () => { },
-        onItemClick: () => { },
-        remoteSelection: false,
-        isDisabledSelectionVisible: () => false,
-        getCheckboxTooltip: () => undefined,
-        RowComponent: Row,
-        wideFirstColumn: false,
-    };
-    state = {
-        shortcutsScope: getUID('ring-table-'),
-        userSelectNone: false,
-    };
-    componentDidMount() {
-        document.addEventListener('mouseup', this.onMouseUp);
-    }
-    componentDidUpdate({ data, selection, onSelect, selectable, remoteSelection }) {
-        if (data !== this.props.data && remoteSelection) {
-            onSelect(selection.cloneWith({ data: this.props.data }));
+export default function Table(props) {
+    const { data, columns, getKey, noHeader, stickyHeader, onSort, onColumnDelete, onColumnReorder, noColumnReorderAnimation, canReorderItem, onItemReorder, noItemReorderAnimation, renderItem, virtualizeRows = false, scrollerRef, estimateHeight = () => defaultRowHeight, 
+    // eslint-disable-next-line no-magic-numbers
+    lookaheadPx = 400, 
+    // eslint-disable-next-line no-magic-numbers
+    retentionMarginPx = 450, 
+    // eslint-disable-next-line no-magic-numbers
+    minScrollAndResizeDeltaPx = 50, columnEditing, onColumnEditingRequest, columnEditButton, theadClassName, theadTrClassName, tbodyClassName, ref: userRef, className, ...restProps } = props;
+    const localRef = useRef(null);
+    const reorderAnimationContextValue = useReorderAnimationContextValue({
+        noColumnReorderAnimation,
+        noItemReorderAnimation,
+        tableRef: localRef,
+        data,
+        columns,
+    });
+    function handleRowNavigation(e) {
+        if (e.defaultPrevented || isWithinNavigableElement(e.target))
+            return;
+        const arrowUp = e.key === 'ArrowUp';
+        const arrowDown = e.key === 'ArrowDown';
+        if (!arrowUp && !arrowDown)
+            return;
+        const currentRow = e.target.closest('tr');
+        if (currentRow?.parentElement?.parentElement !== localRef.current) {
+            return;
         }
-        if (!this.props.selectable && this.props.selectable !== selectable) {
-            onSelect(selection.resetSelection());
+        let candidate = currentRow;
+        while (candidate) {
+            candidate = (arrowUp ? candidate.previousElementSibling : candidate.nextElementSibling);
+            if (candidate?.hasAttribute(keyboardFocusableAttrName)) {
+                focusWithTemporaryTabIndex(candidate);
+                e.preventDefault();
+                return;
+            }
         }
     }
-    componentWillUnmount() {
-        document.removeEventListener('mouseup', this.onMouseUp);
-    }
-    onMouseDown = (e) => {
-        if (e.shiftKey) {
-            this.setState({ userSelectNone: true });
-        }
-    };
-    onMouseUp = () => {
-        if (this.state.userSelectNone) {
-            this.setState({ userSelectNone: false });
-        }
-    };
-    onRowFocus = (row) => {
-        const { selection, onSelect } = this.props;
-        onSelect(selection.focus(row));
-    };
-    onRowSelect = (row, selected) => {
-        const { selection, onSelect } = this.props;
-        if (selected) {
-            onSelect(selection.select(row));
-        }
-        else {
-            onSelect(selection.deselect(row));
-        }
-    };
-    onSortEnd = ({ oldIndex, newIndex }) => {
-        const data = arrayMove(this.props.data, oldIndex, newIndex);
-        this.props.onReorder({ data, oldIndex, newIndex });
-    };
-    onCheckboxChange = (e) => {
-        const { checked } = e.currentTarget;
-        const { selection, onSelect } = this.props;
-        if (checked) {
-            onSelect(selection.selectAll());
-        }
-        else {
-            onSelect(selection.reset());
-        }
-        this.restoreFocusWithoutScroll();
-    };
-    restoreFocusWithoutScroll = () => {
-        const { scrollX, scrollY } = window;
-        this.props.onFocusRestore();
-        window.scrollTo(scrollX, scrollY);
-    };
-    render() {
-        const { data, selection, columns, caption, getItemKey, selectable, focused, isItemSelectable, getItemLevel, getItemClassName, getMetaColumnClassName, getItemDataTest, draggable, alwaysShowDragHandle, dragHandleTitle, loading, onSort, sortKey, sortOrder, loaderClassName, stickyHeader, stickyHeaderOffset, isItemCollapsible, isParentCollapsible, isItemCollapsed, onItemCollapse, onItemExpand, isDisabledSelectionVisible, getCheckboxTooltip, onItemDoubleClick, onItemClick, renderEmpty, RowComponent, renderLoader, } = this.props;
-        // NOTE: Do not construct new object per render because it causes all rows rerendering
-        const columnsArray = typeof columns === 'function' ? columns(null) : columns;
-        const headerProps = {
-            caption,
-            selectable,
-            draggable,
-            columns: columnsArray,
-            onSort,
-            sortKey,
-            sortOrder,
-            sticky: stickyHeader,
-            topStickOffset: stickyHeaderOffset,
-            className: this.props.headerClassName,
-        };
-        const selectedSize = selection.getSelected().size;
-        const allSelectedSize = selection.selectAll().getSelected().size;
-        headerProps.checked = selectedSize > 0 && selectedSize === allSelectedSize;
-        headerProps.onCheckboxChange = this.onCheckboxChange;
-        headerProps.checkboxDisabled = this.props.data.length === 0;
-        const wrapperClasses = classNames(style.tableWrapper, this.props.wrapperClassName);
-        const classes = classNames(this.props.className, {
-            [style.table]: true,
-            [style.wideFirstColumn]: this.props.wideFirstColumn,
-            [style.userSelectNone]: this.state.userSelectNone,
-            [style.disabledHover]: this.props.disabledHover,
-        });
-        const renderList = ({ children, props }) => {
-            const empty = (<tr>
-          <td colSpan={columnsArray.length || 1} className={style.tableMessage}>
-            {renderEmpty ? renderEmpty() : null}
-          </td>
-        </tr>);
-            const tbody = Array.isArray(children) && children.length > 0 ? children : empty;
-            return (<table className={classes} data-test='ring-table'>
-          <Header {...headerProps}/>
-          <tbody {...props} data-test='ring-table-body'>
-            {tbody}
-          </tbody>
-        </table>);
-        };
-        const renderItem = ({ value, props = {}, isDragged }) => {
-            if (value === null || value === undefined) {
-                return null;
+    const { virtualItems, virtualizationContextValue } = useVirtualItems({
+        enabled: virtualizeRows,
+        data,
+        scrollerRef,
+        tableRef: localRef,
+        estimateHeight,
+        lookaheadPx,
+        retentionMarginPx,
+        minScrollAndResizeDeltaPx,
+    });
+    const itemReorderLayoutContextValue = useReorderLayoutContextValue();
+    return (<TablePropsContext value={props}>
+      <ReorderAnimationContext value={reorderAnimationContextValue}>
+        <table className={classNames(styles.table, className)} ref={useComposedRef(userRef, localRef)} {...restProps}>
+          <TableHeader />
+          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+          <tbody className={tbodyClassName} onKeyDown={handleRowNavigation}>
+            <VirtualizationContext value={virtualizationContextValue}>
+              <ReorderLayoutContext value={itemReorderLayoutContextValue}>
+                {(virtualizeRows ? virtualItems : data).map((item, index) => {
+            let dataItem;
+            let dataItemIndex;
+            if (virtualizeRows) {
+                const virtualItem = item;
+                if (virtualItem.type === 'spacer') {
+                    return <SpacerRow key={virtualItem.key} spacer={virtualItem} colSpan={columns.length}/>;
+                }
+                dataItemIndex = virtualItem.index;
+                if (dataItemIndex < 0 || dataItemIndex >= data.length)
+                    return null;
+                dataItem = data[dataItemIndex];
             }
-            const { ref, ...restProps } = props;
-            const row = (<RowComponent innerRef={ref} level={getItemLevel(value)} item={value} showFocus={selection.isFocused(value)} autofocus={selection.isFocused(value)} focused={focused && selection.isFocused(value)} selectable={selectable && isItemSelectable(value)} selected={selectable && selection.isSelected(value)} onFocus={this.onRowFocus} onSelect={this.onRowSelect} onDoubleClick={onItemDoubleClick} onClick={onItemClick} collapsible={isItemCollapsible(value)} parentCollapsible={isParentCollapsible(value)} collapsed={isItemCollapsed(value)} onCollapse={onItemCollapse} onExpand={onItemExpand} showDisabledSelection={isDisabledSelectionVisible(value)} checkboxTooltip={getCheckboxTooltip(value)} className={classNames(getItemClassName(value), { [style.draggingRow]: isDragged })} metaColumnClassName={getMetaColumnClassName(value)} draggable={draggable} alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle} columns={columns} data-test={getItemDataTest(value)} cellClassName={this.props.cellClassName} {...restProps} key={restProps.key ?? getItemKey(value)}/>);
-            return isDragged ? (<table style={{ ...props.style }} className={style.draggingTable}>
-          <tbody>{row}</tbody>
-        </table>) : (row);
-        };
-        return (<div className={wrapperClasses} data-test='ring-table-wrapper' ref={this.props.innerRef}>
-        {focused && <Shortcuts map={this.props.shortcutsMap} scope={this.state.shortcutsScope}/>}
-
-        {/* Handler detects that user holds Shift key */}
-        <div role='presentation' onMouseDown={this.onMouseDown}>
-          {draggable ? (<List values={data} renderList={renderList} renderItem={renderItem} onChange={this.onSortEnd}/>) : (renderList({ children: data.map((value, index) => renderItem({ value, index })) }))}
-        </div>
-
-        {loading && (<div className={style.loadingOverlay}>
-            {renderLoader ? renderLoader(loaderClassName) : <Loader className={loaderClassName}/>}
-          </div>)}
-      </div>);
-    }
-}
-const getContainer = () => disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(Table)));
-// eslint-disable-next-line react/no-multi-comp
-export default class TableContainer extends Component {
-    // https://stackoverflow.com/a/53882322/6304152
-    Table = getContainer();
-    render() {
-        return <this.Table {...this.props}/>;
-    }
+            else {
+                dataItem = item;
+                dataItemIndex = index;
+            }
+            return (<Fragment key={getKey(dataItem, dataItemIndex, data)}>
+                      {renderItem ? (renderItem(dataItem, dataItemIndex, data)) : (<DefaultItemRenderer index={dataItemIndex}/>)}
+                    </Fragment>);
+        })}
+              </ReorderLayoutContext>
+            </VirtualizationContext>
+          </tbody>
+        </table>
+      </ReorderAnimationContext>
+    </TablePropsContext>);
 }

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

@@ -110,6 +110,8 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
     selectRef: (el: Select | null) => void;
     render(): React.JSX.Element;
 }
-export declare const RerenderableTagsInput: React.ForwardRefExoticComponent<TagsInputProps & React.RefAttributes<TagsInput>>;
+export declare const RerenderableTagsInput: ({ ref, ...props }: TagsInputProps & {
+    ref?: React.Ref<TagsInput> | undefined;
+}) => React.JSX.Element;
 export type TagsInputAttrs = React.JSX.LibraryManagedAttributes<typeof TagsInput, TagsInputProps>;
 export {};

package/components/tooltip/tooltip.d.ts

@@ -8,7 +8,8 @@ interface Context {
     onNestedTooltipHide: () => void;
 }
 declare const TooltipContext: React.Context<Context | undefined>;
-export interface TooltipProps extends Omit<AllHTMLAttributes<HTMLSpanElement>, 'title'> {
+export interface TooltipProps extends Omit<AllHTMLAttributes<HTMLElement>, 'title'> {
+    TagName?: 'span' | 'div' | null | undefined;
     delay?: number | null | undefined;
     selfOverflowOnly?: boolean | null | undefined;
     popupProps?: Partial<PopupAttrs> | null | undefined;

package/components/tooltip/tooltip.js

@@ -129,19 +129,20 @@ export default class Tooltip extends Component {
         this.setState({ showNestedPopup: false });
     };
     render() {
-        const { children, 'data-test': dataTest, title, delay, theme, selfOverflowOnly, popupProps, long, hide, ...restProps } = this.props;
+        const { children, TagName, 'data-test': dataTest, title, delay, theme, selfOverflowOnly, popupProps, long, hide, ...restProps } = this.props;
         const ariaProps = typeof title === 'string' && Tooltip.isShow({ title, hide }) ? { 'aria-label': title, role: 'tooltip' } : {};
         const { onNestedTooltipShow, onNestedTooltipHide } = this;
+        const WrapperElement = TagName || 'span';
         const popup = (<Popup trapFocus={false} anchorElement={this.containerNode} hidden={!this.state.showPopup || this.state.showNestedPopup} onCloseAttempt={this.hidePopup} maxHeight={400} attached={false} onMouseOut={this.hideIfMovedOutsidePopup} top={4} dontCloseOnAnchorClick ref={this.popupRef} {...popupProps} className={classNames(styles.tooltip, { [styles.long]: long, [styles.inheritedTheme]: theme === 'inherit' }, popupProps?.className)}>
         {title}
       </Popup>);
-        return (<TooltipContext.Provider value={{ onNestedTooltipShow, onNestedTooltipHide }}>
-        <span {...ariaProps} {...restProps} ref={this.containerRef} data-test={dataTests('ring-tooltip', dataTest)} data-test-title={typeof title === 'string' ? title : undefined}>
+        return (<TooltipContext value={{ onNestedTooltipShow, onNestedTooltipHide }}>
+        <WrapperElement {...ariaProps} {...restProps} ref={this.containerRef} data-test={dataTests('ring-tooltip', dataTest)} data-test-title={typeof title === 'string' ? title : undefined}>
           {children}
           {theme === 'inherit' ? (popup) : (<ThemeProvider theme={theme} passToPopups WrapperComponent={props => <span {...props}/>}>
               {popup}
             </ThemeProvider>)}
-        </span>
-      </TooltipContext.Provider>);
+        </WrapperElement>
+      </TooltipContext>);
     }
 }

package/components/upload/upload.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ReactNode, type Ref } from 'react';
 export type UploadVariant = 'empty' | 'error' | 'success';
 interface Props {
     className?: string;
@@ -10,10 +10,11 @@ interface Props {
     accept?: HTMLInputElement['accept'];
     disabled?: boolean;
     variant?: UploadVariant;
+    ref?: Ref<UploadHandle>;
     children?: ReactNode;
 }
 export interface UploadHandle {
     openFilePicker: () => void;
 }
-export declare const Upload: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<UploadHandle>>;
-export default Upload;
+export default function UploadInner({ children, className, onFilesSelected, onFilesRejected, validate, variant, multiple, renderIcon, accept, disabled, ref, }: Props): import("react").JSX.Element;
+export {};

package/components/upload/upload.js

@@ -1,13 +1,13 @@
-import { forwardRef, useImperativeHandle, useRef, useState, } from 'react';
+import { useImperativeHandle, useRef, useState } from 'react';
 import classNames from 'classnames';
 import attachmentIcon from '@jetbrains/icons/attachment';
 import Icon from '../icon';
 import styles from './upload.css';
 const defaultRenderIcon = () => <Icon className={styles.attachmentIcon} glyph={attachmentIcon}/>;
-function UploadInner({ children, className, onFilesSelected, onFilesRejected, validate = () => true, variant = 'empty', multiple, renderIcon = defaultRenderIcon, accept, disabled, forwardedRef, }) {
+export default function UploadInner({ children, className, onFilesSelected, onFilesRejected, validate = () => true, variant = 'empty', multiple, renderIcon = defaultRenderIcon, accept, disabled, ref, }) {
     const fileInputRef = useRef(null);
     const [dragOver, setDragOver] = useState(false);
-    useImperativeHandle(forwardedRef, () => ({ openFilePicker: () => fileInputRef.current?.click() }), []);
+    useImperativeHandle(ref, () => ({ openFilePicker: () => fileInputRef.current?.click() }), []);
     const handleSelectedFiles = (files) => {
         if (!files.length) {
             return;
@@ -39,7 +39,3 @@ function UploadInner({ children, className, onFilesSelected, onFilesRejected, va
       {children}
     </div>);
 }
-export const Upload = forwardRef(function Upload(props, ref) {
-    return <UploadInner {...props} forwardedRef={ref}/>;
-});
-export default Upload;

package/components/user-agreement/service.js

@@ -188,9 +188,9 @@ export default class UserAgreementService {
                     preview,
                     ...restOptions,
                 };
-                this.reactRoot.render(<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+                this.reactRoot.render(<ControlsHeightContext value={getGlobalControlsHeight()}>
             <UserAgreement {...props}/>
-          </ControlsHeightContext.Provider>);
+          </ControlsHeightContext>);
                 if (onDialogShow) {
                     onDialogShow();
                 }

package/components/util-stories.d.ts

@@ -1 +1,27 @@
 export declare const hideAddonsPanelParam = "hideAddonsPanel";
+export declare function createRandom(seed: bigint): {
+    /**
+     * Fractional in [0, 1)
+     */
+    (): number;
+    /**
+     * Integer in [0, to)
+     */
+    (to: number): number;
+    /**
+     * Integer in [from, to)
+     */
+    (from: number, to: number): number;
+    /**
+     * Date in [from, to)
+     */
+    (from: Date, to: Date): Date;
+    /**
+     * Up to random n items (in random order) from the array
+     */
+    <T>(array: readonly T[], n: number): T[];
+    /**
+     * Random item from the array
+     */
+    <T>(array: readonly T[]): T;
+};