@rc-component/trigger 3.4.0 → 3.5.0

package/assets/index/Mobile.less

@@ -1,25 +1,55 @@
 .@{triggerPrefixCls} {
   &-mobile {
-    transition: all 0.3s;
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     top: auto;
 
-    &-fade {
-      &-appear,
-      &-enter {
-        &-start {
-          transform: translateY(100%);
+    // Motion
+    &.raise {
+      &-enter,
+      &-appear {
+        transform: translateY(100%);
+
+        &-active {
+          transition: all 0.3s;
+          transform: translateY(0);
         }
       }
 
       &-leave {
+        transform: translateY(0);
+
         &-active {
+          transition: all 0.3s;
           transform: translateY(100%);
         }
       }
     }
+
+    // Mask
+    &-mask {
+      &.fade {
+        &-enter,
+        &-appear {
+          opacity: 0;
+
+          &-active {
+            transition: all 0.3s;
+            opacity: 1;
+          }
+        }
+
+        &-leave {
+          opacity: 1;
+
+          &-active {
+            transition: all 0.3s;
+            opacity: 0;
+          }
+        }
+      }
+    }
   }
 }

package/assets/index.css

@@ -117,17 +117,41 @@
   }
 }
 .rc-trigger-popup-mobile {
-  transition: all 0.3s;
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   top: auto;
 }
-.rc-trigger-popup-mobile-fade-appear-start,
-.rc-trigger-popup-mobile-fade-enter-start {
+.rc-trigger-popup-mobile.raise-enter,
+.rc-trigger-popup-mobile.raise-appear {
   transform: translateY(100%);
 }
-.rc-trigger-popup-mobile-fade-leave-active {
+.rc-trigger-popup-mobile.raise-enter-active,
+.rc-trigger-popup-mobile.raise-appear-active {
+  transition: all 0.3s;
+  transform: translateY(0);
+}
+.rc-trigger-popup-mobile.raise-leave {
+  transform: translateY(0);
+}
+.rc-trigger-popup-mobile.raise-leave-active {
+  transition: all 0.3s;
   transform: translateY(100%);
 }
+.rc-trigger-popup-mobile-mask.fade-enter,
+.rc-trigger-popup-mobile-mask.fade-appear {
+  opacity: 0;
+}
+.rc-trigger-popup-mobile-mask.fade-enter-active,
+.rc-trigger-popup-mobile-mask.fade-appear-active {
+  transition: all 0.3s;
+  opacity: 1;
+}
+.rc-trigger-popup-mobile-mask.fade-leave {
+  opacity: 1;
+}
+.rc-trigger-popup-mobile-mask.fade-leave-active {
+  transition: all 0.3s;
+  opacity: 0;
+}

package/es/Popup/Mask.d.ts

@@ -6,5 +6,6 @@ export interface MaskProps {
     zIndex?: number;
     mask?: boolean;
     motion?: CSSMotionProps;
+    mobile?: boolean;
 }
 export default function Mask(props: MaskProps): React.JSX.Element;

package/es/Popup/Mask.js

@@ -8,7 +8,8 @@ export default function Mask(props) {
     open,
     zIndex,
     mask,
-    motion
+    motion,
+    mobile
   } = props;
   if (!mask) {
     return null;
@@ -23,6 +24,6 @@ export default function Mask(props) {
     style: {
       zIndex
     },
-    className: classNames(`${prefixCls}-mask`, className)
+    className: classNames(`${prefixCls}-mask`, mobile && `${prefixCls}-mobile-mask`, className)
   }));
 }

package/es/Popup/index.d.ts

@@ -2,6 +2,13 @@ import type { CSSMotionProps } from '@rc-component/motion';
 import * as React from 'react';
 import type { TriggerProps } from '../';
 import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
+export interface MobileConfig {
+    mask?: boolean;
+    /** Set popup motion. You can ref `rc-motion` for more info. */
+    motion?: CSSMotionProps;
+    /** Set mask motion. You can ref `rc-motion` for more info. */
+    maskMotion?: CSSMotionProps;
+}
 export interface PopupProps {
     prefixCls: string;
     className?: string;
@@ -39,6 +46,7 @@ export interface PopupProps {
     stretch?: string;
     targetWidth?: number;
     targetHeight?: number;
+    mobile?: MobileConfig;
 }
 declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<HTMLDivElement>>;
 export default Popup;

package/es/Popup/index.js

@@ -31,6 +31,8 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
     // Motion
     motion,
     maskMotion,
+    // Mobile
+    mobile,
     // Portal
     forceRender,
     getPopupContainer,
@@ -57,6 +59,17 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
   // 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]);
+
   // ======================= Container ========================
   const getPopupContainerNeedParams = getPopupContainer?.length > 0;
   const [show, setShow] = React.useState(!getPopupContainer || !getPopupContainerNeedParams);
@@ -75,7 +88,7 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // >>>>> Offset
   const AUTO = 'auto';
-  const offsetStyle = {
+  const offsetStyle = isMobile ? {} : {
     left: '-1000vw',
     top: '-1000vh',
     right: AUTO,
@@ -83,7 +96,7 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
 
   // Set align style
-  if (ready || !open) {
+  if (!isMobile && (ready || !open)) {
     const {
       points
     } = align;
@@ -131,8 +144,9 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
     prefixCls: prefixCls,
     open: open,
     zIndex: zIndex,
-    mask: mask,
-    motion: maskMotion
+    mask: mergedMask,
+    motion: mergedMaskMotion,
+    mobile: isMobile
   }), /*#__PURE__*/React.createElement(ResizeObserver, {
     onResize: onAlign,
     disabled: !open
@@ -144,7 +158,7 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
       removeOnLeave: false,
       forceRender: forceRender,
       leavedClassName: `${prefixCls}-hidden`
-    }, motion, {
+    }, mergedPopupMotion, {
       onAppearPrepare: onPrepare,
       onEnterPrepare: onPrepare,
       visible: open,
@@ -156,7 +170,9 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
       className: motionClassName,
       style: motionStyle
     }, motionRef) => {
-      const cls = classNames(prefixCls, motionClassName, className);
+      const cls = classNames(prefixCls, motionClassName, className, {
+        [`${prefixCls}-mobile`]: isMobile
+      });
       return /*#__PURE__*/React.createElement("div", {
         ref: composeRef(resizeObserverRef, ref, motionRef),
         className: cls,

package/es/hooks/useAction.d.ts

@@ -1,4 +1,5 @@
 import type { ActionType } from '../interface';
-type ActionTypes = ActionType | ActionType[];
-export default function useAction(mobile: boolean, action: ActionTypes, showAction?: ActionTypes, hideAction?: ActionTypes): [showAction: Set<ActionType>, hideAction: Set<ActionType>];
+type InternalActionType = ActionType | 'touch';
+type ActionTypes = InternalActionType | InternalActionType[];
+export default function useAction(action: ActionTypes, showAction?: ActionTypes, hideAction?: ActionTypes): [showAction: Set<InternalActionType>, hideAction: Set<InternalActionType>];
 export {};

package/es/hooks/useAction.js

@@ -2,22 +2,18 @@ import * as React from 'react';
 function toArray(val) {
   return val ? Array.isArray(val) ? val : [val] : [];
 }
-export default function useAction(mobile, action, showAction, hideAction) {
+export default 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 (mobile) {
-      if (showActionSet.has('hover')) {
-        showActionSet.delete('hover');
-        showActionSet.add('click');
-      }
-      if (hideActionSet.has('hover')) {
-        hideActionSet.delete('hover');
-        hideActionSet.add('click');
-      }
+    if (showActionSet.has('hover') && !showActionSet.has('click')) {
+      showActionSet.add('touch');
+    }
+    if (hideActionSet.has('hover') && !hideActionSet.has('click')) {
+      hideActionSet.add('touch');
     }
     return [showActionSet, hideActionSet];
-  }, [mobile, action, showAction, hideAction]);
+  }, [action, showAction, hideAction]);
 }

package/es/hooks/useAlign.d.ts

@@ -1,6 +1,6 @@
 import type { TriggerProps } from '..';
 import type { AlignType } from '../interface';
-export default function useAlign(open: boolean, popupEle: HTMLElement, target: HTMLElement | [x: number, y: number], placement: string, builtinPlacements: any, popupAlign?: AlignType, onPopupAlign?: TriggerProps['onPopupAlign']): [
+export default function useAlign(open: boolean, popupEle: HTMLElement, target: HTMLElement | [x: number, y: number], placement: string, builtinPlacements: any, popupAlign?: AlignType, onPopupAlign?: TriggerProps['onPopupAlign'], mobile?: boolean): [
     ready: boolean,
     offsetX: number,
     offsetY: number,

package/es/hooks/useAlign.js

@@ -61,7 +61,7 @@ function reversePoints(points, index) {
     return point;
   }).join('');
 }
-export default function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign) {
+export default function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign, mobile) {
   const [offsetInfo, setOffsetInfo] = React.useState({
     ready: false,
     offsetX: 0,
@@ -76,7 +76,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
   });
   const alignCountRef = React.useRef(0);
   const scrollerList = React.useMemo(() => {
-    if (!popupEle) {
+    if (!popupEle || mobile) {
       return [];
     }
     return collectScroller(popupEle);
@@ -95,13 +95,11 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
 
   // ========================= Align =========================
   const onAlign = useEvent(() => {
-    if (popupEle && target && open) {
+    if (popupEle && target && open && !mobile) {
       const popupElement = popupEle;
       const doc = popupElement.ownerDocument;
       const win = getWin(popupElement);
       const {
-        width,
-        height,
         position: popupPosition
       } = win.getComputedStyle(popupElement);
       const originLeft = popupElement.style.left;
@@ -153,6 +151,10 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
         };
       }
       const popupRect = popupElement.getBoundingClientRect();
+      const {
+        height,
+        width
+      } = win.getComputedStyle(popupElement);
       popupRect.x = popupRect.x ?? popupRect.left;
       popupRect.y = popupRect.y ?? popupRect.top;
       const {
@@ -456,9 +458,15 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       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);

package/es/hooks/useWinClick.d.ts

@@ -1 +1,5 @@
+/**
+ * Close if click on the window.
+ * Return the function that click on the Popup element.
+ */
 export default function useWinClick(open: boolean, clickToHide: boolean, targetEle: HTMLElement, popupEle: HTMLElement, mask: boolean, maskClosable: boolean, inPopupOrChild: (target: EventTarget) => boolean, triggerOpen: (open: boolean) => void): () => void;

package/es/hooks/useWinClick.js

@@ -2,6 +2,11 @@ import { getShadowRoot } from "@rc-component/util/es/Dom/shadow";
 import { warning } from "@rc-component/util/es/warning";
 import * as React from 'react';
 import { getWin } from "../util";
+
+/**
+ * Close if click on the window.
+ * Return the function that click on the Popup element.
+ */
 export default function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen) {
   const openRef = React.useRef(open);
   openRef.current = open;

package/es/index.d.ts

@@ -1,5 +1,6 @@
 import type { CSSMotionProps } from '@rc-component/motion';
 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 interface TriggerRef {
@@ -53,6 +54,13 @@ export interface TriggerProps {
      */
     fresh?: boolean;
     arrow?: boolean | ArrowTypeOuter;
+    /**
+     * @private Bump fixed position at bottom in mobile.
+     * Will replace the config of root props.
+     * This will directly trade as mobile view which will not check what real is.
+     * This is internal usage currently, do not use in your prod.
+     */
+    mobile?: MobileConfig;
 }
 export declare function generateTrigger(PortalComponent?: React.ComponentType<any>): React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<TriggerRef>>;
 declare const _default: React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<TriggerRef>>;

package/es/index.js

@@ -6,7 +6,6 @@ import { getShadowRoot } from "@rc-component/util/es/Dom/shadow";
 import useEvent from "@rc-component/util/es/hooks/useEvent";
 import useId from "@rc-component/util/es/hooks/useId";
 import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
-import isMobile from "@rc-component/util/es/isMobile";
 import * as React from 'react';
 import Popup from "./Popup";
 import TriggerContext from "./context";
@@ -69,15 +68,14 @@ export function generateTrigger(PortalComponent = Portal) {
       // Motion
       popupMotion,
       maskMotion,
+      // Private
+      mobile,
       ...restProps
     } = props;
     const mergedAutoDestroy = autoDestroy || false;
 
     // =========================== Mobile ===========================
-    const [mobile, setMobile] = React.useState(false);
-    useLayoutEffect(() => {
-      setMobile(isMobile());
-    }, []);
+    const isMobile = !!mobile;
 
     // ========================== Context ===========================
     const subPopupElements = React.useRef({});
@@ -190,8 +188,8 @@ export function generateTrigger(PortalComponent = Portal) {
     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);
-    const [showActions, hideActions] = useAction(mobile, action, showAction, hideAction);
+    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(() => {
@@ -266,17 +264,44 @@ export function generateTrigger(PortalComponent = Portal) {
     // =========================== 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, preEvent) {
+    function wrapperAction(eventName, nextOpen, delay, callback, ignoreCheck) {
       cloneProps[eventName] = (event, ...args) => {
-        preEvent?.(event);
-        triggerOpen(nextOpen, delay);
+        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) => {
@@ -289,25 +314,29 @@ export function generateTrigger(PortalComponent = Portal) {
 
         // 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, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen);
+    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) {
-      // Compatible with old browser which not support pointer event
-      wrapperAction('onMouseEnter', true, mouseEnterDelay, event => {
-        setMousePosByEvent(event);
-      });
-      wrapperAction('onPointerEnter', true, mouseEnterDelay, event => {
+      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)) {
@@ -318,14 +347,13 @@ export function generateTrigger(PortalComponent = Portal) {
       // Align Point
       if (alignPoint) {
         cloneProps.onMouseMove = event => {
-          // setMousePosByEvent(event);
           originChildProps.onMouseMove?.(event);
         };
       }
     }
     if (hoverToHide) {
-      wrapperAction('onMouseLeave', false, mouseLeaveDelay);
-      wrapperAction('onPointerLeave', false, mouseLeaveDelay);
+      wrapperAction('onMouseLeave', false, mouseLeaveDelay, undefined, ignoreMouseTrigger);
+      wrapperAction('onPointerLeave', false, mouseLeaveDelay, undefined, ignoreMouseTrigger);
       onPopupMouseLeave = () => {
         triggerOpen(false, mouseLeaveDelay);
       };
@@ -403,7 +431,7 @@ export function generateTrigger(PortalComponent = Portal) {
       ref: setPopupRef,
       prefixCls: prefixCls,
       popup: popup,
-      className: classNames(popupClassName, alignedClassName),
+      className: classNames(popupClassName, !isMobile && alignedClassName),
       style: popupStyle,
       target: targetEle,
       onMouseEnter: onPopupMouseEnter,
@@ -453,6 +481,9 @@ export function generateTrigger(PortalComponent = Portal) {
       stretch: stretch,
       targetWidth: targetWidth / scaleX,
       targetHeight: targetHeight / scaleY
+      // Mobile
+      ,
+      mobile: mobile
     })));
   });
   if (process.env.NODE_ENV !== 'production') {

package/es/interface.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import type { CSSMotionProps } from '@rc-component/motion';
 export type Placement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
 export type AlignPointTopBottom = 't' | 'b' | 'c';
 export type AlignPointLeftRight = 'l' | 'r' | 'c';
@@ -90,10 +89,3 @@ export interface Point {
 export interface CommonEventHandler {
     remove: () => void;
 }
-export interface MobileConfig {
-    /** Set popup motion. You can ref `rc-motion` for more info. */
-    popupMotion?: CSSMotionProps;
-    popupClassName?: string;
-    popupStyle?: React.CSSProperties;
-    popupRender?: (originNode: React.ReactNode) => React.ReactNode;
-}

package/lib/Popup/Mask.d.ts

@@ -6,5 +6,6 @@ export interface MaskProps {
     zIndex?: number;
     mask?: boolean;
     motion?: CSSMotionProps;
+    mobile?: boolean;
 }
 export default function Mask(props: MaskProps): React.JSX.Element;

package/lib/Popup/Mask.js

@@ -17,7 +17,8 @@ function Mask(props) {
     open,
     zIndex,
     mask,
-    motion
+    motion,
+    mobile
   } = props;
   if (!mask) {
     return null;
@@ -32,6 +33,6 @@ function Mask(props) {
     style: {
       zIndex
     },
-    className: (0, _classnames.default)(`${prefixCls}-mask`, className)
+    className: (0, _classnames.default)(`${prefixCls}-mask`, mobile && `${prefixCls}-mobile-mask`, className)
   }));
 }

package/lib/Popup/index.d.ts

@@ -2,6 +2,13 @@ import type { CSSMotionProps } from '@rc-component/motion';
 import * as React from 'react';
 import type { TriggerProps } from '../';
 import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
+export interface MobileConfig {
+    mask?: boolean;
+    /** Set popup motion. You can ref `rc-motion` for more info. */
+    motion?: CSSMotionProps;
+    /** Set mask motion. You can ref `rc-motion` for more info. */
+    maskMotion?: CSSMotionProps;
+}
 export interface PopupProps {
     prefixCls: string;
     className?: string;
@@ -39,6 +46,7 @@ export interface PopupProps {
     stretch?: string;
     targetWidth?: number;
     targetHeight?: number;
+    mobile?: MobileConfig;
 }
 declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<HTMLDivElement>>;
 export default Popup;

package/lib/Popup/index.js

@@ -40,6 +40,8 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
     // Motion
     motion,
     maskMotion,
+    // Mobile
+    mobile,
     // Portal
     forceRender,
     getPopupContainer,
@@ -66,6 +68,17 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
   // 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]);
+
   // ======================= Container ========================
   const getPopupContainerNeedParams = getPopupContainer?.length > 0;
   const [show, setShow] = React.useState(!getPopupContainer || !getPopupContainerNeedParams);
@@ -84,7 +97,7 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // >>>>> Offset
   const AUTO = 'auto';
-  const offsetStyle = {
+  const offsetStyle = isMobile ? {} : {
     left: '-1000vw',
     top: '-1000vh',
     right: AUTO,
@@ -92,7 +105,7 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
 
   // Set align style
-  if (ready || !open) {
+  if (!isMobile && (ready || !open)) {
     const {
       points
     } = align;
@@ -140,8 +153,9 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
     prefixCls: prefixCls,
     open: open,
     zIndex: zIndex,
-    mask: mask,
-    motion: maskMotion
+    mask: mergedMask,
+    motion: mergedMaskMotion,
+    mobile: isMobile
   }), /*#__PURE__*/React.createElement(_resizeObserver.default, {
     onResize: onAlign,
     disabled: !open
@@ -153,7 +167,7 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
       removeOnLeave: false,
       forceRender: forceRender,
       leavedClassName: `${prefixCls}-hidden`
-    }, motion, {
+    }, mergedPopupMotion, {
       onAppearPrepare: onPrepare,
       onEnterPrepare: onPrepare,
       visible: open,
@@ -165,7 +179,9 @@ const Popup = /*#__PURE__*/React.forwardRef((props, ref) => {
       className: motionClassName,
       style: motionStyle
     }, motionRef) => {
-      const cls = (0, _classnames.default)(prefixCls, motionClassName, className);
+      const cls = (0, _classnames.default)(prefixCls, motionClassName, className, {
+        [`${prefixCls}-mobile`]: isMobile
+      });
       return /*#__PURE__*/React.createElement("div", {
         ref: (0, _ref.composeRef)(resizeObserverRef, ref, motionRef),
         className: cls,

package/lib/hooks/useAction.d.ts

@@ -1,4 +1,5 @@
 import type { ActionType } from '../interface';
-type ActionTypes = ActionType | ActionType[];
-export default function useAction(mobile: boolean, action: ActionTypes, showAction?: ActionTypes, hideAction?: ActionTypes): [showAction: Set<ActionType>, hideAction: Set<ActionType>];
+type InternalActionType = ActionType | 'touch';
+type ActionTypes = InternalActionType | InternalActionType[];
+export default function useAction(action: ActionTypes, showAction?: ActionTypes, hideAction?: ActionTypes): [showAction: Set<InternalActionType>, hideAction: Set<InternalActionType>];
 export {};

package/lib/hooks/useAction.js

@@ -10,22 +10,18 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function toArray(val) {
   return val ? Array.isArray(val) ? val : [val] : [];
 }
-function useAction(mobile, action, showAction, hideAction) {
+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 (mobile) {
-      if (showActionSet.has('hover')) {
-        showActionSet.delete('hover');
-        showActionSet.add('click');
-      }
-      if (hideActionSet.has('hover')) {
-        hideActionSet.delete('hover');
-        hideActionSet.add('click');
-      }
+    if (showActionSet.has('hover') && !showActionSet.has('click')) {
+      showActionSet.add('touch');
+    }
+    if (hideActionSet.has('hover') && !hideActionSet.has('click')) {
+      hideActionSet.add('touch');
     }
     return [showActionSet, hideActionSet];
-  }, [mobile, action, showAction, hideAction]);
+  }, [action, showAction, hideAction]);
 }

package/lib/hooks/useAlign.d.ts

@@ -1,6 +1,6 @@
 import type { TriggerProps } from '..';
 import type { AlignType } from '../interface';
-export default function useAlign(open: boolean, popupEle: HTMLElement, target: HTMLElement | [x: number, y: number], placement: string, builtinPlacements: any, popupAlign?: AlignType, onPopupAlign?: TriggerProps['onPopupAlign']): [
+export default function useAlign(open: boolean, popupEle: HTMLElement, target: HTMLElement | [x: number, y: number], placement: string, builtinPlacements: any, popupAlign?: AlignType, onPopupAlign?: TriggerProps['onPopupAlign'], mobile?: boolean): [
     ready: boolean,
     offsetX: number,
     offsetY: number,

package/lib/hooks/useAlign.js

@@ -70,7 +70,7 @@ function reversePoints(points, index) {
     return point;
   }).join('');
 }
-function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign) {
+function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign, mobile) {
   const [offsetInfo, setOffsetInfo] = React.useState({
     ready: false,
     offsetX: 0,
@@ -85,7 +85,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
   });
   const alignCountRef = React.useRef(0);
   const scrollerList = React.useMemo(() => {
-    if (!popupEle) {
+    if (!popupEle || mobile) {
       return [];
     }
     return (0, _util.collectScroller)(popupEle);
@@ -104,13 +104,11 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 
   // ========================= Align =========================
   const onAlign = (0, _useEvent.default)(() => {
-    if (popupEle && target && open) {
+    if (popupEle && target && open && !mobile) {
       const popupElement = popupEle;
       const doc = popupElement.ownerDocument;
       const win = (0, _util.getWin)(popupElement);
       const {
-        width,
-        height,
         position: popupPosition
       } = win.getComputedStyle(popupElement);
       const originLeft = popupElement.style.left;
@@ -162,6 +160,10 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
         };
       }
       const popupRect = popupElement.getBoundingClientRect();
+      const {
+        height,
+        width
+      } = win.getComputedStyle(popupElement);
       popupRect.x = popupRect.x ?? popupRect.left;
       popupRect.y = popupRect.y ?? popupRect.top;
       const {
@@ -465,9 +467,15 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       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);

package/lib/hooks/useWinClick.d.ts

@@ -1 +1,5 @@
+/**
+ * Close if click on the window.
+ * Return the function that click on the Popup element.
+ */
 export default function useWinClick(open: boolean, clickToHide: boolean, targetEle: HTMLElement, popupEle: HTMLElement, mask: boolean, maskClosable: boolean, inPopupOrChild: (target: EventTarget) => boolean, triggerOpen: (open: boolean) => void): () => void;

package/lib/hooks/useWinClick.js

@@ -10,6 +10,10 @@ var React = _interopRequireWildcard(require("react"));
 var _util = require("../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; }
+/**
+ * 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;

package/lib/index.d.ts

@@ -1,5 +1,6 @@
 import type { CSSMotionProps } from '@rc-component/motion';
 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 interface TriggerRef {
@@ -53,6 +54,13 @@ export interface TriggerProps {
      */
     fresh?: boolean;
     arrow?: boolean | ArrowTypeOuter;
+    /**
+     * @private Bump fixed position at bottom in mobile.
+     * Will replace the config of root props.
+     * This will directly trade as mobile view which will not check what real is.
+     * This is internal usage currently, do not use in your prod.
+     */
+    mobile?: MobileConfig;
 }
 export declare function generateTrigger(PortalComponent?: React.ComponentType<any>): React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<TriggerRef>>;
 declare const _default: React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<TriggerRef>>;

package/lib/index.js

@@ -13,7 +13,6 @@ var _shadow = require("@rc-component/util/lib/Dom/shadow");
 var _useEvent = _interopRequireDefault(require("@rc-component/util/lib/hooks/useEvent"));
 var _useId = _interopRequireDefault(require("@rc-component/util/lib/hooks/useId"));
 var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
-var _isMobile = _interopRequireDefault(require("@rc-component/util/lib/isMobile"));
 var React = _interopRequireWildcard(require("react"));
 var _Popup = _interopRequireDefault(require("./Popup"));
 var _context = _interopRequireDefault(require("./context"));
@@ -78,15 +77,14 @@ function generateTrigger(PortalComponent = _portal.default) {
       // Motion
       popupMotion,
       maskMotion,
+      // Private
+      mobile,
       ...restProps
     } = props;
     const mergedAutoDestroy = autoDestroy || false;
 
     // =========================== Mobile ===========================
-    const [mobile, setMobile] = React.useState(false);
-    (0, _useLayoutEffect.default)(() => {
-      setMobile((0, _isMobile.default)());
-    }, []);
+    const isMobile = !!mobile;
 
     // ========================== Context ===========================
     const subPopupElements = React.useRef({});
@@ -199,8 +197,8 @@ function generateTrigger(PortalComponent = _portal.default) {
     const setMousePosByEvent = event => {
       setMousePos([event.clientX, event.clientY]);
     };
-    const [ready, offsetX, offsetY, offsetR, offsetB, arrowX, arrowY, scaleX, scaleY, alignInfo, onAlign] = (0, _useAlign.default)(mergedOpen, popupEle, alignPoint && mousePos !== null ? mousePos : targetEle, popupPlacement, builtinPlacements, popupAlign, onPopupAlign);
-    const [showActions, hideActions] = (0, _useAction.default)(mobile, action, showAction, hideAction);
+    const [ready, offsetX, offsetY, offsetR, offsetB, arrowX, arrowY, scaleX, scaleY, alignInfo, onAlign] = (0, _useAlign.default)(mergedOpen, popupEle, alignPoint && mousePos !== null ? mousePos : targetEle, popupPlacement, builtinPlacements, popupAlign, onPopupAlign, isMobile);
+    const [showActions, hideActions] = (0, _useAction.default)(action, showAction, hideAction);
     const clickToShow = showActions.has('click');
     const clickToHide = hideActions.has('click') || hideActions.has('contextMenu');
     const triggerAlign = (0, _useEvent.default)(() => {
@@ -275,17 +273,44 @@ function generateTrigger(PortalComponent = _portal.default) {
     // =========================== 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, preEvent) {
+    function wrapperAction(eventName, nextOpen, delay, callback, ignoreCheck) {
       cloneProps[eventName] = (event, ...args) => {
-        preEvent?.(event);
-        triggerOpen(nextOpen, delay);
+        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) => {
@@ -298,25 +323,29 @@ function generateTrigger(PortalComponent = _portal.default) {
 
         // 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 = (0, _useWinClick.default)(mergedOpen, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen);
+    const onPopupPointerDown = (0, _useWinClick.default)(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) {
-      // Compatible with old browser which not support pointer event
-      wrapperAction('onMouseEnter', true, mouseEnterDelay, event => {
-        setMousePosByEvent(event);
-      });
-      wrapperAction('onPointerEnter', true, mouseEnterDelay, event => {
+      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)) {
@@ -327,14 +356,13 @@ function generateTrigger(PortalComponent = _portal.default) {
       // Align Point
       if (alignPoint) {
         cloneProps.onMouseMove = event => {
-          // setMousePosByEvent(event);
           originChildProps.onMouseMove?.(event);
         };
       }
     }
     if (hoverToHide) {
-      wrapperAction('onMouseLeave', false, mouseLeaveDelay);
-      wrapperAction('onPointerLeave', false, mouseLeaveDelay);
+      wrapperAction('onMouseLeave', false, mouseLeaveDelay, undefined, ignoreMouseTrigger);
+      wrapperAction('onPointerLeave', false, mouseLeaveDelay, undefined, ignoreMouseTrigger);
       onPopupMouseLeave = () => {
         triggerOpen(false, mouseLeaveDelay);
       };
@@ -412,7 +440,7 @@ function generateTrigger(PortalComponent = _portal.default) {
       ref: setPopupRef,
       prefixCls: prefixCls,
       popup: popup,
-      className: (0, _classnames.default)(popupClassName, alignedClassName),
+      className: (0, _classnames.default)(popupClassName, !isMobile && alignedClassName),
       style: popupStyle,
       target: targetEle,
       onMouseEnter: onPopupMouseEnter,
@@ -462,6 +490,9 @@ function generateTrigger(PortalComponent = _portal.default) {
       stretch: stretch,
       targetWidth: targetWidth / scaleX,
       targetHeight: targetHeight / scaleY
+      // Mobile
+      ,
+      mobile: mobile
     })));
   });
   if (process.env.NODE_ENV !== 'production') {

package/lib/interface.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import type { CSSMotionProps } from '@rc-component/motion';
 export type Placement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
 export type AlignPointTopBottom = 't' | 'b' | 'c';
 export type AlignPointLeftRight = 'l' | 'r' | 'c';
@@ -90,10 +89,3 @@ export interface Point {
 export interface CommonEventHandler {
     remove: () => void;
 }
-export interface MobileConfig {
-    /** Set popup motion. You can ref `rc-motion` for more info. */
-    popupMotion?: CSSMotionProps;
-    popupClassName?: string;
-    popupStyle?: React.CSSProperties;
-    popupRender?: (originNode: React.ReactNode) => React.ReactNode;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/trigger",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "base abstract trigger component for react",
   "engines": {
     "node": ">=8.x"
@@ -54,7 +54,7 @@
     "@testing-library/react": "^16.0.0",
     "@types/classnames": "^2.2.10",
     "@types/jest": "^29.5.2",
-    "@types/node": "^22.0.2",
+    "@types/node": "^24.0.3",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@umijs/fabric": "^4.0.1",
@@ -68,7 +68,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "regenerator-runtime": "^0.14.0",
-    "typescript": "^5.1.6"
+    "typescript": "~5.1.6"
   },
   "peerDependencies": {
     "react": ">=18.0.0",