Merge pull request #1348 from concord-consortium/v3-update-dependencies

chore: update dependencies
concord-consortium · Jul 13, 2024 · 8159262 · 8159262
2 parents 6bc5c2d + c442c45
commit 8159262
Show file tree

Hide file tree

Showing 12 changed files with 4,377 additions and 2,878 deletions.
diff --git a/v3/package-lock.json b/v3/package-lock.json
diff --git a/v3/package.json b/v3/package.json
@@ -52,10 +52,10 @@
     ]
   },
   "scripts": {
-    "start": "webpack serve --no-https",
+    "start": "webpack serve --server-type http",
     "start:clean": "npm run clean:cache && npm start",
     "start:secure": "webpack serve",
-    "start:secure:no-certs": "webpack serve --no-https-request-cert",
+    "start:secure:no-certs": "webpack serve --no-server-options-request-cert",
     "build": "npm-run-all lint:build build:webpack",
     "build:webpack": "webpack --mode production",
     "clean:cache": "rimraf node_modules/.cache",
@@ -100,50 +100,50 @@
     "mobx-state-tree": "npm:@concord-consortium/mobx-state-tree"
   },
   "devDependencies": {
-    "@cypress/code-coverage": "^3.12.19",
-    "@cypress/webpack-preprocessor": "^6.0.1",
+    "@cypress/code-coverage": "^3.12.41",
+    "@cypress/webpack-preprocessor": "^6.0.2",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
     "@svgr/webpack": "^8.1.0",
-    "@swc/core": "1.3.107",
+    "@swc/core": "1.6.13",
     "@talabes/json5-jest": "^2.0.0",
-    "@testing-library/jest-dom": "^6.4.1",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/d3": "^7.4.3",
     "@types/d3-format": "^3.0.4",
     "@types/fs-extra": "^11.0.4",
     "@types/jest": "^29.5.12",
-    "@types/leaflet": "^1.9.8",
-    "@types/lodash": "^4.14.202",
+    "@types/leaflet": "^1.9.12",
+    "@types/lodash": "^4.17.6",
     "@types/papaparse": "^5.3.14",
     "@types/pluralize": "^0.0.33",
-    "@types/react": "^18.2.52",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-dom-factories": "^1.0.4",
     "@types/rtree": "^1.4.30",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "@welldone-software/why-did-you-render": "^8.0.1",
-    "autoprefixer": "^10.4.17",
-    "caniuse-lite": "^1.0.30001583",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
+    "@welldone-software/why-did-you-render": "^8.0.3",
+    "autoprefixer": "^10.4.19",
+    "caniuse-lite": "^1.0.30001641",
     "clean-webpack-plugin": "^4.0.0",
-    "css-loader": "^6.10.0",
-    "cypress": "^13.6.4",
-    "dotenv-webpack": "^8.0.1",
-    "eslint": "^8.56.0",
+    "css-loader": "^7.1.2",
+    "cypress": "^13.13.0",
+    "dotenv-webpack": "^8.1.0",
+    "eslint": "^8.57.0",
     "eslint-config-react": "^1.1.7",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-chai-friendly": "^0.7.4",
-    "eslint-plugin-cypress": "~2.15.1",
+    "eslint-plugin-chai-friendly": "^1.0.0",
+    "eslint-plugin-cypress": "~3.3.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.6.3",
+    "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^6.2.0",
-    "eslint-webpack-plugin": "~4.0.1",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-testing-library": "^6.2.2",
+    "eslint-webpack-plugin": "~4.2.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "fs-extra": "^11.2.0",
@@ -155,64 +155,64 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-webgl-canvas-mock": "^2.5.3",
     "json5-loader": "^4.0.1",
-    "mini-css-extract-plugin": "^2.8.0",
+    "mini-css-extract-plugin": "^2.9.0",
     "npm-run-all": "^4.1.5",
     "patch-package": "^8.0.0",
-    "postcss-loader": "^8.1.0",
+    "postcss-loader": "^8.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.70.0",
-    "sass-loader": "^14.1.0",
+    "sass": "^1.77.8",
+    "sass-loader": "^14.2.1",
     "script-loader": "^0.7.2",
     "string-replace-loader": "^3.1.0",
-    "style-loader": "^3.3.4",
-    "swc-loader": "^0.2.4",
-    "ts-jest": "^29.1.2",
+    "style-loader": "^4.0.0",
+    "swc-loader": "^0.2.6",
+    "ts-jest": "^29.2.2",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
-    "typescript": "~5.3.3",
+    "typescript": "~5.5.3",
     "wait-on": "^7.2.0",
-    "webpack": "^5.90.1",
+    "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.0.4"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
     "@concord-consortium/cloud-file-manager": "^2.0.0-pre.3",
     "@concord-consortium/mobx-state-tree": "^6.0.0-cc.1",
     "@dnd-kit/core": "^6.1.0",
-    "@floating-ui/react": "^0.26.9",
-    "clsx": "^2.1.0",
+    "@floating-ui/react": "^0.26.19",
+    "clsx": "^2.1.1",
     "colord": "^2.9.3",
     "create-react-class": "^15.7.0",
-    "d3": "^7.8.5",
+    "d3": "^7.9.0",
     "d3-format": "^3.1.0",
     "d3-v6-tip": "^1.0.9",
     "escape-string-regexp": "^5.0.0",
     "iframe-phone": "^1.3.1",
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
-    "mathjs": "^12.3.1",
-    "mime": "^4.0.1",
-    "mobx": "^6.12.0",
-    "mobx-react-lite": "^4.0.5",
-    "nanoid": "^5.0.5",
+    "mathjs": "12.3.1",
+    "mime": "^4.0.4",
+    "mobx": "^6.13.0",
+    "mobx-react-lite": "^4.0.7",
+    "nanoid": "^5.0.7",
     "papaparse": "^5.4.1",
-    "pixi.js": "~7.3.3",
+    "pixi.js": "~7.4.2",
     "pluralize": "^8.0.0",
     "prop-types": "^15.8.1",
-    "query-string": "^8.2.0",
+    "query-string": "^9.0.0",
     "random": "^4.1.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-colorful": "^5.6.1",
-    "react-data-grid": "7.0.0-beta.42",
-    "react-dom": "^18.2.0",
+    "react-data-grid": "7.0.0-beta.44",
+    "react-dom": "^18.3.1",
     "react-dom-factories": "^1.0.2",
     "react-leaflet": "^4.2.1",
-    "react-resize-detector": "^10.0.1",
+    "react-resize-detector": "^11.0.1",
     "rtree": "^1.4.2",
-    "tslib": "^2.6.2",
-    "type-fest": "^4.10.2",
-    "use-debounce": "^10.0.0",
+    "tslib": "^2.6.3",
+    "type-fest": "^4.21.0",
+    "use-debounce": "^10.0.1",
     "use-deep-compare": "^1.2.1",
     "use-memo-one": "^1.1.3"
   }

