From e933fce3723e393046add8dad413f1870d028bd6 Mon Sep 17 00:00:00 2001
From: John White <750350+johnhwhite@users.noreply.github.com>
Date: Fri, 17 Jan 2025 08:50:44 -0500
Subject: [PATCH] fix(components/ag-grid): header should have readable text
 (#3037) (#3041)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[AB#3204448](https://dev.azure.com/blackbaud/f565481a-7bc9-4083-95d5-4f953da6d499/_workitems/edit/3204448)
🍒 from #3037
---
 libs/components/ag-grid/package.json          |   4 +-
 .../ag-grid/header/header.component.html      |  20 +--
 .../ag-grid/header/header.component.ts        |  87 ++++++----
 libs/components/packages/package.json         |   4 +-
 .../ag-grid-migrate.schematic.spec.ts         |   2 +-
 .../ag-grid-migrate.schematic.ts              |   2 +-
 .../migrations/migration-collection.json      |   5 +
 .../ag-grid/ag-grid.schematic.spec.ts         | 160 ++++++++++++++++++
 .../update-12/ag-grid/ag-grid.schematic.ts    | 139 +++++++++++++++
 .../migrations/update-12/ag-grid/schema.json  |   5 +
 .../workspace-check/workspace-check.spec.ts   |  16 ++
 .../rules/workspace-check/workspace-check.ts  |   7 +-
 libs/components/pages/project.json            |   2 +-
 libs/components/split-view/package.json       |   2 +-
 libs/sdk/e2e-schematics/package.json          |  16 +-
 libs/sdk/testing/package.json                 |   2 +-
 libs/sdk/tools/package.json                   |   2 +-
 package-lock.json                             |  38 +++--
 package.json                                  |   6 +-
 19 files changed, 434 insertions(+), 85 deletions(-)
 create mode 100644 libs/components/packages/src/schematics/migrations/update-12/ag-grid/ag-grid.schematic.spec.ts
 create mode 100644 libs/components/packages/src/schematics/migrations/update-12/ag-grid/ag-grid.schematic.ts
 create mode 100644 libs/components/packages/src/schematics/migrations/update-12/ag-grid/schema.json

diff --git a/libs/components/ag-grid/package.json b/libs/components/ag-grid/package.json
index 7c8b320d35..903783cc26 100644
--- a/libs/components/ag-grid/package.json
+++ b/libs/components/ag-grid/package.json
@@ -36,8 +36,8 @@
     "@skyux/lookup": "0.0.0-PLACEHOLDER",
     "@skyux/popovers": "0.0.0-PLACEHOLDER",
     "@skyux/theme": "0.0.0-PLACEHOLDER",
-    "ag-grid-angular": "^32.2.2",
-    "ag-grid-community": "^32.2.2"
+    "ag-grid-angular": "^32.3.3",
+    "ag-grid-community": "^32.3.3"
   },
   "dependencies": {
     "tslib": "^2.8.1"
diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.html b/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.html
index 652d6b7907..f67504fe3d 100644
--- a/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.html
+++ b/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.html
@@ -1,5 +1,5 @@
 <div class="ag-cell-label-container" role="presentation">
-  @if (params?.enableMenu) {
+  @if (params()?.enableMenu) {
     <span
       class="ag-header-icon ag-header-cell-menu-button"
       aria-hidden="true"
@@ -10,23 +10,23 @@
   }
   <div class="ag-header-cell-label" role="presentation">
     <span class="ag-header-cell-label-and-icons">
-      @if (params?.enableSorting) {
+      @if (params()?.enableSorting) {
         <button
           aria-hidden="true"
           class="ag-header-cell-text ag-header-cell-label-sortable sky-btn-link-inline"
           tabindex="-1"
           type="button"
-          [attr.aria-label]="accessibleHeaderText"
-          [innerText]="displayName ?? ''"
+          [attr.aria-label]="accessibleHeaderText()"
+          [innerText]="displayName() ?? ''"
           [skyThemeClass]="{ 'sky-font-heading-4': 'modern' }"
           (click)="onSortRequested($event)"
         ></button>
-      } @else if (displayName) {
+      } @else if (displayName()) {
         <span
           aria-hidden="true"
           class="ag-header-cell-text"
           [skyThemeClass]="{ 'sky-font-heading-4': 'modern' }"
-          >{{ displayName }}</span
+          >{{ displayName() }}</span
         >
       }
       @if (filterEnabled$ | async) {
@@ -36,7 +36,7 @@
           ><sky-icon icon="filter"
         /></span>
       }
-      @if (params?.enableSorting) {
+      @if (params()?.enableSorting) {
         @if (sortOrder$ | async; as sortDirection) {
           <button
             class="ag-sort-indicator-container sky-btn sky-btn-icon-borderless"
@@ -49,7 +49,7 @@
                 <sky-icon *skyThemeIf="'modern'" icon="chevron-down" />
                 <span class="sky-screen-reader-only">{{
                   'sky_ag_grid_column_header_sort_button_aria_label_currently_desc'
-                    | skyLibResources: displayName ?? accessibleHeaderText
+                    | skyLibResources: displayName() ?? accessibleHeaderText()
                 }}</span></span
               >
             }
@@ -59,7 +59,7 @@
                 <sky-icon *skyThemeIf="'modern'" icon="chevron-up" />
                 <span class="sky-screen-reader-only">{{
                   'sky_ag_grid_column_header_sort_button_aria_label_currently_asc'
-                    | skyLibResources: displayName ?? accessibleHeaderText
+                    | skyLibResources: displayName() ?? accessibleHeaderText()
                 }}</span></span
               >
             }
@@ -75,7 +75,7 @@
         } @else {
           <span class="sky-screen-reader-only">{{
             'sky_ag_grid_column_header_sort_button_aria_label_currently_not_sorted'
-              | skyLibResources: displayName ?? accessibleHeaderText
+              | skyLibResources: displayName() ?? accessibleHeaderText()
           }}</span>
         }
       }
diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.ts
index edd92f7e59..6386cef045 100644
--- a/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.ts
+++ b/libs/components/ag-grid/src/lib/modules/ag-grid/header/header.component.ts
@@ -6,10 +6,11 @@ import {
   ComponentRef,
   ElementRef,
   EnvironmentInjector,
-  HostBinding,
   OnDestroy,
   ViewChild,
+  computed,
   inject,
+  signal,
 } from '@angular/core';
 import {
   SkyDynamicComponentLocation,
@@ -32,27 +33,54 @@ import { SkyAgGridHeaderParams } from '../types/header-params';
   styleUrls: ['./header.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
+  host: {
+    '[attr.title]': 'accessibleHeaderText()',
+    '[attr.aria-label]': 'displayName() || accessibleHeaderText()',
+    '[attr.role]': '"note"',
+  },
 })
 export class SkyAgGridHeaderComponent
   implements IHeaderAngularComp, OnDestroy, AfterViewInit
 {
+  public readonly filterEnabled$ = new BehaviorSubject<boolean>(false);
+
   // For accessibility, we need to set the title attribute on the header element if there is no visible header text.
   // https://dequeuniversity.com/rules/axe/4.5/empty-table-header?application=axeAPI
-  @HostBinding('attr.title')
-  public accessibleHeaderText: string | undefined;
+  protected readonly accessibleHeaderText = computed(() => {
+    const params = this.params();
+    if (
+      params?.displayName &&
+      !params?.column.getColDef().headerComponentParams?.headerHidden
+    ) {
+      return undefined;
+    } else {
+      return params?.displayName || params?.column.getColDef().field;
+    }
+  });
 
   @ViewChild('inlineHelpContainer', { read: ElementRef, static: true })
-  public inlineHelpContainer: ElementRef | undefined;
+  protected inlineHelpContainer: ElementRef | undefined;
 
-  public params: SkyAgGridHeaderParams | undefined = undefined;
-  public sorted = '';
-  public readonly filterEnabled$ = new BehaviorSubject<boolean>(false);
-  public readonly sortOrder$ = new BehaviorSubject<'asc' | 'desc' | undefined>(
+  protected readonly params = signal<SkyAgGridHeaderParams | undefined>(
     undefined,
   );
-  public readonly sortIndexDisplay$ = new BehaviorSubject<string>('');
-
-  protected displayName: string | undefined;
+  protected sorted = '';
+  protected readonly sortOrder$ = new BehaviorSubject<
+    'asc' | 'desc' | undefined
+  >(undefined);
+  protected readonly sortIndexDisplay$ = new BehaviorSubject<string>('');
+
+  protected displayName = computed<string | undefined>(() => {
+    const params = this.params();
+    if (
+      params?.displayName &&
+      !params?.column.getColDef().headerComponentParams?.headerHidden
+    ) {
+      return params.displayName;
+    } else {
+      return undefined;
+    }
+  });
 
   #subscriptions = new Subscription();
   #inlineHelpComponentRef: ComponentRef<unknown> | undefined;
@@ -75,23 +103,12 @@ export class SkyAgGridHeaderComponent
 
   public agInit(params: SkyAgGridHeaderParams | undefined): void {
     this.#agInitialized = true;
-    this.params = params;
+    this.params.set(params);
     this.#subscriptions.unsubscribe();
     if (!params) {
       return;
     }
     this.#leftPosition = params.column.getLeft() ?? 0;
-    if (
-      params.displayName &&
-      !params.column.getColDef().headerComponentParams?.headerHidden
-    ) {
-      this.accessibleHeaderText = undefined;
-      this.displayName = params.displayName;
-    } else {
-      this.accessibleHeaderText =
-        params.displayName || params.column.getColDef().field;
-      this.displayName = undefined;
-    }
     this.#subscriptions = new Subscription();
     if (params.column.isFilterAllowed()) {
       this.#subscriptions.add(
@@ -156,12 +173,12 @@ export class SkyAgGridHeaderComponent
   }
 
   public onMenuClick($event: Event): void {
-    this.params?.showColumnMenu($event.target as HTMLElement);
+    this.params()?.showColumnMenu($event.target as HTMLElement);
   }
 
   public onSortRequested(event: MouseEvent): void {
-    if (this.params?.enableSorting) {
-      this.params?.progressSort(event.shiftKey);
+    if (this.params()?.enableSorting) {
+      this.params()?.progressSort(event.shiftKey);
     }
   }
 
@@ -175,7 +192,7 @@ export class SkyAgGridHeaderComponent
       return;
     }
 
-    const inlineHelpComponent = this.params?.inlineHelpComponent;
+    const inlineHelpComponent = this.params()?.inlineHelpComponent;
 
     if (
       inlineHelpComponent &&
@@ -187,9 +204,9 @@ export class SkyAgGridHeaderComponent
       );
 
       const headerInfo = new SkyAgGridHeaderInfo();
-      headerInfo.column = this.params?.column;
-      headerInfo.context = this.params?.context;
-      headerInfo.displayName = this.params?.displayName;
+      headerInfo.column = this.params()?.column;
+      headerInfo.context = this.params()?.context;
+      headerInfo.displayName = this.params()?.displayName;
 
       this.#inlineHelpComponentRef =
         this.#dynamicComponentService.createComponent(inlineHelpComponent, {
@@ -211,16 +228,16 @@ export class SkyAgGridHeaderComponent
   }
 
   #updateSort(): void {
-    this.sortOrder$.next(this.params?.column.getSort() || undefined);
+    this.sortOrder$.next(this.params()?.column.getSort() || undefined);
   }
 
   #updateSortIndex(): void {
-    const sortIndex = this.params?.column.getSortIndex();
-    const otherSortColumns = this.params?.api
-      ?.getColumns()
+    const sortIndex = this.params()?.column.getSortIndex();
+    const otherSortColumns = this.params()
+      ?.api?.getColumns()
       ?.some(
         (column) =>
-          column.getColId() !== this.params?.column.getColId() &&
+          column.getColId() !== this.params()?.column.getColId() &&
           !!column.getSort(),
       );
     if (sortIndex !== undefined && sortIndex !== null && otherSortColumns) {
diff --git a/libs/components/packages/package.json b/libs/components/packages/package.json
index c22406bae4..11946aeeff 100644
--- a/libs/components/packages/package.json
+++ b/libs/components/packages/package.json
@@ -86,8 +86,8 @@
       "@skyux/tiles": "0.0.0-PLACEHOLDER",
       "@skyux/toast": "0.0.0-PLACEHOLDER",
       "@skyux/validation": "0.0.0-PLACEHOLDER",
-      "ag-grid-angular": "^32.2.2",
-      "ag-grid-community": "^32.2.2",
+      "ag-grid-angular": "^32.3.3",
+      "ag-grid-community": "^32.3.3",
       "ag-grid-enterprise": "^32.1.0",
       "autonumeric": "^4.10.5"
     }
diff --git a/libs/components/packages/src/schematics/ag-grid-migrate/ag-grid-migrate.schematic.spec.ts b/libs/components/packages/src/schematics/ag-grid-migrate/ag-grid-migrate.schematic.spec.ts
index 3d5869eba6..10ed3b76af 100644
--- a/libs/components/packages/src/schematics/ag-grid-migrate/ag-grid-migrate.schematic.spec.ts
+++ b/libs/components/packages/src/schematics/ag-grid-migrate/ag-grid-migrate.schematic.spec.ts
@@ -19,7 +19,7 @@ interface TestSetup {
   schematic: (options: Schema) => Rule;
 }
 
-const UPDATE_TO_VERSION = '32.2.2';
+const UPDATE_TO_VERSION = '32.3.3';
 const UPDATE_TO_MIGRATION = '32.2.1';
 
 describe('ag-grid-migrate.schematic', () => {
diff --git a/libs/components/packages/src/schematics/ag-grid-migrate/ag-grid-migrate.schematic.ts b/libs/components/packages/src/schematics/ag-grid-migrate/ag-grid-migrate.schematic.ts
index e8facd70e2..b9e206ac98 100644
--- a/libs/components/packages/src/schematics/ag-grid-migrate/ag-grid-migrate.schematic.ts
+++ b/libs/components/packages/src/schematics/ag-grid-migrate/ag-grid-migrate.schematic.ts
@@ -6,7 +6,7 @@ import { platform } from 'os';
 import { Schema } from './schema';
 
 const AG_GRID_MIGRATION = '32.2.1';
-const AG_GRID_VERSION = '32.2.2';
+const AG_GRID_VERSION = '32.3.3';
 
 function getStartingVersion(sourceRoot: string): string | undefined {
   try {
diff --git a/libs/components/packages/src/schematics/migrations/migration-collection.json b/libs/components/packages/src/schematics/migrations/migration-collection.json
index 3e725b1c54..42f0d5c372 100644
--- a/libs/components/packages/src/schematics/migrations/migration-collection.json
+++ b/libs/components/packages/src/schematics/migrations/migration-collection.json
@@ -5,6 +5,11 @@
       "factory": "./noop/noop.schematic",
       "description": "Update all SKY UX component packages"
     },
+    "ag-grid": {
+      "version": "0.0.0-PLACEHOLDER",
+      "factory": "./update-12/ag-grid/ag-grid.schematic",
+      "description": "Apply code changes for AG Grid 32."
+    },
     "axe-core": {
       "version": "0.0.0-PLACEHOLDER",
       "factory": "./update-12/axe-core/axe-core.schematic",
diff --git a/libs/components/packages/src/schematics/migrations/update-12/ag-grid/ag-grid.schematic.spec.ts b/libs/components/packages/src/schematics/migrations/update-12/ag-grid/ag-grid.schematic.spec.ts
new file mode 100644
index 0000000000..73d066cf1b
--- /dev/null
+++ b/libs/components/packages/src/schematics/migrations/update-12/ag-grid/ag-grid.schematic.spec.ts
@@ -0,0 +1,160 @@
+import { Tree } from '@angular-devkit/schematics';
+import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
+
+import fs from 'fs-extra';
+import { joinPathFragments } from 'nx/src/utils/path';
+import { workspaceRoot } from 'nx/src/utils/workspace-root';
+
+const UPDATE_TO_VERSION = '32.3.3';
+
+describe('ag-grid.schematic', () => {
+  const runner = new SchematicTestRunner(
+    'schematics',
+    require.resolve('../../migration-collection.json'),
+  );
+  const angularJson = {
+    version: 1,
+    projects: {
+      test: {
+        projectType: 'application',
+        root: '',
+        architect: {},
+      },
+    },
+  };
+
+  function setupTest(
+    packageJson: Record<string, Record<string, string>> = {},
+  ): { tree: Tree } {
+    const tree = Tree.empty();
+    tree.create('/angular.json', JSON.stringify(angularJson));
+    tree.create('/package.json', JSON.stringify(packageJson));
+    return { tree };
+  }
+
+  it('should test the current version', () => {
+    const packageJson = fs.readJSONSync(
+      joinPathFragments(workspaceRoot, 'package.json'),
+    );
+    expect(packageJson.dependencies['ag-grid-community']).toBe(
+      UPDATE_TO_VERSION,
+    );
+  });
+
+  it('should work', async () => {
+    expect.assertions(1);
+    const { tree } = setupTest({
+      dependencies: {
+        'ag-grid-community': UPDATE_TO_VERSION,
+        'ag-grid-angular': UPDATE_TO_VERSION,
+        'ag-grid-enterprise': UPDATE_TO_VERSION,
+      },
+    });
+    await runner.runSchematic('ag-grid', {}, tree);
+    expect(JSON.parse(tree.readText('/package.json'))).toEqual({
+      dependencies: {
+        'ag-grid-community': UPDATE_TO_VERSION,
+        'ag-grid-angular': UPDATE_TO_VERSION,
+        'ag-grid-enterprise': UPDATE_TO_VERSION,
+      },
+    });
+  });
+
+  it('should add missing peer', async () => {
+    expect.assertions(1);
+    const { tree } = setupTest({
+      dependencies: {
+        'ag-grid-angular': UPDATE_TO_VERSION,
+      },
+    });
+    await runner.runSchematic('ag-grid', {}, tree);
+    expect(JSON.parse(tree.readText('/package.json'))).toEqual({
+      dependencies: {
+        'ag-grid-community': `^${UPDATE_TO_VERSION}`,
+        'ag-grid-angular': UPDATE_TO_VERSION,
+      },
+    });
+  });
+
+  it('should noop', async () => {
+    expect.assertions(1);
+    const { tree } = setupTest({
+      dependencies: {
+        other: '27.1.1',
+      },
+    });
+    await runner.runSchematic('ag-grid', {}, tree);
+    expect(JSON.parse(tree.readText('/package.json'))).toEqual({
+      dependencies: {
+        other: '27.1.1',
+      },
+    });
+  });
+
+  it('should warn about mixing modules and packages', async () => {
+    expect.assertions(1);
+    const { tree } = setupTest({
+      dependencies: {
+        '@ag-grid-community/core': UPDATE_TO_VERSION,
+        '@skyux/ag-grid': '0.0.0',
+        'ag-grid-community': UPDATE_TO_VERSION,
+        'ag-grid-angular': UPDATE_TO_VERSION,
+      },
+    });
+    tree.create(
+      'src/app/app.component.ts',
+      `
+        import { SkyAgGridService } from '@skyux/ag-grid';
+        import { GridOptions } from '@ag-grid-community/core';
+
+        export class AppComponent {
+          public options: GridOptions;
+          #agGridService: SkyAgGridService;
+
+          constructor(agGridService: SkyAgGridService) {
+            this.#agGridService = agGridService;
+            let customOptions: Partial<GridOptions> = {};
+            customOptions.suppressCellSelection = true;
+            this.options = this.agGridService.getGridOptions({
+              ...customOptions,
+              suppressCellSelection: true
+            });
+          }
+        }`,
+    );
+    tree.create(
+      'src/app/ent.component.ts',
+      `
+        import { SkyAgGridService } from '@skyux/ag-grid';
+        import { GridOptions } from '@ag-grid-enterprise/core';
+
+        export class AppComponent {
+          public options: GridOptions;
+          #agGridService: SkyAgGridService;
+
+          constructor(agGridService: SkyAgGridService) {
+            this.#agGridService = agGridService;
+            let customOptions: Partial<GridOptions> = {};
+            customOptions.suppressCellSelection = true;
+            this.options = this.agGridService.getGridOptions({
+              ...customOptions,
+              suppressCellSelection: true
+            });
+          }
+        }`,
+    );
+    tree.create(
+      'src/app/options.component.ts',
+      `import { SkyGetGridOptionsArgs } from '@skyux/ag-grid';`,
+    );
+    tree.create(
+      'src/app/other.component.ts',
+      `import { ColDef } from '@ag-grid-community/core';`,
+    );
+    tree.create('src/app/unrelated.component.ts', `// No grid.`);
+    await runner.runSchematic('ag-grid', {}, tree);
+    expect(tree.readText('src/app/other.component.ts')).toEqual(
+      `import { ColDef } from '@ag-grid-community/core';`,
+    );
+  });
+});
diff --git a/libs/components/packages/src/schematics/migrations/update-12/ag-grid/ag-grid.schematic.ts b/libs/components/packages/src/schematics/migrations/update-12/ag-grid/ag-grid.schematic.ts
new file mode 100644
index 0000000000..aa8c38b009
--- /dev/null
+++ b/libs/components/packages/src/schematics/migrations/update-12/ag-grid/ag-grid.schematic.ts
@@ -0,0 +1,139 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import {
+  NodePackageInstallTask,
+  RunSchematicTask,
+} from '@angular-devkit/schematics/tasks';
+import {
+  NodeDependencyType,
+  addPackageJsonDependency,
+  getPackageJsonDependency,
+} from '@schematics/angular/utility/dependencies';
+
+import { visitProjectFiles } from '../../../utility/visit-project-files';
+import { getWorkspace } from '../../../utility/workspace';
+
+const ANY_MODULE = '@ag-grid-community/';
+const ENT_MODULE = '@ag-grid-enterprise/';
+const AG_GRID = 'ag-grid-community';
+const AG_GRID_ENT = 'ag-grid-enterprise';
+const AG_GRID_NG = 'ag-grid-angular';
+const AG_GRID_SKY = '@skyux/ag-grid';
+
+const AG_GRID_VERSION = '^32.3.3';
+
+/**
+ * Check package.json for AG Grid dependencies.
+ */
+function checkAgGridDependency(tree: Tree, context: SchematicContext): boolean {
+  const agGridDependency = getPackageJsonDependency(tree, AG_GRID);
+  const agGridDependencyEnt = getPackageJsonDependency(tree, AG_GRID_ENT);
+  const agGridDependencyNg = getPackageJsonDependency(tree, AG_GRID_NG);
+  if (agGridDependency || agGridDependencyEnt || agGridDependencyNg) {
+    if (!agGridDependency) {
+      // Missing peer dependency.
+      addPackageJsonDependency(tree, {
+        name: AG_GRID,
+        type: NodeDependencyType.Default,
+        version: AG_GRID_VERSION,
+      });
+      context.addTask(new NodePackageInstallTask());
+    }
+    return true;
+  }
+
+  const packageJson = tree.readJson('package.json') as Record<
+    string,
+    Record<string, string>
+  >;
+
+  return ['dependencies', 'devDependencies'].some((dep) =>
+    Object.keys((packageJson && packageJson[dep]) || {}).some(
+      (dep) => dep.startsWith(ANY_MODULE) || dep.startsWith(ENT_MODULE),
+    ),
+  );
+}
+
+/**
+ * Check if the file includes any AG Grid imports.
+ */
+function includesAgGrid(updatedContent: string): boolean {
+  return (
+    updatedContent.includes(AG_GRID) ||
+    updatedContent.includes(AG_GRID_ENT) ||
+    updatedContent.includes(AG_GRID_SKY)
+  );
+}
+
+/**
+ * Visit all files and apply the changes.
+ */
+async function updateSourceFiles(
+  tree: Tree,
+  context: SchematicContext,
+): Promise<void> {
+  const warned: string[] = [];
+
+  function warnOnce(message: string) {
+    if (!warned.includes(message)) {
+      warned.push(message);
+      context.logger.warn(message);
+    }
+  }
+
+  const { workspace } = await getWorkspace(tree);
+  workspace.projects.forEach((project) => {
+    context.logger.debug(
+      `Running SKY UX AG Grid updates within ${project.sourceRoot || project.root}.`,
+    );
+    visitProjectFiles(tree, project.sourceRoot || project.root, (filePath) => {
+      // If the file is not a TypeScript file, we can skip it.
+      if (!filePath.endsWith('.ts') || filePath.includes('schematics')) {
+        return;
+      }
+      const content = tree.readText(filePath);
+      if (!content || !includesAgGrid(content)) {
+        return;
+      }
+
+      // Prompt the user to moderate the use of AG Grid modules
+      if (content.includes(ANY_MODULE) || content.includes(ENT_MODULE)) {
+        warnOnce(
+          `\n
+          AG Grid recommends not mixing module and package imports.
+          https://ag-grid.com/angular-data-grid/modules/\n\n`,
+        );
+      }
+    });
+  });
+}
+
+/**
+ * Upgrade to AG Grid 32 and address breaking changes:
+ *
+ * Also advise against mixing modules and packages.
+ */
+export default function (): Rule {
+  return async (tree: Tree, context: SchematicContext): Promise<void> => {
+    const hasAgGrid = checkAgGridDependency(tree, context);
+
+    // AG Grid is not installed, so we don't need to do anything.
+    if (!hasAgGrid) {
+      context.logger.debug(`AG Grid is not installed.`);
+      return;
+    }
+
+    await updateSourceFiles(tree, context);
+    const { workspace } = await getWorkspace(tree);
+    for (const project of workspace.projects.values()) {
+      const sourceRoot = project.sourceRoot || `${project.root}/src`;
+      context.logger.debug(
+        `Scheduling AG Grid code modifications for ${sourceRoot}.`,
+      );
+      context.addTask(
+        new RunSchematicTask('@skyux/packages', 'ag-grid-migrate', {
+          sourceRoot,
+        }),
+      );
+    }
+  };
+}
diff --git a/libs/components/packages/src/schematics/migrations/update-12/ag-grid/schema.json b/libs/components/packages/src/schematics/migrations/update-12/ag-grid/schema.json
new file mode 100644
index 0000000000..0007fb2db8
--- /dev/null
+++ b/libs/components/packages/src/schematics/migrations/update-12/ag-grid/schema.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "type": "object",
+  "properties": {}
+}
diff --git a/libs/components/packages/src/schematics/rules/workspace-check/workspace-check.spec.ts b/libs/components/packages/src/schematics/rules/workspace-check/workspace-check.spec.ts
index 36d239eebf..1546f16482 100644
--- a/libs/components/packages/src/schematics/rules/workspace-check/workspace-check.spec.ts
+++ b/libs/components/packages/src/schematics/rules/workspace-check/workspace-check.spec.ts
@@ -41,4 +41,20 @@ describe('Workspace check', () => {
     await workspaceCheck()(tree, context as SchematicContext);
     expect(warn).not.toHaveBeenCalled();
   });
+
+  it('should not warn when there is no build step', async () => {
+    const tree = await createTestApp(runner, {
+      projectName: 'test-project',
+      options: { ssr: false },
+    });
+    const workspace: any = tree.readJson('angular.json');
+    delete workspace.projects['test-project'].architect.build;
+    tree.overwrite('angular.json', JSON.stringify(workspace, null, 2));
+    const context: Pick<SchematicContext, 'logger'> = {
+      logger: new logging.NullLogger(),
+    };
+    const warn = jest.spyOn(context.logger, 'warn');
+    await workspaceCheck()(tree, context as SchematicContext);
+    expect(warn).not.toHaveBeenCalled();
+  });
 });
diff --git a/libs/components/packages/src/schematics/rules/workspace-check/workspace-check.ts b/libs/components/packages/src/schematics/rules/workspace-check/workspace-check.ts
index 4109950660..8ab47455a5 100644
--- a/libs/components/packages/src/schematics/rules/workspace-check/workspace-check.ts
+++ b/libs/components/packages/src/schematics/rules/workspace-check/workspace-check.ts
@@ -6,9 +6,12 @@ export function workspaceCheck(): Rule {
   return async (tree: Tree, context: SchematicContext): Promise<void> => {
     const { workspace } = await getWorkspace(tree);
     workspace.projects.forEach((project, projectName) => {
-      const build = project.targets.get('build');
+      const build = { ...project.targets.get('build') };
       if (
-        build?.builder === '@angular-devkit/build-angular:application' &&
+        [
+          '@angular/build:application',
+          '@angular-devkit/build-angular:application',
+        ].includes(build.builder ?? '') &&
         (build.options?.['ssr'] ||
           Object.values(build.configurations ?? {}).some(
             (config) => config?.['ssr'],
diff --git a/libs/components/pages/project.json b/libs/components/pages/project.json
index 46d983ef83..b6f9278c6d 100644
--- a/libs/components/pages/project.json
+++ b/libs/components/pages/project.json
@@ -24,7 +24,7 @@
       "dependsOn": [
         "^build",
         {
-          "projects": ["core", "indicators"],
+          "projects": ["core", "indicators", "layout"],
           "target": "build"
         }
       ],
diff --git a/libs/components/split-view/package.json b/libs/components/split-view/package.json
index 3efe0509c6..e70c0eb475 100644
--- a/libs/components/split-view/package.json
+++ b/libs/components/split-view/package.json
@@ -17,8 +17,8 @@
   "homepage": "https://github.com/blackbaud/skyux#readme",
   "peerDependencies": {
     "@angular/animations": "^19.0.5",
-    "@angular/common": "^19.0.5",
     "@angular/cdk": "^19.0.4",
+    "@angular/common": "^19.0.5",
     "@angular/core": "^19.0.5",
     "@angular/platform-browser": "^19.0.5",
     "@skyux-sdk/testing": "0.0.0-PLACEHOLDER",
diff --git a/libs/sdk/e2e-schematics/package.json b/libs/sdk/e2e-schematics/package.json
index b09b90ab85..cb2cbb1cb4 100644
--- a/libs/sdk/e2e-schematics/package.json
+++ b/libs/sdk/e2e-schematics/package.json
@@ -5,15 +5,15 @@
     "@angular-devkit/core": "^19.0.6",
     "@angular/cdk": "^19.0.4",
     "@angular/cli": "^19.0.6",
-    "@nx/angular": "^20.1.4",
-    "@nx/cypress": "^20.1.4",
-    "@nx/devkit": "^20.1.4",
-    "@nx/eslint": "^20.1.4",
-    "@nx/storybook": "^20.1.4",
-    "@nx/workspace": "^20.1.4",
-    "@percy/sdk-utils": "^1.30.4",
+    "@nx/angular": "^20.3.0",
+    "@nx/cypress": "^20.3.0",
+    "@nx/devkit": "^20.3.0",
+    "@nx/eslint": "^20.3.0",
+    "@nx/storybook": "^20.3.0",
+    "@nx/workspace": "^20.3.0",
+    "@percy/sdk-utils": "^1.30.6",
     "@schematics/angular": "^19.0.6",
-    "nx": "^20.1.4"
+    "nx": "^20.3.0"
   },
   "dependencies": {
     "tslib": "^2.8.1"
diff --git a/libs/sdk/testing/package.json b/libs/sdk/testing/package.json
index 737130a6aa..84409cc137 100644
--- a/libs/sdk/testing/package.json
+++ b/libs/sdk/testing/package.json
@@ -20,7 +20,7 @@
     "@angular/core": "^19.0.5",
     "@angular/platform-browser": "^19.0.5",
     "@skyux/i18n": "0.0.0-PLACEHOLDER",
-    "axe-core": "^3.5.6 || ~4.6.3 || ~4.7.2 || ~4.10"
+    "axe-core": "^3.5.6 || ~4.6.3 || ~4.7.2 || ~4.10.2"
   },
   "dependencies": {
     "tslib": "^2.8.1"
diff --git a/libs/sdk/tools/package.json b/libs/sdk/tools/package.json
index 7bc09988a4..833aa916c0 100644
--- a/libs/sdk/tools/package.json
+++ b/libs/sdk/tools/package.json
@@ -2,6 +2,6 @@
   "name": "@skyux-sdk/tools",
   "generators": "./generators.json",
   "peerDependencies": {
-    "@nx/devkit": "^20.1.4"
+    "@nx/devkit": "^20.3.0"
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 63ac36219d..be91c7b8e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,10 +24,10 @@
         "@nx/angular": "20.3.0",
         "@skyux/icons": "7.10.0",
         "@storybook/addon-interactions": "8.4.7",
-        "ag-grid-angular": "32.2.2",
-        "ag-grid-community": "32.2.2",
+        "ag-grid-angular": "32.3.3",
+        "ag-grid-community": "32.3.3",
         "autonumeric": "4.10.5",
-        "axe-core": "4.10.0",
+        "axe-core": "4.10.2",
         "comment-json": "4.2.4",
         "dom-autoscroller": "2.3.4",
         "dompurify": "3.2.3",
@@ -11576,29 +11576,32 @@
       }
     },
     "node_modules/ag-charts-types": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.2.0.tgz",
-      "integrity": "sha512-PUqH1QtugpYLnlbMdeSZVf5PpT1XZVsP69qN1JXhetLtQpVC28zaj7ikwu9CMA9N9b+dBboA9QcjUQUJZVUokQ=="
+      "version": "10.3.3",
+      "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.3.3.tgz",
+      "integrity": "sha512-8rmyquaTkwfP4Lzei/W/cbkq9wwEl8+grIo3z97mtxrMIXh9sHJK1oJipd/u08MmBZrca5Jjtn5F1+UNPu/4fQ==",
+      "license": "MIT"
     },
     "node_modules/ag-grid-angular": {
-      "version": "32.2.2",
-      "resolved": "https://registry.npmjs.org/ag-grid-angular/-/ag-grid-angular-32.2.2.tgz",
-      "integrity": "sha512-Q98eLkgBAT74HqAk+jVDzcbSCWZQwIfprjn+3ZClW1co1erRNlnqGF+bq7UeJu98PPkoMHNXU15qw8iO9UnYpg==",
+      "version": "32.3.3",
+      "resolved": "https://registry.npmjs.org/ag-grid-angular/-/ag-grid-angular-32.3.3.tgz",
+      "integrity": "sha512-i5wPWUIJujlsnLuQTVEGxGm21lkCbURhgKjZ3qEKjJzLnG6qIR2zJhJYkiV2/427TYDolBm5hdh9oUyT9/FHnQ==",
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
       },
       "peerDependencies": {
         "@angular/common": ">= 16.0.0",
         "@angular/core": ">= 16.0.0",
-        "ag-grid-community": "32.2.2"
+        "ag-grid-community": "32.3.3"
       }
     },
     "node_modules/ag-grid-community": {
-      "version": "32.2.2",
-      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.2.2.tgz",
-      "integrity": "sha512-RQluoEXbTCkYHHwmOUzG4wGBX3yQffFH+52aWJUAFqFKNNHYKYGhjvH2iuAa2xw3CWva1hupUaDpP+Rol32Arg==",
+      "version": "32.3.3",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.3.3.tgz",
+      "integrity": "sha512-KhSJ3B6mwRFA4cLjNjOZkDndJBh8o83794ZHl4Q7xP9MJf43oCN9qoZ8pyBanohgpVfLcP0scYYCr9xIlzjdiA==",
+      "license": "MIT",
       "dependencies": {
-        "ag-charts-types": "10.2.0"
+        "ag-charts-types": "10.3.3"
       }
     },
     "node_modules/agent-base": {
@@ -12031,9 +12034,10 @@
       "dev": true
     },
     "node_modules/axe-core": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.0.tgz",
-      "integrity": "sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==",
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.2.tgz",
+      "integrity": "sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==",
+      "license": "MPL-2.0",
       "engines": {
         "node": ">=4"
       }
diff --git a/package.json b/package.json
index 6448af9cb6..f34f7f01a7 100644
--- a/package.json
+++ b/package.json
@@ -103,10 +103,10 @@
     "@nx/angular": "20.3.0",
     "@skyux/icons": "7.10.0",
     "@storybook/addon-interactions": "8.4.7",
-    "ag-grid-angular": "32.2.2",
-    "ag-grid-community": "32.2.2",
+    "ag-grid-angular": "32.3.3",
+    "ag-grid-community": "32.3.3",
     "autonumeric": "4.10.5",
-    "axe-core": "4.10.0",
+    "axe-core": "4.10.2",
     "comment-json": "4.2.4",
     "dom-autoscroller": "2.3.4",
     "dompurify": "3.2.3",