@rc-component/trigger 2.2.4 → 2.2.6

package/es/Popup/index.d.ts

@@ -11,7 +11,7 @@ export interface PopupProps {
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
     onPointerEnter?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement>;
+    onPointerDownCapture?: React.MouseEventHandler<HTMLDivElement>;
     zIndex?: number;
     mask?: boolean;
     onVisibleChanged: (visible: boolean) => void;

package/es/Popup/index.js

@@ -35,7 +35,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onMouseEnter = props.onMouseEnter,
     onMouseLeave = props.onMouseLeave,
     onPointerEnter = props.onPointerEnter,
-    onMouseDownCapture = props.onMouseDownCapture,
+    onPointerDownCapture = props.onPointerDownCapture,
     ready = props.ready,
     offsetX = props.offsetX,
     offsetY = props.offsetY,
@@ -169,7 +169,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
         onMouseLeave: onMouseLeave,
         onPointerEnter: onPointerEnter,
         onClick: onClick,
-        onMouseDownCapture: onMouseDownCapture
+        onPointerDownCapture: onPointerDownCapture
       }, arrow && /*#__PURE__*/React.createElement(Arrow, {
         prefixCls: prefixCls,
         arrow: arrow,

package/es/TriggerWrapper.js

@@ -1,4 +1,4 @@
-import { fillRef, supportRef, useComposeRef } from "rc-util/es/ref";
+import { fillRef, getNodeRef, supportRef, useComposeRef } from "rc-util/es/ref";
 import * as React from 'react';
 var TriggerWrapper = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
@@ -9,7 +9,7 @@ var TriggerWrapper = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var setRef = React.useCallback(function (node) {
     fillRef(ref, getTriggerDOMNode ? getTriggerDOMNode(node) : node);
   }, [getTriggerDOMNode]);
-  var mergedRef = useComposeRef(setRef, children.ref);
+  var mergedRef = useComposeRef(setRef, getNodeRef(children));
   return canUseRef ? /*#__PURE__*/React.cloneElement(children, {
     ref: mergedRef
   }) : children;

package/es/hooks/useWinClick.d.ts

@@ -1 +1 @@
-export default function useWinClick(open: boolean, clickToHide: boolean, targetEle: HTMLElement, popupEle: HTMLElement, mask: boolean, maskClosable: boolean, inPopupOrChild: (target: EventTarget) => boolean, triggerOpen: (open: boolean) => void): void;
+export default function useWinClick(open: boolean, clickToHide: boolean, targetEle: HTMLElement, popupEle: HTMLElement, mask: boolean, maskClosable: boolean, inPopupOrChild: (target: EventTarget) => boolean, triggerOpen: (open: boolean) => void): () => void;

package/es/hooks/useWinClick.js

@@ -5,17 +5,22 @@ import { getWin } from "../util";
 export default function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen) {
   var openRef = React.useRef(open);
   openRef.current = open;
+  var popupPointerDownRef = React.useRef(false);
 
   // Click to hide is special action since click popup element should not hide
   React.useEffect(function () {
     if (clickToHide && popupEle && (!mask || maskClosable)) {
+      var onPointerDown = function onPointerDown() {
+        popupPointerDownRef.current = false;
+      };
       var onTriggerClose = function onTriggerClose(e) {
         var _e$composedPath;
-        if (openRef.current && !inPopupOrChild(((_e$composedPath = e.composedPath) === null || _e$composedPath === void 0 || (_e$composedPath = _e$composedPath.call(e)) === null || _e$composedPath === void 0 ? void 0 : _e$composedPath[0]) || e.target)) {
+        if (openRef.current && !inPopupOrChild(((_e$composedPath = e.composedPath) === null || _e$composedPath === void 0 || (_e$composedPath = _e$composedPath.call(e)) === null || _e$composedPath === void 0 ? void 0 : _e$composedPath[0]) || e.target) && !popupPointerDownRef.current) {
           triggerOpen(false);
         }
       };
       var win = getWin(popupEle);
+      win.addEventListener('pointerdown', onPointerDown, true);
       win.addEventListener('mousedown', onTriggerClose, true);
       win.addEventListener('contextmenu', onTriggerClose, true);
 
@@ -34,6 +39,7 @@ export default function useWinClick(open, clickToHide, targetEle, popupEle, mask
         warning(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
       }
       return function () {
+        win.removeEventListener('pointerdown', onPointerDown, true);
         win.removeEventListener('mousedown', onTriggerClose, true);
         win.removeEventListener('contextmenu', onTriggerClose, true);
         if (targetShadowRoot) {
@@ -43,4 +49,8 @@ export default function useWinClick(open, clickToHide, targetEle, popupEle, mask
       };
     }
   }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
+  function onPopupPointerDown() {
+    popupPointerDownRef.current = true;
+  }
+  return onPopupPointerDown;
 }

package/es/index.js

@@ -364,7 +364,7 @@ export function generateTrigger() {
     }
 
     // Click to hide is special action since click popup element should not hide
-    useWinClick(mergedOpen, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen);
+    var onPopupPointerDown = useWinClick(mergedOpen, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen);
 
     // ======================= Action: Hover ========================
     var hoverToShow = showActions.has('hover');
@@ -494,14 +494,7 @@ export function generateTrigger() {
       // Click
       ,
       onClick: onPopupClick,
-      onMouseDownCapture: function onMouseDownCapture() {
-        // Additional check for click to hide
-        // Since `createPortal` will not included in the popup element
-        // So we use capture to handle this
-        if (clickToHide) {
-          triggerOpen(true);
-        }
-      }
+      onPointerDownCapture: onPopupPointerDown
       // Mask
       ,
       mask: mask

package/lib/Popup/index.d.ts

@@ -11,7 +11,7 @@ export interface PopupProps {
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
     onPointerEnter?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement>;
+    onPointerDownCapture?: React.MouseEventHandler<HTMLDivElement>;
     zIndex?: number;
     mask?: boolean;
     onVisibleChanged: (visible: boolean) => void;

package/lib/Popup/index.js

@@ -43,7 +43,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onMouseEnter = props.onMouseEnter,
     onMouseLeave = props.onMouseLeave,
     onPointerEnter = props.onPointerEnter,
-    onMouseDownCapture = props.onMouseDownCapture,
+    onPointerDownCapture = props.onPointerDownCapture,
     ready = props.ready,
     offsetX = props.offsetX,
     offsetY = props.offsetY,
@@ -177,7 +177,7 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
         onMouseLeave: onMouseLeave,
         onPointerEnter: onPointerEnter,
         onClick: onClick,
-        onMouseDownCapture: onMouseDownCapture
+        onPointerDownCapture: onPointerDownCapture
       }, arrow && /*#__PURE__*/React.createElement(_Arrow.default, {
         prefixCls: prefixCls,
         arrow: arrow,

package/lib/TriggerWrapper.js

@@ -16,7 +16,7 @@ var TriggerWrapper = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var setRef = React.useCallback(function (node) {
     (0, _ref.fillRef)(ref, getTriggerDOMNode ? getTriggerDOMNode(node) : node);
   }, [getTriggerDOMNode]);
-  var mergedRef = (0, _ref.useComposeRef)(setRef, children.ref);
+  var mergedRef = (0, _ref.useComposeRef)(setRef, (0, _ref.getNodeRef)(children));
   return canUseRef ? /*#__PURE__*/React.cloneElement(children, {
     ref: mergedRef
   }) : children;

package/lib/hooks/useWinClick.d.ts

@@ -1 +1 @@
-export default function useWinClick(open: boolean, clickToHide: boolean, targetEle: HTMLElement, popupEle: HTMLElement, mask: boolean, maskClosable: boolean, inPopupOrChild: (target: EventTarget) => boolean, triggerOpen: (open: boolean) => void): void;
+export default function useWinClick(open: boolean, clickToHide: boolean, targetEle: HTMLElement, popupEle: HTMLElement, mask: boolean, maskClosable: boolean, inPopupOrChild: (target: EventTarget) => boolean, triggerOpen: (open: boolean) => void): () => void;

package/lib/hooks/useWinClick.js

@@ -12,17 +12,22 @@ var _util = require("../util");
 function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen) {
   var openRef = React.useRef(open);
   openRef.current = open;
+  var popupPointerDownRef = React.useRef(false);
 
   // Click to hide is special action since click popup element should not hide
   React.useEffect(function () {
     if (clickToHide && popupEle && (!mask || maskClosable)) {
+      var onPointerDown = function onPointerDown() {
+        popupPointerDownRef.current = false;
+      };
       var onTriggerClose = function onTriggerClose(e) {
         var _e$composedPath;
-        if (openRef.current && !inPopupOrChild(((_e$composedPath = e.composedPath) === null || _e$composedPath === void 0 || (_e$composedPath = _e$composedPath.call(e)) === null || _e$composedPath === void 0 ? void 0 : _e$composedPath[0]) || e.target)) {
+        if (openRef.current && !inPopupOrChild(((_e$composedPath = e.composedPath) === null || _e$composedPath === void 0 || (_e$composedPath = _e$composedPath.call(e)) === null || _e$composedPath === void 0 ? void 0 : _e$composedPath[0]) || e.target) && !popupPointerDownRef.current) {
           triggerOpen(false);
         }
       };
       var win = (0, _util.getWin)(popupEle);
+      win.addEventListener('pointerdown', onPointerDown, true);
       win.addEventListener('mousedown', onTriggerClose, true);
       win.addEventListener('contextmenu', onTriggerClose, true);
 
@@ -41,6 +46,7 @@ function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable,
         (0, _warning.warning)(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
       }
       return function () {
+        win.removeEventListener('pointerdown', onPointerDown, true);
         win.removeEventListener('mousedown', onTriggerClose, true);
         win.removeEventListener('contextmenu', onTriggerClose, true);
         if (targetShadowRoot) {
@@ -50,4 +56,8 @@ function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable,
       };
     }
   }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
+  function onPopupPointerDown() {
+    popupPointerDownRef.current = true;
+  }
+  return onPopupPointerDown;
 }

package/lib/index.js

@@ -372,7 +372,7 @@ function generateTrigger() {
     }
 
     // Click to hide is special action since click popup element should not hide
-    (0, _useWinClick.default)(mergedOpen, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen);
+    var onPopupPointerDown = (0, _useWinClick.default)(mergedOpen, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen);
 
     // ======================= Action: Hover ========================
     var hoverToShow = showActions.has('hover');
@@ -502,14 +502,7 @@ function generateTrigger() {
       // Click
       ,
       onClick: onPopupClick,
-      onMouseDownCapture: function onMouseDownCapture() {
-        // Additional check for click to hide
-        // Since `createPortal` will not included in the popup element
-        // So we use capture to handle this
-        if (clickToHide) {
-          triggerOpen(true);
-        }
-      }
+      onPointerDownCapture: onPopupPointerDown
       // Mask
       ,
       mask: mask

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"
@@ -33,7 +33,7 @@
     "start": "dumi dev",
     "build": "dumi build",
     "compile": "father build && lessc assets/index.less assets/index.css",
-    "prepublishOnly": "npm run compile ",
+    "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
     "test": "rc-test",
     "prettier": "prettier --write .",
@@ -69,7 +69,7 @@
     "classnames": "^2.3.2",
     "rc-motion": "^2.0.0",
     "rc-resize-observer": "^1.3.1",
-    "rc-util": "^5.38.0"
+    "rc-util": "^5.44.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",