@oneplatformdev/ui 0.0.1-beta.142 → 0.0.1-beta.144

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 (3) hide show
  1. package/Dialog/Dialog.mjs +42 -41
  2. package/Popover/Popover.mjs +28 -45
  3. package/package.json +1 -1
package/Dialog/Dialog.mjs CHANGED
@@ -1,14 +1,14 @@
1
1
  import { jsx as o, jsxs as d } from "react/jsx-runtime";
2
- import i, { useState as x, useRef as y } from "react";
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 N } from "lucide-react";
5
- import { cn as l, composeRefs as D } from "@oneplatformdev/utils";
6
- import { DialogOverlayScope as b } from "./DialogOverlayScope.mjs";
7
- const F = e.Root, H = e.Trigger, h = e.Portal, _ = e.Close, c = i.forwardRef(({ className: a, ...t }, 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,
11
- className: l(
10
+ ref: l,
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
13
  a
14
14
  ),
@@ -16,40 +16,40 @@ const F = e.Root, H = e.Trigger, h = e.Portal, _ = e.Close, c = i.forwardRef(({
16
16
  }
17
17
  ));
18
18
  c.displayName = e.Overlay.displayName;
19
- const v = i.forwardRef(
19
+ const w = i.forwardRef(
20
20
  ({
21
21
  className: a,
22
22
  children: t,
23
- showCloseButton: s = !0,
23
+ showCloseButton: l = !0,
24
24
  onOpenAutoFocus: n,
25
25
  preventAutoFocus: f,
26
26
  ...m
27
27
  }, p) => {
28
- const [g, j] = x(null), u = y(null);
29
- return /* @__PURE__ */ d(h, { children: [
28
+ const [g, u] = y(null), x = N(null);
29
+ return /* @__PURE__ */ d(v, { children: [
30
30
  /* @__PURE__ */ o(c, {}),
31
- /* @__PURE__ */ o(b, { value: g, children: /* @__PURE__ */ d(
31
+ /* @__PURE__ */ o(h, { value: g, children: /* @__PURE__ */ d(
32
32
  e.Content,
33
33
  {
34
- ref: (r) => {
35
- r && D(p, u)(r);
34
+ ref: (s) => {
35
+ s && b(p, x)(s);
36
36
  },
37
- className: l(
37
+ className: r(
38
38
  "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",
39
39
  "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",
40
40
  "max-w-[90%] max-h-[90%] overflow-hidden",
41
41
  "bg-[#FCFCFC] border border-[#E8E9EB] rounded-[16px]",
42
42
  a
43
43
  ),
44
- onOpenAutoFocus: (r) => (f && r.preventDefault(), n == null ? void 0 : n(r)),
44
+ onOpenAutoFocus: (s) => (f && s.preventDefault(), n == null ? void 0 : n(s)),
45
45
  ...m,
46
46
  children: [
47
47
  t,
48
- s && /* @__PURE__ */ d(
48
+ l && /* @__PURE__ */ d(
49
49
  e.Close,
50
50
  {
51
51
  "aria-label": "Close",
52
- className: l(
52
+ className: r(
53
53
  "absolute right-4 top-4 rounded-sm ring-offset-background w-10 aspect-square",
54
54
  "flex items-center justify-center",
55
55
  "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
@@ -61,7 +61,7 @@ const v = i.forwardRef(
61
61
  "transition-opacity"
62
62
  ),
63
63
  children: [
64
- /* @__PURE__ */ o(N, { className: "h-4 w-4" }),
64
+ /* @__PURE__ */ o(D, { className: "h-4 w-4" }),
65
65
  /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
66
66
  ]
67
67
  }
@@ -72,72 +72,73 @@ const v = i.forwardRef(
72
72
  /* @__PURE__ */ o(
73
73
  "div",
74
74
  {
75
- ref: (r) => {
75
+ ref: (s) => {
76
+ s && u(s);
76
77
  }
77
78
  }
78
79
  )
79
80
  ] });
80
81
  }
81
82
  );
82
- v.displayName = e.Content.displayName;
83
- const w = ({
83
+ w.displayName = e.Content.displayName;
84
+ const C = ({
84
85
  className: a,
85
86
  ...t
86
87
  }) => /* @__PURE__ */ o(
87
88
  "div",
88
89
  {
89
- className: l(
90
+ className: r(
90
91
  "flex flex-col space-y-1.5 text-center sm:text-left",
91
92
  a
92
93
  ),
93
94
  ...t
94
95
  }
95
96
  );
96
- w.displayName = "DialogHeader";
97
- const C = ({
97
+ C.displayName = "DialogHeader";
98
+ const R = ({
98
99
  className: a,
99
100
  ...t
100
101
  }) => /* @__PURE__ */ o(
101
102
  "div",
102
103
  {
103
- className: l(
104
+ className: r(
104
105
  "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
105
106
  a
106
107
  ),
107
108
  ...t
108
109
  }
109
110
  );
110
- C.displayName = "DialogFooter";
111
- const R = i.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
111
+ R.displayName = "DialogFooter";
112
+ const T = i.forwardRef(({ className: a, ...t }, l) => /* @__PURE__ */ o(
112
113
  e.Title,
113
114
  {
114
- ref: s,
115
- className: l(
115
+ ref: l,
116
+ className: r(
116
117
  "text-lg font-semibold leading-none tracking-tight",
117
118
  a
118
119
  ),
119
120
  ...t
120
121
  }
121
122
  ));
122
- R.displayName = e.Title.displayName;
123
- const T = i.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
123
+ T.displayName = e.Title.displayName;
124
+ const j = i.forwardRef(({ className: a, ...t }, l) => /* @__PURE__ */ o(
124
125
  e.Description,
125
126
  {
126
- ref: s,
127
- className: l("text-sm text-muted-foreground", a),
127
+ ref: l,
128
+ className: r("text-sm text-muted-foreground", a),
128
129
  ...t
129
130
  }
130
131
  ));
131
- T.displayName = e.Description.displayName;
132
+ j.displayName = e.Description.displayName;
132
133
  export {
133
134
  F as Dialog,
134
135
  _ as DialogClose,
135
- v as DialogContent,
136
- T as DialogDescription,
137
- C as DialogFooter,
138
- w as DialogHeader,
136
+ w as DialogContent,
137
+ j as DialogDescription,
138
+ R as DialogFooter,
139
+ C as DialogHeader,
139
140
  c as DialogOverlay,
140
- h as DialogPortal,
141
- R as DialogTitle,
141
+ v as DialogPortal,
142
+ T as DialogTitle,
142
143
  H as DialogTrigger
143
144
  };
package/Popover/Popover.mjs CHANGED
@@ -1,59 +1,42 @@
1
- import { jsx as d } from "react/jsx-runtime";
2
- import * as c from "react";
3
- import { useLayoutEffect as l } from "react";
4
- import * as e from "@radix-ui/react-popover";
5
- import { cn as u } from "@oneplatformdev/utils";
6
- import { useDialogOverlayContainer as f } from "../Dialog/DialogOverlayScope.mjs";
7
- const y = (n) => {
8
- const { onOpenChange: m, modal: t, ...i } = n;
9
- return l(() => {
10
- if (!t)
11
- return;
12
- const o = ["wheel", "scroll", "touchmove"], r = () => {
13
- o.forEach(
14
- (s) => window.addEventListener(s, (p) => p.stopImmediatePropagation(), { capture: !0, passive: !1 })
15
- );
16
- };
17
- r();
18
- const a = new MutationObserver(r);
19
- return a.observe(document.body, { attributes: !0, attributeFilter: ["data-scroll-locked"] }), () => a.disconnect();
20
- }, [t]), /* @__PURE__ */ d(
21
- e.Root,
1
+ import { jsx as r } from "react/jsx-runtime";
2
+ import * as p from "react";
3
+ import * as o from "@radix-ui/react-popover";
4
+ import { cn as l } from "@oneplatformdev/utils";
5
+ import { useDialogOverlayContainer as c } from "../Dialog/DialogOverlayScope.mjs";
6
+ const P = (t) => {
7
+ const { modal: e = !1, ...a } = t;
8
+ return /* @__PURE__ */ r(
9
+ o.Root,
22
10
  {
23
- onOpenChange: (o) => {
24
- o && !t && requestAnimationFrame(() => {
25
- document.body.style.setProperty("pointer-events", "initial", "important");
26
- });
27
- },
28
- modal: t,
29
- ...i
11
+ modal: e,
12
+ ...a
30
13
  }
31
14
  );
32
- }, w = e.Trigger, C = e.Anchor, v = c.forwardRef(({ className: n, align: m = "center", sideOffset: t = 4, style: i, avoidCollisions: o = !0, ...r }, a) => {
33
- const s = f();
34
- return /* @__PURE__ */ d(e.Portal, { container: s, children: /* @__PURE__ */ d(
35
- e.Content,
15
+ }, h = o.Trigger, b = o.Anchor, f = p.forwardRef(({ className: t, align: e = "center", sideOffset: a = 4, style: n, avoidCollisions: i = !0, ...s }, d) => {
16
+ const m = c();
17
+ return /* @__PURE__ */ r(o.Portal, { container: m, children: /* @__PURE__ */ r(
18
+ o.Content,
36
19
  {
37
- ref: a,
38
- align: m,
39
- sideOffset: t,
40
- className: u(
20
+ ref: d,
21
+ align: e,
22
+ sideOffset: a,
23
+ className: l(
41
24
  "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",
42
- n
25
+ t
43
26
  ),
44
27
  style: {
45
28
  pointerEvents: "auto",
46
- ...i
29
+ ...n
47
30
  },
48
- ...r,
49
- avoidCollisions: o
31
+ ...s,
32
+ avoidCollisions: i
50
33
  }
51
34
  ) });
52
35
  });
53
- v.displayName = e.Content.displayName;
36
+ f.displayName = o.Content.displayName;
54
37
  export {
55
- y as Popover,
56
- C as PopoverAnchor,
57
- v as PopoverContent,
58
- w as PopoverTrigger
38
+ P as Popover,
39
+ b as PopoverAnchor,
40
+ f as PopoverContent,
41
+ h as PopoverTrigger
59
42
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oneplatformdev/ui",
3
- "version": "0.0.1-beta.142",
3
+ "version": "0.0.1-beta.144",
4
4
  "description": "UI React Components.",
5
5
  "author": "One Platform Development Team",
6
6
  "keywords": [