@para-ui/core 4.0.0-rc.4 → 4.0.0-rc.6

package/_verture/{index-5a7e2438.js → index-3cdaba96.js}

@@ -1,16 +1,15 @@
-import { _ as _defineProperty, a as _toPropertyKey } from './defineProperty-1d116156.js';
-import { _ as _toConsumableArray, a as _iterableToArray } from './toConsumableArray-8f4c9589.js';
-import { _ as _slicedToArray, a as _arrayWithHoles, b as _nonIterableRest } from './slicedToArray-a8206399.js';
 import { _ as __rest } from './tslib.es6-55ed4bd2.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { _ as _toConsumableArray, a as _iterableToArray } from './toConsumableArray-c7a8028f.js';
+import { _ as _defineProperty, a as _toPropertyKey } from './defineProperty-1d116156.js';
+import { _ as _slicedToArray, a as _arrayWithHoles, b as _unsupportedIterableToArray, c as _nonIterableRest } from './slicedToArray-75fa4188.js';
 import { _ as _typeof$1 } from './typeof-adeedc13.js';
 import * as React$4 from 'react';
 import React__default, { useState as useState$1, useMemo as useMemo$1, useCallback, useRef, useEffect } from 'react';
 import ReactDOM, { unstable_batchedUpdates, createPortal, flushSync } from 'react-dom';
 import CSSMotion from 'rc-motion';
-import { _ as _unsupportedIterableToArray } from './unsupportedIterableToArray-cb478f24.js';
 import clsx from 'clsx';
-import { _ as _typeof$2 } from './typeof-c310ee4a.js';
+import { _ as _typeof$2 } from './typeof-b240b062.js';
 import { conductCheck } from 'rc-tree/lib/utils/conductUtil';
 import Right from '@para-ui/icons/Right';
 import Down from '@para-ui/icons/Down';
@@ -18,10 +17,10 @@ import CloseCircleF from '@para-ui/icons/CloseCircleF';
 import { getKey as getKey$1 } from 'rc-tree/lib/utils/treeUtil';
 import { Tooltip } from '../Tooltip/index.js';
 import { Forbid } from '@para-ui/icons';
-import { $ as $prefixCls } from './constant-0d9802f7.js';
+import { $ as $prefixCls } from './constant-5317fc89.js';
 import LoadingOutlined from '@para-ui/icons/LoadingF';
 import AutoTips from '../AutoTips/index.js';
-import { u as useFormatMessage } from './useFormatMessage-703f8b20.js';
+import { u as useFormatMessage } from './useFormatMessage-eb13cf56.js';
 import { UUID } from '@paraview/lib';
 import { s as styleInject } from './style-inject.es-300983ab.js';
 
@@ -126,7 +125,7 @@ var useLayoutEffect$3 = function useLayoutEffect(callback, deps) {
     };
   }, []);
 };
