@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/tag/tag.css

@@ -0,0 +1,184 @@
+@import "../global/variables.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 var(--ring-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% - var(--ring-unit) / 2);
+
+  margin-right: calc(var(--ring-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: var(--ring-unit);
+  padding-left: calc(var(--ring-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(var(--ring-unit) / 2);
+
+  line-height: calc(var(--ring-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(var(--ring-unit) / 2);
+  margin-left: calc(var(--ring-unit) * -1);
+
+  vertical-align: top;
+
+  border-top-left-radius: var(--ring-border-radius);
+  border-bottom-left-radius: var(--ring-border-radius);
+}
+
+.customIcon {
+  max-width: calc(var(--ring-unit) * 2);
+  max-height: calc(var(--ring-unit) * 2);
+
+  margin-right: calc(var(--ring-unit) / 2);
+
+  vertical-align: bottom;
+}
+
+.avatarIcon {
+  width: max-height;
+
+  margin-right: -4px;
+
+  object-fit: contain;
+  object-position: center;
+}

package/components/tag/tag.d.ts

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

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

@@ -0,0 +1,100 @@
+@import "../global/variables.css";
+
+@value outerContainer, container, input from "../input/input.css";
+
+.tagsInput {
+  --ring-input-icon-offset: calc(var(--ring-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

@@ -0,0 +1,138 @@
+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: React.ForwardRefExoticComponent<TagsInputProps & React.RefAttributes<TagsInput>>;
+export type TagsInputAttrs = JSX.LibraryManagedAttributes<typeof TagsInput, TagsInputProps>;
+export {};