Add ag grid v32 support (#4276)

.changeset/ag-grid-v32.md

@@ -0,0 +1,9 @@
+---
+"@salt-ds/ag-grid-theme": minor
+---
+
+Extended support to ag grid v32
+
+- Added support for new active button in floating filter, with adjusted floating filter focus style. Updated `--ag-icon-font-code-filter` to use outline version of filter icon to accommodate active state using filled version.
+- Fixed apply / reset panel buttons due to attribute change
+- Added "ag-grid-community" as `peerDependencies` to enforce minimum v28 support

package.json

@@ -75,9 +75,9 @@
     "@types/react-dom": "^18.0.0",
     "@types/tinycolor2": "^1.4.3",
     "@vitejs/plugin-react": "^4.1.0",
-    "ag-grid-community": "^31.3.4",
-    "ag-grid-enterprise": "^31.3.4",
-    "ag-grid-react": "^31.3.4",
+    "ag-grid-community": "^32.2.2",
+    "ag-grid-enterprise": "^32.2.2",
+    "ag-grid-react": "^32.2.2",
     "axe-core": "^4.9.0",
     "chromatic": "^11.10.1",
     "ci-info": "^4.0.0",

packages/ag-grid-theme/css/parts/ag-buttons.css

@@ -20,45 +20,33 @@ div[class*="ag-theme-salt"] .ag-ltr .ag-filter-apply-panel-button {
   margin-left: 8px;
 }
 
-div[class*="ag-theme-salt"] .ag-standard-button.ag-filter-apply-panel-button[ref="applyFilterButton"] {
+div[class*="ag-theme-salt"] .ag-standard-button.ag-filter-apply-panel-button[ref="applyFilterButton"],
+div[class*="ag-theme-salt"] .ag-standard-button.ag-filter-apply-panel-button[data-ref="applyFilterButton"] {
   background: var(--salt-actionable-cta-background);
   color: var(--salt-actionable-cta-foreground);
 }
 
-div[class*="ag-theme-salt"] .ag-standard-button.ag-filter-apply-panel-button[ref="applyFilterButton"]:hover {
+div[class*="ag-theme-salt"] .ag-standard-button.ag-filter-apply-panel-button[ref="applyFilterButton"]:hover,
+div[class*="ag-theme-salt"] .ag-standard-button.ag-filter-apply-panel-button[data-ref="applyFilterButton"]:hover {
   background: var(--salt-actionable-cta-background-hover);
   color: var(--salt-actionable-cta-foreground-hover);
 }
 
-div[class*="ag-theme-salt"] .ag-floating-filter {
-  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-separable-tertiary-borderColor);
-}
-
-div[class*="ag-theme-salt"] .ag-floating-filter:focus-within {
-  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
-  outline-offset: -2px;
-}
-
-div[class*="ag-theme-salt"] .ag-floating-filter:after {
-  width: 0;
-}
-
 div[class*="ag-theme-salt"] .ag-keyboard-focus .ag-header-cell:focus:after {
   border: 0;
 }
 
-div[class*="ag-theme-salt"] .ag-ltr .ag-floating-filter-button {
-  margin-left: var(--salt-spacing-100);
-}
-
 div[class*="ag-theme-salt"] button[class^="ag-"]:focus,
 div[class*="ag-theme-salt"] input[class^="ag-"][type="button"]:focus {
   box-shadow: none;
-  border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
+  outline-style: var(--salt-focused-outlineStyle);
+  outline-width: var(--salt-focused-outlineWidth);
+  outline-color: var(--salt-focused-outlineColor);
+  outline-offset: var(--salt-focused-outlineOffset);
 }
 
 div[class*="ag-theme-salt"] .ag-select .ag-picker-field-wrapper {
-  border: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-container-primary-borderColor);
+  border: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-editable-borderColor);
   border-radius: 0;
 }
 

packages/ag-grid-theme/css/parts/ag-header.css

@@ -15,6 +15,16 @@ div[class*="ag-theme-salt"] .ag-header-row {
   font-weight: var(--salt-text-label-fontWeight-strong);
 }
 
+div[class*="ag-theme-salt"] .ag-header-cell:focus-visible::after {
+  /* Remove ag grid default border */
+  border: none;
+}
+div[class*="ag-theme-salt"] .ag-header-cell:focus-visible {
+  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
+  outline-offset: -2px;
+  border-width: 0;
+}
+
 div[class*="ag-theme-salt"] .ag-pinned-left-header {
   border-right-color: var(--salt-separable-secondary-borderColor);
 }
