@jetbrains/ring-ui-built 7.0.65 → 7.0.70

package/components/list/list.js

@@ -1,7 +1,3 @@
-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.string.trim.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { Component, createElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
@@ -25,14 +21,12 @@ import ListSeparator from './list-separator.js';
 import ListHint from './list-hint.js';
 import { Type, Dimension, DEFAULT_ITEM_TYPE } from './consts.js';
 import { s as styles } from '../_helpers/list.js';
-import 'core-js/modules/es.regexp.exec.js';
 import '../shortcuts/core.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 import '../avatar/avatar.js';
 import '../global/url.js';
-import 'core-js/modules/es.string.replace.js';
 import '../_helpers/avatar-info.js';
 import '../avatar/avatar-size.js';
 import '../avatar/fallback-avatar.js';
@@ -50,7 +44,6 @@ import '../_helpers/link.js';
 import './list.classes.js';
 import '../global/get-event-key.js';
 
-const _excluded = ["selectedLabel", "originalModel"];
 function noop() {}
 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.');
 /**
@@ -69,7 +62,7 @@ function isActivatable(item) {
   return item !== null && item !== undefined && !nonActivatableTypes.includes(item.rgItemType) && !item.disabled;
 }
 function getDataHash(data) {
-  return data.map(it => "".concat(it.key, "-").concat(it.disabled)).join('-');
+  return data.map(it => `${it.key}-${it.disabled}`).join('-');
 }
 const shouldActivateFirstItem = props => props.activateFirstItem || props.activateSingleItem && props.data.length === 1;
 const ActiveItemContext = createStatefulContext(undefined, 'ActiveItem');
@@ -82,319 +75,33 @@ const ActiveItemContext = createStatefulContext(undefined, 'ActiveItem');
  * Displays a list of items.
  */
 class List extends Component {
-  constructor() {
-    var _this;
-    super(...arguments);
-    _this = this;
-    _defineProperty(this, "state", {
-      activeIndex: null,
-      prevActiveIndex: null,
-      prevData: [],
-      activeItem: null,
-      needScrollToActive: false,
-      scrolling: false,
-      hasOverflow: false,
-      scrolledToBottom: false
-    });
-    _defineProperty(this, "scheduleScrollListener", scheduleRAF());
-    _defineProperty(this, "virtualizedList", void 0);
-    _defineProperty(this, "unmounted", void 0);
-    _defineProperty(this, "container", void 0);
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    _defineProperty(this, "_bufferSize", 10);
-    // keep X items above and below of the visible area
-    // reuse size cache for similar items
-    _defineProperty(this, "sizeCacheKey", index => {
-      if (index === 0 || index === this.props.data.length + 1) {
-        return Type.MARGIN;
-      }
-      const item = this.props.data[index - 1];
-      const isFirst = index === 1;
-      switch (item.rgItemType) {
-        case Type.SEPARATOR:
-        case Type.TITLE:
-          return "".concat(item.rgItemType).concat(isFirst ? '_first' : '').concat(item.description ? '_desc' : '');
-        case Type.MARGIN:
-          return Type.MARGIN;
-        case Type.CUSTOM:
-          return "".concat(Type.CUSTOM, "_").concat(item.key);
-        case Type.ITEM:
-        case Type.LINK:
-        default:
-          if (item.details) {
-            return "".concat(Type.ITEM, "_").concat(item.details);
-          }
-          return Type.ITEM;
-      }
-    });
-    _defineProperty(this, "_cache", new CellMeasurerCache({
-      defaultHeight: this.defaultItemHeight(),
-      fixedWidth: true,
-      keyMapper: this.sizeCacheKey
-    }));
-    _defineProperty(this, "_hasActivatableItems", memoizeOne(items => items.some(isActivatable)));
-    _defineProperty(this, "activateFirst", () => {
-      const firstActivatableIndex = this.props.data.findIndex(isActivatable);
-      if (firstActivatableIndex >= 0) {
-        this.setState({
-          activeIndex: firstActivatableIndex,
-          activeItem: this.props.data[firstActivatableIndex],
-          needScrollToActive: 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, "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;
-        } else {
-          return;
-        }
-      } else {
-        newIndex = index - 1;
-      }
-      this.moveHandler(newIndex, this.upHandler, e);
-    });
-    _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) {
-        if (!disableMoveOverflow && !disableMoveDownOverflow) {
-          newIndex = 0;
-        } else {
-          return;
-        }
-      } else {
-        newIndex = index + 1;
-      }
-      this.moveHandler(newIndex, this.downHandler, e);
-    });
-    _defineProperty(this, "homeHandler", e => {
-      this.moveHandler(0, this.downHandler, e);
-    });
-    _defineProperty(this, "endHandler", e => {
-      this.moveHandler(this.props.data.length - 1, this.upHandler, e);
-    });
-    _defineProperty(this, "mouseHandler", () => {
-      this.setState({
-        scrolling: false
-      });
-    });
-    _defineProperty(this, "scrollHandler", () => {
-      this.setState({
-        scrolling: true
-      }, this.scrollEndHandler);
-    });
-    _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 && shortcut !== undefined && ['command+enter', 'ctrl+enter'].includes(shortcut)) {
-            window.open(item.href, '_blank');
-          } else if (shortcut === 'shift+enter') {
-            window.open(item.href);
-          } else {
-            window.location.href = item.href;
-          }
-        }
-        return false; // do not propagate event
-      }
-      return true; // propagate event to the parent component (e.g., QueryAssist)
-    });
-    _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
-          });
-        }
-        if (scrolledToBottom) {
-          this.props.onScrollToBottom();
-        }
-      }
-    }));
-    _defineProperty(this, "checkOverflow", () => {
-      if (this.inner) {
-        this.setState({
-          hasOverflow: this.inner.scrollHeight - this.inner.clientHeight > 1
-        });
-      }
-    });
-    // eslint-disable-next-line complexity
-    _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);
-      const isActive = realIndex === this.state.activeIndex;
-      // top and bottom margins
-      if (index === 0 || index === this.props.data.length + 1 || item.rgItemType === Type.MARGIN) {
-        itemKey = key || "".concat(Type.MARGIN, "_").concat(index);
-        el = jsx("div", {
-          style: {
-            height: Dimension.MARGIN
-          }
-        });
-      } else {
-        // Hack around SelectNG implementation
-        const {
-            selectedLabel,
-            originalModel
-          } = item,
-          restProps = _objectWithoutProperties(item, _excluded);
-        const cleanedProps = restProps;
-        if (cleanedProps.url) {
-          cleanedProps.href = cleanedProps.url;
-        }
-        if (cleanedProps.href) {
-          cleanedProps.rgItemType = Type.LINK;
-        }
-        cleanedProps.description = typeof cleanedProps.description === 'string' ? cleanedProps.description.trim() : cleanedProps.description;
-        const itemProps = Object.assign({
-          rgItemType: DEFAULT_ITEM_TYPE
-        }, restProps);
-        itemKey = key || itemId;
-        itemProps.hover = isActive;
-        if (itemProps.hoverClassName !== null && itemProps.hoverClassName !== undefined && itemProps.hover) {
-          itemProps.className = classNames(itemProps.className, itemProps.hoverClassName);
-        }
-        itemProps.tabIndex = -1;
-        itemProps.scrolling = isScrolling;
-        const selectHandler = this.selectHandler(realIndex);
-        if (this.props.useMouseUp) {
-          itemProps.onMouseUp = selectHandler;
-        } else {
-          itemProps.onClick = selectHandler;
-        }
-        itemProps.onCheckboxChange = this.checkboxHandler(realIndex);
-        if (itemProps.compact === null || itemProps.compact === undefined) {
-          itemProps.compact = this.props.compact;
-        }
-        let ItemComponent;
-        const isFirst = index === 1;
-        switch (itemProps.rgItemType) {
-          case Type.SEPARATOR:
-            ItemComponent = ListSeparator;
-            itemProps.isFirst = isFirst;
-            break;
-          case Type.LINK:
-          case Type.ITEM:
-            ItemComponent = ListItem;
-            this.addItemDataTestToProp(itemProps);
-            break;
-          case Type.CUSTOM:
-            ItemComponent = ListCustom;
-            this.addItemDataTestToProp(itemProps);
-            break;
-          case Type.TITLE:
-            itemProps.isFirst = isFirst;
-            ItemComponent = ListTitle;
-            break;
-          default:
-            throw new Error("Unknown menu element type: ".concat(itemProps.rgItemType));
-        }
-        el = /*#__PURE__*/createElement(ItemComponent, _objectSpread2(_objectSpread2({}, itemProps), {}, {
-          key: itemProps.key
-        }));
-      }
-      return parent ? jsx(CellMeasurer, {
-        cache: this._cache,
-        parent: parent,
-        rowIndex: index,
-        columnIndex: 0,
-        children: _ref2 => {
-          let {
-            registerChild
-          } = _ref2;
-          return jsx("div", {
-            ref: registerChild,
-            style: style,
-            role: 'row',
-            "aria-selected": isActive,
-            id: itemId,
-            children: jsx("div", {
-              role: 'cell',
-              children: el
-            })
-          });
-        }
-      }, itemKey) : jsx("div", {
-        role: 'row',
-        "aria-selected": isActive,
-        id: itemId,
-        children: jsx("div", {
-          role: 'cell',
-          children: el
-        })
-      }, itemKey);
-    });
-    _defineProperty(this, "addItemDataTestToProp", props => {
-      props['data-test'] = joinDataTestAttributes('ring-list-item', props['data-test']);
-      return props;
-    });
-    _defineProperty(this, "virtualizedListRef", el => {
-      this.virtualizedList = 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
-    });
-  }
+  static defaultProps = {
+    data: [],
+    restoreActiveIndex: false,
+    // restore active item using its "key" property
+    activateSingleItem: false,
+    // if there is only one item, activate it
+    activateFirstItem: false,
+    // if there no active items, activate the first one
+    onMouseOut: noop,
+    onSelect: noop,
+    onScrollToBottom: noop,
+    onResize: noop,
+    shortcuts: false,
+    renderOptimization: true,
+    disableMoveDownOverflow: false,
+    ariaLabel: 'List'
+  };
+  state = {
+    activeIndex: null,
+    prevActiveIndex: null,
+    prevData: [],
+    activeItem: null,
+    needScrollToActive: false,
+    scrolling: false,
+    hasOverflow: false,
+    scrolledToBottom: false
+  };
   static getDerivedStateFromProps(nextProps, prevState) {
     const {
       prevActiveIndex,
@@ -443,14 +150,13 @@ class List extends Component {
     return Object.keys(nextProps).some(key => !Object.is(nextProps[key], this.props[key])) || Object.keys(nextState).some(key => nextState[key] !== this.state[key]);
   }
   componentDidUpdate(prevProps) {
-    var _prevProps$data$activ, _this$props$data$acti;
     if (this.virtualizedList && prevProps.data !== this.props.data) {
       this.virtualizedList.recomputeRowHeights();
     }
     const {
       activeIndex
     } = this.state;
-    const isActiveItemRetainedPosition = activeIndex ? ((_prevProps$data$activ = prevProps.data[activeIndex]) === null || _prevProps$data$activ === void 0 ? void 0 : _prevProps$data$activ.key) === ((_this$props$data$acti = this.props.data[activeIndex]) === null || _this$props$data$acti === void 0 ? void 0 : _this$props$data$acti.key) : false;
+    const isActiveItemRetainedPosition = activeIndex ? prevProps.data[activeIndex]?.key === this.props.data[activeIndex]?.key : false;
     if ((this.props.activeIndex === null || this.props.activeIndex === undefined) && getDataHash(this.props.data) !== getDataHash(prevProps.data) && shouldActivateFirstItem(this.props) && !isActiveItemRetainedPosition) {
       this.activateFirst();
     }
@@ -459,9 +165,120 @@ class List extends Component {
   componentWillUnmount() {
     this.unmounted = true;
   }
+  scheduleScrollListener = scheduleRAF();
+  static isItemType = isItemType;
+  static ListHint = ListHint;
+  static ListProps = {
+    Type,
+    Dimension
+  };
+  virtualizedList;
+  unmounted;
+  container;
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  _bufferSize = 10; // keep X items above and below of the visible area
+  // reuse size cache for similar items
+  sizeCacheKey = index => {
+    if (index === 0 || index === this.props.data.length + 1) {
+      return Type.MARGIN;
+    }
+    const item = this.props.data[index - 1];
+    const isFirst = index === 1;
+    switch (item.rgItemType) {
+      case Type.SEPARATOR:
+      case Type.TITLE:
+        return `${item.rgItemType}${isFirst ? '_first' : ''}${item.description ? '_desc' : ''}`;
+      case Type.MARGIN:
+        return Type.MARGIN;
+      case Type.CUSTOM:
+        return `${Type.CUSTOM}_${item.key}`;
+      case Type.ITEM:
+      case Type.LINK:
+      default:
+        if (item.details) {
+          return `${Type.ITEM}_${item.details}`;
+        }
+        return Type.ITEM;
+    }
+  };
+  _cache = new CellMeasurerCache({
+    defaultHeight: this.defaultItemHeight(),
+    fixedWidth: true,
+    keyMapper: this.sizeCacheKey
+  });
+  _hasActivatableItems = memoizeOne(items => items.some(isActivatable));
   hasActivatableItems() {
     return this._hasActivatableItems(this.props.data);
   }
+  activateFirst = () => {
+    const firstActivatableIndex = this.props.data.findIndex(isActivatable);
+    if (firstActivatableIndex >= 0) {
+      this.setState({
+        activeIndex: firstActivatableIndex,
+        activeItem: this.props.data[firstActivatableIndex],
+        needScrollToActive: true
+      });
+    }
+  };
+  selectHandler = memoize(index => (event, tryKeepOpen = 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
+      });
+    }
+  });
+  checkboxHandler = memoize(index => event => this.selectHandler(index)(event, true));
+  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;
+      } else {
+        return;
+      }
+    } else {
+      newIndex = index - 1;
+    }
+    this.moveHandler(newIndex, this.upHandler, e);
+  };
+  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) {
+      if (!disableMoveOverflow && !disableMoveDownOverflow) {
+        newIndex = 0;
+      } else {
+        return;
+      }
+    } else {
+      newIndex = index + 1;
+    }
+    this.moveHandler(newIndex, this.downHandler, e);
+  };
+  homeHandler = e => {
+    this.moveHandler(0, this.downHandler, e);
+  };
+  endHandler = e => {
+    this.moveHandler(this.props.data.length - 1, this.upHandler, e);
+  };
   moveHandler(index, retryCallback, e) {
     let correctedIndex;
     if (this.props.data.length === 0 || !this.hasActivatableItems()) {
@@ -487,6 +304,33 @@ class List extends Component {
       }
     });
   }
