@rc-component/trigger 1.0.0

package/lib/Popup/Arrow.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { AlignType } from '../interface';
+export interface ArrowProps {
+    prefixCls: string;
+    align: AlignType;
+    arrowX?: number;
+    arrowY?: number;
+}
+export default function Arrow(props: ArrowProps): JSX.Element;

package/lib/Popup/Arrow.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Arrow;
+var React = _interopRequireWildcard(require("react"));
+function Arrow(props) {
+  var prefixCls = props.prefixCls,
+    align = props.align,
+    _props$arrowX = props.arrowX,
+    arrowX = _props$arrowX === void 0 ? 0 : _props$arrowX,
+    _props$arrowY = props.arrowY,
+    arrowY = _props$arrowY === void 0 ? 0 : _props$arrowY;
+  var arrowRef = React.useRef();
+
+  // Skip if no align
+  if (!align || !align.points) {
+    return null;
+  }
+  var alignStyle = {
+    position: 'absolute'
+  };
+  var popupPoints = align.points[0];
+  var targetPoints = align.points[1];
+  var popupTB = popupPoints[0];
+  var popupLR = popupPoints[1];
+  var targetTB = targetPoints[0];
+  var targetLR = targetPoints[1];
+
+  // Top & Bottom
+  if (popupTB === targetTB || !['t', 'b'].includes(popupTB)) {
+    alignStyle.top = arrowY;
+  } else if (popupTB === 't') {
+    alignStyle.top = 0;
+  } else {
+    alignStyle.bottom = 0;
+  }
+
+  // Left & Right
+  if (popupLR === targetLR || !['l', 'r'].includes(popupLR)) {
+    alignStyle.left = arrowX;
+  } else if (popupLR === 'l') {
+    alignStyle.left = 0;
+  } else {
+    alignStyle.right = 0;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    ref: arrowRef,
+    className: "".concat(prefixCls, "-arrow"),
+    style: alignStyle
+  });
+}

package/lib/Popup/Mask.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { CSSMotionProps } from 'rc-motion';
+export interface MaskProps {
+    prefixCls: string;
+    open?: boolean;
+    zIndex?: number;
+    mask?: boolean;
+    motion?: CSSMotionProps;
+}
+export default function Mask(props: MaskProps): JSX.Element;

package/lib/Popup/Mask.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Mask;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _rcMotion = _interopRequireDefault(require("rc-motion"));
+function Mask(props) {
+  var prefixCls = props.prefixCls,
+    open = props.open,
+    zIndex = props.zIndex,
+    mask = props.mask,
+    motion = props.motion;
+  if (!mask) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(_rcMotion.default, (0, _extends2.default)({}, motion, {
+    motionAppear: true,
+    visible: open,
+    removeOnLeave: true
+  }), function (_ref) {
+    var className = _ref.className;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        zIndex: zIndex
+      },
+      className: (0, _classnames.default)("".concat(prefixCls, "-mask"), className)
+    });
+  });
+}

package/lib/Popup/index.d.ts

@@ -0,0 +1,39 @@
+import type { CSSMotionProps } from 'rc-motion';
+import * as React from 'react';
+import type { TriggerProps } from '../';
+import type { AlignType } from '../interface';
+export interface PopupProps {
+    prefixCls: string;
+    className?: string;
+    style?: React.CSSProperties;
+    popup?: TriggerProps['popup'];
+    target: HTMLElement;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+    zIndex?: number;
+    mask?: boolean;
+    onVisibleChanged: (visible: boolean) => void;
+    align?: AlignType;
+    arrow?: boolean;
+    arrowX?: number;
+    arrowY?: number;
+    open: boolean;
+    /** Tell Portal that should keep in screen. e.g. should wait all motion end */
+    keepDom: boolean;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    motion?: CSSMotionProps;
+    maskMotion?: CSSMotionProps;
+    forceRender?: boolean;
+    getPopupContainer?: TriggerProps['getPopupContainer'];
+    autoDestroy?: boolean;
+    ready: boolean;
+    offsetX: number;
+    offsetY: number;
+    onAlign: VoidFunction;
+    onPrepare: () => Promise<void>;
+    stretch?: string;
+    targetWidth?: number;
+    targetHeight?: number;
+}
+declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<HTMLDivElement>>;
+export default Popup;

