@rc-component/portal 1.0.0-0 → 1.0.0-2

package/es/Portal.d.ts

@@ -1,11 +1,15 @@
 import * as React from 'react';
+export declare type ContainerType = Element | DocumentFragment;
+export declare type GetContainer = string | ContainerType | (() => ContainerType) | false;
 export interface PortalProps {
     /** Customize container element. Default will create a div in document.body when `open` */
-    getContainer?: () => Element | DocumentFragment;
+    getContainer?: GetContainer;
     children?: React.ReactNode;
     /** Show the portal children */
     open?: boolean;
     /** Lock screen scroll when open */
     autoLock?: boolean;
+    /** @private debug name. Do not use in prod */
+    debug?: string;
 }
 export default function Portal(props: PortalProps): JSX.Element;

package/es/Portal.js

@@ -1,15 +1,37 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
 import { createPortal } from 'react-dom';
+import canUseDom from "rc-util/es/Dom/canUseDom";
 import OrderContext from "./Context";
 import useDom from "./useDom";
-import useScrollLocker from "./useScrollLocker"; // ZombieJ: Since React 18 strict mode logic change.
-//          We should rewrite for compatible.
+import useScrollLocker from "./useScrollLocker";
+import { inlineMock } from "./mock";
+
+var getPortalContainer = function getPortalContainer(getContainer) {
+  if (getContainer === false) {
+    return false;
+  }
+
+  if (!canUseDom() || !getContainer) {
+    return null;
+  }
+
+  if (typeof getContainer === 'string') {
+    return document.querySelector(getContainer);
+  }
+
+  if (typeof getContainer === 'function') {
+    return getContainer();
+  }
+
+  return getContainer;
+};
 
 export default function Portal(props) {
   var open = props.open,
       autoLock = props.autoLock,
       getContainer = props.getContainer,
+      debug = props.debug,
       children = props.children;
 
   var _React$useState = React.useState(open),
@@ -23,21 +45,35 @@ export default function Portal(props) {
     setMergedRender(open);
   }, [open]); // ======================== Container ========================
 
-  var customizeContainer = getContainer === null || getContainer === void 0 ? void 0 : getContainer();
+  var _React$useState3 = React.useState(function () {
+    return getPortalContainer(getContainer);
+  }),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      innerContainer = _React$useState4[0],
+      setInnerContainer = _React$useState4[1];
+
+  React.useEffect(function () {
+    var customizeContainer = getPortalContainer(getContainer); // Tell component that we check this in effect which is safe to be `null`
 
-  var _useDom = useDom(mergedRender && !customizeContainer),
+    setInnerContainer(customizeContainer !== null && customizeContainer !== void 0 ? customizeContainer : null);
+  });
+
+  var _useDom = useDom(mergedRender && !innerContainer, debug),
       _useDom2 = _slicedToArray(_useDom, 2),
       defaultContainer = _useDom2[0],
       queueCreate = _useDom2[1];
 
-  var mergedContainer = customizeContainer || defaultContainer; // ========================= Render ==========================
+  var mergedContainer = innerContainer !== null && innerContainer !== void 0 ? innerContainer : defaultContainer; // ========================= Render ==========================
   // Do not render when nothing need render
+  // When innerContainer is `undefined`, it may not ready since user use ref in the same render
 
-  if (!mergedRender) {
+  if (!mergedRender || !canUseDom() || innerContainer === undefined) {
     return null;
-  }
+  } // Render inline
+
 
+  var renderInline = mergedContainer === false || inlineMock();
   return /*#__PURE__*/React.createElement(OrderContext.Provider, {
     value: queueCreate
-  }, /*#__PURE__*/createPortal(children, mergedContainer));
+  }, renderInline ? children : /*#__PURE__*/createPortal(children, mergedContainer));
 }

package/es/index.d.ts

@@ -1,4 +1,6 @@
 import Portal from './Portal';
 import type { PortalProps } from './Portal';
+import { inlineMock } from './mock';
 export type { PortalProps };
+export { inlineMock };
 export default Portal;

package/es/index.js

@@ -1,2 +1,4 @@
 import Portal from "./Portal";