@@ -33,11 +43,14 @@ div[class*="ag-theme-salt"] .ag-header-row:not(:first-child) .ag-header-group-ce
 }
 
 /** Move sort arrow towards menu icon */
-div[class*="ag-theme-salt"] .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container {
+/** v32 doesn't have filter icon */
+div[class*="ag-theme-salt"] .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container,
+div[class*="ag-theme-salt"] .ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-cell-text + .ag-sort-indicator-container {
   margin-left: auto;
 }
 
-div[class*="ag-theme-salt"] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container {
+div[class*="ag-theme-salt"] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon.ag-hidden + .ag-sort-indicator-container,
+div[class*="ag-theme-salt"] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-cell-text + .ag-sort-indicator-container {
   margin-right: auto;
 }
 
@@ -63,24 +76,110 @@ div[class*="ag-theme-salt"] .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-
   padding-left: var(--salt-spacing-100);
 }
 
+/* Floating filter */
+
 div[class*="ag-theme-salt"] .ag-header-cell.ag-floating-filter::before {
   /* Remove half height border in most header cells */
   background-color: transparent;
 }
 
-div[class*="ag-theme-salt"] .ag-floating-filter input[class^="ag-"][type="number"] {
+div[class*="ag-theme-salt"] .ag-floating-filter {
+  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-separable-tertiary-borderColor);
+}
+
+div[class*="ag-theme-salt"] .ag-header-cell.ag-floating-filter {
+  padding-left: 0;
+}
+
+/**
+  From v31, there's a "active" state of floating filter button next to the input. So we want to put the focus ring
+  not around the whole header cell, but around the input container.
+*/
+div[class*="ag-theme-salt"] .ag-floating-filter .ag-floating-filter-body:focus-within {
+  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
+  outline-offset: -2px;
+}
+
+div[class*="ag-theme-salt"] .ag-header-cell-menu-button:hover,
+div[class*="ag-theme-salt"] .ag-header-cell-filter-button:hover,
+div[class*="ag-theme-salt"] .ag-panel-title-bar-button:hover,
+div[class*="ag-theme-salt"] .ag-header-expand-icon:hover,
+div[class*="ag-theme-salt"] .ag-column-group-icons:hover,
+div[class*="ag-theme-salt"] .ag-set-filter-group-icons:hover,
+div[class*="ag-theme-salt"] .ag-group-expanded .ag-icon:hover,
+div[class*="ag-theme-salt"] .ag-group-contracted .ag-icon:hover,
+div[class*="ag-theme-salt"] .ag-chart-settings-prev:hover,
+div[class*="ag-theme-salt"] .ag-chart-settings-next:hover,
+div[class*="ag-theme-salt"] .ag-group-title-bar-icon:hover,
+div[class*="ag-theme-salt"] .ag-column-select-header-icon:hover,
+div[class*="ag-theme-salt"] .ag-floating-filter-button-button:hover,
+div[class*="ag-theme-salt"] .ag-filter-toolpanel-expand:hover,
+div[class*="ag-theme-salt"] .ag-panel-title-bar-button-icon:hover,
+div[class*="ag-theme-salt"] .ag-chart-menu-icon:hover {
+  /* Button is the same size of icon, we're copying what ag quartz theme is doing */
+  box-shadow: 0 0 0 var(--salt-spacing-50) var(--salt-actionable-subtle-background-hover);
+  background-color: var(--salt-actionable-subtle-background-hover);
+  --ag-icon-font-color-filter: var(--salt-actionable-subtle-foreground-hover);
+}
+
+/* Make filter and menu icon apart, to accomodate hover effects above */
+.ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-label-icon,
+.ag-ltr .ag-header-cell:not(.ag-right-aligned-header) .ag-header-menu-icon {
+  margin-left: var(--salt-spacing-100);
+}
+
+/* 
+  When filter is active, swap out filter icon with filled version.
+  This is new in ag grid v32.
+*/
+div[class*="ag-theme-salt"] .ag-filter-active {
+  --ag-icon-font-code-filter: var(--ag-icon-font-code-filter-filled);
+}
+
+div[class*="ag-theme-salt"] .ag-floating-filter:after {
+  width: 0;
+}
+
+div[class*="ag-theme-salt"] .ag-ltr .ag-floating-filter-button {
+  margin-left: var(--salt-spacing-100);
+}
+
+div[class*="ag-theme-salt"] .ag-ltr .ag-floating-filter-button .ag-button:focus {
+  border: none;
+  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
+  outline-offset: 2px;
+}
+
+div[class*="ag-theme-salt"] .ag-floating-filter input[class^="ag-"][type="number"],
+div[class*="ag-theme-salt"] .ag-floating-filter input[class^="ag-"][type="text"] {
   /* Avoid floating filter's input clips focus ring */
-  height: calc(var(--salt-size-base) + var(--salt-spacing-100) - 4px);
+  height: calc(var(--salt-size-base) + var(--salt-spacing-100) - 6px);
+  /* Give internal <input> space for the outline */
+  margin-inline: var(--salt-spacing-50);
+  /* Together with margin, matching Salt Input padding */
+  padding: 0 var(--salt-spacing-50);
+}
+
+div[class*="ag-theme-salt"] .ag-floating-filter-input input[class^="ag-"][type="text"],
+div[class*="ag-theme-salt"] .ag-floating-filter-input input[class^="ag-"][type="number"] {
+  border: none;
 }
 
 div[class*="ag-theme-salt"] .ag-header-cell:not(.ag-column-resizing) + .ag-header-cell.ag-column-menu-visible:not(.ag-column-hover):not(.ag-header-cell-moving):hover,
 div[class*="ag-theme-salt"] .ag-header-cell:not(.ag-column-hover):first-of-type:not(.ag-header-cell-moving).ag-column-menu-visible:hover,
 div[class*="ag-theme-salt"] .ag-header-cell.ag-column-menu-visible {
-  /* When menu is visible, change bg and fg */
+  /*
+    When menu is visible, change bg and fg. 
+    From ag grid v32, a new `.ag-has-popup-positioned-under` can be potentially used, however `.ag-column-menu-visible` will still be applied 
+    when open filter menu from floating filter.
+  */
   background: var(--salt-actionable-secondary-background-active);
   color: var(--salt-actionable-secondary-foreground-active);
   /* Color for menu / filter icons */
   --ag-icon-font-color: var(--salt-actionable-secondary-foreground-active);
+
+  /** don't show hover style, don't want to flip between light / dark */
+  --salt-actionable-subtle-background-hover: var(--salt-actionable-subtle-background-active);
 }
 
 div[class*="ag-theme-salt"] .ag-header-cell.ag-column-menu-visible .ag-icon {

packages/ag-grid-theme/css/parts/ag-input.css

@@ -25,8 +25,3 @@ div[class*="ag-theme-salt"] .ag-column-select input[class^="ag-"][type="number"]
   outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
   outline-offset: -2px;
 }
-
-div[class*="ag-theme-salt"] .ag-floating-filter-input input[class^="ag-"][type="text"],
-div[class*="ag-theme-salt"] .ag-floating-filter-input input[class^="ag-"][type="number"] {
-  border: none;
-}

packages/ag-grid-theme/css/parts/ag-menus.css

@@ -1,7 +1,7 @@
 /* MENU */
 
 div[class*="ag-theme-salt"] .ag-menu {
-  padding: 0;
+  padding: var(--salt-spacing-100);
   border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);
 }
 

