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

package/es/popper/index.js

@@ -7,8 +7,10 @@ import _flatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { useEffect, useRef, useState, Children, forwardRef } from 'react';
+import React, { useEffect, useRef, useState, Children, forwardRef, useContext, isValidElement, useImperativeHandle } from 'react';
 import { createPopper } from '@popperjs/core';
 import { tuple } from '../_utils/type';
 import classnames from 'classnames';
@@ -16,16 +18,21 @@ import debounce from 'lodash/debounce';
 import ReactDOM from 'react-dom';
 import { isFragment } from '../_utils/reactNode';
 import { ConfigContext } from '../config-provider';
+import { useMergedState } from '../_utils/hooks';
+import useId from '../_utils/useId';
 export var Placements = tuple('top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom');
 export var Triggers = tuple('hover', 'focus', 'click', 'contextMenu');
 var useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var TriggerContext = /*#__PURE__*/React.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,
@@ -36,6 +43,7 @@ var generateGetBoundingClientRect = function generateGetBoundingClientRect() {
 var virtualElement = {
   getBoundingClientRect: generateGetBoundingClientRect()
 };
+var triggerTypeArray = ['hover', 'focus', 'click', 'contextMenu'];
 export var popperPlacementMap = {
   top: 'top',
   left: 'left',
@@ -51,7 +59,7 @@ export var popperPlacementMap = {
   rightBottom: 'right-end'
 };
 var placementFlip = {
-  bottom: 'bottom',
+  bottom: 'top',
   top: 'bottom',
   right: 'left',
   left: 'right'
@@ -74,29 +82,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;
 };
 export var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context6, _context7, _context8;
+  var _context8, _context9, _context10;
   var _a;
   var _React$useContext = React.useContext(ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
@@ -138,40 +145,52 @@ export var Popper = /*#__PURE__*/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.isValidElement(children) && !isFragment(children) ? children : /*#__PURE__*/React.createElement("span", null, children);
+  var referencePrefixCls = "".concat(popperPrefixCls, "-reference");
+  var child = getElement(children);
+  var childrenInner = /*#__PURE__*/isValidElement(child) && !isFragment(child) ? child : /*#__PURE__*/React.createElement("span", null, child);
+  var popperElement = getElement(tip);
   var referenceElement = Children.only(childrenInner);
-  var popperElement = typeof tip === 'function' ? tip() : tip;
+  var id = useId();
+  var parentContext = useContext(TriggerContext);
+  var subPopupRefs = useRef({});
+  var context = React.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 = useRef(null);
   var popperRefInner = useRef(null);
   var popperRef = ref || popperRefInner;
   var popperInstance = useRef(null);
-  var referenceRef = 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 = useState(typeof visible === 'undefined' ? defaultVisible : visible),
+  var referenceRefInner = 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 = useMergedState(false, {
+      value: visible,
+      defaultValue: defaultVisible
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    visibleInner = _useMergedState2[0],
+    setVisibleInner = _useMergedState2[1];
+  var _useState = useState(visibleInner),
     _useState2 = _slicedToArray(_useState, 2),
-    visibleInner = _useState2[0],
-    setVisibleInner = _useState2[1];
-  var _useState3 = useState(visibleInner),
+    exist = _useState2[0],
+    setExist = _useState2[1];
+  var _useState3 = useState(getRealPlacement(placement)),
     _useState4 = _slicedToArray(_useState3, 2),
-    exist = _useState4[0],
-    setExist = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    active = _useState6[0],
-    setActive = _useState6[1];
-  var _useState7 = useState(getRealPlacement(placement)),
-    _useState8 = _slicedToArray(_useState7, 2),
-    placementInner = _useState8[0],
-    setPlacementInner = _useState8[1];
+    placementInner = _useState4[0],
+    setPlacementInner = _useState4[1];
   var delayRef = useRef();
   var clearDelay = function clearDelay() {
     if (typeof delayRef.current !== 'undefined') {
@@ -179,34 +198,64 @@ export var Popper = /*#__PURE__*/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 && _includesInstanceProperty(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 && _Object$keys(subPopupRefs.current || {}).length) {
+      console.log('triggerOpenSub', subPopupRefs.current);
+      _Object$values(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;
@@ -214,43 +263,76 @@ export var Popper = /*#__PURE__*/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 (_startsWithInstanceProperty(placementInner).call(placementInner, 'top') || _startsWithInstanceProperty(placementInner).call(placementInner, 'bottom')) {
+        var _context6;
+        if (!_includesInstanceProperty(_context6 = ['top', 'bottom']).call(_context6, placementInner)) {
+          clientWidth = 6 * arrowSize;
+        }
+      } else {
+        var _context7;
+        if (!_includesInstanceProperty(_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);
   };
-  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) && _includesInstanceProperty(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);
+    }
+  };
   useEffect(function () {
     setPlacementInner(getRealPlacement(placement));
   }, [placement]);
@@ -258,9 +340,9 @@ export var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
     var scrollHandle = debounce(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);
@@ -270,14 +352,18 @@ export var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
     return function () {
       document.removeEventListener('scroll', scrollHandle, true);
     };
-  }, [visibleInner, scrollHidden, popperRef]);
+  }, [visibleInner, scrollHidden, popperRefDom]);
   useEffect(function () {
     var clickHandle = debounce(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);
@@ -287,30 +373,22 @@ export var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
     return function () {
       document.removeEventListener('click', clickHandle, true);
     };
-  }, [visibleInner, clickToClose, referenceRef, popperRef]);
+  }, [visibleInner, clickToClose, referenceRef, popperRefDom]);
   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]);
