@rc-component/trigger 3.2.0 → 3.4.0

package/es/Popup/Arrow.js

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

package/es/index.d.ts

@@ -8,7 +8,7 @@ export interface TriggerRef {
     forceAlign: VoidFunction;
 }
 export interface TriggerProps {
-    children: React.ReactElement;
+    children: React.ReactElement<any>;
     action?: ActionType | ActionType[];
     showAction?: ActionType[];
     hideAction?: ActionType[];
@@ -53,11 +53,6 @@ export interface TriggerProps {
      */
     fresh?: boolean;
     arrow?: boolean | ArrowTypeOuter;
-    /**
-     * @private Get trigger DOM node.
-     * Used for some component is function component which can not access by `findDOMNode`
-     */
-    getTriggerDOMNode?: (node: React.ReactInstance) => HTMLElement;
 }
 export declare function generateTrigger(PortalComponent?: React.ComponentType<any>): React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<TriggerRef>>;
 declare const _default: React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<TriggerRef>>;

package/es/index.js

@@ -9,7 +9,6 @@ import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
 import isMobile from "@rc-component/util/es/isMobile";
 import * as React from 'react';
 import Popup from "./Popup";
-import TriggerWrapper from "./TriggerWrapper";
 import TriggerContext from "./context";
 import useAction from "./hooks/useAction";
 import useAlign from "./hooks/useAlign";
@@ -70,8 +69,6 @@ export function generateTrigger(PortalComponent = Portal) {
       // Motion
       popupMotion,
       maskMotion,
-      // Private
-      getTriggerDOMNode,
       ...restProps
     } = props;
     const mergedAutoDestroy = autoDestroy || false;
@@ -163,7 +160,7 @@ export function generateTrigger(PortalComponent = Portal) {
     });
 
     // Trigger for delay
-    const delayRef = React.useRef();
+    const delayRef = React.useRef(null);
     const clearDelay = () => {
       clearTimeout(delayRef.current);
     };
@@ -358,6 +355,10 @@ export function generateTrigger(PortalComponent = Portal) {
       };
     }
 
+    // ============================ Perf ============================
+    const rendedRef = React.useRef(false);
+    rendedRef.current ||= forceRender || mergedOpen || inMotion;
+
     // =========================== Render ===========================
     const mergedChildrenProps = {
       ...originChildProps,
@@ -375,12 +376,6 @@ export function generateTrigger(PortalComponent = Portal) {
         };
       }
     });
