@diwauhris/ui 1.7.44 → 1.7.45

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 -18
  2. package/lib/index.mjs +40 -18
  3. package/package.json +1 -1
package/lib/index.cjs CHANGED
@@ -739,27 +739,44 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
739
739
  (0, react.useEffect)(() => {
740
740
  if (!open) return;
741
741
  const handlePointerDown = (e) => {
742
- if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false);
742
+ const target = e.target;
743
+ if (containerRef.current?.contains(target)) return;
744
+ if (listRef.current?.contains(target)) return;
745
+ setOpen(false);
743
746
  };
744
747
  document.addEventListener("mousedown", handlePointerDown);
745
748
  return () => document.removeEventListener("mousedown", handlePointerDown);
746
749
  }, [open]);
747
750
  (0, react.useEffect)(() => {
748
- if (!open || !triggerRef.current) return;
749
- const rect = triggerRef.current.getBoundingClientRect();
750
- const MARGIN = 8;
751
- const spaceBelow = window.innerHeight - rect.bottom - MARGIN;
752
- const spaceAbove = rect.top - MARGIN;
753
- const openUp = spaceBelow < 160 && spaceAbove > spaceBelow;
754
- const maxHeight = Math.min(240, Math.max(120, openUp ? spaceAbove : spaceBelow));
755
- setPanelStyle({
756
- position: "fixed",
757
- ...openUp ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.bottom + 4 },
758
- left: rect.left,
759
- zIndex: 9999,
760
- width: rect.width,
761
- maxHeight
762
- });
751
+ if (!open) return;
752
+ let raf = 0;
753
+ const place = () => {
754
+ const trigger = triggerRef.current;
755
+ if (!trigger) return;
756
+ const rect = trigger.getBoundingClientRect();
757
+ const MARGIN = 8;
758
+ const spaceBelow = window.innerHeight - rect.bottom - MARGIN;
759
+ const spaceAbove = rect.top - MARGIN;
760
+ const openUp = spaceBelow < 160 && spaceAbove > spaceBelow;
761
+ const maxHeight = Math.min(240, Math.max(120, openUp ? spaceAbove : spaceBelow));
762
+ const parent = trigger.closest("[role=\"dialog\"]") ?? document.body;
763
+ const isBody = parent === document.body;
764
+ const pr = isBody ? null : parent.getBoundingClientRect();
765
+ const left = rect.left - (pr?.left ?? 0) + parent.scrollLeft;
766
+ const topBelow = rect.bottom - (pr?.top ?? 0) + parent.scrollTop + 4;
767
+ const bottomAbove = (isBody ? window.innerHeight : parent.clientHeight) - (rect.top - (pr?.top ?? 0) + parent.scrollTop) + 4;
768
+ setPanelStyle({
769
+ position: "absolute",
770
+ top: openUp ? void 0 : topBelow,
771
+ bottom: openUp ? bottomAbove : void 0,
772
+ left,
773
+ zIndex: 9999,
774
+ width: rect.width,
775
+ maxHeight
776
+ });
777
+ };
778
+ raf = requestAnimationFrame(place);
779
+ return () => cancelAnimationFrame(raf);
763
780
  }, [open]);
764
781
  const handleSelect = (0, react.useCallback)((opt) => {
765
782
  if (opt.disabled) return;
@@ -826,6 +843,7 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
826
843
  }
827
844
  };
828
845
  const effectiveTriggerId = id ?? triggerId;
846
+ const portalTarget = triggerRef.current?.closest("[role=\"dialog\"]") ?? (typeof document !== "undefined" ? document.body : null);
829
847
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
830
848
  className: "relative",
831
849
  ref: containerRef,
@@ -860,7 +878,11 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
860
878
  id: listboxId,
861
879
  role: "listbox",
862
880
  "aria-labelledby": effectiveTriggerId,
863
- style: panelStyle,
881
+ "data-pis-floating": "",
882
+ style: {
883
+ ...panelStyle,
884
+ pointerEvents: "auto"
885
+ },
864
886
  className: "overflow-y-auto rounded-xl border border-slate-200 bg-white py-1 shadow-xl",
865
887
  children: flatItems.map((fi, i) => {
866
888
  if (fi.type === "group") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
@@ -889,7 +911,7 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
889
911
  children: renderOption(opt)
890
912
  }, opt.value);
891
913
  })
892
- }), document.body)
914
+ }), portalTarget)
893
915
  ]
894
916
  });
895
917
  }
