@rc-component/trigger 1.0.0

package/es/index.d.ts

@@ -0,0 +1,61 @@
+import type { CSSMotionProps } from 'rc-motion';
+import * as React from 'react';
+import type { ActionType, AlignType, AnimationType, BuildInPlacements, TransitionNameType } from './interface';
+export interface TriggerRef {
+    forceAlign: VoidFunction;
+}
+export interface TriggerProps {
+    children: React.ReactElement;
+    action?: ActionType | ActionType[];
+    showAction?: ActionType[];
+    hideAction?: ActionType[];
+    prefixCls?: string;
+    zIndex?: number;
+    stretch?: string;
+    popupVisible?: boolean;
+    defaultPopupVisible?: boolean;
+    onPopupVisibleChange?: (visible: boolean) => void;
+    afterPopupVisibleChange?: (visible: boolean) => void;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    forceRender?: boolean;
+    autoDestroy?: boolean;
+    /** @deprecated Please use `autoDestroy` instead */
+    destroyPopupOnHide?: boolean;
+    mask?: boolean;
+    maskClosable?: boolean;
+    /** Set popup motion. You can ref `rc-motion` for more info. */
+    popupMotion?: CSSMotionProps;
+    /** Set mask motion. You can ref `rc-motion` for more info. */
+    maskMotion?: CSSMotionProps;
+    /** @deprecated Please us `popupMotion` instead. */
+    popupTransitionName?: TransitionNameType;
+    /** @deprecated Please us `popupMotion` instead. */
+    popupAnimation?: AnimationType;
+    /** @deprecated Please us `maskMotion` instead. */
+    maskTransitionName?: TransitionNameType;
+    /** @deprecated Please us `maskMotion` instead. */
+    maskAnimation?: AnimationType;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    focusDelay?: number;
+    blurDelay?: number;
+    popup: React.ReactNode | (() => React.ReactNode);
+    popupPlacement?: string;
+    builtinPlacements?: BuildInPlacements;
+    popupAlign?: AlignType;
+    popupClassName?: string;
+    popupStyle?: React.CSSProperties;
+    getPopupClassNameFromAlign?: (align: AlignType) => string;
+    onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
+    alignPoint?: boolean;
+    arrow?: boolean;
+    /** @deprecated Add `className` on `children`. Please add `className` directly instead. */
+    className?: string;
+    /**
+     * @private Get trigger DOM node.
+     * Used for some component is function component which can not access by `findDOMNode`
+     */
+    getTriggerDOMNode?: (node: React.ReactInstance) => HTMLElement;
+}
+declare const Trigger: React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<TriggerRef>>;
+export default Trigger;

package/es/index.js

