@jetbrains/ring-ui 5.1.23 → 5.1.25

package/components/control-label/control-label.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './control-label.css';
+export var LabelType;
+(function (LabelType) {
+    LabelType["SECONDARY"] = "secondary";
+    LabelType["FORM"] = "form";
+})(LabelType || (LabelType = {}));
+const classNameByType = {
+    [LabelType.SECONDARY]: styles.secondaryLabel,
+    [LabelType.FORM]: styles.formLabel
+};
+export const ControlLabel = ({ children, type = LabelType.SECONDARY, disabled, ...rest }) => (<label className={classNames(styles.label, classNameByType[type], {
+        [styles.disabledLabel]: disabled
+    })} {...rest}>{children}</label>);
+ControlLabel.propTypes = {
+    label: PropTypes.node,
+    labelStyle: PropTypes.string,
+    disabled: PropTypes.bool
+};
+export default ControlLabel;

package/components/data-list/data-list.css

@@ -0,0 +1,98 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+@value height, compensate from "../table/table.css";
+
+.dataListWrapper {
+  position: relative;
+}
+
+.dataList {
+  margin: 0;
+  padding: 0;
+
+  list-style: none;
+}
+
+.itemContent {
+  padding: 0;
+
+  list-style: none;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+
+  box-sizing: content-box;
+  height: height;
+  padding: 0 calc(unit * 5) compensate 0;
+
+  outline: none;
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  .dataList:not(.disabledHover) &:hover {
+    background-color: var(--ring-hover-background-color);
+  }
+
+  &.titleSelected {
+    background-color: var(--ring-selected-background-color);
+  }
+
+  &.titleFocused {
+    background-color: var(--ring-hover-background-color);
+    box-shadow: inset 2px 0 var(--ring-main-color);
+  }
+}
+
+.showMore {
+  padding: 4px 60px;
+
+  color: var(--ring-secondary-color);
+  outline: none;
+
+  font-size: 12px;
+}
+
+.boxes {
+  display: flex;
+
+  min-width: calc(unit * 3);
+}
+
+.checkboxBox {
+  width: calc(unit * 3);
+}
+
+.collapseButton {
+  top: 1px;
+  left: -5px;
+
+  height: auto;
+  padding: 0 5px;
+
+  line-height: inherit;
+}
+
+.collapseIcon.collapseIcon {
+  color: var(--ring-icon-secondary-color);
+}
+
+.loadingOverlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.showMoreLoader {
+  top: 1px;
+  left: 8px;
+}

package/components/data-list/data-list.d.ts

@@ -0,0 +1,85 @@
+/**
+  * @name Data List
+  */
+import React, { Component } from 'react';
+import { FocusSensorOuterProps } from '../global/focus-sensor-hoc';
+import { SelectionShortcutsAddProps, SelectionShortcutsOuterProps } from '../table/selection-shortcuts-hoc';
+import { DisableHoverAddProps } from '../table/disable-hover-hoc';
+import { SelectionItem } from '../table/selection';
+import { FormattedItem, moreLessButtonStates } from './item';
+export interface DataListBaseProps<T extends SelectionItem> {
+    data: readonly T[];
+    itemFormatter: (item: T) => FormattedItem<T>;
+    loading?: boolean | undefined;
+    onItemMoreLess?: ((item: T, more: boolean) => void) | undefined;
+    itemMoreLessState?: ((item: FormattedItem<T>) => moreLessButtonStates) | undefined;
+    remoteSelection?: boolean | undefined;
+    className?: string | null | undefined;
+    disabledHover?: boolean | null | undefined;
+}
+type FocusableProps<T extends SelectionItem> = DataListBaseProps<T> & DisableHoverAddProps & FocusSensorOuterProps<HTMLDivElement> & SelectionShortcutsAddProps<T>;
+export type DataListContainerProps<T extends SelectionItem> = DataListBaseProps<T> & FocusSensorOuterProps<HTMLDivElement> & SelectionShortcutsOuterProps<T>;
+export default class DataListContainer<T extends SelectionItem> extends Component<DataListContainerProps<T>> {
+    static propTypes: React.WeakValidationMap<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<SelectionItem, FocusableProps<SelectionItem>>> | undefined;
+    DataList: {
+        new (props: import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>> | Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>): {
+            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<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+            forceUpdate(callback?: (() => void) | undefined): void;
+            readonly props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>;
+            refs: {
+                [key: string]: React.ReactInstance;
+            };
+            shouldComponentUpdate?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextState: Readonly<{}>, nextContext: any): boolean;
+            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>, snapshot?: any): void;
+            componentWillMount?(): void;
+            UNSAFE_componentWillMount?(): void;
+            componentWillReceiveProps?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextState: Readonly<{}>, nextContext: any): void;
+        };
+        new (props: import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>, 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<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+            forceUpdate(callback?: (() => void) | undefined): void;
+            readonly props: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>;
+            refs: {
+                [key: string]: React.ReactInstance;
+            };
+            shouldComponentUpdate?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextState: Readonly<{}>, nextContext: any): boolean;
+            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, prevState: Readonly<{}>, snapshot?: any): void;
+            componentWillMount?(): void;
+            UNSAFE_componentWillMount?(): void;
+            componentWillReceiveProps?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<import("../table/disable-hover-hoc").DisableHoverProps<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>>>, nextState: Readonly<{}>, nextContext: any): void;
+        };
+        propTypes: React.WeakValidationMap<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>> | undefined;
+        defaultProps: Partial<import("../table/selection-shortcuts-hoc").SelectionShortcutsProps<T, FocusableProps<T>>> | undefined;
+        contextType?: React.Context<any> | undefined;
+    };
+    render(): React.JSX.Element;
+}
+export {};

