@oneplatformdev/ui 0.0.1-beta.136 → 0.0.1-beta.138

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/Dialog/Dialog.mjs +72 -74
  2. package/Dialog/DialogOverlayScope.d.ts +2 -2
  3. package/Dialog/DialogOverlayScope.mjs +8 -8
  4. package/Dialog/index.mjs +5 -5
  5. package/Popover/Popover.mjs +15 -14
  6. package/index.mjs +2 -2
  7. package/package.json +1 -1
package/Dialog/Dialog.mjs CHANGED
@@ -1,60 +1,50 @@
1
- import { jsx as o, jsxs as c } from "react/jsx-runtime";
2
- import i, { useState as u, useEffect as D, useRef as h, useMemo as v } from "react";
1
+ import { jsx as o, jsxs as d } from "react/jsx-runtime";
2
+ import i, { useState as y, useRef as N } from "react";
3
3
  import * as e from "@radix-ui/react-dialog";
4
- import { XIcon as C } from "lucide-react";
5
- import { cn as r, composeRefs as w } from "@oneplatformdev/utils";
6
- import { DialogOverlayScope as R } from "./DialogOverlayScope.mjs";
7
- const B = e.Root, I = e.Trigger, E = e.Portal, M = e.Close, g = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
4
+ import { XIcon as D } from "lucide-react";
5
+ import { cn as r, composeRefs as b } from "@oneplatformdev/utils";
6
+ import { DialogOverlayScope as h } from "./DialogOverlayScope.mjs";
7
+ const F = e.Root, H = e.Trigger, v = e.Portal, _ = e.Close, c = i.forwardRef(({ className: a, ...t }, l) => /* @__PURE__ */ o(
8
8
  e.Overlay,
9
9
  {
10
- ref: s,
10
+ ref: l,
11
11
  className: r(
12
12
  "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",
13
- t
13
+ a
14
14
  ),
15
- ...a
15
+ ...t
16
16
  }
17
17
  ));
