React 19 - element.ref deprecation - update Slot implementation

[Mista-T]

The internal Tooltip component throws a deprecation warning when used with asChild in a React 19 application for a while now:
"Accessing element.ref is no longer supported. ref is now a regular prop. It will be removed from the JSX Element type in a future release."

Are you planning to update the react package's internal SlotClone mechanism?
( SlotClone: @vidstack/react@1.12.13 )

Source: https://github.com/vidstack/player/blob/main/packages/react/src/components/primitives/slot.tsx
Line 71 "(children as any).ref" is the culprit: "ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,"

See: https://tr.react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-element-ref

Thanks a lot folks!

[Mista-T]

You may add a React 18 AND React 19 compatible getElementRef function like so:

function getElementRef(element: React.ReactElement) {
  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get;
  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;

  if (mayWarn) {
    return (element as any).ref;
  }

  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get;
  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;

  if (mayWarn) {
    return (element.props as any).ref;
  }

  return (element.props as any).ref || (element as any).ref;
}

And then SlotClone:

const SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {
  const { children, ...slotProps } = props;

  if (React.isValidElement(children)) {
    const childrenRef = getElementRef(children);
    const mergedProps = mergeProps(slotProps, children.props as any);

    if (children.type !== React.Fragment) {
      mergedProps.ref = forwardedRef
        ? composeRefs(forwardedRef, childrenRef)
        : childrenRef;
    }

    return React.cloneElement<any>(children, mergedProps);
  }

  return React.Children.count(children) > 1 ? React.Children.only(null) : null;
});