prometeo-design-system 4.6.0 → 4.6.1

package/dist/DialogModal.es.js

@@ -1,29 +1,31 @@
 import { j as o } from "./jsx-runtime-GkKLlHH4.js";
-import { forwardRef as y, memo as r, useState as D, useRef as x, useCallback as l, useImperativeHandle as k } from "react";
-import { c as j } from "./cn-B6yFEsav.js";
-const C = y(
-  ({ children: e, onClose: t, className: c }, i) => {
-    const [n, s] = D(!1), [u, g] = D(null), f = x(t), p = x(u);
-    f.current = t, p.current = u;
-    const m = l((a) => {
-      g(a ?? null), s(!0);
-    }, []), d = l(() => {
-      s(!1), f.current?.(p.current), setTimeout(() => g(null), 300);
+import { forwardRef as w, memo as r, useState as C, useRef as x, useCallback as n, useImperativeHandle as R } from "react";
+import { createPortal as O } from "react-dom";
+import { c as b } from "./cn-B6yFEsav.js";
+const y = w(
+  ({ children: e, onClose: t, className: s, attachToParent: c = !1 }, i) => {
+    const [l, g] = C(!1), [u, f] = C(null), m = x(t), d = x(u);
+    m.current = t, d.current = u;
+    const D = n((a) => {
+      f(a ?? null), g(!0);
+    }, []), p = n(() => {
+      g(!1), m.current?.(d.current), setTimeout(() => f(null), 300);
     }, []);
-    return k(
+    R(
       i,
       () => ({
-        open: m,
-        close: d,
-        isOpen: n,
-        getContext: () => p.current
+        open: D,
+        close: p,
+        isOpen: l,
+        getContext: () => d.current
       }),
-      [m, d, n]
-    ), /* @__PURE__ */ o.jsx(o.Fragment, { children: n && /* @__PURE__ */ o.jsxs(
+      [D, p, l]
+    );
+    const j = /* @__PURE__ */ o.jsx(o.Fragment, { children: l && /* @__PURE__ */ o.jsxs(
       "div",
       {
         className: "fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-[1.5px]",
-        onClick: d,
+        onClick: p,
         children: [
           /* @__PURE__ */ o.jsx(
             "div",
@@ -36,9 +38,9 @@ const C = y(
             "div",
             {
               onClick: (a) => a.stopPropagation(),
-              className: j(
+              className: b(
                 "bg-neutral-default-default  w-3/4 h-3/4 xl:w-3/4 xl:h-10/12 rounded-lg shadow-lg border-neutral-strong-default border relative p-6",
-                c
+                s
               ),
               children: typeof e == "function" ? e(u) : e
             }
@@ -46,39 +48,40 @@ const C = y(
         ]
       }
     ) });
+    return c ? j : O(j, document.body);
   }
 );
-C.displayName = "Dialog";
-const b = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: /* @__PURE__ */ o.jsx("div", { className: j("flex flex-col gap-4 h-full"), children: e }) }));
-b.displayName = "DialogContent";
-const N = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("h1", { className: t, children: e }));
-N.displayName = "DialogTitle";
-const h = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: e }));
-h.displayName = "DialogHeader";
+y.displayName = "Dialog";
+const N = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: /* @__PURE__ */ o.jsx("div", { className: b("flex flex-col gap-4 h-full"), children: e }) }));
+N.displayName = "DialogContent";
+const h = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("h1", { className: t, children: e }));
+h.displayName = "DialogTitle";
 const v = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: e }));
-v.displayName = "DialogFooter";
-const w = Object.assign(C, {
-  Content: b,
-  Header: h,
-  Footer: v,
-  Title: N
+v.displayName = "DialogHeader";
+const k = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: e }));
+k.displayName = "DialogFooter";
+const F = Object.assign(y, {
+  Content: N,
+  Header: v,
+  Footer: k,
+  Title: h
 });
-w.displayName = "DialogModal";
-const H = () => {
-  const e = x(null), t = l((s) => {
-    e.current?.open(s);
-  }, []), c = l(() => {
+F.displayName = "DialogModal";
+const I = () => {
+  const e = x(null), t = n((l) => {
+    e.current?.open(l);
+  }, []), s = n(() => {
     e.current?.close();
-  }, []), i = l(() => e.current?.isOpen ?? !1, []), n = l(() => e.current?.getContext() ?? null, []);
+  }, []), c = n(() => e.current?.isOpen ?? !1, []), i = n(() => e.current?.getContext() ?? null, []);
   return {
     ref: e,
     open: t,
-    close: c,
-    isOpen: i,
-    getContext: n
+    close: s,
+    isOpen: c,
+    getContext: i
   };
 };
 export {
-  w as default,
-  H as useDialogControl
+  F as default,
+  I as useDialogControl
 };

package/dist/components/Dialog/Dialog.d.ts

@@ -3,6 +3,7 @@ interface DialogProps<TContext = unknown> {
     children: React.ReactNode | ((context: TContext | null) => React.ReactNode);
     onClose?: (context: TContext | null) => void;
     className?: string;
+    attachToParent?: boolean;
 }
 export interface DialogHandle<TContext = unknown> {
     open: (context?: TContext) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "4.6.0",
+  "version": "4.6.1",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",