+import { inlineMock } from "./mock";
+export { inlineMock };
 export default Portal;

package/es/mock.d.ts

@@ -0,0 +1,2 @@
+export declare let inline: boolean;
+export declare function inlineMock(nextInline?: boolean): boolean;

package/es/mock.js

@@ -0,0 +1,8 @@
+export var inline = false;
+export function inlineMock(nextInline) {
+  if (typeof nextInline === 'boolean') {
+    inline = nextInline;
+  }
+
+  return inline;
+}

package/es/useDom.d.ts

@@ -3,4 +3,4 @@ import type { QueueCreate } from './Context';
  * Will add `div` to document. Nest call will keep order
  * @param render Render DOM in document
  */
-export default function useDom(render: boolean): [HTMLDivElement, QueueCreate];
+export default function useDom(render: boolean, debug?: string): [HTMLDivElement, QueueCreate];

package/es/useDom.js

@@ -9,9 +9,14 @@ var EMPTY_LIST = [];
  * @param render Render DOM in document
  */
 
-export default function useDom(render) {
+export default function useDom(render, debug) {
   var _React$useState = React.useState(function () {
     var defaultEle = document.createElement('div');
+
+    if (process.env.NODE_ENV !== 'production' && debug) {
+      defaultEle.setAttribute('data-debug', debug);
+    }
+
     return defaultEle;
   }),
       _React$useState2 = _slicedToArray(_React$useState, 1),
@@ -27,7 +32,8 @@ export default function useDom(render) {
 
   var mergedQueueCreate = queueCreate || function (appendFn) {
     setQueue(function (origin) {
-      return [appendFn].concat(_toConsumableArray(origin));
+      var newQueue = [appendFn].concat(_toConsumableArray(origin));
+      return newQueue;
     });
   }; // =========================== DOM ===========================
 

package/lib/Portal.d.ts

@@ -1,11 +1,15 @@
 import * as React from 'react';
+export declare type ContainerType = Element | DocumentFragment;
+export declare type GetContainer = string | ContainerType | (() => ContainerType) | false;
 export interface PortalProps {
     /** Customize container element. Default will create a div in document.body when `open` */
-    getContainer?: () => Element | DocumentFragment;
+    getContainer?: GetContainer;
     children?: React.ReactNode;
     /** Show the portal children */
     open?: boolean;
     /** Lock screen scroll when open */
     autoLock?: boolean;
+    /** @private debug name. Do not use in prod */
+    debug?: string;
 }
 export default function Portal(props: PortalProps): JSX.Element;

package/lib/Portal.js

@@ -15,16 +15,41 @@ var React = _interopRequireWildcard(require("react"));
 
 var _reactDom = require("react-dom");
 
+var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom"));
+
 var _Context = _interopRequireDefault(require("./Context"));
 
 var _useDom3 = _interopRequireDefault(require("./useDom"));
 
 var _useScrollLocker = _interopRequireDefault(require("./useScrollLocker"));
 
+var _mock = require("./mock");
+
+var getPortalContainer = function getPortalContainer(getContainer) {
+  if (getContainer === false) {
+    return false;
+  }
+
+  if (!(0, _canUseDom.default)() || !getContainer) {
+    return null;
+  }
+
+  if (typeof getContainer === 'string') {
+    return document.querySelector(getContainer);
+  }
+
+  if (typeof getContainer === 'function') {
+    return getContainer();
+  }
+
+  return getContainer;
+};
+
 function Portal(props) {
   var open = props.open,
       autoLock = props.autoLock,
       getContainer = props.getContainer,
+      debug = props.debug,
       children = props.children;
 
   var _React$useState = React.useState(open),
@@ -38,21 +63,35 @@ function Portal(props) {
     setMergedRender(open);
   }, [open]); // ======================== Container ========================
 
-  var customizeContainer = getContainer === null || getContainer === void 0 ? void 0 : getContainer();
+  var _React$useState3 = React.useState(function () {
+    return getPortalContainer(getContainer);
+  }),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      innerContainer = _React$useState4[0],
+      setInnerContainer = _React$useState4[1];
+
+  React.useEffect(function () {
+    var customizeContainer = getPortalContainer(getContainer); // Tell component that we check this in effect which is safe to be `null`
+
+    setInnerContainer(customizeContainer !== null && customizeContainer !== void 0 ? customizeContainer : null);
+  });
 
-  var _useDom = (0, _useDom3.default)(mergedRender && !customizeContainer),
+  var _useDom = (0, _useDom3.default)(mergedRender && !innerContainer, debug),
       _useDom2 = (0, _slicedToArray2.default)(_useDom, 2),
       defaultContainer = _useDom2[0],
       queueCreate = _useDom2[1];
 
-  var mergedContainer = customizeContainer || defaultContainer; // ========================= Render ==========================
+  var mergedContainer = innerContainer !== null && innerContainer !== void 0 ? innerContainer : defaultContainer; // ========================= Render ==========================
   // Do not render when nothing need render
+  // When innerContainer is `undefined`, it may not ready since user use ref in the same render
 
-  if (!mergedRender) {
+  if (!mergedRender || !(0, _canUseDom.default)() || innerContainer === undefined) {
     return null;
-  }
+  } // Render inline
+
 
+  var renderInline = mergedContainer === false || (0, _mock.inlineMock)();
   return /*#__PURE__*/React.createElement(_Context.default.Provider, {
     value: queueCreate
-  }, /*#__PURE__*/(0, _reactDom.createPortal)(children, mergedContainer));
+  }, renderInline ? children : /*#__PURE__*/(0, _reactDom.createPortal)(children, mergedContainer));
 }

