@rc-component/trigger 1.6.1 → 1.6.3

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 (4) hide show
  1. package/README.md +8 -3
  2. package/es/index.js +21 -3
  3. package/lib/index.js +21 -3
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -2,7 +2,12 @@
2
2
 
3
3
  React Trigger Component
4
4
 
5
- [![NPM version][npm-image]][npm-url] [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url]
5
+ [![NPM version][npm-image]][npm-url]
6
+ [![npm download][download-image]][download-url]
7
+ [![build status][github-actions-image]][github-actions-url]
8
+ [![Test coverage][codecov-image]][codecov-url]
9
+ [![bundle size][bundlephobia-image]][bundlephobia-url]
10
+ [![dumi][dumi-image]][dumi-url]
6
11
 
7
12
  [npm-image]: http://img.shields.io/npm/v/@rc-component/trigger.svg?style=flat-square
8
13
  [npm-url]: http://npmjs.org/package/@rc-component/trigger
@@ -10,8 +15,8 @@ React Trigger Component
10
15
  [github-actions-url]: https://github.com/react-component/trigger/actions
11
16
  [circleci-image]: https://img.shields.io/circleci/react-component/trigger/master?style=flat-square
12
17
  [circleci-url]: https://circleci.com/gh/react-component/trigger
13
- [coveralls-image]: https://img.shields.io/coveralls/react-component/trigger.svg?style=flat-square
14
- [coveralls-url]: https://coveralls.io/r/react-component/trigger?branch=master
18
+ [codecov-image]: https://img.shields.io/codecov/c/github/react-component/trigger/master.svg?style=flat-square
19
+ [codecov-url]: https://app.codecov.io/gh/react-component/trigger
15
20
  [david-url]: https://david-dm.org/react-component/trigger
16
21
  [david-image]: https://david-dm.org/react-component/trigger/status.svg?style=flat-square
17
22
  [david-dev-url]: https://david-dm.org/react-component/trigger?type=dev
package/es/index.js CHANGED
@@ -10,6 +10,7 @@ import useEvent from "rc-util/es/hooks/useEvent";
10
10
  import useId from "rc-util/es/hooks/useId";
11
11
  import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
12
12
  import isMobile from "rc-util/es/isMobile";
13
+ import warning from "rc-util/es/warning";
13
14
  import * as React from 'react';
14
15
  import TriggerContext from "./context";
15
16
  import useAction from "./hooks/useAction";
@@ -120,9 +121,10 @@ export function generateTrigger() {
120
121
  var originChildProps = (child === null || child === void 0 ? void 0 : child.props) || {};
121
122
  var cloneProps = {};
122
123
  var inPopupOrChild = useEvent(function (ele) {
124
+ var _childDOM$getRootNode, _popupEle$getRootNode;
123
125
  var childDOM = targetEle;
124
- return (childDOM === null || childDOM === void 0 ? void 0 : childDOM.contains(ele)) || ele === childDOM || (popupEle === null || popupEle === void 0 ? void 0 : popupEle.contains(ele)) || ele === popupEle || Object.values(subPopupElements.current).some(function (subPopupEle) {
125
- return subPopupEle.contains(ele) || ele === subPopupEle;
126
+ return (childDOM === null || childDOM === void 0 ? void 0 : childDOM.contains(ele)) || (childDOM === null || childDOM === void 0 ? void 0 : (_childDOM$getRootNode = childDOM.getRootNode()) === null || _childDOM$getRootNode === void 0 ? void 0 : _childDOM$getRootNode.host) === ele || ele === childDOM || (popupEle === null || popupEle === void 0 ? void 0 : popupEle.contains(ele)) || (popupEle === null || popupEle === void 0 ? void 0 : (_popupEle$getRootNode = popupEle.getRootNode()) === null || _popupEle$getRootNode === void 0 ? void 0 : _popupEle$getRootNode.host) === ele || ele === popupEle || Object.values(subPopupElements.current).some(function (subPopupEle) {
127
+ return (subPopupEle === null || subPopupEle === void 0 ? void 0 : subPopupEle.contains(ele)) || ele === subPopupEle;
126
128
  });
127
129
  });
128
130
 
@@ -332,12 +334,28 @@ export function generateTrigger() {
332
334
  }
333
335
  };
334
336
  var win = getWin(popupEle);
337
+ var targetRoot = targetEle === null || targetEle === void 0 ? void 0 : targetEle.getRootNode();
335
338
  win.addEventListener('click', onWindowClick);
339
+
340
+ // shadow root
341
+ var inShadow = targetRoot && targetRoot !== targetEle.ownerDocument;
342
+ if (inShadow) {
343
+ targetRoot.addEventListener('click', onWindowClick);
344
+ }
345
+
346
+ // Warning if target and popup not in same root
347
+ if (process.env.NODE_ENV !== 'production') {
348
+ var popupRoot = popupEle.getRootNode();
349
+ warning(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
350
+ }
336
351
  return function () {
337
352
  win.removeEventListener('click', onWindowClick);
353
+ if (inShadow) {
354
+ targetRoot.removeEventListener('click', onWindowClick);
355
+ }
338
356
  };
339
357
  }
340
- }, [clickToHide, popupEle, mask, maskClosable]);
358
+ }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
341
359
 
