@rc-component/trigger 3.5.2 → 3.6.1

package/assets/index.css

@@ -62,6 +62,41 @@
     opacity: 0;
   }
 }
+.rc-trigger-popup-float-bg {
+  position: absolute;
+  z-index: 0;
+  box-sizing: border-box;
+  border: 1px solid red;
+  background: green;
+}
+.rc-trigger-popup-float-bg-hidden {
+  display: none;
+}
+.rc-trigger-popup-float-bg-visible {
+  transition: all 0.1s;
+}
+.rc-trigger-popup-unique-controlled {
+  border-color: rgba(0, 0, 0, 0.01) !important;
+  background: transparent !important;
+  z-index: 1;
+}
+.rc-trigger-popup-motion-content-fade-appear {
+  opacity: 0;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+}
+.rc-trigger-popup-motion-content-fade-appear.rc-trigger-popup-motion-content-fade-appear-active {
+  animation-name: rcTriggerFadeIn;
+}
+@keyframes rcTriggerFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 .rc-trigger-popup-mask {
   position: fixed;
   top: 0;

package/assets/index.less

@@ -73,6 +73,54 @@
       opacity: 0;
     }
   }
+
+  // =============== Float BG ===============
+  &-float-bg {
+    position: absolute;
+    z-index: 0;
+    box-sizing: border-box;
+    border: 1px solid red;
+    background: green;
+
+    &-hidden {
+      display: none;
+    }
+
+    &-visible {
+      transition: all 0.1s;
+    }
+  }
+
+  // Debug
+  &-unique-controlled {
+    border-color: rgba(0, 0, 0, 0.01) !important;
+    background: transparent !important;
+    z-index: 1;
+  }
+
+  // Motion Content
+  &-motion-content {
+    // Fade motion
+    &-fade-appear {
+      opacity: 0;
+      animation-duration: 0.3s;
+      animation-fill-mode: both;
+      animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+    }
+
+    &-fade-appear&-fade-appear-active {
+      animation-name: rcTriggerFadeIn;
+    }
+
+    @keyframes rcTriggerFadeIn {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  }
 }
 
 @import './index/Mask';

package/es/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/es/Popup/index.js

@@ -8,6 +8,8 @@ import * as React from 'react';
 import Arrow from "./Arrow";
 import Mask from "./Mask";
 import PopupContent from "./PopupContent";
+import useOffsetStyle from "../hooks/useOffsetStyle";
+import { useEvent } from '@rc-component/util';
 const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     popup,
@@ -38,6 +40,7 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
     getPopupContainer,
     autoDestroy,
     portal: Portal,
+    children,
     zIndex,
     onMouseEnter,
     onMouseLeave,
@@ -50,11 +53,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;
@@ -81,44 +86,20 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   }, [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;
   }
 
-  // >>>>> 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) {
@@ -148,7 +129,7 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
     motion: mergedMaskMotion,
     mobile: isMobile
   }), /*#__PURE__*/React.createElement(ResizeObserver, {
-    onResize: onAlign,
+    onResize: onInternalResize,
     disabled: !open
   }, resizeObserverRef => {
     return /*#__PURE__*/React.createElement(CSSMotion, _extends({
@@ -198,9 +179,9 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
         align: align
       }), /*#__PURE__*/React.createElement(PopupContent, {
         cache: !open && !fresh
-      }, childNode));
+      }, popupContent));
     });
-  }));
+  }), children);
 });
 if (process.env.NODE_ENV !== 'production') {
   Popup.displayName = 'Popup';

package/es/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/es/UniqueProvider/FloatBg.js

@@ -0,0 +1,62 @@
+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); }
+import React from 'react';
+import useOffsetStyle from "../hooks/useOffsetStyle";
+import classNames from 'classnames';
+import CSSMotion from '@rc-component/motion';
+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.useState(false);
+
+  // ========================= Styles =========================
+  const offsetStyle = useOffsetStyle(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.createElement(CSSMotion, _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 = classNames(floatBgCls, motionClassName, {
+      [`${floatBgCls}-visible`]: motionVisible
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: cls,
+      style: {
+        ...offsetStyle,
+        ...sizeStyle,
+        ...motionStyle
+      }
+    });
+  });
+};
+export default FloatBg;

