fix(ui-motion): use elementRef instead of ref in BaseTransition renderChildren

Replace the deprecated ref callback with elementRef and remove the
now-redundant findDOMNode wrapper, since elementRef receives the DOM
element directly from InstUI children.

renderChildren now distinguishes between HTML elements and components:
HTML elements receive a ref callback (which gives the DOM element
directly), while components receive elementRef (the InstUI convention).
This removes findDOMNode without breaking non-InstUI children like
plain <div> or <span>. The test's ExampleComponent was updated from a
class component to a functional component that supports elementRef.

Author: Gazuru

packages/ui-motion/src/Transition/BaseTransition/index.ts

@@ -24,7 +24,7 @@
 
 import { Component, ReactElement } from 'react'
 
-import { getClassList, findDOMNode } from '@instructure/ui-dom-utils'
+import { getClassList } from '@instructure/ui-dom-utils'
 import {
   ensureSingleChild,
   safeCloneElement
@@ -333,19 +333,23 @@ class BaseTransition extends Component<
   }
 
   renderChildren() {
-    return this.props.children
-      ? safeCloneElement(
-          ensureSingleChild(this.props.children) as ReactElement,
-          {
-            'aria-hidden': !this.props.in ? true : undefined,
-            ref: (el: React.ReactInstance | null) => {
-              const ref = (findDOMNode(el) as Element) || null
-
-              this.handleRef(ref)
+    if (!this.props.children) return null
+
+    const child = ensureSingleChild(this.props.children) as ReactElement
+    const isInstUIComponent = !!(child.type as any)?.componentId
+
+    return safeCloneElement(child, {
+      'aria-hidden': !this.props.in ? true : undefined,
+      ...(isInstUIComponent
+        ? { elementRef: this.handleRef }
+        : {
+            ref: (el: unknown) => {
+              if (el instanceof Element) {
+                this.handleRef(el)
+              }
             }
-          }
-        )
-      : null
+          })
+    })
   }
 
   render() {

packages/ui-motion/src/Transition/__tests__/Transition.test.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { Component, createRef, RefObject } from 'react'
+import { forwardRef } from 'react'
 import {
   render,
   waitFor,
@@ -47,17 +47,13 @@ const getClass = (
   return classNames[phase]
 }
 
-class ExampleComponent extends Component<any, any> {
-  private ref: RefObject<any>
-
-  constructor(props: any) {
-    super(props)
-    this.ref = createRef()
-  }
-  render() {
-    return <div ref={this.ref}>{COMPONENT_TEXT}</div>
-  }
-}
+const ExampleComponent = forwardRef<HTMLDivElement>((props, ref) => {
+  return (
+    <div ref={ref} {...props}>
+      {COMPONENT_TEXT}
+    </div>
+  )
+})
 
 describe('<Transition />', () => {
   let consoleWarningMock: ReturnType<typeof vi.spyOn>