From c87e80c129fd293610bdc7df902c0df2b08f3220 Mon Sep 17 00:00:00 2001
From: Cameron Dutro <camertron@gmail.com>
Date: Thu, 16 Jan 2025 15:13:26 -0800
Subject: [PATCH] Avoid TypeError in `PageLayout` checking document.body
 (#5552)

* Avoid TypeError in PageLayout checking document.body

* Make eslint happy
---
 .changeset/lazy-jars-leave.md                | 5 +++++
 packages/react/src/PageLayout/PageLayout.tsx | 9 ++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/lazy-jars-leave.md

diff --git a/.changeset/lazy-jars-leave.md b/.changeset/lazy-jars-leave.md
new file mode 100644
index 00000000000..22849369cf2
--- /dev/null
+++ b/.changeset/lazy-jars-leave.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Avoid accessing properties of potentially null document.body in PageLayout
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index ee166fb5bce..f1240338f66 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -364,13 +364,15 @@ const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps & Draggable
       window.addEventListener('keydown', handleKeyDrag)
       window.addEventListener('mouseup', handleDragEnd)
       window.addEventListener('keyup', handleKeyDragEnd)
-      document.body.setAttribute('data-page-layout-dragging', 'true')
+      const body = document.body as HTMLElement | undefined
+      body?.setAttribute('data-page-layout-dragging', 'true')
     } else {
       window.removeEventListener('mousemove', handleDrag)
       window.removeEventListener('mouseup', handleDragEnd)
       window.removeEventListener('keydown', handleKeyDrag)
       window.removeEventListener('keyup', handleKeyDragEnd)
-      document.body.removeAttribute('data-page-layout-dragging')
+      const body = document.body as HTMLElement | undefined
+      body?.removeAttribute('data-page-layout-dragging')
     }
 
     return () => {
@@ -378,7 +380,8 @@ const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps & Draggable
       window.removeEventListener('mouseup', handleDragEnd)
       window.removeEventListener('keydown', handleKeyDrag)
       window.removeEventListener('keyup', handleKeyDragEnd)
-      document.body.removeAttribute('data-page-layout-dragging')
+      const body = document.body as HTMLElement | undefined
+      body?.removeAttribute('data-page-layout-dragging')
     }
   }, [isDragging, isKeyboardDrag, currentWidth, minWidth, maxWidth])