chore(deps-dev): bump @types/react from 18.3.20 to 19.1.2

docs/examples/case.tsx

@@ -58,7 +58,7 @@ function useControl<T>(valuePropName: string, defaultValue: T): [T, any] {
 
 const LabelItem: React.FC<{
   title: React.ReactNode;
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   [prop: string]: any;
 }> = ({ title, children, ...rest }) => {
   const { type } = children;

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();

package.json

@@ -40,6 +40,13 @@
     "coverage": "rc-test --coverage",
     "now-build": "npm run build"
   },
+  "dependencies": {
+    "@rc-component/motion": "^1.1.4",
+    "@rc-component/portal": "^2.0.0",
+    "@rc-component/resize-observer": "^1.0.0",
+    "@rc-component/util": "^1.2.1",
+    "classnames": "^2.3.2"
+  },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.0",
     "@rc-component/np": "^1.0.3",
@@ -48,7 +55,7 @@
     "@types/classnames": "^2.2.10",
     "@types/jest": "^29.5.2",
     "@types/node": "^22.0.2",
-    "@types/react": "^18.0.0",
+    "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@umijs/fabric": "^4.0.1",
     "cross-env": "^7.0.1",
@@ -58,20 +65,13 @@
     "less": "^4.2.0",
     "prettier": "^3.3.3",
     "rc-test": "^7.0.13",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "regenerator-runtime": "^0.14.0",
     "typescript": "^5.1.6"
   },
-  "dependencies": {
-    "@rc-component/motion": "^1.1.4",
-    "@rc-component/portal": "^2.0.0",
-    "@rc-component/resize-observer": "^1.0.0",
-    "@rc-component/util": "^1.2.1",
-    "classnames": "^2.3.2"
-  },
   "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   }
-}
+}

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/Popup/PopupContent.tsx

@@ -6,7 +6,7 @@ export interface PopupContentProps {
 }
 
 const PopupContent = React.memo(
-  ({ children }: PopupContentProps) => children as React.ReactElement,
+  ({ children }: PopupContentProps) => children as React.ReactElement<any>,
   (_, next) => next.cache,
 );
 

src/TriggerWrapper.tsx

@@ -9,7 +9,7 @@ import type { TriggerProps } from '.';
 
 export interface TriggerWrapperProps {
   getTriggerDOMNode?: TriggerProps['getTriggerDOMNode'];
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
 }
 
 const TriggerWrapper = React.forwardRef<HTMLElement, TriggerWrapperProps>(
@@ -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/hooks/useWinClick.ts

@@ -13,10 +13,10 @@ export default function useWinClick(
   inPopupOrChild: (target: EventTarget) => boolean,
   triggerOpen: (open: boolean) => void,
 ) {
-  const openRef = React.useRef(open);
+  const openRef = React.useRef<boolean>(open);
   openRef.current = open;
 
-  const popupPointerDownRef = React.useRef(false);
+  const popupPointerDownRef = React.useRef<boolean>(false);
 
   // Click to hide is special action since click popup element should not hide
   React.useEffect(() => {

src/index.tsx

@@ -46,7 +46,7 @@ export interface TriggerRef {
 // New version will not wrap popup with `rc-trigger-popup-content` when multiple children
 
 export interface TriggerProps {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   action?: ActionType | ActionType[];
   showAction?: ActionType[];
   hideAction?: ActionType[];
@@ -248,7 +248,7 @@ export function generateTrigger(
     });
 
     // ========================== Children ==========================
-    const child = React.Children.only(children) as React.ReactElement;
+    const child = React.Children.only(children);
     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);

src/mock.tsx

@@ -4,7 +4,7 @@ import { generateTrigger } from './index';
 interface MockPortalProps {
   open?: boolean;
   autoDestroy?: boolean;
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   getContainer?: () => HTMLElement;
 }
 

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;