@rc-component/trigger 3.5.2 → 3.6.1

package/lib/UniqueProvider/useTargetState.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTargetState;
+var _react = _interopRequireDefault(require("react"));
+var _util = require("@rc-component/util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * 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.
+ */
+function useTargetState() {
+  const [options, setOptions] = _react.default.useState(null);
+  const [open, setOpen] = _react.default.useState(false);
+  const [isAnimating, setIsAnimating] = _react.default.useState(false);
+  const pendingOptionsRef = _react.default.useRef(null);
+  const trigger = (0, _util.useEvent)(nextOptions => {
+    if (nextOptions === false) {
+      // Clear pending options when hiding
+      pendingOptionsRef.current = null;
+      setOpen(false);
+    } else {
+      if (isAnimating && open) {
+        // If animating (appear or enter), cache new options
+        pendingOptionsRef.current = nextOptions;
+      } else {
+        setOpen(true);
+        // Set new options
+        setOptions(nextOptions);
+        pendingOptionsRef.current = null;
+
+        // Only mark as animating when transitioning from closed to open
+        if (!open) {
+          setIsAnimating(true);
+        }
+      }
+    }
+  });
+  const onVisibleChanged = (0, _util.useEvent)(visible => {
+    if (visible) {
+      // Animation enter completed, check if there are pending options
+      setIsAnimating(false);
+      if (pendingOptionsRef.current) {
+        // Apply pending options
+        setOptions(pendingOptionsRef.current);
+        pendingOptionsRef.current = null;
+      }
+    } else {
+      // Animation leave completed
+      setIsAnimating(false);
+      pendingOptionsRef.current = null;
+    }
+  });
+  return [trigger, open, options, onVisibleChanged];
+}

package/lib/context.d.ts

@@ -1,6 +1,33 @@
 import * as React from 'react';
+import type { CSSMotionProps } from '@rc-component/motion';
+import type { TriggerProps } from './index';
+import type { AlignType, ArrowTypeOuter, BuildInPlacements } from './interface';
 export interface TriggerContextProps {
     registerSubPopup: (id: string, node: HTMLElement) => void;
 }
 declare const TriggerContext: React.Context<TriggerContextProps>;
 export default TriggerContext;
+export interface UniqueShowOptions {
+    id: string;
+    popup: TriggerProps['popup'];
+    target: HTMLElement;
+    delay: number;
+    prefixCls?: string;
+    popupClassName?: string;
+    popupStyle?: React.CSSProperties;
+    popupPlacement?: string;
+    builtinPlacements?: BuildInPlacements;
+    popupAlign?: AlignType;
+    zIndex?: number;
+    mask?: boolean;
+    maskClosable?: boolean;
+    popupMotion?: CSSMotionProps;
+    maskMotion?: CSSMotionProps;
+    arrow?: ArrowTypeOuter;
+    getPopupContainer?: TriggerProps['getPopupContainer'];
+}
+export interface UniqueContextProps {
+    show: (options: UniqueShowOptions) => void;
+    hide: (delay: number) => void;
+}
+export declare const UniqueContext: React.Context<UniqueContextProps>;

package/lib/context.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.UniqueContext = void 0;
 var React = _interopRequireWildcard(require("react"));
 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; }
+// ===================== Nest =====================
+
 const TriggerContext = /*#__PURE__*/React.createContext(null);
-var _default = exports.default = TriggerContext;
+var _default = exports.default = TriggerContext; // ==================== Unique ====================
+const UniqueContext = exports.UniqueContext = /*#__PURE__*/React.createContext(null);

package/lib/hooks/useDelay.d.ts

@@ -0,0 +1 @@
+export default function useDelay(): (callback: VoidFunction, delay: number) => void;

package/lib/hooks/useDelay.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useDelay;
+var React = _interopRequireWildcard(require("react"));
+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 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;
+}

package/lib/hooks/useOffsetStyle.d.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+import type { AlignType } from '../interface';
+export default function useOffsetStyle(isMobile: boolean, ready: boolean, open: boolean, align: AlignType, offsetR: number, offsetB: number, offsetX: number, offsetY: number): React.CSSProperties;

package/lib/hooks/useOffsetStyle.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useOffsetStyle;
+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/lib/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/lib/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "UniqueProvider", {
+  enumerable: true,
+  get: function () {
+    return _UniqueProvider.default;
+  }
+});
 exports.default = void 0;
 exports.generateTrigger = generateTrigger;
 var _portal = _interopRequireDefault(require("@rc-component/portal"));
