@rc-component/portal 1.1.1 → 2.0.0

package/README.md

@@ -32,7 +32,7 @@ open http://localhost:8000
 ## Usage
 
 ```js | pure
-import Portal from 'rc-portal';
+import Portal from '@rc-component/portal';
 
 const Demo = () => {
   return <Portal open>Hello World</Portal>;

package/es/Context.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-export declare type QueueCreate = (appendFunc: VoidFunction) => void;
+export type QueueCreate = (appendFunc: VoidFunction) => void;
 declare const OrderContext: React.Context<QueueCreate>;
 export default OrderContext;

package/es/Context.js

@@ -1,3 +1,3 @@
 import * as React from 'react';
-var OrderContext = /*#__PURE__*/React.createContext(null);
+const OrderContext = /*#__PURE__*/React.createContext(null);
 export default OrderContext;

package/es/Portal.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export declare type ContainerType = Element | DocumentFragment;
-export declare type GetContainer = string | ContainerType | (() => ContainerType) | false;
+export type ContainerType = Element | DocumentFragment;
+export type GetContainer = string | ContainerType | (() => ContainerType) | false;
 export interface PortalProps {
     /** Customize container element. Default will create a div in document.body when `open` */
     getContainer?: GetContainer;

package/es/Portal.js

@@ -1,14 +1,13 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import canUseDom from "@rc-component/util/es/Dom/canUseDom";
+import { getNodeRef, supportRef, useComposeRef } from "@rc-component/util/es/ref";
+import warning from "@rc-component/util/es/warning";
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import canUseDom from "rc-util/es/Dom/canUseDom";
-import warning from "rc-util/es/warning";
-import { supportRef, useComposeRef } from "rc-util/es/ref";
 import OrderContext from "./Context";
+import { inlineMock } from "./mock";
 import useDom from "./useDom";
 import useScrollLocker from "./useScrollLocker";
-import { inlineMock } from "./mock";
-var getPortalContainer = function getPortalContainer(getContainer) {
+const getPortalContainer = getContainer => {
   if (getContainer === false) {
     return false;
   }
@@ -23,61 +22,50 @@ var getPortalContainer = function getPortalContainer(getContainer) {
   }
   return getContainer;
 };
-var Portal = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var open = props.open,
-    autoLock = props.autoLock,
-    getContainer = props.getContainer,
-    debug = props.debug,
-    _props$autoDestroy = props.autoDestroy,
-    autoDestroy = _props$autoDestroy === void 0 ? true : _props$autoDestroy,
-    children = props.children;
-  var _React$useState = React.useState(open),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    shouldRender = _React$useState2[0],
-    setShouldRender = _React$useState2[1];
-  var mergedRender = shouldRender || open;
+const Portal = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    open,
+    autoLock,
+    getContainer,
+    debug,
+    autoDestroy = true,
+    children
+  } = props;
+  const [shouldRender, setShouldRender] = React.useState(open);
+  const mergedRender = shouldRender || open;
 
   // ========================= Warning =========================
   if (process.env.NODE_ENV !== 'production') {
-    warning(canUseDom() || !open, "Portal only work in client side. Please call 'useEffect' to show Portal instead default render in SSR.");
+    warning(canUseDom() || !open, `Portal only work in client side. Please call 'useEffect' to show Portal instead default render in SSR.`);
   }
 
   // ====================== Should Render ======================
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (autoDestroy || open) {
       setShouldRender(open);
     }
   }, [open, autoDestroy]);
 
   // ======================== Container ========================
-  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);
+  const [innerContainer, setInnerContainer] = React.useState(() => getPortalContainer(getContainer));
+  React.useEffect(() => {
+    const 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);
+    setInnerContainer(customizeContainer ?? null);
   });
-  var _useDom = useDom(mergedRender && !innerContainer, debug),
-    _useDom2 = _slicedToArray(_useDom, 2),
-    defaultContainer = _useDom2[0],
-    queueCreate = _useDom2[1];
-  var mergedContainer = innerContainer !== null && innerContainer !== void 0 ? innerContainer : defaultContainer;
+  const [defaultContainer, queueCreate] = useDom(mergedRender && !innerContainer, debug);
+  const mergedContainer = innerContainer ?? defaultContainer;
 
   // ========================= Locker ==========================
   useScrollLocker(autoLock && open && canUseDom() && (mergedContainer === defaultContainer || mergedContainer === document.body));
 
   // =========================== Ref ===========================
-  var childRef = null;
+  let childRef = null;
   if (children && supportRef(children) && ref) {
-    var _ref = children;
-    childRef = _ref.ref;
+    childRef = getNodeRef(children);
   }
-  var mergedRef = useComposeRef(childRef, ref);
+  const mergedRef = useComposeRef(childRef, ref);
 
   // ========================= Render ==========================
   // Do not render when nothing need render
@@ -87,8 +75,8 @@ var Portal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
 
   // Render inline
-  var renderInline = mergedContainer === false || inlineMock();
-  var reffedChildren = children;
+  const renderInline = mergedContainer === false || inlineMock();
+  let reffedChildren = children;
   if (ref) {
     reffedChildren = /*#__PURE__*/React.cloneElement(children, {
       ref: mergedRef

package/es/mock.js

@@ -1,4 +1,4 @@
-export var inline = false;
+export let inline = false;
 export function inlineMock(nextInline) {
   if (typeof nextInline === 'boolean') {
     inline = nextInline;

package/es/useDom.js

@@ -1,39 +1,32 @@
-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";
+import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
+import canUseDom from "@rc-component/util/es/Dom/canUseDom";
 import OrderContext from "./Context";
-var EMPTY_LIST = [];
+const EMPTY_LIST = [];
 
 /**
  * Will add `div` to document. Nest call will keep order
  * @param render Render DOM in document
  */
 export default function useDom(render, debug) {
-  var _React$useState = React.useState(function () {
-      if (!canUseDom()) {
-        return null;
-      }
-      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),
-    ele = _React$useState2[0];
+  const [ele] = React.useState(() => {
+    if (!canUseDom()) {
+      return null;
+    }
+    const defaultEle = document.createElement('div');
+    if (process.env.NODE_ENV !== 'production' && debug) {
+      defaultEle.setAttribute('data-debug', debug);
+    }
+    return defaultEle;
+  });
 
   // ========================== Order ==========================
-  var appendedRef = React.useRef(false);
-  var queueCreate = React.useContext(OrderContext);
-  var _React$useState3 = React.useState(EMPTY_LIST),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    queue = _React$useState4[0],
-    setQueue = _React$useState4[1];
-  var mergedQueueCreate = queueCreate || (appendedRef.current ? undefined : function (appendFn) {
-    setQueue(function (origin) {
-      var newQueue = [appendFn].concat(_toConsumableArray(origin));
+  const appendedRef = React.useRef(false);
+  const queueCreate = React.useContext(OrderContext);
+  const [queue, setQueue] = React.useState(EMPTY_LIST);
+  const mergedQueueCreate = queueCreate || (appendedRef.current ? undefined : appendFn => {
+    setQueue(origin => {
+      const newQueue = [appendFn, ...origin];
       return newQueue;
     });
   });
@@ -46,11 +39,10 @@ export default function useDom(render, debug) {
     appendedRef.current = true;
   }
   function cleanup() {
-    var _ele$parentElement;
-    (_ele$parentElement = ele.parentElement) === null || _ele$parentElement === void 0 ? void 0 : _ele$parentElement.removeChild(ele);
+    ele.parentElement?.removeChild(ele);
     appendedRef.current = false;
   }
-  useLayoutEffect(function () {
+  useLayoutEffect(() => {
     if (render) {
       if (queueCreate) {
         queueCreate(append);
@@ -62,11 +54,9 @@ export default function useDom(render, debug) {
     }
     return cleanup;
   }, [render]);
-  useLayoutEffect(function () {
+  useLayoutEffect(() => {
     if (queue.length) {
-      queue.forEach(function (appendFn) {
-        return appendFn();
-      });
+      queue.forEach(appendFn => appendFn());
       setQueue(EMPTY_LIST);
     }
   }, [queue]);

package/es/useScrollLocker.js

@@ -1,28 +1,29 @@
-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";
-import getScrollBarSize from "rc-util/es/getScrollBarSize";
+import { updateCSS, removeCSS } from "@rc-component/util/es/Dom/dynamicCSS";
+import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
+import { getTargetScrollBarSize } from "@rc-component/util/es/getScrollBarSize";
 import { isBodyOverflowing } from "./util";
-var UNIQUE_ID = "rc-util-locker-".concat(Date.now());
-var uuid = 0;
+const UNIQUE_ID = `rc-util-locker-${Date.now()}`;
+let uuid = 0;
 export default function useScrollLocker(lock) {
-  var mergedLock = !!lock;
-  var _React$useState = React.useState(function () {
-      uuid += 1;
-      return "".concat(UNIQUE_ID, "_").concat(uuid);
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 1),
-    id = _React$useState2[0];
-  useLayoutEffect(function () {
+  const mergedLock = !!lock;
+  const [id] = React.useState(() => {
+    uuid += 1;
+    return `${UNIQUE_ID}_${uuid}`;
+  });
+  useLayoutEffect(() => {
     if (mergedLock) {
-      var scrollbarSize = getScrollBarSize();
-      var isOverflow = isBodyOverflowing();
-      updateCSS("\nhtml body {\n  overflow-y: hidden;\n  ".concat(isOverflow ? "width: calc(100% - ".concat(scrollbarSize, "px);") : '', "\n}"), id);
+      const scrollbarSize = getTargetScrollBarSize(document.body).width;
+      const isOverflow = isBodyOverflowing();
+      updateCSS(`
+html body {
+  overflow-y: hidden;
+  ${isOverflow ? `width: calc(100% - ${scrollbarSize}px);` : ''}
+}`, id);
     } else {
       removeCSS(id);
     }
-    return function () {
+    return () => {
       removeCSS(id);
     };
   }, [mergedLock, id]);

package/lib/Context.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-export declare type QueueCreate = (appendFunc: VoidFunction) => void;
+export type QueueCreate = (appendFunc: VoidFunction) => void;
 declare const OrderContext: React.Context<QueueCreate>;
 export default OrderContext;

package/lib/Context.js

@@ -1,11 +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 OrderContext = /*#__PURE__*/React.createContext(null);
-var _default = OrderContext;
-exports.default = _default;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const OrderContext = /*#__PURE__*/React.createContext(null);
+var _default = exports.default = OrderContext;

package/lib/Portal.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export declare type ContainerType = Element | DocumentFragment;
-export declare type GetContainer = string | ContainerType | (() => ContainerType) | false;
+export type ContainerType = Element | DocumentFragment;
+export type GetContainer = string | ContainerType | (() => ContainerType) | false;
 export interface PortalProps {
     /** Customize container element. Default will create a div in document.body when `open` */
     getContainer?: GetContainer;

package/lib/Portal.js

@@ -1,22 +1,22 @@
 "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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _canUseDom = _interopRequireDefault(require("@rc-component/util/lib/Dom/canUseDom"));
+var _ref = require("@rc-component/util/lib/ref");
+var _warning = _interopRequireDefault(require("@rc-component/util/lib/warning"));
 var React = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
-var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom"));
-var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
-var _ref2 = require("rc-util/lib/ref");
 var _Context = _interopRequireDefault(require("./Context"));
-var _useDom3 = _interopRequireDefault(require("./useDom"));
-var _useScrollLocker = _interopRequireDefault(require("./useScrollLocker"));
 var _mock = require("./mock");
-var getPortalContainer = function getPortalContainer(getContainer) {
+var _useDom = _interopRequireDefault(require("./useDom"));
+var _useScrollLocker = _interopRequireDefault(require("./useScrollLocker"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const getPortalContainer = getContainer => {
   if (getContainer === false) {
     return false;
   }
@@ -31,61 +31,50 @@ var getPortalContainer = function getPortalContainer(getContainer) {
   }
   return getContainer;
 };
-var Portal = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var open = props.open,
-    autoLock = props.autoLock,
-    getContainer = props.getContainer,
-    debug = props.debug,
-    _props$autoDestroy = props.autoDestroy,
-    autoDestroy = _props$autoDestroy === void 0 ? true : _props$autoDestroy,
-    children = props.children;
-  var _React$useState = React.useState(open),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    shouldRender = _React$useState2[0],
-    setShouldRender = _React$useState2[1];
-  var mergedRender = shouldRender || open;
+const Portal = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    open,
+    autoLock,
+    getContainer,
+    debug,
+    autoDestroy = true,
+    children
+  } = props;
+  const [shouldRender, setShouldRender] = React.useState(open);
+  const mergedRender = shouldRender || open;
 
   // ========================= Warning =========================
   if (process.env.NODE_ENV !== 'production') {
-    (0, _warning.default)((0, _canUseDom.default)() || !open, "Portal only work in client side. Please call 'useEffect' to show Portal instead default render in SSR.");
+    (0, _warning.default)((0, _canUseDom.default)() || !open, `Portal only work in client side. Please call 'useEffect' to show Portal instead default render in SSR.`);
   }
 
   // ====================== Should Render ======================
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (autoDestroy || open) {
       setShouldRender(open);
     }
   }, [open, autoDestroy]);
 
   // ======================== Container ========================
-  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);
+  const [innerContainer, setInnerContainer] = React.useState(() => getPortalContainer(getContainer));
+  React.useEffect(() => {
+    const 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);
+    setInnerContainer(customizeContainer ?? null);
   });
-  var _useDom = (0, _useDom3.default)(mergedRender && !innerContainer, debug),
-    _useDom2 = (0, _slicedToArray2.default)(_useDom, 2),
-    defaultContainer = _useDom2[0],
-    queueCreate = _useDom2[1];
-  var mergedContainer = innerContainer !== null && innerContainer !== void 0 ? innerContainer : defaultContainer;
+  const [defaultContainer, queueCreate] = (0, _useDom.default)(mergedRender && !innerContainer, debug);
+  const mergedContainer = innerContainer ?? defaultContainer;
 
   // ========================= Locker ==========================
   (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;
+  let childRef = null;
+  if (children && (0, _ref.supportRef)(children) && ref) {
+    childRef = (0, _ref.getNodeRef)(children);
   }
-  var mergedRef = (0, _ref2.useComposeRef)(childRef, ref);
+  const mergedRef = (0, _ref.useComposeRef)(childRef, ref);
 
   // ========================= Render ==========================
   // Do not render when nothing need render
@@ -95,8 +84,8 @@ var Portal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
 
   // Render inline
-  var renderInline = mergedContainer === false || (0, _mock.inlineMock)();
-  var reffedChildren = children;
+  const renderInline = mergedContainer === false || (0, _mock.inlineMock)();
+  let reffedChildren = children;
   if (ref) {
     reffedChildren = /*#__PURE__*/React.cloneElement(children, {
       ref: mergedRef
@@ -109,5 +98,4 @@ var Portal = /*#__PURE__*/React.forwardRef(function (props, ref) {
 if (process.env.NODE_ENV !== 'production') {
   Portal.displayName = 'Portal';
 }
-var _default = Portal;
-exports.default = _default;
+var _default = exports.default = Portal;

package/lib/index.js

@@ -1,17 +1,16 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 Object.defineProperty(exports, "inlineMock", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _mock.inlineMock;
   }
 });
 var _Portal = _interopRequireDefault(require("./Portal"));
 var _mock = require("./mock");
-var _default = _Portal.default;
-exports.default = _default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = _Portal.default;

package/lib/mock.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.inline = void 0;
 exports.inlineMock = inlineMock;
-var inline = false;
-exports.inline = inline;
+let inline = exports.inline = false;
 function inlineMock(nextInline) {
   if (typeof nextInline === 'boolean') {
     exports.inline = inline = nextInline;

package/lib/useDom.js

@@ -1,47 +1,41 @@
 "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 = useDom;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
-var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
-var _canUseDom = _interopRequireDefault(require("rc-util/lib/Dom/canUseDom"));
+var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
+var _canUseDom = _interopRequireDefault(require("@rc-component/util/lib/Dom/canUseDom"));
 var _Context = _interopRequireDefault(require("./Context"));
-var EMPTY_LIST = [];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const EMPTY_LIST = [];
 
 /**
  * Will add `div` to document. Nest call will keep order
  * @param render Render DOM in document
  */
 function useDom(render, debug) {
-  var _React$useState = React.useState(function () {
-      if (!(0, _canUseDom.default)()) {
-        return null;
-      }
-      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),
-    ele = _React$useState2[0];
+  const [ele] = React.useState(() => {
+    if (!(0, _canUseDom.default)()) {
+      return null;
+    }
+    const defaultEle = document.createElement('div');
+    if (process.env.NODE_ENV !== 'production' && debug) {
+      defaultEle.setAttribute('data-debug', debug);
+    }
+    return defaultEle;
+  });
 
   // ========================== Order ==========================
-  var appendedRef = React.useRef(false);
-  var queueCreate = React.useContext(_Context.default);
-  var _React$useState3 = React.useState(EMPTY_LIST),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    queue = _React$useState4[0],
-    setQueue = _React$useState4[1];
-  var mergedQueueCreate = queueCreate || (appendedRef.current ? undefined : function (appendFn) {
-    setQueue(function (origin) {
-      var newQueue = [appendFn].concat((0, _toConsumableArray2.default)(origin));
+  const appendedRef = React.useRef(false);
+  const queueCreate = React.useContext(_Context.default);
+  const [queue, setQueue] = React.useState(EMPTY_LIST);
+  const mergedQueueCreate = queueCreate || (appendedRef.current ? undefined : appendFn => {
+    setQueue(origin => {
+      const newQueue = [appendFn, ...origin];
       return newQueue;
     });
   });
@@ -54,11 +48,10 @@ function useDom(render, debug) {
     appendedRef.current = true;
   }
   function cleanup() {
-    var _ele$parentElement;
-    (_ele$parentElement = ele.parentElement) === null || _ele$parentElement === void 0 ? void 0 : _ele$parentElement.removeChild(ele);
+    ele.parentElement?.removeChild(ele);
     appendedRef.current = false;
   }
-  (0, _useLayoutEffect.default)(function () {
+  (0, _useLayoutEffect.default)(() => {
     if (render) {
       if (queueCreate) {
         queueCreate(append);
@@ -70,11 +63,9 @@ function useDom(render, debug) {
     }
     return cleanup;
   }, [render]);
-  (0, _useLayoutEffect.default)(function () {
+  (0, _useLayoutEffect.default)(() => {
     if (queue.length) {
-      queue.forEach(function (appendFn) {
-        return appendFn();
-      });
+      queue.forEach(appendFn => appendFn());
       setQueue(EMPTY_LIST);
     }
   }, [queue]);

package/lib/useScrollLocker.js

@@ -1,36 +1,38 @@
 "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 = useScrollLocker;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
-var _dynamicCSS = require("rc-util/lib/Dom/dynamicCSS");
-var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
-var _getScrollBarSize = _interopRequireDefault(require("rc-util/lib/getScrollBarSize"));
+var _dynamicCSS = require("@rc-component/util/lib/Dom/dynamicCSS");
+var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
+var _getScrollBarSize = require("@rc-component/util/lib/getScrollBarSize");
 var _util = require("./util");
-var UNIQUE_ID = "rc-util-locker-".concat(Date.now());
-var uuid = 0;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const UNIQUE_ID = `rc-util-locker-${Date.now()}`;
+let uuid = 0;
 function useScrollLocker(lock) {
-  var mergedLock = !!lock;
-  var _React$useState = React.useState(function () {
-      uuid += 1;
-      return "".concat(UNIQUE_ID, "_").concat(uuid);
-    }),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 1),
-    id = _React$useState2[0];
-  (0, _useLayoutEffect.default)(function () {
+  const mergedLock = !!lock;
+  const [id] = React.useState(() => {
+    uuid += 1;
+    return `${UNIQUE_ID}_${uuid}`;
+  });
+  (0, _useLayoutEffect.default)(() => {
     if (mergedLock) {
-      var scrollbarSize = (0, _getScrollBarSize.default)();
-      var isOverflow = (0, _util.isBodyOverflowing)();
-      (0, _dynamicCSS.updateCSS)("\nhtml body {\n  overflow-y: hidden;\n  ".concat(isOverflow ? "width: calc(100% - ".concat(scrollbarSize, "px);") : '', "\n}"), id);
+      const scrollbarSize = (0, _getScrollBarSize.getTargetScrollBarSize)(document.body).width;
+      const isOverflow = (0, _util.isBodyOverflowing)();
+      (0, _dynamicCSS.updateCSS)(`
+html body {
+  overflow-y: hidden;
+  ${isOverflow ? `width: calc(100% - ${scrollbarSize}px);` : ''}
+}`, id);
     } else {
       (0, _dynamicCSS.removeCSS)(id);
     }
-    return function () {
+    return () => {
       (0, _dynamicCSS.removeCSS)(id);
     };
   }, [mergedLock, id]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/portal",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "React Portal Component",
   "keywords": [
     "react",
@@ -33,44 +33,46 @@
     "lint": "eslint src/ --ext .tsx,.ts",
     "lint:tsc": "tsc -p tsconfig.json --noEmit",
     "now-build": "npm run docs:build",
-    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
+    "prepare": "dumi setup",
+    "prepublishOnly": "npm run compile && rc-np",
     "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
     "start": "dumi dev",
-    "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": "npm run test:server && npm run test:coverage",
+    "test:client": "rc-test --testPathIgnorePatterns=ssr.test.tsx --testPathIgnorePatterns=ssr.test.tsx",
+    "test:coverage": "npm run test:client -- --coverage",
+    "test:server": "rc-test --env=node -- tests/ssr.test.tsx",
     "watch": "father dev"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.0",
-    "classnames": "^2.3.2",
-    "rc-util": "^5.24.4"
+    "@rc-component/util": "^1.2.1",
+    "classnames": "^2.3.2"
   },
   "devDependencies": {
-    "@rc-component/father-plugin": "^1.0.0",
+    "@rc-component/father-plugin": "^2.0.2",
+    "@rc-component/np": "^1.0.3",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.0",
     "@types/jest": "^26.0.20",
+    "@types/node": "^20.9.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@umijs/fabric": "^2.5.2",
-    "dumi": "^1.1.0",
+    "@umijs/fabric": "^3.0.0",
+    "dumi": "^2.0.0",
     "eslint": "^7.18.0",
-    "father": "^4.0.0-rc.8",
-    "gh-pages": "^3.1.0",
-    "np": "^5.0.3",
+    "father": "^4.0.0",
+    "gh-pages": "^6.1.1",
+    "glob": "^10.0.0",
     "prettier": "^2.1.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "typescript": "^4.6.3",
-    "umi-test": "^1.9.7"
+    "rc-test": "^7.1.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.0.0"
   },
   "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "engines": {
-    "node": ">=8.x"
+    "node": ">=12.x"
   }
 }