@deephaven/iris-grid 0.46.1-beta.2 → 0.46.1-beta.7

package/dist/IrisGrid.js

@@ -49,6 +49,8 @@ import ConditionalFormattingMenu from "./sidebar/conditional-formatting/Conditio
 import ConditionalFormatEditor from "./sidebar/conditional-formatting/ConditionalFormatEditor.js";
 import IrisGridCellOverflowModal from "./IrisGridCellOverflowModal.js";
 import GotoRow from "./GotoRow.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var log = Log.module('IrisGrid');
 var UPDATE_DOWNLOAD_THROTTLE = 500;
 var SET_FILTER_DEBOUNCE = 250;
@@ -107,7 +109,7 @@ export class IrisGrid extends Component {
     _defineProperty(this, "getAdvancedMenuOpenedHandler", memoize(column => this.handleAdvancedMenuOpened.bind(this, column), {
       max: 100
     }));
-    _defineProperty(this, "getCachedAdvancedFilterMenuActions", memoize((model, column, advancedFilterOptions, sortDirection, formatter) => /*#__PURE__*/React.createElement(AdvancedFilterCreator, {
+    _defineProperty(this, "getCachedAdvancedFilterMenuActions", memoize((model, column, advancedFilterOptions, sortDirection, formatter) => /*#__PURE__*/_jsx(AdvancedFilterCreator, {
       model: model,
       column: column,
       onFilterChange: this.handleAdvancedFilterChange,
@@ -356,13 +358,14 @@ export class IrisGrid extends Component {
           }
         }
       };
-      return /*#__PURE__*/React.createElement("div", {
-        style: wrapperStyle
-      }, /*#__PURE__*/React.createElement(Tooltip, {
-        key: Date.now(),
-        options: popperOptions,
-        ref: this.handleTooltipRef
-      }, "View full contents"));
+      return /*#__PURE__*/_jsx("div", {
+        style: wrapperStyle,
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          options: popperOptions,
+          ref: this.handleTooltipRef,
+          children: "View full contents"
+        }, Date.now())
+      });
     }));
     _defineProperty(this, "getExpandCellTooltip", memoize(expandCellTooltipProps => {
       if (expandCellTooltipProps == null) {
@@ -379,17 +382,19 @@ export class IrisGrid extends Component {
       var popperOptions = {
         placement: 'bottom-start'
       };
-      return /*#__PURE__*/React.createElement("div", {
-        style: wrapperStyle
-      }, /*#__PURE__*/React.createElement(Tooltip, {
-        key: Date.now(),
-        options: popperOptions,
-        ref: this.handleTooltipRef
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          textAlign: 'left'
-        }
-      }, "Click to ", expandTooltipDisplayValue, " row", /*#__PURE__*/React.createElement("br", null), ContextActionUtils.isMacPlatform() ? '⌘' : 'Ctrl+', "Click to expand row and all children")));
+      return /*#__PURE__*/_jsx("div", {
+        style: wrapperStyle,
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          options: popperOptions,
+          ref: this.handleTooltipRef,
+          children: /*#__PURE__*/_jsxs("div", {
+            style: {
+              textAlign: 'left'
+            },
+            children: ["Click to ", expandTooltipDisplayValue, " row", /*#__PURE__*/_jsx("br", {}), ContextActionUtils.isMacPlatform() ? '⌘' : 'Ctrl+', "Click to expand row and all children"]
+          })
+        }, Date.now())
+      });
     }));
     _defineProperty(this, "getLinkHoverTooltip", memoize(linkHoverTooltipProps => {
       if (linkHoverTooltipProps == null) {
@@ -406,14 +411,17 @@ export class IrisGrid extends Component {
       var popperOptions = {
         placement: 'bottom'
       };
-      return /*#__PURE__*/React.createElement("div", {
-        style: wrapperStyle
-      }, /*#__PURE__*/React.createElement(Tooltip, {
-        options: popperOptions,
-        ref: this.handleTooltipRef
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "link-hover-tooltip"
-      }, linkHoverDisplayValue, " - Click once to follow.", /*#__PURE__*/React.createElement("br", null), "Click and hold to select this cell.")));
+      return /*#__PURE__*/_jsx("div", {
+        style: wrapperStyle,
+        children: /*#__PURE__*/_jsx(Tooltip, {
+          options: popperOptions,
+          ref: this.handleTooltipRef,
+          children: /*#__PURE__*/_jsxs("div", {
+            className: "link-hover-tooltip",
+            children: [linkHoverDisplayValue, " - Click once to follow.", /*#__PURE__*/_jsx("br", {}), "Click and hold to select this cell."]
+          })
+        })
+      });
     }));
     _defineProperty(this, "handleGotoValueChanged", input => {
       this.setState({
@@ -2040,9 +2048,10 @@ export class IrisGrid extends Component {
   handleGridError(error) {
     log.warn('Grid Error', error);
     this.setState({
-      toastMessage: /*#__PURE__*/React.createElement("div", {
-        className: "error-message"
-      }, "".concat(error))
+      toastMessage: /*#__PURE__*/_jsx("div", {
+        className: "error-message",
+        children: "".concat(error)
+      })
     });
   }
   handleFilterBarChange(value) {
@@ -2872,28 +2881,29 @@ export class IrisGrid extends Component {
     if (modelColumn == null) return null;
     var column = model.columns[modelColumn];
     if (column == null) return null;
-    return /*#__PURE__*/React.createElement("div", {
-      style: wrapperStyle
-    }, /*#__PURE__*/React.createElement(Tooltip, {
-      key: column.name,
-      timeout: 400,
-      interactive: true,
-      options: popperOptions,
-      ref: this.handleTooltipRef,
-      referenceObject: virtualReference,
-      onExited: () => {
-        this.setState({
-          shownColumnTooltip: null
-        });
-      }
-    }, /*#__PURE__*/React.createElement(ColumnStatistics, {
-      model: model,
-      column: column,
-      onStatistics: () => {
-        var _this$tooltip;
-        (_this$tooltip = this.tooltip) === null || _this$tooltip === void 0 ? void 0 : _this$tooltip.update();
-      }
-    })));
+    return /*#__PURE__*/_jsx("div", {
+      style: wrapperStyle,
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        timeout: 400,
+        interactive: true,
+        options: popperOptions,
+        ref: this.handleTooltipRef,
+        referenceObject: virtualReference,
+        onExited: () => {
+          this.setState({
+            shownColumnTooltip: null
+          });
+        },
+        children: /*#__PURE__*/_jsx(ColumnStatistics, {
+          model: model,
+          column: column,
+          onStatistics: () => {
+            var _this$tooltip;
+            (_this$tooltip = this.tooltip) === null || _this$tooltip === void 0 ? void 0 : _this$tooltip.update();
+          }
+        })
+      }, column.name)
+    });
   }
   handleGotoValueSelectedColumnNameChanged(columnName) {
     var _this$grid27;
@@ -3077,7 +3087,7 @@ export class IrisGrid extends Component {
           isValid = quickFilter.filter != null;
         }
         var isBarFiltered = quickFilters.size !== 0 || advancedFilters.size !== 0;
-        focusField = /*#__PURE__*/React.createElement(FilterInputField, {
+        focusField = /*#__PURE__*/_jsx(FilterInputField, {
           ref: this.filterInputRef,
           style: style,
           className: classNames({
@@ -3091,41 +3101,44 @@ export class IrisGrid extends Component {
               shownAdvancedFilter: focusedFilterBarColumn
             });
           },
-          key: focusedFilterBarColumn,
           onChange: this.handleFilterBarChange,
           onDone: this.handleFilterBarDone,
           onTab: this.handleFilterBarTab,
           onContextMenu: (_this$grid28 = this.grid) === null || _this$grid28 === void 0 ? void 0 : _this$grid28.handleContextMenu,
           debounceMs: debounceMs,
           value: _value5
-        });
+        }, focusedFilterBarColumn);
       }
     }
     var loadingElement = null;
     if (loadingText != null) {
-      var loadingStatus = /*#__PURE__*/React.createElement("div", {
-        className: "iris-grid-loading-status"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames('iris-grid-loading-status-bar', {
-          show: loadingSpinnerShown
-        })
-      }, loadingText), /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        onClick: this.handleCancel,
-        className: classNames('iris-grid-btn-cancel', {
-          show: loadingSpinnerShown
-        })
-      }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-        icon: vsClose,
-        transform: "down-1"
-      }), "Cancel"));
+      var loadingStatus = /*#__PURE__*/_jsxs("div", {
+        className: "iris-grid-loading-status",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: classNames('iris-grid-loading-status-bar', {
+            show: loadingSpinnerShown
+          }),
+          children: loadingText
+        }), /*#__PURE__*/_jsxs("button", {
+          type: "button",
+          onClick: this.handleCancel,
+          className: classNames('iris-grid-btn-cancel', {
+            show: loadingSpinnerShown
+          }),
+          children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+            icon: vsClose,
+            transform: "down-1"
+          }), "Cancel"]
+        })]
+      });
       var _gridY = metrics ? metrics.gridY : 0;
