fix: support svg (#340)

* fix: support svg

* test: adjust test case

* test: fix test case

Author: zombieJ

package.json

@@ -66,7 +66,7 @@
     "rc-align": "^4.0.0",
     "rc-motion": "^2.0.0",
     "rc-resize-observer": "^1.3.1",
-    "rc-util": "^5.27.1"
+    "rc-util": "^5.29.2"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

src/hooks/useAlign.ts

@@ -1,3 +1,4 @@
+import { isDOM } from 'rc-util/lib/Dom/findDOMNode';
 import isVisible from 'rc-util/lib/Dom/isVisible';
 import useEvent from 'rc-util/lib/hooks/useEvent';
 import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
@@ -232,7 +233,7 @@ export default function useAlign(
       if (
         scaleX === 0 ||
         scaleY === 0 ||
-        (target instanceof HTMLElement && !isVisible(target))
+        (isDOM(target) && !isVisible(target))
       ) {
         return;
       }

src/index.tsx

@@ -5,6 +5,7 @@ import ResizeObserver from 'rc-resize-observer';
 import useEvent from 'rc-util/lib/hooks/useEvent';
 import useId from 'rc-util/lib/hooks/useId';
 import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import { isDOM } from 'rc-util/lib/Dom/findDOMNode';
 import * as React from 'react';
 import type { TriggerContextProps } from './context';
 import TriggerContext from './context';
@@ -214,7 +215,7 @@ export function generateTrigger(
     const [popupEle, setPopupEle] = React.useState<HTMLDivElement>(null);
 
     const setPopupRef = React.useCallback((node: HTMLDivElement) => {
-      if (node instanceof HTMLElement) {
+      if (isDOM(node)) {
         setPopupEle(node);
       }
 
@@ -226,7 +227,7 @@ export function generateTrigger(
     const [targetEle, setTargetEle] = React.useState<HTMLElement>(null);
 
     const setTargetRef = React.useCallback((node: HTMLElement) => {
-      if (node instanceof HTMLElement) {
+      if (isDOM(node)) {
         setTargetEle(node);
       }
     }, []);

tests/align.test.tsx

@@ -31,6 +31,11 @@ describe('Trigger.Align', () => {
         get: () => (targetVisible ? document.body : null),
       },
     });
+    spyElementPrototypes(SVGElement, {
+      offsetParent: {
+        get: () => (targetVisible ? document.body : null),
+      },
+    });
   });
 
   beforeEach(() => {
@@ -192,7 +197,7 @@ describe('Trigger.Align', () => {
           targetOffset: [903, 1128],
         }}
       >
-        <span />
+        <svg />
       </Trigger>,
     );