@launchpad-ui/modal - npm Package Compare versions

Comparing version 0.9.1 to 0.9.2

dist/index.es.js

@@ -8,3 +8,3 @@ import './style.css';
 import { LazyMotion, m } from "framer-motion";
-import { useRef, useEffect, useState, Suspense } from "react";
+import { useRef, useEffect, forwardRef, useState, Suspense } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -230,23 +230,18 @@ import { Progress } from "@launchpad-ui/progress";
 };
-const Portal = ({
-  children,
-  containerRef,
+const Portal = forwardRef(({
+  container = ((_a) => (_a = globalThis == null ? void 0 : globalThis.document) == null ? void 0 : _a.body)(),
+  "data-test-id": testId = "portal",
   ...props
-}) => {
-  const [portal, setPortal] = useState(null);
+}, ref) => {
+  const [mounted, setMounted] = useState(false);
   useEffect(() => {
-    const portal2 = document.createElement("div");
-    portal2.classList.add("Portal");
-    setPortal(portal2);
-    document.body.appendChild(portal2);
-    return () => {
-      document.body.removeChild(portal2);
-    };
+    setMounted(true);
   }, []);
-  return portal ? createPortal(/* @__PURE__ */ jsx("div", {
+  return mounted && container ? createPortal(/* @__PURE__ */ jsx("div", {
     ...props,
-    ref: containerRef,
-    children
-  }), portal) : null;
-};
+    ref,
+    "data-test-id": testId
+  }), container) : null;
+});
+Portal.displayName = "Portal";
 const ModalSheet = ({
@@ -253,0 +248,0 @@ size = "small",

dist/index.js

@@ -247,23 +247,18 @@ require('./style.css');
 };
-const Portal = ({
-  children,
-  containerRef,
+const Portal = react.forwardRef(({
+  container = ((_a) => (_a = globalThis == null ? void 0 : globalThis.document) == null ? void 0 : _a.body)(),
+  "data-test-id": testId = "portal",
   ...props
-}) => {
-  const [portal, setPortal] = react.useState(null);
+}, ref) => {
+  const [mounted, setMounted] = react.useState(false);
   react.useEffect(() => {
-    const portal2 = document.createElement("div");
-    portal2.classList.add("Portal");
-    setPortal(portal2);
-    document.body.appendChild(portal2);
-    return () => {
-      document.body.removeChild(portal2);
-    };
+    setMounted(true);
   }, []);
-  return portal ? reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx("div", {
+  return mounted && container ? reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx("div", {
     ...props,
-    ref: containerRef,
-    children
-  }), portal) : null;
-};
+    ref,
+    "data-test-id": testId
+  }), container) : null;
+});
+Portal.displayName = "Portal";
 const ModalSheet = ({
@@ -270,0 +265,0 @@ size = "small",

dist/Portal.d.ts

@@ -1,11 +0,12 @@
-import type { KeyboardEvent, ReactNode, RefObject } from 'react';
-declare type PortalProps = {
-    containerRef?: RefObject<HTMLDivElement>;
-    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
-    className?: string;
-    children?: ReactNode;
+import type { HTMLAttributes } from 'react';
+declare type PortalProps = HTMLAttributes<HTMLDivElement> & {
+    container?: HTMLElement | null;
+    'data-test-id'?: string;
 };
-declare const Portal: ({ children, containerRef, ...props }: PortalProps) => import("react").ReactPortal | null;
+declare const Portal: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    container?: HTMLElement | null | undefined;
+    'data-test-id'?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export { Portal };
 export type { PortalProps };
 //# sourceMappingURL=Portal.d.ts.map

package.json

 {
   "name": "@launchpad-ui/modal",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "status": "beta",
@@ -5,0 +5,0 @@ "publishConfig": {

No alert changes

Worsened metrics

Total package byte prevSize

55091

decreased by-1.03%

Lines of code

783

decreased by-1.14%

No dependency changes