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

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

@@ -0,0 +1,275 @@
+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 { Size } from '../input/input';
+import { ControlsHeightContext } from '../global/controls-height';
+import getUID from '../global/get-uid';
+import inputStyles from '../input/input.css';
+import ControlLabel from '../control-label/control-label';
+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,
+        filter: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({ fn: PropTypes.func })]),
+        size: PropTypes.string,
+        height: PropTypes.string,
+        label: PropTypes.node,
+        loadingMessage: PropTypes.string,
+        notFoundMessage: PropTypes.string,
+        hint: PropTypes.node,
+        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,
+        allowAddNewTags: false,
+        filter: { fn: () => true },
+        placeholder: 'Select an option',
+        size: Size.M
+    };
+    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;
+    static contextType = ControlsHeightContext;
+    id = this.props.id || getUID('ring-tags-list-');
+    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();
+    };
+    focus = () => {
+        this.focusInput();
+    };
+    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 && event.target.parentElement !== this.node) {
+            return;
+        }
+        this.select?._clickHandler();
+    };
+    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 && Number(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 { disabled, canNotBeEmpty, allowAddNewTags, filter, size, labelType, height = this.context, label } = this.props;
+        const classes = classNames(styles.tagsInput, [inputStyles[`size${size}`]], [inputStyles[`height${height}`]], {
+            [styles.tagsInputDisabled]: disabled,
+            [styles.tagsInputFocused]: focused
+        }, this.props.className);
+        return (<div 
+        // it transfers focus to input
+        role="presentation" className={classes} onKeyDown={this.handleKeyDown} onClick={this.clickHandler} ref={this.nodeRef}>
+        {label && (<ControlLabel htmlFor={this.id} disabled={disabled} type={labelType}>{label}</ControlLabel>)}
+
+        <TagsList tags={tags} activeIndex={activeIndex} disabled={disabled} canNotBeEmpty={canNotBeEmpty} handleRemove={this.handleRemove} className={styles.tagsList} tagClassName={styles.tag} handleClick={this.handleClick} customTagComponent={this.props.customTagComponent}>
+          <Select id={this.id} 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} hint={this.props.hint}/>
+        </TagsList>
+      </div>);
+    }
+}
+export const RerenderableTagsInput = rerenderHOC(TagsInput);

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' | 'children'> {
+    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): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export type TagsListAttrs<T extends TagType = TagType> = JSX.LibraryManagedAttributes<typeof TagsList, TagsListProps<T>>;
+export {};

package/components/tags-list/tags-list.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Tag from '../tag/tag';
+function noop() { }
+/**
+ * @name Tags List
+ */
+export default class TagsList extends Component {
+    static propTypes = {
+        children: PropTypes.node,
+        tags: PropTypes.array,
+        customTagComponent: PropTypes.elementType,
+        activeIndex: PropTypes.number,
+        canNotBeEmpty: PropTypes.bool,
+        disabled: PropTypes.bool,
+        handleClick: PropTypes.func,
+        handleRemove: PropTypes.func,
+        className: PropTypes.string,
+        tagClassName: PropTypes.string
+    };
+    static defaultProps = {
+        customTagComponent: null,
+        canNotBeEmpty: false,
+        disabled: false,
+        handleClick: noop,
+        handleRemove: noop
+    };
+    renderTag(tag, focusTag) {
+        const TagComponent = this.props.customTagComponent || Tag;
+        const readOnly = this.props.disabled || tag.readOnly ||
+            (this.props.canNotBeEmpty && this.props.tags.length === 1);
+        const { tagClassName } = this.props;
+        return (<TagComponent {...tag} readOnly={readOnly} disabled={this.props.disabled || tag.disabled} focused={focusTag} onClick={this.props.handleClick(tag)} onRemove={this.props.handleRemove(tag)} className={tagClassName}>{tag.label}</TagComponent>);
+    }
+    render() {
+        const { children, className, customTagComponent, canNotBeEmpty, handleClick, tagClassName, handleRemove, tags, activeIndex, ...props } = this.props;
+        const classes = classNames('ring-js-shortcuts', className);
+        const tagsList = (this.props.tags || []).map((tag, index) => this.renderTag(tag, this.props.activeIndex === index));
+        return (<div data-test="ring-tags-list" className={classes} {...props}>
+        {tagsList}
+        {children}
+      </div>);
+    }
+}

