@jetbrains/ring-ui 5.1.21 → 5.1.23

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

@@ -1,64 +0,0 @@
-import React, { ComponentType } from 'react';
-export interface DisableHoverAddProps {
-    disabledHover: boolean;
-}
-export type DisableHoverProps<P extends DisableHoverAddProps> = Omit<P, keyof DisableHoverAddProps>;
-export default function disableHoverHOC<P extends DisableHoverAddProps>(ComposedComponent: ComponentType<P>): {
-    new (props: DisableHoverProps<P> | Readonly<DisableHoverProps<P>>): {
-        state: {
-            disabledHover: boolean;
-        };
-        componentDidMount(): void;
-        componentWillUnmount(): void;
-        onMouseMove: () => void;
-        onKeyDown: (e: KeyboardEvent) => void;
-        render(): React.JSX.Element;
-        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>>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<DisableHoverProps<P>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<DisableHoverProps<P>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<P>>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<P>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    new (props: DisableHoverProps<P>, context: any): {
-        state: {
-            disabledHover: boolean;
-        };
-        componentDidMount(): void;
-        componentWillUnmount(): void;
-        onMouseMove: () => void;
-        onKeyDown: (e: KeyboardEvent) => void;
-        render(): React.JSX.Element;
-        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>>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<DisableHoverProps<P>>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<DisableHoverProps<P>>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<P>>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<P>>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<DisableHoverProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    propTypes: React.WeakValidationMap<P> | undefined;
-    defaultProps: Partial<P> | undefined;
-    contextType?: React.Context<any> | undefined;
-};

package/components/table/disable-hover-hoc.js

@@ -1,32 +0,0 @@
-import React, { PureComponent } from 'react';
-export default function disableHoverHOC(ComposedComponent) {
-    return class DisableHover extends PureComponent {
-        static propTypes = ComposedComponent.propTypes;
-        static defaultProps = ComposedComponent.defaultProps;
-        state = {
-            disabledHover: false
-        };
-        componentDidMount() {
-            document.addEventListener('mousemove', this.onMouseMove);
-            document.addEventListener('keydown', this.onKeyDown, true);
-        }
-        componentWillUnmount() {
-            document.removeEventListener('mousemove', this.onMouseMove);
-            document.removeEventListener('keydown', this.onKeyDown, true);
-        }
-        onMouseMove = () => {
-            if (this.state.disabledHover) {
-                this.setState({ disabledHover: false });
-            }
-        };
-        onKeyDown = (e) => {
-            const metaKeys = [16, 17, 18, 19, 20, 91]; // eslint-disable-line @typescript-eslint/no-magic-numbers
-            if (!this.state.disabledHover && !metaKeys.includes(e.keyCode)) {
-                this.setState({ disabledHover: true });
-            }
-        };
-        render() {
-            return (<ComposedComponent {...this.props} disabledHover={this.state.disabledHover}/>);
-        }
-    };
-}

package/components/table/header-cell.d.ts

@@ -1,43 +0,0 @@
-import React, { PureComponent, ReactNode, SyntheticEvent, ThHTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
-export interface Column<T = never> {
-    id: string;
-    sortable?: boolean | null | undefined;
-    className?: string | null | undefined;
-    headerClassName?: string | null | undefined;
-    rightAlign?: boolean | null | undefined;
-    getHeaderValue?: (() => ReactNode) | null | undefined;
-    title?: ReactNode;
-    getValue?: ((item: T, column: Column) => ReactNode) | null | undefined;
-    getDataTest?: ((item: T, column: Column) => string) | null | undefined;
-}
-export interface SortParams {
-    column: Column;
-    order: boolean;
-}
-export interface HeaderCellProps extends ThHTMLAttributes<HTMLTableHeaderCellElement> {
-    column: Column;
-    onSort: (params: SortParams) => void;
-    sortKey?: string | null | undefined;
-    sortOrder?: boolean | null | undefined;
-    'data-test'?: string | null | undefined;
-}
-export default class HeaderCell extends PureComponent<HeaderCellProps> {
-    static propTypes: {
-        children: PropTypes.Requireable<any>;
-        className: PropTypes.Requireable<string>;
-        column: PropTypes.Validator<object>;
-        onSort: PropTypes.Requireable<(...args: any[]) => any>;
-        sortKey: PropTypes.Requireable<string>;
-        sortOrder: PropTypes.Requireable<boolean>;
-        'data-test': PropTypes.Requireable<string>;
-    };
-    static defaultProps: {
-        onSort: () => void;
-    };
-    sortable?: boolean;
-    sorted?: boolean;
-    onClick: () => void;
-    onChildrenClick(e: SyntheticEvent): void;
-    render(): React.JSX.Element;
-}

package/components/table/header-cell.js

@@ -1,56 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import sortableIcon from '@jetbrains/icons/unsorted-10px';
-import sortedIcon from '@jetbrains/icons/chevron-10px';
-import Icon from '../icon/icon';
-import dataTests from '../global/data-tests';
-import style from './table.css';
-export default class HeaderCell extends PureComponent {
-    static propTypes = {
-        children: PropTypes.any,
-        className: PropTypes.string,
-        column: PropTypes.object.isRequired,
-        onSort: PropTypes.func,
-        sortKey: PropTypes.string,
-        sortOrder: PropTypes.bool,
-        'data-test': PropTypes.string
-    };
-    static defaultProps = {
-        onSort: () => { }
-    };
-    sortable;
-    sorted;
-    onClick = () => {
-        if (this.sortable) {
-            const { column, onSort, sortOrder } = this.props;
-            onSort({ column, order: !(this.sorted && sortOrder) });
-        }
-    };
-    onChildrenClick(e) {
-        e.stopPropagation();
-    }
-    render() {
-        const { className, column, onSort, sortKey, sortOrder, 'data-test': dataTest, ...restProps } = this.props;
-        this.sortable = column.sortable === true;
-        this.sorted = sortKey === column.id;
-        const glyph = this.sorted ? sortedIcon : sortableIcon;
-        const classes = classNames(className, column.headerClassName, {
-            [style.headerCell]: true,
-            [style.headerCellSortable]: this.sortable,
-            [style.headerCellSorted]: this.sorted,
-            [style.sortedUp]: sortOrder && this.sorted,
-            [style.cellRight]: column.rightAlign
-        });
-        return (<th {...restProps} className={classes} onClick={this.onClick} data-test={dataTests('ring-table-header-cell', dataTest)}>
-        {/* onClick only used to stop propagation */}
-        <span onClick={this.onChildrenClick} role="presentation">{this.props.children}</span>
-
-        {column.getHeaderValue ? column.getHeaderValue() : column.title}
-
-        {this.sortable && (<span className={style.sorter}>
-            <Icon glyph={glyph} className={style.icon}/>
-          </span>)}
-      </th>);
-    }
-}

package/components/table/header.d.ts

@@ -1,56 +0,0 @@
-import React, { ChangeEventHandler, PureComponent, ReactNode, SyntheticEvent } from 'react';
-import PropTypes from 'prop-types';
-import { Column, SortParams } from './header-cell';
-export interface HeaderProps {
-    columns: readonly Column[];
-    selectable: boolean;
-    draggable: boolean;
-    checked: boolean;
-    sticky: boolean;
-    topStickOffset: string;
-    onSort: (params: SortParams) => void;
-    onCheckboxChange: ChangeEventHandler<HTMLInputElement>;
-    sortKey: string;
-    sortOrder: boolean;
-    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>;
-        selectable: PropTypes.Requireable<boolean>;
-        draggable: PropTypes.Requireable<boolean>;
-        checked: PropTypes.Requireable<boolean>;
-        checkboxDisabled: PropTypes.Requireable<boolean>;
-        sticky: PropTypes.Requireable<boolean>;
-        topStickOffset: PropTypes.Requireable<string>;
-        onCheckboxChange: PropTypes.Requireable<(...args: any[]) => any>;
-        columns: PropTypes.Validator<any[]>;
-        onSort: PropTypes.Requireable<(...args: any[]) => any>;
-        sortKey: PropTypes.Requireable<string>;
-        sortOrder: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: {
-        selectable: boolean;
-        draggable: boolean;
-        checked: boolean;
-        sticky: boolean;
-        topStickOffset: string;
-        onSort: () => void;
-        onCheckboxChange: () => void;
-        sortKey: string;
-        sortOrder: boolean;
-    };
-    id: string;
-    onCheckboxFocus: (event: SyntheticEvent<HTMLElement>) => void;
-    createCells(widths?: never[]): React.JSX.Element[];
-    render(): React.JSX.Element;
-}
-export type HeaderAttrs = JSX.LibraryManagedAttributes<typeof Header, HeaderProps>;

package/components/table/header.js

@@ -1,67 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-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
-    };
-    id = getUID('table-header-');
-    onCheckboxFocus = (event) => {
-        event.currentTarget.blur();
-    };
-    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 regularCells = this.createCells();
-        return (<thead id={this.id} data-test="ring-table-header" style={{ top: topStickOffset }} className={classNames({
-                [style.tableHead]: true,
-                [style.subHeaderSticky]: sticky
-            })}>
-        {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>)}
-
-        <tr className={style.subHeader} data-test="ring-table-header-row">{regularCells}</tr>
-      </thead>);
-    }
-}

package/components/table/multitable.d.ts

@@ -1,25 +0,0 @@
-import React, { 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(): React.JSX.Element;
-}

package/components/table/multitable.js

@@ -1,81 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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(): React.JSX.Element;
-}

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

@@ -1,25 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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;
-    dragHandleTitle?: string;
-    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;
-    metaColumnClassName?: 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(): React.JSX.Element;
-}
-export type RowAttrs<T extends SelectionItem> = JSX.LibraryManagedAttributes<typeof Row, RowProps<T>>;