package/lib/index.mjs CHANGED
@@ -715,27 +715,44 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
715
715
  useEffect(() => {
716
716
  if (!open) return;
717
717
  const handlePointerDown = (e) => {
718
- if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false);
718
+ const target = e.target;
719
+ if (containerRef.current?.contains(target)) return;
720
+ if (listRef.current?.contains(target)) return;
721
+ setOpen(false);
719
722
  };
720
723
  document.addEventListener("mousedown", handlePointerDown);
721
724
  return () => document.removeEventListener("mousedown", handlePointerDown);
722
725
  }, [open]);
723
726
  useEffect(() => {
724
- if (!open || !triggerRef.current) return;
725
- const rect = triggerRef.current.getBoundingClientRect();
726
- const MARGIN = 8;
727
- const spaceBelow = window.innerHeight - rect.bottom - MARGIN;
728
- const spaceAbove = rect.top - MARGIN;
729
- const openUp = spaceBelow < 160 && spaceAbove > spaceBelow;
730
- const maxHeight = Math.min(240, Math.max(120, openUp ? spaceAbove : spaceBelow));
731
- setPanelStyle({
732
- position: "fixed",
733
- ...openUp ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.bottom + 4 },
734
- left: rect.left,
735
- zIndex: 9999,
736
- width: rect.width,
737
- maxHeight
738
- });
727
+ if (!open) return;
728
+ let raf = 0;
729
+ const place = () => {
730
+ const trigger = triggerRef.current;
731
+ if (!trigger) return;
732
+ const rect = trigger.getBoundingClientRect();
733
+ const MARGIN = 8;
734
+ const spaceBelow = window.innerHeight - rect.bottom - MARGIN;
735
+ const spaceAbove = rect.top - MARGIN;
736
+ const openUp = spaceBelow < 160 && spaceAbove > spaceBelow;
737
+ const maxHeight = Math.min(240, Math.max(120, openUp ? spaceAbove : spaceBelow));
738
+ const parent = trigger.closest("[role=\"dialog\"]") ?? document.body;
739
+ const isBody = parent === document.body;
740
+ const pr = isBody ? null : parent.getBoundingClientRect();
741
+ const left = rect.left - (pr?.left ?? 0) + parent.scrollLeft;
742
+ const topBelow = rect.bottom - (pr?.top ?? 0) + parent.scrollTop + 4;
743
+ const bottomAbove = (isBody ? window.innerHeight : parent.clientHeight) - (rect.top - (pr?.top ?? 0) + parent.scrollTop) + 4;
744
+ setPanelStyle({
745
+ position: "absolute",
746
+ top: openUp ? void 0 : topBelow,
747
+ bottom: openUp ? bottomAbove : void 0,
748
+ left,
749
+ zIndex: 9999,
750
+ width: rect.width,
751
+ maxHeight
752
+ });
753
+ };
754
+ raf = requestAnimationFrame(place);
755
+ return () => cancelAnimationFrame(raf);
739
756
  }, [open]);
740
757
  const handleSelect = useCallback((opt) => {
741
758
  if (opt.disabled) return;
@@ -802,6 +819,7 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
802
819
  }
803
820
  };
804
821
  const effectiveTriggerId = id ?? triggerId;
822
+ const portalTarget = triggerRef.current?.closest("[role=\"dialog\"]") ?? (typeof document !== "undefined" ? document.body : null);
805
823
  return /* @__PURE__ */ jsxs("div", {
806
824
  className: "relative",
807
825
  ref: containerRef,
@@ -836,7 +854,11 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
836
854
  id: listboxId,
837
855
  role: "listbox",
838
856
  "aria-labelledby": effectiveTriggerId,
839
- style: panelStyle,
857
+ "data-pis-floating": "",
858
+ style: {
859
+ ...panelStyle,
860
+ pointerEvents: "auto"
861
+ },
840
862
  className: "overflow-y-auto rounded-xl border border-slate-200 bg-white py-1 shadow-xl",
841
863
  children: flatItems.map((fi, i) => {
842
864
  if (fi.type === "group") return /* @__PURE__ */ jsx("li", {
@@ -865,7 +887,7 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
865
887
  children: renderOption(opt)
866
888
  }, opt.value);
867
889
  })
868
- }), document.body)
890
+ }), portalTarget)
869
891
  ]
870
892
  });
871
893
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@diwauhris/ui",
3
3
  "private": false,
4
- "version": "1.7.44",
4
+ "version": "1.7.45",
5
5
  "type": "module",
6
6
  "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
7
7
  "keywords": [