diff --git a/...tches/react-data-grid+7.0.0-beta.42.patch → ...tches/react-data-grid+7.0.0-beta.44.patch b/...tches/react-data-grid+7.0.0-beta.42.patch → ...tches/react-data-grid+7.0.0-beta.44.patch
@@ -1,8 +1,8 @@
 diff --git a/node_modules/react-data-grid/lib/bundle.cjs b/node_modules/react-data-grid/lib/bundle.cjs
-index b83667f..63acb3b 100644
+index 43bf414..635934c 100644
 --- a/node_modules/react-data-grid/lib/bundle.cjs
 +++ b/node_modules/react-data-grid/lib/bundle.cjs
-@@ -770,7 +770,7 @@ function useColumnWidths(columns, viewportColumns, templateColumns, gridRef, gri
+@@ -764,7 +764,7 @@ function useColumnWidths(columns, viewportColumns, templateColumns, gridRef, gri
        return hasChanges ? newMeasuredColumnWidths : measuredColumnWidths;
      });
    }
@@ -11,7 +11,7 @@ index b83667f..63acb3b 100644
      const {
        key: resizingKey
      } = column;
-@@ -799,7 +799,7 @@ function useColumnWidths(columns, viewportColumns, templateColumns, gridRef, gri
+@@ -793,7 +793,7 @@ function useColumnWidths(columns, viewportColumns, templateColumns, gridRef, gri
        });
        updateMeasuredWidths(columnsToMeasure);
      });