342
360
  // ======================= Action: Hover ========================
343
361
  var hoverToShow = showActions.has('hover');
package/lib/index.js CHANGED
@@ -18,6 +18,7 @@ var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
18
18
  var _useId = _interopRequireDefault(require("rc-util/lib/hooks/useId"));
19
19
  var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
20
20
  var _isMobile = _interopRequireDefault(require("rc-util/lib/isMobile"));
21
+ var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
21
22
  var React = _interopRequireWildcard(require("react"));
22
23
  var _context = _interopRequireDefault(require("./context"));
23
24
  var _useAction3 = _interopRequireDefault(require("./hooks/useAction"));
@@ -129,9 +130,10 @@ function generateTrigger() {
129
130
  var originChildProps = (child === null || child === void 0 ? void 0 : child.props) || {};
130
131
  var cloneProps = {};
131
132
  var inPopupOrChild = (0, _useEvent.default)(function (ele) {
133
+ var _childDOM$getRootNode, _popupEle$getRootNode;
132
134
  var childDOM = targetEle;
133
- return (childDOM === null || childDOM === void 0 ? void 0 : childDOM.contains(ele)) || ele === childDOM || (popupEle === null || popupEle === void 0 ? void 0 : popupEle.contains(ele)) || ele === popupEle || Object.values(subPopupElements.current).some(function (subPopupEle) {
134
- return subPopupEle.contains(ele) || ele === subPopupEle;
135
+ return (childDOM === null || childDOM === void 0 ? void 0 : childDOM.contains(ele)) || (childDOM === null || childDOM === void 0 ? void 0 : (_childDOM$getRootNode = childDOM.getRootNode()) === null || _childDOM$getRootNode === void 0 ? void 0 : _childDOM$getRootNode.host) === ele || ele === childDOM || (popupEle === null || popupEle === void 0 ? void 0 : popupEle.contains(ele)) || (popupEle === null || popupEle === void 0 ? void 0 : (_popupEle$getRootNode = popupEle.getRootNode()) === null || _popupEle$getRootNode === void 0 ? void 0 : _popupEle$getRootNode.host) === ele || ele === popupEle || Object.values(subPopupElements.current).some(function (subPopupEle) {
136
+ return (subPopupEle === null || subPopupEle === void 0 ? void 0 : subPopupEle.contains(ele)) || ele === subPopupEle;
135
137
  });
136
138
  });
137
139
 
@@ -341,12 +343,28 @@ function generateTrigger() {
341
343
  }
342
344
  };
343
345
  var win = (0, _util.getWin)(popupEle);
346
+ var targetRoot = targetEle === null || targetEle === void 0 ? void 0 : targetEle.getRootNode();
344
347
  win.addEventListener('click', onWindowClick);
348
+
349
+ // shadow root
350
+ var inShadow = targetRoot && targetRoot !== targetEle.ownerDocument;
351
+ if (inShadow) {
352
+ targetRoot.addEventListener('click', onWindowClick);
353
+ }
354
+
355
+ // Warning if target and popup not in same root
356
+ if (process.env.NODE_ENV !== 'production') {
357
+ var popupRoot = popupEle.getRootNode();
358
+ (0, _warning.default)(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
359
+ }
345
360
  return function () {
346
361
  win.removeEventListener('click', onWindowClick);
362
+ if (inShadow) {
363
+ targetRoot.removeEventListener('click', onWindowClick);
364
+ }
347
365
  };
348
366
  }
349
- }, [clickToHide, popupEle, mask, maskClosable]);
367
+ }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
350
368
 
351
369
  // ======================= Action: Hover ========================
352
370
  var hoverToShow = showActions.has('hover');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/trigger",
3
- "version": "1.6.1",
3
+ "version": "1.6.3",
4
4
  "description": "base abstract trigger component for react",
5
5
  "engines": {
6
6
  "node": ">=8.x"
@@ -46,7 +46,7 @@
46
46
  "@types/classnames": "^2.2.10",
47
47
  "@types/jest": "^26.0.15",
48
48
  "@types/react": "^16.8.19",
49
- "@types/react-dom": "^16.8.4",
49
+ "@types/react-dom": "^18.0.11",
50
50
  "cross-env": "^7.0.1",
51
51
  "dumi": "^2.1.0",
52
52
  "eslint": "^7.0.0",