fix: fix

Author: li-jia-nan

docs/examples/container.tsx

@@ -64,9 +64,9 @@ export default () => {
   const [scale, setScale] = React.useState('1');
   const [targetVisible, setTargetVisible] = React.useState(true);
 
-  const rootRef = React.useRef<HTMLDivElement>();
-  const popHolderRef = React.useRef<HTMLDivElement>();
-  const scrollRef = React.useRef<HTMLDivElement>();
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const popHolderRef = React.useRef<HTMLDivElement>(null);
+  const scrollRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
     scrollRef.current.scrollLeft = window.innerWidth;

docs/examples/inside.tsx

@@ -100,7 +100,7 @@ const popupPlacement = 'bottomLeft';
 export default () => {
   const [popupHeight, setPopupHeight] = React.useState(60);
 
-  const containerRef = React.useRef<HTMLDivElement>();
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
     containerRef.current.scrollLeft = document.defaultView.innerWidth;

docs/examples/large-popup.tsx

@@ -24,7 +24,7 @@ const builtinPlacements = {
 };
 
 export default () => {
-  const containerRef = React.useRef<HTMLDivElement>();
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
     console.clear();

docs/examples/nested.tsx

@@ -54,8 +54,8 @@ const OuterContent = ({ getContainer }) => {
 };
 
 const Test = () => {
-  const containerRef = React.useRef();
-  const outerDivRef = React.useRef();
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const outerDivRef = React.useRef<HTMLDivElement>(null);
 
   const innerTrigger = (
     <div style={popupBorderStyle}>

docs/examples/visible-fallback.tsx

@@ -28,7 +28,7 @@ const builtinPlacements: Record<string, AlignType> = {
 export default () => {
   const [enoughTop, setEnoughTop] = React.useState(true);
 
-  const triggerRef = React.useRef<TriggerRef>();
+  const triggerRef = React.useRef<TriggerRef>(null);
 
   React.useEffect(() => {
     triggerRef.current?.forceAlign();

src/Popup/Arrow.tsx

@@ -15,7 +15,7 @@ export default function Arrow(props: ArrowProps) {
   const { className, content } = arrow || {};
   const { x = 0, y = 0 } = arrowPos;
 
-  const arrowRef = React.useRef<HTMLDivElement>();
+  const arrowRef = React.useRef<HTMLDivElement>(null);
 
   // Skip if no align
   if (!align || !align.points) {

src/TriggerWrapper.tsx

@@ -20,18 +20,19 @@ const TriggerWrapper = React.forwardRef<HTMLElement, TriggerWrapperProps>(
 
     // When use `getTriggerDOMNode`, we should do additional work to get the real dom
     const setRef = React.useCallback(
-      (node) => {
+      (node: React.ReactInstance) => {
         fillRef(ref, getTriggerDOMNode ? getTriggerDOMNode(node) : node);
       },
       [getTriggerDOMNode],
     );
 
-    const mergedRef = useComposeRef(setRef, getNodeRef(children));
+    const mergedRef = useComposeRef<React.ReactInstance>(
+      setRef,
+      getNodeRef(children),
+    );
 
     return canUseRef
-      ? React.cloneElement(children, {
-          ref: mergedRef,
-        })
+      ? React.cloneElement<any>(children, { ref: mergedRef })
       : children;
   },
 );

src/hooks/useAlign.ts

@@ -131,7 +131,7 @@ export default function useAlign(
     scaleY: 1,
     align: builtinPlacements[placement] || {},
   });
-  const alignCountRef = React.useRef(0);
+  const alignCountRef = React.useRef<number>(0);
 
   const scrollerList = React.useMemo(() => {
     if (!popupEle) {

src/index.tsx

@@ -248,7 +248,7 @@ export function generateTrigger(
     });
 
     // ========================== Children ==========================
-    const child = React.Children.only(children) as React.ReactElement;
+    const child = React.Children.only(children) as React.ReactElement<any>;
     const originChildProps = child?.props || {};
     const cloneProps: typeof originChildProps = {};
 
@@ -311,7 +311,7 @@ export function generateTrigger(
     });
 
     // Trigger for delay
-    const delayRef = React.useRef<any>();
+    const delayRef = React.useRef<ReturnType<typeof setTimeout>>(null);
 
     const clearDelay = () => {
       clearTimeout(delayRef.current);

tests/basic.test.jsx

@@ -1,5 +1,4 @@
 /* eslint-disable max-classes-per-file */
-
 import { act, cleanup, fireEvent, render } from '@testing-library/react';
 import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import React, { StrictMode, createRef } from 'react';
@@ -697,7 +696,7 @@ describe('Trigger.Basic', () => {
       let effectCalled = false;
 
       function Demo() {
-        const popupRef = React.useRef();
+        const popupRef = React.useRef(null);
 
         React.useLayoutEffect(() => {
           effectCalled = true;