18
- g.displayName = e.Overlay.displayName;
19
- const T = i.forwardRef(
18
+ c.displayName = e.Overlay.displayName;
19
+ const w = i.forwardRef(
20
20
  ({
21
- className: t,
22
- children: a,
23
- showCloseButton: s = !0,
24
- onOpenAutoFocus: d,
25
- preventAutoFocus: y,
26
- ...x
27
- }, f) => {
28
- const [n] = u(() => {
29
- if (typeof document > "u") return null;
30
- const l = document.createElement("div");
31
- return l.setAttribute("data-dialog-portal", ""), l;
32
- }), [m, N] = u();
33
- D(() => {
34
- if (n)
35
- return document.body.appendChild(n), () => {
36
- n.remove();
37
- };
38
- }, [n]);
39
- const p = h(null), b = v(() => w(f, p), [f]);
40
- return console.log("localRef", p), console.log("portalEl", n), console.log("container", m), n ? /* @__PURE__ */ c(E, { children: [
41
- /* @__PURE__ */ o(g, {}),
42
- /* @__PURE__ */ o(R, { value: m, children: /* @__PURE__ */ c(
21
+ className: a,
22
+ children: t,
23
+ showCloseButton: l = !0,
24
+ onOpenAutoFocus: n,
25
+ preventAutoFocus: f,
26
+ ...m
27
+ }, p) => {
28
+ const [g, u] = y(null), x = N(null);
29
+ return /* @__PURE__ */ d(v, { children: [
30
+ /* @__PURE__ */ o(h, { value: g, children: /* @__PURE__ */ d(
43
31
  e.Content,
44
32
  {
45
- ref: (l) => (N(l), b),
33
+ ref: (s) => {
34
+ s && b(p, x)(s);
35
+ },
46
36
  className: r(
47
37
  "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",
48
38
  "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",
49
39
  "max-w-[90%] max-h-[90%] overflow-hidden",
50
40
  "bg-[#FCFCFC] border border-[#E8E9EB] rounded-[16px]",
51
- t
41
+ a
52
42
  ),
53
- onOpenAutoFocus: (l) => (y && l.preventDefault(), d == null ? void 0 : d(l)),
54
- ...x,
43
+ onOpenAutoFocus: (s) => (f && s.preventDefault(), n == null ? void 0 : n(s)),
44
+ ...m,
55
45
  children: [
56
- a,
57
- s && /* @__PURE__ */ c(
46
+ t,
47
+ l && /* @__PURE__ */ d(
58
48
  e.Close,
59
49
  {
60
50
  "aria-label": "Close",
@@ -70,76 +60,84 @@ const T = i.forwardRef(
70
60
  "transition-opacity"
71
61
  ),
72
62
  children: [
73
- /* @__PURE__ */ o(C, { className: "h-4 w-4" }),
63
+ /* @__PURE__ */ o(D, { className: "h-4 w-4" }),
74
64
  /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
75
65
  ]
76
66
  }
77
67
  )
78
68
  ]
79
69
  }
70
+ ) }),
71
+ /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o(
72
+ "div",
73
+ {
74
+ ref: (s) => {
75
+ s && u(s);
76
+ }
77
+ }
80
78
  ) })
81
- ] }) : null;
79
+ ] });
82
80
  }
83
81
  );
84
- T.displayName = e.Content.displayName;
85
- const j = ({
86
- className: t,
87
- ...a
82
+ w.displayName = e.Content.displayName;
83
+ const C = ({
84
+ className: a,
85
+ ...t
88
86
  }) => /* @__PURE__ */ o(
89
87
  "div",
90
88
  {
91
89
  className: r(
92
90
  "flex flex-col space-y-1.5 text-center sm:text-left",
93
- t
91
+ a
94
92
  ),
95
- ...a
93
+ ...t
96
94
  }
97
95
  );
98
- j.displayName = "DialogHeader";
99
- const k = ({
100
- className: t,
101
- ...a
96
+ C.displayName = "DialogHeader";
97
+ const R = ({
98
+ className: a,
99
+ ...t
102
100
  }) => /* @__PURE__ */ o(
103
101
  "div",
104
102
  {
105
103
  className: r(
106
104
  "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
107
- t
105
+ a
108
106
  ),
109
- ...a
107
+ ...t
110
108
  }
111
109
  );
112
- k.displayName = "DialogFooter";
113
- const z = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
110
+ R.displayName = "DialogFooter";
111
+ const T = i.forwardRef(({ className: a, ...t }, l) => /* @__PURE__ */ o(
114
112
  e.Title,
115
113
  {
116
- ref: s,
114
+ ref: l,
117
115
  className: r(
118
116
  "text-lg font-semibold leading-none tracking-tight",
119
- t
117
+ a
120
118
  ),
121
- ...a
119
+ ...t
122
120
  }
123
121
  ));
124
- z.displayName = e.Title.displayName;
125
- const P = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
122
+ T.displayName = e.Title.displayName;
123
+ const j = i.forwardRef(({ className: a, ...t }, l) => /* @__PURE__ */ o(
126
124
  e.Description,
127
125
  {
128
- ref: s,
129
- className: r("text-sm text-muted-foreground", t),
130
- ...a
126
+ ref: l,
127
+ className: r("text-sm text-muted-foreground", a),
128
+ ...t
131
129
  }
132
130
  ));
133
- P.displayName = e.Description.displayName;
131
+ j.displayName = e.Description.displayName;
134
132
  export {
135
- B as Dialog,
136
- M as DialogClose,
137
- T as DialogContent,
138
- P as DialogDescription,
139
- k as DialogFooter,
140
- j as DialogHeader,
141
- g as DialogOverlay,
142
- E as DialogPortal,
143
- z as DialogTitle,
144
- I as DialogTrigger
133
+ F as Dialog,
134
+ _ as DialogClose,
135
+ w as DialogContent,
136
+ j as DialogDescription,
137
+ R as DialogFooter,
138
+ C as DialogHeader,
139
+ c as DialogOverlay,
140
+ v as DialogPortal,
141
+ T as DialogTitle,
142
+ H as DialogTrigger
145
143
  };
package/Dialog/DialogOverlayScope.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { Context, PropsWithChildren } from 'react';
1
+ import { PropsWithChildren } from 'react';
2
2
 
3
- export declare const DialogOverlayContainerCtx: Context<HTMLElement | null>;
3
+ export declare const DialogOverlayContainerContext: import('react').Context<HTMLElement | null>;
4
4
  export declare const useDialogOverlayContainer: () => HTMLElement | null;
5
5
  interface IDialogOverlayScopeProps extends PropsWithChildren {
6
6
  value: HTMLElement | null;
package/Dialog/DialogOverlayScope.mjs CHANGED
@@ -1,10 +1,10 @@
1
- import { jsx as a } from "react/jsx-runtime";
2
- import { createContext as t, useContext as i } from "react";
3
- const o = Symbol.for("@oneplatformdev/ui.dialog-overlay-scope-context"), e = globalThis;
4
- e[o] || (e[o] = t(null));
5
- const r = t(null), g = () => i(r), m = ({ value: l, children: n }) => /* @__PURE__ */ a(r.Provider, { value: l, children: n });
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import { createContext as n, useContext as a } from "react";
3
+ const o = n(
4
+ null
5
+ ), s = () => a(o), c = ({ value: e, children: t }) => /* @__PURE__ */ r(o.Provider, { value: e, children: t });
6
6
  export {
7
- r as DialogOverlayContainerCtx,
8
- m as DialogOverlayScope,
9
- g as useDialogOverlayContainer
7
+ o as DialogOverlayContainerContext,
8
+ c as DialogOverlayScope,
9
+ s as useDialogOverlayContainer
10
10
  };
package/Dialog/index.mjs CHANGED
@@ -1,14 +1,14 @@
1
- import { Dialog as l, DialogClose as i, DialogContent as e, DialogDescription as r, DialogFooter as g, DialogHeader as D, DialogOverlay as t, DialogPortal as n, DialogTitle as C, DialogTrigger as p } from "./Dialog.mjs";
2
- import { DialogOverlayContainerCtx as y, DialogOverlayScope as O, useDialogOverlayContainer as s } from "./DialogOverlayScope.mjs";
1
+ import { Dialog as l, DialogClose as e, DialogContent as i, DialogDescription as r, DialogFooter as g, DialogHeader as D, DialogOverlay as t, DialogPortal as n, DialogTitle as C, DialogTrigger as p } from "./Dialog.mjs";
2
+ import { DialogOverlayContainerContext as y, DialogOverlayScope as O, useDialogOverlayContainer as s } from "./DialogOverlayScope.mjs";
3
3
  export {
4
4
  l as Dialog,
5
- i as DialogClose,
6
- e as DialogContent,
5
+ e as DialogClose,
6
+ i as DialogContent,
7
7
  r as DialogDescription,
8
8
  g as DialogFooter,
9
9
  D as DialogHeader,
10
10
  t as DialogOverlay,
11
- y as DialogOverlayContainerCtx,
11
+ y as DialogOverlayContainerContext,
12
12
  O as DialogOverlayScope,
13
13
  n as DialogPortal,
14
14
  C as DialogTitle,
package/Popover/Popover.mjs CHANGED
@@ -1,17 +1,17 @@
1
1
  import { jsx as t } from "react/jsx-runtime";
2
- import * as m from "react";
2
+ import * as p from "react";
3
3
  import * as o from "@radix-ui/react-popover";
4
- import { cn as p } from "@oneplatformdev/utils";
5
- import { useDialogOverlayContainer as l } from "../Dialog/DialogOverlayScope.mjs";
6
- 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) => {
7
- const s = l();
8
- return /* @__PURE__ */ t(o.Portal, { container: s, children: /* @__PURE__ */ t(
4
+ import { cn as l } from "@oneplatformdev/utils";
5
+ import { useDialogOverlayContainer as c } from "../Dialog/DialogOverlayScope.mjs";
6
+ const P = o.Root, h = o.Trigger, b = o.Anchor, f = p.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, style: n, avoidCollisions: i = !0, ...d }, s) => {
7
+ const m = c();
8
+ return /* @__PURE__ */ t(o.Portal, { container: m, children: /* @__PURE__ */ t(
9
9
  o.Content,
10
10
  {
11
- ref: d,
11
+ ref: s,
12
12
  align: a,
13
13
  sideOffset: r,
14
- className: p(
14
+ className: l(
15
15
  "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",
16
16
  e
17
17
  ),
@@ -19,14 +19,15 @@ const u = o.Root, P = o.Trigger, h = o.Anchor, c = m.forwardRef(({ className: e,
19
19
  pointerEvents: "auto",
20
20
  ...n
21
21
  },
22
- ...i
22
+ ...d,
23
+ avoidCollisions: i
23
24
  }
24
25
  ) });
25
26
  });
26
- c.displayName = o.Content.displayName;
27
+ f.displayName = o.Content.displayName;
27
28
  export {
28
- u as Popover,
29
- h as PopoverAnchor,
30
- c as PopoverContent,
31
- P as PopoverTrigger
29
+ P as Popover,
30
+ b as PopoverAnchor,
31
+ f as PopoverContent,
32
+ h as PopoverTrigger
32
33
  };
package/index.mjs CHANGED
@@ -25,7 +25,7 @@ import { Command as Ho, CommandDialog as yo, CommandEmpty as No, CommandGroup as
25
25
  import { DataTable as jo } from "./DataTable/DataTable.mjs";
26
26
  import { DatePicker as Jo } from "./DatePicker/DatePicker.mjs";
27
27
  import { Dialog as Qo, DialogClose as Wo, DialogContent as Xo, DialogDescription as Zo, DialogFooter as $o, DialogHeader as or, DialogOverlay as rr, DialogPortal as er, DialogTitle as tr, DialogTrigger as ar } from "./Dialog/Dialog.mjs";
28
- import { DialogOverlayContainerCtx as ir, DialogOverlayScope as pr, useDialogOverlayContainer as lr } from "./Dialog/DialogOverlayScope.mjs";
28
+ import { DialogOverlayContainerContext as ir, DialogOverlayScope as pr, useDialogOverlayContainer as lr } from "./Dialog/DialogOverlayScope.mjs";
29
29
  import { Drawer as ur, DrawerClose as dr, DrawerContent as gr, DrawerDescription as br, DrawerFooter as xr, DrawerHeader as fr, DrawerOverlay as Sr, DrawerPortal as sr, DrawerTitle as Cr, DrawerTrigger as Tr } from "./Drawer/Drawer.mjs";
30
30
  import { DropdownMenu as cr, DropdownMenuCheckboxItem as Mr, DropdownMenuContent as Pr, DropdownMenuGroup as Ir, DropdownMenuItem as Ar, DropdownMenuLabel as vr, DropdownMenuPortal as wr, DropdownMenuRadioGroup as hr, DropdownMenuRadioItem as Fr, DropdownMenuSeparator as Lr, DropdownMenuShortcut as Rr, DropdownMenuSub as Br, DropdownMenuSubContent as Gr, DropdownMenuSubTrigger as kr, DropdownMenuTrigger as Hr } from "./DropdownMenu/DropdownMenu.mjs";
31
31
  import { Form as Nr, FormControl as Or, FormDescription as Vr, FormField as Er, FormItem as zr, FormLabel as _r, FormMessage as Ur, useFormField as Yr } from "./Form/Form.mjs";
@@ -166,7 +166,7 @@ export {
166
166
  $o as DialogFooter,
167
167
  or as DialogHeader,
168
168
  rr as DialogOverlay,
169
- ir as DialogOverlayContainerCtx,
169
+ ir as DialogOverlayContainerContext,
170
170
  pr as DialogOverlayScope,
171
171
  er as DialogPortal,
172
172
  tr as DialogTitle,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oneplatformdev/ui",
3
- "version": "0.0.1-beta.136",
3
+ "version": "0.0.1-beta.138",
4
4
  "description": "UI React Components.",
5
5
  "author": "One Platform Development Team",
6
6
  "keywords": [