From 6775244c9caa0dc45763b745dac4729f8abcc0a1 Mon Sep 17 00:00:00 2001
From: Alexandre Asselin <alexandre.asselin@gsoft.com>
Date: Wed, 21 Feb 2024 09:33:31 -0500
Subject: [PATCH 1/2] update styledsystemprovider to accept a ref

---
 .../src/StyledSystemProvider.tsx              | 42 +++++++++++++------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/packages/styled-system/src/StyledSystemProvider.tsx b/packages/styled-system/src/StyledSystemProvider.tsx
index a212357d9..1645e7439 100644
--- a/packages/styled-system/src/StyledSystemProvider.tsx
+++ b/packages/styled-system/src/StyledSystemProvider.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useCallback, useState, type ReactNode } from "react";
+import { useCallback, useState, type ReactNode, forwardRef, type ForwardedRef } from "react";
 import { ColorSchemeContext, type ColorScheme, type ColorSchemeContextType, type ColorSchemeOrSystem } from "./color-scheme/ColorSchemeContext.ts";
 import { useColorScheme } from "./color-scheme/useColorScheme.ts";
 import { BodyStyleProvider } from "./global-styles/BodyStyleProvider.tsx";
@@ -8,6 +8,8 @@ import { BreakpointProvider, DefaultUnsupportedMatchMediaBreakpoint, type Breakp
 import { HopperRootCssClass, StyledSystemRootCssClass } from "./styled-system-root-css-class.ts";
 import { TokenProvider } from "./tokens/TokenProvider.tsx";
 
+const GlobalStyledSystemProviderCssSelector = "hop-StyledSystemProvider";
+
 export interface StyledSystemProviderProps extends BreakpointProviderProps, DivProps {
     /** The children of the component */
     children: ReactNode;
@@ -35,13 +37,18 @@ export interface StyledSystemProviderProps extends BreakpointProviderProps, DivP
     withCssVariables?: boolean;
 }
 
-/**
- * StyledSystemProvider is required to be rendered at the root of your application. It is responsible for:
- * - Adding CSS variables to the document
- * - Managing color scheme (light, dark, auto)
- * - Optionally adding body styles to the document
- */
-export function StyledSystemProvider({ children, withBodyStyle = false, withCssVariables = true, colorScheme = "light", defaultColorScheme = "light", unsupportedMatchMediaBreakpoint = DefaultUnsupportedMatchMediaBreakpoint, className, ...rest }: StyledSystemProviderProps) {
+const StyledSystemProvider = (props:StyledSystemProviderProps, ref: ForwardedRef<HTMLDivElement>) => {
+    const {
+        children,
+        withBodyStyle = false,
+        withCssVariables = true,
+        colorScheme = "light",
+        defaultColorScheme = "light",
+        unsupportedMatchMediaBreakpoint = DefaultUnsupportedMatchMediaBreakpoint,
+        className,
+        ...rest
+    } = props;
+
     const [remoteColorScheme, setRemoteColorScheme] = useState<ColorScheme>();
     const computedColorScheme = useColorScheme(remoteColorScheme ?? colorScheme, defaultColorScheme);
 
@@ -50,11 +57,12 @@ export function StyledSystemProvider({ children, withBodyStyle = false, withCssV
     }, [setRemoteColorScheme]);
 
     const classNames = clsx(
+        className,
+        GlobalStyledSystemProviderCssSelector,
         HopperRootCssClass,
         `${HopperRootCssClass}-${computedColorScheme}`,
         StyledSystemRootCssClass,
-        `${StyledSystemRootCssClass}-${computedColorScheme}`,
-        className
+        `${StyledSystemRootCssClass}-${computedColorScheme}`
     );
 
     return (
@@ -65,7 +73,7 @@ export function StyledSystemProvider({ children, withBodyStyle = false, withCssV
             }}
         >
             <BreakpointProvider unsupportedMatchMediaBreakpoint={unsupportedMatchMediaBreakpoint}>
-                <Div className={classNames} {...rest}>
+                <Div ref={ref} className={classNames} {...rest}>
                     {withBodyStyle && <BodyStyleProvider />}
                     {withCssVariables && <TokenProvider />}
                     {children}
@@ -73,5 +81,15 @@ export function StyledSystemProvider({ children, withBodyStyle = false, withCssV
             </BreakpointProvider>
         </ColorSchemeContext.Provider>
     );
-}
+};
+
+/**
+ * StyledSystemProvider is required to be rendered at the root of your application. It is responsible for:
+ * - Adding CSS variables to the document
+ * - Managing color scheme (light, dark, auto)
+ * - Optionally adding body styles to the document
+ */
+const _StyledSystemProvider = forwardRef<HTMLDivElement, StyledSystemProviderProps>(StyledSystemProvider);
+_StyledSystemProvider.displayName = "StyledSystemProvider";
 
+export { _StyledSystemProvider as StyledSystemProvider };

From 7717443d1a9b5c90ded97f37d841d6bdc3130918 Mon Sep 17 00:00:00 2001
From: Alexandre Asselin <alexandre.asselin@gsoft.com>
Date: Wed, 21 Feb 2024 09:34:51 -0500
Subject: [PATCH 2/2] add changeset

---
 .changeset/shy-bobcats-accept.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/shy-bobcats-accept.md

diff --git a/.changeset/shy-bobcats-accept.md b/.changeset/shy-bobcats-accept.md
new file mode 100644
index 000000000..3516baa8b
--- /dev/null
+++ b/.changeset/shy-bobcats-accept.md
@@ -0,0 +1,5 @@
+---
+"@hopper-ui/styled-system": patch
+---
+
+StyledSystemProvider now accepts a ref