package/es/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/es/UniqueProvider/MotionContent.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import CSSMotion from '@rc-component/motion';
+import classNames from 'classnames';
+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(CSSMotion, {
+    motionAppear: true,
+    motionLeave: false,
+    visible: true,
+    motionName: motionName
+  }, ({
+    className: motionClassName,
+    style: motionStyle
+  }) => {
+    const cls = classNames(`${prefixCls}-motion-content`, motionClassName);
+    return /*#__PURE__*/React.createElement("div", {
+      className: cls,
+      style: motionStyle
+    }, childNode);
+  });
+};
+if (process.env.NODE_ENV !== 'production') {
+  MotionContent.displayName = 'MotionContent';
+}
+export default MotionContent;

package/es/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/es/UniqueProvider/index.js

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import Portal from '@rc-component/portal';
+import TriggerContext, { UniqueContext } from "../context";
+import useDelay from "../hooks/useDelay";
+import useAlign from "../hooks/useAlign";
+import Popup from "../Popup";
+import { useEvent } from '@rc-component/util';
+import useTargetState from "./useTargetState";
+import { isDOM } from "@rc-component/util/es/Dom/findDOMNode";
+import FloatBg from "./FloatBg";
+import classNames from 'classnames';
+import MotionContent from "./MotionContent";
+const UniqueProvider = ({
+  children
+}) => {
+  const [trigger, open, options, onTargetVisibleChanged] = useTargetState();
+
+  // =========================== 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 = useEvent(node => {
+    externalPopupRef.current = node;
+    if (isDOM(node) && popupEle !== node) {
+      setPopupEle(node);
+    }
+  });
+
+  // ========================== Register ==========================
+  const [popupId, setPopupId] = React.useState(0);
+  const delayInvoke = useDelay();
+  const show = 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 = 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] = useAlign(open, popupEle, options?.target, options?.popupPlacement, options?.builtinPlacements || {}, options?.popupAlign, undefined,
+  // onPopupAlign
+  false // isMobile
+  );
+  const contextValue = React.useMemo(() => ({
+    show,
+    hide
+  }), []);
+
+  // =========================== Motion ===========================
+  const onPrepare = useEvent(() => {
+    onAlign();
+    return Promise.resolve();
+  });
+
+  // ======================== Trigger Context =====================
+  const subPopupElements = React.useRef({});
+  const parentContext = React.useContext(TriggerContext);
+  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(UniqueContext.Provider, {
+    value: contextValue
+  }, children, options && /*#__PURE__*/React.createElement(TriggerContext.Provider, {
+    value: triggerContextValue
+  }, /*#__PURE__*/React.createElement(Popup, {
+    ref: setPopupRef,
+    portal: Portal,
+    prefixCls: prefixCls,
+    popup: /*#__PURE__*/React.createElement(MotionContent, {
+      prefixCls: prefixCls,
+      key: popupId
+    }, options.popup),
+    className: classNames(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, {
+    prefixCls: prefixCls,
+    isMobile: false,
+    ready: ready,
+    open: open,
+    align: alignInfo,
+    offsetR: offsetR,
+    offsetB: offsetB,
+    offsetX: offsetX,
+    offsetY: offsetY,
+    popupSize: popupSize,
+    motion: options.popupMotion
+  }))));
+};
+export default UniqueProvider;

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

package/es/UniqueProvider/useTargetState.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useEvent } from '@rc-component/util';
+/**
+ * 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() {
+  const [options, setOptions] = React.useState(null);
+  const [open, setOpen] = React.useState(false);
+  const [isAnimating, setIsAnimating] = React.useState(false);
+  const pendingOptionsRef = React.useRef(null);
+  const trigger = 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 = 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/es/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/es/context.js

@@ -1,3 +1,10 @@
 import * as React from 'react';
+
+// ===================== Nest =====================
+
 const TriggerContext = /*#__PURE__*/React.createContext(null);
-export default TriggerContext;
+export default TriggerContext;
+
+// ==================== Unique ====================
+
+export const UniqueContext = /*#__PURE__*/React.createContext(null);

package/es/hooks/useDelay.d.ts

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

package/es/hooks/useDelay.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+export default 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/es/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;