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

package/components/header/links.js

@@ -1,13 +1,16 @@
-import { c as _objectWithoutProperties, d as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
 import classNames from 'classnames';
 import ScrollableSection from '../scrollable-section/scrollable-section.js';
 import { m as modules_47759f5e } from '../_helpers/header.js';
 import { jsx } from 'react/jsx-runtime';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'react';
 
-var _excluded = ["className"];
+const _excluded = ["className"];
 function Links(_ref) {
-  var className = _ref.className,
+  let {
+      className
+    } = _ref,
     restProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(ScrollableSection, _objectSpread2(_objectSpread2({}, restProps), {}, {
     className: classNames(modules_47759f5e.links, className)

package/components/header/logo.js

@@ -1,4 +1,4 @@
-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 { _ as _defineProperty, a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -10,35 +10,24 @@ 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';
 
-var _excluded = ["className"];
-var Logo = /*#__PURE__*/function (_PureComponent) {
-  function Logo() {
-    _classCallCheck(this, Logo);
-    return _callSuper(this, Logo, arguments);
+const _excluded = ["className"];
+class Logo extends PureComponent {
+  render() {
+    const _this$props = this.props,
+      {
+        className
+      } = _this$props,
+      restProps = _objectWithoutProperties(_this$props, _excluded);
+    const classes = classNames(modules_47759f5e.logo, className);
+    return /*#__PURE__*/jsx("div", {
+      className: classes,
+      children: /*#__PURE__*/jsx(Icon, _objectSpread2({}, restProps))
+    });
   }
-  _inherits(Logo, _PureComponent);
-  return _createClass(Logo, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        className = _this$props.className,
-        restProps = _objectWithoutProperties(_this$props, _excluded);
-      var classes = classNames(modules_47759f5e.logo, className);
-      return /*#__PURE__*/jsx("div", {
-        className: classes,
-        children: /*#__PURE__*/jsx(Icon, _objectSpread2({}, restProps))
-      });
-    }
-  }]);
-}(PureComponent);
+}
 _defineProperty(Logo, "propTypes", {
   className: PropTypes.string
 });

package/components/header/profile.js

@@ -1,6 +1,4 @@
-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.filter.js';
-import 'core-js/modules/es.object.to-string.js';
+import { _ as _defineProperty, a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
 import { Component, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -12,45 +10,24 @@ import { I18nContext } from '../i18n/i18n-context.js';
 import { isTruthy } from '../global/typescript-utils.js';
 import { m as modules_47759f5e } from '../_helpers/header.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import '../global/url.js';
-import 'core-js/modules/es.array.index-of.js';
 import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.match.js';
 import 'core-js/modules/es.string.replace.js';
 import '../global/dom.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.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';
 import '../avatar/fallback-avatar.js';
-import 'core-js/modules/es.array.from.js';
-import 'core-js/modules/es.array.map.js';
-import 'core-js/modules/es.array.slice.js';
 import '../global/get-uid.js';
-import 'core-js/modules/es.regexp.to-string.js';
 import '@jetbrains/icons/chevron-down';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon__svg.js';
-import 'core-js/modules/es.string.starts-with.js';
 import '../global/memoize.js';
-import 'core-js/modules/es.map.js';
-import 'core-js/modules/es.weak-map.js';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../list/list.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 'core-js/modules/es.array.find-index.js';
-import 'core-js/modules/es.array.includes.js';
-import 'core-js/modules/es.string.includes.js';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
 import 'react-virtualized/dist/es/WindowScroller';
@@ -61,7 +38,6 @@ import 'core-js/modules/es.array.reduce.js';
 import '../global/schedule-raf.js';
 import '../shortcuts/shortcuts.js';
 import '../shortcuts/core.js';
-import 'core-js/modules/es.array.splice.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
@@ -95,122 +71,118 @@ import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
 import '../i18n/i18n.js';
 
-var _excluded = ["className", "activeClassName", "closeOnSelect", "hasUpdates", "onLogout", "user", "profileUrl", "LinkComponent", "onSwitchUser", "renderPopupItems", "onRevertPostponement", "showApplyChangedUser", "showName", "showLogIn", "showLogOut", "showSwitchUser", "renderGuest", "translations", "size", "round", "loading", "onLogin", "menuProps", "onShow", "onHide"];
-var rgItemType = PopupMenu.ListProps.Type.LINK;
-var Profile = /*#__PURE__*/function (_PureComponent) {
-  function Profile() {
-    _classCallCheck(this, Profile);
-    return _callSuper(this, Profile, arguments);
-  }
-  _inherits(Profile, _PureComponent);
-  return _createClass(Profile, [{
-    key: "render",
-    value: function render() {
-      var _translations$applyCh, _translations$login, _translations$profile, _translations$switchU, _translations$logout;
-      var _this$props = this.props,
-        className = _this$props.className,
-        activeClassName = _this$props.activeClassName,
-        closeOnSelect = _this$props.closeOnSelect,
-        hasUpdates = _this$props.hasUpdates,
-        onLogout = _this$props.onLogout,
-        user = _this$props.user,
-        profileUrl = _this$props.profileUrl,
-        LinkComponent = _this$props.LinkComponent,
-        onSwitchUser = _this$props.onSwitchUser,
-        renderPopupItems = _this$props.renderPopupItems,
-        onRevertPostponement = _this$props.onRevertPostponement,
-        showApplyChangedUser = _this$props.showApplyChangedUser,
-        showName = _this$props.showName,
-        showLogIn = _this$props.showLogIn,
-        showLogOut = _this$props.showLogOut,
-        showSwitchUser = _this$props.showSwitchUser,
-        renderGuest = _this$props.renderGuest,
-        translations = _this$props.translations,
-        size = _this$props.size,
-        round = _this$props.round;
-        _this$props.loading;
-        _this$props.onLogin;
-        var menuProps = _this$props.menuProps,
-        onShow = _this$props.onShow,
-        onHide = _this$props.onHide,
-        props = _objectWithoutProperties(_this$props, _excluded);
-      var translate = this.context.translate;
-      if (!user) {
-        return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({}, props), {}, {
-          className: classNames(modules_47759f5e.profileEmpty, className),
-          children: /*#__PURE__*/jsx(Avatar, {
-            size: size,
-            round: round
-          })
-        }));
-      }
-      if (user.guest) {
-        return renderGuest(this.props);
-      }
-      var avatarWrapper = classNames(modules_47759f5e.avatarWrapper, {
-        [modules_47759f5e.hasUpdates]: hasUpdates
-      });
-      var anchor = /*#__PURE__*/jsxs("button", {
-        type: "button",
-        className: modules_47759f5e.anchorClassName,
-        children: [/*#__PURE__*/jsx("span", {
-          className: avatarWrapper,
-          children: /*#__PURE__*/jsx(Avatar, {
-            url: user.profile && user.profile.avatar && user.profile.avatar.url,
-            size: size,
-            round: round,
-            username: user.name
-          })
-        }), showName && /*#__PURE__*/jsx("span", {
-          children: user.name
-        })]
-      });
-      var items = [showApplyChangedUser && {
-        rgItemType,
-        label: (_translations$applyCh = translations === null || translations === void 0 ? void 0 : translations.applyChangedUser) !== null && _translations$applyCh !== void 0 ? _translations$applyCh : translate('applyChangedUser'),
-        className: modules_47759f5e.profileMenuItem,
-        onClick: onRevertPostponement
-      }, showLogIn && {
-        rgItemType,
-        label: (_translations$login = translations === null || translations === void 0 ? void 0 : translations.login) !== null && _translations$login !== void 0 ? _translations$login : translate('login'),
-        className: modules_47759f5e.profileMenuItem,
-        onClick: onRevertPostponement
-      }, {
-        rgItemType: PopupMenu.ListProps.Type.LINK,
-        label: (_translations$profile = translations === null || translations === void 0 ? void 0 : translations.profile) !== null && _translations$profile !== void 0 ? _translations$profile : translate('profile'),
-        target: '_self',
-        // Full page reload in Angular
-        href: profileUrl,
-        LinkComponent
-      }, showSwitchUser && {
-        rgItemType,
-        label: (_translations$switchU = translations === null || translations === void 0 ? void 0 : translations.switchUser) !== null && _translations$switchU !== void 0 ? _translations$switchU : translate('switchUser'),
-        className: modules_47759f5e.profileMenuItem,
-        onClick: onSwitchUser
-      }, showLogOut && {
-        rgItemType,
-        label: (_translations$logout = translations === null || translations === void 0 ? void 0 : translations.logout) !== null && _translations$logout !== void 0 ? _translations$logout : translate('logout'),
-        onClick: onLogout
-      }].filter(isTruthy);
-      return /*#__PURE__*/jsx(DropdownMenu, _objectSpread2(_objectSpread2({}, props), {}, {
-        onShow: onShow,
-        onHide: onHide,
-        title: user.name,
-        anchor: anchor,
-        data: renderPopupItems(items),
-        "data-test": "ring-profile",
-        className: classNames(modules_47759f5e.profile, className),
-        activeClassName: activeClassName,
-        menuProps: _objectSpread2({
-          closeOnSelect,
-          left: -2,
-          top: -8,
-          sidePadding: 32
-        }, menuProps)
+const _excluded = ["className", "activeClassName", "closeOnSelect", "hasUpdates", "onLogout", "user", "profileUrl", "LinkComponent", "onSwitchUser", "renderPopupItems", "onRevertPostponement", "showApplyChangedUser", "showName", "showLogIn", "showLogOut", "showSwitchUser", "renderGuest", "translations", "size", "round", "loading", "onLogin", "menuProps", "onShow", "onHide"];
+const rgItemType = PopupMenu.ListProps.Type.LINK;
+class Profile extends PureComponent {
+  render() {
+    var _translations$applyCh, _translations$login, _translations$profile, _translations$switchU, _translations$logout;
+    const _this$props = this.props,
+      {
+        className,
+        activeClassName,
+        closeOnSelect,
+        hasUpdates,
+        onLogout,
+        user,
+        profileUrl,
+        LinkComponent,
+        onSwitchUser,
+        renderPopupItems,
+        onRevertPostponement,
+        showApplyChangedUser,
+        showName,
+        showLogIn,
+        showLogOut,
+        showSwitchUser,
+        renderGuest,
+        translations,
+        size,
+        round,
+        loading,
+        onLogin,
+        menuProps,
+        onShow,
+        onHide
+      } = _this$props,
+      props = _objectWithoutProperties(_this$props, _excluded);
+    const {
+      translate
+    } = this.context;
+    if (!user) {
+      return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({}, props), {}, {
+        className: classNames(modules_47759f5e.profileEmpty, className),
+        children: /*#__PURE__*/jsx(Avatar, {
+          size: size,
+          round: round
+        })
       }));
     }
-  }]);
-}(PureComponent);
+    if (user.guest) {
+      return renderGuest(this.props);
+    }
+    const avatarWrapper = classNames(modules_47759f5e.avatarWrapper, {
+      [modules_47759f5e.hasUpdates]: hasUpdates
+    });
+    const anchor = /*#__PURE__*/jsxs("button", {
+      type: "button",
+      className: modules_47759f5e.anchorClassName,
+      children: [/*#__PURE__*/jsx("span", {
+        className: avatarWrapper,
+        children: /*#__PURE__*/jsx(Avatar, {
+          url: user.profile && user.profile.avatar && user.profile.avatar.url,
+          size: size,
+          round: round,
+          username: user.name
+        })
+      }), showName && /*#__PURE__*/jsx("span", {
+        children: user.name
+      })]
+    });
+    const items = [showApplyChangedUser && {
+      rgItemType,
+      label: (_translations$applyCh = translations === null || translations === void 0 ? void 0 : translations.applyChangedUser) !== null && _translations$applyCh !== void 0 ? _translations$applyCh : translate('applyChangedUser'),
+      className: modules_47759f5e.profileMenuItem,
+      onClick: onRevertPostponement
+    }, showLogIn && {
+      rgItemType,
+      label: (_translations$login = translations === null || translations === void 0 ? void 0 : translations.login) !== null && _translations$login !== void 0 ? _translations$login : translate('login'),
+      className: modules_47759f5e.profileMenuItem,
+      onClick: onRevertPostponement
+    }, {
+      rgItemType: PopupMenu.ListProps.Type.LINK,
+      label: (_translations$profile = translations === null || translations === void 0 ? void 0 : translations.profile) !== null && _translations$profile !== void 0 ? _translations$profile : translate('profile'),
+      target: '_self',
+      // Full page reload in Angular
+      href: profileUrl,
+      LinkComponent
+    }, showSwitchUser && {
+      rgItemType,
+      label: (_translations$switchU = translations === null || translations === void 0 ? void 0 : translations.switchUser) !== null && _translations$switchU !== void 0 ? _translations$switchU : translate('switchUser'),
+      className: modules_47759f5e.profileMenuItem,
+      onClick: onSwitchUser
+    }, showLogOut && {
+      rgItemType,
+      label: (_translations$logout = translations === null || translations === void 0 ? void 0 : translations.logout) !== null && _translations$logout !== void 0 ? _translations$logout : translate('logout'),
+      onClick: onLogout
+    }].filter(isTruthy);
+    return /*#__PURE__*/jsx(DropdownMenu, _objectSpread2(_objectSpread2({}, props), {}, {
+      onShow: onShow,
+      onHide: onHide,
+      title: user.name,
+      anchor: anchor,
+      data: renderPopupItems(items),
+      "data-test": "ring-profile",
+      className: classNames(modules_47759f5e.profile, className),
+      activeClassName: activeClassName,
+      menuProps: _objectSpread2({
+        closeOnSelect,
+        left: -2,
+        top: -8,
+        sidePadding: 32
+      }, menuProps)
+    }));
+  }
+}
 _defineProperty(Profile, "propTypes", {
   className: PropTypes.string,
   activeClassName: PropTypes.string,
@@ -250,19 +222,21 @@ _defineProperty(Profile, "propTypes", {
 });
 _defineProperty(Profile, "defaultProps", {
   closeOnSelect: true,
-  renderPopupItems: function renderPopupItems(items) {
-    return items;
-  },
+  renderPopupItems: items => items,
   size: Size.Size32,
-  renderGuest: function renderGuest(_ref) {
-    var loading = _ref.loading,
-      onLogin = _ref.onLogin,
-      className = _ref.className,
-      translations = _ref.translations;
+  renderGuest: _ref => {
+    let {
+      loading,
+      onLogin,
+      className,
+      translations
+    } = _ref;
     return /*#__PURE__*/jsx(I18nContext.Consumer, {
-      children: function children(_ref2) {
+      children: _ref2 => {
         var _translations$login2;
-        var translate = _ref2.translate;
+        let {
+          translate
+        } = _ref2;
         return /*#__PURE__*/jsx("div", {
           className: classNames(modules_47759f5e.profileEmpty, className),
           children: /*#__PURE__*/jsx(Button, {

package/components/header/services-link.js

@@ -6,9 +6,7 @@ export { S as default } from '../_helpers/services-link.js';
 import 'react/jsx-runtime';
 import 'classnames';
 import '../global/data-tests.js';
-import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.reduce.js';
-import 'core-js/modules/es.object.entries.js';
-import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import '../link/clickableLink.js';
 import '../_helpers/link.js';

package/components/header/services.js

@@ -1,9 +1,6 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, c as _objectWithoutProperties, d as _objectSpread2, j as _toConsumableArray, e as _classCallCheck, f as _callSuper } 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.map.js';
+import { _ as _defineProperty, a as _objectWithoutProperties, 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/web.dom-collections.iterator.js';
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import servicesIcon from '@jetbrains/icons/services-20px';
@@ -16,7 +13,6 @@ import { S as ServicesLink, m as modules_74a7bf8b } from '../_helpers/services-l
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '../global/data-tests.js';
 import 'core-js/modules/es.array.reduce.js';
-import 'core-js/modules/es.object.entries.js';
 import '../global/typescript-utils.js';
 import '../_helpers/anchor.js';
 import '@jetbrains/icons/chevron-10px';
@@ -26,34 +22,18 @@ import '../icon/icon__constants.js';
 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.weak-map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
-import 'core-js/modules/es.regexp.to-string.js';
-import 'core-js/modules/web.dom-collections.for-each.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../global/schedule-raf.js';
 import '../global/dom.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 '../shortcuts/shortcuts.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';
@@ -65,10 +45,12 @@ import '../_helpers/header.js';
 import '../link/link.js';
 import '../_helpers/link.js';
 
-var _excluded = ["clientId", "loading", "services", "initShown", "theme"];
-var makeAnchor = function makeAnchor(loading) {
-  var Anchor = function Anchor(_ref) {
-    var active = _ref.active;
+const _excluded = ["clientId", "loading", "services", "initShown", "theme"];
+const makeAnchor = loading => {
+  const Anchor = _ref => {
+    let {
+      active
+    } = _ref;
     return /*#__PURE__*/jsx(HeaderIcon, {
       loader: loading,
       active: active,
@@ -81,80 +63,65 @@ var makeAnchor = function makeAnchor(loading) {
   };
   return Anchor;
 };
-var Services = /*#__PURE__*/function (_PureComponent) {
-  function Services() {
-    var _this;
-    _classCallCheck(this, Services);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, Services, [].concat(args));
-    _defineProperty(_this, "serviceIsActive", function (service) {
-      return service.id === _this.props.clientId;
-    });
-    return _this;
+class Services extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "serviceIsActive", service => service.id === this.props.clientId);
   }
-  _inherits(Services, _PureComponent);
-  return _createClass(Services, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props;
-        _this$props.clientId;
-        var loading = _this$props.loading,
-        services = _this$props.services,
-        initShown = _this$props.initShown,
-        theme = _this$props.theme,
-        props = _objectWithoutProperties(_this$props, _excluded);
-      if (!services) {
-        return /*#__PURE__*/jsx(HeaderIcon, _objectSpread2(_objectSpread2({}, props), {}, {
-          loader: loading,
-          active: loading,
-          icon: servicesIcon,
-          "aria-label": "Services"
-        }));
-      }
-      var sortedServices = _toConsumableArray(services).sort(Services.sort);
-      var servicesWithIcons = sortedServices.filter(function (service) {
-        return service.iconUrl && service.homeUrl;
-      });
-      var servicesWithOutIcons = sortedServices.filter(function (service) {
-        return !service.iconUrl && service.homeUrl;
-      });
-      var separatorIsRequired = servicesWithIcons.length !== 0 && servicesWithOutIcons.length !== 0;
-      return /*#__PURE__*/jsx(Dropdown, _objectSpread2(_objectSpread2({}, props), {}, {
-        anchor: makeAnchor(loading),
-        initShown: initShown,
-        children: /*#__PURE__*/jsxs(Popup, {
-          className: classNames(modules_74a7bf8b.services, {
-            [modules_59717246.dark]: theme === Theme.DARK
-          }),
-          top: -3,
-          children: [servicesWithIcons.map(function (service) {
-            var isActive = _this2.serviceIsActive(service);
-            return /*#__PURE__*/jsx(Services.Link, {
-              active: isActive,
-              className: isActive ? modules_74a7bf8b.activeItem : modules_74a7bf8b.item,
-              service: service
-            }, service.id);
-          }), separatorIsRequired && /*#__PURE__*/jsx("div", {
-            className: modules_74a7bf8b.line
-          }, "separator"), servicesWithOutIcons.map(function (service) {
-            var isActive = _this2.serviceIsActive(service);
-            return /*#__PURE__*/jsx(Services.Link, {
-              active: isActive,
-              className: isActive ? modules_74a7bf8b.activeItemStacked : modules_74a7bf8b.itemStacked,
-              service: service
-            }, service.id);
-          })]
-        })
+  render() {
+    const _this$props = this.props,
+      {
+        clientId,
+        loading,
+        services,
+        initShown,
+        theme
+      } = _this$props,
+      props = _objectWithoutProperties(_this$props, _excluded);
+    if (!services) {
+      return /*#__PURE__*/jsx(HeaderIcon, _objectSpread2(_objectSpread2({}, props), {}, {
+        loader: loading,
+        active: loading,
+        icon: servicesIcon,
+        "aria-label": "Services"
       }));
     }
-  }]);
-}(PureComponent);
-_defineProperty(Services, "sort", function (a, b) {
-  var aApplicationName = a.applicationName || '';
-  var bApplicationName = b.applicationName || '';
+    const sortedServices = [...services].sort(Services.sort);
+    const servicesWithIcons = sortedServices.filter(service => service.iconUrl && service.homeUrl);
+    const servicesWithOutIcons = sortedServices.filter(service => !service.iconUrl && service.homeUrl);
+    const separatorIsRequired = servicesWithIcons.length !== 0 && servicesWithOutIcons.length !== 0;
+    return /*#__PURE__*/jsx(Dropdown, _objectSpread2(_objectSpread2({}, props), {}, {
+      anchor: makeAnchor(loading),
+      initShown: initShown,
+      children: /*#__PURE__*/jsxs(Popup, {
+        className: classNames(modules_74a7bf8b.services, {
+          [modules_59717246.dark]: theme === Theme.DARK
+        }),
+        top: -3,
+        children: [servicesWithIcons.map(service => {
+          const isActive = this.serviceIsActive(service);
+          return /*#__PURE__*/jsx(Services.Link, {
+            active: isActive,
+            className: isActive ? modules_74a7bf8b.activeItem : modules_74a7bf8b.item,
+            service: service
+          }, service.id);
+        }), separatorIsRequired && /*#__PURE__*/jsx("div", {
+          className: modules_74a7bf8b.line
+        }, "separator"), servicesWithOutIcons.map(service => {
+          const isActive = this.serviceIsActive(service);
+          return /*#__PURE__*/jsx(Services.Link, {
+            active: isActive,
+            className: isActive ? modules_74a7bf8b.activeItemStacked : modules_74a7bf8b.itemStacked,
+            service: service
+          }, service.id);
+        })]
+      })
+    }));
+  }
+}
+_defineProperty(Services, "sort", (a, b) => {
+  const aApplicationName = a.applicationName || '';
+  const bApplicationName = b.applicationName || '';
   return aApplicationName.localeCompare(bApplicationName) || a.name.localeCompare(b.name);
 });
 _defineProperty(Services, "propTypes", {