@facter/ds-core 1.33.9 → 1.33.11

package/dist/index.mjs

@@ -17,10 +17,11 @@ 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 * as PopoverPrimitive from '@radix-ui/react-popover';
+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';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
@@ -3379,22 +3380,6 @@ function FormInput({
   ) });
 }
 FormInput.displayName = "Form.Input";
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React10.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  PopoverPrimitive.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "z-50 w-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props
-  }
-) }));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 function FormSelect({
   name,
   label,
@@ -3463,7 +3448,13 @@ function FormSelect({
               {
                 value: option.value,
                 disabled: option.disabled,
-                children: option.label
+                children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  option.icon && /* @__PURE__ */ jsx(option.icon, { className: "h-4 w-4 text-muted-foreground" }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { children: option.label }),
+                    option.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground ml-2", children: option.description })
+                  ] })
+                ] })
               },
               option.value
             ))
@@ -3496,8 +3487,11 @@ function CardSelect({
   const [open, setOpen] = React10.useState(false);
   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 filteredOptions = React10.useMemo(() => {
     if (!searchable || onSearch || !search) return options;
     const q = search.toLowerCase();
@@ -3512,25 +3506,72 @@ function CardSelect({
     },
     [onSearch]
   );
-  const handleOpenChange = React10.useCallback(
-    (nextOpen) => {
-      setOpen(nextOpen);
-      if (!nextOpen) {
-        setSearch("");
-        if (onSearch) onSearch("");
+  React10.useEffect(() => {
+    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;
+      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]);
+  React10.useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      if (containerRef.current && !containerRef.current.contains(target) && (!dropdownRef.current || !dropdownRef.current.contains(target))) {
+        setOpen(false);
       }
-    },
-    [onSearch]
-  );
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  React10.useEffect(() => {
+    if (!open) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [open]);
+  React10.useEffect(() => {
+    if (!open) {
+      setSearch("");
+      if (onSearch) onSearch("");
+    }
+  }, [open, onSearch]);
+  React10.useEffect(() => {
+    if (open && searchable) {
+      setTimeout(() => searchRef.current?.focus(), 0);
+    }
+  }, [open, searchable]);
   React10.useEffect(() => {
     const el = listRef.current;
     if (!el || !open) return;
     const handleWheel = (e) => {
       const { scrollTop, scrollHeight, clientHeight } = el;
-      if (scrollHeight <= clientHeight) return;
+      const isScrollable = scrollHeight > clientHeight;
+      if (!isScrollable) return;
       e.preventDefault();
       e.stopPropagation();
-      el.scrollTop = Math.max(0, Math.min(scrollTop + e.deltaY, scrollHeight - clientHeight));
+      el.scrollTop = Math.max(
+        0,
+        Math.min(scrollTop + e.deltaY, scrollHeight - clientHeight)
+      );
     };
     el.addEventListener("wheel", handleWheel, { passive: false, capture: true });
     return () => el.removeEventListener("wheel", handleWheel, { capture: true });
@@ -3544,116 +3585,110 @@ function CardSelect({
       onLoadMore();
     }
   }, [onLoadMore, hasMore, loading]);
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          disabled,
-          className: cn(
-            "flex w-full items-center justify-between rounded-md border-2 bg-background px-3 text-sm transition-colors",
-            "focus:outline-none focus:border-primary",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            label ? "h-12 pt-4 pb-2" : "h-9 py-2",
-            error ? "border-red-500" : "border-border",
-            open && !error && "border-primary"
-          ),
-          children: [
-            selected ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 truncate", children: [
-              selected.icon && /* @__PURE__ */ jsx(selected.icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-              /* @__PURE__ */ jsx("span", { className: "truncate", children: selected.label })
-            ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }),
-            /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-4 w-4 shrink-0 opacity-50 transition-transform", open && "rotate-180") })
-          ]
-        }
-      ) }),
-      label && /* @__PURE__ */ jsxs(
-        "label",
-        {
-          className: cn(
-            "absolute left-3 top-[-6px] text-xs font-medium bg-background px-1 pointer-events-none",
-            error ? "text-red-500" : "text-foreground"
-          ),
-          children: [
-            label,
-            required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
-          ]
-        }
-      )
-    ] }),
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
     /* @__PURE__ */ jsxs(
-      PopoverContent,
+      "button",
       {
-        align: "start",
-        sideOffset: 4,
-        className: "p-0 overflow-hidden",
-        style: { width: "var(--radix-popover-trigger-width)" },
-        onOpenAutoFocus: (e) => {
-          e.preventDefault();
-          if (searchable) {
-            searchRef.current?.focus();
-          }
-        },
+        type: "button",
+        disabled,
+        onClick: () => setOpen((prev) => !prev),
+        className: cn(
+          "flex w-full items-center justify-between rounded-md border-2 bg-background px-3 text-sm transition-colors",
+          "focus:outline-none focus:border-primary",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          label ? "h-12 pt-4 pb-2" : "h-9 py-2",
+          error ? "border-red-500" : "border-border",
+          open && !error && "border-primary"
+        ),
+        children: [
+          selected ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+            selected.icon && /* @__PURE__ */ jsx(selected.icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: selected.label })
+          ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-4 w-4 shrink-0 opacity-50 transition-transform", open && "rotate-180") })
+        ]
+      }
+    ),
+    label && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          "absolute left-3 top-[-6px] text-xs font-medium bg-background px-1 pointer-events-none",
+          error ? "text-red-500" : "text-foreground"
+        ),
         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" }),
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
+        ]
+      }
+    ),
+    open && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          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",
+                {
+                  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(
-              "input",
+              "div",
               {
-                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"
+                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",
+                      {
+                        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" }) })
+                ] })
               }
             )
-          ] }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: listRef,
-              className: "overflow-y-auto overscroll-contain",
-              style: { maxHeight: "min(300px, var(--radix-popover-content-available-height, 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",
-                    {
-                      type: "button",
-                      disabled: isDisabled,
-                      onClick: () => {
-                        onChange(option.value);
-                        handleOpenChange(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
     )
   ] });
 }
@@ -4218,6 +4253,22 @@ var DropdownMenuShortcut = ({
   );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React10.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipRoot = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;