@oneplatformdev/ui 0.0.1-beta.116 → 0.0.1-beta.118

package/Combobox/Combobox.mjs

@@ -9,7 +9,7 @@ import "../Command/Command.mjs";
 import "@oneplatformdev/utils";
 import "@oneplatformdev/hooks";
 import "lucide-react";
-import { C as c } from "../Combobox-BzFTeSHQ.js";
+import { C as c } from "../Combobox-CkGEIfTD.js";
 export {
   c as Combobox
 };

package/Combobox/ComboboxOptionItem.mjs

@@ -20,7 +20,7 @@ import "../Card/Card.mjs";
 import "../Carousel/Carousel.mjs";
 import "../Checkbox/Checkbox.mjs";
 import "@radix-ui/react-collapsible";
-import { a as so } from "../Combobox-BzFTeSHQ.js";
+import { a as Co } from "../Combobox-CkGEIfTD.js";
 import "../Command/Command.mjs";
 import "../DropdownMenu/DropdownMenu.mjs";
 import "../Table/Table.mjs";
@@ -28,6 +28,7 @@ import "@tanstack/react-table";
 import "lucide-react";
 import "../DatePicker/DatePicker.mjs";
 import "../Dialog/Dialog.mjs";
+import "../Dialog/DialogOverlayScope.mjs";
 import "../Drawer/Drawer.mjs";
 import "../Form/Form.mjs";
 import "../FormInput/FormInput.mjs";
@@ -64,5 +65,5 @@ import "../ToggleGroup/ToggleGroup.mjs";
 import "../Tooltip/TooltipRoot.mjs";
 import "../Dropzone/Dropzone.mjs";
 export {
-  so as ComboboxOptionItem
+  Co as ComboboxOptionItem
 };

package/Combobox/ComboboxOptions.mjs

@@ -3,7 +3,7 @@ import "../Button/Button.mjs";
 import "../Button/buttonVariants.mjs";
 import "react";
 import "../Collapsible/Collapsible.mjs";
