framepexls-ui-lib 0.2.3 → 0.2.5

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/dist/Dialog.js +17 -3
  2. package/dist/Dialog.mjs +17 -3
  3. package/package.json +1 -1
package/dist/Dialog.js CHANGED
@@ -53,7 +53,7 @@ const sizeToMaxW = {
53
53
  "3xl": "max-w-3xl",
54
54
  "4xl": "max-w-4xl",
55
55
  "5xl": "max-w-5xl",
56
- full: "max-w-[min(96vw,1200px)]"
56
+ full: "max-w-[calc(100vw-2rem)]"
57
57
  };
58
58
  function useLockBodyScroll(open) {
59
59
  (0, import_react.useEffect)(() => {
@@ -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 z-[100] bg-black/45 backdrop-blur-sm",
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 z-[101] grid place-items-center p-4",
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 },
package/dist/Dialog.mjs CHANGED
@@ -13,7 +13,7 @@ const sizeToMaxW = {
13
13
  "3xl": "max-w-3xl",
14
14
  "4xl": "max-w-4xl",
15
15
  "5xl": "max-w-5xl",
16
- full: "max-w-[min(96vw,1200px)]"
16
+ full: "max-w-[calc(100vw-2rem)]"
17
17
  };
18
18
  function useLockBodyScroll(open) {
19
19
  useEffect(() => {
@@ -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 z-[100] bg-black/45 backdrop-blur-sm",
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 z-[101] grid place-items-center p-4",
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 },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "0.2.3",
3
+ "version": "0.2.5",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",