@jetbrains/ring-ui 4.1.4 → 5.0.0-beta.1

package/components/contenteditable/contenteditable.d.ts

@@ -0,0 +1,47 @@
+import { Component, HTMLAttributes, Ref } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name ContentEditable
+ */
+declare function noop(): void;
+export interface ContentEditableBaseProps extends HTMLAttributes<HTMLElement> {
+    disabled: boolean;
+    onComponentUpdate: ((prevProps: ContentEditableBaseProps) => void);
+    inputRef?: Ref<HTMLDivElement> | null | undefined;
+    __html: string;
+}
+declare class ContentEditableBase extends Component<ContentEditableBaseProps> {
+    static propTypes: {
+        __html: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        tabIndex: PropTypes.Requireable<number>;
+        componentDidUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+        onComponentUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        inputRef: PropTypes.Requireable<object>;
+    };
+    static defaultProps: {
+        disabled: boolean;
+        tabIndex: number;
+        onInput: typeof noop;
+        onComponentUpdate: typeof noop;
+    };
+    shouldComponentUpdate(nextProps: ContentEditableBaseProps): boolean;
+    componentDidUpdate(prevProps: ContentEditableBaseProps): void;
+    render(): JSX.Element;
+}
+declare type ContentEditableBaseAttrs = JSX.LibraryManagedAttributes<typeof ContentEditableBase, ContentEditableBaseProps>;
+export declare type ContentEditableProps = Omit<ContentEditableBaseAttrs, '__html'>;
+declare const ContentEditable: {
+    ({ children, ...props }: ContentEditableProps): JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        disabled: PropTypes.Requireable<boolean>;
+        tabIndex: PropTypes.Requireable<number>;
+        componentDidUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+        onComponentUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        inputRef: PropTypes.Requireable<object>;
+    };
+};
+export default ContentEditable;

package/components/contenteditable/contenteditable.jsx

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { renderToStaticMarkup } from 'react-dom/server';
+/**
+ * @name ContentEditable
+ */
+function noop() { }
+const commonPropTypes = {
+    disabled: PropTypes.bool,
+    tabIndex: PropTypes.number,
+    componentDidUpdate: PropTypes.func,
+    onComponentUpdate: PropTypes.func,
+    className: PropTypes.string,
+    inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+};
+class ContentEditableBase extends Component {
+    static propTypes = {
+        ...commonPropTypes,
+        __html: PropTypes.string
+    };
+    static defaultProps = {
+        disabled: false,
+        tabIndex: 0,
+        onInput: noop,
+        onComponentUpdate: noop
+    };
+    shouldComponentUpdate(nextProps) {
+        return nextProps.disabled !== this.props.disabled ||
+            nextProps.__html !== this.props.__html;
+    }
+    componentDidUpdate(prevProps) {
+        this.props.onComponentUpdate(prevProps);
+    }
+    render() {
+        const { __html, onComponentUpdate, disabled, tabIndex, inputRef, ...props } = this.props;
+        return (<div {...props} ref={inputRef} 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        disabled={disabled} role="textbox" tabIndex={disabled ? undefined : tabIndex} contentEditable={!this.props.disabled} dangerouslySetInnerHTML={{ __html }}/>);
+    }
+}
+const ContentEditable = ({ children, ...props }) => <ContentEditableBase {...props} __html={renderToStaticMarkup(children)}/>;
+ContentEditable.propTypes = {
+    ...commonPropTypes,
+    children: PropTypes.node
+};
+export default ContentEditable;

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

@@ -0,0 +1,89 @@
+/**
+  * @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;
+}
+declare type FocusableProps<T extends SelectionItem> = DataListBaseProps<T> & DisableHoverAddProps & FocusSensorOuterProps<HTMLDivElement> & SelectionShortcutsAddProps<T>;
+export declare 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(): JSX.Element;
+            context: any;
+            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>>>> & Readonly<{
+                children?: React.ReactNode;
+            }>;
+            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(): JSX.Element;
+            context: any;
+            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>>>> & Readonly<{
+                children?: React.ReactNode;
+            }>;
+            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(): JSX.Element;
+}
+export {};

package/components/data-list/data-list.jsx

@@ -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 { 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: JSX.Element;
+}[];
+export default items;

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

@@ -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 { 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) => JSX.Element;
+    render(): JSX.Element;
+}