@facter/ds-core 1.33.2 → 1.33.4

package/dist/index.js

@@ -3523,6 +3523,7 @@ function CardSelect({
   const listRef = React10__namespace.useRef(null);
   const searchRef = React10__namespace.useRef(null);
   const [dropdownPos, setDropdownPos] = React10__namespace.useState({});
+  const [listMaxHeight, setListMaxHeight] = React10__namespace.useState(300);
   const filteredOptions = React10__namespace.useMemo(() => {
     if (!searchable || onSearch || !search) return options;
     const q = search.toLowerCase();
@@ -3541,9 +3542,14 @@ function CardSelect({
     if (!open || !containerRef.current) return;
     const updatePosition = () => {
       const rect = containerRef.current.getBoundingClientRect();
-      const spaceBelow = window.innerHeight - rect.bottom;
-      const estimatedHeight = 340;
-      const showAbove = spaceBelow < estimatedHeight && rect.top > spaceBelow;
+      const margin = 8;
+      const searchBarHeight = searchable ? 41 : 0;
+      const spaceBelow = window.innerHeight - rect.bottom - margin;
+      const spaceAbove = rect.top - margin;
+      const showAbove = spaceBelow < 150 && spaceAbove > spaceBelow;
+      const availableSpace = showAbove ? spaceAbove : spaceBelow;
+      const maxList = Math.max(Math.min(availableSpace - searchBarHeight - margin, 300), 100);
+      setListMaxHeight(maxList);
       setDropdownPos({
         position: "fixed",
         left: rect.left,
@@ -3559,7 +3565,7 @@ function CardSelect({
       window.removeEventListener("scroll", updatePosition, true);
       window.removeEventListener("resize", updatePosition);
     };
-  }, [open]);
+  }, [open, searchable]);
   React10__namespace.useEffect(() => {
     if (!open) return;
     const handleClickOutside = (e) => {
@@ -3679,8 +3685,10 @@ function CardSelect({
               "div",
               {
                 ref: listRef,
-                className: "overflow-y-auto overscroll-contain max-h-[300px]",
+                className: "overflow-y-auto overscroll-contain",
+                style: { maxHeight: listMaxHeight },
                 onScroll: handleScroll,
+                "data-scroll-lock-scrollable": true,
                 children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "divide-y divide-border/50 p-2", children: [
                   filteredOptions.length === 0 && !loading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: emptyText }) : filteredOptions.map((option) => {
                     const isSelected = value === option.value;