@diwauhris/ui 1.7.13 → 1.7.14
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/lib/index.cjs +24 -10
- package/lib/index.mjs +24 -10
- package/package.json +1 -1
package/lib/index.cjs
CHANGED
|
@@ -1434,18 +1434,32 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1434
1434
|
}, []);
|
|
1435
1435
|
(0, react.useEffect)(() => {
|
|
1436
1436
|
if (!isOpen) return;
|
|
1437
|
-
function
|
|
1438
|
-
if (
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
setIsOpen(false);
|
|
1437
|
+
function getScrollParent(el) {
|
|
1438
|
+
if (!el || el === document.body) return null;
|
|
1439
|
+
const style = getComputedStyle(el);
|
|
1440
|
+
if (["auto", "scroll"].includes(style.overflowY) || ["auto", "scroll"].includes(style.overflow)) return el;
|
|
1441
|
+
return getScrollParent(el.parentElement);
|
|
1443
1442
|
}
|
|
1444
|
-
|
|
1445
|
-
|
|
1443
|
+
const scrollParent = getScrollParent(wrapperRef.current?.parentElement ?? null);
|
|
1444
|
+
let scrollHandler = null;
|
|
1445
|
+
let resizeHandler = null;
|
|
1446
|
+
const frameId = requestAnimationFrame(() => {
|
|
1447
|
+
scrollHandler = () => setIsOpen(false);
|
|
1448
|
+
resizeHandler = () => setIsOpen(false);
|
|
1449
|
+
if (scrollParent) scrollParent.addEventListener("scroll", scrollHandler, { passive: true });
|
|
1450
|
+
window.addEventListener("scroll", scrollHandler, {
|
|
1451
|
+
capture: true,
|
|
1452
|
+
passive: true
|
|
1453
|
+
});
|
|
1454
|
+
window.addEventListener("resize", resizeHandler);
|
|
1455
|
+
});
|
|
1446
1456
|
return () => {
|
|
1447
|
-
|
|
1448
|
-
|
|
1457
|
+
cancelAnimationFrame(frameId);
|
|
1458
|
+
if (scrollHandler) {
|
|
1459
|
+
if (scrollParent) scrollParent.removeEventListener("scroll", scrollHandler);
|
|
1460
|
+
window.removeEventListener("scroll", scrollHandler, { capture: true });
|
|
1461
|
+
}
|
|
1462
|
+
if (resizeHandler) window.removeEventListener("resize", resizeHandler);
|
|
1449
1463
|
};
|
|
1450
1464
|
}, [isOpen]);
|
|
1451
1465
|
(0, react.useEffect)(() => {
|
package/lib/index.mjs
CHANGED
|
@@ -1410,18 +1410,32 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1410
1410
|
}, []);
|
|
1411
1411
|
useEffect(() => {
|
|
1412
1412
|
if (!isOpen) return;
|
|
1413
|
-
function
|
|
1414
|
-
if (
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
setIsOpen(false);
|
|
1413
|
+
function getScrollParent(el) {
|
|
1414
|
+
if (!el || el === document.body) return null;
|
|
1415
|
+
const style = getComputedStyle(el);
|
|
1416
|
+
if (["auto", "scroll"].includes(style.overflowY) || ["auto", "scroll"].includes(style.overflow)) return el;
|
|
1417
|
+
return getScrollParent(el.parentElement);
|
|
1419
1418
|
}
|
|
1420
|
-
|
|
1421
|
-
|
|
1419
|
+
const scrollParent = getScrollParent(wrapperRef.current?.parentElement ?? null);
|
|
1420
|
+
let scrollHandler = null;
|
|
1421
|
+
let resizeHandler = null;
|
|
1422
|
+
const frameId = requestAnimationFrame(() => {
|
|
1423
|
+
scrollHandler = () => setIsOpen(false);
|
|
1424
|
+
resizeHandler = () => setIsOpen(false);
|
|
1425
|
+
if (scrollParent) scrollParent.addEventListener("scroll", scrollHandler, { passive: true });
|
|
1426
|
+
window.addEventListener("scroll", scrollHandler, {
|
|
1427
|
+
capture: true,
|
|
1428
|
+
passive: true
|
|
1429
|
+
});
|
|
1430
|
+
window.addEventListener("resize", resizeHandler);
|
|
1431
|
+
});
|
|
1422
1432
|
return () => {
|
|
1423
|
-
|
|
1424
|
-
|
|
1433
|
+
cancelAnimationFrame(frameId);
|
|
1434
|
+
if (scrollHandler) {
|
|
1435
|
+
if (scrollParent) scrollParent.removeEventListener("scroll", scrollHandler);
|
|
1436
|
+
window.removeEventListener("scroll", scrollHandler, { capture: true });
|
|
1437
|
+
}
|
|
1438
|
+
if (resizeHandler) window.removeEventListener("resize", resizeHandler);
|
|
1425
1439
|
};
|
|
1426
1440
|
}, [isOpen]);
|
|
1427
1441
|
useEffect(() => {
|