@jetbrains/ring-ui 4.1.0-beta.3 → 4.1.1

package/dist/_helpers/list.js

@@ -1,1327 +0,0 @@
-import { b as _defineProperty, c as _objectSpread2, _ as _objectWithoutProperties, a as _extends } from './_rollupPluginBabelHelpers.js';
-import React, { memo, createContext, useState, useContext, useEffect, Component, PureComponent, cloneElement } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import VirtualizedList from 'react-virtualized/dist/es/List';
-import AutoSizer from 'react-virtualized/dist/es/AutoSizer';
-import WindowScroller from 'react-virtualized/dist/es/WindowScroller';
-import { CellMeasurerCache, CellMeasurer } from 'react-virtualized/dist/es/CellMeasurer';
-import deprecate from 'util-deprecate';
-import memoizeOne from 'memoize-one';
-import { j as joinDataTestAttributes } from './data-tests.js';
-import { g as getUID } from './get-uid.js';
-import { s as scheduleRAF } from './schedule-raf.js';
-import { m as memoize } from './memoize.js';
-import { p as preventDefault } from './dom.js';
-import Shortcuts from '../shortcuts.js';
-import Link, { linkHOC } from '../link.js';
-import Avatar, { Size } from '../avatar.js';
-import Checkbox from '../checkbox.js';
-import Icon from '../icon.js';
-
-function createStatefulContext(initialValue, name = '') {
-  const ValueContext = /*#__PURE__*/createContext(initialValue);
-  const UpdateContext = /*#__PURE__*/createContext(() => {});
-
-  function Provider({
-    children
-  }) {
-    const [value, update] = useState(initialValue);
-    return /*#__PURE__*/React.createElement(ValueContext.Provider, {
-      value: value
-    }, /*#__PURE__*/React.createElement(UpdateContext.Provider, {
-      value: update
-    }, children));
-  }
-
-  Provider.propTypes = {
-    children: PropTypes.node
-  };
-  Provider.displayName = `${name}Provider`;
-
-  function useUpdate(value, skipUpdate) {
-    const update = useContext(UpdateContext);
-    useEffect(() => {
-      if (!skipUpdate) {
-        update(value);
-      }
-    }, [update, value, skipUpdate]);
-  }
-
-  function Updater({
-    value,
-    skipUpdate
-  }) {
-    useUpdate(value, skipUpdate);
-    return null;
-  }
-
-  Updater.displayName = `${name}Updater`;
-  return {
-    ValueContext,
-    UpdateContext,
-    Provider,
-    useUpdate,
-    Updater: /*#__PURE__*/memo(Updater)
-  };
-}
-
-var modules_3b67a421 = {"unit":"8px","listSpacing":"8px","error":"list_error__47370e13","list":"list_list__47370e13","simpleInner":"list_simpleInner__47370e13","scrolling":"list_scrolling__47370e13","separator":"list_separator__47370e13","separator_first":"list_separator_first__47370e13","item":"list_item__47370e13","itemContainer":"list_itemContainer__47370e13","compact":"list_compact__47370e13","add":"list_add__47370e13","top":"list_top__47370e13","left":"list_left__47370e13","label":"list_label__47370e13","description":"list_description__47370e13","right":"list_right__47370e13","details":"list_details__47370e13","padded":"list_padded__47370e13","hint":"list_hint__47370e13","action":"list_action__47370e13","actionLink":"list_actionLink__47370e13","hover":"list_hover__47370e13","icon":"list_icon__47370e13","highlight":"list_highlight__47370e13","service":"list_service__47370e13","glyph":"list_glyph__47370e13","avatar":"list_avatar__47370e13 list_glyph__47370e13","rightGlyph":"list_rightGlyph__47370e13 list_glyph__47370e13","checkboxContainer":"list_checkboxContainer__47370e13","title":"list_title__47370e13","title_first":"list_title_first__47370e13","text":"list_text__47370e13","fade":"list_fade__47370e13","disabled":"list_disabled__47370e13"};
-
-/**
- * @constructor
- * @extends {ReactComponent}
- */
-
-class ListLink extends PureComponent {
-  render() {
-    const _this$props = this.props,
-          {
-      scrolling,
-      'data-test': dataTest,
-      className,
-      label,
-      hover,
-      description,
-      rgItemType,
-      url,
-      onCheckboxChange,
-      disabled,
-      LinkComponent,
-      compact,
-      hoverClassName
-    } = _this$props,
-          restProps = _objectWithoutProperties(_this$props, ["scrolling", "data-test", "className", "label", "hover", "description", "rgItemType", "url", "onCheckboxChange", "disabled", "LinkComponent", "compact", "hoverClassName"]);
-
-    const classes = classNames(modules_3b67a421.item, className, {
-      [modules_3b67a421.actionLink]: !disabled,
-      [modules_3b67a421.compact]: compact,
-      [modules_3b67a421.scrolling]: scrolling
-    });
-    const Comp = LinkComponent ? linkHOC(LinkComponent) : Link;
-    return /*#__PURE__*/React.createElement(Comp, _extends({
-      pseudo: !this.props.href
-    }, restProps, {
-      hover: hover && !disabled,
-      className: classes,
-      "data-test": joinDataTestAttributes('ring-list-link', dataTest)
-    }), label);
-  }
-
-}
-
-_defineProperty(ListLink, "propTypes", _objectSpread2(_objectSpread2({}, Link.propTypes), {}, {
-  description: PropTypes.string,
-  label: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-  rgItemType: PropTypes.number,
-  scrolling: PropTypes.bool,
-  url: PropTypes.string,
-  LinkComponent: PropTypes.oneOfType([PropTypes.instanceOf(Component), PropTypes.func, PropTypes.string]),
-  onCheckboxChange: PropTypes.func,
-  compact: PropTypes.bool
-}));
-
-var modules_5b0fb3e8 = {"unit":"8px","footer-height":"64px","breakpoint-small":"640px","breakpoint-middle":"960px","breakpoint-large":"1200px","extra-small-screen-media":"(max-width:639px)","small-screen-media":"(min-width:640px) and (max-width:959px)","middle-screen-media":"(min-width:960px) and (max-width:1199px)","large-screen-media":"(min-width:1200px)","clearfix":"global_clearfix__0f8f4370","font":"global_font__0f8f4370","font-lower":"global_fontLower__0f8f4370 global_font__0f8f4370","font-smaller":"global_fontSmaller__0f8f4370 global_fontLower__0f8f4370 global_font__0f8f4370","font-smaller-lower":"global_fontSmallerLower__0f8f4370 global_fontSmaller__0f8f4370 global_fontLower__0f8f4370 global_font__0f8f4370","font-larger-lower":"global_fontLargerLower__0f8f4370 global_fontLower__0f8f4370 global_font__0f8f4370","font-larger":"global_fontLarger__0f8f4370 global_fontLargerLower__0f8f4370 global_fontLower__0f8f4370 global_font__0f8f4370","thin-font":"global_thinFont__0f8f4370","monospace-font":"global_monospaceFont__0f8f4370","ellipsis":"global_ellipsis__0f8f4370","resetButton":"global_resetButton__0f8f4370"};
-
-/**
- * @constructor
- * @extends {ReactComponent}
- */
-
-const RING_UNIT = 8;
-const DEFAULT_PADDING = 16;
-const CHECKBOX_WIDTH = 28;
-class ListItem extends PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "id", getUID('list-item-'));
-
-    _defineProperty(this, "stopBubbling", e => e.stopPropagation());
-
-    _defineProperty(this, "_isString", val => typeof val === 'string' || val instanceof String);
-  }
-
-  render() {
-    const _this$props = this.props,
-          {
-      scrolling,
-      className,
-      disabled,
-      checkbox,
-      avatar,
-      subavatar,
-      glyph,
-      icon,
-      rightGlyph,
-      description,
-      label,
-      title,
-      details,
-      hover,
-      rgItemType,
-      level,
-      tabIndex,
-      compact,
-      onClick,
-      onCheckboxChange,
-      onMouseOver,
-      onMouseDown,
-      onMouseUp,
-      rightNodes,
-      leftNodes
-    } = _this$props,
-          restProps = _objectWithoutProperties(_this$props, ["scrolling", "className", "disabled", "checkbox", "avatar", "subavatar", "glyph", "icon", "rightGlyph", "description", "label", "title", "details", "hover", "rgItemType", "level", "tabIndex", "compact", "onClick", "onCheckboxChange", "onMouseOver", "onMouseDown", "onMouseUp", "rightNodes", "leftNodes"]);
-
-    const checkable = checkbox !== undefined;
-    const hasLeftNodes = leftNodes || glyph || avatar;
-    const showCheckbox = checkable && (checkbox || !hasLeftNodes || hover && !disabled);
-    const classes = classNames(modules_3b67a421.item, modules_5b0fb3e8.resetButton, className, {
-      [modules_3b67a421.action]: !disabled,
-      [modules_3b67a421.hover]: hover && !disabled,
-      [modules_3b67a421.compact]: compact,
-      [modules_3b67a421.scrolling]: scrolling,
-      [modules_3b67a421.disabled]: disabled
-    });
-    const detailsClasses = classNames({
-      [modules_3b67a421.details]: details,
-      [modules_3b67a421.padded]: icon !== undefined || checkbox !== undefined || glyph !== undefined
-    });
-    const style = {
-      paddingLeft: `${(+level || 0) * RING_UNIT + DEFAULT_PADDING + (showCheckbox ? CHECKBOX_WIDTH : 0)}px`
-    };
-    let computedTitle = null;
-
-    if (this._isString(title)) {
-      // if title is specified and is a string then use it
-      computedTitle = title;
-    } else {
-      // otherwise use label if it is a string;
-      // label can also be an element, use empty string in this case
-      computedTitle = this._isString(label) ? label : '';
-    }
-
-    const dataTest = joinDataTestAttributes({
-      'ring-list-item': (restProps['data-test'] || '').indexOf('ring-list-item') === -1,
-      'ring-list-item-action': !disabled,
-      'ring-list-item-selected': checkbox
-    }, restProps['data-test']);
-    return /*#__PURE__*/React.createElement("div", {
-      className: modules_3b67a421.itemContainer,
-      "data-test": dataTest
-    }, showCheckbox && /*#__PURE__*/React.createElement("div", {
-      className: modules_3b67a421.checkboxContainer
-    }, /*#__PURE__*/React.createElement(Checkbox, {
-      "aria-labelledby": this.id,
-      checked: checkbox,
-      disabled: disabled,
-      onChange: onCheckboxChange,
-      onClick: this.stopBubbling
-    })), /*#__PURE__*/React.createElement("button", {
-      id: this.id,
-      type: "button",
-      tabIndex: tabIndex,
-      onClick: onClick,
-      onMouseOver: onMouseOver,
-      onMouseDown: onMouseDown,
-      onFocus: onMouseOver,
-      onMouseUp: onMouseUp,
-      className: classes,
-      style: style
-    }, /*#__PURE__*/React.createElement("div", {
-      className: modules_3b67a421.top,
-      onMouseOut: this.stopBubbling,
-      onBlur: this.stopBubbling
-    }, !showCheckbox && /*#__PURE__*/React.createElement("div", {
-      className: modules_3b67a421.left
-    }, leftNodes, glyph && /*#__PURE__*/React.createElement(Icon, {
-      className: modules_3b67a421.glyph,
-      glyph: glyph,
-      size: this.props.iconSize
-    }), avatar && /*#__PURE__*/React.createElement(Avatar, {
-      className: modules_3b67a421.avatar,
-      url: avatar,
-      size: Size.Size20,
-      subavatar: subavatar
-    })), /*#__PURE__*/React.createElement("span", {
-      className: modules_3b67a421.label,
-      title: computedTitle,
-      "data-test": "ring-list-item-label"
-    }, label), description && /*#__PURE__*/React.createElement("span", {
-      className: modules_3b67a421.description,
-      "data-test": "ring-list-item-description"
-    }, description), /*#__PURE__*/React.createElement("div", {
-      className: modules_3b67a421.right
-    }, rightGlyph && /*#__PURE__*/React.createElement(Icon, {
-      className: modules_3b67a421.rightGlyph,
-      glyph: rightGlyph,
-      size: this.props.iconSize
-    }), icon && /*#__PURE__*/React.createElement("div", {
-      className: modules_3b67a421.icon,
-      style: {
-        backgroundImage: `url("${icon}")`
-      }
-    }), rightNodes)), details && /*#__PURE__*/React.createElement("div", {
-      className: detailsClasses
-    }, details)));
-  }
-
-}
-
-_defineProperty(ListItem, "propTypes", {
-  scrolling: PropTypes.bool,
-  hover: PropTypes.bool,
-  details: PropTypes.string,
-  disabled: PropTypes.bool,
-  className: PropTypes.string,
-  tabIndex: PropTypes.number,
-  checkbox: PropTypes.bool,
-  description: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.array]),
-  avatar: PropTypes.string,
-  subavatar: PropTypes.string,
-  glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  icon: PropTypes.string,
-  iconSize: PropTypes.number,
-  rightNodes: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.array]),
-  leftNodes: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.array]),
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  title: PropTypes.string,
-  level: PropTypes.number,
-  rgItemType: PropTypes.number,
-  rightGlyph: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  compact: PropTypes.bool,
-  onClick: PropTypes.func,
-  onCheckboxChange: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  onMouseDown: PropTypes.func,
-  onMouseUp: PropTypes.func,
-  'data-test': PropTypes.string
-});
-
-// react-dom getEventKey function extracted
-const normalizeKey = {
-  Esc: 'Escape',
-  Spacebar: ' ',
-  Left: 'ArrowLeft',
-  Up: 'ArrowUp',
-  Right: 'ArrowRight',
-  Down: 'ArrowDown',
-  Del: 'Delete',
-  Win: 'OS',
-  Menu: 'ContextMenu',
-  Apps: 'ContextMenu',
-  Scroll: 'ScrollLock',
-  MozPrintableKey: 'Unidentified'
-};
-const translateToKey = {
-  8: 'Backspace',
-  9: 'Tab',
-  12: 'Clear',
-  13: 'Enter',
-  16: 'Shift',
-  17: 'Control',
-  18: 'Alt',
-  19: 'Pause',
-  20: 'CapsLock',
-  27: 'Escape',
-  32: ' ',
-  33: 'PageUp',
-  34: 'PageDown',
-  35: 'End',
-  36: 'Home',
-  37: 'ArrowLeft',
-  38: 'ArrowUp',
-  39: 'ArrowRight',
-  40: 'ArrowDown',
-  45: 'Insert',
-  46: 'Delete',
-  112: 'F1',
-  113: 'F2',
-  114: 'F3',
-  115: 'F4',
-  116: 'F5',
-  117: 'F6',
-  118: 'F7',
-  119: 'F8',
-  120: 'F9',
-  121: 'F10',
-  122: 'F11',
-  123: 'F12',
-  144: 'NumLock',
-  145: 'ScrollLock',
-  224: 'Meta'
-};
-const ENTER = 13;
-const SPACE = 32;
-
-function getEventCharCode(nativeEvent) {
-  let charCode;
-  const keyCode = nativeEvent.keyCode;
-
-  if ('charCode' in nativeEvent) {
-    charCode = nativeEvent.charCode; // FF does not set `charCode` for the Enter-key, check against `keyCode`.
-
-    if (charCode === 0 && keyCode === ENTER) {
-      charCode = ENTER;
-    }
-  } else {
-    // IE8 does not implement `charCode`, but `keyCode` has the correct value.
-    charCode = keyCode;
-  } // Some non-printable keys are reported in `charCode`/`keyCode`, discard them.
-  // Must not discard the (non-)printable Enter-key.
-
-
-  if (charCode >= SPACE || charCode === ENTER) {
-    return charCode;
-  }
-
-  return 0;
-}
-
-function getEventKey(nativeEvent) {
-  if (nativeEvent.key) {
-    // Normalize inconsistent values reported by browsers due to
-    // implementations of a working draft specification.
-    // FireFox implements `key` but returns `MozPrintableKey` for all
-    // printable characters (normalized to `Unidentified`), ignore it.
-    const key = normalizeKey[nativeEvent.key] || nativeEvent.key;
-
-    if (key !== 'Unidentified') {
-      return key;
-    }
-  } // Browser does not implement `key`, polyfill as much of it as we can.
-
-
-  if (nativeEvent.type === 'keypress') {
-    const charCode = getEventCharCode(nativeEvent); // The enter-key is technically both printable and non-printable and can
-    // thus be captured by `keypress`, no other non-printable key should.
-
-    return charCode === SPACE ? 'Enter' : String.fromCharCode(charCode);
-  }
-
-  if (nativeEvent.type === 'keydown' || nativeEvent.type === 'keyup') {
-    // While user keyboard layout determines the actual meaning of each
-    // `keyCode` value, almost all function keys have a universal value.
-    return translateToKey[nativeEvent.keyCode] || 'Unidentified';
-  }
-
-  return '';
-}
-
-class ListCustom extends PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "handleKeyPress", event => {
-      const key = getEventKey(event);
-
-      if (key === 'Enter' || key === ' ') {
-        this.props.onClick(event);
-      }
-    });
-  }
-
-  render() {
-    const _this$props = this.props,
-          {
-      scrolling,
-      hover,
-      className,
-      disabled,
-      template,
-      rgItemType,
-      tabIndex,
-      onClick,
-      onCheckboxChange,
-      onMouseOver,
-      onMouseUp
-    } = _this$props,
-          restProps = _objectWithoutProperties(_this$props, ["scrolling", "hover", "className", "disabled", "template", "rgItemType", "tabIndex", "onClick", "onCheckboxChange", "onMouseOver", "onMouseUp"]);
-
-    const classes = classNames(modules_3b67a421.item, className, {
-      [modules_3b67a421.action]: !disabled,
-      [modules_3b67a421.hover]: hover && !disabled,
-      [modules_3b67a421.scrolling]: scrolling
-    });
-    const dataTest = joinDataTestAttributes('ring-list-item-custom', {
-      'ring-list-item-action': !disabled
-    }, restProps['data-test']);
-    const content = typeof template === 'function' ? template(this.props) : template;
-    return /*#__PURE__*/React.createElement("span", {
-      role: "button",
-      tabIndex: tabIndex,
-      onClick: onClick,
-      onKeyPress: this.handleKeyPress,
-      onMouseOver: onMouseOver,
-      onFocus: onMouseOver,
-      onMouseUp: onMouseUp,
-      className: classes,
-      "data-test": dataTest
-    }, content);
-  }
-
-}
-
-_defineProperty(ListCustom, "propTypes", {
-  scrolling: PropTypes.bool,
-  hover: PropTypes.bool,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  rgItemType: PropTypes.number,
-  tabIndex: PropTypes.number,
-  template: PropTypes.oneOfType([PropTypes.func, PropTypes.element, PropTypes.string]),
-  onClick: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  onMouseUp: PropTypes.func,
-  onCheckboxChange: PropTypes.func,
-  'data-test': PropTypes.string
-});
-
-_defineProperty(ListCustom, "defaultProps", {
-  hover: false
-});
-
-class ListTitle extends PureComponent {
-  render() {
-    const {
-      className,
-      description,
-      label,
-      isFirst
-    } = this.props;
-    const classes = classNames(modules_3b67a421.title, className, {
-      [modules_3b67a421.title_first]: isFirst
-    });
-    return /*#__PURE__*/React.createElement("span", {
-      className: classes,
-      "data-test": "ring-list-title"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: classNames(modules_3b67a421.label, modules_3b67a421.text),
-      "data-test": "ring-list-title-label"
-    }, label), /*#__PURE__*/React.createElement("div", {
-      className: modules_3b67a421.description,
-      "data-test": "ring-list-title-description"
-    }, description));
-  }
-
-}
-
-_defineProperty(ListTitle, "propTypes", {
-  className: PropTypes.string,
-  description: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-  label: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-  isFirst: PropTypes.bool
-});
-
-class ListSeparator extends PureComponent {
-  render() {
-    const {
-      description,
-      isFirst,
-      className
-    } = this.props;
-    const classes = classNames(modules_3b67a421.separator, className, {
-      [modules_3b67a421.separator_first]: isFirst
-    });
-    return /*#__PURE__*/React.createElement("span", {
-      className: classes
-    }, description);
-  }
-
-}
-
-_defineProperty(ListSeparator, "propTypes", {
-  className: PropTypes.string,
-  description: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-  isFirst: PropTypes.bool
-});
-
-/**
- * @constructor
- * @extends {ReactComponent}
- */
-
-class ListHint extends PureComponent {
-  render() {
-    return /*#__PURE__*/React.createElement("span", {
-      className: classNames(modules_3b67a421.item, modules_3b67a421.hint),
-      "data-test": "ring-list-hint"
-    }, this.props.label);
-  }
-
-}
-
-_defineProperty(ListHint, "propTypes", {
-  label: PropTypes.node
-});
-
-/**
- * @enum {number}
- */
-const Type = {
-  SEPARATOR: 0,
-  LINK: 1,
-  ITEM: 2,
-  HINT: 3,
-  CUSTOM: 4,
-  TITLE: 5,
-  MARGIN: 6
-};
-const Dimension = {
-  ITEM_PADDING: 16,
-  ITEM_HEIGHT: 32,
-  COMPACT_ITEM_HEIGHT: 24,
-  SEPARATOR_HEIGHT: 25,
-  SEPARATOR_FIRST_HEIGHT: 16,
-  SEPARATOR_TEXT_HEIGHT: 18,
-  TITLE_HEIGHT: 42,
-  INNER_PADDING: 8,
-  MARGIN: 8
-};
-const DEFAULT_ITEM_TYPE = Type.ITEM;
-
-const scheduleScrollListener = scheduleRAF();
-const scheduleHoverListener = scheduleRAF();
-
-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.');
-/**
- * @param {Type} listItemType
- * @param {Object} item list item
- */
-
-function isItemType(listItemType, item) {
-  let type = item.rgItemType;
-
-  if (type == null) {
-    type = DEFAULT_ITEM_TYPE;
-  }
-
-  return type === listItemType;
-}
-
-const nonActivatableTypes = [Type.SEPARATOR, Type.TITLE, Type.MARGIN];
-
-function isActivatable(item) {
-  return item != null && !nonActivatableTypes.includes(item.rgItemType) && !item.disabled;
-}
-
-const shouldActivateFirstItem = props => props.activateFirstItem || props.activateSingleItem && props.data.length === 1;
-
-const ActiveItemContext = createStatefulContext(undefined, 'ActiveItem');
-/**
- * @name List
- * @constructor
- * @extends {ReactComponent}
- */
-
-/**
- * Displays a list of items.
- */
-
-class List extends Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      activeIndex: null,
-      prevActiveIndex: null,
-      prevData: [],
-      activeItem: null,
-      needScrollToActive: false,
-      scrolling: false,
-      hasOverflow: false,
-      disabledHover: false,
-      scrolledToBottom: false
-    });
-
-    _defineProperty(this, "hoverHandler", memoize(index => () => scheduleHoverListener(() => {
-      if (this.state.disabledHover) {
-        return;
-      }
-
-      if (this.container) {
-        this.setState({
-          activeIndex: index,
-          activeItem: this.props.data[index],
-          needScrollToActive: false
-        });
-      }
-    })));
-
-    _defineProperty(this, "_activatableItems", false);
-
-    _defineProperty(this, "_bufferSize", 10);
-
-    _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 `${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;
-      }
-    });
-
-    _defineProperty(this, "_cache", new CellMeasurerCache({
-      defaultHeight: this.defaultItemHeight(),
-      fixedWidth: true,
-      keyMapper: this.sizeCacheKey
-    }));
-
-    _defineProperty(this, "_hasActivatableItems", memoizeOne(items => items.some(isActivatable)));
-
-    _defineProperty(this, "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
-        });
-      }
-    }));
-
-    _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, "onDocumentMouseMove", () => {
-      if (this.state.disabledHover) {
-        this.setState({
-          disabledHover: false
-        });
-      }
-    });
-
-    _defineProperty(this, "onDocumentKeyDown", e => {
-      const metaKeys = [16, 17, 18, 19, 20, 91]; // eslint-disable-line no-magic-numbers
-
-      if (!this.state.disabledHover && !metaKeys.includes(e.keyCode)) {
-        this.setState({
-          disabledHover: true
-        });
-      }
-    });
-
-    _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 (['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
-      } else {
-        return true; // propagate event to the parent component (e.g., QueryAssist)
-      }
-    });
-
-    _defineProperty(this, "clearSelected", () => {
-      this.setState({
-        activeIndex: null,
-        needScrollToActive: false
-      });
-    });
-
-    _defineProperty(this, "scrollEndHandler", () => 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
-        });
-      }
-    });
-
-    _defineProperty(this, "renderItem", ({
-      index,
-      style,
-      isScrolling,
-      parent,
-      key
-    }) => {
-      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) {
-        itemKey = key || `${Type.MARGIN}_${index}`;
-        el = /*#__PURE__*/React.createElement("div", {
-          style: {
-            height: Dimension.MARGIN
-          }
-        });
-      } else {
-        // Hack around SelectNG implementation
-        const cleanedProps = _objectWithoutProperties(item, ["selectedLabel", "originalModel"]);
-
-        const itemProps = Object.assign({
-          rgItemType: DEFAULT_ITEM_TYPE
-        }, cleanedProps);
-
-        if (itemProps.url) {
-          itemProps.href = itemProps.url;
-        }
-
-        if (itemProps.href) {
-          itemProps.rgItemType = Type.LINK;
-        }
-
-        itemKey = key || itemId;
-        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.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 = this.props.compact;
-        }
-
-        let ItemComponent;
-        const isFirst = index === 1;
-
-        switch (itemProps.rgItemType) {
-          case Type.SEPARATOR:
-            ItemComponent = ListSeparator;
-            itemProps.isFirst = isFirst;
-            break;
-
-          case Type.LINK:
-            ItemComponent = ListLink;
-            this.addItemDataTestToProp(itemProps);
-            break;
-
-          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__*/React.createElement(ItemComponent, itemProps);
-      }
-
-      return parent ? /*#__PURE__*/React.createElement(CellMeasurer, {
-        cache: this._cache,
-        key: itemKey,
-        parent: parent,
-        rowIndex: index,
-        columnIndex: 0
-      }, ({
-        registerChild
-      }) => /*#__PURE__*/React.createElement("div", {
-        ref: registerChild,
-        style: style,
-        role: "row",
-        id: itemId
-      }, /*#__PURE__*/React.createElement("div", {
-        role: "cell"
-      }, el))) : /*#__PURE__*/cloneElement(el, {
-        key: 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, "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 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
-      });
-    }
-
-    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
-      const index = data.findIndex(item => item.key === activeItem.key);
-
-      if (index >= 0) {
-        Object.assign(nextState, {
-          activeIndex: index,
-          activeItem: data[index]
-        });
-      }
-    }
-
-    if (activeIndex == null && prevState.activeIndex == null && shouldActivateFirstItem(nextProps)) {
-      const firstActivatableIndex = data.findIndex(isActivatable);
-
-      if (firstActivatableIndex >= 0) {
-        Object.assign(nextState, {
-          activeIndex: firstActivatableIndex,
-          activeItem: data[firstActivatableIndex],
-          needScrollToActive: true
-        });
-      }
-    }
-
-    return nextState;
-  }
-
-  componentDidMount() {
-    document.addEventListener('mousemove', this.onDocumentMouseMove);
-    document.addEventListener('keydown', this.onDocumentKeyDown, true);
-  }
-
-  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();
-    }
-
-    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;
-    }
-
-    const item = this.props.data[correctedIndex];
-    this.setState({
-      activeIndex: correctedIndex,
-      activeItem: item,
-      needScrollToActive: true
-    }, function onSet() {
-      if (!isActivatable(item)) {
-        retryCallback(e);
-        return;
-      }
-
-      if (e.key !== 'Home' && e.key !== 'End') {
-        preventDefault(e);
-      }
-    });
-  }
-
-  getFirst() {
-    return this.props.data.find(item => item.rgItemType === Type.ITEM || item.rgItemType === Type.CUSTOM);
-  }
-
-  getSelected() {
-    return this.props.data[this.state.activeIndex];
-  }
-
-  defaultItemHeight() {
-    return this.props.compact ? Dimension.COMPACT_ITEM_HEIGHT : Dimension.ITEM_HEIGHT;
-  }
-
-  getVisibleListHeight(props) {
-    return props.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();
-      `${itemProps.rgItemType}_${JSON.stringify(identificator)}`;
-    }
-
-    return `${itemProps.rgItemType}_${identificator}`;
-  }
-
-  getId(item) {
-    return item != null ? `${this.id}:${item.key || this._deprecatedGenerateKeyFromContent(item)}` : null;
-  }
-
-  get inner() {
-    if (!this._inner) {
-      this._inner = this.container && this.container.querySelector('.ring-list__i');
-    }
-
-    return this._inner;
-  }
-
-  renderVirtualizedInner({
-    height,
-    maxHeight,
-    autoHeight = false,
-    rowCount,
-    isScrolling,
-    onChildScroll = noop,
-    scrollTop,
-    registerChild
-  }) {
-    const dirOverride = {
-      direction: 'auto'
-    }; // Virtualized sets "direction: ltr" by default https://github.com/bvaughn/react-virtualized/issues/457
-
-    return /*#__PURE__*/React.createElement(AutoSizer, {
-      disableHeight: true,
-      onResize: this.props.onResize
-    }, ({
-      width
-    }) => /*#__PURE__*/React.createElement("div", {
-      ref: registerChild
-    }, /*#__PURE__*/React.createElement(VirtualizedList, {
-      "aria-label": this.props.ariaLabel,
-      ref: this.virtualizedListRef,
-      className: "ring-list__i",
-      autoHeight: autoHeight,
-      style: maxHeight ? _objectSpread2({
-        maxHeight,
-        height: 'auto'
-      }, dirOverride) : dirOverride,
-      autoContainerWidth: true,
-      height: height,
-      width: width,
-      isScrolling: isScrolling,
-      onScroll: e => {
-        onChildScroll(e);
-        this.scrollEndHandler(e);
-      },
-      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
-    })));
-  }
-
-  renderVirtualized(maxHeight, rowCount) {
-    if (maxHeight) {
-      return this.renderVirtualizedInner({
-        height: maxHeight,
-        maxHeight,
-        rowCount
-      });
-    }
-
-    return /*#__PURE__*/React.createElement(WindowScroller, null, 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
-      }));
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames('ring-list__i', modules_3b67a421.simpleInner),
-      onScroll: this.scrollHandler,
-      onMouseMove: this.mouseHandler
-    }, /*#__PURE__*/React.createElement("div", {
-      "aria-label": this.props.ariaLabel,
-      style: maxHeight ? {
-        maxHeight: this.getVisibleListHeight(this.props)
-      } : null
-    }, items));
-  }
-
-  /** @override */
-  render() {
-    const hint = this.getSelected() && this.props.hintOnSelection || this.props.hint;
-    const fadeStyles = hint ? {
-      bottom: Dimension.ITEM_HEIGHT
-    } : null;
-    const rowCount = this.props.data.length + 2;
-    const maxHeight = this.props.maxHeight && this.getVisibleListHeight(this.props);
-    const classes = classNames(modules_3b67a421.list, this.props.className);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActiveItemContext.Updater, {
-      value: this.getId(this.state.activeItem),
-      skipUpdate: this.props.hidden || !isActivatable(this.state.activeItem)
-    }), /*#__PURE__*/React.createElement("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"
-    }, this.props.shortcuts && /*#__PURE__*/React.createElement(Shortcuts, {
-      map: this.shortcutsMap,
-      scope: this.shortcutsScope
-    }), this.props.renderOptimization ? this.renderVirtualized(maxHeight, rowCount) : this.renderSimple(maxHeight, rowCount), this.state.hasOverflow && !this.state.scrolledToBottom && /*#__PURE__*/React.createElement("div", {
-      className: modules_3b67a421.fade,
-      style: fadeStyles
-    }), hint && /*#__PURE__*/React.createElement(ListHint, {
-      label: hint
-    })));
-  }
-
-}
-
-_defineProperty(List, "propTypes", {
-  id: PropTypes.string,
-  className: PropTypes.string,
-  hint: PropTypes.node,
-  hintOnSelection: PropTypes.string,
-  data: PropTypes.array,
-  maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  activeIndex: PropTypes.number,
-  restoreActiveIndex: PropTypes.bool,
-  activateSingleItem: PropTypes.bool,
-  activateFirstItem: PropTypes.bool,
-  shortcuts: PropTypes.bool,
-  onMouseOut: PropTypes.func,
-  onSelect: PropTypes.func,
-  onScrollToBottom: PropTypes.func,
-  onResize: PropTypes.func,
-  useMouseUp: PropTypes.bool,
-  visible: PropTypes.bool,
-  renderOptimization: PropTypes.bool,
-  disableMoveOverflow: PropTypes.bool,
-  disableMoveDownOverflow: PropTypes.bool,
-  compact: PropTypes.bool,
-  disableScrollToActive: PropTypes.bool,
-  hidden: PropTypes.bool,
-  ariaLabel: PropTypes.string
-});
-
-_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 as A, List as L, getEventKey as g };