@jetbrains/ring-ui 5.1.21 → 5.1.23

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

@@ -1,275 +0,0 @@
-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-input-ng/tags-input-ng.js

@@ -1,7 +0,0 @@
-/**
- * @name Tags Input Ng
- */
-import angularComponentFactory from '../global/angular-component-factory';
-import TagsInput from '../tags-input/tags-input';
-
-export default angularComponentFactory(TagsInput, 'TagsInput').name;

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

@@ -1,41 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import TagsInputNG from './tags-input-ng';
-
-export default {
-  title: 'Legacy Angular/Tags Input Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Tags Input.'
-  }
-};
-
-export const basic = ({onAddTag, onRemoveTag}) => {
-  angular.module(APP_NAME, [TagsInputNG]).controller('ExampleCtrl', function ctrl($q) {
-    this.tags = [{key: 'test1', label: 'test1'}, {key: 'test2', label: 'test2'}];
-
-    this.dataSource = () =>
-      $q.when([{key: 'test3', label: 'test3'}, {key: 'test4', label: 'test4'}]);
-
-    this.onAddTag = onAddTag;
-
-    this.removeTag = onRemoveTag;
-  });
-  return `
-      <div ng-controller="ExampleCtrl as ctrl">
-        <rg-tags-input
-          tags="ctrl.tags"
-          x-data-source="ctrl.dataSource"
-          placeholder="'Type something'"
-          on-add-tag="ctrl.onAddTag"
-          on-remove-tag="ctrl.removeTag"
-        ></rg-tags-input>
-      </div>
-    `;
-};
-
-basic.storyName = 'Tags Input Ng';
-basic.argTypes = {onAddTag: {}, onRemoveTag: {}};

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

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

@@ -1,45 +0,0 @@
-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/template-ng/template-ng.js

@@ -1,57 +0,0 @@
-import angular from 'angular';
-
-import RingAngularComponent from '../global/ring-angular-component';
-
-/**
- * @name Template Ng
-*/
-
-const angularModule = angular.module('Ring.template', []);
-
-class RgTemplateController extends RingAngularComponent {
-  currentScope = null;
-
-  constructor(...args) {
-    super(...args);
-
-    const {$scope, $attrs} = this.$inject;
-    $scope.$watch($attrs.rgTemplate || $attrs.template, this.render);
-  }
-
-  render = template => {
-    const {$scope, $element, $compile} = this.$inject;
-
-    this.cleanup();
-
-    this.currentScope = $scope.$new();
-
-    this.currentScope.$evalAsync(() => {
-      $element.html(template);
-      this.addInnerClass();
-      $compile($element.contents())(this.currentScope);
-    });
-  };
-
-  addInnerClass = () => {
-    const {rgTemplateClass} = this.$inject.$attrs;
-    if (rgTemplateClass) {
-      this.$inject.$element.contents().addClass(rgTemplateClass);
-    }
-  };
-
-  cleanup() {
-    if (this.currentScope) {
-      this.currentScope.$destroy();
-      this.currentScope = null;
-    }
-  }
-}
-RgTemplateController.$inject = ['$scope', '$element', '$attrs', '$compile'];
-
-angularModule.directive('rgTemplate', function rgTemplateDirective() {
-  return {
-    controller: RgTemplateController
-  };
-});
-
-export default angularModule.name;

package/components/template-ng/template-ng.stories.js

@@ -1,32 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import TemplateNG from './template-ng';
-
-export default {
-  title: 'Legacy Angular/Template Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [TemplateNG]);
-
-  return '<rg-template template="\'<label>Input<br/><input/></label>\'"></rg-template>';
-};
-
-basic.storyName = 'basic';
-
-export const withController = () => {
-  angular.module(APP_NAME, [TemplateNG]).controller('ExampleCtrl', function ctrl() {
-    this.template = '<button>button</button>';
-  });
-
-  return '<rg-template template="ctrl.template" ng-controller="ExampleCtrl as ctrl"></rg-template>';
-};
-
-withController.storyName = 'with controller';

package/components/template-ng/template-ng.test.js

@@ -1,97 +0,0 @@
-/* global inject */
-import Template from './template-ng';
-
-describe('Template Ng', () => {
-  let $compile;
-  let $rootScope;
-
-  beforeEach(window.module(Template));
-
-  beforeEach(inject((_$rootScope_, _$compile_) => {
-    $rootScope = _$rootScope_;
-    $compile = _$compile_;
-  }));
-
-  afterEach(() => {
-    $rootScope.$destroy();
-  });
-
-  function build(template) {
-    const $element = $compile(template)($rootScope);
-    const element = $element[0];
-    const ctrl = $element.controller('rgTemplate');
-
-    $rootScope.$digest();
-
-    return {element, ctrl};
-  }
-
-  it('should work as an element', () => {
-    const {element} = build('<rg-template template="\'<test></test>\'"></rg-template>');
-
-    element.should.contain('test');
-  });
-
-  it('should work as an attribute', () => {
-    const {element} = build('<div rg-template="\'<test></test>\'"></div>');
-
-    element.should.contain('test');
-  });
-
-  it('should render a given template', () => {
-    $rootScope.template = '<test></test>';
-    const {element} = build('<rg-template template="template"></rg-template>');
-
-    element.should.contain('test');
-  });
-
-  it('should apply a given template class', () => {
-    $rootScope.template = '<test></test>';
-    const {element} = build('<rg-template template="template" rg-template-class="test-class"></rg-template>');
-
-    element.querySelector('test').should.match('.test-class');
-  });
-
-  it('should watch a given template expression', () => {
-    $rootScope.template = '<test></test>';
-    const {element} = build('<rg-template template="template"></rg-template>');
-    $rootScope.template = '<test2></test2>';
-    $rootScope.$digest();
-
-    element.should.contain('test2');
-  });
-
-  it('should watch a parent scope', () => {
-    $rootScope.template = '<test>{{ id }}</test>';
-    $rootScope.id = '123';
-    const {element} = build('<rg-template template="template"></rg-template>');
-
-    element.should.contain.text('123');
-
-    $rootScope.id = '456';
-    $rootScope.$digest();
-
-    element.should.contain.text('456');
-  });
-
-  it('should work correctly with an empty template', () => {
-    $rootScope.template = '<test></test>';
-    const {element} = build('<rg-template template="template"></rg-template>');
-    $rootScope.template = '';
-    $rootScope.$digest();
-
-    element.should.be.empty;
-  });
-
-  it('should remove current elements after changing a template expression', () => {
-    $rootScope.template = '<test></test>';
-    const {element} = build('<div><rg-template template="template"></rg-template></div>');
-
-    element.should.contain('test');
-
-    $rootScope.template = '<test2></test2>';
-    $rootScope.$digest();
-
-    element.should.not.contain('test');
-  });
-});

package/components/text/text.css

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

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

@@ -1,31 +0,0 @@
-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>);
-    }
-}