-
-    // Child Node
-    const triggerNode = /*#__PURE__*/React.cloneElement(child, {
-      ...mergedChildrenProps,
-      ...passedProps
-    });
     const arrowPos = {
       x: arrowX,
       y: arrowY
@@ -390,14 +385,18 @@ export function generateTrigger(PortalComponent = Portal) {
       ...(arrow !== true ? arrow : {})
     } : null;
 
+    // Child Node
+    const triggerNode = /*#__PURE__*/React.cloneElement(child, {
+      ...mergedChildrenProps,
+      ...passedProps
+    });
+
     // Render
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
       disabled: !mergedOpen,
       ref: setTargetRef,
       onResize: onTargetResize
-    }, /*#__PURE__*/React.createElement(TriggerWrapper, {
-      getTriggerDOMNode: getTriggerDOMNode
-    }, triggerNode)), /*#__PURE__*/React.createElement(TriggerContext.Provider, {
+    }, triggerNode), rendedRef.current && /*#__PURE__*/React.createElement(TriggerContext.Provider, {
       value: context
     }, /*#__PURE__*/React.createElement(Popup, {
       portal: PortalComponent,

package/lib/Popup/Arrow.js

@@ -24,7 +24,7 @@ function Arrow(props) {
     x = 0,
     y = 0
   } = arrowPos;
-  const arrowRef = React.useRef();
+  const arrowRef = React.useRef(null);
 
   // Skip if no align
   if (!align || !align.points) {

package/lib/index.d.ts

@@ -8,7 +8,7 @@ export interface TriggerRef {
     forceAlign: VoidFunction;
 }
 export interface TriggerProps {
-    children: React.ReactElement;
+    children: React.ReactElement<any>;
     action?: ActionType | ActionType[];
     showAction?: ActionType[];
     hideAction?: ActionType[];
@@ -53,11 +53,6 @@ export interface TriggerProps {
      */
     fresh?: boolean;
     arrow?: boolean | ArrowTypeOuter;
-    /**
-     * @private Get trigger DOM node.
-     * Used for some component is function component which can not access by `findDOMNode`
-     */
-    getTriggerDOMNode?: (node: React.ReactInstance) => HTMLElement;
 }
 export declare function generateTrigger(PortalComponent?: React.ComponentType<any>): React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<TriggerRef>>;
 declare const _default: React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<TriggerRef>>;

package/lib/index.js

@@ -16,7 +16,6 @@ var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/ho
 var _isMobile = _interopRequireDefault(require("@rc-component/util/lib/isMobile"));
 var React = _interopRequireWildcard(require("react"));
 var _Popup = _interopRequireDefault(require("./Popup"));
-var _TriggerWrapper = _interopRequireDefault(require("./TriggerWrapper"));
 var _context = _interopRequireDefault(require("./context"));
 var _useAction = _interopRequireDefault(require("./hooks/useAction"));
 var _useAlign = _interopRequireDefault(require("./hooks/useAlign"));
@@ -79,8 +78,6 @@ function generateTrigger(PortalComponent = _portal.default) {
       // Motion
       popupMotion,
       maskMotion,
-      // Private
-      getTriggerDOMNode,
       ...restProps
     } = props;
     const mergedAutoDestroy = autoDestroy || false;
@@ -172,7 +169,7 @@ function generateTrigger(PortalComponent = _portal.default) {
     });
 
     // Trigger for delay
-    const delayRef = React.useRef();
+    const delayRef = React.useRef(null);
     const clearDelay = () => {
       clearTimeout(delayRef.current);
     };
@@ -367,6 +364,10 @@ function generateTrigger(PortalComponent = _portal.default) {
       };
     }
 
+    // ============================ Perf ============================
+    const rendedRef = React.useRef(false);
+    rendedRef.current ||= forceRender || mergedOpen || inMotion;
+
     // =========================== Render ===========================
     const mergedChildrenProps = {
       ...originChildProps,
@@ -384,12 +385,6 @@ function generateTrigger(PortalComponent = _portal.default) {
         };
       }
     });
-
-    // Child Node
-    const triggerNode = /*#__PURE__*/React.cloneElement(child, {
-      ...mergedChildrenProps,
-      ...passedProps
-    });
     const arrowPos = {
       x: arrowX,
       y: arrowY
@@ -399,14 +394,18 @@ function generateTrigger(PortalComponent = _portal.default) {
       ...(arrow !== true ? arrow : {})
     } : null;
 
+    // Child Node
+    const triggerNode = /*#__PURE__*/React.cloneElement(child, {
+      ...mergedChildrenProps,
+      ...passedProps
+    });
+
     // Render
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_resizeObserver.default, {
       disabled: !mergedOpen,
       ref: setTargetRef,
       onResize: onTargetResize
-    }, /*#__PURE__*/React.createElement(_TriggerWrapper.default, {
-      getTriggerDOMNode: getTriggerDOMNode
-    }, triggerNode)), /*#__PURE__*/React.createElement(_context.default.Provider, {
+    }, triggerNode), rendedRef.current && /*#__PURE__*/React.createElement(_context.default.Provider, {
       value: context
     }, /*#__PURE__*/React.createElement(_Popup.default, {
       portal: PortalComponent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"
@@ -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,8 +55,8 @@
     "@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/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"
   }
-}
+}

package/es/TriggerWrapper.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import type { TriggerProps } from '.';
-export interface TriggerWrapperProps {
-    getTriggerDOMNode?: TriggerProps['getTriggerDOMNode'];
-    children: React.ReactElement;
-}
-declare const TriggerWrapper: React.ForwardRefExoticComponent<TriggerWrapperProps & React.RefAttributes<HTMLElement>>;
-export default TriggerWrapper;

package/es/TriggerWrapper.js

@@ -1,22 +0,0 @@
-import { fillRef, getNodeRef, supportRef, useComposeRef } from "@rc-component/util/es/ref";
-import * as React from 'react';
-const TriggerWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    children,
-    getTriggerDOMNode
-  } = props;
-  const canUseRef = supportRef(children);
-
-  // When use `getTriggerDOMNode`, we should do additional work to get the real dom
-  const setRef = React.useCallback(node => {
-    fillRef(ref, getTriggerDOMNode ? getTriggerDOMNode(node) : node);
-  }, [getTriggerDOMNode]);
-  const mergedRef = useComposeRef(setRef, getNodeRef(children));
-  return canUseRef ? /*#__PURE__*/React.cloneElement(children, {
-    ref: mergedRef
-  }) : children;
-});
-if (process.env.NODE_ENV !== 'production') {
-  TriggerWrapper.displayName = 'TriggerWrapper';
-}
-export default TriggerWrapper;

package/lib/TriggerWrapper.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import type { TriggerProps } from '.';
-export interface TriggerWrapperProps {
-    getTriggerDOMNode?: TriggerProps['getTriggerDOMNode'];
-    children: React.ReactElement;
-}
-declare const TriggerWrapper: React.ForwardRefExoticComponent<TriggerWrapperProps & React.RefAttributes<HTMLElement>>;
-export default TriggerWrapper;

package/lib/TriggerWrapper.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _ref = require("@rc-component/util/lib/ref");
-var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const TriggerWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    children,
-    getTriggerDOMNode
-  } = props;
-  const canUseRef = (0, _ref.supportRef)(children);
-
-  // When use `getTriggerDOMNode`, we should do additional work to get the real dom
-  const setRef = React.useCallback(node => {
-    (0, _ref.fillRef)(ref, getTriggerDOMNode ? getTriggerDOMNode(node) : node);
-  }, [getTriggerDOMNode]);
-  const mergedRef = (0, _ref.useComposeRef)(setRef, (0, _ref.getNodeRef)(children));
-  return canUseRef ? /*#__PURE__*/React.cloneElement(children, {
-    ref: mergedRef
-  }) : children;
-});
-if (process.env.NODE_ENV !== 'production') {
-  TriggerWrapper.displayName = 'TriggerWrapper';
-}
-var _default = exports.default = TriggerWrapper;