@diwauhris/ui 1.7.43 → 1.7.44
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 +9 -3
- package/lib/index.mjs +9 -3
- package/package.json +1 -1
package/lib/index.cjs
CHANGED
|
@@ -747,12 +747,18 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
|
|
|
747
747
|
(0, react.useEffect)(() => {
|
|
748
748
|
if (!open || !triggerRef.current) return;
|
|
749
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));
|
|
750
755
|
setPanelStyle({
|
|
751
756
|
position: "fixed",
|
|
752
|
-
top: rect.bottom + 4,
|
|
757
|
+
...openUp ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.bottom + 4 },
|
|
753
758
|
left: rect.left,
|
|
754
759
|
zIndex: 9999,
|
|
755
|
-
width: rect.width
|
|
760
|
+
width: rect.width,
|
|
761
|
+
maxHeight
|
|
756
762
|
});
|
|
757
763
|
}, [open]);
|
|
758
764
|
const handleSelect = (0, react.useCallback)((opt) => {
|
|
@@ -855,7 +861,7 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
|
|
|
855
861
|
role: "listbox",
|
|
856
862
|
"aria-labelledby": effectiveTriggerId,
|
|
857
863
|
style: panelStyle,
|
|
858
|
-
className: "overflow-y-auto
|
|
864
|
+
className: "overflow-y-auto rounded-xl border border-slate-200 bg-white py-1 shadow-xl",
|
|
859
865
|
children: flatItems.map((fi, i) => {
|
|
860
866
|
if (fi.type === "group") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
|
|
861
867
|
role: "presentation",
|
package/lib/index.mjs
CHANGED
|
@@ -723,12 +723,18 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
|
|
|
723
723
|
useEffect(() => {
|
|
724
724
|
if (!open || !triggerRef.current) return;
|
|
725
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));
|
|
726
731
|
setPanelStyle({
|
|
727
732
|
position: "fixed",
|
|
728
|
-
top: rect.bottom + 4,
|
|
733
|
+
...openUp ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.bottom + 4 },
|
|
729
734
|
left: rect.left,
|
|
730
735
|
zIndex: 9999,
|
|
731
|
-
width: rect.width
|
|
736
|
+
width: rect.width,
|
|
737
|
+
maxHeight
|
|
732
738
|
});
|
|
733
739
|
}, [open]);
|
|
734
740
|
const handleSelect = useCallback((opt) => {
|
|
@@ -831,7 +837,7 @@ function CustomDropdown({ items, value, placeholder, status, disabled, renderOpt
|
|
|
831
837
|
role: "listbox",
|
|
832
838
|
"aria-labelledby": effectiveTriggerId,
|
|
833
839
|
style: panelStyle,
|
|
834
|
-
className: "overflow-y-auto
|
|
840
|
+
className: "overflow-y-auto rounded-xl border border-slate-200 bg-white py-1 shadow-xl",
|
|
835
841
|
children: flatItems.map((fi, i) => {
|
|
836
842
|
if (fi.type === "group") return /* @__PURE__ */ jsx("li", {
|
|
837
843
|
role: "presentation",
|