@rc-component/portal 1.0.0-9 → 1.0.1

package/es/Portal.d.ts

@@ -14,4 +14,5 @@ export interface PortalProps {
     /** @private debug name. Do not use in prod */
     debug?: string;
 }
-export default function Portal(props: PortalProps): JSX.Element;
+declare const Portal: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<any>>;
+export default Portal;

package/es/Portal.js

@@ -1,7 +1,8 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import canUseDom from "rc-util/es/Dom/canUseDom";
+import { supportRef, useComposeRef } from "rc-util/es/ref";
 import OrderContext from "./Context";
 import useDom from "./useDom";
 import useScrollLocker from "./useScrollLocker";
@@ -27,7 +28,7 @@ var getPortalContainer = function getPortalContainer(getContainer) {
   return getContainer;
 };
 
-export default function Portal(props) {
+var Portal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var open = props.open,
       autoLock = props.autoLock,
       getContainer = props.getContainer,
@@ -68,7 +69,16 @@ export default function Portal(props) {
 
   var mergedContainer = innerContainer !== null && innerContainer !== void 0 ? innerContainer : defaultContainer; // ========================= Locker ==========================
 
-  useScrollLocker(autoLock && open && canUseDom() && (mergedContainer === defaultContainer || mergedContainer === document.body)); // ========================= Render ==========================
+  useScrollLocker(autoLock && open && canUseDom() && (mergedContainer === defaultContainer || mergedContainer === document.body)); // =========================== Ref ===========================
+
+  var childRef = null;
+
+  if (children && supportRef(children) && ref) {
+    var _ref = children;
+    childRef = _ref.ref;
+  }
+
+  var mergedRef = useComposeRef(childRef, ref); // ========================= Render ==========================
   // Do not render when nothing need render
   // When innerContainer is `undefined`, it may not ready since user use ref in the same render
 
@@ -78,7 +88,21 @@ export default function Portal(props) {
 
 
   var renderInline = mergedContainer === false || inlineMock();
+  var reffedChildren = children;
+
+  if (ref) {
+    reffedChildren = /*#__PURE__*/React.cloneElement(children, {
+      ref: mergedRef
+    });
+  }
+
   return /*#__PURE__*/React.createElement(OrderContext.Provider, {
     value: queueCreate
-  }, renderInline ? children : /*#__PURE__*/createPortal(children, mergedContainer));
-}
+  }, renderInline ? reffedChildren : /*#__PURE__*/createPortal(reffedChildren, mergedContainer));
+});
+
+if (process.env.NODE_ENV !== 'production') {
+  Portal.displayName = 'Portal';
+}
+
+export default Portal;

package/es/useDom.js

@@ -1,5 +1,5 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
 import canUseDom from "rc-util/es/Dom/canUseDom";

package/es/useScrollLocker.js

@@ -1,4 +1,4 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import { updateCSS, removeCSS } from "rc-util/es/Dom/dynamicCSS";
 import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";

package/lib/Portal.d.ts

@@ -14,4 +14,5 @@ export interface PortalProps {
     /** @private debug name. Do not use in prod */
     debug?: string;
 }
-export default function Portal(props: PortalProps): JSX.Element;
+declare const Portal: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<any>>;
+export default Portal;

package/lib/Portal.js

@@ -7,7 +7,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Portal;
+exports.default = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -17,6 +17,8 @@ var _reactDom = require("react-dom");
 
 var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom"));
 
+var _ref2 = require("rc-util/lib/ref");
+
 var _Context = _interopRequireDefault(require("./Context"));
 
 var _useDom3 = _interopRequireDefault(require("./useDom"));
@@ -45,7 +47,7 @@ var getPortalContainer = function getPortalContainer(getContainer) {
   return getContainer;
 };
 
-function Portal(props) {
+var Portal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var open = props.open,
       autoLock = props.autoLock,
       getContainer = props.getContainer,
@@ -86,7 +88,16 @@ function Portal(props) {
 
   var mergedContainer = innerContainer !== null && innerContainer !== void 0 ? innerContainer : defaultContainer; // ========================= Locker ==========================
 
-  (0, _useScrollLocker.default)(autoLock && open && (0, _canUseDom.default)() && (mergedContainer === defaultContainer || mergedContainer === document.body)); // ========================= Render ==========================
+  (0, _useScrollLocker.default)(autoLock && open && (0, _canUseDom.default)() && (mergedContainer === defaultContainer || mergedContainer === document.body)); // =========================== Ref ===========================
+
+  var childRef = null;
+
+  if (children && (0, _ref2.supportRef)(children) && ref) {
+    var _ref = children;
+    childRef = _ref.ref;
+  }
+
+  var mergedRef = (0, _ref2.useComposeRef)(childRef, ref); // ========================= Render ==========================
   // Do not render when nothing need render
   // When innerContainer is `undefined`, it may not ready since user use ref in the same render
 
@@ -96,7 +107,22 @@ function Portal(props) {
 
 
   var renderInline = mergedContainer === false || (0, _mock.inlineMock)();
+  var reffedChildren = children;
+
+  if (ref) {
+    reffedChildren = /*#__PURE__*/React.cloneElement(children, {
+      ref: mergedRef
+    });
+  }
+
   return /*#__PURE__*/React.createElement(_Context.default.Provider, {
     value: queueCreate
-  }, renderInline ? children : /*#__PURE__*/(0, _reactDom.createPortal)(children, mergedContainer));
-}
+  }, renderInline ? reffedChildren : /*#__PURE__*/(0, _reactDom.createPortal)(reffedChildren, mergedContainer));
+});
+
+if (process.env.NODE_ENV !== 'production') {
+  Portal.displayName = 'Portal';
+}
+
+var _default = Portal;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/portal",
-  "version": "1.0.0-9",
+  "version": "1.0.1",
   "description": "React Portal Component",
   "keywords": [
     "react",
@@ -39,15 +39,16 @@
     "test": "npm run test:client && npm run test:server",
     "test:client": "umi-test --testPathIgnorePatterns=ssr.test.tsx --testPathIgnorePatterns=ssr.test.tsx",
     "test:coverage": "npm run test:client --coverage",
-    "test:server": "umi-test --env=node tests/ssr.test.tsx",
+    "test:server": "umi-test --env=node -- tests/ssr.test.tsx",
     "watch": "father dev"
   },
   "dependencies": {
     "@babel/runtime": "^7.18.0",
     "classnames": "^2.3.2",
-    "rc-util": "^5.8.0"
+    "rc-util": "^5.16.0"
   },
   "devDependencies": {
+    "@rc-component/father-plugin": "^1.0.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.0",
     "@types/jest": "^26.0.20",