@@ -20,15 +20,15 @@ index b83667f..63acb3b 100644
    }
    return {
      gridTemplateColumns,
-@@ -1371,6 +1371,7 @@ function HeaderCell({
+@@ -1373,6 +1373,7 @@ function HeaderCell({
        left
      } = headerCell.getBoundingClientRect();
      const offset = isRtl ? event.clientX - left : right - event.clientX;
 +    let lastWidth = 0;
      function onPointerMove(event) {
        const {
          right,
-@@ -1378,10 +1379,14 @@ function HeaderCell({
+@@ -1380,10 +1381,14 @@ function HeaderCell({
        } = headerCell.getBoundingClientRect();
        const width = isRtl ? right + offset - event.clientX : event.clientX + offset - left;
        if (width > 0) {
@@ -44,7 +44,7 @@ index b83667f..63acb3b 100644
        currentTarget.removeEventListener('pointermove', onPointerMove);
        currentTarget.removeEventListener('lostpointercapture', onLostPointerCapture);
      }
-@@ -1431,7 +1436,7 @@ function HeaderCell({
+@@ -1433,7 +1438,7 @@ function HeaderCell({
      }
    }
    function onDoubleClick() {
@@ -77,21 +77,21 @@ index b83667f..63acb3b 100644
 -  }, [measuredColumnWidths, resizedColumnWidths]);
 +    return rawColumnWidths?.get(column.key) ?? resizedColumnWidths.get(column.key) ?? measuredColumnWidths.get(column.key) ?? column.width;
 +  }, [measuredColumnWidths, rawColumnWidths, resizedColumnWidths]);
-   const [gridRef, gridWidth, gridHeight] = useGridDimensions();
+   const [gridRef, gridWidth, gridHeight, horizontalScrollbarHeight] = useGridDimensions();
    const {
      columns,
-@@ -3321,5 +3327,6 @@ exports.renderSortPriority = renderSortPriority;
+@@ -3322,5 +3328,6 @@ exports.renderSortPriority = renderSortPriority;
  exports.renderToggleGroup = renderToggleGroup;
  exports.renderValue = renderValue;
  exports.textEditor = textEditor;
 +exports.textEditorClassname = textEditorClassname;
  exports.useRowSelection = useRowSelection;
  //# sourceMappingURL=bundle.cjs.map
 diff --git a/node_modules/react-data-grid/lib/bundle.js b/node_modules/react-data-grid/lib/bundle.js
-index fa2eaab..ecccdf5 100644
+index 0214c29..60b4932 100644
 --- a/node_modules/react-data-grid/lib/bundle.js
 +++ b/node_modules/react-data-grid/lib/bundle.js
-@@ -766,7 +766,7 @@ function useColumnWidths(columns, viewportColumns, templateColumns, gridRef, gri
+@@ -760,7 +760,7 @@ function useColumnWidths(columns, viewportColumns, templateColumns, gridRef, gri
        return hasChanges ? newMeasuredColumnWidths : measuredColumnWidths;
      });
    }
@@ -100,7 +100,7 @@ index fa2eaab..ecccdf5 100644
      const {
        key: resizingKey
      } = column;
-@@ -795,7 +795,7 @@ function useColumnWidths(columns, viewportColumns, templateColumns, gridRef, gri
+@@ -789,7 +789,7 @@ function useColumnWidths(columns, viewportColumns, templateColumns, gridRef, gri
        });
        updateMeasuredWidths(columnsToMeasure);
      });
@@ -109,15 +109,15 @@ index fa2eaab..ecccdf5 100644
    }
    return {
      gridTemplateColumns,
-@@ -1367,6 +1367,7 @@ function HeaderCell({
+@@ -1369,6 +1369,7 @@ function HeaderCell({
        left
      } = headerCell.getBoundingClientRect();
      const offset = isRtl ? event.clientX - left : right - event.clientX;
 +    let lastWidth = 0;
      function onPointerMove(event) {
        const {
          right,
-@@ -1374,10 +1375,14 @@ function HeaderCell({
+@@ -1376,10 +1377,14 @@ function HeaderCell({
        } = headerCell.getBoundingClientRect();
        const width = isRtl ? right + offset - event.clientX : event.clientX + offset - left;
        if (width > 0) {
@@ -133,7 +133,7 @@ index fa2eaab..ecccdf5 100644
        currentTarget.removeEventListener('pointermove', onPointerMove);
        currentTarget.removeEventListener('lostpointercapture', onLostPointerCapture);
      }
-@@ -1427,7 +1432,7 @@ function HeaderCell({
+@@ -1429,7 +1434,7 @@ function HeaderCell({
      }
    }
    function onDoubleClick() {
@@ -166,32 +166,32 @@ index fa2eaab..ecccdf5 100644
 -  }, [measuredColumnWidths, resizedColumnWidths]);
 +    return rawColumnWidths?.get(column.key) ?? resizedColumnWidths.get(column.key) ?? measuredColumnWidths.get(column.key) ?? column.width;
 +  }, [measuredColumnWidths, rawColumnWidths, resizedColumnWidths]);
-   const [gridRef, gridWidth, gridHeight] = useGridDimensions();
+   const [gridRef, gridWidth, gridHeight, horizontalScrollbarHeight] = useGridDimensions();
    const {
      columns,
-@@ -3302,5 +3308,5 @@ function textEditor({
+@@ -3303,5 +3309,5 @@ function textEditor({
    });
  }
 
 -export { DataGridDefaultRenderersProvider, RowComponent$1 as Row, SELECT_COLUMN_KEY, SelectCellFormatter, SelectColumn, ToggleGroup, TreeDataGrid$1 as TreeDataGrid, DataGrid$1 as default, renderCheckbox, renderHeaderCell, renderSortIcon, renderSortPriority, renderToggleGroup, renderValue, textEditor, useRowSelection };
 +export { DataGridDefaultRenderersProvider, RowComponent$1 as Row, SELECT_COLUMN_KEY, SelectCellFormatter, SelectColumn, ToggleGroup, TreeDataGrid$1 as TreeDataGrid, DataGrid$1 as default, renderCheckbox, renderHeaderCell, renderSortIcon, renderSortPriority, renderToggleGroup, renderValue, textEditor, textEditorClassname, useRowSelection };
  //# sourceMappingURL=bundle.js.map
 diff --git a/node_modules/react-data-grid/lib/index.d.ts b/node_modules/react-data-grid/lib/index.d.ts
-index 3234d2e..c973cf4 100644
+index 4b927bd..c6ffa4e 100644
 --- a/node_modules/react-data-grid/lib/index.d.ts
 +++ b/node_modules/react-data-grid/lib/index.d.ts
-@@ -197,6 +197,10 @@ export declare interface DataGridProps<R, SR = unknown, K extends Key = Key> ext
+@@ -196,6 +196,10 @@ export declare interface DataGridProps<R, SR = unknown, K extends Key = Key> ext
       * @default 35
       */
      summaryRowHeight?: Maybe<number>;
 +    /**
 +     * The client-managed width of each column in pixels
 +     */
-+    columnWidths?: ReadonlyMap<string, number>;
++    columnWidths?: Maybe<ReadonlyMap<string, number>>;
      /**
       * Feature props
       */
-@@ -226,7 +230,7 @@ export declare interface DataGridProps<R, SR = unknown, K extends Key = Key> ext
+@@ -225,7 +229,7 @@ export declare interface DataGridProps<R, SR = unknown, K extends Key = Key> ext
      /** Called when the grid is scrolled */
      onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>;
      /** Called when a column is resized */
@@ -200,7 +200,7 @@ index 3234d2e..c973cf4 100644
      /** Called when a column is reordered */
      onColumnsReorder?: Maybe<(sourceColumnKey: string, targetColumnKey: string) => void>;
      /**
-@@ -440,6 +444,8 @@ export declare type SortDirection = 'ASC' | 'DESC';
+@@ -439,6 +443,8 @@ export declare type SortDirection = 'ASC' | 'DESC';
 
  export declare function textEditor<TRow, TSummaryRow>({ row, column, onRowChange, onClose }: RenderEditCellProps<TRow, TSummaryRow>): JSX_2.Element;
 

diff --git a/v3/src/components/case-table/case-table.scss b/v3/src/components/case-table/case-table.scss
@@ -240,6 +240,13 @@ $table-body-font-size: 8pt;
     }
 
     .rdg-cell {
+      // RDG.beta.17 moved all CSS inside @layers, which decreased their priority
+      // so that some of Chakra's CSS takes precedence, including the gridlines.
+      // These lines assert the RDG gridlines precedence ahead of Chakra's CSS.
+      padding-inline: 4px;
+      border-inline-end: 1px solid var(--rdg-border-color);
+      border-block-end: 1px solid var(--rdg-border-color);
+
       &.codap-index-cell {
         text-align: center;
         .codap-index-content {
@@ -286,13 +293,6 @@ $table-body-font-size: 8pt;
           }
         }
       }
-
-      // RDG.beta.17 moved all CSS inside @layers, which decreased their priority
-      // so that some of Chakra's CSS takes precedence, including the gridlines.
-      // These lines assert the RDG gridlines precedence ahead of Chakra's CSS.
-      padding-inline: 4px;
-      border-inline-end: 1px solid var(--rdg-border-color);
-      border-block-end: 1px solid var(--rdg-border-color);
     }
   }
 

diff --git a/v3/src/components/case-table/use-rows.ts b/v3/src/components/case-table/use-rows.ts
@@ -55,7 +55,7 @@ export const useRows = () => {
           const parentId = row?.[symParent]
           const isCollapsed = parentId && caseMetadata?.isCollapsed(parentId)
           return !isCollapsed || row?.[symFirstChild] ? row : undefined
-        }).filter(c => !!c) as TRow[]
+        }).filter(c => !!c)
       })
       prf.measure("Table.useRows[syncRowsToRdg-set]", () => {
         collectionTableModel.resetRows(newRows || [])

diff --git a/v3/src/components/case-table/use-selected-rows.ts b/v3/src/components/case-table/use-selected-rows.ts
@@ -93,7 +93,7 @@ export const useSelectedRows = ({ gridRef, onScrollClosestRowIntoView }: UseSele
           if (isPartialSelectionAction(action)) {
             const caseIds = action.args[0]
             const caseIndices = caseIds.map(id => collectionCaseIndexFromId(id, data, collectionId))
-                                       .filter(index => index != null) as number[]
+                                       .filter(index => index != null)
             const isSelecting = ((action.name === "selectCases") && action.args[1]) || true
             isSelecting && caseIndices.length && onScrollClosestRowIntoView(collectionId, caseIndices)
           }

diff --git a/v3/src/index.scss b/v3/src/index.scss
@@ -4,6 +4,8 @@ html, body {
 }
 
 body {
+  user-select: none;
+
   /* Remove outline for non-keyboard :focus */
   *:focus:not(:focus-visible) {
     // chakra uses box-shadow for focus highlight rather than outline
@@ -17,6 +19,4 @@ body {
       box-shadow: var(--chakra-shadows-outline) !important;
     }
   }
-
-  user-select: none;
 }