@primer/styled-react 1.0.4-rc.f372aa7ad → 1.0.5-rc.f3b0d9cc2

package/dist/components/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/components/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,eAAO,MAAM,gBAAgB,QAAQ,CAAA;AAKrC,MAAM,MAAM,KAAK,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,CAAA;AACxC,KAAK,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;AACnD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAAA;AAElD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AA8BD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAkF/E,CAAA;AAED,wBAAgB,QAAQ;YA/Gd,KAAK;kBACC,MAAM;gBACR,iBAAiB;wBACT,SAAS;0BACP,MAAM;gBAChB,MAAM;kBACJ,MAAM;kBACN,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;kBACvD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;oBAC1C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;EAwG7D;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,UAG1F;AAqGD,eAAe,aAAa,CAAA"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/components/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,gBAAgB,QAAQ,CAAA;AAKrC,MAAM,MAAM,KAAK,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,CAAA;AACxC,KAAK,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;AACnD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAAA;AAElD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AA8CD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAyE/E,CAAA;AAED,wBAAgB,QAAQ;YAtHd,KAAK;kBACC,MAAM;gBACR,iBAAiB;wBACT,SAAS;0BACP,MAAM;gBAChB,MAAM;kBACJ,MAAM;kBACN,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;kBACvD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;oBAC1C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;EA+G7D;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,UAG1F;AAqED,eAAe,aAAa,CAAA"}

package/dist/components/ThemeProvider.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import { theme, useId, useSyncedState } from '@primer/react';
 import deepmerge from 'deepmerge';
@@ -18,15 +17,27 @@ const ThemeContext = /*#__PURE__*/React.createContext({
 });
 
 // inspired from __NEXT_DATA__, we use application/json to avoid CSRF policy with inline scripts
+const serverHandoffCache = new Map();
+const emptyHandoff = {};
 const getServerHandoff = id => {
+  if (typeof document === 'undefined') return emptyHandoff;
+  const cached = serverHandoffCache.get(id);
+  if (cached !== undefined) return cached;
   try {
     const serverData = document.getElementById(`__PRIMER_DATA_${id}__`)?.textContent;
-    if (serverData) return JSON.parse(serverData);
+    if (serverData) {
+      const parsed = JSON.parse(serverData);
+      serverHandoffCache.set(id, parsed);
+      return parsed;
+    }
   } catch (_error) {
     // if document/element does not exist or JSON is invalid, supress error
   }
-  return {};
+  const empty = {};
+  serverHandoffCache.set(id, empty);
+  return empty;
 };
