framepexls-ui-lib 0.2.2 → 0.2.4
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.
- package/dist/Dialog.js +17 -3
- package/dist/Dialog.mjs +17 -3
- package/package.json +1 -1
package/dist/Dialog.js
CHANGED
|
@@ -110,8 +110,19 @@ function DialogBase({
|
|
|
110
110
|
const containerRef = (0, import_react.useRef)(null);
|
|
111
111
|
const closeBtnRef = (0, import_react.useRef)(null);
|
|
112
112
|
const lastFocusedRef = (0, import_react.useRef)(null);
|
|
113
|
+
const levelRef = (0, import_react.useRef)(0);
|
|
114
|
+
const [_, force] = import_react.default.useReducer((x) => x + 1, 0);
|
|
113
115
|
useLockBodyScroll(open);
|
|
114
116
|
useEscToClose(open, onClose, disableEscClose);
|
|
117
|
+
(0, import_react.useEffect)(() => {
|
|
118
|
+
if (!open) return;
|
|
119
|
+
window.__fp_dialog_count = (window.__fp_dialog_count || 0) + 1;
|
|
120
|
+
levelRef.current = window.__fp_dialog_count;
|
|
121
|
+
force();
|
|
122
|
+
return () => {
|
|
123
|
+
window.__fp_dialog_count = Math.max(0, (window.__fp_dialog_count || 1) - 1);
|
|
124
|
+
};
|
|
125
|
+
}, [open]);
|
|
115
126
|
(0, import_react.useEffect)(() => {
|
|
116
127
|
var _a, _b, _c;
|
|
117
128
|
if (open) {
|
|
@@ -127,11 +138,13 @@ function DialogBase({
|
|
|
127
138
|
if (!dismissibleBackdrop) return;
|
|
128
139
|
if (e.target === e.currentTarget) onClose();
|
|
129
140
|
};
|
|
141
|
+
const baseZ = 100 + Math.max(0, levelRef.current - 1) * 100;
|
|
130
142
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
131
143
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
132
144
|
import_framer_motion.motion.div,
|
|
133
145
|
{
|
|
134
|
-
className: "fixed inset-0
|
|
146
|
+
className: "fixed inset-0 bg-black/45 backdrop-blur-sm",
|
|
147
|
+
style: { zIndex: baseZ },
|
|
135
148
|
initial: { opacity: 0 },
|
|
136
149
|
animate: { opacity: 1 },
|
|
137
150
|
exit: { opacity: 0 }
|
|
@@ -144,7 +157,8 @@ function DialogBase({
|
|
|
144
157
|
"aria-modal": "true",
|
|
145
158
|
"aria-labelledby": title ? "dialog-title" : void 0,
|
|
146
159
|
"aria-describedby": description ? "dialog-desc" : void 0,
|
|
147
|
-
className: "fixed inset-0
|
|
160
|
+
className: "fixed inset-0 grid place-items-center p-4",
|
|
161
|
+
style: { zIndex: baseZ + 1 },
|
|
148
162
|
initial: { opacity: 0, scale: 0.98, y: 8 },
|
|
149
163
|
animate: { opacity: 1, scale: 1, y: 0 },
|
|
150
164
|
exit: { opacity: 0, scale: 0.98, y: 8 },
|
|
@@ -157,7 +171,7 @@ function DialogBase({
|
|
|
157
171
|
className: cx(
|
|
158
172
|
"w-full overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl",
|
|
159
173
|
"dark:border-white/10 dark:bg-[#0b0a0a]",
|
|
160
|
-
"flex max-h-[88vh] flex-col",
|
|
174
|
+
size === "full" ? "flex h-[calc(100vh-2rem)] flex-col" : "flex max-h-[88vh] flex-col",
|
|
161
175
|
sizeToMaxW[size],
|
|
162
176
|
className
|
|
163
177
|
),
|
package/dist/Dialog.mjs
CHANGED
|
@@ -70,8 +70,19 @@ function DialogBase({
|
|
|
70
70
|
const containerRef = useRef(null);
|
|
71
71
|
const closeBtnRef = useRef(null);
|
|
72
72
|
const lastFocusedRef = useRef(null);
|
|
73
|
+
const levelRef = useRef(0);
|
|
74
|
+
const [_, force] = React.useReducer((x) => x + 1, 0);
|
|
73
75
|
useLockBodyScroll(open);
|
|
74
76
|
useEscToClose(open, onClose, disableEscClose);
|
|
77
|
+
useEffect(() => {
|
|
78
|
+
if (!open) return;
|
|
79
|
+
window.__fp_dialog_count = (window.__fp_dialog_count || 0) + 1;
|
|
80
|
+
levelRef.current = window.__fp_dialog_count;
|
|
81
|
+
force();
|
|
82
|
+
return () => {
|
|
83
|
+
window.__fp_dialog_count = Math.max(0, (window.__fp_dialog_count || 1) - 1);
|
|
84
|
+
};
|
|
85
|
+
}, [open]);
|
|
75
86
|
useEffect(() => {
|
|
76
87
|
var _a, _b, _c;
|
|
77
88
|
if (open) {
|
|
@@ -87,11 +98,13 @@ function DialogBase({
|
|
|
87
98
|
if (!dismissibleBackdrop) return;
|
|
88
99
|
if (e.target === e.currentTarget) onClose();
|
|
89
100
|
};
|
|
101
|
+
const baseZ = 100 + Math.max(0, levelRef.current - 1) * 100;
|
|
90
102
|
return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
91
103
|
/* @__PURE__ */ jsx(
|
|
92
104
|
motion.div,
|
|
93
105
|
{
|
|
94
|
-
className: "fixed inset-0
|
|
106
|
+
className: "fixed inset-0 bg-black/45 backdrop-blur-sm",
|
|
107
|
+
style: { zIndex: baseZ },
|
|
95
108
|
initial: { opacity: 0 },
|
|
96
109
|
animate: { opacity: 1 },
|
|
97
110
|
exit: { opacity: 0 }
|
|
@@ -104,7 +117,8 @@ function DialogBase({
|
|
|
104
117
|
"aria-modal": "true",
|
|
105
118
|
"aria-labelledby": title ? "dialog-title" : void 0,
|
|
106
119
|
"aria-describedby": description ? "dialog-desc" : void 0,
|
|
107
|
-
className: "fixed inset-0
|
|
120
|
+
className: "fixed inset-0 grid place-items-center p-4",
|
|
121
|
+
style: { zIndex: baseZ + 1 },
|
|
108
122
|
initial: { opacity: 0, scale: 0.98, y: 8 },
|
|
109
123
|
animate: { opacity: 1, scale: 1, y: 0 },
|
|
110
124
|
exit: { opacity: 0, scale: 0.98, y: 8 },
|
|
@@ -117,7 +131,7 @@ function DialogBase({
|
|
|
117
131
|
className: cx(
|
|
118
132
|
"w-full overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl",
|
|
119
133
|
"dark:border-white/10 dark:bg-[#0b0a0a]",
|
|
120
|
-
"flex max-h-[88vh] flex-col",
|
|
134
|
+
size === "full" ? "flex h-[calc(100vh-2rem)] flex-col" : "flex max-h-[88vh] flex-col",
|
|
121
135
|
sizeToMaxW[size],
|
|
122
136
|
className
|
|
123
137
|
),
|