@rc-component/trigger 3.8.2 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/es/index.js +18 -11
  2. package/lib/index.js +17 -10
  3. package/package.json +5 -5
package/es/index.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import Portal from '@rc-component/portal';
2
2
  import { clsx } from 'clsx';
3
- import ResizeObserver from '@rc-component/resize-observer';
4
- import { isDOM } from "@rc-component/util/es/Dom/findDOMNode";
3
+ import { useResizeObserver } from '@rc-component/resize-observer';
4
+ import { getDOM, isDOM } from "@rc-component/util/es/Dom/findDOMNode";
5
5
  import { getShadowRoot } from "@rc-component/util/es/Dom/shadow";
6
+ import { getNodeRef, useComposeRef } from "@rc-component/util/es/ref";
6
7
  import useEvent from "@rc-component/util/es/hooks/useEvent";
7
8
  import useId from "@rc-component/util/es/hooks/useId";
8
9
  import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
@@ -122,9 +123,10 @@ export function generateTrigger(PortalComponent = Portal) {
122
123
  // Used for forwardRef target. Not use internal
123
124
  const externalForwardRef = React.useRef(null);
124
125
  const setTargetRef = useEvent(node => {
125
- if (isDOM(node) && targetEle !== node) {
126
- setTargetEle(node);
127
- externalForwardRef.current = node;
126
+ const domNode = getDOM(node);
127
+ if (isDOM(domNode) && targetEle !== domNode) {
128
+ setTargetEle(domNode);
129
+ externalForwardRef.current = domNode;
128
130
  }
129
131
  });
130
132
  const cloneProps = {};
@@ -473,18 +475,23 @@ export function generateTrigger(PortalComponent = Portal) {
473
475
  y: arrowY
474
476
  };
475
477
 
478
+ // =================== Resize Observer ===================
479
+ // Use hook to observe target element resize
480
+ // Pass targetEle directly instead of a function so the hook will re-observe when target changes
481
+ useResizeObserver(mergedOpen, targetEle, onTargetResize);
482
+
483
+ // Compose refs
484
+ const mergedRef = useComposeRef(setTargetRef, getNodeRef(child));
485
+
476
486
  // Child Node
477
487
  const triggerNode = /*#__PURE__*/React.cloneElement(child, {
478
488
  ...mergedChildrenProps,
479
- ...passedProps
489
+ ...passedProps,
490
+ ref: mergedRef
480
491
  });
481
492
 
482
493
  // Render
483
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
484
- disabled: !mergedOpen,
485
- ref: setTargetRef,
486
- onResize: onTargetResize
487
- }, triggerNode), rendedRef.current && (!uniqueContext || !unique) && /*#__PURE__*/React.createElement(TriggerContext.Provider, {
494
+ return /*#__PURE__*/React.createElement(React.Fragment, null, triggerNode, rendedRef.current && (!uniqueContext || !unique) && /*#__PURE__*/React.createElement(TriggerContext.Provider, {
488
495
  value: context
489
496
  }, /*#__PURE__*/React.createElement(Popup, {
490
497
  portal: PortalComponent,
package/lib/index.js CHANGED
@@ -13,9 +13,10 @@ exports.default = void 0;
13
13
  exports.generateTrigger = generateTrigger;
14
14
  var _portal = _interopRequireDefault(require("@rc-component/portal"));
15
15
  var _clsx = require("clsx");
16
- var _resizeObserver = _interopRequireDefault(require("@rc-component/resize-observer"));
16
+ var _resizeObserver = require("@rc-component/resize-observer");
17
17
  var _findDOMNode = require("@rc-component/util/lib/Dom/findDOMNode");
18
18
  var _shadow = require("@rc-component/util/lib/Dom/shadow");
19
+ var _ref = require("@rc-component/util/lib/ref");
19
20
  var _useEvent = _interopRequireDefault(require("@rc-component/util/lib/hooks/useEvent"));
20
21
  var _useId = _interopRequireDefault(require("@rc-component/util/lib/hooks/useId"));
21
22
  var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
@@ -136,9 +137,10 @@ function generateTrigger(PortalComponent = _portal.default) {
136
137
  // Used for forwardRef target. Not use internal
137
138
  const externalForwardRef = React.useRef(null);
138
139
  const setTargetRef = (0, _useEvent.default)(node => {
139
- if ((0, _findDOMNode.isDOM)(node) && targetEle !== node) {
140
- setTargetEle(node);
141
- externalForwardRef.current = node;
140
+ const domNode = (0, _findDOMNode.getDOM)(node);
141
+ if ((0, _findDOMNode.isDOM)(domNode) && targetEle !== domNode) {
142
+ setTargetEle(domNode);
143
+ externalForwardRef.current = domNode;
142
144
  }
143
145
  });
144
146
  const cloneProps = {};
@@ -487,18 +489,23 @@ function generateTrigger(PortalComponent = _portal.default) {
487
489
  y: arrowY
488
490
  };
489
491
 
492
+ // =================== Resize Observer ===================
493
+ // Use hook to observe target element resize
494
+ // Pass targetEle directly instead of a function so the hook will re-observe when target changes
495
+ (0, _resizeObserver.useResizeObserver)(mergedOpen, targetEle, onTargetResize);
496
+
497
+ // Compose refs
498
+ const mergedRef = (0, _ref.useComposeRef)(setTargetRef, (0, _ref.getNodeRef)(child));
499
+
490
500
  // Child Node
491
501
  const triggerNode = /*#__PURE__*/React.cloneElement(child, {
492
502
  ...mergedChildrenProps,
493
- ...passedProps
503
+ ...passedProps,
504
+ ref: mergedRef
494
505
  });
495
506
 
496
507
  // Render
497
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_resizeObserver.default, {
498
- disabled: !mergedOpen,
499
- ref: setTargetRef,
500
- onResize: onTargetResize
501
- }, triggerNode), rendedRef.current && (!uniqueContext || !unique) && /*#__PURE__*/React.createElement(_context.default.Provider, {
508
+ return /*#__PURE__*/React.createElement(React.Fragment, null, triggerNode, rendedRef.current && (!uniqueContext || !unique) && /*#__PURE__*/React.createElement(_context.default.Provider, {
502
509
  value: context
503
510
  }, /*#__PURE__*/React.createElement(_Popup.default, {
504
511
  portal: PortalComponent,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/trigger",
3
- "version": "3.8.2",
3
+ "version": "3.9.0",
4
4
  "description": "base abstract trigger component for react",
5
5
  "engines": {
6
6
  "node": ">=8.x"
@@ -43,7 +43,7 @@
43
43
  "dependencies": {
44
44
  "@rc-component/motion": "^1.1.4",
45
45
  "@rc-component/portal": "^2.2.0",
46
- "@rc-component/resize-observer": "^1.0.0",
46
+ "@rc-component/resize-observer": "^1.1.1",
47
47
  "@rc-component/util": "^1.2.1",
48
48
  "clsx": "^2.1.1"
49
49
  },
@@ -53,11 +53,11 @@
53
53
  "@testing-library/jest-dom": "^6.1.4",
54
54
  "@testing-library/react": "^16.0.0",
55
55
  "@types/jest": "^29.5.2",
56
- "@types/node": "^24.0.3",
56
+ "@types/node": "^25.0.3",
57
57
  "@types/react": "^19.1.2",
58
58
  "@types/react-dom": "^19.1.2",
59
59
  "@umijs/fabric": "^4.0.1",
60
- "cross-env": "^7.0.1",
60
+ "cross-env": "^10.1.0",
61
61
  "dumi": "^2.1.0",
62
62
  "eslint": "^8.51.0",
63
63
  "father": "^4.0.0",
@@ -67,7 +67,7 @@
67
67
  "react": "^19.1.0",
68
68
  "react-dom": "^19.1.0",
69
69
  "regenerator-runtime": "^0.14.0",
70
- "typescript": "~5.1.6"
70
+ "typescript": "~5.9.3"
71
71
  },
72
72
  "peerDependencies": {
73
73
  "react": ">=18.0.0",