@@ -0,0 +1,448 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["prefixCls", "children", "action", "showAction", "hideAction", "popupVisible", "defaultPopupVisible", "onPopupVisibleChange", "afterPopupVisibleChange", "mouseEnterDelay", "mouseLeaveDelay", "focusDelay", "blurDelay", "mask", "maskClosable", "getPopupContainer", "forceRender", "autoDestroy", "destroyPopupOnHide", "popup", "popupClassName", "popupStyle", "popupPlacement", "builtinPlacements", "popupAlign", "zIndex", "stretch", "getPopupClassNameFromAlign", "alignPoint", "onPopupClick", "arrow", "popupMotion", "maskMotion", "popupTransitionName", "popupAnimation", "maskTransitionName", "maskAnimation", "className", "getTriggerDOMNode"];
+import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
+import useEvent from "rc-util/es/hooks/useEvent";
+import useId from "rc-util/es/hooks/useId";
+import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
+import useMergedState from "rc-util/es/hooks/useMergedState";
+import * as React from 'react';
+import TriggerContext from "./context";
+import useAction from "./hooks/useAction";
+import useAlign from "./hooks/useAlign";
+import useWatch from "./hooks/useWatch";
+import Popup from "./Popup";
+import TriggerWrapper from "./TriggerWrapper";
+import { getAlignPopupClassName, getMotion, getWin } from "./util";
+var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? 'rc-trigger-popup' : _props$prefixCls,
+    children = props.children,
+    _props$action = props.action,
+    action = _props$action === void 0 ? 'hover' : _props$action,
+    showAction = props.showAction,
+    hideAction = props.hideAction,
+    popupVisible = props.popupVisible,
+    defaultPopupVisible = props.defaultPopupVisible,
+    onPopupVisibleChange = props.onPopupVisibleChange,
+    afterPopupVisibleChange = props.afterPopupVisibleChange,
+    mouseEnterDelay = props.mouseEnterDelay,
+    _props$mouseLeaveDela = props.mouseLeaveDelay,
+    mouseLeaveDelay = _props$mouseLeaveDela === void 0 ? 0.1 : _props$mouseLeaveDela,
+    focusDelay = props.focusDelay,
+    blurDelay = props.blurDelay,
+    mask = props.mask,
+    _props$maskClosable = props.maskClosable,
+    maskClosable = _props$maskClosable === void 0 ? true : _props$maskClosable,
+    getPopupContainer = props.getPopupContainer,
+    forceRender = props.forceRender,
+    autoDestroy = props.autoDestroy,
+    destroyPopupOnHide = props.destroyPopupOnHide,
+    popup = props.popup,
+    popupClassName = props.popupClassName,
+    popupStyle = props.popupStyle,
+    popupPlacement = props.popupPlacement,
+    _props$builtinPlaceme = props.builtinPlacements,
+    builtinPlacements = _props$builtinPlaceme === void 0 ? {} : _props$builtinPlaceme,
+    popupAlign = props.popupAlign,
+    zIndex = props.zIndex,
+    stretch = props.stretch,
+    getPopupClassNameFromAlign = props.getPopupClassNameFromAlign,
+    alignPoint = props.alignPoint,
+    onPopupClick = props.onPopupClick,
+    arrow = props.arrow,
+    popupMotion = props.popupMotion,
+    maskMotion = props.maskMotion,
+    popupTransitionName = props.popupTransitionName,
+    popupAnimation = props.popupAnimation,
+    maskTransitionName = props.maskTransitionName,
+    maskAnimation = props.maskAnimation,
+    className = props.className,
+    getTriggerDOMNode = props.getTriggerDOMNode,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var mergedAutoDestroy = autoDestroy || destroyPopupOnHide || false;
+
+  // ========================== Context ===========================
+  var subPopupElements = React.useRef({});
+  var parentContext = React.useContext(TriggerContext);
+  var context = React.useMemo(function () {
+    return {
+      registerSubPopup: function registerSubPopup(id, subPopupEle) {
+        subPopupElements.current[id] = subPopupEle;
+        parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, subPopupEle);
+      }
+    };
+  }, [parentContext]);
+
+  // =========================== Popup ============================
+  var id = useId();
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    popupEle = _React$useState2[0],
+    setPopupEle = _React$useState2[1];
+  var setPopupRef = React.useCallback(function (node) {
+    if (node instanceof HTMLElement) {
+      setPopupEle(node);
+    }
+    parentContext === null || parentContext === void 0 ? void 0 : parentContext.registerSubPopup(id, node);
+  }, []);
+
+  // =========================== Target ===========================
+  // Use state to control here since `useRef` update not trigger render
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    targetEle = _React$useState4[0],
+    setTargetEle = _React$useState4[1];
+  var setTargetRef = React.useCallback(function (node) {
+    if (node instanceof HTMLElement) {
+      setTargetEle(node);
+    }
+  }, []);
+
+  // ========================== Children ==========================
+  var child = React.Children.only(children);
+  var originChildProps = (child === null || child === void 0 ? void 0 : child.props) || {};
+  var cloneProps = {};
+  var inPopupOrChild = useEvent(function (ele) {
+    var childDOM = targetEle;
+    return (childDOM === null || childDOM === void 0 ? void 0 : childDOM.contains(ele)) || ele === childDOM || (popupEle === null || popupEle === void 0 ? void 0 : popupEle.contains(ele)) || ele === popupEle || Object.values(subPopupElements.current).some(function (subPopupEle) {
+      return subPopupEle.contains(ele) || ele === subPopupEle;
+    });
+  });
+
+  // =========================== Motion ===========================
+  var mergePopupMotion = getMotion(prefixCls, popupMotion, popupAnimation, popupTransitionName);
+  var mergeMaskMotion = getMotion(prefixCls, maskMotion, maskAnimation, maskTransitionName);
+
+  // ============================ Open ============================
+  var _useMergedState = useMergedState(defaultPopupVisible || false, {
+      value: popupVisible
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    mergedOpen = _useMergedState2[0],
+    setMergedOpen = _useMergedState2[1];
+  var openRef = React.useRef(mergedOpen);
+  openRef.current = mergedOpen;
+  var internalTriggerOpen = useEvent(function (nextOpen) {
+    if (mergedOpen !== nextOpen) {
+      setMergedOpen(nextOpen);
+      onPopupVisibleChange === null || onPopupVisibleChange === void 0 ? void 0 : onPopupVisibleChange(nextOpen);
+    }
+  });
+
+  // Trigger for delay
+  var delayRef = React.useRef();
+  var clearDelay = function clearDelay() {
+    clearTimeout(delayRef.current);
+  };
+  var triggerOpen = function triggerOpen(nextOpen) {
+    var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    clearDelay();
+    if (delay === 0) {
+      internalTriggerOpen(nextOpen);
+    } else {
+      delayRef.current = setTimeout(function () {
+        internalTriggerOpen(nextOpen);
+      }, delay * 1000);
+    }
+  };
+  React.useEffect(function () {
+    return clearDelay;
+  }, []);
+
+  // ========================== Motion ============================
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    inMotion = _React$useState6[0],
+    setInMotion = _React$useState6[1];
+  useLayoutEffect(function () {
+    setInMotion(true);
+  }, [mergedOpen]);
+  var _React$useState7 = React.useState(null),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    motionPrepareResolve = _React$useState8[0],
+    setMotionPrepareResolve = _React$useState8[1];
+
+  // =========================== Align ============================
+  var _React$useState9 = React.useState([0, 0]),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    mousePos = _React$useState10[0],
+    setMousePos = _React$useState10[1];
+  var setMousePosByEvent = function setMousePosByEvent(event) {
+    setMousePos([event.clientX, event.clientY]);
+  };
+  var _useAlign = useAlign(mergedOpen, popupEle, alignPoint ? mousePos : targetEle, popupPlacement, builtinPlacements, popupAlign),
+    _useAlign2 = _slicedToArray(_useAlign, 9),
+    ready = _useAlign2[0],
+    offsetX = _useAlign2[1],
+    offsetY = _useAlign2[2],
+    arrowX = _useAlign2[3],
+    arrowY = _useAlign2[4],
+    scaleX = _useAlign2[5],
+    scaleY = _useAlign2[6],
+    alignInfo = _useAlign2[7],
+    onAlign = _useAlign2[8];
+  var triggerAlign = useEvent(function () {
+    if (!inMotion) {
+      onAlign();
+    }
+  });
+  useWatch(mergedOpen, targetEle, popupEle, triggerAlign);
+  useLayoutEffect(function () {
+    triggerAlign();
+  }, [mousePos]);
+  var alignedClassName = React.useMemo(function () {
+    var baseClassName = getAlignPopupClassName(builtinPlacements, prefixCls, alignInfo, alignPoint);
+    return classNames(baseClassName, getPopupClassNameFromAlign === null || getPopupClassNameFromAlign === void 0 ? void 0 : getPopupClassNameFromAlign(alignInfo));
+  }, [alignInfo, getPopupClassNameFromAlign, builtinPlacements, prefixCls, alignPoint]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      forceAlign: triggerAlign
+    };
+  });
+
+  // ========================== Motion ============================
+  var onVisibleChanged = function onVisibleChanged(visible) {
+    setInMotion(false);
+    onAlign();
+    afterPopupVisibleChange === null || afterPopupVisibleChange === void 0 ? void 0 : afterPopupVisibleChange(visible);
+  };
+
+  // We will trigger align when motion is in prepare
+  var onPrepare = function onPrepare() {
+    return new Promise(function (resolve) {
+      setMotionPrepareResolve(function () {
+        return resolve;
+      });
+    });
+  };
+  useLayoutEffect(function () {
+    if (motionPrepareResolve) {
+      onAlign();
+      motionPrepareResolve();
+      setMotionPrepareResolve(null);
+    }
+  }, [motionPrepareResolve]);
+
+  // ========================== Stretch ===========================
+  var _React$useState11 = React.useState(0),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    targetWidth = _React$useState12[0],
+    setTargetWidth = _React$useState12[1];
+  var _React$useState13 = React.useState(0),
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    targetHeight = _React$useState14[0],
+    setTargetHeight = _React$useState14[1];
+  var onTargetResize = function onTargetResize(_, ele) {
+    triggerAlign();
+    if (stretch) {
+      var rect = ele.getBoundingClientRect();
+      setTargetWidth(rect.width);
+      setTargetHeight(rect.height);
+    }
+  };
+
+  // =========================== Action ===========================
+  var _useAction = useAction(action, showAction, hideAction),
+    _useAction2 = _slicedToArray(_useAction, 2),
+    showActions = _useAction2[0],
+    hideActions = _useAction2[1];
+
+  // Util wrapper for trigger action
+  var wrapperAction = function wrapperAction(eventName, nextOpen, delay, preEvent) {
+    cloneProps[eventName] = function (event) {
+      var _originChildProps$eve;
+      preEvent === null || preEvent === void 0 ? void 0 : preEvent(event);
+      triggerOpen(nextOpen, delay);
+
+      // Pass to origin
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+      (_originChildProps$eve = originChildProps[eventName]) === null || _originChildProps$eve === void 0 ? void 0 : _originChildProps$eve.call.apply(_originChildProps$eve, [originChildProps, event].concat(args));
+    };
+  };
+
+  // ======================= Action: Click ========================
+  var clickToShow = showActions.has('click');
+  var clickToHide = hideActions.has('click') || hideActions.has('contextMenu');
+  if (clickToShow || clickToHide) {
+    cloneProps.onClick = function (event) {
+      var _originChildProps$onC;
+      if (openRef.current && clickToHide) {
+        triggerOpen(false);
+      } else if (!openRef.current && clickToShow) {
+        setMousePosByEvent(event);
+        triggerOpen(true);
+      }
+
+      // Pass to origin
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+      (_originChildProps$onC = originChildProps.onClick) === null || _originChildProps$onC === void 0 ? void 0 : _originChildProps$onC.call.apply(_originChildProps$onC, [originChildProps, event].concat(args));
+    };
+  }
+
+  // Click to hide is special action since click popup element should not hide
+  React.useEffect(function () {
+    if (clickToHide && popupEle && (!mask || maskClosable)) {
+      var onWindowClick = function onWindowClick(_ref) {
+        var target = _ref.target;
+        if (openRef.current && !inPopupOrChild(target)) {
+          triggerOpen(false);
+        }
+      };
+      var win = getWin(popupEle);
+      win.addEventListener('click', onWindowClick);
+      return function () {
+        win.removeEventListener('click', onWindowClick);
+      };
+    }
+  }, [clickToHide, popupEle, mask, maskClosable]);
+
+  // ======================= Action: Hover ========================
+  var hoverToShow = showActions.has('hover');
+  var hoverToHide = hideActions.has('hover');
+  var onPopupMouseEnter;
+  var onPopupMouseLeave;
+  if (hoverToShow) {
+    wrapperAction('onMouseEnter', true, mouseEnterDelay, function (event) {
+      setMousePosByEvent(event);
+    });
+    onPopupMouseEnter = function onPopupMouseEnter() {
+      triggerOpen(true, mouseEnterDelay);
+    };
+
+    // Align Point
+    if (alignPoint) {
+      cloneProps.onMouseMove = function (event) {
+        var _originChildProps$onM;
+        // setMousePosByEvent(event);
+        (_originChildProps$onM = originChildProps.onMouseMove) === null || _originChildProps$onM === void 0 ? void 0 : _originChildProps$onM.call(originChildProps, event);
+      };
+    }
+  }
+  if (hoverToHide) {
+    wrapperAction('onMouseLeave', false, mouseLeaveDelay);
+    onPopupMouseLeave = function onPopupMouseLeave() {
+      triggerOpen(false, mouseLeaveDelay);
+    };
+  }
+
+  // ======================= Action: Focus ========================
+  if (showActions.has('focus')) {
+    wrapperAction('onFocus', true, focusDelay);
+  }
+  if (hideActions.has('focus')) {
+    wrapperAction('onBlur', false, blurDelay);
+  }
+
+  // ==================== Action: ContextMenu =====================
+  if (showActions.has('contextMenu')) {
+    cloneProps.onContextMenu = function (event) {
+      var _originChildProps$onC2;
+      setMousePosByEvent(event);
+      triggerOpen(true);
+      event.preventDefault();
+
+      // Pass to origin
+      for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+        args[_key3 - 1] = arguments[_key3];
+      }
+      (_originChildProps$onC2 = originChildProps.onContextMenu) === null || _originChildProps$onC2 === void 0 ? void 0 : _originChildProps$onC2.call.apply(_originChildProps$onC2, [originChildProps, event].concat(args));
+    };
+  }
+
+  // ========================= ClassName ==========================
+  if (className) {
+    cloneProps.className = classNames(originChildProps.className, className);
+  }
+
+  // =========================== Render ===========================
+  var mergedChildrenProps = _objectSpread(_objectSpread({}, originChildProps), cloneProps);
+
+  // Pass props into cloneProps for nest usage
+  var passedProps = {};
+  var passedEventList = ['onContextMenu', 'onClick', 'onMouseDown', 'onTouchStart', 'onMouseEnter', 'onMouseLeave', 'onFocus', 'onBlur'];
+  passedEventList.forEach(function (eventName) {
+    if (restProps[eventName]) {
+      passedProps[eventName] = function () {
+        var _mergedChildrenProps$;
+        for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+          args[_key4] = arguments[_key4];
+        }
+        (_mergedChildrenProps$ = mergedChildrenProps[eventName]) === null || _mergedChildrenProps$ === void 0 ? void 0 : _mergedChildrenProps$.call.apply(_mergedChildrenProps$, [mergedChildrenProps].concat(args));
+        restProps[eventName].apply(restProps, args);
+      };
+    }
+  });
+
+  // Child Node
+  var triggerNode = /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, mergedChildrenProps), passedProps));
+
+  // Render
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TriggerContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(Popup, {
+    ref: setPopupRef,
+    prefixCls: prefixCls,
+    popup: popup,
+    className: classNames(popupClassName, alignedClassName),
+    style: popupStyle,
+    target: targetEle,
+    onMouseEnter: onPopupMouseEnter,
+    onMouseLeave: onPopupMouseLeave,
+    zIndex: zIndex
+    // Open
+    ,
+    open: mergedOpen,
+    keepDom: inMotion
+    // Click
+    ,
+    onClick: onPopupClick
+    // Mask
+    ,
+    mask: mask
+    // Motion
+    ,
+    motion: mergePopupMotion,
+    maskMotion: mergeMaskMotion,
+    onVisibleChanged: onVisibleChanged,
+    onPrepare: onPrepare
+    // Portal
+    ,
+    forceRender: forceRender,
+    autoDestroy: mergedAutoDestroy,
+    getPopupContainer: getPopupContainer
+    // Arrow
+    ,
+    align: alignInfo,
+    arrow: arrow
+    // Align
+    ,
+    ready: ready,
+    offsetX: offsetX,
+    offsetY: offsetY,
+    arrowX: arrowX,
+    arrowY: arrowY,
+    onAlign: triggerAlign
+    // Stretch
+    ,
+    stretch: stretch,
+    targetWidth: targetWidth / scaleX,
+    targetHeight: targetHeight / scaleY
+  })), /*#__PURE__*/React.createElement(ResizeObserver, {
+    disabled: !mergedOpen,
+    ref: setTargetRef,
+    onResize: onTargetResize
+  }, /*#__PURE__*/React.createElement(TriggerWrapper, {
+    getTriggerDOMNode: getTriggerDOMNode
+  }, triggerNode)));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Trigger.displayName = 'Trigger';
+}
+export default Trigger;

