@diwauhris/ui 1.7.12 → 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/assets/ui.css +1 -1
- package/lib/index.cjs +26 -7
- package/lib/index.mjs +26 -7
- package/package.json +1 -1
package/lib/assets/ui.css
CHANGED
|
@@ -4411,7 +4411,7 @@ body {
|
|
|
4411
4411
|
/* ── Date Picker (react-calendar DIWA theme) ─────────────────────────────── */
|
|
4412
4412
|
.pis-datepicker-popover {
|
|
4413
4413
|
position: absolute;
|
|
4414
|
-
z-index:
|
|
4414
|
+
z-index: 1050;
|
|
4415
4415
|
margin-top: 6px;
|
|
4416
4416
|
background: #fff;
|
|
4417
4417
|
border: 1px solid #dde3ec;
|
package/lib/index.cjs
CHANGED
|
@@ -1434,21 +1434,40 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1434
1434
|
}, []);
|
|
1435
1435
|
(0, react.useEffect)(() => {
|
|
1436
1436
|
if (!isOpen) return;
|
|
1437
|
-
function
|
|
1438
|
-
|
|
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);
|
|
1439
1442
|
}
|
|
1440
|
-
|
|
1441
|
-
|
|
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
|
+
});
|
|
1442
1456
|
return () => {
|
|
1443
|
-
|
|
1444
|
-
|
|
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);
|
|
1445
1463
|
};
|
|
1446
1464
|
}, [isOpen]);
|
|
1447
1465
|
(0, react.useEffect)(() => {
|
|
1448
1466
|
if (!isOpen) return;
|
|
1449
1467
|
function handleFocusOut(e) {
|
|
1450
1468
|
if (!e.relatedTarget) return;
|
|
1451
|
-
|
|
1469
|
+
const target = e.relatedTarget;
|
|
1470
|
+
if (wrapperRef.current && !wrapperRef.current.contains(target) && popoverRef.current && !popoverRef.current.contains(target)) setIsOpen(false);
|
|
1452
1471
|
}
|
|
1453
1472
|
const wrapper = wrapperRef.current;
|
|
1454
1473
|
wrapper?.addEventListener("focusout", handleFocusOut);
|
package/lib/index.mjs
CHANGED
|
@@ -1410,21 +1410,40 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
|
|
|
1410
1410
|
}, []);
|
|
1411
1411
|
useEffect(() => {
|
|
1412
1412
|
if (!isOpen) return;
|
|
1413
|
-
function
|
|
1414
|
-
|
|
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);
|
|
1415
1418
|
}
|
|
1416
|
-
|
|
1417
|
-
|
|
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
|
+
});
|
|
1418
1432
|
return () => {
|
|
1419
|
-
|
|
1420
|
-
|
|
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);
|
|
1421
1439
|
};
|
|
1422
1440
|
}, [isOpen]);
|
|
1423
1441
|
useEffect(() => {
|
|
1424
1442
|
if (!isOpen) return;
|
|
1425
1443
|
function handleFocusOut(e) {
|
|
1426
1444
|
if (!e.relatedTarget) return;
|
|
1427
|
-
|
|
1445
|
+
const target = e.relatedTarget;
|
|
1446
|
+
if (wrapperRef.current && !wrapperRef.current.contains(target) && popoverRef.current && !popoverRef.current.contains(target)) setIsOpen(false);
|
|
1428
1447
|
}
|
|
1429
1448
|
const wrapper = wrapperRef.current;
|
|
1430
1449
|
wrapper?.addEventListener("focusout", handleFocusOut);
|