+  mouseHandler = () => {
+    this.setState({
+      scrolling: false
+    });
+  };
+  scrollHandler = () => {
+    this.setState({
+      scrolling: true
+    }, this.scrollEndHandler);
+  };
+  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 && shortcut !== undefined && ['command+enter', 'ctrl+enter'].includes(shortcut)) {
+          window.open(item.href, '_blank');
+        } else if (shortcut === 'shift+enter') {
+          window.open(item.href);
+        } else {
+          window.location.href = item.href;
+        }
+      }
+      return false; // do not propagate event
+    }
+    return true; // propagate event to the parent component (e.g., QueryAssist)
+  };
   getFirst() {
     return this.props.data.find(item => item.rgItemType === Type.ITEM || item.rgItemType === Type.CUSTOM);
   }
@@ -496,6 +340,30 @@ class List extends Component {
   defaultItemHeight() {
     return this.props.compact ? Dimension.COMPACT_ITEM_HEIGHT : Dimension.ITEM_HEIGHT;
   }
+  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
+        });
+      }
+      if (scrolledToBottom) {
+        this.props.onScrollToBottom();
+      }
+    }
+  });
+  checkOverflow = () => {
+    if (this.inner) {
+      this.setState({
+        hasOverflow: this.inner.scrollHeight - this.inner.clientHeight > 1
+      });
+    }
+  };
   getVisibleListHeight(maxHeight) {
     return maxHeight - this.defaultItemHeight() - Dimension.INNER_PADDING;
   }