-var useLayoutUpdateEffect$1 = function useLayoutUpdateEffect(callback, deps) {
+var useLayoutUpdateEffect = function useLayoutUpdateEffect(callback, deps) {
   useLayoutEffect$3(function (firstMount) {
     if (!firstMount) {
       return callback();
@@ -198,7 +197,7 @@ function useMergedState$2(defaultStateValue, option) {
     _useState4 = _slicedToArray(_useState3, 2),
     prevValue = _useState4[0],
     setPrevValue = _useState4[1];
-  useLayoutUpdateEffect$1(function () {
+  useLayoutUpdateEffect(function () {
     var prev = prevValue[0];
     if (innerValue !== prev) {
       onChangeFn(innerValue, prev);
@@ -206,7 +205,7 @@ function useMergedState$2(defaultStateValue, option) {
   }, [prevValue]);
 
   // Sync value back to `undefined` when it from control to un-control
-  useLayoutUpdateEffect$1(function () {
+  useLayoutUpdateEffect(function () {
     if (!hasValue$2(value)) {
       setInnerValue(value);
     }
@@ -884,7 +883,8 @@ var reactIs = {exports: {}};
 
 var reactIs_production_min = {};
 
-/** @license React v16.13.1
+/**
+ * @license React
  * react-is.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -898,18 +898,18 @@ var hasRequiredReactIs_production_min;
 function requireReactIs_production_min () {
 	if (hasRequiredReactIs_production_min) return reactIs_production_min;
 	hasRequiredReactIs_production_min = 1;
-var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
-	Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
-	function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k;reactIs_production_min.ContextProvider=h;reactIs_production_min.Element=c;reactIs_production_min.ForwardRef=n;reactIs_production_min.Fragment=e;reactIs_production_min.Lazy=t;reactIs_production_min.Memo=r;reactIs_production_min.Portal=d;
-	reactIs_production_min.Profiler=g;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min.isConcurrentMode=A;reactIs_production_min.isContextConsumer=function(a){return z(a)===k};reactIs_production_min.isContextProvider=function(a){return z(a)===h};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min.isForwardRef=function(a){return z(a)===n};reactIs_production_min.isFragment=function(a){return z(a)===e};reactIs_production_min.isLazy=function(a){return z(a)===t};
-	reactIs_production_min.isMemo=function(a){return z(a)===r};reactIs_production_min.isPortal=function(a){return z(a)===d};reactIs_production_min.isProfiler=function(a){return z(a)===g};reactIs_production_min.isStrictMode=function(a){return z(a)===f};reactIs_production_min.isSuspense=function(a){return z(a)===p};
-	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min.typeOf=z;
+var b=Symbol.for("react.element"),c=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),e=Symbol.for("react.strict_mode"),f=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),h=Symbol.for("react.context"),k=Symbol.for("react.server_context"),l=Symbol.for("react.forward_ref"),m=Symbol.for("react.suspense"),n=Symbol.for("react.suspense_list"),p=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),t=Symbol.for("react.offscreen"),u;u=Symbol.for("react.module.reference");
+	function v(a){if("object"===typeof a&&null!==a){var r=a.$$typeof;switch(r){case b:switch(a=a.type,a){case d:case f:case e:case m:case n:return a;default:switch(a=a&&a.$$typeof,a){case k:case h:case l:case q:case p:case g:return a;default:return r}}case c:return r}}}reactIs_production_min.ContextConsumer=h;reactIs_production_min.ContextProvider=g;reactIs_production_min.Element=b;reactIs_production_min.ForwardRef=l;reactIs_production_min.Fragment=d;reactIs_production_min.Lazy=q;reactIs_production_min.Memo=p;reactIs_production_min.Portal=c;reactIs_production_min.Profiler=f;reactIs_production_min.StrictMode=e;reactIs_production_min.Suspense=m;
+	reactIs_production_min.SuspenseList=n;reactIs_production_min.isAsyncMode=function(){return !1};reactIs_production_min.isConcurrentMode=function(){return !1};reactIs_production_min.isContextConsumer=function(a){return v(a)===h};reactIs_production_min.isContextProvider=function(a){return v(a)===g};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};reactIs_production_min.isForwardRef=function(a){return v(a)===l};reactIs_production_min.isFragment=function(a){return v(a)===d};reactIs_production_min.isLazy=function(a){return v(a)===q};reactIs_production_min.isMemo=function(a){return v(a)===p};
+	reactIs_production_min.isPortal=function(a){return v(a)===c};reactIs_production_min.isProfiler=function(a){return v(a)===f};reactIs_production_min.isStrictMode=function(a){return v(a)===e};reactIs_production_min.isSuspense=function(a){return v(a)===m};reactIs_production_min.isSuspenseList=function(a){return v(a)===n};
+	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===e||a===m||a===n||a===t||"object"===typeof a&&null!==a&&(a.$$typeof===q||a.$$typeof===p||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l||a.$$typeof===u||void 0!==a.getModuleId)?!0:!1};reactIs_production_min.typeOf=v;
 	return reactIs_production_min;
 }
 
 var reactIs_development = {};
 
-/** @license React v16.13.1
+/**
+ * @license React
  * react-is.development.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -924,38 +924,67 @@ function requireReactIs_development () {
 	if (hasRequiredReactIs_development) return reactIs_development;
 	hasRequiredReactIs_development = 1;
 
-
-
 	if (process.env.NODE_ENV !== "production") {
 	  (function() {
 
-	// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-	// nor polyfill, then a plain number is used for performance.
-	var hasSymbol = typeof Symbol === 'function' && Symbol.for;
-	var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
-	var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
-	var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
-	var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
-	var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
-	var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
-	var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
-	// (unstable) APIs that have been removed. Can we remove the symbols?
-
-	var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
-	var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
-	var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
-	var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
-	var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
-	var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
-	var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
-	var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
-	var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
-	var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
-	var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+	// ATTENTION
+	// When adding new symbols to this file,
+	// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+	// The Symbol used to tag the ReactElement-like types.
+	var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+	var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+	var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+	var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+	var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+	var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+	var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+	var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
+	var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+	var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+	var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+	var REACT_MEMO_TYPE = Symbol.for('react.memo');
+	var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+	var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+
+	// -----------------------------------------------------------------------------
+
+	var enableScopeAPI = false; // Experimental Create Event Handle API.
+	var enableCacheElement = false;
+	var enableTransitionTracing = false; // No known bugs, but needs performance testing
+
+	var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+	// stuff. Intended to enable React core members to more easily debug scheduling
+	// issues in DEV builds.
+
+	var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
+
+	var REACT_MODULE_REFERENCE;
+
+	{
+	  REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+	}
 
 	function isValidElementType(type) {
-	  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-	  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+	  if (typeof type === 'string' || typeof type === 'function') {
+	    return true;
+	  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+
+
+	  if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing  || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden  || type === REACT_OFFSCREEN_TYPE || enableScopeAPI  || enableCacheElement  || enableTransitionTracing ) {
+	    return true;
+	  }
+
+	  if (typeof type === 'object' && type !== null) {
+	    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
+	    // types supported by any Flight configuration anywhere since
+	    // we don't know which Flight build this will end up being used
+	    // with.
+	    type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
+	      return true;
+	    }
+	  }
+
+	  return false;
 	}
 
 	function typeOf(object) {
@@ -967,18 +996,18 @@ function requireReactIs_development () {
 	        var type = object.type;
 
 	        switch (type) {
-	          case REACT_ASYNC_MODE_TYPE:
-	          case REACT_CONCURRENT_MODE_TYPE:
 	          case REACT_FRAGMENT_TYPE:
 	          case REACT_PROFILER_TYPE:
 	          case REACT_STRICT_MODE_TYPE:
 	          case REACT_SUSPENSE_TYPE:
+	          case REACT_SUSPENSE_LIST_TYPE:
 	            return type;
 
 	          default:
 	            var $$typeofType = type && type.$$typeof;
 
 	            switch ($$typeofType) {
+	              case REACT_SERVER_CONTEXT_TYPE:
 	              case REACT_CONTEXT_TYPE:
 	              case REACT_FORWARD_REF_TYPE:
 	              case REACT_LAZY_TYPE:
@@ -998,10 +1027,7 @@ function requireReactIs_development () {
 	  }
 
 	  return undefined;
-	} // AsyncMode is deprecated along with isAsyncMode
-
-	var AsyncMode = REACT_ASYNC_MODE_TYPE;
-	var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+	}
 	var ContextConsumer = REACT_CONTEXT_TYPE;
 	var ContextProvider = REACT_PROVIDER_TYPE;
 	var Element = REACT_ELEMENT_TYPE;
@@ -1013,21 +1039,31 @@ function requireReactIs_development () {
 	var Profiler = REACT_PROFILER_TYPE;
 	var StrictMode = REACT_STRICT_MODE_TYPE;
 	var Suspense = REACT_SUSPENSE_TYPE;
-	var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+	var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+	var hasWarnedAboutDeprecatedIsAsyncMode = false;
+	var hasWarnedAboutDeprecatedIsConcurrentMode = false; // AsyncMode should be deprecated
 
 	function isAsyncMode(object) {
 	  {
 	    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
 	      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
 
-	      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+	      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
 	    }
 	  }
 
-	  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+	  return false;
 	}
 	function isConcurrentMode(object) {
-	  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+	  {
+	    if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
+	      hasWarnedAboutDeprecatedIsConcurrentMode = true; // Using console['warn'] to evade Babel and ESLint
+
+	      console['warn']('The ReactIs.isConcurrentMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
+	    }
+	  }
+
+	  return false;
 	}
 	function isContextConsumer(object) {
 	  return typeOf(object) === REACT_CONTEXT_TYPE;
@@ -1062,9 +1098,10 @@ function requireReactIs_development () {
 	function isSuspense(object) {
 	  return typeOf(object) === REACT_SUSPENSE_TYPE;
 	}
+	function isSuspenseList(object) {
+	  return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+	}
 
-	reactIs_development.AsyncMode = AsyncMode;
-	reactIs_development.ConcurrentMode = ConcurrentMode;
 	reactIs_development.ContextConsumer = ContextConsumer;
 	reactIs_development.ContextProvider = ContextProvider;
 	reactIs_development.Element = Element;
@@ -1076,6 +1113,7 @@ function requireReactIs_development () {
 	reactIs_development.Profiler = Profiler;
 	reactIs_development.StrictMode = StrictMode;
 	reactIs_development.Suspense = Suspense;
+	reactIs_development.SuspenseList = SuspenseList;
 	reactIs_development.isAsyncMode = isAsyncMode;
 	reactIs_development.isConcurrentMode = isConcurrentMode;
 	reactIs_development.isContextConsumer = isContextConsumer;
@@ -1089,6 +1127,7 @@ function requireReactIs_development () {
 	reactIs_development.isProfiler = isProfiler;
 	reactIs_development.isStrictMode = isStrictMode;
 	reactIs_development.isSuspense = isSuspense;
+	reactIs_development.isSuspenseList = isSuspenseList;
 	reactIs_development.isValidElementType = isValidElementType;
 	reactIs_development.typeOf = typeOf;
 	  })();
@@ -1417,6 +1456,39 @@ function findDOMNode(node) {
   return null;
 }
 
+var CollectionContext = /*#__PURE__*/React$4.createContext(null);
+/**
+ * Collect all the resize event from children ResizeObserver
+ */
+function Collection(_ref) {
+  var children = _ref.children,
+    onBatchResize = _ref.onBatchResize;
+  var resizeIdRef = React$4.useRef(0);
+  var resizeInfosRef = React$4.useRef([]);
+  var onCollectionResize = React$4.useContext(CollectionContext);
+  var onResize = React$4.useCallback(function (size, element, data) {
+    resizeIdRef.current += 1;
+    var currentId = resizeIdRef.current;
+    resizeInfosRef.current.push({
+      size: size,
+      element: element,
+      data: data
+    });
+    Promise.resolve().then(function () {
+      if (currentId === resizeIdRef.current) {
+        onBatchResize === null || onBatchResize === void 0 || onBatchResize(resizeInfosRef.current);
+        resizeInfosRef.current = [];
+      }
+    });
+
+    // Continue bubbling if parent exist
+    onCollectionResize === null || onCollectionResize === void 0 || onCollectionResize(size, element, data);
+  }, [onBatchResize, onCollectionResize]);
+  return /*#__PURE__*/React$4.createElement(CollectionContext.Provider, {
+    value: onResize
+  }, children);
+}
+
 /**
  * A collection of shims that provide minimal functionality of the ES6 collections.
  *
@@ -2350,16 +2422,19 @@ function onResize(entities) {
   entities.forEach(function (entity) {
     var _elementListeners$get;
     var target = entity.target;
-    (_elementListeners$get = elementListeners.get(target)) === null || _elementListeners$get === void 0 ? void 0 : _elementListeners$get.forEach(function (listener) {
+    (_elementListeners$get = elementListeners.get(target)) === null || _elementListeners$get === void 0 || _elementListeners$get.forEach(function (listener) {
       return listener(target);
     });
   });
 }
+
 // Note: ResizeObserver polyfill not support option to measure border-box resize
 var resizeObserver = new index(onResize);
+
 // Dev env only
 process.env.NODE_ENV !== 'production' ? elementListeners : null; // eslint-disable-line
 process.env.NODE_ENV !== 'production' ? onResize : null; // eslint-disable-line
+
 // ============================== Observe ==============================
 function observe(element, callback) {
   if (!elementListeners.has(element)) {
@@ -2496,47 +2571,17 @@ var DomWrapper = /*#__PURE__*/function (_React$Component) {
   return DomWrapper;
 }(React$4.Component);
 
-var CollectionContext = /*#__PURE__*/React$4.createContext(null);
-/**
- * Collect all the resize event from children ResizeObserver
- */
-function Collection(_ref) {
-  var children = _ref.children,
-    onBatchResize = _ref.onBatchResize;
-  var resizeIdRef = React$4.useRef(0);
-  var resizeInfosRef = React$4.useRef([]);
-  var onCollectionResize = React$4.useContext(CollectionContext);
-  var onResize = React$4.useCallback(function (size, element, data) {
-    resizeIdRef.current += 1;
-    var currentId = resizeIdRef.current;
-    resizeInfosRef.current.push({
-      size: size,
-      element: element,
-      data: data
-    });
-    Promise.resolve().then(function () {
-      if (currentId === resizeIdRef.current) {
-        onBatchResize === null || onBatchResize === void 0 ? void 0 : onBatchResize(resizeInfosRef.current);
-        resizeInfosRef.current = [];
-      }
-    });
-    // Continue bubbling if parent exist
-    onCollectionResize === null || onCollectionResize === void 0 ? void 0 : onCollectionResize(size, element, data);
-  }, [onBatchResize, onCollectionResize]);
-  return /*#__PURE__*/React$4.createElement(CollectionContext.Provider, {
-    value: onResize
-  }, children);
-}
-
 function SingleObserver(props, ref) {
   var children = props.children,
     disabled = props.disabled;
   var elementRef = React$4.useRef(null);
   var wrapperRef = React$4.useRef(null);
   var onCollectionResize = React$4.useContext(CollectionContext);
+
   // =========================== Children ===========================
   var isRenderProps = typeof children === 'function';
   var mergedChildren = isRenderProps ? children(elementRef) : children;
+
   // ============================= Size =============================
   var sizeRef = React$4.useRef({
     width: -1,
@@ -2544,21 +2589,25 @@ function SingleObserver(props, ref) {
     offsetWidth: -1,
     offsetHeight: -1
   });
+
   // ============================= Ref ==============================
   var canRef = !isRenderProps && /*#__PURE__*/React$4.isValidElement(mergedChildren) && supportRef(mergedChildren);
   var originRef = canRef ? mergedChildren.ref : null;
-  var mergedRef = React$4.useMemo(function () {
-    return composeRef(originRef, elementRef);
-  }, [originRef, elementRef]);
+  var mergedRef = useComposeRef(originRef, elementRef);
   var getDom = function getDom() {
-    return findDOMNode(elementRef.current) || findDOMNode(wrapperRef.current);
+    var _elementRef$current;
+    return findDOMNode(elementRef.current) || (
+    // Support `nativeElement` format
+    elementRef.current && _typeof$1(elementRef.current) === 'object' ? findDOMNode((_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.nativeElement) : null) || findDOMNode(wrapperRef.current);
   };
   React$4.useImperativeHandle(ref, function () {
     return getDom();
   });
+
   // =========================== Observe ============================
   var propsRef = React$4.useRef(props);
   propsRef.current = props;
+
   // Handler
   var onInternalResize = React$4.useCallback(function (target) {
     var _propsRef$current = propsRef.current,
@@ -2569,6 +2618,7 @@ function SingleObserver(props, ref) {
       height = _target$getBoundingCl.height;
     var offsetWidth = target.offsetWidth,
       offsetHeight = target.offsetHeight;
+
     /**
      * Resize observer trigger when content size changed.
      * In most case we just care about element size,
@@ -2584,6 +2634,7 @@ function SingleObserver(props, ref) {
         offsetHeight: offsetHeight
       };
       sizeRef.current = size;
+
       // IE is strange, right?
       var mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
       var mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
@@ -2591,8 +2642,9 @@ function SingleObserver(props, ref) {
         offsetWidth: mergedOffsetWidth,
         offsetHeight: mergedOffsetHeight
       });
+
       // Let collection know what happened
-      onCollectionResize === null || onCollectionResize === void 0 ? void 0 : onCollectionResize(sizeInfo, target, data);
+      onCollectionResize === null || onCollectionResize === void 0 || onCollectionResize(sizeInfo, target, data);
       if (onResize) {
         // defer the callback but not defer to next frame
         Promise.resolve().then(function () {
@@ -2601,6 +2653,7 @@ function SingleObserver(props, ref) {
       }
     }
   }, []);
+
   // Dynamic observe
   React$4.useEffect(function () {
     var currentElement = getDom();
@@ -2611,6 +2664,7 @@ function SingleObserver(props, ref) {
       return unobserve(currentElement, onInternalResize);
     };
   }, [elementRef.current, disabled]);
+
   // ============================ Render ============================
   return /*#__PURE__*/React$4.createElement(DomWrapper, {
     ref: wrapperRef
@@ -2760,9 +2814,14 @@ var wrapperRaf = function wrapperRaf(callback) {
 };
 wrapperRaf.cancel = function (id) {
   var realId = rafIds.get(id);
-  cleanup(realId);
+  cleanup(id);
   return caf(realId);
 };
+if (process.env.NODE_ENV !== 'production') {
+  wrapperRaf.ids = function () {
+    return rafIds;
+  };
+}
 
 function channelUpdate(callback) {
   if (typeof MessageChannel === 'undefined') {
@@ -4109,7 +4168,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 function getRoot(ele) {
   var _ele$getRootNode;
-  return ele === null || ele === void 0 ? void 0 : (_ele$getRootNode = ele.getRootNode) === null || _ele$getRootNode === void 0 ? void 0 : _ele$getRootNode.call(ele);
+  return ele === null || ele === void 0 || (_ele$getRootNode = ele.getRootNode) === null || _ele$getRootNode === void 0 ? void 0 : _ele$getRootNode.call(ele);
 }
 
 /**
@@ -4132,20 +4191,34 @@ function getUseId() {
   return fullClone.useId;
 }
 var uuid$2 = 0;
-function useId$3(id) {
+var useOriginId = getUseId();
+var useId$3 = useOriginId ?
+// Use React `useId`
+function useId(id) {
+  var reactId = useOriginId();
+
+  // Developer passed id is single source of truth
+  if (id) {
+    return id;
+  }
+
+  // Test env always return mock id
+  if (process.env.NODE_ENV === 'test') {
+    return 'test-id';
+  }
+  return reactId;
+} :
+// Use compatible of `useId`
+function useCompatId(id) {
   // Inner id for accessibility usage. Only work in client side
   var _React$useState = React$4.useState('ssr-id'),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     innerId = _React$useState2[0],
     setInnerId = _React$useState2[1];
-  var useOriginId = getUseId();
-  var reactNativeId = useOriginId === null || useOriginId === void 0 ? void 0 : useOriginId();
   React$4.useEffect(function () {
-    if (!useOriginId) {
-      var nextId = uuid$2;
-      uuid$2 += 1;
-      setInnerId("rc_unique_".concat(nextId));
-    }
+    var nextId = uuid$2;
+    uuid$2 += 1;
+    setInnerId("rc_unique_".concat(nextId));
   }, []);
 
   // Developer passed id is single source of truth
@@ -4159,104 +4232,385 @@ function useId$3(id) {
   }
 
   // Return react native id or inner id
-  return reactNativeId || innerId;
-}
-
-var TriggerContext = /*#__PURE__*/React$4.createContext(null);
+  return innerId;
+};
 
-function toArray(val) {
-  return val ? Array.isArray(val) ? val : [val] : [];
-}
-function useAction(mobile, action, showAction, hideAction) {
-  return React$4.useMemo(function () {
-    var mergedShowAction = toArray(showAction !== null && showAction !== void 0 ? showAction : action);
-    var mergedHideAction = toArray(hideAction !== null && hideAction !== void 0 ? hideAction : action);
-    var showActionSet = new Set(mergedShowAction);
-    var hideActionSet = new Set(mergedHideAction);
-    if (mobile) {
-      if (showActionSet.has('hover')) {
-        showActionSet.delete('hover');
-        showActionSet.add('click');
-      }
-      if (hideActionSet.has('hover')) {
-        hideActionSet.delete('hover');
-        hideActionSet.add('click');
-      }
-    }
-    return [showActionSet, hideActionSet];
-  }, [mobile, action, showAction, hideAction]);
-}
+function Arrow(props) {
+  var prefixCls = props.prefixCls,
+    align = props.align,
+    arrow = props.arrow,
+    arrowPos = props.arrowPos;
+  var _ref = arrow || {},
+    className = _ref.className,
+    content = _ref.content;
+  var _arrowPos$x = arrowPos.x,
+    x = _arrowPos$x === void 0 ? 0 : _arrowPos$x,
+    _arrowPos$y = arrowPos.y,
+    y = _arrowPos$y === void 0 ? 0 : _arrowPos$y;
+  var arrowRef = React$4.useRef();
 
-var isVisible = (function (element) {
-  if (!element) {
-    return false;
+  // Skip if no align
+  if (!align || !align.points) {
+    return null;
   }
-  if (element instanceof Element) {
-    if (element.offsetParent) {
-      return true;
-    }
-    if (element.getBBox) {
-      var _getBBox = element.getBBox(),
-        width = _getBBox.width,
-        height = _getBBox.height;
-      if (width || height) {
-        return true;
-      }
-    }
-    if (element.getBoundingClientRect) {
-      var _element$getBoundingC = element.getBoundingClientRect(),
-        _width = _element$getBoundingC.width,
-        _height = _element$getBoundingC.height;
-      if (_width || _height) {
-        return true;
-      }
+  var alignStyle = {
+    position: 'absolute'
+  };
+
+  // Skip if no need to align
+  if (align.autoArrow !== false) {
+    var popupPoints = align.points[0];
+    var targetPoints = align.points[1];
+    var popupTB = popupPoints[0];
+    var popupLR = popupPoints[1];
+    var targetTB = targetPoints[0];
+    var targetLR = targetPoints[1];
+
+    // Top & Bottom
+    if (popupTB === targetTB || !['t', 'b'].includes(popupTB)) {
+      alignStyle.top = y;
+    } else if (popupTB === 't') {
+      alignStyle.top = 0;
+    } else {
+      alignStyle.bottom = 0;
     }
-  }
-  return false;
-});
 
-function isPointsEq() {
-  var a1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var a2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  var isAlignPoint = arguments.length > 2 ? arguments[2] : undefined;
-  if (isAlignPoint) {
-    return a1[0] === a2[0];
-  }
-  return a1[0] === a2[0] && a1[1] === a2[1];
-}
-function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
-  var points = align.points;
-  var placements = Object.keys(builtinPlacements);
-  for (var i = 0; i < placements.length; i += 1) {
-    var _builtinPlacements$pl;
-    var placement = placements[i];
-    if (isPointsEq((_builtinPlacements$pl = builtinPlacements[placement]) === null || _builtinPlacements$pl === void 0 ? void 0 : _builtinPlacements$pl.points, points, isAlignPoint)) {
-      return "".concat(prefixCls, "-placement-").concat(placement);
+    // Left & Right
+    if (popupLR === targetLR || !['l', 'r'].includes(popupLR)) {
+      alignStyle.left = x;
+    } else if (popupLR === 'l') {
+      alignStyle.left = 0;
+    } else {
+      alignStyle.right = 0;
     }
   }
-  return '';
+  return /*#__PURE__*/React$4.createElement("div", {
+    ref: arrowRef,
+    className: classNames("".concat(prefixCls, "-arrow"), className),
+    style: alignStyle
+  }, content);
 }
 
-/** @deprecated We should not use this if we can refactor all deps */
-function getMotion(prefixCls, motion, animation, transitionName) {
-  if (motion) {
-    return motion;
-  }
-  if (animation) {
-    return {
-      motionName: "".concat(prefixCls, "-").concat(animation)
-    };
-  }
-  if (transitionName) {
-    return {
-      motionName: transitionName
-    };
+function Mask(props) {
+  var prefixCls = props.prefixCls,
+    open = props.open,
+    zIndex = props.zIndex,
+    mask = props.mask,
+    motion = props.motion;
+  if (!mask) {
+    return null;
   }
-  return null;
-}
-function getWin(ele) {
-  return ele.ownerDocument.defaultView;
-}
+  return /*#__PURE__*/React$4.createElement(CSSMotion, _extends({}, motion, {
+    motionAppear: true,
+    visible: open,
+    removeOnLeave: true
+  }), function (_ref) {
+    var className = _ref.className;
+    return /*#__PURE__*/React$4.createElement("div", {
+      style: {
+        zIndex: zIndex
+      },
+      className: classNames("".concat(prefixCls, "-mask"), className)
+    });
+  });
+}
+
+var PopupContent = /*#__PURE__*/React$4.memo(function (_ref) {
+  var children = _ref.children;
+  return children;
+}, function (_, next) {
+  return next.cache;
+});
+if (process.env.NODE_ENV !== 'production') {
+  PopupContent.displayName = 'PopupContent';
+}
+
+var Popup = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
+  var popup = props.popup,
+    className = props.className,
+    prefixCls = props.prefixCls,
+    style = props.style,
+    target = props.target,
+    _onVisibleChanged = props.onVisibleChanged,
+    open = props.open,
+    keepDom = props.keepDom,
+    fresh = props.fresh,
+    onClick = props.onClick,
+    mask = props.mask,
+    arrow = props.arrow,
+    arrowPos = props.arrowPos,
+    align = props.align,
+    motion = props.motion,
+    maskMotion = props.maskMotion,
+    forceRender = props.forceRender,
+    getPopupContainer = props.getPopupContainer,
+    autoDestroy = props.autoDestroy,
+    Portal = props.portal,
+    zIndex = props.zIndex,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onPointerEnter = props.onPointerEnter,
+    ready = props.ready,
+    offsetX = props.offsetX,
+    offsetY = props.offsetY,
+    offsetR = props.offsetR,
+    offsetB = props.offsetB,
+    onAlign = props.onAlign,
+    onPrepare = props.onPrepare,
+    stretch = props.stretch,
+    targetWidth = props.targetWidth,
+    targetHeight = props.targetHeight;
+  var childNode = typeof popup === 'function' ? popup() : popup;
+
+  // We can not remove holder only when motion finished.
+  var isNodeVisible = open || keepDom;
+
+  // ======================= Container ========================
+  var getPopupContainerNeedParams = (getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer.length) > 0;
+  var _React$useState = React$4.useState(!getPopupContainer || !getPopupContainerNeedParams),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    show = _React$useState2[0],
+    setShow = _React$useState2[1];
+
+  // Delay to show since `getPopupContainer` need target element
+  useLayoutEffect$3(function () {
+    if (!show && getPopupContainerNeedParams && target) {
+      setShow(true);
+    }
+  }, [show, getPopupContainerNeedParams, target]);
+
+  // ========================= Render =========================
+  if (!show) {
+    return null;
+  }
+
+  // >>>>> Offset
+  var AUTO = 'auto';
+  var offsetStyle = {
+    left: '-1000vw',
+    top: '-1000vh',
+    right: AUTO,
+    bottom: AUTO
+  };
+
+  // Set align style
+  if (ready || !open) {
+    var _experimental;
+    var points = align.points;
+    var dynamicInset = align.dynamicInset || ((_experimental = align._experimental) === null || _experimental === void 0 ? void 0 : _experimental.dynamicInset);
+    var alignRight = dynamicInset && points[0][1] === 'r';
+    var alignBottom = dynamicInset && points[0][0] === 'b';
+    if (alignRight) {
+      offsetStyle.right = offsetR;
+      offsetStyle.left = AUTO;
+    } else {
+      offsetStyle.left = offsetX;
+      offsetStyle.right = AUTO;
+    }
+    if (alignBottom) {
+      offsetStyle.bottom = offsetB;
+      offsetStyle.top = AUTO;
+    } else {
+      offsetStyle.top = offsetY;
+      offsetStyle.bottom = AUTO;
+    }
+  }
+
+  // >>>>> Misc
+  var miscStyle = {};
+  if (stretch) {
+    if (stretch.includes('height') && targetHeight) {
+      miscStyle.height = targetHeight;
+    } else if (stretch.includes('minHeight') && targetHeight) {
+      miscStyle.minHeight = targetHeight;
+    }
+    if (stretch.includes('width') && targetWidth) {
+      miscStyle.width = targetWidth;
+    } else if (stretch.includes('minWidth') && targetWidth) {
+      miscStyle.minWidth = targetWidth;
+    }
+  }
+  if (!open) {
+    miscStyle.pointerEvents = 'none';
+  }
+  return /*#__PURE__*/React$4.createElement(Portal, {
+    open: forceRender || isNodeVisible,
+    getContainer: getPopupContainer && function () {
+      return getPopupContainer(target);
+    },
+    autoDestroy: autoDestroy
+  }, /*#__PURE__*/React$4.createElement(Mask, {
+    prefixCls: prefixCls,
+    open: open,
+    zIndex: zIndex,
+    mask: mask,
+    motion: maskMotion
+  }), /*#__PURE__*/React$4.createElement(RefResizeObserver, {
+    onResize: onAlign,
+    disabled: !open
+  }, function (resizeObserverRef) {
+    return /*#__PURE__*/React$4.createElement(CSSMotion, _extends({
+      motionAppear: true,
+      motionEnter: true,
+      motionLeave: true,
+      removeOnLeave: false,
+      forceRender: forceRender,
+      leavedClassName: "".concat(prefixCls, "-hidden")
+    }, motion, {
+      onAppearPrepare: onPrepare,
+      onEnterPrepare: onPrepare,
+      visible: open,
+      onVisibleChanged: function onVisibleChanged(nextVisible) {
+        var _motion$onVisibleChan;
+        motion === null || motion === void 0 || (_motion$onVisibleChan = motion.onVisibleChanged) === null || _motion$onVisibleChan === void 0 || _motion$onVisibleChan.call(motion, nextVisible);
+        _onVisibleChanged(nextVisible);
+      }
+    }), function (_ref, motionRef) {
+      var motionClassName = _ref.className,
+        motionStyle = _ref.style;
+      var cls = classNames(prefixCls, motionClassName, className);
+      return /*#__PURE__*/React$4.createElement("div", {
+        ref: composeRef(resizeObserverRef, ref, motionRef),
+        className: cls,
+        style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+          '--arrow-x': "".concat(arrowPos.x || 0, "px"),
+          '--arrow-y': "".concat(arrowPos.y || 0, "px")
+        }, offsetStyle), miscStyle), motionStyle), {}, {
+          boxSizing: 'border-box',
+          zIndex: zIndex
+        }, style),
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onPointerEnter: onPointerEnter,
+        onClick: onClick
+      }, arrow && /*#__PURE__*/React$4.createElement(Arrow, {
+        prefixCls: prefixCls,
+        arrow: arrow,
+        arrowPos: arrowPos,
+        align: align
+      }), /*#__PURE__*/React$4.createElement(PopupContent, {
+        cache: !open && !fresh
+      }, childNode));
+    });
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Popup.displayName = 'Popup';
+}
+
+var TriggerWrapper = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
+  var children = props.children,
+    getTriggerDOMNode = props.getTriggerDOMNode;
+  var canUseRef = supportRef(children);
+
+  // When use `getTriggerDOMNode`, we should do additional work to get the real dom
+  var setRef = React$4.useCallback(function (node) {
+    fillRef(ref, getTriggerDOMNode ? getTriggerDOMNode(node) : node);
+  }, [getTriggerDOMNode]);
+  var mergedRef = useComposeRef(setRef, children.ref);
+  return canUseRef ? /*#__PURE__*/React$4.cloneElement(children, {
+    ref: mergedRef
+  }) : children;
+});
+if (process.env.NODE_ENV !== 'production') {
+  TriggerWrapper.displayName = 'TriggerWrapper';
+}
+
+var TriggerContext = /*#__PURE__*/React$4.createContext(null);
+
+function toArray(val) {
+  return val ? Array.isArray(val) ? val : [val] : [];
+}
+function useAction(mobile, action, showAction, hideAction) {
+  return React$4.useMemo(function () {
+    var mergedShowAction = toArray(showAction !== null && showAction !== void 0 ? showAction : action);
+    var mergedHideAction = toArray(hideAction !== null && hideAction !== void 0 ? hideAction : action);
+    var showActionSet = new Set(mergedShowAction);
+    var hideActionSet = new Set(mergedHideAction);
+    if (mobile) {
+      if (showActionSet.has('hover')) {
+        showActionSet.delete('hover');
+        showActionSet.add('click');
+      }
+      if (hideActionSet.has('hover')) {
+        hideActionSet.delete('hover');
+        hideActionSet.add('click');
+      }
+    }
+    return [showActionSet, hideActionSet];
+  }, [mobile, action, showAction, hideAction]);
+}
+
+var isVisible = (function (element) {
+  if (!element) {
+    return false;
+  }
+  if (element instanceof Element) {
+    if (element.offsetParent) {
+      return true;
+    }
+    if (element.getBBox) {
+      var _getBBox = element.getBBox(),
+        width = _getBBox.width,
+        height = _getBBox.height;
+      if (width || height) {
+        return true;
+      }
+    }
+    if (element.getBoundingClientRect) {
+      var _element$getBoundingC = element.getBoundingClientRect(),
+        _width = _element$getBoundingC.width,
+        _height = _element$getBoundingC.height;
+      if (_width || _height) {
+        return true;
+      }
+    }
+  }
+  return false;
+});
+
+function isPointsEq() {
+  var a1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var a2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var isAlignPoint = arguments.length > 2 ? arguments[2] : undefined;
+  if (isAlignPoint) {
+    return a1[0] === a2[0];
+  }
+  return a1[0] === a2[0] && a1[1] === a2[1];
+}
+function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
+  var points = align.points;
+  var placements = Object.keys(builtinPlacements);
+  for (var i = 0; i < placements.length; i += 1) {
+    var _builtinPlacements$pl;
+    var placement = placements[i];
+    if (isPointsEq((_builtinPlacements$pl = builtinPlacements[placement]) === null || _builtinPlacements$pl === void 0 ? void 0 : _builtinPlacements$pl.points, points, isAlignPoint)) {
+      return "".concat(prefixCls, "-placement-").concat(placement);
+    }
+  }
+  return '';
+}
+
+/** @deprecated We should not use this if we can refactor all deps */
+function getMotion(prefixCls, motion, animation, transitionName) {
+  if (motion) {
+    return motion;
+  }
+  if (animation) {
+    return {
+      motionName: "".concat(prefixCls, "-").concat(animation)
+    };
+  }
+  if (transitionName) {
+    return {
+      motionName: transitionName
+    };
+  }
+  return null;
+}
+function getWin(ele) {
+  return ele.ownerDocument.defaultView;
+}
 
 /**
  * Get all the scrollable parent elements of the element
@@ -4481,13 +4835,14 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var originTop = popupElement.style.top;
       var originRight = popupElement.style.right;
       var originBottom = popupElement.style.bottom;
+      var originOverflow = popupElement.style.overflow;
 
       // Placement
       var placementInfo = _objectSpread2(_objectSpread2({}, builtinPlacements[placement]), popupAlign);
 
       // placeholder element
       var placeholderElement = doc.createElement('div');
-      (_popupElement$parentE = popupElement.parentElement) === null || _popupElement$parentE === void 0 ? void 0 : _popupElement$parentE.appendChild(placeholderElement);
+      (_popupElement$parentE = popupElement.parentElement) === null || _popupElement$parentE === void 0 || _popupElement$parentE.appendChild(placeholderElement);
       placeholderElement.style.left = "".concat(popupElement.offsetLeft, "px");
       placeholderElement.style.top = "".concat(popupElement.offsetTop, "px");
       placeholderElement.style.position = popupPosition;
@@ -4499,6 +4854,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       popupElement.style.top = '0';
       popupElement.style.right = 'auto';
       popupElement.style.bottom = 'auto';
+      popupElement.style.overflow = 'hidden';
 
       // Calculate align style, we should consider `transform` case
       var targetRect;
@@ -4571,7 +4927,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       popupElement.style.top = originTop;
       popupElement.style.right = originRight;
       popupElement.style.bottom = originBottom;
-      (_popupElement$parentE2 = popupElement.parentElement) === null || _popupElement$parentE2 === void 0 ? void 0 : _popupElement$parentE2.removeChild(placeholderElement);
+      popupElement.style.overflow = originOverflow;
+      (_popupElement$parentE2 = popupElement.parentElement) === null || _popupElement$parentE2 === void 0 || _popupElement$parentE2.removeChild(placeholderElement);
 
       // Calculate scale
       var _scaleX = toNum(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);
@@ -4790,491 +5147,206 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       }
       var numShiftY = shiftY === true ? 0 : shiftY;
       if (typeof numShiftY === 'number') {
-        // Top
-        if (nextPopupY < visibleRegionArea.top) {
-          nextOffsetY -= nextPopupY - visibleRegionArea.top - popupOffsetY;
-
-          // When target if far away from visible area
-          // Stop shift
-          if (targetRect.y + targetHeight < visibleRegionArea.top + numShiftY) {
-            nextOffsetY += targetRect.y - visibleRegionArea.top + targetHeight - numShiftY;
-          }
-        }
-
-        // Bottom
-        if (nextPopupBottom > visibleRegionArea.bottom) {
-          nextOffsetY -= nextPopupBottom - visibleRegionArea.bottom - popupOffsetY;
-          if (targetRect.y > visibleRegionArea.bottom - numShiftY) {
-            nextOffsetY += targetRect.y - visibleRegionArea.bottom + numShiftY;
-          }
-        }
-      }
-
-      // ============================ Arrow ============================
-      // Arrow center align
-      var popupLeft = popupRect.x + nextOffsetX;
-      var popupRight = popupLeft + popupWidth;
-      var popupTop = popupRect.y + nextOffsetY;
-      var popupBottom = popupTop + popupHeight;
-      var targetLeft = targetRect.x;
-      var targetRight = targetLeft + targetWidth;
-      var targetTop = targetRect.y;
-      var targetBottom = targetTop + targetHeight;
-      var maxLeft = Math.max(popupLeft, targetLeft);
-      var minRight = Math.min(popupRight, targetRight);
-      var xCenter = (maxLeft + minRight) / 2;
-      var nextArrowX = xCenter - popupLeft;
-      var maxTop = Math.max(popupTop, targetTop);
-      var minBottom = Math.min(popupBottom, targetBottom);
-      var yCenter = (maxTop + minBottom) / 2;
-      var nextArrowY = yCenter - popupTop;
-      onPopupAlign === null || onPopupAlign === void 0 ? void 0 : onPopupAlign(popupEle, nextAlignInfo);
-
-      // Additional calculate right & bottom position
-      var offsetX4Right = popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);
-      var offsetY4Bottom = popupMirrorRect.bottom - popupRect.y - (nextOffsetY + popupRect.height);
-      setOffsetInfo({
-        ready: true,
-        offsetX: nextOffsetX / _scaleX,
-        offsetY: nextOffsetY / _scaleY,
-        offsetR: offsetX4Right / _scaleX,
-        offsetB: offsetY4Bottom / _scaleY,
-        arrowX: nextArrowX / _scaleX,
-        arrowY: nextArrowY / _scaleY,
-        scaleX: _scaleX,
-        scaleY: _scaleY,
-        align: nextAlignInfo
-      });
-    }
-  });
-  var triggerAlign = function triggerAlign() {
-    alignCountRef.current += 1;
-    var id = alignCountRef.current;
-
-    // Merge all align requirement into one frame
-    Promise.resolve().then(function () {
-      if (alignCountRef.current === id) {
-        onAlign();
-      }
-    });
-  };
-
-  // Reset ready status when placement & open changed
-  var resetReady = function resetReady() {
-    setOffsetInfo(function (ori) {
-      return _objectSpread2(_objectSpread2({}, ori), {}, {
-        ready: false
-      });
-    });
-  };
-  useLayoutEffect$3(resetReady, [placement]);
-  useLayoutEffect$3(function () {
-    if (!open) {
-      resetReady();
-    }
-  }, [open]);
-  return [offsetInfo.ready, offsetInfo.offsetX, offsetInfo.offsetY, offsetInfo.offsetR, offsetInfo.offsetB, offsetInfo.arrowX, offsetInfo.arrowY, offsetInfo.scaleX, offsetInfo.scaleY, offsetInfo.align, triggerAlign];
-}
-
-function useWatch(open, target, popup, onAlign, onScroll) {
-  useLayoutEffect$3(function () {
-    if (open && target && popup) {
-      var targetElement = target;
-      var popupElement = popup;
-      var targetScrollList = collectScroller(targetElement);
-      var popupScrollList = collectScroller(popupElement);
-      var win = getWin(popupElement);
-      var mergedList = new Set([win].concat(_toConsumableArray(targetScrollList), _toConsumableArray(popupScrollList)));
-      function notifyScroll() {
-        onAlign();
-        onScroll();
-      }
-      mergedList.forEach(function (scroller) {
-        scroller.addEventListener('scroll', notifyScroll, {
-          passive: true
-        });
-      });
-      win.addEventListener('resize', notifyScroll, {
-        passive: true
-      });
-
-      // First time always do align
-      onAlign();
-      return function () {
-        mergedList.forEach(function (scroller) {
-          scroller.removeEventListener('scroll', notifyScroll);
-          win.removeEventListener('resize', notifyScroll);
-        });
-      };
-    }
-  }, [open, target, popup]);
-}
-
-function _toArray(arr) {
-  return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
-}
-
-function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen) {
-  var openRef = React$4.useRef(open);
-
-  // Window click to hide should be lock to avoid trigger lock immediately
-  var lockRef = React$4.useRef(false);
-  if (openRef.current !== open) {
-    lockRef.current = true;
-    openRef.current = open;
-  }
-  React$4.useEffect(function () {
-    var id = wrapperRaf(function () {
-      lockRef.current = false;
-    });
-    return function () {
-      wrapperRaf.cancel(id);
-    };
-  }, [open]);
-
-  // Click to hide is special action since click popup element should not hide
-  React$4.useEffect(function () {
-    if (clickToHide && popupEle && (!mask || maskClosable)) {
-      var genClickEvents = function genClickEvents() {
-        var clickInside = false;
-
-        // User may mouseDown inside and drag out of popup and mouse up
-        // Record here to prevent close
-        var onWindowMouseDown = function onWindowMouseDown(_ref) {
-          var target = _ref.target;
-          clickInside = inPopupOrChild(target);
-        };
-        var onWindowClick = function onWindowClick(_ref2) {
-          var target = _ref2.target;
-          if (!lockRef.current && openRef.current && !clickInside && !inPopupOrChild(target)) {
-            triggerOpen(false);
-          }
-        };
-        return [onWindowMouseDown, onWindowClick];
-      };
-
-      // Events
-      var _genClickEvents = genClickEvents(),
-        _genClickEvents2 = _slicedToArray(_genClickEvents, 2),
-        onWinMouseDown = _genClickEvents2[0],
-        onWinClick = _genClickEvents2[1];
-      var _genClickEvents3 = genClickEvents(),
-        _genClickEvents4 = _slicedToArray(_genClickEvents3, 2),
-        onShadowMouseDown = _genClickEvents4[0],
-        onShadowClick = _genClickEvents4[1];
-      var win = getWin(popupEle);
-      win.addEventListener('mousedown', onWinMouseDown, true);
-      win.addEventListener('click', onWinClick, true);
-      win.addEventListener('contextmenu', onWinClick, true);
-
-      // shadow root
-      var targetShadowRoot = getShadowRoot(targetEle);
-      if (targetShadowRoot) {
-        targetShadowRoot.addEventListener('mousedown', onShadowMouseDown, true);
-        targetShadowRoot.addEventListener('click', onShadowClick, true);
-        targetShadowRoot.addEventListener('contextmenu', onShadowClick, true);
-      }
-
-      // Warning if target and popup not in same root
-      if (process.env.NODE_ENV !== 'production') {
-        var _targetEle$getRootNod, _popupEle$getRootNode;
-        var targetRoot = targetEle === null || targetEle === void 0 ? void 0 : (_targetEle$getRootNod = targetEle.getRootNode) === null || _targetEle$getRootNod === void 0 ? void 0 : _targetEle$getRootNod.call(targetEle);
-        var popupRoot = (_popupEle$getRootNode = popupEle.getRootNode) === null || _popupEle$getRootNode === void 0 ? void 0 : _popupEle$getRootNode.call(popupEle);
-        warningOnce(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
-      }
-      return function () {
-        win.removeEventListener('mousedown', onWinMouseDown, true);
-        win.removeEventListener('click', onWinClick, true);
-        win.removeEventListener('contextmenu', onWinClick, true);
-        if (targetShadowRoot) {
-          targetShadowRoot.removeEventListener('mousedown', onShadowMouseDown, true);
-          targetShadowRoot.removeEventListener('click', onShadowClick, true);
-          targetShadowRoot.removeEventListener('contextmenu', onShadowClick, true);
-        }
-      };
-    }
-  }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
-}
-
-function Arrow(props) {
-  var prefixCls = props.prefixCls,
-    align = props.align,
-    arrow = props.arrow,
-    arrowPos = props.arrowPos;
-  var _ref = arrow || {},
-    className = _ref.className,
-    content = _ref.content;
-  var _arrowPos$x = arrowPos.x,
-    x = _arrowPos$x === void 0 ? 0 : _arrowPos$x,
-    _arrowPos$y = arrowPos.y,
-    y = _arrowPos$y === void 0 ? 0 : _arrowPos$y;
-  var arrowRef = React$4.useRef();
+        // Top
+        if (nextPopupY < visibleRegionArea.top) {
+          nextOffsetY -= nextPopupY - visibleRegionArea.top - popupOffsetY;
 
-  // Skip if no align
-  if (!align || !align.points) {
-    return null;
-  }
-  var alignStyle = {
-    position: 'absolute'
-  };
+          // When target if far away from visible area
+          // Stop shift
+          if (targetRect.y + targetHeight < visibleRegionArea.top + numShiftY) {
+            nextOffsetY += targetRect.y - visibleRegionArea.top + targetHeight - numShiftY;
+          }
+        }
 
-  // Skip if no need to align
-  if (align.autoArrow !== false) {
-    var popupPoints = align.points[0];
-    var targetPoints = align.points[1];
-    var popupTB = popupPoints[0];
-    var popupLR = popupPoints[1];
-    var targetTB = targetPoints[0];
-    var targetLR = targetPoints[1];
+        // Bottom
+        if (nextPopupBottom > visibleRegionArea.bottom) {
+          nextOffsetY -= nextPopupBottom - visibleRegionArea.bottom - popupOffsetY;
+          if (targetRect.y > visibleRegionArea.bottom - numShiftY) {
+            nextOffsetY += targetRect.y - visibleRegionArea.bottom + numShiftY;
+          }
+        }
+      }
 
-    // Top & Bottom
-    if (popupTB === targetTB || !['t', 'b'].includes(popupTB)) {
-      alignStyle.top = y;
-    } else if (popupTB === 't') {
-      alignStyle.top = 0;
-    } else {
-      alignStyle.bottom = 0;
-    }
+      // ============================ Arrow ============================
+      // Arrow center align
+      var popupLeft = popupRect.x + nextOffsetX;
+      var popupRight = popupLeft + popupWidth;
+      var popupTop = popupRect.y + nextOffsetY;
+      var popupBottom = popupTop + popupHeight;
+      var targetLeft = targetRect.x;
+      var targetRight = targetLeft + targetWidth;
+      var targetTop = targetRect.y;
+      var targetBottom = targetTop + targetHeight;
+      var maxLeft = Math.max(popupLeft, targetLeft);
+      var minRight = Math.min(popupRight, targetRight);
+      var xCenter = (maxLeft + minRight) / 2;
+      var nextArrowX = xCenter - popupLeft;
+      var maxTop = Math.max(popupTop, targetTop);
+      var minBottom = Math.min(popupBottom, targetBottom);
+      var yCenter = (maxTop + minBottom) / 2;
+      var nextArrowY = yCenter - popupTop;
+      onPopupAlign === null || onPopupAlign === void 0 || onPopupAlign(popupEle, nextAlignInfo);
 
-    // Left & Right
-    if (popupLR === targetLR || !['l', 'r'].includes(popupLR)) {
-      alignStyle.left = x;
-    } else if (popupLR === 'l') {
-      alignStyle.left = 0;
-    } else {
-      alignStyle.right = 0;
+      // Additional calculate right & bottom position
+      var offsetX4Right = popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);
+      var offsetY4Bottom = popupMirrorRect.bottom - popupRect.y - (nextOffsetY + popupRect.height);
+      setOffsetInfo({
+        ready: true,
+        offsetX: nextOffsetX / _scaleX,
+        offsetY: nextOffsetY / _scaleY,
+        offsetR: offsetX4Right / _scaleX,
+        offsetB: offsetY4Bottom / _scaleY,
+        arrowX: nextArrowX / _scaleX,
+        arrowY: nextArrowY / _scaleY,
+        scaleX: _scaleX,
+        scaleY: _scaleY,
+        align: nextAlignInfo
+      });
     }
-  }
-  return /*#__PURE__*/React$4.createElement("div", {
-    ref: arrowRef,
-    className: classNames("".concat(prefixCls, "-arrow"), className),
-    style: alignStyle
-  }, content);
-}
-
-function Mask(props) {
-  var prefixCls = props.prefixCls,
-    open = props.open,
-    zIndex = props.zIndex,
-    mask = props.mask,
-    motion = props.motion;
-  if (!mask) {
-    return null;
-  }
-  return /*#__PURE__*/React$4.createElement(CSSMotion, _extends({}, motion, {
-    motionAppear: true,
-    visible: open,
-    removeOnLeave: true
-  }), function (_ref) {
-    var className = _ref.className;
-    return /*#__PURE__*/React$4.createElement("div", {
-      style: {
-        zIndex: zIndex
-      },
-      className: classNames("".concat(prefixCls, "-mask"), className)
-    });
   });
-}
-
-var PopupContent = /*#__PURE__*/React$4.memo(function (_ref) {
-  var children = _ref.children;
-  return children;
-}, function (_, next) {
-  return next.cache;
-});
-if (process.env.NODE_ENV !== 'production') {
-  PopupContent.displayName = 'PopupContent';
-}
-
-var Popup = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
-  var popup = props.popup,
-    className = props.className,
-    prefixCls = props.prefixCls,
-    style = props.style,
-    target = props.target,
-    _onVisibleChanged = props.onVisibleChanged,
-    open = props.open,
-    keepDom = props.keepDom,
-    fresh = props.fresh,
-    onClick = props.onClick,
-    mask = props.mask,
-    arrow = props.arrow,
-    arrowPos = props.arrowPos,
-    align = props.align,
-    motion = props.motion,
-    maskMotion = props.maskMotion,
-    forceRender = props.forceRender,
-    getPopupContainer = props.getPopupContainer,
-    autoDestroy = props.autoDestroy,
-    Portal = props.portal,
-    zIndex = props.zIndex,
-    onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave,
-    onPointerEnter = props.onPointerEnter,
-    ready = props.ready,
-    offsetX = props.offsetX,
-    offsetY = props.offsetY,
-    offsetR = props.offsetR,
-    offsetB = props.offsetB,
-    onAlign = props.onAlign,
-    onPrepare = props.onPrepare,
-    stretch = props.stretch,
-    targetWidth = props.targetWidth,
-    targetHeight = props.targetHeight;
-  var childNode = typeof popup === 'function' ? popup() : popup;
-
-  // We can not remove holder only when motion finished.
-  var isNodeVisible = open || keepDom;
+  var triggerAlign = function triggerAlign() {
+    alignCountRef.current += 1;
+    var id = alignCountRef.current;
 
-  // ======================= Container ========================
-  var getPopupContainerNeedParams = (getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer.length) > 0;
-  var _React$useState = React$4.useState(!getPopupContainer || !getPopupContainerNeedParams),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    show = _React$useState2[0],
-    setShow = _React$useState2[1];
+    // Merge all align requirement into one frame
+    Promise.resolve().then(function () {
+      if (alignCountRef.current === id) {
+        onAlign();
+      }
+    });
+  };
 
-  // Delay to show since `getPopupContainer` need target element
+  // Reset ready status when placement & open changed
+  var resetReady = function resetReady() {
+    setOffsetInfo(function (ori) {
+      return _objectSpread2(_objectSpread2({}, ori), {}, {
+        ready: false
+      });
+    });
+  };
+  useLayoutEffect$3(resetReady, [placement]);
   useLayoutEffect$3(function () {
-    if (!show && getPopupContainerNeedParams && target) {
-      setShow(true);
+    if (!open) {
+      resetReady();
     }
-  }, [show, getPopupContainerNeedParams, target]);
-
-  // ========================= Render =========================
-  if (!show) {
-    return null;
-  }
+  }, [open]);
+  return [offsetInfo.ready, offsetInfo.offsetX, offsetInfo.offsetY, offsetInfo.offsetR, offsetInfo.offsetB, offsetInfo.arrowX, offsetInfo.arrowY, offsetInfo.scaleX, offsetInfo.scaleY, offsetInfo.align, triggerAlign];
+}
 
-  // >>>>> Offset
-  var AUTO = 'auto';
-  var offsetStyle = {
-    left: '-1000vw',
-    top: '-1000vh',
-    right: AUTO,
-    bottom: AUTO
-  };
+function useWatch(open, target, popup, onAlign, onScroll) {
+  useLayoutEffect$3(function () {
+    if (open && target && popup) {
+      var targetElement = target;
+      var popupElement = popup;
+      var targetScrollList = collectScroller(targetElement);
+      var popupScrollList = collectScroller(popupElement);
+      var win = getWin(popupElement);
+      var mergedList = new Set([win].concat(_toConsumableArray(targetScrollList), _toConsumableArray(popupScrollList)));
+      function notifyScroll() {
+        onAlign();
+        onScroll();
+      }
+      mergedList.forEach(function (scroller) {
+        scroller.addEventListener('scroll', notifyScroll, {
+          passive: true
+        });
+      });
+      win.addEventListener('resize', notifyScroll, {
+        passive: true
+      });
 
-  // Set align style
-  if (ready || !open) {
-    var _experimental;
-    var points = align.points;
-    var dynamicInset = align.dynamicInset || ((_experimental = align._experimental) === null || _experimental === void 0 ? void 0 : _experimental.dynamicInset);
-    var alignRight = dynamicInset && points[0][1] === 'r';
-    var alignBottom = dynamicInset && points[0][0] === 'b';
-    if (alignRight) {
-      offsetStyle.right = offsetR;
-      offsetStyle.left = AUTO;
-    } else {
-      offsetStyle.left = offsetX;
-      offsetStyle.right = AUTO;
-    }
-    if (alignBottom) {
-      offsetStyle.bottom = offsetB;
-      offsetStyle.top = AUTO;
-    } else {
-      offsetStyle.top = offsetY;
-      offsetStyle.bottom = AUTO;
+      // First time always do align
+      onAlign();
+      return function () {
+        mergedList.forEach(function (scroller) {
+          scroller.removeEventListener('scroll', notifyScroll);
+          win.removeEventListener('resize', notifyScroll);
+        });
+      };
     }
-  }
+  }, [open, target, popup]);
+}
 
-  // >>>>> Misc
-  var miscStyle = {};
-  if (stretch) {
-    if (stretch.includes('height') && targetHeight) {
-      miscStyle.height = targetHeight;
-    } else if (stretch.includes('minHeight') && targetHeight) {
-      miscStyle.minHeight = targetHeight;
-    }
-    if (stretch.includes('width') && targetWidth) {
-      miscStyle.width = targetWidth;
-    } else if (stretch.includes('minWidth') && targetWidth) {
-      miscStyle.minWidth = targetWidth;
-    }
-  }
-  if (!open) {
-    miscStyle.pointerEvents = 'none';
+function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen) {
+  var openRef = React$4.useRef(open);
+
+  // Window click to hide should be lock to avoid trigger lock immediately
+  var lockRef = React$4.useRef(false);
+  if (openRef.current !== open) {
+    lockRef.current = true;
+    openRef.current = open;
   }
-  return /*#__PURE__*/React$4.createElement(Portal, {
-    open: forceRender || isNodeVisible,
-    getContainer: getPopupContainer && function () {
-      return getPopupContainer(target);
-    },
-    autoDestroy: autoDestroy
-  }, /*#__PURE__*/React$4.createElement(Mask, {
-    prefixCls: prefixCls,
-    open: open,
-    zIndex: zIndex,
-    mask: mask,
-    motion: maskMotion
-  }), /*#__PURE__*/React$4.createElement(RefResizeObserver, {
-    onResize: onAlign,
-    disabled: !open
-  }, function (resizeObserverRef) {
-    return /*#__PURE__*/React$4.createElement(CSSMotion, _extends({
-      motionAppear: true,
-      motionEnter: true,
-      motionLeave: true,
-      removeOnLeave: false,
-      forceRender: forceRender,
-      leavedClassName: "".concat(prefixCls, "-hidden")
-    }, motion, {
-      onAppearPrepare: onPrepare,
-      onEnterPrepare: onPrepare,
-      visible: open,
-      onVisibleChanged: function onVisibleChanged(nextVisible) {
-        var _motion$onVisibleChan;
-        motion === null || motion === void 0 ? void 0 : (_motion$onVisibleChan = motion.onVisibleChanged) === null || _motion$onVisibleChan === void 0 ? void 0 : _motion$onVisibleChan.call(motion, nextVisible);
-        _onVisibleChanged(nextVisible);
-      }
-    }), function (_ref, motionRef) {
-      var motionClassName = _ref.className,
-        motionStyle = _ref.style;
-      var cls = classNames(prefixCls, motionClassName, className);
-      return /*#__PURE__*/React$4.createElement("div", {
-        ref: composeRef(resizeObserverRef, ref, motionRef),
-        className: cls,
-        style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
-          '--arrow-x': "".concat(arrowPos.x || 0, "px"),
-          '--arrow-y': "".concat(arrowPos.y || 0, "px")
-        }, offsetStyle), miscStyle), motionStyle), {}, {
-          boxSizing: 'border-box',
-          zIndex: zIndex
-        }, style),
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave,
-        onPointerEnter: onPointerEnter,
-        onClick: onClick
-      }, arrow && /*#__PURE__*/React$4.createElement(Arrow, {
-        prefixCls: prefixCls,
-        arrow: arrow,
-        arrowPos: arrowPos,
-        align: align
-      }), /*#__PURE__*/React$4.createElement(PopupContent, {
-        cache: !open && !fresh
-      }, childNode));
+  React$4.useEffect(function () {
+    var id = wrapperRaf(function () {
+      lockRef.current = false;
     });
-  }));
-});
-if (process.env.NODE_ENV !== 'production') {
-  Popup.displayName = 'Popup';
-}
+    return function () {
+      wrapperRaf.cancel(id);
+    };
+  }, [open]);
 
-var TriggerWrapper = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
-  var children = props.children,
-    getTriggerDOMNode = props.getTriggerDOMNode;
-  var canUseRef = supportRef(children);
+  // Click to hide is special action since click popup element should not hide
+  React$4.useEffect(function () {
+    if (clickToHide && popupEle && (!mask || maskClosable)) {
+      var genClickEvents = function genClickEvents() {
+        var clickInside = false;
 
-  // When use `getTriggerDOMNode`, we should do additional work to get the real dom
-  var setRef = React$4.useCallback(function (node) {
-    fillRef(ref, getTriggerDOMNode ? getTriggerDOMNode(node) : node);
-  }, [getTriggerDOMNode]);
-  var mergedRef = useComposeRef(setRef, children.ref);
-  return canUseRef ? /*#__PURE__*/React$4.cloneElement(children, {
-    ref: mergedRef
-  }) : children;
-});
-if (process.env.NODE_ENV !== 'production') {
-  TriggerWrapper.displayName = 'TriggerWrapper';
+        // User may mouseDown inside and drag out of popup and mouse up
+        // Record here to prevent close
+        var onWindowMouseDown = function onWindowMouseDown(_ref) {
+          var target = _ref.target;
+          clickInside = inPopupOrChild(target);
+        };
+        var onWindowClick = function onWindowClick(_ref2) {
+          var target = _ref2.target;
+          if (!lockRef.current && openRef.current && !clickInside && !inPopupOrChild(target)) {
+            triggerOpen(false);
+          }
+        };
+        return [onWindowMouseDown, onWindowClick];
+      };
+
+      // Events
+      var _genClickEvents = genClickEvents(),
+        _genClickEvents2 = _slicedToArray(_genClickEvents, 2),
+        onWinMouseDown = _genClickEvents2[0],
+        onWinClick = _genClickEvents2[1];
+      var _genClickEvents3 = genClickEvents(),
+        _genClickEvents4 = _slicedToArray(_genClickEvents3, 2),
+        onShadowMouseDown = _genClickEvents4[0],
+        onShadowClick = _genClickEvents4[1];
+      var win = getWin(popupEle);
+      win.addEventListener('mousedown', onWinMouseDown, true);
+      win.addEventListener('click', onWinClick, true);
+      win.addEventListener('contextmenu', onWinClick, true);
+
+      // shadow root
+      var targetShadowRoot = getShadowRoot(targetEle);
+      if (targetShadowRoot) {
+        targetShadowRoot.addEventListener('mousedown', onShadowMouseDown, true);
+        targetShadowRoot.addEventListener('click', onShadowClick, true);
+        targetShadowRoot.addEventListener('contextmenu', onShadowClick, true);
+      }
+
+      // Warning if target and popup not in same root
+      if (process.env.NODE_ENV !== 'production') {
+        var _targetEle$getRootNod, _popupEle$getRootNode;
+        var targetRoot = targetEle === null || targetEle === void 0 || (_targetEle$getRootNod = targetEle.getRootNode) === null || _targetEle$getRootNod === void 0 ? void 0 : _targetEle$getRootNod.call(targetEle);
+        var popupRoot = (_popupEle$getRootNode = popupEle.getRootNode) === null || _popupEle$getRootNode === void 0 ? void 0 : _popupEle$getRootNode.call(popupEle);
+        warning(targetRoot === popupRoot, "trigger element and popup element should in same shadow root.");
+      }
+      return function () {
+        win.removeEventListener('mousedown', onWinMouseDown, true);
+        win.removeEventListener('click', onWinClick, true);
+        win.removeEventListener('contextmenu', onWinClick, true);
+        if (targetShadowRoot) {
+          targetShadowRoot.removeEventListener('mousedown', onShadowMouseDown, true);
+          targetShadowRoot.removeEventListener('click', onShadowClick, true);
+          targetShadowRoot.removeEventListener('contextmenu', onShadowClick, true);
+        }
+      };
+    }
+  }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
 }
 
 var _excluded$6 = ["prefixCls", "children", "action", "showAction", "hideAction", "popupVisible", "defaultPopupVisible", "onPopupVisibleChange", "afterPopupVisibleChange", "mouseEnterDelay", "mouseLeaveDelay", "focusDelay", "blurDelay", "mask", "maskClosable", "getPopupContainer", "forceRender", "autoDestroy", "destroyPopupOnHide", "popup", "popupClassName", "popupStyle", "popupPlacement", "builtinPlacements", "popupAlign", "zIndex", "stretch", "getPopupClassNameFromAlign", "fresh", "alignPoint", "onPopupClick", "onPopupAlign", "arrow", "popupMotion", "maskMotion", "popupTransitionName", "popupAnimation", "maskTransitionName", "maskAnimation", "className", "getTriggerDOMNode"];
@@ -5351,7 +5423,7 @@ function generateTrigger() {
       return {
         registerSubPopup: function registerSubPopup(id, subPopupEle) {
           subPopupElements.current[id] = subPopupEle;
-          parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, subPopupEle);
+          parentContext === null || parentContext === void 0 || parentContext.registerSubPopup(id, subPopupEle);
         }
       };
     }, [parentContext]);
@@ -5366,7 +5438,7 @@ function generateTrigger() {
       if (isDOM(node) && popupEle !== node) {
         setPopupEle(node);
       }
-      parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, node);
+      parentContext === null || parentContext === void 0 || parentContext.registerSubPopup(id, node);
     });
 
     // =========================== Target ===========================
@@ -5375,9 +5447,13 @@ function generateTrigger() {
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       targetEle = _React$useState6[0],
       setTargetEle = _React$useState6[1];
+
+    // Used for forwardRef target. Not use internal
+    var externalForwardRef = React$4.useRef(null);
     var setTargetRef = useEvent$2(function (node) {
       if (isDOM(node) && targetEle !== node) {
         setTargetEle(node);
+        externalForwardRef.current = node;
       }
     });
 
@@ -5417,15 +5493,19 @@ function generateTrigger() {
     }, [popupVisible]);
     var openRef = React$4.useRef(mergedOpen);
     openRef.current = mergedOpen;
+    var lastTriggerRef = React$4.useRef([]);
+    lastTriggerRef.current = [];
     var internalTriggerOpen = useEvent$2(function (nextOpen) {
+      var _lastTriggerRef$curre;
+      setMergedOpen(nextOpen);
+
       // Enter or Pointer will both trigger open state change
       // We only need take one to avoid duplicated change event trigger
-      flushSync(function () {
-        if (mergedOpen !== nextOpen) {
-          setMergedOpen(nextOpen);
-          onPopupVisibleChange === null || onPopupVisibleChange === void 0 ? void 0 : onPopupVisibleChange(nextOpen);
-        }
-      });
+      // Use `lastTriggerRef` to record last open type
+      if (((_lastTriggerRef$curre = lastTriggerRef.current[lastTriggerRef.current.length - 1]) !== null && _lastTriggerRef$curre !== void 0 ? _lastTriggerRef$curre : mergedOpen) !== nextOpen) {
+        lastTriggerRef.current.push(nextOpen);
+        onPopupVisibleChange === null || onPopupVisibleChange === void 0 || onPopupVisibleChange(nextOpen);
+      }
     });
 
     // Trigger for delay
@@ -5515,8 +5595,11 @@ function generateTrigger() {
       var baseClassName = getAlignPopupClassName(builtinPlacements, prefixCls, alignInfo, alignPoint);
       return classNames(baseClassName, getPopupClassNameFromAlign === null || getPopupClassNameFromAlign === void 0 ? void 0 : getPopupClassNameFromAlign(alignInfo));
     }, [alignInfo, getPopupClassNameFromAlign, builtinPlacements, prefixCls, alignPoint]);
+
+    // ============================ Refs ============================
     React$4.useImperativeHandle(ref, function () {
       return {
+        nativeElement: externalForwardRef.current,
         forceAlign: triggerAlign
       };
     });
@@ -5546,7 +5629,7 @@ function generateTrigger() {
     var onVisibleChanged = function onVisibleChanged(visible) {
       setInMotion(false);
       onAlign();
-      afterPopupVisibleChange === null || afterPopupVisibleChange === void 0 ? void 0 : afterPopupVisibleChange(visible);
+      afterPopupVisibleChange === null || afterPopupVisibleChange === void 0 || afterPopupVisibleChange(visible);
     };
 
     // We will trigger align when motion is in prepare
@@ -5573,14 +5656,14 @@ function generateTrigger() {
     function wrapperAction(eventName, nextOpen, delay, preEvent) {
       cloneProps[eventName] = function (event) {
         var _originChildProps$eve;
-        preEvent === null || preEvent === void 0 ? void 0 : preEvent(event);
+        preEvent === null || preEvent === void 0 || preEvent(event);
         triggerOpen(nextOpen, delay);
 
         // Pass to origin
         for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
           args[_key - 1] = arguments[_key];
         }
-        (_originChildProps$eve = originChildProps[eventName]) === null || _originChildProps$eve === void 0 ? void 0 : _originChildProps$eve.call.apply(_originChildProps$eve, [originChildProps, event].concat(args));
+        (_originChildProps$eve = originChildProps[eventName]) === null || _originChildProps$eve === void 0 || _originChildProps$eve.call.apply(_originChildProps$eve, [originChildProps, event].concat(args));
       };
     }
 
@@ -5599,7 +5682,7 @@ function generateTrigger() {
         for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
           args[_key2 - 1] = arguments[_key2];
         }
-        (_originChildProps$onC = originChildProps.onClick) === null || _originChildProps$onC === void 0 ? void 0 : _originChildProps$onC.call.apply(_originChildProps$onC, [originChildProps, event].concat(args));
+        (_originChildProps$onC = originChildProps.onClick) === null || _originChildProps$onC === void 0 || _originChildProps$onC.call.apply(_originChildProps$onC, [originChildProps, event].concat(args));
       };
     }
 
@@ -5631,7 +5714,7 @@ function generateTrigger() {
         cloneProps.onMouseMove = function (event) {
           var _originChildProps$onM;
           // setMousePosByEvent(event);
-          (_originChildProps$onM = originChildProps.onMouseMove) === null || _originChildProps$onM === void 0 ? void 0 : _originChildProps$onM.call(originChildProps, event);
+          (_originChildProps$onM = originChildProps.onMouseMove) === null || _originChildProps$onM === void 0 || _originChildProps$onM.call(originChildProps, event);
         };
       }
     }
@@ -5667,7 +5750,7 @@ function generateTrigger() {
         for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
           args[_key3 - 1] = arguments[_key3];
         }
-        (_originChildProps$onC2 = originChildProps.onContextMenu) === null || _originChildProps$onC2 === void 0 ? void 0 : _originChildProps$onC2.call.apply(_originChildProps$onC2, [originChildProps, event].concat(args));
+        (_originChildProps$onC2 = originChildProps.onContextMenu) === null || _originChildProps$onC2 === void 0 || _originChildProps$onC2.call.apply(_originChildProps$onC2, [originChildProps, event].concat(args));
       };
     }
 
@@ -5689,7 +5772,7 @@ function generateTrigger() {
           for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
             args[_key4] = arguments[_key4];
           }
-          (_mergedChildrenProps$ = mergedChildrenProps[eventName]) === null || _mergedChildrenProps$ === void 0 ? void 0 : _mergedChildrenProps$.call.apply(_mergedChildrenProps$, [mergedChildrenProps].concat(args));
+          (_mergedChildrenProps$ = mergedChildrenProps[eventName]) === null || _mergedChildrenProps$ === void 0 || _mergedChildrenProps$.call.apply(_mergedChildrenProps$, [mergedChildrenProps].concat(args));
           restProps[eventName].apply(restProps, args);
         };
       }
@@ -5901,6 +5984,10 @@ var SelectTrigger = function SelectTrigger(props, ref) {
 var RefSelectTrigger = /*#__PURE__*/React$4.forwardRef(SelectTrigger);
 RefSelectTrigger.displayName = 'SelectTrigger';
 
+function _toArray(arr) {
+  return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
+}
+
 function getKey(data, index) {
   var key = data.key;
   var value;
@@ -7289,13 +7376,11 @@ function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHei
       }
       // Trigger next effect
       if (needCollectHeight) {
-        setSyncState(function (ori) {
-          return _objectSpread2(_objectSpread2({}, ori), {}, {
-            times: ori.times + 1,
-            targetAlign: newTargetAlign,
-            lastTop: targetTop
-          });
-        });
+        setSyncState(_objectSpread2(_objectSpread2({}, syncState), {}, {
+          times: syncState.times + 1,
+          targetAlign: newTargetAlign,
+          lastTop: targetTop
+        }));
       }
     } else if (process.env.NODE_ENV !== 'production' && (syncState === null || syncState === void 0 ? void 0 : syncState.times) === MAX_TIMES) {
       warningOnce(false, 'Seems `scrollTo` with `rc-virtual-list` reach the max limitation. Please fire issue for us. Thanks.');
@@ -9135,7 +9220,7 @@ var _typeof = _typeof$2.exports;
 Object.defineProperty(useId$1, "__esModule", {
   value: true
 });
-var _default$3 = useId$1.default = useId;
+var _default$2 = useId$1.default = useId;
 useId$1.getUUID = getUUID;
 useId$1.isBrowserClient = void 0;
 var _slicedToArray2$2 = _interopRequireDefault$3(slicedToArray.exports);
@@ -9181,44 +9266,30 @@ var interopRequireWildcard = {exports: {}};
 
 (function (module) {
 	var _typeof = _typeof$2.exports["default"];
-	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 _getRequireWildcardCache(e) {
+	  if ("function" != typeof WeakMap) return null;
+	  var r = new WeakMap(),
+	    t = new WeakMap();
+	  return (_getRequireWildcardCache = function _getRequireWildcardCache(e) {
+	    return e ? t : r;
+	  })(e);
 	}
-	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);
+	function _interopRequireWildcard(e, r) {
+	  if (!r && e && e.__esModule) return e;
+	  if (null === e || "object" != _typeof(e) && "function" != typeof e) return {
+	    "default": e
+	  };
+	  var t = _getRequireWildcardCache(r);
+	  if (t && t.has(e)) return t.get(e);
+	  var n = {
+	      __proto__: null
+	    },
+	    a = Object.defineProperty && Object.getOwnPropertyDescriptor;
+	  for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) {
+	    var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;
+	    i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];
 	  }
-	  return newObj;
+	  return n["default"] = e, t && t.set(e, n), n;
 	}
 	module.exports = _interopRequireWildcard, module.exports.__esModule = true, module.exports["default"] = module.exports;
 } (interopRequireWildcard));
@@ -9227,7 +9298,7 @@ var _interopRequireWildcard$2 = interopRequireWildcard.exports.default;
 Object.defineProperty(useEvent$1, "__esModule", {
   value: true
 });
-var _default$2 = useEvent$1.default = useEvent;
+var _default$1 = useEvent$1.default = useEvent;
 var React$2 = _interopRequireWildcard$2(React__default);
 function useEvent(callback) {
   var fnRef = React$2.useRef();
@@ -9272,16 +9343,14 @@ var useLayoutEffect = function useLayoutEffect(callback, deps) {
     };
   }, []);
 };
