@jetbrains/ring-ui-built 7.0.0-beta.2 → 7.0.0-beta.4

package/components/_helpers/title.js

@@ -1,105 +1,80 @@
-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';
 import focusSensorHOC from '../global/focus-sensor-hoc.js';
 import Checkbox from '../checkbox/checkbox.js';
 import getUID from '../global/get-uid.js';
-import { refObject } from '../global/prop-types.js';
 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,
   showFocus: false
 });
-Title.propTypes = {
-  className: PropTypes.string,
-  title: PropTypes.node,
-  offset: PropTypes.number,
-  selectable: PropTypes.bool,
-  selected: PropTypes.bool,
-  onSelect: PropTypes.func.isRequired,
-  showFocus: PropTypes.bool,
-  collapserExpander: PropTypes.node,
-  innerRef: PropTypes.oneOfType([refObject(PropTypes.instanceOf(HTMLDivElement)), PropTypes.func]),
-  // focusSensorHOC
-  onFocusRestore: PropTypes.func.isRequired
-};
 var Title$1 = focusSensorHOC(Title);
 
 export { Title$1 as T, modules_09d014b4 as m };

package/components/alert/alert.d.ts

@@ -1,6 +1,5 @@
 import { PureComponent, ReactNode } from 'react';
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import Theme from '../global/theme';
 export declare const ANIMATION_TIME = 500;
 /**
@@ -20,10 +19,17 @@ export declare enum AlertType {
 export interface AlertProps {
     theme: Theme;
     timeout: number;
+    /**
+     * Fires when alert starts closing if timeout is out or user clicks "Close" button
+     */
     onCloseRequest: ((event?: React.MouseEvent<HTMLElement>) => void);
     onClose: (() => void);
     isShaking: boolean;
     isClosing: boolean;
+    /**
+     * Whether an alert is rendered inside an **Alerts** container
+     * or standalone.
+     */
     inline: boolean;
     showWithAnimation: boolean;
     closeable: boolean;
@@ -46,29 +52,6 @@ interface State {
  * **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;

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;
 }