@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

package/components/table/header.jsx

@@ -0,0 +1,111 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Waypoint } from 'react-waypoint';
+import Checkbox from '../checkbox/checkbox';
+import getUID from '../global/get-uid';
+import style from './table.css';
+import HeaderCell from './header-cell';
+export default class Header extends PureComponent {
+    static propTypes = {
+        caption: PropTypes.string,
+        selectable: PropTypes.bool,
+        draggable: PropTypes.bool,
+        checked: PropTypes.bool,
+        checkboxDisabled: PropTypes.bool,
+        sticky: PropTypes.bool,
+        topStickOffset: PropTypes.string,
+        onCheckboxChange: PropTypes.func,
+        columns: PropTypes.array.isRequired,
+        onSort: PropTypes.func,
+        sortKey: PropTypes.string,
+        sortOrder: PropTypes.bool
+    };
+    static defaultProps = {
+        selectable: true,
+        draggable: false,
+        checked: true,
+        sticky: true,
+        topStickOffset: '0px',
+        onSort: () => { },
+        onCheckboxChange: () => { },
+        sortKey: 'id',
+        sortOrder: true
+    };
+    state = {
+        fixed: false,
+        headerWidth: undefined,
+        widths: []
+    };
+    id = getUID('table-header-');
+    onCheckboxFocus = (event) => {
+        event.currentTarget.blur();
+    };
+    _columnsRowNode;
+    storeColumnsRowNode = (node) => {
+        if (node) {
+            this._columnsRowNode = node;
+            this.calculateColumnsWidths(node);
+        }
+    };
+    onScrollIn = () => {
+        this.calculateColumnsWidths(this._columnsRowNode);
+        this.setState({ fixed: false });
+    };
+    onScrollOut = ({ currentPosition }) => {
+        if (currentPosition !== 'above') {
+            return;
+        }
+        this.calculateColumnsWidths(this._columnsRowNode);
+        this.setState({ fixed: true });
+    };
+    calculateColumnsWidths(columnsRowNode) {
+        this.setState({
+            headerWidth: columnsRowNode?.clientWidth,
+            widths: [...columnsRowNode?.childNodes ?? []].map(column => (column instanceof Element ? column.clientWidth : 0))
+        });
+    }
+    createCells(widths = []) {
+        const { selectable, draggable, columns, checked, checkboxDisabled, onCheckboxChange, onSort, sortKey, sortOrder } = this.props;
+        const metaColumnClasses = classNames(style.metaColumn, style.headerMetaColumn);
+        const metaColumn = (<div className={metaColumnClasses}>
+        {selectable &&
+                (<Checkbox aria-labelledby={this.id} disabled={checkboxDisabled} checked={checked} onChange={onCheckboxChange} onFocus={this.onCheckboxFocus}/>)}
+      </div>);
+        return columns.map((column, index) => {
+            const columnStyle = widths[index] ? { width: widths[index] } : undefined;
+            const props = { column, onSort, sortKey, sortOrder, style: columnStyle };
+            return (<HeaderCell key={column.id} data-test={column.id} {...props}>
+          {index === 0 && (draggable || selectable) && metaColumn}
+        </HeaderCell>);
+        });
+    }
+    render() {
+        const { caption, sticky, topStickOffset } = this.props;
+        const { fixed, widths, headerWidth } = this.state;
+        const regularCells = this.createCells();
+        const waypointChild = (<tr data-test="ring-table-header-row">
+        {/*Since we need to keep the exact amount of columns in each row, we need to present them even being empty*/}
+        {/*regularCells doesn't provide any other information than a list of components. Hence using array indexes as keys looks like a sane idea*/}
+        {/*eslint-disable-next-line react/no-array-index-key*/}
+        {regularCells.map((c, i) => <td key={i}/>)}
+      </tr>);
+        return (<thead id={this.id} data-test="ring-table-header" className={style.tableHead}>
+        {caption && (<tr data-test="ring-table-header-row">
+            <th className={classNames(style.headerCell, style.caption)} colSpan={regularCells.length + 1} data-test="ring-table-header-cell">{caption}</th>
+          </tr>)}
+
+        {sticky &&
+                (<Waypoint topOffset={topStickOffset} onEnter={this.onScrollIn} onLeave={this.onScrollOut}>
+            {waypointChild}
+          </Waypoint>)}
+
+        <tr className={style.subHeader} ref={this.storeColumnsRowNode} data-test="ring-table-header-row">{regularCells}</tr>
+
+        {fixed && sticky &&
+                (<tr className={style.subHeaderFixed} style={{ width: headerWidth, top: topStickOffset }} data-test="ring-table-header-row">
+              {this.createCells(widths)}
+            </tr>)}
+      </thead>);
+    }
+}

