@oneplatformdev/ui 0.0.1-beta.132 → 0.0.1-beta.134

package/Dialog/Dialog.mjs

@@ -1,48 +1,60 @@
-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 n, { useState as x, useEffect as N, useRef as b, useMemo as D } 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 h } from "lucide-react";
+import { cn as l, composeRefs as v } from "@oneplatformdev/utils";
+import { DialogOverlayScope as C } from "./DialogOverlayScope.mjs";
+const _ = e.Root, q = e.Trigger, w = e.Portal, B = e.Close, p = n.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
   e.Overlay,
   {
     ref: s,
     className: l(
       "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(
+p.displayName = e.Overlay.displayName;
+const R = n.forwardRef(
   ({
-    className: a,
-    children: t,
+    className: t,
+    children: a,
     showCloseButton: s = !0,
-    onOpenAutoFocus: r,
-    preventAutoFocus: p,
+    onOpenAutoFocus: d,
+    preventAutoFocus: u,
     ...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(
+  }, f) => {
+    const [r] = x(() => {
+      if (typeof document > "u") return null;
+      const i = document.createElement("div");
+      return i.setAttribute("data-dialog-portal", ""), i;
+    });
+    N(() => {
+      if (r)
+        return document.body.appendChild(r), () => {
+          r.remove();
+        };
+    }, [r]);
+    const m = b(null), y = D(() => v(f, m), [f]);
+    return console.log("localRef", m), r ? /* @__PURE__ */ c(w, { children: [
+      /* @__PURE__ */ o(p, {}),
+      /* @__PURE__ */ o(C, { value: r, children: /* @__PURE__ */ c(
         e.Content,
         {
-          ref: u,
+          ref: y,
           className: l(
             "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)),
+          onOpenAutoFocus: (i) => (u && i.preventDefault(), d == null ? void 0 : d(i)),
           ...g,
           children: [
-            t,
-            s && /* @__PURE__ */ n(
+            a,
+            s && /* @__PURE__ */ c(
               e.Close,
               {
                 "aria-label": "Close",
@@ -58,76 +70,76 @@ const h = i.forwardRef(
                   "transition-opacity"
                 ),
                 children: [
-                  /* @__PURE__ */ o(N, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ o(h, { className: "h-4 w-4" }),
                   /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
                 ]
               }
             )
           ]
         }
-      )
-    ] });
+      ) })
+    ] }) : null;
   }
 );
-h.displayName = e.Content.displayName;
-const v = ({
-  className: a,
-  ...t
+R.displayName = e.Content.displayName;
+const E = ({
+  className: t,
+  ...a
 }) => /* @__PURE__ */ o(
   "div",
   {
     className: l(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      a
+      t
     ),
-    ...t
+    ...a
   }
 );
-v.displayName = "DialogHeader";
-const w = ({
-  className: a,
-  ...t
+E.displayName = "DialogHeader";
+const T = ({
+  className: t,
+  ...a
 }) => /* @__PURE__ */ o(
   "div",
   {
     className: l(
       "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(
+T.displayName = "DialogFooter";
+const j = n.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
   e.Title,
   {
     ref: s,
     className: l(
       "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(
+j.displayName = e.Title.displayName;
+const k = n.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
   e.Description,
   {
     ref: s,
-    className: l("text-sm text-muted-foreground", a),
-    ...t
+    className: l("text-sm text-muted-foreground", t),
+    ...a
   }
 ));
-R.displayName = e.Description.displayName;
+k.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
+  _ as Dialog,
+  B as DialogClose,
+  R as DialogContent,
+  k as DialogDescription,
+  T as DialogFooter,
+  E as DialogHeader,
+  p as DialogOverlay,
+  w as DialogPortal,
+  j as DialogTitle,
+  q 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: React.FC<PopoverPrimitive.PopoverProps>;
+declare const Popover: (props: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
 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 t } from "react/jsx-runtime";
-import * as s from "react";
+import { jsx as e } 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 = o.Root, v = o.Trigger, g = o.Anchor, p = s.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, style: n, ...d }, i) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
-  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",
-      e
-    ),
-    style: {
-      pointerEvents: "auto",
-      ...n
-    },
-    ...d
-  }
-) }));
-p.displayName = o.Content.displayName;
+import { cn as p } from "@oneplatformdev/utils";
+import { useDialogOverlayContainer as l } from "../Dialog/DialogOverlayScope.mjs";
+const u = (t) => /* @__PURE__ */ e(o.Root, { ...t, modal: !1 }), P = o.Trigger, h = o.Anchor, f = m.forwardRef(({ className: t, align: a = "center", sideOffset: r = 4, style: n, ...i }, d) => {
+  const s = l();
+  return /* @__PURE__ */ e(o.Portal, { container: s, children: /* @__PURE__ */ e(
+    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",
+        t
+      ),
+      style: {
+        pointerEvents: "auto",
+        ...n
+      },
+      ...i
+    }
+  ) });
+});
+f.displayName = o.Content.displayName;
 export {
-  c as Popover,
-  g as PopoverAnchor,
-  p as PopoverContent,
-  v as PopoverTrigger
+  u as Popover,
+  h as PopoverAnchor,
+  f as PopoverContent,
+  P as PopoverTrigger
 };

package/package.json

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