@deephaven/iris-grid 1.8.1-beta.9 → 1.9.0

package/dist/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.js

@@ -4,14 +4,14 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { memo, PureComponent, useCallback, useEffect, useRef } from 'react';
+import { flushSync } from 'react-dom';
 import classNames from 'classnames';
 import { GridUtils } from '@deephaven/grid';
 import { TextUtils, assertNotNull, DbNameValidator } from '@deephaven/utils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { dhEye, dhEyeSlash, dhSortAlphaDown, dhSortAlphaUp, dhArrowToTop, dhArrowToBottom, vsChevronUp, vsChevronDown, vsSymbolStructure, vsRefresh, vsCircleLargeFilled, vsAdd, vsBlank, vsCheck, vsKebabVertical } from '@deephaven/icons';
 import memoize from 'memoizee';
-import debounce from 'lodash.debounce';
-import { ActionButton, Button, GLOBAL_SHORTCUTS, Icon, Item, Keyboard, MenuTrigger, SearchInput, Section, SpectrumMenu, Text } from '@deephaven/components';
+import { ActionButton, Button, GLOBAL_SHORTCUTS, Icon, Item, Keyboard, MenuTrigger, Section, SpectrumMenu, Text } from '@deephaven/components';
 import clamp from 'lodash.clamp';
 import throttle from 'lodash.throttle';
 import { useUndoRedo } from '@deephaven/react-hooks';
@@ -23,9 +23,10 @@ import { flattenTree, getTreeItems } from "./sortable-tree/utilities.js";
 import SortableTree from "./sortable-tree/SortableTree.js";
 import { moveItemsFromDrop, moveToGroup } from "./VisibilityOrderingBuilderUtils.js";
 import IrisGridUtils from "../../IrisGridUtils.js";
