@oneplatformdev/ui 0.0.1-beta.133 → 0.0.1-beta.135

package/Dialog/Dialog.mjs

@@ -1,52 +1,66 @@
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import i, { useRef as x, useMemo as y } from "react";
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import i, { useState as p, useEffect as b, useRef as D, useMemo as h } from "react";
 import * as e from "@radix-ui/react-dialog";
-import { XIcon as N } from "lucide-react";
-import { cn as l, composeRefs as D } from "@oneplatformdev/utils";
-const E = e.Root, P = e.Trigger, b = e.Portal, F = e.Close, f = i.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+import { XIcon as v } from "lucide-react";
+import { cn as n, composeRefs as C } from "@oneplatformdev/utils";
+import { DialogOverlayScope as w } from "./DialogOverlayScope.mjs";
+const q = e.Root, B = e.Trigger, R = e.Portal, I = e.Close, g = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
   e.Overlay,
   {
     ref: s,
-    className: l(
+    className: n(
       "fixed inset-0 z-40 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      a
+      t
     ),
-    ...t
+    ...a
   }
 ));
-f.displayName = e.Overlay.displayName;
-const h = i.forwardRef(
+g.displayName = e.Overlay.displayName;
+const E = i.forwardRef(
   ({
-    className: a,
-    children: t,
+    className: t,
+    children: a,
     showCloseButton: s = !0,
-    onOpenAutoFocus: r,
-    preventAutoFocus: p,
-    ...g
-  }, d) => {
-    const c = x(null), u = y(() => D(d, c), [d]);
-    return console.log("localRef", c), /* @__PURE__ */ n(b, { children: [
-      /* @__PURE__ */ o(f, {}),
-      /* @__PURE__ */ n(
+    onOpenAutoFocus: d,
+    preventAutoFocus: u,
+    ...y
+  }, m) => {
+    const [l] = p(() => {
+      if (typeof document > "u") return null;
+      const r = document.createElement("div");
+      return r.setAttribute("data-dialog-portal", ""), r;
+    }), [x, N] = p();
+    b(() => {
+      if (l)
+        return document.body.appendChild(l), () => {
+          l.remove();
+        };
+    }, [l]);
+    const f = D(null);
+    return h(() => C(m, f), [m]), console.log("localRef", f), console.log("portalEl", l), console.log("container", x), l ? /* @__PURE__ */ c(R, { children: [
+      /* @__PURE__ */ o(g, {}),
+      /* @__PURE__ */ o(w, { value: l, children: /* @__PURE__ */ c(
         e.Content,
         {
-          ref: u,
-          className: l(
+          ref: (r) => {
+            N(r);
+          },
+          className: n(
             "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg",
             "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
             "max-w-[90%] max-h-[90%] overflow-hidden",
             "bg-[#FCFCFC] border border-[#E8E9EB] rounded-[16px]",
-            a
+            t
           ),
-          onOpenAutoFocus: (m) => (p && m.preventDefault(), r == null ? void 0 : r(m)),
-          ...g,
+          onOpenAutoFocus: (r) => (u && r.preventDefault(), d == null ? void 0 : d(r)),
+          ...y,
           children: [
-            t,
-            s && /* @__PURE__ */ n(
+            a,
+            s && /* @__PURE__ */ c(
               e.Close,
               {
                 "aria-label": "Close",
-                className: l(
+                className: n(
                   "absolute right-4 top-4 rounded-sm ring-offset-background w-10 aspect-square",
                   "flex items-center justify-center",
                   "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
@@ -58,76 +72,76 @@ const h = i.forwardRef(
                   "transition-opacity"
                 ),
                 children: [
-                  /* @__PURE__ */ o(N, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ o(v, { className: "h-4 w-4" }),
                   /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
                 ]
               }
             )
           ]
         }
-      )
-    ] });
+      ) })
+    ] }) : null;
   }
 );
-h.displayName = e.Content.displayName;
-const v = ({
-  className: a,
-  ...t
+E.displayName = e.Content.displayName;
+const T = ({
+  className: t,
+  ...a
 }) => /* @__PURE__ */ o(
   "div",
   {
-    className: l(
+    className: n(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      a
+      t
     ),
-    ...t
+    ...a
   }
 );
-v.displayName = "DialogHeader";
-const w = ({
-  className: a,
-  ...t
+T.displayName = "DialogHeader";
+const j = ({
+  className: t,
+  ...a
 }) => /* @__PURE__ */ o(
   "div",
   {
-    className: l(
+    className: n(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      a
+      t
     ),
-    ...t
+    ...a
   }
 );
-w.displayName = "DialogFooter";
-const C = i.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+j.displayName = "DialogFooter";
+const k = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
   e.Title,
   {
     ref: s,
-    className: l(
+    className: n(
       "text-lg font-semibold leading-none tracking-tight",
-      a
+      t
     ),
-    ...t
+    ...a
   }
 ));
-C.displayName = e.Title.displayName;
-const R = i.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+k.displayName = e.Title.displayName;
+const z = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
   e.Description,
   {
     ref: s,
-    className: l("text-sm text-muted-foreground", a),
-    ...t
+    className: n("text-sm text-muted-foreground", t),
+    ...a
   }
 ));
-R.displayName = e.Description.displayName;
+z.displayName = e.Description.displayName;
 export {
-  E as Dialog,
-  F as DialogClose,
-  h as DialogContent,
-  R as DialogDescription,
-  w as DialogFooter,
-  v as DialogHeader,
-  f as DialogOverlay,
-  b as DialogPortal,
-  C as DialogTitle,
-  P as DialogTrigger
+  q as Dialog,
+  I as DialogClose,
+  E as DialogContent,
+  z as DialogDescription,
+  j as DialogFooter,
+  T as DialogHeader,
+  g as DialogOverlay,
+  R as DialogPortal,
+  k as DialogTitle,
+  B as DialogTrigger
 };

package/Popover/Popover.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
-declare const Popover: (props: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
 declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
 declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/Popover/Popover.mjs

@@ -1,28 +1,32 @@
-import { jsx as e } from "react/jsx-runtime";
-import * as s from "react";
+import { jsx as t } from "react/jsx-runtime";
+import * as m from "react";
 import * as o from "@radix-ui/react-popover";
-import { cn as m } from "@oneplatformdev/utils";
-const c = (t) => /* @__PURE__ */ e(o.Root, { ...t, modal: !1 }), v = o.Trigger, g = o.Anchor, p = s.forwardRef(({ className: t, align: a = "center", sideOffset: r = 4, style: d, ...n }, i) => /* @__PURE__ */ e(o.Portal, { children: /* @__PURE__ */ e(
-  o.Content,
-  {
-    ref: i,
-    align: a,
-    sideOffset: r,
-    className: m(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      t
-    ),
-    style: {
-      pointerEvents: "auto",
-      ...d
-    },
-    ...n
-  }
-) }));
-p.displayName = o.Content.displayName;
+import { cn as p } from "@oneplatformdev/utils";
+import { useDialogOverlayContainer as l } from "../Dialog/DialogOverlayScope.mjs";
+const u = o.Root, P = o.Trigger, h = o.Anchor, c = m.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, style: n, ...i }, d) => {
+  const s = l();
+  return /* @__PURE__ */ t(o.Portal, { container: s, children: /* @__PURE__ */ t(
+    o.Content,
+    {
+      ref: d,
+      align: a,
+      sideOffset: r,
+      className: p(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        e
+      ),
+      style: {
+        pointerEvents: "auto",
+        ...n
+      },
+      ...i
+    }
+  ) });
+});
+c.displayName = o.Content.displayName;
 export {
-  c as Popover,
-  g as PopoverAnchor,
-  p as PopoverContent,
-  v as PopoverTrigger
+  u as Popover,
+  h as PopoverAnchor,
+  c as PopoverContent,
+  P as PopoverTrigger
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/ui",
-  "version": "0.0.1-beta.133",
+  "version": "0.0.1-beta.135",
   "description": "UI React Components.",
   "author": "One Platform Development Team",
   "keywords": [