@diwauhris/ui 1.7.13 → 1.7.15

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/lib/index.cjs +40 -23
  2. package/lib/index.mjs +40 -23
  3. package/package.json +1 -1
package/lib/index.cjs CHANGED
@@ -1410,19 +1410,22 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
1410
1410
  skipNextOpen.current = false;
1411
1411
  return;
1412
1412
  }
1413
- const rect = wrapperRef.current.getBoundingClientRect();
1414
- const spaceBelow = window.innerHeight - rect.bottom;
1415
- const spaceAbove = rect.top;
1416
- const isNarrow = window.innerWidth < 368;
1417
- const style = {
1418
- position: "fixed",
1419
- left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
1420
- width: isNarrow ? `calc(100vw - 16px)` : void 0
1421
- };
1422
- if (spaceBelow >= CALENDAR_HEIGHT || spaceBelow >= spaceAbove) style.top = rect.bottom + 6;
1423
- else style.top = rect.top - CALENDAR_HEIGHT - 6;
1424
- setPopupStyle(style);
1425
- setIsOpen(true);
1413
+ requestAnimationFrame(() => {
1414
+ if (!wrapperRef.current) return;
1415
+ const rect = wrapperRef.current.getBoundingClientRect();
1416
+ const spaceBelow = window.innerHeight - rect.bottom;
1417
+ const spaceAbove = rect.top;
1418
+ const isNarrow = window.innerWidth < 368;
1419
+ const style = {
1420
+ position: "fixed",
1421
+ left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
1422
+ width: isNarrow ? `calc(100vw - 16px)` : void 0
1423
+ };
1424
+ if (spaceBelow >= CALENDAR_HEIGHT || spaceBelow >= spaceAbove) style.top = rect.bottom + 6;
1425
+ else style.top = Math.max(8, rect.top - CALENDAR_HEIGHT - 6);
1426
+ setPopupStyle(style);
1427
+ setIsOpen(true);
1428
+ });
1426
1429
  }, [disabled]);
