From 9facfd4583bb36d297a41331bfe1b0bec6d0c6b2 Mon Sep 17 00:00:00 2001
From: Felix Habib <fhabib@seek.com.au>
Date: Mon, 25 Nov 2024 14:21:39 +1100
Subject: [PATCH] add client check

---
 .../components/MenuRenderer/MenuRenderer.tsx  | 109 ++++++++++--------
 1 file changed, 58 insertions(+), 51 deletions(-)

diff --git a/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.tsx b/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.tsx
index 0f92b1ae17b..a9be682bca9 100644
--- a/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.tsx
+++ b/packages/braid-design-system/src/lib/components/MenuRenderer/MenuRenderer.tsx
@@ -386,6 +386,11 @@ export function Menu({
   triggerPosition,
 }: MenuProps) {
   let dividerCount = 0;
+  const [isClient, setIsClient] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsClient(true);
+  }, []);
 
   const inlineVars =
     triggerPosition &&
@@ -395,59 +400,61 @@ export function Menu({
     });
 
   return (
-    <BraidPortal>
-      <MenuRendererContext.Provider value={{ reserveIconSpace }}>
-        <Box
-          role="menu"
-          position="absolute"
-          style={inlineVars}
-          zIndex="dropdown"
-          boxShadow={placement === 'top' ? 'small' : 'medium'}
-          borderRadius={borderRadius}
-          background="surface"
-          marginTop={placement === 'bottom' ? offsetSpace : undefined}
-          marginBottom={placement === 'top' ? offsetSpace : undefined}
-          transition="fast"
-          opacity={!open ? 0 : undefined}
-          overflow="hidden"
-          className={[
-            styles.menuPosition,
-            !open && styles.menuIsClosed,
-            width !== 'content' && styles.width[width],
-          ]}
-        >
+    isClient && (
+      <BraidPortal>
+        <MenuRendererContext.Provider value={{ reserveIconSpace }}>
           <Box
-            paddingY={styles.menuYPadding}
-            className={styles.menuHeightLimit}
+            role="menu"
+            position="absolute"
+            style={inlineVars}
+            zIndex="dropdown"
+            boxShadow={placement === 'top' ? 'small' : 'medium'}
+            borderRadius={borderRadius}
+            background="surface"
+            marginTop={placement === 'bottom' ? offsetSpace : undefined}
+            marginBottom={placement === 'top' ? offsetSpace : undefined}
+            transition="fast"
+            opacity={!open ? 0 : undefined}
+            overflow="hidden"
+            className={[
+              styles.menuPosition,
+              !open && styles.menuIsClosed,
+              width !== 'content' && styles.width[width],
+            ]}
           >
-            {Children.map(children, (item, i) => {
-              if (isDivider(item)) {
-                dividerCount++;
-                return item;
-              }
-              const menuItemIndex = i - dividerCount;
-              return (
-                <MenuRendererItemContext.Provider
-                  key={menuItemIndex}
-                  value={{
-                    isHighlighted: menuItemIndex === highlightIndex,
-                    index: menuItemIndex,
-                    dispatch,
-                    focusTrigger,
-                  }}
-                >
-                  {item}
-                </MenuRendererItemContext.Provider>
-              );
-            })}
+            <Box
+              paddingY={styles.menuYPadding}
+              className={styles.menuHeightLimit}
+            >
+              {Children.map(children, (item, i) => {
+                if (isDivider(item)) {
+                  dividerCount++;
+                  return item;
+                }
+                const menuItemIndex = i - dividerCount;
+                return (
+                  <MenuRendererItemContext.Provider
+                    key={menuItemIndex}
+                    value={{
+                      isHighlighted: menuItemIndex === highlightIndex,
+                      index: menuItemIndex,
+                      dispatch,
+                      focusTrigger,
+                    }}
+                  >
+                    {item}
+                  </MenuRendererItemContext.Provider>
+                );
+              })}
+            </Box>
+            <Overlay
+              boxShadow="borderNeutralLight"
+              borderRadius={borderRadius}
+              visible
+            />
           </Box>
-          <Overlay
-            boxShadow="borderNeutralLight"
-            borderRadius={borderRadius}
-            visible
-          />
-        </Box>
-      </MenuRendererContext.Provider>
-    </BraidPortal>
+        </MenuRendererContext.Provider>
+      </BraidPortal>
+    )
   );
 }