@jetbrains/ring-ui 5.1.22 → 5.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "5.1.22",
+  "version": "5.1.23",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -85,7 +85,7 @@
     "@rollup/plugin-json": "^6.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
-    "@storybook/addon-a11y": "7.6.3",
+    "@storybook/addon-a11y": "7.6.4",
     "@storybook/addon-docs": "7.6.3",
     "@storybook/addon-essentials": "7.6.3",
     "@storybook/addon-storyshots": "7.4.5",
@@ -105,11 +105,11 @@
     "@types/chai-dom": "0.0.10",
     "@types/chai-enzyme": "^0.6.13",
     "@types/enzyme": "^3.10.18",
-    "@types/react": "^18.2.42",
+    "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@types/sinon": "^17.0.2",
     "@types/sinon-chai": "^3.2.12",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.13.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.11.2",
@@ -201,7 +201,7 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.23.5",
+    "@babel/core": "^7.23.6",
     "@babel/preset-typescript": "^7.23.3",
     "@jetbrains/babel-preset-jetbrains": "^2.3.2",
     "@jetbrains/icons": "^3.22.0",
@@ -223,7 +223,7 @@
     "combokeys": "^3.0.1",
     "compile-code-loader": "^1.0.0",
     "css-loader": "^6.8.1",
-    "csstype": "^3.1.2",
+    "csstype": "^3.1.3",
     "date-fns": "^2.30.0",
     "deep-equal": "^2.2.3",
     "element-resize-detector": "^1.2.4",

package/components/alert/alert.css

@@ -1,147 +0,0 @@
-@import "../global/variables.css";
-
-@value link from "../link/link.css";
-@value unit from "../global/global.css";
-@value animation-duration: 300ms;
-@value animation-easing: ease-out;
-
-.alert {
-  position: relative;
-
-  display: flex;
-  align-items: baseline;
-
-  box-sizing: border-box;
-  min-height: calc(unit * 5);
-  margin: unit auto;
-  padding: 0 calc(unit * 2);
-
-  transition:
-    transform animation-duration animation-easing,
-    margin-bottom animation-duration animation-easing,
-    opacity animation-duration animation-easing;
-  white-space: nowrap;
-  pointer-events: auto;
-
-  border-radius: var(--ring-border-radius);
-  background-color: var(--ring-popup-background-color);
-  box-shadow: var(--ring-popup-shadow);
-
-  font-size: var(--ring-font-size);
-  line-height: calc(unit * 5);
-}
-
-.alertInline {
-  margin: unit;
-}
-
-.error {
-  word-wrap: break-word;
-
-  color: var(--ring-icon-error-color);
-}
-
-.icon {
-  margin-right: unit;
-}
-
-.caption {
-  overflow: hidden;
-
-  max-width: calc(100% - calc(unit * 5));
-
-  margin: 12px 0;
-
-  white-space: normal;
-
-  color: var(--ring-active-text-color);
-
-  line-height: 20px;
-
-  & :global(.ring-link),
-  /* This link styles are used in link.css */
-  & .link {
-    color: var(--ring-main-color);
-  }
-
-  &.withCloseButton {
-    margin-right: calc(unit * 5);
-  }
-}
-
-.badge {
-  margin-left: unit;
-
-  vertical-align: baseline;
-}
-
-.loader {
-  top: 2px;
-
-  margin-right: unit;
-}
-
-.close.close {
-  position: absolute;
-  top: 2px;
-  right: 0;
-
-  margin: calc(unit / 2);
-  padding: unit;
-
-  font-size: 0;
-  line-height: 0;
-}
-
-@keyframes show {
-  from {
-    transform: translateY(100%);
-
-    opacity: 0;
-  }
-
-  to {
-    transform: translateY(0);
-
-    opacity: 1;
-  }
-}
-
-@keyframes shaking {
-  10%,
-  90% {
-    transform: translateX(-1px);
-  }
-
-  20%,
-  80% {
-    transform: translateX(2px);
-  }
-
-  30%,
-  50%,
-  70% {
-    transform: translateX(-4px);
-  }
-
-  40%,
-  60% {
-    transform: translateX(4px);
-  }
-}
-
-.animationOpen {
-  animation-name: show;
-  animation-duration: animation-duration;
-}
-
-.animationClosing {
-  z-index: var(--ring-invisible-element-z-index);
-
-  opacity: 0;
-}
-
-.animationShaking {
-  animation-name: shaking;
-  animation-duration: 500ms;
-}

package/components/alert/alert.d.ts

