@deephaven/components 0.43.0 → 0.44.0

package/dist/ItemList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemList.js","names":["React","PureComponent","memoize","FixedSizeList","List","AutoSizer","Log","RangeUtils","ItemListItem","ContextActionUtils","log","module","MIN_DRAG_DELTA","ItemList","renderItem","item","displayValue","value","constructor","props","index","selectedRanges","isSelected","max","CACHE_SIZE","itemIndex","key","isFocused","style","disableSelect","content","handleItemContextMenu","handleItemDoubleClick","handleItemMouseDown","handleItemFocus","handleItemBlur","handleItemMouseMove","handleItemMouseUp","onKeyDown","component","forwardRef","ref","displayName","items","bind","handleItemsRendered","handleWindowMouseUp","handleKeyDown","handleMouseLeave","handleScroll","handleResize","renderInnerElement","list","createRef","listContainer","isStickyBottom","state","focusIndex","mouseDownIndex","overscanStartIndex","height","isDragging","isStuckToBottom","scrollOffset","mouseX","mouseY","componentDidUpdate","prevProps","prevState","propSelectedRanges","itemCount","isListAtBottom","scrollToBottom","sendViewportUpdate","setSelectedRanges","onSelectionChange","onFocusChange","componentWillUnmount","window","removeEventListener","focus","current","restoreScrollPosition","scrollTo","getElement","focusSelector","elements","querySelectorAll","elementIndex","focusItem","setState","element","HTMLElement","scrollToItem","scrollIntoView","block","e","isModifierDown","isModifierKeyDown","toggleSelect","shiftKey","isDoubleClickSelect","onSelect","selectRange","target","indexOf","tagName","toLowerCase","button","length","selectItem","clientX","clientY","addEventListener","debug2","currentTarget","relatedTarget","contains","isDragSelect","isMultiSelect","mouseMoveX","Math","abs","mouseMoveY","getItemSelected","deselectAll","min","isDeselectOnClick","isShiftDown","resetMouseState","oldFocus","newFocus","stopPropagation","preventDefault","lastRange","scrollUpdateWasRequested","isDeselectable","deselectItem","deselectRange","range","validateRange","onViewportChange","rowHeight","topRow","floor","bottomRow","ceil","offset","getCachedItem","render","overscanCount","dataTestId","width","getItemData","getOuterElement","getInnerElement","DEFAULT_ROW_HEIGHT","DEFAULT_OVERSCAN","undefined"],"sources":["../src/ItemList.tsx"],"sourcesContent":["/* eslint-disable react/no-unstable-nested-components */\nimport React, { PureComponent } from 'react';\nimport memoize from 'memoizee';\nimport {\n  FixedSizeList as List,\n  ListOnItemsRenderedProps,\n  ListOnScrollProps,\n} from 'react-window';\nimport AutoSizer, { Size } from 'react-virtualized-auto-sizer';\nimport Log from '@deephaven/log';\nimport { RangeUtils, Range } from '@deephaven/utils';\nimport ItemListItem from './ItemListItem';\nimport { ContextActionUtils } from './context-actions';\nimport './ItemList.scss';\n\nconst log = Log.module('ItemList');\nconst MIN_DRAG_DELTA = 5;\n\nexport interface DefaultListItem {\n  value?: string;\n  displayValue?: string;\n}\n\nexport type RenderItemProps<T> = {\n  item: T;\n  itemIndex: number;\n  isFocused: boolean;\n  isSelected: boolean;\n  style: React.CSSProperties;\n};\n\nexport type RenderItemFn<T> = (props: RenderItemProps<T>) => React.ReactNode;\n\nexport type ItemDragEventHandler = (\n  index: number,\n  event: React.DragEvent<HTMLDivElement>\n) => void;\n\nexport type ItemListProps<T> = {\n  // Total item count\n  itemCount: number;\n  rowHeight: number;\n  // Offset of the top item in the items array\n  offset: number;\n  // Item object format expected by the default renderItem function\n  // Can be anything as long as it's supported by the renderItem\n  // Default renderItem will look for a `displayValue` property, fallback\n  // to the `value` property, or stringify the object if neither are defined\n  items: readonly T[];\n  // Whether clicking a selected item should deselect in the item list or not. Defaults to true\n  isDeselectOnClick: boolean;\n  // Whether selection requires a double click or not\n  isDoubleClickSelect: boolean;\n  // Whether to allow dragging to change the selection after clicking\n  isDragSelect: boolean;\n  // Whether to allow multiple selections in this item list\n  isMultiSelect: boolean;\n  // Set to true if you want the list to scroll when new items are added and it's already at the bottom\n  isStickyBottom: boolean;\n  // Fired when an item gets focused\n  onFocusChange(index: number | null): void;\n\n  // Fired when an item is clicked. With multiple selection, fired on double click.\n  onSelect(index: number, event: React.SyntheticEvent): void;\n  onSelectionChange(ranges: readonly Range[]): void;\n  onViewportChange(topRow: number, bottomRow: number): void;\n  overscanCount: number;\n  selectedRanges: readonly Range[];\n  disableSelect: boolean;\n  renderItem: RenderItemFn<T>;\n  focusSelector: string;\n  'data-testid'?: string;\n};\n\ntype ItemListState = {\n  focusIndex: number | null;\n  mouseDownIndex: number | null;\n  selectedRanges: readonly Range[];\n  overscanStartIndex: number;\n  height: number | null;\n  isDragging: boolean;\n  isStuckToBottom: boolean;\n  scrollOffset: number | null;\n  mouseX: number | null;\n  mouseY: number | null;\n};\n\n/**\n * Show items in a long scrollable list.\n * Can be navigated via keyboard or mouse.\n */\nexport class ItemList<T> extends PureComponent<\n  ItemListProps<T>,\n  ItemListState\n> {\n  static CACHE_SIZE = 1000;\n\n  static DEFAULT_ROW_HEIGHT = 20;\n\n  // By drawing an additional 10 items on each side, tab/keyboard navigation works better (as the next element exists)\n  static DEFAULT_OVERSCAN = 10;\n\n  static defaultProps = {\n    offset: 0,\n    items: [],\n    rowHeight: ItemList.DEFAULT_ROW_HEIGHT,\n\n    isDeselectOnClick: true,\n\n    isDoubleClickSelect: false,\n\n    isDragSelect: true,\n\n    isMultiSelect: false,\n\n    isStickyBottom: false,\n\n    disableSelect: false,\n\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\n    overscanCount: ItemList.DEFAULT_OVERSCAN,\n\n    renderItem: ItemList.renderItem,\n    selectedRanges: [],\n\n    focusSelector: '.item-list-item',\n\n    'data-testid': undefined,\n  };\n\n  static renderItem<P extends DefaultListItem>({\n    item,\n  }: RenderItemProps<P>): JSX.Element {\n    return (\n      <div className=\"item-list-item-content\">\n        {item != null && (item.displayValue ?? item.value ?? `${item}`)}\n      </div>\n    );\n  }\n\n  constructor(props: ItemListProps<T>) {\n    super(props);\n\n    this.handleItemBlur = this.handleItemBlur.bind(this);\n    this.handleItemContextMenu = this.handleItemContextMenu.bind(this);\n    this.handleItemFocus = this.handleItemFocus.bind(this);\n    this.handleItemDoubleClick = this.handleItemDoubleClick.bind(this);\n    this.handleItemMouseDown = this.handleItemMouseDown.bind(this);\n    this.handleItemMouseMove = this.handleItemMouseMove.bind(this);\n    this.handleItemMouseUp = this.handleItemMouseUp.bind(this);\n    this.handleItemsRendered = this.handleItemsRendered.bind(this);\n    this.handleWindowMouseUp = this.handleWindowMouseUp.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleMouseLeave = this.handleMouseLeave.bind(this);\n    this.handleScroll = this.handleScroll.bind(this);\n    this.handleResize = this.handleResize.bind(this);\n    this.renderInnerElement = this.renderInnerElement.bind(this);\n\n    this.list = React.createRef();\n    this.listContainer = React.createRef();\n\n    const { isStickyBottom, selectedRanges } = props;\n\n    this.state = {\n      focusIndex: null,\n      mouseDownIndex: null,\n      selectedRanges,\n      overscanStartIndex: 0,\n      height: null,\n      isDragging: false,\n      isStuckToBottom: isStickyBottom,\n      scrollOffset: null,\n      mouseX: null,\n      mouseY: null,\n    };\n  }\n\n  componentDidUpdate(\n    prevProps: ItemListProps<T>,\n    prevState: ItemListState\n  ): void {\n    const { selectedRanges: propSelectedRanges, itemCount } = this.props;\n    const {\n      focusIndex,\n      isStuckToBottom,\n      scrollOffset,\n      height,\n      selectedRanges,\n    } = this.state;\n    if (isStuckToBottom && !this.isListAtBottom() && itemCount > 0) {\n      this.scrollToBottom();\n    }\n\n    if (\n      scrollOffset !== prevState.scrollOffset ||\n      height !== prevState.height\n    ) {\n      this.sendViewportUpdate();\n    }\n\n    if (\n      propSelectedRanges !== prevProps.selectedRanges &&\n      propSelectedRanges !== selectedRanges\n    ) {\n      this.setSelectedRanges(propSelectedRanges);\n    } else if (selectedRanges !== prevState.selectedRanges) {\n      const { onSelectionChange } = this.props;\n      onSelectionChange(selectedRanges);\n    }\n\n    if (focusIndex !== prevState.focusIndex) {\n      const { onFocusChange } = this.props;\n      onFocusChange(focusIndex);\n    }\n  }\n\n  componentWillUnmount(): void {\n    window.removeEventListener('mouseup', this.handleWindowMouseUp);\n  }\n\n  list: React.RefObject<List>;\n\n  listContainer: React.RefObject<HTMLDivElement>;\n\n  getItemSelected = memoize(\n    (index: number, selectedRanges: readonly Range[]) =>\n      RangeUtils.isSelected(selectedRanges, index),\n    { max: ItemList.CACHE_SIZE }\n  );\n\n  getCachedItem = memoize(\n    (\n      itemIndex: number,\n      key: number,\n      item: T,\n      isFocused: boolean,\n      isSelected: boolean,\n      renderItem: RenderItemFn<T>,\n      style: React.CSSProperties,\n      disableSelect: boolean\n    ) => {\n      const content = renderItem({\n        item,\n        itemIndex,\n        isFocused,\n        isSelected,\n        style,\n      });\n\n      return (\n        <ItemListItem\n          onContextMenu={this.handleItemContextMenu}\n          onDoubleClick={this.handleItemDoubleClick}\n          onMouseDown={this.handleItemMouseDown}\n          onFocus={this.handleItemFocus}\n          onBlur={this.handleItemBlur}\n          disableSelect={disableSelect}\n          onMouseMove={this.handleItemMouseMove}\n          onMouseUp={this.handleItemMouseUp}\n          isFocused={isFocused}\n          isSelected={isSelected}\n          itemIndex={itemIndex}\n          style={style}\n          key={key}\n        >\n          {content}\n        </ItemListItem>\n      );\n    },\n    { max: ItemList.CACHE_SIZE }\n  );\n\n  getOuterElement = memoize((onKeyDown: React.KeyboardEventHandler) => {\n    const component = React.forwardRef<HTMLDivElement>((props, ref) => (\n      // We need to add the tabIndex to make sure it is focusable, otherwise we can't get key events\n      <div\n        ref={ref}\n        tabIndex={-1}\n        onKeyDown={onKeyDown}\n        role=\"presentation\"\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...props}\n      />\n    ));\n    component.displayName = 'ItemListOuterElement';\n    return component;\n  });\n\n  getInnerElement = memoize(() => {\n    const component = React.forwardRef<HTMLDivElement>((props, ref) => (\n      <div\n        className=\"item-list-inner-element\"\n        ref={ref}\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...props}\n      />\n    ));\n    component.displayName = 'ItemListInnerElement';\n    return component;\n  });\n\n  getItemData = memoize(\n    (\n      items: readonly T[],\n      selectedRanges: readonly Range[],\n      renderItem: RenderItemFn<T>\n    ) => ({\n      items,\n      selectedRanges,\n      renderItem,\n    })\n  );\n\n  focus(): void {\n    this.listContainer.current?.focus();\n  }\n\n  restoreScrollPosition(): void {\n    const { scrollOffset } = this.state;\n    if (scrollOffset != null) {\n      // manually restore the scroll containers offset\n      // virtual list doesn't restore scrolloffset in a re-render if it's the same\n      this.listContainer.current?.scrollTo(0, scrollOffset);\n    }\n  }\n\n  getElement(itemIndex: number): Element | null {\n    if (this.listContainer.current == null) {\n      return null;\n    }\n\n    const { focusSelector } = this.props;\n    const { overscanStartIndex } = this.state;\n    const elements = this.listContainer.current.querySelectorAll(focusSelector);\n    const elementIndex = itemIndex - overscanStartIndex;\n    return elements[elementIndex];\n  }\n\n  focusItem(itemIndex: number): void {\n    const { disableSelect } = this.props;\n    if (disableSelect) return;\n\n    this.setState({ focusIndex: itemIndex });\n\n    const element = this.getElement(itemIndex);\n    if (element instanceof HTMLElement) {\n      element.focus();\n    }\n  }\n\n  scrollToItem(itemIndex: number): void {\n    const element = this.getElement(itemIndex);\n    if (element != null) {\n      element.scrollIntoView({ block: 'center' });\n    }\n  }\n\n  handleItemContextMenu(\n    itemIndex: number,\n    e: React.MouseEvent<HTMLDivElement>\n  ): void {\n    // Update the selection, but don't consume the mouse event - it will trigger the context menu\n    const { selectedRanges } = this.state;\n    const isSelected = RangeUtils.isSelected(selectedRanges, itemIndex);\n\n    // 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\n    const isModifierDown =\n      isSelected || ContextActionUtils.isModifierKeyDown(e);\n    this.toggleSelect(itemIndex, e.shiftKey, isModifierDown, false);\n  }\n\n  handleItemDoubleClick(itemIndex: number, e: React.MouseEvent): void {\n    const { isDoubleClickSelect, onSelect } = this.props;\n\n    if (isDoubleClickSelect) {\n      this.setState(\n        ({ selectedRanges }) => ({\n          selectedRanges: RangeUtils.selectRange(selectedRanges, [\n            itemIndex,\n            itemIndex,\n          ]),\n        }),\n        () => {\n          onSelect(itemIndex, e);\n        }\n      );\n    }\n  }\n\n  handleItemMouseDown(index: number, e: React.MouseEvent): void {\n    const { selectedRanges } = this.state;\n\n    if (\n      e.target instanceof HTMLElement &&\n      ['button', 'select', 'input', 'textarea'].indexOf(\n        e.target.tagName.toLowerCase()\n      ) !== -1\n    ) {\n      // allow these elements to do their own behaviours\n      return;\n    }\n\n    if (e.button === 2 && selectedRanges.length === 0) {\n      // allow right click to act as a selection if selection is empty\n      this.focusItem(index);\n      this.selectItem(index);\n      return;\n    }\n\n    if (e.button != null && e.button !== 0) {\n      return;\n    }\n\n    this.setState({\n      mouseDownIndex: index,\n      mouseX: e.clientX,\n      mouseY: e.clientY,\n    });\n\n    window.addEventListener('mouseup', this.handleWindowMouseUp);\n\n    // Leave selection until mouse up, to allow for dragging behaviour\n  }\n\n  handleItemBlur(itemIndex: number, e: React.FocusEvent): void {\n    log.debug2('item blur', itemIndex, e.currentTarget, e.relatedTarget);\n    if (\n      !e.relatedTarget ||\n      (this.listContainer.current &&\n        e.relatedTarget instanceof HTMLElement &&\n        !this.listContainer.current.contains(e.relatedTarget))\n    ) {\n      // Next focused element is outside of the ItemList\n      this.setState({ focusIndex: null });\n    }\n  }\n\n  handleItemFocus(itemIndex: number, e: React.FocusEvent): void {\n    log.debug2('item focus', itemIndex, e.target);\n    this.setState(state => {\n      const { focusIndex } = state;\n      if (focusIndex !== itemIndex) {\n        return { focusIndex: itemIndex };\n      }\n      return null;\n    });\n  }\n\n  handleItemMouseMove(itemIndex: number, e: React.MouseEvent): void {\n    const { isDragSelect, isMultiSelect, disableSelect } = this.props;\n    const { mouseDownIndex, selectedRanges, mouseX, mouseY } = this.state;\n\n    if (mouseDownIndex == null || disableSelect) return;\n\n    const mouseMoveX = Math.abs(e.clientX - (mouseX ?? 0));\n    const mouseMoveY = Math.abs(e.clientY - (mouseY ?? 0));\n    if (mouseMoveX > MIN_DRAG_DELTA && mouseMoveY > MIN_DRAG_DELTA) {\n      this.setState({ isDragging: true });\n    }\n    if (isDragSelect || mouseDownIndex === itemIndex) {\n      this.focusItem(itemIndex);\n\n      if (isMultiSelect) {\n        if (\n          !isDragSelect &&\n          !this.getItemSelected(itemIndex, selectedRanges) &&\n          !ContextActionUtils.isModifierKeyDown(e)\n        ) {\n          // 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\n          this.deselectAll();\n        }\n        this.selectRange([\n          Math.min(mouseDownIndex, itemIndex),\n          Math.max(mouseDownIndex, itemIndex),\n        ]);\n      } else {\n        this.toggleSelect(\n          itemIndex,\n          e.shiftKey,\n          ContextActionUtils.isModifierKeyDown(e),\n          false\n        );\n      }\n    }\n  }\n\n  handleItemMouseUp(index: number, e: React.MouseEvent): void {\n    const { isDeselectOnClick, isDoubleClickSelect, onSelect } = this.props;\n    const { mouseDownIndex, isDragging } = this.state;\n\n    if (\n      e.target instanceof HTMLElement &&\n      ['button', 'select', 'input', 'textarea'].indexOf(\n        e.target.tagName.toLowerCase()\n      ) !== -1\n    ) {\n      return;\n    }\n\n    if (mouseDownIndex === index && !isDragging) {\n      const isShiftDown = e.shiftKey;\n      const isModifierDown = ContextActionUtils.isModifierKeyDown(e);\n      this.focusItem(index);\n      this.toggleSelect(index, isShiftDown, isModifierDown, isDeselectOnClick);\n\n      if (!isDoubleClickSelect && !isShiftDown && !isModifierDown) {\n        onSelect(index, e);\n      }\n    }\n\n    this.resetMouseState();\n  }\n\n  handleItemsRendered({ overscanStartIndex }: ListOnItemsRenderedProps): void {\n    this.setState({ overscanStartIndex });\n  }\n\n  handleResize({ height }: Size): void {\n    this.setState({ height });\n  }\n\n  handleMouseLeave(): void {\n    this.setState({ mouseDownIndex: null });\n  }\n\n  handleWindowMouseUp(): void {\n    this.resetMouseState();\n    window.removeEventListener('mouseup', this.handleWindowMouseUp);\n  }\n\n  handleKeyDown(e: React.KeyboardEvent): void {\n    const { isMultiSelect, itemCount, onSelect } = this.props;\n    const { focusIndex: oldFocus } = this.state;\n    let newFocus = oldFocus;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      if (!isMultiSelect && newFocus != null) {\n        this.setState({ selectedRanges: [[newFocus, newFocus]] }, () => {\n          if (newFocus != null) {\n            onSelect(newFocus, e);\n          }\n        });\n      }\n      return;\n    }\n\n    if (e.key === 'ArrowUp') {\n      if (newFocus != null && newFocus >= 0) {\n        newFocus = Math.max(0, newFocus - 1);\n      } else {\n        newFocus = itemCount - 1;\n      }\n    } else if (e.key === 'ArrowDown') {\n      if (newFocus != null && newFocus >= 0) {\n        newFocus = Math.min(newFocus + 1, itemCount - 1);\n      } else {\n        newFocus = 0;\n      }\n    } else {\n      return;\n    }\n\n    if (oldFocus !== newFocus) {\n      e.stopPropagation();\n      e.preventDefault();\n\n      this.focusItem(newFocus);\n\n      const { selectedRanges } = this.state;\n      if (e.shiftKey && selectedRanges.length > 0) {\n        const lastRange = selectedRanges[selectedRanges.length - 1];\n        this.selectRange([\n          Math.min(newFocus, lastRange[0]),\n          Math.max(newFocus, lastRange[1]),\n        ]);\n      } else {\n        this.deselectAll();\n        if (newFocus !== null) {\n          this.selectItem(newFocus);\n        } else {\n          this.listContainer.current?.focus();\n        }\n      }\n\n      this.scrollIntoView(newFocus);\n    }\n  }\n\n  handleScroll({\n    scrollUpdateWasRequested,\n    scrollOffset,\n  }: ListOnScrollProps): void {\n    this.setState(state => {\n      if (scrollUpdateWasRequested) {\n        // The scroll was caused by scrollTo() or scrollToItem()\n        // Don't re-calc isStuckToBottom\n        return { scrollOffset } as ItemListState;\n      }\n\n      const { isStickyBottom } = this.props;\n      const { height } = state;\n\n      const isStuckToBottom =\n        isStickyBottom && this.isListAtBottom({ scrollOffset, height });\n      return { isStuckToBottom, scrollOffset } as ItemListState;\n    });\n  }\n\n  resetMouseState(): void {\n    this.setState({ mouseDownIndex: null, isDragging: false });\n  }\n\n  scrollToBottom(): void {\n    const { itemCount } = this.props;\n    if (this.list.current) {\n      this.list.current.scrollToItem(itemCount);\n    }\n  }\n\n  scrollIntoView(itemIndex: number): void {\n    if (this.list.current) {\n      this.list.current.scrollToItem(itemIndex);\n    }\n  }\n\n  /**\n   * @param index The index to toggle selection for\n   * @param isShiftDown True if the shift modifier key is down\n   * @param isModifierDown True if the meta modifier key is down\n   * @param isDeselectable True if item should be deselected if already selected\n   */\n  toggleSelect(\n    index: number,\n    isShiftDown: boolean,\n    isModifierDown: boolean,\n    isDeselectable = true\n  ): void {\n    const { isMultiSelect } = this.props;\n    const { selectedRanges } = this.state;\n\n    if (isMultiSelect && isShiftDown && selectedRanges.length > 0) {\n      const lastRange = selectedRanges[selectedRanges.length - 1];\n      this.selectRange([\n        Math.min(lastRange[0], index),\n        Math.max(index, lastRange[1]),\n      ]);\n    } else if (\n      isMultiSelect &&\n      selectedRanges.length === 1 &&\n      selectedRanges[0][0] === index &&\n      selectedRanges[0][1] === index\n    ) {\n      if (isDeselectable) {\n        this.deselectItem(index);\n      }\n    } else if (isMultiSelect && isModifierDown) {\n      if (this.getItemSelected(index, selectedRanges)) {\n        if (isDeselectable) {\n          this.deselectItem(index);\n        }\n      } else {\n        this.selectItem(index);\n      }\n    } else {\n      this.deselectAll();\n      this.selectItem(index);\n    }\n  }\n\n  deselectAll(): void {\n    const { itemCount } = this.props;\n    this.deselectRange([0, itemCount]);\n  }\n\n  deselectItem(index: number): void {\n    this.deselectRange([index, index]);\n  }\n\n  deselectRange(range: Range): void {\n    RangeUtils.validateRange(range);\n\n    this.setState(({ selectedRanges }) => ({\n      selectedRanges: RangeUtils.deselectRange(selectedRanges, range),\n    }));\n  }\n\n  selectItem(index: number): void {\n    const { disableSelect } = this.props;\n    if (disableSelect) return;\n\n    this.selectRange([index, index]);\n  }\n\n  selectRange(range: Range): void {\n    RangeUtils.validateRange(range);\n\n    this.setState(({ selectedRanges }) => ({\n      selectedRanges: RangeUtils.selectRange(selectedRanges, range),\n    }));\n  }\n\n  setSelectedRanges(selectedRanges: readonly Range[]): void {\n    this.setState({ selectedRanges });\n  }\n\n  sendViewportUpdate(): void {\n    const { scrollOffset, height } = this.state;\n    if (scrollOffset != null && height != null) {\n      const { onViewportChange, rowHeight } = this.props;\n      const topRow = Math.floor(scrollOffset / rowHeight);\n      const bottomRow = topRow + Math.ceil(height / rowHeight);\n      onViewportChange(topRow, bottomRow);\n    }\n  }\n\n  isListAtBottom(\n    {\n      scrollOffset,\n      height,\n    }: Pick<ItemListState, 'scrollOffset' | 'height'> = this.state\n  ): boolean {\n    if (height == null || scrollOffset == null) {\n      return false;\n    }\n\n    const { itemCount, rowHeight } = this.props;\n    return scrollOffset + height >= itemCount * rowHeight;\n  }\n\n  renderInnerElement({\n    index: itemIndex,\n    style,\n  }: {\n    index: number;\n    style: React.CSSProperties;\n  }): React.ReactElement | null {\n    const { items, offset, renderItem, disableSelect } = this.props;\n    const { focusIndex, selectedRanges } = this.state;\n    if (itemIndex < offset || itemIndex >= offset + items.length) {\n      return null;\n    }\n\n    const item = items[itemIndex - offset];\n    return this.getCachedItem(\n      itemIndex,\n      itemIndex,\n      item,\n      itemIndex === focusIndex && !disableSelect,\n      this.getItemSelected(itemIndex, selectedRanges),\n      renderItem,\n      style,\n      disableSelect\n    );\n  }\n\n  render(): JSX.Element {\n    const {\n      items,\n      itemCount,\n      overscanCount,\n      renderItem,\n      rowHeight,\n      'data-testid': dataTestId,\n    } = this.props;\n    const { selectedRanges, isStuckToBottom } = this.state;\n    return (\n      <AutoSizer className=\"item-list-auto-sizer\" onResize={this.handleResize}>\n        {({ width, height }) => (\n          <List\n            className=\"item-list-scroll-pane\"\n            height={height}\n            width={width}\n            initialScrollOffset={isStuckToBottom ? itemCount * rowHeight : 0}\n            itemCount={itemCount}\n            itemSize={rowHeight}\n            // This prop isn't actually used by us, it is passed to the render function by react-window\n            // Used here to force a re-render of the List component.\n            // Otherwise it doesn't know to call the render again when selection or renderItem changes\n            itemData={this.getItemData(items, selectedRanges, renderItem)}\n            onScroll={this.handleScroll}\n            onItemsRendered={this.handleItemsRendered}\n            ref={this.list}\n            outerElementType={this.getOuterElement(this.handleKeyDown)}\n            outerRef={this.listContainer}\n            innerElementType={this.getInnerElement()}\n            overscanCount={overscanCount}\n            data-testid={dataTestId}\n          >\n            {this.renderInnerElement}\n          </List>\n        )}\n      </AutoSizer>\n    );\n  }\n}\n\nexport default ItemList;\n"],"mappings":"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"}

package/dist/ItemListItem.css

@@ -0,0 +1,48 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.item-list-item {
+  border: none;
+  border-radius: 0;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 0;
+  white-space: nowrap;
+  text-decoration: none;
+  background-color: transparent;
+  text-align: left;
+  user-select: none;
+}
+
+.item-list-item-content {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  padding: 0 0.75rem;
+  justify-content: space-between;
+  cursor: pointer;
+}
+.item-list-item-content .title {
+  flex-grow: 1;
+}
+
+.item-list-item-content:hover {
+  background-color: #4878ea;
+  color: #f0f0ee;
+}
+
+.item-list-item.is-focused .item-list-item-content {
+  background-color: rgba(72, 120, 234, 0.5);
+  color: #f0f0ee;
+}
+
+.item-list-item.active .item-list-item-content {
+  background-color: #4878ea;
+  color: #f0f0ee;
+}
+
+.item-list-item:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+/*# sourceMappingURL=ItemListItem.css.map */

package/dist/ItemListItem.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../src/ItemListItem.scss","../scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE,kBCtBc;EDuBd,OCtBe;;;AD0Bf;EACE,kBAtC6B;EAuC7B,OC5Ba;;;ADiCf;EACE,kBCnCY;EDoCZ,OCnCa;;;ADuCjB;EACE;EACA","file":"ItemListItem.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$item-list-bg: $secondary;\n$item-list-keyboard-selected-bg: rgba($primary, 0.5);\n$item-list-selected-bg: $primary;\n$item-list-selected-color: $white;\n\n.item-list-item {\n  border: none;\n  border-radius: 0;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  padding: 0;\n  white-space: nowrap;\n  text-decoration: none;\n  background-color: transparent;\n  text-align: left;\n  user-select: none;\n}\n\n.item-list-item-content {\n  display: flex;\n  flex-direction: row;\n  flex-grow: 1;\n  padding: 0 $input-btn-padding-x;\n  justify-content: space-between;\n  cursor: pointer;\n\n  .title {\n    flex-grow: 1;\n  }\n}\n\n.item-list-item-content:hover {\n  background-color: $item-list-selected-bg;\n  color: $item-list-selected-color;\n}\n\n.item-list-item.is-focused {\n  .item-list-item-content {\n    background-color: $item-list-keyboard-selected-bg;\n    color: $item-list-selected-color;\n  }\n}\n\n.item-list-item.active {\n  .item-list-item-content {\n    background-color: $item-list-selected-bg;\n    color: $item-list-selected-color;\n  }\n}\n\n.item-list-item:focus {\n  outline: none;\n  box-shadow: none;\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"]}

package/dist/ItemListItem.js

@@ -0,0 +1,214 @@
+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, { Component } from 'react';
+import classNames from 'classnames';
+import "./ItemListItem.css";
+import Log from '@deephaven/log';
+var log = Log.module('ItemListItem');
+class ItemListItem extends Component {
+  static handleKeyDown() {
+    log.log('ItemListItem.handleKeyDown false');
+    return false;
+  }
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "itemRef", void 0);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleContextMenu = this.handleContextMenu.bind(this);
+    this.handleDragStart = this.handleDragStart.bind(this);
+    this.handleDrag = this.handleDrag.bind(this);
+    this.handleDragOver = this.handleDragOver.bind(this);
+    this.handleDragEnd = this.handleDragEnd.bind(this);
+    this.handleDrop = this.handleDrop.bind(this);
+    this.handleDoubleClick = this.handleDoubleClick.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleMouseUp = this.handleMouseUp.bind(this);
+    this.itemRef = /*#__PURE__*/React.createRef();
+  }
+  handleBlur(e) {
+    var {
+      itemIndex,
+      onBlur
+    } = this.props;
+    onBlur(itemIndex, e);
+  }
+  handleFocus(e) {
+    var {
+      itemIndex,
+      onFocus
+    } = this.props;
+    onFocus(itemIndex, e);
+  }
+  handleClick(e) {
+    var {
+      itemIndex,
+      onClick
+    } = this.props;
+    onClick(itemIndex, e);
+  }
+  handleContextMenu(e) {
+    var {
+      itemIndex,
+      onContextMenu
+    } = this.props;
+    onContextMenu(itemIndex, e);
+  }
+  handleDragStart(e) {
+    var {
+      itemIndex,
+      onDragStart
+    } = this.props;
+    onDragStart(itemIndex, e);
+  }
+  handleDrag(e) {
+    var {
+      itemIndex,
+      onDrag
+    } = this.props;
+    onDrag(itemIndex, e);
+  }
+  handleDragOver(e) {
+    // Have to call preventDefault otherwise onDrop won't get triggered
+    e.preventDefault();
+    var {
+      itemIndex,
+      onDragOver
+    } = this.props;
+    onDragOver(itemIndex, e);
+  }
+  handleDragEnd(e) {
+    var {
+      itemIndex,
+      onDragEnd
+    } = this.props;
+    onDragEnd(itemIndex, e);
+  }
+  handleDrop(e) {
+    var {
+      itemIndex,
+      onDrop
+    } = this.props;
+    onDrop(itemIndex, e);
+  }
+  handleDoubleClick(e) {
+    var {
+      itemIndex,
+      onDoubleClick
+    } = this.props;
+    onDoubleClick(itemIndex, e);
+  }
+  handleMouseMove(e) {
+    var {
+      itemIndex,
+      onMouseMove
+    } = this.props;
+    onMouseMove(itemIndex, e);
+  }
+  handleMouseDown(e) {
+    var {
+      itemIndex,
+      onMouseDown
+    } = this.props;
+    onMouseDown(itemIndex, e);
+  }
+  handleMouseUp(e) {
+    var {
+      itemIndex,
+      onMouseUp
+    } = this.props;
+    onMouseUp(itemIndex, e);
+  }
+  render() {
+    var {
+      isDraggable,
+      isFocused,
+      isSelected,
+      style,
+      children,
+      'data-testid': dataTestId
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('item-list-item', {
+        active: isSelected
+      }, {
+        'is-focused': isFocused
+      }, {
+        'is-draggable': isDraggable
+      }),
+      onKeyDown: ItemListItem.handleKeyDown,
+      onContextMenuCapture: this.handleContextMenu,
+      onClick: this.handleClick,
+      onDrag: this.handleDrag,
+      onDragStart: this.handleDragStart,
+      onDragOver: this.handleDragOver,
+      onDragEnd: this.handleDragEnd,
+      onDrop: this.handleDrop,
+      onDoubleClick: this.handleDoubleClick,
+      onMouseDown: this.handleMouseDown,
+      onMouseMove: this.handleMouseMove,
+      onMouseUp: this.handleMouseUp,
+      tabIndex: -1,
+      ref: this.itemRef,
+      role: "listitem",
+      style: style,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      draggable: isDraggable,
+      "data-testid": dataTestId
+    }, children);
+  }
+}
+_defineProperty(ItemListItem, "defaultProps", {
+  children: null,
+  isDraggable: false,
+  isFocused: false,
+  isSelected: false,
+  itemIndex: 0,
+  'data-testid': undefined,
+  onBlur() {
+    // no-op
+  },
+  onClick() {
+    // no-op
+  },
+  onContextMenu() {
+    // no-op
+  },
+  onDragStart() {
+    // no-op
+  },
+  onDrag() {
+    // no-op
+  },
+  onDragOver() {
+    // no-op
+  },
+  onDragEnd() {
+    // no-op
+  },
+  onDrop() {
+    // no-op
+  },
+  onDoubleClick() {
+    // no-op
+  },
+  onFocus() {
+    // no-op
+  },
+  onMouseDown() {
+    // no-op
+  },
+  onMouseMove() {
+    // no-op
+  },
+  onMouseUp() {
+    // no-op
+  },
+  style: {}
+});
+export default ItemListItem;
+//# sourceMappingURL=ItemListItem.js.map