-var useLayoutUpdateEffect = function useLayoutUpdateEffect(callback, deps) {
+useLayoutEffect$1.useLayoutUpdateEffect = function useLayoutUpdateEffect(callback, deps) {
   useLayoutEffect(function (firstMount) {
     if (!firstMount) {
       return callback();
     }
   }, deps);
 };
-useLayoutEffect$1.useLayoutUpdateEffect = useLayoutUpdateEffect;
-var _default$1 = useLayoutEffect;
-useLayoutEffect$1.default = _default$1;
+useLayoutEffect$1.default = useLayoutEffect;
 
 var useState = {};
 
@@ -9848,7 +9917,6 @@ function Column(_ref) {
         })]
       })) : jsxs(Fragment, {
         children: [renderMenuTilte(), optionInfoList.map(function (_ref2) {
-          var _classNames;
           var disabled = _ref2.disabled,
             label = _ref2.label,
             value = _ref2.value,
@@ -9896,7 +9964,7 @@ function Column(_ref) {
           };
           // >>>>> Render
           return jsxs("li", Object.assign({
-            className: classNames(menuItemPrefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(menuItemPrefixCls, "-expand"), !isMergedLeaf), _defineProperty(_classNames, "".concat(menuItemPrefixCls, "-active"), activeValue === value || activeValue === fullPathKey), _defineProperty(_classNames, "".concat(menuItemPrefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(menuItemPrefixCls, "-loading"), isLoading), _classNames)),
+            className: classNames(menuItemPrefixCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(menuItemPrefixCls, "-expand"), !isMergedLeaf), "".concat(menuItemPrefixCls, "-active"), activeValue === value || activeValue === fullPathKey), "".concat(menuItemPrefixCls, "-disabled"), disabled), "".concat(menuItemPrefixCls, "-loading"), isLoading)),
             style: dropdownMenuColumnStyle,
             role: "menuitemcheckbox",
             "aria-checked": checked,
@@ -9982,12 +10050,10 @@ var useActive = (function () {
   }, /* eslint-disable react-hooks/exhaustive-deps */
   [open]
   /* eslint-enable react-hooks/exhaustive-deps */);
-
   return [activeValueCells, setActiveValueCells];
 });
 
 var RefOptionList = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
-  var _ref3, _classNames;
   var _a, _b;
   var _useBaseProps = useBaseProps(),
     prefixCls = _useBaseProps.prefixCls,
@@ -10131,7 +10197,7 @@ var RefOptionList = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
   // ========================== Render ==========================
   // >>>>> Empty
   var isEmpty = !((_b = (_a = optionColumns[0]) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length);
-  var emptyList = [(_ref3 = {}, _defineProperty(_ref3, fieldNames.value, '__EMPTY__'), _defineProperty(_ref3, FIX_LABEL, notFoundContent), _defineProperty(_ref3, "disabled", true), _ref3)];
+  var emptyList = [_defineProperty(_defineProperty(_defineProperty({}, fieldNames.value, '__EMPTY__'), FIX_LABEL, notFoundContent), "disabled", true)];
   var columnProps = Object.assign(Object.assign({}, props), {
     multiple: !isEmpty && multiple,
     onSelect: onPathSelect,
@@ -10164,7 +10230,7 @@ var RefOptionList = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
     open: open
   }, {
     children: jsx("div", Object.assign({
-      className: classNames("".concat(mergedPrefixCls, "-menus"), (_classNames = {}, _defineProperty(_classNames, "".concat(mergedPrefixCls, "-menu-empty"), isEmpty), _defineProperty(_classNames, "".concat(mergedPrefixCls, "-rtl"), rtl), _classNames)),
+      className: classNames("".concat(mergedPrefixCls, "-menus"), _defineProperty(_defineProperty({}, "".concat(mergedPrefixCls, "-menu-empty"), isEmpty), "".concat(mergedPrefixCls, "-rtl"), rtl)),
       ref: containerRef
     }, {
       children: columnNodes
@@ -10182,258 +10248,221 @@ function toRawValues(value) {
   if (isMultipleValue(value)) {
     return value;
   }
-  return (value.length === 0 ? [] : [value]).map(function (val) {
-    return Array.isArray(val) ? val : [val];
-  });
+  return (value.length === 0 ? [] : [value]).map(val => Array.isArray(val) ? val : [val]);
 }
-var Cascader = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
-  var intl = useFormatMessage('Cascader', localeJson);
-  var id = props.id,
-    _props$prefixCls = props.prefixCls,
-    prefixCls = _props$prefixCls === void 0 ? "".concat($prefixCls, "-cascader") : _props$prefixCls,
-    fieldNames = props.fieldNames,
-    defaultValue = props.defaultValue,
-    value = props.value,
-    changeOnSelect = props.changeOnSelect,
-    onChange = props.onChange,
-    displayRender = props.displayRender,
-    expandTrigger = props.expandTrigger,
-    options = props.options,
-    _props$optionsTitle = props.optionsTitle,
-    optionsTitle = _props$optionsTitle === void 0 ? [] : _props$optionsTitle,
-    dropdownPrefixCls = props.dropdownPrefixCls,
-    loadData = props.loadData,
-    popupVisible = props.popupVisible,
-    open = props.open,
-    popupClassName = props.popupClassName,
-    dropdownClassName = props.dropdownClassName,
-    dropdownMenuColumnStyle = props.dropdownMenuColumnStyle,
-    popupPlacement = props.popupPlacement,
-    placement = props.placement,
-    onDropdownVisibleChange = props.onDropdownVisibleChange,
-    onPopupVisibleChange = props.onPopupVisibleChange,
-    _props$expandIcon = props.expandIcon,
-    expandIcon = _props$expandIcon === void 0 ? jsx(Right, {}) : _props$expandIcon,
-    loadingIcon = props.loadingIcon,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? intl({
-      id: 'placeholder'
-    }) : _props$placeholder,
-    _props$allClear = props.allClear,
-    allClear = _props$allClear === void 0 ? true : _props$allClear,
-    _props$menuMaxHight = props.menuMaxHight,
-    menuMaxHight = _props$menuMaxHight === void 0 ? 158 : _props$menuMaxHight,
-    _props$expandJoin = props.expandJoin,
-    expandJoin = _props$expandJoin === void 0 ? '/' : _props$expandJoin,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    loading = props.loading,
-    disabledTooltip = props.disabledTooltip,
-    children = props.children,
-    _props$dropdownMatchS = props.dropdownMatchSelectWidth,
-    dropdownMatchSelectWidth = _props$dropdownMatchS === void 0 ? false : _props$dropdownMatchS,
-    _props$showCheckedStr = props.showCheckedStrategy,
-    showCheckedStrategy = _props$showCheckedStr === void 0 ? SHOW_PARENT : _props$showCheckedStr,
+const Cascader = /*#__PURE__*/React$4.forwardRef((props, ref) => {
+  const intl = useFormatMessage('Cascader', localeJson);
+  const {
+      // MISC
+      id,
+      prefixCls = "".concat($prefixCls, "-cascader"),
+      fieldNames,
+      // Value
+      defaultValue,
+      value,
+      changeOnSelect,
+      onChange,
+      displayRender,
+      // Trigger
+      expandTrigger,
+      // Options
+      options,
+      optionsTitle = [],
+      dropdownPrefixCls,
+      loadData,
+      // Open
+      popupVisible,
+      open,
+      popupClassName,
+      dropdownClassName,
+      dropdownMenuColumnStyle,
+      popupPlacement,
+      placement,
+      onDropdownVisibleChange,
+      onPopupVisibleChange,
+      // Icon
+      expandIcon = jsx(Right, {}),
+      loadingIcon,
+      // Placeholder
+      placeholder = intl({
+        id: 'placeholder'
+      }),
+      // Clear
+      allClear = true,
+      //MenuStlye
+      menuMaxHight = 158,
+      //Other
+      expandJoin = '/',
+      disabled = false,
+      loading,
+      disabledTooltip,
+      // Children
+      children,
+      dropdownMatchSelectWidth = false,
+      showCheckedStrategy = SHOW_PARENT
+    } = props,
     restProps = __rest(props, ["id", "prefixCls", "fieldNames", "defaultValue", "value", "changeOnSelect", "onChange", "displayRender", "expandTrigger", "options", "optionsTitle", "dropdownPrefixCls", "loadData", "popupVisible", "open", "popupClassName", "dropdownClassName", "dropdownMenuColumnStyle", "popupPlacement", "placement", "onDropdownVisibleChange", "onPopupVisibleChange", "expandIcon", "loadingIcon", "placeholder", "allClear", "menuMaxHight", "expandJoin", "disabled", "loading", "disabledTooltip", "children", "dropdownMatchSelectWidth", "showCheckedStrategy"]);
-  var mergedId = _default$3(id);
+  const mergedId = _default$2(id);
   // =========================== Values ===========================
-  var _useMergedState = _default(defaultValue, {
-      value: value,
-      postState: toRawValues
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    rawValues = _useMergedState2[0],
-    setRawValues = _useMergedState2[1];
+  const [rawValues, setRawValues] = _default(defaultValue, {
+    value,
+    postState: toRawValues
+  });
   // ========================= FieldNames =========================
-  var mergedFieldNames = React$4.useMemo(function () {
-    return fillFieldNames$1(fieldNames);
-  }, /* eslint-disable react-hooks/exhaustive-deps */
+  const mergedFieldNames = React$4.useMemo(() => fillFieldNames$1(fieldNames), /* eslint-disable react-hooks/exhaustive-deps */
   [JSON.stringify(fieldNames)]
   /* eslint-enable react-hooks/exhaustive-deps */);
   // =========================== Option ===========================
-  var mergedOptions = React$4.useMemo(function () {
-    return options || [];
-  }, [options]);
+  const mergedOptions = React$4.useMemo(() => options || [], [options]);
   // Only used in multiple mode, this fn will not call in single mode
-  var getPathKeyEntities = useEntities(mergedOptions, mergedFieldNames);
+  const getPathKeyEntities = useEntities(mergedOptions, mergedFieldNames);
   /** Convert path key back to value format */
-  var getValueByKeyPath = React$4.useCallback(function (pathKeys) {
-    var keyPathEntities = getPathKeyEntities();
-    return pathKeys.map(function (pathKey) {
-      var nodes = keyPathEntities[pathKey].nodes;
-      return nodes.map(function (node) {
-        return node[mergedFieldNames.value];
-      });
+  const getValueByKeyPath = React$4.useCallback(pathKeys => {
+    const keyPathEntities = getPathKeyEntities();
+    return pathKeys.map(pathKey => {
+      const {
+        nodes
+      } = keyPathEntities[pathKey];
+      return nodes.map(node => node[mergedFieldNames.value]);
     });
   }, [getPathKeyEntities, mergedFieldNames]);
   // =========================== Other ===========================
-  var _React$useState = React$4.useState(),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    inputLabel = _React$useState2[0],
-    setInputLable = _React$useState2[1]; // 输入框选择文案
-  var _React$useState3 = React$4.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    dropdownVisible = _React$useState4[0],
-    setDropdownVisible = _React$useState4[1]; // dropDown显示状态
-  var _React$useState5 = React$4.useState('auto'),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    menuWidth = _React$useState6[0],
-    setMenuWidth = _React$useState6[1]; //下拉框的宽度
-  var inputRef = React$4.useRef({
+  const [inputLabel, setInputLable] = React$4.useState(); // 输入框选择文案
+  const [dropdownVisible, setDropdownVisible] = React$4.useState(false); // dropDown显示状态
+  const [menuWidth, setMenuWidth] = React$4.useState('auto'); //下拉框的宽度
+  const inputRef = React$4.useRef({
     id: UUID(),
     level: 1
   });
-  var handleValueToOptions = function handleValueToOptions(value) {
-    var nextRawValues = toRawValues(value);
-    var valueOptions = nextRawValues.map(function (valueCells) {
-      return toPathOptions(valueCells, mergedOptions, mergedFieldNames).map(function (valueOpt) {
-        return valueOpt.option;
-      });
-    });
+  const handleValueToOptions = value => {
+    const nextRawValues = toRawValues(value);
+    const valueOptions = nextRawValues.map(valueCells => toPathOptions(valueCells, mergedOptions, mergedFieldNames).map(valueOpt => valueOpt.option));
     return valueOptions;
   };
-  React$4.useEffect(function () {
+  React$4.useEffect(() => {
     if (!value) return;
-    var valueOptions = handleValueToOptions(value);
-    var triggerOptions = valueOptions[0];
+    const valueOptions = handleValueToOptions(value);
+    const triggerOptions = valueOptions[0];
     if (!triggerOptions) return;
-    setInputLable(triggerOptions.map(function (o) {
-      return o.label;
-    }).join(expandJoin));
+    setInputLable(triggerOptions.map(o => o.label).join(expandJoin));
   }, [value]);
   // =========================== Values ===========================
-  var getMissingValues = useMissingValues(mergedOptions, mergedFieldNames);
+  const getMissingValues = useMissingValues(mergedOptions, mergedFieldNames);
   // Fill `rawValues` with checked conduction values
-  var _React$useMemo = React$4.useMemo(function () {
-      var _getMissingValues = getMissingValues(rawValues),
-        _getMissingValues2 = _slicedToArray(_getMissingValues, 2),
-        existValues = _getMissingValues2[0],
-        missingValues = _getMissingValues2[1];
-      if (!rawValues.length) {
-        return [existValues, [], missingValues];
-      }
-      var keyPathValues = toPathKeys(existValues);
-      var keyPathEntities = getPathKeyEntities();
-      var _conductCheck = conductCheck(keyPathValues, true, keyPathEntities),
-        checkedKeys = _conductCheck.checkedKeys,
-        halfCheckedKeys = _conductCheck.halfCheckedKeys;
-      // Convert key back to value cells
-      return [getValueByKeyPath(checkedKeys), getValueByKeyPath(halfCheckedKeys), missingValues];
-    }, [rawValues, getPathKeyEntities, getValueByKeyPath, getMissingValues]),
-    _React$useMemo2 = _slicedToArray(_React$useMemo, 3),
-    checkedValues = _React$useMemo2[0],
-    halfCheckedValues = _React$useMemo2[1],
-    missingCheckedValues = _React$useMemo2[2];
-  var deDuplicatedValues = React$4.useMemo(function () {
-    var checkedKeys = toPathKeys(checkedValues);
-    var deduplicateKeys = formatStrategyValues(checkedKeys, getPathKeyEntities, showCheckedStrategy);
-    return [].concat(_toConsumableArray(missingCheckedValues), _toConsumableArray(getValueByKeyPath(deduplicateKeys)));
+  const [checkedValues, halfCheckedValues, missingCheckedValues] = React$4.useMemo(() => {
+    const [existValues, missingValues] = getMissingValues(rawValues);
+    if (!rawValues.length) {
+      return [existValues, [], missingValues];
+    }
+    const keyPathValues = toPathKeys(existValues);
+    const keyPathEntities = getPathKeyEntities();
+    const {
+      checkedKeys,
+      halfCheckedKeys
+    } = conductCheck(keyPathValues, true, keyPathEntities);
+    // Convert key back to value cells
+    return [getValueByKeyPath(checkedKeys), getValueByKeyPath(halfCheckedKeys), missingValues];
+  }, [rawValues, getPathKeyEntities, getValueByKeyPath, getMissingValues]);
+  const deDuplicatedValues = React$4.useMemo(() => {
+    const checkedKeys = toPathKeys(checkedValues);
+    const deduplicateKeys = formatStrategyValues(checkedKeys, getPathKeyEntities, showCheckedStrategy);
+    return [...missingCheckedValues, ...getValueByKeyPath(deduplicateKeys)];
   }, [checkedValues, getPathKeyEntities, getValueByKeyPath, missingCheckedValues, showCheckedStrategy]);
-  var displayValues = useDisplayValues(deDuplicatedValues, mergedOptions, mergedFieldNames, false, displayRender);
+  const displayValues = useDisplayValues(deDuplicatedValues, mergedOptions, mergedFieldNames, false, displayRender);
   // =========================== Change ===========================
-  var triggerChange = _default$2(function (nextValues) {
+  const triggerChange = _default$1(nextValues => {
     setRawValues(nextValues);
-    var nextRawValues = toRawValues(nextValues);
-    var valueOptions = nextRawValues.map(function (valueCells) {
-      return toPathOptions(valueCells, mergedOptions, mergedFieldNames).map(function (valueOpt) {
-        return valueOpt.option;
-      });
-    });
-    var triggerValues = nextRawValues[0];
-    var triggerOptions = valueOptions[0];
+    const nextRawValues = toRawValues(nextValues);
+    const valueOptions = nextRawValues.map(valueCells => toPathOptions(valueCells, mergedOptions, mergedFieldNames).map(valueOpt => valueOpt.option));
+    const triggerValues = nextRawValues[0];
+    const triggerOptions = valueOptions[0];
     onChange && onChange(triggerValues, triggerOptions);
   });
   // =========================== Select ===========================
-  var onInternalSelect = _default$2(function (valuePath) {
+  const onInternalSelect = _default$1(valuePath => {
     triggerChange(valuePath);
   });
   // Display Value change logic
-  var onDisplayValuesChange = function onDisplayValuesChange(_, info) {
+  const onDisplayValuesChange = (_, info) => {
     if (info.type === 'clear') {
       triggerChange([]);
       return;
     }
     // Cascader do not support `add` type. Only support `remove`
-    var valueCells = info.values[0].valueCells;
+    const {
+      valueCells
+    } = info.values[0];
     onInternalSelect(valueCells);
   };
   // ============================ Open ============================
-  var mergedDropdownClassName = dropdownClassName || popupClassName;
-  var mergedPlacement = placement || popupPlacement;
-  var onInternalDropdownVisibleChange = function onInternalDropdownVisibleChange(nextVisible) {
+  const mergedDropdownClassName = dropdownClassName || popupClassName;
+  const mergedPlacement = placement || popupPlacement;
+  const onInternalDropdownVisibleChange = nextVisible => {
     setDropdownVisible(nextVisible);
     onDropdownVisibleChange === null || onDropdownVisibleChange === void 0 ? void 0 : onDropdownVisibleChange(nextVisible);
     onPopupVisibleChange === null || onPopupVisibleChange === void 0 ? void 0 : onPopupVisibleChange(nextVisible);
   };
   // ========================== Context ===========================
-  var cascaderContext = React$4.useMemo(function () {
-    return {
-      options: mergedOptions,
-      optionsTitle: optionsTitle,
-      fieldNames: mergedFieldNames,
-      values: checkedValues,
-      menuMaxHight: menuMaxHight,
-      halfValues: halfCheckedValues,
-      changeOnSelect: changeOnSelect,
-      onSelect: onInternalSelect,
-      menuWidth: menuWidth,
-      dropdownPrefixCls: dropdownPrefixCls,
-      loadData: loadData,
-      expandTrigger: expandTrigger,
-      expandIcon: expandIcon,
-      loadingIcon: loadingIcon,
-      dropdownMenuColumnStyle: dropdownMenuColumnStyle,
-      loading: loading
-    };
-  }, [menuWidth, mergedOptions, inputRef, optionsTitle, mergedFieldNames, checkedValues, halfCheckedValues, changeOnSelect, onInternalSelect, dropdownPrefixCls, loadData, expandTrigger, expandIcon, loadingIcon, dropdownMenuColumnStyle, loading]);
+  const cascaderContext = React$4.useMemo(() => ({
+    options: mergedOptions,
+    optionsTitle,
+    fieldNames: mergedFieldNames,
+    values: checkedValues,
+    menuMaxHight,
+    halfValues: halfCheckedValues,
+    changeOnSelect,
+    onSelect: onInternalSelect,
+    menuWidth,
+    dropdownPrefixCls,
+    loadData,
+    expandTrigger,
+    expandIcon,
+    loadingIcon,
+    dropdownMenuColumnStyle,
+    loading
+  }), [menuWidth, mergedOptions, inputRef, optionsTitle, mergedFieldNames, checkedValues, halfCheckedValues, changeOnSelect, onInternalSelect, dropdownPrefixCls, loadData, expandTrigger, expandIcon, loadingIcon, dropdownMenuColumnStyle, loading]);
   // ==============================================================
   // ==                          Render                          ==
   // ==============================================================
-  var emptyOptions = !mergedOptions.length;
-  var getMaxDepth = function getMaxDepth(options) {
-    var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-    var maxDepth = depth;
-    var stack = _toConsumableArray(options.map(function (option) {
-      return {
-        option: option,
-        depth: 1
-      };
-    }));
-    var _loop = function _loop() {
-      var _stack$pop = stack.pop(),
-        option = _stack$pop.option,
-        depth = _stack$pop.depth;
+  const emptyOptions = !mergedOptions.length;
+  const getMaxDepth = function (options) {
+    let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    let maxDepth = depth;
+    const stack = [...options.map(option => ({
+      option,
+      depth: 1
+    }))];
+    while (stack.length > 0 && maxDepth < 3) {
+      const {
+        option,
+        depth
+      } = stack.pop();
       maxDepth = Math.max(maxDepth, depth);
       if (option.children && option.children.length > 0) {
-        stack.push.apply(stack, _toConsumableArray(option.children.map(function (child) {
-          return {
-            option: child,
-            depth: depth + 1
-          };
+        stack.push(...option.children.map(child => ({
+          option: child,
+          depth: depth + 1
         })));
       }
-    };
-    while (stack.length > 0 && maxDepth < 3) {
-      _loop();
     }
     return maxDepth;
   };
-  React$4.useEffect(function () {
+  React$4.useEffect(() => {
     setDropdownVisible(!!(open !== undefined ? open : popupVisible));
   }, [open, popupVisible]); // dropDownVisible
   // 监听屏幕宽度
-  React$4.useEffect(function () {
+  React$4.useEffect(() => {
     window.addEventListener('resize', handleCalcMenuWidth);
-    return function () {
+    return () => {
       window.removeEventListener('resize', handleCalcMenuWidth);
     };
   }, []);
-  React$4.useEffect(function () {
-    var option = (options === null || options === void 0 ? void 0 : options[0]) || [];
+  React$4.useEffect(() => {
+    const option = (options === null || options === void 0 ? void 0 : options[0]) || [];
     inputRef.current.level = (option === null || option === void 0 ? void 0 : option.length) < 1 || loading ? 1 : getMaxDepth(options);
     handleCalcMenuWidth();
   }, [options, loading]);
-  var handleClear = function handleClear(e) {
+  const handleClear = e => {
     e.stopPropagation();
     setInputLable('');
     onChange && onChange([], []);
@@ -10441,14 +10470,16 @@ var Cascader = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
     cascaderContext.values = [];
   };
   // 设置下拉框的宽度
-  var handleCalcMenuWidth = function handleCalcMenuWidth() {
-    var inputEle = document.getElementById("".concat(inputRef.current.id));
+  const handleCalcMenuWidth = () => {
+    const inputEle = document.getElementById("".concat(inputRef.current.id));
     if (!inputEle) return;
-    var clientWidth = inputEle.clientWidth;
+    const {
+      clientWidth
+    } = inputEle;
     setMenuWidth((clientWidth / inputRef.current.level).toFixed(2));
   };
   // 内标题memo
-  var InsideMemo = React$4.useMemo(function () {
+  const InsideMemo = React$4.useMemo(() => {
     return jsx(Fragment, {
       children: !inputLabel ? disabled && disabledTooltip ? jsx(Tooltip, Object.assign({
         disabled: true
@@ -10477,7 +10508,7 @@ var Cascader = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
       }))
     });
   }, [inputLabel, placeholder]);
-  var clearRender = function clearRender() {
+  const clearRender = () => {
     if (allClear) {
       return jsx("span", Object.assign({
         className: "clean-up-icon",
@@ -10487,10 +10518,14 @@ var Cascader = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
       }));
     }
   };
-  var childrenMemo = React$4.useMemo(function () {
-    var _clsx;
-    var contentClass = clsx("".concat($prefixCls, "-cascader-select-content"), (_clsx = {}, _defineProperty(_clsx, "".concat($prefixCls, "-cascader-select-value"), inputLabel), _defineProperty(_clsx, "".concat($prefixCls, "-cascader-select-disabled"), disabled), _clsx));
-    var svgClass = clsx("select-svg", _defineProperty({}, "select-svg-open", dropdownVisible));
+  const childrenMemo = React$4.useMemo(() => {
+    const contentClass = clsx("".concat($prefixCls, "-cascader-select-content"), {
+      ["".concat($prefixCls, "-cascader-select-value")]: inputLabel,
+      ["".concat($prefixCls, "-cascader-select-disabled")]: disabled
+    });
+    const svgClass = clsx("select-svg", {
+      ["select-svg-open"]: dropdownVisible
+    });
     return children ? children : jsxs("div", Object.assign({
       className: contentClass,
       id: inputRef.current.id
@@ -10502,7 +10537,7 @@ var Cascader = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
       }))]
     }));
   }, [inputLabel, dropdownVisible, inputRef]);
-  var dropdownStyle =
+  const dropdownStyle =
   // Empty keep the width
   emptyOptions ? {} : {
     minWidth: 'auto'
@@ -10521,7 +10556,7 @@ var Cascader = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
       // Search
       showSearch: false,
       searchValue: '',
-      onSearch: function onSearch() {
+      onSearch: () => {
         console.log('not search');
       },
       // Value
@@ -10536,9 +10571,7 @@ var Cascader = /*#__PURE__*/React$4.forwardRef(function (props, ref) {
       placement: mergedPlacement,
       onDropdownVisibleChange: onInternalDropdownVisibleChange,
       // Children
-      getRawInputElement: function getRawInputElement() {
-        return childrenMemo;
-      }
+      getRawInputElement: () => childrenMemo
     }))
   }));
 });