@rc-component/trigger 3.5.2 → 3.6.0

package/es/hooks/useOffsetStyle.js

@@ -0,0 +1,35 @@
+export default 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;
+}

package/es/index.d.ts

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { type MobileConfig } from './Popup';
 import type { ActionType, AlignType, ArrowTypeOuter, BuildInPlacements } from './interface';
 export type { ActionType, AlignType, ArrowTypeOuter as ArrowType, BuildInPlacements, };
+export { default as UniqueProvider } from './UniqueProvider';
 export interface TriggerRef {
     nativeElement: HTMLElement;
     popupElement: HTMLDivElement;
@@ -53,6 +54,10 @@ export interface TriggerProps {
      * Set `fresh` to `false` will always keep update.
      */
     fresh?: boolean;
+    /**
+     * Config with UniqueProvider to shared the floating popup.
+     */
+    unique?: boolean;
     arrow?: boolean | ArrowTypeOuter;
     /**
      * @private Bump fixed position at bottom in mobile.

package/es/index.js

@@ -8,12 +8,14 @@ import useId from "@rc-component/util/es/hooks/useId";
 import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
 import * as React from 'react';
 import Popup from "./Popup";
-import TriggerContext from "./context";
+import TriggerContext, { UniqueContext } from "./context";
 import useAction from "./hooks/useAction";
 import useAlign from "./hooks/useAlign";
+import useDelay from "./hooks/useDelay";
 import useWatch from "./hooks/useWatch";
 import useWinClick from "./hooks/useWinClick";
 import { getAlignPopupClassName } from "./util";
+export { default as UniqueProvider } from "./UniqueProvider";
 
 // Removed Props List
 // Seems this can be auto
@@ -60,6 +62,7 @@ export function generateTrigger(PortalComponent = Portal) {
       stretch,
       getPopupClassNameFromAlign,
       fresh,
+      unique,
       alignPoint,
       onPopupClick,
       onPopupAlign,
@@ -73,6 +76,7 @@ export function generateTrigger(PortalComponent = Portal) {
       ...restProps
     } = props;
     const mergedAutoDestroy = autoDestroy || false;
+    const openUncontrolled = popupVisible === undefined;
 
     // =========================== Mobile ===========================
     const isMobile = !!mobile;
@@ -89,6 +93,9 @@ export function generateTrigger(PortalComponent = Portal) {
       };
     }, [parentContext]);
 
+    // ======================== UniqueContext =========================
+    const uniqueContext = React.useContext(UniqueContext);
+
     // =========================== Popup ============================
     const id = useId();
     const [popupEle, setPopupEle] = React.useState(null);
@@ -125,6 +132,12 @@ export function generateTrigger(PortalComponent = Portal) {
       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] = React.useState(defaultPopupVisible || false);
 
@@ -133,13 +146,48 @@ export function generateTrigger(PortalComponent = Portal) {
 
     // We use effect sync here in case `popupVisible` back to `undefined`
     const setMergedOpen = useEvent(nextOpen => {
-      if (popupVisible === undefined) {
+      if (openUncontrolled) {
         setInternalOpen(nextOpen);
       }
     });
     useLayoutEffect(() => {
       setInternalOpen(popupVisible || false);
     }, [popupVisible]);
+
+    // Extract common options for UniqueProvider
+    const getUniqueOptions = useEvent((delay = 0) => ({
+      popup,
+      target: targetEle,
+      delay,
+      prefixCls,
+      popupClassName,
+      popupStyle,
+      popupPlacement,
+      builtinPlacements,
+      popupAlign,
+      zIndex,
+      mask,
+      maskClosable,
+      popupMotion,
+      maskMotion,
+      arrow: innerArrow,
+      getPopupContainer,
+      id
+    }));
+
+    // Handle controlled state changes for UniqueProvider
+    // Only sync to UniqueProvider when it's controlled mode
+    useLayoutEffect(() => {
+      if (uniqueContext && unique && targetEle && !openUncontrolled) {
+        if (mergedOpen) {
+          Promise.resolve().then(() => {
+            uniqueContext.show(getUniqueOptions(0));
+          });
+        } else {
+          uniqueContext.hide(0);
+        }
+      }
+    }, [mergedOpen]);
     const openRef = React.useRef(mergedOpen);
     openRef.current = mergedOpen;
     const lastTriggerRef = React.useRef([]);
@@ -158,21 +206,30 @@ export function generateTrigger(PortalComponent = Portal) {
     });
 
     // Trigger for delay
-    const delayRef = React.useRef(null);
-    const clearDelay = () => {
-      clearTimeout(delayRef.current);
-    };
+    const delayInvoke = useDelay();
     const triggerOpen = (nextOpen, delay = 0) => {
-      clearDelay();
-      if (delay === 0) {
-        internalTriggerOpen(nextOpen);
-      } else {
-        delayRef.current = setTimeout(() => {
+      // If it's controlled mode, always use internal trigger logic
+      // UniqueProvider will be synced through useLayoutEffect
+      if (popupVisible !== undefined) {
+        delayInvoke(() => {
           internalTriggerOpen(nextOpen);
-        }, delay * 1000);
+        }, delay);
+        return;
       }
+
+      // If UniqueContext exists and not controlled, pass delay to Provider instead of handling it internally
+      if (uniqueContext && unique && openUncontrolled) {
+        if (nextOpen) {
+          uniqueContext.show(getUniqueOptions(delay));
+        } else {
+          uniqueContext.hide(delay);
+        }
+        return;
+      }
+      delayInvoke(() => {
+        internalTriggerOpen(nextOpen);
+      }, delay);
     };
-    React.useEffect(() => clearDelay, []);
 
     // ========================== Motion ============================
     const [inMotion, setInMotion] = React.useState(false);
@@ -408,10 +465,6 @@ export function generateTrigger(PortalComponent = Portal) {
       x: arrowX,
       y: arrowY
     };
-    const innerArrow = arrow ? {
-      // true and Object likely
-      ...(arrow !== true ? arrow : {})
-    } : null;
 
     // Child Node
     const triggerNode = /*#__PURE__*/React.cloneElement(child, {
@@ -424,7 +477,7 @@ export function generateTrigger(PortalComponent = Portal) {
       disabled: !mergedOpen,
       ref: setTargetRef,
       onResize: onTargetResize
-    }, triggerNode), rendedRef.current && /*#__PURE__*/React.createElement(TriggerContext.Provider, {
+    }, triggerNode), rendedRef.current && (!uniqueContext || !unique) && /*#__PURE__*/React.createElement(TriggerContext.Provider, {
       value: context
     }, /*#__PURE__*/React.createElement(Popup, {
       portal: PortalComponent,

package/lib/Popup/index.d.ts

@@ -1,4 +1,5 @@
 import type { CSSMotionProps } from '@rc-component/motion';
+import { type ResizeObserverProps } from '@rc-component/resize-observer';
 import * as React from 'react';
 import type { TriggerProps } from '../';
 import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
@@ -36,6 +37,7 @@ export interface PopupProps {
     getPopupContainer?: TriggerProps['getPopupContainer'];
     autoDestroy?: boolean;
     portal: React.ComponentType<any>;
+    children?: React.ReactElement;
     ready: boolean;
     offsetX: number;
     offsetY: number;
@@ -46,6 +48,7 @@ export interface PopupProps {
     stretch?: string;
     targetWidth?: number;
     targetHeight?: number;
+    onResize?: ResizeObserverProps['onResize'];
     mobile?: MobileConfig;
 }
 declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<HTMLDivElement>>;

package/lib/Popup/index.js

@@ -13,6 +13,8 @@ var React = _interopRequireWildcard(require("react"));
 var _Arrow = _interopRequireDefault(require("./Arrow"));
 var _Mask = _interopRequireDefault(require("./Mask"));
 var _PopupContent = _interopRequireDefault(require("./PopupContent"));
+var _useOffsetStyle = _interopRequireDefault(require("../hooks/useOffsetStyle"));
+var _util = require("@rc-component/util");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,6 +49,7 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
     getPopupContainer,
     autoDestroy,
     portal: Portal,
+    children,
     zIndex,
     onMouseEnter,
     onMouseLeave,
@@ -59,11 +62,13 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
     offsetB,
     onAlign,
     onPrepare,
+    // Resize
+    onResize,
     stretch,
     targetWidth,
     targetHeight
   } = props;
-  const childNode = typeof popup === 'function' ? popup() : popup;
+  const popupContent = typeof popup === 'function' ? popup() : popup;
 
   // We can not remove holder only when motion finished.
   const isNodeVisible = open || keepDom;
@@ -90,44 +95,20 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   }, [show, getPopupContainerNeedParams, target]);
 
+  // ========================= Resize =========================
+  const onInternalResize = (0, _util.useEvent)((size, ele) => {
+    onResize?.(size, ele);
+    onAlign();
+  });
+
+  // ========================= Styles =========================
+  const offsetStyle = (0, _useOffsetStyle.default)(isMobile, ready, open, align, offsetR, offsetB, offsetX, offsetY);
+
   // ========================= Render =========================
   if (!show) {
     return null;
   }
 
-  // >>>>> 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;
-    }
-  }
-
   // >>>>> Misc
   const miscStyle = {};
   if (stretch) {
@@ -157,7 +138,7 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
     motion: mergedMaskMotion,
     mobile: isMobile
   }), /*#__PURE__*/React.createElement(_resizeObserver.default, {
-    onResize: onAlign,
+    onResize: onInternalResize,
     disabled: !open
   }, resizeObserverRef => {
     return /*#__PURE__*/React.createElement(_motion.default, _extends({
@@ -207,9 +188,9 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
         align: align
       }), /*#__PURE__*/React.createElement(_PopupContent.default, {
         cache: !open && !fresh
-      }, childNode));
+      }, popupContent));
     });
