Update styledsystemprovider to accept a ref (#151)

.changeset/shy-bobcats-accept.md

@@ -0,0 +1,5 @@
+---
+"@hopper-ui/styled-system": patch
+---
+
+StyledSystemProvider now accepts a ref

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,13 +73,23 @@ 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}
                 </Div>
             </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 };