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

package/components/tag/tag.d.ts

@@ -0,0 +1,63 @@
+import React, { HTMLAttributes, PureComponent, ReactNode, RefCallback } from 'react';
+import PropTypes from 'prop-types';
+import { IconType } from '../icon/icon';
+export interface TagRenderProps extends HTMLAttributes<HTMLElement> {
+    ref: RefCallback<HTMLElement>;
+    'data-test': string;
+}
+export interface TagProps {
+    onRemove: (event: React.MouseEvent<HTMLElement>) => void;
+    onClick: (event: React.MouseEvent<HTMLElement>) => void;
+    readOnly: boolean;
+    disabled: boolean;
+    focused: boolean;
+    render: (props: TagRenderProps) => ReactNode;
+    children?: ReactNode;
+    className?: string | null | undefined;
+    rgTagIcon?: string | IconType | null | undefined;
+    icon?: string | undefined;
+    avatar?: string | null | undefined;
+    rgTagTitle?: string | undefined;
+    angled?: boolean | null | undefined;
+    textColor?: string | undefined;
+    backgroundColor?: string | undefined;
+}
+/**
+ * @name Tag
+ */
+export default class Tag extends PureComponent<TagProps> {
+    static propTypes: {
+        onRemove: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        rgTagIcon: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        icon: PropTypes.Requireable<string>;
+        avatar: PropTypes.Requireable<string>;
+        rgTagTitle: PropTypes.Requireable<string>;
+        readOnly: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        focused: PropTypes.Requireable<boolean>;
+        angled: PropTypes.Requireable<boolean>;
+        backgroundColor: PropTypes.Requireable<string>;
+        textColor: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        render: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: TagProps;
+    state: {
+        focused: boolean;
+    };
+    componentDidUpdate(prevProps: TagProps): void;
+    componentWillUnmount(): void;
+    onDocumentClick: (event: MouseEvent) => void;
+    tagNode?: HTMLElement | null;
+    tagRef: (el: HTMLElement | null) => void;
+    setDocumentClickListener(setListener: boolean): void;
+    renderCustomIcon(): JSX.Element | null;
+    private _renderImageElement;
+    renderImage(): JSX.Element | null;
+    renderAvatar(): JSX.Element | null;
+    renderRemoveIcon(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export declare type TagAttrs = JSX.LibraryManagedAttributes<typeof Tag, TagProps>;

package/components/tag/tag.jsx

@@ -0,0 +1,129 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import closeIcon from '@jetbrains/icons/close';
+import Icon from '../icon/icon';
+import Button from '../button/button';
+import styles from './tag.css';
+/**
+ * @name Tag
+ */
+export default class Tag extends PureComponent {
+    static propTypes = {
+        onRemove: PropTypes.func,
+        onClick: PropTypes.func,
+        rgTagIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+        icon: PropTypes.string,
+        avatar: PropTypes.string,
+        rgTagTitle: PropTypes.string,
+        readOnly: PropTypes.bool,
+        disabled: PropTypes.bool,
+        focused: PropTypes.bool,
+        angled: PropTypes.bool,
+        backgroundColor: PropTypes.string,
+        textColor: PropTypes.string,
+        children: PropTypes.node,
+        className: PropTypes.string,
+        render: PropTypes.func
+    };
+    static defaultProps = {
+        onRemove: () => { },
+        onClick: () => { },
+        readOnly: false,
+        disabled: false,
+        focused: false,
+        render: props => <button type="button" {...props}/>
+    };
+    state = {
+        focused: false
+    };
+    componentDidUpdate(prevProps) {
+        if (this.props.focused !== prevProps.focused) {
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState({ focused: this.props.focused });
+        }
+        if (this.state.focused) {
+            this.tagNode?.focus();
+        }
+        this.setDocumentClickListener(this.state.focused);
+    }
+    componentWillUnmount() {
+        this.setDocumentClickListener(false);
+        this.setState({ focused: false });
+    }
+    onDocumentClick = (event) => {
+        if (this.tagNode) {
+            this.setState({ focused: this.tagNode === event.target });
+        }
+    };
+    tagNode;
+    tagRef = (el) => {
+        this.tagNode = el;
+    };
+    setDocumentClickListener(setListener) {
+        if (setListener) {
+            document.addEventListener('click', this.onDocumentClick);
+        }
+        else {
+            document.removeEventListener('click', this.onDocumentClick);
+        }
+    }
+    renderCustomIcon() {
+        if (this.props.rgTagIcon) {
+            return (<Icon className={styles.icon} title={this.props.rgTagTitle} glyph={this.props.rgTagIcon}/>);
+        }
+        return null;
+    }
+    _renderImageElement(avatarSrc) {
+        const classes = classNames({
+            [styles.customIcon]: this.props.icon,
+            [styles.avatarIcon]: avatarSrc
+        });
+        return (<img alt={avatarSrc ? 'Avatar' : 'Icon'} className={classes} src={avatarSrc || this.props.icon}/>);
+    }
+    renderImage() {
+        if (this.props.icon && !this.props.avatar) {
+            return this._renderImageElement();
+        }
+        return null;
+    }
+    renderAvatar() {
+        if (this.props.avatar) {
+            return (<span className={styles.avatarContainer}>
+          {this._renderImageElement(this.props.avatar)}
+        </span>);
+        }
+        return null;
+    }
+    renderRemoveIcon() {
+        if (!this.props.readOnly) {
+            return (<Button title="Remove" icon={closeIcon} data-test="ring-tag-remove" className={styles.remove} iconClassName={styles.removeIcon} onClick={this.props.onRemove} style={{ '--ring-icon-secondary-color': this.props.textColor }}/>);
+        }
+        return null;
+    }
+    render() {
+        const classes = classNames('ring-js-shortcuts', styles.tag, {
+            [styles.focused]: this.state.focused,
+            [styles.disabled]: this.props.disabled,
+            [styles.tagAngled]: this.props.angled,
+            [styles.withRemove]: !this.props.readOnly
+        }, this.props.className);
+        const { backgroundColor, textColor, render } = this.props;
+        return (<span className={styles.container}>
+        {render({
+                'data-test': 'ring-tag',
+                className: classes,
+                ref: this.tagRef,
+                onClick: this.props.onClick,
+                style: { backgroundColor, color: textColor },
+                children: (<>
+              {this.renderAvatar()}
+              {this.renderCustomIcon()}
+              {this.renderImage()}
+              <span className={styles.content}>{this.props.children}</span>
+            </>)
+            })}
+        {this.renderRemoveIcon()}
+      </span>);
+    }
+}

package/components/tags-input/tags-input.d.ts

@@ -0,0 +1,154 @@
+import React, { Component, PureComponent, SyntheticEvent } from 'react';
+import PropTypes from 'prop-types';
+import Select, { SelectItem } from '../select/select';
+import { TagType } from '../tags-list/tags-list';
+import Caret from '../caret/caret';
+import { Filter } from '../select/select__popup';
+declare function noop(): void;
+export interface ToggleTagParams {
+    tag: TagType;
+}
+export interface TagsInputRequestParams {
+    query: string;
+}
+export interface TagsInputProps {
+    dataSource: (params: TagsInputRequestParams) => readonly SelectItem[] | Promise<readonly SelectItem[]>;
+    onAddTag: (params: ToggleTagParams) => void;
+    onRemoveTag: (params: ToggleTagParams) => void;
+    customTagComponent: Component;
+    maxPopupHeight: number;
+    minPopupWidth: number;
+    canNotBeEmpty: boolean;
+    disabled: boolean;
+    autoOpen: boolean;
+    renderOptimization: boolean;
+    legacyMode: boolean;
+    allowAddNewTags: boolean;
+    filter: boolean | Filter;
+    placeholder: string;
+    className?: string | null | undefined;
+    tags?: readonly TagType[] | null | undefined;
+    loadingMessage?: string | undefined;
+    notFoundMessage?: string | undefined;
+}
+interface TagsInputState {
+    tags: TagType[];
+    prevTags: TagType[] | null;
+    suggestions: SelectItem[];
+    loading: boolean;
+    focused: boolean;
+    query: string;
+    activeIndex: number | null | undefined;
+}
+export default class TagsInput extends PureComponent<TagsInputProps, TagsInputState> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        tags: PropTypes.Requireable<any[]>;
+        /**
+         * Datasource should return array(or promise) of suggestions.
+         * Each suggestion should contain key and label fields.
+         * DataSource should handle caching and response racing (when later request
+         * responded earlier) by himself.
+         */
+        dataSource: PropTypes.Requireable<(...args: any[]) => any>;
+        onAddTag: PropTypes.Requireable<(...args: any[]) => any>;
+        onRemoveTag: PropTypes.Requireable<(...args: any[]) => any>;
+        customTagComponent: PropTypes.Requireable<React.Component<unknown, unknown, unknown>>;
+        maxPopupHeight: PropTypes.Requireable<number>;
+        minPopupWidth: PropTypes.Requireable<number>;
+        placeholder: PropTypes.Requireable<string>;
+        canNotBeEmpty: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        autoOpen: PropTypes.Requireable<boolean>;
+        renderOptimization: PropTypes.Requireable<boolean>;
+        legacyMode: PropTypes.Requireable<boolean>;
+        filter: PropTypes.Requireable<boolean | PropTypes.InferProps<{
+            fn: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
+        loadingMessage: PropTypes.Requireable<string>;
+        notFoundMessage: PropTypes.Requireable<string>;
+        allowAddNewTags: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        dataSource: typeof noop;
+        onAddTag: typeof noop;
+        onRemoveTag: typeof noop;
+        customTagComponent: null;
+        maxPopupHeight: number;
+        minPopupWidth: number;
+        canNotBeEmpty: boolean;
+        disabled: boolean;
+        autoOpen: boolean;
+        renderOptimization: boolean;
+        legacyMode: boolean;
+        allowAddNewTags: boolean;
+        filter: {
+            fn: () => boolean;
+        };
+        placeholder: string;
+    };
+    constructor(props: TagsInputProps);
+    state: TagsInputState;
+    static getDerivedStateFromProps({ tags }: TagsInputProps, { prevTags }: TagsInputState): {
+        prevTags: readonly TagType[] | null | undefined;
+    };
+    componentDidMount(): void;
+    static ngModelStateField: string;
+    ngModelStateField: string;
+    node?: HTMLElement | null;
+    nodeRef: (node: HTMLElement | null) => void;
+    input?: HTMLInputElement | null;
+    caret?: Caret;
+    getInputNode(): HTMLInputElement | null | undefined;
+    setActiveIndex(activeIndex?: number | null): void;
+    focusInput: () => void;
+    addTag: (tag: TagType | null) => void;
+    onRemoveTag(tagToRemove: TagType): Promise<void | TagType[]>;
+    clickHandler: (event: SyntheticEvent) => void;
+    filterExistingTags: (suggestions: readonly SelectItem[]) => SelectItem<unknown>[];
+    loadSuggestions: (query?: string) => void;
+    private _focusHandler;
+    private _blurHandler;
+    selectTag: (moveForward?: boolean | undefined) => void;
+    handleKeyDown: (event: React.KeyboardEvent) => boolean;
+    handleClick: (arg: TagType) => () => void;
+    handleRemove: (arg: TagType) => () => Promise<void | TagType[]>;
+    handleTagCreation: (label: string) => void;
+    select?: Select | null;
+    selectRef: (el: Select | null) => void;
+    render(): JSX.Element;
+}
+export declare const RerenderableTagsInput: {
+    new (props: TagsInputProps): {
+        _propsCache: Readonly<TagsInputProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        rerender(props?: Partial<TagsInputProps>, callback?: (() => void) | undefined): void | Element | React.Component<TagsInputProps, any, any>;
+        node?: HTMLElement | null | undefined;
+        context: any;
+        setState<K extends keyof TagsInputState>(state: TagsInputState | ((prevState: Readonly<TagsInputState>, props: Readonly<TagsInputProps>) => TagsInputState | Pick<TagsInputState, K> | null) | Pick<TagsInputState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        render(): React.ReactNode;
+        readonly props: Readonly<TagsInputProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<TagsInputState>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<TagsInputProps>, nextState: Readonly<TagsInputState>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<TagsInputProps>, prevState: Readonly<TagsInputState>): any;
+        componentDidUpdate?(prevProps: Readonly<TagsInputProps>, prevState: Readonly<TagsInputState>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<TagsInputProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<TagsInputProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<TagsInputProps>, nextState: Readonly<TagsInputState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<TagsInputProps>, nextState: Readonly<TagsInputState>, nextContext: any): void;
+    };
+};
+export declare type TagsInputAttrs = JSX.LibraryManagedAttributes<typeof TagsInput, TagsInputProps>;
+export {};

package/components/tags-input/tags-input.jsx

@@ -0,0 +1,265 @@
+import React, { Component, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import getEventKey from '../global/get-event-key';
+import Select from '../select/select';
+import TagsList from '../tags-list/tags-list';
+import Caret from '../caret/caret';
+import memoize from '../global/memoize';
+import rerenderHOC from '../global/rerender-hoc';
+import styles from './tags-input.css';
+function noop() { }
+/**
+ * @name Tags Input
+ */
+const POPUP_VERTICAL_SHIFT = 2;
+export default class TagsInput extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        tags: PropTypes.array,
+        /**
+         * Datasource should return array(or promise) of suggestions.
+         * Each suggestion should contain key and label fields.
+         * DataSource should handle caching and response racing (when later request
+         * responded earlier) by himself.
+         */
+        dataSource: PropTypes.func,
+        onAddTag: PropTypes.func,
+        onRemoveTag: PropTypes.func,
+        customTagComponent: PropTypes.instanceOf(Component),
+        maxPopupHeight: PropTypes.number,
+        minPopupWidth: PropTypes.number,
+        placeholder: PropTypes.string,
+        canNotBeEmpty: PropTypes.bool,
+        disabled: PropTypes.bool,
+        autoOpen: PropTypes.bool,
+        renderOptimization: PropTypes.bool,
+        legacyMode: PropTypes.bool,
+        filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({ fn: PropTypes.func })]),
+        loadingMessage: PropTypes.string,
+        notFoundMessage: PropTypes.string,
+        allowAddNewTags: PropTypes.bool
+    };
+    static defaultProps = {
+        dataSource: noop,
+        onAddTag: noop,
+        onRemoveTag: noop,
+        customTagComponent: null,
+        maxPopupHeight: 500,
+        minPopupWidth: 360,
+        canNotBeEmpty: false,
+        disabled: false,
+        autoOpen: false,
+        renderOptimization: true,
+        legacyMode: false,
+        allowAddNewTags: false,
+        filter: { fn: () => true },
+        placeholder: 'Select an option'
+    };
+    constructor(props) {
+        super(props);
+        this.ngModelStateField = TagsInput.ngModelStateField;
+    }
+    state = {
+        tags: [],
+        prevTags: null,
+        suggestions: [],
+        loading: true,
+        focused: false,
+        query: '',
+        activeIndex: 0
+    };
+    static getDerivedStateFromProps({ tags }, { prevTags }) {
+        const nextState = { prevTags: tags };
+        if (tags != null && tags !== prevTags) {
+            Object.assign(nextState, { tags, activeIndex: tags.length });
+        }
+        return nextState;
+    }
+    componentDidMount() {
+        if (this.props.autoOpen && !this.props.disabled) {
+            this.focusInput();
+            this.loadSuggestions();
+            this.select?._showPopup();
+        }
+    }
+    static ngModelStateField = 'tags';
+    ngModelStateField;
+    node;
+    nodeRef = (node) => {
+        this.node = node;
+    };
+    input;
+    caret;
+    getInputNode() {
+        if (!this.input) {
+            this.input = this.select?.filter;
+            if (this.input) {
+                this.caret = new Caret(this.input);
+            }
+        }
+        return this.input;
+    }
+    setActiveIndex(activeIndex) {
+        this.setState({ activeIndex });
+    }
+    focusInput = () => {
+        this.getInputNode()?.focus();
+    };
+    addTag = (tag) => {
+        if (tag == null) {
+            return;
+        }
+        const isUniqueTag = this.state.tags.filter(item => tag.key === item.key).length === 0;
+        this.select?.clear();
+        this.select?.filterValue('');
+        if (isUniqueTag) {
+            this.setState(prevState => ({
+                tags: prevState.tags.concat([tag])
+            }));
+            this.props.onAddTag({ tag });
+            this.setActiveIndex();
+        }
+    };
+    onRemoveTag(tagToRemove) {
+        return Promise.resolve(this.props.onRemoveTag({ tag: tagToRemove })).
+            then(() => {
+            const tags = this.state.tags.filter(tag => tag !== tagToRemove);
+            if (this.node) {
+                this.setState({ tags });
+                this.focusInput();
+            }
+            return tags;
+        }, this.focusInput);
+    }
+    clickHandler = (event) => {
+        if (event.target !== this.node) {
+            return;
+        }
+        this.loadSuggestions(this.getInputNode()?.value);
+        this.focusInput();
+    };
+    filterExistingTags = (suggestions) => {
+        const tagsMap = new Map(this.state.tags.map(tag => [tag.key, tag]));
+        return suggestions.filter(suggestion => !tagsMap.has(suggestion.key));
+    };
+    loadSuggestions = (query = '') => this.setState({ loading: true, query }, async () => {
+        try {
+            const suggestionsResult = this.props.dataSource({ query });
+            const allSuggestions = Array.isArray(suggestionsResult)
+                ? suggestionsResult
+                : await suggestionsResult;
+            const suggestions = this.filterExistingTags(allSuggestions);
+            if (this.node && query === this.state.query) {
+                this.setState({ suggestions, loading: false });
+            }
+        }
+        catch (e) {
+            this.setState({ loading: false });
+        }
+    });
+    _focusHandler = () => {
+        this.setActiveIndex(null);
+        this.setState({ focused: true });
+    };
+    _blurHandler = () => {
+        this.setState({ focused: false });
+    };
+    selectTag = (moveForward) => {
+        const activeIndex = typeof this.state.activeIndex === 'number'
+            ? this.state.activeIndex
+            : this.state.tags.length + 1;
+        let newActiveIndex = activeIndex + (moveForward ? 1 : -1);
+        if (newActiveIndex >= this.state.tags.length) {
+            newActiveIndex = this.state.tags.length - 1;
+        }
+        else if (newActiveIndex < 0) {
+            newActiveIndex = 0;
+        }
+        if (this.state.activeIndex !== newActiveIndex) {
+            this.setActiveIndex(newActiveIndex);
+        }
+    };
+    handleKeyDown = (event) => {
+        const key = getEventKey(event);
+        const isInputFocused = () => event.target instanceof Element &&
+            event.target.matches(this.getInputNode()?.tagName ?? '');
+        if (key === ' ' && this.props.allowAddNewTags) {
+            event.stopPropagation();
+            const value = this.getInputNode()?.value;
+            if (value != null && value !== '') {
+                this.handleTagCreation(value);
+            }
+            return true;
+        }
+        if (this.select?._popup?.isVisible()) {
+            return true;
+        }
+        if (key === 'ArrowLeft') {
+            if (this.getInputNode() && this.caret != null && this.caret.getPosition() > 0) {
+                return true;
+            }
+            this.selectTag();
+            return false;
+        }
+        if (key === 'ArrowRight' && !isInputFocused()) {
+            if (this.state.activeIndex === this.state.tags.length - 1) {
+                if (!this.props.disabled) {
+                    this.getInputNode()?.focus();
+                    this.setActiveIndex();
+                }
+            }
+            else {
+                this.selectTag(true);
+            }
+            return false;
+        }
+        if (!this.props.disabled) {
+            if (key === 'Backspace' && !this.getInputNode()?.value) {
+                event.preventDefault();
+                const tagsLength = this.state.tags.length;
+                this.select?._hidePopup(true); // otherwise confirmation may be overlapped by popup
+                this.onRemoveTag(this.state.tags[tagsLength - 1]);
+                return false;
+            }
+            if ((key === 'Delete' || key === 'Backspace') && this.state.activeIndex != null &&
+                this.state.tags[this.state.activeIndex]) {
+                this.onRemoveTag(this.state.tags[this.state.activeIndex]).
+                    then(() => this.selectTag(true));
+                return false;
+            }
+        }
+        return true;
+    };
+    handleClick = memoize((tag) => () => {
+        this.setActiveIndex(this.state.tags.indexOf(tag));
+    });
+    handleRemove = memoize((tag) => () => this.onRemoveTag(tag));
+    handleTagCreation = (label) => {
+        this.addTag({ key: label, label });
+    };
+    select;
+    selectRef = (el) => {
+        this.select = el;
+    };
+    render() {
+        const { focused, tags, activeIndex } = this.state;
+        const { legacyMode, disabled, canNotBeEmpty, allowAddNewTags, filter } = this.props;
+        const classes = classNames(styles.tagsInput, {
+            [styles.tagsInputDisabled]: disabled,
+            [styles.tagsInputFocused]: focused,
+            [styles.tagsInputLegacyMode]: legacyMode
+        }, this.props.className);
+        return (<div 
+        // it transfers focus to input
+        role="presentation" className={classes} onKeyDown={this.handleKeyDown} onClick={this.clickHandler} ref={this.nodeRef}>
+        <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} tagClassName={styles.tag} handleClick={this.handleClick}>
+          <Select ref={this.selectRef} size={Select.Size.AUTO} type={Select.Type.INPUT_WITHOUT_CONTROLS} inputPlaceholder={this.props.placeholder} data={this.state.suggestions} className={classNames(styles.tagsSelect)} onSelect={this.addTag} onFocus={this._focusHandler} onBlur={this._blurHandler} renderOptimization={this.props.renderOptimization} add={allowAddNewTags ? { prefix: 'Add new tag' } : undefined} onAdd={allowAddNewTags ? this.handleTagCreation : undefined} filter={filter} maxHeight={this.props.maxPopupHeight} minWidth={this.props.minPopupWidth} top={POPUP_VERTICAL_SHIFT} loading={this.state.loading} onFilter={this.loadSuggestions} onBeforeOpen={this.loadSuggestions} onKeyDown={this.handleKeyDown} disabled={this.props.disabled} loadingMessage={this.props.loadingMessage} notFoundMessage={this.props.notFoundMessage}/>
+        </TagsList>
+
+        {!legacyMode && <div className={styles.underline}/>}
+        {!legacyMode && <div className={styles.focusUnderline}/>}
+      </div>);
+    }
+}
+export const RerenderableTagsInput = rerenderHOC(TagsInput);

