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

package/components/popup/position.js

@@ -1,20 +1,8 @@
-import { d as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
-import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.array.includes.js';
-import 'core-js/modules/es.array.map.js';
+import { b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.array.sort.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.string.includes.js';
 import { getRect, isMounted, getDocumentScrollTop, getDocumentScrollLeft, getWindowHeight } from '../global/dom.js';
 import { MaxHeight, Dimension, MinWidth, Directions } from './popup.consts.js';
-import 'core-js/modules/es.array.iterator.js';
-import 'core-js/modules/es.object.assign.js';
-import 'core-js/modules/es.object.entries.js';
 import 'core-js/modules/es.regexp.exec.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 'core-js/modules/web.dom-collections.iterator.js';
 
 function getScrollingCoordinates(container) {
@@ -30,16 +18,16 @@ function getScrollingCoordinates(container) {
   };
 }
 function getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset) {
-  var popupWidth = popup.offsetWidth;
-  var popupHeight = popup.offsetHeight;
-  var anchorBottom = anchorTop + anchorRect.height;
-  var anchorRight = anchorLeft + anchorRect.width;
-  var popupLeft = anchorLeft - popupWidth;
-  var popupTop = anchorTop - popupHeight;
-  var popupRightToLeft = anchorRight - popupWidth;
-  var popupHorizontalCenter = anchorLeft + anchorRect.width / 2 - popupWidth / 2;
-  var popupVerticalCenter = anchorTop + anchorRect.height / 2 - popupHeight / 2;
-  var popupBottomToTop = anchorBottom - popupHeight;
+  const popupWidth = popup.offsetWidth;
+  const popupHeight = popup.offsetHeight;
+  const anchorBottom = anchorTop + anchorRect.height;
+  const anchorRight = anchorLeft + anchorRect.width;
+  const popupLeft = anchorLeft - popupWidth;
+  const popupTop = anchorTop - popupHeight;
+  const popupRightToLeft = anchorRight - popupWidth;
+  const popupHorizontalCenter = anchorLeft + anchorRect.width / 2 - popupWidth / 2;
+  const popupVerticalCenter = anchorTop + anchorRect.height / 2 - popupHeight / 2;
+  const popupBottomToTop = anchorBottom - popupHeight;
   return {
     [Directions.BOTTOM_RIGHT]: {
       left: anchorLeft,
@@ -92,52 +80,56 @@ function getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset) {
   };
 }
 function verticalOverflow(styles, scrollingCoordinates, attrs) {
-  var containerHeight = attrs.container !== null ? attrs.container.clientHeight : getWindowHeight();
-  var viewportMinX = scrollingCoordinates.top + attrs.sidePadding;
-  var viewportMaxX = scrollingCoordinates.top + containerHeight - attrs.sidePadding;
-  var topOverflow = Math.max(viewportMinX - styles.top, 0);
-  var popupHeight = attrs.popup.clientHeight;
-  var verticalDiff = styles.top + popupHeight - viewportMaxX;
-  var bottomOverflow = Math.max(verticalDiff, 0);
+  const containerHeight = attrs.container !== null ? attrs.container.clientHeight : getWindowHeight();
+  const viewportMinX = scrollingCoordinates.top + attrs.sidePadding;
+  const viewportMaxX = scrollingCoordinates.top + containerHeight - attrs.sidePadding;
+  const topOverflow = Math.max(viewportMinX - styles.top, 0);
+  const popupHeight = attrs.popup.clientHeight;
+  const verticalDiff = styles.top + popupHeight - viewportMaxX;
+  const bottomOverflow = Math.max(verticalDiff, 0);
   return topOverflow + bottomOverflow;
 }
 function horizontalOverflow(styles, scrollingCoordinates, attrs) {
-  var containerWidth = attrs.container !== null ? attrs.container.clientWidth : window.innerWidth;
-  var viewportMinY = scrollingCoordinates.left + attrs.sidePadding;
-  var viewportMaxY = scrollingCoordinates.left + containerWidth - attrs.sidePadding;
-  var leftOverflow = Math.max(viewportMinY - styles.left, 0);
-  var popupWidth = attrs.popup.clientWidth;
-  var horizontalDiff = styles.left + popupWidth - viewportMaxY;
-  var rightOverflow = Math.max(horizontalDiff, 0);
+  const containerWidth = attrs.container !== null ? attrs.container.clientWidth : window.innerWidth;
+  const viewportMinY = scrollingCoordinates.left + attrs.sidePadding;
+  const viewportMaxY = scrollingCoordinates.left + containerWidth - attrs.sidePadding;
+  const leftOverflow = Math.max(viewportMinY - styles.left, 0);
+  const popupWidth = attrs.popup.clientWidth;
+  const horizontalDiff = styles.left + popupWidth - viewportMaxY;
+  const rightOverflow = Math.max(horizontalDiff, 0);
   return leftOverflow + rightOverflow;
 }
-var positionPropKeys = ['directions', 'autoPositioning', 'autoCorrectTopOverflow', 'sidePadding', 'top', 'left', 'offset', 'maxHeight', 'minWidth'];
-var defaultcontainerRect = {
+const positionPropKeys = ['directions', 'autoPositioning', 'autoCorrectTopOverflow', 'sidePadding', 'top', 'left', 'offset', 'maxHeight', 'minWidth'];
+const defaultcontainerRect = {
   top: 0,
   left: 0
 };
 function handleTopOffScreen(_ref) {
-  var sidePadding = _ref.sidePadding,
-    styles = _ref.styles,
-    anchorRect = _ref.anchorRect,
-    maxHeight = _ref.maxHeight,
-    popupScrollHeight = _ref.popupScrollHeight,
-    direction = _ref.direction,
-    scroll = _ref.scroll;
-  var BORDER_COMPENSATION = 1;
-  var TOP_LEFT = Directions.TOP_LEFT,
-    TOP_RIGHT = Directions.TOP_RIGHT,
-    TOP_CENTER = Directions.TOP_CENTER,
-    RIGHT_TOP = Directions.RIGHT_TOP,
-    LEFT_TOP = Directions.LEFT_TOP;
-  var openedToTop = direction != null && [TOP_LEFT, TOP_RIGHT, TOP_CENTER, RIGHT_TOP, LEFT_TOP].includes(direction);
+  let {
+    sidePadding,
+    styles,
+    anchorRect,
+    maxHeight,
+    popupScrollHeight,
+    direction,
+    scroll
+  } = _ref;
+  const BORDER_COMPENSATION = 1;
+  const {
+    TOP_LEFT,
+    TOP_RIGHT,
+    TOP_CENTER,
+    RIGHT_TOP,
+    LEFT_TOP
+  } = Directions;
+  const openedToTop = direction != null && [TOP_LEFT, TOP_RIGHT, TOP_CENTER, RIGHT_TOP, LEFT_TOP].includes(direction);
   if (!openedToTop) {
     return styles;
   }
-  var isAttachedToAnchorTop = direction != null && [TOP_LEFT, TOP_CENTER, TOP_RIGHT].includes(direction);
-  var attachingPointY = isAttachedToAnchorTop ? anchorRect.top : anchorRect.bottom;
-  var effectiveHeight = maxHeight && typeof maxHeight === 'number' ? Math.min(popupScrollHeight, maxHeight) : popupScrollHeight;
-  var hypotheticalTop = attachingPointY - effectiveHeight;
+  const isAttachedToAnchorTop = direction != null && [TOP_LEFT, TOP_CENTER, TOP_RIGHT].includes(direction);
+  const attachingPointY = isAttachedToAnchorTop ? anchorRect.top : anchorRect.bottom;
+  const effectiveHeight = maxHeight && typeof maxHeight === 'number' ? Math.min(popupScrollHeight, maxHeight) : popupScrollHeight;
+  const hypotheticalTop = attachingPointY - effectiveHeight;
   if (hypotheticalTop <= sidePadding) {
     styles.top = sidePadding + scroll.top;
     styles.maxHeight = attachingPointY - sidePadding + BORDER_COMPENSATION;
@@ -145,18 +137,18 @@ function handleTopOffScreen(_ref) {
   return styles;
 }
 function maxHeightForDirection(direction, anchorNode, containerNode) {
-  var container = containerNode || document.documentElement;
-  var domRect = anchorNode.getBoundingClientRect();
-  var containerRect = container.getBoundingClientRect();
-  var containerTop = domRect.top < 0 ? containerRect.top : Math.max(containerRect.top, 0);
-  var topMaxHeight = Math.max(domRect.top - containerTop, 0);
-  var containerHeight = Math.max(containerRect.height,
+  const container = containerNode || document.documentElement;
+  const domRect = anchorNode.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+  const containerTop = domRect.top < 0 ? containerRect.top : Math.max(containerRect.top, 0);
+  const topMaxHeight = Math.max(domRect.top - containerTop, 0);
+  const containerHeight = Math.max(containerRect.height,
   // XXX
   // If container is the document element
   // then we check client height too because we may have situation when
   // "height" from "getBoundingClientRect" less then "clientHeight".
   container === document.documentElement ? container.clientHeight : 0);
-  var bottomMaxHeight = Math.max(containerHeight - (topMaxHeight + domRect.height), 0);
+  const bottomMaxHeight = Math.max(containerHeight - (topMaxHeight + domRect.height), 0);
   switch (direction) {
     case Directions.TOP_LEFT:
     case Directions.TOP_CENTER:
@@ -180,60 +172,61 @@ function maxHeightForDirection(direction, anchorNode, containerNode) {
   }
 }
 function position(attrs) {
-  var popup = attrs.popup,
-    anchor = attrs.anchor,
-    container = attrs.container,
-    directions = attrs.directions,
-    autoPositioning = attrs.autoPositioning,
-    sidePadding = attrs.sidePadding,
-    top = attrs.top,
-    left = attrs.left,
-    offset = attrs.offset,
-    maxHeight = attrs.maxHeight,
-    minWidth = attrs.minWidth,
-    _attrs$autoCorrectTop = attrs.autoCorrectTopOverflow,
-    autoCorrectTopOverflow = _attrs$autoCorrectTop === void 0 ? true : _attrs$autoCorrectTop;
-  var styles = {
+  const {
+    popup,
+    anchor,
+    container,
+    directions,
+    autoPositioning,
+    sidePadding,
+    top,
+    left,
+    offset,
+    maxHeight,
+    minWidth,
+    autoCorrectTopOverflow = true
+  } = attrs;
+  let styles = {
     top: 0,
     left: 0
   };
-  var chosenDirection = null;
-  var containerRect = container !== null ? getRect(container) : defaultcontainerRect;
-  var defaultAnchor = container !== null ? container : document.body;
-  var anchorRect = getRect(isMounted(anchor) ? anchor : defaultAnchor);
-  var scroll = getScrollingCoordinates(container);
-  var anchorLeft = anchorRect.left + scroll.left + left - containerRect.left;
-  var anchorTop = anchorRect.top + scroll.top + top - containerRect.top;
+  let chosenDirection = null;
+  const containerRect = container !== null ? getRect(container) : defaultcontainerRect;
+  const defaultAnchor = container !== null ? container : document.body;
+  const anchorRect = getRect(isMounted(anchor) ? anchor : defaultAnchor);
+  const scroll = getScrollingCoordinates(container);
+  const anchorLeft = anchorRect.left + scroll.left + left - containerRect.left;
+  const anchorTop = anchorRect.top + scroll.top + top - containerRect.top;
   if (popup) {
-    var overflowAttrs = _objectSpread2(_objectSpread2({}, attrs), {}, {
+    const overflowAttrs = _objectSpread2(_objectSpread2({}, attrs), {}, {
       popup
     });
-    var directionsMatrix = getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset);
+    const directionsMatrix = getPositionStyles(popup, anchorRect, anchorLeft, anchorTop, offset);
     if (!autoPositioning || directions.length === 1) {
       styles = directionsMatrix[directions[0]];
       chosenDirection = directions[0];
     } else {
-      var sortedByIncreasingOverflow = directions.
+      const sortedByIncreasingOverflow = directions.
       // Fall back to the first option
-      concat(directions[0]).filter(function (direction) {
-        return directionsMatrix[direction];
-      }).map(function (direction) {
-        return {
-          styles: directionsMatrix[direction],
-          direction
-        };
-      }).sort(function (_ref2, _ref3) {
-        var stylesA = _ref2.styles;
-        var stylesB = _ref3.styles;
-        var overflowA = verticalOverflow(stylesA, scroll, overflowAttrs) + horizontalOverflow(stylesA, scroll, overflowAttrs);
-        var overflowB = verticalOverflow(stylesB, scroll, overflowAttrs) + horizontalOverflow(stylesB, scroll, overflowAttrs);
+      concat(directions[0]).filter(direction => directionsMatrix[direction]).map(direction => ({
+        styles: directionsMatrix[direction],
+        direction
+      })).sort((_ref2, _ref3) => {
+        let {
+          styles: stylesA
+        } = _ref2;
+        let {
+          styles: stylesB
+        } = _ref3;
+        const overflowA = verticalOverflow(stylesA, scroll, overflowAttrs) + horizontalOverflow(stylesA, scroll, overflowAttrs);
+        const overflowB = verticalOverflow(stylesB, scroll, overflowAttrs) + horizontalOverflow(stylesB, scroll, overflowAttrs);
         return overflowA - overflowB;
       });
       styles = sortedByIncreasingOverflow[0].styles;
       chosenDirection = sortedByIncreasingOverflow[0].direction;
     }
     // because of the anchor negative margin top and left also may become negative
-    ['left', 'top'].forEach(function (key) {
+    ['left', 'top'].forEach(key => {
       if (styles[key] < 0) {
         styles[key] = 0;
       }

package/components/popup-menu/popup-menu.js

@@ -1,36 +1,19 @@
-import { c as _objectWithoutProperties, _ as _defineProperty, d as _objectSpread2, 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 { a as _objectWithoutProperties, _ as _defineProperty, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import PropTypes from 'prop-types';
 import Popup from '../popup/popup.js';
 import List from '../list/list.js';
 import { jsx } from 'react/jsx-runtime';
-import 'core-js/modules/es.object.entries.js';
-import 'core-js/modules/es.object.to-string.js';
 import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.regexp.to-string.js';
 import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/web.dom-collections.for-each.js';
 import 'react';
 import 'react-dom';
 import 'classnames';
 import '../global/get-uid.js';
 import '../global/schedule-raf.js';
 import '../global/dom.js';
-import 'core-js/modules/es.array.filter.js';
-import 'core-js/modules/es.array.iterator.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.iterator.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';
@@ -41,9 +24,7 @@ import '../popup/position.js';
 import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
-import 'core-js/modules/es.symbol.js';
 import 'core-js/modules/es.symbol.description.js';
-import 'core-js/modules/es.array.find.js';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
 import 'react-virtualized/dist/es/WindowScroller';
@@ -51,8 +32,6 @@ import 'react-virtualized/dist/es/CellMeasurer';
 import 'util-deprecate';
 import 'memoize-one';
 import '../global/memoize.js';
-import 'core-js/modules/es.map.js';
-import 'core-js/modules/es.weak-map.js';
 import '../global/create-stateful-context.js';
 import '../list/list__link.js';
 import '../link/link.js';
@@ -60,18 +39,15 @@ import '../link/clickableLink.js';
 import '../_helpers/link.js';
 import '../_helpers/list.js';
 import '../list/list__item.js';
-import 'core-js/modules/es.array.index-of.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
 import '../avatar/fallback-avatar.js';
-import 'core-js/modules/es.array.from.js';
 import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark-12px';
 import '@jetbrains/icons/remove-12px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
-import 'core-js/modules/es.string.starts-with.js';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
 import '../control-help/control-help.js';
@@ -82,53 +58,41 @@ import '../list/list__separator.js';
 import '../list/list__hint.js';
 import '../list/consts.js';
 
-var _excluded = ["className"];
-var _ref = Popup.propTypes || {};
-  _ref.children;
-  var popupPropTypes = _objectWithoutProperties(_ref, ["children"]);
+const _excluded = ["className"];
+const _ref = Popup.propTypes || {},
+  popupPropTypes = _objectWithoutProperties(_ref, ["children"]);
 /**
  * @name Popup Menu
  */
-var PopupMenu = /*#__PURE__*/function (_Popup) {
-  function PopupMenu() {
-    var _this;
-    _classCallCheck(this, PopupMenu);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, PopupMenu, [].concat(args));
-    _defineProperty(_this, "onSelect", function (item, event) {
-      if (_this.props.closeOnSelect) {
-        _this._onCloseAttempt(event);
+class PopupMenu extends Popup {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "onSelect", (item, event) => {
+      if (this.props.closeOnSelect) {
+        this._onCloseAttempt(event);
       }
-      _this.props.onSelect(item, event);
+      this.props.onSelect(item, event);
     });
-    _defineProperty(_this, "list", void 0);
-    _defineProperty(_this, "listRef", function (el) {
-      _this.list = el;
+    _defineProperty(this, "list", void 0);
+    _defineProperty(this, "listRef", el => {
+      this.list = el;
+    });
+  }
+  /** @override */
+  getInternalContent() {
+    const _this$props = this.props,
+      props = _objectWithoutProperties(_this$props, _excluded);
+    return /*#__PURE__*/jsx("div", {
+      children: /*#__PURE__*/jsx(List, _objectSpread2(_objectSpread2({
+        ref: this.listRef
+      }, props), {}, {
+        maxHeight: this.popup && parseFloat(this.popup.style.maxHeight),
+        shortcuts: this.shouldUseShortcuts(),
+        onSelect: this.onSelect
+      }))
     });
-    return _this;
   }
-  _inherits(PopupMenu, _Popup);
-  return _createClass(PopupMenu, [{
-    key: "getInternalContent",
-    value: /** @override */
-    function getInternalContent() {
-      var _this$props = this.props;
-        _this$props.className;
-        var props = _objectWithoutProperties(_this$props, _excluded);
-      return /*#__PURE__*/jsx("div", {
-        children: /*#__PURE__*/jsx(List, _objectSpread2(_objectSpread2({
-          ref: this.listRef
-        }, props), {}, {
-          maxHeight: this.popup && parseFloat(this.popup.style.maxHeight),
-          shortcuts: this.shouldUseShortcuts(),
-          onSelect: this.onSelect
-        }))
-      });
-    }
-  }]);
-}(Popup);
+}
 _defineProperty(PopupMenu, "isItemType", List.isItemType);
 _defineProperty(PopupMenu, "ListProps", List.ListProps);
 _defineProperty(PopupMenu, "defaultProps", _objectSpread2(_objectSpread2(_objectSpread2({}, List.defaultProps), Popup.defaultProps), {}, {
@@ -139,6 +103,8 @@ PopupMenu.propTypes = _objectSpread2(_objectSpread2(_objectSpread2({}, popupProp
   maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   closeOnSelect: PropTypes.bool
 });
-var ListProps = List.ListProps;
+const {
+  ListProps
+} = List;
 
 export { ListProps, PopupMenu as default };

package/components/progress-bar/progress-bar.js

@@ -1,5 +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.concat.js';
+import { _ as _defineProperty, a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -7,75 +7,64 @@ import { jsx } from 'react/jsx-runtime';
 
 var modules_fb7af416 = {"dark":"dark_rui_f090","light":"light_rui_2ac4","progressBar":"progressBar_rui_7662","globalMode":"globalMode_rui_7662","line":"line_rui_7662","progress-bar":"progress-bar_rui_7662","staticLineColor":"staticLineColor_rui_7662"};
 
-var _excluded = ["className", "global", "max", "value", "label", "staticColor"];
-var ProgressBar = /*#__PURE__*/function (_PureComponent) {
-  function ProgressBar() {
-    var _this;
-    _classCallCheck(this, ProgressBar);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, ProgressBar, [].concat(args));
-    _defineProperty(_this, "progressbarWrapper", void 0);
-    _defineProperty(_this, "progressbarWrapperRef", function (el) {
-      _this.progressbarWrapper = el;
+const _excluded = ["className", "global", "max", "value", "label", "staticColor"];
+class ProgressBar extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "progressbarWrapper", void 0);
+    _defineProperty(this, "progressbarWrapperRef", el => {
+      this.progressbarWrapper = el;
     });
-    _defineProperty(_this, "progressbar", void 0);
-    _defineProperty(_this, "progressbarRef", function (el) {
-      _this.progressbar = el;
+    _defineProperty(this, "progressbar", void 0);
+    _defineProperty(this, "progressbarRef", el => {
+      this.progressbar = el;
     });
-    return _this;
   }
-  _inherits(ProgressBar, _PureComponent);
-  return _createClass(ProgressBar, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        className = _this$props.className,
-        global = _this$props.global,
-        max = _this$props.max,
-        value = _this$props.value,
-        label = _this$props.label,
-        staticColor = _this$props.staticColor,
-        otherProps = _objectWithoutProperties(_this$props, _excluded);
-      var width = value ? "".concat(ProgressBar.toPercent(value, max), "%") : undefined;
-      var classes = classNames(modules_fb7af416.progressBar, className, {
-        [modules_fb7af416.globalMode]: global,
-        [modules_fb7af416.staticLineColor]: staticColor
-      });
-      return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({}, otherProps), {}, {
-        className: classes,
-        ref: this.progressbarWrapperRef,
-        children: /*#__PURE__*/jsx("div", {
-          className: modules_fb7af416.line,
-          ref: this.progressbarRef,
-          role: "progressbar",
-          "aria-label": label,
-          "aria-valuenow": value,
-          "aria-valuemin": 0,
-          "aria-valuemax": max,
-          style: {
-            width
-          }
-        })
-      }));
-    }
-  }], [{
-    key: "toPercent",
-    value:
-    /**
-     * @param {number} value The progress task value
-     * @param {number} max The maximum value
-     * @return {number} The progress task value in percents
-     * @private
-     */
-    function toPercent(value, max) {
-      var HUNDRED_PERCENT = 100;
-      var percents = value * HUNDRED_PERCENT / max;
-      return percents > HUNDRED_PERCENT ? HUNDRED_PERCENT : percents;
-    }
-  }]);
-}(PureComponent);
+  /**
+   * @param {number} value The progress task value
+   * @param {number} max The maximum value
+   * @return {number} The progress task value in percents
+   * @private
+   */
+  static toPercent(value, max) {
+    const HUNDRED_PERCENT = 100;
+    const percents = value * HUNDRED_PERCENT / max;
+    return percents > HUNDRED_PERCENT ? HUNDRED_PERCENT : percents;
+  }
+  render() {
+    const _this$props = this.props,
+      {
+        className,
+        global,
+        max,
+        value,
+        label,
+        staticColor
+      } = _this$props,
+      otherProps = _objectWithoutProperties(_this$props, _excluded);
+    const width = value ? "".concat(ProgressBar.toPercent(value, max), "%") : undefined;
+    const classes = classNames(modules_fb7af416.progressBar, className, {
+      [modules_fb7af416.globalMode]: global,
+      [modules_fb7af416.staticLineColor]: staticColor
+    });
+    return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({}, otherProps), {}, {
+      className: classes,
+      ref: this.progressbarWrapperRef,
+      children: /*#__PURE__*/jsx("div", {
+        className: modules_fb7af416.line,
+        ref: this.progressbarRef,
+        role: "progressbar",
+        "aria-label": label,
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        style: {
+          width
+        }
+      })
+    }));
+  }
+}
 _defineProperty(ProgressBar, "propTypes", {
   label: PropTypes.string,
   /**