@deephaven/components 0.43.0 → 0.44.1-beta.0

package/dist/DraggableItemList.js

@@ -0,0 +1,268 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import memoize from 'memoizee';
+import { Draggable, Droppable } from 'react-beautiful-dnd';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { vsGripper } from '@deephaven/icons';
+import { RangeUtils } from '@deephaven/utils';
+import ItemList from "./ItemList.js";
+import { Tooltip } from "./popper/index.js";
+import "./DraggableItemList.css";
+/**
+ * Show a draggable item list. It _must_ be used within a `DragDropContext`.
+ * This implementation uses react-beautiful-dnd for handling dragging and dropping of items.
+ * We use ItemList to handle selection for multi drag and drop (not built in to react-beautiful-dnd).
+ * One caveat with the use of react-beautiful-dnd is that it doesn't allow a drag to be initiated while
+ * using a modifier key: https://github.com/atlassian/react-beautiful-dnd/issues/1678
+ */
+class DraggableItemList extends PureComponent {
+  static renderHandle() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, null, "Drag to re-order"), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: vsGripper
+    }));
+  }
+  static renderBadge(_ref) {
+    var {
+      text
+    } = _ref;
+    return text != null && text.length > 0 ? /*#__PURE__*/React.createElement("span", {
+      className: "number-badge"
+    }, text) : null;
+  }
+  static renderTextItem(_ref2) {
+    var {
+      text,
+      badgeText = '',
+      className = ''
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('item-list-item-content', 'draggable-item-list-item-content', className)
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "title"
+    }, text), DraggableItemList.renderBadge({
+      text: badgeText
+    }), DraggableItemList.renderHandle());
+  }
+  static renderItem(_ref3) {
+    var _ref4, _item$displayValue;
+    var {
+      item,
+      isClone,
+      selectedCount
+    } = _ref3;
+    var text = item != null ? (_ref4 = (_item$displayValue = item.displayValue) !== null && _item$displayValue !== void 0 ? _item$displayValue : item.value) !== null && _ref4 !== void 0 ? _ref4 : "".concat(item) : '';
+    var badgeText = isClone !== undefined && isClone ? "".concat(selectedCount) : '';
+    var className = isClone !== undefined && isClone ? 'item-list-item-clone' : '';
+    return DraggableItemList.renderTextItem({
+      text,
+      badgeText,
+      className
+    });
+  }
+  static getDraggableId(draggablePrefix, itemIndex) {
+    return "".concat(draggablePrefix, "/").concat(itemIndex);
+  }
+  static getDraggableIndex(draggableId) {
+    var num = draggableId.split('/').pop();
+    return parseInt(num !== undefined ? num : '', 10);
+  }
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "itemList", void 0);
+    _defineProperty(this, "getCachedDraggableItem", memoize((draggablePrefix, renderItem, item, itemIndex, isFocused, isSelected, isDragDisabled, style) => /*#__PURE__*/React.createElement(Draggable, {
+      key: itemIndex,
+      draggableId: DraggableItemList.getDraggableId(draggablePrefix, itemIndex),
+      index: itemIndex,
+      isDragDisabled: isDragDisabled
+    }, provided => /*#__PURE__*/React.createElement("div", _extends({
+      role: "menuitem",
+      className: "draggable-item-list-item",
+      ref: provided.innerRef,
+      tabIndex: -1
+      // eslint-disable-next-line react/jsx-props-no-spreading
+    }, provided.draggableProps, provided.dragHandleProps), renderItem({
+      item,
+      itemIndex,
+      isFocused,
+      isSelected,
+      style,
+      isClone: false
+    }))), {
+      max: ItemList.CACHE_SIZE
+    }));
+    _defineProperty(this, "getCachedRenderDraggableItem", memoize((draggablePrefix, isDragDisabled, renderItem) => _ref5 => {
+      var {
+        item,
+        itemIndex,
+        isFocused,
+        isSelected,
+        style
+      } = _ref5;
+      return this.getCachedDraggableItem(draggablePrefix, renderItem, item, itemIndex, isFocused, isSelected, isDragDisabled, style);
+    }, {
+      max: 1
+    }));
+    _defineProperty(this, "getCachedRenderClone", memoize((draggingItemClassName, items, offset, renderItem) => (provided, snapshot, rubric) => {
+      // eslint-disable-next-line react/no-this-in-sfc
+      var {
+        selectedCount
+      } = this.state;
+      var {
+        draggableProps,
+        dragHandleProps,
+        innerRef
+      } = provided;
+      var {
+        index: itemIndex
+      } = rubric.source;
+      var item = items[itemIndex - offset];
+      return /*#__PURE__*/React.createElement("div", _extends({
+        className: classNames('draggable-item-list-dragging-item-container', draggingItemClassName)
+        // eslint-disable-next-line react/jsx-props-no-spreading
+      }, draggableProps, dragHandleProps, {
+        ref: innerRef
+      }), /*#__PURE__*/React.createElement("div", {
+        className: classNames('draggable-item-list-dragging-item', {
+          'two-dragged': selectedCount === 2
+        }, {
+          'multiple-dragged': selectedCount > 2
+        })
+      }, renderItem({
+        item,
+        itemIndex,
+        isFocused: false,
+        isSelected: true,
+        style: {},
+        isClone: true,
+        selectedCount
+      })));
+    }, {
+      max: 1
+    }));
+    this.handleSelectionChange = this.handleSelectionChange.bind(this);
+    this.itemList = /*#__PURE__*/React.createRef();
+    this.state = {
+      selectedCount: 0
+    };
+  }
+  selectItem(itemIndex) {
+    var _this$itemList$curren;
+    (_this$itemList$curren = this.itemList.current) === null || _this$itemList$curren === void 0 ? void 0 : _this$itemList$curren.selectItem(itemIndex);
+  }
+  focusItem(itemIndex) {
+    var _this$itemList$curren2;
+    (_this$itemList$curren2 = this.itemList.current) === null || _this$itemList$curren2 === void 0 ? void 0 : _this$itemList$curren2.focusItem(itemIndex);
+  }
+  scrollToItem(itemIndex) {
+    var _this$itemList$curren3;
+    (_this$itemList$curren3 = this.itemList.current) === null || _this$itemList$curren3 === void 0 ? void 0 : _this$itemList$curren3.scrollToItem(itemIndex);
+  }
+  handleSelectionChange(selectedRanges) {
+    this.setState({
+      selectedCount: RangeUtils.count(selectedRanges)
+    });
+    var {
+      onSelectionChange
+    } = this.props;
+    onSelectionChange(selectedRanges);
+  }
+  render() {
+    var {
+      className,
+      draggablePrefix,
+      draggingItemClassName,
+      droppableId,
+      isDoubleClickSelect,
+      isDragDisabled,
+      isDropDisabled,
+      isMultiSelect,
+      isStickyBottom,
+      itemCount,
+      items,
+      offset,
+      onFocusChange,
+      onSelect,
+      onViewportChange,
+      renderItem,
+      rowHeight,
+      selectedRanges,
+      style,
+      'data-testid': dataTestId
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Droppable, {
+      isDropDisabled: isDropDisabled,
+      droppableId: droppableId,
+      mode: "virtual",
+      renderClone: this.getCachedRenderClone(draggingItemClassName, items, offset, renderItem),
+      "data-testid": dataTestId
+    }, (provided, snapshot) => /*#__PURE__*/React.createElement("div", _extends({
+      role: "menu",
+      className: classNames('draggable-item-list', className, {
+        'is-drop-disabled': isDropDisabled,
+        'is-drag-disabled': isDragDisabled,
+        'is-dragging-from-this': snapshot.draggingFromThisWith,
+        'is-dragging-over': snapshot.isDraggingOver,
+        'is-dropping': snapshot.draggingOverWith
+      }),
+      style: style,
+      ref: provided.innerRef
+      // eslint-disable-next-line react/jsx-props-no-spreading
+    }, provided.droppableProps), /*#__PURE__*/React.createElement(ItemList, {
+      focusSelector: ".draggable-item-list-item",
+      isDoubleClickSelect: isDoubleClickSelect,
+      isDragSelect: false,
+      isMultiSelect: isMultiSelect,
+      isStickyBottom: isStickyBottom,
+      itemCount: itemCount,
+      items: items,
+      onFocusChange: onFocusChange,
+      onSelect: onSelect,
+      onSelectionChange: this.handleSelectionChange,
+      onViewportChange: onViewportChange,
+      offset: offset,
+      ref: this.itemList,
+      renderItem: this.getCachedRenderDraggableItem(draggablePrefix, isDragDisabled, renderItem),
+      rowHeight: rowHeight,
+      selectedRanges: selectedRanges
+    })));
+  }
+}
+_defineProperty(DraggableItemList, "DEFAULT_ROW_HEIGHT", 30);
+_defineProperty(DraggableItemList, "defaultProps", {
+  className: '',
+  draggingItemClassName: '',
+  offset: 0,
+  items: [],
+  rowHeight: DraggableItemList.DEFAULT_ROW_HEIGHT,
+  isDeselectOnClick: true,
+  isDoubleClickSelect: true,
+  isDropDisabled: false,
+  isDragDisabled: false,
+  isMultiSelect: false,
+  isStickyBottom: false,
+  disableSelect: false,
+  style: null,
+  onFocusChange() {
+    // no-op
+  },
+  onSelect() {
+    // no-op
+  },
+  onSelectionChange() {
+    // no-op
+  },
+  onViewportChange() {
+    // no-op
+  },
+  renderItem: DraggableItemList.renderItem,
+  selectedRanges: [],
+  draggablePrefix: 'draggable-item',
+  droppableId: 'droppable-item-list',
+  'data-testid': undefined
+});
+export default DraggableItemList;
+//# sourceMappingURL=DraggableItemList.js.map

