@jetbrains/ring-ui-built 6.1.1-beta.0 → 7.0.0-beta.10

package/components/alert/alert.js

@@ -1,9 +1,7 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.object.values.js';
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { 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';
@@ -21,20 +19,8 @@ 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/es.weak-map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.array.reduce.js';
-import 'core-js/modules/es.object.entries.js';
-import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.object.assign.js';
-import 'core-js/modules/es.set.js';
-import 'core-js/modules/es.string.split.js';
-import 'core-js/modules/web.dom-collections.for-each.js';
 import '@jetbrains/icons/chevron-down';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';
@@ -42,18 +28,10 @@ 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.find-index.js';
-import 'core-js/modules/es.array.includes.js';
-import 'core-js/modules/es.array.slice.js';
-import 'core-js/modules/es.array.splice.js';
-import 'core-js/modules/es.string.includes.js';
-import 'core-js/modules/es.string.match.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
@@ -64,7 +42,7 @@ import '../popup/popup.consts.js';
 
 var modules_e02b3280 = {"animation-duration":"300ms","animation-easing":"ease-out","light":"light_rui_2ac4","alert":"alert_rui_25ab","alertInline":"alertInline_rui_25ab","error":"error_rui_25ab","icon":"icon_rui_25ab","caption":"caption_rui_25ab","withCloseButton":"withCloseButton_rui_25ab","badge":"badge_rui_25ab","loader":"loader_rui_25ab","close":"close_rui_25ab","animationOpen":"animationOpen_rui_25ab","show":"show_rui_25ab","animationClosing":"animationClosing_rui_25ab","animationShaking":"animationShaking_rui_25ab","shaking":"shaking_rui_25ab"};
 
-var ANIMATION_TIME = 500;
+const ANIMATION_TIME = 500;
 /**
  * @name Alert
  */
@@ -84,7 +62,7 @@ var AlertType;
  * Lookup table of alert type to icon modifier.
  * @type {Object.<AlertType, string>}
  */
-var TypeToIcon = {
+const TypeToIcon = {
   [AlertType.ERROR]: exceptionIcon,
   [AlertType.SUCCESS]: checkmarkIcon,
   [AlertType.WARNING]: warningIcon
@@ -93,7 +71,7 @@ var TypeToIcon = {
  * Lookup table of alert type to icon color.
  * @type {Object.<AlertType, Icon.Color>}
  */
-var TypeToIconColor = {
+const TypeToIconColor = {
   [AlertType.ERROR]: Color.RED,
   [AlertType.SUCCESS]: Color.GREEN,
   [AlertType.WARNING]: Color.WHITE
@@ -106,26 +84,21 @@ var TypeToIconColor = {
 /**
  * **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) {
-  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 = _callSuper(this, Alert, [].concat(args));
-    _defineProperty(_this, "state", {
+class Alert extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "state", {
       height: null
     });
-    _defineProperty(_this, "node", void 0);
-    _defineProperty(_this, "hideTimeout", void 0);
-    _defineProperty(_this, "closeRequest", function (event) {
-      _this.startCloseAnimation();
-      return _this.props.onCloseRequest(event);
+    _defineProperty(this, "node", void 0);
+    _defineProperty(this, "hideTimeout", void 0);
+    _defineProperty(this, "closeRequest", event => {
+      this.startCloseAnimation();
+      return this.props.onCloseRequest(event);
     });
-    _defineProperty(_this, "startCloseAnimation", function () {
-      var height = getRect(_this.node).height;
-      _this.setState({
+    _defineProperty(this, "startCloseAnimation", () => {
+      const height = getRect(this.node).height;
+      this.setState({
         height
       });
     });
@@ -133,150 +106,109 @@ var Alert = /*#__PURE__*/function (_PureComponent) {
      * @param {SyntheticEvent} evt
      * @private
      */
-    _defineProperty(_this, "_handleCaptionsLinksClick", function (evt) {
+    _defineProperty(this, "_handleCaptionsLinksClick", evt => {
       if (evt.target instanceof Element && evt.target.matches('a')) {
-        _this.closeRequest(evt);
+        this.closeRequest(evt);
       }
     });
-    _defineProperty(_this, "storeAlertRef", function (node) {
-      _this.node = node;
+    _defineProperty(this, "storeAlertRef", node => {
+      this.node = node;
     });
-    return _this;
   }
-  _inherits(Alert, _PureComponent);
-  return _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__*/jsx("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",
-        children: this.props.children
-      });
-    }
-    /**
-     * @private
-     * @return {XML|string}
-     */
-  }, {
-    key: "_getIcon",
-    value: function _getIcon() {
-      var glyph = TypeToIcon[this.props.type];
-      if (glyph) {
-        return /*#__PURE__*/jsx(Icon, {
-          glyph: glyph,
-          className: modules_e02b3280.icon,
-          color: TypeToIconColor[this.props.type] || Color.DEFAULT
-        });
-      } else if (this.props.type === AlertType.LOADING) {
-        return /*#__PURE__*/jsx(LoaderInline, {
-          className: modules_e02b3280.loader
-        });
-      }
-      return '';
+  componentDidMount() {
+    if (this.props.timeout > 0) {
+      this.hideTimeout = window.setTimeout(this.closeRequest, this.props.timeout);
     }
-  }, {
-    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__*/jsxs(ThemeProvider, {
-        theme: theme,
-        className: classes,
-        "data-test": joinDataTestAttributes('alert', dataTest),
-        "data-test-type": type,
-        style: style,
-        ref: this.storeAlertRef,
-        children: [this._getIcon(), this._getCaption(), this.props.closeable ? /*#__PURE__*/jsx(Button, {
-          icon: closeIcon,
-          className: classNames(modules_e02b3280.close, closeButtonClassName),
-          "data-test": "alert-close",
-          "aria-label": "close alert",
-          onClick: this.closeRequest
-        }) : '']
-      });
+  }
+  componentDidUpdate() {
+    if (this.props.isClosing) {
+      this._close();
     }
-  }]);
-}(PureComponent);
-_defineProperty(Alert, "propTypes", {
-  timeout: PropTypes.number,
+  }
+  componentWillUnmount() {
+    clearTimeout(this.hideTimeout);
+  }
+  _close() {
+    this.startCloseAnimation();
+    setTimeout(() => {
+      this.props.onClose();
+    }, ANIMATION_TIME);
+  }
   /**
-   * Fires when alert starts closing if timeout is out or user clicks "Close" button
+   * @private
    */
-  onCloseRequest: PropTypes.func,
-  onClose: PropTypes.func,
-  isShaking: PropTypes.bool,
-  isClosing: PropTypes.bool,
+  _getCaption() {
+    return /*#__PURE__*/jsx("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",
+      children: this.props.children
+    });
+  }
   /**
-   * Whether an alert is rendered inside an **Alerts** container
-   * or standalone.
+   * @private
+   * @return {XML|string}
    */
-  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
-});
+  _getIcon() {
+    const glyph = TypeToIcon[this.props.type];
+    if (glyph) {
+      return /*#__PURE__*/jsx(Icon, {
+        glyph: glyph,
+        className: modules_e02b3280.icon,
+        color: TypeToIconColor[this.props.type] || Color.DEFAULT
+      });
+    } else if (this.props.type === AlertType.LOADING) {
+      return /*#__PURE__*/jsx(LoaderInline, {
+        className: modules_e02b3280.loader
+      });
+    }
+    return '';
+  }
+  render() {
+    const {
+      type,
+      inline,
+      isClosing,
+      isShaking,
+      closeButtonClassName,
+      showWithAnimation,
+      className,
+      'data-test': dataTest,
+      theme
+    } = this.props;
+    const 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
+    });
+    const height = this.state.height;
+    const style = height ? {
+      marginBottom: -height
+    } : undefined;
+    return /*#__PURE__*/jsxs(ThemeProvider, {
+      theme: theme,
+      className: classes,
+      "data-test": joinDataTestAttributes('alert', dataTest),
+      "data-test-type": type,
+      style: style,
+      ref: this.storeAlertRef,
+      children: [this._getIcon(), this._getCaption(), this.props.closeable ? /*#__PURE__*/jsx(Button, {
+        icon: closeIcon,
+        className: classNames(modules_e02b3280.close, closeButtonClassName),
+        "data-test": "alert-close",
+        "aria-label": "close alert",
+        onClick: this.closeRequest
+      }) : '']
+    });
+  }
+}
 /** @override */
 _defineProperty(Alert, "defaultProps", {
   theme: Theme.DARK,
@@ -287,8 +219,8 @@ _defineProperty(Alert, "defaultProps", {
   isClosing: false,
   isShaking: false,
   timeout: 0,
-  onClose: function onClose() {},
-  onCloseRequest: function onCloseRequest() {}
+  onClose: () => {},
+  onCloseRequest: () => {}
 });
 _defineProperty(Alert, "Type", AlertType);
 

package/components/alert/container.d.ts

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

package/components/alert/container.js

@@ -1,53 +1,41 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, e as _classCallCheck, f as _callSuper } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.map.js';
-import { Children, isValidElement, cloneElement, PureComponent } from 'react';
+import { a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { PureComponent, Children, isValidElement, cloneElement } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { jsx } from 'react/jsx-runtime';
 
 var modules_fc8df42d = {"light":"light_rui_2ac4","alertContainer":"alertContainer_rui_971c","alertInContainer":"alertInContainer_rui_971c alert_rui_25ab"};
 
-var _excluded = ["children", "className"];
-var Alerts = /*#__PURE__*/function (_PureComponent) {
-  function Alerts() {
-    _classCallCheck(this, Alerts);
-    return _callSuper(this, Alerts, arguments);
-  }
-  _inherits(Alerts, _PureComponent);
-  return _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__*/jsx("div", _objectSpread2(_objectSpread2({
-        "data-test": "alert-container",
-        className: classes,
-        "aria-live": "polite"
-      }, restProps), {}, {
-        children: 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);
+const _excluded = ["children", "className"];
+class Alerts extends PureComponent {
+  render() {
+    const _this$props = this.props,
+      {
+        children,
+        className
+      } = _this$props,
+      restProps = _objectWithoutProperties(_this$props, _excluded);
+    const classes = classNames(modules_fc8df42d.alertContainer, className);
+    const show = Children.count(children) > 0;
+    if (!show) {
+      return null;
     }
-  }]);
-}(PureComponent);
-_defineProperty(Alerts, "propTypes", {
-  children: PropTypes.node,
-  className: PropTypes.string
-});
+    return /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
+      "data-test": "alert-container",
+      className: classes,
+      "aria-live": "polite"
+    }, restProps), {}, {
+      children: Children.map(children, child => {
+        if (! /*#__PURE__*/isValidElement(child)) {
+          return child;
+        }
+        const alertClassNames = classNames(modules_fc8df42d.alertInContainer, child.props.className);
+        return /*#__PURE__*/cloneElement(child, {
+          className: alertClassNames
+        });
+      })
+    })), document.body);
+  }
+}
 
 export { Alerts as default };