@deephaven/iris-grid 0.53.1-beta.4 → 0.53.1-layout-manager.4

package/dist/IrisGrid.js

@@ -80,6 +80,7 @@ export class IrisGrid extends Component {
     var _model$layoutHints, _model$layoutHints$hi, _model$columns$0$name, _model$columns$;
     super(props);
     _defineProperty(this, "grid", void 0);
+    _defineProperty(this, "gridWrapper", void 0);
     _defineProperty(this, "lastFocusedFilterBarColumn", void 0);
     _defineProperty(this, "lastLoadedConfig", void 0);
     _defineProperty(this, "tooltip", void 0);
@@ -503,6 +504,7 @@ export class IrisGrid extends Component {
     this.handleGotoValueChanged = this.handleGotoValueChanged.bind(this);
     this.handleGotoValueSubmitted = this.handleGotoValueSubmitted.bind(this);
     this.grid = null;
+    this.gridWrapper = null;
     this.lastLoadedConfig = null;
     this.pending = new Pending();
     this.globalColumnFormats = EMPTY_ARRAY;
@@ -774,11 +776,6 @@ export class IrisGrid extends Component {
 
   // When the loading scrim started/when it should extend to the end of the screen.
 
-  get gridWrapper() {
-    var _this$grid$canvasWrap, _this$grid;
-    return (_this$grid$canvasWrap = (_this$grid = this.grid) === null || _this$grid === void 0 ? void 0 : _this$grid.canvasWrapper.current) !== null && _this$grid$canvasWrap !== void 0 ? _this$grid$canvasWrap : null;
-  }
-
   /**
    * Builds formatColumns array based on the provided formatting rules with optional preview
    * @param columns Array of columns
@@ -1461,8 +1458,8 @@ export class IrisGrid extends Component {
     model.removeEventListener(IrisGridModel.EVENT.PENDING_DATA_UPDATED, this.handlePendingDataUpdated);
   }
   focus() {
-    var _this$grid2;
-    (_this$grid2 = this.grid) === null || _this$grid2 === void 0 ? void 0 : _this$grid2.focus();
+    var _this$grid;
+    (_this$grid = this.grid) === null || _this$grid === void 0 ? void 0 : _this$grid.focus();
   }
   focusFilterBar(column) {
     var {
@@ -1492,16 +1489,16 @@ export class IrisGrid extends Component {
       lastLeft
     } = metrics;
     if (column < left) {
-      var _this$grid3;
-      (_this$grid3 = this.grid) === null || _this$grid3 === void 0 ? void 0 : _this$grid3.setViewState({
+      var _this$grid2;
+      (_this$grid2 = this.grid) === null || _this$grid2 === void 0 ? void 0 : _this$grid2.setViewState({
         left: column
       }, true);
     } else if (rightVisible < column) {
-      var _this$grid4, _this$grid5;
-      var metricState = (_this$grid4 = this.grid) === null || _this$grid4 === void 0 ? void 0 : _this$grid4.getMetricState();
+      var _this$grid3, _this$grid4;
+      var metricState = (_this$grid3 = this.grid) === null || _this$grid3 === void 0 ? void 0 : _this$grid3.getMetricState();
       assertNotNull(metricState);
       var newLeft = metricCalculator.getLastLeft(metricState, column, metricCalculator.getVisibleWidth(metricState));
-      (_this$grid5 = this.grid) === null || _this$grid5 === void 0 ? void 0 : _this$grid5.setViewState({
+      (_this$grid4 = this.grid) === null || _this$grid4 === void 0 ? void 0 : _this$grid4.setViewState({
         left: Math.min(newLeft, lastLeft),
         leftOffset: 0
       }, true);
@@ -1513,13 +1510,13 @@ export class IrisGrid extends Component {
     });
   }
   hideColumnByVisibleIndex(columnVisibleIndex) {
-    var _this$grid6;
+    var _this$grid5;
     var {
       metricCalculator,
       movedColumns
     } = this.state;
     metricCalculator.setColumnWidth(GridUtils.getModelIndex(columnVisibleIndex, movedColumns), 0);
-    (_this$grid6 = this.grid) === null || _this$grid6 === void 0 ? void 0 : _this$grid6.forceUpdate();
+    (_this$grid5 = this.grid) === null || _this$grid5 === void 0 ? void 0 : _this$grid5.forceUpdate();
   }
   freezeColumnByColumnName(columnName) {
     var {
@@ -1564,7 +1561,7 @@ export class IrisGrid extends Component {
     });
   }
   handleColumnVisibilityChanged(modelIndexes, isVisible) {
-    var _this$grid7;
+    var _this$grid6;
     var {
       metricCalculator,
       metrics
@@ -1585,7 +1582,7 @@ export class IrisGrid extends Component {
         metricCalculator.setColumnWidth(modelIndex, 0);
       });
     }
-    (_this$grid7 = this.grid) === null || _this$grid7 === void 0 ? void 0 : _this$grid7.forceUpdate();
+    (_this$grid6 = this.grid) === null || _this$grid6 === void 0 ? void 0 : _this$grid6.forceUpdate();
   }
   handleColumnVisibilityReset() {
     var _model$layoutHints$fr, _model$layoutHints2;
@@ -1619,8 +1616,8 @@ export class IrisGrid extends Component {
     });
   }
   handleAnimationLoop() {
-    var _this$grid8;
-    (_this$grid8 = this.grid) === null || _this$grid8 === void 0 ? void 0 : _this$grid8.updateCanvas();
+    var _this$grid7;
+    (_this$grid7 = this.grid) === null || _this$grid7 === void 0 ? void 0 : _this$grid7.updateCanvas();
     if (this.isAnimating) {
       this.animationFrame = requestAnimationFrame(this.handleAnimationLoop);
     }
@@ -1665,7 +1662,7 @@ export class IrisGrid extends Component {
     onError(error);
   }
   showAllColumns() {
-    var _this$grid9;
+    var _this$grid8;
     var {
       metricCalculator
     } = this.state;
@@ -1677,7 +1674,7 @@ export class IrisGrid extends Component {
         metricCalculator.resetColumnWidth(modelIndex);
       }
     }
-    (_this$grid9 = this.grid) === null || _this$grid9 === void 0 ? void 0 : _this$grid9.forceUpdate();
+    (_this$grid8 = this.grid) === null || _this$grid8 === void 0 ? void 0 : _this$grid8.forceUpdate();
   }
   toggleSort(columnIndex, addToExisting) {
     log.info('Toggling sort for column', columnIndex);
@@ -1697,15 +1694,15 @@ export class IrisGrid extends Component {
     }
   }
   updateSorts(sorts) {
-    var _this$grid10;
+    var _this$grid9;
     this.startLoading('Sorting...');
     this.setState({
       sorts
     });
-    (_this$grid10 = this.grid) === null || _this$grid10 === void 0 ? void 0 : _this$grid10.forceUpdate();
+    (_this$grid9 = this.grid) === null || _this$grid9 === void 0 ? void 0 : _this$grid9.forceUpdate();
   }
   sortColumn(modelColumn) {
-    var _this$grid11;
+    var _this$grid10;
     var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TableUtils.sortDirection.none;
     var isAbs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var addToExisting = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
@@ -1718,15 +1715,15 @@ export class IrisGrid extends Component {
     this.setState({
       sorts
     });
-    (_this$grid11 = this.grid) === null || _this$grid11 === void 0 ? void 0 : _this$grid11.forceUpdate();
+    (_this$grid10 = this.grid) === null || _this$grid10 === void 0 ? void 0 : _this$grid10.forceUpdate();
   }
   reverse(reverseType) {
-    var _this$grid12;
+    var _this$grid11;
     this.startLoading('Reversing...');
     this.setState({
       reverseType
     });
-    (_this$grid12 = this.grid) === null || _this$grid12 === void 0 ? void 0 : _this$grid12.forceUpdate();
+    (_this$grid11 = this.grid) === null || _this$grid11 === void 0 ? void 0 : _this$grid11.forceUpdate();
   }
   isReversible() {
     var {
@@ -1767,8 +1764,8 @@ export class IrisGrid extends Component {
         this.focusFilterBar(columnIndex);
       }
     } else {
-      var _this$grid13;
-      (_this$grid13 = this.grid) === null || _this$grid13 === void 0 ? void 0 : _this$grid13.focus();
+      var _this$grid12;
+      (_this$grid12 = this.grid) === null || _this$grid12 === void 0 ? void 0 : _this$grid12.focus();
     }
   }
   isTableSearchAvailable() {
@@ -1805,13 +1802,13 @@ export class IrisGrid extends Component {
         var _this$crossColumnRef2;
         (_this$crossColumnRef2 = this.crossColumnRef) === null || _this$crossColumnRef2 === void 0 ? void 0 : _this$crossColumnRef2.current.focus();
       } else {
-        var _this$grid14;
-        (_this$grid14 = this.grid) === null || _this$grid14 === void 0 ? void 0 : _this$grid14.focus();
+        var _this$grid13;
+        (_this$grid13 = this.grid) === null || _this$grid13 === void 0 ? void 0 : _this$grid13.focus();
       }
     });
   }
   toggleGotoRow() {
-    var _this$grid15, _this$grid16;
+    var _this$grid14, _this$grid15;
     var row = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     var columnName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
@@ -1832,8 +1829,8 @@ export class IrisGrid extends Component {
       (_this$gotoRowRef$curr = this.gotoRowRef.current) === null || _this$gotoRowRef$curr === void 0 ? void 0 : _this$gotoRowRef$curr.focus();
       return;
     }
-    var cursorRow = (_this$grid15 = this.grid) === null || _this$grid15 === void 0 ? void 0 : _this$grid15.state.cursorRow;
-    var cursorColumn = (_this$grid16 = this.grid) === null || _this$grid16 === void 0 ? void 0 : _this$grid16.state.cursorColumn;
+    var cursorRow = (_this$grid14 = this.grid) === null || _this$grid14 === void 0 ? void 0 : _this$grid14.state.cursorRow;
+    var cursorColumn = (_this$grid15 = this.grid) === null || _this$grid15 === void 0 ? void 0 : _this$grid15.state.cursorColumn;
     if (cursorRow == null || cursorColumn == null) {
       // if a cell is not selected / grid is not rendered
       this.setState({
@@ -1988,7 +1985,7 @@ export class IrisGrid extends Component {
     this.setAdvancedFilter(index, filter, options);
   }
   handleAdvancedFilterSortChange(column, direction) {
-    var _this$grid17;
+    var _this$grid16;
     var addToExisting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var {
       model
@@ -2011,11 +2008,11 @@ export class IrisGrid extends Component {
     this.setState({
       sorts
     });
-    (_this$grid17 = this.grid) === null || _this$grid17 === void 0 ? void 0 : _this$grid17.forceUpdate();
+    (_this$grid16 = this.grid) === null || _this$grid16 === void 0 ? void 0 : _this$grid16.forceUpdate();
   }
   handleAdvancedFilterDone() {
-    var _this$grid18;
-    (_this$grid18 = this.grid) === null || _this$grid18 === void 0 ? void 0 : _this$grid18.focus();
+    var _this$grid17;
+    (_this$grid17 = this.grid) === null || _this$grid17 === void 0 ? void 0 : _this$grid17.focus();
   }
   handleAdvancedMenuOpened(column) {
     this.setState({
@@ -2097,8 +2094,8 @@ export class IrisGrid extends Component {
     var setGridFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     var defocusInput = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     if (setGridFocus) {
-      var _this$grid19;
-      (_this$grid19 = this.grid) === null || _this$grid19 === void 0 ? void 0 : _this$grid19.focus();
+      var _this$grid18;
+      (_this$grid18 = this.grid) === null || _this$grid18 === void 0 ? void 0 : _this$grid18.focus();
     }
     if (defocusInput) {
       this.setState({
@@ -2188,7 +2185,7 @@ export class IrisGrid extends Component {
     }
   }
   handleUpdate() {
-    var _this$grid20;
+    var _this$grid19;
     log.debug2('Received model update');
     var {
       advancedFilters,
@@ -2217,17 +2214,17 @@ export class IrisGrid extends Component {
     } else {
       this.lastLoadedConfig = null;
     }
-    (_this$grid20 = this.grid) === null || _this$grid20 === void 0 ? void 0 : _this$grid20.forceUpdate();
+    (_this$grid19 = this.grid) === null || _this$grid19 === void 0 ? void 0 : _this$grid19.forceUpdate();
     this.stopLoading();
   }
   handleViewChanged(metrics) {
-    var _this$grid$state, _this$grid21;
+    var _this$grid$state, _this$grid20;
     var {
       model
     } = this.props;
     var {
       selectionEndRow = 0
-    } = (_this$grid$state = (_this$grid21 = this.grid) === null || _this$grid21 === void 0 ? void 0 : _this$grid21.state) !== null && _this$grid$state !== void 0 ? _this$grid$state : {};
+    } = (_this$grid$state = (_this$grid20 = this.grid) === null || _this$grid20 === void 0 ? void 0 : _this$grid20.state) !== null && _this$grid$state !== void 0 ? _this$grid$state : {};
     var pendingRowCount = 0;
     if (isEditableGridModel(model) && model.isEditable) {
       assertNotNull(metrics);
@@ -2255,7 +2252,7 @@ export class IrisGrid extends Component {
     });
   }
   handleSelectionChanged(selectedRanges) {
-    var _this$grid22;
+    var _this$grid21;
     assertNotNull(selectedRanges);
     var {
       onSelectionChanged
@@ -2271,7 +2268,7 @@ export class IrisGrid extends Component {
         copyOperation: null
       });
     }
-    if (((_this$grid22 = this.grid) === null || _this$grid22 === void 0 ? void 0 : _this$grid22.state.cursorRow) != null) {
+    if (((_this$grid21 = this.grid) === null || _this$grid21 === void 0 ? void 0 : _this$grid21.state.cursorRow) != null) {
       this.setState({
         gotoRow: "".concat(this.grid.state.cursorRow + 1)
       });
@@ -2290,8 +2287,8 @@ export class IrisGrid extends Component {
     this.setState({
       columnHeaderGroups: IrisGridUtils.parseColumnHeaderGroups(model, columnHeaderGroups).groups
     }, () => {
-      var _this$grid23;
-      return (_this$grid23 = this.grid) === null || _this$grid23 === void 0 ? void 0 : _this$grid23.forceUpdate();
+      var _this$grid22;
+      return (_this$grid22 = this.grid) === null || _this$grid22 === void 0 ? void 0 : _this$grid22.forceUpdate();
     });
   }
   handleTooltipRef(tooltip) {
@@ -2430,9 +2427,9 @@ export class IrisGrid extends Component {
       isReady
     } = this.state;
     if (isReady) {
-      var _this$grid24;
+      var _this$grid23;
       this.stopLoading();
-      (_this$grid24 = this.grid) === null || _this$grid24 === void 0 ? void 0 : _this$grid24.forceUpdate();
+      (_this$grid23 = this.grid) === null || _this$grid23 === void 0 ? void 0 : _this$grid23.forceUpdate();
     } else {
       this.initState();
     }
@@ -2444,7 +2441,7 @@ export class IrisGrid extends Component {
     return this.discardPending();
   }
   handlePendingDataUpdated() {
-    var _this$grid25;
+    var _this$grid24;
     log.debug('pending data updated');
     var {
       model
@@ -2458,7 +2455,7 @@ export class IrisGrid extends Component {
       pendingDataErrors,
       pendingSaveError: null
     });
-    (_this$grid25 = this.grid) === null || _this$grid25 === void 0 ? void 0 : _this$grid25.forceUpdate();
+    (_this$grid24 = this.grid) === null || _this$grid24 === void 0 ? void 0 : _this$grid24.forceUpdate();
   }
 
   /**
@@ -2818,22 +2815,22 @@ export class IrisGrid extends Component {
         gotoRowError: 'Invalid row index'
       });
     } else if (rowInt === 0) {
-      var _this$grid26;
+      var _this$grid25;
       this.setState({
         gotoRowError: '',
         gotoValueError: ''
       });
-      (_this$grid26 = this.grid) === null || _this$grid26 === void 0 ? void 0 : _this$grid26.setFocusRow(0);
+      (_this$grid25 = this.grid) === null || _this$grid25 === void 0 ? void 0 : _this$grid25.setFocusRow(0);
     } else if (rowInt < 0) {
-      var _this$grid27;
+      var _this$grid26;
       this.setState({
         gotoRowError: '',
         gotoValueError: ''
       });
-      (_this$grid27 = this.grid) === null || _this$grid27 === void 0 ? void 0 : _this$grid27.setFocusRow(rowInt + rowCount);
+      (_this$grid26 = this.grid) === null || _this$grid26 === void 0 ? void 0 : _this$grid26.setFocusRow(rowInt + rowCount);
     } else {
-      var _this$grid28;
-      (_this$grid28 = this.grid) === null || _this$grid28 === void 0 ? void 0 : _this$grid28.setFocusRow(rowInt - 1);
+      var _this$grid27;
+      (_this$grid27 = this.grid) === null || _this$grid27 === void 0 ? void 0 : _this$grid27.setFocusRow(rowInt - 1);
       this.setState({
         gotoRowError: '',
         gotoValueError: ''
@@ -2933,11 +2930,11 @@ export class IrisGrid extends Component {
     });
   }
   handleGotoValueSelectedColumnNameChanged(columnName) {
-    var _this$grid29;
+    var _this$grid28;
     var {
       model
     } = this.props;
-    var cursorRow = (_this$grid29 = this.grid) === null || _this$grid29 === void 0 ? void 0 : _this$grid29.state.cursorRow;
+    var cursorRow = (_this$grid28 = this.grid) === null || _this$grid28 === void 0 ? void 0 : _this$grid28.state.cursorRow;
     if (cursorRow != null) {
       var _index = model.getColumnIndexByName(columnName);
       var _column2 = IrisGridUtils.getColumnByName(model.columns, columnName);
@@ -2973,8 +2970,8 @@ export class IrisGrid extends Component {
     var _rollupConfig$columns3,
       _rollupConfig$columns4,
       _this6 = this,
-      _this$grid31,
-      _this$grid31$state$dr,
+      _this$grid30,
+      _this$grid30$state$dr,
       _openOptions;
     var {
       children,
@@ -3091,7 +3088,7 @@ export class IrisGrid extends Component {
       var columnX = allColumnXs.get(focusedFilterBarColumn);
       var columnWidth = allColumnWidths.get(focusedFilterBarColumn);
       if (columnX != null && columnWidth != null) {
-        var _theme$filterBarHeigh, _theme$filterBarHeigh2, _this$grid30;
+        var _theme$filterBarHeigh, _theme$filterBarHeigh2, _this$grid29;
         var x = gridX + columnX;
         var y = gridY - ((_theme$filterBarHeigh = theme.filterBarHeight) !== null && _theme$filterBarHeigh !== void 0 ? _theme$filterBarHeigh : 0);
         var fieldWidth = columnWidth + 1; // cover right border
@@ -3131,7 +3128,7 @@ export class IrisGrid extends Component {
           onChange: this.handleFilterBarChange,
           onDone: this.handleFilterBarDone,
           onTab: this.handleFilterBarTab,
-          onContextMenu: (_this$grid30 = this.grid) === null || _this$grid30 === void 0 ? void 0 : _this$grid30.handleContextMenu,
+          onContextMenu: (_this$grid29 = this.grid) === null || _this$grid29 === void 0 ? void 0 : _this$grid29.handleContextMenu,
           debounceMs: debounceMs,
           value: _value4
         }, focusedFilterBarColumn);
@@ -3471,27 +3468,32 @@ export class IrisGrid extends Component {
               ref: this.crossColumnRef
             })
           })
-        }), /*#__PURE__*/_jsxs(Grid, {
-          ref: grid => {
-            this.grid = grid;
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "grid-wrapper",
+          ref: gridWrapper => {
+            this.gridWrapper = gridWrapper;
           },
-          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,
-          children: [/*#__PURE__*/_jsx(IrisGridCellOverflowModal, {
+          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
@@ -3509,7 +3511,7 @@ export class IrisGrid extends Component {
             movedColumns: movedColumns,
             customColumns: customColumns,
             hiddenColumns: hiddenColumns,
-            alwaysFetchColumns: this.getAlwaysFetchColumns(alwaysFetchColumns, model.columns, movedColumns, model.floatingLeftColumnCount, model.floatingRightColumnCount, (_this$grid31 = this.grid) === null || _this$grid31 === void 0 ? void 0 : (_this$grid31$state$dr = _this$grid31.state.draggingColumn) === null || _this$grid31$state$dr === void 0 ? void 0 : _this$grid31$state$dr.range),
+            alwaysFetchColumns: this.getAlwaysFetchColumns(alwaysFetchColumns, model.columns, movedColumns, model.floatingLeftColumnCount, model.floatingRightColumnCount, (_this$grid30 = this.grid) === null || _this$grid30 === void 0 ? void 0 : (_this$grid30$state$dr = _this$grid30.state.draggingColumn) === null || _this$grid30$state$dr === void 0 ? void 0 : _this$grid30$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),