From 36a6a19de8a840b6d39633ff33d762a91d59946b Mon Sep 17 00:00:00 2001
From: Alessio Gravili <alessio@gravili.de>
Date: Thu, 28 Nov 2024 14:00:23 -0700
Subject: [PATCH] fix(ui): css is not defined error in production build (#9603)

Related: https://github.com/payloadcms/payload/pull/9456
Fixes https://github.com/payloadcms/payload/issues/9598

This ensures that the `CSS` property is accessed safely, preventing the
"CSS is not defined" error
---
 packages/ui/src/elements/AnimateHeight/index.tsx            | 1 +
 .../ui/src/elements/AnimateHeight/usePatchAnimateHeight.ts  | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/elements/AnimateHeight/index.tsx b/packages/ui/src/elements/AnimateHeight/index.tsx
index f5d1e24cd5e..5b6d8790d77 100644
--- a/packages/ui/src/elements/AnimateHeight/index.tsx
+++ b/packages/ui/src/elements/AnimateHeight/index.tsx
@@ -1,3 +1,4 @@
+'use client'
 import React, { useEffect, useRef } from 'react'
 
 import { usePatchAnimateHeight } from './usePatchAnimateHeight.js'
diff --git a/packages/ui/src/elements/AnimateHeight/usePatchAnimateHeight.ts b/packages/ui/src/elements/AnimateHeight/usePatchAnimateHeight.ts
index 889d2366b6c..c1443c95bb9 100644
--- a/packages/ui/src/elements/AnimateHeight/usePatchAnimateHeight.ts
+++ b/packages/ui/src/elements/AnimateHeight/usePatchAnimateHeight.ts
@@ -1,3 +1,4 @@
+'use client'
 import { useEffect, useMemo, useRef } from 'react'
 
 export const usePatchAnimateHeight = ({
@@ -10,7 +11,10 @@ export const usePatchAnimateHeight = ({
   open: boolean
 }): { browserSupportsKeywordAnimation: boolean } => {
   const browserSupportsKeywordAnimation = useMemo(
-    () => (CSS.supports ? Boolean(CSS.supports('interpolate-size', 'allow-keywords')) : false),
+    () =>
+      typeof CSS !== 'undefined' && CSS && CSS.supports
+        ? Boolean(CSS.supports('interpolate-size', 'allow-keywords'))
+        : false,
     [],
   )