-      loadingElement = /*#__PURE__*/React.createElement("div", {
+      loadingElement = /*#__PURE__*/_jsx("div", {
         className: "iris-grid-loading",
         style: {
           top: _gridY
-        }
-      }, loadingStatus);
+        },
+        children: loadingStatus
+      });
     }
     var columnTooltip = null;
     if (shownColumnTooltip != null && metrics) {
@@ -3164,45 +3177,47 @@ export class IrisGrid extends Component {
             var _advancedFilter = advancedFilters.get(modelColumn);
             var isFilterSet = _advancedFilter != null;
             var isFilterVisible = columnIndex === hoverAdvancedFilter || columnIndex === focusedFilterBarColumn || isFilterSet;
-            var element = /*#__PURE__*/React.createElement("div", {
+            var element = /*#__PURE__*/_jsx("div", {
               className: classNames('advanced-filter-button-container', {
                 hidden: !isFilterVisible
               }),
-              key: columnIndex,
-              style: _style
-            }, isFilterVisible && /*#__PURE__*/React.createElement(Button, {
-              kind: "ghost",
-              className: classNames('btn-link-icon advanced-filter-button', {
-                'filter-set': isFilterSet
-              }),
-              onClick: () => {
-                _this6.setState({
-                  shownAdvancedFilter: columnIndex
-                });
-              },
-              onContextMenu: event => {
-                var _this6$grid;
-                (_this6$grid = _this6.grid) === null || _this6$grid === void 0 ? void 0 : _this6$grid.handleContextMenu(event);
-              },
-              onMouseEnter: () => {
-                _this6.setState({
-                  hoverAdvancedFilter: columnIndex
-                });
-              },
-              onMouseLeave: () => {
-                _this6.setState({
-                  hoverAdvancedFilter: null
-                });
-              }
-            }, /*#__PURE__*/React.createElement("div", {
-              className: "fa-layers"
-            }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-              icon: dhFilterFilled,
-              className: "filter-solid"
-            }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-              icon: vsFilter,
-              className: "filter-light"
-            }))));
+              style: _style,
+              children: isFilterVisible && /*#__PURE__*/_jsx(Button, {
+                kind: "ghost",
+                className: classNames('btn-link-icon advanced-filter-button', {
+                  'filter-set': isFilterSet
+                }),
+                onClick: () => {
+                  _this6.setState({
+                    shownAdvancedFilter: columnIndex
+                  });
+                },
+                onContextMenu: event => {
+                  var _this6$grid;
+                  (_this6$grid = _this6.grid) === null || _this6$grid === void 0 ? void 0 : _this6$grid.handleContextMenu(event);
+                },
+                onMouseEnter: () => {
+                  _this6.setState({
+                    hoverAdvancedFilter: columnIndex
+                  });
+                },
+                onMouseLeave: () => {
+                  _this6.setState({
+                    hoverAdvancedFilter: null
+                  });
+                },
+                children: /*#__PURE__*/_jsxs("div", {
+                  className: "fa-layers",
+                  children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+                    icon: dhFilterFilled,
+                    className: "filter-solid"
+                  }), /*#__PURE__*/_jsx(FontAwesomeIcon, {
+                    icon: vsFilter,
+                    className: "filter-light"
+                  })]
+                })
+              })
+            }, columnIndex);
             filterBar.push(element);
           }
         }
