@deephaven/components 0.5.2-beta.0 → 0.6.1-demo.10

package/dist/ItemList.js

@@ -1,27 +1,5 @@
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import React, { PureComponent } from 'react';
@@ -30,8 +8,8 @@ import { FixedSizeList as List } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import Log from '@deephaven/log';
 import { RangeUtils } from '@deephaven/utils';
-import ItemListItem from './ItemListItem';
-import { ContextActionUtils } from './context-actions';
+import ItemListItem from "./ItemListItem.js";
+import { ContextActionUtils } from "./context-actions/index.js";
 import "./ItemList.css";
 var log = Log.module('ItemList');
 
@@ -39,45 +17,45 @@ var log = Log.module('ItemList');
  * Show items in a long scrollable list.
  * Can be navigated via keyboard or mouse.
  */
-export var ItemList = /*#__PURE__*/function (_PureComponent) {
-  _inherits(ItemList, _PureComponent);
-
-  var _super = _createSuper(ItemList);
-
-  function ItemList(_props) {
-    var _this;
-
-    _classCallCheck(this, ItemList);
+export class ItemList extends PureComponent {
+  // By drawing an additional 10 items on each side, tab/keyboard navigation works better (as the next element exists)
+  static renderItem(_ref) {
+    var {
+      item
+    } = _ref;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "item-list-item-content"
+    }, item && (item.displayValue || item.value || "".concat(item)));
+  }
 
-    _this = _super.call(this, _props);
+  constructor(_props) {
+    super(_props);
 
-    _defineProperty(_assertThisInitialized(_this), "list", void 0);
+    _defineProperty(this, "list", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "listContainer", void 0);
+    _defineProperty(this, "listContainer", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "getItemSelected", memoize(function (index, selectedRanges) {
-      return RangeUtils.isSelected(selectedRanges, index);
-    }, {
+    _defineProperty(this, "getItemSelected", memoize((index, selectedRanges) => RangeUtils.isSelected(selectedRanges, index), {
       max: ItemList.CACHE_SIZE
     }));
 
-    _defineProperty(_assertThisInitialized(_this), "getCachedItem", memoize(function (itemIndex, key, item, isFocused, isSelected, renderItem, style, disableSelect) {
+    _defineProperty(this, "getCachedItem", memoize((itemIndex, key, item, isFocused, isSelected, renderItem, style, disableSelect) => {
       var content = renderItem({
-        item: item,
-        itemIndex: itemIndex,
-        isFocused: isFocused,
-        isSelected: isSelected,
-        style: style
+        item,
+        itemIndex,
+        isFocused,
+        isSelected,
+        style
       });
       return /*#__PURE__*/React.createElement(ItemListItem, {
-        onContextMenu: _this.handleItemContextMenu,
-        onDoubleClick: _this.handleItemDoubleClick,
-        onMouseDown: _this.handleItemMouseDown,
-        onFocus: _this.handleItemFocus,
-        onBlur: _this.handleItemBlur,
+        onContextMenu: this.handleItemContextMenu,
+        onDoubleClick: this.handleItemDoubleClick,
+        onMouseDown: this.handleItemMouseDown,
+        onFocus: this.handleItemFocus,
+        onBlur: this.handleItemBlur,
         disableSelect: disableSelect,
-        onMouseMove: _this.handleItemMouseMove,
-        onMouseUp: _this.handleItemMouseUp,
+        onMouseMove: this.handleItemMouseMove,
+        onMouseUp: this.handleItemMouseUp,
         isFocused: isFocused,
         isSelected: isSelected,
         itemIndex: itemIndex,
@@ -88,63 +66,58 @@ export var ItemList = /*#__PURE__*/function (_PureComponent) {
       max: ItemList.CACHE_SIZE
     }));
 
-    _defineProperty(_assertThisInitialized(_this), "getOuterElement", memoize(function (onKeyDown) {
-      var component = /*#__PURE__*/React.forwardRef(function (props, ref) {
-        return (
-          /*#__PURE__*/
-          // We need to add the tabIndex to make sure it is focusable, otherwise we can't get key events
-          React.createElement("div", _extends({
-            ref: ref,
-            tabIndex: -1,
-            onKeyDown: onKeyDown,
-            role: "presentation" // eslint-disable-next-line react/jsx-props-no-spreading
-
-          }, props))
-        );
-      });
+    _defineProperty(this, "getOuterElement", memoize(onKeyDown => {
+      var component = /*#__PURE__*/React.forwardRef((props, ref) =>
+      /*#__PURE__*/
+      // We need to add the tabIndex to make sure it is focusable, otherwise we can't get key events
+      React.createElement("div", _extends({
+        ref: ref,
+        tabIndex: -1,
+        onKeyDown: onKeyDown,
+        role: "presentation" // eslint-disable-next-line react/jsx-props-no-spreading
+
+      }, props)));
       component.displayName = 'ItemListOuterElement';
       return component;
     }));
 
-    _defineProperty(_assertThisInitialized(_this), "getInnerElement", memoize(function () {
-      var component = /*#__PURE__*/React.forwardRef(function (props, ref) {
-        return /*#__PURE__*/React.createElement("div", _extends({
-          className: "item-list-inner-element",
-          ref: ref // eslint-disable-next-line react/jsx-props-no-spreading
+    _defineProperty(this, "getInnerElement", memoize(() => {
+      var component = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("div", _extends({
+        className: "item-list-inner-element",
+        ref: ref // eslint-disable-next-line react/jsx-props-no-spreading
 
-        }, props));
-      });
+      }, props)));
       component.displayName = 'ItemListInnerElement';
       return component;
     }));
 
-    _defineProperty(_assertThisInitialized(_this), "getItemData", memoize(function (items, selectedRanges, renderItem) {
-      return {
-        items: items,
-        selectedRanges: selectedRanges,
-        renderItem: renderItem
-      };
-    }));
-
-    _this.handleItemBlur = _this.handleItemBlur.bind(_assertThisInitialized(_this));
-    _this.handleItemContextMenu = _this.handleItemContextMenu.bind(_assertThisInitialized(_this));
-    _this.handleItemFocus = _this.handleItemFocus.bind(_assertThisInitialized(_this));
-    _this.handleItemDoubleClick = _this.handleItemDoubleClick.bind(_assertThisInitialized(_this));
-    _this.handleItemMouseDown = _this.handleItemMouseDown.bind(_assertThisInitialized(_this));
-    _this.handleItemMouseMove = _this.handleItemMouseMove.bind(_assertThisInitialized(_this));
-    _this.handleItemMouseUp = _this.handleItemMouseUp.bind(_assertThisInitialized(_this));
-    _this.handleItemsRendered = _this.handleItemsRendered.bind(_assertThisInitialized(_this));
-    _this.handleWindowMouseUp = _this.handleWindowMouseUp.bind(_assertThisInitialized(_this));
-    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
-    _this.handleMouseLeave = _this.handleMouseLeave.bind(_assertThisInitialized(_this));
-    _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
-    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
-    _this.renderInnerElement = _this.renderInnerElement.bind(_assertThisInitialized(_this));
-    _this.list = /*#__PURE__*/React.createRef();
-    _this.listContainer = /*#__PURE__*/React.createRef();
-    var isStickyBottom = _props.isStickyBottom,
-        _selectedRanges = _props.selectedRanges;
-    _this.state = {
+    _defineProperty(this, "getItemData", memoize((items, selectedRanges, renderItem) => ({
+      items,
+      selectedRanges,
+      renderItem
+    })));
+
+    this.handleItemBlur = this.handleItemBlur.bind(this);
+    this.handleItemContextMenu = this.handleItemContextMenu.bind(this);
+    this.handleItemFocus = this.handleItemFocus.bind(this);
+    this.handleItemDoubleClick = this.handleItemDoubleClick.bind(this);
+    this.handleItemMouseDown = this.handleItemMouseDown.bind(this);
+    this.handleItemMouseMove = this.handleItemMouseMove.bind(this);
+    this.handleItemMouseUp = this.handleItemMouseUp.bind(this);
+    this.handleItemsRendered = this.handleItemsRendered.bind(this);
+    this.handleWindowMouseUp = this.handleWindowMouseUp.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+    this.handleResize = this.handleResize.bind(this);
+    this.renderInnerElement = this.renderInnerElement.bind(this);
+    this.list = /*#__PURE__*/React.createRef();
+    this.listContainer = /*#__PURE__*/React.createRef();
+    var {
+      isStickyBottom,
+      selectedRanges: _selectedRanges
+    } = _props;
+    this.state = {
       focusIndex: null,
       mouseDownIndex: null,
       selectedRanges: _selectedRanges,
@@ -154,575 +127,593 @@ export var ItemList = /*#__PURE__*/function (_PureComponent) {
       isStuckToBottom: isStickyBottom,
       scrollOffset: null
     };
-    return _this;
   }
 
-  _createClass(ItemList, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var isStickyBottom = this.props.isStickyBottom;
+  componentDidMount() {
+    var {
+      isStickyBottom
+    } = this.props;
 
-      if (isStickyBottom && !this.isListAtBottom()) {
-        this.scrollToBottom();
-      }
+    if (isStickyBottom && !this.isListAtBottom()) {
+      this.scrollToBottom();
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var propSelectedRanges = this.props.selectedRanges;
-      var _this$state = this.state,
-          focusIndex = _this$state.focusIndex,
-          isStuckToBottom = _this$state.isStuckToBottom,
-          scrollOffset = _this$state.scrollOffset,
-          height = _this$state.height,
-          selectedRanges = _this$state.selectedRanges;
-
-      if (isStuckToBottom && !this.isListAtBottom()) {
-        this.scrollToBottom();
-      }
+  }
 
-      if (scrollOffset !== prevState.scrollOffset || height !== prevState.height) {
-        this.sendViewportUpdate();
-      }
+  componentDidUpdate(prevProps, prevState) {
+    var {
+      selectedRanges: propSelectedRanges
+    } = this.props;
+    var {
+      focusIndex,
+      isStuckToBottom,
+      scrollOffset,
+      height,
+      selectedRanges
+    } = this.state;
 
-      if (propSelectedRanges !== prevProps.selectedRanges && propSelectedRanges !== selectedRanges) {
-        this.setSelectedRanges(propSelectedRanges);
-      } else if (selectedRanges !== prevState.selectedRanges) {
-        var _onSelectionChange = this.props.onSelectionChange;
+    if (isStuckToBottom && !this.isListAtBottom()) {
+      this.scrollToBottom();
+    }
 
-        _onSelectionChange(selectedRanges);
-      }
+    if (scrollOffset !== prevState.scrollOffset || height !== prevState.height) {
+      this.sendViewportUpdate();
+    }
 
-      if (focusIndex !== prevState.focusIndex) {
-        var _onFocusChange = this.props.onFocusChange;
+    if (propSelectedRanges !== prevProps.selectedRanges && propSelectedRanges !== selectedRanges) {
+      this.setSelectedRanges(propSelectedRanges);
+    } else if (selectedRanges !== prevState.selectedRanges) {
+      var {
+        onSelectionChange: _onSelectionChange
+      } = this.props;
 
-        _onFocusChange(focusIndex);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('mouseup', this.handleWindowMouseUp);
+      _onSelectionChange(selectedRanges);
     }
-  }, {
-    key: "focus",
-    value: function focus() {
-      var _this$listContainer$c;
 
-      (_this$listContainer$c = this.listContainer.current) === null || _this$listContainer$c === void 0 ? void 0 : _this$listContainer$c.focus();
-    }
-  }, {
-    key: "getElement",
-    value: function getElement(itemIndex) {
-      if (this.listContainer.current == null) {
-        return null;
-      }
+    if (focusIndex !== prevState.focusIndex) {
+      var {
+        onFocusChange: _onFocusChange
+      } = this.props;
 
-      var focusSelector = this.props.focusSelector;
-      var overscanStartIndex = this.state.overscanStartIndex;
-      var elements = this.listContainer.current.querySelectorAll(focusSelector);
-      var elementIndex = itemIndex - overscanStartIndex;
-      return elements[elementIndex];
+      _onFocusChange(focusIndex);
     }
-  }, {
-    key: "focusItem",
-    value: function focusItem(itemIndex) {
-      var disableSelect = this.props.disableSelect;
-      if (disableSelect) return;
-      this.setState({
-        focusIndex: itemIndex
-      });
-      var element = this.getElement(itemIndex);
+  }
 
-      if (element instanceof HTMLElement) {
-        element.focus();
-      }
-    }
-  }, {
-    key: "scrollToItem",
-    value: function scrollToItem(itemIndex) {
-      var element = this.getElement(itemIndex);
-
-      if (element != null) {
-        element.scrollIntoView({
-          block: 'center'
-        });
-      }
-    }
-  }, {
-    key: "handleItemContextMenu",
-    value: function handleItemContextMenu(itemIndex, e) {
-      // Update the selection, but don't consume the mouse event - it will trigger the context menu
-      var selectedRanges = this.state.selectedRanges;
-      var isSelected = RangeUtils.isSelected(selectedRanges, itemIndex); // When right-clicking, we want to maintain the current selection if the right click happened within the selection even if the modifier key isn't down
-
-      var isModifierDown = isSelected || ContextActionUtils.isModifierKeyDown(e);
-      this.toggleSelect(itemIndex, e.shiftKey, isModifierDown, false);
-    }
-  }, {
-    key: "handleItemDoubleClick",
-    value: function handleItemDoubleClick(itemIndex) {
-      var _this$props = this.props,
-          isDoubleClickSelect = _this$props.isDoubleClickSelect,
-          onSelect = _this$props.onSelect;
-
-      if (isDoubleClickSelect) {
-        this.setState(function (_ref) {
-          var selectedRanges = _ref.selectedRanges;
-          return {
-            selectedRanges: RangeUtils.selectRange(selectedRanges, [itemIndex, itemIndex])
-          };
-        }, function () {
-          onSelect(itemIndex);
-        });
-      }
-    }
-  }, {
-    key: "handleItemMouseDown",
-    value: function handleItemMouseDown(index, e) {
-      var selectedRanges = this.state.selectedRanges;
-
-      if (e.target instanceof HTMLElement && ['button', 'select', 'input', 'textarea'].indexOf(e.target.tagName.toLowerCase()) !== -1) {
-        // allow these elements to do their own behaviours
-        return;
-      }
+  componentWillUnmount() {
+    window.removeEventListener('mouseup', this.handleWindowMouseUp);
+  }
 
-      if (e.button === 2 && selectedRanges.length === 0) {
-        // allow right click to act as a selection if selection is empty
-        this.focusItem(index);
-        this.selectItem(index);
-        return;
-      }
+  focus() {
+    var _this$listContainer$c;
 
-      if (e.button != null && e.button !== 0) {
-        return;
-      }
+    (_this$listContainer$c = this.listContainer.current) === null || _this$listContainer$c === void 0 ? void 0 : _this$listContainer$c.focus();
+  }
 
-      this.setState({
-        mouseDownIndex: index
-      });
-      window.addEventListener('mouseup', this.handleWindowMouseUp); // Leave selection until mouse up, to allow for dragging behaviour
+  getElement(itemIndex) {
+    if (this.listContainer.current == null) {
+      return null;
     }
-  }, {
-    key: "handleItemBlur",
-    value: function handleItemBlur(itemIndex, e) {
-      log.debug2('item blur', itemIndex, e.currentTarget, e.relatedTarget);
 
-      if (!e.relatedTarget || this.listContainer.current && e.relatedTarget instanceof HTMLElement && !this.listContainer.current.contains(e.relatedTarget)) {
-        // Next focused element is outside of the ItemList
-        this.setState({
-          focusIndex: null
-        });
-      }
+    var {
+      focusSelector
+    } = this.props;
+    var {
+      overscanStartIndex
+    } = this.state;
+    var elements = this.listContainer.current.querySelectorAll(focusSelector);
+    var elementIndex = itemIndex - overscanStartIndex;
+    return elements[elementIndex];
+  }
+
+  focusItem(itemIndex) {
+    var {
+      disableSelect
+    } = this.props;
+    if (disableSelect) return;
+    this.setState({
+      focusIndex: itemIndex
+    });
+    var element = this.getElement(itemIndex);
+
+    if (element instanceof HTMLElement) {
+      element.focus();
     }
-  }, {
-    key: "handleItemFocus",
-    value: function handleItemFocus(itemIndex, e) {
-      log.debug2('item focus', itemIndex, e.target);
-      this.setState(function (state) {
-        var focusIndex = state.focusIndex;
-
-        if (focusIndex !== itemIndex) {
-          return {
-            focusIndex: itemIndex
-          };
-        }
+  }
+
+  scrollToItem(itemIndex) {
+    var element = this.getElement(itemIndex);
 
-        return null;
+    if (element != null) {
+      element.scrollIntoView({
+        block: 'center'
       });
     }
-  }, {
-    key: "handleItemMouseMove",
-    value: function handleItemMouseMove(itemIndex, e) {
-      var _this$props2 = this.props,
-          isDragSelect = _this$props2.isDragSelect,
-          isMultiSelect = _this$props2.isMultiSelect,
-          disableSelect = _this$props2.disableSelect;
-      var _this$state2 = this.state,
-          mouseDownIndex = _this$state2.mouseDownIndex,
-          selectedRanges = _this$state2.selectedRanges;
-      if (mouseDownIndex == null || disableSelect) return;
-      this.setState({
-        isDragging: true
-      });
+  }
 
-      if (isDragSelect || mouseDownIndex === itemIndex) {
-        this.focusItem(itemIndex);
+  handleItemContextMenu(itemIndex, e) {
+    // Update the selection, but don't consume the mouse event - it will trigger the context menu
+    var {
+      selectedRanges
+    } = this.state;
+    var isSelected = RangeUtils.isSelected(selectedRanges, itemIndex); // When right-clicking, we want to maintain the current selection if the right click happened within the selection even if the modifier key isn't down
 
-        if (isMultiSelect) {
-          if (!isDragSelect && !this.getItemSelected(itemIndex, selectedRanges) && !ContextActionUtils.isModifierKeyDown(e)) {
-            // If there's already a selection and they select outside of that range while dragging without a modifier key, start a new selection with just the new item
-            this.deselectAll();
-          }
+    var isModifierDown = isSelected || ContextActionUtils.isModifierKeyDown(e);
+    this.toggleSelect(itemIndex, e.shiftKey, isModifierDown, false);
+  }
 
-          this.selectRange([Math.min(mouseDownIndex, itemIndex), Math.max(mouseDownIndex, itemIndex)]);
-        } else {
-          this.toggleSelect(itemIndex, e.shiftKey, ContextActionUtils.isModifierKeyDown(e));
-        }
-      }
+  handleItemDoubleClick(itemIndex, e) {
+    var {
+      isDoubleClickSelect,
+      onSelect
+    } = this.props;
+
+    if (isDoubleClickSelect) {
+      this.setState((_ref2) => {
+        var {
+          selectedRanges
+        } = _ref2;
+        return {
+          selectedRanges: RangeUtils.selectRange(selectedRanges, [itemIndex, itemIndex])
+        };
+      }, () => {
+        onSelect(itemIndex, e);
+      });
     }
-  }, {
-    key: "handleItemMouseUp",
-    value: function handleItemMouseUp(index, e) {
-      var _this$props3 = this.props,
-          isDoubleClickSelect = _this$props3.isDoubleClickSelect,
-          onSelect = _this$props3.onSelect;
-      var _this$state3 = this.state,
-          mouseDownIndex = _this$state3.mouseDownIndex,
-          isDragging = _this$state3.isDragging;
-
-      if (e.target instanceof HTMLElement && ['button', 'select', 'input', 'textarea'].indexOf(e.target.tagName.toLowerCase()) !== -1) {
-        return;
-      }
-
-      if (mouseDownIndex === index && !isDragging) {
-        var isShiftDown = e.shiftKey;
-        var isModifierDown = ContextActionUtils.isModifierKeyDown(e);
-        this.focusItem(index);
-        this.toggleSelect(index, isShiftDown, isModifierDown);
+  }
 
-        if (!isDoubleClickSelect && !isShiftDown && !isModifierDown) {
-          onSelect(index);
-        }
-      }
+  handleItemMouseDown(index, e) {
+    var {
+      selectedRanges
+    } = this.state;
 
-      this.resetMouseState();
+    if (e.target instanceof HTMLElement && ['button', 'select', 'input', 'textarea'].indexOf(e.target.tagName.toLowerCase()) !== -1) {
+      // allow these elements to do their own behaviours
+      return;
     }
-  }, {
-    key: "handleItemsRendered",
-    value: function handleItemsRendered(_ref2) {
-      var overscanStartIndex = _ref2.overscanStartIndex;
-      this.setState({
-        overscanStartIndex: overscanStartIndex
-      });
+
+    if (e.button === 2 && selectedRanges.length === 0) {
+      // allow right click to act as a selection if selection is empty
+      this.focusItem(index);
+      this.selectItem(index);
+      return;
     }
-  }, {
-    key: "handleResize",
-    value: function handleResize(_ref3) {
-      var height = _ref3.height;
-      this.setState({
-        height: height
-      });
+
+    if (e.button != null && e.button !== 0) {
+      return;
     }
-  }, {
-    key: "handleMouseLeave",
-    value: function handleMouseLeave() {
+
+    this.setState({
+      mouseDownIndex: index
+    });
+    window.addEventListener('mouseup', this.handleWindowMouseUp); // Leave selection until mouse up, to allow for dragging behaviour
+  }
+
+  handleItemBlur(itemIndex, e) {
+    log.debug2('item blur', itemIndex, e.currentTarget, e.relatedTarget);
+
+    if (!e.relatedTarget || this.listContainer.current && e.relatedTarget instanceof HTMLElement && !this.listContainer.current.contains(e.relatedTarget)) {
+      // Next focused element is outside of the ItemList
       this.setState({
-        mouseDownIndex: null
+        focusIndex: null
       });
     }
-  }, {
-    key: "handleWindowMouseUp",
-    value: function handleWindowMouseUp() {
-      this.resetMouseState();
-      window.removeEventListener('mouseup', this.handleWindowMouseUp);
-    }
-  }, {
-    key: "handleKeyDown",
-    value: function handleKeyDown(e) {
-      var _this$props4 = this.props,
-          isMultiSelect = _this$props4.isMultiSelect,
-          itemCount = _this$props4.itemCount,
-          onSelect = _this$props4.onSelect;
-      var oldFocus = this.state.focusIndex;
-      var newFocus = oldFocus;
-
-      if (e.key === 'Enter' || e.key === ' ') {
-        if (!isMultiSelect && newFocus != null) {
-          this.setState({
-            selectedRanges: [[newFocus, newFocus]]
-          }, function () {
-            if (newFocus != null) {
-              onSelect(newFocus);
-            }
-          });
-        }
+  }
 
-        return;
+  handleItemFocus(itemIndex, e) {
+    log.debug2('item focus', itemIndex, e.target);
+    this.setState(state => {
+      var {
+        focusIndex
+      } = state;
+
+      if (focusIndex !== itemIndex) {
+        return {
+          focusIndex: itemIndex
+        };
       }
 
-      if (e.key === 'ArrowUp') {
-        if (newFocus != null && newFocus >= 0) {
-          newFocus = Math.max(0, newFocus - 1);
-        } else {
-          newFocus = itemCount - 1;
-        }
-      } else if (e.key === 'ArrowDown') {
-        if (newFocus != null && newFocus >= 0) {
-          newFocus = Math.min(newFocus + 1, itemCount - 1);
-        } else {
-          newFocus = 0;
+      return null;
+    });
+  }
+
+  handleItemMouseMove(itemIndex, e) {
+    var {
+      isDragSelect,
+      isMultiSelect,
+      disableSelect
+    } = this.props;
+    var {
+      mouseDownIndex,
+      selectedRanges
+    } = this.state;
+    if (mouseDownIndex == null || disableSelect) return;
+    this.setState({
+      isDragging: true
+    });
+
+    if (isDragSelect || mouseDownIndex === itemIndex) {
+      this.focusItem(itemIndex);
+
+      if (isMultiSelect) {
+        if (!isDragSelect && !this.getItemSelected(itemIndex, selectedRanges) && !ContextActionUtils.isModifierKeyDown(e)) {
+          // If there's already a selection and they select outside of that range while dragging without a modifier key, start a new selection with just the new item
+          this.deselectAll();
         }
+
+        this.selectRange([Math.min(mouseDownIndex, itemIndex), Math.max(mouseDownIndex, itemIndex)]);
       } else {
-        return;
+        this.toggleSelect(itemIndex, e.shiftKey, ContextActionUtils.isModifierKeyDown(e), false);
       }
+    }
+  }
 
-      if (oldFocus !== newFocus) {
-        e.stopPropagation();
-        e.preventDefault();
-        this.focusItem(newFocus);
-        var selectedRanges = this.state.selectedRanges;
+  handleItemMouseUp(index, e) {
+    var {
+      isDeselectOnClick,
+      isDoubleClickSelect,
+      onSelect
+    } = this.props;
+    var {
+      mouseDownIndex,
+      isDragging
+    } = this.state;
+
+    if (e.target instanceof HTMLElement && ['button', 'select', 'input', 'textarea'].indexOf(e.target.tagName.toLowerCase()) !== -1) {
+      return;
+    }
+
+    if (mouseDownIndex === index && !isDragging) {
+      var isShiftDown = e.shiftKey;
+      var isModifierDown = ContextActionUtils.isModifierKeyDown(e);
+      this.focusItem(index);
+      this.toggleSelect(index, isShiftDown, isModifierDown, isDeselectOnClick);
+
+      if (!isDoubleClickSelect && !isShiftDown && !isModifierDown) {
+        onSelect(index, e);
+      }
+    }
 
-        if (e.shiftKey && selectedRanges.length > 0) {
-          var lastRange = selectedRanges[selectedRanges.length - 1];
-          this.selectRange([Math.min(newFocus, lastRange[0]), Math.max(newFocus, lastRange[1])]);
-        } else {
-          this.deselectAll();
+    this.resetMouseState();
+  }
 
-          if (newFocus !== null) {
-            this.selectItem(newFocus);
-          } else {
-            var _this$listContainer$c2;
+  handleItemsRendered(_ref3) {
+    var {
+      overscanStartIndex
+    } = _ref3;
+    this.setState({
+      overscanStartIndex
+    });
+  }
 
-            (_this$listContainer$c2 = this.listContainer.current) === null || _this$listContainer$c2 === void 0 ? void 0 : _this$listContainer$c2.focus();
-          }
-        }
+  handleResize(_ref4) {
+    var {
+      height
+    } = _ref4;
+    this.setState({
+      height
+    });
+  }
 
-        this.scrollIntoView(newFocus);
-      }
-    }
-  }, {
-    key: "handleScroll",
-    value: function handleScroll(_ref4) {
-      var _this2 = this;
-
-      var scrollUpdateWasRequested = _ref4.scrollUpdateWasRequested,
-          scrollOffset = _ref4.scrollOffset;
-      this.setState(function (state) {
-        if (scrollUpdateWasRequested) {
-          // The scroll was caused by scrollTo() or scrollToItem()
-          // Don't re-calc isStuckToBottom
-          return {
-            scrollOffset: scrollOffset
-          };
-        }
+  handleMouseLeave() {
+    this.setState({
+      mouseDownIndex: null
+    });
+  }
 
-        var isStickyBottom = _this2.props.isStickyBottom;
-        var height = state.height;
+  handleWindowMouseUp() {
+    this.resetMouseState();
+    window.removeEventListener('mouseup', this.handleWindowMouseUp);
+  }
 
-        var isStuckToBottom = isStickyBottom && _this2.isListAtBottom({
-          scrollOffset: scrollOffset,
-          height: height
+  handleKeyDown(e) {
+    var {
+      isMultiSelect,
+      itemCount,
+      onSelect
+    } = this.props;
+    var {
+      focusIndex: oldFocus
+    } = this.state;
+    var newFocus = oldFocus;
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      if (!isMultiSelect && newFocus != null) {
+        this.setState({
+          selectedRanges: [[newFocus, newFocus]]
+        }, () => {
+          if (newFocus != null) {
+            onSelect(newFocus, e);
+          }
         });
+      }
 
-        return {
-          isStuckToBottom: isStuckToBottom,
-          scrollOffset: scrollOffset
-        };
-      });
+      return;
     }
-  }, {
-    key: "resetMouseState",
-    value: function resetMouseState() {
-      this.setState({
-        mouseDownIndex: null,
-        isDragging: false
-      });
-    }
-  }, {
-    key: "scrollToBottom",
-    value: function scrollToBottom() {
-      var itemCount = this.props.itemCount;
 
-      if (this.list.current) {
-        this.list.current.scrollToItem(itemCount);
+    if (e.key === 'ArrowUp') {
+      if (newFocus != null && newFocus >= 0) {
+        newFocus = Math.max(0, newFocus - 1);
+      } else {
+        newFocus = itemCount - 1;
       }
-    }
-  }, {
-    key: "scrollIntoView",
-    value: function scrollIntoView(itemIndex) {
-      if (this.list.current) {
-        this.list.current.scrollToItem(itemIndex);
+    } else if (e.key === 'ArrowDown') {
+      if (newFocus != null && newFocus >= 0) {
+        newFocus = Math.min(newFocus + 1, itemCount - 1);
+      } else {
+        newFocus = 0;
       }
+    } else {
+      return;
     }
-    /**
-     * @param index The index to toggle selection for
-     * @param isShiftDown True if the shift modifier key is down
-     * @param isModifierDown True if the meta modifier key is down
-     * @param isDeselectable True if item should be deselected if already selected
-     */
-
-  }, {
-    key: "toggleSelect",
-    value: function toggleSelect(index, isShiftDown, isModifierDown) {
-      var isDeselectable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-      var isMultiSelect = this.props.isMultiSelect;
-      var selectedRanges = this.state.selectedRanges;
-
-      if (isMultiSelect && isShiftDown && selectedRanges.length > 0) {
+
+    if (oldFocus !== newFocus) {
+      e.stopPropagation();
+      e.preventDefault();
+      this.focusItem(newFocus);
+      var {
+        selectedRanges
+      } = this.state;
+
+      if (e.shiftKey && selectedRanges.length > 0) {
         var lastRange = selectedRanges[selectedRanges.length - 1];
-        this.selectRange([Math.min(lastRange[0], index), Math.max(index, lastRange[1])]);
-      } else if (isMultiSelect && selectedRanges.length === 1 && selectedRanges[0][0] === index && selectedRanges[0][1] === index) {
-        if (isDeselectable) {
-          this.deselectItem(index);
-        }
-      } else if (isMultiSelect && isModifierDown) {
-        if (this.getItemSelected(index, selectedRanges)) {
-          if (isDeselectable) {
-            this.deselectItem(index);
-          }
-        } else {
-          this.selectItem(index);
-        }
+        this.selectRange([Math.min(newFocus, lastRange[0]), Math.max(newFocus, lastRange[1])]);
       } else {
         this.deselectAll();
-        this.selectItem(index);
+
+        if (newFocus !== null) {
+          this.selectItem(newFocus);
+        } else {
+          var _this$listContainer$c2;
+
+          (_this$listContainer$c2 = this.listContainer.current) === null || _this$listContainer$c2 === void 0 ? void 0 : _this$listContainer$c2.focus();
+        }
       }
+
+      this.scrollIntoView(newFocus);
     }
-  }, {
-    key: "deselectAll",
-    value: function deselectAll() {
-      var itemCount = this.props.itemCount;
-      this.deselectRange([0, itemCount]);
-    }
-  }, {
-    key: "deselectItem",
-    value: function deselectItem(index) {
-      this.deselectRange([index, index]);
-    }
-  }, {
-    key: "deselectRange",
-    value: function deselectRange(range) {
-      RangeUtils.validateRange(range);
-      this.setState(function (_ref5) {
-        var selectedRanges = _ref5.selectedRanges;
+  }
+
+  handleScroll(_ref5) {
+    var {
+      scrollUpdateWasRequested,
+      scrollOffset
+    } = _ref5;
+    this.setState(state => {
+      if (scrollUpdateWasRequested) {
+        // The scroll was caused by scrollTo() or scrollToItem()
+        // Don't re-calc isStuckToBottom
         return {
-          selectedRanges: RangeUtils.deselectRange(selectedRanges, range)
+          scrollOffset
         };
+      }
+
+      var {
+        isStickyBottom
+      } = this.props;
+      var {
+        height
+      } = state;
+      var isStuckToBottom = isStickyBottom && this.isListAtBottom({
+        scrollOffset,
+        height
       });
+      return {
+        isStuckToBottom,
+        scrollOffset
+      };
+    });
+  }
+
+  resetMouseState() {
+    this.setState({
+      mouseDownIndex: null,
+      isDragging: false
+    });
+  }
+
+  scrollToBottom() {
+    var {
+      itemCount
+    } = this.props;
+
+    if (this.list.current) {
+      this.list.current.scrollToItem(itemCount);
     }
-  }, {
-    key: "selectItem",
-    value: function selectItem(index) {
-      var disableSelect = this.props.disableSelect;
-      if (disableSelect) return;
-      this.selectRange([index, index]);
-    }
-  }, {
-    key: "selectRange",
-    value: function selectRange(range) {
-      RangeUtils.validateRange(range);
-      this.setState(function (_ref6) {
-        var selectedRanges = _ref6.selectedRanges;
-        return {
-          selectedRanges: RangeUtils.selectRange(selectedRanges, range)
-        };
-      });
+  }
+
+  scrollIntoView(itemIndex) {
+    if (this.list.current) {
+      this.list.current.scrollToItem(itemIndex);
     }
-  }, {
-    key: "setSelectedRanges",
-    value: function setSelectedRanges(selectedRanges) {
-      this.setState({
-        selectedRanges: selectedRanges
-      });
+  }
+  /**
+   * @param index The index to toggle selection for
+   * @param isShiftDown True if the shift modifier key is down
+   * @param isModifierDown True if the meta modifier key is down
+   * @param isDeselectable True if item should be deselected if already selected
+   */
+
+
+  toggleSelect(index, isShiftDown, isModifierDown) {
+    var isDeselectable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+    var {
+      isMultiSelect
+    } = this.props;
+    var {
+      selectedRanges
+    } = this.state;
+
+    if (isMultiSelect && isShiftDown && selectedRanges.length > 0) {
+      var lastRange = selectedRanges[selectedRanges.length - 1];
+      this.selectRange([Math.min(lastRange[0], index), Math.max(index, lastRange[1])]);
+    } else if (isMultiSelect && selectedRanges.length === 1 && selectedRanges[0][0] === index && selectedRanges[0][1] === index) {
+      if (isDeselectable) {
+        this.deselectItem(index);
+      }
+    } else if (isMultiSelect && isModifierDown) {
+      if (this.getItemSelected(index, selectedRanges)) {
+        if (isDeselectable) {
+          this.deselectItem(index);
+        }
+      } else {
+        this.selectItem(index);
+      }
+    } else {
+      this.deselectAll();
+      this.selectItem(index);
     }
-  }, {
-    key: "sendViewportUpdate",
-    value: function sendViewportUpdate() {
-      var _this$state4 = this.state,
-          scrollOffset = _this$state4.scrollOffset,
-          height = _this$state4.height;
+  }
 
-      if (scrollOffset != null && height != null) {
-        var _this$props5 = this.props,
-            _onViewportChange = _this$props5.onViewportChange,
-            rowHeight = _this$props5.rowHeight;
+  deselectAll() {
+    var {
+      itemCount
+    } = this.props;
+    this.deselectRange([0, itemCount]);
+  }
 
-        var _topRow = Math.floor(scrollOffset / rowHeight);
+  deselectItem(index) {
+    this.deselectRange([index, index]);
+  }
 
-        var _bottomRow = _topRow + Math.ceil(height / rowHeight);
+  deselectRange(range) {
+    RangeUtils.validateRange(range);
+    this.setState((_ref6) => {
+      var {
+        selectedRanges
+      } = _ref6;
+      return {
+        selectedRanges: RangeUtils.deselectRange(selectedRanges, range)
+      };
+    });
+  }
 
-        _onViewportChange(_topRow, _bottomRow);
-      }
-    }
-  }, {
-    key: "isListAtBottom",
-    value: function isListAtBottom() {
-      var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state,
-          scrollOffset = _ref7.scrollOffset,
-          height = _ref7.height;
-
-      if (height == null || scrollOffset == null) {
-        return false;
-      }
+  selectItem(index) {
+    var {
+      disableSelect
+    } = this.props;
+    if (disableSelect) return;
+    this.selectRange([index, index]);
+  }
 
-      var _this$props6 = this.props,
-          itemCount = _this$props6.itemCount,
-          rowHeight = _this$props6.rowHeight;
-      return scrollOffset + height >= itemCount * rowHeight;
-    }
-  }, {
-    key: "renderInnerElement",
-    value: function renderInnerElement(_ref8) {
-      var itemIndex = _ref8.index,
-          style = _ref8.style;
-      var _this$props7 = this.props,
-          items = _this$props7.items,
-          offset = _this$props7.offset,
-          renderItem = _this$props7.renderItem,
-          disableSelect = _this$props7.disableSelect;
-      var _this$state5 = this.state,
-          focusIndex = _this$state5.focusIndex,
-          selectedRanges = _this$state5.selectedRanges;
-
-      if (itemIndex < offset || itemIndex >= offset + items.length) {
-        return null;
-      }
+  selectRange(range) {
+    RangeUtils.validateRange(range);
+    this.setState((_ref7) => {
+      var {
+        selectedRanges
+      } = _ref7;
+      return {
+        selectedRanges: RangeUtils.selectRange(selectedRanges, range)
+      };
+    });
+  }
 
-      var item = items[itemIndex - offset];
-      return this.getCachedItem(itemIndex, itemIndex, item, itemIndex === focusIndex && !disableSelect, this.getItemSelected(itemIndex, selectedRanges), renderItem, style, disableSelect);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var _this$props8 = this.props,
-          items = _this$props8.items,
-          itemCount = _this$props8.itemCount,
-          overscanCount = _this$props8.overscanCount,
-          renderItem = _this$props8.renderItem,
-          rowHeight = _this$props8.rowHeight;
-      var selectedRanges = this.state.selectedRanges;
-      return /*#__PURE__*/React.createElement(AutoSizer, {
-        className: "item-list-auto-sizer",
-        onResize: this.handleResize
-      }, function (_ref9) {
-        var width = _ref9.width,
-            height = _ref9.height;
-        return /*#__PURE__*/React.createElement(List, {
-          className: "item-list-scroll-pane",
-          height: height,
-          width: width,
-          itemCount: itemCount,
-          itemSize: rowHeight // This prop isn't actually used by us, it is passed to the render function by react-window
-          // Used here to force a re-render of the List component.
-          // Otherwise it doesn't know to call the render again when selection or renderItem changes
-          ,
-          itemData: _this3.getItemData(items, selectedRanges, renderItem),
-          onScroll: _this3.handleScroll,
-          onItemsRendered: _this3.handleItemsRendered,
-          ref: _this3.list,
-          outerElementType: _this3.getOuterElement(_this3.handleKeyDown),
-          outerRef: _this3.listContainer,
-          innerElementType: _this3.getInnerElement(),
-          overscanCount: overscanCount
-        }, _this3.renderInnerElement);
-      });
+  setSelectedRanges(selectedRanges) {
+    this.setState({
+      selectedRanges
+    });
+  }
+
+  sendViewportUpdate() {
+    var {
+      scrollOffset,
+      height
+    } = this.state;
+
+    if (scrollOffset != null && height != null) {
+      var {
+        onViewportChange: _onViewportChange,
+        rowHeight
+      } = this.props;
+
+      var _topRow = Math.floor(scrollOffset / rowHeight);
+
+      var _bottomRow = _topRow + Math.ceil(height / rowHeight);
+
+      _onViewportChange(_topRow, _bottomRow);
     }
-  }], [{
-    key: "renderItem",
-    value: // By drawing an additional 10 items on each side, tab/keyboard navigation works better (as the next element exists)
-    function renderItem(_ref10) {
-      var item = _ref10.item;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "item-list-item-content"
-      }, item && (item.displayValue || item.value || "".concat(item)));
+  }
+
+  isListAtBottom() {
+    var {
+      scrollOffset,
+      height
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state;
+
+    if (height == null || scrollOffset == null) {
+      return false;
     }
-  }]);
 
-  return ItemList;
-}(PureComponent);
+    var {
+      itemCount,
+      rowHeight
+    } = this.props;
+    return scrollOffset + height >= itemCount * rowHeight;
+  }
+
+  renderInnerElement(_ref8) {
+    var {
+      index: itemIndex,
+      style
+    } = _ref8;
+    var {
+      items,
+      offset,
+      renderItem,
+      disableSelect
+    } = this.props;
+    var {
+      focusIndex,
+      selectedRanges
+    } = this.state;
+
+    if (itemIndex < offset || itemIndex >= offset + items.length) {
+      return null;
+    }
+
+    var item = items[itemIndex - offset];
+    return this.getCachedItem(itemIndex, itemIndex, item, itemIndex === focusIndex && !disableSelect, this.getItemSelected(itemIndex, selectedRanges), renderItem, style, disableSelect);
+  }
+
+  render() {
+    var {
+      items,
+      itemCount,
+      overscanCount,
+      renderItem,
+      rowHeight
+    } = this.props;
+    var {
+      selectedRanges
+    } = this.state;
+    return /*#__PURE__*/React.createElement(AutoSizer, {
+      className: "item-list-auto-sizer",
+      onResize: this.handleResize
+    }, (_ref9) => {
+      var {
+        width,
+        height
+      } = _ref9;
+      return /*#__PURE__*/React.createElement(List, {
+        className: "item-list-scroll-pane",
+        height: height,
+        width: width,
+        itemCount: itemCount,
+        itemSize: rowHeight // This prop isn't actually used by us, it is passed to the render function by react-window
+        // Used here to force a re-render of the List component.
+        // Otherwise it doesn't know to call the render again when selection or renderItem changes
+        ,
+        itemData: this.getItemData(items, selectedRanges, renderItem),
+        onScroll: this.handleScroll,
+        onItemsRendered: this.handleItemsRendered,
+        ref: this.list,
+        outerElementType: this.getOuterElement(this.handleKeyDown),
+        outerRef: this.listContainer,
+        innerElementType: this.getInnerElement(),
+        overscanCount: overscanCount
+      }, this.renderInnerElement);
+    });
+  }
+
+}
 
 _defineProperty(ItemList, "CACHE_SIZE", 1000);
 
@@ -734,19 +725,25 @@ _defineProperty(ItemList, "defaultProps", {
   offset: 0,
   items: [],
   rowHeight: ItemList.DEFAULT_ROW_HEIGHT,
+  isDeselectOnClick: true,
   isDoubleClickSelect: false,
   isDragSelect: true,
   isMultiSelect: false,
   isStickyBottom: false,
   disableSelect: false,
-  onFocusChange: function onFocusChange() {// no-op
+
+  onFocusChange() {// no-op
   },
-  onSelect: function onSelect() {// no-op
+
+  onSelect() {// no-op
   },
-  onSelectionChange: function onSelectionChange() {// no-op
+
+  onSelectionChange() {// no-op
   },
-  onViewportChange: function onViewportChange() {// no-op
+
+  onViewportChange() {// no-op
   },
+
   overscanCount: ItemList.DEFAULT_OVERSCAN,
   renderItem: ItemList.renderItem,
   selectedRanges: [],