@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/list/list__item.d.ts

@@ -1,8 +0,0 @@
-import React, { PureComponent, SyntheticEvent } from 'react';
-import { ListDataItemProps } from './consts';
-export default class ListItem<T> extends PureComponent<ListDataItemProps<T>> {
-    id: string;
-    stopBubbling: (e: SyntheticEvent) => void;
-    private _isString;
-    render(): React.JSX.Element;
-}

package/components/list/list__item.js

@@ -1,130 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import dataTests from '../global/data-tests';
-import Avatar, { Size as AvatarSize } from '../avatar/avatar';
-import Checkbox from '../checkbox/checkbox';
-import Icon from '../icon/icon';
-import getUID from '../global/get-uid';
-import globalStyles from '../global/global.css';
-import styles from './list.css';
-/**
- * @constructor
- * @extends {ReactComponent}
- */
-const RING_UNIT = 8;
-const DEFAULT_PADDING = 16;
-const CHECKBOX_WIDTH = 28;
-export default class ListItem extends PureComponent {
-    id = getUID('list-item-');
-    stopBubbling = (e) => e.stopPropagation();
-    _isString = (val) => typeof val === 'string' || val instanceof String;
-    render() {
-        const { scrolling, className, disabled, checkbox, avatar, subavatar, glyph, icon, rightGlyph, description, label, title, details, hover, rgItemType, level, tabIndex, compact, onClick, onCheckboxChange, onMouseOver, onMouseDown, onMouseUp, rightNodes, leftNodes, showGeneratedAvatar, username, labelWrapper, ...restProps } = this.props;
-        const checkable = checkbox !== undefined;
-        const shouldShowGeneratedAvatar = showGeneratedAvatar && username != null;
-        const hasLeftNodes = leftNodes || glyph || avatar || shouldShowGeneratedAvatar;
-        const showCheckbox = checkable && (checkbox || !hasLeftNodes || (hover && !disabled));
-        const classes = classNames(styles.item, globalStyles.resetButton, className, {
-            [styles.action]: !disabled,
-            [styles.hover]: hover && !disabled,
-            [styles.compact]: compact,
-            [styles.scrolling]: scrolling,
-            [styles.disabled]: disabled
-        });
-        const detailsClasses = classNames({
-            [styles.details]: details,
-            [styles.padded]: icon !== undefined ||
-                checkbox !== undefined ||
-                glyph !== undefined
-        });
-        const style = {
-            paddingLeft: `${(Number(level) || 0) * RING_UNIT + DEFAULT_PADDING + (showCheckbox ? CHECKBOX_WIDTH : 0)}px`
-        };
-        let computedTitle = null;
-        if (this._isString(title)) {
-            // if title is specified and is a string then use it
-            computedTitle = title;
-        }
-        else {
-            // otherwise use label if it is a string;
-            // label can also be an element, use empty string in this case
-            computedTitle = this._isString(label) ? label : '';
-        }
-        const dataTest = dataTests({
-            'ring-list-item': (restProps['data-test'] || '').indexOf('ring-list-item') === -1,
-            'ring-list-item-action': !disabled,
-            'ring-list-item-selected': checkbox
-        }, restProps['data-test']);
-        const labelElement = (<span className={styles.label} title={computedTitle} data-test="ring-list-item-label">{label}</span>);
-        return (<div className={styles.itemContainer} data-test={dataTest}>
-        {showCheckbox && (<div className={styles.checkboxContainer}>
-            <Checkbox aria-labelledby={this.id} checked={checkbox} disabled={disabled} onChange={onCheckboxChange} onClick={this.stopBubbling}/>
-          </div>)}
-        <button id={this.id} type="button" tabIndex={tabIndex} onClick={onClick} onMouseOver={onMouseOver} onMouseDown={onMouseDown} onFocus={onMouseOver} onMouseUp={onMouseUp} className={classes} style={style}>
-          <div className={styles.top} onMouseOut={this.stopBubbling} onBlur={this.stopBubbling}>
-            {!showCheckbox && (<div className={styles.left}>
-                {leftNodes}
-                {glyph && (<Icon className={styles.glyph} glyph={glyph} size={this.props.iconSize}/>)}
-                {(avatar || shouldShowGeneratedAvatar) && (<Avatar className={styles.avatar} url={avatar} size={AvatarSize.Size20} subavatar={subavatar} username={username}/>)}
-              </div>)}
-
-            {labelWrapper ? labelWrapper(labelElement) : labelElement}
-
-            {description && (<span className={styles.description} data-test="ring-list-item-description">{description}</span>)}
-
-            <div className={styles.right}>
-              {rightGlyph && (<Icon className={styles.rightGlyph} glyph={rightGlyph} size={this.props.iconSize}/>)}
-              {icon && (<div className={styles.icon} style={{ backgroundImage: `url("${icon}")` }}/>)}
-              {rightNodes}
-            </div>
-          </div>
-
-          {details && <div className={detailsClasses}>{details}</div>}
-        </button>
-      </div>);
-    }
-}
-ListItem.propTypes = {
-    scrolling: PropTypes.bool,
-    hover: PropTypes.bool,
-    details: PropTypes.string,
-    disabled: PropTypes.bool,
-    className: PropTypes.string,
-    tabIndex: PropTypes.number,
-    checkbox: PropTypes.bool,
-    description: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.element,
-        PropTypes.array
-    ]),
-    showGeneratedAvatar: PropTypes.bool,
-    username: PropTypes.string,
-    avatar: PropTypes.string,
-    subavatar: PropTypes.string,
-    glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-    icon: PropTypes.string,
-    iconSize: PropTypes.number,
-    rightNodes: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.element,
-        PropTypes.array
-    ]),
-    leftNodes: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.element,
-        PropTypes.array
-    ]),
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    title: PropTypes.string,
-    level: PropTypes.number,
-    rgItemType: PropTypes.number,
-    rightGlyph: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-    compact: PropTypes.bool,
-    onClick: PropTypes.func,
-    onCheckboxChange: PropTypes.func,
-    onMouseOver: PropTypes.func,
-    onMouseDown: PropTypes.func,
-    onMouseUp: PropTypes.func,
-    'data-test': PropTypes.string
-};