@@ -504,77 +372,198 @@ class List extends Component {
     const isString = typeof identificator === 'string' || identificator instanceof String;
     if (identificator && !isString) {
       warnEmptyKey();
-      return "".concat(itemProps.rgItemType, "_").concat(JSON.stringify(identificator));
+      return `${itemProps.rgItemType}_${JSON.stringify(identificator)}`;
     }
-    return "".concat(itemProps.rgItemType, "_").concat(identificator);
+    return `${itemProps.rgItemType}_${identificator}`;
   }
   getId(item) {
-    return item !== null && item !== undefined ? "".concat(this.id, ":").concat(item.key || this._deprecatedGenerateKeyFromContent(item)) : undefined;
+    return item !== null && item !== undefined ? `${this.id}:${item.key || this._deprecatedGenerateKeyFromContent(item)}` : undefined;
   }
+  // eslint-disable-next-line complexity
+  renderItem = ({
+    index = 1,
+    style,
+    isScrolling = false,
+    parent,
+    key
+  }) => {
+    let itemKey;
+    let el;
+    const realIndex = index - 1;
+    const item = this.props.data[realIndex];
+    const itemId = this.getId(item);
+    const isActive = realIndex === this.state.activeIndex;
+    // top and bottom margins
+    if (index === 0 || index === this.props.data.length + 1 || item.rgItemType === Type.MARGIN) {
+      itemKey = key || `${Type.MARGIN}_${index}`;
+      el = jsx("div", {
+        style: {
+          height: Dimension.MARGIN
+        }
+      });
+    } else {
+      // Hack around SelectNG implementation
+      const {
+        selectedLabel,
+        originalModel,
+        ...restProps
+      } = item;
+      const cleanedProps = restProps;
+      if (cleanedProps.url) {
+        cleanedProps.href = cleanedProps.url;
+      }
+      if (cleanedProps.href) {
+        cleanedProps.rgItemType = Type.LINK;
+      }
+      cleanedProps.description = typeof cleanedProps.description === 'string' ? cleanedProps.description.trim() : cleanedProps.description;
+      const itemProps = Object.assign({
+        rgItemType: DEFAULT_ITEM_TYPE
+      }, restProps);
+      itemKey = key || itemId;
+      itemProps.hover = isActive;
+      if (itemProps.hoverClassName !== null && itemProps.hoverClassName !== undefined && itemProps.hover) {
+        itemProps.className = classNames(itemProps.className, itemProps.hoverClassName);
+      }
+      itemProps.tabIndex = -1;
+      itemProps.scrolling = isScrolling;
+      const selectHandler = this.selectHandler(realIndex);
+      if (this.props.useMouseUp) {
+        itemProps.onMouseUp = selectHandler;
+      } else {
+        itemProps.onClick = selectHandler;
+      }
+      itemProps.onCheckboxChange = this.checkboxHandler(realIndex);
+      if (itemProps.compact === null || itemProps.compact === undefined) {
+        itemProps.compact = this.props.compact;
+      }
+      let ItemComponent;
+      const isFirst = index === 1;
+      switch (itemProps.rgItemType) {
+        case Type.SEPARATOR:
+          ItemComponent = ListSeparator;
+          itemProps.isFirst = isFirst;
+          break;
+        case Type.LINK:
+        case Type.ITEM:
+          ItemComponent = ListItem;
+          this.addItemDataTestToProp(itemProps);
+          break;
+        case Type.CUSTOM:
+          ItemComponent = ListCustom;
+          this.addItemDataTestToProp(itemProps);
+          break;
+        case Type.TITLE:
+          itemProps.isFirst = isFirst;
+          ItemComponent = ListTitle;
+          break;
+        default:
+          throw new Error(`Unknown menu element type: ${itemProps.rgItemType}`);
+      }
+      el = /*#__PURE__*/createElement(ItemComponent, {
+        ...itemProps,
+        key: itemProps.key
+      });
+    }
+    return parent ? jsx(CellMeasurer, {
+      cache: this._cache,
+      parent: parent,
+      rowIndex: index,
+      columnIndex: 0,
+      children: ({
+        registerChild
+      }) => jsx("div", {
+        ref: registerChild,
+        style: style,
+        role: 'row',
+        "aria-selected": isActive,
+        id: itemId,
+        children: jsx("div", {
+          role: 'cell',
+          children: el
+        })
+      })
+    }, itemKey) : jsx("div", {
+      role: 'row',
+      "aria-selected": isActive,
+      id: itemId,
+      children: jsx("div", {
+        role: 'cell',
+        children: el
+      })
+    }, itemKey);
+  };
+  addItemDataTestToProp = props => {
+    props['data-test'] = joinDataTestAttributes('ring-list-item', props['data-test']);
+    return props;
+  };
+  virtualizedListRef = el => {
+    this.virtualizedList = el;
+  };
+  containerRef = el => {
+    this.container = el;
+  };
+  _inner;
   get inner() {
     if (!this._inner) {
       this._inner = this.container && this.container.querySelector('.ring-list__i');
     }
     return this._inner;
   }