package/dist/ItemListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemListItem.js","names":["React","Component","classNames","Log","log","module","ItemListItem","handleKeyDown","constructor","props","handleBlur","bind","handleFocus","handleClick","handleContextMenu","handleDragStart","handleDrag","handleDragOver","handleDragEnd","handleDrop","handleDoubleClick","handleMouseDown","handleMouseMove","handleMouseUp","itemRef","createRef","e","itemIndex","onBlur","onFocus","onClick","onContextMenu","onDragStart","onDrag","preventDefault","onDragOver","onDragEnd","onDrop","onDoubleClick","onMouseMove","onMouseDown","onMouseUp","render","isDraggable","isFocused","isSelected","style","children","dataTestId","active","undefined"],"sources":["../src/ItemListItem.tsx"],"sourcesContent":["import React, { Component } from 'react';\nimport classNames from 'classnames';\nimport './ItemListItem.scss';\nimport Log from '@deephaven/log';\n\nconst log = Log.module('ItemListItem');\n\ninterface ItemListItemProps {\n  isDraggable: boolean;\n  isFocused: boolean;\n  isSelected: boolean;\n  itemIndex: number;\n  // eslint-disable-next-line react/no-unused-prop-types\n  disableSelect: boolean;\n  onBlur(index: number, e: React.FocusEvent<HTMLDivElement>): void;\n  onClick(index: number, e: React.MouseEvent<HTMLDivElement>): void;\n  onContextMenu(index: number, e: React.MouseEvent<HTMLDivElement>): void;\n  onDragStart(index: number, e: React.DragEvent<HTMLDivElement>): void;\n  onDrag(index: number, e: React.DragEvent<HTMLDivElement>): void;\n  onDragOver(index: number, e: React.DragEvent<HTMLDivElement>): void;\n  onDragEnd(index: number, e: React.DragEvent<HTMLDivElement>): void;\n  onDrop(index: number, e: React.DragEvent<HTMLDivElement>): void;\n  onDoubleClick(index: number, e: React.MouseEvent<HTMLDivElement>): void;\n  onFocus(index: number, e: React.FocusEvent<HTMLDivElement>): void;\n  onMouseDown(index: number, e: React.MouseEvent<HTMLDivElement>): void;\n  onMouseMove(index: number, e: React.MouseEvent<HTMLDivElement>): void;\n  onMouseUp(index: number, e: React.MouseEvent<HTMLDivElement>): void;\n  style: React.CSSProperties;\n  children: React.ReactNode;\n  'data-testid'?: string;\n}\n\nclass ItemListItem extends Component<ItemListItemProps, Record<string, never>> {\n  static defaultProps = {\n    children: null,\n    isDraggable: false,\n    isFocused: false,\n    isSelected: false,\n    itemIndex: 0,\n    'data-testid': undefined,\n\n    onBlur(): void {\n      // no-op\n    },\n    onClick(): void {\n      // no-op\n    },\n    onContextMenu(): void {\n      // no-op\n    },\n    onDragStart(): void {\n      // no-op\n    },\n    onDrag(): void {\n      // no-op\n    },\n    onDragOver(): void {\n      // no-op\n    },\n    onDragEnd(): void {\n      // no-op\n    },\n    onDrop(): void {\n      // no-op\n    },\n    onDoubleClick(): void {\n      // no-op\n    },\n    onFocus(): void {\n      // no-op\n    },\n    onMouseDown(): void {\n      // no-op\n    },\n    onMouseMove(): void {\n      // no-op\n    },\n    onMouseUp(): void {\n      // no-op\n    },\n    style: {},\n  };\n\n  static handleKeyDown(): boolean {\n    log.log('ItemListItem.handleKeyDown false');\n    return false;\n  }\n\n  constructor(props: ItemListItemProps) {\n    super(props);\n\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleClick = this.handleClick.bind(this);\n    this.handleContextMenu = this.handleContextMenu.bind(this);\n    this.handleDragStart = this.handleDragStart.bind(this);\n    this.handleDrag = this.handleDrag.bind(this);\n    this.handleDragOver = this.handleDragOver.bind(this);\n    this.handleDragEnd = this.handleDragEnd.bind(this);\n    this.handleDrop = this.handleDrop.bind(this);\n    this.handleDoubleClick = this.handleDoubleClick.bind(this);\n    this.handleMouseDown = this.handleMouseDown.bind(this);\n    this.handleMouseMove = this.handleMouseMove.bind(this);\n    this.handleMouseUp = this.handleMouseUp.bind(this);\n\n    this.itemRef = React.createRef();\n  }\n\n  itemRef: React.RefObject<HTMLDivElement>;\n\n  handleBlur(e: React.FocusEvent<HTMLDivElement>): void {\n    const { itemIndex, onBlur } = this.props;\n    onBlur(itemIndex, e);\n  }\n\n  handleFocus(e: React.FocusEvent<HTMLDivElement>): void {\n    const { itemIndex, onFocus } = this.props;\n    onFocus(itemIndex, e);\n  }\n\n  handleClick(e: React.MouseEvent<HTMLDivElement>): void {\n    const { itemIndex, onClick } = this.props;\n    onClick(itemIndex, e);\n  }\n\n  handleContextMenu(e: React.MouseEvent<HTMLDivElement>): void {\n    const { itemIndex, onContextMenu } = this.props;\n    onContextMenu(itemIndex, e);\n  }\n\n  handleDragStart(e: React.DragEvent<HTMLDivElement>): void {\n    const { itemIndex, onDragStart } = this.props;\n    onDragStart(itemIndex, e);\n  }\n\n  handleDrag(e: React.DragEvent<HTMLDivElement>): void {\n    const { itemIndex, onDrag } = this.props;\n    onDrag(itemIndex, e);\n  }\n\n  handleDragOver(e: React.DragEvent<HTMLDivElement>): void {\n    // Have to call preventDefault otherwise onDrop won't get triggered\n    e.preventDefault();\n    const { itemIndex, onDragOver } = this.props;\n    onDragOver(itemIndex, e);\n  }\n\n  handleDragEnd(e: React.DragEvent<HTMLDivElement>): void {\n    const { itemIndex, onDragEnd } = this.props;\n    onDragEnd(itemIndex, e);\n  }\n\n  handleDrop(e: React.DragEvent<HTMLDivElement>): void {\n    const { itemIndex, onDrop } = this.props;\n    onDrop(itemIndex, e);\n  }\n\n  handleDoubleClick(e: React.MouseEvent<HTMLDivElement>): void {\n    const { itemIndex, onDoubleClick } = this.props;\n    onDoubleClick(itemIndex, e);\n  }\n\n  handleMouseMove(e: React.MouseEvent<HTMLDivElement>): void {\n    const { itemIndex, onMouseMove } = this.props;\n    onMouseMove(itemIndex, e);\n  }\n\n  handleMouseDown(e: React.MouseEvent<HTMLDivElement>): void {\n    const { itemIndex, onMouseDown } = this.props;\n    onMouseDown(itemIndex, e);\n  }\n\n  handleMouseUp(e: React.MouseEvent<HTMLDivElement>): void {\n    const { itemIndex, onMouseUp } = this.props;\n    onMouseUp(itemIndex, e);\n  }\n\n  render(): JSX.Element {\n    const {\n      isDraggable,\n      isFocused,\n      isSelected,\n      style,\n      children,\n      'data-testid': dataTestId,\n    } = this.props;\n    return (\n      <div\n        className={classNames(\n          'item-list-item',\n          { active: isSelected },\n          { 'is-focused': isFocused },\n          { 'is-draggable': isDraggable }\n        )}\n        onKeyDown={ItemListItem.handleKeyDown}\n        onContextMenuCapture={this.handleContextMenu}\n        onClick={this.handleClick}\n        onDrag={this.handleDrag}\n        onDragStart={this.handleDragStart}\n        onDragOver={this.handleDragOver}\n        onDragEnd={this.handleDragEnd}\n        onDrop={this.handleDrop}\n        onDoubleClick={this.handleDoubleClick}\n        onMouseDown={this.handleMouseDown}\n        onMouseMove={this.handleMouseMove}\n        onMouseUp={this.handleMouseUp}\n        tabIndex={-1}\n        ref={this.itemRef}\n        role=\"listitem\"\n        style={style}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        draggable={isDraggable}\n        data-testid={dataTestId}\n      >\n        {children}\n      </div>\n    );\n  }\n}\n\nexport default ItemListItem;\n"],"mappings":"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"}

package/dist/LoadingOverlay.css

@@ -0,0 +1,24 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.iris-panel-message-overlay {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  white-space: pre-line;
+  overflow: hidden;
+}
+.iris-panel-message-overlay .message-content {
+  font-size: 1.2rem;
+}
+.iris-panel-message-overlay .message-content .message-icon {
+  font-size: 64px;
+}
+.iris-panel-message-overlay .message-content .message-icon .svg-inline--fa {
+  font-size: inherit;
+}
+
+.iris-panel-scrim-background {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+/*# sourceMappingURL=LoadingOverlay.css.map */

package/dist/LoadingOverlay.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../src/LoadingOverlay.scss"],"names":[],"mappings":"AAAA;ACMA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,WAb2B;;AAc3B;EACE,WAdsB;;AAetB;EACE;;;AAMR;EACE,YAtBoB","file":"LoadingOverlay.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$iris-panel-message-font-size: 1.2rem;\n$iris-panel-icon-font-size: 64px;\n$iris-panel-scrim-bg: rgba(black, 0.1);\n\n.iris-panel-message-overlay {\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  white-space: pre-line;\n  overflow: hidden;\n\n  .message-content {\n    font-size: $iris-panel-message-font-size;\n    .message-icon {\n      font-size: $iris-panel-icon-font-size;\n      .svg-inline--fa {\n        font-size: inherit;\n      }\n    }\n  }\n}\n\n.iris-panel-scrim-background {\n  background: $iris-panel-scrim-bg;\n}\n"]}

package/dist/LoadingOverlay.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { vsWarning } from '@deephaven/icons';
+import ThemeExport from "./ThemeExport.js";
+import LoadingSpinner from "./LoadingSpinner.js";
+import "./LoadingOverlay.css";
+/**
+ * A loading overlay that handles displaying a loading spinner or an error message
+ */
+function LoadingOverlay(_ref) {
+  var {
+    isLoaded = false,
+    isLoading = true,
+    errorMessage = null,
+    'data-testid': dataTestId
+  } = _ref;
+  var messageTestId = dataTestId != null ? "".concat(dataTestId, "-message") : undefined;
+  var spinnerTestId = dataTestId != null ? "".concat(dataTestId, "-spinner") : undefined;
+  return /*#__PURE__*/React.createElement(CSSTransition, {
+    in: Boolean(errorMessage) || !isLoaded || isLoading,
+    timeout: ThemeExport.transitionMs,
+    classNames: isLoaded ? 'fade' : '',
+    mountOnEnter: true,
+    unmountOnExit: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fill-parent-absolute",
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('iris-panel-message-overlay', 'fill-parent-absolute', {
+      'iris-panel-scrim-background': isLoaded
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "message-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "message-icon"
+  }, isLoading && /*#__PURE__*/React.createElement(LoadingSpinner, {
+    "data-testid": spinnerTestId
+  }), !isLoading && errorMessage != null && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: vsWarning
+  })), errorMessage != null && /*#__PURE__*/React.createElement("div", {
+    className: "message-text",
+    "data-testid": messageTestId
+  }, errorMessage)))));
+}
+export default LoadingOverlay;
+//# sourceMappingURL=LoadingOverlay.js.map