+  useImperativeHandle(popperRef, function () {
+    return {
+      dom: popperRefDom.current,
+      triggerOpen: triggerOpen,
+      visible: visibleInner
     };
-  }, [getTriggerElement, visibleInner, referenceElement, referenceRef]);
+  });
   var popperModifiers = [{
     name: 'offset',
     options: {
@@ -320,23 +398,24 @@ export var Popper = /*#__PURE__*/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 = {
@@ -346,73 +425,71 @@ export var Popper = /*#__PURE__*/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 _extends(_extends({}, 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 = createPopper(trigger === 'contextMenu' ? virtualElement : (current === null || current === void 0 ? void 0 : current.closest(".".concat(referenceContentCls))) || current, popperRef.current, popperOptionsInner);
+      popperInstance.current = 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 = _defineProperty({}, "--arrowSize", arrowSize + 'px');
   var popperContainerProps = {
-    ref: popperRef,
-    className: classnames(popperPrefixCls, referenceContentCls, {
+    ref: popperRefDom,
+    style: _extends({}, arrow ? arrowStyle : {}),
+    className: classnames(popperPrefixCls, {
       hidden: !visibleInner
-    }),
-    onTransitionEnd: function onTransitionEnd(e) {
-      return _onTransitionEnd === null || _onTransitionEnd === void 0 ? void 0 : _onTransitionEnd(e);
-    }
+    })
   };
-  var arrowStyle = _defineProperty({}, "--arrowSize", arrowSize + 'px');
   var popperProps = {
-    className: classnames(["".concat(popperPrefixCls, "-content")], [_concatInstanceProperty(_context6 = "".concat(popperPrefixCls, "-")).call(_context6, placementInner)], _defineProperty({}, _concatInstanceProperty(_context7 = "".concat(popperPrefixCls, "-")).call(_context7, placementInner, "-out"), !visibleInner), _defineProperty({}, _concatInstanceProperty(_context8 = "".concat(popperPrefixCls, "-")).call(_context8, placementInner, "-in"), active), prefixCls, popperClassName, className),
-    style: _extends(_extends(_extends({}, arrow ? arrowStyle : {}), popperStyle), style),
+    className: classnames([_concatInstanceProperty(_context8 = "".concat(popperPrefixCls, "-")).call(_context8, placementInner)], _defineProperty({}, _concatInstanceProperty(_context9 = "".concat(popperPrefixCls, "-")).call(_context9, placementInner, "-out"), !visibleInner), _defineProperty({}, _concatInstanceProperty(_context10 = "".concat(popperPrefixCls, "-")).call(_context10, placementInner, "-in"), visibleInner), prefixCls, popperClassName, className),
+    style: _extends(_extends({}, 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: classnames((_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.className, referenceContentCls)
+    className: classnames((_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.props) === null || _a === void 0 ? void 0 : _a.className, referencePrefixCls)
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(referenceElement, referenceProps), exist && container && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", _extends({}, popperContainerProps), /*#__PURE__*/React.createElement("div", _extends({}, popperProps), popperElement, arrow && /*#__PURE__*/React.createElement("div", {
-    className: 'arrow',
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(referenceElement, referenceProps), exist && container && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(TriggerContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement("div", _extends({}, popperContainerProps), /*#__PURE__*/React.createElement("div", _extends({}, popperProps), popperElement, arrow && /*#__PURE__*/React.createElement("div", {
+    className: "arrow",
     "data-popper-arrow": ""
-  }))), container));
+  })))), container));
 });
 Popper.displayName = 'Popper';
 export default Popper;

package/es/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);