+import SearchWithModal from "./SearchWithModal.js";
+import SortableTreeDndContext from "./sortable-tree/SortableTreeDndContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var log = Log.module('VisibilityOrderingBuilder');
-var DEBOUNCE_SEARCH_COLUMN = 150;
 class VisibilityOrderingBuilderInner extends PureComponent {
   static shouldRenderColumn(column) {
     // We don't want to render the proxy column in the visibility ordering list
@@ -34,9 +35,17 @@ class VisibilityOrderingBuilderInner extends PureComponent {
   constructor(props) {
     super(props);
     _defineProperty(this, "wrapperRef", /*#__PURE__*/React.createRef());
+    /**
+     * Used to track the last focused item index to maintain focus on updates.
+     * Cannot use name because it may change or be deleted when undoing or redoing.
+     */
     _defineProperty(this, "lastFocusedItemIndex", null);
     _defineProperty(this, "list", void 0);
-    _defineProperty(this, "debouncedSearchColumns", debounce(this.searchColumns, DEBOUNCE_SEARCH_COLUMN));
+    /**
+     * This is set by the search modal handlers since a column could be hidden
+     * and not displayed in the list. We need to wait until the update to scroll to it.
+     */
+    _defineProperty(this, "scrollAndFocusColumnOnUpdate", null);
     _defineProperty(this, "handleGroupColorChange", throttle((group, color) => {
       var {
         columnHeaderGroups,
@@ -54,49 +63,6 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       }), 1, newGroup);
       onColumnHeaderGroupChanged(newGroups);
     }, 250));
-    _defineProperty(this, "renderItem", memoize(_ref2 => {
-      var {
-        value,
-        clone,
-        item,
-        ref,
-        handleProps
-      } = _ref2;
-      var {
-        onColumnVisibilityChanged
-      } = this.props;
-      var {
-        selectedColumns
-      } = this.state;
-      var displayString = value;
-
-      // The cloned drag overlay we want to show the items being dragged
-      if (clone) {
-        var selectedItemNames = this.getSelectedParentItems().map(_ref3 => {
-          var {
-            id
-          } = _ref3;
-          return id;
-        });
-        displayString = selectedItemNames.join(', ');
-      }
-      return /*#__PURE__*/_jsx(VisibilityOrderingItem, {
-        ref: ref,
-        value: displayString,
-        clone: clone,
-        item: item,
-        childCount: selectedColumns.size,
-        onVisibilityChange: onColumnVisibilityChanged,
-        onClick: this.handleItemClick,
-        onGroupDelete: this.handleGroupDelete,
-        onGroupColorChange: this.handleGroupColorChange,
-        onGroupNameChange: this.handleGroupNameChange,
-        validateGroupName: this.validateGroupName,
-        handleProps: handleProps
-      }, item.id);
-    }, {
-      max: 1000
-    }));
     _defineProperty(this, "getMemoizedFirstMovableIndex", memoize((model, columns, movedColumns) => {
       for (var i = 0; i < columns.length; i += 1) {
         var modelIndex = GridUtils.getModelIndex(i, movedColumns);
@@ -122,23 +88,23 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     _defineProperty(this, "memoizedGetTreeItems", memoize((columns, movedColumns, columnHeaderGroups, hiddenColumns, selectedColumns, showHiddenColumns) => getTreeItems(columns, movedColumns, columnHeaderGroups, hiddenColumns, [...selectedColumns.values()], showHiddenColumns), {
       max: 1000
     }));
-    _defineProperty(this, "makeVisibilityOrderingList", memoize((columns, treeItems, showHiddenColumns) => {
+    _defineProperty(this, "makeVisibilityOrderingList", memoize((columns, treeItems, showHiddenColumns, isDraggable) => {
       var {
         movedColumns
       } = this.props;
       var elements = [];
       var firstMovableIndex = this.getFirstMovableIndex();
       var lastMovableIndex = this.getLastMovableIndex();
-      var firstMovableTreeIndex = treeItems.findIndex(_ref4 => {
+      var firstMovableTreeIndex = treeItems.findIndex(_ref2 => {
         var {
           data
-        } = _ref4;
+        } = _ref2;
         return Array.isArray(data.visibleIndex) ? data.visibleIndex[0] === firstMovableIndex : data.visibleIndex === firstMovableIndex;
       });
-      var lastMovableTreeIndex = treeItems.findIndex(_ref5 => {
+      var lastMovableTreeIndex = treeItems.findIndex(_ref3 => {
         var {
           data
-        } = _ref5;
+        } = _ref3;
         return Array.isArray(data.visibleIndex) ? data.visibleIndex[1] === lastMovableIndex : data.visibleIndex === lastMovableIndex;
       });
       var movableItems = treeItems.slice(firstMovableTreeIndex, lastMovableTreeIndex + 1);
@@ -172,8 +138,7 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       elements.push(/*#__PURE__*/_jsx(SortableTree, {
         items: movableItems,
         renderItem: this.renderItem,
-        onDragStart: this.handleDragStart,
-        onDragEnd: this.handleDragEnd
+        isDraggable: isDraggable
       }, "movable-items"));
       if (lastMovableIndex != null && lastMovableIndex < columns.length - 1) {
         elements.push(/*#__PURE__*/_jsx("hr", {}, "bottom-horizontal-divider"));
@@ -201,8 +166,6 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     }, columnName), {
       max: 1000
     }));
-    this.handleSearchInputChange = this.handleSearchInputChange.bind(this);
-    this.searchColumns = this.searchColumns.bind(this);
     this.handleItemClick = this.handleItemClick.bind(this);
     this.handleDragEnd = this.handleDragEnd.bind(this);
     this.handleGroupDelete = this.handleGroupDelete.bind(this);
@@ -213,14 +176,16 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     this.handleDragStart = this.handleDragStart.bind(this);
     this.handleOverflowAction = this.handleOverflowAction.bind(this);
     this.handleKeyboardShortcut = this.handleKeyboardShortcut.bind(this);
+    this.handleSearchModalOpenChange = this.handleSearchModalOpenChange.bind(this);
+    this.handleSearchSelect = this.handleSearchSelect.bind(this);
+    this.handleSearchItemClicked = this.handleSearchItemClicked.bind(this);
+    this.renderItem = this.renderItem.bind(this);
     this.state = {
       selectedColumns: new Set(),
-      queriedColumnIndex: undefined,
-      queriedColumnRange: undefined,
-      prevQueriedColumns: undefined,
       lastSelectedColumn: '',
-      searchFilter: '',
-      showHiddenColumns: true
+      showHiddenColumns: true,
+      isSearchModalOpen: false,
+      movedColumns: props.movedColumns
     };
     this.list = null;
   }
@@ -239,34 +204,46 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     });
   }
   componentDidUpdate(prevProps) {
+    // If we change because of undo/redo or reorders in the grid, update internal state
     var {
       movedColumns
     } = this.props;
-    if (movedColumns !== prevProps.movedColumns) {
-      var {
-        searchFilter
-      } = this.state;
-      this.searchColumns(searchFilter, false);
+    if (prevProps.movedColumns !== movedColumns) {
+      this.setState({
+        movedColumns
+      });
+    }
+
+    // Scroll to the item when it's available
+    if (this.scrollAndFocusColumnOnUpdate != null) {
+      var _this$list;
+      var itemElement = (_this$list = this.list) === null || _this$list === void 0 ? void 0 : _this$list.querySelector(".item-wrapper[data-id=\"".concat(this.scrollAndFocusColumnOnUpdate, "\"] .tree-item"));
+      if (itemElement instanceof HTMLElement) {
+        itemElement.scrollIntoView({
+          block: 'nearest'
+        });
+        itemElement.focus();
+        this.scrollAndFocusColumnOnUpdate = null;
+      }
     }
 
     // document.activeElement is either body or html when nothing is focused.
     // If there is no focused element, then we probably deleted or renamed a group
     // resulting in focus loss. Try to re-establish focus.
-    // Cannot use focusout event for this because it doesn't fire when the focused element is deleted
+    // Cannot rely on focusout event for this because it doesn't fire when the focused element is deleted
     // (except in Chrome which is against the spec here).
-    if ((document.activeElement === document.body || document.activeElement === document.documentElement) && this.lastFocusedItemIndex != null) {
-      var _this$list;
-      var itemToFocus = (_this$list = this.list) === null || _this$list === void 0 ? void 0 : _this$list.querySelector(".item-wrapper:nth-child(".concat(this.lastFocusedItemIndex + 1, ") .tree-item"));
-      if (itemToFocus == null || !(itemToFocus instanceof HTMLElement)) {
+    if ((document.activeElement === document.body || document.activeElement === document.documentElement) && this.lastFocusedItemIndex !== null) {
+      var _this$list2;
+      var itemToFocus = (_this$list2 = this.list) === null || _this$list2 === void 0 ? void 0 : _this$list2.querySelector(".item-wrapper:nth-child(".concat(this.lastFocusedItemIndex + 1, ") .tree-item"));
+      if (itemToFocus != null && itemToFocus instanceof HTMLElement) {
+        itemToFocus.focus();
+      } else {
         log.warn('Could not maintain focus');
         this.lastFocusedItemIndex = null;
-        return;
       }
-      itemToFocus.focus();
     }
   }
   componentWillUnmount() {
-    this.debouncedSearchColumns.cancel();
     var {
       columnHeaderGroups,
       onColumnHeaderGroupChanged
@@ -286,11 +263,7 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     } = this.props;
     this.setState({
       selectedColumns: new Set(),
-      queriedColumnIndex: undefined,
-      queriedColumnRange: undefined,
-      prevQueriedColumns: undefined,
-      lastSelectedColumn: '',
-      searchFilter: ''
+      lastSelectedColumn: ''
     });
     onReset();
     onColumnHeaderGroupChanged(model.initialColumnHeaderGroups);
@@ -302,164 +275,6 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       lastSelectedColumn: ''
     });
   }
-  handleSearchInputChange(event) {
-    var searchFilter = event.target.value;
-    this.setState({
-      searchFilter
-    });
-    if (!searchFilter) {
-      this.debouncedSearchColumns.cancel();
-      this.resetSelection();
-      return;
-    }
-    this.debouncedSearchColumns(searchFilter);
-  }
-  searchColumns(searchFilter) {
-    var updateQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    var flattenedItems = flattenTree(this.getTreeItems());
-    var itemsMatch = flattenedItems.filter(_ref6 => {
-      var _data$group$isNew, _data$group;
-      var {
-        id,
-        data
-      } = _ref6;
-      return !((_data$group$isNew = (_data$group = data.group) === null || _data$group === void 0 ? void 0 : _data$group.isNew) !== null && _data$group$isNew !== void 0 ? _data$group$isNew : false) && id.toLowerCase().includes(searchFilter.toLowerCase());
-    });
-    var columnsMatchMap = itemsMatch.reduce((acc, _ref7) => {
-      var {
-        id
-      } = _ref7;
-      var originalIndex = flattenedItems.findIndex(item => item.id === id);
-      return _objectSpread(_objectSpread({}, acc), {}, {
-        [originalIndex]: id
-      });
-    }, {});
-    if (!updateQuery) {
-      this.setState({
-        prevQueriedColumns: columnsMatchMap
-      });
-      return;
-    }
-    var columnIds = itemsMatch.map(_ref8 => {
-      var {
-        id
-      } = _ref8;
-      return id;
-    });
-    this.addColumnToSelected(columnIds, false);
-    if (columnIds.length > 0) {
-      var _this$list2;
-      var visibleIndexToFocus = flattenedItems.findIndex(_ref9 => {
-        var {
-          id
-        } = _ref9;
-        return id.toLowerCase().includes(searchFilter.toLowerCase());
-      });
-      var columnItemToFocus = (_this$list2 = this.list) === null || _this$list2 === void 0 ? void 0 : _this$list2.querySelectorAll('.item-wrapper')[visibleIndexToFocus];
-      columnItemToFocus === null || columnItemToFocus === void 0 || columnItemToFocus.scrollIntoView({
-        block: 'center'
-      });
-    }
-    this.setState({
-      prevQueriedColumns: columnsMatchMap,
-      queriedColumnIndex: undefined
-    });
-  }
-
-  /**
-   * Change the selected column to the next or previous column that matches the search criteria.
-   *
-   * queriedColumnRange stores the closes options in the case that the user clicks on an option that didn't fulfill the search criteria.
-   * On click of the forward/back button, queriedColumnIndex is updated to either the upper or lower index in queriedColumnRange
-   *
-   * queriedColumnIndex is the current index within prevQueriedColumns. Not their actual index in the tree.
-   *
-   * @param direction The direction to move the selection
-   */
-
-  changeSelectedColumn(direction) {
-    var _this$list3;
-    var {
-      queriedColumnIndex,
-      queriedColumnRange,
-      prevQueriedColumns
-    } = this.state;
-    var newQueriedColumnIndex = queriedColumnIndex;
-    if (prevQueriedColumns === undefined) return;
-    var queriedColumnsLength = Object.keys(prevQueriedColumns).length;
-    if (direction === 'forward') {
-      if (queriedColumnRange !== undefined) {
-        newQueriedColumnIndex = queriedColumnRange.nextIndex;
-      } else if (newQueriedColumnIndex === undefined || newQueriedColumnIndex >= queriedColumnsLength - 1) {
-        newQueriedColumnIndex = 0;
-      } else {
-        newQueriedColumnIndex += 1;
-      }
-    } else if (direction === 'back') {
-      if (queriedColumnRange !== undefined) {
-        newQueriedColumnIndex = queriedColumnRange.prevIndex;
-      } else if (newQueriedColumnIndex === undefined || newQueriedColumnIndex <= 0) {
-        newQueriedColumnIndex = queriedColumnsLength - 1;
-      } else {
-        newQueriedColumnIndex -= 1;
-      }
-    }
-    this.addColumnToSelected([Object.values(prevQueriedColumns)[newQueriedColumnIndex]], false);
-    var actualColumnIndex = parseInt(Object.keys(prevQueriedColumns)[newQueriedColumnIndex], 10);
-    var columnItemToFocus = (_this$list3 = this.list) === null || _this$list3 === void 0 ? void 0 : _this$list3.querySelectorAll('.item-wrapper')[actualColumnIndex];
-    columnItemToFocus === null || columnItemToFocus === void 0 || columnItemToFocus.scrollIntoView({
-      block: 'center'
-    });
-    this.setState({
-      queriedColumnIndex: newQueriedColumnIndex,
-      queriedColumnRange: undefined
-    });
-  }
-
-  /**
-   * Handles changing the queriedColumnIndex on user click.
-   *
-   * If the option clicked matches the search criteria the index is updated immediately.
-   *
-   * If the option clicked doesn't meet the search criteria, the two closest options that fulfill the criteria are stored.
-   * On click of the forward/back button the selection will change to one of those options. (Think of VS Code search functionality)
-   *
-   * @param name the name of the clicked column
-   */
-  adjustQueriedIndex(name) {
-    var {
-      prevQueriedColumns
-    } = this.state;
-    if (prevQueriedColumns === undefined) return;
-    if (name in Object.values(prevQueriedColumns)) {
-      var newQueriedColumnIndex = Object.values(prevQueriedColumns).indexOf(name);
-      this.setState({
-        queriedColumnIndex: newQueriedColumnIndex,
-        queriedColumnRange: undefined
-      });
-      return;
-    }
-    var flattenedItems = flattenTree(this.getTreeItems());
-    var clickedIndex = flattenedItems.findIndex(item => item.id === name);
-    var queriedColumnsIndexes = Object.keys(prevQueriedColumns).map(idx => parseInt(idx, 10));
-    var prevIndex = queriedColumnsIndexes.length - 1;
-    var nextIndex = 0;
-    for (var i = 0; i < queriedColumnsIndexes.length; i += 1) {
-      var index = queriedColumnsIndexes[i];
-      if (index < clickedIndex) {
-        prevIndex = i;
-      } else if (index > clickedIndex) {
-        nextIndex = i;
-        break;
-      }
-    }
-    this.setState({
-      queriedColumnRange: {
-        prevIndex,
-        nextIndex
-      }
-    });
-  }
 
   /**
    * Moves the currently selected columns in the direction specified.
@@ -615,16 +430,16 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     var scrollListAfterMove;
     if (option === VisibilityOrderingBuilderInner.MOVE_OPTIONS.TOP) {
       scrollListAfterMove = () => {
-        var _this$list4;
-        (_this$list4 = this.list) === null || _this$list4 === void 0 || (_this$list4 = _this$list4.parentElement) === null || _this$list4 === void 0 || _this$list4.scroll({
+        var _this$list3;
+        (_this$list3 = this.list) === null || _this$list3 === void 0 || (_this$list3 = _this$list3.parentElement) === null || _this$list3 === void 0 || _this$list3.scroll({
           top: 0
         });
       };
     }
     if (option === VisibilityOrderingBuilderInner.MOVE_OPTIONS.BOTTOM) {
       scrollListAfterMove = () => {
-        var _this$list5;
-        (_this$list5 = this.list) === null || _this$list5 === void 0 || (_this$list5 = _this$list5.parentElement) === null || _this$list5 === void 0 || _this$list5.scroll({
+        var _this$list4;
+        (_this$list4 = this.list) === null || _this$list4 === void 0 || (_this$list4 = _this$list4.parentElement) === null || _this$list4 === void 0 || _this$list4.scroll({
           top: this.list.parentElement.scrollHeight
         });
       };
@@ -705,14 +520,27 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     var newMoves = this.getSortMoves(moveableTree, option, initialAndFrozenMovedColumns);
     onMovedColumnsChanged(newMoves);
   }
+
+  /**
+   * Handles clicking on an item in the visibility ordering list.
+   * Adds and removes to selection as necessary based on modifier and shift keys.
+   * Returns the columns to be added to the selection, if any.
+   *
+   * @param name The name of the column clicked
+   * @param event The click event
+   * @param showHiddenColumns If hidden columns should be included in the selection
+   * @returns The columns to be added to the selection, if any`
+   */
   handleItemClick(name, event) {
+    var _event$currentTarget;
+    var showHiddenColumns = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     event.stopPropagation();
 
     // Click was triggered by an interactive element. Ignore select
     if (event.target instanceof HTMLElement && (event.target.tagName === 'BUTTON' || event.target.tagName === 'INPUT')) {
-      return;
+      return [];
     }
-    event.currentTarget.focus();
+    (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 || _event$currentTarget.focus();
     var {
       selectedColumns,
       lastSelectedColumn
@@ -723,14 +551,14 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     var columnsToBeAdded = [name];
     if (isSelected && isModifierKeyDown) {
       this.removeColumnFromSelected(name);
-      return;
+      return [];
     }
-    var movableItems = flattenTree(this.getTreeItems());
+    var movableItems = flattenTree(this.getTreeItems(showHiddenColumns));
     if (isSelected && !isShiftKeyDown && lastSelectedColumn === name) {
-      var selectedItem = movableItems.find(_ref0 => {
+      var selectedItem = movableItems.find(_ref4 => {
         var {
           id
-        } = _ref0;
+        } = _ref4;
         return id === name;
       });
       assertNotNull(selectedItem);
@@ -738,7 +566,7 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       // If clicking on an item and it's the only thing selected, deselect it
       if (childCount + 1 === selectedColumns.size) {
         this.resetSelection();
-        return;
+        return [];
       }
     }
     if (isShiftKeyDown) {
@@ -747,10 +575,48 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       columnsToBeAdded.push(...movableItems.slice(Math.min(lastSelectedIndex, selectedIndex), Math.max(lastSelectedIndex, selectedIndex) + 1).map(item => item.id));
     }
     this.addColumnToSelected(columnsToBeAdded, isModifierKeyDown || isShiftKeyDown);
-    this.adjustQueriedIndex(name);
     this.setState({
       lastSelectedColumn: name
     });
+    return columnsToBeAdded;
+  }
+  handleSearchItemClicked(name, event) {
+    var columnsToAdd = this.handleItemClick(name, event, true);
+    var {
+      showHiddenColumns
+    } = this.state;
+    var {
+      onColumnVisibilityChanged
+    } = this.props;
+    if (columnsToAdd.length === 0) {
+      return;
+    }
+    var modelIndexesToShow = this.getSelectedItemModelIndexes(new Set(columnsToAdd));
+    if (!showHiddenColumns) {
+      onColumnVisibilityChanged(modelIndexesToShow, true);
+    }
+    if (event.shiftKey || GridUtils.isModifierKeyDown(event)) {
+      return;
+    }
+    this.scrollAndFocusColumnOnUpdate = name;
+  }
+  handleSearchSelect(names) {
+    if (names.length === 0) {
+      return;
+    }
+    var {
+      showHiddenColumns
+    } = this.state;
+    var {
+      onColumnVisibilityChanged
+    } = this.props;
+    if (!showHiddenColumns) {
+      var modelIndexesToShow = this.getSelectedItemModelIndexes(new Set(names));
+      onColumnVisibilityChanged(modelIndexesToShow, true);
+    }
+    var [firstItem] = names;
+    this.scrollAndFocusColumnOnUpdate = firstItem;
+    this.addColumnToSelected(names, false);
   }
 
   /**
@@ -771,11 +637,11 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     // The treeItems array will always be parent -> child in the order
     // We don't need to recursively iterate because of this
     // The parent will always be added before any children for nested selections
-    flattenedItems.forEach(_ref1 => {
+    flattenedItems.forEach(_ref5 => {
       var {
         id,
         children
-      } = _ref1;
+      } = _ref5;
       if (newSelectedColumns.has(id)) {
         children.forEach(child => newSelectedColumns.add(child.id));
       }
@@ -800,17 +666,17 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       selectedColumns
     } = this.state;
     var flattenedItems = flattenTree(this.getTreeItems());
-    var item = flattenedItems.find(_ref10 => {
+    var item = flattenedItems.find(_ref6 => {
       var {
         id
-      } = _ref10;
+      } = _ref6;
       return id === name;
     });
     assertNotNull(item);
-    var parentItem = flattenedItems.find(_ref11 => {
+    var parentItem = flattenedItems.find(_ref7 => {
       var {
         id
-      } = _ref11;
+      } = _ref7;
       return id === item.parentId;
     });
 
@@ -821,10 +687,10 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     var _loop2 = function _loop2() {
       selectedColumns.delete(parentItem.id);
       var newParentId = parentItem.parentId;
-      parentItem = flattenedItems.find(_ref12 => {
+      parentItem = flattenedItems.find(_ref8 => {
         var {
           id
-        } = _ref12;
+        } = _ref8;
         return id === newParentId;
       });
     };
@@ -836,13 +702,25 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       selectedColumns: new Set(selectedColumns)
     });
   }
-  handleDragStart(id) {
+  handleDragStart(id, event) {
     var {
       selectedColumns
     } = this.state;
-    if (!selectedColumns.has(id)) {
-      this.addColumnToSelected([id], false);
+    if (selectedColumns.has(id)) {
+      return;
     }
+    var dragEvent = event.activatorEvent;
+    var isAddingToSelection = GridUtils.isModifierKeyDown(dragEvent) || dragEvent.shiftKey;
+    // For some reason, flushSync is needed here to prevent issues when
+    // dragging multiple items, dropping, then immediately dragging a single item
+    // over the previously dragged group. Without flushSync, the item being dragged
+    // can cause items in the previously dragged group to be in completely wrong places.
+    flushSync(() => {
+      this.handleItemClick(id, event.activatorEvent, true);
+      // Always add the dragged item back to selected in case the user ctrl+dragged on an already
+      // selected item. The handleItemClick would deselect it, but we want to keep it selected.
+      this.addColumnToSelected([id], isAddingToSelection);
+    });
   }
   handleDragEnd(from, to) {
     var {
@@ -863,6 +741,15 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     } = moveItemsFromDrop(from, to, movedColumns, columnHeaderGroups, flattenedItems, selectedParentItems, firstMovableIndex, lastMovableIndex);
     onColumnHeaderGroupChanged(newGroups);
     onMovedColumnsChanged(newMoves);
+    // Without tracking the state here, React 18 is rendering the child separately from
+    // the render which changes the prop. As a result, the drop animations go to the
+    // original location because of that render with stale items. I could not find any
+    // other way to fix this (removing memoization, removing keys, etc.)
+    this.setState({
+      movedColumns: newMoves
+    });
+    // Focus the dragged item after the move. Should not scroll since it's already in view
+    this.scrollAndFocusColumnOnUpdate = from.id;
   }
   handleGroupNameChange(group, newName) {
     var {
@@ -872,10 +759,10 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     } = this.props;
     var newGroups = [...columnHeaderGroups];
     var oldName = group.name;
-    var groupIndex = newGroups.findIndex(_ref13 => {
+    var groupIndex = newGroups.findIndex(_ref9 => {
       var {
         name
-      } = _ref13;
+      } = _ref9;
       return name === oldName;
     });
     var oldGroup = newGroups[groupIndex];
@@ -884,10 +771,10 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     var newGroup = new ColumnHeaderGroup(oldGroup);
     newGroup.name = newName;
     newGroups.splice(groupIndex, 1, newGroup);
-    var parentIndex = newGroups.findIndex(_ref14 => {
+    var parentIndex = newGroups.findIndex(_ref0 => {
       var {
         name
-      } = _ref14;
+      } = _ref0;
       return name === newGroup.parent;
     });
     if (parentIndex >= 0) {
@@ -896,6 +783,10 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       newParent.addChildren([newName]);
       newGroups.splice(parentIndex, 1, newParent);
     }
+
+    // The group will be a new item, so focus it after the update
+    // otherwise we may lose focus entirely
+    this.scrollAndFocusColumnOnUpdate = newName;
     onColumnHeaderGroupChanged(newGroups);
     endUndoGroup();
   }
@@ -937,10 +828,10 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     var name = "".concat(ColumnHeaderGroup.NEW_GROUP_PREFIX, "-").concat(Date.now());
     var newGroup = new ColumnHeaderGroup({
       name,
-      children: selectedItems.map(_ref15 => {
+      children: selectedItems.map(_ref1 => {
         var {
           id
-        } = _ref15;
+        } = _ref1;
         return id;
       }),
       depth: 0,
@@ -948,8 +839,8 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     });
     startUndoGroup();
     onMovedColumnsChanged(movedColumns.concat(newMoves), () => {
-      var _this$list6;
-      (_this$list6 = this.list) === null || _this$list6 === void 0 || (_this$list6 = _this$list6.parentElement) === null || _this$list6 === void 0 || _this$list6.scroll({
+      var _this$list5;
+      (_this$list5 = this.list) === null || _this$list5 === void 0 || (_this$list5 = _this$list5.parentElement) === null || _this$list5 === void 0 || _this$list5.scroll({
         top: 0
       });
     });
@@ -973,21 +864,64 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     if (!DbNameValidator.isValidColumnName(groupName)) {
       return 'Invalid name';
     }
-    if (columns.some(_ref16 => {
+    if (columns.some(_ref10 => {
       var {
         name
-      } = _ref16;
+      } = _ref10;
       return name === groupName;
-    }) || columnHeaderGroups.some(_ref17 => {
+    }) || columnHeaderGroups.some(_ref11 => {
       var {
         name
-      } = _ref17;
+      } = _ref11;
       return name === groupName;
     })) {
       return 'Duplicate name';
     }
     return '';
   }
+  renderItem(_ref12) {
+    var {
+      value,
+      clone,
+      item,
+      ref,
+      handleProps
+    } = _ref12;
+    var {
+      onColumnVisibilityChanged
+    } = this.props;
+    var {
+      selectedColumns,
+      showHiddenColumns
+    } = this.state;
+    var displayString = value;
+
+    // The cloned drag overlay we want to show the items being dragged
+    if (clone) {
+      var selectedItemNames = this.getSelectedParentItems().map(_ref13 => {
+        var {
+          id
+        } = _ref13;
+        return id;
+      });
+      displayString = selectedItemNames.join(', ');
+    }
+    return /*#__PURE__*/_jsx(VisibilityOrderingItem, {
+      ref: ref,
+      value: displayString,
+      clone: clone,
+      item: item,
+      childCount: selectedColumns.size,
+      onVisibilityChange: onColumnVisibilityChanged,
+      visibilityClickAndDrag: showHiddenColumns,
+      onClick: this.handleItemClick,
+      onGroupDelete: this.handleGroupDelete,
+      onGroupColorChange: this.handleGroupColorChange,
+      onGroupNameChange: this.handleGroupNameChange,
+      validateGroupName: this.validateGroupName,
+      handleProps: handleProps
+    }, item.id);
+  }
   /**
    * Gets the first movable visible index
    */
@@ -1011,20 +945,27 @@ class VisibilityOrderingBuilderInner extends PureComponent {
   /**
    * Gets the tree of movable items in order. Memoized for efficiency
    * Use flattenItems(this.getTreeItems()) if a flat list is needed
+   * @param showHiddenColumns Whether to show hidden columns in the tree. Defaults to the current state value.
    * @returns The movable tree items in order
    */
-  getTreeItems() {
+  getTreeItems(showHiddenColumns) {
     var {
       model,
-      movedColumns,
       hiddenColumns,
       columnHeaderGroups
     } = this.props;
     var {
+      movedColumns,
       selectedColumns,
-      showHiddenColumns
+      showHiddenColumns: showHiddenColumnsState
     } = this.state;
-    return this.memoizedGetTreeItems(model.columns, movedColumns, columnHeaderGroups, hiddenColumns, selectedColumns, showHiddenColumns);
+    return this.memoizedGetTreeItems(model.columns, movedColumns, columnHeaderGroups, hiddenColumns, selectedColumns, showHiddenColumns !== null && showHiddenColumns !== void 0 ? showHiddenColumns : showHiddenColumnsState);
+  }
+  getSelectedItemModelIndexes(columnNames) {
+    var {
+      model
+    } = this.props;
+    return [...columnNames.values()].map(name => model.getColumnIndexByName(name)).filter(i => i != null).flat();
   }
 
   /**
@@ -1038,11 +979,11 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       selectedColumns
     } = this.state;
     var treeItems = flattenTree(this.getTreeItems());
-    return treeItems.filter(_ref18 => {
+    return treeItems.filter(_ref14 => {
       var {
         id,
         parentId
-      } = _ref18;
+      } = _ref14;
       return (
         // All items whose parents are not selected
         selectedColumns.has(id) && !selectedColumns.has(parentId !== null && parentId !== void 0 ? parentId : '')
@@ -1063,7 +1004,8 @@ class VisibilityOrderingBuilderInner extends PureComponent {
         break;
       case 'showHidden':
         this.setState(prev => ({
-          showHiddenColumns: !prev.showHiddenColumns
+          showHiddenColumns: !prev.showHiddenColumns,
+          selectedColumns: new Set()
         }));
         break;
     }
@@ -1083,6 +1025,27 @@ class VisibilityOrderingBuilderInner extends PureComponent {
       redo();
     }
   }
+  handleSearchModalOpenChange(isOpen) {
+    if (isOpen) {
+      this.resetSelection();
+    } else {
+      var {
+        showHiddenColumns,
+        selectedColumns
+      } = this.state;
+      var {
+        onColumnVisibilityChanged
+      } = this.props;
+      // Make sure all selected columns are visible when closing the search modal
+      if (!showHiddenColumns) {
+        var modelIndexesToShow = this.getSelectedItemModelIndexes(selectedColumns);
+        onColumnVisibilityChanged(modelIndexesToShow, true);
+      }
+    }
+    this.setState({
+      isSearchModalOpen: isOpen
+    });
+  }
   render() {
     var {
       model,
@@ -1093,199 +1056,195 @@ class VisibilityOrderingBuilderInner extends PureComponent {
     } = this.props;
     var {
       selectedColumns,
-      searchFilter,
-      prevQueriedColumns,
-      queriedColumnIndex,
-      showHiddenColumns
+      showHiddenColumns,
+      isSearchModalOpen
     } = this.state;
     var hasSelection = selectedColumns.size > 0;
     var treeItems = this.getTreeItems();
-    var nameToIndexes = new Map(flattenTree(treeItems).map(item => [item.id, item.data.modelIndex]));
+    var flattenedItems = flattenTree(treeItems);
     var hiddenColumnsSet = new Set(hiddenColumns);
-    var columnsToToggle = [
-    // Pass through Set to dedupe model indexes
-    ...new Set(hasSelection ? [...selectedColumns.values()].map(name => nameToIndexes.get(name)).filter(i => i != null).flat() : treeItems.map(item => item.data.modelIndex).flat())];
+    var columnsToToggle = hasSelection ? this.getSelectedItemModelIndexes(selectedColumns) : treeItems.map(item => item.data.modelIndex).flat();
     var areSomeVisible = columnsToToggle.some(column => !hiddenColumnsSet.has(column));
     var allToggleText = areSomeVisible ? 'Hide All' : 'Show All';
     var selectedToggleText = areSomeVisible ? 'Hide Selected' : 'Show Selected';
-    var visibilityOrderingList = this.makeVisibilityOrderingList(model.columns, treeItems, showHiddenColumns);
-    var cursor = {
-      index: queriedColumnIndex,
-      next: direction => this.changeSelectedColumn(direction)
-    };
-    var matchCount = Object.keys(prevQueriedColumns !== null && prevQueriedColumns !== void 0 ? prevQueriedColumns : {}).length;
-    return /*#__PURE__*/_jsxs("div", {
-      role: "menu",
-      ref: this.wrapperRef,
-      className: "visibility-ordering-builder",
-      tabIndex: 0,
-      onKeyUp: this.handleKeyboardShortcut,
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: "top-menu",
-        children: [/*#__PURE__*/_jsx(Button, {
-          kind: "ghost",
-          className: "toggle-visibility-btn",
-          onClick: () => {
-            onColumnVisibilityChanged(columnsToToggle, !areSomeVisible);
-          },
-          icon: areSomeVisible ? dhEye : dhEyeSlash,
-          tooltip: "Toggle column visibility",
-          children: !hasSelection ? allToggleText : selectedToggleText
-        }), /*#__PURE__*/_jsx(SearchInput, {
-          className: "visibility-search",
-          value: searchFilter,
-          matchCount: searchFilter ? matchCount : undefined,
-          onChange: this.handleSearchInputChange,
-          cursor: cursor
-        }), /*#__PURE__*/_jsxs(MenuTrigger, {
-          closeOnSelect: false,
-          children: [/*#__PURE__*/_jsx(ActionButton, {
-            isQuiet: true,
-            "aria-label": "More options",
-            children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
-              icon: vsKebabVertical
-            })
-          }), /*#__PURE__*/_jsxs(SpectrumMenu, {
-            onAction: this.handleOverflowAction,
-            disabledKeys: [!canUndo && 'undo', !canRedo && 'redo'].filter(k => typeof k === 'string'),
-            children: [/*#__PURE__*/_jsxs(Section, {
-              "aria-label": "Undo and Redo",
-              children: [/*#__PURE__*/_jsxs(Item, {
-                textValue: "Undo",
-                children: [/*#__PURE__*/_jsx(Icon, {
-                  children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
-                    icon: vsBlank
-                  })
-                }), /*#__PURE__*/_jsx(Text, {
-                  children: "Undo"
-                }), /*#__PURE__*/_jsx(Keyboard, {
-                  children: GLOBAL_SHORTCUTS.UNDO.getDisplayText()
-                })]
-              }, "undo"), /*#__PURE__*/_jsxs(Item, {
-                textValue: "Redo",
-                children: [/*#__PURE__*/_jsx(Icon, {
-                  children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
-                    icon: vsBlank
-                  })
-                }), /*#__PURE__*/_jsx(Text, {
-                  children: "Redo"
-                }), /*#__PURE__*/_jsx(Keyboard, {
-                  children: GLOBAL_SHORTCUTS.REDO.getDisplayText()
-                })]
-              }, "redo")]
-            }), /*#__PURE__*/_jsx(Section, {
-              "aria-label": "More actions",
-              children: /*#__PURE__*/_jsxs(Item, {
-                textValue: "Show hidden columns",
-                children: [/*#__PURE__*/_jsx(Icon, {
-                  children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
-                    icon: showHiddenColumns ? vsCheck : vsBlank
-                  })
-                }), /*#__PURE__*/_jsx(Text, {
-                  children: "Show hidden columns"
-                })]
-              }, "showHidden")
+    var visibilityOrderingList = this.makeVisibilityOrderingList(model.columns, treeItems, showHiddenColumns, !isSearchModalOpen);
+    return /*#__PURE__*/_jsx(SortableTreeDndContext, {
+      items: flattenedItems,
+      onDragStart: this.handleDragStart,
+      onDragEnd: this.handleDragEnd,
+      renderItem: this.renderItem,
+      children: /*#__PURE__*/_jsxs("div", {
+        role: "menu",
+        ref: this.wrapperRef,
+        className: "visibility-ordering-builder",
+        tabIndex: 0,
+        onKeyUp: this.handleKeyboardShortcut,
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "top-menu",
+          children: [/*#__PURE__*/_jsx(Button, {
+            kind: "ghost",
+            className: "toggle-visibility-btn",
+            onClick: () => {
+              onColumnVisibilityChanged(columnsToToggle, !areSomeVisible);
+            },
+            icon: areSomeVisible ? dhEye : dhEyeSlash,
+            tooltip: "Toggle column visibility",
+            children: !hasSelection ? allToggleText : selectedToggleText
+          }), /*#__PURE__*/_jsx(SearchWithModal, {
+            items: flattenedItems,
+            onModalOpenChange: this.handleSearchModalOpenChange,
+            onClick: this.handleSearchItemClicked,
+            setSelection: this.handleSearchSelect
+          }), /*#__PURE__*/_jsxs(MenuTrigger, {
+            closeOnSelect: false,
+            children: [/*#__PURE__*/_jsx(ActionButton, {
+              isQuiet: true,
+              "aria-label": "More options",
+              children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+                icon: vsKebabVertical
+              })
+            }), /*#__PURE__*/_jsxs(SpectrumMenu, {
+              onAction: this.handleOverflowAction,
+              disabledKeys: [!canUndo && 'undo', !canRedo && 'redo'].filter(k => typeof k === 'string'),
+              children: [/*#__PURE__*/_jsxs(Section, {
+                "aria-label": "Undo and Redo",
+                children: [/*#__PURE__*/_jsxs(Item, {
+                  textValue: "Undo",
+                  children: [/*#__PURE__*/_jsx(Icon, {
+                    children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+                      icon: vsBlank
+                    })
+                  }), /*#__PURE__*/_jsx(Text, {
+                    children: "Undo"
+                  }), /*#__PURE__*/_jsx(Keyboard, {
+                    children: GLOBAL_SHORTCUTS.UNDO.getDisplayText()
+                  })]
+                }, "undo"), /*#__PURE__*/_jsxs(Item, {
+                  textValue: "Redo",
+                  children: [/*#__PURE__*/_jsx(Icon, {
+                    children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+                      icon: vsBlank
+                    })
+                  }), /*#__PURE__*/_jsx(Text, {
+                    children: "Redo"
+                  }), /*#__PURE__*/_jsx(Keyboard, {
+                    children: GLOBAL_SHORTCUTS.REDO.getDisplayText()
+                  })]
+                }, "redo")]
+              }), /*#__PURE__*/_jsx(Section, {
+                "aria-label": "More actions",
+                children: /*#__PURE__*/_jsxs(Item, {
+                  textValue: "Show hidden columns",
+                  children: [/*#__PURE__*/_jsx(Icon, {
+                    children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+                      icon: showHiddenColumns ? vsCheck : vsBlank
+                    })
+                  }), /*#__PURE__*/_jsx(Text, {
+                    children: "Show hidden columns"
+                  })]
+                }, "showHidden")
+              })]
             })]
           })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "top-menu",
+          children: [/*#__PURE__*/_jsx(Button, {
+            kind: "ghost",
+            icon: vsRefresh,
+            className: "px-1",
+            tooltip: "Reset to default",
+            onClick: () => {
+              this.resetVisibilityOrdering();
+            },
+            children: "Reset"
+          }), /*#__PURE__*/_jsx("span", {
+            className: "vertical-divider"
+          }), /*#__PURE__*/_jsx(Button, {
+            kind: "ghost",
+            icon: dhSortAlphaDown,
+            className: "px-1",
+            tooltip: "Sort ascending",
+            onClick: () => {
+              this.handleSortColumns(VisibilityOrderingBuilderInner.SORTING_OPTIONS.ASC);
+            }
+          }), /*#__PURE__*/_jsx(Button, {
+            kind: "ghost",
+            icon: dhSortAlphaUp,
+            className: "px-1",
+            tooltip: "Sort descending",
+            onClick: () => {
+              this.handleSortColumns(VisibilityOrderingBuilderInner.SORTING_OPTIONS.DSC);
+            }
+          }), /*#__PURE__*/_jsx("span", {
+            className: "vertical-divider"
+          }), /*#__PURE__*/_jsxs(Button, {
+            kind: "ghost",
+            className: "px-1",
+            tooltip: "Create group from selection",
+            disabled: !hasSelection,
+            onClick: this.handleGroupCreate,
+            children: [/*#__PURE__*/_jsxs("span", {
+              className: "fa-layers",
+              children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+                mask: vsSymbolStructure,
+                icon: vsCircleLargeFilled,
+                transform: "right-7 down-5 shrink-6"
+              }), /*#__PURE__*/_jsx(FontAwesomeIcon, {
+                icon: vsAdd,
+                transform: "right-8 down-6 shrink-8"
+              })]
+            }), "Group"]
+          }), /*#__PURE__*/_jsx("span", {
+            className: "vertical-divider"
+          }), /*#__PURE__*/_jsx(Button, {
+            kind: "ghost",
+            icon: vsChevronUp,
+            className: "px-1",
+            tooltip: "Move selection up",
+            onClick: () => {
+              this.handleMoveColumns(VisibilityOrderingBuilderInner.MOVE_OPTIONS.UP);
+            },
+            disabled: !hasSelection
+          }), /*#__PURE__*/_jsx(Button, {
+            kind: "ghost",
+            icon: vsChevronDown,
+            className: "px-1",
+            tooltip: "Move selection down",
+            onClick: () => {
+              this.handleMoveColumns(VisibilityOrderingBuilderInner.MOVE_OPTIONS.DOWN);
+            },
+            disabled: !hasSelection
+          }), /*#__PURE__*/_jsx(Button, {
+            kind: "ghost",
+            icon: dhArrowToTop,
+            className: "px-1",
+            tooltip: "Move selection to top",
+            onClick: () => {
+              this.handleMoveColumns(VisibilityOrderingBuilderInner.MOVE_OPTIONS.TOP);
+            },
+            disabled: !hasSelection
+          }), /*#__PURE__*/_jsx(Button, {
+            kind: "ghost",
+            icon: dhArrowToBottom,
+            className: "px-1",
+            tooltip: "Move selection to bottom",
+            onClick: () => {
+              this.handleMoveColumns(VisibilityOrderingBuilderInner.MOVE_OPTIONS.BOTTOM);
+            },
+            disabled: !hasSelection
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          role: "menu",
+          className: classNames('visibility-ordering-list'),
+          children: /*#__PURE__*/_jsx("div", {
+            className: "column-list",
+            ref: list => {
+              this.list = list;
+            },
+            children: visibilityOrderingList
+          })
         })]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: "top-menu",
-        children: [/*#__PURE__*/_jsx(Button, {
-          kind: "ghost",
-          icon: vsRefresh,
-          className: "px-1",
-          tooltip: "Reset to default",
-          onClick: () => {
-            this.resetVisibilityOrdering();
-          },
-          children: "Reset"
-        }), /*#__PURE__*/_jsx("span", {
-          className: "vertical-divider"
-        }), /*#__PURE__*/_jsx(Button, {
-          kind: "ghost",
-          icon: dhSortAlphaDown,
-          className: "px-1",
-          tooltip: "Sort ascending",
-          onClick: () => {
-            this.handleSortColumns(VisibilityOrderingBuilderInner.SORTING_OPTIONS.ASC);
-          }
-        }), /*#__PURE__*/_jsx(Button, {
-          kind: "ghost",
-          icon: dhSortAlphaUp,
-          className: "px-1",
-          tooltip: "Sort descending",
-          onClick: () => {
-            this.handleSortColumns(VisibilityOrderingBuilderInner.SORTING_OPTIONS.DSC);
-          }
-        }), /*#__PURE__*/_jsx("span", {
-          className: "vertical-divider"
-        }), /*#__PURE__*/_jsxs(Button, {
-          kind: "ghost",
-          className: "px-1",
-          tooltip: "Create group from selection",
-          disabled: !hasSelection,
-          onClick: this.handleGroupCreate,
-          children: [/*#__PURE__*/_jsxs("span", {
-            className: "fa-layers",
-            children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
-              mask: vsSymbolStructure,
-              icon: vsCircleLargeFilled,
-              transform: "right-7 down-5 shrink-6"
-            }), /*#__PURE__*/_jsx(FontAwesomeIcon, {
-              icon: vsAdd,
-              transform: "right-8 down-6 shrink-8"
-            })]
-          }), "Group"]
-        }), /*#__PURE__*/_jsx("span", {
-          className: "vertical-divider"
-        }), /*#__PURE__*/_jsx(Button, {
-          kind: "ghost",
-          icon: vsChevronUp,
-          className: "px-1",
-          tooltip: "Move selection up",
-          onClick: () => {
-            this.handleMoveColumns(VisibilityOrderingBuilderInner.MOVE_OPTIONS.UP);
-          },
-          disabled: !hasSelection
-        }), /*#__PURE__*/_jsx(Button, {
-          kind: "ghost",
-          icon: vsChevronDown,
-          className: "px-1",
-          tooltip: "Move selection down",
-          onClick: () => {
-            this.handleMoveColumns(VisibilityOrderingBuilderInner.MOVE_OPTIONS.DOWN);
-          },
-          disabled: !hasSelection
-        }), /*#__PURE__*/_jsx(Button, {
-          kind: "ghost",
-          icon: dhArrowToTop,
-          className: "px-1",
-          tooltip: "Move selection to top",
-          onClick: () => {
-            this.handleMoveColumns(VisibilityOrderingBuilderInner.MOVE_OPTIONS.TOP);
-          },
-          disabled: !hasSelection
-        }), /*#__PURE__*/_jsx(Button, {
-          kind: "ghost",
-          icon: dhArrowToBottom,
-          className: "px-1",
-          tooltip: "Move selection to bottom",
-          onClick: () => {
-            this.handleMoveColumns(VisibilityOrderingBuilderInner.MOVE_OPTIONS.BOTTOM);
-          },
-          disabled: !hasSelection
-        })]
-      }), /*#__PURE__*/_jsx("div", {
-        role: "menu",
-        className: classNames('visibility-ordering-list'),
-        children: /*#__PURE__*/_jsx("div", {
-          className: "column-list",
-          ref: list => {
-            this.list = list;
-          },
-          children: visibilityOrderingList
-        })
-      })]
+      })
     });
   }
 }
@@ -1357,10 +1316,12 @@ var VisibilityOrderingBuilder = /*#__PURE__*/memo(props => {
     }
   }, [columnHeaderGroups, hiddenColumns, isBatched, movedColumns, onColumnHeaderGroupChanged, onColumnVisibilityChanged, onFrozenColumnsChanged, onMovedColumnsChanged, props.model.frozenColumns, setUndoState, state.columnHeaderGroups, state.frozenColumns, state.hiddenColumns, state.movedColumns]);
   var handleColumnHeaderGroupChanged = useCallback(groups => {
-    onColumnHeaderGroupChanged(
-    // Updates which model indexes are in the groups if items were added/removed
-    IrisGridUtils.parseColumnHeaderGroups(props.model, groups).groups);
-  }, [onColumnHeaderGroupChanged, props.model]);
+    if (groups !== columnHeaderGroups) {
+      onColumnHeaderGroupChanged(
+      // Updates which model indexes are in the groups if items were added/removed
+      IrisGridUtils.parseColumnHeaderGroups(props.model, groups).groups);
+    }
+  }, [columnHeaderGroups, onColumnHeaderGroupChanged, props.model]);
   var handleUndo = useCallback(() => {
     isUndoRedoAction.current = true;
     undo();