package/lib/Popup/index.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _portal = _interopRequireDefault(require("@rc-component/portal"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _rcMotion = _interopRequireDefault(require("rc-motion"));
+var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
+var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
+var React = _interopRequireWildcard(require("react"));
+var _Arrow = _interopRequireDefault(require("./Arrow"));
+var _Mask = _interopRequireDefault(require("./Mask"));
+var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var popup = props.popup,
+    className = props.className,
+    prefixCls = props.prefixCls,
+    style = props.style,
+    target = props.target,
+    _onVisibleChanged = props.onVisibleChanged,
+    open = props.open,
+    keepDom = props.keepDom,
+    onClick = props.onClick,
+    mask = props.mask,
+    arrow = props.arrow,
+    align = props.align,
+    arrowX = props.arrowX,
+    arrowY = props.arrowY,
+    motion = props.motion,
+    maskMotion = props.maskMotion,
+    forceRender = props.forceRender,
+    getPopupContainer = props.getPopupContainer,
+    autoDestroy = props.autoDestroy,
+    zIndex = props.zIndex,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    ready = props.ready,
+    offsetX = props.offsetX,
+    offsetY = props.offsetY,
+    onAlign = props.onAlign,
+    onPrepare = props.onPrepare,
+    stretch = props.stretch,
+    targetWidth = props.targetWidth,
+    targetHeight = props.targetHeight;
+  var childNode = typeof popup === 'function' ? popup() : popup;
+
+  // We can not remove holder only when motion finished.
+  var isNodeVisible = open || keepDom;
+
+  // ======================= Container ========================
+  var getPopupContainerNeedParams = (getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer.length) > 0;
+  var _React$useState = React.useState(!getPopupContainer || !getPopupContainerNeedParams),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    show = _React$useState2[0],
+    setShow = _React$useState2[1];
+
+  // Delay to show since `getPopupContainer` need target element
+  (0, _useLayoutEffect.default)(function () {
+    if (!show && getPopupContainerNeedParams && target) {
+      setShow(true);
+    }
+  }, [show, getPopupContainerNeedParams, target]);
+
+  // ========================= Render =========================
+  if (!show) {
+    return null;
+  }
+
+  // >>>>> Offset
+  var offsetStyle = ready || !open ? {
+    left: offsetX,
+    top: offsetY
+  } : {
+    left: '-1000vw',
+    top: '-1000vh'
+  };
+
+  // >>>>> Misc
+  var miscStyle = {};
+  if (stretch) {
+    if (stretch.includes('height') && targetHeight) {
+      miscStyle.height = targetHeight;
+    } else if (stretch.includes('minHeight') && targetHeight) {
+      miscStyle.minHeight = targetHeight;
+    }
+    if (stretch.includes('width') && targetWidth) {
+      miscStyle.width = targetWidth;
+    } else if (stretch.includes('minWidth') && targetWidth) {
+      miscStyle.minWidth = targetWidth;
+    }
+  }
+  if (!open) {
+    miscStyle.pointerEvents = 'none';
+  }
+  return /*#__PURE__*/React.createElement(_portal.default, {
+    open: forceRender || isNodeVisible,
+    getContainer: getPopupContainer && function () {
+      return getPopupContainer(target);
+    },
+    autoDestroy: autoDestroy
+  }, /*#__PURE__*/React.createElement(_Mask.default, {
+    prefixCls: prefixCls,
+    open: open,
+    zIndex: zIndex,
+    mask: mask,
+    motion: maskMotion
+  }), /*#__PURE__*/React.createElement(_rcResizeObserver.default, {
+    onResize: onAlign,
+    disabled: !open
+  }, /*#__PURE__*/React.createElement(_rcMotion.default, (0, _extends2.default)({
+    motionAppear: true,
+    motionEnter: true,
+    motionLeave: true,
+    removeOnLeave: false,
+    forceRender: forceRender,
+    leavedClassName: "".concat(prefixCls, "-hidden")
+  }, motion, {
+    onAppearPrepare: onPrepare,
+    onEnterPrepare: onPrepare,
+    visible: open,
+    onVisibleChanged: function onVisibleChanged(nextVisible) {
+      var _motion$onVisibleChan;
+      motion === null || motion === void 0 ? void 0 : (_motion$onVisibleChan = motion.onVisibleChanged) === null || _motion$onVisibleChan === void 0 ? void 0 : _motion$onVisibleChan.call(motion, nextVisible);
+      _onVisibleChanged(nextVisible);
+    }
+  }), function (_ref) {
+    var motionClassName = _ref.className,
+      motionStyle = _ref.style;
+    var cls = (0, _classnames.default)(prefixCls, motionClassName, className);
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref,
+      className: cls,
+      style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, offsetStyle), miscStyle), motionStyle), {}, {
+        boxSizing: 'border-box',
+        zIndex: zIndex
+      }, style),
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onClick: onClick
+    }, arrow && /*#__PURE__*/React.createElement(_Arrow.default, {
+      prefixCls: prefixCls,
+      align: align,
+      arrowX: arrowX,
+      arrowY: arrowY
+    }), childNode);
+  })));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Popup.displayName = 'Popup';
+}
+var _default = Popup;
+exports.default = _default;