package/es/interface.d.ts

@@ -0,0 +1,122 @@
+/// <reference types="react" />
+import type { CSSMotionProps } from 'rc-motion';
+export declare type Placement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+export interface TriggerProps {
+    children: React.ReactElement;
+    action?: ActionType | ActionType[];
+    showAction?: ActionType[];
+    hideAction?: ActionType[];
+    getPopupClassNameFromAlign?: (align: AlignType) => string;
+    onPopupVisibleChange?: (visible: boolean) => void;
+    onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
+    afterPopupVisibleChange?: (visible: boolean) => void;
+    popup: React.ReactNode | (() => React.ReactNode);
+    popupStyle?: React.CSSProperties;
+    prefixCls?: string;
+    popupClassName?: string;
+    className?: string;
+    popupPlacement?: string;
+    builtinPlacements?: BuildInPlacements;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    zIndex?: number;
+    focusDelay?: number;
+    blurDelay?: number;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    getDocument?: (element?: HTMLElement) => HTMLDocument;
+    forceRender?: boolean;
+    destroyPopupOnHide?: boolean;
+    mask?: boolean;
+    maskClosable?: boolean;
+    onPopupAlign?: (element: HTMLElement, align: AlignType) => void;
+    popupAlign?: AlignType;
+    popupVisible?: boolean;
+    defaultPopupVisible?: boolean;
+    autoDestroy?: boolean;
+    stretch?: string;
+    alignPoint?: boolean;
+    /** Set popup motion. You can ref `rc-motion` for more info. */
+    popupMotion?: CSSMotionProps;
+    /** Set mask motion. You can ref `rc-motion` for more info. */
+    maskMotion?: CSSMotionProps;
+    /** @deprecated Please us `popupMotion` instead. */
+    popupTransitionName?: TransitionNameType;
+    /** @deprecated Please us `popupMotion` instead. */
+    popupAnimation?: AnimationType;
+    /** @deprecated Please us `maskMotion` instead. */
+    maskTransitionName?: TransitionNameType;
+    /** @deprecated Please us `maskMotion` instead. */
+    maskAnimation?: string;
+    /**
+     * @private Get trigger DOM node.
+     * Used for some component is function component which can not access by `findDOMNode`
+     */
+    getTriggerDOMNode?: (node: React.ReactInstance) => HTMLElement;
+    /** @private Bump fixed position at bottom in mobile.
+     * This is internal usage currently, do not use in your prod */
+    mobile?: MobileConfig;
+}
+export declare type AlignPointTopBottom = 't' | 'b' | 'c';
+export declare type AlignPointLeftRight = 'l' | 'r' | 'c';
+/** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */
+export declare type AlignPoint = `${AlignPointTopBottom}${AlignPointLeftRight}`;
+export interface AlignType {
+    /**
+     * move point of source node to align with point of target node.
+     * Such as ['tr','cc'], align top right point of source node with center point of target node.
+     * Point can be 't'(top), 'b'(bottom), 'c'(center), 'l'(left), 'r'(right) */
+    points?: (string | AlignPoint)[];
+    /**
+     * offset source node by offset[0] in x and offset[1] in y.
+     * If offset contains percentage string value, it is relative to sourceNode region.
+     */
+    offset?: number[];
+    /**
+     * offset target node by offset[0] in x and offset[1] in y.
+     * If targetOffset contains percentage string value, it is relative to targetNode region.
+     */
+    targetOffset?: number[];
+    /**
+     * If adjustX field is true, will adjust source node in x direction if source node is invisible.
+     * If adjustY field is true, will adjust source node in y direction if source node is invisible.
+     */
+    overflow?: {
+        adjustX?: boolean | number;
+        adjustY?: boolean | number;
+        shiftX?: boolean | number;
+        shiftY?: boolean | number;
+    };
+    /**
+     * Whether use css right instead of left to position
+     */
+    useCssRight?: boolean;
+    /**
+     * Whether use css bottom instead of top to position
+     */
+    useCssBottom?: boolean;
+    /**
+     * Whether use css transform instead of left/top/right/bottom to position if browser supports.
+     * Defaults to false.
+     */
+    useCssTransform?: boolean;
+    ignoreShake?: boolean;
+}
+export declare type BuildInPlacements = Record<string, AlignType>;
+export declare type StretchType = string;
+export declare type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
+export declare type AnimationType = string;
+export declare type TransitionNameType = string;
+export interface Point {
+    pageX: number;
+    pageY: number;
+}
+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/es/interface.js

