@oneplatformdev/ui 0.0.1-beta.115 → 0.0.1-beta.117

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,9 +1,10 @@
 import { jsx as o, jsxs as d } from "react/jsx-runtime";
 import * as l from "react";
 import * as e from "@radix-ui/react-dialog";
-import { XIcon as p } from "lucide-react";
+import { XIcon as g } from "lucide-react";
 import { cn as i } from "@oneplatformdev/utils";
-const v = e.Root, C = e.Trigger, g = e.Portal, R = e.Close, c = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+import { DialogOverlayScope as u } from "./DialogOverlayScope.mjs";
+const T = e.Root, j = e.Trigger, x = e.Portal, k = e.Close, c = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
   e.Overlay,
   {
     ref: s,
@@ -15,12 +16,12 @@ const v = e.Root, C = e.Trigger, g = e.Portal, R = e.Close, c = l.forwardRef(({
   }
 ));
 c.displayName = e.Overlay.displayName;
-const u = l.forwardRef(({ className: a, children: t, showCloseButton: s = !0, onOpenAutoFocus: r, ...m }, f) => /* @__PURE__ */ d(g, { children: [
+const y = l.forwardRef(({ className: a, children: t, showCloseButton: s = !0, onOpenAutoFocus: r, preventAutoFocus: m, ...f }, p) => /* @__PURE__ */ d(x, { children: [
   /* @__PURE__ */ o(c, {}),
   /* @__PURE__ */ d(
     e.Content,
     {
-      ref: f,
+      ref: p,
       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",
@@ -28,10 +29,10 @@ const u = l.forwardRef(({ className: a, children: t, showCloseButton: s = !0, on
         "bg-[#FCFCFC] border border-[#E8E9EB] rounded-[16px]",
         a
       ),
-      onOpenAutoFocus: (n) => (n.preventDefault(), r == null ? void 0 : r(n)),
-      ...m,
+      onOpenAutoFocus: (n) => (m && n.preventDefault(), r == null ? void 0 : r(n)),
+      ...f,
       children: [
-        t,
+        /* @__PURE__ */ o(u, { children: t }),
         s && /* @__PURE__ */ d(
           e.Close,
           {
@@ -41,13 +42,14 @@ const u = l.forwardRef(({ className: a, children: t, showCloseButton: s = !0, on
               "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-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(p, { className: "h-4 w-4" }),
+              /* @__PURE__ */ o(g, { className: "h-4 w-4" }),
               /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
             ]
           }
@@ -56,8 +58,8 @@ const u = l.forwardRef(({ className: a, children: t, showCloseButton: s = !0, on
     }
   )
 ] }));
-u.displayName = e.Content.displayName;
-const x = ({
+y.displayName = e.Content.displayName;
+const N = ({
   className: a,
   ...t
 }) => /* @__PURE__ */ o(
@@ -70,8 +72,8 @@ const x = ({
     ...t
   }
 );
-x.displayName = "DialogHeader";
-const y = ({
+N.displayName = "DialogHeader";
+const D = ({
   className: a,
   ...t
 }) => /* @__PURE__ */ o(
@@ -84,8 +86,8 @@ const y = ({
     ...t
   }
 );
-y.displayName = "DialogFooter";
-const N = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+D.displayName = "DialogFooter";
+const b = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
   e.Title,
   {
     ref: s,
@@ -96,8 +98,8 @@ const N = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
     ...t
   }
 ));
-N.displayName = e.Title.displayName;
-const D = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
+b.displayName = e.Title.displayName;
+const h = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
   e.Description,
   {
     ref: s,
@@ -105,16 +107,16 @@ const D = l.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
     ...t
   }
 ));
-D.displayName = e.Description.displayName;
+h.displayName = e.Description.displayName;
 export {
-  v as Dialog,
-  R as DialogClose,
-  u as DialogContent,
-  D as DialogDescription,
-  y as DialogFooter,
-  x as DialogHeader,
+  T as Dialog,
+  k as DialogClose,
+  y as DialogContent,
+  h as DialogDescription,
+  D as DialogFooter,
+  N as DialogHeader,
   c as DialogOverlay,
-  g as DialogPortal,
-  N as DialogTitle,
-  C as DialogTrigger
+  x as DialogPortal,
+  b as DialogTitle,
+  j as DialogTrigger
 };

package/Dialog/DialogOverlayScope.d.ts

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

package/Dialog/DialogOverlayScope.mjs

@@ -0,0 +1,10 @@
+import { jsx as t } from "react/jsx-runtime";
+import { createContext as a, useRef as s, useState as c, useLayoutEffect as u, useContext as i } from "react";
+const o = a(null), m = ({ children: r }) => {
+  const e = s(null), [n, l] = c(null);
+  return u(() => l(e.current), []), /* @__PURE__ */ t("div", { ref: e, "data-overlay-scope": !0, className: "contents", children: /* @__PURE__ */ t(o.Provider, { value: n, children: r }) });
+}, p = () => i(o);
+export {
+  m as DialogOverlayScope,
+  p 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
 };