@itcase/storybook-config 1.2.46 → 1.2.47

package/dist/{Notification-B-qQJcvG.js → Notification-DcTliQqo.js}

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import React__default, { useEffect, useContext, useState, useRef, createContext, useReducer, useCallback, isValidElement, cloneElement, memo, useMemo, useImperativeHandle } from 'react';
+import React__default, { version, isValidElement, useState, useMemo as useMemo$1, useEffect, useRef, useLayoutEffect as useLayoutEffect$1, useContext, createContext, useReducer, useCallback, cloneElement, memo, useImperativeHandle } from 'react';
+import { createPortal, flushSync } from 'react-dom';
 import camelCase from 'lodash/camelCase';
 import castArray from 'lodash/castArray';
 import upperFirst from 'lodash/upperFirst';
@@ -1375,6 +1376,3654 @@ var jsxRuntimeExports = requireJsxRuntime();
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
+function canUseDom() {
+  return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+}
+
+var reactIs$1 = {exports: {}};
+
+var reactIs_production_min$1 = {};
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_production_min$1;
+
+function requireReactIs_production_min$1 () {
+	if (hasRequiredReactIs_production_min$1) return reactIs_production_min$1;
+	hasRequiredReactIs_production_min$1 = 1;
+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$1.ContextConsumer=h;reactIs_production_min$1.ContextProvider=g;reactIs_production_min$1.Element=b;reactIs_production_min$1.ForwardRef=l;reactIs_production_min$1.Fragment=d;reactIs_production_min$1.Lazy=q;reactIs_production_min$1.Memo=p;reactIs_production_min$1.Portal=c;reactIs_production_min$1.Profiler=f;reactIs_production_min$1.StrictMode=e;reactIs_production_min$1.Suspense=m;
+	reactIs_production_min$1.SuspenseList=n;reactIs_production_min$1.isAsyncMode=function(){return  false};reactIs_production_min$1.isConcurrentMode=function(){return  false};reactIs_production_min$1.isContextConsumer=function(a){return v(a)===h};reactIs_production_min$1.isContextProvider=function(a){return v(a)===g};reactIs_production_min$1.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};reactIs_production_min$1.isForwardRef=function(a){return v(a)===l};reactIs_production_min$1.isFragment=function(a){return v(a)===d};reactIs_production_min$1.isLazy=function(a){return v(a)===q};reactIs_production_min$1.isMemo=function(a){return v(a)===p};
+	reactIs_production_min$1.isPortal=function(a){return v(a)===c};reactIs_production_min$1.isProfiler=function(a){return v(a)===f};reactIs_production_min$1.isStrictMode=function(a){return v(a)===e};reactIs_production_min$1.isSuspense=function(a){return v(a)===m};reactIs_production_min$1.isSuspenseList=function(a){return v(a)===n};
+	reactIs_production_min$1.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)?true:false};reactIs_production_min$1.typeOf=v;
+	return reactIs_production_min$1;
+}
+
+var reactIs_development$1 = {};
+
+/**
+ * @license React
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_development$1;
+
+function requireReactIs_development$1 () {
+	if (hasRequiredReactIs_development$1) return reactIs_development$1;
+	hasRequiredReactIs_development$1 = 1;
+
+	if (process.env.NODE_ENV !== "production") {
+	  (function() {
+
+	// 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) {
+	  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) {
+	  if (typeof object === 'object' && object !== null) {
+	    var $$typeof = object.$$typeof;
+
+	    switch ($$typeof) {
+	      case REACT_ELEMENT_TYPE:
+	        var type = object.type;
+
+	        switch (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:
+	              case REACT_MEMO_TYPE:
+	              case REACT_PROVIDER_TYPE:
+	                return $$typeofType;
+
+	              default:
+	                return $$typeof;
+	            }
+
+	        }
+
+	      case REACT_PORTAL_TYPE:
+	        return $$typeof;
+	    }
+	  }
+
+	  return undefined;
+	}
+	var ContextConsumer = REACT_CONTEXT_TYPE;
+	var ContextProvider = REACT_PROVIDER_TYPE;
+	var Element = REACT_ELEMENT_TYPE;
+	var ForwardRef = REACT_FORWARD_REF_TYPE;
+	var Fragment = REACT_FRAGMENT_TYPE;
+	var Lazy = REACT_LAZY_TYPE;
+	var Memo = REACT_MEMO_TYPE;
+	var Portal = REACT_PORTAL_TYPE;
+	var Profiler = REACT_PROFILER_TYPE;
+	var StrictMode = REACT_STRICT_MODE_TYPE;
+	var Suspense = REACT_SUSPENSE_TYPE;
+	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 18+.');
+	    }
+	  }
+
+	  return false;
+	}
+	function isConcurrentMode(object) {
+	  {
+	    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;
+	}
+	function isContextProvider(object) {
+	  return typeOf(object) === REACT_PROVIDER_TYPE;
+	}
+	function isElement(object) {
+	  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+	}
+	function isForwardRef(object) {
+	  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+	}
+	function isFragment(object) {
+	  return typeOf(object) === REACT_FRAGMENT_TYPE;
+	}
+	function isLazy(object) {
+	  return typeOf(object) === REACT_LAZY_TYPE;
+	}
+	function isMemo(object) {
+	  return typeOf(object) === REACT_MEMO_TYPE;
+	}
+	function isPortal(object) {
+	  return typeOf(object) === REACT_PORTAL_TYPE;
+	}
+	function isProfiler(object) {
+	  return typeOf(object) === REACT_PROFILER_TYPE;
+	}
+	function isStrictMode(object) {
+	  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+	}
+	function isSuspense(object) {
+	  return typeOf(object) === REACT_SUSPENSE_TYPE;
+	}
+	function isSuspenseList(object) {
+	  return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
+	}
+
+	reactIs_development$1.ContextConsumer = ContextConsumer;
+	reactIs_development$1.ContextProvider = ContextProvider;
+	reactIs_development$1.Element = Element;
+	reactIs_development$1.ForwardRef = ForwardRef;
+	reactIs_development$1.Fragment = Fragment;
+	reactIs_development$1.Lazy = Lazy;
+	reactIs_development$1.Memo = Memo;
+	reactIs_development$1.Portal = Portal;
+	reactIs_development$1.Profiler = Profiler;
+	reactIs_development$1.StrictMode = StrictMode;
+	reactIs_development$1.Suspense = Suspense;
+	reactIs_development$1.SuspenseList = SuspenseList;
+	reactIs_development$1.isAsyncMode = isAsyncMode;
+	reactIs_development$1.isConcurrentMode = isConcurrentMode;
+	reactIs_development$1.isContextConsumer = isContextConsumer;
+	reactIs_development$1.isContextProvider = isContextProvider;
+	reactIs_development$1.isElement = isElement;
+	reactIs_development$1.isForwardRef = isForwardRef;
+	reactIs_development$1.isFragment = isFragment;
+	reactIs_development$1.isLazy = isLazy;
+	reactIs_development$1.isMemo = isMemo;
+	reactIs_development$1.isPortal = isPortal;
+	reactIs_development$1.isProfiler = isProfiler;
+	reactIs_development$1.isStrictMode = isStrictMode;
+	reactIs_development$1.isSuspense = isSuspense;
+	reactIs_development$1.isSuspenseList = isSuspenseList;
+	reactIs_development$1.isValidElementType = isValidElementType;
+	reactIs_development$1.typeOf = typeOf;
+	  })();
+	}
+	return reactIs_development$1;
+}
+
+var hasRequiredReactIs$1;
+
+function requireReactIs$1 () {
+	if (hasRequiredReactIs$1) return reactIs$1.exports;
+	hasRequiredReactIs$1 = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  reactIs$1.exports = requireReactIs_production_min$1();
+	} else {
+	  reactIs$1.exports = requireReactIs_development$1();
+	}
+	return reactIs$1.exports;
+}
+
+var reactIsExports = requireReactIs$1();
+
+function useMemo(getValue, condition, shouldUpdate) {
+  const cacheRef = React.useRef({});
+  if (!('value' in cacheRef.current) || shouldUpdate(cacheRef.current.condition, condition)) {
+    cacheRef.current.value = getValue();
+    cacheRef.current.condition = condition;
+  }
+  return cacheRef.current.value;
+}
+
+const REACT_ELEMENT_TYPE_18 = Symbol.for('react.element');
+const REACT_ELEMENT_TYPE_19 = Symbol.for('react.transitional.element');
+const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+
+/**
+ * Compatible with React 18 or 19 to check if node is a Fragment.
+ */
+function isFragment(object) {
+  return (
+    // Base object type
+    object && typeof object === 'object' && (
+    // React Element type
+    object.$$typeof === REACT_ELEMENT_TYPE_18 || object.$$typeof === REACT_ELEMENT_TYPE_19) &&
+    // React Fragment type
+    object.type === REACT_FRAGMENT_TYPE
+  );
+}
+
+const ReactMajorVersion = Number(version.split('.')[0]);
+const fillRef = (ref, node) => {
+  if (typeof ref === 'function') {
+    ref(node);
+  } else if (typeof ref === 'object' && ref && 'current' in ref) {
+    ref.current = node;
+  }
+};
+
+/**
+ * Merge refs into one ref function to support ref passing.
+ */
+const composeRef = (...refs) => {
+  const refList = refs.filter(Boolean);
+  if (refList.length <= 1) {
+    return refList[0];
+  }
+  return node => {
+    refs.forEach(ref => {
+      fillRef(ref, node);
+    });
+  };
+};
+const useComposeRef = (...refs) => {
+  return useMemo(() => composeRef(...refs),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  refs, (prev, next) => prev.length !== next.length || prev.every((ref, i) => ref !== next[i]));
+};
+const supportRef = nodeOrComponent => {
+  if (!nodeOrComponent) {
+    return false;
+  }
+
+  // React 19 no need `forwardRef` anymore. So just pass if is a React element.
+  if (isReactElement(nodeOrComponent) && ReactMajorVersion >= 19) {
+    return true;
+  }
+  const type = reactIsExports.isMemo(nodeOrComponent) ? nodeOrComponent.type.type : nodeOrComponent.type;
+
+  // Function component node
+  if (typeof type === 'function' && !type.prototype?.render && type.$$typeof !== reactIsExports.ForwardRef) {
+    return false;
+  }
+
+  // Class component
+  if (typeof nodeOrComponent === 'function' && !nodeOrComponent.prototype?.render && nodeOrComponent.$$typeof !== reactIsExports.ForwardRef) {
+    return false;
+  }
+  return true;
+};
+function isReactElement(node) {
+  return /*#__PURE__*/isValidElement(node) && !isFragment(node);
+}
+
+/**
+ * In React 19. `ref` is not a property from node.
+ * But a property from `props.ref`.
+ * To check if `props.ref` exist or fallback to `ref`.
+ */
+const getNodeRef = node => {
+  if (node && isReactElement(node)) {
+    const ele = node;
+
+    // Source from:
+    // https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/getReactNodeRef/getReactNodeRef.ts
+    return ele.props.propertyIsEnumerable('ref') ? ele.props.ref : ele.ref;
+  }
+  return null;
+};
+
+/* eslint-disable no-console */
+let warned = {};
+const preWarningFns = [];
+
+/**
+ * Pre warning enable you to parse content before console.error.
+ * Modify to null will prevent warning.
+ */
+const preMessage = fn => {
+  preWarningFns.push(fn);
+};
+
+/**
+ * Warning if condition not match.
+ * @param valid Condition
+ * @param message Warning message
+ * @example
+ * ```js
+ * warning(false, 'some error'); // print some error
+ * warning(true, 'some error'); // print nothing
+ * warning(1 === 2, 'some error'); // print some error
+ * ```
+ */
+function warning(valid, message) {
+  if (process.env.NODE_ENV !== 'production' && !valid && console !== undefined) {
+    const finalMessage = preWarningFns.reduce((msg, preMessageFn) => preMessageFn(msg ?? '', 'warning'), message);
+    if (finalMessage) {
+      console.error(`Warning: ${finalMessage}`);
+    }
+  }
+}
+
+/** @see Similar to {@link warning} */
+function note(valid, message) {
+  if (process.env.NODE_ENV !== 'production' && !valid && console !== undefined) {
+    const finalMessage = preWarningFns.reduce((msg, preMessageFn) => preMessageFn(msg ?? '', 'note'), message);
+    if (finalMessage) {
+      console.warn(`Note: ${finalMessage}`);
+    }
+  }
+}
+function resetWarned() {
+  warned = {};
+}
+function call(method, valid, message) {
+  if (!valid && !warned[message]) {
+    method(false, message);
+    warned[message] = true;
+  }
+}
+
+/** @see Same as {@link warning}, but only warn once for the same message */
+function warningOnce(valid, message) {
+  call(warning, valid, message);
+}
+
+/** @see Same as {@link warning}, but only warn once for the same message */
+function noteOnce(valid, message) {
+  call(note, valid, message);
+}
+warningOnce.preMessage = preMessage;
+warningOnce.resetWarned = resetWarned;
+warningOnce.noteOnce = noteOnce;
+
+const OrderContext = /*#__PURE__*/React.createContext(null);
+
+let inline = false;
+function inlineMock(nextInline) {
+  return inline;
+}
+
+/**
+ * Wrap `React.useLayoutEffect` which will not throw warning message in test env
+ */
+const useInternalLayoutEffect = process.env.NODE_ENV !== 'test' && canUseDom() ? React.useLayoutEffect : React.useEffect;
+const useLayoutEffect = (callback, deps) => {
+  const firstMountRef = React.useRef(true);
+  useInternalLayoutEffect(() => {
+    return callback(firstMountRef.current);
+  }, deps);
+
+  // We tell react that first mount has passed
+  useInternalLayoutEffect(() => {
+    firstMountRef.current = false;
+    return () => {
+      firstMountRef.current = true;
+    };
+  }, []);
+};
+
+const EMPTY_LIST = [];
+
+/**
+ * Will add `div` to document. Nest call will keep order
+ * @param render Render DOM in document
+ */
+function useDom(render, debug) {
+  const [ele] = React.useState(() => {
+    if (!canUseDom()) {
+      return null;
+    }
+    const defaultEle = document.createElement('div');
+    if (process.env.NODE_ENV !== 'production' && debug) {
+      defaultEle.setAttribute('data-debug', debug);
+    }
+    return defaultEle;
+  });
+
+  // ========================== Order ==========================
+  const appendedRef = React.useRef(false);
+  const queueCreate = React.useContext(OrderContext);
+  const [queue, setQueue] = React.useState(EMPTY_LIST);
+  const mergedQueueCreate = queueCreate || (appendedRef.current ? undefined : appendFn => {
+    setQueue(origin => {
+      const newQueue = [appendFn, ...origin];
+      return newQueue;
+    });
+  });
+
+  // =========================== DOM ===========================
+  function append() {
+    if (!ele.parentElement) {
+      document.body.appendChild(ele);
+    }
+    appendedRef.current = true;
+  }
+  function cleanup() {
+    ele.parentElement?.removeChild(ele);
+    appendedRef.current = false;
+  }
+  useLayoutEffect(() => {
+    if (render) {
+      if (queueCreate) {
+        queueCreate(append);
+      } else {
+        append();
+      }
+    } else {
+      cleanup();
+    }
+    return cleanup;
+  }, [render]);
+  useLayoutEffect(() => {
+    if (queue.length) {
+      queue.forEach(appendFn => appendFn());
+      setQueue(EMPTY_LIST);
+    }
+  }, [queue]);
+  return [ele, mergedQueueCreate];
+}
+
+function contains(root, n) {
+  if (!root) {
+    return false;
+  }
+
+  // Use native if support
+  if (root.contains) {
+    return root.contains(n);
+  }
+
+  // `document.contains` not support with IE11
+  let node = n;
+  while (node) {
+    if (node === root) {
+      return true;
+    }
+    node = node.parentNode;
+  }
+  return false;
+}
+
+const APPEND_ORDER = 'data-rc-order';
+const APPEND_PRIORITY = 'data-rc-priority';
+const MARK_KEY = `rc-util-key`;
+const containerCache = new Map();
+function getMark({
+  mark
+} = {}) {
+  if (mark) {
+    return mark.startsWith('data-') ? mark : `data-${mark}`;
+  }
+  return MARK_KEY;
+}
+function getContainer(option) {
+  if (option.attachTo) {
+    return option.attachTo;
+  }
+  const head = document.querySelector('head');
+  return head || document.body;
+}
+function getOrder(prepend) {
+  if (prepend === 'queue') {
+    return 'prependQueue';
+  }
+  return prepend ? 'prepend' : 'append';
+}
+
+/**
+ * Find style which inject by rc-util
+ */
+function findStyles(container) {
+  return Array.from((containerCache.get(container) || container).children).filter(node => node.tagName === 'STYLE');
+}
+function injectCSS(css, option = {}) {
+  if (!canUseDom()) {
+    return null;
+  }
+  const {
+    csp,
+    prepend,
+    priority = 0
+  } = option;
+  const mergedOrder = getOrder(prepend);
+  const isPrependQueue = mergedOrder === 'prependQueue';
+  const styleNode = document.createElement('style');
+  styleNode.setAttribute(APPEND_ORDER, mergedOrder);
+  if (isPrependQueue && priority) {
+    styleNode.setAttribute(APPEND_PRIORITY, `${priority}`);
+  }
+  if (csp?.nonce) {
+    styleNode.nonce = csp?.nonce;
+  }
+  styleNode.innerHTML = css;
+  const container = getContainer(option);
+  const {
+    firstChild
+  } = container;
+  if (prepend) {
+    // If is queue `prepend`, it will prepend first style and then append rest style
+    if (isPrependQueue) {
+      const existStyle = (option.styles || findStyles(container)).filter(node => {
+        // Ignore style which not injected by rc-util with prepend
+        if (!['prepend', 'prependQueue'].includes(node.getAttribute(APPEND_ORDER))) {
+          return false;
+        }
+
+        // Ignore style which priority less then new style
+        const nodePriority = Number(node.getAttribute(APPEND_PRIORITY) || 0);
+        return priority >= nodePriority;
+      });
+      if (existStyle.length) {
+        container.insertBefore(styleNode, existStyle[existStyle.length - 1].nextSibling);
+        return styleNode;
+      }
+    }
+
+    // Use `insertBefore` as `prepend`
+    container.insertBefore(styleNode, firstChild);
+  } else {
+    container.appendChild(styleNode);
+  }
+  return styleNode;
+}
+function findExistNode(key, option = {}) {
+  let {
+    styles
+  } = option;
+  styles ||= findStyles(getContainer(option));
+  return styles.find(node => node.getAttribute(getMark(option)) === key);
+}
+function removeCSS(key, option = {}) {
+  const existNode = findExistNode(key, option);
+  if (existNode) {
+    const container = getContainer(option);
+    container.removeChild(existNode);
+  }
+}
+
+/**
+ * qiankun will inject `appendChild` to insert into other
+ */
+function syncRealContainer(container, option) {
+  const cachedRealContainer = containerCache.get(container);
+
+  // Find real container when not cached or cached container removed
+  if (!cachedRealContainer || !contains(document, cachedRealContainer)) {
+    const placeholderStyle = injectCSS('', option);
+    const {
+      parentNode
+    } = placeholderStyle;
+    containerCache.set(container, parentNode);
+    container.removeChild(placeholderStyle);
+  }
+}
+function updateCSS(css, key, originOption = {}) {
+  const container = getContainer(originOption);
+  const styles = findStyles(container);
+  const option = {
+    ...originOption,
+    styles
+  };
+
+  // Sync real parent
+  syncRealContainer(container, option);
+  const existNode = findExistNode(key, option);
+  if (existNode) {
+    if (option.csp?.nonce && existNode.nonce !== option.csp?.nonce) {
+      existNode.nonce = option.csp?.nonce;
+    }
+    if (existNode.innerHTML !== css) {
+      existNode.innerHTML = css;
+    }
+    return existNode;
+  }
+  const newNode = injectCSS(css, option);
+  newNode.setAttribute(getMark(option), key);
+  return newNode;
+}
+
+/* eslint-disable no-param-reassign */
+function measureScrollbarSize(ele) {
+  const randomId = `rc-scrollbar-measure-${Math.random().toString(36).substring(7)}`;
+  const measureEle = document.createElement('div');
+  measureEle.id = randomId;
+
+  // Create Style
+  const measureStyle = measureEle.style;
+  measureStyle.position = 'absolute';
+  measureStyle.left = '0';
+  measureStyle.top = '0';
+  measureStyle.width = '100px';
+  measureStyle.height = '100px';
+  measureStyle.overflow = 'scroll';
+
+  // Clone Style if needed
+  let fallbackWidth;
+  let fallbackHeight;
+  if (ele) {
+    const targetStyle = getComputedStyle(ele);
+    measureStyle.scrollbarColor = targetStyle.scrollbarColor;
+    measureStyle.scrollbarWidth = targetStyle.scrollbarWidth;
+
+    // Set Webkit style
+    const webkitScrollbarStyle = getComputedStyle(ele, '::-webkit-scrollbar');
+    const width = parseInt(webkitScrollbarStyle.width, 10);
+    const height = parseInt(webkitScrollbarStyle.height, 10);
+
+    // Try wrap to handle CSP case
+    try {
+      const widthStyle = width ? `width: ${webkitScrollbarStyle.width};` : '';
+      const heightStyle = height ? `height: ${webkitScrollbarStyle.height};` : '';
+      updateCSS(`
+#${randomId}::-webkit-scrollbar {
+${widthStyle}
+${heightStyle}
+}`, randomId);
+    } catch (e) {
+      // Can't wrap, just log error
+      console.error(e);
+
+      // Get from style directly
+      fallbackWidth = width;
+      fallbackHeight = height;
+    }
+  }
+  document.body.appendChild(measureEle);
+
+  // Measure. Get fallback style if provided
+  const scrollWidth = ele && fallbackWidth && !Number.isNaN(fallbackWidth) ? fallbackWidth : measureEle.offsetWidth - measureEle.clientWidth;
+  const scrollHeight = ele && fallbackHeight && !Number.isNaN(fallbackHeight) ? fallbackHeight : measureEle.offsetHeight - measureEle.clientHeight;
+
+  // Clean up
+  document.body.removeChild(measureEle);
+  removeCSS(randomId);
+  return {
+    width: scrollWidth,
+    height: scrollHeight
+  };
+}
+function getTargetScrollBarSize(target) {
+  if (typeof document === 'undefined' || !target || !(target instanceof Element)) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+  return measureScrollbarSize(target);
+}
+
+/**
+ * Test usage export. Do not use in your production
+ */
+function isBodyOverflowing() {
+  return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) && window.innerWidth > document.body.offsetWidth;
+}
+
+const UNIQUE_ID = `rc-util-locker-${Date.now()}`;
+let uuid$1 = 0;
+function useScrollLocker(lock) {
+  const mergedLock = !!lock;
+  const [id] = React.useState(() => {
+    uuid$1 += 1;
+    return `${UNIQUE_ID}_${uuid$1}`;
+  });
+  useLayoutEffect(() => {
+    if (mergedLock) {
+      const scrollbarSize = getTargetScrollBarSize(document.body).width;
+      const isOverflow = isBodyOverflowing();
+      updateCSS(`
+html body {
+  overflow-y: hidden;
+  ${isOverflow ? `width: calc(100% - ${scrollbarSize}px);` : ''}
+}`, id);
+    } else {
+      removeCSS(id);
+    }
+    return () => {
+      removeCSS(id);
+    };
+  }, [mergedLock, id]);
+}
+
+const useEvent = callback => {
+  const fnRef = React.useRef(callback);
+  fnRef.current = callback;
+  const memoFn = React.useCallback((...args) => fnRef.current?.(...args), []);
+  return memoFn;
+};
+
+/**
+ * Same as React.useState but `setState` accept `ignoreDestroy` param to not to setState after destroyed.
+ * We do not make this auto is to avoid real memory leak.
+ * Developer should confirm it's safe to ignore themselves.
+ */
+const useSafeState = defaultValue => {
+  const destroyRef = React.useRef(false);
+  const [value, setValue] = React.useState(defaultValue);
+  React.useEffect(() => {
+    destroyRef.current = false;
+    return () => {
+      destroyRef.current = true;
+    };
+  }, []);
+  function safeSetState(updater, ignoreDestroy) {
+    if (ignoreDestroy && destroyRef.current) {
+      return;
+    }
+    setValue(updater);
+  }
+  return [value, safeSetState];
+};
+
+/**
+ * Similar to `useState` but will use props value if provided.
+ * From React 18, we do not need safe `useState` since it will not throw for unmounted update.
+ * This hooks remove the `onChange` & `postState` logic since we only need basic merged state logic.
+ */
+function useControlledState(defaultStateValue, value) {
+  const [innerValue, setInnerValue] = useState(defaultStateValue);
+  const mergedValue = value !== undefined ? value : innerValue;
+  useLayoutEffect(mount => {
+    if (!mount) {
+      setInnerValue(value);
+    }
+  }, [value]);
+  return [
+  // Value
+  mergedValue,
+  // Update function
+  setInnerValue];
+}
+
+function toArray$1(children, option = {}) {
+  let ret = [];
+  React__default.Children.forEach(children, child => {
+    if ((child === undefined || child === null) && !option.keepEmpty) {
+      return;
+    }
+    if (Array.isArray(child)) {
+      ret = ret.concat(toArray$1(child));
+    } else if (isFragment(child) && child.props) {
+      ret = ret.concat(toArray$1(child.props.children, option));
+    } else {
+      ret.push(child);
+    }
+  });
+  return ret;
+}
+
+function getUseId() {
+  // We need fully clone React function here to avoid webpack warning React 17 do not export `useId`
+  const fullClone = {
+    ...React
+  };
+  return fullClone.useId;
+}
+let uuid = 0;
+const useOriginId = getUseId();
+var useId = useOriginId ?
+// Use React `useId`
+function useId(id) {
+  const 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
+  const [innerId, setInnerId] = React.useState('ssr-id');
+  React.useEffect(() => {
+    const nextId = uuid;
+    uuid += 1;
+    setInnerId(`rc_unique_${nextId}`);
+  }, []);
+
+  // 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 react native id or inner id
+  return innerId;
+};
+
+let stack = [];
+const IME_LOCK_DURATION = 200;
+let lastCompositionEndTime = 0;
+
+// Export for testing
+process.env.NODE_ENV === 'test' ? () => ({
+  stack,
+  reset: () => {
+    // Not reset stack to ensure effect will clean up correctly
+    lastCompositionEndTime = 0;
+  }
+}) : null;
+
+// Global event handlers
+const onGlobalKeyDown = event => {
+  if (event.key === 'Escape' && !event.isComposing) {
+    const now = Date.now();
+    if (now - lastCompositionEndTime < IME_LOCK_DURATION) {
+      return;
+    }
+    const len = stack.length;
+    for (let i = len - 1; i >= 0; i -= 1) {
+      stack[i].onEsc({
+        top: i === len - 1,
+        event
+      });
+    }
+  }
+};
+const onGlobalCompositionEnd = () => {
+  lastCompositionEndTime = Date.now();
+};
+function attachGlobalEventListeners() {
+  window.addEventListener('keydown', onGlobalKeyDown);
+  window.addEventListener('compositionend', onGlobalCompositionEnd);
+}
+function detachGlobalEventListeners() {
+  if (stack.length === 0) {
+    window.removeEventListener('keydown', onGlobalKeyDown);
+    window.removeEventListener('compositionend', onGlobalCompositionEnd);
+  }
+}
+function useEscKeyDown(open, onEsc) {
+  const id = useId();
+  const onEventEsc = useEvent(onEsc);
+  const ensure = () => {
+    if (!stack.find(item => item.id === id)) {
+      stack.push({
+        id,
+        onEsc: onEventEsc
+      });
+    }
+  };
+  const clear = () => {
+    stack = stack.filter(item => item.id !== id);
+  };
+  useMemo$1(() => {
+    if (open) {
+      ensure();
+    } else if (!open) {
+      clear();
+    }
+  }, [open]);
+  useEffect(() => {
+    if (open) {
+      ensure();
+      // Attach global event listeners
+      attachGlobalEventListeners();
+      return () => {
+        clear();
+        // Remove global event listeners if instances is empty
+        detachGlobalEventListeners();
+      };
+    }
+  }, [open]);
+}
+
+const getPortalContainer = getContainer => {
+  if (getContainer === false) {
+    return false;
+  }
+  if (!canUseDom() || !getContainer) {
+    return null;
+  }
+  if (typeof getContainer === 'string') {
+    return document.querySelector(getContainer);
+  }
+  if (typeof getContainer === 'function') {
+    return getContainer();
+  }
+  return getContainer;
+};
+const Portal = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    open,
+    autoLock,
+    getContainer,
+    debug,
+    autoDestroy = true,
+    children,
+    onEsc
+  } = props;
+  const [shouldRender, setShouldRender] = React.useState(open);
+  const mergedRender = shouldRender || open;
+
+  // ========================= Warning =========================
+  if (process.env.NODE_ENV !== 'production') {
+    warningOnce(canUseDom() || !open, `Portal only work in client side. Please call 'useEffect' to show Portal instead default render in SSR.`);
+  }
+
+  // ====================== Should Render ======================
+  React.useEffect(() => {
+    if (autoDestroy || open) {
+      setShouldRender(open);
+    }
+  }, [open, autoDestroy]);
+
+  // ======================== Container ========================
+  const [innerContainer, setInnerContainer] = React.useState(() => getPortalContainer(getContainer));
+  React.useEffect(() => {
+    const customizeContainer = getPortalContainer(getContainer);
+
+    // Tell component that we check this in effect which is safe to be `null`
+    setInnerContainer(() =>
+    // React do the state update even the value is the same,
+    // Use function call to force React to compare update
+    customizeContainer ?? null);
+  });
+  const [defaultContainer, queueCreate] = useDom(mergedRender && !innerContainer, debug);
+  const mergedContainer = innerContainer ?? defaultContainer;
+
+  // ========================= Locker ==========================
+  useScrollLocker(autoLock && open && canUseDom() && (mergedContainer === defaultContainer || mergedContainer === document.body));
+
+  // ========================= Esc Keydown ==========================
+  useEscKeyDown(open, onEsc);
+
+  // =========================== Ref ===========================
+  let childRef = null;
+  if (children && supportRef(children) && ref) {
+    childRef = getNodeRef(children);
+  }
+  const mergedRef = useComposeRef(childRef, ref);
+
+  // ========================= Render ==========================
+  // Do not render when nothing need render
+  // When innerContainer is `undefined`, it may not ready since user use ref in the same render
+  if (!mergedRender || !canUseDom() || innerContainer === undefined) {
+    return null;
+  }
+
+  // Render inline
+  const renderInline = mergedContainer === false || inlineMock();
+  let reffedChildren = children;
+  if (ref) {
+    reffedChildren = /*#__PURE__*/React.cloneElement(children, {
+      ref: mergedRef
+    });
+  }
+  return /*#__PURE__*/React.createElement(OrderContext.Provider, {
+    value: queueCreate
+  }, renderInline ? reffedChildren : /*#__PURE__*/createPortal(reffedChildren, mergedContainer));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Portal.displayName = 'Portal';
+}
+
+function isDOM(node) {
+  // https://developer.mozilla.org/en-US/docs/Web/API/Element
+  // Since XULElement is also subclass of Element, we only need HTMLElement and SVGElement
+  return node instanceof HTMLElement || node instanceof SVGElement;
+}
+
+/**
+ * Retrieves a DOM node via a ref, and does not invoke `findDOMNode`.
+ */
+function getDOM(node) {
+  if (node && typeof node === 'object' && isDOM(node.nativeElement)) {
+    return node.nativeElement;
+  }
+  if (isDOM(node)) {
+    return node;
+  }
+  return null;
+}
+
+const CollectionContext = /*#__PURE__*/React.createContext(null);
+/**
+ * Collect all the resize event from children ResizeObserver
+ */
+function Collection({
+  children,
+  onBatchResize
+}) {
+  const resizeIdRef = React.useRef(0);
+  const resizeInfosRef = React.useRef([]);
+  const onCollectionResize = React.useContext(CollectionContext);
+  const onResize = React.useCallback((size, element, data) => {
+    resizeIdRef.current += 1;
+    const currentId = resizeIdRef.current;
+    resizeInfosRef.current.push({
+      size,
+      element,
+      data
+    });
+    Promise.resolve().then(() => {
+      if (currentId === resizeIdRef.current) {
+        onBatchResize?.(resizeInfosRef.current);
+        resizeInfosRef.current = [];
+      }
+    });
+
+    // Continue bubbling if parent exist
+    onCollectionResize?.(size, element, data);
+  }, [onBatchResize, onCollectionResize]);
+  return /*#__PURE__*/React.createElement(CollectionContext.Provider, {
+    value: onResize
+  }, children);
+}
+
+// =============================== Const ===============================
+const elementListeners = new Map();
+function onResize(entities) {
+  entities.forEach(entity => {
+    const {
+      target
+    } = entity;
+    elementListeners.get(target)?.forEach(listener => listener(target));
+  });
+}
+
+// Delay create ResizeObserver since it's not supported in server side
+let observer;
+function ensureResizeObserver() {
+  if (!observer) {
+    observer = new ResizeObserver(onResize);
+  }
+  return observer;
+}
+
+// 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)) {
+    elementListeners.set(element, new Set());
+    ensureResizeObserver().observe(element);
+  }
+  elementListeners.get(element).add(callback);
+}
+function unobserve(element, callback) {
+  if (elementListeners.has(element)) {
+    elementListeners.get(element).delete(callback);
+    if (!elementListeners.get(element).size) {
+      ensureResizeObserver().unobserve(element);
+      elementListeners.delete(element);
+    }
+  }
+}
+
+function useResizeObserver(enabled, getTarget, onDelayResize, onSyncResize) {
+  // ============================= Size =============================
+  const sizeRef = React.useRef({
+    width: -1,
+    height: -1,
+    offsetWidth: -1,
+    offsetHeight: -1
+  });
+
+  // =========================== Observe ============================
+
+  // Handler
+  const onInternalResize = useEvent(target => {
+    const {
+      width,
+      height
+    } = target.getBoundingClientRect();
+    const {
+      offsetWidth,
+      offsetHeight
+    } = target;
+
+    /**
+     * Resize observer trigger when content size changed.
+     * In most case we just care about element size,
+     * let's use `boundary` instead of `contentRect` here to avoid shaking.
+     */
+    const fixedWidth = Math.floor(width);
+    const fixedHeight = Math.floor(height);
+    if (sizeRef.current.width !== fixedWidth || sizeRef.current.height !== fixedHeight || sizeRef.current.offsetWidth !== offsetWidth || sizeRef.current.offsetHeight !== offsetHeight) {
+      const size = {
+        width: fixedWidth,
+        height: fixedHeight,
+        offsetWidth,
+        offsetHeight
+      };
+      sizeRef.current = size;
+
+      // IE is strange, right?
+      const mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
+      const mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
+      const sizeInfo = {
+        ...size,
+        offsetWidth: mergedOffsetWidth,
+        offsetHeight: mergedOffsetHeight
+      };
+
+      // Call the callback immediately, let the caller decide whether to defer
+      // onResize(sizeInfo, target);
+      onSyncResize?.(sizeInfo, target);
+
+      // defer the callback but not defer to next frame
+      Promise.resolve().then(() => {
+        onDelayResize?.(sizeInfo, target);
+      });
+    }
+  });
+
+  // Dynamic observe
+  const isFuncTarget = typeof getTarget === 'function';
+  React.useEffect(() => {
+    const target = isFuncTarget ? getTarget() : getTarget;
+    if (target && enabled) {
+      observe(target, onInternalResize);
+    }
+    return () => {
+      if (target) {
+        unobserve(target, onInternalResize);
+      }
+    };
+  }, [enabled,
+  // When is function, no need to watch it
+  isFuncTarget ? 0 : getTarget]);
+}
+
+function SingleObserver(props, ref) {
+  const {
+    children,
+    disabled,
+    onResize,
+    data
+  } = props;
+  const elementRef = React.useRef(null);
+  const onCollectionResize = React.useContext(CollectionContext);
+
+  // =========================== Children ===========================
+  const isRenderProps = typeof children === 'function';
+  const mergedChildren = isRenderProps ? children(elementRef) : children;
+
+  // ============================= Ref ==============================
+  const canRef = !isRenderProps && /*#__PURE__*/React.isValidElement(mergedChildren) && supportRef(mergedChildren);
+  const originRef = canRef ? getNodeRef(mergedChildren) : null;
+  const mergedRef = useComposeRef(originRef, elementRef);
+  const getDomElement = () => {
+    return getDOM(elementRef.current);
+  };
+  React.useImperativeHandle(ref, () => getDomElement());
+
+  // =========================== Observe ============================
+  useResizeObserver(!disabled, getDomElement, onResize, (sizeInfo, target) => {
+    onCollectionResize?.(sizeInfo, target, data);
+  });
+
+  // ============================ Render ============================
+  return canRef ? /*#__PURE__*/React.cloneElement(mergedChildren, {
+    ref: mergedRef
+  }) : mergedChildren;
+}
+const RefSingleObserver = /*#__PURE__*/React.forwardRef(SingleObserver);
+if (process.env.NODE_ENV !== 'production') {
+  RefSingleObserver.displayName = 'SingleObserver';
+}
+
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+const INTERNAL_PREFIX_KEY = 'rc-observer-key';
+function ResizeObserver$1(props, ref) {
+  const {
+    children
+  } = props;
+  const childNodes = typeof children === 'function' ? [children] : toArray$1(children);
+  if (process.env.NODE_ENV !== 'production') {
+    if (childNodes.length > 1) {
+      warning(false, 'Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.');
+    } else if (childNodes.length === 0) {
+      warning(false, '`children` of ResizeObserver is empty. Nothing is in observe.');
+    }
+  }
+  return childNodes.map((child, index) => {
+    const key = child?.key || `${INTERNAL_PREFIX_KEY}-${index}`;
+    return /*#__PURE__*/React.createElement(RefSingleObserver, _extends$2({}, props, {
+      key: key,
+      ref: index === 0 ? ref : undefined
+    }), child);
+  });
+}
+const RefResizeObserver = /*#__PURE__*/React.forwardRef(ResizeObserver$1);
+if (process.env.NODE_ENV !== 'production') {
+  RefResizeObserver.displayName = 'ResizeObserver';
+}
+RefResizeObserver.Collection = Collection;
+
+function getRoot(ele) {
+  return ele?.getRootNode?.();
+}
+
+/**
+ * Check if is in shadowRoot
+ */
+function inShadow(ele) {
+  return getRoot(ele) instanceof ShadowRoot;
+}
+
+/**
+ * Return shadowRoot if possible
+ */
+function getShadowRoot(ele) {
+  return inShadow(ele) ? getRoot(ele) : null;
+}
+
+const Context$1 = /*#__PURE__*/React.createContext({});
+
+/**
+ * Same as React.useState but will always get latest state.
+ * This is useful when React merge multiple state updates into one.
+ * e.g. onTransitionEnd trigger multiple event at once will be merged state update in React.
+ */
+function useSyncState(defaultValue) {
+  const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+  const currentValueRef = React.useRef(defaultValue);
+  const getValue = useEvent(() => {
+    return currentValueRef.current;
+  });
+  const setValue = useEvent(updater => {
+    currentValueRef.current = typeof updater === 'function' ? updater(currentValueRef.current) : updater;
+    forceUpdate();
+  });
+  return [getValue, setValue];
+}
+
+const STATUS_NONE = 'none';
+const STATUS_APPEAR = 'appear';
+const STATUS_ENTER = 'enter';
+const STATUS_LEAVE = 'leave';
+const STEP_NONE = 'none';
+const STEP_PREPARE = 'prepare';
+const STEP_START = 'start';
+const STEP_ACTIVE = 'active';
+const STEP_ACTIVATED = 'end';
+/**
+ * Used for disabled motion case.
+ * Prepare stage will still work but start & active will be skipped.
+ */
+const STEP_PREPARED = 'prepared';
+
+// ================= Transition =================
+// Event wrapper. Copy from react source code
+function makePrefixMap(styleProp, eventName) {
+  const prefixes = {};
+  prefixes[styleProp.toLowerCase()] = eventName.toLowerCase();
+  prefixes[`Webkit${styleProp}`] = `webkit${eventName}`;
+  prefixes[`Moz${styleProp}`] = `moz${eventName}`;
+  prefixes[`ms${styleProp}`] = `MS${eventName}`;
+  prefixes[`O${styleProp}`] = `o${eventName.toLowerCase()}`;
+  return prefixes;
+}
+function getVendorPrefixes(domSupport, win) {
+  const prefixes = {
+    animationend: makePrefixMap('Animation', 'AnimationEnd'),
+    transitionend: makePrefixMap('Transition', 'TransitionEnd')
+  };
+  if (domSupport) {
+    if (!('AnimationEvent' in win)) {
+      delete prefixes.animationend.animation;
+    }
+    if (!('TransitionEvent' in win)) {
+      delete prefixes.transitionend.transition;
+    }
+  }
+  return prefixes;
+}
+const vendorPrefixes = getVendorPrefixes(canUseDom(), typeof window !== 'undefined' ? window : {});
+let style = {};
+if (canUseDom()) {
+  ({
+    style
+  } = document.createElement('div'));
+}
+const prefixedEventNames = {};
+function getVendorPrefixedEventName(eventName) {
+  if (prefixedEventNames[eventName]) {
+    return prefixedEventNames[eventName];
+  }
+  const prefixMap = vendorPrefixes[eventName];
+  if (prefixMap) {
+    const stylePropList = Object.keys(prefixMap);
+    const len = stylePropList.length;
+    for (let i = 0; i < len; i += 1) {
+      const styleProp = stylePropList[i];
+      if (Object.prototype.hasOwnProperty.call(prefixMap, styleProp) && styleProp in style) {
+        prefixedEventNames[eventName] = prefixMap[styleProp];
+        return prefixedEventNames[eventName];
+      }
+    }
+  }
+  return '';
+}
+const internalAnimationEndName = getVendorPrefixedEventName('animationend');
+const internalTransitionEndName = getVendorPrefixedEventName('transitionend');
+const supportTransition = !!(internalAnimationEndName && internalTransitionEndName);
+const animationEndName = internalAnimationEndName || 'animationend';
+const transitionEndName = internalTransitionEndName || 'transitionend';
+function getTransitionName(transitionName, transitionType) {
+  if (!transitionName) return null;
+  if (typeof transitionName === 'object') {
+    const type = transitionType.replace(/-\w/g, match => match[1].toUpperCase());
+    return transitionName[type];
+  }
+  return `${transitionName}-${transitionType}`;
+}
+
+var useDomMotionEvents = (onInternalMotionEnd => {
+  const cacheElementRef = useRef();
+
+  // Remove events
+  function removeMotionEvents(element) {
+    if (element) {
+      element.removeEventListener(transitionEndName, onInternalMotionEnd);
+      element.removeEventListener(animationEndName, onInternalMotionEnd);
+    }
+  }
+
+  // Patch events
+  function patchMotionEvents(element) {
+    if (cacheElementRef.current && cacheElementRef.current !== element) {
+      removeMotionEvents(cacheElementRef.current);
+    }
+    if (element && element !== cacheElementRef.current) {
+      element.addEventListener(transitionEndName, onInternalMotionEnd);
+      element.addEventListener(animationEndName, onInternalMotionEnd);
+
+      // Save as cache in case dom removed trigger by `motionDeadline`
+      cacheElementRef.current = element;
+    }
+  }
+
+  // Clean up when removed
+  React.useEffect(() => () => {
+    removeMotionEvents(cacheElementRef.current);
+    cacheElementRef.current = null;
+  }, []);
+  return [patchMotionEvents, removeMotionEvents];
+});
+
+// It's safe to use `useLayoutEffect` but the warning is annoying
+const useIsomorphicLayoutEffect = canUseDom() ? useLayoutEffect$1 : useEffect;
+
+let raf = callback => +setTimeout(callback, 16);
+let caf = num => clearTimeout(num);
+if (typeof window !== 'undefined' && 'requestAnimationFrame' in window) {
+  raf = callback => window.requestAnimationFrame(callback);
+  caf = handle => window.cancelAnimationFrame(handle);
+}
+let rafUUID = 0;
+const rafIds = new Map();
+function cleanup(id) {
+  rafIds.delete(id);
+}
+const wrapperRaf = (callback, times = 1) => {
+  rafUUID += 1;
+  const id = rafUUID;
+  function callRef(leftTimes) {
+    if (leftTimes === 0) {
+      // Clean up
+      cleanup(id);
+
+      // Trigger
+      callback();
+    } else {
+      // Next raf
+      const realId = raf(() => {
+        callRef(leftTimes - 1);
+      });
+
+      // Bind real raf id
+      rafIds.set(id, realId);
+    }
+  }
+  callRef(times);
+  return id;
+};
+wrapperRaf.cancel = id => {
+  const realId = rafIds.get(id);
+  cleanup(id);
+  return caf(realId);
+};
+if (process.env.NODE_ENV !== 'production') {
+  wrapperRaf.ids = () => rafIds;
+}
+
+var useNextFrame = (() => {
+  const nextFrameRef = React.useRef(null);
+  function cancelNextFrame() {
+    wrapperRaf.cancel(nextFrameRef.current);
+  }
+  function nextFrame(callback, delay = 2) {
+    cancelNextFrame();
+    const nextFrameId = wrapperRaf(() => {
+      if (delay <= 1) {
+        callback({
+          isCanceled: () => nextFrameId !== nextFrameRef.current
+        });
+      } else {
+        nextFrame(callback, delay - 1);
+      }
+    });
+    nextFrameRef.current = nextFrameId;
+  }
+  React.useEffect(() => () => {
+    cancelNextFrame();
+  }, []);
+  return [nextFrame, cancelNextFrame];
+});
+
+const FULL_STEP_QUEUE = [STEP_PREPARE, STEP_START, STEP_ACTIVE, STEP_ACTIVATED];
+const SIMPLE_STEP_QUEUE = [STEP_PREPARE, STEP_PREPARED];
+
+/** Skip current step */
+const SkipStep = false;
+/** Current step should be update in */
+const DoStep = true;
+function isActive(step) {
+  return step === STEP_ACTIVE || step === STEP_ACTIVATED;
+}
+var useStepQueue = ((status, prepareOnly, callback) => {
+  const [step, setStep] = useSafeState(STEP_NONE);
+  const [nextFrame, cancelNextFrame] = useNextFrame();
+  function startQueue() {
+    setStep(STEP_PREPARE, true);
+  }
+  const STEP_QUEUE = prepareOnly ? SIMPLE_STEP_QUEUE : FULL_STEP_QUEUE;
+  useIsomorphicLayoutEffect(() => {
+    if (step !== STEP_NONE && step !== STEP_ACTIVATED) {
+      const index = STEP_QUEUE.indexOf(step);
+      const nextStep = STEP_QUEUE[index + 1];
+      const result = callback(step);
+      if (result === SkipStep) {
+        // Skip when no needed
+        setStep(nextStep, true);
+      } else if (nextStep) {
+        // Do as frame for step update
+        nextFrame(info => {
+          function doNext() {
+            // Skip since current queue is ood
+            if (info.isCanceled()) return;
+            setStep(nextStep, true);
+          }
+          if (result === true) {
+            doNext();
+          } else {
+            // Only promise should be async
+            Promise.resolve(result).then(doNext);
+          }
+        });
+      }
+    }
+  }, [status, step]);
+  React.useEffect(() => () => {
+    cancelNextFrame();
+  }, []);
+  return [startQueue, step];
+});
+
+function useStatus(supportMotion, visible, getElement, {
+  motionEnter = true,
+  motionAppear = true,
+  motionLeave = true,
+  motionDeadline,
+  motionLeaveImmediately,
+  onAppearPrepare,
+  onEnterPrepare,
+  onLeavePrepare,
+  onAppearStart,
+  onEnterStart,
+  onLeaveStart,
+  onAppearActive,
+  onEnterActive,
+  onLeaveActive,
+  onAppearEnd,
+  onEnterEnd,
+  onLeaveEnd,
+  onVisibleChanged
+}) {
+  // Used for outer render usage to avoid `visible: false & status: none` to render nothing
+  const [asyncVisible, setAsyncVisible] = React.useState();
+  const [getStatus, setStatus] = useSyncState(STATUS_NONE);
+  const [style, setStyle] = React.useState([null, null]);
+  const currentStatus = getStatus();
+  const mountedRef = useRef(false);
+  const deadlineRef = useRef(null);
+
+  // =========================== Dom Node ===========================
+  function getDomElement() {
+    return getElement();
+  }
+
+  // ========================== Motion End ==========================
+  const activeRef = useRef(false);
+
+  /**
+   * Clean up status & style
+   */
+  function updateMotionEndStatus() {
+    setStatus(STATUS_NONE);
+    setStyle([null, null]);
+  }
+  const onInternalMotionEnd = useEvent(event => {
+    const status = getStatus();
+    // Do nothing since not in any transition status.
+    // This may happen when `motionDeadline` trigger.
+    if (status === STATUS_NONE) {
+      return;
+    }
+    const element = getDomElement();
+    if (event && !event.deadline && event.target !== element) {
+      // event exists
+      // not initiated by deadline
+      // transitionEnd not fired by inner elements
+      return;
+    }
+    const currentActive = activeRef.current;
+    let canEnd;
+    if (status === STATUS_APPEAR && currentActive) {
+      canEnd = onAppearEnd?.(element, event);
+    } else if (status === STATUS_ENTER && currentActive) {
+      canEnd = onEnterEnd?.(element, event);
+    } else if (status === STATUS_LEAVE && currentActive) {
+      canEnd = onLeaveEnd?.(element, event);
+    }
+
+    // Only update status when `canEnd` and not destroyed
+    if (currentActive && canEnd !== false) {
+      updateMotionEndStatus();
+    }
+  });
+  const [patchMotionEvents] = useDomMotionEvents(onInternalMotionEnd);
+
+  // ============================= Step =============================
+  const getEventHandlers = targetStatus => {
+    switch (targetStatus) {
+      case STATUS_APPEAR:
+        return {
+          [STEP_PREPARE]: onAppearPrepare,
+          [STEP_START]: onAppearStart,
+          [STEP_ACTIVE]: onAppearActive
+        };
+      case STATUS_ENTER:
+        return {
+          [STEP_PREPARE]: onEnterPrepare,
+          [STEP_START]: onEnterStart,
+          [STEP_ACTIVE]: onEnterActive
+        };
+      case STATUS_LEAVE:
+        return {
+          [STEP_PREPARE]: onLeavePrepare,
+          [STEP_START]: onLeaveStart,
+          [STEP_ACTIVE]: onLeaveActive
+        };
+      default:
+        return {};
+    }
+  };
+  const eventHandlers = React.useMemo(() => getEventHandlers(currentStatus), [currentStatus]);
+  const [startStep, step] = useStepQueue(currentStatus, !supportMotion, newStep => {
+    // Only prepare step can be skip
+    if (newStep === STEP_PREPARE) {
+      const onPrepare = eventHandlers[STEP_PREPARE];
+      if (!onPrepare) {
+        return SkipStep;
+      }
+      return onPrepare(getDomElement());
+    }
+
+    // Rest step is sync update
+    if (newStep in eventHandlers) {
+      setStyle([eventHandlers[newStep]?.(getDomElement(), null) || null, newStep]);
+    }
+    if (newStep === STEP_ACTIVE && currentStatus !== STATUS_NONE) {
+      // Patch events when motion needed
+      patchMotionEvents(getDomElement());
+      if (motionDeadline > 0) {
+        clearTimeout(deadlineRef.current);
+        deadlineRef.current = setTimeout(() => {
+          onInternalMotionEnd({
+            deadline: true
+          });
+        }, motionDeadline);
+      }
+    }
+    if (newStep === STEP_PREPARED) {
+      updateMotionEndStatus();
+    }
+    return DoStep;
+  });
+  const active = isActive(step);
+  activeRef.current = active;
+
+  // ============================ Status ============================
+  const visibleRef = useRef(null);
+
+  // Update with new status
+  useIsomorphicLayoutEffect(() => {
+    // When use Suspense, the `visible` will repeat trigger,
+    // But not real change of the `visible`, we need to skip it.
+    // https://github.com/ant-design/ant-design/issues/44379
+    if (mountedRef.current && visibleRef.current === visible) {
+      return;
+    }
+    setAsyncVisible(visible);
+    const isMounted = mountedRef.current;
+    mountedRef.current = true;
+
+    // if (!supportMotion) {
+    //   return;
+    // }
+
+    let nextStatus;
+
+    // Appear
+    if (!isMounted && visible && motionAppear) {
+      nextStatus = STATUS_APPEAR;
+    }
+
+    // Enter
+    if (isMounted && visible && motionEnter) {
+      nextStatus = STATUS_ENTER;
+    }
+
+    // Leave
+    if (isMounted && !visible && motionLeave || !isMounted && motionLeaveImmediately && !visible && motionLeave) {
+      nextStatus = STATUS_LEAVE;
+    }
+    const nextEventHandlers = getEventHandlers(nextStatus);
+
+    // Update to next status
+    if (nextStatus && (supportMotion || nextEventHandlers[STEP_PREPARE])) {
+      setStatus(nextStatus);
+      startStep();
+    } else {
+      // Set back in case no motion but prev status has prepare step
+      setStatus(STATUS_NONE);
+    }
+    visibleRef.current = visible;
+  }, [visible]);
+
+  // ============================ Effect ============================
+  // Reset when motion changed
+  useEffect(() => {
+    if (
+    // Cancel appear
+    currentStatus === STATUS_APPEAR && !motionAppear ||
+    // Cancel enter
+    currentStatus === STATUS_ENTER && !motionEnter ||
+    // Cancel leave
+    currentStatus === STATUS_LEAVE && !motionLeave) {
+      setStatus(STATUS_NONE);
+    }
+  }, [motionAppear, motionEnter, motionLeave]);
+  useEffect(() => () => {
+    mountedRef.current = false;
+    clearTimeout(deadlineRef.current);
+  }, []);
+
+  // Trigger `onVisibleChanged`
+  const firstMountChangeRef = React.useRef(false);
+  useEffect(() => {
+    // [visible & motion not end] => [!visible & motion end] still need trigger onVisibleChanged
+    if (asyncVisible) {
+      firstMountChangeRef.current = true;
+    }
+    if (asyncVisible !== undefined && currentStatus === STATUS_NONE) {
+      // Skip first render is invisible since it's nothing changed
+      if (firstMountChangeRef.current || asyncVisible) {
+        onVisibleChanged?.(asyncVisible);
+      }
+      firstMountChangeRef.current = true;
+    }
+  }, [asyncVisible, currentStatus]);
+
+  // ============================ Styles ============================
+  let mergedStyle = style[0];
+  if (eventHandlers[STEP_PREPARE] && step === STEP_START) {
+    mergedStyle = {
+      transition: 'none',
+      ...mergedStyle
+    };
+  }
+  const styleStep = style[1];
+  return [getStatus, step, mergedStyle, asyncVisible ?? visible,
+  // Appear Check
+  !mountedRef.current && currentStatus === STATUS_NONE && supportMotion && motionAppear ? 'NONE' :
+  // Enter or Leave check
+  step === STEP_START || step === STEP_ACTIVE ? styleStep === step : true];
+}
+
+/* eslint-disable react/default-props-match-prop-types, react/no-multi-comp, react/prop-types */
+/**
+ * `transitionSupport` is used for none transition test case.
+ * Default we use browser transition event support check.
+ */
+function genCSSMotion(config) {
+  let transitionSupport = config;
+  if (typeof config === 'object') {
+    ({
+      transitionSupport
+    } = config);
+  }
+  function isSupportTransition(props, contextMotion) {
+    return !!(props.motionName && transitionSupport && contextMotion !== false);
+  }
+  const CSSMotion = /*#__PURE__*/React.forwardRef((props, ref) => {
+    const {
+      // Default config
+      visible = true,
+      removeOnLeave = true,
+      forceRender,
+      children,
+      motionName,
+      leavedClassName,
+      eventProps
+    } = props;
+    const {
+      motion: contextMotion
+    } = React.useContext(Context$1);
+    const supportMotion = isSupportTransition(props, contextMotion);
+
+    // Ref to the react node, it may be a HTMLElement
+    const nodeRef = useRef();
+    function getDomElement() {
+      return getDOM(nodeRef.current);
+    }
+    const [getStatus, statusStep, statusStyle, mergedVisible, styleReady] = useStatus(supportMotion, visible, getDomElement, props);
+    const status = getStatus();
+
+    // Record whether content has rendered
+    // Will return null for un-rendered even when `removeOnLeave={false}`
+    const renderedRef = React.useRef(mergedVisible);
+    if (mergedVisible) {
+      renderedRef.current = true;
+    }
+
+    // ====================== Refs ======================
+    const refObj = React.useMemo(() => {
+      const obj = {};
+      Object.defineProperties(obj, {
+        nativeElement: {
+          enumerable: true,
+          get: getDomElement
+        },
+        inMotion: {
+          enumerable: true,
+          get: () => () => getStatus() !== STATUS_NONE
+        },
+        enableMotion: {
+          enumerable: true,
+          get: () => () => supportMotion
+        }
+      });
+      return obj;
+    }, []);
+
+    // We lock `deps` here since function return object
+    // will repeat trigger ref from `refConfig` -> `null` -> `refConfig`
+    React.useImperativeHandle(ref, () => refObj, []);
+
+    // ===================== Render =====================
+    // return motionChildren as React.ReactElement;
+    const idRef = React.useRef(0);
+    if (styleReady) {
+      idRef.current += 1;
+    }
+
+    // We should render children when motionStyle is sync with stepStatus
+    return React.useMemo(() => {
+      if (styleReady === 'NONE') {
+        return null;
+      }
+      let motionChildren;
+      const mergedProps = {
+        ...eventProps,
+        visible
+      };
+      if (!children) {
+        // No children
+        motionChildren = null;
+      } else if (status === STATUS_NONE) {
+        // Stable children
+        if (mergedVisible) {
+          motionChildren = children({
+            ...mergedProps
+          }, nodeRef);
+        } else if (!removeOnLeave && renderedRef.current && leavedClassName) {
+          motionChildren = children({
+            ...mergedProps,
+            className: leavedClassName
+          }, nodeRef);
+        } else if (forceRender || !removeOnLeave && !leavedClassName) {
+          motionChildren = children({
+            ...mergedProps,
+            style: {
+              display: 'none'
+            }
+          }, nodeRef);
+        } else {
+          motionChildren = null;
+        }
+      } else {
+        // In motion
+        let statusSuffix;
+        if (statusStep === STEP_PREPARE) {
+          statusSuffix = 'prepare';
+        } else if (isActive(statusStep)) {
+          statusSuffix = 'active';
+        } else if (statusStep === STEP_START) {
+          statusSuffix = 'start';
+        }
+        const motionCls = getTransitionName(motionName, `${status}-${statusSuffix}`);
+        motionChildren = children({
+          ...mergedProps,
+          className: clsx(getTransitionName(motionName, status), {
+            [motionCls]: motionCls && statusSuffix,
+            [motionName]: typeof motionName === 'string'
+          }),
+          style: statusStyle
+        }, nodeRef);
+      }
+
+      // Auto inject ref if child node not have `ref` props
+      if ( /*#__PURE__*/React.isValidElement(motionChildren) && supportRef(motionChildren)) {
+        const originNodeRef = getNodeRef(motionChildren);
+        if (!originNodeRef) {
+          motionChildren = /*#__PURE__*/React.cloneElement(motionChildren, {
+            ref: nodeRef
+          });
+        }
+      }
+      return motionChildren;
+    }, [idRef.current]);
+  });
+  CSSMotion.displayName = 'CSSMotion';
+  return CSSMotion;
+}
+var CSSMotion = genCSSMotion(supportTransition);
+
+function Arrow(props) {
+  const {
+    prefixCls,
+    align,
+    arrow,
+    arrowPos
+  } = props;
+  const {
+    className,
+    content,
+    style
+  } = arrow || {};
+  const {
+    x = 0,
+    y = 0
+  } = arrowPos;
+  const arrowRef = React.useRef(null);
+
+  // Skip if no align
+  if (!align || !align.points) {
+    return null;
+  }
+  const alignStyle = {
+    position: 'absolute'
+  };
+
+  // Skip if no need to align
+  if (align.autoArrow !== false) {
+    const popupPoints = align.points[0];
+    const targetPoints = align.points[1];
+    const popupTB = popupPoints[0];
+    const popupLR = popupPoints[1];
+    const targetTB = targetPoints[0];
+    const 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;
+    }
+
+    // Left & Right
+    if (popupLR === targetLR || !['l', 'r'].includes(popupLR)) {
+      alignStyle.left = x;
+    } else if (popupLR === 'l') {
+      alignStyle.left = 0;
+    } else {
+      alignStyle.right = 0;
+    }
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    ref: arrowRef,
+    className: clsx(`${prefixCls}-arrow`, className),
+    style: {
+      ...alignStyle,
+      ...style
+    }
+  }, content);
+}
+
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function Mask(props) {
+  const {
+    prefixCls,
+    open,
+    zIndex,
+    mask,
+    motion,
+    mobile
+  } = props;
+  if (!mask) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(CSSMotion, _extends$1({}, motion, {
+    motionAppear: true,
+    visible: open,
+    removeOnLeave: true
+  }), ({
+    className
+  }) => /*#__PURE__*/React.createElement("div", {
+    style: {
+      zIndex
+    },
+    className: clsx(`${prefixCls}-mask`, mobile && `${prefixCls}-mobile-mask`, className)
+  }));
+}
+
+const PopupContent = /*#__PURE__*/React.memo(({
+  children
+}) => children, (_, next) => next.cache);
+if (process.env.NODE_ENV !== 'production') {
+  PopupContent.displayName = 'PopupContent';
+}
+
+function useOffsetStyle(isMobile, ready, open, align, offsetR, offsetB, offsetX, offsetY) {
+  // >>>>> Offset
+  const AUTO = 'auto';
+  const offsetStyle = isMobile ? {} : {
+    left: '-1000vw',
+    top: '-1000vh',
+    right: AUTO,
+    bottom: AUTO
+  };
+
+  // Set align style
+  if (!isMobile && (ready || !open)) {
+    const {
+      points
+    } = align;
+    const dynamicInset = align.dynamicInset || align._experimental?.dynamicInset;
+    const alignRight = dynamicInset && points[0][1] === 'r';
+    const 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;
+    }
+  }
+  return offsetStyle;
+}
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    onEsc,
+    popup,
+    className,
+    prefixCls,
+    style,
+    target,
+    onVisibleChanged,
+    // Open
+    open,
+    keepDom,
+    fresh,
+    // Click
+    onClick,
+    // Mask
+    mask,
+    // Arrow
+    arrow,
+    arrowPos,
+    align,
+    // Motion
+    motion,
+    maskMotion,
+    // Mobile
+    mobile,
+    // Portal
+    forceRender,
+    getPopupContainer,
+    autoDestroy,
+    portal: Portal,
+    children,
+    zIndex,
+    onMouseEnter,
+    onMouseLeave,
+    onPointerEnter,
+    onPointerDownCapture,
+    ready,
+    offsetX,
+    offsetY,
+    offsetR,
+    offsetB,
+    onAlign,
+    onPrepare,
+    // Resize
+    onResize,
+    stretch,
+    targetWidth,
+    targetHeight
+  } = props;
+  const popupContent = typeof popup === 'function' ? popup() : popup;
+
+  // We can not remove holder only when motion finished.
+  const isNodeVisible = open || keepDom;
+
+  // ========================= Mobile =========================
+  const isMobile = !!mobile;
+
+  // ========================== Mask ==========================
+  const [mergedMask, mergedMaskMotion, mergedPopupMotion] = React.useMemo(() => {
+    if (mobile) {
+      return [mobile.mask, mobile.maskMotion, mobile.motion];
+    }
+    return [mask, maskMotion, motion];
+  }, [mobile, mask, maskMotion, motion]);
+
+  // ======================= Container ========================
+  const getPopupContainerNeedParams = getPopupContainer?.length > 0;
+  const [show, setShow] = React.useState(!getPopupContainer || !getPopupContainerNeedParams);
+
+  // Delay to show since `getPopupContainer` need target element
+  useLayoutEffect(() => {
+    if (!show && getPopupContainerNeedParams && target) {
+      setShow(true);
+    }
+  }, [show, getPopupContainerNeedParams, target]);
+
+  // ========================= Resize =========================
+  const onInternalResize = useEvent((size, ele) => {
+    onResize?.(size, ele);
+    onAlign();
+  });
+
+  // ========================= Styles =========================
+  const offsetStyle = useOffsetStyle(isMobile, ready, open, align, offsetR, offsetB, offsetX, offsetY);
+
+  // ========================= Render =========================
+  if (!show) {
+    return null;
+  }
+
+  // >>>>> Misc
+  const 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.createElement(Portal, {
+    open: forceRender || isNodeVisible,
+    getContainer: getPopupContainer && (() => getPopupContainer(target)),
+    autoDestroy: autoDestroy,
+    onEsc: onEsc
+  }, /*#__PURE__*/React.createElement(Mask, {
+    prefixCls: prefixCls,
+    open: open,
+    zIndex: zIndex,
+    mask: mergedMask,
+    motion: mergedMaskMotion,
+    mobile: isMobile
+  }), /*#__PURE__*/React.createElement(RefResizeObserver, {
+    onResize: onInternalResize,
+    disabled: !open
+  }, resizeObserverRef => {
+    return /*#__PURE__*/React.createElement(CSSMotion, _extends({
+      motionAppear: true,
+      motionEnter: true,
+      motionLeave: true,
+      removeOnLeave: false,
+      forceRender: forceRender,
+      leavedClassName: `${prefixCls}-hidden`
+    }, mergedPopupMotion, {
+      onAppearPrepare: onPrepare,
+      onEnterPrepare: onPrepare,
+      visible: open,
+      onVisibleChanged: nextVisible => {
+        motion?.onVisibleChanged?.(nextVisible);
+        onVisibleChanged(nextVisible);
+      }
+    }), ({
+      className: motionClassName,
+      style: motionStyle
+    }, motionRef) => {
+      const cls = clsx(prefixCls, motionClassName, className, {
+        [`${prefixCls}-mobile`]: isMobile
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        ref: composeRef(resizeObserverRef, ref, motionRef),
+        className: cls,
+        style: {
+          '--arrow-x': `${arrowPos.x || 0}px`,
+          '--arrow-y': `${arrowPos.y || 0}px`,
+          ...offsetStyle,
+          ...miscStyle,
+          ...motionStyle,
+          boxSizing: 'border-box',
+          zIndex,
+          ...style
+        },
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onPointerEnter: onPointerEnter,
+        onClick: onClick,
+        onPointerDownCapture: onPointerDownCapture
+      }, arrow && /*#__PURE__*/React.createElement(Arrow, {
+        prefixCls: prefixCls,
+        arrow: arrow,
+        arrowPos: arrowPos,
+        align: align
+      }), /*#__PURE__*/React.createElement(PopupContent, {
+        cache: !open && !fresh
+      }, popupContent));
+    });
+  }), children);
+});
+if (process.env.NODE_ENV !== 'production') {
+  Popup.displayName = 'Popup';
+}
+
+// ===================== Nest =====================
+
+const TriggerContext = /*#__PURE__*/React.createContext(null);
+
+// ==================== Unique ====================
+
+const UniqueContext = /*#__PURE__*/React.createContext(null);
+
+function toArray(val) {
+  return val ? Array.isArray(val) ? val : [val] : [];
+}
+function useAction(action, showAction, hideAction) {
+  return React.useMemo(() => {
+    const mergedShowAction = toArray(showAction ?? action);
+    const mergedHideAction = toArray(hideAction ?? action);
+    const showActionSet = new Set(mergedShowAction);
+    const hideActionSet = new Set(mergedHideAction);
+    if (showActionSet.has('hover') && !showActionSet.has('click')) {
+      showActionSet.add('touch');
+    }
+    if (hideActionSet.has('hover') && !hideActionSet.has('click')) {
+      hideActionSet.add('touch');
+    }
+    return [showActionSet, hideActionSet];
+  }, [action, showAction, hideAction]);
+}
+
+var isVisible = (element => {
+  if (!element) {
+    return false;
+  }
+  if (element instanceof Element) {
+    if (element.offsetParent) {
+      return true;
+    }
+    if (element.getBBox) {
+      const {
+        width,
+        height
+      } = element.getBBox();
+      if (width || height) {
+        return true;
+      }
+    }
+    if (element.getBoundingClientRect) {
+      const {
+        width,
+        height
+      } = element.getBoundingClientRect();
+      if (width || height) {
+        return true;
+      }
+    }
+  }
+  return false;
+});
+
+function isPointsEq(a1 = [], a2 = [], isAlignPoint) {
+  const getVal = (a, index) => a[index] || '';
+  if (isAlignPoint) {
+    return getVal(a1, 0) === getVal(a2, 0);
+  }
+  return getVal(a1, 0) === getVal(a2, 0) && getVal(a1, 1) === getVal(a2, 1);
+}
+function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
+  const {
+    points
+  } = align;
+  const placements = Object.keys(builtinPlacements);
+  for (let i = 0; i < placements.length; i += 1) {
+    const placement = placements[i];
+    if (isPointsEq(builtinPlacements[placement]?.points, points, isAlignPoint)) {
+      return `${prefixCls}-placement-${placement}`;
+    }
+  }
+  return '';
+}
+function getWin(ele) {
+  return ele.ownerDocument.defaultView;
+}
+
+/**
+ * Get all the scrollable parent elements of the element
+ * @param ele       The element to be detected
+ * @param areaOnly  Only return the parent which will cut visible area
+ */
+function collectScroller(ele) {
+  const scrollerList = [];
+  let current = ele?.parentElement;
+  const scrollStyle = ['hidden', 'scroll', 'clip', 'auto'];
+  while (current) {
+    const {
+      overflowX,
+      overflowY,
+      overflow
+    } = getWin(current).getComputedStyle(current);
+    if ([overflowX, overflowY, overflow].some(o => scrollStyle.includes(o))) {
+      scrollerList.push(current);
+    }
+    current = current.parentElement;
+  }
+  return scrollerList;
+}
+function toNum(num, defaultValue = 1) {
+  return Number.isNaN(num) ? defaultValue : num;
+}
+function getPxValue(val) {
+  return toNum(parseFloat(val), 0);
+}
+/**
+ *
+ *
+ *  **************************************
+ *  *              Border                *
+ *  *     **************************     *
+ *  *     *                  *     *     *
+ *  *  B  *                  *  S  *  B  *
+ *  *  o  *                  *  c  *  o  *
+ *  *  r  *      Content     *  r  *  r  *
+ *  *  d  *                  *  o  *  d  *
+ *  *  e  *                  *  l  *  e  *
+ *  *  r  ********************  l  *  r  *
+ *  *     *        Scroll          *     *
+ *  *     **************************     *
+ *  *              Border                *
+ *  **************************************
+ *
+ */
+/**
+ * Get visible area of element
+ */
+function getVisibleArea(initArea, scrollerList) {
+  const visibleArea = {
+    ...initArea
+  };
+  (scrollerList || []).forEach(ele => {
+    if (ele instanceof HTMLBodyElement || ele instanceof HTMLHtmlElement) {
+      return;
+    }
+
+    // Skip if static position which will not affect visible area
+    const {
+      overflow,
+      overflowClipMargin,
+      borderTopWidth,
+      borderBottomWidth,
+      borderLeftWidth,
+      borderRightWidth
+    } = getWin(ele).getComputedStyle(ele);
+    const eleRect = ele.getBoundingClientRect();
+    const {
+      offsetHeight: eleOutHeight,
+      clientHeight: eleInnerHeight,
+      offsetWidth: eleOutWidth,
+      clientWidth: eleInnerWidth
+    } = ele;
+    const borderTopNum = getPxValue(borderTopWidth);
+    const borderBottomNum = getPxValue(borderBottomWidth);
+    const borderLeftNum = getPxValue(borderLeftWidth);
+    const borderRightNum = getPxValue(borderRightWidth);
+    const scaleX = toNum(Math.round(eleRect.width / eleOutWidth * 1000) / 1000);
+    const scaleY = toNum(Math.round(eleRect.height / eleOutHeight * 1000) / 1000);
+
+    // Original visible area
+    const eleScrollWidth = (eleOutWidth - eleInnerWidth - borderLeftNum - borderRightNum) * scaleX;
+    const eleScrollHeight = (eleOutHeight - eleInnerHeight - borderTopNum - borderBottomNum) * scaleY;
+
+    // Cut border size
+    const scaledBorderTopWidth = borderTopNum * scaleY;
+    const scaledBorderBottomWidth = borderBottomNum * scaleY;
+    const scaledBorderLeftWidth = borderLeftNum * scaleX;
+    const scaledBorderRightWidth = borderRightNum * scaleX;
+
+    // Clip margin
+    let clipMarginWidth = 0;
+    let clipMarginHeight = 0;
+    if (overflow === 'clip') {
+      const clipNum = getPxValue(overflowClipMargin);
+      clipMarginWidth = clipNum * scaleX;
+      clipMarginHeight = clipNum * scaleY;
+    }
+
+    // Region
+    const eleLeft = eleRect.x + scaledBorderLeftWidth - clipMarginWidth;
+    const eleTop = eleRect.y + scaledBorderTopWidth - clipMarginHeight;
+    const eleRight = eleLeft + eleRect.width + 2 * clipMarginWidth - scaledBorderLeftWidth - scaledBorderRightWidth - eleScrollWidth;
+    const eleBottom = eleTop + eleRect.height + 2 * clipMarginHeight - scaledBorderTopWidth - scaledBorderBottomWidth - eleScrollHeight;
+    visibleArea.left = Math.max(visibleArea.left, eleLeft);
+    visibleArea.top = Math.max(visibleArea.top, eleTop);
+    visibleArea.right = Math.min(visibleArea.right, eleRight);
+    visibleArea.bottom = Math.min(visibleArea.bottom, eleBottom);
+  });
+  return visibleArea;
+}
+
+function getUnitOffset(size, offset = 0) {
+  const offsetStr = `${offset}`;
+  const cells = offsetStr.match(/^(.*)\%$/);
+  if (cells) {
+    return size * (parseFloat(cells[1]) / 100);
+  }
+  return parseFloat(offsetStr);
+}
+function getNumberOffset(rect, offset) {
+  const [offsetX, offsetY] = offset || [];
+  return [getUnitOffset(rect.width, offsetX), getUnitOffset(rect.height, offsetY)];
+}
+function splitPoints(points = '') {
+  return [points[0], points[1]];
+}
+function getAlignPoint(rect, points) {
+  const topBottom = points[0];
+  const leftRight = points[1];
+  let x;
+  let y;
+
+  // Top & Bottom
+  if (topBottom === 't') {
+    y = rect.y;
+  } else if (topBottom === 'b') {
+    y = rect.y + rect.height;
+  } else {
+    y = rect.y + rect.height / 2;
+  }
+
+  // Left & Right
+  if (leftRight === 'l') {
+    x = rect.x;
+  } else if (leftRight === 'r') {
+    x = rect.x + rect.width;
+  } else {
+    x = rect.x + rect.width / 2;
+  }
+  return {
+    x,
+    y
+  };
+}
+function reversePoints(points, index) {
+  const reverseMap = {
+    t: 'b',
+    b: 't',
+    l: 'r',
+    r: 'l'
+  };
+  const clone = [...points];
+  clone[index] = reverseMap[points[index]] || 'c';
+  return clone;
+}
+function flatPoints(points) {
+  return points.join('');
+}
+function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign, mobile) {
+  const [offsetInfo, setOffsetInfo] = React.useState({
+    ready: false,
+    offsetX: 0,
+    offsetY: 0,
+    offsetR: 0,
+    offsetB: 0,
+    arrowX: 0,
+    arrowY: 0,
+    scaleX: 1,
+    scaleY: 1,
+    align: builtinPlacements[placement] || {}
+  });
+  const alignCountRef = React.useRef(0);
+  const scrollerList = React.useMemo(() => {
+    if (!popupEle || mobile) {
+      return [];
+    }
+    return collectScroller(popupEle);
+  }, [popupEle]);
+
+  // ========================= Flip ==========================
+  // We will memo flip info.
+  // If size change to make flip, it will memo the flip info and use it in next align.
+  const prevFlipRef = React.useRef({});
+  const resetFlipCache = () => {
+    prevFlipRef.current = {};
+  };
+  if (!open) {
+    resetFlipCache();
+  }
+
+  // ========================= Align =========================
+  const onAlign = useEvent(() => {
+    if (popupEle && target && open && !mobile) {
+      const popupElement = popupEle;
+      const doc = popupElement.ownerDocument;
+      const win = getWin(popupElement);
+      const {
+        position: popupPosition
+      } = win.getComputedStyle(popupElement);
+      const originLeft = popupElement.style.left;
+      const originTop = popupElement.style.top;
+      const originRight = popupElement.style.right;
+      const originBottom = popupElement.style.bottom;
+      const originOverflow = popupElement.style.overflow;
+
+      // Placement
+      const placementInfo = {
+        ...builtinPlacements[placement],
+        ...popupAlign
+      };
+
+      // placeholder element
+      const placeholderElement = doc.createElement('div');
+      popupElement.parentElement?.appendChild(placeholderElement);
+      placeholderElement.style.left = `${popupElement.offsetLeft}px`;
+      placeholderElement.style.top = `${popupElement.offsetTop}px`;
+      placeholderElement.style.position = popupPosition;
+      placeholderElement.style.height = `${popupElement.offsetHeight}px`;
+      placeholderElement.style.width = `${popupElement.offsetWidth}px`;
+
+      // Reset first
+      popupElement.style.left = '0';
+      popupElement.style.top = '0';
+      popupElement.style.right = 'auto';
+      popupElement.style.bottom = 'auto';
+      popupElement.style.overflow = 'hidden';
+
+      // Calculate align style, we should consider `transform` case
+      let targetRect;
+      if (Array.isArray(target)) {
+        targetRect = {
+          x: target[0],
+          y: target[1],
+          width: 0,
+          height: 0
+        };
+      } else {
+        const rect = target.getBoundingClientRect();
+        rect.x = rect.x ?? rect.left;
+        rect.y = rect.y ?? rect.top;
+        targetRect = {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height
+        };
+      }
+      const popupRect = popupElement.getBoundingClientRect();
+      const {
+        height,
+        width
+      } = win.getComputedStyle(popupElement);
+      popupRect.x = popupRect.x ?? popupRect.left;
+      popupRect.y = popupRect.y ?? popupRect.top;
+      const {
+        clientWidth,
+        clientHeight,
+        scrollWidth,
+        scrollHeight,
+        scrollTop,
+        scrollLeft
+      } = doc.documentElement;
+      const popupHeight = popupRect.height;
+      const popupWidth = popupRect.width;
+      const targetHeight = targetRect.height;
+      const targetWidth = targetRect.width;
+
+      // Get bounding of visible area
+      const visibleRegion = {
+        left: 0,
+        top: 0,
+        right: clientWidth,
+        bottom: clientHeight
+      };
+      const scrollRegion = {
+        left: -scrollLeft,
+        top: -scrollTop,
+        right: scrollWidth - scrollLeft,
+        bottom: scrollHeight - scrollTop
+      };
+      let {
+        htmlRegion
+      } = placementInfo;
+      const VISIBLE = 'visible';
+      const VISIBLE_FIRST = 'visibleFirst';
+      if (htmlRegion !== 'scroll' && htmlRegion !== VISIBLE_FIRST) {
+        htmlRegion = VISIBLE;
+      }
+      const isVisibleFirst = htmlRegion === VISIBLE_FIRST;
+      const scrollRegionArea = getVisibleArea(scrollRegion, scrollerList);
+      const visibleRegionArea = getVisibleArea(visibleRegion, scrollerList);
+      const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
+
+      // When set to `visibleFirst`,
+      // the check `adjust` logic will use `visibleRegion` for check first.
+      const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
+
+      // Record right & bottom align data
+      popupElement.style.left = 'auto';
+      popupElement.style.top = 'auto';
+      popupElement.style.right = '0';
+      popupElement.style.bottom = '0';
+      const popupMirrorRect = popupElement.getBoundingClientRect();
+
+      // Reset back
+      popupElement.style.left = originLeft;
+      popupElement.style.top = originTop;
+      popupElement.style.right = originRight;
+      popupElement.style.bottom = originBottom;
+      popupElement.style.overflow = originOverflow;
+      popupElement.parentElement?.removeChild(placeholderElement);
+
+      // Calculate scale
+      const scaleX = toNum(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);
+      const scaleY = toNum(Math.round(popupHeight / parseFloat(height) * 1000) / 1000);
+
+      // No need to align since it's not visible in view
+      if (scaleX === 0 || scaleY === 0 || isDOM(target) && !isVisible(target)) {
+        return;
+      }
+
+      // Offset
+      const {
+        offset,
+        targetOffset
+      } = placementInfo;
+      let [popupOffsetX, popupOffsetY] = getNumberOffset(popupRect, offset);
+      const [targetOffsetX, targetOffsetY] = getNumberOffset(targetRect, targetOffset);
+      targetRect.x -= targetOffsetX;
+      targetRect.y -= targetOffsetY;
+
+      // Points
+      const [popupPoint, targetPoint] = placementInfo.points || [];
+      const targetPoints = splitPoints(targetPoint);
+      const popupPoints = splitPoints(popupPoint);
+      const targetAlignPoint = getAlignPoint(targetRect, targetPoints);
+      const popupAlignPoint = getAlignPoint(popupRect, popupPoints);
+
+      // Real align info may not same as origin one
+      const nextAlignInfo = {
+        ...placementInfo
+      };
+      let nextPoints = [popupPoints, targetPoints];
+
+      // Next Offset
+      let nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
+      let nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
+
+      // ============== Intersection ===============
+      // Get area by position. Used for check if flip area is better
+      function getIntersectionVisibleArea(offsetX, offsetY, area = visibleArea) {
+        const l = popupRect.x + offsetX;
+        const t = popupRect.y + offsetY;
+        const r = l + popupWidth;
+        const b = t + popupHeight;
+        const visibleL = Math.max(l, area.left);
+        const visibleT = Math.max(t, area.top);
+        const visibleR = Math.min(r, area.right);
+        const visibleB = Math.min(b, area.bottom);
+        return Math.max(0, (visibleR - visibleL) * (visibleB - visibleT));
+      }
+      const originIntersectionVisibleArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY);
+
+      // As `visibleFirst`, we prepare this for check
+      const originIntersectionRecommendArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY, visibleRegionArea);
+
+      // ========================== Overflow ===========================
+      const targetAlignPointTL = getAlignPoint(targetRect, ['t', 'l']);
+      const popupAlignPointTL = getAlignPoint(popupRect, ['t', 'l']);
+      const targetAlignPointBR = getAlignPoint(targetRect, ['b', 'r']);
+      const popupAlignPointBR = getAlignPoint(popupRect, ['b', 'r']);
+      const overflow = placementInfo.overflow || {};
+      const {
+        adjustX,
+        adjustY,
+        shiftX,
+        shiftY
+      } = overflow;
+      const supportAdjust = val => {
+        if (typeof val === 'boolean') {
+          return val;
+        }
+        return val >= 0;
+      };
+
+      // Prepare position
+      let nextPopupY;
+      let nextPopupBottom;
+      let nextPopupX;
+      let nextPopupRight;
+      function syncNextPopupPosition() {
+        nextPopupY = popupRect.y + nextOffsetY;
+        nextPopupBottom = nextPopupY + popupHeight;
+        nextPopupX = popupRect.x + nextOffsetX;
+        nextPopupRight = nextPopupX + popupWidth;
+      }
+      syncNextPopupPosition();
+
+      // >>>>>>>>>> Top & Bottom
+      const needAdjustY = supportAdjust(adjustY);
+      const sameTB = popupPoints[0] === targetPoints[0];
+
+      // Bottom to Top
+      if (needAdjustY && popupPoints[0] === 't' && (nextPopupBottom > adjustCheckVisibleArea.bottom || prevFlipRef.current.bt)) {
+        let tmpNextOffsetY = nextOffsetY;
+        if (sameTB) {
+          tmpNextOffsetY -= popupHeight - targetHeight;
+        } else {
+          tmpNextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
+        }
+        const newVisibleArea = getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY);
+        const newVisibleRecommendArea = getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY, visibleRegionArea);
+        if (
+        // Of course use larger one
+        newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst ||
+        // Choose recommend one
+        newVisibleRecommendArea >= originIntersectionRecommendArea)) {
+          prevFlipRef.current.bt = true;
+          nextOffsetY = tmpNextOffsetY;
+          popupOffsetY = -popupOffsetY;
+          nextPoints = [reversePoints(nextPoints[0], 0), reversePoints(nextPoints[1], 0)];
+        } else {
+          prevFlipRef.current.bt = false;
+        }
+      }
+
+      // Top to Bottom
+      if (needAdjustY && popupPoints[0] === 'b' && (nextPopupY < adjustCheckVisibleArea.top || prevFlipRef.current.tb)) {
+        let tmpNextOffsetY = nextOffsetY;
+        if (sameTB) {
+          tmpNextOffsetY += popupHeight - targetHeight;
+        } else {
+          tmpNextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
+        }
+        const newVisibleArea = getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY);
+        const newVisibleRecommendArea = getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY, visibleRegionArea);
+        if (
+        // Of course use larger one
+        newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst ||
+        // Choose recommend one
+        newVisibleRecommendArea >= originIntersectionRecommendArea)) {
+          prevFlipRef.current.tb = true;
+          nextOffsetY = tmpNextOffsetY;
+          popupOffsetY = -popupOffsetY;
+          nextPoints = [reversePoints(nextPoints[0], 0), reversePoints(nextPoints[1], 0)];
+        } else {
+          prevFlipRef.current.tb = false;
+        }
+      }
+
+      // >>>>>>>>>> Left & Right
+      const needAdjustX = supportAdjust(adjustX);
+
+      // >>>>> Flip
+      const sameLR = popupPoints[1] === targetPoints[1];
+
+      // Right to Left
+      if (needAdjustX && popupPoints[1] === 'l' && (nextPopupRight > adjustCheckVisibleArea.right || prevFlipRef.current.rl)) {
+        let tmpNextOffsetX = nextOffsetX;
+        if (sameLR) {
+          tmpNextOffsetX -= popupWidth - targetWidth;
+        } else {
+          tmpNextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
+        }
+        const newVisibleArea = getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY);
+        const newVisibleRecommendArea = getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY, visibleRegionArea);
+        if (
+        // Of course use larger one
+        newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst ||
+        // Choose recommend one
+        newVisibleRecommendArea >= originIntersectionRecommendArea)) {
+          prevFlipRef.current.rl = true;
+          nextOffsetX = tmpNextOffsetX;
+          popupOffsetX = -popupOffsetX;
+          nextPoints = [reversePoints(nextPoints[0], 1), reversePoints(nextPoints[1], 1)];
+        } else {
+          prevFlipRef.current.rl = false;
+        }
+      }
+
+      // Left to Right
+      if (needAdjustX && popupPoints[1] === 'r' && (nextPopupX < adjustCheckVisibleArea.left || prevFlipRef.current.lr)) {
+        let tmpNextOffsetX = nextOffsetX;
+        if (sameLR) {
+          tmpNextOffsetX += popupWidth - targetWidth;
+        } else {
+          tmpNextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
+        }
+        const newVisibleArea = getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY);
+        const newVisibleRecommendArea = getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY, visibleRegionArea);
+        if (
+        // Of course use larger one
+        newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst ||
+        // Choose recommend one
+        newVisibleRecommendArea >= originIntersectionRecommendArea)) {
+          prevFlipRef.current.lr = true;
+          nextOffsetX = tmpNextOffsetX;
+          popupOffsetX = -popupOffsetX;
+          nextPoints = [reversePoints(nextPoints[0], 1), reversePoints(nextPoints[1], 1)];
+        } else {
+          prevFlipRef.current.lr = false;
+        }
+      }
+      nextAlignInfo.points = [flatPoints(nextPoints[0]), flatPoints(nextPoints[1])];
+
+      // ============================ Shift ============================
+      syncNextPopupPosition();
+      const numShiftX = shiftX === true ? 0 : shiftX;
+      if (typeof numShiftX === 'number') {
+        // Left
+        if (nextPopupX < visibleRegionArea.left) {
+          nextOffsetX -= nextPopupX - visibleRegionArea.left - popupOffsetX;
+          if (targetRect.x + targetWidth < visibleRegionArea.left + numShiftX) {
+            nextOffsetX += targetRect.x - visibleRegionArea.left + targetWidth - numShiftX;
+          }
+        }
+
+        // Right
+        if (nextPopupRight > visibleRegionArea.right) {
+          nextOffsetX -= nextPopupRight - visibleRegionArea.right - popupOffsetX;
+          if (targetRect.x > visibleRegionArea.right - numShiftX) {
+            nextOffsetX += targetRect.x - visibleRegionArea.right + numShiftX;
+          }
+        }
+      }
+      const 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
+      const popupLeft = popupRect.x + nextOffsetX;
+      const popupRight = popupLeft + popupWidth;
+      const popupTop = popupRect.y + nextOffsetY;
+      const popupBottom = popupTop + popupHeight;
+      const targetLeft = targetRect.x;
+      const targetRight = targetLeft + targetWidth;
+      const targetTop = targetRect.y;
+      const targetBottom = targetTop + targetHeight;
+
+      /** Max left of the popup and target element */
+      const maxLeft = Math.max(popupLeft, targetLeft);
+      /** Min right of the popup and target element */
+      const minRight = Math.min(popupRight, targetRight);
+
+      /** The center X of popup & target cross area */
+      const xCenter = (maxLeft + minRight) / 2;
+      /** Arrow X of popup offset */
+      const nextArrowX = xCenter - popupLeft;
+      const maxTop = Math.max(popupTop, targetTop);
+      const minBottom = Math.min(popupBottom, targetBottom);
+      const yCenter = (maxTop + minBottom) / 2;
+      const nextArrowY = yCenter - popupTop;
+      onPopupAlign?.(popupEle, nextAlignInfo);
+
+      // Additional calculate right & bottom position
+      let offsetX4Right = popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);
+      let offsetY4Bottom = popupMirrorRect.bottom - popupRect.y - (nextOffsetY + popupRect.height);
+      if (scaleX === 1) {
+        nextOffsetX = Math.floor(nextOffsetX);
+        offsetX4Right = Math.floor(offsetX4Right);
+      }
+      if (scaleY === 1) {
+        nextOffsetY = Math.floor(nextOffsetY);
+        offsetY4Bottom = Math.floor(offsetY4Bottom);
+      }
+      const nextOffsetInfo = {
+        ready: true,
+        offsetX: nextOffsetX / scaleX,
+        offsetY: nextOffsetY / scaleY,
+        offsetR: offsetX4Right / scaleX,
+        offsetB: offsetY4Bottom / scaleY,
+        arrowX: nextArrowX / scaleX,
+        arrowY: nextArrowY / scaleY,
+        scaleX,
+        scaleY,
+        align: nextAlignInfo
+      };
+      setOffsetInfo(nextOffsetInfo);
+    }
+  });
+  const triggerAlign = () => {
+    alignCountRef.current += 1;
+    const id = alignCountRef.current;
+
+    // Merge all align requirement into one frame
+    Promise.resolve().then(() => {
+      if (alignCountRef.current === id) {
+        onAlign();
+      }
+    });
+  };
+
+  // Reset ready status when placement & open changed
+  const resetReady = () => {
+    setOffsetInfo(ori => ({
+      ...ori,
+      ready: false
+    }));
+  };
+  useLayoutEffect(resetReady, [placement]);
+  useLayoutEffect(() => {
+    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 useDelay() {
+  const delayRef = React.useRef(null);
+  const clearDelay = () => {
+    if (delayRef.current) {
+      clearTimeout(delayRef.current);
+      delayRef.current = null;
+    }
+  };
+  const delayInvoke = (callback, delay) => {
+    clearDelay();
+    if (delay === 0) {
+      callback();
+    } else {
+      delayRef.current = setTimeout(() => {
+        callback();
+      }, delay * 1000);
+    }
+  };
+
+  // Clean up on unmount
+  React.useEffect(() => {
+    return () => {
+      clearDelay();
+    };
+  }, []);
+  return delayInvoke;
+}
+
+function useWatch(open, target, popup, onAlign, onScroll) {
+  useLayoutEffect(() => {
+    if (open && target && popup) {
+      const targetElement = target;
+      const popupElement = popup;
+      const targetScrollList = collectScroller(targetElement);
+      const popupScrollList = collectScroller(popupElement);
+      const win = getWin(popupElement);
+      const mergedList = new Set([win, ...targetScrollList, ...popupScrollList]);
+      function notifyScroll() {
+        onAlign();
+        onScroll();
+      }
+      mergedList.forEach(scroller => {
+        scroller.addEventListener('scroll', notifyScroll, {
+          passive: true
+        });
+      });
+      win.addEventListener('resize', notifyScroll, {
+        passive: true
+      });
+
+      // First time always do align
+      onAlign();
+      return () => {
+        mergedList.forEach(scroller => {
+          scroller.removeEventListener('scroll', notifyScroll);
+          win.removeEventListener('resize', notifyScroll);
+        });
+      };
+    }
+  }, [open, target, popup]);
+}
+
+/**
+ * Close if click on the window.
+ * Return the function that click on the Popup element.
+ */
+function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen) {
+  const openRef = React.useRef(open);
+  openRef.current = open;
+  const popupPointerDownRef = React.useRef(false);
+
+  // Click to hide is special action since click popup element should not hide
+  React.useEffect(() => {
+    if (clickToHide && popupEle && (!mask || maskClosable)) {
+      const onPointerDown = () => {
+        popupPointerDownRef.current = false;
+      };
+      const onTriggerClose = e => {
+        if (openRef.current && !inPopupOrChild(e.composedPath?.()?.[0] || e.target) && !popupPointerDownRef.current) {
+          triggerOpen(false);
+        }
+      };
+      const win = getWin(popupEle);
+      win.addEventListener('pointerdown', onPointerDown, true);
+      win.addEventListener('mousedown', onTriggerClose, true);
+      win.addEventListener('contextmenu', onTriggerClose, true);
+
+      // shadow root
+      const targetShadowRoot = getShadowRoot(targetEle);
+      if (targetShadowRoot) {
+        targetShadowRoot.addEventListener('mousedown', onTriggerClose, true);
+        targetShadowRoot.addEventListener('contextmenu', onTriggerClose, true);
+      }
+
+      // Warning if target and popup not in same root
+      if (process.env.NODE_ENV !== 'production' && targetEle) {
+        const targetRoot = targetEle.getRootNode?.();
+        const popupRoot = popupEle.getRootNode?.();
+        warning(targetRoot === popupRoot, `trigger element and popup element should in same shadow root.`);
+      }
+      return () => {
+        win.removeEventListener('pointerdown', onPointerDown, true);
+        win.removeEventListener('mousedown', onTriggerClose, true);
+        win.removeEventListener('contextmenu', onTriggerClose, true);
+        if (targetShadowRoot) {
+          targetShadowRoot.removeEventListener('mousedown', onTriggerClose, true);
+          targetShadowRoot.removeEventListener('contextmenu', onTriggerClose, true);
+        }
+      };
+    }
+  }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
+  function onPopupPointerDown() {
+    popupPointerDownRef.current = true;
+  }
+  return onPopupPointerDown;
+}
+
+// Removed Props List
+// Seems this can be auto
+// getDocument?: (element?: HTMLElement) => Document;
+
+// New version will not wrap popup with `rc-trigger-popup-content` when multiple children
+
+function generateTrigger(PortalComponent = Portal) {
+  const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
+    const {
+      prefixCls = 'rc-trigger-popup',
+      children,
+      // Action
+      action = 'hover',
+      showAction,
+      hideAction,
+      // Open
+      popupVisible,
+      defaultPopupVisible,
+      onOpenChange,
+      afterOpenChange,
+      onPopupVisibleChange,
+      afterPopupVisibleChange,
+      // Delay
+      mouseEnterDelay,
+      mouseLeaveDelay = 0.1,
+      focusDelay,
+      blurDelay,
+      // Mask
+      mask,
+      maskClosable = true,
+      // Portal
+      getPopupContainer,
+      forceRender,
+      autoDestroy,
+      // Popup
+      popup,
+      popupClassName,
+      uniqueContainerClassName,
+      uniqueContainerStyle,
+      popupStyle,
+      popupPlacement,
+      builtinPlacements = {},
+      popupAlign,
+      zIndex,
+      stretch,
+      getPopupClassNameFromAlign,
+      fresh,
+      unique,
+      alignPoint,
+      onPopupClick,
+      onPopupAlign,
+      // Arrow
+      arrow,
+      // Motion
+      popupMotion,
+      maskMotion,
+      // Private
+      mobile,
+      ...restProps
+    } = props;
+    const mergedAutoDestroy = autoDestroy || false;
+    const openUncontrolled = popupVisible === undefined;
+
+    // =========================== Mobile ===========================
+    const isMobile = !!mobile;
+
+    // ========================== Context ===========================
+    const subPopupElements = React.useRef({});
+    const parentContext = React.useContext(TriggerContext);
+    const context = React.useMemo(() => {
+      return {
+        registerSubPopup: (id, subPopupEle) => {
+          subPopupElements.current[id] = subPopupEle;
+          parentContext?.registerSubPopup(id, subPopupEle);
+        }
+      };
+    }, [parentContext]);
+
+    // ======================== UniqueContext =========================
+    const uniqueContext = React.useContext(UniqueContext);
+
+    // =========================== Popup ============================
+    const id = useId();
+    const [popupEle, setPopupEle] = React.useState(null);
+
+    // Used for forwardRef popup. Not use internal
+    const externalPopupRef = React.useRef(null);
+    const setPopupRef = useEvent(node => {
+      externalPopupRef.current = node;
+      if (isDOM(node) && popupEle !== node) {
+        setPopupEle(node);
+      }
+      parentContext?.registerSubPopup(id, node);
+    });
+
+    // =========================== Target ===========================
+    // Use state to control here since `useRef` update not trigger render
+    const [targetEle, setTargetEle] = React.useState(null);
+
+    // Used for forwardRef target. Not use internal
+    const externalForwardRef = React.useRef(null);
+    const setTargetRef = useEvent(node => {
+      const domNode = getDOM(node);
+      if (isDOM(domNode) && targetEle !== domNode) {
+        setTargetEle(domNode);
+        externalForwardRef.current = domNode;
+      }
+    });
+    const cloneProps = {};
+    const inPopupOrChild = useEvent(ele => {
+      const childDOM = targetEle;
+      return childDOM?.contains(ele) || getShadowRoot(childDOM)?.host === ele || ele === childDOM || popupEle?.contains(ele) || getShadowRoot(popupEle)?.host === ele || ele === popupEle || Object.values(subPopupElements.current).some(subPopupEle => subPopupEle?.contains(ele) || ele === subPopupEle);
+    });
+
+    // =========================== Arrow ============================
+    const innerArrow = arrow ? {
+      // true and Object likely
+      ...(arrow !== true ? arrow : {})
+    } : null;
+
+    // ============================ Open ============================
+    const [internalOpen, setInternalOpen] = useControlledState(defaultPopupVisible || false, popupVisible);
+    const mergedOpen = internalOpen || false;
+
+    // ========================== Children ==========================
+    const child = React.useMemo(() => {
+      const nextChild = typeof children === 'function' ? children({
+        open: mergedOpen
+      }) : children;
+      return React.Children.only(nextChild);
+    }, [children, mergedOpen]);
+    const originChildProps = child?.props || {};
+
+    // Support ref
+    const isOpen = useEvent(() => mergedOpen);
+
+    // Extract common options for UniqueProvider
+    const getUniqueOptions = useEvent((delay = 0) => ({
+      popup,
+      target: targetEle,
+      delay,
+      prefixCls,
+      popupClassName,
+      uniqueContainerClassName,
+      uniqueContainerStyle,
+      popupStyle,
+      popupPlacement,
+      builtinPlacements,
+      popupAlign,
+      zIndex,
+      mask,
+      maskClosable,
+      popupMotion,
+      maskMotion,
+      arrow: innerArrow,
+      getPopupContainer,
+      getPopupClassNameFromAlign,
+      id,
+      onEsc
+    }));
+
+    // Handle controlled state changes for UniqueProvider
+    // Only sync to UniqueProvider when it's controlled mode
+    // If there is a parentContext, don't call uniqueContext methods
+    useLayoutEffect(() => {
+      if (uniqueContext && unique && targetEle && !openUncontrolled && !parentContext) {
+        if (mergedOpen) {
+          uniqueContext.show(getUniqueOptions(mouseEnterDelay), isOpen);
+        } else {
+          uniqueContext.hide(mouseLeaveDelay);
+        }
+      }
+    }, [mergedOpen, targetEle]);
+    const openRef = React.useRef(mergedOpen);
+    openRef.current = mergedOpen;
+    const internalTriggerOpen = useEvent(nextOpen => {
+      flushSync(() => {
+        if (mergedOpen !== nextOpen) {
+          setInternalOpen(nextOpen);
+          onOpenChange?.(nextOpen);
+          onPopupVisibleChange?.(nextOpen);
+        }
+      });
+    });
+
+    // Trigger for delay
+    const delayInvoke = useDelay();
+    const triggerOpen = (nextOpen, delay = 0) => {
+      // If it's controlled mode, always use internal trigger logic
+      // UniqueProvider will be synced through useLayoutEffect
+      if (popupVisible !== undefined) {
+        delayInvoke(() => {
+          internalTriggerOpen(nextOpen);
+        }, delay);
+        return;
+      }
+
+      // If UniqueContext exists and not controlled, pass delay to Provider instead of handling it internally
+      // If there is a parentContext, don't call uniqueContext methods
+      if (uniqueContext && unique && openUncontrolled && !parentContext) {
+        if (nextOpen) {
+          uniqueContext.show(getUniqueOptions(delay), isOpen);
+        } else {
+          uniqueContext.hide(delay);
+        }
+        return;
+      }
+      delayInvoke(() => {
+        internalTriggerOpen(nextOpen);
+      }, delay);
+    };
+    function onEsc({
+      top
+    }) {
+      if (top) {
+        triggerOpen(false);
+      }
+    }
+
+    // ========================== Motion ============================
+    const [inMotion, setInMotion] = React.useState(false);
+    useLayoutEffect(firstMount => {
+      if (!firstMount || mergedOpen) {
+        setInMotion(true);
+      }
+    }, [mergedOpen]);
+    const [motionPrepareResolve, setMotionPrepareResolve] = React.useState(null);
+
+    // =========================== Align ============================
+    const [mousePos, setMousePos] = React.useState(null);
+    const setMousePosByEvent = event => {
+      setMousePos([event.clientX, event.clientY]);
+    };
+    const [ready, offsetX, offsetY, offsetR, offsetB, arrowX, arrowY, scaleX, scaleY, alignInfo, onAlign] = useAlign(mergedOpen, popupEle, alignPoint && mousePos !== null ? mousePos : targetEle, popupPlacement, builtinPlacements, popupAlign, onPopupAlign, isMobile);
+    const [showActions, hideActions] = useAction(action, showAction, hideAction);
+    const clickToShow = showActions.has('click');
+    const clickToHide = hideActions.has('click') || hideActions.has('contextMenu');
+    const triggerAlign = useEvent(() => {
+      if (!inMotion) {
+        onAlign();
+      }
+    });
+    const onScroll = () => {
+      if (openRef.current && alignPoint && clickToHide) {
+        triggerOpen(false);
+      }
+    };
+    useWatch(mergedOpen, targetEle, popupEle, triggerAlign, onScroll);
+    useLayoutEffect(() => {
+      triggerAlign();
+    }, [mousePos, popupPlacement]);
+
+    // When no builtinPlacements and popupAlign changed
+    useLayoutEffect(() => {
+      if (mergedOpen && !builtinPlacements?.[popupPlacement]) {
+        triggerAlign();
+      }
+    }, [JSON.stringify(popupAlign)]);
+    const alignedClassName = React.useMemo(() => {
+      const baseClassName = getAlignPopupClassName(builtinPlacements, prefixCls, alignInfo, alignPoint);
+      return clsx(baseClassName, getPopupClassNameFromAlign?.(alignInfo));
+    }, [alignInfo, getPopupClassNameFromAlign, builtinPlacements, prefixCls, alignPoint]);
+
+    // ============================ Refs ============================
+    React.useImperativeHandle(ref, () => ({
+      nativeElement: externalForwardRef.current,
+      popupElement: externalPopupRef.current,
+      forceAlign: triggerAlign
+    }));
+
+    // ========================== Stretch ===========================
+    const [targetWidth, setTargetWidth] = React.useState(0);
+    const [targetHeight, setTargetHeight] = React.useState(0);
+    const syncTargetSize = () => {
+      if (stretch && targetEle) {
+        const rect = targetEle.getBoundingClientRect();
+        setTargetWidth(rect.width);
+        setTargetHeight(rect.height);
+      }
+    };
+    const onTargetResize = () => {
+      syncTargetSize();
+      triggerAlign();
+    };
+
+    // ========================== Motion ============================
+    const onVisibleChanged = visible => {
+      setInMotion(false);
+      onAlign();
+      afterOpenChange?.(visible);
+      afterPopupVisibleChange?.(visible);
+    };
+
+    // We will trigger align when motion is in prepare
+    const onPrepare = () => new Promise(resolve => {
+      syncTargetSize();
+      setMotionPrepareResolve(() => resolve);
+    });
+    useLayoutEffect(() => {
+      if (motionPrepareResolve) {
+        onAlign();
+        motionPrepareResolve();
+        setMotionPrepareResolve(null);
+      }
+    }, [motionPrepareResolve]);
+
+    // =========================== Action ===========================
+    /**
+     * Util wrapper for trigger action
+     * @param eventName  Listen event name
+     * @param nextOpen  Next open state after trigger
+     * @param delay Delay to trigger open change
+     * @param callback Callback if current event need additional action
+     * @param ignoreCheck  Ignore current event if check return true
+     */
+    function wrapperAction(eventName, nextOpen, delay, callback, ignoreCheck) {
+      cloneProps[eventName] = (event, ...args) => {
+        if (!ignoreCheck || !ignoreCheck()) {
+          callback?.(event);
+          triggerOpen(nextOpen, delay);
+        }
+
+        // Pass to origin
+        originChildProps[eventName]?.(event, ...args);
+      };
+    }
+
+    // ======================= Action: Touch ========================
+    const touchToShow = showActions.has('touch');
+    const touchToHide = hideActions.has('touch');
+
+    /** Used for prevent `hover` event conflict with mobile env */
+    const touchedRef = React.useRef(false);
+    if (touchToShow || touchToHide) {
+      cloneProps.onTouchStart = (...args) => {
+        touchedRef.current = true;
+        if (openRef.current && touchToHide) {
+          triggerOpen(false);
+        } else if (!openRef.current && touchToShow) {
+          triggerOpen(true);
+        }
+
+        // Pass to origin
+        originChildProps.onTouchStart?.(...args);
+      };
+    }
+
+    // ======================= Action: Click ========================
+    if (clickToShow || clickToHide) {
+      cloneProps.onClick = (event, ...args) => {
+        if (openRef.current && clickToHide) {
+          triggerOpen(false);
+        } else if (!openRef.current && clickToShow) {
+          setMousePosByEvent(event);
+          triggerOpen(true);
+        }
+
+        // Pass to origin
+        originChildProps.onClick?.(event, ...args);
+        touchedRef.current = false;
+      };
+    }
+
+    // Click to hide is special action since click popup element should not hide
+    const onPopupPointerDown = useWinClick(mergedOpen, clickToHide || touchToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen);
+
+    // ======================= Action: Hover ========================
+    const hoverToShow = showActions.has('hover');
+    const hoverToHide = hideActions.has('hover');
+    let onPopupMouseEnter;
+    let onPopupMouseLeave;
+    const ignoreMouseTrigger = () => {
+      return touchedRef.current;
+    };
+    if (hoverToShow) {
+      const onMouseEnterCallback = event => {
+        setMousePosByEvent(event);
+      };
+
+      // Compatible with old browser which not support pointer event
+      wrapperAction('onMouseEnter', true, mouseEnterDelay, onMouseEnterCallback, ignoreMouseTrigger);
+      wrapperAction('onPointerEnter', true, mouseEnterDelay, onMouseEnterCallback, ignoreMouseTrigger);
+      onPopupMouseEnter = event => {
+        // Only trigger re-open when popup is visible
+        if ((mergedOpen || inMotion) && popupEle?.contains(event.target)) {
+          triggerOpen(true, mouseEnterDelay);
+        }
+      };
+
+      // Align Point
+      if (alignPoint) {
+        cloneProps.onMouseMove = event => {
+          originChildProps.onMouseMove?.(event);
+        };
+      }
+    }
+    if (hoverToHide) {
+      wrapperAction('onMouseLeave', false, mouseLeaveDelay, undefined, ignoreMouseTrigger);
+      wrapperAction('onPointerLeave', false, mouseLeaveDelay, undefined, ignoreMouseTrigger);
+      onPopupMouseLeave = () => {
+        triggerOpen(false, mouseLeaveDelay);
+      };
+    }
+
+    // ======================= Action: Focus ========================
+    if (showActions.has('focus')) {
+      wrapperAction('onFocus', true, focusDelay);
+    }
+    if (hideActions.has('focus')) {
+      wrapperAction('onBlur', false, blurDelay);
+    }
+
+    // ==================== Action: ContextMenu =====================
+    if (showActions.has('contextMenu')) {
+      cloneProps.onContextMenu = (event, ...args) => {
+        if (openRef.current && hideActions.has('contextMenu')) {
+          triggerOpen(false);
+        } else {
+          setMousePosByEvent(event);
+          triggerOpen(true);
+        }
+        event.preventDefault();
+
+        // Pass to origin
+        originChildProps.onContextMenu?.(event, ...args);
+      };
+    }
+
+    // ============================ Perf ============================
+    const rendedRef = React.useRef(false);
+    rendedRef.current ||= forceRender || mergedOpen || inMotion;
+
+    // =========================== Render ===========================
+    const mergedChildrenProps = {
+      ...originChildProps,
+      ...cloneProps
+    };
+
+    // Pass props into cloneProps for nest usage
+    const passedProps = {};
+    const passedEventList = ['onContextMenu', 'onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur'];
+    passedEventList.forEach(eventName => {
+      if (restProps[eventName]) {
+        passedProps[eventName] = (...args) => {
+          mergedChildrenProps[eventName]?.(...args);
+          restProps[eventName](...args);
+        };
+      }
+    });
+    const arrowPos = {
+      x: arrowX,
+      y: arrowY
+    };
+
+    // =================== Resize Observer ===================
+    // Use hook to observe target element resize
+    // Pass targetEle directly instead of a function so the hook will re-observe when target changes
+    useResizeObserver(mergedOpen, targetEle, onTargetResize);
+
+    // Compose refs
+    const mergedRef = useComposeRef(setTargetRef, getNodeRef(child));
+
+    // Child Node
+    const triggerNode = /*#__PURE__*/React.cloneElement(child, {
+      ...mergedChildrenProps,
+      ...passedProps,
+      ref: mergedRef
+    });
+
+    // Render
+    return /*#__PURE__*/React.createElement(React.Fragment, null, triggerNode, rendedRef.current && (!uniqueContext || !unique) && /*#__PURE__*/React.createElement(TriggerContext.Provider, {
+      value: context
+    }, /*#__PURE__*/React.createElement(Popup, {
+      portal: PortalComponent,
+      ref: setPopupRef,
+      prefixCls: prefixCls,
+      popup: popup,
+      className: clsx(popupClassName, !isMobile && alignedClassName),
+      style: popupStyle,
+      target: targetEle,
+      onMouseEnter: onPopupMouseEnter,
+      onMouseLeave: onPopupMouseLeave
+      // https://github.com/ant-design/ant-design/issues/43924
+      ,
+      onPointerEnter: onPopupMouseEnter,
+      zIndex: zIndex
+      // Open
+      ,
+      open: mergedOpen,
+      keepDom: inMotion,
+      fresh: fresh
+      // Click
+      ,
+      onClick: onPopupClick,
+      onPointerDownCapture: onPopupPointerDown
+      // Mask
+      ,
+      mask: mask
+      // Motion
+      ,
+      motion: popupMotion,
+      maskMotion: maskMotion,
+      onVisibleChanged: onVisibleChanged,
+      onPrepare: onPrepare
+      // Portal
+      ,
+      forceRender: forceRender,
+      autoDestroy: mergedAutoDestroy,
+      getPopupContainer: getPopupContainer,
+      onEsc: onEsc
+      // Arrow
+      ,
+      align: alignInfo,
+      arrow: innerArrow,
+      arrowPos: arrowPos
+      // Align
+      ,
+      ready: ready,
+      offsetX: offsetX,
+      offsetY: offsetY,
+      offsetR: offsetR,
+      offsetB: offsetB,
+      onAlign: triggerAlign
+      // Stretch
+      ,
+      stretch: stretch,
+      targetWidth: targetWidth / scaleX,
+      targetHeight: targetHeight / scaleY
+      // Mobile
+      ,
+      mobile: mobile
+    })));
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    Trigger.displayName = 'Trigger';
+  }
+  return Trigger;
+}
+generateTrigger(Portal);
+
 const byteToHex = [];
 for (let i = 0; i < 256; ++i) {
     byteToHex.push((i + 0x100).toString(16).slice(1));
@@ -4191,7 +7840,7 @@ function InlineSVG(props) {
 }
 
 const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
-    const appearanceConfig = useMemo(() => {
+    const appearanceConfig = useMemo$1(() => {
         if (appearance) {
             const appearanceProps = appearance.split(' ').reduce((resultConfig, appearanceKey) => ({
                 ...resultConfig,
@@ -4284,7 +7933,7 @@ function NotificationsProvider(props) {
     // "hideNotifications" is never changed
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    const notificationsAPI = useMemo(() => ({
+    const notificationsAPI = useMemo$1(() => ({
         hideNotifications: hideNotifications,
         notificationStatuses: STATUSES,
         showNotification: showNotification,
@@ -4485,7 +8134,7 @@ function useMediaQueries(userDevice = {}) {
   const isDesktopMega = useMediaQuery({
     minWidth: mediaQueries['desktop-huge']
   });
-  const deviceTypes = useMemo(() => ({
+  const deviceTypes = useMemo$1(() => ({
     // isWarning,
     isMobile: isMobile,
     // isMobileTiny,
@@ -4553,7 +8202,7 @@ const UIProvider = memo(function UIProvider(props) {
         (isTablet && 'tablet') ||
         (isDesktop && 'desktop') ||
         '';
-    const [deviceCurrentType, deviceTypesList] = useMemo(() => {
+    const [deviceCurrentType, deviceTypesList] = useMemo$1(() => {
         const deviceTypesList = Object.keys(allDevicesTypes).map((key) => camelCase(key.replace('is', '')));
         // In same time "allDevicesTypes" can contain "isMobile" and "isMobileLarge" as true
         let deviceCurrentType = Object.keys(fullNamedDeviceTypes).find(
@@ -4567,7 +8216,7 @@ const UIProvider = memo(function UIProvider(props) {
         // On server side render we doesn't known user device and we need to set special word
         return [deviceCurrentType || '_none_', deviceTypesList];
     }, [allDevicesTypes, deviceCurrentMainType, fullNamedDeviceTypes]);
-    const deviceContextState = useMemo(() => {
+    const deviceContextState = useMemo$1(() => {
         return {
             ...allDevicesTypes,
             deviceCurrentMainType: deviceCurrentMainType,
@@ -4758,7 +8407,7 @@ var styleAttributes = [
      */
     'backdropFilter',
     /**
-     * transition
+     * Transition
      */
     'transition',
     'transitionBehavior',
@@ -4766,6 +8415,10 @@ var styleAttributes = [
     'transitionDuration',
     'transitionProperty',
     'transitionTimingFunction',
+    /**
+     * Control
+     */
+    'pointerEvents',
 ];
 
 function useDevicePropsGenerator(componentProps, appearanceConfig) {
@@ -4803,7 +8456,7 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
      *   ---------
      **/
     const { deviceCurrentMainType } = useUserDeviceContext();
-    const devicePropsGenerator = useMemo(() => {
+    const devicePropsGenerator = useMemo$1(() => {
         const propsGenerator = {
             getProp(propKey) {
                 const propsForDeviceKey = `${propKey}${upperFirst(deviceCurrentMainType)}`;
@@ -4892,7 +8545,7 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
  */
 function useStyles(props) {
     const { deviceCurrentMainType, deviceCurrentType, deviceTypesList } = useUserDeviceContext();
-    const propsStyleAttributes = useMemo(() => {
+    const propsStyleAttributes = useMemo$1(() => {
         const styles = Object.entries(props).reduce((result, [propKey, propValue]) => {
             const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
             if (styleAttributeKey) {
@@ -4903,7 +8556,7 @@ function useStyles(props) {
         return styles;
         // "props" object maybe big and frequently changing
     }, [props]);
-    const collectedStyles = useMemo(() => {
+    const collectedStyles = useMemo$1(() => {
         const resultStylesGroups = {};
         for (const [propKey, propValue] of Object.entries(propsStyleAttributes)) {
             let value = null;
@@ -5599,7 +9252,7 @@ function Title(props) {
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, size, fillClass, fillHoverClass, textAlignClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorDisabledClass, textColorHoverClass, textFontClass, textStyleClass, textTruncateClass, textWeightClass, textWrap, heightClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, svgFillClass, svgFillHoverClass, widthClass, wrapperDirectionClass, onClickIconAfter, onClickIconBefore, } = propsGenerator;
     const { styles: titleStyles, wrapper: titleWrapperStyles } = useStyles(props);
-    const Tag = useMemo(() => {
+    const Tag = useMemo$1(() => {
         if (tag) {
             return tag;
         }
@@ -5645,8 +9298,8 @@ const tooltipAppearanceError = {
     errorPrimary: {
         fill: 'errorPrimary',
         fillHover: 'errorHoverPrimary',
-        borderColor: 'errorBorderPrimary',
         titleColor: 'errorTextPrimary',
+        borderColor: 'errorBorderPrimary',
         textColor: 'errorTextPrimary',
     },
 };
@@ -5655,8 +9308,8 @@ const tooltipAppearanceRequire = {
     requirePrimary: {
         fill: 'warningPrimary',
         fillHover: 'warningHoverPrimary',
-        borderColor: 'warningBorderPrimary',
         titleColor: 'warningTextPrimary',
+        borderColor: 'warningBorderPrimary',
         textColor: 'warningTextPrimary',
     },
 };
@@ -5722,8 +9375,8 @@ const tooltipAppearanceSuccess = {
     successPrimary: {
         fill: 'successPrimary',
         fillHover: 'successHoverPrimary',
-        borderColor: 'successBorderPrimary',
         titleColor: 'successTextPrimary',
+        borderColor: 'successBorderPrimary',
         textColor: 'successTextPrimary',
     },
 };
@@ -5742,7 +9395,7 @@ const tooltipAppearance = {
 const tooltipConfig = {
     appearance: tooltipAppearance};
 const Tooltip = React__default.forwardRef(function Tooltip(props, ref) {
-    const { appearance, className, dataTestId, dataTour, initialIsVisible, title, text, before, after, openTimeoutDelay = 500, closeTimeoutDelay = 250, isSkeleton, isTooltipDisableState, children, } = props;
+    const { appearance, className, dataTestId, dataTour, initialIsVisible, title, text, before, after, openTimeoutDelay = 500, closeTimeoutDelay = 250, isSkeleton, children, } = props;
     const tooltipElementRef = useRef(null);
     const tooltipTimeoutHideRef = useRef(null);
     const tooltipTimeoutShowRef = useRef(null);
@@ -5785,13 +9438,9 @@ const Tooltip = React__default.forwardRef(function Tooltip(props, ref) {
     }), [isTooltipVisible, openTooltip, closeTooltip]);
     const appearanceConfig = useAppearanceConfig(appearance, tooltipConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    const { alignClass, alignDirectionClass, alignmentClass, alignPosition, fillClass, titleColor, titleSize, titleWeight, borderColorClass, borderTypeClass, borderWidthClass, textColor, textSize, textWeight, arrowPosition, centeringClass, elevationClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    const { alignClass, alignDirectionClass, alignmentClass, alignPosition, fillClass, titleColor, titleSize, titleWeight, borderColorClass, borderTypeClass, borderWidthClass, textColor, textSize, textWeight, arrowPosition, elevationClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     const { styles: tooltipStyles } = useStyles(props);
-    return (jsxRuntimeExports.jsxs("div", { className: clsx(className, 'tooltip', !isTooltipDisableState
-            ? isTooltipVisible
-                ? 'tooltip_state_open'
-                : 'tooltip_state_close'
-            : null, alignPosition && `tooltip_align-position_${alignPosition}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, elevationClass && `elevation_${elevationClass}`, centeringClass && `centering_${centeringClass}`, alignmentClass && `alignment_${alignmentClass}`, sizeClass && `tooltip_size_${sizeClass}`, isSkeleton && 'tooltip_skeleton', widthClass && `width_${widthClass}`), ref: tooltipElementRef, "data-testid": dataTestId, "data-tour": dataTour, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [arrowPosition && (jsxRuntimeExports.jsx("div", { className: clsx('tooltip__arrow', arrowPosition && `tooltip__arrow_position_${arrowPosition}`, fillClass && `fill_${fillClass}`), children: "\u00A0" })), before, jsxRuntimeExports.jsxs("div", { className: clsx('tooltip__inner', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [title && (jsxRuntimeExports.jsx(Title, { className: "tooltip__title text", size: titleSize, textColor: titleColor, textWeight: titleWeight, children: title })), text && (jsxRuntimeExports.jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor, textWeight: textWeight, children: text })), children] }), after] }));
+    return (jsxRuntimeExports.jsxs("div", { className: clsx(className, 'tooltip', alignPosition && `tooltip_align-position_${alignPosition}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, elevationClass && `elevation_${elevationClass}`, alignmentClass && `alignment_${alignmentClass}`, sizeClass && `tooltip_size_${sizeClass}`, isSkeleton && 'tooltip_skeleton', widthClass && `width_${widthClass}`), ref: tooltipElementRef, "data-testid": dataTestId, "data-tour": dataTour, style: tooltipStyles, onAnimationEnd: onAnimationEnd, children: [arrowPosition && (jsxRuntimeExports.jsx("div", { className: clsx('tooltip__arrow', arrowPosition && `tooltip__arrow_position_${arrowPosition}`, fillClass && `fill_${fillClass}`), children: "\u00A0" })), before, jsxRuntimeExports.jsxs("div", { className: clsx('tooltip__inner', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: [title && (jsxRuntimeExports.jsx(Title, { className: "tooltip__title text", size: titleSize, textColor: titleColor, textWeight: titleWeight, children: title })), text && (jsxRuntimeExports.jsx(Text, { className: "tooltip__text", size: textSize, textColor: textColor, textWeight: textWeight, children: text })), children] }), after] }));
 });
 
 const UrlAssetPrefixContext = createContext({
@@ -6226,7 +9875,7 @@ const iconConfig = {
     appearance: iconAppearance};
 const Icon = urlWithAssetPrefix(React__default.forwardRef(function Icon(props, ref) {
     const { id, appearance, className, dataTestId, dataTour, width, height, badgeClass, href, imageSrc, link, linkRel, linkTarget, notification, saveFillStroke, showTooltip, SvgImage, svgImageStyles, before, after, isActive, isDisabled, isSkeleton, onClick, onMouseEnter, onMouseLeave, } = props;
-    const ImageComponent = useMemo(() => {
+    const ImageComponent = useMemo$1(() => {
         if (SvgImage) {
             const SvgComponent = SvgImage;
             const sizes = {};