@deephaven/iris-grid 1.7.2-react-18-alpha.3 → 1.8.0

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

@@ -3,32 +3,38 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 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, { PureComponent } from 'react';
+import React, { memo, PureComponent, useCallback, useEffect, useRef } from 'react';
 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 } from '@deephaven/icons';
+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 { Button, SearchInput } from '@deephaven/components';
+import { ActionButton, Button, GLOBAL_SHORTCUTS, Icon, Item, Keyboard, MenuTrigger, SearchInput, Section, SpectrumMenu, Text } from '@deephaven/components';
 import clamp from 'lodash.clamp';
 import throttle from 'lodash.throttle';
+import { useUndoRedo } from '@deephaven/react-hooks';
+import Log from '@deephaven/log';
 import "./VisibilityOrderingBuilder.css";
 import ColumnHeaderGroup from "../../ColumnHeaderGroup.js";
 import VisibilityOrderingItem from "./VisibilityOrderingItem.js";
 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var log = Log.module('VisibilityOrderingBuilder');
 var DEBOUNCE_SEARCH_COLUMN = 150;
-class VisibilityOrderingBuilder extends PureComponent {
+class VisibilityOrderingBuilderInner extends PureComponent {
   static shouldRenderColumn(column) {
     // We don't want to render the proxy column in the visibility ordering list
     return column.isProxy !== true;
   }
   constructor(props) {
     super(props);
+    _defineProperty(this, "wrapperRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "lastFocusedItemIndex", null);
     _defineProperty(this, "list", void 0);
     _defineProperty(this, "debouncedSearchColumns", debounce(this.searchColumns, DEBOUNCE_SEARCH_COLUMN));
     _defineProperty(this, "handleGroupColorChange", throttle((group, color) => {
@@ -87,7 +93,7 @@ class VisibilityOrderingBuilder extends PureComponent {
         onGroupNameChange: this.handleGroupNameChange,
         validateGroupName: this.validateGroupName,
         handleProps: handleProps
-      });
+      }, item.id);
     }, {
       max: 1000
     }));
@@ -113,10 +119,10 @@ class VisibilityOrderingBuilder extends PureComponent {
     }, {
       max: 10
     }));
