Upgrade `@emotion/react` to 11.12.0 to only forward defined `ref`s to improve compability with React 19

[cheton]

References:

• React 19 styled() override ref of host emotion-js/emotion#3204

  +     // The ref is coming from a React.forwardRef. It might not exist. Since React 19 handles ref as prop, only define it if there is a value.
  +     if (ref) {
          newProps.ref = ref;
  +     }

• Only forward defined refs emotion-js/emotion#3208

• Version Packages emotion-js/emotion#3188

[cheton]

forwardRef will still function in React 19, but there are some important changes you need to be aware of.

Key points:

1. ref is now a regular prop in React 19

   • Previously, ref was special and you could not access it like a normal prop.
   • In React 19, ref is just a normal prop on components, and it will eventually be removed from the JSX element type.
   • This affects any code that was doing something like child.ref on a React element; that pattern no longer works.

2. forwardRef usage itself doesn’t change

   const MyInput = React.forwardRef((props, ref) => {
     return <input ref={ref} {...props} />;
   });

   • This will work the same in React 18 and React 19.

3. Accessing refs on children

   In React 18, you might have written:

   const tooltipTriggerProps = getTooltipTriggerProps(child?.props, child?.ref);
   const popoverTriggerProps = getPopoverTriggerProps(child?.props, child?.ref);

   In React 19, child.ref is undefined, because refs are no longer attached to the element itself in JSX. You need to pass the ref through props explicitly if you need it:

   const tooltipTriggerProps = getTooltipTriggerProps(child?.props, child?.props?.ref ?? child?.ref);
   const popoverTriggerProps = getPopoverTriggerProps(child?.props, child?.props?.ref ?? child?.ref);

4. Runtime forwardRef wrappers for compatibility

   If you want the same code to work for both React 18 and 19:

   import React from "react";
   
   const majorVersion = Number(React.version?.split?.(".")?.[0] ?? 0);
   const isReact19OrAbove = majorVersion >= 19;
   const FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
   
   export function maybeForwardRef(Component) {
     if (!isReact19OrAbove) {
       if (Component?.$$typeof === FORWARD_REF_TYPE) {
         return Component;
       }
       return React.forwardRef((props, ref) => <Component {...props} ref={ref} />);
     }
   
     const MaybeForwardRef = (props) => {
       const { ref, ...rest } = props;
       return <Component {...rest} ref={ref} />;
     };
   
     MaybeForwardRef.displayName =
       Component.displayName || Component.name || "MaybeForwardRef";
   
     // Optional: preserve static fields (e.g., defaultProps, propTypes)
     Object.assign(MaybeForwardRef, Component);
   
     return MaybeForwardRef;
   }