@skyscanner/backpack-web 43.0.0-dev-v28222480725.1 → 43.1.0

package/bpk-react-utils/src/TransitionInitialMount.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cloneElement, useCallback, useRef } from 'react';
+import { cloneElement, useCallback, useRef, version } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import assign from 'object-assign';
 import CSSTransition from 'react-transition-group/CSSTransition';
@@ -25,15 +25,18 @@ import CSSTransition from 'react-transition-group/CSSTransition';
 // It will use the native implementation if it's present and isn't buggy.
 import { jsx as _jsx } from "react/jsx-runtime";
 Object.assign = assign;
-const assignRef = (ref, node) => {
-  if (!ref) {
+// Assigns a node to the child's own ref, supporting both callback refs and
+// object refs (e.g. createRef). nodeRef is handled separately below since it is
+// always an object ref we own.
+const assignChildRef = (childRef, node) => {
+  if (!childRef) {
     return;
   }
-  if (typeof ref === 'function') {
-    ref(node);
+  if (typeof childRef === 'function') {
+    childRef(node);
   } else {
     // eslint-disable-next-line no-param-reassign
-    ref.current = node;
+    childRef.current = node;
   }
 };
 
@@ -47,11 +50,12 @@ const TransitionInitialMount = ({
 }) => {
   const nodeRef = useRef(null);
   // Read the child's own ref so injecting nodeRef does not clobber it.
-  // React 19 exposes ref as a normal prop (children.props.ref); React 18 keeps
-  // it on the element itself (children.ref). Check props.ref FIRST so that on
-  // React 19 we never touch element.ref (which logs a deprecation warning).
-  const childProps = children.props;
-  const childRef = childProps.ref ?? children.ref;
+  // React 19 exposes ref as a normal prop (children.props.ref) and logs a
+  // deprecation warning if you read element.ref; React 18 keeps it on the
+  // element itself. Pick the source by major version so we never touch
+  // element.ref on React 19, even when the child has no ref of its own.
+  const isReact19OrLater = parseInt(version, 10) >= 19;
+  const childRef = isReact19OrLater ? children.props.ref : children.ref;
 
   // Compose the nodeRef CSSTransition needs with any ref the child already has,
   // so injecting nodeRef does not clobber the child's own ref (e.g. the
@@ -59,8 +63,8 @@ const TransitionInitialMount = ({
   // Memoised so the callback ref keeps a stable identity across renders and is
   // only re-run when nodeRef or the child's ref actually changes.
   const mergedRef = useCallback(node => {
-    assignRef(nodeRef, node);
-    assignRef(childRef, node);
+    nodeRef.current = node;
+    assignChildRef(childRef, node);
   }, [childRef]);
   return /*#__PURE__*/_jsx(CSSTransition, {
     nodeRef: nodeRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "43.0.0-dev-v28222480725.1",
+  "version": "43.1.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",