@@ -1,113 +0,0 @@
-import React, { PureComponent, ReactNode } from 'react';
-import PropTypes from 'prop-types';
-import Theme from '../global/theme';
-export declare const ANIMATION_TIME = 500;
-/**
- * @name Alert
- */
-/**
- * List of available alert types.
- * @enum {string}
- */
-export declare enum AlertType {
-    ERROR = "error",
-    MESSAGE = "message",
-    SUCCESS = "success",
-    WARNING = "warning",
-    LOADING = "loading"
-}
-export interface AlertProps {
-    theme: Theme;
-    timeout: number;
-    onCloseRequest: ((event?: React.MouseEvent<HTMLElement>) => void);
-    onClose: (() => void);
-    isShaking: boolean;
-    isClosing: boolean;
-    inline: boolean;
-    showWithAnimation: boolean;
-    closeable: boolean;
-    type: AlertType;
-    children?: ReactNode;
-    className?: string | null | undefined;
-    captionClassName?: string | null | undefined;
-    closeButtonClassName?: string | null | undefined;
-    'data-test'?: string | null | undefined;
-}
-interface State {
-    height: number | null;
-}
-/**
- * @constructor
- * @name Alert
- * @extends {ReactComponent}
- */
-/**
- * **Alert** is a component for displaying contextual notifications. If you want to display a stack of notifications, use **Alerts** instead.
- */
-export default class Alert extends PureComponent<AlertProps, State> {
-    static propTypes: {
-        timeout: PropTypes.Requireable<number>;
-        /**
-         * Fires when alert starts closing if timeout is out or user clicks "Close" button
-         */
-        onCloseRequest: PropTypes.Requireable<(...args: any[]) => any>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        isShaking: PropTypes.Requireable<boolean>;
-        isClosing: PropTypes.Requireable<boolean>;
-        /**
-         * Whether an alert is rendered inside an **Alerts** container
-         * or standalone.
-         */
-        inline: PropTypes.Requireable<boolean>;
-        showWithAnimation: PropTypes.Requireable<boolean>;
-        closeable: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<AlertType>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-        captionClassName: PropTypes.Requireable<string>;
-        closeButtonClassName: PropTypes.Requireable<string>;
-        'data-test': PropTypes.Requireable<string>;
-    };
-    /** @override */
-    static defaultProps: {
-        theme: Theme;
-        closeable: boolean;
-        showWithAnimation: boolean;
-        type: AlertType;
-        inline: boolean;
-        isClosing: boolean;
-        isShaking: boolean;
-        timeout: number;
-        onClose: () => void;
-        onCloseRequest: () => void;
-    };
-    state: {
-        height: null;
-    };
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    node?: HTMLDivElement | null;
-    hideTimeout?: number;
-    static Type: typeof AlertType;
-    closeRequest: (event: React.MouseEvent<HTMLElement>) => void;
-    startCloseAnimation: () => void;
-    private _close;
-    /**
-     * @param {SyntheticEvent} evt
-     * @private
-     */
-    private _handleCaptionsLinksClick;
-    /**
-     * @private
-     */
-    private _getCaption;
-    /**
-     * @private
-     * @return {XML|string}
-     */
-    private _getIcon;
-    storeAlertRef: (node: HTMLDivElement | null) => void;
-    render(): React.JSX.Element;
-}
-export { default as Container } from './container';

package/components/alert/alert.js

