chore: use rc-util handle shadow (#387)

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.29.2"
+    "rc-util": "^5.31.1"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

src/hooks/useWinClick.ts

@@ -1,4 +1,5 @@
 import { warning } from 'rc-util';
+import { getShadowRoot } from 'rc-util/lib/Dom/shadow';
 import raf from 'rc-util/lib/raf';
 import * as React from 'react';
 import { getWin } from '../util';
@@ -62,13 +63,10 @@ export default function useWinClick(
       win.addEventListener('click', onWindowClick);
 
       // shadow root
-      const inShadow = targetRoot && targetRoot !== targetEle.ownerDocument;
-      if (inShadow) {
-        (targetRoot as ShadowRoot).addEventListener(
-          'mousedown',
-          onWindowMouseDown,
-        );
-        (targetRoot as ShadowRoot).addEventListener('click', onWindowClick);
+      const targetShadowRoot = getShadowRoot(targetEle);
+      if (targetShadowRoot) {
+        targetShadowRoot.addEventListener('mousedown', onWindowMouseDown);
+        targetShadowRoot.addEventListener('click', onWindowClick);
       }
 
       // Warning if target and popup not in same root
@@ -85,15 +83,9 @@ export default function useWinClick(
         win.removeEventListener('mousedown', onWindowMouseDown);
         win.removeEventListener('click', onWindowClick);
 
-        if (inShadow) {
-          (targetRoot as ShadowRoot).removeEventListener(
-            'mousedown',
-            onWindowMouseDown,
-          );
-          (targetRoot as ShadowRoot).removeEventListener(
-            'click',
-            onWindowClick,
-          );
+        if (targetShadowRoot) {
+          targetShadowRoot.removeEventListener('mousedown', onWindowMouseDown);
+          targetShadowRoot.removeEventListener('click', onWindowClick);
         }
       };
     }

src/index.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import type { CSSMotionProps } from 'rc-motion';
 import ResizeObserver from 'rc-resize-observer';
 import { isDOM } from 'rc-util/lib/Dom/findDOMNode';
+import { getShadowRoot } from 'rc-util/lib/Dom/shadow';
 import useEvent from 'rc-util/lib/hooks/useEvent';
 import useId from 'rc-util/lib/hooks/useId';
 import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
@@ -257,10 +258,10 @@ export function generateTrigger(
 
       return (
         childDOM?.contains(ele) ||
-        (childDOM?.getRootNode() as ShadowRoot)?.host === ele ||
+        getShadowRoot(childDOM)?.host === ele ||
         ele === childDOM ||
         popupEle?.contains(ele) ||
-        (popupEle?.getRootNode() as ShadowRoot)?.host === ele ||
+        getShadowRoot(popupEle)?.host === ele ||
         ele === popupEle ||
         Object.values(subPopupElements.current).some(
           (subPopupEle) => subPopupEle?.contains(ele) || ele === subPopupEle,

tests/flipShift.test.tsx

@@ -1,5 +1,6 @@
 import { act, cleanup, render } from '@testing-library/react';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import React from 'react';
 import Trigger from '../src';
 
 /*
@@ -135,8 +136,6 @@ describe('Trigger.Flip+Shift', () => {
       await Promise.resolve();
     });
 
-    console.log(document.body.innerHTML);
-
     expect(
       document.querySelector('.rc-trigger-popup-placement-bottom'),
     ).toBeTruthy();