package/components/tags-input-ng/tags-input-ng.examples.js

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import TagsInputNG from '@jetbrains/ring-ui/components/tags-input-ng/tags-input-ng';
+import TagsInputNG from './tags-input-ng';
 
 export default {
   title: 'Legacy Angular/Tags Input Ng',

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

@@ -0,0 +1,46 @@
+import React, { Component, ComponentType, HTMLAttributes, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { TagAttrs } from '../tag/tag';
+declare function noop(): void;
+export interface TagType extends Omit<TagAttrs, 'onClick'> {
+    label?: ReactNode;
+    key?: string | number | null | undefined;
+}
+export interface TagsListProps<T extends TagType> extends HTMLAttributes<HTMLElement> {
+    tags: readonly T[];
+    customTagComponent: ComponentType<TagAttrs>;
+    canNotBeEmpty: boolean;
+    disabled: boolean;
+    handleClick: (tag: T) => (e: React.MouseEvent<HTMLElement>) => void;
+    handleRemove: (tag: T) => (e: React.MouseEvent<HTMLElement>) => void;
+    activeIndex?: number | null | undefined;
+    tagClassName?: string | null | undefined;
+}
+/**
+ * @name Tags List
+ */
+export default class TagsList<T extends TagType> extends Component<TagsListProps<T>> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        tags: PropTypes.Requireable<any[]>;
+        customTagComponent: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        activeIndex: PropTypes.Requireable<number>;
+        canNotBeEmpty: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        handleClick: PropTypes.Requireable<(...args: any[]) => any>;
+        handleRemove: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        tagClassName: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        customTagComponent: null;
+        canNotBeEmpty: boolean;
+        disabled: boolean;
+        handleClick: typeof noop;
+        handleRemove: typeof noop;
+    };
+    renderTag(tag: T, focusTag: boolean): JSX.Element;
+    render(): JSX.Element;
+}
+export declare type TagsListAttrs<T extends TagType = TagType> = JSX.LibraryManagedAttributes<typeof TagsList, TagsListProps<T>>;
+export {};