@@ -3255,23 +3270,24 @@ export class IrisGrid extends Component {
             } = _advancedFilter2 || {};
             var sort = TableUtils.getSortForColumn(model.sort, _column4.name);
             var sortDirection = sort ? sort.direction : null;
-            var element = /*#__PURE__*/React.createElement("div", {
-              key: columnIndex,
+            var element = /*#__PURE__*/_jsx("div", {
               className: "advanced-filter-menu-container",
-              style: _style2
-            }, /*#__PURE__*/React.createElement(Popper, {
-              className: "advanced-filter-menu-popper",
-              onEntered: _this6.getAdvancedMenuOpenedHandler(columnIndex),
-              onExited: () => {
-                _this6.handleAdvancedMenuClosed(columnIndex);
-              },
-              isShown: shownAdvancedFilter === columnIndex,
-              interactive: true,
-              closeOnBlur: true,
-              options: {
-                positionFixed: true
-              }
-            }, _this6.getCachedAdvancedFilterMenuActions(model, _column4, advancedFilterOptions, sortDirection, formatter)));
+              style: _style2,
+              children: /*#__PURE__*/_jsx(Popper, {
+                className: "advanced-filter-menu-popper",
+                onEntered: _this6.getAdvancedMenuOpenedHandler(columnIndex),
+                onExited: () => {
+                  _this6.handleAdvancedMenuClosed(columnIndex);
+                },
+                isShown: shownAdvancedFilter === columnIndex,
+                interactive: true,
+                closeOnBlur: true,
+                options: {
+                  positionFixed: true
+                },
+                children: _this6.getCachedAdvancedFilterMenuActions(model, _column4, advancedFilterOptions, sortDirection, formatter)
+              })
+            }, columnIndex);
             advancedFilterMenus.push(element);
           }
         }
