chore: merge conflict

Author: zombieJ

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/simple.tsx

@@ -1,6 +1,6 @@
 /* eslint no-console:0 */
 
-import Trigger, { ActionType } from '@rc-component/trigger';
+import Trigger, { type ActionType } from '@rc-component/trigger';
 import React from 'react';
 import '../../assets/index.less';
 
@@ -43,29 +43,26 @@ function getPopupContainer(trigger) {
   return trigger.parentNode;
 }
 
-const InnerTarget = (props) => (
-  <div
-    style={{
-      margin: 20,
-      display: 'inline-block',
-      background: 'rgba(255, 0, 0, 0.05)',
-    }}
-    tabIndex={0}
-    role="button"
-    {...props}
-  >
-    <p>This is a example of trigger usage.</p>
-    <p>You can adjust the value above</p>
-    <p>which will also change the behaviour of popup.</p>
-  </div>
+const InnerTarget = React.forwardRef(
+  (props: any, ref: React.Ref<HTMLElement>) => (
+    <div
+      style={{
+        margin: 20,
+        display: 'inline-block',
+        background: 'rgba(255, 0, 0, 0.05)',
+      }}
+      tabIndex={0}
+      role="button"
+      {...props}
+      ref={ref}
+    >
+      <p>This is a example of trigger usage.</p>
+      <p>You can adjust the value above</p>
+      <p>which will also change the behavior of popup.</p>
+    </div>
+  ),
 );
 
-const RefTarget = React.forwardRef((props, ref) => {
-  React.useImperativeHandle(ref, () => ({}));
-
-  return <InnerTarget {...props} />;
-});
-
 interface TestState {
   mask: boolean;
   maskClosable: boolean;
@@ -88,7 +85,7 @@ interface TestState {
 
 class Test extends React.Component<any, TestState> {
   state: TestState = {
-    mask: true,
+    mask: false,
     maskClosable: true,
     placement: 'bottom',
     trigger: {
@@ -377,7 +374,7 @@ class Test extends React.Component<any, TestState> {
               motionName: state.transitionName,
             }}
           >
-            <RefTarget />
+            <InnerTarget />
           </Trigger>
         </div>
       </div>

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

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "3.2.0",
+  "version": "3.4.1",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"
@@ -40,16 +40,23 @@
     "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",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^16.0.0",
     "@types/classnames": "^2.2.10",
     "@types/jest": "^29.5.2",
-    "@types/node": "^22.0.2",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/node": "^24.0.3",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "@umijs/fabric": "^4.0.1",
     "cross-env": "^7.0.1",
     "dumi": "^2.1.0",
@@ -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,
 );