package/dist/LoadingOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingOverlay.js","names":["React","CSSTransition","classNames","FontAwesomeIcon","vsWarning","ThemeExport","LoadingSpinner","LoadingOverlay","isLoaded","isLoading","errorMessage","dataTestId","messageTestId","undefined","spinnerTestId","Boolean","transitionMs"],"sources":["../src/LoadingOverlay.tsx"],"sourcesContent":["import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsWarning } from '@deephaven/icons';\nimport ThemeExport from './ThemeExport';\nimport LoadingSpinner from './LoadingSpinner';\nimport './LoadingOverlay.scss';\n\ntype LoadingOverlayProps = {\n  isLoaded?: boolean;\n  isLoading?: boolean;\n  errorMessage?: string | null;\n  'data-testid'?: string;\n};\n\n/**\n * A loading overlay that handles displaying a loading spinner or an error message\n */\nfunction LoadingOverlay({\n  isLoaded = false,\n  isLoading = true,\n  errorMessage = null,\n  'data-testid': dataTestId,\n}: LoadingOverlayProps): JSX.Element {\n  const messageTestId =\n    dataTestId != null ? `${dataTestId}-message` : undefined;\n  const spinnerTestId =\n    dataTestId != null ? `${dataTestId}-spinner` : undefined;\n  return (\n    <CSSTransition\n      in={Boolean(errorMessage) || !isLoaded || isLoading}\n      timeout={ThemeExport.transitionMs}\n      classNames={isLoaded ? 'fade' : ''}\n      mountOnEnter\n      unmountOnExit\n    >\n      <div className=\"fill-parent-absolute\" data-testid={dataTestId}>\n        <div\n          className={classNames(\n            'iris-panel-message-overlay',\n            'fill-parent-absolute',\n            { 'iris-panel-scrim-background': isLoaded }\n          )}\n        >\n          <div className=\"message-content\">\n            <div className=\"message-icon\">\n              {isLoading && <LoadingSpinner data-testid={spinnerTestId} />}\n              {!isLoading && errorMessage != null && (\n                <FontAwesomeIcon icon={vsWarning} />\n              )}\n            </div>\n            {errorMessage != null && (\n              <div className=\"message-text\" data-testid={messageTestId}>\n                {errorMessage}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </CSSTransition>\n  );\n}\n\nexport default LoadingOverlay;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa,QAAQ,wBAAwB;AACtD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,SAAS,QAAQ,kBAAkB;AAAC,OACtCC,WAAW;AAAA,OACXC,cAAc;AAAA;AAUrB;AACA;AACA;AACA,SAASC,cAAc,OAKc;EAAA,IALb;IACtBC,QAAQ,GAAG,KAAK;IAChBC,SAAS,GAAG,IAAI;IAChBC,YAAY,GAAG,IAAI;IACnB,aAAa,EAAEC;EACI,CAAC;EACpB,IAAMC,aAAa,GACjBD,UAAU,IAAI,IAAI,aAAMA,UAAU,gBAAaE,SAAS;EAC1D,IAAMC,aAAa,GACjBH,UAAU,IAAI,IAAI,aAAMA,UAAU,gBAAaE,SAAS;EAC1D,oBACE,oBAAC,aAAa;IACZ,EAAE,EAAEE,OAAO,CAACL,YAAY,CAAC,IAAI,CAACF,QAAQ,IAAIC,SAAU;IACpD,OAAO,EAAEJ,WAAW,CAACW,YAAa;IAClC,UAAU,EAAER,QAAQ,GAAG,MAAM,GAAG,EAAG;IACnC,YAAY;IACZ,aAAa;EAAA,gBAEb;IAAK,SAAS,EAAC,sBAAsB;IAAC,eAAaG;EAAW,gBAC5D;IACE,SAAS,EAAET,UAAU,CACnB,4BAA4B,EAC5B,sBAAsB,EACtB;MAAE,6BAA6B,EAAEM;IAAS,CAAC;EAC3C,gBAEF;IAAK,SAAS,EAAC;EAAiB,gBAC9B;IAAK,SAAS,EAAC;EAAc,GAC1BC,SAAS,iBAAI,oBAAC,cAAc;IAAC,eAAaK;EAAc,EAAG,EAC3D,CAACL,SAAS,IAAIC,YAAY,IAAI,IAAI,iBACjC,oBAAC,eAAe;IAAC,IAAI,EAAEN;EAAU,EAClC,CACG,EACLM,YAAY,IAAI,IAAI,iBACnB;IAAK,SAAS,EAAC,cAAc;IAAC,eAAaE;EAAc,GACtDF,YAAY,CAEhB,CACG,CACF,CACF,CACQ;AAEpB;AAEA,eAAeH,cAAc"}

package/dist/LoadingSpinner.css

@@ -0,0 +1,8 @@
+.loading-spinner-large {
+  font-size: 64px;
+}
+.loading-spinner-large .svg-inline--fa {
+  font-size: inherit;
+}
+
+/*# sourceMappingURL=LoadingSpinner.css.map */

package/dist/LoadingSpinner.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/LoadingSpinner.scss"],"names":[],"mappings":"AAAA;EACE;;AACA;EACE","file":"LoadingSpinner.css","sourcesContent":[".loading-spinner-large {\n  font-size: 64px;\n  .svg-inline--fa {\n    font-size: inherit;\n  }\n}\n"]}

package/dist/LoadingSpinner.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { vsCircleLarge, vsLoading } from '@deephaven/icons';
+import "./LoadingSpinner.css";
+function LoadingSpinner(_ref) {
+  var {
+    className = '',
+    'data-testid': dataTestId
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('loading-spinner fa-layers', className),
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: vsCircleLarge,
+    className: "text-white-50"
+  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: vsLoading,
+    className: "text-primary",
+    spin: true
+  }));
+}
+export default LoadingSpinner;
+//# sourceMappingURL=LoadingSpinner.js.map