package/components/table/multitable.d.ts

@@ -0,0 +1,25 @@
+import { PureComponent, ReactElement } from 'react';
+import PropTypes from 'prop-types';
+import { TableAttrs } from './table';
+import { SelectionItem } from './selection';
+export interface MultiTableProps {
+    children: ReactElement<TableAttrs<SelectionItem>>[];
+}
+export default class MultiTable extends PureComponent<MultiTableProps> {
+    static propTypes: {
+        children: PropTypes.Validator<any>;
+    };
+    componentDidUpdate(prevProps: MultiTableProps): void;
+    onUpPress: () => boolean;
+    onDownPress: () => boolean;
+    onEscPress: () => void;
+    onCmdAPress: () => boolean;
+    shortcuts: {
+        up: () => boolean;
+        down: () => boolean;
+        esc: () => void;
+        'command+a': () => boolean;
+        'ctrl+a': () => boolean;
+    };
+    render(): JSX.Element;
+}

package/components/table/multitable.jsx

@@ -0,0 +1,81 @@
+import React, { PureComponent, Children, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+export default class MultiTable extends PureComponent {
+    static propTypes = {
+        children: PropTypes.any.isRequired
+    };
+    componentDidUpdate(prevProps) {
+        if (prevProps.children) {
+            const prevSelections = prevProps.children.map(element => element.props.selection);
+            const prevFocusedIndex = prevSelections.findIndex(selection => selection.getFocused());
+            const prevFocused = prevSelections[prevFocusedIndex];
+            const currentSelections = this.props.children.map(element => element.props.selection);
+            const currentFocused = currentSelections.filter(selection => selection.getFocused());
+            if (currentFocused.includes(prevFocused)) {
+                prevProps.children[prevFocusedIndex].props.onSelect?.(prevFocused.resetFocus());
+            }
+        }
+    }
+    onUpPress = () => {
+        const { children: tables } = this.props;
+        const tableIndex = tables.findIndex(({ props: { selection } }) => selection.getFocused());
+        const currentTable = tables[tableIndex].props;
+        const prevTable = tables[tableIndex - 1] ? tables[tableIndex - 1].props : null;
+        let newSelection = currentTable.selection.moveUp();
+        if (newSelection) {
+            currentTable.onSelect?.(newSelection);
+        }
+        else if (prevTable) {
+            currentTable.onSelect?.(currentTable.selection.resetFocus());
+            newSelection = prevTable.selection.moveUp();
+            if (newSelection) {
+                prevTable.onSelect?.(newSelection);
+            }
+        }
+        return false;
+    };
+    onDownPress = () => {
+        const { children: tables } = this.props;
+        const tableIndex = tables.findIndex(({ props: { selection } }) => selection.getFocused());
+        const currentTable = tables[tableIndex].props;
+        const nextTable = tables[tableIndex + 1] ? tables[tableIndex + 1].props : null;
+        let newSelection = currentTable.selection.moveDown();
+        if (newSelection) {
+            currentTable.onSelect?.(newSelection);
+        }
+        else if (nextTable) {
+            currentTable.onSelect?.(currentTable.selection.resetFocus());
+            newSelection = nextTable.selection.moveDown();
+            if (newSelection) {
+                nextTable.onSelect?.(newSelection);
+            }
+        }
+        return false;
+    };
+    onEscPress = () => {
+        const { children } = this.props;
+        Children.forEach(children, ({ props: { selection, onSelect } }) => {
+            onSelect(selection.reset());
+        });
+    };
+    onCmdAPress = () => {
+        const { children } = this.props;
+        Children.forEach(children, ({ props: { selection, onSelect } }) => {
+            onSelect(selection.selectAll());
+        });
+        return false;
+    };
+    shortcuts = {
+        up: this.onUpPress,
+        down: this.onDownPress,
+        esc: this.onEscPress,
+        'command+a': this.onCmdAPress,
+        'ctrl+a': this.onCmdAPress
+    };
+    render() {
+        return (<div data-test="ring-multitable">{Children.map(this.props.children, child => {
+                const props = { shortcuts: this.shortcuts };
+                return cloneElement(child, props);
+            })}</div>);
+    }
+}

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

@@ -0,0 +1,18 @@
+import React, { PureComponent } from 'react';
+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;
+}
+export default class RowWithFocusSensorCallbacks<T extends SelectionItem> extends PureComponent<RowWithFocusSensorCallbacksProps<T>> {
+    RowWithFocusSensor: React.ComponentType<FocusSensorProps<RowProps<T>, HTMLDivElement, typeof Row>>;
+    onFocus: () => void;
+    onSelect: (item: T, selected: boolean) => void;
+    onCollapse: () => void;
+    onExpand: () => void;
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,25 @@
+import React, { PureComponent } from 'react';
+import focusSensorHOC from '../global/focus-sensor-hoc';
+import Row from './row';
+const getContainer = () => focusSensorHOC(Row);
+export default class RowWithFocusSensorCallbacks extends PureComponent {
+    // https://stackoverflow.com/a/53882322/6304152
+    RowWithFocusSensor = getContainer();
+    onFocus = () => {
+        this.props.onFocus(this.props.item);
+    };
+    onSelect = (item, selected) => {
+        this.props.onSelect(item, selected);
+    };
+    onCollapse = () => {
+        this.props.onCollapse(this.props.item);
+    };
+    onExpand = () => {
+        this.props.onExpand(this.props.item);
+    };
+    render() {
+        return (<this.RowWithFocusSensor {...this.props} onFocus={this.onFocus} onSelect={this.onSelect} onCollapse={this.onCollapse} onExpand={this.onExpand}/>);
+    }
+}
+RowWithFocusSensorCallbacks.propTypes =
+    Row.propTypes;

package/components/table/row.d.ts

@@ -0,0 +1,56 @@
+import React, { HTMLAttributes, PureComponent } from 'react';
+import { FocusSensorAddProps } from '../global/focus-sensor-hoc';
+import { Column } from './header-cell';
+import { SelectionItem } from './selection';
+export interface RowProps<T extends SelectionItem> extends Omit<HTMLAttributes<HTMLTableRowElement>, 'onClick' | 'onDoubleClick' | 'onSelect'>, FocusSensorAddProps<HTMLTableRowElement> {
+    item: T;
+    columns: readonly Column<T>[];
+    selectable: boolean;
+    showFocus: boolean;
+    draggable: boolean;
+    alwaysShowDragHandle: boolean;
+    selected: boolean;
+    onHover: (item: T, e: React.MouseEvent<HTMLTableRowElement>) => void;
+    onSelect: (item: T, selected: boolean) => void;
+    onDoubleClick: (item: T) => void;
+    onClick: (item: T, e: React.MouseEvent<HTMLTableRowElement>) => void;
+    level: number;
+    collapsible: boolean;
+    parentCollapsible: boolean;
+    collapsed: boolean;
+    onCollapse: (item: T) => void;
+    onExpand: (item: T) => void;
+    showDisabledSelection?: boolean | null | undefined;
+    checkboxTooltip?: string | undefined;
+    autofocus?: boolean | null | undefined;
+    'data-test'?: string | null | undefined;
+}
+export default class Row<T extends SelectionItem> extends PureComponent<RowProps<T>> {
+    static defaultProps: {
+        selectable: boolean;
+        showFocus: boolean;
+        draggable: boolean;
+        alwaysShowDragHandle: boolean;
+        selected: boolean;
+        onHover: () => void;
+        onSelect: () => void;
+        onDoubleClick: () => void;
+        onClick: () => void;
+        level: number;
+        collapsible: boolean;
+        parentCollapsible: boolean;
+        collapsed: boolean;
+        onCollapse: () => void;
+        onExpand: () => void;
+    };
+    id: string;
+    onMouseEnter: (e: React.MouseEvent<HTMLTableRowElement>) => void;
+    onClick: (e: React.MouseEvent<HTMLTableRowElement>) => void;
+    onCheckboxFocus: () => void;
+    onCheckboxChange: () => void;
+    toggleSelection(): void;
+    onDoubleClick: () => void;
+    row?: HTMLElement | null;
+    rowRef: (el: HTMLElement | null) => void;
+    render(): JSX.Element;
+}

package/components/table/row.jsx

@@ -0,0 +1,153 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import chevronRightIcon from '@jetbrains/icons/chevron-right';
+import chevronDownIcon from '@jetbrains/icons/chevron-down';
+import dragIcon from '@jetbrains/icons/drag';
+import Checkbox from '../checkbox/checkbox';
+import Button from '../button/button';
+import Tooltip from '../tooltip/tooltip';
+import dataTests from '../global/data-tests';
+import getUID from '../global/get-uid';
+import composeRefs from '../global/composeRefs';
+import Cell from './cell';
+import style from './table.css';
+const DragHandle = ({ alwaysShowDragHandle }) => {
+    const classes = classNames(style.dragHandle, {
+        [style.visibleDragHandle]: alwaysShowDragHandle
+    });
+    return (<Button data-movable-handle title="Drag" className={classes} icon={dragIcon}/>);
+};
+DragHandle.propTypes = {
+    alwaysShowDragHandle: PropTypes.bool
+};
+export default class Row extends PureComponent {
+    static defaultProps = {
+        selectable: true,
+        showFocus: false,
+        draggable: false,
+        alwaysShowDragHandle: false,
+        selected: false,
+        onHover: () => { },
+        onSelect: () => { },
+        onDoubleClick: () => { },
+        onClick: () => { },
+        level: 0,
+        collapsible: false,
+        parentCollapsible: false,
+        collapsed: false,
+        onCollapse: () => { },
+        onExpand: () => { }
+    };
+    id = getUID('table-row-');
+    onMouseEnter = (e) => {
+        const { item, onHover } = this.props;
+        onHover(item, e);
+    };
+    onClick = (e) => {
+        const { item } = this.props;
+        this.props.onClick(item, e);
+        if (e.shiftKey) {
+            this.toggleSelection();
+        }
+    };
+    onCheckboxFocus = () => {
+        this.props.onFocusRestore();
+    };
+    onCheckboxChange = () => {
+        this.toggleSelection();
+    };
+    toggleSelection() {
+        const { selectable, selected, onSelect, item } = this.props;
+        if (selectable) {
+            onSelect(item, !selected);
+        }
+    }
+    onDoubleClick = () => {
+        const { item } = this.props;
+        this.props.onDoubleClick(item);
+    };
+    row;
+    rowRef = (el) => {
+        this.row = el;
+    };
+    render() {
+        const { item, columns, selectable, selected, showFocus, draggable, alwaysShowDragHandle, level, collapsible, parentCollapsible, collapsed, onCollapse, onExpand, showDisabledSelection, onSelect, checkboxTooltip, innerRef, focused, autofocus, onFocusReset, onFocusRestore, onHover, className, 'data-test': dataTest, ...restProps } = this.props;
+        const classes = classNames(className, {
+            [style.row]: true,
+            [style.rowFocused]: showFocus,
+            [style.rowSelected]: selected
+        });
+        const testAttrs = {
+            'data-test-focused': showFocus || undefined,
+            'data-test-selected': selected || undefined
+        };
+        const metaColumnClasses = style.metaColumn;
+        const SUBITEM_OFFSET = 30;
+        const COLLAPSIBLE_PARENT_OFFSET = 20;
+        const gap = level * SUBITEM_OFFSET + (parentCollapsible ? COLLAPSIBLE_PARENT_OFFSET : 0);
+        const metaColumnStyle = {
+            paddingLeft: `${gap}px`
+        };
+        const metaColumn = (<div className={metaColumnClasses} style={metaColumnStyle}>
+        {draggable &&
+                <DragHandle alwaysShowDragHandle={alwaysShowDragHandle}/>}
+
+        {selectable &&
+                (<Tooltip title={checkboxTooltip}>
+              <Checkbox aria-labelledby={this.id} className={showFocus ? 'ring-checkbox_focus' : ''} checked={selected} onFocus={this.onCheckboxFocus} onChange={this.onCheckboxChange} tabIndex={-1}/>
+            </Tooltip>)}
+
+        {!selectable && showDisabledSelection &&
+                (<Tooltip title={checkboxTooltip}>
+              <Checkbox aria-labelledby={this.id} checked={selected} disabled/>
+            </Tooltip>)}
+
+        {collapsible && collapsed &&
+                (<Button className={style.rowCollapseExpandButton} icon={chevronRightIcon} onClick={() => onExpand(item)}/>)}
+
+        {collapsible && !collapsed &&
+                (<Button className={style.rowCollapseExpandButton} icon={chevronDownIcon} onClick={() => onCollapse(item)}/>)}
+      </div>);
+        const cells = columns.map((column, index) => {
+            const getValue = column.getValue || (() => item[column.id]);
+            const getDataTest = column.getDataTest || (() => column.id);
+            const value = getValue(item, column);
+            const cellClasses = classNames({ [style.cellRight]: column.rightAlign }, column.className);
+            const showMetaColumn = draggable || selectable || showDisabledSelection || !!level;
+            return (<Cell key={column.id} className={cellClasses} data-test={getDataTest(item, column)}>
+          {index === 0 && (showMetaColumn) && metaColumn}
+          {value}
+        </Cell>);
+        });
+        return (<tr id={this.id} ref={composeRefs(this.rowRef, innerRef)} className={classes} tabIndex={0} data-test={dataTests('ring-table-row', dataTest)} {...testAttrs} {...restProps} onMouseMove={this.onMouseEnter} onClick={this.onClick} onDoubleClick={this.onDoubleClick}>{cells}</tr>);
+    }
+}
+Row.propTypes = {
+    className: PropTypes.string,
+    item: PropTypes.object.isRequired,
+    columns: PropTypes.array.isRequired,
+    selectable: PropTypes.bool,
+    showFocus: PropTypes.bool,
+    draggable: PropTypes.bool,
+    alwaysShowDragHandle: PropTypes.bool,
+    selected: PropTypes.bool,
+    onHover: PropTypes.func,
+    onSelect: PropTypes.func,
+    onDoubleClick: PropTypes.func,
+    onClick: PropTypes.func,
+    onFocusRestore: PropTypes.func,
+    level: PropTypes.number,
+    collapsible: PropTypes.bool,
+    parentCollapsible: PropTypes.bool,
+    collapsed: PropTypes.bool,
+    onCollapse: PropTypes.func,
+    onExpand: PropTypes.func,
+    showDisabledSelection: PropTypes.bool,
+    checkboxTooltip: PropTypes.string,
+    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    focused: PropTypes.bool,
+    autofocus: PropTypes.bool,
+    onFocusReset: PropTypes.func,
+    'data-test': PropTypes.string
+};

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

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

package/components/table/selection-adapter.js

@@ -1,10 +1,10 @@
 export default function selectionAdapter(getSelection) {
-  return {
-    get size() {
-      return getSelection().getActive().size;
-    },
-    get items() {
-      return [...getSelection().getActive()];
-    }
-  };
+    return {
+        get size() {
+            return getSelection().getActive().size;
+        },
+        get items() {
+            return [...getSelection().getActive()];
+        }
+    };
 }

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

@@ -0,0 +1,17 @@
+import { ComponentType } from 'react';
+import { ShortcutsMap } from '../shortcuts/core';
+import Selection, { SelectionItem } from './selection';
+export interface SelectionShortcutsOuterProps<T extends SelectionItem> {
+    selection: Selection<T>;
+    selectable?: boolean | undefined;
+    onSelect?: ((selection: Selection<T>) => void) | undefined;
+    shortcuts?: ShortcutsMap | undefined;
+}
+export interface SelectionShortcutsAddProps<T extends SelectionItem> {
+    selection: Selection<T>;
+    selectable: boolean;
+    onSelect: (selection: Selection<T>) => void;
+    shortcutsMap: ShortcutsMap;
+}
+export declare type SelectionShortcutsProps<T extends SelectionItem, P> = Omit<P, keyof SelectionShortcutsAddProps<T>> & SelectionShortcutsOuterProps<T>;
+export default function selectionShortcutsHOC<T extends SelectionItem, P extends SelectionShortcutsAddProps<T>>(ComposedComponent: ComponentType<P>): ComponentType<SelectionShortcutsProps<T, P>>;

package/components/table/selection-shortcuts-hoc.jsx

@@ -0,0 +1,146 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Selection from './selection';
+function extractPropTypes({ propTypes }) {
+    if (propTypes == null) {
+        return propTypes;
+    }
+    const { selection, selectable, onSelect, shortcutsMap, ...restPropTypes } = propTypes;
+    return restPropTypes;
+}
+export default function selectionShortcutsHOC(ComposedComponent) {
+    class SelectionShortcuts extends PureComponent {
+        onUpPress = () => {
+            const { selection, onSelect } = this.props;
+            const newSelection = selection.moveUp();
+            if (newSelection) {
+                onSelect?.(newSelection);
+            }
+            return false;
+        };
+        onDownPress = () => {
+            const { selection, onSelect } = this.props;
+            const newSelection = selection.moveDown();
+            if (newSelection) {
+                onSelect?.(newSelection);
+            }
+            return false;
+        };
+        shiftSelectionMode;
+        onShiftKeyDown = () => {
+            const { selection } = this.props;
+            if (selection.isSelected(selection.getFocused())) {
+                this.shiftSelectionMode = 'deletion';
+            }
+            else {
+                this.shiftSelectionMode = 'addition';
+            }
+        };
+        shiftSelect = (selection) => {
+            if (this.shiftSelectionMode === 'addition') {
+                return selection.select();
+            }
+            else {
+                return selection.deselect();
+            }
+        };
+        onShiftUpPress = (e) => {
+            e.preventDefault();
+            const { selectable, selection, onSelect } = this.props;
+            if (!selectable) {
+                return;
+            }
+            const newSelection = this.shiftSelect(selection);
+            const newMovedSelection = newSelection.moveUp();
+            if (newMovedSelection) {
+                onSelect?.(newMovedSelection);
+            }
+            else {
+                onSelect?.(newSelection);
+            }
+        };
+        onShiftDownPress = (e) => {
+            e.preventDefault();
+            const { selectable, selection, onSelect } = this.props;
+            if (!selectable) {
+                return;
+            }
+            const newSelection = this.shiftSelect(selection);
+            const newMovedSelection = newSelection.moveDown();
+            if (newMovedSelection) {
+                onSelect?.(newMovedSelection);
+            }
+            else {
+                onSelect?.(newSelection);
+            }
+        };
+        onHomePress = () => {
+            const { selection, onSelect } = this.props;
+            const newSelection = selection.moveStart();
+            if (newSelection) {
+                onSelect?.(newSelection);
+            }
+            return false;
+        };
+        onEndPress = () => {
+            const { selection, onSelect } = this.props;
+            const newSelection = selection.moveEnd();
+            if (newSelection) {
+                onSelect?.(newSelection);
+            }
+            return false;
+        };
+        onSpacePress = () => {
+            const { selectable, selection, onSelect } = this.props;
+            if (!selectable) {
+                return true;
+            }
+            onSelect?.(selection.toggleSelection());
+            return false;
+        };
+        onEscPress = () => {
+            const { selection, onSelect } = this.props;
+            onSelect?.(selection.reset());
+            //this.restoreFocusWithoutScroll();
+        };
+        onCmdAPress = () => {
+            const { selectable, selection, onSelect } = this.props;
+            if (!selectable) {
+                return true;
+            }
+            onSelect?.(selection.selectAll());
+            return false;
+        };
+        shortcutsMap = {
+            up: this.onUpPress,
+            down: this.onDownPress,
+            shift: this.onShiftKeyDown,
+            'shift+up': this.onShiftUpPress,
+            'shift+down': this.onShiftDownPress,
+            home: this.onHomePress,
+            end: this.onEndPress,
+            space: this.onSpacePress,
+            esc: this.onEscPress,
+            'command+a': this.onCmdAPress,
+            'ctrl+a': this.onCmdAPress
+        };
+        render() {
+            const { selection, selectable, onSelect, shortcuts, ...restProps } = this.props;
+            return (<ComposedComponent {...restProps} selection={selection} selectable={selectable} onSelect={onSelect} shortcutsMap={{ ...this.shortcutsMap, ...this.props.shortcuts }}/>);
+        }
+    }
+    SelectionShortcuts.propTypes = {
+        ...extractPropTypes(ComposedComponent),
+        selection: PropTypes.instanceOf(Selection).isRequired,
+        selectable: PropTypes.bool,
+        onSelect: PropTypes.func,
+        shortcuts: PropTypes.object
+    };
+    SelectionShortcuts.defaultProps = {
+        ...ComposedComponent.defaultProps,
+        selectable: true,
+        onSelect: () => { },
+        shortcuts: {}
+    };
+    return SelectionShortcuts;
+}