@jetbrains/ring-ui-built 7.0.0-beta.1 → 7.0.0-beta.3

package/components/_helpers/title.js

@@ -1,5 +1,5 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, e as _classCallCheck, f as _callSuper } from './_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -11,77 +11,67 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 var modules_09d014b4 = {"height":"i__const_height_0","compensate":"i__const_compensate_1","light":"light_rui_2ac4","dataListWrapper":"dataListWrapper_rui_be4b","dataList":"dataList_rui_be4b","itemContent":"itemContent_rui_be4b","title":"title_rui_be4b","disabledHover":"disabledHover_rui_be4b","titleSelected":"titleSelected_rui_be4b","titleFocused":"titleFocused_rui_be4b","showMore":"showMore_rui_be4b","boxes":"boxes_rui_be4b","checkboxBox":"checkboxBox_rui_be4b","collapseButton":"collapseButton_rui_be4b","collapseIcon":"collapseIcon_rui_be4b","loadingOverlay":"loadingOverlay_rui_be4b","showMoreLoader":"showMoreLoader_rui_be4b"};
 
-var Title = /*#__PURE__*/function (_PureComponent) {
-  function Title() {
-    var _this;
-    _classCallCheck(this, Title);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, Title, [].concat(args));
-    _defineProperty(_this, "id", getUID('data-list-title'));
-    _defineProperty(_this, "onCheckboxFocus", function () {
-      _this.props.onFocusRestore();
+class Title extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "id", getUID('data-list-title'));
+    _defineProperty(this, "onCheckboxFocus", () => {
+      this.props.onFocusRestore();
     });
-    _defineProperty(_this, "onCheckboxChange", function () {
-      _this.toggleSelection();
+    _defineProperty(this, "onCheckboxChange", () => {
+      this.toggleSelection();
     });
-    return _this;
   }
-  _inherits(Title, _PureComponent);
-  return _createClass(Title, [{
-    key: "toggleSelection",
-    value: function toggleSelection() {
-      var _this$props = this.props,
-        selectable = _this$props.selectable,
-        selected = _this$props.selected,
-        onSelect = _this$props.onSelect;
-      if (selectable) {
-        onSelect(!selected);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        className = _this$props2.className,
-        title = _this$props2.title,
-        offset = _this$props2.offset,
-        showFocus = _this$props2.showFocus,
-        innerRef = _this$props2.innerRef,
-        selectable = _this$props2.selectable,
-        selected = _this$props2.selected,
-        collapserExpander = _this$props2.collapserExpander;
-      var classes = classNames(className, {
-        [modules_09d014b4.title]: true,
-        [modules_09d014b4.titleFocused]: showFocus,
-        [modules_09d014b4.titleSelected]: selected
-      });
-      return /*#__PURE__*/jsxs("div", {
-        id: this.id,
-        className: classes,
-        style: {
-          paddingLeft: offset
-        },
-        ref: innerRef,
-        children: [/*#__PURE__*/jsxs("div", {
-          className: modules_09d014b4.boxes,
-          children: [selectable && /*#__PURE__*/jsx("div", {
-            className: modules_09d014b4.checkboxBox,
-            children: /*#__PURE__*/jsx(Checkbox, {
-              "aria-labelledby": this.id,
-              className: showFocus ? 'ring-checkbox_focus' : '',
-              checked: selected,
-              onFocus: this.onCheckboxFocus,
-              onChange: this.onCheckboxChange,
-              tabIndex: -1
-            })
-          }), collapserExpander]
-        }), title]
-      });
+  toggleSelection() {
+    const {
+      selectable,
+      selected,
+      onSelect
+    } = this.props;
+    if (selectable) {
+      onSelect(!selected);
     }
-  }]);
-}(PureComponent);
+  }
+  render() {
+    const {
+      className,
+      title,
+      offset,
+      showFocus,
+      innerRef,
+      selectable,
+      selected,
+      collapserExpander
+    } = this.props;
+    const classes = classNames(className, {
+      [modules_09d014b4.title]: true,
+      [modules_09d014b4.titleFocused]: showFocus,
+      [modules_09d014b4.titleSelected]: selected
+    });
+    return /*#__PURE__*/jsxs("div", {
+      id: this.id,
+      className: classes,
+      style: {
+        paddingLeft: offset
+      },
+      ref: innerRef,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: modules_09d014b4.boxes,
+        children: [selectable && /*#__PURE__*/jsx("div", {
+          className: modules_09d014b4.checkboxBox,
+          children: /*#__PURE__*/jsx(Checkbox, {
+            "aria-labelledby": this.id,
+            className: showFocus ? 'ring-checkbox_focus' : '',
+            checked: selected,
+            onFocus: this.onCheckboxFocus,
+            onChange: this.onCheckboxChange,
+            tabIndex: -1
+          })
+        }), collapserExpander]
+      }), title]
+    });
+  }
+}
 _defineProperty(Title, "defaultProps", {
   selectable: false,
   selected: false,

package/components/alert/alert.js

@@ -1,6 +1,5 @@
-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';
@@ -21,20 +20,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 +29,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 +43,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 +63,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 +72,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 +85,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,127 +107,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);
-      }
+  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 '';
+  }
+  componentDidUpdate() {
+    if (this.props.isClosing) {
+      this._close();
     }
-  }, {
-    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
+  }
+  componentWillUnmount() {
+    clearTimeout(this.hideTimeout);
+  }
+  _close() {
+    this.startCloseAnimation();
+    setTimeout(() => {
+      this.props.onClose();
+    }, ANIMATION_TIME);
+  }
+  /**
+   * @private
+   */
+  _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}
+   */
+  _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
       });
-      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
-        }) : '']
+    } else if (this.props.type === AlertType.LOADING) {
+      return /*#__PURE__*/jsx(LoaderInline, {
+        className: modules_e02b3280.loader
       });
     }
-  }]);
-}(PureComponent);
+    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
+      }) : '']
+    });
+  }
+}
 _defineProperty(Alert, "propTypes", {
   timeout: PropTypes.number,
   /**
@@ -287,8 +243,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.js

@@ -1,6 +1,5 @@
-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 { _ as _defineProperty, 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';
@@ -8,43 +7,37 @@ 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);
+    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);
+  }
+}
 _defineProperty(Alerts, "propTypes", {
   children: PropTypes.node,
   className: PropTypes.string