@@ -15,12 +21,14 @@ var _useId = _interopRequireDefault(require("@rc-component/util/lib/hooks/useId"
 var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
 var React = _interopRequireWildcard(require("react"));
 var _Popup = _interopRequireDefault(require("./Popup"));
-var _context = _interopRequireDefault(require("./context"));
+var _context = _interopRequireWildcard(require("./context"));
 var _useAction = _interopRequireDefault(require("./hooks/useAction"));
 var _useAlign = _interopRequireDefault(require("./hooks/useAlign"));
+var _useDelay = _interopRequireDefault(require("./hooks/useDelay"));
 var _useWatch = _interopRequireDefault(require("./hooks/useWatch"));
 var _useWinClick = _interopRequireDefault(require("./hooks/useWinClick"));
 var _util = require("./util");
+var _UniqueProvider = _interopRequireDefault(require("./UniqueProvider"));
 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 }; }
@@ -69,6 +77,7 @@ function generateTrigger(PortalComponent = _portal.default) {
       stretch,
       getPopupClassNameFromAlign,
       fresh,
+      unique,
       alignPoint,
       onPopupClick,
       onPopupAlign,
@@ -82,6 +91,7 @@ function generateTrigger(PortalComponent = _portal.default) {
       ...restProps
     } = props;
     const mergedAutoDestroy = autoDestroy || false;
+    const openUncontrolled = popupVisible === undefined;
 
     // =========================== Mobile ===========================
     const isMobile = !!mobile;
@@ -98,6 +108,9 @@ function generateTrigger(PortalComponent = _portal.default) {
       };
     }, [parentContext]);
 
+    // ======================== UniqueContext =========================
+    const uniqueContext = React.useContext(_context.UniqueContext);
+
     // =========================== Popup ============================
     const id = (0, _useId.default)();
     const [popupEle, setPopupEle] = React.useState(null);
@@ -134,6 +147,12 @@ function generateTrigger(PortalComponent = _portal.default) {
       return childDOM?.contains(ele) || (0, _shadow.getShadowRoot)(childDOM)?.host === ele || ele === childDOM || popupEle?.contains(ele) || (0, _shadow.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);
 
@@ -142,13 +161,49 @@ function generateTrigger(PortalComponent = _portal.default) {
 
     // We use effect sync here in case `popupVisible` back to `undefined`
     const setMergedOpen = (0, _useEvent.default)(nextOpen => {
-      if (popupVisible === undefined) {
+      if (openUncontrolled) {
         setInternalOpen(nextOpen);
       }
     });
     (0, _useLayoutEffect.default)(() => {
       setInternalOpen(popupVisible || false);
     }, [popupVisible]);
+
+    // Extract common options for UniqueProvider
+    const getUniqueOptions = (0, _useEvent.default)((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
+    // If there is a parentContext, don't call uniqueContext methods
+    (0, _useLayoutEffect.default)(() => {
+      if (uniqueContext && unique && targetEle && !openUncontrolled && !parentContext) {
+        if (mergedOpen) {
+          Promise.resolve().then(() => {
+            uniqueContext.show(getUniqueOptions(0));
+          });
+        } else {
+          uniqueContext.hide(0);
+        }
+      }
+    }, [mergedOpen, targetEle]);
     const openRef = React.useRef(mergedOpen);
     openRef.current = mergedOpen;
     const lastTriggerRef = React.useRef([]);
@@ -167,21 +222,31 @@ function generateTrigger(PortalComponent = _portal.default) {
     });
 
     // Trigger for delay
-    const delayRef = React.useRef(null);
-    const clearDelay = () => {
-      clearTimeout(delayRef.current);
-    };
+    const delayInvoke = (0, _useDelay.default)();
     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 there is a parentContext, don't call uniqueContext methods
+      if (uniqueContext && unique && openUncontrolled && !parentContext) {
+        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);
@@ -417,10 +482,6 @@ function generateTrigger(PortalComponent = _portal.default) {
       x: arrowX,
       y: arrowY
     };
-    const innerArrow = arrow ? {
-      // true and Object likely
-      ...(arrow !== true ? arrow : {})
-    } : null;
 
     // Child Node
     const triggerNode = /*#__PURE__*/React.cloneElement(child, {
@@ -433,7 +494,7 @@ function generateTrigger(PortalComponent = _portal.default) {
       disabled: !mergedOpen,
       ref: setTargetRef,
       onResize: onTargetResize
-    }, triggerNode), rendedRef.current && /*#__PURE__*/React.createElement(_context.default.Provider, {
+    }, triggerNode), rendedRef.current && (!uniqueContext || !unique) && /*#__PURE__*/React.createElement(_context.default.Provider, {
       value: context
     }, /*#__PURE__*/React.createElement(_Popup.default, {
       portal: PortalComponent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "3.5.2",
+  "version": "3.6.1",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"