@@ -0,0 +1 @@
+export {};

package/es/util.d.ts

@@ -0,0 +1,7 @@
+import type { CSSMotionProps } from 'rc-motion';
+import type { AlignType, AnimationType, BuildInPlacements, TransitionNameType } from './interface';
+export declare function getAlignFromPlacement(builtinPlacements: BuildInPlacements, placementStr: string, align: AlignType): AlignType;
+export declare function getAlignPopupClassName(builtinPlacements: BuildInPlacements, prefixCls: string, align: AlignType, isAlignPoint: boolean): string;
+/** @deprecated We should not use this if we can refactor all deps */
+export declare function getMotion(prefixCls: string, motion: CSSMotionProps, animation: AnimationType, transitionName: TransitionNameType): CSSMotionProps;
+export declare function getWin(ele: HTMLElement): Window & typeof globalThis;

package/es/util.js

@@ -0,0 +1,47 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+function isPointsEq() {
+  var a1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var a2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var isAlignPoint = arguments.length > 2 ? arguments[2] : undefined;
+  if (isAlignPoint) {
+    return a1[0] === a2[0];
+  }
+  return a1[0] === a2[0] && a1[1] === a2[1];
+}
+export function getAlignFromPlacement(builtinPlacements, placementStr, align) {
+  var baseAlign = builtinPlacements[placementStr] || {};
+  return _objectSpread(_objectSpread({}, baseAlign), align);
+}
+export function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
+  var points = align.points;
+  var placements = Object.keys(builtinPlacements);
+  for (var i = 0; i < placements.length; i += 1) {
+    var _builtinPlacements$pl;
+    var placement = placements[i];
+    if (isPointsEq((_builtinPlacements$pl = builtinPlacements[placement]) === null || _builtinPlacements$pl === void 0 ? void 0 : _builtinPlacements$pl.points, points, isAlignPoint)) {
+      return "".concat(prefixCls, "-placement-").concat(placement);
+    }
+  }
+  return '';
+}
+
+/** @deprecated We should not use this if we can refactor all deps */
+export function getMotion(prefixCls, motion, animation, transitionName) {
+  if (motion) {
+    return motion;
+  }
+  if (animation) {
+    return {
+      motionName: "".concat(prefixCls, "-").concat(animation)
+    };
+  }
+  if (transitionName) {
+    return {
+      motionName: transitionName
+    };
+  }
+  return null;
+}
+export function getWin(ele) {
+  return ele.ownerDocument.defaultView;
+}