package/components/text/text.css

@@ -0,0 +1,21 @@
+@import "../global/variables.css";
+
+.text {
+  color: var(--ring-text-color);
+}
+
+.sizeS {
+  font-size: var(--ring-font-size-smaller);
+}
+
+.sizeM {
+  font-size: var(--ring-font-size);
+}
+
+.sizeL {
+  font-size: var(--ring-font-size-larger);
+}
+
+.info {
+  color: var(--ring-secondary-color);
+}

package/components/text/text.d.ts

@@ -0,0 +1,23 @@
+import React, { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+type TextSize = 's' | 'm' | 'l';
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+    info?: boolean | null | undefined;
+    size?: TextSize;
+    'data-test'?: string | null | undefined;
+}
+declare const TextSize: Record<string, TextSize>;
+/**
+ * @name Text
+ */
+export default class Text extends Component<TextProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        info: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<TextSize>;
+        className: PropTypes.Requireable<string>;
+    };
+    static Size: Record<string, TextSize>;
+    render(): React.JSX.Element;
+}
+export {};

package/components/text/text.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './text.css';
+const TextSize = {
+    S: 's',
+    M: 'm',
+    L: 'l'
+};
+/**
+ * @name Text
+ */
+export default class Text extends Component {
+    static propTypes = {
+        children: PropTypes.node,
+        info: PropTypes.bool,
+        size: PropTypes.oneOf(Object.keys(TextSize).map(it => TextSize[it])),
+        className: PropTypes.string
+    };
+    static Size = TextSize;
+    render() {
+        const { children, className, info, size, ...restProps } = this.props;
+        const classes = classNames(styles.text, className, {
+            [styles.info]: info,
+            [styles.sizeS]: size === Text.Size.S,
+            [styles.sizeM]: size === Text.Size.M,
+            [styles.sizeL]: size === Text.Size.L
+        });
+        return (<span className={classes} {...restProps}>{children}</span>);
+    }
+}

package/components/toggle/toggle.css

