@jetbrains/ring-ui 5.0.0-beta.9 → 5.0.1

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

@@ -58,7 +58,7 @@ export interface QueryAssistProps {
     actions?: ReactNode[] | null | undefined;
     'data-test'?: string | null | undefined;
 }
-interface StyleRange {
+export interface StyleRange {
     style: string;
     start: number;
     length: number;
@@ -294,18 +294,14 @@ export default class QueryAssist extends Component<QueryAssistProps> {
 export declare type QueryAssistAttrs = JSX.LibraryManagedAttributes<typeof QueryAssist, QueryAssistProps>;
 export declare const RerenderableQueryAssist: {
     new (props: QueryAssistProps): {
-        _propsCache: Readonly<QueryAssistProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        rerender(props?: Partial<QueryAssistProps>, callback?: (() => void) | undefined): void | Element | React.Component<QueryAssistProps, any, any>;
+        _propsCache: QueryAssistProps & React.RefAttributes<unknown>;
+        rerender(props?: Partial<QueryAssistProps>, callback?: (() => void) | undefined): void;
         node?: HTMLElement | null | undefined;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<QueryAssistProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         render(): React.ReactNode;
-        readonly props: Readonly<QueryAssistProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<QueryAssistProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;

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

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import debounce from 'just-debounce-it';
 import classNames from 'classnames';
 import deepEqual from 'deep-equal';
-import searchIcon from '@jetbrains/icons/search';
-import closeIcon from '@jetbrains/icons/close';
+import searchIcon from '@jetbrains/icons/search-12px';
+import closeIcon from '@jetbrains/icons/close-12px';
 import getUID from '../global/get-uid';
 import dataTests from '../global/data-tests';
 import { getRect, preventDefault } from '../global/dom';

package/components/radio/radio.d.ts

@@ -10,7 +10,7 @@ export default class Radio extends Component<RadioProps> {
         disabled: PropTypes.Requireable<boolean>;
         value: PropTypes.Requireable<string | number | boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     };
     static Item: React.ForwardRefExoticComponent<import("./radio__item").RadioItemProps & React.RefAttributes<import("./radio__item").Radio>>;
     uid: string;

package/components/select/select.css

@@ -63,6 +63,9 @@
 .selectedIcon {
   composes: resetButton from "../global/global.css";
 
+  position: relative;
+  top: 3px;
+
   display: inline-block;
 
   width: calc(2 * unit);
@@ -78,7 +81,7 @@
 .clearIcon {
   padding: 0 3px;
 
-  vertical-align: -1px;
+  vertical-align: -2px;
 }
 
 .sizeS {

package/components/select/select.d.ts

@@ -45,6 +45,7 @@ export interface CustomAnchorProps {
     buttonProps: ButtonHTMLAttributes<HTMLButtonElement> & DataTestProps;
     popup: ReactNode;
 }
+export declare type CustomAnchor = ((props: CustomAnchorProps) => ReactNode);
 export interface BaseSelectProps<T = unknown> {
     data: readonly SelectItem<T>[];
     filter: boolean | Filter<T>;
@@ -60,7 +61,7 @@ export interface BaseSelectProps<T = unknown> {
     maxHeight: number;
     hideArrow: boolean;
     directions: readonly Directions[];
-    label: string;
+    label: string | null;
     selectedLabel: ReactNode;
     inputPlaceholder: string;
     shortcutsEnabled: boolean;
@@ -68,7 +69,7 @@ export interface BaseSelectProps<T = unknown> {
     onLoadMore: () => void;
     onOpen: () => void;
     onFilter: (value: string) => void;
-    onFocus: () => void;
+    onFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
     onBlur: () => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onSelect: (selected: SelectItem<T> | null, event?: Event | SyntheticEvent) => void;
@@ -77,6 +78,7 @@ export interface BaseSelectProps<T = unknown> {
     onDone: () => void;
     onReset: () => void;
     dir: 'ltr' | 'rtl';
+    renderBottomToolbar?: () => ReactNode;
     height?: ControlsHeight | undefined;
     targetElement?: HTMLElement | null | undefined;
     className?: string | null | undefined;
@@ -93,7 +95,7 @@ export interface BaseSelectProps<T = unknown> {
     hint?: ReactNode;
     add?: Add | null | undefined;
     compact?: boolean | null | undefined;
-    customAnchor?: ((props: CustomAnchorProps) => ReactNode) | null | undefined;
+    customAnchor?: CustomAnchor | null | undefined;
     disableMoveOverflow?: boolean | null | undefined;
     disableScrollToActive?: boolean | null | undefined;
     'data-test'?: string | null | undefined;
@@ -112,7 +114,7 @@ export interface MultipleSelectProps<T = unknown> extends BaseSelectProps<T> {
     onChange: (selected: SelectItem<T>[], event?: Event | SyntheticEvent) => void;
     tags?: Tags | boolean | null | undefined;
 }
-declare type SelectProps<T = unknown> = SingleSelectProps<T> | MultipleSelectProps<T>;
+export declare type SelectProps<T = unknown> = SingleSelectProps<T> | MultipleSelectProps<T>;
 interface AddButton {
     prefix: string | null | undefined;
     label: string;
@@ -161,8 +163,8 @@ export default class Select<T = unknown> extends Component<SelectProps<T>, Selec
         maxHeight: number;
         directions: Directions[];
         selected: null;
-        label: string;
-        selectedLabel: string;
+        label: null;
+        selectedLabel: null;
         inputPlaceholder: string;
         hint: null;
         shortcutsEnabled: boolean;
@@ -256,18 +258,14 @@ export declare type MultipleSelectAttrs<T = unknown> = JSX.LibraryManagedAttribu
 export declare type SelectAttrs<T = unknown> = JSX.LibraryManagedAttributes<typeof Select, SelectProps<T>>;
 export declare const RerenderableSelect: {
     new (props: SelectProps<unknown>): {
-        _propsCache: Readonly<SelectProps<unknown>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        rerender(props?: Partial<SelectProps<unknown>>, callback?: (() => void) | undefined): void | Element | React.Component<SelectProps<unknown>, any, any>;
+        _propsCache: SelectProps<unknown> & React.RefAttributes<unknown>;
+        rerender(props?: Partial<SelectProps<unknown>>, callback?: (() => void) | undefined): void;
         node?: HTMLElement | null | undefined;
-        context: any;
+        context: unknown;
         setState<K extends keyof SelectState<unknown>>(state: SelectState<unknown> | ((prevState: Readonly<SelectState<unknown>>, props: Readonly<SelectProps<unknown>>) => SelectState<unknown> | Pick<SelectState<unknown>, K> | null) | Pick<SelectState<unknown>, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         render(): React.ReactNode;
-        readonly props: Readonly<SelectProps<unknown>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<SelectProps<unknown>>;
         state: Readonly<SelectState<unknown>>;
         refs: {
             [key: string]: React.ReactInstance;

package/components/select/select.js

@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import chevronDownIcon from '@jetbrains/icons/chevron-down';
-import closeIcon from '@jetbrains/icons/close';
+import closeIcon from '@jetbrains/icons/close-12px';
 import deepEqual from 'deep-equal';
 import { Anchor } from '../dropdown/dropdown';
 import Avatar, { Size as AvatarSize } from '../avatar/avatar';
@@ -75,8 +75,8 @@ function buildMultipleMap(selected) {
 }
 function getListItems(props, state, rawFilterString, data = props.data) {
     let filterString = rawFilterString.trim();
-    if (isInputMode(props.type) && state.selected && !Array.isArray(state.selected) &&
-        filterString === state.selected.label) {
+    if (isInputMode(props.type) && !props.allowAny && state.selected &&
+        !Array.isArray(state.selected) && filterString === state.selected.label) {
         filterString = ''; // ignore multiple if it is exactly the selected item
     }
     const lowerCaseString = filterString.toLowerCase();
@@ -197,8 +197,8 @@ export default class Select extends Component {
             Popup.PopupProps.Directions.TOP_RIGHT
         ],
         selected: null,
-        label: '',
-        selectedLabel: '',
+        label: null,
+        selectedLabel: null,
         inputPlaceholder: '',
         hint: null,
         shortcutsEnabled: false,
@@ -253,6 +253,9 @@ export default class Select extends Component {
         if (prevMultiple !== multiple && !deepEqual(prevMultiple, multiple)) {
             nextState.selected = multiple ? [] : null;
         }
+        if (multiple && !nextState.selected) {
+            nextState.selected = prevState.selected;
+        }
         const { selected } = { ...prevState, ...nextState };
         if (selected && Array.isArray(selected)) {
             nextState.multipleMap = buildMultipleMap(selected);
@@ -296,8 +299,8 @@ export default class Select extends Component {
     id = getUID('select-');
     shortcutsScope = this.id;
     listId = `${this.id}:list`;
-    _focusHandler = () => {
-        this.props.onFocus();
+    _focusHandler = (e) => {
+        this.props.onFocus(e);
         this.setState({
             shortcutsEnabled: true,
             focused: true
@@ -441,13 +444,14 @@ export default class Select extends Component {
     }
     _hidePopup(tryFocusAnchor) {
         if (this.node && this.state.showPopup) {
-            this.setState({
+            this.setState(prevState => ({
                 showPopup: false,
-                filterValue: ''
-            });
+                filterValue: this.props.allowAny ? prevState.filterValue : ''
+            }));
             if (tryFocusAnchor) {
-                const restoreFocusNode = this.props.targetElement ||
+                const focusableSelectExists = this.node &&
                     this.node.querySelector('[data-test~=ring-select__focus]');
+                const restoreFocusNode = this.props.targetElement || focusableSelectExists;
                 if (restoreFocusNode) {
                     restoreFocusNode.focus();
                 }
@@ -460,15 +464,16 @@ export default class Select extends Component {
         this.props.onAdd(value);
     };
     getToolbar() {
-        const { hint } = this.props;
+        const { hint, renderBottomToolbar } = this.props;
         const { prefix, label, delayed } = this.state.addButton || {};
-        const isToolbarHasElements = this.state.addButton || hint;
+        const isToolbarHasElements = this.state.addButton || hint || renderBottomToolbar;
         if (!isToolbarHasElements) {
             return null;
         }
         return (<div className={classNames({
-                [styles.toolbar]: !!this.state.addButton
+                [styles.toolbar]: Boolean(this.state.addButton || renderBottomToolbar)
             })} data-test="ring-select-toolbar">
+        {renderBottomToolbar && renderBottomToolbar()}
         {this.state.addButton && (<Button text delayed={delayed} className={classNames(styles.button, styles.buttonSpaced)} onClick={this.addHandler} data-test="ring-select-toolbar-button">
             {prefix ? `${prefix} ${label}` : label}
           </Button>)}
@@ -710,9 +715,7 @@ export default class Select extends Component {
             !this.state.selected;
     }
     _getLabel() {
-        return this.props.label ||
-            (typeof this.props.selectedLabel === 'string' ? this.props.selectedLabel : null) ||
-            'Select an option';
+        return this.props.label ?? this.props.selectedLabel ?? 'Select an option';
     }
     _getSelectedString() {
         if (Array.isArray(this.state.selected)) {

package/components/select/select__popup.d.ts

@@ -21,6 +21,9 @@ export interface Multiple {
     label?: string | null | undefined;
     limit?: number | null | undefined;
     selectAll?: boolean | null | undefined;
+    renderSelectedItemsDescription?: (selectedItems: SelectItem[], total: number) => ReactNode;
+    selectAllLabel?: string;
+    deselectAllLabel?: string;
     removeSelectedItems?: boolean | null | undefined;
 }
 export interface TagsReset {
@@ -105,7 +108,7 @@ export default class SelectPopup<T = unknown> extends PureComponent<SelectPopupP
     getFilterWithTags(): JSX.Element | null;
     getBottomLine(): "" | JSX.Element | null;
     handleListResize: () => void;
-    getList(ringPopupTarget: string | undefined): JSX.Element | null;
+    getList(ringPopupTarget: string | Element | undefined): JSX.Element | null;
     handleSelectAll: () => void;
     getSelectAll: () => false | JSX.Element;
     private _adjustListMaxHeight;

package/components/select/select__popup.js

@@ -245,16 +245,17 @@ export default class SelectPopup extends PureComponent {
         }
     };
     getSelectAll = () => {
+        const multiple = this.props.multiple;
         const activeFilters = this.props.data.filter(item => !item.disabled);
         return Array.isArray(this.props.selected) && (<div className={styles.selectAll}>
         {activeFilters.length === 0
                 ? (<span />)
                 : (<Button text inline onClick={this.handleSelectAll}>
                 {activeFilters.length !== this.props.selected.length
-                        ? 'Select all'
-                        : 'Deselect all'}
+                        ? multiple.selectAllLabel || 'Select all'
+                        : multiple.deselectAllLabel || 'Deselect all'}
               </Button>)}
-        <Text info>{`${this.props.selected.length} selected`}</Text>
+        {multiple.renderSelectedItemsDescription?.(this.props.selected, activeFilters.length) || (<Text info>{`${this.props.selected.length} selected`}</Text>)}
       </div>);
     };
     // Cache the value because this method is called

package/components/select-ng/select-ng.js

@@ -1,8 +1,8 @@
 import angular from 'angular';
 
 import React from 'react';
-import {render, unmountComponentAtNode} from 'react-dom';
 
+import {render, unmountComponentAtNode} from '../global/react-render-adapter';
 import getEventKey from '../global/get-event-key';
 import Select, {RerenderableSelect} from '../select/select';
 import MessageBundle from '../message-bundle-ng/message-bundle-ng';
@@ -376,9 +376,15 @@ angularModule.directive('rgSelect', function rgSelectDirective() {
         return sizes[ctrl.size] || sizes.FULL;
       }
 
+      function selectRef(instance) {
+        if (instance != null) {
+          ctrl.selectInstance = instance;
+        }
+      }
+
       function reRenderSelect(props) {
-        if (ctrl.selectInstance.node) {
-          ctrl.selectInstance.rerender(props);
+        if (ctrl.selectInstance?.node) {
+          ctrl.selectInstance.rerender({...props, ref: selectRef});
         }
       }
 
@@ -518,9 +524,14 @@ angularModule.directive('rgSelect', function rgSelectDirective() {
         ctrl.config = angular.extend({}, ctrl.defaultConfig, ctrl.config || {});
 
         if (getType() === 'suggest' || getType() === 'input') {
-          ctrl.selectInstance = render(<RerenderableSelect {...ctrl.config}/>, container);
+          render(
+            <RerenderableSelect
+              ref={selectRef}
+              {...ctrl.config}
+            />,
+            container);
         } else {
-          ctrl.selectInstance = new SelectLazy(container, ctrl.config, ctrl, getType());
+          ctrl.selectInstance = new SelectLazy(container, ctrl.config, ctrl, getType(), selectRef);
         }
 
         // Preserve existing contents of the directive

package/components/select-ng/select-ng__lazy.js

@@ -1,17 +1,22 @@
 import angular from 'angular';
 
-import {render, hydrate} from 'react-dom';
 import React from 'react';
 
+import {render, hydrate} from '../global/react-render-adapter';
 import {RerenderableSelect} from '../select/select';
 
 class SelectLazy {
-  constructor(container, props, ctrl, type) {
+  constructor(container, props, ctrl, type, selectRef) {
     this.container = container;
     this.ctrl = ctrl;
     this.props = props || {};
     this.type = type;
     this.node = container;
+    this.selectInstance = null;
+    this.selectRef = node => {
+      this.selectInstance = node;
+      selectRef(node);
+    };
     this._popup = {
       isVisible: angular.noop
     };
@@ -38,15 +43,20 @@ class SelectLazy {
   }
 
   attachEvents() {
-    this.container.addEventListener('click', this.onClick);
+    this.container.addEventListener('click', this.onClick, {capture: true});
   }
 
   detachEvents() {
-    this.container.removeEventListener('click', this.onClick);
+    this.container.removeEventListener('click', this.onClick, {capture: true});
   }
 
   render(props) {
-    this.reactSelect = <RerenderableSelect {...Object.assign({}, this.props, props || {})}/>;
+    this.reactSelect = (
+      <RerenderableSelect
+        {...Object.assign({}, this.props, props || {})}
+        ref={this.selectRef}
+      />
+    );
     this.props = this.reactSelect.props;
 
     if (this.type !== 'dropdown') {
@@ -58,11 +68,12 @@ class SelectLazy {
   _clickHandler() {
     this.detachEvents();
     if (this.type === 'dropdown') {
-      this.ctrl.selectInstance = render(this.reactSelect, this.container);
+      render(this.reactSelect, this.container);
+      // Hack for React17, where click event is not triggered on just rendered Select node
+      this.selectInstance?._openPopupIfClosed?.();
     } else {
-      this.ctrl.selectInstance = hydrate(this.reactSelect, this.container);
+      hydrate(this.reactSelect, this.container);
     }
-    this.ctrl.selectInstance._openPopupIfClosed();
   }
 }
 

package/components/select-ng/select-ng__lazy.test.js

@@ -67,7 +67,9 @@ describe('Select Lazy', () => {
 
 
   function renderLazySelect(type = 'button') {
-    const lazySelect = new SelectLazy(containerNode, {}, ctrl, type);
+    const lazySelect = new SelectLazy(containerNode, {}, ctrl, type, instance => {
+      ctrl.selectInstance = instance;
+    });
     lazySelect.render();
     return lazySelect;
   }

package/components/shortcuts/shortcuts-hoc.d.ts

@@ -12,12 +12,10 @@ export default function shortcutsHOC<P>(ComposedComponent: ComponentType<P> | st
     new (props: (P & ShortcutsHOCProps) | Readonly<P & ShortcutsHOCProps>): {
         _shortcutsScopeUid: string;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & ShortcutsHOCProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<P & ShortcutsHOCProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<P & ShortcutsHOCProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;
@@ -38,12 +36,10 @@ export default function shortcutsHOC<P>(ComposedComponent: ComponentType<P> | st
     new (props: P & ShortcutsHOCProps, context: any): {
         _shortcutsScopeUid: string;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & ShortcutsHOCProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<P & ShortcutsHOCProps> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<P & ShortcutsHOCProps>;
         state: Readonly<{}>;
         refs: {
             [key: string]: React.ReactInstance;

package/components/shortcuts/shortcuts.d.ts

@@ -24,5 +24,5 @@ export default class Shortcuts extends PureComponent<ShortcutsProps> {
     componentWillUnmount(): void;
     turnShorcutsOn(): void;
     turnShorcutsOff(): void;
-    render(): {} | null;
+    render(): true | import("react").ReactChild | import("react").ReactFragment | null;
 }

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

@@ -13,7 +13,7 @@ export interface TabTrapProps extends HTMLAttributes<HTMLElement> {
  */
 export default class TabTrap extends Component<TabTrapProps> {
     static propTypes: {
-        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         trapDisabled: PropTypes.Requireable<boolean>;
         autoFocusFirst: PropTypes.Requireable<boolean>;
         focusBackOnClose: PropTypes.Requireable<boolean>;

package/components/table/disable-hover-hoc.d.ts

@@ -13,12 +13,10 @@ export default function disableHoverHOC<P extends DisableHoverAddProps>(Composed
         onMouseMove: () => void;
         onKeyDown: (e: KeyboardEvent) => void;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<DisableHoverProps<P>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<DisableHoverProps<P>>;
         refs: {
             [key: string]: React.ReactInstance;
         };
@@ -42,12 +40,10 @@ export default function disableHoverHOC<P extends DisableHoverAddProps>(Composed
         onMouseMove: () => void;
         onKeyDown: (e: KeyboardEvent) => void;
         render(): JSX.Element;
-        context: any;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<DisableHoverProps<P>> & Readonly<{
-            children?: React.ReactNode;
-        }>;
+        readonly props: Readonly<DisableHoverProps<P>>;
         refs: {
             [key: string]: React.ReactInstance;
         };

package/components/table/header.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, PureComponent, SyntheticEvent } from 'react';
+import { ChangeEventHandler, PureComponent, ReactNode, SyntheticEvent } from 'react';
 import PropTypes from 'prop-types';
 import { Waypoint } from 'react-waypoint';
 import { Column, SortParams } from './header-cell';
@@ -16,6 +16,13 @@ export interface HeaderProps {
     caption?: string | null | undefined;
     checkboxDisabled?: boolean | undefined;
 }
+declare module 'react-waypoint' {
+    namespace Waypoint {
+        interface WaypointProps {
+            children?: ReactNode;
+        }
+    }
+}
 export default class Header extends PureComponent<HeaderProps> {
     static propTypes: {
         caption: PropTypes.Requireable<string>;

package/components/table/row-with-focus-sensor.d.ts

@@ -3,10 +3,10 @@ import { FocusSensorProps } from '../global/focus-sensor-hoc';
 import Row, { RowProps } from './row';
 import { SelectionItem } from './selection';
 export interface RowWithFocusSensorCallbacksProps<T extends SelectionItem> extends Omit<FocusSensorProps<RowProps<T>, HTMLTableRowElement, typeof Row>, 'onFocus'> {
-    onFocus: (item: T) => void;
-    onSelect: (item: T, selected: boolean) => void;
-    onCollapse: (item: T) => void;
-    onExpand: (item: T) => void;
+    onFocus?: (item: T) => void;
+    onSelect?: (item: T, selected: boolean) => void;
+    onCollapse?: (item: T) => void;
+    onExpand?: (item: T) => void;
 }
 export default class RowWithFocusSensorCallbacks<T extends SelectionItem> extends PureComponent<RowWithFocusSensorCallbacksProps<T>> {
     RowWithFocusSensor: React.ComponentType<FocusSensorProps<RowProps<T>, HTMLDivElement, typeof Row>>;

package/components/table/row-with-focus-sensor.js

@@ -6,16 +6,16 @@ export default class RowWithFocusSensorCallbacks extends PureComponent {
     // https://stackoverflow.com/a/53882322/6304152
     RowWithFocusSensor = getContainer();
     onFocus = () => {
-        this.props.onFocus(this.props.item);
+        this.props.onFocus?.(this.props.item);
     };
     onSelect = (item, selected) => {
-        this.props.onSelect(item, selected);
+        this.props.onSelect?.(item, selected);
     };
     onCollapse = () => {
-        this.props.onCollapse(this.props.item);
+        this.props.onCollapse?.(this.props.item);
     };
     onExpand = () => {
-        this.props.onExpand(this.props.item);
+        this.props.onExpand?.(this.props.item);
     };
     render() {
         return (<this.RowWithFocusSensor {...this.props} onFocus={this.onFocus} onSelect={this.onSelect} onCollapse={this.onCollapse} onExpand={this.onExpand}/>);

package/components/table/row.d.ts

@@ -54,3 +54,4 @@ export default class Row<T extends SelectionItem> extends PureComponent<RowProps
     rowRef: (el: HTMLElement | null) => void;
     render(): JSX.Element;
 }
+export declare type RowAttrs<T extends SelectionItem> = JSX.LibraryManagedAttributes<typeof Row, RowProps<T>>;

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

@@ -4,6 +4,7 @@ import { TableAttrs } from './table';
 import Selection, { SelectionItem } from './selection';
 export interface SmartTableProps<T extends SelectionItem> extends Omit<TableAttrs<T>, 'selection' | 'onSelect'> {
     onSelectionChange: (selection: Selection<T>) => void;
+    selection?: Selection<T>;
 }
 declare class SmartTable<T extends SelectionItem> extends PureComponent<SmartTableProps<T>> {
     static propTypes: {

package/components/table/smart-table.js

@@ -19,11 +19,15 @@ class SmartTable extends PureComponent {
         })
     };
     UNSAFE_componentWillReceiveProps(nextProps) {
-        const { data, isItemSelectable } = nextProps;
-        if (this.props.data !== data || this.props.isItemSelectable !== isItemSelectable) {
-            const selection = new Selection({ data, isItemSelectable });
+        const { data, isItemSelectable, selection } = nextProps;
+        if (this.props.remoteSelection && this.props.selection !== selection) {
             this.setState({ selection });
         }
+        else if (this.props.data !== data || this.props.isItemSelectable !== isItemSelectable) {
+            this.setState({
+                selection: new Selection({ data, isItemSelectable })
+            });
+        }
     }
     onSelect = (selection) => {
         this.setState({ selection });

package/components/table/table.d.ts

@@ -103,12 +103,10 @@ export default class TableContainer<T extends SelectionItem> extends Component<T
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
             render(): JSX.Element;
-            context: any;
+            context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
-            readonly props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>> & Readonly<{
-                children?: React.ReactNode;
-            }>;
+            readonly props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>;
             refs: {
                 [key: string]: React.ReactInstance;
             };
@@ -132,12 +130,10 @@ export default class TableContainer<T extends SelectionItem> extends Component<T
             onMouseMove: () => void;
             onKeyDown: (e: KeyboardEvent) => void;
             render(): JSX.Element;
-            context: any;
+            context: unknown;
             setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
             forceUpdate(callback?: (() => void) | undefined): void;
-            readonly props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>> & Readonly<{
-                children?: React.ReactNode;
-            }>;
+            readonly props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>;
             refs: {
                 [key: string]: React.ReactInstance;
             };

package/components/tabs/collapsible-more.js

@@ -27,11 +27,11 @@ const morePopupDirections = [
     Directions.BOTTOM_RIGHT
 ];
 export const MoreButton = React.memo(({ items, selected, onSelect, moreClassName, moreActiveClassName, morePopupClassName, morePopupItemClassName, morePopupBeforeEnd }) => {
-    const onSelectHandler = React.useCallback(listItem => {
+    const onSelectHandler = React.useCallback((listItem) => {
         if (listItem.disabled === true || listItem.custom === true) {
             return;
         }
-        const cb = onSelect(listItem.key);
+        const cb = onSelect(String(listItem.key));
         cb();
     }, [onSelect]);
     const hasActiveChild = React.useMemo(() => items.some(item => item.props.alwaysHidden && item.props.id === selected), [items, selected]);