@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/tag/tag.css

@@ -1,185 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-@value max-height: 20px;
-
-.tag {
-  composes: resetButton from "../global/global.css";
-
-  position: relative;
-  z-index: 1;
-
-  display: inline-flex;
-
-  box-sizing: border-box;
-  max-width: 100%;
-  height: max-height;
-
-  padding: 0 unit;
-
-  cursor: pointer;
-
-  vertical-align: top;
-
-  color: var(--ring-text-color);
-
-  border: none;
-  border-radius: var(--ring-border-radius);
-
-  font-size: 12px;
-  line-height: var(--ring-line-height);
-}
-
-.tag,
-.tagAngled::before {
-  transition: background-color var(--ring-ease);
-
-  background-color: var(--ring-tag-background-color);
-}
-
-.withRemove {
-  padding-right: 22px;
-}
-
-.container {
-  position: relative;
-
-  display: inline-block;
-
-  max-width: calc(100% - unit / 2);
-
-  margin-right: calc(unit / 2);
-
-  white-space: nowrap;
-}
-
-.focused,
-.tag:focus-visible {
-  position: relative;
-
-  outline: none;
-  box-shadow: 0 0 0 2px var(--ring-border-hover-color);
-}
-
-.focused,
-.focused.tagAngled::before,
-.tag:focus-visible,
-.tagAngled:focus-visible::before,
-.tag:hover,
-.tagAngled:hover::before {
-  transition: none;
-
-  background-color: var(--ring-tag-hover-background-color);
-}
-
-.tagAngled {
-  /* it needs to fix vertical alignment broken by "overflow: hidden". Remove this class, when IE11 will be deprecated */
-
-  margin-bottom: -5px !important;
-
-  margin-left: unit;
-  padding-left: calc(unit / 2);
-
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-
-  &::before {
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-
-    box-sizing: border-box;
-    width: 12px;
-    height: 12px;
-
-    content: "";
-    transform: scaleY(1.177) rotate(45deg);
-    transform-origin: 0 0;
-
-    border: none;
-  }
-
-  &.focused,
-  &:focus {
-    box-shadow: 0 0 0 1px var(--ring-border-hover-color) inset, 0 0 0 1px var(--ring-border-hover-color);
-  }
-
-  &:focus::before {
-    box-shadow:
-      1px -1px var(--ring-border-hover-color) inset,
-      -0.8px 0.8px 0 0.5px var(--ring-border-hover-color);
-  }
-}
-
-.content {
-  composes: ellipsis from "../global/global.css";
-}
-
-.disabled.tag,
-.disabled.tagAngled::before {
-  pointer-events: none;
-
-  color: var(--ring-disabled-color);
-  background-color: var(--ring-disabled-background-color);
-}
-
-.remove {
-  position: absolute;
-  z-index: 1;
-  top: 2px;
-  right: 0;
-
-  height: auto;
-  padding: 0 calc(unit / 2);
-
-  line-height: calc(unit * 2);
-}
-
-.removeIcon.removeIcon {
-  color: var(--ring-icon-secondary-color);
-}
-
-.icon {
-  margin-right: 6px;
-
-  color: var(--ring-icon-secondary-color);
-
-  & svg {
-    vertical-align: -3px;
-  }
-}
-
-.avatarContainer {
-  display: inline-block;
-  overflow: hidden;
-
-  box-sizing: border-box;
-  width: max-height;
-  height: max-height;
-  margin-right: calc(unit / 2);
-  margin-left: calc(0 - unit);
-
-  vertical-align: top;
-
-  border-top-left-radius: var(--ring-border-radius);
-  border-bottom-left-radius: var(--ring-border-radius);
-}
-
-.customIcon {
-  max-width: calc(unit * 2);
-  max-height: calc(unit * 2);
-
-  margin-right: calc(unit / 2);
-
-  vertical-align: bottom;
-}
-
-.avatarIcon {
-  width: max-height;
-
-  margin-right: -4px;
-
-  object-fit: contain;
-  object-position: center;
-}

package/components/tag/tag.d.ts

@@ -1,64 +0,0 @@
-import React, { HTMLAttributes, PureComponent, ReactNode, RefCallback } from 'react';
-import PropTypes from 'prop-types';
-import { IconType } from '../icon/icon';
-export interface TagRenderProps extends HTMLAttributes<HTMLElement> {
-    disabled: boolean;
-    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<NonNullable<PropTypes.ReactComponentLike | null | undefined>>;
-        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(): React.JSX.Element | null;
-    private _renderImageElement;
-    renderImage(): React.JSX.Element | null;
-    renderAvatar(): React.JSX.Element | null;
-    renderRemoveIcon(): React.JSX.Element | null;
-    render(): React.JSX.Element;
-}
-export type TagAttrs = JSX.LibraryManagedAttributes<typeof Tag, TagProps>;

package/components/tag/tag.js

@@ -1,130 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import closeIcon from '@jetbrains/icons/close-12px';
-import Icon from '../icon/icon';
-import Button from '../button/button';
-import { ControlsHeight } from '../global/controls-height';
-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) {
-            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 }} height={ControlsHeight.M}/>);
-        }
-        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 },
-                disabled: this.props.disabled,
-                children: (<>
-              {this.renderAvatar()}
-              {this.renderCustomIcon()}
-              {this.renderImage()}
-              <span className={styles.content}>{this.props.children}</span>
-            </>)
-            })}
-        {this.renderRemoveIcon()}
-      </span>);
-    }
-}