package/dist/DraggableItemList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableItemList.js","names":["React","PureComponent","classNames","memoize","Draggable","Droppable","FontAwesomeIcon","vsGripper","RangeUtils","ItemList","Tooltip","DraggableItemList","renderHandle","renderBadge","text","length","renderTextItem","badgeText","className","renderItem","item","isClone","selectedCount","displayValue","value","undefined","getDraggableId","draggablePrefix","itemIndex","getDraggableIndex","draggableId","num","split","pop","parseInt","constructor","props","isFocused","isSelected","isDragDisabled","style","provided","innerRef","draggableProps","dragHandleProps","max","CACHE_SIZE","getCachedDraggableItem","draggingItemClassName","items","offset","snapshot","rubric","state","index","source","handleSelectionChange","bind","itemList","createRef","selectItem","current","focusItem","scrollToItem","selectedRanges","setState","count","onSelectionChange","render","droppableId","isDoubleClickSelect","isDropDisabled","isMultiSelect","isStickyBottom","itemCount","onFocusChange","onSelect","onViewportChange","rowHeight","dataTestId","getCachedRenderClone","draggingFromThisWith","isDraggingOver","draggingOverWith","droppableProps","getCachedRenderDraggableItem","DEFAULT_ROW_HEIGHT","isDeselectOnClick","disableSelect"],"sources":["../src/DraggableItemList.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport classNames from 'classnames';\nimport memoize from 'memoizee';\nimport { Draggable, Droppable, DraggableChildrenFn } from 'react-beautiful-dnd';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsGripper } from '@deephaven/icons';\nimport { RangeUtils, Range } from '@deephaven/utils';\nimport ItemList, {\n  RenderItemProps,\n  DefaultListItem,\n  ItemListProps,\n} from './ItemList';\nimport { Tooltip } from './popper';\nimport './DraggableItemList.scss';\n\nexport type DraggableRenderItemProps<T> = RenderItemProps<T> & {\n  isClone?: boolean;\n  selectedCount?: number;\n};\n\ntype DraggableRenderItemFn<T> = (\n  props: DraggableRenderItemProps<T>\n) => React.ReactNode;\n\ntype DraggableItemListProps<T> = Omit<\n  ItemListProps<T>,\n  'overscanCount' | 'focusSelector' | 'isDragSelect'\n> & {\n  className: string;\n  draggingItemClassName: string;\n  isDropDisabled: boolean;\n  // Whether to allow dragging items from this list\n  isDragDisabled: boolean;\n\n  renderItem: DraggableRenderItemFn<T>;\n  style: React.CSSProperties;\n\n  // The prefix to add to all draggable item IDs\n  draggablePrefix: string;\n  // The ID to give the droppable list\n  droppableId: string;\n\n  'data-testid'?: string;\n};\n\ntype DraggableItemListState = {\n  selectedCount: number;\n};\n\n/**\n * Show a draggable item list. It _must_ be used within a `DragDropContext`.\n * This implementation uses react-beautiful-dnd for handling dragging and dropping of items.\n * We use ItemList to handle selection for multi drag and drop (not built in to react-beautiful-dnd).\n * One caveat with the use of react-beautiful-dnd is that it doesn't allow a drag to be initiated while\n * using a modifier key: https://github.com/atlassian/react-beautiful-dnd/issues/1678\n */\nclass DraggableItemList<T> extends PureComponent<\n  DraggableItemListProps<T>,\n  DraggableItemListState\n> {\n  static DEFAULT_ROW_HEIGHT = 30;\n\n  static defaultProps = {\n    className: '',\n    draggingItemClassName: '',\n    offset: 0,\n    items: [],\n    rowHeight: DraggableItemList.DEFAULT_ROW_HEIGHT,\n    isDeselectOnClick: true,\n    isDoubleClickSelect: true,\n    isDropDisabled: false,\n    isDragDisabled: false,\n    isMultiSelect: false,\n    isStickyBottom: false,\n    disableSelect: false,\n    style: null,\n    onFocusChange(): void {\n      // no-op\n    },\n    onSelect(): void {\n      // no-op\n    },\n    onSelectionChange(): void {\n      // no-op\n    },\n    onViewportChange(): void {\n      // no-op\n    },\n    renderItem: DraggableItemList.renderItem,\n    selectedRanges: [],\n    draggablePrefix: 'draggable-item',\n    droppableId: 'droppable-item-list',\n    'data-testid': undefined,\n  };\n\n  static renderHandle(): JSX.Element {\n    return (\n      <div>\n        <Tooltip>Drag to re-order</Tooltip>\n        <FontAwesomeIcon icon={vsGripper} />\n      </div>\n    );\n  }\n\n  static renderBadge({ text }: { text?: string }): React.ReactNode {\n    return text != null && text.length > 0 ? (\n      <span className=\"number-badge\">{text}</span>\n    ) : null;\n  }\n\n  static renderTextItem({\n    text,\n    badgeText = '',\n    className = '',\n  }: {\n    text?: string;\n    badgeText?: string;\n    className: string;\n  }): JSX.Element {\n    return (\n      <div\n        className={classNames(\n          'item-list-item-content',\n          'draggable-item-list-item-content',\n          className\n        )}\n      >\n        <span className=\"title\">{text}</span>\n        {DraggableItemList.renderBadge({ text: badgeText })}\n        {DraggableItemList.renderHandle()}\n      </div>\n    );\n  }\n\n  static renderItem<P extends DefaultListItem>({\n    item,\n    isClone,\n    selectedCount,\n  }: DraggableRenderItemProps<P>): JSX.Element {\n    const text =\n      item != null ? item.displayValue ?? item.value ?? `${item}` : '';\n    const badgeText =\n      isClone !== undefined && isClone ? `${selectedCount}` : '';\n    const className =\n      isClone !== undefined && isClone ? 'item-list-item-clone' : '';\n    return DraggableItemList.renderTextItem({ text, badgeText, className });\n  }\n\n  static getDraggableId(draggablePrefix: string, itemIndex: number): string {\n    return `${draggablePrefix}/${itemIndex}`;\n  }\n\n  static getDraggableIndex(draggableId: string): number {\n    const num = draggableId.split('/').pop();\n    return parseInt(num !== undefined ? num : '', 10);\n  }\n\n  constructor(props: DraggableItemListProps<T>) {\n    super(props);\n\n    this.handleSelectionChange = this.handleSelectionChange.bind(this);\n\n    this.itemList = React.createRef();\n\n    this.state = {\n      selectedCount: 0,\n    };\n  }\n\n  itemList: React.RefObject<ItemList<T>>;\n\n  selectItem(itemIndex: number): void {\n    this.itemList.current?.selectItem(itemIndex);\n  }\n\n  focusItem(itemIndex: number): void {\n    this.itemList.current?.focusItem(itemIndex);\n  }\n\n  scrollToItem(itemIndex: number): void {\n    this.itemList.current?.scrollToItem(itemIndex);\n  }\n\n  getCachedDraggableItem = memoize(\n    (\n      draggablePrefix: string,\n      renderItem: DraggableRenderItemFn<T>,\n      item: T,\n      itemIndex: number,\n      isFocused: boolean,\n      isSelected: boolean,\n      isDragDisabled: boolean,\n      style: React.CSSProperties\n    ) => (\n      <Draggable\n        key={itemIndex}\n        draggableId={DraggableItemList.getDraggableId(\n          draggablePrefix,\n          itemIndex\n        )}\n        index={itemIndex}\n        isDragDisabled={isDragDisabled}\n      >\n        {provided => (\n          <div\n            role=\"menuitem\"\n            className=\"draggable-item-list-item\"\n            ref={provided.innerRef}\n            tabIndex={-1}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...provided.draggableProps}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...provided.dragHandleProps}\n          >\n            {renderItem({\n              item,\n              itemIndex,\n              isFocused,\n              isSelected,\n              style,\n              isClone: false,\n            })}\n          </div>\n        )}\n      </Draggable>\n    ),\n    { max: ItemList.CACHE_SIZE }\n  );\n\n  handleSelectionChange(selectedRanges: Range[]): void {\n    this.setState({ selectedCount: RangeUtils.count(selectedRanges) });\n\n    const { onSelectionChange } = this.props;\n    onSelectionChange(selectedRanges);\n  }\n\n  getCachedRenderDraggableItem = memoize(\n    (\n      draggablePrefix: string,\n      isDragDisabled: boolean,\n      renderItem: DraggableRenderItemFn<T>\n    ) => ({\n      item,\n      itemIndex,\n      isFocused,\n      isSelected,\n      style,\n    }: RenderItemProps<T>) =>\n      this.getCachedDraggableItem(\n        draggablePrefix,\n        renderItem,\n        item,\n        itemIndex,\n        isFocused,\n        isSelected,\n        isDragDisabled,\n        style\n      ),\n    { max: 1 }\n  );\n\n  getCachedRenderClone = memoize(\n    (\n      draggingItemClassName: string,\n      items: readonly T[],\n      offset: number,\n      renderItem: DraggableRenderItemFn<T>\n      // eslint-disable-next-line react/no-unstable-nested-components, react/display-name, react/function-component-definition\n    ): DraggableChildrenFn => (provided, snapshot, rubric) => {\n      // eslint-disable-next-line react/no-this-in-sfc\n      const { selectedCount } = this.state;\n      const { draggableProps, dragHandleProps, innerRef } = provided;\n      const { index: itemIndex } = rubric.source;\n      const item = items[itemIndex - offset];\n      return (\n        <div\n          className={classNames(\n            'draggable-item-list-dragging-item-container',\n            draggingItemClassName\n          )}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...draggableProps}\n          // eslint-disable-next-line react/jsx-props-no-spreading\n          {...dragHandleProps}\n          ref={innerRef}\n        >\n          <div\n            className={classNames(\n              'draggable-item-list-dragging-item',\n              { 'two-dragged': selectedCount === 2 },\n              { 'multiple-dragged': selectedCount > 2 }\n            )}\n          >\n            {renderItem({\n              item,\n              itemIndex,\n              isFocused: false,\n              isSelected: true,\n              style: {},\n              isClone: true,\n              selectedCount,\n            })}\n          </div>\n        </div>\n      );\n    },\n    { max: 1 }\n  );\n\n  render(): JSX.Element {\n    const {\n      className,\n      draggablePrefix,\n      draggingItemClassName,\n      droppableId,\n      isDoubleClickSelect,\n      isDragDisabled,\n      isDropDisabled,\n      isMultiSelect,\n      isStickyBottom,\n      itemCount,\n      items,\n      offset,\n      onFocusChange,\n      onSelect,\n      onViewportChange,\n      renderItem,\n      rowHeight,\n      selectedRanges,\n      style,\n      'data-testid': dataTestId,\n    } = this.props;\n    return (\n      <Droppable\n        isDropDisabled={isDropDisabled}\n        droppableId={droppableId}\n        mode=\"virtual\"\n        renderClone={this.getCachedRenderClone(\n          draggingItemClassName,\n          items,\n          offset,\n          renderItem\n        )}\n        data-testid={dataTestId}\n      >\n        {(provided, snapshot) => (\n          <div\n            role=\"menu\"\n            className={classNames('draggable-item-list', className, {\n              'is-drop-disabled': isDropDisabled,\n              'is-drag-disabled': isDragDisabled,\n              'is-dragging-from-this': snapshot.draggingFromThisWith,\n              'is-dragging-over': snapshot.isDraggingOver,\n              'is-dropping': snapshot.draggingOverWith,\n            })}\n            style={style}\n            ref={provided.innerRef}\n            // eslint-disable-next-line react/jsx-props-no-spreading\n            {...provided.droppableProps}\n          >\n            <ItemList\n              focusSelector=\".draggable-item-list-item\"\n              isDoubleClickSelect={isDoubleClickSelect}\n              isDragSelect={false}\n              isMultiSelect={isMultiSelect}\n              isStickyBottom={isStickyBottom}\n              itemCount={itemCount}\n              items={items}\n              onFocusChange={onFocusChange}\n              onSelect={onSelect}\n              onSelectionChange={this.handleSelectionChange}\n              onViewportChange={onViewportChange}\n              offset={offset}\n              ref={this.itemList}\n              renderItem={this.getCachedRenderDraggableItem(\n                draggablePrefix,\n                isDragDisabled,\n                renderItem\n              )}\n              rowHeight={rowHeight}\n              selectedRanges={selectedRanges}\n            />\n          </div>\n        )}\n      </Droppable>\n    );\n  }\n}\n\nexport default DraggableItemList;\n"],"mappings":"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"}

package/dist/EditableItemList.js

@@ -0,0 +1,105 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import clamp from 'lodash.clamp';
+import { vsAdd, vsTrash } from '@deephaven/icons';
+import { RangeUtils } from '@deephaven/utils';
+import { Button, ItemList } from "./index.js";
+// Display a list of items with an input for adding new items, and Add/Delete buttons
+function EditableItemList(props) {
+  var {
+    isInvalid = false,
+    items,
+    onAdd = () => undefined,
+    onDelete = () => undefined,
+    validate = () => null
+  } = props;
+  var [inputError, setInputError] = useState(null);
+  var [selectedRanges, setSelectedRanges] = useState([]);
+  var [value, setValue] = useState('');
+  var handleSelectionChange = useCallback(ranges => {
+    setSelectedRanges(ranges);
+  }, []);
+  var handleDelete = useCallback(() => {
+    onDelete(RangeUtils.getItemsInRanges(items, selectedRanges));
+    setSelectedRanges([]);
+  }, [items, selectedRanges, onDelete]);
+  var handleAdd = useCallback(() => {
+    if (value === '') {
+      return;
+    }
+    var validationError = validate(value);
+    if (validationError == null) {
+      onAdd(value);
+      setValue('');
+    } else {
+      setInputError(validationError);
+    }
+  }, [value, onAdd, validate]);
+  var handleInputChange = useCallback(event => {
+    var {
+      value: inputValue
+    } = event.target;
+    setValue(inputValue);
+    setInputError(inputValue === '' ? null : validate(inputValue));
+  }, [validate]);
+  var handleInputFocus = useCallback(() => {
+    setSelectedRanges([]);
+  }, []);
+  var handleInputKeyDown = useCallback(event => {
+    if (event.key === 'Enter') {
+      handleAdd();
+    }
+  }, [handleAdd]);
+  var containerHeight = useMemo(() => 14 + clamp(items.length, 1, 6) * ItemList.DEFAULT_ROW_HEIGHT, [items.length]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('editable-item-list-container', {
+      'is-invalid': isInvalid
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: containerHeight
+    }
+  }, /*#__PURE__*/React.createElement(ItemList, {
+    itemCount: items.length,
+    items: items.map((item, index) => ({
+      value: item,
+      isSelected: RangeUtils.isSelected(selectedRanges, index)
+    })),
+    offset: 0,
+    selectedRanges: selectedRanges,
+    onSelectionChange: handleSelectionChange,
+    isMultiSelect: true
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex flex-row pt-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex flex-grow-1"
+  }, /*#__PURE__*/React.createElement("input", {
+    className: classNames('form-control', {
+      'is-invalid': inputError != null
+    }),
+    placeholder: "Enter value",
+    type: "text",
+    value: value,
+    onChange: handleInputChange,
+    onFocus: handleInputFocus,
+    onKeyDown: handleInputKeyDown
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-start mt-1 ml-2"
+  }, /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    onClick: handleAdd,
+    disabled: inputError != null || value === '',
+    icon: vsAdd,
+    tooltip: "Add new item",
+    "data-testid": "add-item-button"
+  }), /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    onClick: handleDelete,
+    disabled: selectedRanges.length === 0,
+    icon: vsTrash,
+    tooltip: "Delete selected items",
+    "data-testid": "delete-item-button"
+  }))));
+}
+export default EditableItemList;
+//# sourceMappingURL=EditableItemList.js.map