-  renderVirtualizedInner(_ref3) {
-    let {
-      height,
-      maxHeight,
-      autoHeight = false,
-      rowCount,
-      isScrolling,
-      onChildScroll = noop,
-      scrollTop,
-      registerChild
-    } = _ref3;
+  renderVirtualizedInner({
+    height,
+    maxHeight,
+    autoHeight = false,
+    rowCount,
+    isScrolling,
+    onChildScroll = noop,
+    scrollTop,
+    registerChild
+  }) {
     const dirOverride = {
       direction: 'inherit'
     }; // Virtualized sets "direction: ltr" by default https://github.com/bvaughn/react-virtualized/issues/457
     return jsx(AutoSizer, {
       disableHeight: true,
       onResize: this.props.onResize,
-      children: _ref4 => {
-        let {
-          width
-        } = _ref4;
-        return jsx("div", {
-          ref: registerChild,
-          children: jsx(VirtualizedList, {
-            "aria-label": this.props.ariaLabel,
-            ref: this.virtualizedListRef,
-            className: classNames('ring-list__i', {
-              [styles.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 !== undefined ? this.state.activeIndex + 1 : undefined,
-            scrollToAlignment: 'center',
-            deferredMeasurementCache: this._cache,
-            onRowsRendered: this.checkOverflow,
-            containerRole: 'none' // row role is set by rowRenderer
-          })
-        });
-      }
+      children: ({
+        width
+      }) => jsx("div", {
+        ref: registerChild,
+        children: jsx(VirtualizedList, {
+          "aria-label": this.props.ariaLabel,
+          ref: this.virtualizedListRef,
+          className: classNames('ring-list__i', {
+            [styles.overscrollNone]: this.props.preventListOverscroll
+          }),
+          autoHeight: autoHeight,
+          style: maxHeight ? {
+            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 !== undefined ? this.state.activeIndex + 1 : undefined,
+          scrollToAlignment: 'center',
+          deferredMeasurementCache: this._cache,
+          onRowsRendered: this.checkOverflow,
+          containerRole: 'none' // row role is set by rowRenderer
+        })
+      })
     });
   }
   renderVirtualized(maxHeight, rowCount) {
@@ -586,10 +575,11 @@ class List extends Component {
       });
     }
     return jsx(WindowScrollerComponent, {
-      children: props => this.renderVirtualizedInner(_objectSpread2(_objectSpread2({}, props), {}, {
+      children: props => this.renderVirtualizedInner({
+        ...props,
         rowCount,
         autoHeight: true
-      }))
+      })
     });
   }
   renderSimple(maxHeight, rowCount) {
@@ -614,6 +604,19 @@ class List extends Component {
       })
     });
   }