@@ -3286,14 +3302,13 @@ export class IrisGrid extends Component {
     var openOptionsStack = openOptions.map(option => {
       switch (option.type) {
         case OptionType.CHART_BUILDER:
-          return /*#__PURE__*/React.createElement(ChartBuilder, {
+          return /*#__PURE__*/_jsx(ChartBuilder, {
             model: model,
             onChange: this.handleChartChange,
-            onSubmit: this.handleChartCreate,
-            key: OptionType.CHART_BUILDER
-          });
+            onSubmit: this.handleChartCreate
+          }, OptionType.CHART_BUILDER);
         case OptionType.VISIBILITY_ORDERING_BUILDER:
-          return /*#__PURE__*/React.createElement(VisibilityOrderingBuilder, {
+          return /*#__PURE__*/_jsx(VisibilityOrderingBuilder, {
             model: model,
             movedColumns: movedColumns,
             hiddenColumns: hiddenColumns,
@@ -3301,11 +3316,10 @@ export class IrisGrid extends Component {
             onColumnVisibilityChanged: this.handleColumnVisibilityChanged,
             onReset: this.handleColumnVisibilityReset,
             onMovedColumnsChanged: this.handleMovedColumnsChanged,
-            onColumnHeaderGroupChanged: this.handleHeaderGroupsChanged,
-            key: OptionType.VISIBILITY_ORDERING_BUILDER
-          });
+            onColumnHeaderGroupChanged: this.handleHeaderGroupsChanged
+          }, OptionType.VISIBILITY_ORDERING_BUILDER);
         case OptionType.CONDITIONAL_FORMATTING:
-          return /*#__PURE__*/React.createElement(ConditionalFormattingMenu, {
+          return /*#__PURE__*/_jsx(ConditionalFormattingMenu, {
             rules: conditionalFormats,
             onChange: this.handleConditionalFormatsChange,
             onCreate: this.handleConditionalFormatCreate,
@@ -3314,7 +3328,7 @@ export class IrisGrid extends Component {
         case OptionType.CONDITIONAL_FORMATTING_EDIT:
           assertNotNull(model.columns);
           assertNotNull(this.handleConditionalFormatEditorUpdate);
-          return /*#__PURE__*/React.createElement(ConditionalFormatEditor, {
+          return /*#__PURE__*/_jsx(ConditionalFormatEditor, {
             dh: model.dh,
             columns: model.columns,
             rule: conditionalFormatPreview,
@@ -3323,35 +3337,33 @@ export class IrisGrid extends Component {
             onCancel: this.handleConditionalFormatEditorCancel
           });
         case OptionType.CUSTOM_COLUMN_BUILDER:
-          return /*#__PURE__*/React.createElement(CustomColumnBuilder, {
+          return /*#__PURE__*/_jsx(CustomColumnBuilder, {
             model: model,
             customColumns: customColumns,
             onSave: this.handleUpdateCustomColumns,
-            onCancel: this.handleMenuBack,
-            key: OptionType.CUSTOM_COLUMN_BUILDER
-          });
+            onCancel: this.handleMenuBack
+          }, OptionType.CUSTOM_COLUMN_BUILDER);
         case OptionType.ROLLUP_ROWS:
-          return /*#__PURE__*/React.createElement(RollupRows, {
+          return /*#__PURE__*/_jsx(RollupRows, {
             model: model,
             onChange: this.handleRollupChange,
-            config: rollupConfig,
-            key: OptionType.ROLLUP_ROWS
-          });
+            config: rollupConfig
+          }, OptionType.ROLLUP_ROWS);
         case OptionType.AGGREGATIONS:
-          return /*#__PURE__*/React.createElement(Aggregations, {
+          return /*#__PURE__*/_jsx(Aggregations, {
             settings: aggregationSettings,
             isRollup: isRollup,
             onChange: this.handleAggregationsChange,
             onEdit: this.handleAggregationEdit
           });
         case OptionType.AGGREGATION_EDIT:
-          return selectedAggregation && /*#__PURE__*/React.createElement(AggregationEdit, {
+          return selectedAggregation && /*#__PURE__*/_jsx(AggregationEdit, {
             aggregation: selectedAggregation,
             columns: model.originalColumns,
             onChange: this.handleAggregationChange
           });
         case OptionType.TABLE_EXPORTER:
-          return /*#__PURE__*/React.createElement(TableCsvExporter, {
+          return /*#__PURE__*/_jsx(TableCsvExporter, {
             model: model,
             name: name,
             userColumnWidths: userColumnWidths,
@@ -3363,17 +3375,16 @@ export class IrisGrid extends Component {
             onDownload: this.handleDownloadTable,
             onDownloadStart: this.handleDownloadTableStart,
             onCancel: this.handleCancelDownloadTable,
-            selectedRanges: selectedRanges,
-            key: OptionType.TABLE_EXPORTER
-          });
+            selectedRanges: selectedRanges
+          }, OptionType.TABLE_EXPORTER);
         case OptionType.SELECT_DISTINCT:
-          return /*#__PURE__*/React.createElement(SelectDistinctBuilder, {
+          return /*#__PURE__*/_jsx(SelectDistinctBuilder, {
             model: model,
             selectDistinctColumns: selectDistinctColumns,
             onChange: this.handleSelectDistinctChanged
           });
         case OptionType.ADVANCED_SETTINGS:
-          return /*#__PURE__*/React.createElement(AdvancedSettingsMenu, {
+          return /*#__PURE__*/_jsx(AdvancedSettingsMenu, {
             items: advancedSettings,
             onChange: onAdvancedSettingsChange
           });
@@ -3381,199 +3392,215 @@ export class IrisGrid extends Component {
           throw Error("Unexpected option type ".concat(option.type));
       }
     });
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/_jsxs("div", {
       className: "iris-grid",
-      role: "presentation"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "iris-grid-column"
-    }, children != null && /*#__PURE__*/React.createElement("div", {
-      className: "iris-grid-bar"
-    }, children), /*#__PURE__*/React.createElement(CSSTransition, {
-      in: isSelectingPartition,
-      timeout: ThemeExport.transitionSlowMs,
-      classNames: "iris-grid-bar-horizontal",
-      onEnter: this.handleAnimationStart,
-      onEntered: this.handleAnimationEnd,
-      onExit: this.handleAnimationStart,
-      onExited: this.handleAnimationEnd,
-      mountOnEnter: true,
-      unmountOnExit: true
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "iris-grid-partition-selector-wrapper iris-grid-bar iris-grid-bar-primary"
-    }, partitionTable && partitionColumn && partition != null && /*#__PURE__*/React.createElement(IrisGridPartitionSelector, {
-      dh: model.dh,
-      table: partitionTable,
-      getFormattedString: (value, type, stringName) => model.displayString(value, type, stringName),
-      columnName: partitionColumn.name,
-      partition: partition,
-      onChange: this.handlePartitionChange,
-      onFetchAll: this.handlePartitionFetchAll,
-      onAppend: this.handlePartitionAppend,
-      onDone: this.handlePartitionDone
-    }))), /*#__PURE__*/React.createElement(CSSTransition, {
-      in: showSearchBar,
-      timeout: ThemeExport.transitionSlowMs,
-      classNames: "iris-grid-bar-horizontal",
-      onEnter: this.handleAnimationStart,
-      onEntered: this.handleAnimationEnd,
-      onExit: this.handleAnimationStart,
-      onExited: this.handleAnimationEnd,
-      mountOnEnter: true,
-      unmountOnExit: true
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "iris-grid-bar"
-    }, /*#__PURE__*/React.createElement(CrossColumnSearch, {
-      value: searchValue,
-      selectedColumns: selectedSearchColumns,
-      invertSelection: invertSearchColumns,
-      onChange: this.handleCrossColumnSearch,
-      columns: model.columns,
-      ref: this.crossColumnRef
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: "grid-wrapper",
-      ref: gridWrapper => {
-        this.gridWrapper = gridWrapper;
-      }
-    }, /*#__PURE__*/React.createElement(Grid, {
-      ref: grid => {
-        this.grid = grid;
-      },
-      isStickyBottom: !isEditableGridModel(model) || !model.isEditable,
-      isStuckToBottom: isStuckToBottom,
-      isStuckToRight: isStuckToRight,
-      metricCalculator: metricCalculator,
-      model: model,
-      keyHandlers: keyHandlers,
-      mouseHandlers: mouseHandlers,
-      movedColumns: movedColumns,
-      movedRows: movedRows,
-      onError: this.handleGridError,
-      onViewChanged: this.handleViewChanged,
-      onSelectionChanged: this.handleSelectionChanged,
-      onMovedColumnsChanged: this.handleMovedColumnsChanged,
-      renderer: this.renderer,
-      stateOverride: stateOverride,
-      theme: theme
-    }), /*#__PURE__*/React.createElement(IrisGridCellOverflowModal, {
-      isOpen: showOverflowModal,
-      text: overflowText,
-      onClose: this.handleOverflowClose
-    }), isVisible && /*#__PURE__*/React.createElement(IrisGridModelUpdater, {
-      model: model,
-      modelColumns: model.columns,
-      top: top,
-      bottom: bottom,
-      left: left,
-      right: right,
-      filter: filter,
-      formatter: formatter,
-      sorts: sorts,
-      reverseType: reverseType,
-      movedColumns: movedColumns,
-      customColumns: customColumns,
-      hiddenColumns: hiddenColumns,
-      alwaysFetchColumns: this.getAlwaysFetchColumns(alwaysFetchColumns, model.columns, movedColumns, model.floatingLeftColumnCount, model.floatingRightColumnCount, (_this$grid29 = this.grid) === null || _this$grid29 === void 0 ? void 0 : (_this$grid29$state$dr = _this$grid29.state.draggingColumn) === null || _this$grid29$state$dr === void 0 ? void 0 : _this$grid29$state$dr.range),
-      formatColumns: this.getCachedPreviewFormatColumns(model.dh, model.columns, conditionalFormats, conditionalFormatPreview,
-      // Disable the preview format when we press Back on the format edit page
-      ((_openOptions = openOptions[openOptions.length - 1]) === null || _openOptions === void 0 ? void 0 : _openOptions.type) === OptionType.CONDITIONAL_FORMATTING_EDIT ? conditionalFormatEditIndex !== null && conditionalFormatEditIndex !== void 0 ? conditionalFormatEditIndex : undefined : undefined),
-      rollupConfig: this.getModelRollupConfig(model.originalColumns, rollupConfig, aggregationSettings),
-      totalsConfig: this.getModelTotalsConfig(model.columns, rollupConfig, aggregationSettings),
-      selectDistinctColumns: selectDistinctColumns,
-      pendingRowCount: pendingRowCount,
-      pendingDataMap: pendingDataMap,
-      frozenColumns: frozenColumns,
-      columnHeaderGroups: columnHeaderGroups
-    }), !isMenuShown && /*#__PURE__*/React.createElement("div", {
-      className: "grid-settings-button"
-    }, /*#__PURE__*/React.createElement(Button, {
-      kind: "ghost",
-      "data-testid": "btn-iris-grid-settings-button-".concat(name),
-      onClick: this.handleMenu,
-      icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-        icon: vsMenu,
-        transform: "up-1"
-      }),
-      tooltip: "Table Options"
-    })), focusField, loadingElement, filterBar, columnTooltip, advancedFilterMenus, overflowButtonTooltipProps && this.getOverflowButtonTooltip(overflowButtonTooltipProps), expandCellTooltipProps && this.getExpandCellTooltip(expandCellTooltipProps), linkHoverTooltipProps && this.getLinkHoverTooltip(linkHoverTooltipProps)), /*#__PURE__*/React.createElement(GotoRow, {
-      model: model,
-      isShown: isGotoShown,
-      gotoRow: gotoRow,
-      gotoRowError: gotoRowError,
-      gotoValueError: gotoValueError,
-      onGotoRowSubmit: this.handleGotoRowSelectedRowNumberSubmit,
-      onGotoRowNumberChanged: this.handleGotoRowSelectedRowNumberChanged,
-      onClose: this.handleGotoRowClosed,
-      onEntering: this.handleAnimationStart,
-      onEntered: this.handleAnimationEnd,
-      onExiting: () => {
-        this.handleAnimationStart();
-        this.focus();
-      },
-      onExited: this.handleAnimationEnd,
-      gotoValueSelectedColumnName: gotoValueSelectedColumnName,
-      gotoValue: gotoValue,
-      gotoValueFilter: gotoValueSelectedFilter,
-      onGotoValueSelectedColumnNameChanged: this.handleGotoValueSelectedColumnNameChanged,
-      onGotoValueSelectedFilterChanged: this.handleGotoValueSelectedFilterChanged,
-      onGotoValueChanged: this.handleGotoValueChanged,
-      onGotoValueSubmit: this.handleGotoValueSubmitted
-    }), /*#__PURE__*/React.createElement(PendingDataBottomBar, {
-      error: pendingSaveError,
-      isSaving: pendingSavePromise != null,
-      saveTooltip: "Commit (".concat(this.commitAction.shortcut.getDisplayText(), ")"),
-      discardTooltip: "Discard (".concat(this.discardAction.shortcut.getDisplayText(), ")"),
-      pendingDataErrors: pendingDataErrors,
-      pendingDataMap: pendingDataMap,
-      onEntering: this.handleAnimationStart,
-      onEntered: this.handleAnimationEnd,
-      onExiting: this.handleAnimationStart,
-      onExited: this.handleAnimationEnd,
-      onSave: this.handlePendingCommitClicked,
-      onDiscard: this.handlePendingDiscardClicked
-    }), /*#__PURE__*/React.createElement(ToastBottomBar, null, toastMessage), /*#__PURE__*/React.createElement(IrisGridCopyHandler, {
-      model: model,
-      copyOperation: copyOperation !== null && copyOperation !== void 0 ? copyOperation : undefined,
-      onEntering: this.handleAnimationStart,
-      onEntered: this.handleAnimationEnd,
-      onExiting: this.handleAnimationStart,
-      onExited: this.handleAnimationEnd
-    }), /*#__PURE__*/React.createElement(TableSaver, {
-      dh: model.dh,
-      ref: tableSaver => {
-        this.tableSaver = tableSaver;
-      },
-      getDownloadWorker: getDownloadWorker,
-      onDownloadCompleted: this.handleDownloadCompleted,
-      onDownloadCanceled: this.handleDownloadCanceled,
-      onDownloadProgressUpdate: this.handleDownloadProgressUpdate,
-      isDownloading: tableDownloadStatus === TableCsvExporter.DOWNLOAD_STATUS.DOWNLOADING,
-      formatter: formatter
-    })), /*#__PURE__*/React.createElement(CSSTransition, {
-      in: isMenuShown,
-      timeout: ThemeExport.transitionMidMs,
-      classNames: "slide-left",
-      onEntering: this.handleAnimationStart,
-      onEntered: this.handleAnimationEnd,
-      onExiting: this.handleAnimationStart,
-      onExited: this.handleAnimationEnd,
-      mountOnEnter: true,
-      unmountOnExit: true
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "table-sidebar"
-    }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Page, {
-      title: "Table Options",
-      onClose: this.handleMenuClose
-    }, /*#__PURE__*/React.createElement(Menu, {
-      onSelect: i => this.handleMenuSelect(optionItems[i]),
-      items: optionItems
-    })), openOptionsStack.map((option, i) => /*#__PURE__*/React.createElement(Page, {
-      title: openOptions[i].title,
-      onBack: this.handleMenuBack,
-      onClose: this.handleMenuClose,
-      key: openOptions[i].type
-    }, option))))), /*#__PURE__*/React.createElement(ContextActions, {
-      actions: this.contextActions
-    }));
+      role: "presentation",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "iris-grid-column",
+        children: [children != null && /*#__PURE__*/_jsx("div", {
+          className: "iris-grid-bar",
+          children: children
+        }), /*#__PURE__*/_jsx(CSSTransition, {
+          in: isSelectingPartition,
+          timeout: ThemeExport.transitionSlowMs,
+          classNames: "iris-grid-bar-horizontal",
+          onEnter: this.handleAnimationStart,
+          onEntered: this.handleAnimationEnd,
+          onExit: this.handleAnimationStart,
+          onExited: this.handleAnimationEnd,
+          mountOnEnter: true,
+          unmountOnExit: true,
+          children: /*#__PURE__*/_jsx("div", {
+            className: "iris-grid-partition-selector-wrapper iris-grid-bar iris-grid-bar-primary",
+            children: partitionTable && partitionColumn && partition != null && /*#__PURE__*/_jsx(IrisGridPartitionSelector, {
+              dh: model.dh,
+              table: partitionTable,
+              getFormattedString: (value, type, stringName) => model.displayString(value, type, stringName),
+              columnName: partitionColumn.name,
+              partition: partition,
+              onChange: this.handlePartitionChange,
+              onFetchAll: this.handlePartitionFetchAll,
+              onAppend: this.handlePartitionAppend,
+              onDone: this.handlePartitionDone
+            })
+          })
+        }), /*#__PURE__*/_jsx(CSSTransition, {
+          in: showSearchBar,
+          timeout: ThemeExport.transitionSlowMs,
+          classNames: "iris-grid-bar-horizontal",
+          onEnter: this.handleAnimationStart,
+          onEntered: this.handleAnimationEnd,
+          onExit: this.handleAnimationStart,
+          onExited: this.handleAnimationEnd,
+          mountOnEnter: true,
+          unmountOnExit: true,
+          children: /*#__PURE__*/_jsx("div", {
+            className: "iris-grid-bar",
+            children: /*#__PURE__*/_jsx(CrossColumnSearch, {
+              value: searchValue,
+              selectedColumns: selectedSearchColumns,
+              invertSelection: invertSearchColumns,
+              onChange: this.handleCrossColumnSearch,
+              columns: model.columns,
+              ref: this.crossColumnRef
+            })
+          })
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "grid-wrapper",
+          ref: gridWrapper => {
+            this.gridWrapper = gridWrapper;
+          },
+          children: [/*#__PURE__*/_jsx(Grid, {
+            ref: grid => {
+              this.grid = grid;
+            },
+            isStickyBottom: !isEditableGridModel(model) || !model.isEditable,
+            isStuckToBottom: isStuckToBottom,
+            isStuckToRight: isStuckToRight,
+            metricCalculator: metricCalculator,
+            model: model,
+            keyHandlers: keyHandlers,
+            mouseHandlers: mouseHandlers,
+            movedColumns: movedColumns,
+            movedRows: movedRows,
+            onError: this.handleGridError,
+            onViewChanged: this.handleViewChanged,
+            onSelectionChanged: this.handleSelectionChanged,
+            onMovedColumnsChanged: this.handleMovedColumnsChanged,
+            renderer: this.renderer,
+            stateOverride: stateOverride,
+            theme: theme
+          }), /*#__PURE__*/_jsx(IrisGridCellOverflowModal, {
+            isOpen: showOverflowModal,
+            text: overflowText,
+            onClose: this.handleOverflowClose
+          }), isVisible && /*#__PURE__*/_jsx(IrisGridModelUpdater, {
+            model: model,
+            modelColumns: model.columns,
+            top: top,
+            bottom: bottom,
+            left: left,
+            right: right,
+            filter: filter,
+            formatter: formatter,
+            sorts: sorts,
+            reverseType: reverseType,
+            movedColumns: movedColumns,
+            customColumns: customColumns,
+            hiddenColumns: hiddenColumns,
+            alwaysFetchColumns: this.getAlwaysFetchColumns(alwaysFetchColumns, model.columns, movedColumns, model.floatingLeftColumnCount, model.floatingRightColumnCount, (_this$grid29 = this.grid) === null || _this$grid29 === void 0 ? void 0 : (_this$grid29$state$dr = _this$grid29.state.draggingColumn) === null || _this$grid29$state$dr === void 0 ? void 0 : _this$grid29$state$dr.range),
+            formatColumns: this.getCachedPreviewFormatColumns(model.dh, model.columns, conditionalFormats, conditionalFormatPreview,
+            // Disable the preview format when we press Back on the format edit page
+            ((_openOptions = openOptions[openOptions.length - 1]) === null || _openOptions === void 0 ? void 0 : _openOptions.type) === OptionType.CONDITIONAL_FORMATTING_EDIT ? conditionalFormatEditIndex !== null && conditionalFormatEditIndex !== void 0 ? conditionalFormatEditIndex : undefined : undefined),
+            rollupConfig: this.getModelRollupConfig(model.originalColumns, rollupConfig, aggregationSettings),
+            totalsConfig: this.getModelTotalsConfig(model.columns, rollupConfig, aggregationSettings),
+            selectDistinctColumns: selectDistinctColumns,
+            pendingRowCount: pendingRowCount,
+            pendingDataMap: pendingDataMap,
+            frozenColumns: frozenColumns,
+            columnHeaderGroups: columnHeaderGroups
+          }), !isMenuShown && /*#__PURE__*/_jsx("div", {
+            className: "grid-settings-button",
+            children: /*#__PURE__*/_jsx(Button, {
+              kind: "ghost",
+              "data-testid": "btn-iris-grid-settings-button-".concat(name),
+              onClick: this.handleMenu,
+              icon: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+                icon: vsMenu,
+                transform: "up-1"
+              }),
+              tooltip: "Table Options"
+            })
+          }), focusField, loadingElement, filterBar, columnTooltip, advancedFilterMenus, overflowButtonTooltipProps && this.getOverflowButtonTooltip(overflowButtonTooltipProps), expandCellTooltipProps && this.getExpandCellTooltip(expandCellTooltipProps), linkHoverTooltipProps && this.getLinkHoverTooltip(linkHoverTooltipProps)]
+        }), /*#__PURE__*/_jsx(GotoRow, {
+          model: model,
+          isShown: isGotoShown,
+          gotoRow: gotoRow,
+          gotoRowError: gotoRowError,
+          gotoValueError: gotoValueError,
+          onGotoRowSubmit: this.handleGotoRowSelectedRowNumberSubmit,
+          onGotoRowNumberChanged: this.handleGotoRowSelectedRowNumberChanged,
+          onClose: this.handleGotoRowClosed,
+          onEntering: this.handleAnimationStart,
+          onEntered: this.handleAnimationEnd,
+          onExiting: () => {
+            this.handleAnimationStart();
+            this.focus();
+          },
+          onExited: this.handleAnimationEnd,
+          gotoValueSelectedColumnName: gotoValueSelectedColumnName,
+          gotoValue: gotoValue,
+          gotoValueFilter: gotoValueSelectedFilter,
+          onGotoValueSelectedColumnNameChanged: this.handleGotoValueSelectedColumnNameChanged,
+          onGotoValueSelectedFilterChanged: this.handleGotoValueSelectedFilterChanged,
+          onGotoValueChanged: this.handleGotoValueChanged,
+          onGotoValueSubmit: this.handleGotoValueSubmitted
+        }), /*#__PURE__*/_jsx(PendingDataBottomBar, {
+          error: pendingSaveError,
+          isSaving: pendingSavePromise != null,
+          saveTooltip: "Commit (".concat(this.commitAction.shortcut.getDisplayText(), ")"),
+          discardTooltip: "Discard (".concat(this.discardAction.shortcut.getDisplayText(), ")"),
+          pendingDataErrors: pendingDataErrors,
+          pendingDataMap: pendingDataMap,
+          onEntering: this.handleAnimationStart,
+          onEntered: this.handleAnimationEnd,
+          onExiting: this.handleAnimationStart,
+          onExited: this.handleAnimationEnd,
+          onSave: this.handlePendingCommitClicked,
+          onDiscard: this.handlePendingDiscardClicked
+        }), /*#__PURE__*/_jsx(ToastBottomBar, {
+          children: toastMessage
+        }), /*#__PURE__*/_jsx(IrisGridCopyHandler, {
+          model: model,
+          copyOperation: copyOperation !== null && copyOperation !== void 0 ? copyOperation : undefined,
+          onEntering: this.handleAnimationStart,
+          onEntered: this.handleAnimationEnd,
+          onExiting: this.handleAnimationStart,
+          onExited: this.handleAnimationEnd
+        }), /*#__PURE__*/_jsx(TableSaver, {
+          dh: model.dh,
+          ref: tableSaver => {
+            this.tableSaver = tableSaver;
+          },
+          getDownloadWorker: getDownloadWorker,
+          onDownloadCompleted: this.handleDownloadCompleted,
+          onDownloadCanceled: this.handleDownloadCanceled,
+          onDownloadProgressUpdate: this.handleDownloadProgressUpdate,
+          isDownloading: tableDownloadStatus === TableCsvExporter.DOWNLOAD_STATUS.DOWNLOADING,
+          formatter: formatter
+        })]
+      }), /*#__PURE__*/_jsx(CSSTransition, {
+        in: isMenuShown,
+        timeout: ThemeExport.transitionMidMs,
+        classNames: "slide-left",
+        onEntering: this.handleAnimationStart,
+        onEntered: this.handleAnimationEnd,
+        onExiting: this.handleAnimationStart,
+        onExited: this.handleAnimationEnd,
+        mountOnEnter: true,
+        unmountOnExit: true,
+        children: /*#__PURE__*/_jsx("div", {
+          className: "table-sidebar",
+          children: /*#__PURE__*/_jsxs(Stack, {
+            children: [/*#__PURE__*/_jsx(Page, {
+              title: "Table Options",
+              onClose: this.handleMenuClose,
+              children: /*#__PURE__*/_jsx(Menu, {
+                onSelect: i => this.handleMenuSelect(optionItems[i]),
+                items: optionItems
+              })
+            }), openOptionsStack.map((option, i) => /*#__PURE__*/_jsx(Page, {
+              title: openOptions[i].title,
+              onBack: this.handleMenuBack,
+              onClose: this.handleMenuClose,
+              children: option
+            }, openOptions[i].type))]
+          })
+        })
+      }), /*#__PURE__*/_jsx(ContextActions, {
+        actions: this.contextActions
+      })]
+    });
   }
 }
 _defineProperty(IrisGrid, "minDebounce", 150);