@@ -1,186 +0,0 @@
-import React, { PureComponent } from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import exceptionIcon from '@jetbrains/icons/exception';
-import checkmarkIcon from '@jetbrains/icons/checkmark';
-import warningIcon from '@jetbrains/icons/warning';
-import closeIcon from '@jetbrains/icons/close';
-import Icon, { Color } from '../icon/icon';
-import Loader from '../loader-inline/loader-inline';
-import { getRect } from '../global/dom';
-import dataTests from '../global/data-tests';
-import Button from '../button/button';
-import Theme, { ThemeProvider } from '../global/theme';
-import styles from './alert.css';
-export const ANIMATION_TIME = 500;
-/**
- * @name Alert
- */
-/**
- * List of available alert types.
- * @enum {string}
- */
-export var AlertType;
-(function (AlertType) {
-    AlertType["ERROR"] = "error";
-    AlertType["MESSAGE"] = "message";
-    AlertType["SUCCESS"] = "success";
-    AlertType["WARNING"] = "warning";
-    AlertType["LOADING"] = "loading";
-})(AlertType || (AlertType = {}));
-/**
- * Lookup table of alert type to icon modifier.
- * @type {Object.<AlertType, string>}
- */
-const TypeToIcon = {
-    [AlertType.ERROR]: exceptionIcon,
-    [AlertType.SUCCESS]: checkmarkIcon,
-    [AlertType.WARNING]: warningIcon
-};
-/**
- * Lookup table of alert type to icon color.
- * @type {Object.<AlertType, Icon.Color>}
- */
-const TypeToIconColor = {
-    [AlertType.ERROR]: Color.RED,
-    [AlertType.SUCCESS]: Color.GREEN,
-    [AlertType.WARNING]: Color.WHITE
-};
-/**
- * @constructor
- * @name Alert
- * @extends {ReactComponent}
- */
-/**
- * **Alert** is a component for displaying contextual notifications. If you want to display a stack of notifications, use **Alerts** instead.
- */
-export default class Alert extends PureComponent {
-    static propTypes = {
-        timeout: PropTypes.number,
-        /**
-         * Fires when alert starts closing if timeout is out or user clicks "Close" button
-         */
-        onCloseRequest: PropTypes.func,
-        onClose: PropTypes.func,
-        isShaking: PropTypes.bool,
-        isClosing: PropTypes.bool,
-        /**
-         * Whether an alert is rendered inside an **Alerts** container
-         * or standalone.
-         */
-        inline: PropTypes.bool,
-        showWithAnimation: PropTypes.bool,
-        closeable: PropTypes.bool,
-        type: PropTypes.oneOf(Object.values(AlertType)),
-        children: PropTypes.node,
-        className: PropTypes.string,
-        captionClassName: PropTypes.string,
-        closeButtonClassName: PropTypes.string,
-        'data-test': PropTypes.string
-    };
-    /** @override */
-    static defaultProps = {
-        theme: Theme.DARK,
-        closeable: true,
-        showWithAnimation: true,
-        type: AlertType.MESSAGE,
-        inline: true,
-        isClosing: false,
-        isShaking: false,
-        timeout: 0,
-        onClose: () => { },
-        onCloseRequest: () => { }
-    };
-    state = {
-        height: null
-    };
-    componentDidMount() {
-        if (this.props.timeout > 0) {
-            this.hideTimeout = window.setTimeout(this.closeRequest, this.props.timeout);
-        }
-    }
-    componentDidUpdate() {
-        if (this.props.isClosing) {
-            this._close();
-        }
-    }
-    componentWillUnmount() {
-        clearTimeout(this.hideTimeout);
-    }
-    node;
-    hideTimeout;
-    static Type = AlertType;
-    closeRequest = (event) => {
-        this.startCloseAnimation();
-        return this.props.onCloseRequest(event);
-    };
-    startCloseAnimation = () => {
-        const height = getRect(this.node).height;
-        this.setState({ height });
-    };
-    _close() {
-        this.startCloseAnimation();
-        setTimeout(() => {
-            this.props.onClose();
-        }, ANIMATION_TIME);
-    }
-    /**
-     * @param {SyntheticEvent} evt
-     * @private
-     */
-    _handleCaptionsLinksClick = (evt) => {
-        if (evt.target instanceof Element && evt.target.matches('a')) {
-            this.closeRequest(evt);
-        }
-    };
-    /**
-     * @private
-     */
-    _getCaption() {
-        return (<span className={classNames(styles.caption, this.props.captionClassName, {
-                [styles.withCloseButton]: this.props.closeable
-            })} onClick={this._handleCaptionsLinksClick} 
-        // We only process clicks on `a` elements, see above
-        role="presentation">
-        {this.props.children}
-      </span>);
-    }
-    /**
-     * @private
-     * @return {XML|string}
-     */
-    _getIcon() {
-        const glyph = TypeToIcon[this.props.type];
-        if (glyph) {
-            return (<Icon glyph={glyph} className={styles.icon} color={TypeToIconColor[this.props.type] || Color.DEFAULT}/>);
-        }
-        else if (this.props.type === AlertType.LOADING) {
-            return (<Loader className={styles.loader}/>);
-        }
-        return '';
-    }
-    storeAlertRef = (node) => {
-        this.node = node;
-    };
-    render() {
-        const { type, inline, isClosing, isShaking, closeButtonClassName, showWithAnimation, className, 'data-test': dataTest, theme } = this.props;
-        const classes = classNames(className, {
-            [styles.alert]: true,
-            [styles.animationOpen]: showWithAnimation,
-            [styles.error]: type === 'error',
-            [styles.alertInline]: inline,
-            [styles.animationClosing]: isClosing,
-            [styles.animationShaking]: isShaking
-        });
-        const height = this.state.height;
-        const style = height ? { marginBottom: -height } : undefined;
-        return (<ThemeProvider theme={theme} className={classes} data-test={dataTests('alert', dataTest)} data-test-type={type} style={style} ref={this.storeAlertRef}>
-        {this._getIcon()}
-        {this._getCaption()}
-        {this.props.closeable
-                ? (<Button icon={closeIcon} className={classNames(styles.close, closeButtonClassName)} data-test="alert-close" aria-label="close alert" onClick={this.closeRequest}/>)
-                : ''}
-      </ThemeProvider>);
-    }
-}
-export { default as Container } from './container';