package/dist/EditableItemList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableItemList.js","names":["React","useCallback","useMemo","useState","classNames","clamp","vsAdd","vsTrash","RangeUtils","Button","ItemList","EditableItemList","props","isInvalid","items","onAdd","undefined","onDelete","validate","inputError","setInputError","selectedRanges","setSelectedRanges","value","setValue","handleSelectionChange","ranges","handleDelete","getItemsInRanges","handleAdd","validationError","handleInputChange","event","inputValue","target","handleInputFocus","handleInputKeyDown","key","containerHeight","length","DEFAULT_ROW_HEIGHT","height","map","item","index","isSelected"],"sources":["../src/EditableItemList.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\nimport classNames from 'classnames';\nimport clamp from 'lodash.clamp';\nimport { vsAdd, vsTrash } from '@deephaven/icons';\nimport { Range, RangeUtils } from '@deephaven/utils';\nimport { Button, ItemList } from '.';\n\nexport interface EditableItemListProps {\n  isInvalid?: boolean;\n  items: string[];\n  onDelete: (items: string[]) => void;\n  onAdd: (item: string) => void;\n  validate?: (item: string) => Error | null;\n}\n\n// Display a list of items with an input for adding new items, and Add/Delete buttons\nfunction EditableItemList(props: EditableItemListProps): React.ReactElement {\n  const {\n    isInvalid = false,\n    items,\n    onAdd = () => undefined,\n    onDelete = () => undefined,\n    validate = () => null,\n  } = props;\n  const [inputError, setInputError] = useState<Error | null>(null);\n  const [selectedRanges, setSelectedRanges] = useState<Range[]>([]);\n  const [value, setValue] = useState('');\n\n  const handleSelectionChange = useCallback((ranges: Range[]) => {\n    setSelectedRanges(ranges);\n  }, []);\n\n  const handleDelete = useCallback(() => {\n    onDelete(RangeUtils.getItemsInRanges(items, selectedRanges));\n    setSelectedRanges([]);\n  }, [items, selectedRanges, onDelete]);\n\n  const handleAdd = useCallback(() => {\n    if (value === '') {\n      return;\n    }\n    const validationError = validate(value);\n    if (validationError == null) {\n      onAdd(value);\n      setValue('');\n    } else {\n      setInputError(validationError);\n    }\n  }, [value, onAdd, validate]);\n\n  const handleInputChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const { value: inputValue } = event.target;\n      setValue(inputValue);\n      setInputError(inputValue === '' ? null : validate(inputValue));\n    },\n    [validate]\n  );\n\n  const handleInputFocus = useCallback(() => {\n    setSelectedRanges([]);\n  }, []);\n\n  const handleInputKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Enter') {\n        handleAdd();\n      }\n    },\n    [handleAdd]\n  );\n\n  const containerHeight = useMemo(\n    (): number => 14 + clamp(items.length, 1, 6) * ItemList.DEFAULT_ROW_HEIGHT,\n    [items.length]\n  );\n\n  return (\n    <div\n      className={classNames('editable-item-list-container', {\n        'is-invalid': isInvalid,\n      })}\n    >\n      <div style={{ height: containerHeight }}>\n        <ItemList\n          itemCount={items.length}\n          items={items.map((item, index) => ({\n            value: item,\n            isSelected: RangeUtils.isSelected(selectedRanges, index),\n          }))}\n          offset={0}\n          selectedRanges={selectedRanges}\n          onSelectionChange={handleSelectionChange}\n          isMultiSelect\n        />\n      </div>\n      <div className=\"d-flex flex-row pt-2\">\n        <div className=\"d-flex flex-grow-1\">\n          <input\n            className={classNames('form-control', {\n              'is-invalid': inputError != null,\n            })}\n            placeholder=\"Enter value\"\n            type=\"text\"\n            value={value}\n            onChange={handleInputChange}\n            onFocus={handleInputFocus}\n            onKeyDown={handleInputKeyDown}\n          />\n        </div>\n        <div className=\"d-flex align-items-start mt-1 ml-2\">\n          <Button\n            kind=\"ghost\"\n            onClick={handleAdd}\n            disabled={inputError != null || value === ''}\n            icon={vsAdd}\n            tooltip=\"Add new item\"\n            data-testid=\"add-item-button\"\n          />\n          <Button\n            kind=\"ghost\"\n            onClick={handleDelete}\n            disabled={selectedRanges.length === 0}\n            icon={vsTrash}\n            tooltip=\"Delete selected items\"\n            data-testid=\"delete-item-button\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default EditableItemList;\n"],"mappings":"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"}