package/lib/TriggerWrapper.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { TriggerProps } from '.';
+export interface TriggerWrapperProps {
+    getTriggerDOMNode?: TriggerProps['getTriggerDOMNode'];
+    children: React.ReactElement;
+}
+declare const TriggerWrapper: React.ForwardRefExoticComponent<TriggerWrapperProps & React.RefAttributes<HTMLElement>>;
+export default TriggerWrapper;

package/lib/TriggerWrapper.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ref = require("rc-util/lib/ref");
+var React = _interopRequireWildcard(require("react"));
+var TriggerWrapper = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+    getTriggerDOMNode = props.getTriggerDOMNode;
+
+  // When use `getTriggerDOMNode`, we should do additional work to get the real dom
+  var setRef = React.useCallback(function (node) {
+    (0, _ref.fillRef)(ref, getTriggerDOMNode ? getTriggerDOMNode(node) : node);
+  }, [getTriggerDOMNode]);
+  var mergedRef = (0, _ref.useComposeRef)(setRef, children.ref);
+  return /*#__PURE__*/React.cloneElement(children, {
+    ref: mergedRef
+  });
+});
+if (process.env.NODE_ENV !== 'production') {
+  TriggerWrapper.displayName = 'TriggerWrapper';
+}
+var _default = TriggerWrapper;
+exports.default = _default;

package/lib/context.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface TriggerContextProps {
+    registerSubPopup: (id: string, node: HTMLElement) => void;
+}
+declare const TriggerContext: React.Context<TriggerContextProps>;
+export default TriggerContext;

package/lib/context.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var TriggerContext = /*#__PURE__*/React.createContext(null);
+var _default = TriggerContext;
+exports.default = _default;

package/lib/hooks/useAction.d.ts

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

package/lib/hooks/useAction.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useAction;
+function toArray(val) {
+  return val ? Array.isArray(val) ? val : [val] : [];
+}
+function useAction(action, showAction, hideAction) {
+  var mergedShowAction = toArray(showAction !== null && showAction !== void 0 ? showAction : action);
+  var mergedHideAction = toArray(hideAction !== null && hideAction !== void 0 ? hideAction : action);
+  return [new Set(mergedShowAction), new Set(mergedHideAction)];
+}

package/lib/hooks/useAlign.d.ts

@@ -0,0 +1,12 @@
+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): [
+    ready: boolean,
+    offsetX: number,
+    offsetY: number,
+    arrowX: number,
+    arrowY: number,
+    scaleX: number,
+    scaleY: number,
+    align: AlignType,
+    onAlign: VoidFunction
+];

package/lib/hooks/useAlign.js