package/components/tags-input/tags-input.css

@@ -1,101 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-@value outerContainer, container, input from "../input/input.css";
-
-.tagsInput {
-  --ring-input-icon-offset: calc(unit * 2.5);
-  --ring-input-padding-inline: 3px;
-
-  box-sizing: border-box;
-
-  font-size: var(--ring-font-size);
-  line-height: var(--ring-line-height);
-
-  & * {
-    box-sizing: border-box;
-  }
-}
-
-.tagsInputDisabled {
-  pointer-events: none;
-
-  color: var(--ring-disabled-color);
-
-  & .input {
-    background-color: transparent;
-  }
-}
-
-.tagsInputFocused {
-  border-color: var(--ring-main-color);
-}
-
-.tagsList {
-  --ring-input-padding-start: var(--ring-input-padding-inline);
-  --ring-input-padding-end: var(--ring-input-padding-inline);
-
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  width: 100%;
-
-  margin: 0;
-  padding-top: var(--ring-input-padding-block);
-  padding-right: var(--ring-input-padding-end);
-  padding-bottom: var(--ring-input-padding-block);
-  padding-left: var(--ring-input-padding-start);
-
-  cursor: text;
-
-  transition: border-color var(--ring-ease);
-
-  color: var(--ring-text-color);
-  border: 1px solid var(--ring-borders-color);
-  border-radius: var(--ring-border-radius);
-  outline: none;
-  background: transparent;
-
-  font: inherit;
-
-  caret-color: var(--ring-main-color);
-
-  [dir="rtl"] & {
-    padding-right: var(--ring-input-padding-start);
-    padding-left: var(--ring-input-padding-end);
-  }
-
-  &:hover {
-    transition: none;
-
-    border-color: var(--ring-border-hover-color);
-  }
-
-  &:focus-within {
-    transition: none;
-
-    border-color: var(--ring-main-color);
-  }
-}
-
-.tagsSelect {
-  flex-grow: 1;
-  flex-shrink: 1;
-
-  min-width: 160px;
-
-  & .input {
-    overflow: hidden;
-
-    text-overflow: ellipsis;
-  }
-
-  & .outerContainer {
-    --ring-input-padding-block: 0;
-  }
-
-  & .container {
-    line-height: calc(var(--ring-line-height) - 2px);
-  }
-}

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

@@ -1,165 +0,0 @@
-import React, { PureComponent, SyntheticEvent, ReactNode, ComponentType } 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 { Size } from '../input/input';
-import { ControlsHeight } from '../global/controls-height';
-import { Filter } from '../select/select__popup';
-import { TagAttrs } from '../tag/tag';
-import { LabelType } from '../control-label/control-label';
-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: ComponentType<TagAttrs>;
-    maxPopupHeight: number;
-    minPopupWidth: number;
-    canNotBeEmpty: boolean;
-    disabled: boolean;
-    autoOpen: boolean;
-    renderOptimization: boolean;
-    allowAddNewTags: boolean;
-    filter: boolean | Filter;
-    placeholder: string;
-    className?: string | null | undefined;
-    tags?: readonly TagType[] | null | undefined;
-    loadingMessage?: string | undefined;
-    notFoundMessage?: string | undefined;
-    hint?: ReactNode | null | undefined;
-    size: Size;
-    height?: ControlsHeight | undefined;
-    label?: ReactNode;
-    labelType?: LabelType;
-    id?: 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>;
-        filter: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
-            fn: PropTypes.Requireable<(...args: any[]) => any>;
-        }> | null | undefined>>;
-        size: PropTypes.Requireable<string>;
-        height: PropTypes.Requireable<string>;
-        label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        loadingMessage: PropTypes.Requireable<string>;
-        notFoundMessage: PropTypes.Requireable<string>;
-        hint: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        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;
-        allowAddNewTags: boolean;
-        filter: {
-            fn: () => boolean;
-        };
-        placeholder: string;
-        size: Size;
-    };
-    constructor(props: TagsInputProps);
-    state: TagsInputState;
-    static getDerivedStateFromProps({ tags }: TagsInputProps, { prevTags }: TagsInputState): {
-        prevTags: readonly TagType[] | null | undefined;
-    };
-    componentDidMount(): void;
-    static ngModelStateField: string;
-    ngModelStateField: string;
-    static contextType: React.Context<ControlsHeight>;
-    id: 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;
-    focus: () => void;
-    addTag: (tag: TagType | null) => void;
-    onRemoveTag(tagToRemove: TagType): Promise<void | TagType[]>;
-    clickHandler: (event: SyntheticEvent) => void;
-    filterExistingTags: (suggestions: readonly SelectItem[]) => SelectItem[];
-    loadSuggestions: (query?: string) => void;
-    private _focusHandler;
-    private _blurHandler;
-    selectTag: (moveForward?: boolean) => 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(): React.JSX.Element;
-}
-export declare const RerenderableTagsInput: {
-    new (props: TagsInputProps): {
-        _propsCache: TagsInputProps & React.RefAttributes<unknown>;
-        rerender(props?: Partial<TagsInputProps>, callback?: (() => void) | undefined): void;
-        node?: HTMLElement | null | undefined;
-        context: unknown;
-        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>;
-        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 type TagsInputAttrs = JSX.LibraryManagedAttributes<typeof TagsInput, TagsInputProps>;
-export {};