@oneplatformdev/ui 0.0.1-beta.127 → 0.0.1-beta.129

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 (6) hide show
  1. package/Dialog/Dialog.d.ts +2 -1
  2. package/Dialog/Dialog.mjs +58 -52
  3. package/Dialog/DialogOverlayScope.mjs +5 -5
  4. package/Popover/Popover.d.ts +1 -1
  5. package/Popover/Popover.mjs +16 -16
  6. package/package.json +4 -4
package/Dialog/Dialog.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import * as React from 'react';
1
+ import { default as React } from 'react';
2
+
2
3
  import * as DialogPrimitive from '@radix-ui/react-dialog';
3
4
  declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
4
5
  declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
package/Dialog/Dialog.mjs CHANGED
@@ -1,56 +1,63 @@
1
- import { jsx as o, jsxs as d } from "react/jsx-runtime";
2
- import * as r from "react";
3
- import { useRef as y, useState as N, useLayoutEffect as h } from "react";
1
+ import { jsx as o, jsxs as c } from "react/jsx-runtime";
2
+ import i, { useRef as h, useMemo as D, useState as v, useEffect as b } from "react";
4
3
  import * as e from "@radix-ui/react-dialog";
5
- import { XIcon as D } from "lucide-react";
6
- import { cn as l } from "@oneplatformdev/utils";
7
- import { DialogOverlayScope as b } from "./DialogOverlayScope.mjs";
8
- const S = e.Root, F = e.Trigger, v = e.Portal, q = e.Close, f = r.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
4
+ import { XIcon as C } from "lucide-react";
5
+ import { cn as n, composeRefs as w } from "@oneplatformdev/utils";
6
+ import { DialogOverlayScope as E } from "./DialogOverlayScope.mjs";
7
+ const q = e.Root, B = e.Trigger, R = e.Portal, M = e.Close, g = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
9
8
  e.Overlay,
10
9
  {
11
10
  ref: s,
12
- className: l(
11
+ className: n(
13
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",
14
13
  t
15
14
  ),
16
15
  ...a
17
16
  }
18
17
  ));
