Bump dompurify, handsontable, and @testing-library/react

specifyweb/frontend/js_src/lib/components/WorkBench/WbSpreadsheet.tsx

@@ -2,7 +2,7 @@
  * Component for the Handsontable React wrapper
  */
 
-import { HotTable } from '@handsontable/react';
+import { HotTable, HotTableClass } from '@handsontable/react';
 import type Handsontable from 'handsontable';
 import type { DetailedSettings } from 'handsontable/plugins/contextMenu';
 import { registerAllModules } from 'handsontable/registry';
@@ -47,7 +47,7 @@ function WbSpreadsheetComponent({
   onClickDisambiguate: handleClickDisambiguate,
 }: {
   readonly dataset: Dataset;
-  readonly setHotTable: React.RefCallback<HotTable>;
+  readonly setHotTable: React.RefCallback<HotTableClass>;
   readonly hot: Handsontable | undefined;
   readonly isUploaded: boolean;
   readonly data: RA<RA<string | null>>;
@@ -163,10 +163,10 @@ function WbSpreadsheetComponent({
                     !disambiguation.isAmbiguousCell() || isReadOnly,
                   callback: handleClickDisambiguate,
                 },
-                ['separator_1' as 'undo']: '---------',
+                separator_1: '---------',
                 fill_down: fillCellsContextMenuItem(hot, 'down', isReadOnly),
                 fill_up: fillCellsContextMenuItem(hot, 'up', isReadOnly),
-                ['separator_2' as 'redo']: '---------',
+                separator_2: '---------',
                 undo: {
                   disabled: () => !hot.isUndoAvailable() || isReadOnly,
                 },
@@ -224,8 +224,9 @@ function WbSpreadsheetComponent({
   });
 
   return (
-    <section className="flex-1 overflow-hidden overscroll-none">
+    <section className="flex-1 overflow-hidden overscroll-none h-full">
       <HotTable
+        autoColumnSize={true}
         autoWrapCol={autoWrapCol}
         autoWrapRow={autoWrapRow}
         colHeaders={colHeaders}
@@ -248,7 +249,7 @@ function WbSpreadsheetComponent({
         readOnly={isReadOnly}
         ref={setHotTable}
         rowHeaders
-        stretchH="all"
+        viewportRowRenderingOffset={30}
         tabMoves={tabMoves}
         contextMenu={contextMenuConfig}
         // eslint-disable-next-line functional/prefer-readonly-type

specifyweb/frontend/js_src/lib/components/WorkBench/WbView.tsx

@@ -12,7 +12,7 @@
 
 import '../../../css/workbench.css';
 
-import type { HotTable } from '@handsontable/react';
+import type { HotTableClass } from '@handsontable/react';
 import type Handsontable from 'handsontable';
 import React from 'react';
 
@@ -87,7 +87,7 @@ export function WbView({
   );
 
   const spreadsheetContainerRef = React.useRef<HTMLElement>(null);
-  const [hotTable, setHotTable] = React.useState<HotTable | null>(null);
+  const [hotTable, setHotTable] = React.useState<HotTableClass | null>(null);
   const hot = hotTable?.hotInstance ?? undefined;
 
   const isUploaded =

specifyweb/frontend/js_src/lib/components/WorkBench/handsontable.ts

@@ -215,4 +215,4 @@ export function getHotPlugin<NAME extends keyof Plugins>(
   if (plugins[pluginName] === undefined)
     plugins[pluginName] = hot.getPlugin(pluginName);
   return plugins[pluginName]!;
-}
+}

specifyweb/frontend/js_src/lib/components/WorkBench/hooks.ts

@@ -1,6 +1,6 @@
 import type Handsontable from 'handsontable';
 import type { CellChange } from 'handsontable/common';
-import type { Events } from 'handsontable/pluginHooks';
+import type { Events } from 'handsontable';
 import type { Action } from 'handsontable/plugins/undoRedo';
 import React from 'react';
 
@@ -88,7 +88,7 @@ export function useHotHooks({
       if (Boolean(value) || workbench.hot === undefined) return value;
 
       const visualCol = workbench.hot.propToCol(property);
-      const physicalCol = workbench.hot.toPhysicalColumn(visualCol);
+      const physicalCol = workbench.hot.toPhysicalColumn(visualCol as number);
 
       return workbench.mappings?.defaultValues[physicalCol] ?? value;
     },
@@ -103,7 +103,7 @@ export function useHotHooks({
       const visualCol = workbench.hot.propToCol(property);
 
       const physicalRow = workbench.hot.toPhysicalRow(visualRow);
-      const physicalCol = workbench.hot.toPhysicalColumn(visualCol);
+      const physicalCol = workbench.hot.toPhysicalColumn(visualCol as number);
       const issues = workbench.cells.getCellMeta(
         physicalRow,
         physicalCol,
@@ -221,7 +221,9 @@ export function useHotHooks({
       const changes = unfilteredChanges
         .map(([visualRow, property, oldValue, newValue]) => ({
           visualRow,
-          visualCol: workbench.hot!.propToCol(property),
+          visualCol: workbench.hot!.propToCol(
+            property as number | string
+          ) as number,
           physicalRow: workbench.hot!.toPhysicalRow(visualRow),
           physicalCol:
             typeof property === 'number'
@@ -547,6 +549,27 @@ export function useHotHooks({
         workbench.hot?.selectCells(newSelection);
       }
     },
+
+    /*
+     * As of Handsontable 16.0.1 column sizes on large data sets need to be manually recalculated
+     */
+    afterScrollHorizontally: () => {
+      if (workbench.hot === undefined) return;
+      getHotPlugin(
+        workbench.hot,
+        'autoColumnSize'
+      ).calculateVisibleColumnsWidth();
+      workbench.hot.render();
+    },
+
+    afterScrollVertically: () => {
+      if (workbench.hot === undefined) return;
+      getHotPlugin(
+        workbench.hot,
+        'autoColumnSize'
+      ).calculateVisibleColumnsWidth();
+      workbench.hot.render();
+    },
   };
 }