@primer/react 38.1.0-rc.430f77ae3 → 38.1.0-rc.6118e2738

package/CHANGELOG.md

@@ -6,6 +6,8 @@
 
 - [#7063](https://github.com/primer/react/pull/7063) [`247c66a`](https://github.com/primer/react/commit/247c66a3c297afba73c6e9e3842cc15ff8a845c1) Thanks [@francinelucca](https://github.com/francinelucca)! - Feat: popover implement click outside
 
+- [#7070](https://github.com/primer/react/pull/7070) [`f7dfa7d`](https://github.com/primer/react/commit/f7dfa7d5954961834d0ec360d6b218237e75bf96) Thanks [@hectahertz](https://github.com/hectahertz)! - Add SSR warnings to useMediaUnsafeSSR and useResponsiveValue.
+
 ### Patch Changes
 
 - [#7060](https://github.com/primer/react/pull/7060) [`3468793`](https://github.com/primer/react/commit/3468793e15269d6d9f226ee7844921e44bfc4622) Thanks [@francinelucca](https://github.com/francinelucca)! - @primer/react: chore(Dialog): allow direct children

package/dist/hooks/{useMedia.d.ts → useMediaUnsafeSSR.d.ts}

@@ -1,18 +1,21 @@
 import React from 'react';
 /**
- * `useMedia` will use the given `mediaQueryString` with `matchMedia` to
+ * `useMediaUnsafeSSR` will use the given `mediaQueryString` with `matchMedia` to
  * determine if the document matches the media query string.
  *
- * If `MatchMedia` is used as an ancestor, `useMedia` will instead use the
+ * If `MatchMedia` is used as an ancestor, `useMediaUnsafeSSR` will instead use the
  * value of the media query string, if available
  *
+ * Warning: If rendering on the server, and no `defaultState` is provided,
+ * this could cause a hydration mismatch between server and client.
+ *
  * @example
  * function Example() {
- *   const coarsePointer = useMedia('(pointer: coarse)');
+ *   const coarsePointer = useMediaUnsafeSSR('(pointer: coarse)');
  *   // ...
  * }
  */
-export declare function useMedia(mediaQueryString: string, defaultState?: boolean): boolean;
+export declare function useMediaUnsafeSSR(mediaQueryString: string, defaultState?: boolean): boolean;
 type MediaQueryFeatures = {
     [key: string]: boolean | undefined;
 };
@@ -22,7 +25,7 @@ type MatchMediaProps = {
 };
 /**
  * Use `MatchMedia` to emulate media conditions by passing in feature
- * queries to the `features` prop. If a component uses `useMedia` with the
+ * queries to the `features` prop. If a component uses `useMediaUnsafeSSR` with the
  * feature passed in to `MatchMedia` it will force its value to match what is
  * provided to `MatchMedia`
  *
@@ -36,4 +39,4 @@ type MatchMediaProps = {
  */
 export declare function MatchMedia({ children, features }: MatchMediaProps): React.JSX.Element;
 export {};
-//# sourceMappingURL=useMedia.d.ts.map
+//# sourceMappingURL=useMediaUnsafeSSR.d.ts.map

package/dist/hooks/useMediaUnsafeSSR.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaUnsafeSSR.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaUnsafeSSR.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAI3E;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,gBAAgB,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,WAoEjF;AAED,KAAK,kBAAkB,GAAG;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;CACnC,CAAA;AAOD,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,kBAAkB,CAAA;CAC9B,CAAA;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,EAAC,QAAQ,EAAE,QAA0B,EAAC,EAAE,eAAe,qBAGjF"}

package/dist/hooks/{useMedia.js → useMediaUnsafeSSR.js}

@@ -2,7 +2,7 @@ import { c } from 'react-compiler-runtime';
 import React, { useContext, createContext, useEffect } from 'react';
 import 'react/jsx-runtime';
 
-function useMedia(mediaQueryString, defaultState) {
+function useMediaUnsafeSSR(mediaQueryString, defaultState) {
   const $ = c(12);
   const features = useContext(MatchMediaContext);
   let t0;
@@ -83,4 +83,4 @@ function useMedia(mediaQueryString, defaultState) {
 // unavailable through devtools
 const MatchMediaContext = /*#__PURE__*/createContext({});
 
-export { useMedia };
+export { useMediaUnsafeSSR };

package/dist/hooks/useResponsiveValue.d.ts

@@ -23,6 +23,8 @@ export declare function isResponsiveValue(value: any): value is ResponsiveValue<
  * Resolves responsive values based on the current viewport width.
  * For example, if the current viewport width is narrow (less than 768px), the value of `{regular: 'foo', narrow: 'bar'}` will resolve to `'bar'`.
  *
+ * Warning: This hook is not fully SSR compatible as it relies on `useMediaUnsafeSSR` without a `defaultState`. Using `getResponsiveAttributes` is preferred to avoid hydration mismatches.
+ *
  * @example
  * const value = useResponsiveValue({regular: 'foo', narrow: 'bar'})
  * console.log(value) // 'bar'

package/dist/hooks/useResponsiveValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResponsiveValue.d.ts","sourceRoot":"","sources":["../../src/hooks/useResponsiveValue.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,cAAc;;;;CAI1B,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,QAAQ,EAAE,OAAO,GAAG,QAAQ,EAAE,KAAK,GAAG,QAAQ,IAAI;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,CAAC,CAAC,IAChC,CAAC,CAAC,SAAS,eAAe,CAAC,MAAM,QAAQ,EAAE,MAAM,OAAO,EAAE,MAAM,KAAK,CAAC,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC,GAE5G,OAAO,CAAC,CAAC,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;AAEpC;;;GAGG;AAEH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,GAAG,GAAG,KAAK,IAAI,eAAe,CAAC,GAAG,CAAC,CAE3E;AAED;;;;;;;GAOG;AAEH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,GAAG,CAAC,CA0B7F"}
+{"version":3,"file":"useResponsiveValue.d.ts","sourceRoot":"","sources":["../../src/hooks/useResponsiveValue.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,cAAc;;;;CAI1B,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,QAAQ,EAAE,OAAO,GAAG,QAAQ,EAAE,KAAK,GAAG,QAAQ,IAAI;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,CAAC,CAAC,IAChC,CAAC,CAAC,SAAS,eAAe,CAAC,MAAM,QAAQ,EAAE,MAAM,OAAO,EAAE,MAAM,KAAK,CAAC,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC,GAE5G,OAAO,CAAC,CAAC,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;AAEpC;;;GAGG;AAEH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,GAAG,GAAG,KAAK,IAAI,eAAe,CAAC,GAAG,CAAC,CAE3E;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,GAAG,CAAC,CAgC7F"}

package/dist/hooks/useResponsiveValue.js

@@ -1,4 +1,6 @@
-import { useMedia } from './useMedia.js';
+import { useMediaUnsafeSSR } from './useMediaUnsafeSSR.js';
+import { canUseDOM } from '../utils/environment.js';
+import { warning } from '../utils/warning.js';
 
 // This file contains utilities for working with responsive values.
 
@@ -33,15 +35,17 @@ function isResponsiveValue(value) {
  * Resolves responsive values based on the current viewport width.
  * For example, if the current viewport width is narrow (less than 768px), the value of `{regular: 'foo', narrow: 'bar'}` will resolve to `'bar'`.
  *
+ * Warning: This hook is not fully SSR compatible as it relies on `useMediaUnsafeSSR` without a `defaultState`. Using `getResponsiveAttributes` is preferred to avoid hydration mismatches.
+ *
  * @example
  * const value = useResponsiveValue({regular: 'foo', narrow: 'bar'})
  * console.log(value) // 'bar'
  */
-// TODO: Improve SSR support
 function useResponsiveValue(value, fallback) {
-  const isNarrowViewport = useMedia(viewportRanges.narrow, false);
-  const isRegularViewport = useMedia(viewportRanges.regular, false);
-  const isWideViewport = useMedia(viewportRanges.wide, false);
+  const isNarrowViewport = useMediaUnsafeSSR(viewportRanges.narrow, false);
+  const isRegularViewport = useMediaUnsafeSSR(viewportRanges.regular, false);
+  const isWideViewport = useMediaUnsafeSSR(viewportRanges.wide, false);
+  process.env.NODE_ENV !== "production" ? warning(!canUseDOM, "`useResponsiveValue` is not fully SSR compatible as it relies on `useMediaUnsafeSSR` without a `defaultState`. Using `getResponsiveAttributes` is preferred to avoid hydration mismatches.") : void 0;
   if (isResponsiveValue(value)) {
     const responsiveValue = value;
     if (isNarrowViewport && "narrow" in responsiveValue) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.1.0-rc.430f77ae3",
+  "version": "38.1.0-rc.6118e2738",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -51,7 +51,10 @@
     "type-check": "tsc --noEmit",
     "type-css-modules": "tcm -p src/**/*.module.css"
   },
-  "repository": "primer/react",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/primer/react.git"
+  },
   "keywords": [
     "react",
     "components",
@@ -129,7 +132,6 @@
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
     "@types/react-is": "18.3.1",
-    "@types/react-test-renderer": "18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
     "afterframe": "^1.0.2",
     "ajv": "8.16.0",
@@ -166,7 +168,6 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-is": "18.3.1",
-    "react-test-renderer": "18.3.1",
     "recast": "0.23.7",
     "rimraf": "5.0.5",
     "rollup": "4.52.5",

package/dist/hooks/useMedia.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../src/hooks/useMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAI3E;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,gBAAgB,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,WAoExE;AAED,KAAK,kBAAkB,GAAG;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;CACnC,CAAA;AAOD,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,kBAAkB,CAAA;CAC9B,CAAA;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,EAAC,QAAQ,EAAE,QAA0B,EAAC,EAAE,eAAe,qBAGjF"}