@kdcloudjs/kdesign 1.7.48-usePopper.1 → 1.7.48-usePopper.2

package/lib/popper/index.js

@@ -13,6 +13,8 @@ var _flat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stabl
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+var _startsWith = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/starts-with"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
@@ -26,6 +28,8 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactNode = require("../_utils/reactNode");
 var _configProvider = require("../config-provider");
+var _hooks = require("../_utils/hooks");
+var _useId = _interopRequireDefault(require("../_utils/useId"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var Placements = (0, _type.tuple)('top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom');
@@ -33,13 +37,16 @@ exports.Placements = Placements;
 var Triggers = (0, _type.tuple)('hover', 'focus', 'click', 'contextMenu');
 exports.Triggers = Triggers;
 var useEnhancedEffect = typeof window !== 'undefined' ? _react.default.useLayoutEffect : _react.default.useEffect;
+var TriggerContext = /*#__PURE__*/_react.default.createContext(null);
 var generateGetBoundingClientRect = function generateGetBoundingClientRect() {
   var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var height = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   return function () {
     return {
-      width: 0,
-      height: 0,
+      width: width,
+      height: height,
       top: y,
       right: x,
       bottom: y,
@@ -50,6 +57,7 @@ var generateGetBoundingClientRect = function generateGetBoundingClientRect() {
 var virtualElement = {
   getBoundingClientRect: generateGetBoundingClientRect()
 };
+var triggerTypeArray = ['hover', 'focus', 'click', 'contextMenu'];
 var popperPlacementMap = {
   top: 'top',
   left: 'left',
@@ -66,7 +74,7 @@ var popperPlacementMap = {
 };
 exports.popperPlacementMap = popperPlacementMap;
 var placementFlip = {
-  bottom: 'bottom',
+  bottom: 'top',
   top: 'bottom',
   right: 'left',
   left: 'right'
@@ -89,29 +97,28 @@ var getFallbackPlacements = function getFallbackPlacements(key) {
     return f !== key;
   }));
 };
-var getRealDom = function getRealDom(locatorRef, locatorElement) {
+var getRealDom = function getRealDom(locatorRef) {
+  var locatorElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
   var _a;
   if (!locatorRef.current) return locatorRef.current;
-  var REF_NAME_OBJ = {
-    Input: 'input',
-    InputNumber: 'input',
-    Select: 'select',
-    Upload: 'input'
-  };
   if (locatorRef.current.tagName) return locatorRef.current;
-  var name = REF_NAME_OBJ[(_a = locatorElement === null || locatorElement === void 0 ? void 0 : locatorElement.type) === null || _a === void 0 ? void 0 : _a.displayName];
-  return locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current[name];
-};
-var isTarget = function isTarget(domRef, e, locatorElement) {
-  var _a;
-  if (domRef && (domRef === null || domRef === void 0 ? void 0 : domRef.current)) {
-    var dom = getRealDom(domRef, locatorElement);
-    return dom ? dom === e.target || ((_a = dom === null || dom === void 0 ? void 0 : dom.contains) === null || _a === void 0 ? void 0 : _a.call(dom, e.target)) : false;
+  if (locatorElement) {
+    var REF_NAME_OBJ = {
+      Input: 'input',
+      InputNumber: 'input',
+      Select: 'select',
+      Upload: 'input'
+    };
+    var name = REF_NAME_OBJ === null || REF_NAME_OBJ === void 0 ? void 0 : REF_NAME_OBJ[(_a = locatorElement === null || locatorElement === void 0 ? void 0 : locatorElement.type) === null || _a === void 0 ? void 0 : _a.displayName];
+    return locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current[name];
   }
-  return false;
+  return locatorElement;
+};
+var getElement = function getElement(element) {
+  return typeof element === 'function' ? element() : element;
 };
 var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _context6, _context7, _context8;
+  var _context8, _context9, _context10;
   var _a;
   var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
@@ -153,40 +160,52 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     getTriggerElement = _props$getTriggerElem === void 0 ? function (locatorNode) {
       return locatorNode;
     } : _props$getTriggerElem,
-    getPopupContainer = props.getPopupContainer,
-    _onTransitionEnd = props.onTransitionEnd,
-    _onAnimationEnd = props.onAnimationEnd,
+    _props$getPopupContai = props.getPopupContainer,
+    getPopupContainer = _props$getPopupContai === void 0 ? function () {
+      return document.body;
+    } : _props$getPopupContai,
+    onTransitionEnd = props.onTransitionEnd,
+    onAnimationEnd = props.onAnimationEnd,
     children = props.children;
-  // const trigger = 'click'
-  // const arrow = false
   var popperPrefixCls = getPrefixCls(pkgPrefixCls, 'popper');
-  var referenceContentCls = "".concat(popperPrefixCls, "-reference-content");
-  var childrenInner = /*#__PURE__*/_react.default.isValidElement(children) && !(0, _reactNode.isFragment)(children) ? children : /*#__PURE__*/_react.default.createElement("span", null, children);
+  var referencePrefixCls = "".concat(popperPrefixCls, "-reference");
+  var child = getElement(children);
+  var childrenInner = /*#__PURE__*/(0, _react.isValidElement)(child) && !(0, _reactNode.isFragment)(child) ? child : /*#__PURE__*/_react.default.createElement("span", null, child);
+  var popperElement = getElement(tip);
   var referenceElement = _react.Children.only(childrenInner);
-  var popperElement = typeof tip === 'function' ? tip() : tip;
+  var id = (0, _useId.default)();
+  var parentContext = (0, _react.useContext)(TriggerContext);
+  var subPopupRefs = (0, _react.useRef)({});
+  var context = _react.default.useMemo(function () {
+    return {
+      registerSubPopup: function registerSubPopup(id, subPopupEle) {
+        subPopupRefs.current[id] = subPopupEle;
+        parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, subPopupEle);
+      }
+    };
+  }, [parentContext]);
+  var popperRefDom = (0, _react.useRef)(null);
   var popperRefInner = (0, _react.useRef)(null);
   var popperRef = ref || popperRefInner;
   var popperInstance = (0, _react.useRef)(null);
-  var referenceRef = (0, _react.useRef)(null);
-  // const referenceRef: any = referenceInnerRef
-  var container = (getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer(getRealDom(referenceRef, referenceElement) || document.body)) || document.body;
-  // console.log('referenceElement', container, children, referenceElement)
-  var _useState = (0, _react.useState)(typeof visible === 'undefined' ? defaultVisible : visible),
+  var referenceRefInner = (0, _react.useRef)(null);
+  var referenceRef = (referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.ref) || referenceRefInner;
+  var container = getPopupContainer(getRealDom(referenceRef, referenceElement) || document.body) || document.body;
+  var _useMergedState = (0, _hooks.useMergedState)(false, {
+      value: visible,
+      defaultValue: defaultVisible
+    }),
+    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+    visibleInner = _useMergedState2[0],
+    setVisibleInner = _useMergedState2[1];
+  var _useState = (0, _react.useState)(visibleInner),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    visibleInner = _useState2[0],
-    setVisibleInner = _useState2[1];
-  var _useState3 = (0, _react.useState)(visibleInner),
+    exist = _useState2[0],
+    setExist = _useState2[1];
+  var _useState3 = (0, _react.useState)(getRealPlacement(placement)),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    exist = _useState4[0],
-    setExist = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    active = _useState6[0],
-    setActive = _useState6[1];
-  var _useState7 = (0, _react.useState)(getRealPlacement(placement)),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    placementInner = _useState8[0],
-    setPlacementInner = _useState8[1];
+    placementInner = _useState4[0],
+    setPlacementInner = _useState4[1];
   var delayRef = (0, _react.useRef)();
   var clearDelay = function clearDelay() {
     if (typeof delayRef.current !== 'undefined') {
@@ -194,34 +213,64 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       delayRef.current = null;
     }
   };
+  var changeVisible = function changeVisible(nextOpen) {
+    var triggerType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    if (visibleInner !== nextOpen) {
+      if (nextOpen && (0, _includes.default)(triggerTypeArray).call(triggerTypeArray, triggerType)) {
+        onTrigger === null || onTrigger === void 0 ? void 0 : onTrigger(triggerType);
+      }
+      if (typeof visible === 'undefined') {
+        setVisibleInner(nextOpen);
+      }
+      onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextOpen);
+    }
+    if (!nextOpen && (0, _keys.default)(subPopupRefs.current || {}).length) {
+      console.log('triggerOpenSub', subPopupRefs.current);
+      (0, _values.default)(subPopupRefs.current).forEach(function (d) {
+        if (typeof (d === null || d === void 0 ? void 0 : d.triggerOpen) === 'function' && (d === null || d === void 0 ? void 0 : d.visible)) {
+          d === null || d === void 0 ? void 0 : d.triggerOpen(false);
+        }
+      });
+    }
+  };
   var triggerOpen = function triggerOpen(nextOpen) {
     var triggerType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.1;
-    console.log('triggerOpen', nextOpen, delay);
+    var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
     clearDelay();
-    if (delay === 0) {
-      if (visibleInner !== nextOpen) {
-        if (nextOpen) {
-          onTrigger === null || onTrigger === void 0 ? void 0 : onTrigger(triggerType);
-        }
-        if (typeof visible === 'undefined') {
-          setVisibleInner(nextOpen);
+    if (!disabled) {
+      if (delay === 0) {
+        changeVisible(nextOpen, triggerType);
+      } else {
+        if (visibleInner !== nextOpen) {
+          delayRef.current = setTimeout(function () {
+            changeVisible(nextOpen, triggerType);
+          }, delay * 1000);
         }
-        onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextOpen);
       }
-    } else {
-      if (visibleInner !== nextOpen) {
-        delayRef.current = setTimeout(function () {
-          if (nextOpen) {
-            onTrigger === null || onTrigger === void 0 ? void 0 : onTrigger(triggerType);
-          }
-          if (typeof visible === 'undefined') {
-            setVisibleInner(nextOpen);
-          }
-          onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextOpen);
-        }, delay * 1000);
+    }
+  };
+  var isSubPopper = function isSubPopper(event) {
+    if (!event || !(event === null || event === void 0 ? void 0 : event.target)) {
+      return false;
+    }
+    // let targetElement: HTMLElement = event.target as HTMLElement
+    // const POP_ATTR_NAME = 'data-popper-placement'
+    // while (targetElement && targetElement !== document.documentElement) {
+    //   if (targetElement?.getAttribute(POP_ATTR_NAME) && targetElement?.className.includes(popperPrefixCls)) {
+    //     return true
+    //   }
+    //   targetElement = targetElement?.parentNode as HTMLElement
+    // }
+    var target = event.target;
+    if (subPopupRefs.current) {
+      for (var key in subPopupRefs.current) {
+        var dom = subPopupRefs.current[key].dom;
+        if (dom && ((dom === null || dom === void 0 ? void 0 : dom.contains(target)) || dom === target)) {
+          return true;
+        }
       }
     }
+    return false;
   };
   var onTriggerInner = function onTriggerInner(nextOpen, triggerType) {
     var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
@@ -229,43 +278,76 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
   var onClick = function onClick(e) {
     var _a, _b;
-    onTriggerInner(!visibleInner, 'click', 0);
+    e.stopPropagation();
+    onTriggerInner(!visibleInner, 'click');
     (_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
   };
   var onFocus = function onFocus(e) {
     var _a, _b;
-    onTriggerInner(true, 'focus', 0);
+    onTriggerInner(true, 'focus');
     (_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, e);
   };
   var onBlur = function onBlur(e) {
     var _a, _b;
-    onTriggerInner(false, 'focus', 0);
+    onTriggerInner(false, 'focus');
     (_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, e);
   };
   var onContextMenu = function onContextMenu(e) {
     var _a, _b;
     e.preventDefault();
-    virtualElement.getBoundingClientRect = generateGetBoundingClientRect(e.clientX, e.clientY);
-    onTriggerInner(!visibleInner, 'contextMenu', 0);
+    var clientWidth = 0;
+    var clientHeight = 0;
+    if (arrow) {
+      if ((0, _startsWith.default)(placementInner).call(placementInner, 'top') || (0, _startsWith.default)(placementInner).call(placementInner, 'bottom')) {
+        var _context6;
+        if (!(0, _includes.default)(_context6 = ['top', 'bottom']).call(_context6, placementInner)) {
+          clientWidth = 6 * arrowSize;
+        }
+      } else {
+        var _context7;
+        if (!(0, _includes.default)(_context7 = ['right', 'left']).call(_context7, placementInner)) {
+          clientHeight = 6 * arrowSize;
+        }
+      }
+    }
+    virtualElement.getBoundingClientRect = generateGetBoundingClientRect(e.clientX, e.clientY, clientWidth, clientHeight);
+    onTriggerInner(!visibleInner, 'contextMenu');
     (_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.onContextMenu) === null || _b === void 0 ? void 0 : _b.call(_a, e);
   };
   var onMouseOver = function onMouseOver(e) {
     var _a, _b;
-    console.log('onMouseOver');
     onTriggerInner(true, 'hover', mouseEnterDelay);
     (_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.onMouseOver) === null || _b === void 0 ? void 0 : _b.call(_a, e);
   };
   var onMouseLeave = function onMouseLeave(e) {
     var _a, _b;
-    console.log('onMouseLeave');
     onTriggerInner(false, 'hover', mouseLeaveDelay);
     (_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
   };
-  (0, _react.useEffect)(function () {
-    if (typeof visible !== 'undefined') {
-      setVisibleInner(visible);
+  var onPopperAnimationEnd = function onPopperAnimationEnd(e) {
+    onAnimationEnd === null || onAnimationEnd === void 0 ? void 0 : onAnimationEnd(e);
+    onTransitionEnd === null || onTransitionEnd === void 0 ? void 0 : onTransitionEnd(e);
+  };
+  var isTrigger = function isTrigger(triggerValue) {
+    return trigger === triggerValue || Array.isArray(trigger) && (0, _includes.default)(trigger).call(trigger, triggerValue);
+  };
+  var triggerEventHandle = function triggerEventHandle(triggerNode) {
+    var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'addEventListener';
+    if (isTrigger('click')) {
+      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode[type]('click', onClick);
+    }
+    if (isTrigger('focus')) {
+      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode[type]('focus', onFocus);
+      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode[type]('blur', onBlur);
     }
-  }, [visible]);
+    if (isTrigger('contextMenu')) {
+      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode[type]('contextmenu', onContextMenu);
+    }
+    if (isTrigger('hover')) {
+      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode[type]('mouseover', onMouseOver);
+      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode[type]('mouseleave', onMouseLeave);
+    }
+  };
   (0, _react.useEffect)(function () {
     setPlacementInner(getRealPlacement(placement));
   }, [placement]);
@@ -273,9 +355,9 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var scrollHandle = (0, _debounce.default)(function (e) {
       var _a, _b;
       if (visibleInner) {
-        var isPopper = e.target === popperRef.current || ((_b = (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, e.target));
+        var isPopper = e.target === popperRefDom.current || ((_b = (_a = popperRefDom.current) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, e.target));
         if (scrollHidden && !isPopper) {
-          triggerOpen(false);
+          triggerOpen(false, 'scroll');
         }
       }
     }, 10);
@@ -285,14 +367,18 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return function () {
       document.removeEventListener('scroll', scrollHandle, true);
     };
-  }, [visibleInner, scrollHidden, popperRef]);
+  }, [visibleInner, scrollHidden, popperRefDom]);
   (0, _react.useEffect)(function () {
     var clickHandle = (0, _debounce.default)(function (e) {
+      var _a, _b, _c;
       if (visibleInner) {
-        var isReference = isTarget(referenceRef, e, referenceElement) || isTarget(popperRef, e, referenceElement);
-        console.log('click----', visibleInner, clickToClose, isReference);
-        if (clickToClose && !isReference) {
-          triggerOpen(false, '', 0);
+        var isPopper = popperRefDom.current ? popperRefDom.current === e.target || ((_b = (_a = popperRefDom.current).contains) === null || _b === void 0 ? void 0 : _b.call(_a, e.target)) : false;
+        var domReference = getRealDom(referenceRef, referenceElement);
+        var isReference = domReference ? domReference === e.target || ((_c = domReference === null || domReference === void 0 ? void 0 : domReference.contains) === null || _c === void 0 ? void 0 : _c.call(domReference, e.target)) : false;
+        var isTarget = trigger === 'contextMenu' ? isPopper : isPopper || isReference;
+        console.log('clickOutside', children, e.target, isPopper, isReference, subPopupRefs.current);
+        if (clickToClose && !isTarget && !isSubPopper(e)) {
+          triggerOpen(false, 'clickOutside', 0);
         }
       }
     }, 10);
@@ -302,30 +388,22 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return function () {
       document.removeEventListener('click', clickHandle, true);
     };
-  }, [visibleInner, clickToClose, referenceRef, popperRef]);
+  }, [visibleInner, clickToClose, referenceRef, popperRefDom]);
   (0, _react.useEffect)(function () {
     var realDom = getRealDom(referenceRef, referenceElement);
     var triggerNode = getTriggerElement(realDom);
-    if (trigger === 'click') {
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.addEventListener('click', onClick);
-    } else if (trigger === 'focus') {
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.addEventListener('focus', onFocus);
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.addEventListener('blur', onBlur);
-    } else if (trigger === 'contextMenu') {
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.addEventListener('contextmenu', onContextMenu);
-    } else {
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.addEventListener('mouseover', onMouseOver);
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.addEventListener('mouseleave', onMouseLeave);
-    }
+    triggerEventHandle(triggerNode);
     return function () {
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.removeEventListener('click', onClick);
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.removeEventListener('focus', onClick);
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.removeEventListener('blur', onClick);
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.removeEventListener('contextmenu', onContextMenu);
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.removeEventListener('mouseover', onMouseOver);
-      triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.removeEventListener('mouseleave', onMouseLeave);
+      triggerEventHandle(triggerNode, 'removeEventListener');
+    };
+  }, [getTriggerElement, visibleInner, referenceElement, referenceRef, trigger]);
+  (0, _react.useImperativeHandle)(popperRef, function () {
+    return {
+      dom: popperRefDom.current,
+      triggerOpen: triggerOpen,
+      visible: visibleInner
     };
-  }, [getTriggerElement, visibleInner, referenceElement, referenceRef]);
+  });
   var popperModifiers = [{
     name: 'offset',
     options: {
@@ -335,23 +413,24 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     name: 'preventOverflow',
     enabled: autoPlacement,
     options: {
-      altBoundary: disabled,
       mainAxis: true
     }
   }, {
     name: 'flip',
     enabled: autoPlacement,
     options: {
-      altBoundary: disabled,
       fallbackPlacements: autoPlacement ? getFallbackPlacements(placementInner) : undefined
     }
   }, {
     name: 'onUpdate',
     enabled: true,
     phase: 'afterWrite',
-    fn: function fn(_ref) {
-      var state = _ref.state;
-      setPlacementInner(state.placement);
+    fn: function fn(d) {
+      var _ref = d === null || d === void 0 ? void 0 : d.state,
+        p = _ref.placement;
+      if (p !== placementInner) {
+        setPlacementInner(p);
+      }
     }
   }];
   var popperOptionsInner = {
@@ -361,73 +440,71 @@ var Popper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
   useEnhancedEffect(function () {
     var _a, _b;
-    console.log('-----1', exist, popperInstance.current);
     if (visibleInner) {
       if (!exist) {
         setExist(true);
       } else {
-        setActive(true);
-        setTimeout(function () {
-          return setActive(false);
-        }, 1000);
         if (popperInstance.current) {
           (_a = popperInstance.current) === null || _a === void 0 ? void 0 : _a.setOptions(function (options) {
             return (0, _extends2.default)((0, _extends2.default)({}, options), popperOptionsInner);
           });
           (_b = popperInstance.current) === null || _b === void 0 ? void 0 : _b.forceUpdate();
         }
+        setTimeout(function () {
+          parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, popperRef.current);
+        }, 10);
       }
     }
-  }, [visibleInner, placementInner]);
+  }, [visibleInner, placementInner, arrow]);
   useEnhancedEffect(function () {
-    console.log('-----2', exist);
-    if (!exist || disabled) {
+    if (!exist) {
       return undefined;
     }
     var current = getRealDom(referenceRef, referenceElement);
     if (current) {
-      popperInstance.current = (0, _core.createPopper)(trigger === 'contextMenu' ? virtualElement : (current === null || current === void 0 ? void 0 : current.closest(".".concat(referenceContentCls))) || current, popperRef.current, popperOptionsInner);
+      popperInstance.current = (0, _core.createPopper)(trigger === 'contextMenu' ? virtualElement : (current === null || current === void 0 ? void 0 : current.closest(".".concat(referencePrefixCls))) || current, popperRefDom.current, popperOptionsInner);
+      setTimeout(function () {
+        parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, popperRef.current);
+      }, 10);
     }
     return function () {
       var _a;
-      console.log('-----3');
       (_a = popperInstance.current) === null || _a === void 0 ? void 0 : _a.destroy();
     };
-  }, [exist, disabled]);
+  }, [exist]);
   if (children === null || typeof children === 'undefined') {
     return null;
   }
+  var arrowStyle = (0, _defineProperty2.default)({}, "--arrowSize", arrowSize + 'px');
   var popperContainerProps = {
-    ref: popperRef,
-    className: (0, _classnames3.default)(popperPrefixCls, referenceContentCls, {
+    ref: popperRefDom,
+    style: (0, _extends2.default)({}, arrow ? arrowStyle : {}),
+    className: (0, _classnames3.default)(popperPrefixCls, {
       hidden: !visibleInner
-    }),
-    onTransitionEnd: function onTransitionEnd(e) {
-      return _onTransitionEnd === null || _onTransitionEnd === void 0 ? void 0 : _onTransitionEnd(e);
-    }
+    })
   };
-  var arrowStyle = (0, _defineProperty2.default)({}, "--arrowSize", arrowSize + 'px');
   var popperProps = {
-    className: (0, _classnames3.default)(["".concat(popperPrefixCls, "-content")], [(0, _concat.default)(_context6 = "".concat(popperPrefixCls, "-")).call(_context6, placementInner)], (0, _defineProperty2.default)({}, (0, _concat.default)(_context7 = "".concat(popperPrefixCls, "-")).call(_context7, placementInner, "-out"), !visibleInner), (0, _defineProperty2.default)({}, (0, _concat.default)(_context8 = "".concat(popperPrefixCls, "-")).call(_context8, placementInner, "-in"), active), prefixCls, popperClassName, className),
-    style: (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, arrow ? arrowStyle : {}), popperStyle), style),
+    className: (0, _classnames3.default)([(0, _concat.default)(_context8 = "".concat(popperPrefixCls, "-")).call(_context8, placementInner)], (0, _defineProperty2.default)({}, (0, _concat.default)(_context9 = "".concat(popperPrefixCls, "-")).call(_context9, placementInner, "-out"), !visibleInner), (0, _defineProperty2.default)({}, (0, _concat.default)(_context10 = "".concat(popperPrefixCls, "-")).call(_context10, placementInner, "-in"), visibleInner), prefixCls, popperClassName, className),
+    style: (0, _extends2.default)((0, _extends2.default)({}, popperStyle), style),
     onMouseOver: trigger === 'hover' ? function () {
       return onTriggerInner(true, 'hover', mouseEnterDelay);
     } : undefined,
     onMouseLeave: trigger === 'hover' ? function () {
       return onTriggerInner(false, 'hover', mouseLeaveDelay);
     } : undefined,
-    onAnimationEnd: function onAnimationEnd(e) {
-      return _onAnimationEnd === null || _onAnimationEnd === void 0 ? void 0 : _onAnimationEnd(e);
-    }
+    onAnimationEnd: onPopperAnimationEnd,
+    onTransitionEnd: onPopperAnimationEnd
   };
   var referenceProps = {
     ref: referenceRef,
-    className: (0, _classnames3.default)((_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.className, referenceContentCls)
+    className: (0, _classnames3.default)((_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.className, referencePrefixCls)
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.cloneElement(referenceElement, referenceProps), exist && container && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, popperContainerProps), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, popperProps), popperElement, arrow && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'arrow',
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.cloneElement(referenceElement, referenceProps), exist && container && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(TriggerContext.Provider, {
+    value: context
+  }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, popperContainerProps), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, popperProps), popperElement, arrow && /*#__PURE__*/_react.default.createElement("div", {
+    className: "arrow",
     "data-popper-arrow": ""
-  }))), container));
+  })))), container));
 });
 exports.Popper = Popper;
 Popper.displayName = 'Popper';