package/components/list/list__link.d.ts

@@ -1,9 +0,0 @@
-import React, { PureComponent } from 'react';
-import { ListDataItemProps } from './consts';
-/**
- * @constructor
- * @extends {ReactComponent}
- */
-export default class ListLink<T> extends PureComponent<ListDataItemProps<T>> {
-    render(): React.JSX.Element;
-}

package/components/list/list__link.js

@@ -1,43 +0,0 @@
-import React, { Component, PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Link, { linkHOC } from '../link/link';
-import dataTests from '../global/data-tests';
-import styles from './list.css';
-/**
- * @constructor
- * @extends {ReactComponent}
- */
-export default class ListLink extends PureComponent {
-    render() {
-        const { scrolling, 'data-test': dataTest, className, label, hover, description, rgItemType, url, onCheckboxChange, disabled, LinkComponent, compact, hoverClassName, children, ...restProps } = this.props;
-        const classes = classNames(styles.item, className, {
-            [styles.actionLink]: !disabled,
-            [styles.compact]: compact,
-            [styles.scrolling]: scrolling
-        });
-        const Comp = LinkComponent ? linkHOC(LinkComponent) : Link;
-        return (<Comp pseudo={!this.props.href} {...restProps} hover={hover && !disabled} className={classes} data-test={dataTests('ring-list-link', dataTest)}>
-        {label ?? children}
-      </Comp>);
-    }
-}
-ListLink.propTypes = {
-    ...Link.propTypes,
-    description: PropTypes.string,
-    label: PropTypes.oneOfType([
-        PropTypes.element,
-        PropTypes.string,
-        PropTypes.func
-    ]),
-    rgItemType: PropTypes.number,
-    scrolling: PropTypes.bool.isRequired,
-    url: PropTypes.string,
-    LinkComponent: PropTypes.oneOfType([
-        PropTypes.instanceOf(Component),
-        PropTypes.func,
-        PropTypes.string
-    ]),
-    onCheckboxChange: PropTypes.func.isRequired,
-    compact: PropTypes.bool
-};

package/components/list/list__separator.d.ts

@@ -1,5 +0,0 @@
-import React, { PureComponent } from 'react';
-import { ListDataItemProps } from './consts';
-export default class ListSeparator<T> extends PureComponent<ListDataItemProps<T>> {
-    render(): React.JSX.Element;
-}

package/components/list/list__separator.js

@@ -1,21 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import styles from './list.css';
-export default class ListSeparator extends PureComponent {
-    render() {
-        const { description, isFirst, className } = this.props;
-        const classes = classNames(styles.separator, className, {
-            [styles.separator_first]: isFirst
-        });
-        return (<span className={classes}>{description}</span>);
-    }
-}
-ListSeparator.propTypes = {
-    className: PropTypes.string,
-    description: PropTypes.oneOfType([
-        PropTypes.element,
-        PropTypes.string
-    ]),
-    isFirst: PropTypes.bool
-};

package/components/list/list__title.d.ts

@@ -1,5 +0,0 @@
-import React, { PureComponent } from 'react';
-import { ListDataItemProps } from './consts';
-export default class ListTitle<T> extends PureComponent<ListDataItemProps<T>> {
-    render(): React.JSX.Element;
-}

package/components/list/list__title.js

@@ -1,28 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import styles from './list.css';
-export default class ListTitle extends PureComponent {
-    render() {
-        const { className, description, label, isFirst } = this.props;
-        const classes = classnames(styles.title, className, {
-            [styles.title_first]: isFirst
-        });
-        return (<span className={classes} data-test="ring-list-title">
-        <span className={classnames(styles.label, styles.text)} data-test="ring-list-title-label">{label}</span>
-        <div className={styles.description} data-test="ring-list-title-description">{description}</div>
-      </span>);
-    }
-}
-ListTitle.propTypes = {
-    className: PropTypes.string,
-    description: PropTypes.oneOfType([
-        PropTypes.element,
-        PropTypes.string
-    ]),
-    label: PropTypes.oneOfType([
-        PropTypes.element,
-        PropTypes.string
-    ]),
-    isFirst: PropTypes.bool
-};

package/components/list/list__users-groups-source.d.ts

@@ -1,27 +0,0 @@
-import Auth, { AuthUser } from '../auth/auth';
-import HubSourceUsersGroups, { HubSourceUsersGroupsOptions, UserGroup } from '../hub-source/hub-source__users-groups';
-interface ListUsersGroupsSourceOptions extends Partial<HubSourceUsersGroupsOptions> {
-    GroupsTitle: string;
-    NoGroupsTitle: string;
-    UsersTitle: string;
-    NoUsersTitle: string;
-    getPluralForUserCount: (count: number) => string;
-}
-declare enum Filter {
-    ALL = 0,
-    USERS = 1,
-    GROUPS = 2
-}
-export default class ListUsersGroupsSource extends HubSourceUsersGroups {
-    static Filter: typeof Filter;
-    listSourceOptions: ListUsersGroupsSourceOptions;
-    constructor(auth: Auth, options?: Partial<ListUsersGroupsSourceOptions>);
-    getGroupsSectionTitle(groups: UserGroup[]): string;
-    getUsersSectionTitle(users: AuthUser[]): string;
-    getForList(query?: string, filter?: Filter): Promise<{
-        rgItemType: import("./consts").Type;
-        key: number;
-        description: string;
-    }[]>;
-}
-export {};

package/components/list/list__users-groups-source.js

@@ -1,74 +0,0 @@
-import GroupIcon from '@jetbrains/icons/group';
-import HubSourceUsersGroups from '../hub-source/hub-source__users-groups';
-import List from './list';
-const defaultOptions = {
-    GroupsTitle: 'Groups',
-    NoGroupsTitle: 'No groups',
-    UsersTitle: 'Users',
-    NoUsersTitle: 'No users',
-    getPluralForUserCount: count => {
-        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-        const plural = count % 10 !== 1 || count % 100 === 11;
-        return `${count} member${plural ? 's' : ''}`;
-    }
-};
-var Filter;
-(function (Filter) {
-    Filter[Filter["ALL"] = 0] = "ALL";
-    Filter[Filter["USERS"] = 1] = "USERS";
-    Filter[Filter["GROUPS"] = 2] = "GROUPS";
-})(Filter || (Filter = {}));
-export default class ListUsersGroupsSource extends HubSourceUsersGroups {
-    static Filter = Filter;
-    listSourceOptions;
-    constructor(auth, options) {
-        super(auth, options);
-        this.listSourceOptions = Object.assign({}, defaultOptions, options);
-    }
-    getGroupsSectionTitle(groups) {
-        return groups.length
-            ? this.listSourceOptions.GroupsTitle
-            : this.listSourceOptions.NoGroupsTitle;
-    }
-    getUsersSectionTitle(users) {
-        return users.length ? this.listSourceOptions.UsersTitle : this.listSourceOptions.NoUsersTitle;
-    }
-    async getForList(query, filter = Filter.ALL) {
-        const [users, groups] = await this.getUserAndGroups(query);
-        const items = [];
-        if (filter === Filter.ALL) {
-            items.push({
-                rgItemType: List.ListProps.Type.SEPARATOR,
-                key: 2,
-                description: this.getUsersSectionTitle(users)
-            });
-        }
-        if (filter !== Filter.GROUPS) {
-            users.forEach(user => items.push({
-                ...user,
-                key: user.id,
-                label: user.name,
-                avatar: user.profile ? user.profile.avatar?.url : null,
-                description: user.login
-            }));
-        }
-        if (filter === Filter.ALL) {
-            items.push({
-                rgItemType: List.ListProps.Type.SEPARATOR,
-                key: 1,
-                description: this.getGroupsSectionTitle(groups)
-            });
-        }
-        if (filter !== Filter.USERS) {
-            groups.forEach(group => items.push({
-                ...group,
-                key: group.id,
-                label: group.name,
-                avatar: group.iconUrl,
-                glyph: group.iconUrl ? null : GroupIcon,
-                description: this.listSourceOptions.getPluralForUserCount(group.userCount)
-            }));
-        }
-        return items;
-    }
-}

package/components/loader/loader.css

@@ -1,29 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-@keyframes rotation-keyframes {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.canvas {
-  display: block;
-
-  margin: calc(unit * 2) auto;
-
-  pointer-events: none;
-}
-
-.animate {
-  animation: rotation-keyframes 36s linear infinite;
-}
-
-.text {
-  text-align: center;
-
-  font-family: var(--ring-font-family);
-  font-size: var(--ring-font-size);
-  line-height: var(--ring-line-height);
-}

package/components/loader/loader.d.ts

@@ -1,28 +0,0 @@
-import React, { HTMLAttributes, PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import LoaderCore, { LoaderCoreProps } from './loader__core';
-export interface LoaderProps extends Partial<LoaderCoreProps>, HTMLAttributes<HTMLElement> {
-    'data-test'?: string | null | undefined;
-}
-/**
- * @name Loader
- */
-/**
- * Displays a large animated loader with an optional caption. Typical use cases: page loading animation, major action animation.
- */
-export default class Loader extends PureComponent<LoaderProps> {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<number>;
-        colors: PropTypes.Requireable<any[]>;
-        message: PropTypes.Requireable<string>;
-        'data-test': PropTypes.Requireable<string>;
-        stop: PropTypes.Requireable<boolean>;
-        deterministic: PropTypes.Requireable<boolean>;
-    };
-    componentDidUpdate(prevProps: LoaderProps): void;
-    componentWillUnmount(): void;
-    loader?: LoaderCore;
-    initLoader: (el: Node | null) => void;
-    render(): React.JSX.Element;
-}

package/components/loader/loader.js

@@ -1,44 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import dataTests from '../global/data-tests';
-import LoaderCore from './loader__core';
-/**
- * @name Loader
- */
-/**
- * Displays a large animated loader with an optional caption. Typical use cases: page loading animation, major action animation.
- */
-export default class Loader extends PureComponent {
-    static propTypes = {
-        className: PropTypes.string,
-        size: PropTypes.number,
-        colors: PropTypes.array,
-        message: PropTypes.string,
-        'data-test': PropTypes.string,
-        stop: PropTypes.bool,
-        deterministic: PropTypes.bool
-    };
-    componentDidUpdate(prevProps) {
-        if (this.loader) {
-            if (!prevProps.stop && this.props.stop) {
-                this.loader.stopAnimation();
-            }
-            else if (prevProps.stop && !this.props.stop) {
-                this.loader.startAnimation();
-            }
-        }
-    }
-    componentWillUnmount() {
-        this.loader?.destroy();
-    }
-    loader;
-    initLoader = (el) => {
-        if (el) {
-            this.loader = new LoaderCore(el, this.props);
-        }
-    };
-    render() {
-        const { message, size, colors, 'data-test': dataTest, stop, deterministic, ...restProps } = this.props;
-        return (<div data-test={dataTests('ring-loader', dataTest)} {...restProps} ref={this.initLoader}/>);
-    }
-}

package/components/loader/loader__core.d.ts

@@ -1,75 +0,0 @@
-export interface Color {
-    r: number;
-    g: number;
-    b: number;
-}
-interface ParticleType {
-    step(): void;
-    isAlive(): boolean;
-    draw(ctx: CanvasRenderingContext2D): void;
-}
-export interface LoaderCoreProps {
-    size: number;
-    stop: boolean;
-    deterministic: boolean;
-    colors: Color[];
-    message?: string | null | undefined;
-}
-export default class LoaderCore {
-    static defaultProps: {
-        size: number;
-        stop: boolean;
-        deterministic: boolean;
-        colors: {
-            r: number;
-            g: number;
-            b: number;
-        }[];
-    };
-    static calculateGradient(startColor: Color, stopColor: Color, position: number): {
-        r: number;
-        g: number;
-        b: number;
-    };
-    props: LoaderCoreProps;
-    canvas: HTMLCanvasElement;
-    textNode: HTMLElement;
-    ctx: CanvasRenderingContext2D | null;
-    height: number;
-    width: number;
-    particles: ParticleType[];
-    baseSpeed: number;
-    colorIndex: number;
-    maxRadius: number;
-    minRadius: number;
-    colorChangeTick: number;
-    x: number;
-    y: number;
-    radius: number;
-    hSpeed: number;
-    vSpeed: number;
-    radiusSpeed: number;
-    tick: number;
-    isRunning: boolean;
-    constructor(containerNode: Node, props: Partial<LoaderCoreProps>);
-    static getPixelRatio(): number;
-    prepareInitialState(ticks: number): void;
-    handleLimits(coord: number, radius: number, speed: number, limit: number): number;
-    calculateNextCoordinates(): void;
-    calculateNextRadius(): void;
-    getNextColor(): {
-        r: number;
-        g: number;
-        b: number;
-    };
-    nextTick(): void;
-    step(): void;
-    removeDeadParticles(): void;
-    draw(): void;
-    loop(): void;
-    updateMessage(text: string): void;
-    stopAnimation(): void;
-    startAnimation(): void;
-    destroy(): void;
-}
-export {};