19
- f.displayName = e.Overlay.displayName;
20
- const w = r.forwardRef(
18
+ g.displayName = e.Overlay.displayName;
19
+ const z = i.forwardRef(
21
20
  ({
22
21
  className: t,
23
22
  children: a,
24
23
  showCloseButton: s = !0,
25
- onOpenAutoFocus: i,
26
- preventAutoFocus: m,
27
- ...p
28
- }, g) => {
29
- const n = y(null), [u, x] = N(null);
30
- return h(() => {
31
- x(n.current), console.log("hostRef.current", n.current);
32
- }, []), /* @__PURE__ */ d(v, { children: [
33
- /* @__PURE__ */ o(f, {}),
34
- /* @__PURE__ */ o(b, { value: u, children: /* @__PURE__ */ d(
24
+ onOpenAutoFocus: d,
25
+ preventAutoFocus: u,
26
+ ...y
27
+ }, m) => {
28
+ const f = h(null), x = D(
29
+ () => w(m, f),
30
+ [m]
31
+ ), [N, p] = v(null);
32
+ return b(() => {
33
+ const r = f.current;
34
+ if (!r || !r.parentElement) return;
35
+ const l = document.createElement("div");
36
+ return l.dataset.overlayHost = "", l.style.position = "fixed", l.style.inset = "0", l.style.zIndex = "80", r.parentElement.appendChild(l), p(l), () => {
37
+ l.remove(), p(null);
38
+ };
39
+ }, []), /* @__PURE__ */ c(R, { children: [
40
+ /* @__PURE__ */ o(g, {}),
41
+ /* @__PURE__ */ o(E, { value: N, children: /* @__PURE__ */ c(
35
42
  e.Content,
36
43
  {
37
- ref: g,
38
- className: l(
44
+ ref: x,
45
+ className: n(
39
46
  "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",
40
47
  "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",
41
48
  "max-w-[90%] max-h-[90%] overflow-hidden",
42
49
  "bg-[#FCFCFC] border border-[#E8E9EB] rounded-[16px]",
43
50
  t
44
51
  ),
45
- onOpenAutoFocus: (c) => (m && c.preventDefault(), i == null ? void 0 : i(c)),
46
- ...p,
52
+ onOpenAutoFocus: (r) => (u && r.preventDefault(), d == null ? void 0 : d(r)),
53
+ ...y,
47
54
  children: [
48
55
  a,
49
- s && /* @__PURE__ */ d(
56
+ s && /* @__PURE__ */ c(
50
57
  e.Close,
51
58
  {
52
59
  "aria-label": "Close",
53
- className: l(
60
+ className: n(
54
61
  "absolute right-4 top-4 rounded-sm ring-offset-background w-10 aspect-square",
55
62
  "flex items-center justify-center",
56
63
  "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
@@ -62,77 +69,76 @@ const w = r.forwardRef(
62
69
  "transition-opacity"
63
70
  ),
64
71
  children: [
65
- /* @__PURE__ */ o(D, { className: "h-4 w-4" }),
72
+ /* @__PURE__ */ o(C, { className: "h-4 w-4" }),
66
73
  /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
67
74
  ]
68
75
  }
69
76
  )
70
77
  ]
71
78
  }
72
- ) }),
73
- /* @__PURE__ */ o("div", { ref: n, className: "fixed inset-0 z-80" })
79
+ ) })
74
80
  ] });
75
81
  }
76
82
  );
77
- w.displayName = e.Content.displayName;
78
- const C = ({
83
+ z.displayName = e.Content.displayName;
84
+ const T = ({
79
85
  className: t,
80
86
  ...a
81
87
  }) => /* @__PURE__ */ o(
82
88
  "div",
83
89
  {
84
- className: l(
90
+ className: n(
85
91
  "flex flex-col space-y-1.5 text-center sm:text-left",
86
92
  t
87
93
  ),
88
94
  ...a
89
95
  }
90
96
  );
91
- C.displayName = "DialogHeader";
92
- const R = ({
97
+ T.displayName = "DialogHeader";
98
+ const j = ({
93
99
  className: t,
94
100
  ...a
95
101
  }) => /* @__PURE__ */ o(
96
102
  "div",
97
103
  {
98
- className: l(
104
+ className: n(
99
105
  "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
100
106
  t
101
107
  ),
102
108
  ...a
103
109
  }
104
110
  );
105
- R.displayName = "DialogFooter";
106
- const E = r.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
111
+ j.displayName = "DialogFooter";
112
+ const k = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
107
113
  e.Title,
108
114
  {
109
115
  ref: s,
110
- className: l(
116
+ className: n(
111
117
  "text-lg font-semibold leading-none tracking-tight",
112
118
  t
113
119
  ),
114
120
  ...a
115
121
  }
116
122
  ));
117
- E.displayName = e.Title.displayName;
118
- const z = r.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
123
+ k.displayName = e.Title.displayName;
124
+ const H = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
119
125
  e.Description,
120
126
  {
121
127
  ref: s,
122
- className: l("text-sm text-muted-foreground", t),
128
+ className: n("text-sm text-muted-foreground", t),
123
129
  ...a
124
130
  }
125
131
  ));
126
- z.displayName = e.Description.displayName;
132
+ H.displayName = e.Description.displayName;
127
133
  export {
128
- S as Dialog,
129
- q as DialogClose,
130
- w as DialogContent,
131
- z as DialogDescription,
132
- R as DialogFooter,
133
- C as DialogHeader,
134
- f as DialogOverlay,
135
- v as DialogPortal,
136
- E as DialogTitle,
137
- F as DialogTrigger
134
+ q as Dialog,
135
+ M as DialogClose,
136
+ z as DialogContent,
137
+ H as DialogDescription,
138
+ j as DialogFooter,
139
+ T as DialogHeader,
140
+ g as DialogOverlay,
141
+ R as DialogPortal,
142
+ k as DialogTitle,
143
+ B as DialogTrigger
138
144
  };
package/Dialog/DialogOverlayScope.mjs CHANGED
@@ -1,10 +1,10 @@
1
- import { jsx as l } from "react/jsx-runtime";
2
- import { createContext as a, useContext as i } from "react";
1
+ import { jsx as a } from "react/jsx-runtime";
2
+ import { createContext as t, useContext as i } from "react";
3
3
  const o = Symbol.for("@oneplatformdev/ui.dialog-overlay-scope-context"), e = globalThis;
4
- e[o] || (e[o] = a(null));
5
- const t = e[o], g = () => i(t), m = ({ value: r, children: n }) => /* @__PURE__ */ l(t.Provider, { value: r, children: n });
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 });
6
6
  export {
7
- t as DialogOverlayContainerCtx,
7
+ r as DialogOverlayContainerCtx,
8
8
  m as DialogOverlayScope,
9
9
  g as useDialogOverlayContainer
10
10
  };
package/Popover/Popover.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as PopoverPrimitive from '@radix-ui/react-popover';
3
- declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
3
+ declare const Popover: (props: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
4
4
  declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
5
5
  declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
6
6
  declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
package/Popover/Popover.mjs CHANGED
@@ -1,19 +1,19 @@
1
- import { jsx as e } from "react/jsx-runtime";
1
+ import { jsx as a } from "react/jsx-runtime";
2
2
  import * as m 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 v = o.Root, P = o.Trigger, h = o.Anchor, c = m.forwardRef(({ className: a, align: r = "center", sideOffset: n = 4, style: i, ...d }, s) => {
7
- const t = l();
8
- return console.log("container", t), /* @__PURE__ */ e(o.Portal, { container: t ?? void 0, children: /* @__PURE__ */ e(
4
+ import { cn as l } from "@oneplatformdev/utils";
5
+ import { useDialogOverlayContainer as c } from "../Dialog/DialogOverlayScope.mjs";
6
+ const P = (t) => /* @__PURE__ */ a(o.Root, { ...t, modal: !1 }), h = o.Trigger, b = o.Anchor, f = m.forwardRef(({ className: t, align: n = "center", sideOffset: s = 4, style: i, ...d }, p) => {
7
+ const e = c(), r = e ? { container: e } : {};
8
+ return console.log("container", e), console.log("portalProps", r), /* @__PURE__ */ a(o.Portal, { ...r, children: /* @__PURE__ */ a(
9
9
  o.Content,
10
10
  {
11
- ref: s,
12
- align: r,
13
- sideOffset: n,
14
- className: p(
11
+ ref: p,
12
+ align: n,
13
+ sideOffset: s,
14
+ className: l(
15
15
  "z-90 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
- a
16
+ t
17
17
  ),
18
18
  style: {
19
19
  pointerEvents: "auto",
@@ -23,10 +23,10 @@ const v = o.Root, P = o.Trigger, h = o.Anchor, c = m.forwardRef(({ className: a,
23
23
  }
24
24
  ) });
25
25
  });
26
- c.displayName = o.Content.displayName;
26
+ f.displayName = o.Content.displayName;
27
27
  export {
28
- v as Popover,
29
- h as PopoverAnchor,
30
- c as PopoverContent,
31
- P as PopoverTrigger
28
+ P as Popover,
29
+ b as PopoverAnchor,
30
+ f as PopoverContent,
31
+ h as PopoverTrigger
32
32
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oneplatformdev/ui",
3
- "version": "0.0.1-beta.127",
3
+ "version": "0.0.1-beta.129",
4
4
  "description": "UI React Components.",
5
5
  "author": "One Platform Development Team",
6
6
  "keywords": [
@@ -36,7 +36,7 @@
36
36
  "registry": "https://registry.npmjs.org/",
37
37
  "dependencies": {
38
38
  "@oneplatformdev/hooks": "~0.0.1-beta.3",
39
- "@oneplatformdev/utils": "~0.0.2-beta.10"
39
+ "@oneplatformdev/utils": "~0.0.2-beta.19"
40
40
  }
41
41
  },
42
42
  "peerDependency": {
@@ -44,7 +44,7 @@
44
44
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
45
45
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
46
46
  "@oneplatformdev/hooks": "~0.0.1-beta.7",
47
- "@oneplatformdev/utils": "~0.0.2-beta.17",
47
+ "@oneplatformdev/utils": "~0.0.2-beta.19",
48
48
  "lucide-react": "^0.469.0"
49
49
  },
50
50
  "peerDependenciesMeta": {
@@ -58,7 +58,7 @@
58
58
  "dependencies": {
59
59
  "@hookform/resolvers": "^3.9.1",
60
60
  "@oneplatformdev/hooks": "~0.0.1-beta.7",
61
- "@oneplatformdev/utils": "~0.0.2-beta.16",
61
+ "@oneplatformdev/utils": "~0.0.2-beta.19",
62
62
  "@radix-ui/react-accordion": "^1.2.2",
63
63
  "@radix-ui/react-alert-dialog": "^1.1.4",
64
64
  "@radix-ui/react-aspect-ratio": "^1.1.1",