package/components/alert/container.css

@@ -1,28 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-.alertContainer {
-  position: fixed;
-  z-index: var(--ring-alert-z-index);
-  right: calc(unit * 2);
-  bottom: calc(unit);
-
-  display: flex;
-  overflow: visible;
-  align-items: flex-end;
-  flex-direction: column;
-
-  pointer-events: none;
-
-  font-family: var(--ring-font-family);
-  font-size: var(--ring-font-size);
-}
-
-.alertInContainer {
-  composes: alert from "./alert.css";
-
-  min-width: calc(unit * 30);
-  max-width: calc(unit * 50);
-  margin-top: 0;
-}

package/components/alert/container.d.ts

@@ -1,15 +0,0 @@
-import React, { PureComponent, HTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
-/**
- * @name Alert Container
- * @description Displays a stack of alerts on top of the page.
- * @extends {PureComponent}
- */
-export type AlertContainerProps = HTMLAttributes<HTMLDivElement>;
-export default class Alerts extends PureComponent<AlertContainerProps> {
-    static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-    };
-    render(): React.ReactPortal | null;
-}

package/components/alert/container.js

@@ -1,30 +0,0 @@
-import React, { Children, cloneElement, PureComponent, isValidElement } from 'react';
-import { createPortal } from 'react-dom';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import styles from './container.css';
-export default class Alerts extends PureComponent {
-    static propTypes = {
-        children: PropTypes.node,
-        className: PropTypes.string
-    };
-    render() {
-        const { children, className, ...restProps } = this.props;
-        const classes = classNames(styles.alertContainer, className);
-        const show = Children.count(children) > 0;
-        if (!show) {
-            return null;
-        }
-        return createPortal(<div data-test="alert-container" className={classes} aria-live="polite" {...restProps}>
-        {Children.map(children, child => {
-                if (!isValidElement(child)) {
-                    return child;
-                }
-                const alertClassNames = classNames(styles.alertInContainer, child.props.className);
-                return cloneElement(child, {
-                    className: alertClassNames
-                });
-            })}
-      </div>, document.body);
-    }
-}

package/components/alert-service/alert-service.d.ts

@@ -1,34 +0,0 @@
-import React, { ReactNode } from 'react';
-import { AlertProps, AlertType } from '../alert/alert';
-export interface AlertItem extends Partial<Omit<AlertProps, 'children'>> {
-    key: string | number;
-    message: ReactNode;
-}
-/**
- * @name Alert Service
- */
-declare class AlertService {
-    defaultTimeout: number;
-    showingAlerts: AlertItem[];
-    containerElement: HTMLDivElement;
-    _getShowingAlerts(): AlertItem[];
-    renderAlertContainer(alerts: readonly AlertItem[]): React.JSX.Element;
-    /**
-     * Renders alert container into virtual node to skip maintaining container
-     */
-    renderAlerts(): void;
-    findSameAlert(message: ReactNode, type: AlertType | undefined): AlertItem;
-    startAlertClosing(alert: AlertItem): void;
-    remove(key: string | number | null | undefined): void;
-    removeWithoutAnimation(key: string | number): void;
-    stopShakingWhenAnimationDone(shakingAlert: AlertItem): void;
-    addAlert(message: ReactNode, type?: AlertType | undefined, timeout?: number, options?: Partial<AlertItem>): string | number;
-    setDefaultTimeout(timeout: number): void;
-    error(message: ReactNode, timeout?: number): string | number;
-    message(message: ReactNode, timeout?: number): string | number;
-    warning(message: ReactNode, timeout?: number): string | number;
-    successMessage(message: ReactNode, timeout?: number): string | number;
-    loadingMessage(message: ReactNode, timeout?: number): string | number;
-}
-declare const alertService: AlertService;
-export default alertService;