+  id = getUID('list-');
+  shortcutsScope = this.id;
+  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
+  };
   /** @override */
   render() {
     const hint = this.getSelected() && this.props.hintOnSelection || this.props.hint;
@@ -635,7 +638,10 @@ class List extends Component {
         onBlur: this.props.onMouseOut,
         "data-test": 'ring-list',
         children: [this.props.shortcuts && jsx(Shortcuts, {
-          map: this.props.shortcutsMap ? _objectSpread2(_objectSpread2({}, this.shortcutsMap), this.props.shortcutsMap) : this.shortcutsMap,
+          map: this.props.shortcutsMap ? {
+            ...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 && jsx("div", {
           className: styles.fade,
@@ -647,28 +653,5 @@ class List extends Component {
     });
   }
 }
-_defineProperty(List, "defaultProps", {
-  data: [],
-  restoreActiveIndex: false,
-  // restore active item using its "key" property
-  activateSingleItem: false,
-  // if there is only one item, activate it
-  activateFirstItem: false,
-  // if there no active items, activate the first one
-  onMouseOut: noop,
-  onSelect: noop,
-  onScrollToBottom: noop,
-  onResize: noop,
-  shortcuts: false,
-  renderOptimization: true,
-  disableMoveDownOverflow: false,
-  ariaLabel: 'List'
-});
-_defineProperty(List, "isItemType", isItemType);
-_defineProperty(List, "ListHint", ListHint);
-_defineProperty(List, "ListProps", {
-  Type,
-  Dimension
-});
 
 export { ActiveItemContext, List as default };