packages/ag-grid-theme/css/parts/ag-root-var.css

@@ -63,11 +63,11 @@ div[class*="ag-theme-salt"] {
 
 div[class*="ag-theme-salt-compact"] {
   /* 
-      Ensures icon / country symbol renders correct height.
-      This also means we don't need to touch `--ag-row-height`, which would impact some internal ag grid height calculation like `--ag-internal-padded-row-height` vs `--ag-internal-calculated-line-height`
-     */
+    Ensures icon / country symbol renders correct height.
+    This also means we don't need to touch `--ag-row-height`, which would impact some internal ag grid height calculation like `--ag-internal-padded-row-height` vs `--ag-internal-calculated-line-height`
+  */
   --salt-size-base: 16px;
-  /* This is a deprecated token, until Salt Checkbox uses a new token, temparily pin it to HD size. */
+  /** Checkbox size */
   --salt-size-selectable: 12px;
 }
 

packages/ag-grid-theme/css/salt-icons.css

@@ -29,8 +29,9 @@
   --ag-icon-font-code-expanded: "\e912";
   --ag-icon-font-code-eye-slash: "\e913";
   --ag-icon-font-code-eye: "\e914";
-  --ag-icon-font-code-filter-clear: "\e915";
-  --ag-icon-font-code-filter: "\e916";
+  --ag-icon-font-code-filter-clear: "\e915"; /* Backwards compactibility, not longer in latest ag grid icon set */
+  --ag-icon-font-code-filter: "\e915";
+  --ag-icon-font-code-filter-filled: "\e916"; /* Salt specific icon */
   --ag-icon-font-code-first: "\e917";
   --ag-icon-font-code-grip: "\e918";
   --ag-icon-font-code-group: "\e919";

packages/ag-grid-theme/package.json

@@ -25,6 +25,7 @@
     "del": "^7.0.0"
   },
   "peerDependencies": {
-    "@salt-ds/theme": "workspace:^"
+    "@salt-ds/theme": "workspace:^",
+    "ag-grid-community": ">=28.0.0"
   }
 }

