Bump ag-grid to v32.2.0

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "17.1.1",
+  "version": "18.0.0",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -96,17 +96,17 @@
     "webpack": "^5.89.0"
   },
   "dependencies": {
-    "@ag-grid-community/client-side-row-model": "31.3.2",
-    "@ag-grid-community/core": "31.3.2",
-    "@ag-grid-community/csv-export": "31.3.2",
-    "@ag-grid-community/react": "31.3.2",
-    "@ag-grid-community/styles": "31.3.2",
-    "@ag-grid-enterprise/core": "31.3.2",
-    "@ag-grid-enterprise/excel-export": "31.3.2",
-    "@ag-grid-enterprise/row-grouping": "31.3.2",
-    "@ag-grid-enterprise/server-side-row-model": "31.3.2",
-    "@ag-grid-enterprise/set-filter": "31.3.2",
-    "@ag-grid-enterprise/status-bar": "31.3.2",
+    "@ag-grid-community/client-side-row-model": "32.2.0",
+    "@ag-grid-community/core": "32.2.0",
+    "@ag-grid-community/csv-export": "32.2.0",
+    "@ag-grid-community/react": "32.2.0",
+    "@ag-grid-community/styles": "32.2.0",
+    "@ag-grid-enterprise/core": "32.2.0",
+    "@ag-grid-enterprise/excel-export": "32.2.0",
+    "@ag-grid-enterprise/row-grouping": "32.2.0",
+    "@ag-grid-enterprise/server-side-row-model": "32.2.0",
+    "@ag-grid-enterprise/set-filter": "32.2.0",
+    "@ag-grid-enterprise/status-bar": "32.2.0",
     "@phosphor-icons/react": "^2.1.5",
     "@timechimp/timechimp-typescript-helpers": "^3.0.4",
     "@types/bytes": "^3.1.1",

src/components/button/Button.tsx

@@ -39,6 +39,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       rootOverrides,
       color,
       backgroundColor,
+      borderColor,
       cursorType,
       ...rest
     }: ButtonProps,
@@ -97,7 +98,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
                 ...getPadding(),
                 ...border({
                   ...border100,
-                  borderColor: getButtonBackgroundColor(buttonType, customColors, colors),
+                  borderColor: borderColor ?? getButtonBackgroundColor(buttonType, customColors, colors),
                 }),
                 fontWeight: 'normal',
                 height: getButtonHeight(),
@@ -108,14 +109,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
                   backgroundColor: backgroundColor ?? getButtonBackgroundHoverColor(buttonType, colors),
                   ...border({
                     ...border100,
-                    borderColor: getButtonBackgroundHoverColor(buttonType, colors),
+                    borderColor: borderColor ?? getButtonBackgroundHoverColor(buttonType, colors),
                   }),
                 },
                 ':active': {
                   backgroundColor: backgroundColor ?? getButtonBackgroundHoverColor(buttonType, colors),
                   ...border({
                     ...border100,
-                    borderColor: getButtonBackgroundHoverColor(buttonType, colors),
+                    borderColor: borderColor ?? getButtonBackgroundHoverColor(buttonType, colors),
                   }),
                 },
                 ':disabled': {
@@ -250,19 +251,19 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
                 color: color ?? dark1,
                 ...border({
                   ...border300,
-                  borderColor: light2,
+                  borderColor: borderColor ?? light2,
                 }),
                 ...borderRadius(radius200),
                 ...getPadding(),
                 ...transitionProperties,
                 ':hover': {
                   backgroundColor: backgroundColor ?? primaryB,
-                  borderColor: dark4,
+                  borderColor: borderColor ?? dark4,
                   ...transitionProperties,
                 },
                 ':active': {
                   backgroundColor: backgroundColor ?? primaryB,
-                  borderColor: dark4,
+                  borderColor: borderColor ?? dark4,
                 },
                 ':disabled': {
                   borderColor: light2,

src/components/button/types.ts

@@ -14,5 +14,6 @@ export interface ButtonProps extends Omit<BaseButtonProps, 'kind'> {
   isLink?: boolean;
   rootOverrides?: { [key: string]: number | string };
   backgroundColor?: string;
+  borderColor?: string;
   cursorType?: string;
 }

src/components/data-grid/DataGrid.tsx

@@ -138,6 +138,7 @@ export const DataGrid = ({
   setIsGrouping,
   defaultSearch,
 }: DataGridProps) => {
+  // @ts-expect-error - AgGridReact is not a valid type
   const [gridApi, setGridApi] = useState<GridApi>(new GridApi());
   const [gridColumns, setGridColumns] = useState<DataGridColumn[]>(columns || []);
   const selectedGroupOption = useMemo(

src/components/data-grid/export/docDefinition.ts

@@ -1,4 +1,4 @@
-import { Column, ColumnApi, GridApi, ValueFormatterParams } from '@ag-grid-community/core';
+import { Column, GridApi, ValueFormatterParams } from '@ag-grid-community/core';
 import { DEFAULT_PDF_HEADER_HEIGHT, DEFAULT_PDF_ROW_HEIGHT } from '../../../models';
 import { Alignment, Margins, PdfHeaderCell, PdfTableCell, PrintParams, Translations } from '../types';
 
@@ -196,7 +196,6 @@ export const getDocDefinition = (gridApi: GridApi, printParams: PrintParams, tra
           }
           const valueFormatterParams: ValueFormatterParams = {
             api: gridApi,
-            columnApi: gridApi as unknown as ColumnApi,
             column: column as unknown as Column,
             node: gridApi?.getRowNode(node.id as string) ?? null,
             data: node,

src/components/dropdown/index.ts

@@ -1,3 +1,4 @@
 export * from './Dropdown';
 export * from './dropdown-option';
 export * from './types';
+export * from './styles';