package/dist/HierarchicalCheckboxMenu.css

@@ -0,0 +1,30 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.hcm-btn {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-radius: 4px;
+  border: 1px solid #929192;
+  background-color: #555356;
+  padding: 0.375rem 0.75rem;
+}
+.hcm-btn .hcm-icon {
+  margin-top: 0.25rem;
+  color: #929192;
+}
+
+.hcm-btn:focus {
+  border-color: rgba(72, 120, 234, 0.85);
+}
+
+.hcm-menu-container {
+  padding: 0.5rem;
+}
+.hcm-menu-container .hcm-parent {
+  font-weight: bold;
+}
+.hcm-menu-container .hcm-child {
+  margin-left: 1rem;
+}
+
+/*# sourceMappingURL=HierarchicalCheckboxMenu.css.map */

package/dist/HierarchicalCheckboxMenu.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../src/HierarchicalCheckboxMenu.scss","../scss/bootstrap_overrides.scss","../scss/new_variables.scss"],"names":[],"mappings":"AAAA;ACEA;EACE;EACA;EACA;EACA,eCmHc;EDlHd;EACA,kBCeS;EDdT;;AAEA;EACE,YEVO;EFWP,OCQO;;;ADJX;EACE,cCwHyB;;;ADrH3B;EACE,SEnBS;;AFoBT;EACE;;AAEF;EACE,aEvBO","file":"HierarchicalCheckboxMenu.css","sourcesContent":["/* stylelint-disable scss/at-import-no-partial-leading-underscore */\n// Consumers should be able to resolve bootstrap/ to node_modules/bootstrap\n\n//Make bootstrap functions available for use in overrides\n@import 'bootstrap/scss/_functions.scss';\n@import './bootstrap_overrides.scss';\n\n//_variable imports come after bootstrap default overrides,\n// makes all other variables and mixins from bootstrap available\n/// with just importing customer.scss\n@import 'bootstrap/scss/_variables.scss';\n@import 'bootstrap/scss/_mixins.scss';\n\n//New variables come after imports\n@import './new_variables.scss';\n","@import '../scss/custom.scss';\n\n.hcm-btn {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  border-radius: $border-radius;\n  border: $input-border-width solid $input-border-color;\n  background-color: $input-bg;\n  padding: $custom-select-padding-y $custom-select-padding-x;\n\n  .hcm-icon {\n    margin-top: $spacer-1;\n    color: $input-border-color;\n  }\n}\n\n.hcm-btn:focus {\n  border-color: $input-focus-border-color;\n}\n\n.hcm-menu-container {\n  padding: $spacer-2;\n  .hcm-parent {\n    font-weight: bold;\n  }\n  .hcm-child {\n    margin-left: $spacer-3;\n  }\n}\n","// Styling overrides for bootstrap\n\n// Override / set color variables\n$red: #f95d84;\n$orange: #f37e3f;\n$yellow: #fcd65b;\n$green: #9edc6f;\n$blue: #76d9e4;\n$purple: #aa9af4;\n\n//Define some UI colors\n$interfacegray: #2d2a2e;\n$interfaceblue: #4878ea;\n$interfacewhite: #f0f0ee; //same as gray-200\n$interfaceblack: #1a171a;\n\n//Define our Gray scale\n$white: $interfacewhite;\n$gray-100: #fcfcfa;\n$gray-200: $interfacewhite;\n$gray-300: #c0bfbf;\n$gray-400: #929192;\n$gray-500: #5b5a5c;\n$gray-600: #555356;\n$gray-700: #403e41;\n$gray-800: #373438;\n$gray-850: #322f33;\n$gray-900: #211f22;\n$black: $interfaceblack;\n$content-bg: $interfacegray;\n$background: $interfaceblack;\n$foreground: $interfacewhite;\n\n//Load colors into map\n$colors: ();\n$colors: map-merge(\n  (\n    'red': $red,\n    'orange': $orange,\n    'yellow': $yellow,\n    'green': $green,\n    'blue': $blue,\n    'purple': $purple,\n    'white': $white,\n    'black': $black,\n  ),\n  $colors\n);\n\n//Set default colors\n$body-bg: $black;\n$body-color: $interfacewhite;\n\n// Set brand colors\n$primary: $interfaceblue;\n$primary-hover: darken($primary, 8%);\n$primary-dark: mix($primary, $content-bg, 25%);\n$primary-light: scale-color($primary, $lightness: -25%);\n$secondary: $gray-500;\n$secondary-hover: darken($secondary, 8%);\n$success: $green;\n$info: $yellow;\n$warning: $orange;\n$danger: $red;\n$danger-hover: darken($danger, 8%);\n$light: $gray-100;\n$mid: $gray-400; //Added a mid color, useful for input styling\n$dark: $gray-800;\n$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);\n\n$theme-colors: () !default;\n$theme-colors: map-merge(\n  (\n    'primary': $primary,\n    'primary-hover': $primary-hover,\n    'primary-light': $primary-light,\n    'primary-dark': $primary-dark,\n    'secondary': $secondary,\n    'success': $success,\n    'info': $info,\n    'warning': $warning,\n    'danger': $danger,\n    'light': $light,\n    'dark': $dark,\n    'mid': $mid,\n    'content-bg': $interfacegray,\n    'background': $interfaceblack,\n    'foreground': $interfacewhite,\n  ),\n  $theme-colors\n);\n\n$component-active-bg: $primary;\n$theme-color-interval: 9%;\n$yiq-contrasted-threshold: 180;\n\n// Override fonts\n$font-family-sans-serif: 'Fira Sans', -apple-system, blinkmacsystemfont,\n  'Segoe UI', 'Roboto', 'Helvetica Neue', arial, sans-serif; //fira sans then native system ui fallbacks\n$font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',\n  'Courier New', monospace;\n$font-family-base: $font-family-sans-serif;\n\n$headings-font-weight: 400;\n\n//Text overides\n$text-muted: $gray-400;\n\n//Style Selection highlight color\n//so browsers add alpha to your color by default, ignoring opacity 1\n//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied\n$text-select-color: $primary-hover;\n$text-select-color-editor: lighten(\n  $gray-700,\n  15%\n); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.\n\n//Grid variables, same value as default just making easily accessible\n$grid-gutter-width: 30px;\n\n//Visual Overrides\n$border-radius: 4px;\n$box-shadow: 0 0.1rem 1rem rgba($black, 45%); //because our UI is so dark, we need darker default shadows\n$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 45%); //darkest shadow for $black popups over $black UI\n\n//Override Btn\n$btn-border-radius: 4rem;\n$btn-padding-x: 1.5rem;\n$btn-transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out,\n  border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out; //default 0.15 is too long\n$btn-border-width: 2px;\n\n//Override Inputs\n$input-bg: $gray-600;\n$input-disabled-bg: $gray-800;\n$input-color: $foreground;\n$input-border-color: $gray-400;\n$input-placeholder-color: $gray-400;\n$input-focus-border-color: rgba($primary, 85%);\n\n$input-btn-focus-width: 0.2rem;\n$input-btn-focus-color: rgba($component-active-bg, 35%);\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;\n\n//checkbox\n$custom-control-indicator-bg: $gray-600;\n$custom-control-indicator-bg-size: 75% 75%;\n$custom-control-indicator-disabled-bg: $gray-800;\n$custom-control-indicator-checked-disabled-bg: $gray-800;\n$custom-control-label-disabled-color: $gray-400;\n\n//Custom Select\n$custom-select-indicator-color: $gray-400;\n$custom-select-bg-size: 16px 16px;\n//dhSort icon encoded\n$custom-select-indicator: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E\"),\n  '#',\n  '%23'\n);\n$custom-select-focus-box-shadow: $input-btn-focus-box-shadow;\n$custom-select-disabled-color: darken($gray-400, 5%);\n$custom-select-disabled-bg: $gray-800;\n\n//modal\n$modal-content-bg: $gray-200;\n$modal-content-border-width: 0;\n$modal-md: 550px;\n\n// Toast notification\n$toast-bg: $primary-dark;\n$toast-color: $foreground;\n$toast-error-bg: mix($danger, $content-bg, 15%);\n$toast-error-color: $foreground;\n\n//tooltips\n$tooltip-bg: $gray-700;\n$tooltip-color: $foreground;\n$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);\n\n//drowdowns\n$dropdown-bg: $gray-600;\n$dropdown-link-color: $foreground;\n$dropdown-link-hover-color: $foreground;\n$dropdown-link-hover-bg: $primary;\n$dropdown-divider-bg: $gray-700;\n\n//context menus\n$contextmenu-bg: $gray-600;\n$contextmenu-color: $foreground;\n$contextmenu-disabled-color: $text-muted;\n$contextmenu-keyboard-selected-bg: rgba($primary, 50%);\n$contextmenu-selected-bg: $primary;\n$contextmenu-selected-color: $foreground;\n\n//links\n$link-color: $gray-400;\n$link-hover-color: $foreground;\n\n//progress-bar\n$progress-bg: $gray-600;\n$progress-border-radius: 1rem;\n\n// Set global options\n$enable-shadows: false;\n$enable-gradients: false;\n$enable-print-styles: false; //I don't think anyone should expect to \"print\" this app.\n\n// Transition times\n$transition: 0.15s;\n$transition-mid: 0.2s;\n$transition-long: 0.3s;\n$transition-slow: 0.6s;\n\n//form-validation icon, uses vsWarning icon encoded here as svg\n$form-feedback-icon-invalid-color: theme-color('danger');\n$form-feedback-icon-invalid: str-replace(\n  url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='#{$form-feedback-icon-invalid-color}'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E \"),\n  '#',\n  '%23'\n);\n","//Set of spacer variables from the spacer map\n$spacer-0: map-get($spacers, 0); //0\n$spacer-1: map-get($spacers, 1);\n$spacer-2: map-get($spacers, 2);\n$spacer-3: map-get($spacers, 3);\n$spacer-4: map-get($spacers, 4);\n$spacer-5: map-get($spacers, 5);\n\n//Marching Ants for golden layout dropzone and drag and drop\n//top bottom, left right.\n//create 4 background images that are 50% color 1, 50% color 2 using graidents,  two veritical, two horizontal\n//size them to ant-size and thickness\n//position those images along the egdes and make top/bottom repeat-x and left/right repeat-y\n//then offest each of those background positions by ant-size in animation to make them march.\n$ant-size: 8px;\n$ant-thickness: 1px;\n\n@mixin ants-base($color-1: black, $color-2: white) {\n  background-image: linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to right, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%),\n    linear-gradient(to bottom, $color-2 50%, $color-1 50%);\n  background-size: $ant-size $ant-thickness, $ant-size $ant-thickness,\n    $ant-thickness $ant-size, $ant-thickness $ant-size;\n  background-position: 0 top, 0 bottom, left 0, right 0;\n  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;\n  animation: march 0.5s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@mixin drag-stack($pseudo-element) {\n  &::#{$pseudo-element} {\n    content: ' ';\n    background: $primary;\n    box-shadow: $box-shadow;\n    border-radius: $border-radius;\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    @content;\n  }\n}\n\n$focus-bg-transparency: 0.12;\n$hover-bg-transparency: 0.14;\n$active-bg-transparency: 0.28;\n$exception-transparency: 0.13;\n"]}