@@ -0,0 +1,198 @@
+@import "../global/variables.css";
+
+@value padding: 2px;
+@value duration: 300ms;
+@value timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+
+.toggle {
+  cursor: pointer;
+
+  &:hover .switch {
+    transition: none;
+
+    background-color: var(--ring-border-hover-color);
+  }
+
+  &.disabled {
+    pointer-events: none;
+  }
+}
+
+.label {
+  margin-left: var(--ring-unit);
+}
+
+.leftLabel {
+  margin-right: var(--ring-unit);
+}
+
+.switchWrapper {
+  position: relative;
+
+  display: inline-block;
+}
+
+.input {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+
+  margin: 0;
+
+  opacity: 0;
+}
+
+.switch {
+  --ring-toggle-item-color: var(--ring-white-text-color);
+  --ring-toggle-background-color: var(--ring-icon-color);
+  --ring-toggle-border-color: var(--ring-toggle-background-color);
+  --ring-switch-border-color: var(--ring-toggle-item-color);
+
+  position: relative;
+
+  display: block;
+
+  box-sizing: border-box;
+
+  width: 100%;
+  height: 100%;
+
+  transition: background-color timing-function duration;
+
+  border: solid 1px var(--ring-toggle-border-color);
+
+  background-color: var(--ring-toggle-background-color);
+
+  .input:focus + & {
+    box-shadow: inset 0 0 0 1px var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
+  }
+
+  &::before {
+    position: absolute;
+    top: calc(padding - 1px);
+    left: -1px;
+
+    box-sizing: border-box;
+
+    width: calc(var(--ring-unit) * 1.5);
+    height: calc(var(--ring-unit) * 1.5);
+
+    content: "";
+
+    transition: transform timing-function duration;
+
+    transform: translateX(padding);
+
+    border: solid 1px var(--ring-switch-border-color);
+
+    border-radius: calc(var(--ring-unit) * 0.75);
+    background-color: var(--ring-toggle-item-color);
+  }
+}
+
+.input:checked + .switch {
+  --ring-toggle-background-color: var(--ring-main-color);
+}
+
+:checked:hover + .switch {
+  background-color: var(--ring-main-hover-color);
+}
+
+.size16 {
+  & .switchWrapper {
+    width: calc(var(--ring-unit) * 3);
+    height: calc(var(--ring-unit) * 2);
+
+    vertical-align: -3px;
+  }
+
+  & .switch {
+    border-radius: var(--ring-unit);
+
+    &::before {
+      width: calc(var(--ring-unit) * 1.5);
+      height: calc(var(--ring-unit) * 1.5);
+
+      border-radius: calc(var(--ring-unit) * 0.75);
+    }
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  & .input:checked + ::before {
+    transform: translateX(calc(var(--ring-unit) * 1.5 - padding));
+  }
+}
+
+.size14 {
+  & .switchWrapper {
+    width: calc(var(--ring-unit) * 3);
+    height: 14px;
+
+    vertical-align: -2px;
+  }
+
+  & .switch {
+    border-radius: 7px;
+
+    &::before {
+      width: 10px;
+      height: 10px;
+
+      border-radius: 5px;
+    }
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  & .input:checked + ::before {
+    transform: translateX(12px);
+  }
+}
+
+.size20 {
+  & .switchWrapper {
+    width: calc(var(--ring-unit) * 4);
+    height: calc(var(--ring-unit) * 2.5);
+
+    vertical-align: -5px;
+  }
+
+  & .switch {
+    border-radius: calc(var(--ring-unit) * 1.25);
+
+    &::before {
+      width: calc(var(--ring-unit) * 2);
+      height: calc(var(--ring-unit) * 2);
+
+      border-radius: calc(var(--ring-unit));
+    }
+  }
+
+  /* stylelint-disable-next-line selector-max-specificity */
+  & .input:checked + ::before {
+    transform: translateX(calc(var(--ring-unit) * 2 - padding));
+  }
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.input:checked[disabled] + .switch {
+  --ring-toggle-background-color: var(--ring-border-selected-disabled-color);
+}
+
+/* stylelint-disable-next-line selector-max-specificity */
+.input[disabled]:not(:checked) + .switch {
+  --ring-toggle-item-color: var(--ring-content-background-color);
+  --ring-toggle-background-color: var(--ring-disabled-background-color);
+  --ring-toggle-border-color: var(--ring-border-disabled-color);
+  --ring-switch-border-color: var(--ring-border-disabled-color);
+}
+
+.paleSwitch.paleSwitch {
+  --ring-toggle-background-color: var(--ring-pale-control-color);
+}
+
+.input:checked + .paleSwitch {
+  --ring-toggle-background-color: var(--ring-border-disabled-color);
+}

package/components/toggle/toggle.d.ts

@@ -0,0 +1,39 @@
+import React, { InputHTMLAttributes, PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export declare const Size: {
+    Size14: string;
+    Size16: string;
+    Size20: string;
+};
+/**
+  * @name Toggle
+  */
+export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size: string;
+    pale?: boolean | null | undefined;
+    leftLabel?: ReactNode;
+    'data-test'?: string | null | undefined;
+}
+declare class Toggle extends PureComponent<ToggleProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        name: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+        leftLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        defaultChecked: PropTypes.Requireable<boolean>;
+        checked: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        pale: PropTypes.Requireable<boolean>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onTransitionEnd: PropTypes.Requireable<(...args: any[]) => any>;
+        size: PropTypes.Requireable<string>;
+        'data-test': PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        size: string;
+    };
+    render(): React.JSX.Element;
+}
+export type ToggleAttrs = JSX.LibraryManagedAttributes<typeof Toggle, ToggleProps>;
+export default Toggle;