package/dist/LoadingSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.js","names":["React","classNames","FontAwesomeIcon","vsCircleLarge","vsLoading","LoadingSpinner","className","dataTestId"],"sources":["../src/LoadingSpinner.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { vsCircleLarge, vsLoading } from '@deephaven/icons';\nimport './LoadingSpinner.scss';\n\ntype LoadingSpinnerProps = {\n  className?: string;\n  'data-testid'?: string;\n};\n\nfunction LoadingSpinner({\n  className = '',\n  'data-testid': dataTestId,\n}: LoadingSpinnerProps): JSX.Element {\n  return (\n    <div\n      className={classNames('loading-spinner fa-layers', className)}\n      data-testid={dataTestId}\n    >\n      <FontAwesomeIcon icon={vsCircleLarge} className=\"text-white-50\" />\n      <FontAwesomeIcon icon={vsLoading} className=\"text-primary\" spin />\n    </div>\n  );\n}\n\nexport default LoadingSpinner;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,aAAa,EAAEC,SAAS,QAAQ,kBAAkB;AAAC;AAQ5D,SAASC,cAAc,OAGc;EAAA,IAHb;IACtBC,SAAS,GAAG,EAAE;IACd,aAAa,EAAEC;EACI,CAAC;EACpB,oBACE;IACE,SAAS,EAAEN,UAAU,CAAC,2BAA2B,EAAEK,SAAS,CAAE;IAC9D,eAAaC;EAAW,gBAExB,oBAAC,eAAe;IAAC,IAAI,EAAEJ,aAAc;IAAC,SAAS,EAAC;EAAe,EAAG,eAClE,oBAAC,eAAe;IAAC,IAAI,EAAEC,SAAU;IAAC,SAAS,EAAC,cAAc;IAAC,IAAI;EAAA,EAAG,CAC9D;AAEV;AAEA,eAAeC,cAAc"}

package/dist/MaskedInput.css

@@ -0,0 +1,7 @@
+/* stylelint-disable scss/at-import-no-partial-leading-underscore */
+.masked-input {
+  font-family: "Fira Sans", -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif;
+  font-variant-numeric: tabular-nums;
+}
+
+/*# sourceMappingURL=MaskedInput.css.map */

package/dist/MaskedInput.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../src/MaskedInput.scss","../scss/bootstrap_overrides.scss"],"names":[],"mappings":"AAAA;ACEA;EACE,aC8FuB;ED7FvB","file":"MaskedInput.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.masked-input {\n  font-family: $font-family-sans-serif;\n  font-variant-numeric: tabular-nums;\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"]}