feat: update ag-grid and use theming via js api

BREAKING CHANGE: The theme property of the AgFeatureGrid has changed to an AG-Grid Theme object.
Any CSS imports from AG-Grid have to be removed.

package.json

@@ -65,9 +65,6 @@
     "typecheck": "tsc --noEmit --project tsconfig.json"
   },
   "dependencies": {
-    "@ag-grid-community/client-side-row-model": "^32.3.2",
-    "@ag-grid-community/react": "^32.3.2",
-    "@ag-grid-community/styles": "^32.3.2",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^8.0.0",
     "@dnd-kit/sortable": "^9.0.0",
@@ -79,6 +76,7 @@
     "@terrestris/base-util": "^3.0.0",
     "@terrestris/react-util": "^10.0.1",
     "@types/lodash": "^4.17.4",
+    "ag-grid-react": "^33.0.4",
     "jspdf": "^2.5.1",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",

src/Grid/AgFeatureGrid/AgFeatureGrid.tsx

@@ -1,14 +1,9 @@
-/* eslint-disable simple-import-sort/imports */
-import '@ag-grid-community/styles/ag-grid.css';
-import '@ag-grid-community/styles/ag-theme-balham.css';
-/* eslint-enable simple-import-sort/imports */
-
 import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil';
 import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 import useOlLayer from '@terrestris/react-util/dist/Hooks/useOlLayer/useOlLayer';
 
-import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import {
+  AllCommunityModule,
   CellMouseOutEvent,
   CellMouseOverEvent,
   ColDef,
@@ -21,15 +16,16 @@ import {
   RowClickedEvent,
   RowNode,
   RowStyle,
-  SelectionChangedEvent
-} from '@ag-grid-community/core';
+  SelectionChangedEvent,
+  themeBalham,
+  Theme
+} from 'ag-grid-community';
 import {
   AgGridReact,
   AgGridReactProps
-} from '@ag-grid-community/react';
+} from 'ag-grid-react';
 
 import _differenceWith from 'lodash/differenceWith';
-import _has from 'lodash/has';
 import _isFunction from 'lodash/isFunction';
 import _isNil from 'lodash/isNil';
 import _isNumber from 'lodash/isNumber';
@@ -65,11 +61,11 @@ interface OwnProps<T> {
    */
   height?: number | string;
   /**
-   * The theme to use for the grid. See
-   * https://www.ag-grid.com/javascript-grid-styling/ for available options.
-   * Note: CSS must be loaded to use the theme!
+   * The theme to use for the grid. See https://www.ag-grid.com/angular-data-grid/theming/ for available options
+   * and customization possibilities. Default is the balham theme.
+   * NOTE: AG-Grid CSS should *not* be imported.
    */
-  theme?: string;
+  theme?: Theme;
   /**
    * Custom column definitions to apply to the given column (mapping via key).
    */
@@ -117,7 +113,7 @@ const defaultClassName = `${CSS_PREFIX}ag-feature-grid`;
 export type AgFeatureGridProps<T> = OwnProps<T> & RgCommonGridProps<T> & Omit<AgGridReactProps, 'theme'>;
 
 ModuleRegistry.registerModules([
-  ClientSideRowModelModule
+  AllCommunityModule
 ]);
 
 /**
@@ -143,7 +139,7 @@ export function AgFeatureGrid<T>({
   rowStyleFn,
   selectStyle = defaultSelectStyle,
   selectable = false,
-  theme = 'ag-theme-balham',
+  theme = themeBalham,
   width,
   zoomToExtent = false,
   ...agGridPassThroughProps
@@ -190,8 +186,7 @@ export function AgFeatureGrid<T>({
       return [];
     }
 
-    const sr = gridApi.getSelectedRows();
-    return sr.map(row => row.key);
+    return gridApi.getSelectedRows()?.map(row => row.key) ?? [];
   }, [gridApi]);
 
   /**
@@ -585,28 +580,12 @@ export function AgFeatureGrid<T>({
 
   const colDefs = useMemo(() => {
     if (!_isNil(columnDefs)) {
-      if (!selectable) {
-        return columnDefs;
-      }
-      // check for checkbox column - if not present => add
-      const checkboxSelectionPresent = columnDefs?.
-        some((colDef: ColDef<WithKey<T>>) =>
-          _has(colDef, 'checkboxSelection') && !_isNil(colDef.checkboxSelection)
-        );
-      if (checkboxSelectionPresent) {
-        return columnDefs;
-      }
-      return [
-        checkBoxColumnDefinition,
-        ...columnDefs
-      ];
+      return columnDefs;
     }
     return getColumnDefsFromFeature();
   }, [
-    checkBoxColumnDefinition,
     columnDefs,
-    getColumnDefsFromFeature,
-    selectable
+    getColumnDefsFromFeature
   ]);
 
   const passedRowData = useMemo(() => !_isNil(rowData) ? rowData : getRowData(), [
@@ -615,8 +594,8 @@ export function AgFeatureGrid<T>({
   ]);
 
   const finalClassName = className
-    ? `${className} ${defaultClassName} ${theme}`
-    : `${defaultClassName} ${theme}`;
+    ? `${className} ${defaultClassName}`
+    : `${defaultClassName}`;
 
   return (
     <div
@@ -632,8 +611,11 @@ export function AgFeatureGrid<T>({
         onRowClicked={onRowClickInner}
         onSelectionChanged={onSelectionChanged}
         rowData={passedRowData}
-        rowSelection="multiple"
-        suppressRowClickSelection
+        rowSelection={{
+          mode: "multiRow",
+          enableClickSelection: false
+        }}
+        theme={theme}
         {...agGridPassThroughProps}
       />
     </div>