package/lib/index.d.ts

@@ -1,4 +1,6 @@
 import Portal from './Portal';
 import type { PortalProps } from './Portal';
+import { inlineMock } from './mock';
 export type { PortalProps };
+export { inlineMock };
 export default Portal;

package/lib/index.js

@@ -6,8 +6,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+Object.defineProperty(exports, "inlineMock", {
+  enumerable: true,
+  get: function get() {
+    return _mock.inlineMock;
+  }
+});
 
 var _Portal = _interopRequireDefault(require("./Portal"));
 
+var _mock = require("./mock");
+
 var _default = _Portal.default;
 exports.default = _default;

package/lib/mock.d.ts

@@ -0,0 +1,2 @@
+export declare let inline: boolean;
+export declare function inlineMock(nextInline?: boolean): boolean;

package/lib/mock.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.inline = void 0;
+exports.inlineMock = inlineMock;
+var inline = false;
+exports.inline = inline;
+
+function inlineMock(nextInline) {
+  if (typeof nextInline === 'boolean') {
+    exports.inline = inline = nextInline;
+  }
+
+  return inline;
+}

package/lib/useDom.d.ts

@@ -3,4 +3,4 @@ import type { QueueCreate } from './Context';
  * Will add `div` to document. Nest call will keep order
  * @param render Render DOM in document
  */
-export default function useDom(render: boolean): [HTMLDivElement, QueueCreate];
+export default function useDom(render: boolean, debug?: string): [HTMLDivElement, QueueCreate];

package/lib/useDom.js

@@ -25,9 +25,14 @@ var EMPTY_LIST = [];
  * @param render Render DOM in document
  */
 
-function useDom(render) {
+function useDom(render, debug) {
   var _React$useState = React.useState(function () {
     var defaultEle = document.createElement('div');
+
+    if (process.env.NODE_ENV !== 'production' && debug) {
+      defaultEle.setAttribute('data-debug', debug);
+    }
+
     return defaultEle;
   }),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 1),
@@ -43,7 +48,8 @@ function useDom(render) {
 
   var mergedQueueCreate = queueCreate || function (appendFn) {
     setQueue(function (origin) {
-      return [appendFn].concat((0, _toConsumableArray2.default)(origin));
+      var newQueue = [appendFn].concat((0, _toConsumableArray2.default)(origin));
+      return newQueue;
     });
   }; // =========================== DOM ===========================
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/portal",
-  "version": "1.0.0-0",
+  "version": "1.0.0-2",
   "description": "React Portal Component",
   "keywords": [
     "react",