-    _defineProperty(this, "memoizedGetTreeItems", memoize((columns, movedColumns, columnHeaderGroups, hiddenColumns, selectedColumns) => getTreeItems(columns, movedColumns, columnHeaderGroups, hiddenColumns, [...selectedColumns.values()]), {
+    _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) => {
+    _defineProperty(this, "makeVisibilityOrderingList", memoize((columns, treeItems, showHiddenColumns) => {
       var {
         movedColumns
       } = this.props;
@@ -136,13 +142,16 @@ class VisibilityOrderingBuilder extends PureComponent {
         return Array.isArray(data.visibleIndex) ? data.visibleIndex[1] === lastMovableIndex : data.visibleIndex === lastMovableIndex;
       });
       var movableItems = treeItems.slice(firstMovableTreeIndex, lastMovableTreeIndex + 1);
+      if (!showHiddenColumns) {
+        movableItems = movableItems.filter(item => item.data.isVisible);
+      }
 
       // No movable items. Render all as immovable
       if (firstMovableIndex == null || lastMovableIndex === null) {
         for (var visibleIndex = 0; visibleIndex < columns.length; visibleIndex += 1) {
           var modelIndex = GridUtils.getModelIndex(visibleIndex, movedColumns);
           var column = columns[modelIndex];
-          if (VisibilityOrderingBuilder.shouldRenderColumn(column)) {
+          if (VisibilityOrderingBuilderInner.shouldRenderColumn(column)) {
             elements.push(this.renderImmovableItem(column.name));
           }
         }
@@ -153,7 +162,7 @@ class VisibilityOrderingBuilder extends PureComponent {
       for (var _visibleIndex = 0; _visibleIndex < firstMovableIndex; _visibleIndex += 1) {
         var _modelIndex = GridUtils.getModelIndex(_visibleIndex, movedColumns);
         var _column = columns[_modelIndex];
-        if (VisibilityOrderingBuilder.shouldRenderColumn(_column)) {
+        if (VisibilityOrderingBuilderInner.shouldRenderColumn(_column)) {
           elements.push(this.renderImmovableItem(_column.name));
         }
       }
@@ -172,7 +181,7 @@ class VisibilityOrderingBuilder extends PureComponent {
       for (var _visibleIndex2 = lastMovableIndex + 1; _visibleIndex2 < columns.length; _visibleIndex2 += 1) {
         var _modelIndex2 = GridUtils.getModelIndex(_visibleIndex2, movedColumns);
         var _column2 = columns[_modelIndex2];
-        if (VisibilityOrderingBuilder.shouldRenderColumn(_column2)) {
+        if (VisibilityOrderingBuilderInner.shouldRenderColumn(_column2)) {
           elements.push(this.renderImmovableItem(_column2.name));
         }
       }
@@ -202,16 +211,33 @@ class VisibilityOrderingBuilder extends PureComponent {
     this.validateGroupName = this.validateGroupName.bind(this);
     this.addColumnToSelected = this.addColumnToSelected.bind(this);
     this.handleDragStart = this.handleDragStart.bind(this);
+    this.handleOverflowAction = this.handleOverflowAction.bind(this);
+    this.handleKeyboardShortcut = this.handleKeyboardShortcut.bind(this);
     this.state = {
       selectedColumns: new Set(),
       queriedColumnIndex: undefined,
       queriedColumnRange: undefined,
       prevQueriedColumns: undefined,
       lastSelectedColumn: '',
-      searchFilter: ''
+      searchFilter: '',
+      showHiddenColumns: true
     };
     this.list = null;
   }
+  componentDidMount() {
+    assertNotNull(this.wrapperRef.current);
+    // This fixes focus loss when editing a group because we use the name as the key for rendering.
+    // When the name is changed or group deleted, we lose focus entirely which is indicated by
+    // the focusout relatedTarget being null.
+    this.wrapperRef.current.addEventListener('focusin', e => {
+      if (e.target instanceof HTMLElement) {
+        var treeItem = e.target.closest('.tree-item');
+        if (treeItem != null) {
+          this.lastFocusedItemIndex = typeof treeItem.dataset.index === 'string' ? parseInt(treeItem.dataset.index, 10) : null;
+        }
+      }
+    });
+  }
   componentDidUpdate(prevProps) {
     var {
       movedColumns
@@ -222,9 +248,34 @@ class VisibilityOrderingBuilder extends PureComponent {
       } = this.state;
       this.searchColumns(searchFilter, false);
     }
+
+    // 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
+    // (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)) {
+        log.warn('Could not maintain focus');
+        this.lastFocusedItemIndex = null;
+        return;
+      }
+      itemToFocus.focus();
+    }
   }
   componentWillUnmount() {
     this.debouncedSearchColumns.cancel();
+    var {
+      columnHeaderGroups,
+      onColumnHeaderGroupChanged
+    } = this.props;
+    // Clean up unnamed groups on unmount
+    var filteredGroups = columnHeaderGroups.filter(group => !group.isNew);
+    if (filteredGroups.length !== columnHeaderGroups.length) {
+      onColumnHeaderGroupChanged(filteredGroups);
+    }
   }
   resetVisibilityOrdering() {
     var {
@@ -297,14 +348,14 @@ class VisibilityOrderingBuilder extends PureComponent {
     });
     this.addColumnToSelected(columnIds, false);
     if (columnIds.length > 0) {
-      var _this$list;
+      var _this$list2;
       var visibleIndexToFocus = flattenedItems.findIndex(_ref9 => {
         var {
           id
         } = _ref9;
         return id.toLowerCase().includes(searchFilter.toLowerCase());
       });
-      var columnItemToFocus = (_this$list = this.list) === null || _this$list === void 0 ? void 0 : _this$list.querySelectorAll('.item-wrapper')[visibleIndexToFocus];
+      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'
       });
@@ -327,7 +378,7 @@ class VisibilityOrderingBuilder extends PureComponent {
    */
 
   changeSelectedColumn(direction) {
-    var _this$list2;
+    var _this$list3;
     var {
       queriedColumnIndex,
       queriedColumnRange,
@@ -355,7 +406,7 @@ class VisibilityOrderingBuilder extends PureComponent {
     }
     this.addColumnToSelected([Object.values(prevQueriedColumns)[newQueriedColumnIndex]], false);
     var actualColumnIndex = parseInt(Object.keys(prevQueriedColumns)[newQueriedColumnIndex], 10);
-    var columnItemToFocus = (_this$list2 = this.list) === null || _this$list2 === void 0 ? void 0 : _this$list2.querySelectorAll('.item-wrapper')[actualColumnIndex];
+    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'
     });
@@ -448,7 +499,7 @@ class VisibilityOrderingBuilder extends PureComponent {
     assertNotNull(firstMovableIndex);
     assertNotNull(lastMovableIndex);
     var selectedItems = this.getSelectedParentItems();
-    var isMovingUpward = option === VisibilityOrderingBuilder.MOVE_OPTIONS.UP || option === VisibilityOrderingBuilder.MOVE_OPTIONS.TOP;
+    var isMovingUpward = option === VisibilityOrderingBuilderInner.MOVE_OPTIONS.UP || option === VisibilityOrderingBuilderInner.MOVE_OPTIONS.TOP;
 
     // for moving up and to the top, move column(s) in visibility index order
     // for moving down and to the bottom, move column(s) in reverse visibility index order
@@ -467,7 +518,7 @@ class VisibilityOrderingBuilder extends PureComponent {
         }
       } = selectedItems[i];
       switch (option) {
-        case VisibilityOrderingBuilder.MOVE_OPTIONS.TOP:
+        case VisibilityOrderingBuilderInner.MOVE_OPTIONS.TOP:
           {
             newMoves = GridUtils.moveItemOrRange(visibleIndex, firstMovableIndex, newMoves, true);
             var size = Array.isArray(visibleIndex) ? visibleIndex[1] - visibleIndex[0] + 1 : 1;
@@ -476,7 +527,7 @@ class VisibilityOrderingBuilder extends PureComponent {
             updatedGroups = moveToGroup(selectedItems[i], null, updatedGroups);
             break;
           }
-        case VisibilityOrderingBuilder.MOVE_OPTIONS.BOTTOM:
+        case VisibilityOrderingBuilderInner.MOVE_OPTIONS.BOTTOM:
           {
             newMoves = GridUtils.moveItemOrRange(visibleIndex, lastMovableIndex, newMoves, true);
             var _size = Array.isArray(visibleIndex) ? visibleIndex[1] - visibleIndex[0] + 1 : 1;
@@ -485,7 +536,7 @@ class VisibilityOrderingBuilder extends PureComponent {
             updatedGroups = moveToGroup(selectedItems[i], null, updatedGroups);
             break;
           }
-        case VisibilityOrderingBuilder.MOVE_OPTIONS.UP:
+        case VisibilityOrderingBuilderInner.MOVE_OPTIONS.UP:
           {
             var itemIndex = treeItems.findIndex(item => item.id === id);
             // Array.findLast would be better here, but it's too new for our browser support
@@ -511,7 +562,7 @@ class VisibilityOrderingBuilder extends PureComponent {
             }
             break;
           }
-        case VisibilityOrderingBuilder.MOVE_OPTIONS.DOWN:
+        case VisibilityOrderingBuilderInner.MOVE_OPTIONS.DOWN:
           {
             var _itemIndex = treeItems.findIndex(item => item.id === id);
             var nextItem = treeItems.find((item, idx) => idx > _itemIndex && !selectedColumns.has(item.id));
@@ -562,18 +613,18 @@ class VisibilityOrderingBuilder extends PureComponent {
       groups
     } = this.moveSelectedColumns(option);
     var scrollListAfterMove;
-    if (option === VisibilityOrderingBuilder.MOVE_OPTIONS.TOP) {
+    if (option === VisibilityOrderingBuilderInner.MOVE_OPTIONS.TOP) {
       scrollListAfterMove = () => {
-        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({
+        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: 0
         });
       };
     }
-    if (option === VisibilityOrderingBuilder.MOVE_OPTIONS.BOTTOM) {
+    if (option === VisibilityOrderingBuilderInner.MOVE_OPTIONS.BOTTOM) {
       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$list5;
+        (_this$list5 = this.list) === null || _this$list5 === void 0 || (_this$list5 = _this$list5.parentElement) === null || _this$list5 === void 0 || _this$list5.scroll({
           top: this.list.parentElement.scrollHeight
         });
       };
@@ -599,7 +650,7 @@ class VisibilityOrderingBuilder extends PureComponent {
   getSortMoves(itemsParam, option, movedColumns) {
     var items = [...itemsParam];
     // Sort all the movable columns
-    var isAscending = option === VisibilityOrderingBuilder.SORTING_OPTIONS.ASC;
+    var isAscending = option === VisibilityOrderingBuilderInner.SORTING_OPTIONS.ASC;
     items.sort((a, b) => {
       var aName = a.id.toUpperCase();
       var bName = b.id.toUpperCase();
@@ -801,9 +852,7 @@ class VisibilityOrderingBuilder extends PureComponent {
       onColumnHeaderGroupChanged
     } = this.props;
     var selectedParentItems = this.getSelectedParentItems();
-    var flattenedItems = flattenTree(this.getTreeItems()).map((item, i) => _objectSpread(_objectSpread({}, item), {}, {
-      index: i
-    }));
+    var flattenedItems = flattenTree(this.getTreeItems());
     var firstMovableIndex = this.getFirstMovableIndex();
     var lastMovableIndex = this.getLastMovableIndex();
     assertNotNull(firstMovableIndex);
@@ -818,7 +867,8 @@ class VisibilityOrderingBuilder extends PureComponent {
   handleGroupNameChange(group, newName) {
     var {
       columnHeaderGroups,
-      onColumnHeaderGroupChanged
+      onColumnHeaderGroupChanged,
+      endUndoGroup
     } = this.props;
     var newGroups = [...columnHeaderGroups];
     var oldName = group.name;
@@ -847,10 +897,12 @@ class VisibilityOrderingBuilder extends PureComponent {
       newGroups.splice(parentIndex, 1, newParent);
     }
     onColumnHeaderGroupChanged(newGroups);
+    endUndoGroup();
   }
   handleGroupDelete(group) {
     var {
       columnHeaderGroups,
+      endUndoGroup,
       onColumnHeaderGroupChanged
     } = this.props;
     var newGroups = columnHeaderGroups.filter(g => g.name !== group.name);
@@ -862,17 +914,20 @@ class VisibilityOrderingBuilder extends PureComponent {
       newGroups.splice(parentIndex, 1, newParent);
     }
     onColumnHeaderGroupChanged(newGroups);
+    // Could be started from editing a new group which is deleted without saving
+    endUndoGroup();
   }
   handleGroupCreate() {
     var {
       movedColumns,
       onMovedColumnsChanged,
-      onColumnHeaderGroupChanged
+      onColumnHeaderGroupChanged,
+      startUndoGroup
     } = this.props;
     var {
       newMoves,
       groups
-    } = this.moveSelectedColumns(VisibilityOrderingBuilder.MOVE_OPTIONS.TOP);
+    } = this.moveSelectedColumns(VisibilityOrderingBuilderInner.MOVE_OPTIONS.TOP);
     var newGroups = groups.filter(group => !group.isNew);
     var selectedItems = this.getSelectedParentItems();
     var childIndexes = selectedItems.map(item => item.data.modelIndex).flat().filter(index => index >= 0);
@@ -891,9 +946,10 @@ class VisibilityOrderingBuilder extends PureComponent {
       depth: 0,
       childIndexes: [...new Set(childIndexes)] // Remove any duplicates
     });
+    startUndoGroup();
     onMovedColumnsChanged(movedColumns.concat(newMoves), () => {
-      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$list6;
+      (_this$list6 = this.list) === null || _this$list6 === void 0 || (_this$list6 = _this$list6.parentElement) === null || _this$list6 === void 0 || _this$list6.scroll({
         top: 0
       });
     });
@@ -965,9 +1021,10 @@ class VisibilityOrderingBuilder extends PureComponent {
       columnHeaderGroups
     } = this.props;
     var {
-      selectedColumns
+      selectedColumns,
+      showHiddenColumns
     } = this.state;
-    return this.memoizedGetTreeItems(model.columns, movedColumns, columnHeaderGroups, hiddenColumns, selectedColumns);
+    return this.memoizedGetTreeItems(model.columns, movedColumns, columnHeaderGroups, hiddenColumns, selectedColumns, showHiddenColumns);
   }
 
   /**
@@ -992,17 +1049,54 @@ class VisibilityOrderingBuilder extends PureComponent {
       );
     });
   }
+  handleOverflowAction(key) {
+    var {
+      undo,
+      redo
+    } = this.props;
+    switch (key) {
+      case 'undo':
+        undo();
+        break;
+      case 'redo':
+        redo();
+        break;
+      case 'showHidden':
+        this.setState(prev => ({
+          showHiddenColumns: !prev.showHiddenColumns
+        }));
+        break;
+    }
+  }
+  handleKeyboardShortcut(event) {
+    var {
+      canUndo,
+      canRedo,
+      undo,
+      redo
+    } = this.props;
+    if (GLOBAL_SHORTCUTS.UNDO.matchesEvent(event) && canUndo) {
+      event.preventDefault();
+      undo();
+    } else if (GLOBAL_SHORTCUTS.REDO.matchesEvent(event) && canRedo) {
+      event.preventDefault();
+      redo();
+    }
+  }
   render() {
     var {
       model,
       hiddenColumns,
-      onColumnVisibilityChanged
+      onColumnVisibilityChanged,
+      canUndo,
+      canRedo
     } = this.props;
     var {
       selectedColumns,
       searchFilter,
       prevQueriedColumns,
-      queriedColumnIndex
+      queriedColumnIndex,
+      showHiddenColumns
     } = this.state;
     var hasSelection = selectedColumns.size > 0;
     var treeItems = this.getTreeItems();
@@ -1014,7 +1108,7 @@ class VisibilityOrderingBuilder extends PureComponent {
     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);
+    var visibilityOrderingList = this.makeVisibilityOrderingList(model.columns, treeItems, showHiddenColumns);
     var cursor = {
       index: queriedColumnIndex,
       next: direction => this.changeSelectedColumn(direction)
@@ -1022,8 +1116,10 @@ class VisibilityOrderingBuilder extends PureComponent {
     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, {
@@ -1041,6 +1137,56 @@ class VisibilityOrderingBuilder extends PureComponent {
           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")
+            })]
+          })]
         })]
       }), /*#__PURE__*/_jsxs("div", {
         className: "top-menu",
@@ -1061,7 +1207,7 @@ class VisibilityOrderingBuilder extends PureComponent {
           className: "px-1",
           tooltip: "Sort ascending",
           onClick: () => {
-            this.handleSortColumns(VisibilityOrderingBuilder.SORTING_OPTIONS.ASC);
+            this.handleSortColumns(VisibilityOrderingBuilderInner.SORTING_OPTIONS.ASC);
           }
         }), /*#__PURE__*/_jsx(Button, {
           kind: "ghost",
@@ -1069,7 +1215,7 @@ class VisibilityOrderingBuilder extends PureComponent {
           className: "px-1",
           tooltip: "Sort descending",
           onClick: () => {
-            this.handleSortColumns(VisibilityOrderingBuilder.SORTING_OPTIONS.DSC);
+            this.handleSortColumns(VisibilityOrderingBuilderInner.SORTING_OPTIONS.DSC);
           }
         }), /*#__PURE__*/_jsx("span", {
           className: "vertical-divider"
@@ -1098,7 +1244,7 @@ class VisibilityOrderingBuilder extends PureComponent {
           className: "px-1",
           tooltip: "Move selection up",
           onClick: () => {
-            this.handleMoveColumns(VisibilityOrderingBuilder.MOVE_OPTIONS.UP);
+            this.handleMoveColumns(VisibilityOrderingBuilderInner.MOVE_OPTIONS.UP);
           },
           disabled: !hasSelection
         }), /*#__PURE__*/_jsx(Button, {
@@ -1107,7 +1253,7 @@ class VisibilityOrderingBuilder extends PureComponent {
           className: "px-1",
           tooltip: "Move selection down",
           onClick: () => {
-            this.handleMoveColumns(VisibilityOrderingBuilder.MOVE_OPTIONS.DOWN);
+            this.handleMoveColumns(VisibilityOrderingBuilderInner.MOVE_OPTIONS.DOWN);
           },
           disabled: !hasSelection
         }), /*#__PURE__*/_jsx(Button, {
@@ -1116,7 +1262,7 @@ class VisibilityOrderingBuilder extends PureComponent {
           className: "px-1",
           tooltip: "Move selection to top",
           onClick: () => {
-            this.handleMoveColumns(VisibilityOrderingBuilder.MOVE_OPTIONS.TOP);
+            this.handleMoveColumns(VisibilityOrderingBuilderInner.MOVE_OPTIONS.TOP);
           },
           disabled: !hasSelection
         }), /*#__PURE__*/_jsx(Button, {
@@ -1125,7 +1271,7 @@ class VisibilityOrderingBuilder extends PureComponent {
           className: "px-1",
           tooltip: "Move selection to bottom",
           onClick: () => {
-            this.handleMoveColumns(VisibilityOrderingBuilder.MOVE_OPTIONS.BOTTOM);
+            this.handleMoveColumns(VisibilityOrderingBuilderInner.MOVE_OPTIONS.BOTTOM);
           },
           disabled: !hasSelection
         })]
@@ -1143,15 +1289,104 @@ class VisibilityOrderingBuilder extends PureComponent {
     });
   }
 }
-_defineProperty(VisibilityOrderingBuilder, "SORTING_OPTIONS", {
+
+// drag and drop display
+_defineProperty(VisibilityOrderingBuilderInner, "SORTING_OPTIONS", {
   DSC: 'DSC',
   ASC: 'ASC'
 });
-_defineProperty(VisibilityOrderingBuilder, "MOVE_OPTIONS", {
+_defineProperty(VisibilityOrderingBuilderInner, "MOVE_OPTIONS", {
   TOP: 'TOP',
   BOTTOM: 'BOTTOM',
   UP: 'UP',
   DOWN: 'DOWN'
 });
+var VisibilityOrderingBuilder = /*#__PURE__*/memo(props => {
+  var {
+    movedColumns,
+    hiddenColumns,
+    columnHeaderGroups,
+    onMovedColumnsChanged,
+    onColumnVisibilityChanged,
+    onColumnHeaderGroupChanged,
+    onFrozenColumnsChanged,
+    // Used for unit tests only
+    __testRef
+  } = props;
+  var {
+    set: setUndoState,
+    undo,
+    canUndo,
+    redo,
+    canRedo,
+    state
+  } = useUndoRedo({
+    movedColumns,
+    hiddenColumns,
+    columnHeaderGroups,
+    frozenColumns: props.model.frozenColumns
+  });
+
+  // On undo/redo, we need to ignore the prop change
+  // because we are the ones updating the props
+  var isUndoRedoAction = useRef(false);
+  var isBatched = useRef(false);
+  var startUndoGroup = useCallback(() => {
+    isBatched.current = true;
+  }, []);
+  var endUndoGroup = useCallback(() => {
+    isBatched.current = false;
+  }, []);
+  useEffect(() => {
+    if (isUndoRedoAction.current) {
+      onMovedColumnsChanged(state.movedColumns);
+      onColumnVisibilityChanged(hiddenColumns, true);
+      onColumnVisibilityChanged(state.hiddenColumns, false);
+      onColumnHeaderGroupChanged(state.columnHeaderGroups);
+      onFrozenColumnsChanged(state.frozenColumns);
+      isUndoRedoAction.current = false;
+    } else if (
+    // If the parent props changed and it's not an undo/redo action, update the undo state
+    !isBatched.current && (movedColumns !== state.movedColumns || columnHeaderGroups !== state.columnHeaderGroups || hiddenColumns.length !== state.hiddenColumns.length || hiddenColumns.some((col, index) => col !== state.hiddenColumns[index]))) {
+      setUndoState({
+        movedColumns,
+        hiddenColumns,
+        columnHeaderGroups,
+        frozenColumns: props.model.frozenColumns
+      });
+    }
+  }, [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]);
+  var handleUndo = useCallback(() => {
+    isUndoRedoAction.current = true;
+    undo();
+  }, [undo]);
+  var handleRedo = useCallback(() => {
+    isUndoRedoAction.current = true;
+    redo();
+  }, [redo]);
+  return /*#__PURE__*/_jsx(VisibilityOrderingBuilderInner
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  , _objectSpread(_objectSpread({}, props), {}, {
+    ref: __testRef,
+    movedColumns: movedColumns,
+    hiddenColumns: hiddenColumns,
+    columnHeaderGroups: columnHeaderGroups,
+    onMovedColumnsChanged: onMovedColumnsChanged,
+    onColumnVisibilityChanged: onColumnVisibilityChanged,
+    onColumnHeaderGroupChanged: handleColumnHeaderGroupChanged,
+    undo: handleUndo,
+    canUndo: canUndo,
+    redo: handleRedo,
+    canRedo: canRedo,
+    startUndoGroup: startUndoGroup,
+    endUndoGroup: endUndoGroup
+  }));
+});
+VisibilityOrderingBuilder.displayName = 'VisibilityOrderingBuilder';
 export default VisibilityOrderingBuilder;
 //# sourceMappingURL=VisibilityOrderingBuilder.js.map