package/components/data-list/data-list.js

@@ -0,0 +1,119 @@
+/**
+  * @name Data List
+  */
+import React, { PureComponent, Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import focusSensorHOC from '../global/focus-sensor-hoc';
+import selectionShortcutsHOC from '../table/selection-shortcuts-hoc';
+import disableHoverHOC from '../table/disable-hover-hoc';
+import getUID from '../global/get-uid';
+import Shortcuts from '../shortcuts/shortcuts';
+import Loader from '../loader/loader';
+import { refObject } from '../global/prop-types';
+import Item, { moreLessButtonStates } from './item';
+import styles from './data-list.css';
+import Selection from './selection';
+class DataList extends PureComponent {
+    static defaultProps = {
+        loading: false,
+        onItemMoreLess: () => { },
+        itemMoreLessState: () => moreLessButtonStates.UNUSED,
+        remoteSelection: false
+    };
+    componentDidUpdate(prevProps) {
+        const { data, selection, onSelect, selectable } = this.props;
+        if (data !== prevProps.data && !prevProps.remoteSelection) {
+            onSelect(selection.cloneWith({ data }));
+        }
+        if (!selectable && prevProps.selectable) {
+            onSelect(selection.resetSelection());
+        }
+    }
+    shortcutsScope = getUID('ring-data-list-');
+    onItemFocus = (item) => {
+        const { selection, onSelect } = this.props;
+        onSelect(selection.focus(item));
+    };
+    onItemSelect = (item, selected) => {
+        const { selection, onSelect } = this.props;
+        if (selected) {
+            onSelect(selection.select(item));
+        }
+        else {
+            onSelect(selection.deselect(item));
+        }
+    };
+    onEqualPress = () => {
+        const { selection, itemFormatter } = this.props;
+        const focused = selection.getFocused();
+        if (focused == null) {
+            throw new Error('No focused item');
+        }
+        const item = itemFormatter(focused);
+        if (item.collapsed) {
+            item.onExpand?.();
+        }
+        else {
+            item.onCollapse?.();
+        }
+    };
+    shortcutsMap = {
+        '=': this.onEqualPress
+    };
+    render() {
+        const { data, className, loading, selection, disabledHover, itemFormatter, focused, innerRef } = this.props;
+        const shortcutsMap = { ...this.shortcutsMap, ...this.props.shortcutsMap };
+        const classes = classNames(className, {
+            [styles.dataList]: true,
+            [styles.disabledHover]: disabledHover,
+            [styles.multiSelection]: selection.getSelected().size > 0
+        });
+        return (<div className={styles.dataListWrapper} data-test="ring-data-list" ref={innerRef}>
+        {focused &&
+                (<Shortcuts map={shortcutsMap} scope={this.shortcutsScope}/>)}
+
+        <ul className={classes}>
+          {data.map(model => {
+                const item = itemFormatter(model);
+                const { id, key, title, items } = item;
+                const showMoreLessButton = this.props.itemMoreLessState?.(item);
+                return (<Item key={key || id} item={model} title={title} items={items} itemFormatter={itemFormatter} collapsible={item.collapsible} collapsed={item.collapsed} onCollapse={item.onCollapse} onExpand={item.onExpand} showFocus={selection.isFocused(model)} onFocus={this.onItemFocus} selection={selection} selectable={item.selectable} selected={selection.isSelected(model)} onSelect={this.onItemSelect} showMoreLessButton={showMoreLessButton} onItemMoreLess={this.props.onItemMoreLess}/>);
+            })}
+        </ul>
+
+        {loading && (<div className={data.length > 0 ? styles.loadingOverlay : undefined}>
+            <Loader />
+          </div>)}
+      </div>);
+    }
+}
+DataList.propTypes = {
+    className: PropTypes.string,
+    data: PropTypes.array.isRequired,
+    loading: PropTypes.bool,
+    focused: PropTypes.bool.isRequired,
+    disabledHover: PropTypes.bool,
+    selection: PropTypes.instanceOf(Selection).isRequired,
+    selectable: PropTypes.bool.isRequired,
+    shortcutsMap: PropTypes.shape({}).isRequired,
+    innerRef: PropTypes.oneOfType([
+        refObject(PropTypes.instanceOf(HTMLDivElement)),
+        PropTypes.func
+    ]),
+    itemFormatter: PropTypes.func.isRequired,
+    onItemMoreLess: PropTypes.func,
+    itemMoreLessState: PropTypes.func,
+    onSelect: PropTypes.func.isRequired,
+    remoteSelection: PropTypes.bool
+};
+const getContainer = () => disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(DataList)));
+// eslint-disable-next-line react/no-multi-comp
+export default class DataListContainer extends Component {
+    static propTypes = getContainer().propTypes;
+    // https://stackoverflow.com/a/53882322/6304152
+    DataList = getContainer();
+    render() {
+        return <this.DataList {...this.props}/>;
+    }
+}