packages/ag-grid-theme/src/dependencies/customFilterExampleColumns.ts

@@ -16,21 +16,19 @@ const customFilterExampleColumns: ColDef[] = [
     field: "code",
     filter: "agTextColumnFilter",
     minWidth: 120,
-    suppressHeaderMenuButton: true,
     floatingFilter: true,
   },
   {
     headerName: "Capital",
     field: "capital",
     filter: "agSetColumnFilter",
-    suppressHeaderMenuButton: true,
     floatingFilter: true,
   },
   {
     headerName: "Population",
+    type: "numericColumn",
     field: "population",
     filter: "agNumberColumnFilter",
-    suppressHeaderMenuButton: true,
     floatingFilter: true,
     cellClass: ["numeric-cell"],
   },

packages/ag-grid-theme/src/dependencies/dataGridExampleColumns.ts

@@ -10,6 +10,7 @@ const dataGridExampleColumns: ColDef[] = [
     headerCheckboxSelection: true,
     pinned: "left",
     suppressHeaderMenuButton: true,
+    suppressHeaderFilterButton: true,
     resizable: false,
     suppressColumnsToolPanel: true,
   },

packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsHdCompact.ts

@@ -11,6 +11,7 @@ const dataGridExampleColumnsHdCompact: ColDef[] = [
     headerCheckboxSelection: true,
     pinned: "left",
     suppressHeaderMenuButton: true,
+    suppressHeaderFilterButton: true,
     resizable: false,
     suppressColumnsToolPanel: true,
   },
@@ -59,6 +60,8 @@ const dataGridExampleColumnsHdCompact: ColDef[] = [
     field: "country",
     cellRenderer: FlagRenderer,
     initialWidth: 80,
+    suppressHeaderMenuButton: true,
+    suppressHeaderFilterButton: true,
   },
 ];
 export default dataGridExampleColumnsHdCompact;

packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsWrap.ts

@@ -9,6 +9,7 @@ const dataGridExampleColumnsWrap: ColDef[] = [
     headerCheckboxSelection: true,
     pinned: "right",
     suppressHeaderMenuButton: true,
+    suppressHeaderFilterButton: true,
   },
   {
     headerName: "Name of State",

packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts

@@ -1,5 +1,5 @@
 import { useDensity, useTheme } from "@salt-ds/core";
-import type { ColumnApi, GridApi, GridReadyEvent } from "ag-grid-community";
+import type { GridApi, GridReadyEvent } from "ag-grid-community";
 import { LicenseManager } from "ag-grid-enterprise";
 import type { AgGridReactProps } from "ag-grid-react";
 import { clsx } from "clsx";
@@ -31,13 +31,9 @@ export function useAgGridHelpers({
   agGridProps: AgGridReactProps;
   isGridReady: boolean;
   api?: GridApi;
-  /**
-   * @deprecated — Use methods via the grid api instead.
-   */
-  columnApi?: ColumnApi;
   compact?: boolean;
 } {
-  const apiRef = useRef<{ api: GridApi; columnApi: ColumnApi }>();
+  const apiRef = useRef<{ api: GridApi }>();
   const [isGridReady, setGridReady] = useState(false);
   const contextDensity = useDensity();
   const { mode: contextMode } = useTheme();
@@ -67,8 +63,8 @@ export function useAgGridHelpers({
     `ag-theme-salt${compact && density === "high" ? "-compact" : ""}-${mode}`,
   );
 
-  const onGridReady = useCallback(({ api, columnApi }: GridReadyEvent) => {
-    apiRef.current = { api, columnApi };
+  const onGridReady = useCallback(({ api }: GridReadyEvent) => {
+    apiRef.current = { api };
     api.sizeColumnsToFit();
     setGridReady(true);
   }, []);
@@ -94,6 +90,5 @@ export function useAgGridHelpers({
     },
     isGridReady,
     api: apiRef.current?.api,
-    columnApi: apiRef.current?.columnApi,
   };
 }

packages/ag-grid-theme/src/examples/ColumnGroup.tsx

@@ -28,6 +28,7 @@ const columnsWithGrouping = (groupName: string): (ColGroupDef | ColDef)[] => [
     width: 38,
     pinned: "left",
     suppressHeaderMenuButton: true,
+    suppressHeaderFilterButton: true,
   },
   {
     headerName: groupName,