@jetbrains/ring-ui 5.1.21 → 5.1.23

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

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

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

@@ -1,85 +0,0 @@
-/**
-  * @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

@@ -1,119 +0,0 @@
-/**
-  * @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

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

@@ -1,207 +0,0 @@
-/* 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

@@ -1,50 +0,0 @@
-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;
-}