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

package/components/list/list.js

@@ -1,14 +1,6 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, d as _objectSpread2, e as _classCallCheck, f as _callSuper, c as _objectWithoutProperties } from '../_helpers/_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.symbol.js';
+import { _ as _defineProperty, a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.symbol.description.js';
-import 'core-js/modules/es.array.concat.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.array.map.js';
-import 'core-js/modules/es.object.assign.js';
-import 'core-js/modules/es.object.to-string.js';
-import 'core-js/modules/es.string.includes.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { Component, createElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -35,72 +27,52 @@ import { Type, Dimension, DEFAULT_ITEM_TYPE } from './consts.js';
 import { m as modules_3b67a421 } from '../_helpers/list.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import 'core-js/modules/es.array.reduce.js';
-import 'core-js/modules/es.object.entries.js';
-import 'core-js/modules/es.regexp.to-string.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 'core-js/modules/es.array.filter.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 '../shortcuts/core.js';
-import 'core-js/modules/es.array.slice.js';
-import 'core-js/modules/es.array.splice.js';
-import 'core-js/modules/es.string.match.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 import '../link/link.js';
 import '../link/clickableLink.js';
 import '../_helpers/link.js';
-import 'core-js/modules/es.array.index-of.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
 import 'core-js/modules/es.string.replace.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';
 import '../global/get-event-key.js';
 
-var _excluded = ["selectedLabel", "originalModel"];
+const _excluded = ["selectedLabel", "originalModel"];
 function noop() {}
-var warnEmptyKey = deprecate(function () {}, 'No key passed for list item with non-string label. It is considered as a bad practice and has been deprecated, please provide a key.');
+const warnEmptyKey = deprecate(() => {}, 'No key passed for list item with non-string label. It is considered as a bad practice and has been deprecated, please provide a key.');
 /**
  * @param {Type} listItemType
  * @param {Object} item list item
  */
 function isItemType(listItemType, item) {
-  var type = item.rgItemType;
+  let type = item.rgItemType;
   if (type == null) {
     type = DEFAULT_ITEM_TYPE;
   }
   return type === listItemType;
 }
-var nonActivatableTypes = [Type.SEPARATOR, Type.TITLE, Type.MARGIN];
+const nonActivatableTypes = [Type.SEPARATOR, Type.TITLE, Type.MARGIN];
 function isActivatable(item) {
   return item != null && !nonActivatableTypes.includes(item.rgItemType) && !item.disabled;
 }
 function getDataHash(data) {
-  return data.map(function (it) {
-    return "".concat(it.key, "-").concat(it.disabled);
-  }).join('-');
+  return data.map(it => "".concat(it.key, "-").concat(it.disabled)).join('-');
 }
-var shouldActivateFirstItem = function shouldActivateFirstItem(props) {
-  return props.activateFirstItem || props.activateSingleItem && props.data.length === 1;
-};
-var ActiveItemContext = createStatefulContext(undefined, 'ActiveItem');
+const shouldActivateFirstItem = props => props.activateFirstItem || props.activateSingleItem && props.data.length === 1;
+const ActiveItemContext = createStatefulContext(undefined, 'ActiveItem');
 /**
  * @name List
  * @constructor
@@ -109,15 +81,12 @@ var ActiveItemContext = createStatefulContext(undefined, 'ActiveItem');
 /**
  * Displays a list of items.
  */
-var List = /*#__PURE__*/function (_Component) {
-  function List() {
+class List extends Component {
+  constructor() {
     var _this;
-    _classCallCheck(this, List);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, List, [].concat(args));
-    _defineProperty(_this, "state", {
+    super(...arguments);
+    _this = this;
+    _defineProperty(this, "state", {
       activeIndex: null,
       prevActiveIndex: null,
       prevData: [],
@@ -128,37 +97,33 @@ var List = /*#__PURE__*/function (_Component) {
       disabledHover: false,
       scrolledToBottom: false
     });
-    _defineProperty(_this, "scheduleScrollListener", scheduleRAF());
-    _defineProperty(_this, "scheduleHoverListener", scheduleRAF());
-    _defineProperty(_this, "virtualizedList", void 0);
-    _defineProperty(_this, "unmounted", void 0);
-    _defineProperty(_this, "container", void 0);
-    _defineProperty(_this, "hoverHandler", memoize(function (index) {
-      return function () {
-        return _this.scheduleHoverListener(function () {
-          if (_this.state.disabledHover) {
-            return;
-          }
-          if (_this.container) {
-            _this.setState({
-              activeIndex: index,
-              activeItem: _this.props.data[index],
-              needScrollToActive: false
-            });
-          }
+    _defineProperty(this, "scheduleScrollListener", scheduleRAF());
+    _defineProperty(this, "scheduleHoverListener", scheduleRAF());
+    _defineProperty(this, "virtualizedList", void 0);
+    _defineProperty(this, "unmounted", void 0);
+    _defineProperty(this, "container", void 0);
+    _defineProperty(this, "hoverHandler", memoize(index => () => this.scheduleHoverListener(() => {
+      if (this.state.disabledHover) {
+        return;
+      }
+      if (this.container) {
+        this.setState({
+          activeIndex: index,
+          activeItem: this.props.data[index],
+          needScrollToActive: false
         });
-      };
-    }));
+      }
+    })));
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    _defineProperty(_this, "_bufferSize", 10);
+    _defineProperty(this, "_bufferSize", 10);
     // keep X items above and below of the visible area
     // reuse size cache for similar items
-    _defineProperty(_this, "sizeCacheKey", function (index) {
-      if (index === 0 || index === _this.props.data.length + 1) {
+    _defineProperty(this, "sizeCacheKey", index => {
+      if (index === 0 || index === this.props.data.length + 1) {
         return Type.MARGIN;
       }
-      var item = _this.props.data[index - 1];
-      var isFirst = index === 1;
+      const item = this.props.data[index - 1];
+      const isFirst = index === 1;
       switch (item.rgItemType) {
         case Type.SEPARATOR:
         case Type.TITLE:
@@ -176,51 +141,44 @@ var List = /*#__PURE__*/function (_Component) {
           return Type.ITEM;
       }
     });
-    _defineProperty(_this, "_cache", new CellMeasurerCache({
-      defaultHeight: _this.defaultItemHeight(),
+    _defineProperty(this, "_cache", new CellMeasurerCache({
+      defaultHeight: this.defaultItemHeight(),
       fixedWidth: true,
-      keyMapper: _this.sizeCacheKey
-    }));
-    _defineProperty(_this, "_hasActivatableItems", memoizeOne(function (items) {
-      return items.some(isActivatable);
+      keyMapper: this.sizeCacheKey
     }));
-    _defineProperty(_this, "activateFirst", function () {
-      var firstActivatableIndex = _this.props.data.findIndex(isActivatable);
+    _defineProperty(this, "_hasActivatableItems", memoizeOne(items => items.some(isActivatable)));
+    _defineProperty(this, "activateFirst", () => {
+      const firstActivatableIndex = this.props.data.findIndex(isActivatable);
       if (firstActivatableIndex >= 0) {
-        _this.setState({
+        this.setState({
           activeIndex: firstActivatableIndex,
-          activeItem: _this.props.data[firstActivatableIndex],
+          activeItem: this.props.data[firstActivatableIndex],
           needScrollToActive: true
         });
       }
     });
-    _defineProperty(_this, "selectHandler", memoize(function (index) {
-      return function (event) {
-        var tryKeepOpen = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-        var item = _this.props.data[index];
-        if (!_this.props.useMouseUp && item.onClick) {
-          item.onClick(item, event);
-        } else if (_this.props.useMouseUp && item.onMouseUp) {
-          item.onMouseUp(item, event);
-        }
-        if (_this.props.onSelect) {
-          _this.props.onSelect(item, event, {
-            tryKeepOpen
-          });
-        }
-      };
-    }));
-    _defineProperty(_this, "checkboxHandler", memoize(function (index) {
-      return function (event) {
-        return _this.selectHandler(index)(event, true);
-      };
+    _defineProperty(this, "selectHandler", memoize(index => function (event) {
+      let tryKeepOpen = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      const item = _this.props.data[index];
+      if (!_this.props.useMouseUp && item.onClick) {
+        item.onClick(item, event);
+      } else if (_this.props.useMouseUp && item.onMouseUp) {
+        item.onMouseUp(item, event);
+      }
+      if (_this.props.onSelect) {
+        _this.props.onSelect(item, event, {
+          tryKeepOpen
+        });
+      }
     }));
-    _defineProperty(_this, "upHandler", function (e) {
-      var _this$props = _this.props,
-        data = _this$props.data,
-        disableMoveOverflow = _this$props.disableMoveOverflow;
-      var index = _this.state.activeIndex;
-      var newIndex;
+    _defineProperty(this, "checkboxHandler", memoize(index => event => this.selectHandler(index)(event, true)));
+    _defineProperty(this, "upHandler", e => {
+      const {
+        data,
+        disableMoveOverflow
+      } = this.props;
+      const index = this.state.activeIndex;
+      let newIndex;
       if (index === null || index === 0) {
         if (!disableMoveOverflow) {
           newIndex = data.length - 1;
@@ -230,15 +188,16 @@ var List = /*#__PURE__*/function (_Component) {
       } else {
         newIndex = index - 1;
       }
-      _this.moveHandler(newIndex, _this.upHandler, e);
+      this.moveHandler(newIndex, this.upHandler, e);
     });
-    _defineProperty(_this, "downHandler", function (e) {
-      var _this$props2 = _this.props,
-        data = _this$props2.data,
-        disableMoveOverflow = _this$props2.disableMoveOverflow,
-        disableMoveDownOverflow = _this$props2.disableMoveDownOverflow;
-      var index = _this.state.activeIndex;
-      var newIndex;
+    _defineProperty(this, "downHandler", e => {
+      const {
+        data,
+        disableMoveOverflow,
+        disableMoveDownOverflow
+      } = this.props;
+      const index = this.state.activeIndex;
+      let newIndex;
       if (index === null) {
         newIndex = 0;
       } else if (index + 1 === data.length) {
@@ -250,43 +209,43 @@ var List = /*#__PURE__*/function (_Component) {
       } else {
         newIndex = index + 1;
       }
-      _this.moveHandler(newIndex, _this.downHandler, e);
+      this.moveHandler(newIndex, this.downHandler, e);
     });
-    _defineProperty(_this, "homeHandler", function (e) {
-      _this.moveHandler(0, _this.downHandler, e);
+    _defineProperty(this, "homeHandler", e => {
+      this.moveHandler(0, this.downHandler, e);
     });
-    _defineProperty(_this, "endHandler", function (e) {
-      _this.moveHandler(_this.props.data.length - 1, _this.upHandler, e);
+    _defineProperty(this, "endHandler", e => {
+      this.moveHandler(this.props.data.length - 1, this.upHandler, e);
     });
-    _defineProperty(_this, "onDocumentMouseMove", function () {
-      if (_this.state.disabledHover) {
-        _this.setState({
+    _defineProperty(this, "onDocumentMouseMove", () => {
+      if (this.state.disabledHover) {
+        this.setState({
           disabledHover: false
         });
       }
     });
-    _defineProperty(_this, "onDocumentKeyDown", function (e) {
-      var metaKeys = [16, 17, 18, 19, 20, 91]; // eslint-disable-line @typescript-eslint/no-magic-numbers
-      if (!_this.state.disabledHover && !metaKeys.includes(e.keyCode)) {
-        _this.setState({
+    _defineProperty(this, "onDocumentKeyDown", e => {
+      const metaKeys = [16, 17, 18, 19, 20, 91]; // eslint-disable-line @typescript-eslint/no-magic-numbers
+      if (!this.state.disabledHover && !metaKeys.includes(e.keyCode)) {
+        this.setState({
           disabledHover: true
         });
       }
     });
-    _defineProperty(_this, "mouseHandler", function () {
-      _this.setState({
+    _defineProperty(this, "mouseHandler", () => {
+      this.setState({
         scrolling: false
       });
     });
-    _defineProperty(_this, "scrollHandler", function () {
-      _this.setState({
+    _defineProperty(this, "scrollHandler", () => {
+      this.setState({
         scrolling: true
-      }, _this.scrollEndHandler);
+      }, this.scrollEndHandler);
     });
-    _defineProperty(_this, "enterHandler", function (event, shortcut) {
-      if (_this.state.activeIndex !== null) {
-        var item = _this.props.data[_this.state.activeIndex];
-        _this.selectHandler(_this.state.activeIndex)(event);
+    _defineProperty(this, "enterHandler", (event, shortcut) => {
+      if (this.state.activeIndex !== null) {
+        const item = this.props.data[this.state.activeIndex];
+        this.selectHandler(this.state.activeIndex)(event);
         if (item.href && !event.defaultPrevented) {
           if (shortcut != null && ['command+enter', 'ctrl+enter'].includes(shortcut)) {
             window.open(item.href, '_blank');
@@ -301,53 +260,51 @@ var List = /*#__PURE__*/function (_Component) {
         return true; // propagate event to the parent component (e.g., QueryAssist)
       }
     });
-    _defineProperty(_this, "clearSelected", function () {
-      _this.setState({
+    _defineProperty(this, "clearSelected", () => {
+      this.setState({
         activeIndex: null,
         needScrollToActive: false
       });
     });
-    _defineProperty(_this, "scrollEndHandler", function () {
-      return _this.scheduleScrollListener(function () {
-        var innerContainer = _this.inner;
-        if (innerContainer) {
-          var maxScrollingPosition = innerContainer.scrollHeight;
-          var sensitivity = _this.defaultItemHeight() / 2;
-          var currentScrollingPosition = innerContainer.scrollTop + innerContainer.clientHeight + sensitivity;
-          var scrolledToBottom = maxScrollingPosition > 0 && currentScrollingPosition >= maxScrollingPosition;
-          if (!_this.unmounted) {
-            _this.setState({
-              scrolledToBottom
-            });
-          }
-          if (scrolledToBottom) {
-            _this.props.onScrollToBottom();
-          }
+    _defineProperty(this, "scrollEndHandler", () => this.scheduleScrollListener(() => {
+      const innerContainer = this.inner;
+      if (innerContainer) {
+        const maxScrollingPosition = innerContainer.scrollHeight;
+        const sensitivity = this.defaultItemHeight() / 2;
+        const currentScrollingPosition = innerContainer.scrollTop + innerContainer.clientHeight + sensitivity;
+        const scrolledToBottom = maxScrollingPosition > 0 && currentScrollingPosition >= maxScrollingPosition;
+        if (!this.unmounted) {
+          this.setState({
+            scrolledToBottom
+          });
         }
-      });
-    });
-    _defineProperty(_this, "checkOverflow", function () {
-      if (_this.inner) {
-        _this.setState({
-          hasOverflow: _this.inner.scrollHeight - _this.inner.clientHeight > 1
+        if (scrolledToBottom) {
+          this.props.onScrollToBottom();
+        }
+      }
+    }));
+    _defineProperty(this, "checkOverflow", () => {
+      if (this.inner) {
+        this.setState({
+          hasOverflow: this.inner.scrollHeight - this.inner.clientHeight > 1
         });
       }
     });
-    _defineProperty(_this, "renderItem", function (_ref) {
-      var _ref$index = _ref.index,
-        index = _ref$index === void 0 ? 1 : _ref$index,
-        style = _ref.style,
-        _ref$isScrolling = _ref.isScrolling,
-        isScrolling = _ref$isScrolling === void 0 ? false : _ref$isScrolling,
-        parent = _ref.parent,
-        key = _ref.key;
-      var itemKey;
-      var el;
-      var realIndex = index - 1;
-      var item = _this.props.data[realIndex];
-      var itemId = _this.getId(item);
+    _defineProperty(this, "renderItem", _ref => {
+      let {
+        index = 1,
+        style,
+        isScrolling = false,
+        parent,
+        key
+      } = _ref;
+      let itemKey;
+      let el;
+      const realIndex = index - 1;
+      const item = this.props.data[realIndex];
+      const itemId = this.getId(item);
       // top and bottom margins
-      if (index === 0 || index === _this.props.data.length + 1 || item.rgItemType === Type.MARGIN) {
+      if (index === 0 || index === this.props.data.length + 1 || item.rgItemType === Type.MARGIN) {
         itemKey = key || "".concat(Type.MARGIN, "_").concat(index);
         el = /*#__PURE__*/jsx("div", {
           style: {
@@ -356,39 +313,37 @@ var List = /*#__PURE__*/function (_Component) {
         });
       } else {
         // Hack around SelectNG implementation
-        item.selectedLabel;
-          item.originalModel;
-          var restProps = _objectWithoutProperties(item, _excluded);
-        var cleanedProps = restProps;
+        const restProps = _objectWithoutProperties(item, _excluded);
+        const cleanedProps = restProps;
         if (cleanedProps.url) {
           cleanedProps.href = cleanedProps.url;
         }
         if (cleanedProps.href) {
           cleanedProps.rgItemType = Type.LINK;
         }
-        var itemProps = Object.assign({
+        const itemProps = Object.assign({
           rgItemType: DEFAULT_ITEM_TYPE
         }, restProps);
         itemKey = key || itemId;
-        itemProps.hover = realIndex === _this.state.activeIndex;
+        itemProps.hover = realIndex === this.state.activeIndex;
         if (itemProps.hoverClassName != null && itemProps.hover) {
           itemProps.className = classNames(itemProps.className, itemProps.hoverClassName);
         }
-        itemProps.onMouseOver = _this.hoverHandler(realIndex);
+        itemProps.onMouseOver = this.hoverHandler(realIndex);
         itemProps.tabIndex = -1;
         itemProps.scrolling = isScrolling;
-        var selectHandler = _this.selectHandler(realIndex);
-        if (_this.props.useMouseUp) {
+        const selectHandler = this.selectHandler(realIndex);
+        if (this.props.useMouseUp) {
           itemProps.onMouseUp = selectHandler;
         } else {
           itemProps.onClick = selectHandler;
         }
-        itemProps.onCheckboxChange = _this.checkboxHandler(realIndex);
+        itemProps.onCheckboxChange = this.checkboxHandler(realIndex);
         if (itemProps.compact == null) {
-          itemProps.compact = _this.props.compact;
+          itemProps.compact = this.props.compact;
         }
-        var ItemComponent;
-        var isFirst = index === 1;
+        let ItemComponent;
+        const isFirst = index === 1;
         switch (itemProps.rgItemType) {
           case Type.SEPARATOR:
             ItemComponent = ListSeparator;
@@ -396,15 +351,15 @@ var List = /*#__PURE__*/function (_Component) {
             break;
           case Type.LINK:
             ItemComponent = ListLink;
-            _this.addItemDataTestToProp(itemProps);
+            this.addItemDataTestToProp(itemProps);
             break;
           case Type.ITEM:
             ItemComponent = ListItem;
-            _this.addItemDataTestToProp(itemProps);
+            this.addItemDataTestToProp(itemProps);
             break;
           case Type.CUSTOM:
             ItemComponent = ListCustom;
-            _this.addItemDataTestToProp(itemProps);
+            this.addItemDataTestToProp(itemProps);
             break;
           case Type.TITLE:
             itemProps.isFirst = isFirst;
@@ -418,12 +373,14 @@ var List = /*#__PURE__*/function (_Component) {
         }));
       }
       return parent ? /*#__PURE__*/jsx(CellMeasurer, {
-        cache: _this._cache,
+        cache: this._cache,
         parent: parent,
         rowIndex: index,
         columnIndex: 0,
-        children: function children(_ref2) {
-          var registerChild = _ref2.registerChild;
+        children: _ref2 => {
+          let {
+            registerChild
+          } = _ref2;
           return /*#__PURE__*/jsx("div", {
             ref: registerChild,
             style: style,
@@ -444,326 +401,282 @@ var List = /*#__PURE__*/function (_Component) {
         })
       }, itemKey);
     });
-    _defineProperty(_this, "addItemDataTestToProp", function (props) {
+    _defineProperty(this, "addItemDataTestToProp", props => {
       props['data-test'] = joinDataTestAttributes('ring-list-item', props['data-test']);
       return props;
     });
-    _defineProperty(_this, "virtualizedListRef", function (el) {
-      _this.virtualizedList = el;
+    _defineProperty(this, "virtualizedListRef", el => {
+      this.virtualizedList = el;
     });
-    _defineProperty(_this, "containerRef", function (el) {
-      _this.container = el;
+    _defineProperty(this, "containerRef", el => {
+      this.container = el;
     });
-    _defineProperty(_this, "_inner", void 0);
-    _defineProperty(_this, "id", getUID('list-'));
-    _defineProperty(_this, "shortcutsScope", _this.id);
-    _defineProperty(_this, "shortcutsMap", {
-      up: _this.upHandler,
-      down: _this.downHandler,
-      home: _this.homeHandler,
-      end: _this.endHandler,
-      enter: _this.enterHandler,
-      'meta+enter': _this.enterHandler,
-      'ctrl+enter': _this.enterHandler,
-      'command+enter': _this.enterHandler,
-      'shift+enter': _this.enterHandler
+    _defineProperty(this, "_inner", void 0);
+    _defineProperty(this, "id", getUID('list-'));
+    _defineProperty(this, "shortcutsScope", this.id);
+    _defineProperty(this, "shortcutsMap", {
+      up: this.upHandler,
+      down: this.downHandler,
+      home: this.homeHandler,
+      end: this.endHandler,
+      enter: this.enterHandler,
+      'meta+enter': this.enterHandler,
+      'ctrl+enter': this.enterHandler,
+      'command+enter': this.enterHandler,
+      'shift+enter': this.enterHandler
     });
-    return _this;
   }
-  _inherits(List, _Component);
-  return _createClass(List, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('mousemove', this.onDocumentMouseMove);
-      document.addEventListener('keydown', this.onDocumentKeyDown, true);
-      if (this.props.activeIndex == null && shouldActivateFirstItem(this.props)) {
-        this.activateFirst();
-      }
-    }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      var _this2 = this;
-      return nextProps !== this.props || Object.keys(nextState).some(function (key) {
-        return nextState[key] !== _this2.state[key];
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const {
+      prevActiveIndex,
+      prevData,
+      activeItem
+    } = prevState;
+    const {
+      data,
+      activeIndex,
+      restoreActiveIndex
+    } = nextProps;
+    const nextState = {
+      prevActiveIndex: activeIndex,
+      prevData: data
+    };
+    if (data !== prevData) {
+      Object.assign(nextState, {
+        activeIndex: null,
+        activeItem: null
       });
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (this.virtualizedList && prevProps.data !== this.props.data) {
-        this.virtualizedList.recomputeRowHeights();
-      }
-      if (this.props.activeIndex == null && getDataHash(this.props.data) !== getDataHash(prevProps.data) && shouldActivateFirstItem(this.props)) {
-        this.activateFirst();
-      }
-      this.checkOverflow();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.unmounted = true;
-      document.removeEventListener('mousemove', this.onDocumentMouseMove);
-      document.removeEventListener('keydown', this.onDocumentKeyDown, true);
-    }
-  }, {
-    key: "hasActivatableItems",
-    value: function hasActivatableItems() {
-      return this._hasActivatableItems(this.props.data);
-    }
-  }, {
-    key: "moveHandler",
-    value: function moveHandler(index, retryCallback, e) {
-      var correctedIndex;
-      if (this.props.data.length === 0 || !this.hasActivatableItems()) {
-        return;
-      } else if (this.props.data.length < index) {
-        correctedIndex = 0;
-      } else {
-        correctedIndex = index;
-      }
-      var item = this.props.data[correctedIndex];
-      this.setState({
-        activeIndex: correctedIndex,
-        activeItem: item,
+    if (activeIndex != null && activeIndex !== prevActiveIndex && data[activeIndex] != null) {
+      Object.assign(nextState, {
+        activeIndex,
+        activeItem: data[activeIndex],
         needScrollToActive: true
-      }, function onSet() {
-        if (!isActivatable(item)) {
-          retryCallback(e);
-          return;
-        }
-        if (e.key !== 'Home' && e.key !== 'End') {
-          preventDefault(e);
-        }
       });
+    } else if (data !== prevData && restoreActiveIndex && activeItem != null && activeItem.key != null) {
+      // Restore active index if there is an item with the same "key" property
+      const index = data.findIndex(item => item.key === activeItem.key);
+      if (index >= 0) {
+        Object.assign(nextState, {
+          activeIndex: index,
+          activeItem: data[index]
+        });
+      }
     }
-  }, {
-    key: "getFirst",
-    value: function getFirst() {
-      return this.props.data.find(function (item) {
-        return item.rgItemType === Type.ITEM || item.rgItemType === Type.CUSTOM;
-      });
+    return nextState;
+  }
+  componentDidMount() {
+    document.addEventListener('mousemove', this.onDocumentMouseMove);
+    document.addEventListener('keydown', this.onDocumentKeyDown, true);
+    if (this.props.activeIndex == null && shouldActivateFirstItem(this.props)) {
+      this.activateFirst();
     }
-  }, {
-    key: "getSelected",
-    value: function getSelected() {
-      return this.state.activeIndex != null ? this.props.data[this.state.activeIndex] : null;
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextProps !== this.props || Object.keys(nextState).some(key => nextState[key] !== this.state[key]);
+  }
+  componentDidUpdate(prevProps) {
+    if (this.virtualizedList && prevProps.data !== this.props.data) {
+      this.virtualizedList.recomputeRowHeights();
     }
-  }, {
-    key: "defaultItemHeight",
-    value: function defaultItemHeight() {
-      return this.props.compact ? Dimension.COMPACT_ITEM_HEIGHT : Dimension.ITEM_HEIGHT;
+    if (this.props.activeIndex == null && getDataHash(this.props.data) !== getDataHash(prevProps.data) && shouldActivateFirstItem(this.props)) {
+      this.activateFirst();
     }
-  }, {
-    key: "getVisibleListHeight",
-    value: function getVisibleListHeight(maxHeight) {
-      return maxHeight - this.defaultItemHeight() - Dimension.INNER_PADDING;
+    this.checkOverflow();
+  }
+  componentWillUnmount() {
+    this.unmounted = true;
+    document.removeEventListener('mousemove', this.onDocumentMouseMove);
+    document.removeEventListener('keydown', this.onDocumentKeyDown, true);
+  }
+  hasActivatableItems() {
+    return this._hasActivatableItems(this.props.data);
+  }
+  moveHandler(index, retryCallback, e) {
+    let correctedIndex;
+    if (this.props.data.length === 0 || !this.hasActivatableItems()) {
+      return;
+    } else if (this.props.data.length < index) {
+      correctedIndex = 0;
+    } else {
+      correctedIndex = index;
     }
-  }, {
-    key: "_deprecatedGenerateKeyFromContent",
-    value: function _deprecatedGenerateKeyFromContent(itemProps) {
-      var identificator = itemProps.label || itemProps.description;
-      var isString = typeof identificator === 'string' || identificator instanceof String;
-      if (identificator && !isString) {
-        warnEmptyKey();
-        "".concat(itemProps.rgItemType, "_").concat(JSON.stringify(identificator));
+    const item = this.props.data[correctedIndex];
+    this.setState({
+      activeIndex: correctedIndex,
+      activeItem: item,
+      needScrollToActive: true
+    }, function onSet() {
+      if (!isActivatable(item)) {
+        retryCallback(e);
+        return;
       }
-      return "".concat(itemProps.rgItemType, "_").concat(identificator);
-    }
-  }, {
-    key: "getId",
-    value: function getId(item) {
-      return item != null ? "".concat(this.id, ":").concat(item.key || this._deprecatedGenerateKeyFromContent(item)) : undefined;
-    }
-  }, {
-    key: "inner",
-    get: function get() {
-      if (!this._inner) {
-        this._inner = this.container && this.container.querySelector('.ring-list__i');
+      if (e.key !== 'Home' && e.key !== 'End') {
+        preventDefault(e);
       }
-      return this._inner;
+    });
+  }
+  getFirst() {
+    return this.props.data.find(item => item.rgItemType === Type.ITEM || item.rgItemType === Type.CUSTOM);
+  }
+  getSelected() {
+    return this.state.activeIndex != null ? this.props.data[this.state.activeIndex] : null;
+  }
+  defaultItemHeight() {
+    return this.props.compact ? Dimension.COMPACT_ITEM_HEIGHT : Dimension.ITEM_HEIGHT;
+  }
+  getVisibleListHeight(maxHeight) {
+    return maxHeight - this.defaultItemHeight() - Dimension.INNER_PADDING;
+  }
+  _deprecatedGenerateKeyFromContent(itemProps) {
+    const identificator = itemProps.label || itemProps.description;
+    const isString = typeof identificator === 'string' || identificator instanceof String;
+    if (identificator && !isString) {
+      warnEmptyKey();
+      return "".concat(itemProps.rgItemType, "_").concat(JSON.stringify(identificator));
     }
-  }, {
-    key: "renderVirtualizedInner",
-    value: function renderVirtualizedInner(_ref3) {
-      var _this3 = this;
-      var height = _ref3.height,
-        maxHeight = _ref3.maxHeight,
-        _ref3$autoHeight = _ref3.autoHeight,
-        autoHeight = _ref3$autoHeight === void 0 ? false : _ref3$autoHeight,
-        rowCount = _ref3.rowCount,
-        isScrolling = _ref3.isScrolling,
-        _ref3$onChildScroll = _ref3.onChildScroll,
-        onChildScroll = _ref3$onChildScroll === void 0 ? noop : _ref3$onChildScroll,
-        scrollTop = _ref3.scrollTop,
-        registerChild = _ref3.registerChild;
-      var dirOverride = {
-        direction: 'inherit'
-      }; // Virtualized sets "direction: ltr" by default https://github.com/bvaughn/react-virtualized/issues/457
-      return /*#__PURE__*/jsx(AutoSizer, {
-        disableHeight: true,
-        onResize: this.props.onResize,
-        children: function children(_ref4) {
-          var width = _ref4.width;
-          return /*#__PURE__*/jsx("div", {
-            ref: registerChild,
-            children: /*#__PURE__*/jsx(VirtualizedList, {
-              "aria-label": _this3.props.ariaLabel,
-              ref: _this3.virtualizedListRef,
-              className: classNames('ring-list__i', {
-                [modules_3b67a421.overscrollNone]: _this3.props.preventListOverscroll
-              }),
-              autoHeight: autoHeight,
-              style: maxHeight ? _objectSpread2({
-                maxHeight,
-                height: 'auto'
-              }, dirOverride) : dirOverride,
-              autoContainerWidth: true,
-              height: height,
-              width: width,
-              isScrolling: isScrolling,
-              onScroll: function onScroll(e) {
-                onChildScroll(e);
-                _this3.scrollEndHandler();
-              },
-              scrollTop: scrollTop,
-              rowCount: rowCount,
-              estimatedRowSize: _this3.defaultItemHeight(),
-              rowHeight: _this3._cache.rowHeight,
-              rowRenderer: _this3.renderItem,
-              overscanRowCount: _this3._bufferSize
-              // ensure rerendering
-              ,
-              noop: function noop() {},
-              scrollToIndex: !_this3.props.disableScrollToActive && _this3.state.needScrollToActive && _this3.state.activeIndex != null ? _this3.state.activeIndex + 1 : undefined,
-              scrollToAlignment: "center",
-              deferredMeasurementCache: _this3._cache,
-              onRowsRendered: _this3.checkOverflow
-            })
-          });
-        }
-      });
+    return "".concat(itemProps.rgItemType, "_").concat(identificator);
+  }
+  getId(item) {
+    return item != null ? "".concat(this.id, ":").concat(item.key || this._deprecatedGenerateKeyFromContent(item)) : undefined;
+  }
+  get inner() {
+    if (!this._inner) {
+      this._inner = this.container && this.container.querySelector('.ring-list__i');
     }
-  }, {
-    key: "renderVirtualized",
-    value: function renderVirtualized(maxHeight, rowCount) {
-      var _this4 = this;
-      if (maxHeight) {
-        return this.renderVirtualizedInner({
-          height: maxHeight,
-          maxHeight,
-          rowCount
+    return this._inner;
+  }
+  renderVirtualizedInner(_ref3) {
+    let {
+      height,
+      maxHeight,
+      autoHeight = false,
+      rowCount,
+      isScrolling,
+      onChildScroll = noop,
+      scrollTop,
+      registerChild
+    } = _ref3;
+    const dirOverride = {
+      direction: 'inherit'
+    }; // Virtualized sets "direction: ltr" by default https://github.com/bvaughn/react-virtualized/issues/457
+    return /*#__PURE__*/jsx(AutoSizer, {
+      disableHeight: true,
+      onResize: this.props.onResize,
+      children: _ref4 => {
+        let {
+          width
+        } = _ref4;
+        return /*#__PURE__*/jsx("div", {
+          ref: registerChild,
+          children: /*#__PURE__*/jsx(VirtualizedList, {
+            "aria-label": this.props.ariaLabel,
+            ref: this.virtualizedListRef,
+            className: classNames('ring-list__i', {
+              [modules_3b67a421.overscrollNone]: this.props.preventListOverscroll
+            }),
+            autoHeight: autoHeight,
+            style: maxHeight ? _objectSpread2({
+              maxHeight,
+              height: 'auto'
+            }, dirOverride) : dirOverride,
+            autoContainerWidth: true,
+            height: height,
+            width: width,
+            isScrolling: isScrolling,
+            onScroll: e => {
+              onChildScroll(e);
+              this.scrollEndHandler();
+            },
+            scrollTop: scrollTop,
+            rowCount: rowCount,
+            estimatedRowSize: this.defaultItemHeight(),
+            rowHeight: this._cache.rowHeight,
+            rowRenderer: this.renderItem,
+            overscanRowCount: this._bufferSize
+            // ensure rerendering
+            ,
+            noop: () => {},
+            scrollToIndex: !this.props.disableScrollToActive && this.state.needScrollToActive && this.state.activeIndex != null ? this.state.activeIndex + 1 : undefined,
+            scrollToAlignment: "center",
+            deferredMeasurementCache: this._cache,
+            onRowsRendered: this.checkOverflow
+          })
         });
       }
-      return /*#__PURE__*/jsx(WindowScroller, {
-        children: function children(props) {
-          return _this4.renderVirtualizedInner(_objectSpread2(_objectSpread2({}, props), {}, {
-            rowCount,
-            autoHeight: true
-          }));
-        }
+    });
+  }
+  renderVirtualized(maxHeight, rowCount) {
+    if (maxHeight) {
+      return this.renderVirtualizedInner({
+        height: maxHeight,
+        maxHeight,
+        rowCount
       });
     }
-  }, {
-    key: "renderSimple",
-    value: function renderSimple(maxHeight, rowCount) {
-      var items = [];
-      for (var index = 0; index < rowCount; index++) {
-        items.push(this.renderItem({
-          index,
-          isScrolling: this.state.scrolling
-        }));
-      }
-      return /*#__PURE__*/jsx("div", {
-        className: classNames('ring-list__i', modules_3b67a421.simpleInner),
-        onScroll: this.scrollHandler,
-        onMouseMove: this.mouseHandler,
-        children: /*#__PURE__*/jsx("div", {
-          "aria-label": this.props.ariaLabel,
-          role: "grid",
-          style: maxHeight ? {
-            maxHeight: this.getVisibleListHeight(maxHeight)
-          } : undefined,
-          children: items
-        })
-      });
+    return /*#__PURE__*/jsx(WindowScroller, {
+      children: props => this.renderVirtualizedInner(_objectSpread2(_objectSpread2({}, props), {}, {
+        rowCount,
+        autoHeight: true
+      }))
+    });
+  }
+  renderSimple(maxHeight, rowCount) {
+    const items = [];
+    for (let index = 0; index < rowCount; index++) {
+      items.push(this.renderItem({
+        index,
+        isScrolling: this.state.scrolling
+      }));
     }
-  }, {
-    key: "render",
-    value: /** @override */
-    function render() {
-      var hint = this.getSelected() && this.props.hintOnSelection || this.props.hint;
-      var fadeStyles = hint ? {
-        bottom: Dimension.ITEM_HEIGHT
-      } : undefined;
-      var rowCount = this.props.data.length + 2;
-      var maxHeight = this.props.maxHeight && this.getVisibleListHeight(this.props.maxHeight);
-      var classes = classNames(modules_3b67a421.list, this.props.className);
-      return /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx(ActiveItemContext.Updater, {
-          value: this.getId(this.state.activeItem),
-          skipUpdate: this.props.hidden || !isActivatable(this.state.activeItem)
-        }), /*#__PURE__*/jsxs("div", {
-          id: this.props.id,
-          ref: this.containerRef,
-          className: classes,
-          onMouseOut: this.props.onMouseOut,
-          onBlur: this.props.onMouseOut,
-          onMouseLeave: this.clearSelected,
-          "data-test": "ring-list",
-          children: [this.props.shortcuts && /*#__PURE__*/jsx(Shortcuts, {
-            map: this.props.shortcutsMap ? _objectSpread2(_objectSpread2({}, this.shortcutsMap), this.props.shortcutsMap) : this.shortcutsMap,
-            scope: this.shortcutsScope
-          }), this.props.renderOptimization ? this.renderVirtualized(maxHeight, rowCount) : this.renderSimple(maxHeight, rowCount), this.state.hasOverflow && !this.state.scrolledToBottom && /*#__PURE__*/jsx("div", {
-            className: modules_3b67a421.fade,
-            style: fadeStyles
-          }), hint && /*#__PURE__*/jsx(ListHint, {
-            label: hint
-          })]
+    return /*#__PURE__*/jsx("div", {
+      className: classNames('ring-list__i', modules_3b67a421.simpleInner),
+      onScroll: this.scrollHandler,
+      onMouseMove: this.mouseHandler,
+      children: /*#__PURE__*/jsx("div", {
+        "aria-label": this.props.ariaLabel,
+        role: "grid",
+        style: maxHeight ? {
+          maxHeight: this.getVisibleListHeight(maxHeight)
+        } : undefined,
+        children: items
+      })
+    });
+  }
+  /** @override */
+  render() {
+    const hint = this.getSelected() && this.props.hintOnSelection || this.props.hint;
+    const fadeStyles = hint ? {
+      bottom: Dimension.ITEM_HEIGHT
+    } : undefined;
+    const rowCount = this.props.data.length + 2;
+    const maxHeight = this.props.maxHeight && this.getVisibleListHeight(this.props.maxHeight);
+    const classes = classNames(modules_3b67a421.list, this.props.className);
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(ActiveItemContext.Updater, {
+        value: this.getId(this.state.activeItem),
+        skipUpdate: this.props.hidden || !isActivatable(this.state.activeItem)
+      }), /*#__PURE__*/jsxs("div", {
+        id: this.props.id,
+        ref: this.containerRef,
+        className: classes,
+        onMouseOut: this.props.onMouseOut,
+        onBlur: this.props.onMouseOut,
+        onMouseLeave: this.clearSelected,
+        "data-test": "ring-list",
+        children: [this.props.shortcuts && /*#__PURE__*/jsx(Shortcuts, {
+          map: this.props.shortcutsMap ? _objectSpread2(_objectSpread2({}, this.shortcutsMap), this.props.shortcutsMap) : this.shortcutsMap,
+          scope: this.shortcutsScope
+        }), this.props.renderOptimization ? this.renderVirtualized(maxHeight, rowCount) : this.renderSimple(maxHeight, rowCount), this.state.hasOverflow && !this.state.scrolledToBottom && /*#__PURE__*/jsx("div", {
+          className: modules_3b67a421.fade,
+          style: fadeStyles
+        }), hint && /*#__PURE__*/jsx(ListHint, {
+          label: hint
         })]
-      });
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps, prevState) {
-      var prevActiveIndex = prevState.prevActiveIndex,
-        prevData = prevState.prevData,
-        activeItem = prevState.activeItem;
-      var data = nextProps.data,
-        activeIndex = nextProps.activeIndex,
-        restoreActiveIndex = nextProps.restoreActiveIndex;
-      var nextState = {
-        prevActiveIndex: activeIndex,
-        prevData: data
-      };
-      if (data !== prevData) {
-        Object.assign(nextState, {
-          activeIndex: null,
-          activeItem: null
-        });
-      }
-      if (activeIndex != null && activeIndex !== prevActiveIndex && data[activeIndex] != null) {
-        Object.assign(nextState, {
-          activeIndex,
-          activeItem: data[activeIndex],
-          needScrollToActive: true
-        });
-      } else if (data !== prevData && restoreActiveIndex && activeItem != null && activeItem.key != null) {
-        // Restore active index if there is an item with the same "key" property
-        var index = data.findIndex(function (item) {
-          return item.key === activeItem.key;
-        });
-        if (index >= 0) {
-          Object.assign(nextState, {
-            activeIndex: index,
-            activeItem: data[index]
-          });
-        }
-      }
-      return nextState;
-    }
-  }]);
-}(Component);
+      })]
+    });
+  }
+}
 _defineProperty(List, "propTypes", {
   id: PropTypes.string,
   className: PropTypes.string,