From 136104d6ffc08070f140fe44374f0bf91d0fb1d9 Mon Sep 17 00:00:00 2001
From: Alex Dunae <alex.dunae@bentley.com>
Date: Fri, 10 Jul 2026 12:40:38 -0700
Subject: [PATCH 1/3] Add nonce prop for MUI datagrid components

---
 ...x-datagrid-csp-nonce_2026-07-10-00-00.json | 10 ++++
 packages/modules/imodel-browser/README.md     | 10 ++++
 .../src/mui/containers/DataGridNonce.test.tsx | 50 +++++++++++++++++++
 .../mui/containers/ITwinGrid/ITwinGridMUI.tsx |  6 +++
 .../containers/ITwinGrid/ITwinTableMUI.tsx    |  6 +++
 .../containers/iModelGrid/IModelGridMUI.tsx   |  6 +++
 .../containers/iModelGrid/IModelTableMUI.tsx  |  6 +++
 7 files changed, 94 insertions(+)
 create mode 100644 common/changes/@itwin/imodel-browser-react/alex-datagrid-csp-nonce_2026-07-10-00-00.json
 create mode 100644 packages/modules/imodel-browser/src/mui/containers/DataGridNonce.test.tsx

diff --git a/common/changes/@itwin/imodel-browser-react/alex-datagrid-csp-nonce_2026-07-10-00-00.json b/common/changes/@itwin/imodel-browser-react/alex-datagrid-csp-nonce_2026-07-10-00-00.json
new file mode 100644
index 00000000..60591e20
--- /dev/null
+++ b/common/changes/@itwin/imodel-browser-react/alex-datagrid-csp-nonce_2026-07-10-00-00.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/imodel-browser-react",
+      "comment": "Add CSP nonce support to the MUI iTwin and iModel DataGrid table views.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@itwin/imodel-browser-react"
+}
diff --git a/packages/modules/imodel-browser/README.md b/packages/modules/imodel-browser/README.md
index c3c7d15c..1b268586 100644
--- a/packages/modules/imodel-browser/README.md
+++ b/packages/modules/imodel-browser/README.md
@@ -8,6 +8,16 @@ Contains components that let the user browse the iModels of a context and select
 
 When making changes to the src, run `rushx start` in the dev folder to enable source watching and rebuild, so the storybook dev-server will have access to updated code on successful code compilation.
 
+## Content Security Policy for MUI Components
+
+Some MUI components create runtime style elements. Applications with a nonce-based Content Security Policy can pass the current document nonce to `ITwinGridMUI` or `IModelGridMUI`:
+
+```tsx
+<IModelGridMUI {...props} nonce={cspNonce} />
+```
+
+The nonce must match the value in the document's `style-src` or `style-src-elem` directive..
+
 ## Changelog
 
 See complete CHANGELOG [here](https://github.com/iTwin/admin-components-react/blob/main/packages/modules/imodel-browser/CHANGELOG.md)
diff --git a/packages/modules/imodel-browser/src/mui/containers/DataGridNonce.test.tsx b/packages/modules/imodel-browser/src/mui/containers/DataGridNonce.test.tsx
new file mode 100644
index 00000000..bda86812
--- /dev/null
+++ b/packages/modules/imodel-browser/src/mui/containers/DataGridNonce.test.tsx
@@ -0,0 +1,50 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import "@testing-library/jest-dom";
+
+import { render, screen } from "@testing-library/react";
+import React from "react";
+
+import { IModelTableMUI } from "./iModelGrid/IModelTableMUI";
+import { ITwinTableMUI } from "./ITwinGrid/ITwinTableMUI";
+
+jest.mock("@mui/x-data-grid", () => ({
+  DataGrid: ({ nonce }: { nonce?: string }) => (
+    <div data-testid="data-grid" nonce={nonce} />
+  ),
+}));
+
+const nonce = "test-csp-nonce";
+
+describe("MUI table CSP nonce", () => {
+  it("forwards the nonce to the iTwin DataGrid", () => {
+    render(
+      <ITwinTableMUI
+        iTwins={[]}
+        strings={{} as any}
+        iTwinFavorites={new Set()}
+        addITwinToFavorites={jest.fn()}
+        removeITwinFromFavorites={jest.fn()}
+        refetchITwins={jest.fn()}
+        nonce={nonce}
+      />
+    );
+
+    expect(screen.getByTestId("data-grid")).toHaveAttribute("nonce", nonce);
+  });
+
+  it("forwards the nonce to the iModel DataGrid", () => {
+    render(
+      <IModelTableMUI
+        iModels={[]}
+        strings={{} as any}
+        refetchIModels={jest.fn()}
+        nonce={nonce}
+      />
+    );
+
+    expect(screen.getByTestId("data-grid")).toHaveAttribute("nonce", nonce);
+  });
+});
diff --git a/packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinGridMUI.tsx b/packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinGridMUI.tsx
index bce76405..1afc1bc4 100644
--- a/packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinGridMUI.tsx
+++ b/packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinGridMUI.tsx
@@ -75,6 +75,10 @@ export interface ITwinGridPropsMUI
   tileOverrides?: Partial<ITwinTilePropsMUI>;
   /** Overrides for table column definitions and visibility in cells viewMode */
   tableOverrides?: ITwinTableOverridesMUI;
+  /**
+   * Nonce applied to `<style>` elements. Required if your application uses a Content Security Policy (CSP) that restricts inline styles.
+   */
+  nonce?: string;
   /** Localized string overrides - falls back to default English strings if not provided */
   stringsOverrides?: Partial<ITwinGridStringsMUI>;
 }
