@facter/ds-core 1.33.1 → 1.33.3

package/dist/index.mjs

@@ -17,6 +17,7 @@ import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { FormProvider, useFormContext, Controller } from 'react-hook-form';
 export { FormProvider, useFormContext } from 'react-hook-form';
+import { createPortal } from 'react-dom';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -3487,8 +3488,11 @@ function CardSelect({
   const [search, setSearch] = React10.useState("");
   const selected = options.find((o) => o.value === value);
   const containerRef = React10.useRef(null);
+  const dropdownRef = React10.useRef(null);
   const listRef = React10.useRef(null);
   const searchRef = React10.useRef(null);
+  const [dropdownPos, setDropdownPos] = React10.useState({});
+  const [listMaxHeight, setListMaxHeight] = React10.useState(300);
   const filteredOptions = React10.useMemo(() => {
     if (!searchable || onSearch || !search) return options;
     const q = search.toLowerCase();
@@ -3503,10 +3507,39 @@ function CardSelect({
     },
     [onSearch]
   );
+  React10.useEffect(() => {
+    if (!open || !containerRef.current) return;
+    const updatePosition = () => {
+      const rect = containerRef.current.getBoundingClientRect();
+      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,
+        width: rect.width,
+        zIndex: 9999,
+        ...showAbove ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.bottom + 4 }
+      });
+    };
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [open, searchable]);
   React10.useEffect(() => {
     if (!open) return;
     const handleClickOutside = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
+      const target = e.target;
+      if (containerRef.current && !containerRef.current.contains(target) && (!dropdownRef.current || !dropdownRef.current.contains(target))) {
         setOpen(false);
       }
     };
@@ -3595,63 +3628,75 @@ function CardSelect({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs("div", { className: "absolute left-0 top-full z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md overflow-hidden animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-150", children: [
-      searchable && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border", children: [
-        /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: searchRef,
-            type: "text",
-            value: search,
-            onChange: (e) => handleSearch(e.target.value),
-            placeholder: searchPlaceholder,
-            className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
+    open && createPortal(
+      /* @__PURE__ */ jsxs(
         "div",
         {
-          ref: listRef,
-          className: "overflow-y-auto overscroll-contain max-h-[300px]",
-          onScroll: handleScroll,
-          children: /* @__PURE__ */ jsxs("div", { className: "divide-y divide-border/50 p-2", children: [
-            filteredOptions.length === 0 && !loading ? /* @__PURE__ */ jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: emptyText }) : filteredOptions.map((option) => {
-              const isSelected = value === option.value;
-              const isDisabled = option.disabled || disabled;
-              return /* @__PURE__ */ jsxs(
-                "button",
+          ref: dropdownRef,
+          style: dropdownPos,
+          className: "rounded-md border border-border bg-popover shadow-md overflow-hidden animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-150",
+          children: [
+            searchable && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border", children: [
+              /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsx(
+                "input",
                 {
-                  type: "button",
-                  disabled: isDisabled,
-                  onClick: () => {
-                    onChange(option.value);
-                    setOpen(false);
-                  },
-                  className: cn(
-                    "flex w-full items-center gap-3 p-3 text-left transition-all",
-                    "cursor-pointer hover:bg-accent",
-                    isSelected && "bg-primary/5",
-                    isDisabled && "cursor-not-allowed opacity-50 hover:bg-transparent"
-                  ),
-                  children: [
-                    option.icon && /* @__PURE__ */ jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(option.icon, { className: "h-3.5 w-3.5 text-primary" }) }),
-                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-tight", children: option.label }),
-                      option.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs leading-tight text-muted-foreground", children: option.description })
-                    ] }),
-                    isSelected && /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) })
-                  ]
-                },
-                option.value
-              );
-            }),
-            loading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-3", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) })
-          ] })
+                  ref: searchRef,
+                  type: "text",
+                  value: search,
+                  onChange: (e) => handleSearch(e.target.value),
+                  placeholder: searchPlaceholder,
+                  className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: listRef,
+                className: "overflow-y-auto overscroll-contain",
+                style: { maxHeight: listMaxHeight },
+                onScroll: handleScroll,
+                children: /* @__PURE__ */ jsxs("div", { className: "divide-y divide-border/50 p-2", children: [
+                  filteredOptions.length === 0 && !loading ? /* @__PURE__ */ jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: emptyText }) : filteredOptions.map((option) => {
+                    const isSelected = value === option.value;
+                    const isDisabled = option.disabled || disabled;
+                    return /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        disabled: isDisabled,
+                        onClick: () => {
+                          onChange(option.value);
+                          setOpen(false);
+                        },
+                        className: cn(
+                          "flex w-full items-center gap-3 p-3 text-left transition-all",
+                          "cursor-pointer hover:bg-accent",
+                          isSelected && "bg-primary/5",
+                          isDisabled && "cursor-not-allowed opacity-50 hover:bg-transparent"
+                        ),
+                        children: [
+                          option.icon && /* @__PURE__ */ jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(option.icon, { className: "h-3.5 w-3.5 text-primary" }) }),
+                          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-tight", children: option.label }),
+                            option.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs leading-tight text-muted-foreground", children: option.description })
+                          ] }),
+                          isSelected && /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) })
+                        ]
+                      },
+                      option.value
+                    );
+                  }),
+                  loading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-3", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) })
+                ] })
+              }
+            )
+          ]
         }
-      )
-    ] })
+      ),
+      document.body
+    )
   ] });
 }
 function FormTextarea({