package/components/data-list/data-list.mock.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import { SelectionItem } from '../table/selection';
+export interface Item extends SelectionItem {
+    title: ReactNode;
+    collapsible?: boolean;
+    selectable?: boolean;
+    items?: Item[];
+}
+declare const items: Item[];
+export declare const moreItems: {
+    id: number;
+    selectable: boolean;
+    collapsible: boolean;
+    title: React.JSX.Element;
+}[];
+export default items;

package/components/data-list/data-list.mock.js

@@ -0,0 +1,207 @@
+/* eslint-disable react/jsx-no-literals */
+import React from 'react';
+import Link from '../link/link';
+import Badge from '../badge/badge';
+const items = [
+    {
+        id: 1,
+        title: <span><strong>Assigner</strong> in 60 projects</span>,
+        collapsible: true,
+        selectable: true,
+        items: [
+            {
+                id: 11,
+                title: '6 projects: as a member of jetbrains-team',
+                collapsible: true,
+                selectable: true,
+                items: [
+                    {
+                        id: 111,
+                        selectable: true,
+                        title: <Link href="#">TeamCity</Link>
+                    },
+                    {
+                        id: 112,
+                        selectable: true,
+                        title: <Link href="#">YouTrack</Link>
+                    },
+                    {
+                        id: 113,
+                        selectable: true,
+                        title: <Link href="#">Sandbox</Link>
+                    },
+                    {
+                        id: 114,
+                        selectable: true,
+                        title: <Link href="#">Exception Analyzer</Link>
+                    },
+                    {
+                        id: 115,
+                        selectable: true,
+                        title: <Link href="#">MPS</Link>
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        id: 2,
+        title: <span><strong>Code Reviewer</strong> in 5 projects</span>,
+        selectable: true,
+        collapsible: true,
+        items: [
+            {
+                id: 21,
+                selectable: true,
+                title: (<span>
+            <Link href="#">JetProfile</Link>
+            <span> </span>
+            <Badge gray>duplicate</Badge>
+          </span>)
+            },
+            {
+                id: 22,
+                title: '6 projects: as a member of jetbrains-team',
+                collapsible: true,
+                items: [
+                    {
+                        id: 221,
+                        collapsible: true,
+                        title: <Link href="#">TeamCity</Link>
+                    },
+                    {
+                        id: 222,
+                        collapsible: true,
+                        title: <Link href="#">YouTrack</Link>
+                    },
+                    {
+                        id: 223,
+                        collapsible: true,
+                        title: <Link href="#">Sandbox</Link>
+                    },
+                    {
+                        id: 224,
+                        collapsible: true,
+                        title: <Link href="#">Exception Analyzer</Link>
+                    },
+                    {
+                        id: 225,
+                        collapsible: true,
+                        title: <Link href="#">MPS</Link>
+                    }
+                ]
+            },
+            {
+                id: 23,
+                collapsible: true,
+                title: (<span>
+            <Link href="#">CustomJDK</Link>
+            <span>: as a member of ide-developers</span>
+          </span>)
+            }
+        ]
+    },
+    {
+        id: 3,
+        title: <span><strong>Code Viewer</strong> in 5 projects</span>,
+        selectable: true,
+        collapsible: true,
+        items: [
+            {
+                id: 31,
+                collapsible: true,
+                title: (<span>
+            <Link href="#">ide-frontend</Link>
+            <span>: as a member of ide-developers</span>
+          </span>)
+            },
+            {
+                id: 32,
+                collapsible: true,
+                title: (<span>
+            <Link href="#">ide-frontend</Link>
+            <span>: as a member of ide-frontend Code Viewers</span>
+          </span>)
+            }
+        ]
+    },
+    {
+        id: 4,
+        title: <span><strong>Commenter</strong> in 12 projects</span>,
+        collapsible: true,
+        items: [
+            {
+                id: 41,
+                collapsible: true,
+                title: (<span>
+            <Link href="#">Intellij IDEA</Link>
+            <span>: as a member of Registered Users</span>
+          </span>)
+            },
+            {
+                id: 42,
+                collapsible: true,
+                title: (<span>
+            <Link href="#">YouTrack Backlog</Link>
+            <span>: as a member of jetbrains-team</span>
+          </span>)
+            }
+        ]
+    },
+    {
+        id: 5,
+        collapsible: true,
+        title: (<span>
+        <strong>Developer</strong>
+        <span> in 57 projects </span>
+        <Badge>team role</Badge>
+      </span>),
+        items: [
+            {
+                id: 51,
+                selectable: true,
+                collapsible: true,
+                title: <Link href="#">Wasabi</Link>
+            }
+        ]
+    },
+    {
+        id: 6,
+        collapsible: true,
+        title: (<span>
+        <strong>Git Hosting Admin</strong>
+        <span> in project </span>
+        <Link href="#">Hackathon 2016</Link>
+        <span>: as a member of jetbrains-team</span>
+      </span>)
+    },
+    {
+        id: 7,
+        title: <span><strong>Git Hosting Checkout</strong> in 7 projects</span>,
+        selectable: true,
+        collapsible: true
+    }
+];
+export const moreItems = [
+    {
+        id: 91,
+        selectable: true,
+        collapsible: true,
+        title: (<span>
+        <Link href="#">More item 1</Link>
+        <span> </span>
+        <Badge gray>duplicate</Badge>
+      </span>)
+    },
+    {
+        id: 92,
+        selectable: true,
+        collapsible: true,
+        title: (<span>
+        <Link href="#">More item 2</Link>
+        <span> </span>
+        <Badge gray>duplicate</Badge>
+      </span>)
+    }
+];
+export default items;

package/components/data-list/item.d.ts

@@ -0,0 +1,50 @@
+import React, { PureComponent, ReactNode } from 'react';
+import Selection, { SelectionItem } from '../table/selection';
+export declare enum moreLessButtonStates {
+    UNUSED = 0,
+    MORE = 1,
+    MORE_LOADING = 2,
+    LESS = 3
+}
+export interface BaseFormattedItem<T> {
+    items?: readonly T[];
+    title?: ReactNode;
+    collapsible?: boolean | null | undefined;
+    collapsed?: boolean | null | undefined;
+    onCollapse?: () => void;
+    onExpand?: () => void;
+    selectable?: boolean | undefined;
+}
+export interface FormattedItem<T> extends BaseFormattedItem<T> {
+    key?: string | null | undefined;
+    id?: string | number | null | undefined;
+}
+export interface ItemProps<T extends SelectionItem> extends BaseFormattedItem<T> {
+    item: T;
+    onFocus: (item: T) => void;
+    onSelect: (item: T, selected: boolean) => void;
+    itemFormatter: (item: T) => FormattedItem<T>;
+    level: number;
+    parentShift: number;
+    showMoreLessButton: moreLessButtonStates;
+    onItemMoreLess: (item: T, more: boolean) => void;
+    className?: string | null | undefined;
+    showFocus?: boolean | undefined;
+    selection: Selection<T>;
+    selected?: boolean | undefined;
+}
+export default class Item<T extends SelectionItem> extends PureComponent<ItemProps<T>> {
+    static defaultProps: {
+        items: never[];
+        level: number;
+        parentShift: number;
+        showMoreLessButton: moreLessButtonStates;
+        onItemMoreLess: () => void;
+    };
+    onShowMore: () => void;
+    onShowLess: () => void;
+    onFocus: () => void;
+    onSelect: (selected: boolean) => void;
+    renderItem: (model: T, parentShift: number) => React.JSX.Element;
+    render(): React.JSX.Element;
+}