@primer/react 38.34.0-rc.6e2d5aac5 → 38.34.0-rc.8fa435aeb

package/dist/hooks/useMergedRefs.js

@@ -1,9 +1,7 @@
 import { isExperimentalReactVersion, reactMajorVersion } from "../utils/environment.js";
 import { c } from "react-compiler-runtime";
-import { version } from "react";
+import "react";
 //#region src/hooks/useMergedRefs.ts
-var _version$split$;
-const majorReactVersion = parseInt((_version$split$ = version.split(".")[0]) !== null && _version$split$ !== void 0 ? _version$split$ : "18", 10);
 /**
 * Cleanup functions for refs were introduced in React 19. For feature detection,
 * we look to see if current version of React is >= 19 or if it is an
@@ -28,18 +26,18 @@ const supportsRefCleanup = reactMajorVersion >= 19 || isExperimentalReactVersion
 * // React 18
 * const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
 *  const ref = useRef<HTMLButtonElement>(null)
-*  const mergedRef = useMergedRefs(forwardedRef, ref)
+*  const combinedRef = useMergedRefs(forwardedRef, ref)
 *
-*  return <button ref={mergedRef} />
+*  return <button ref={combinedRef} />
 * })
 *
 * @example
 * // React 19
 * const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
 *  const ref = useRef<HTMLButtonElement>(null)
-*  const mergedRef = useMergedRefs(externalRef, ref)
+*  const combinedRef = useMergedRefs(externalRef, ref)
 *
-*  return <button ref={mergedRef} />
+*  return <button ref={combinedRef} />
 * }
 */
 function useMergedRefs(refA, refB) {
@@ -50,7 +48,6 @@ function useMergedRefs(refA, refB) {
 			const cleanupA = setRef(refA, value);
 			const cleanupB = setRef(refB, value);
 			if (!supportsRefCleanup) return;
-			if (majorReactVersion <= 18) return;
 			return () => {
 				if (cleanupA) cleanupA();
 				else setRef(refA, null);

package/dist/hooks/useProvidedRefOrCreate.d.ts

@@ -9,14 +9,17 @@ import React from "react";
  * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
  * @type TRef The type of the RefObject which should be created.
  *
- * @note This hook is overly restrictive in that it forces the provided ref to be a ref object rather than a callback.
- * In particular, it should **not** be used to merge internal refs with forwarded refs. For this, use
- * {@linkcode useMergedRefs} instead.
+ * @deprecated This hook is incompatible with forwarded callback refs. Prefer `useMergedRefs` with an internally
+ * created ref instead.
  *
- * The primary valid use case for this hook is for when the consumer is using the provided ref to point to an external
- * element, like an externally rendered anchor. This is 'backwards' from forwarded refs with respect to data flow; the
- * consumer is passing a reference to an external element, rather than passing a handle to obtain a reference to an
- * internal element.
+ * ```diff
+ * - const ref = useProvidedRefOrCreate(forwardedRef as RefObject<...>)
+ * + const ref = useRef(null)
+ * + const mergedRef = useMergedRefs(forwardedRef, ref)
+ *
+ * - return <div ref={ref} />
+ * + return <div ref={mergedRef} />
+ * ```
  */
 declare function useProvidedRefOrCreate<TRef>(providedRef?: React.RefObject<TRef | null>): React.RefObject<TRef | null>;
 //#endregion

package/dist/hooks/useProvidedRefOrCreate.js

@@ -8,14 +8,17 @@ import React from "react";
 * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
 * @type TRef The type of the RefObject which should be created.
 *
-* @note This hook is overly restrictive in that it forces the provided ref to be a ref object rather than a callback.
-* In particular, it should **not** be used to merge internal refs with forwarded refs. For this, use
-* {@linkcode useMergedRefs} instead.
+* @deprecated This hook is incompatible with forwarded callback refs. Prefer `useMergedRefs` with an internally
+* created ref instead.
 *
-* The primary valid use case for this hook is for when the consumer is using the provided ref to point to an external
-* element, like an externally rendered anchor. This is 'backwards' from forwarded refs with respect to data flow; the
-* consumer is passing a reference to an external element, rather than passing a handle to obtain a reference to an
-* internal element.
+* ```diff
+* - const ref = useProvidedRefOrCreate(forwardedRef as RefObject<...>)
+* + const ref = useRef(null)
+* + const mergedRef = useMergedRefs(forwardedRef, ref)
+*
+* - return <div ref={ref} />
+* + return <div ref={mergedRef} />
+* ```
 */
 function useProvidedRefOrCreate(providedRef) {
 	const createdRef = React.useRef(null);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.34.0-rc.6e2d5aac5",
+  "version": "38.34.0-rc.8fa435aeb",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -77,6 +77,7 @@
   "dependencies": {
     "@github/mini-throttle": "^2.1.1",
     "@github/relative-time-element": "^5.0.0",
+    "@github/tab-container-element": "^4.8.2",
     "@lit-labs/react": "1.2.1",
     "@oddbird/popover-polyfill": "^0.5.2",
     "@primer/behaviors": "^1.10.3",