1427
1430
  (0, react.useEffect)(() => {
1428
1431
  function handleClickOutside(e) {
@@ -1434,18 +1437,32 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
1434
1437
  }, []);
1435
1438
  (0, react.useEffect)(() => {
1436
1439
  if (!isOpen) return;
1437
- function handleScroll(e) {
1438
- if (wrapperRef.current && wrapperRef.current.contains(e.target)) return;
1439
- setIsOpen(false);
1440
- }
1441
- function handleResize() {
1442
- setIsOpen(false);
1440
+ function getScrollParent(el) {
1441
+ if (!el || el === document.body) return null;
1442
+ const style = getComputedStyle(el);
1443
+ if (["auto", "scroll"].includes(style.overflowY) || ["auto", "scroll"].includes(style.overflow)) return el;
1444
+ return getScrollParent(el.parentElement);
1443
1445
  }
1444
- window.addEventListener("scroll", handleScroll, { capture: true });
1445
- window.addEventListener("resize", handleResize);
1446
+ const scrollParent = getScrollParent(wrapperRef.current?.parentElement ?? null);
1447
+ let scrollHandler = null;
1448
+ let resizeHandler = null;
1449
+ const frameId = requestAnimationFrame(() => {
1450
+ scrollHandler = () => setIsOpen(false);
1451
+ resizeHandler = () => setIsOpen(false);
1452
+ if (scrollParent) scrollParent.addEventListener("scroll", scrollHandler, { passive: true });
1453
+ window.addEventListener("scroll", scrollHandler, {
1454
+ capture: true,
1455
+ passive: true
1456
+ });
1457
+ window.addEventListener("resize", resizeHandler);
1458
+ });
1446
1459
  return () => {
1447
- window.removeEventListener("scroll", handleScroll, { capture: true });
1448
- window.removeEventListener("resize", handleResize);
1460
+ cancelAnimationFrame(frameId);
1461
+ if (scrollHandler) {
1462
+ if (scrollParent) scrollParent.removeEventListener("scroll", scrollHandler);
1463
+ window.removeEventListener("scroll", scrollHandler, { capture: true });
1464
+ }
1465
+ if (resizeHandler) window.removeEventListener("resize", resizeHandler);
1449
1466
  };
1450
1467
  }, [isOpen]);
1451
1468
  (0, react.useEffect)(() => {
package/lib/index.mjs CHANGED
@@ -1386,19 +1386,22 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
1386
1386
  skipNextOpen.current = false;
1387
1387
  return;
1388
1388
  }
1389
- const rect = wrapperRef.current.getBoundingClientRect();
1390
- const spaceBelow = window.innerHeight - rect.bottom;
1391
- const spaceAbove = rect.top;
1392
- const isNarrow = window.innerWidth < 368;
1393
- const style = {
1394
- position: "fixed",
1395
- left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
1396
- width: isNarrow ? `calc(100vw - 16px)` : void 0
1397
- };
1398
- if (spaceBelow >= CALENDAR_HEIGHT || spaceBelow >= spaceAbove) style.top = rect.bottom + 6;
1399
- else style.top = rect.top - CALENDAR_HEIGHT - 6;
1400
- setPopupStyle(style);
1401
- setIsOpen(true);
1389
+ requestAnimationFrame(() => {
1390
+ if (!wrapperRef.current) return;
1391
+ const rect = wrapperRef.current.getBoundingClientRect();
1392
+ const spaceBelow = window.innerHeight - rect.bottom;
1393
+ const spaceAbove = rect.top;
1394
+ const isNarrow = window.innerWidth < 368;
1395
+ const style = {
1396
+ position: "fixed",
1397
+ left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
1398
+ width: isNarrow ? `calc(100vw - 16px)` : void 0
1399
+ };
1400
+ if (spaceBelow >= CALENDAR_HEIGHT || spaceBelow >= spaceAbove) style.top = rect.bottom + 6;
1401
+ else style.top = Math.max(8, rect.top - CALENDAR_HEIGHT - 6);
1402
+ setPopupStyle(style);
1403
+ setIsOpen(true);
1404
+ });
1402
1405
  }, [disabled]);
1403
1406
  useEffect(() => {
1404
1407
  function handleClickOutside(e) {
@@ -1410,18 +1413,32 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
1410
1413
  }, []);
1411
1414
  useEffect(() => {
1412
1415
  if (!isOpen) return;
1413
- function handleScroll(e) {
1414
- if (wrapperRef.current && wrapperRef.current.contains(e.target)) return;
1415
- setIsOpen(false);
1416
- }
1417
- function handleResize() {
1418
- setIsOpen(false);
1416
+ function getScrollParent(el) {
1417
+ if (!el || el === document.body) return null;
1418
+ const style = getComputedStyle(el);
1419
+ if (["auto", "scroll"].includes(style.overflowY) || ["auto", "scroll"].includes(style.overflow)) return el;
1420
+ return getScrollParent(el.parentElement);
1419
1421
  }
1420
- window.addEventListener("scroll", handleScroll, { capture: true });
1421
- window.addEventListener("resize", handleResize);
1422
+ const scrollParent = getScrollParent(wrapperRef.current?.parentElement ?? null);
1423
+ let scrollHandler = null;
1424
+ let resizeHandler = null;
1425
+ const frameId = requestAnimationFrame(() => {
1426
+ scrollHandler = () => setIsOpen(false);
1427
+ resizeHandler = () => setIsOpen(false);
1428
+ if (scrollParent) scrollParent.addEventListener("scroll", scrollHandler, { passive: true });
1429
+ window.addEventListener("scroll", scrollHandler, {
1430
+ capture: true,
1431
+ passive: true
1432
+ });
1433
+ window.addEventListener("resize", resizeHandler);
1434
+ });
1422
1435
  return () => {
1423
- window.removeEventListener("scroll", handleScroll, { capture: true });
1424
- window.removeEventListener("resize", handleResize);
1436
+ cancelAnimationFrame(frameId);
1437
+ if (scrollHandler) {
1438
+ if (scrollParent) scrollParent.removeEventListener("scroll", scrollHandler);
1439
+ window.removeEventListener("scroll", scrollHandler, { capture: true });
1440
+ }
1441
+ if (resizeHandler) window.removeEventListener("resize", resizeHandler);
1425
1442
  };
1426
1443
  }, [isOpen]);
1427
1444
  useEffect(() => {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@diwauhris/ui",
3
3
  "private": false,
4
- "version": "1.7.13",
4
+ "version": "1.7.15",
5
5
  "type": "module",
6
6
  "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
7
7
  "keywords": [