-  }));
+  }), children);
 });
 if (process.env.NODE_ENV !== 'production') {
   Popup.displayName = 'Popup';

package/lib/UniqueProvider/FloatBg.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { CSSMotionProps } from '@rc-component/motion';
+import type { AlignType } from '../interface';
+export interface FloatBgProps {
+    prefixCls: string;
+    isMobile: boolean;
+    ready: boolean;
+    open: boolean;
+    align: AlignType;
+    offsetR: number;
+    offsetB: number;
+    offsetX: number;
+    offsetY: number;
+    popupSize?: {
+        width: number;
+        height: number;
+    };
+    motion?: CSSMotionProps;
+}
+declare const FloatBg: (props: FloatBgProps) => React.JSX.Element;
+export default FloatBg;

package/lib/UniqueProvider/FloatBg.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _useOffsetStyle = _interopRequireDefault(require("../hooks/useOffsetStyle"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _motion = _interopRequireDefault(require("@rc-component/motion"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 FloatBg = props => {
+  const {
+    prefixCls,
+    isMobile,
+    ready,
+    open,
+    align,
+    offsetR,
+    offsetB,
+    offsetX,
+    offsetY,
+    popupSize,
+    motion
+  } = props;
+  const floatBgCls = `${prefixCls}-float-bg`;
+  const [motionVisible, setMotionVisible] = _react.default.useState(false);
+
+  // ========================= Styles =========================
+  const offsetStyle = (0, _useOffsetStyle.default)(isMobile, ready, open, align, offsetR, offsetB, offsetX, offsetY);
+
+  // Apply popup size if available
+  const sizeStyle = {};
+  if (popupSize) {
+    sizeStyle.width = popupSize.width;
+    sizeStyle.height = popupSize.height;
+  }
+
+  // ========================= Render =========================
+  return /*#__PURE__*/_react.default.createElement(_motion.default, _extends({
+    motionAppear: true,
+    motionEnter: true,
+    motionLeave: true,
+    removeOnLeave: false,
+    leavedClassName: `${floatBgCls}-hidden`
+  }, motion, {
+    visible: open,
+    onVisibleChanged: nextVisible => {
+      setMotionVisible(nextVisible);
+    }
+  }), ({
+    className: motionClassName,
+    style: motionStyle
+  }) => {
+    const cls = (0, _classnames.default)(floatBgCls, motionClassName, {
+      [`${floatBgCls}-visible`]: motionVisible
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: cls,
+      style: {
+        ...offsetStyle,
+        ...sizeStyle,
+        ...motionStyle
+      }
+    });
+  });
+};
+var _default = exports.default = FloatBg;

package/lib/UniqueProvider/MotionContent.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { TriggerProps } from '..';
+export interface MotionContentProps {
+    prefixCls: string;
+    children: TriggerProps['popup'];
+}
+declare const MotionContent: {
+    (props: MotionContentProps): React.JSX.Element;
+    displayName: string;
+};
+export default MotionContent;

package/lib/UniqueProvider/MotionContent.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _motion = _interopRequireDefault(require("@rc-component/motion"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const MotionContent = props => {
+  const {
+    prefixCls,
+    children
+  } = props;
+  const childNode = typeof children === 'function' ? children() : children;
+
+  // motion name: `${prefixCls}-motion-content-fade`, apply in index.less
+  const motionName = `${prefixCls}-motion-content-fade`;
+  return /*#__PURE__*/React.createElement(_motion.default, {
+    motionAppear: true,
+    motionLeave: false,
+    visible: true,
+    motionName: motionName
+  }, ({
+    className: motionClassName,
+    style: motionStyle
+  }) => {
+    const cls = (0, _classnames.default)(`${prefixCls}-motion-content`, motionClassName);
+    return /*#__PURE__*/React.createElement("div", {
+      className: cls,
+      style: motionStyle
+    }, childNode);
+  });
+};
+if (process.env.NODE_ENV !== 'production') {
+  MotionContent.displayName = 'MotionContent';
+}
+var _default = exports.default = MotionContent;

package/lib/UniqueProvider/index.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface UniqueProviderProps {
+    children: React.ReactNode;
+}
+declare const UniqueProvider: ({ children }: UniqueProviderProps) => React.JSX.Element;
+export default UniqueProvider;

package/lib/UniqueProvider/index.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _portal = _interopRequireDefault(require("@rc-component/portal"));
+var _context = _interopRequireWildcard(require("../context"));
+var _useDelay = _interopRequireDefault(require("../hooks/useDelay"));
+var _useAlign = _interopRequireDefault(require("../hooks/useAlign"));
+var _Popup = _interopRequireDefault(require("../Popup"));
+var _util = require("@rc-component/util");
+var _useTargetState = _interopRequireDefault(require("./useTargetState"));
+var _findDOMNode = require("@rc-component/util/lib/Dom/findDOMNode");
+var _FloatBg = _interopRequireDefault(require("./FloatBg"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _MotionContent = _interopRequireDefault(require("./MotionContent"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const UniqueProvider = ({
+  children
+}) => {
+  const [trigger, open, options, onTargetVisibleChanged] = (0, _useTargetState.default)();
+
+  // =========================== Popup ============================
+  const [popupEle, setPopupEle] = React.useState(null);
+  const [popupSize, setPopupSize] = React.useState(null);
+
+  // Used for forwardRef popup. Not use internal
+  const externalPopupRef = React.useRef(null);
+  const setPopupRef = (0, _util.useEvent)(node => {
+    externalPopupRef.current = node;
+    if ((0, _findDOMNode.isDOM)(node) && popupEle !== node) {
+      setPopupEle(node);
+    }
+  });
+
+  // ========================== Register ==========================
+  const [popupId, setPopupId] = React.useState(0);
+  const delayInvoke = (0, _useDelay.default)();
+  const show = (0, _util.useEvent)(showOptions => {
+    delayInvoke(() => {
+      if (showOptions.id !== options?.id) {
+        setPopupId(i => i + 1);
+      }
+      trigger(showOptions);
+    }, showOptions.delay);
+  });
+  const hide = delay => {
+    delayInvoke(() => {
+      trigger(false);
+      // Don't clear target, currentNode, options immediately, wait until animation completes
+    }, delay);
+  };
+
+  // Callback after animation completes
+  const onVisibleChanged = (0, _util.useEvent)(visible => {
+    // Call useTargetState callback to handle animation state
+    onTargetVisibleChanged(visible);
+  });
+
+  // =========================== Align ============================
+  const [ready, offsetX, offsetY, offsetR, offsetB, arrowX, arrowY,
+
+    // scaleX - not used in UniqueProvider
+  ,,
+  // scaleY - not used in UniqueProvider
+  alignInfo, onAlign] = (0, _useAlign.default)(open, popupEle, options?.target, options?.popupPlacement, options?.builtinPlacements || {}, options?.popupAlign, undefined,
+  // onPopupAlign
+  false // isMobile
+  );
+  const contextValue = React.useMemo(() => ({
+    show,
+    hide
+  }), []);
+
+  // =========================== Motion ===========================
+  const onPrepare = (0, _util.useEvent)(() => {
+    onAlign();
+    return Promise.resolve();
+  });
+
+  // ======================== Trigger Context =====================
+  const subPopupElements = React.useRef({});
+  const parentContext = React.useContext(_context.default);
+  const triggerContextValue = React.useMemo(() => ({
+    registerSubPopup: (id, subPopupEle) => {
+      subPopupElements.current[id] = subPopupEle;
+      parentContext?.registerSubPopup(id, subPopupEle);
+    }
+  }), [parentContext]);
+
+  // =========================== Render ===========================
+  const prefixCls = options?.prefixCls;
+  return /*#__PURE__*/React.createElement(_context.UniqueContext.Provider, {
+    value: contextValue
+  }, children, options && /*#__PURE__*/React.createElement(_context.default.Provider, {
+    value: triggerContextValue
+  }, /*#__PURE__*/React.createElement(_Popup.default, {
+    ref: setPopupRef,
+    portal: _portal.default,
+    prefixCls: prefixCls,
+    popup: /*#__PURE__*/React.createElement(_MotionContent.default, {
+      prefixCls: prefixCls,
+      key: popupId
+    }, options.popup),
+    className: (0, _classnames.default)(options.popupClassName, `${prefixCls}-unique-controlled`),
+    style: options.popupStyle,
+    target: options.target,
+    open: open,
+    keepDom: true,
+    fresh: true,
+    autoDestroy: false,
+    onVisibleChanged: onVisibleChanged,
+    ready: ready,
+    offsetX: offsetX,
+    offsetY: offsetY,
+    offsetR: offsetR,
+    offsetB: offsetB,
+    onAlign: onAlign,
+    onPrepare: onPrepare,
+    onResize: size => setPopupSize({
+      width: size.offsetWidth,
+      height: size.offsetHeight
+    }),
+    arrowPos: {
+      x: arrowX,
+      y: arrowY
+    },
+    align: alignInfo,
+    zIndex: options.zIndex,
+    mask: options.mask,
+    arrow: options.arrow,
+    motion: options.popupMotion,
+    maskMotion: options.maskMotion,
+    getPopupContainer: options.getPopupContainer
+  }, /*#__PURE__*/React.createElement(_FloatBg.default, {
+    prefixCls: prefixCls,
+    isMobile: false,
+    ready: ready,
+    open: open,
+    align: alignInfo,
+    offsetR: offsetR,
+    offsetB: offsetB,
+    offsetX: offsetX,
+    offsetY: offsetY,
+    popupSize: popupSize,
+    motion: options.popupMotion
+  }))));
+};
+var _default = exports.default = UniqueProvider;

package/lib/UniqueProvider/useTargetState.d.ts

@@ -0,0 +1,16 @@
+import type { UniqueShowOptions } from '../context';
+/**
+ * Control the state of popup bind target:
+ * 1. When set `target`. Do show the popup.
+ * 2. When `target` is removed. Do hide the popup.
+ * 3. When `target` change to another one:
+ *  a. We wait motion finish of previous popup.
+ *  b. Then we set new target and show the popup.
+ * 4. During appear/enter animation, cache new options and apply after animation completes.
+ */
+export default function useTargetState(): [
+    trigger: (options: UniqueShowOptions | false) => void,
+    open: boolean,
+    cacheOptions: UniqueShowOptions | null,
+    onVisibleChanged: (visible: boolean) => void
+];