@rc-component/trigger 1.3.3 → 1.3.5

package/es/Popup/index.js

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import ResizeObserver from 'rc-resize-observer';
 import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
+import { composeRef } from "rc-util/es/ref";
 import * as React from 'react';
 import Arrow from "./Arrow";
 import Mask from "./Mask";
@@ -105,43 +106,45 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), /*#__PURE__*/React.createElement(ResizeObserver, {
     onResize: onAlign,
     disabled: !open
-  }, /*#__PURE__*/React.createElement(CSSMotion, _extends({
-    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 = classNames(prefixCls, motionClassName, className);
-    return /*#__PURE__*/React.createElement("div", {
-      ref: ref,
-      className: cls,
-      style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, offsetStyle), miscStyle), motionStyle), {}, {
-        boxSizing: 'border-box',
-        zIndex: zIndex
-      }, style),
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onClick: onClick
-    }, arrow && /*#__PURE__*/React.createElement(Arrow, {
-      prefixCls: prefixCls,
-      align: align,
-      arrowX: arrowX,
-      arrowY: arrowY
-    }), childNode);
-  })));
+  }, function (resizeObserverRef) {
+    return /*#__PURE__*/React.createElement(CSSMotion, _extends({
+      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, motionRef) {
+      var motionClassName = _ref.className,
+        motionStyle = _ref.style;
+      var cls = classNames(prefixCls, motionClassName, className);
+      return /*#__PURE__*/React.createElement("div", {
+        ref: composeRef(resizeObserverRef, ref, motionRef),
+        className: cls,
+        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, offsetStyle), miscStyle), motionStyle), {}, {
+          boxSizing: 'border-box',
+          zIndex: zIndex
+        }, style),
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onClick: onClick
+      }, arrow && /*#__PURE__*/React.createElement(Arrow, {
+        prefixCls: prefixCls,
+        align: align,
+        arrowX: arrowX,
+        arrowY: arrowY
+      }), childNode);
+    });
+  }));
 });
 if (process.env.NODE_ENV !== 'production') {
   Popup.displayName = 'Popup';

package/es/hooks/useAlign.js

@@ -150,7 +150,7 @@ export default function useAlign(open, popupEle, target, placement, builtinPlace
       var _scaleY = toNum(Math.round(popupHeight / parseFloat(height) * 1000) / 1000);
 
       // Placement
-      var placementInfo = builtinPlacements[placement] || popupAlign || {};
+      var placementInfo = popupAlign || builtinPlacements[placement] || {};
 
       // Offset
       var offset = placementInfo.offset,

package/es/index.js

@@ -161,8 +161,12 @@ export function generateTrigger() {
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       inMotion = _React$useState6[0],
       setInMotion = _React$useState6[1];
+    var mountRef = React.useRef(true);
     useLayoutEffect(function () {
-      setInMotion(true);
+      if (!mountRef.current || mergedOpen) {
+        setInMotion(true);
+      }
+      mountRef.current = true;
     }, [mergedOpen]);
     var _React$useState7 = React.useState(null),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
@@ -197,6 +201,10 @@ export function generateTrigger() {
     useLayoutEffect(function () {
       triggerAlign();
     }, [mousePos]);
+    useLayoutEffect(function () {
+      if (!mergedOpen) return;
+      triggerAlign();
+    }, [JSON.stringify(popupAlign)]);
     var alignedClassName = React.useMemo(function () {
       var baseClassName = getAlignPopupClassName(builtinPlacements, prefixCls, alignInfo, alignPoint);
       return classNames(baseClassName, getPopupClassNameFromAlign === null || getPopupClassNameFromAlign === void 0 ? void 0 : getPopupClassNameFromAlign(alignInfo));

package/lib/Popup/index.js

@@ -13,6 +13,7 @@ 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 _ref2 = require("rc-util/lib/ref");
 var React = _interopRequireWildcard(require("react"));
 var _Arrow = _interopRequireDefault(require("./Arrow"));
 var _Mask = _interopRequireDefault(require("./Mask"));
@@ -113,43 +114,45 @@ var Popup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), /*#__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);
-  })));
+  }, function (resizeObserverRef) {
+    return /*#__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, motionRef) {
+      var motionClassName = _ref.className,
+        motionStyle = _ref.style;
+      var cls = (0, _classnames.default)(prefixCls, motionClassName, className);
+      return /*#__PURE__*/React.createElement("div", {
+        ref: (0, _ref2.composeRef)(resizeObserverRef, ref, motionRef),
+        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';

package/lib/hooks/useAlign.js

@@ -158,7 +158,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       var _scaleY = toNum(Math.round(popupHeight / parseFloat(height) * 1000) / 1000);
 
       // Placement
-      var placementInfo = builtinPlacements[placement] || popupAlign || {};
+      var placementInfo = popupAlign || builtinPlacements[placement] || {};
 
       // Offset
       var offset = placementInfo.offset,

package/lib/index.js

@@ -170,8 +170,12 @@ function generateTrigger() {
       _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
       inMotion = _React$useState6[0],
       setInMotion = _React$useState6[1];
+    var mountRef = React.useRef(true);
     (0, _useLayoutEffect.default)(function () {
-      setInMotion(true);
+      if (!mountRef.current || mergedOpen) {
+        setInMotion(true);
+      }
+      mountRef.current = true;
     }, [mergedOpen]);
     var _React$useState7 = React.useState(null),
       _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
@@ -206,6 +210,10 @@ function generateTrigger() {
     (0, _useLayoutEffect.default)(function () {
       triggerAlign();
     }, [mousePos]);
+    (0, _useLayoutEffect.default)(function () {
+      if (!mergedOpen) return;
+      triggerAlign();
+    }, [JSON.stringify(popupAlign)]);
     var alignedClassName = React.useMemo(function () {
       var baseClassName = (0, _util.getAlignPopupClassName)(builtinPlacements, prefixCls, alignInfo, alignPoint);
       return (0, _classnames.default)(baseClassName, getPopupClassNameFromAlign === null || getPopupClassNameFromAlign === void 0 ? void 0 : getPopupClassNameFromAlign(alignInfo));

package/package.json

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