package/lib/popper/style/index.css

@@ -114,24 +114,23 @@
 .kd-popper.hidden {
   opacity: 0;
   visibility: hidden;
-  -webkit-transition: all calc(0.3s - 0.1s);
-  transition: all calc(0.3s - 0.1s);
   pointer-events: none;
 }
-.kd-popper-content .arrow {
+.kd-popper .arrow {
   visibility: hidden;
 }
-.kd-popper-content .arrow::before {
+.kd-popper .arrow::before {
   visibility: visible;
   position: absolute;
   border-style: solid;
+  border-color: transparent;
   border-width: var(--arrowSize);
   content: '';
   -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
 }
 .kd-popper[data-popper-placement^='top'] .arrow {
-  bottom: var(--arrowSize);
+  bottom: calc(0.9 * var(--arrowSize));
 }
 .kd-popper[data-popper-placement^='top'] .arrow::before {
   left: calc(-1 * var(--arrowSize));
@@ -139,7 +138,7 @@
   border-left-color: transparent;
 }
 .kd-popper[data-popper-placement^='bottom'] .arrow {
-  top: calc(-1 * var(--arrowSize));
+  top: calc(-0.9 * var(--arrowSize));
 }
 .kd-popper[data-popper-placement^='bottom'] .arrow::before {
   left: calc(-1 * var(--arrowSize));
@@ -147,7 +146,7 @@
   border-right-color: transparent;
 }
 .kd-popper[data-popper-placement^='left'] .arrow {
-  right: var(--arrowSize);
+  right: calc(0.9 * var(--arrowSize));
 }
 .kd-popper[data-popper-placement^='left'] .arrow::before {
   top: calc(-1 * var(--arrowSize));
@@ -155,7 +154,7 @@
   border-bottom-color: transparent;
 }
 .kd-popper[data-popper-placement^='right'] .arrow {
-  left: calc(-1 * var(--arrowSize));
+  left: calc(-0.9 * var(--arrowSize));
 }
 .kd-popper[data-popper-placement^='right'] .arrow::before {
   top: calc(-1 * var(--arrowSize));
@@ -242,17 +241,17 @@
   -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
           animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
 }
-.kd-popper-rightBottom {
+.kd-popper-right-end {
   -webkit-animation-duration: calc(0.3s - 0.1s);
           animation-duration: calc(0.3s - 0.1s);
 }
-.kd-popper-rightBottom-in {
+.kd-popper-right-end-in {
   -webkit-animation-name: kdZoomLeftBottomIn;
           animation-name: kdZoomLeftBottomIn;
   -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
           animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
 }
-.kd-popper-rightBottom-out {
+.kd-popper-right-end-out {
   -webkit-animation-name: kdZoomLeftBottomOut;
           animation-name: kdZoomLeftBottomOut;
   -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);