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

package/components/legacy-table/table.js

@@ -0,0 +1,191 @@
+/**
+ * @name Table
+ */
+import { Component, PureComponent } from 'react';
+import * as React 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 './legacy-table.css';
+/**
+ * Interactive table with selection and keyboard navigation support.
+ */
+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 }));
+        }
+        if (!this.props.selectable && this.props.selectable !== selectable) {
+            onSelect(selection.resetSelection());
+        }
+    }
+    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 { 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}/>;
+    }
+}

package/components/list/consts.d.ts

@@ -9,7 +9,6 @@ export declare enum Type {
     SEPARATOR = 0,
     LINK = 1,
     ITEM = 2,
-    HINT = 3,// doesn't work, TODO remove in 8.0
     CUSTOM = 4,
     TITLE = 5,
     MARGIN = 6

package/components/list/consts.js

@@ -6,7 +6,6 @@ export var Type;
     Type[Type["SEPARATOR"] = 0] = "SEPARATOR";
     Type[Type["LINK"] = 1] = "LINK";
     Type[Type["ITEM"] = 2] = "ITEM";
-    Type[Type["HINT"] = 3] = "HINT";
     Type[Type["CUSTOM"] = 4] = "CUSTOM";
     Type[Type["TITLE"] = 5] = "TITLE";
     Type[Type["MARGIN"] = 6] = "MARGIN";

package/components/list/list.d.ts

@@ -43,10 +43,6 @@ export interface ListProps<T = unknown> {
     maxHeight?: number | null | undefined;
     activeIndex?: number | null | undefined;
     useMouseUp?: boolean | null | undefined;
-    /**
-     * @deprecated No longer used. Visibility is detected automatically via IntersectionObserver. Will be removed in Ring UI 8.0.
-     */
-    visible?: boolean | null | undefined;
     disableMoveOverflow?: boolean | null | undefined;
     compact?: boolean | null | undefined;
     disableScrollToActive?: boolean | null | undefined;

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.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;
+}

package/components/radio/radio.d.ts

@@ -1,10 +1,10 @@
 import { Component } from 'react';
-import { type RadioProps } from './radio-item';
+import RadioItem, { type RadioProps } from './radio-item';
 /**
  * @name Radio
  */
 export default class Radio extends Component<RadioProps> {
-    static Item: import("react").ForwardRefExoticComponent<import("./radio-item").RadioItemProps & import("react").RefAttributes<import("./radio-item").RadioItemInner>>;
+    static Item: typeof RadioItem;
     uid: string;
     render(): import("react").JSX.Element;
 }

package/components/radio/radio.js

@@ -8,6 +8,6 @@ export default class Radio extends Component {
     static Item = RadioItem;
     uid = getUID('ring-radio-');
     render() {
-        return <RadioContext.Provider value={{ name: this.uid, ...this.props }}>{this.props.children}</RadioContext.Provider>;
+        return <RadioContext value={{ name: this.uid, ...this.props }}>{this.props.children}</RadioContext>;
     }
 }

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

@@ -4,7 +4,7 @@
 import { type ComponentType, type CSSProperties, PureComponent, type ReactNode, type Ref, type SyntheticEvent } from 'react';
 import * as React from 'react';
 import { type IconType } from '../icon/icon';
-import Popup from '../popup/popup';
+import Popup, { type PopupAttrs } from '../popup/popup';
 import { type Directions } from '../popup/position';
 import List, { type SelectHandlerParams } from '../list/list';
 import Caret from '../caret/caret';
@@ -60,6 +60,7 @@ export interface SelectPopupProps<T = unknown> {
     ringPopupTarget: string | null;
     onSelectAll: (isSelectAll: boolean) => void;
     onEmptyPopupEnter: (e: KeyboardEvent) => void;
+    popupProps?: Partial<PopupAttrs> | undefined;
     className?: string | null | undefined;
     compact?: boolean | null | undefined;
     dir?: 'ltr' | 'rtl' | undefined;
@@ -127,7 +128,7 @@ export default class SelectPopup<T = unknown> extends PureComponent<SelectPopupP
     list?: List<T> | null;
     listRef: (el: List<T> | null) => void;
     filterRef: (el: HTMLInputElement | null) => void;
-    composedFilterRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: T_1 | null) => void>;
+    composedFilterRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: T_1 | null) => () => void>;
     shortcutsScope: string;
     shortcutsMap: {
         tab: (event: Event) => void;

package/components/select/select-popup.js

@@ -323,8 +323,8 @@ export default class SelectPopup extends PureComponent {
         right: event => this.handleNavigation(event),
     };
     render() {
-        const { toolbar, topbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, onOutsideClick, directions, top, left, offset, style, dir, filter, } = this.props;
-        const classes = classNames(styles.popup, className);
+        const { toolbar, topbar, className, multiple, hidden, isInputMode, anchorElement, minWidth, onCloseAttempt, onOutsideClick, directions, top, left, offset, style, dir, filter, popupProps, } = this.props;
+        const classes = classNames(styles.popup, className, popupProps?.className);
         return (<PopupTargetContext.Consumer>
         {ringPopupTarget => {
                 const filterWithTags = this.getFilterWithTags();
@@ -332,7 +332,7 @@ export default class SelectPopup extends PureComponent {
                 const list = this.getList(this.props.ringPopupTarget || normalizePopupTarget(ringPopupTarget));
                 const bottomLine = this.getBottomLine();
                 const hasContent = filterWithTags || selectAll || list || bottomLine || toolbar || topbar;
-                return (<Popup trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick 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>
+                return (<Popup {...popupProps} trapFocus={false} ref={this.popupRef} hidden={hidden || !hasContent} attached={isInputMode} className={classes} dontCloseOnAnchorClick 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={{ ...popupProps?.style, ...style }} largeBorderRadius>
               <div dir={dir}>
                 {!hidden && filter && <Shortcuts map={this.shortcutsMap} scope={this.shortcutsScope}/>}
                 {topbar}

package/components/select/select.d.ts

@@ -1,5 +1,6 @@
 import { type ButtonHTMLAttributes, Component, type ComponentType, type CSSProperties, type HTMLAttributes, type ReactNode, type Ref, type RefCallback, type SyntheticEvent } from 'react';
 import * as React from 'react';
+import { type PopupAttrs } from '../popup/popup';
 import { type SelectHandlerParams } from '../list/list';
 import { Size } from '../input/input';
 import { type LabelType } from '../control-label/control-label';
@@ -99,6 +100,7 @@ export interface BaseSelectProps<T = unknown> {
     getInitial?: (() => string) | null | undefined;
     minWidth?: number | undefined;
     popupClassName?: string | null | undefined;
+    popupProps?: Partial<PopupAttrs> | undefined;
     popupStyle?: CSSProperties | undefined;
     top?: number | undefined;
     left?: number | undefined;
@@ -264,7 +266,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
     private _getAvatar;
     filter?: HTMLInputElement | null;
     filterRef: (el: HTMLInputElement | null) => void;
-    composedFilterRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: T_1 | null) => void>;
+    composedFilterRef: import("memoize-one").MemoizedFn<(...refs: (Ref<HTMLInputElement> | undefined)[]) => (value: T_1 | null) => () => void>;
     getShortcutsMap(): {
         enter: () => true | undefined;
         esc: (event: KeyboardEvent) => boolean | undefined;
@@ -282,5 +284,7 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
 export type SingleSelectAttrs<T = unknown> = React.JSX.LibraryManagedAttributes<typeof Select, SingleSelectProps<T>>;
 export type MultipleSelectAttrs<T = unknown> = React.JSX.LibraryManagedAttributes<typeof Select, MultipleSelectProps<T>>;
 export type SelectAttrs<T = unknown> = React.JSX.LibraryManagedAttributes<typeof Select, SelectProps<T>>;
-export declare const RerenderableSelect: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
+export declare const RerenderableSelect: ({ ref, ...props }: Omit<any, "ref"> & {
+    ref?: Ref<any> | undefined;
+}) => React.JSX.Element;
 export {};

package/components/select/select.js

@@ -47,9 +47,7 @@ const getStyle = memoize((iconsLength) => ({
 }));
 const isInputMode = (type) => type === Type.INPUT || type === Type.INPUT_WITHOUT_CONTROLS;
 function getLowerCaseLabel(item) {
-    if (List.isItemType(List.ListProps.Type.SEPARATOR, item) ||
-        List.isItemType(List.ListProps.Type.HINT, item) ||
-        typeof item.label !== 'string') {
+    if (List.isItemType(List.ListProps.Type.SEPARATOR, item) || typeof item.label !== 'string') {
         return null;
     }
     return item.label.toLowerCase();
@@ -456,7 +454,7 @@ export default class Select extends Component {
                 else if (!shownData.length) {
                     message = this.props.notFoundMessage ?? translate('noOptionsFound');
                 }
-                return (<SelectPopup data={_shownData} message={message} toolbar={showPopup && this.getToolbar()} topbar={this.getTopbar()} loading={this.props.loading} activeIndex={activeIndex} hidden={!showPopup} ref={this.popupRef} maxHeight={this.props.maxHeight} minWidth={this.props.minWidth} directions={this.props.directions} className={this.props.popupClassName} style={this.props.popupStyle} top={this.props.top} left={this.props.left} offset={this.props.offset} filter={this.isInputMode() ? false : this.props.filter} // disable popup filter in INPUT mode
+                return (<SelectPopup data={_shownData} message={message} toolbar={showPopup && this.getToolbar()} topbar={this.getTopbar()} loading={this.props.loading} activeIndex={activeIndex} hidden={!showPopup} ref={this.popupRef} maxHeight={this.props.maxHeight} minWidth={this.props.minWidth} directions={this.props.directions} popupProps={this.props.popupProps} className={this.props.popupClassName} style={this.props.popupStyle} top={this.props.top} left={this.props.left} offset={this.props.offset} filter={this.isInputMode() ? false : this.props.filter} // disable popup filter in INPUT mode
                  filterIcon={this.props.filterIcon} filterRef={this.props.filterRef} multiple={this.props.multiple} filterValue={this.state.filterValue} anchorElement={anchorElement} onCloseAttempt={this._onCloseAttempt} onOutsideClick={this.props.onOutsideClick} onSelect={this._listSelectHandler} onSelectAll={this._listSelectAllHandler} onFilter={this._filterChangeHandler} onClear={this.clearFilter} onLoadMore={this.props.onLoadMore} isInputMode={this.isInputMode()} selected={this.state.selected} tags={this.props.tags} compact={this.props.compact} renderOptimization={this.props.renderOptimization} ringPopupTarget={this.props.ringPopupTarget} disableMoveOverflow={this.props.disableMoveOverflow} disableScrollToActive={this.props.disableScrollToActive} dir={this.props.dir} onEmptyPopupEnter={this.onEmptyPopupEnter} listId={this.listId} preventListOverscroll={this.props.preventListOverscroll}/>);
             }}
       </I18nContext.Consumer>);

package/components/selection-toolbar/selection-toolbar.css

@@ -0,0 +1,86 @@
+@import '../global/variables.css';
+
+.toolbar {
+  display: inline-flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  max-width: 100%;
+  height: calc(var(--ring-unit) * 5);
+  padding: 10px calc(var(--ring-unit) * 2);
+
+  pointer-events: auto;
+
+  color: var(--ring-white-text-color);
+  border-radius: var(--ring-border-radius-large);
+  background-color: var(--ring-sidebar-background-color);
+  box-shadow:
+    0 2px 8px rgb(0 28 54 / 10%),
+    0 1px 2px rgb(0 28 54 / 4%);
+
+  line-height: var(--ring-line-height);
+  gap: calc(var(--ring-unit) * 2);
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--ring-unit) * 3);
+}
+
+.selectAll {
+  flex: none;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--ring-unit) * 2);
+
+  min-width: 0;
+}
+
+.closeAction {
+  flex: none;
+}
+
+.separator {
+  flex: none;
+
+  width: 1px;
+  height: calc(var(--ring-unit) * 2);
+  margin-inline: var(--ring-unit);
+
+  background-color: var(--ring-line-color);
+}
+
+.compact {
+  min-width: 0;
+  max-width: 100%;
+  padding-inline: 12px;
+}
+
+.compact .content {
+  min-width: 0;
+  gap: var(--ring-unit);
+}
+
+.compact .label {
+  overflow: hidden;
+
+  flex: 1 1 auto;
+
+  min-width: 0;
+
+  white-space: nowrap;
+
+  text-overflow: ellipsis;
+}
+
+.compact .actions {
+  flex-shrink: 1;
+}
+
+.compact .separator {
+  margin-inline: 2px;
+}

package/components/selection-toolbar/selection-toolbar.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+export interface SelectionToolbarProps extends ComponentPropsWithRef<'div'> {
+    label: ReactNode;
+    selectAll?: ReactNode;
+    closeAction: ReactNode;
+    compact?: boolean;
+    'data-test'?: string | null;
+}
+export declare function SelectionToolbar({ ref, label, selectAll, closeAction, compact, className, children, 'data-test': dataTest, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...restProps }: SelectionToolbarProps): import("react").JSX.Element;
+export declare function SelectionToolbarSeparator(): import("react").JSX.Element;
+export default SelectionToolbar;

package/components/selection-toolbar/selection-toolbar.js

@@ -0,0 +1,23 @@
+import { useId } from 'react';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+import Theme, { ThemeProvider } from '../global/theme';
+import styles from './selection-toolbar.css';
+export function SelectionToolbar({ ref, label, selectAll, closeAction, compact, className, children, 'data-test': dataTest, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...restProps }) {
+    const labelId = useId();
+    const hasSelectAll = selectAll != null;
+    return (<ThemeProvider {...restProps} ref={ref} theme={Theme.DARK} role='group' aria-label={ariaLabel} aria-labelledby={ariaLabelledBy ?? (ariaLabel == null ? labelId : undefined)} data-test={dataTests('ring-selection-toolbar', dataTest)} className={classNames(styles.toolbar, { [styles.compact]: compact }, className)}>
+      <div className={styles.content}>
+        <span id={labelId} className={styles.label}>
+          {label}
+        </span>
+        {hasSelectAll && <span className={styles.selectAll}>{selectAll}</span>}
+        <div className={styles.actions}>{children}</div>
+      </div>
+      <div className={styles.closeAction}>{closeAction}</div>
+    </ThemeProvider>);
+}
+export function SelectionToolbarSeparator() {
+    return <span role='separator' aria-orientation='vertical' className={styles.separator}/>;
+}
+export default SelectionToolbar;

package/components/slider/slider.js

@@ -1,11 +1,10 @@
-import { Fragment, useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useEffectEvent, useRef, useState } from 'react';
 import * as React from 'react';
 import classNames from 'classnames';
 import { isArray } from '../global/typescript-utils';
 import Shortcuts from '../shortcuts/shortcuts';
 import getUID from '../global/get-uid';
 import { adjustValues, calculateMarks, calculateValue, HUNDRED, toPercent, toRange, validateValue } from './slider.utils';
-import useEventCallback from '../global/use-event-callback';
 import styles from './slider.css';
 export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1, disabled, marks, showTicks, showTag, className, renderTag, onChange, }) => {
     const ref = useRef(null);
@@ -86,7 +85,7 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
         setIsDragging(true);
         previouslyDragged.current = false;
     };
-    const handleMouseUp = useEventCallback(({ pageX }) => {
+    const handleMouseUp = useEffectEvent(({ pageX }) => {
         const nextValues = adjustValues(validValues, ref, draggedIndex, pageX, max, min, validStep);
         if (nextValues[0] > nextValues[1]) {
             nextValues.reverse();
@@ -96,7 +95,7 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
         setIsDragging(false);
         previouslyDragged.current = true;
     });
-    const handleMouseMove = useEventCallback(({ pageX }) => {
+    const handleMouseMove = useEffectEvent(({ pageX }) => {
         const nextValues = adjustValues(validValues, ref, draggedIndex, pageX, max, min, validStep);
         if (nextValues[0] > nextValues[1]) {
             nextValues.reverse();
@@ -120,7 +119,7 @@ export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1,
             window.removeEventListener('mousemove', handleMouseMove);
             window.removeEventListener('mouseup', handleMouseUp);
         };
-    }, [isDragging, disabled, handleMouseMove, handleMouseUp]);
+    }, [isDragging, disabled]);
     return (<div ref={ref} role='presentation' // contains interactive elements
      className={classNames(styles.slider, className, {
             [styles.disabled]: disabled,

package/components/tab-trap/tab-trap.d.ts

@@ -2,6 +2,7 @@ import { type HTMLAttributes, type ReactNode } from 'react';
 import * as React from 'react';
 export declare const FOCUSABLE_ELEMENTS = "input, button, select, textarea, a[href], *[tabindex]:not([data-trap-button]):not([data-scrollable-container])";
 export interface TabTrapProps extends HTMLAttributes<HTMLElement> {
+    ref?: React.Ref<TabTrapObject>;
     children: ReactNode;
     trapDisabled?: boolean;
     autoFocusFirst?: boolean;
@@ -11,8 +12,7 @@ export interface TabTrapProps extends HTMLAttributes<HTMLElement> {
 /**
  * @name TabTrap
  */
-interface TabTrap {
+export interface TabTrapObject {
     node: HTMLElement | null;
 }
-declare const TabTrap: React.ForwardRefExoticComponent<TabTrapProps & React.RefAttributes<TabTrap>>;
-export default TabTrap;
+export default function TabTrap({ ref, children, trapDisabled, autoFocusFirst, focusBackOnClose, focusBackOnExit, ...restProps }: TabTrapProps): React.JSX.Element;