+const emptySubscribe = () => () => {};
 const ThemeProvider = ({
   children,
   ...props
@@ -42,56 +53,33 @@ const ThemeProvider = ({
   // Initialize state
   const theme$1 = props.theme ?? fallbackTheme ?? theme;
   const uniqueDataId = useId();
-  const {
-    resolvedServerColorMode
-  } = getServerHandoff(uniqueDataId);
-  const resolvedColorModePassthrough = React.useRef(resolvedServerColorMode);
   const [colorMode, setColorMode] = useSyncedState(props.colorMode ?? fallbackColorMode ?? defaultColorMode);
   const [dayScheme, setDayScheme] = useSyncedState(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme);
   const [nightScheme, setNightScheme] = useSyncedState(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme);
   const systemColorMode = useSystemColorMode();
-  // eslint-disable-next-line react-hooks/refs
-  const resolvedColorMode = resolvedColorModePassthrough.current || resolveColorMode(colorMode, systemColorMode);
+  const clientColorMode = resolveColorMode(colorMode, systemColorMode);
+  // During SSR/hydration, use the server-rendered color mode from the handoff script tag
+  // to avoid mismatches. After hydration, resolve from client state.
+  const resolvedColorMode = React.useSyncExternalStore(emptySubscribe, () => clientColorMode, () => getServerHandoff(uniqueDataId).resolvedServerColorMode ?? clientColorMode);
   const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
   const {
     resolvedTheme,
     resolvedColorScheme
   } = React.useMemo(() => applyColorScheme(theme$1, colorScheme), [theme$1, colorScheme]);
-
-  // this effect will only run on client
-  React.useEffect(function updateColorModeAfterServerPassthrough() {
-    const resolvedColorModeOnClient = resolveColorMode(colorMode, systemColorMode);
-    if (resolvedColorModePassthrough.current) {
-      // if the resolved color mode passed on from the server is not the resolved color mode on client, change it!
-      if (resolvedColorModePassthrough.current !== resolvedColorModeOnClient) {
-        window.setTimeout(() => {
-          // use ReactDOM.flushSync to prevent automatic batching of state updates since React 18
-          // ref: https://github.com/reactwg/react-18/discussions/21
-          ReactDOM.flushSync(() => {
-            // override colorMode to whatever is resolved on the client to get a re-render
-            setColorMode(resolvedColorModeOnClient);
-          });
-
-          // immediately after that, set the colorMode to what the user passed to respond to system color mode changes
-          setColorMode(colorMode);
-        });
-      }
-      resolvedColorModePassthrough.current = null;
-    }
-  }, [colorMode, systemColorMode, setColorMode]);
+  const contextValue = React.useMemo(() => ({
+    theme: resolvedTheme,
+    colorScheme,
+    colorMode,
+    resolvedColorMode,
+    resolvedColorScheme,
+    dayScheme,
+    nightScheme,
+    setColorMode,
+    setDayScheme,
+    setNightScheme
+  }), [resolvedTheme, colorScheme, colorMode, resolvedColorMode, resolvedColorScheme, dayScheme, nightScheme, setColorMode, setDayScheme, setNightScheme]);
   return /*#__PURE__*/jsx(ThemeContext.Provider, {
-    value: {
-      theme: resolvedTheme,
-      colorScheme,
-      colorMode,
-      resolvedColorMode,
-      resolvedColorScheme,
-      dayScheme,
-      nightScheme,
-      setColorMode,
-      setDayScheme,
-      setNightScheme
-    },
+    value: contextValue,
     children: /*#__PURE__*/jsxs(ThemeProvider$1, {
       theme: resolvedTheme,
       children: [children, props.preventSSRMismatch ? /*#__PURE__*/jsx("script", {
@@ -115,48 +103,20 @@ function useColorSchemeVar(values, fallback) {
   } = useTheme();
   return values[colorScheme] ?? fallback;
 }
+function subscribeToSystemColorMode(callback) {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  const media = window?.matchMedia?.('(prefers-color-scheme: dark)');
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  media?.addEventListener('change', callback);
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  return () => media?.removeEventListener('change', callback);
+}
 function useSystemColorMode() {
-  const [systemColorMode, setSystemColorMode] = React.useState(getSystemColorMode);
-  React.useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    const media = window?.matchMedia?.('(prefers-color-scheme: dark)');
-    function matchesMediaToColorMode(matches) {
-      return matches ? 'night' : 'day';
-    }
-    function handleChange(event) {
-      const isNight = event.matches;
-      setSystemColorMode(matchesMediaToColorMode(isNight));
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (media) {
-      // just in case the preference changed before the event listener was attached
-      const isNight = media.matches;
-      setSystemColorMode(matchesMediaToColorMode(isNight));
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (media.addEventListener !== undefined) {
-        media.addEventListener('change', handleChange);
-        return function cleanup() {
-          media.removeEventListener('change', handleChange);
-        };
-      }
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      else if (media.addListener !== undefined) {
-        media.addListener(handleChange);
-        return function cleanup() {
-          media.removeListener(handleChange);
-        };
-      }
-    }
-  }, []);
-  return systemColorMode;
+  return React.useSyncExternalStore(subscribeToSystemColorMode, getSystemColorMode, () => 'day');
 }
 function getSystemColorMode() {
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)')?.matches) {
-    return 'night';
-  }
-  return 'day';
+  return window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? 'night' : 'day';
 }
 function resolveColorMode(colorMode, systemColorMode) {
   switch (colorMode) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/styled-react",
-  "version": "1.0.4-rc.f372aa7ad",
+  "version": "1.0.5-rc.f3b0d9cc2",
   "type": "module",
   "exports": {
     ".": {
@@ -40,15 +40,18 @@
     "@types/styled-system": "^5.1.23",
     "@types/styled-system__css": "^5.0.16",
     "@types/styled-system__theme-get": "^5.0.1",
+    "clsx": "^2.1.1",
+    "deepmerge": "^4.3.1",
+    "focus-visible": "^5.2.1",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@primer/primitives": "10.x || 11.x",
-    "@primer/react": "^38.18.0",
+    "@primer/react": "^38.19.0",
     "@rollup/plugin-babel": "^6.1.0",
-    "@storybook/react-vite": "^10.1.11",
+    "@storybook/react-vite": "^10.3.3",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
     "@types/styled-components": "^5.1.26",