framepexls-ui-lib 0.3.9 → 0.3.11

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 (9) hide show
  1. package/dist/Dialog.js +36 -14
  2. package/dist/Dialog.mjs +36 -14
  3. package/dist/Drawer.js +33 -3
  4. package/dist/Drawer.mjs +33 -3
  5. package/dist/FiltersMultiSelect.js +1 -1
  6. package/dist/FiltersMultiSelect.mjs +1 -1
  7. package/dist/Sidebar.js +33 -3
  8. package/dist/Sidebar.mjs +33 -3
  9. package/package.json +1 -1
package/dist/Dialog.js CHANGED
@@ -58,24 +58,46 @@ const sizeToMaxW = {
58
58
  function useLockBodyScroll(open) {
59
59
  (0, import_react.useEffect)(() => {
60
60
  if (!open) return;
61
+ const w = window;
61
62
  const root = document.documentElement;
62
63
  const body = document.body;
63
- const prevOverflowRoot = root.style.overflow;
64
- const prevOverflowBody = body.style.overflow;
65
- const prevPadRightRoot = root.style.paddingRight;
66
- const prevPadRightBody = body.style.paddingRight;
67
- const scrollbarW = window.innerWidth - root.clientWidth;
68
- root.style.overflow = "hidden";
69
- body.style.overflow = body.style.overflow || "";
70
- if (scrollbarW > 0) {
71
- root.style.paddingRight = `${scrollbarW}px`;
72
- body.style.paddingRight = `${scrollbarW}px`;
64
+ if (!w.__fx_scroll_lock) {
65
+ w.__fx_scroll_lock = {
66
+ count: 0,
67
+ prev: {
68
+ rootOverflow: root.style.overflow,
69
+ bodyOverflow: body.style.overflow,
70
+ rootPad: root.style.paddingRight,
71
+ bodyPad: body.style.paddingRight
72
+ }
73
+ };
74
+ }
75
+ w.__fx_scroll_lock.count++;
76
+ if (w.__fx_scroll_lock.count === 1) {
77
+ const scrollbarW = window.innerWidth - root.clientWidth;
78
+ w.__fx_scroll_lock.prev = {
79
+ rootOverflow: root.style.overflow,
80
+ bodyOverflow: body.style.overflow,
81
+ rootPad: root.style.paddingRight,
82
+ bodyPad: body.style.paddingRight
83
+ };
84
+ root.style.overflow = "hidden";
85
+ if (scrollbarW > 0) {
86
+ root.style.paddingRight = `${scrollbarW}px`;
87
+ body.style.paddingRight = `${scrollbarW}px`;
88
+ }
73
89
  }
74
90
  return () => {
75
- root.style.overflow = prevOverflowRoot;
76
- body.style.overflow = prevOverflowBody;
77
- root.style.paddingRight = prevPadRightRoot;
78
- body.style.paddingRight = prevPadRightBody;
91
+ const st = w.__fx_scroll_lock;
92
+ if (!st) return;
93
+ st.count = Math.max(0, st.count - 1);
94
+ if (st.count === 0) {
95
+ root.style.overflow = st.prev.rootOverflow;
96
+ body.style.overflow = st.prev.bodyOverflow;
97
+ root.style.paddingRight = st.prev.rootPad;
98
+ body.style.paddingRight = st.prev.bodyPad;
99
+ w.__fx_scroll_lock = null;
100
+ }
79
101
  };
80
102
  }, [open]);
81
103
  }
package/dist/Dialog.mjs CHANGED
@@ -18,24 +18,46 @@ const sizeToMaxW = {
18
18
  function useLockBodyScroll(open) {
19
19
  useEffect(() => {
20
20
  if (!open) return;
21
+ const w = window;
21
22
  const root = document.documentElement;
22
23
  const body = document.body;
23
- const prevOverflowRoot = root.style.overflow;
24
- const prevOverflowBody = body.style.overflow;
25
- const prevPadRightRoot = root.style.paddingRight;
26
- const prevPadRightBody = body.style.paddingRight;
27
- const scrollbarW = window.innerWidth - root.clientWidth;
28
- root.style.overflow = "hidden";
29
- body.style.overflow = body.style.overflow || "";
30
- if (scrollbarW > 0) {
31
- root.style.paddingRight = `${scrollbarW}px`;
32
- body.style.paddingRight = `${scrollbarW}px`;
24
+ if (!w.__fx_scroll_lock) {
25
+ w.__fx_scroll_lock = {
26
+ count: 0,
27
+ prev: {
28
+ rootOverflow: root.style.overflow,
29
+ bodyOverflow: body.style.overflow,
30
+ rootPad: root.style.paddingRight,
31
+ bodyPad: body.style.paddingRight
32
+ }
33
+ };
34
+ }
35
+ w.__fx_scroll_lock.count++;
36
+ if (w.__fx_scroll_lock.count === 1) {
37
+ const scrollbarW = window.innerWidth - root.clientWidth;
38
+ w.__fx_scroll_lock.prev = {
39
+ rootOverflow: root.style.overflow,
40
+ bodyOverflow: body.style.overflow,
41
+ rootPad: root.style.paddingRight,
42
+ bodyPad: body.style.paddingRight
43
+ };
44
+ root.style.overflow = "hidden";
45
+ if (scrollbarW > 0) {
46
+ root.style.paddingRight = `${scrollbarW}px`;
47
+ body.style.paddingRight = `${scrollbarW}px`;
48
+ }
33
49
  }
34
50
  return () => {
35
- root.style.overflow = prevOverflowRoot;
36
- body.style.overflow = prevOverflowBody;
37
- root.style.paddingRight = prevPadRightRoot;
38
- body.style.paddingRight = prevPadRightBody;
51
+ const st = w.__fx_scroll_lock;
52
+ if (!st) return;
53
+ st.count = Math.max(0, st.count - 1);
54
+ if (st.count === 0) {
55
+ root.style.overflow = st.prev.rootOverflow;
56
+ body.style.overflow = st.prev.bodyOverflow;
57
+ root.style.paddingRight = st.prev.rootPad;
58
+ body.style.paddingRight = st.prev.bodyPad;
59
+ w.__fx_scroll_lock = null;
60
+ }
39
61
  };
40
62
  }, [open]);
41
63
  }
package/dist/Drawer.js CHANGED
@@ -54,10 +54,40 @@ function Root({
54
54
  className
55
55
  }) {
56
56
  import_react.default.useEffect(() => {
57
- if (open) document.body.style.overflow = "hidden";
58
- else document.body.style.overflow = "";
57
+ const w = window;
58
+ const acquire = () => {
59
+ const root = document.documentElement;
60
+ const body = document.body;
61
+ if (!w.__fx_scroll_lock) {
62
+ w.__fx_scroll_lock = { count: 0, prev: { rootOverflow: root.style.overflow, bodyOverflow: body.style.overflow, rootPad: root.style.paddingRight, bodyPad: body.style.paddingRight } };
63
+ }
64
+ w.__fx_scroll_lock.count++;
65
+ if (w.__fx_scroll_lock.count === 1) {
66
+ const scrollbarW = window.innerWidth - root.clientWidth;
67
+ w.__fx_scroll_lock.prev = { rootOverflow: root.style.overflow, bodyOverflow: body.style.overflow, rootPad: root.style.paddingRight, bodyPad: body.style.paddingRight };
68
+ root.style.overflow = "hidden";
69
+ if (scrollbarW > 0) {
70
+ root.style.paddingRight = `${scrollbarW}px`;
71
+ body.style.paddingRight = `${scrollbarW}px`;
72
+ }
73
+ }
74
+ return () => {
75
+ const st = w.__fx_scroll_lock;
76
+ if (!st) return;
77
+ st.count = Math.max(0, st.count - 1);
78
+ if (st.count === 0) {
79
+ root.style.overflow = st.prev.rootOverflow;
80
+ body.style.overflow = st.prev.bodyOverflow;
81
+ root.style.paddingRight = st.prev.rootPad;
82
+ body.style.paddingRight = st.prev.bodyPad;
83
+ w.__fx_scroll_lock = null;
84
+ }
85
+ };
86
+ };
87
+ let release = null;
88
+ if (open) release = acquire();
59
89
  return () => {
60
- document.body.style.overflow = "";
90
+ if (release) release();
61
91
  };
62
92
  }, [open]);
63
93
  import_react.default.useEffect(() => {
package/dist/Drawer.mjs CHANGED
@@ -17,10 +17,40 @@ function Root({
17
17
  className
18
18
  }) {
19
19
  React.useEffect(() => {
20
- if (open) document.body.style.overflow = "hidden";
21
- else document.body.style.overflow = "";
20
+ const w = window;
21
+ const acquire = () => {
22
+ const root = document.documentElement;
23
+ const body = document.body;
24
+ if (!w.__fx_scroll_lock) {
25
+ w.__fx_scroll_lock = { count: 0, prev: { rootOverflow: root.style.overflow, bodyOverflow: body.style.overflow, rootPad: root.style.paddingRight, bodyPad: body.style.paddingRight } };
26
+ }
27
+ w.__fx_scroll_lock.count++;
28
+ if (w.__fx_scroll_lock.count === 1) {
29
+ const scrollbarW = window.innerWidth - root.clientWidth;
30
+ w.__fx_scroll_lock.prev = { rootOverflow: root.style.overflow, bodyOverflow: body.style.overflow, rootPad: root.style.paddingRight, bodyPad: body.style.paddingRight };
31
+ root.style.overflow = "hidden";
32
+ if (scrollbarW > 0) {
33
+ root.style.paddingRight = `${scrollbarW}px`;
34
+ body.style.paddingRight = `${scrollbarW}px`;
35
+ }
36
+ }
37
+ return () => {
38
+ const st = w.__fx_scroll_lock;
39
+ if (!st) return;
40
+ st.count = Math.max(0, st.count - 1);
41
+ if (st.count === 0) {
42
+ root.style.overflow = st.prev.rootOverflow;
43
+ body.style.overflow = st.prev.bodyOverflow;
44
+ root.style.paddingRight = st.prev.rootPad;
45
+ body.style.paddingRight = st.prev.bodyPad;
46
+ w.__fx_scroll_lock = null;
47
+ }
48
+ };
49
+ };
50
+ let release = null;
51
+ if (open) release = acquire();
22
52
  return () => {
23
- document.body.style.overflow = "";
53
+ if (release) release();
24
54
  };
25
55
  }, [open]);
26
56
  React.useEffect(() => {
package/dist/FiltersMultiSelect.js CHANGED
@@ -93,7 +93,7 @@ function FiltersMultiSelect({
93
93
  className: clsx(
94
94
  "relative inline-flex items-center gap-2 min-h-[44px] rounded-2xl border border-slate-200 bg-white px-3 pr-9 text-sm text-slate-900 shadow-sm outline-none transition",
95
95
  "hover:bg-white focus:ring-4 focus:ring-slate-900/5 focus:border-slate-300",
96
- "dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-100 dark:focus:ring-white/10"
96
+ "dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-100 dark:hover:bg-white/10 dark:focus:ring-white/10"
97
97
  ),
98
98
  children: [
99
99
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: triggerLabel }),
package/dist/FiltersMultiSelect.mjs CHANGED
@@ -60,7 +60,7 @@ function FiltersMultiSelect({
60
60
  className: clsx(
61
61
  "relative inline-flex items-center gap-2 min-h-[44px] rounded-2xl border border-slate-200 bg-white px-3 pr-9 text-sm text-slate-900 shadow-sm outline-none transition",
62
62
  "hover:bg-white focus:ring-4 focus:ring-slate-900/5 focus:border-slate-300",
63
- "dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-100 dark:focus:ring-white/10"
63
+ "dark:border-white/10 dark:bg-[var(--fx-surface)] dark:text-slate-100 dark:hover:bg-white/10 dark:focus:ring-white/10"
64
64
  ),
65
65
  children: [
66
66
  /* @__PURE__ */ jsx("span", { children: triggerLabel }),
package/dist/Sidebar.js CHANGED
@@ -188,10 +188,40 @@ function Sidebar({
188
188
  });
189
189
  };
190
190
  (0, import_react.useEffect)(() => {
191
- if (drawerOpen) document.body.style.overflow = "hidden";
192
- else document.body.style.overflow = "";
191
+ const w = window;
192
+ const acquire = () => {
193
+ const root = document.documentElement;
194
+ const body = document.body;
195
+ if (!w.__fx_scroll_lock) {
196
+ w.__fx_scroll_lock = { count: 0, prev: { rootOverflow: root.style.overflow, bodyOverflow: body.style.overflow, rootPad: root.style.paddingRight, bodyPad: body.style.paddingRight } };
197
+ }
198
+ w.__fx_scroll_lock.count++;
199
+ if (w.__fx_scroll_lock.count === 1) {
200
+ const scrollbarW = window.innerWidth - root.clientWidth;
201
+ w.__fx_scroll_lock.prev = { rootOverflow: root.style.overflow, bodyOverflow: body.style.overflow, rootPad: root.style.paddingRight, bodyPad: body.style.paddingRight };
202
+ root.style.overflow = "hidden";
203
+ if (scrollbarW > 0) {
204
+ root.style.paddingRight = `${scrollbarW}px`;
205
+ body.style.paddingRight = `${scrollbarW}px`;
206
+ }
207
+ }
208
+ return () => {
209
+ const st = w.__fx_scroll_lock;
210
+ if (!st) return;
211
+ st.count = Math.max(0, st.count - 1);
212
+ if (st.count === 0) {
213
+ root.style.overflow = st.prev.rootOverflow;
214
+ body.style.overflow = st.prev.bodyOverflow;
215
+ root.style.paddingRight = st.prev.rootPad;
216
+ body.style.paddingRight = st.prev.bodyPad;
217
+ w.__fx_scroll_lock = null;
218
+ }
219
+ };
220
+ };
221
+ let release = null;
222
+ if (drawerOpen) release = acquire();
193
223
  return () => {
194
- document.body.style.overflow = "";
224
+ if (release) release();
195
225
  };
196
226
  }, [drawerOpen]);
197
227
  const groups = (0, import_react.useMemo)(() => groupItems(items), [items]);
package/dist/Sidebar.mjs CHANGED
@@ -155,10 +155,40 @@ function Sidebar({
155
155
  });
156
156
  };
157
157
  useEffect(() => {
158
- if (drawerOpen) document.body.style.overflow = "hidden";
159
- else document.body.style.overflow = "";
158
+ const w = window;
159
+ const acquire = () => {
160
+ const root = document.documentElement;
161
+ const body = document.body;
162
+ if (!w.__fx_scroll_lock) {
163
+ w.__fx_scroll_lock = { count: 0, prev: { rootOverflow: root.style.overflow, bodyOverflow: body.style.overflow, rootPad: root.style.paddingRight, bodyPad: body.style.paddingRight } };
164
+ }
165
+ w.__fx_scroll_lock.count++;
166
+ if (w.__fx_scroll_lock.count === 1) {
167
+ const scrollbarW = window.innerWidth - root.clientWidth;
168
+ w.__fx_scroll_lock.prev = { rootOverflow: root.style.overflow, bodyOverflow: body.style.overflow, rootPad: root.style.paddingRight, bodyPad: body.style.paddingRight };
169
+ root.style.overflow = "hidden";
170
+ if (scrollbarW > 0) {
171
+ root.style.paddingRight = `${scrollbarW}px`;
172
+ body.style.paddingRight = `${scrollbarW}px`;
173
+ }
174
+ }
175
+ return () => {
176
+ const st = w.__fx_scroll_lock;
177
+ if (!st) return;
178
+ st.count = Math.max(0, st.count - 1);
179
+ if (st.count === 0) {
180
+ root.style.overflow = st.prev.rootOverflow;
181
+ body.style.overflow = st.prev.bodyOverflow;
182
+ root.style.paddingRight = st.prev.rootPad;
183
+ body.style.paddingRight = st.prev.bodyPad;
184
+ w.__fx_scroll_lock = null;
185
+ }
186
+ };
187
+ };
188
+ let release = null;
189
+ if (drawerOpen) release = acquire();
160
190
  return () => {
161
- document.body.style.overflow = "";
191
+ if (release) release();
162
192
  };
163
193
  }, [drawerOpen]);
164
194
  const groups = useMemo(() => groupItems(items), [items]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "0.3.9",
3
+ "version": "0.3.11",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",