refactor: Trigger use hooks instead of (#604)

* chore: init

* chore: refactor

* chore: get dom

Author: zombieJ

package.json

@@ -43,7 +43,7 @@
   "dependencies": {
     "@rc-component/motion": "^1.1.4",
     "@rc-component/portal": "^2.2.0",
-    "@rc-component/resize-observer": "^1.0.0",
+    "@rc-component/resize-observer": "^1.1.1",
     "@rc-component/util": "^1.2.1",
     "clsx": "^2.1.1"
   },

src/index.tsx

@@ -1,9 +1,10 @@
 import Portal from '@rc-component/portal';
 import { clsx } from 'clsx';
 import type { CSSMotionProps } from '@rc-component/motion';
-import ResizeObserver from '@rc-component/resize-observer';
-import { isDOM } from '@rc-component/util/lib/Dom/findDOMNode';
+import { useResizeObserver } from '@rc-component/resize-observer';
+import { getDOM, isDOM } from '@rc-component/util/lib/Dom/findDOMNode';
 import { getShadowRoot } from '@rc-component/util/lib/Dom/shadow';
+import { getNodeRef, useComposeRef } from '@rc-component/util/lib/ref';
 import useEvent from '@rc-component/util/lib/hooks/useEvent';
 import useId from '@rc-component/util/lib/hooks/useId';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
@@ -261,9 +262,11 @@ export function generateTrigger(
     const externalForwardRef = React.useRef<HTMLElement>(null);
 
     const setTargetRef = useEvent((node: HTMLElement) => {
-      if (isDOM(node) && targetEle !== node) {
-        setTargetEle(node);
-        externalForwardRef.current = node;
+      const domNode = getDOM(node) as HTMLElement;
+
+      if (isDOM(domNode) && targetEle !== domNode) {
+        setTargetEle(domNode);
+        externalForwardRef.current = domNode;
       }
     });
 
@@ -782,22 +785,25 @@ export function generateTrigger(
       y: arrowY,
     };
 
+    // =================== Resize Observer ===================
+    // Use hook to observe target element resize
+    // Pass targetEle directly instead of a function so the hook will re-observe when target changes
+    useResizeObserver(mergedOpen, targetEle, onTargetResize);
+
+    // Compose refs
+    const mergedRef = useComposeRef(setTargetRef, getNodeRef(child));
+
     // Child Node
     const triggerNode = React.cloneElement(child, {
       ...mergedChildrenProps,
       ...passedProps,
+      ref: mergedRef,
     });
 
     // Render
     return (
       <>
-        <ResizeObserver
-          disabled={!mergedOpen}
-          ref={setTargetRef}
-          onResize={onTargetResize}
-        >
-          {triggerNode}
-        </ResizeObserver>
+        {triggerNode}
         {rendedRef.current && (!uniqueContext || !unique) && (
           <TriggerContext.Provider value={context}>
             <Popup

tests/ref.test.tsx

@@ -50,4 +50,36 @@ describe('Trigger.Ref', () => {
       document.querySelector('.rc-trigger-popup'),
     );
   });
+
+  it('should support ref.nativeElement', () => {
+    const ChildComponent = React.forwardRef<
+      { nativeElement: HTMLElement },
+      React.PropsWithChildren
+    >((props, ref) => {
+      const buttonRef = React.useRef<HTMLButtonElement>(null);
+
+      React.useImperativeHandle(ref, () => ({
+        nativeElement: buttonRef.current,
+      }));
+
+      return <button ref={buttonRef} {...props} />;
+    });
+
+    const triggerRef = React.createRef<TriggerRef>();
+    const childRef = React.createRef<{ nativeElement: HTMLElement }>();
+
+    const { container } = render(
+      <Trigger ref={triggerRef} popup={<div />}>
+        <ChildComponent ref={childRef} />
+      </Trigger>,
+    );
+
+    const buttonElement = container.querySelector('button');
+
+    // Check child ref returns object with nativeElement
+    expect(childRef.current.nativeElement).toBe(buttonElement);
+
+    // Check Trigger can extract DOM from child ref
+    expect(triggerRef.current.nativeElement).toBe(buttonElement);
+  });
 });