@jetbrains/ring-ui-built 6.0.1

package/components/alert/alert.d.ts

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

@@ -0,0 +1,294 @@
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.object.values.js';
+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 from '../icon/icon.js';
+import LoaderInline from '../loader-inline/loader-inline.js';
+import { getRect } from '../global/dom.js';
+import joinDataTestAttributes from '../global/data-tests.js';
+import { Button } from '../button/button.js';
+import { T as Theme, a as ThemeProvider } from '../_helpers/theme.js';
+export { default as Container } from './container.js';
+import { Color } from '../icon/icon__constants.js';
+import 'util-deprecate';
+import '../_helpers/icon__svg.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/es.string.starts-with.js';
+import '../global/memoize.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.map.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.js';
+import 'core-js/modules/es.array.reduce.js';
+import 'core-js/modules/es.object.entries.js';
+import 'core-js/modules/es.object.assign.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.string.split.js';
+import 'core-js/modules/es.set.js';
+import '@jetbrains/icons/chevron-10px';
+import '../link/clickableLink.js';
+import '../global/controls-height.js';
+import '../_helpers/button__classes.js';
+import 'react-dom';
+import '../popup/popup.target.js';
+import '../popup/popup.js';
+import 'core-js/modules/es.regexp.to-string.js';
+import '../global/get-uid.js';
+import '../global/schedule-raf.js';
+import '../shortcuts/shortcuts.js';
+import 'core-js/modules/es.array.map.js';
+import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.string.match.js';
+import 'core-js/modules/es.array.find-index.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
+import '../popup/popup.consts.js';
+
+var modules_e02b3280 = {"link":"link_rui_d382","animation-duration":"300ms","animation-easing":"ease-out","light":"light_rui_2ac4","alert":"alert_rui_2b32","alertInline":"alertInline_rui_2b32","error":"error_rui_2b32","icon":"icon_rui_2b32","caption":"caption_rui_2b32","withCloseButton":"withCloseButton_rui_2b32","badge":"badge_rui_2b32","loader":"loader_rui_2b32","close":"close_rui_2b32","animationOpen":"animationOpen_rui_2b32","show":"show_rui_2b32","animationClosing":"animationClosing_rui_2b32","animationShaking":"animationShaking_rui_2b32","shaking":"shaking_rui_2b32"};
+
+var ANIMATION_TIME = 500;
+/**
+ * @name Alert
+ */
+/**
+ * List of available alert types.
+ * @enum {string}
+ */
+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>}
+ */
+var TypeToIcon = {
+  [AlertType.ERROR]: exceptionIcon,
+  [AlertType.SUCCESS]: checkmarkIcon,
+  [AlertType.WARNING]: warningIcon
+};
+/**
+ * Lookup table of alert type to icon color.
+ * @type {Object.<AlertType, Icon.Color>}
+ */
+var 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.
+ */
+var Alert = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Alert, _PureComponent);
+  var _super = _createSuper(Alert);
+  function Alert() {
+    var _this;
+    _classCallCheck(this, Alert);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      height: null
+    });
+    _defineProperty(_assertThisInitialized(_this), "node", void 0);
+    _defineProperty(_assertThisInitialized(_this), "hideTimeout", void 0);
+    _defineProperty(_assertThisInitialized(_this), "closeRequest", function (event) {
+      _this.startCloseAnimation();
+      return _this.props.onCloseRequest(event);
+    });
+    _defineProperty(_assertThisInitialized(_this), "startCloseAnimation", function () {
+      var height = getRect(_this.node).height;
+      _this.setState({
+        height
+      });
+    });
+    /**
+     * @param {SyntheticEvent} evt
+     * @private
+     */
+    _defineProperty(_assertThisInitialized(_this), "_handleCaptionsLinksClick", function (evt) {
+      if (evt.target instanceof Element && evt.target.matches('a')) {
+        _this.closeRequest(evt);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "storeAlertRef", function (node) {
+      _this.node = node;
+    });
+    return _this;
+  }
+  _createClass(Alert, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.timeout > 0) {
+        this.hideTimeout = window.setTimeout(this.closeRequest, this.props.timeout);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      if (this.props.isClosing) {
+        this._close();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearTimeout(this.hideTimeout);
+    }
+  }, {
+    key: "_close",
+    value: function _close() {
+      var _this2 = this;
+      this.startCloseAnimation();
+      setTimeout(function () {
+        _this2.props.onClose();
+      }, ANIMATION_TIME);
+    }
+  }, {
+    key: "_getCaption",
+    value:
+    /**
+     * @private
+     */
+    function _getCaption() {
+      return /*#__PURE__*/React.createElement("span", {
+        className: classNames(modules_e02b3280.caption, this.props.captionClassName, {
+          [modules_e02b3280.withCloseButton]: this.props.closeable
+        }),
+        onClick: this._handleCaptionsLinksClick
+        // We only process clicks on `a` elements, see above
+        ,
+        role: "presentation"
+      }, this.props.children);
+    }
+    /**
+     * @private
+     * @return {XML|string}
+     */
+  }, {
+    key: "_getIcon",
+    value: function _getIcon() {
+      var glyph = TypeToIcon[this.props.type];
+      if (glyph) {
+        return /*#__PURE__*/React.createElement(Icon, {
+          glyph: glyph,
+          className: modules_e02b3280.icon,
+          color: TypeToIconColor[this.props.type] || Color.DEFAULT
+        });
+      } else if (this.props.type === AlertType.LOADING) {
+        return /*#__PURE__*/React.createElement(LoaderInline, {
+          className: modules_e02b3280.loader
+        });
+      }
+      return '';
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        type = _this$props.type,
+        inline = _this$props.inline,
+        isClosing = _this$props.isClosing,
+        isShaking = _this$props.isShaking,
+        closeButtonClassName = _this$props.closeButtonClassName,
+        showWithAnimation = _this$props.showWithAnimation,
+        className = _this$props.className,
+        dataTest = _this$props['data-test'],
+        theme = _this$props.theme;
+      var classes = classNames(className, {
+        [modules_e02b3280.alert]: true,
+        [modules_e02b3280.animationOpen]: showWithAnimation,
+        [modules_e02b3280.error]: type === 'error',
+        [modules_e02b3280.alertInline]: inline,
+        [modules_e02b3280.animationClosing]: isClosing,
+        [modules_e02b3280.animationShaking]: isShaking
+      });
+      var height = this.state.height;
+      var style = height ? {
+        marginBottom: -height
+      } : undefined;
+      return /*#__PURE__*/React.createElement(ThemeProvider, {
+        theme: theme,
+        className: classes,
+        "data-test": joinDataTestAttributes('alert', dataTest),
+        "data-test-type": type,
+        style: style,
+        ref: this.storeAlertRef
+      }, this._getIcon(), this._getCaption(), this.props.closeable ? /*#__PURE__*/React.createElement(Button, {
+        icon: closeIcon,
+        className: classNames(modules_e02b3280.close, closeButtonClassName),
+        "data-test": "alert-close",
+        "aria-label": "close alert",
+        onClick: this.closeRequest
+      }) : '');
+    }
+  }]);
+  return Alert;
+}(PureComponent);
+_defineProperty(Alert, "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 */
+_defineProperty(Alert, "defaultProps", {
+  theme: Theme.DARK,
+  closeable: true,
+  showWithAnimation: true,
+  type: AlertType.MESSAGE,
+  inline: true,
+  isClosing: false,
+  isShaking: false,
+  timeout: 0,
+  onClose: function onClose() {},
+  onCloseRequest: function onCloseRequest() {}
+});
+_defineProperty(Alert, "Type", AlertType);
+
+export { ANIMATION_TIME, AlertType, Alert as default };

package/components/alert/container.d.ts

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

@@ -0,0 +1,52 @@
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, d as _createClass, e as _objectWithoutProperties, f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.map.js';
+import React, { Children, isValidElement, cloneElement, PureComponent } from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+var modules_fc8df42d = {"light":"light_rui_2ac4","alertContainer":"alertContainer_rui_a9a3","alertInContainer":"alertInContainer_rui_a9a3 alert_rui_2b32"};
+
+var _excluded = ["children", "className"];
+var Alerts = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Alerts, _PureComponent);
+  var _super = _createSuper(Alerts);
+  function Alerts() {
+    _classCallCheck(this, Alerts);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Alerts, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        children = _this$props.children,
+        className = _this$props.className,
+        restProps = _objectWithoutProperties(_this$props, _excluded);
+      var classes = classNames(modules_fc8df42d.alertContainer, className);
+      var show = Children.count(children) > 0;
+      if (!show) {
+        return null;
+      }
+      return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({
+        "data-test": "alert-container",
+        className: classes,
+        "aria-live": "polite"
+      }, restProps), Children.map(children, function (child) {
+        if (! /*#__PURE__*/isValidElement(child)) {
+          return child;
+        }
+        var alertClassNames = classNames(modules_fc8df42d.alertInContainer, child.props.className);
+        return /*#__PURE__*/cloneElement(child, {
+          className: alertClassNames
+        });
+      })), document.body);
+    }
+  }]);
+  return Alerts;
+}(PureComponent);
+_defineProperty(Alerts, "propTypes", {
+  children: PropTypes.node,
+  className: PropTypes.string
+});
+
+export { Alerts as default };

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

@@ -0,0 +1,36 @@
+import React, { ReactNode, Ref } from 'react';
+import Alert, { AlertProps, AlertType } from '../alert/alert';
+export interface AlertItem extends Partial<Omit<AlertProps, 'children'>> {
+    key: string | number;
+    message: ReactNode;
+    ref?: Ref<Alert>;
+}
+/**
+ * @name Alert Service
+ */
+declare class AlertService {
+    defaultTimeout: number;
+    showingAlerts: AlertItem[];
+    containerElement: HTMLDivElement;
+    reactRoot: import("react-dom/client").Root;
+    _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;