@@ -0,0 +1,283 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useAlign;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
+var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
+var React = _interopRequireWildcard(require("react"));
+var _util = require("../util");
+function toNum(num) {
+  return Number.isNaN(num) ? 1 : num;
+}
+function splitPoints() {
+  var points = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return [points[0], points[1]];
+}
+function getAlignPoint(rect, points) {
+  var topBottom = points[0];
+  var leftRight = points[1];
+  var x;
+  var y;
+
+  // Top & Bottom
+  if (topBottom === 't') {
+    y = rect.y;
+  } else if (topBottom === 'b') {
+    y = rect.y + rect.height;
+  } else {
+    y = rect.y + rect.height / 2;
+  }
+
+  // Left & Right
+  if (leftRight === 'l') {
+    x = rect.x;
+  } else if (leftRight === 'r') {
+    x = rect.x + rect.width;
+  } else {
+    x = rect.x + rect.width / 2;
+  }
+  return {
+    x: x,
+    y: y
+  };
+}
+function reversePoints(points, index) {
+  var reverseMap = {
+    t: 'b',
+    b: 't',
+    l: 'r',
+    r: 'l'
+  };
+  return points.map(function (point, i) {
+    if (i === index) {
+      return reverseMap[point] || 'c';
+    }
+    return point;
+  }).join('');
+}
+function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign) {
+  var _React$useState = React.useState({
+      ready: false,
+      offsetX: 0,
+      offsetY: 0,
+      arrowX: 0,
+      arrowY: 0,
+      scaleX: 1,
+      scaleY: 1,
+      align: builtinPlacements[placement] || {}
+    }),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    offsetInfo = _React$useState2[0],
+    setOffsetInfo = _React$useState2[1];
+  var alignCountRef = React.useRef(0);
+  var onAlign = (0, _useEvent.default)(function () {
+    if (popupEle && target && open) {
+      var popupElement = popupEle;
+      var originLeft = popupElement.style.left;
+      var originTop = popupElement.style.top;
+      var doc = popupElement.ownerDocument;
+      var win = (0, _util.getWin)(popupElement);
+
+      // Reset first
+      popupElement.style.left = '0';
+      popupElement.style.top = '0';
+
+      // Calculate align style, we should consider `transform` case
+      var targetRect = Array.isArray(target) ? {
+        x: target[0],
+        y: target[1],
+        width: 0,
+        height: 0
+      } : target.getBoundingClientRect();
+      var popupRect = popupElement.getBoundingClientRect();
+      var _win$getComputedStyle = win.getComputedStyle(popupElement),
+        width = _win$getComputedStyle.width,
+        height = _win$getComputedStyle.height;
+      var _doc$documentElement = doc.documentElement,
+        clientWidth = _doc$documentElement.clientWidth,
+        clientHeight = _doc$documentElement.clientHeight;
+      var popupHeight = popupRect.height;
+      var popupWidth = popupRect.width;
+
+      // Reset back
+      popupElement.style.left = originLeft;
+      popupElement.style.top = originTop;
+
+      // Calculate scale
+      var _scaleX = toNum(Math.round(popupWidth / parseFloat(width) * 1000) / 1000);
+      var _scaleY = toNum(Math.round(popupHeight / parseFloat(height) * 1000) / 1000);
+
+      // Placement
+      var placementInfo = builtinPlacements[placement] || popupAlign || {};
+      var _ref = placementInfo.points || [],
+        _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+        popupPoint = _ref2[0],
+        targetPoint = _ref2[1];
+      var targetPoints = splitPoints(targetPoint);
+      var popupPoints = splitPoints(popupPoint);
+      var targetAlignPoint = getAlignPoint(targetRect, targetPoints);
+      var popupAlignPoint = getAlignPoint(popupRect, popupPoints);
+
+      // Real align info may not same as origin one
+      var nextAlignInfo = (0, _objectSpread2.default)({}, placementInfo);
+
+      // Offset
+      var offset = placementInfo.offset;
+      var _ref3 = offset || [],
+        _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+        _ref4$ = _ref4[0],
+        popupOffsetX = _ref4$ === void 0 ? 0 : _ref4$,
+        _ref4$2 = _ref4[1],
+        popupOffsetY = _ref4$2 === void 0 ? 0 : _ref4$2;
+
+      // Placement
+      var nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
+      var nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
+
+      // ================ Overflow =================
+      var targetAlignPointTL = getAlignPoint(targetRect, ['t', 'l']);
+      var popupAlignPointTL = getAlignPoint(popupRect, ['t', 'l']);
+      var targetAlignPointBR = getAlignPoint(targetRect, ['b', 'r']);
+      var popupAlignPointBR = getAlignPoint(popupRect, ['b', 'r']);
+      var overflow = placementInfo.overflow || {};
+      var adjustX = overflow.adjustX,
+        adjustY = overflow.adjustY,
+        shiftX = overflow.shiftX,
+        shiftY = overflow.shiftY;
+
+      // >>>>>>>>>> Top & Bottom
+      var nextPopupY = popupRect.y + nextOffsetY;
+      var nextPopupBottom = nextPopupY + popupHeight;
+      var needAdjustY = adjustY === true || adjustY >= 0;
+
+      // Bottom to Top
+      if (needAdjustY && popupPoints[0] === 't' && nextPopupBottom > clientHeight) {
+        nextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
+        nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
+      }
+
+      // Top to Bottom
+      if (needAdjustY && popupPoints[0] === 'b' && nextPopupY < 0) {
+        nextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
+        nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
+      }
+
+      // >>>>>>>>>> Left & Right
+      var nextPopupX = popupRect.x + nextOffsetX;
+      var nextPopupRight = nextPopupX + popupWidth;
+      var needAdjustX = adjustX === true || adjustX >= 0;
+
+      // >>>>> Flip
+      // Right to Left
+      if (needAdjustX && popupPoints[1] === 'l' && nextPopupRight > clientWidth) {
+        nextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
+        nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
+      }
+
+      // Left to Right
+      if (needAdjustX && popupPoints[1] === 'r' && nextPopupX < 0) {
+        nextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
+        nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
+      }
+
+      // >>>>> Shift
+      var numShiftX = shiftX === true ? 0 : shiftX;
+      if (typeof numShiftX === 'number') {
+        // Left
+        if (nextPopupX < 0) {
+          nextOffsetX -= nextPopupX;
+          if (targetRect.x + targetRect.width < numShiftX) {
+            nextOffsetX += targetRect.x + targetRect.width - numShiftX;
+          }
+        }
+
+        // Right
+        if (nextPopupRight > clientWidth) {
+          nextOffsetX -= nextPopupRight - clientWidth;
+          if (targetRect.x > clientWidth - numShiftX) {
+            nextOffsetX += targetRect.x - clientWidth + numShiftX;
+          }
+        }
+      }
+      var numShiftY = shiftY === true ? 0 : shiftY;
+      if (typeof numShiftY === 'number') {
+        // Top
+        if (nextPopupY < 0) {
+          nextOffsetY -= nextPopupY;
+          if (targetRect.y + targetRect.height < numShiftY) {
+            nextOffsetY += targetRect.y + targetRect.height - numShiftY;
+          }
+        }
+
+        // Bottom
+        if (nextPopupBottom > clientHeight) {
+          nextOffsetY -= nextPopupBottom - clientHeight;
+          if (targetRect.y > clientHeight - numShiftY) {
+            nextOffsetY += targetRect.y - clientHeight + numShiftY;
+          }
+        }
+      }
+
+      // Arrow center align
+      var popupLeft = popupRect.x + nextOffsetX;
+      var popupRight = popupLeft + popupWidth;
+      var popupTop = popupRect.y + nextOffsetY;
+      var popupBottom = popupTop + popupHeight;
+      var targetLeft = targetRect.x;
+      var targetRight = targetLeft + targetRect.width;
+      var targetTop = targetRect.y;
+      var targetBottom = targetTop + targetRect.height;
+      var maxLeft = Math.max(popupLeft, targetLeft);
+      var minRight = Math.min(popupRight, targetRight);
+      var xCenter = (maxLeft + minRight) / 2;
+      var nextArrowX = xCenter - popupLeft;
+      var maxTop = Math.max(popupTop, targetTop);
+      var minBottom = Math.min(popupBottom, targetBottom);
+      var yCenter = (maxTop + minBottom) / 2;
+      var nextArrowY = yCenter - popupTop;
+      setOffsetInfo({
+        ready: true,
+        offsetX: nextOffsetX / _scaleX,
+        offsetY: nextOffsetY / _scaleY,
+        arrowX: nextArrowX / _scaleX,
+        arrowY: nextArrowY / _scaleY,
+        scaleX: _scaleX,
+        scaleY: _scaleY,
+        align: nextAlignInfo
+      });
+    }
+  });
+  var triggerAlign = function triggerAlign() {
+    alignCountRef.current += 1;
+    var id = alignCountRef.current;
+
+    // Merge all align requirement into one frame
+    Promise.resolve().then(function () {
+      if (alignCountRef.current === id) {
+        onAlign();
+      }
+    });
+  };
+
+  // Reset ready status when placement & open changed
+  var resetReady = function resetReady() {
+    setOffsetInfo(function (ori) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, ori), {}, {
+        ready: false
+      });
+    });
+  };
+  (0, _useLayoutEffect.default)(resetReady, [placement]);
+  (0, _useLayoutEffect.default)(function () {
+    if (!open) {
+      resetReady();
+    }
+  }, [open]);
+  return [offsetInfo.ready, offsetInfo.offsetX, offsetInfo.offsetY, offsetInfo.arrowX, offsetInfo.arrowY, offsetInfo.scaleX, offsetInfo.scaleY, offsetInfo.align, triggerAlign];
+}

package/lib/hooks/useWatch.d.ts

@@ -0,0 +1 @@
+export default function useWatch(open: boolean, target: HTMLElement, popup: HTMLElement, onAlign: VoidFunction): void;