@@ -99,6 +103,7 @@ export const ITwinGridMUI = ({
   viewMode,
   tableOverrides,
   className,
+  nonce,
 }: ITwinGridPropsMUI) => {
   const {
     iTwinFavorites,
@@ -287,6 +292,7 @@ export const ITwinGridMUI = ({
       tableOverrides={tableOverrides}
       isLoading={fetchStatus === DataStatus.Fetching}
       fetchMore={fetchMore}
+      nonce={nonce}
     />
   );
 };
diff --git a/packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinTableMUI.tsx b/packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinTableMUI.tsx
index a5c93f7e..09b8c1ed 100644
--- a/packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinTableMUI.tsx
+++ b/packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinTableMUI.tsx
@@ -65,6 +65,10 @@ export interface ITwinTableMUIProps {
   isLoading?: boolean;
   /** Called when more data should be loaded. */
   fetchMore?: (() => void) | false;
+  /**
+   * Nonce applied to `<style>` elements. Required if your application uses a Content Security Policy (CSP) that restricts inline styles.
+   */
+  nonce?: string;
 }
 
 /**
@@ -85,6 +89,7 @@ export const ITwinTableMUI = ({
   } = {},
   isLoading,
   fetchMore,
+  nonce,
 }: ITwinTableMUIProps) => {
   // Eagerly load all available data so the table has the full dataset
   // for client-side pagination and sorting.
@@ -187,6 +192,7 @@ export const ITwinTableMUI = ({
     <DataGrid<ITwinFull>
       rows={iTwins}
       columns={columns}
+      nonce={nonce}
       loading={isLoading}
       onRowClick={
         actions
diff --git a/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelGridMUI.tsx b/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelGridMUI.tsx
index b813b43c..15391f18 100644
--- a/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelGridMUI.tsx
+++ b/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelGridMUI.tsx
@@ -102,6 +102,10 @@ export interface IModelGridMUIProps
   /** Static props to apply over each tile, mainly used for tileProps, overrides IModelGrid provided values */
   tileOverrides?: Partial<IModelTileMUIProps>;
   tableOverrides?: IModelTableOverridesMUI;
+  /**
+   * Nonce applied to `<style>` elements. Required if your application uses a Content Security Policy (CSP) that restricts inline styles.
+   */
+  nonce?: string;
   stringsOverrides?: Partial<IModelGridStringsMUI>;
 }
 
@@ -149,6 +153,7 @@ const IModelGridInternal = ({
   onRefetch,
   dataMode = "internal",
   disableAddToRecents = false,
+  nonce,
 }: IModelGridMUIProps) => {
   const [sort, setSort] = React.useState<IModelSortOptions>(sortOptions);
 
@@ -408,6 +413,7 @@ const IModelGridInternal = ({
             tableOverrides={tableOverrides}
             isLoading={fetchStatus === DataStatus.Fetching}
             fetchMore={fetchMore}
+            nonce={nonce}
             data-testid="imodel-table"
           />
         )}
diff --git a/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelTableMUI.tsx b/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelTableMUI.tsx
index 82d86087..e52c77d2 100644
--- a/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelTableMUI.tsx
+++ b/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelTableMUI.tsx
@@ -62,6 +62,10 @@ export interface IModelTableMUIProps {
   isLoading?: boolean;
   /** Called when more data should be loaded. */
   fetchMore?: (() => void) | false;
+  /**
+   * Nonce applied to `<style>` elements. Required if your application uses a Content Security Policy (CSP) that restricts inline styles.
+   */
+  nonce?: string;
 }
 
 /**
@@ -79,6 +83,7 @@ export const IModelTableMUI = ({
   } = {},
   isLoading,
   fetchMore,
+  nonce,
 }: IModelTableMUIProps) => {
   // Eagerly load all available data so the table has the full dataset
   // for client-side pagination and sorting.
@@ -187,6 +192,7 @@ export const IModelTableMUI = ({
     <DataGrid<IModelFull>
       rows={iModels}
       columns={columns}
+      nonce={nonce}
       loading={isLoading}
       onRowClick={
         actions

From c04b54211c7a7e102294dc92c77145f3169099df Mon Sep 17 00:00:00 2001
From: Alex Dunae <alex.dunae@bentley.com>
Date: Fri, 10 Jul 2026 12:49:10 -0700
Subject: [PATCH 2/3] tidy

---
 packages/modules/imodel-browser/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/modules/imodel-browser/README.md b/packages/modules/imodel-browser/README.md
index 1b268586..d80991d8 100644
--- a/packages/modules/imodel-browser/README.md
+++ b/packages/modules/imodel-browser/README.md
@@ -10,13 +10,13 @@ When making changes to the src, run `rushx start` in the dev folder to enable so
 
 ## Content Security Policy for MUI Components
 
-Some MUI components create runtime style elements. Applications with a nonce-based Content Security Policy can pass the current document nonce to `ITwinGridMUI` or `IModelGridMUI`:
+Some MUI components create runtime `<style>` elements. Applications with a nonce-based Content Security Policy can pass the current document nonce to `ITwinGridMUI` or `IModelGridMUI`:
 
 ```tsx
 <IModelGridMUI {...props} nonce={cspNonce} />
 ```
 
-The nonce must match the value in the document's `style-src` or `style-src-elem` directive..
+The nonce must match the value in the document's `style-src` or `style-src-elem` directive.
 
 ## Changelog
 

From 8567e32f636b50604e5e725ffdf766e02a133da7 Mon Sep 17 00:00:00 2001
From: Alex Dunae <alex.dunae@bentley.com>
Date: Fri, 10 Jul 2026 14:01:26 -0700
Subject: [PATCH 3/3] data-nonce

---
 .../src/mui/containers/DataGridNonce.test.tsx        | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/modules/imodel-browser/src/mui/containers/DataGridNonce.test.tsx b/packages/modules/imodel-browser/src/mui/containers/DataGridNonce.test.tsx
index bda86812..d058fa36 100644
--- a/packages/modules/imodel-browser/src/mui/containers/DataGridNonce.test.tsx
+++ b/packages/modules/imodel-browser/src/mui/containers/DataGridNonce.test.tsx
@@ -12,7 +12,7 @@ import { ITwinTableMUI } from "./ITwinGrid/ITwinTableMUI";
 
 jest.mock("@mui/x-data-grid", () => ({
   DataGrid: ({ nonce }: { nonce?: string }) => (
-    <div data-testid="data-grid" nonce={nonce} />
+    <div data-testid="data-grid" data-nonce={nonce} />
   ),
 }));
 
@@ -32,7 +32,10 @@ describe("MUI table CSP nonce", () => {
       />
     );
 
-    expect(screen.getByTestId("data-grid")).toHaveAttribute("nonce", nonce);
+    expect(screen.getByTestId("data-grid")).toHaveAttribute(
+      "data-nonce",
+      nonce
+    );
   });
 
   it("forwards the nonce to the iModel DataGrid", () => {
@@ -45,6 +48,9 @@ describe("MUI table CSP nonce", () => {
       />
     );
 
-    expect(screen.getByTestId("data-grid")).toHaveAttribute("nonce", nonce);
+    expect(screen.getByTestId("data-grid")).toHaveAttribute(
+      "data-nonce",
+      nonce
+    );
   });
 });