-import { c as a, b as e } from "../Combobox-BzFTeSHQ.js";
+import { c as a, b as e } from "../Combobox-CkGEIfTD.js";
 import "lucide-react";
 import "@oneplatformdev/utils";
 export {

package/Combobox/index.mjs

@@ -1,4 +1,4 @@
-import { C as m } from "../Combobox-BzFTeSHQ.js";
+import { C as m } from "../Combobox-CkGEIfTD.js";
 export {
   m as Combobox
 };

package/{Combobox-BzFTeSHQ.js → Combobox-CkGEIfTD.js}

@@ -32,6 +32,7 @@ import "./Table/Table.mjs";
 import "@tanstack/react-table";
 import "./DatePicker/DatePicker.mjs";
 import "./Dialog/Dialog.mjs";
+import "./Dialog/DialogOverlayScope.mjs";
 import "./Drawer/Drawer.mjs";
 import "./Form/Form.mjs";
 import "./FormInput/FormInput.mjs";
@@ -153,7 +154,7 @@ const ge = 8, U = S((a, m) => {
 }), be = S((a, m) => {
   const { options: t = [], ...d } = a;
   return /* @__PURE__ */ e("div", { ref: m, className: "flex flex-col gap-0", children: t.map((o) => /* @__PURE__ */ e(V, { ...d, option: o }, o.value)) });
-}), Dt = S(
+}), Tt = S(
   (a, m) => {
     var q;
     const {
@@ -317,7 +318,7 @@ const ge = 8, U = S((a, m) => {
   }
 );
 export {
-  Dt as C,
+  Tt as C,
   U as a,
   V as b,
   be as c

package/Command/Command.mjs

@@ -4,6 +4,7 @@ import { Command as o } from "cmdk";
 import { SearchIcon as p } from "lucide-react";
 import { cn as r } from "@oneplatformdev/utils";
 import { Dialog as i, DialogContent as l } from "../Dialog/Dialog.mjs";
+import "../Dialog/DialogOverlayScope.mjs";
 const n = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ t(
   o,
   {
@@ -16,7 +17,7 @@ const n = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ t(
   }
 ));
 n.displayName = o.displayName;
-const C = ({ children: e, ...a }) => /* @__PURE__ */ t(i, { ...a, children: /* @__PURE__ */ t(l, { className: "overflow-hidden p-0", children: /* @__PURE__ */ t(n, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: e }) }) }), c = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ s("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+const b = ({ children: e, ...a }) => /* @__PURE__ */ t(i, { ...a, children: /* @__PURE__ */ t(l, { className: "overflow-hidden p-0", children: /* @__PURE__ */ t(n, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: e }) }) }), c = m.forwardRef(({ className: e, ...a }, d) => /* @__PURE__ */ s("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
   /* @__PURE__ */ t(p, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ t(
     o.Input,
@@ -105,7 +106,7 @@ const y = ({
 y.displayName = "CommandShortcut";
 export {
   n as Command,
-  C as CommandDialog,
+  b as CommandDialog,
   f as CommandEmpty,
   g as CommandGroup,
   c as CommandInput,

package/Dialog/Dialog.d.ts

@@ -7,6 +7,7 @@ declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.Dialo
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     showCloseButton?: boolean;
+    preventAutoFocus?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/Dialog/Dialog.mjs

@@ -1,121 +1,136 @@
-import { jsx as o, jsxs as d } from "react/jsx-runtime";
-import * as l from "react";
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import * as i from "react";
+import { useRef as y, useState as N, useLayoutEffect as D } from "react";
 import * as e from "@radix-ui/react-dialog";
-import { XIcon as g } from "lucide-react";
-import { cn as i } from "@oneplatformdev/utils";
-const v = e.Root, C = e.Trigger, p = e.Portal, R = e.Close, n = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+import { XIcon as h } from "lucide-react";
+import { cn as l } from "@oneplatformdev/utils";
+import { DialogOverlayScope as b } from "./DialogOverlayScope.mjs";
+const S = e.Root, F = e.Trigger, v = e.Portal, q = e.Close, m = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
   e.Overlay,
   {
     ref: s,
-    className: i(
+    className: l(
       "fixed inset-0 z-50 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
   }
 ));
-n.displayName = e.Overlay.displayName;
-const u = l.forwardRef(({ className: a, children: t, showCloseButton: s = !0, onOpenAutoFocus: r, ...c }, m) => /* @__PURE__ */ d(p, { children: [
-  /* @__PURE__ */ o(n, {}),
-  /* @__PURE__ */ d(
-    e.Content,
-    {
-      ref: m,
-      className: i(
-        "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
-      ),
-      onOpenAutoFocus: (f) => r == null ? void 0 : r(f),
-      ...c,
-      children: [
-        t,
-        s && /* @__PURE__ */ d(
-          e.Close,
-          {
-            "aria-label": "Close",
-            className: i(
-              "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",
-              "opacity-70 hover:opacity-100",
-              // 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-              "focus:outline-none focus:ring-0 focus:ring-ring focus:ring-offset-2",
-              "hover:bg-accent",
-              "disabled:pointer-events-none",
-              "transition-opacity"
-            ),
-            children: [
-              /* @__PURE__ */ o(g, { className: "h-4 w-4" }),
-              /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
-            ]
-          }
-        )
-      ]
-    }
-  )
-] }));
-u.displayName = e.Content.displayName;
-const x = ({
-  className: a,
-  ...t
+m.displayName = e.Overlay.displayName;
+const w = i.forwardRef(
+  ({
+    className: t,
+    children: a,
+    showCloseButton: s = !0,
+    onOpenAutoFocus: r,
+    preventAutoFocus: f,
+    ...p
+  }, g) => {
+    const d = y(null), [u, x] = N(null);
+    return D(() => x(d.current), []), /* @__PURE__ */ n(v, { children: [
+      /* @__PURE__ */ o(m, {}),
+      /* @__PURE__ */ o("div", { ref: d, className: "fixed inset-0 z-40" }),
+      /* @__PURE__ */ o(b, { value: u, children: /* @__PURE__ */ n(
+        e.Content,
+        {
+          ref: g,
+          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]",
+            t
+          ),
+          onOpenAutoFocus: (c) => (f && c.preventDefault(), r == null ? void 0 : r(c)),
+          ...p,
+          children: [
+            a,
+            s && /* @__PURE__ */ n(
+              e.Close,
+              {
+                "aria-label": "Close",
+                className: l(
+                  "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",
+                  "opacity-70 hover:opacity-100",
+                  // 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+                  "focus:outline-none focus:ring-0 focus:ring-ring focus:ring-offset-2",
+                  "hover:bg-accent",
+                  "disabled:pointer-events-none",
+                  "transition-opacity"
+                ),
+                children: [
+                  /* @__PURE__ */ o(h, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
+          ]
+        }
+      ) })
+    ] });
+  }
+);
+w.displayName = e.Content.displayName;
+const C = ({
+  className: t,
+  ...a
 }) => /* @__PURE__ */ o(
   "div",
   {
-    className: i(
+    className: l(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      a
+      t
     ),
-    ...t
+    ...a
   }
 );
-x.displayName = "DialogHeader";
-const y = ({
-  className: a,
-  ...t
+C.displayName = "DialogHeader";
+const R = ({
+  className: t,
+  ...a
 }) => /* @__PURE__ */ o(
   "div",
   {
-    className: i(
+    className: l(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      a
+      t
     ),
-    ...t
+    ...a
   }
 );
-y.displayName = "DialogFooter";
-const N = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+R.displayName = "DialogFooter";
+const E = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
   e.Title,
   {
     ref: s,
-    className: i(
+    className: l(
       "text-lg font-semibold leading-none tracking-tight",
-      a
+      t
     ),
-    ...t
+    ...a
   }
 ));
-N.displayName = e.Title.displayName;
-const b = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+E.displayName = e.Title.displayName;
+const z = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
   e.Description,
   {
     ref: s,
-    className: i("text-sm text-muted-foreground", a),
-    ...t
+    className: l("text-sm text-muted-foreground", t),
+    ...a
   }
 ));
-b.displayName = e.Description.displayName;
+z.displayName = e.Description.displayName;
 export {
-  v as Dialog,
-  R as DialogClose,
-  u as DialogContent,
-  b as DialogDescription,
-  y as DialogFooter,
-  x as DialogHeader,
-  n as DialogOverlay,
-  p as DialogPortal,
-  N as DialogTitle,
-  C as DialogTrigger
+  S as Dialog,
+  q as DialogClose,
+  w as DialogContent,
+  z as DialogDescription,
+  R as DialogFooter,
+  C as DialogHeader,
+  m as DialogOverlay,
+  v as DialogPortal,
+  E as DialogTitle,
+  F as DialogTrigger
 };

package/Dialog/DialogOverlayScope.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+
+interface IDialogOverlayScopeProps extends PropsWithChildren {
+    value: HTMLElement | null;
+}
+export declare const DialogOverlayScope: ({ value, children }: IDialogOverlayScopeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useDialogOverlayContainer: () => HTMLElement | null;
+export {};

package/Dialog/DialogOverlayScope.mjs

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+import { createContext as n, useContext as a } from "react";
+const o = n(null), s = ({ value: e, children: r }) => /* @__PURE__ */ t(o.Provider, { value: e, children: r }), c = () => a(o);
+export {
+  s as DialogOverlayScope,
+  c as useDialogOverlayContainer
+};

package/Dialog/index.d.ts

@@ -1 +1,2 @@
 export * from './Dialog';
+export { useDialogOverlayContainer } from './DialogOverlayScope';

package/Dialog/index.mjs

@@ -1,13 +1,15 @@
-import { Dialog as l, DialogClose as a, DialogContent as g, DialogDescription as D, DialogFooter as e, DialogHeader as r, DialogOverlay as t, DialogPortal as n, DialogTitle as p, DialogTrigger as s } from "./Dialog.mjs";
+import { Dialog as i, DialogClose as l, DialogContent as e, DialogDescription as g, DialogFooter as r, DialogHeader as D, DialogOverlay as t, DialogPortal as n, DialogTitle as p, DialogTrigger as s } from "./Dialog.mjs";
+import { useDialogOverlayContainer as f } from "./DialogOverlayScope.mjs";
 export {
-  l as Dialog,
-  a as DialogClose,
-  g as DialogContent,
-  D as DialogDescription,
-  e as DialogFooter,
-  r as DialogHeader,
+  i as Dialog,
+  l as DialogClose,
+  e as DialogContent,
+  g as DialogDescription,
+  r as DialogFooter,
+  D as DialogHeader,
   t as DialogOverlay,
   n as DialogPortal,
   p as DialogTitle,
-  s as DialogTrigger
+  s as DialogTrigger,
+  f as useDialogOverlayContainer
 };

package/FormCombobox/FormCombobox.mjs

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { FormControl as a } from "../Form/Form.mjs";
 import { FormRenderControl as b } from "../Form/FormRenderControl.mjs";
-import { C as p } from "../Combobox-BzFTeSHQ.js";
+import { C as p } from "../Combobox-CkGEIfTD.js";
 const x = (m) => {
   const { form: n, label: e, name: t, ...C } = m;
   return /* @__PURE__ */ o(

package/Popover/Popover.mjs

@@ -1,28 +1,33 @@
 import { jsx as t } from "react/jsx-runtime";
-import * as s from "react";
+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: d, ...n }, 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",
-      ...d
-    },
-    ...n
-  }
-) }));
-p.displayName = o.Content.displayName;
+import { cn as p } from "@oneplatformdev/utils";
+import "../Dialog/Dialog.mjs";
+import { useDialogOverlayContainer as l } from "../Dialog/DialogOverlayScope.mjs";
+const P = o.Root, h = o.Trigger, b = 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 ?? void 0, 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
+  P as Popover,
+  b as PopoverAnchor,
+  c as PopoverContent,
+  h as PopoverTrigger
 };