@facter/ds-core 1.13.0 → 1.15.0

package/dist/index.mjs

@@ -17,10 +17,10 @@ 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 * 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';
@@ -3208,22 +3208,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,
@@ -3331,6 +3315,7 @@ 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 listRef = React10.useRef(null);
   const searchRef = React10.useRef(null);
   const filteredOptions = React10.useMemo(() => {
@@ -3347,6 +3332,24 @@ function CardSelect({
     },
     [onSearch]
   );
+  React10.useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    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("");
@@ -3358,12 +3361,23 @@ function CardSelect({
       setTimeout(() => searchRef.current?.focus(), 0);
     }
   }, [open, searchable]);
-  const handleWheel = React10.useCallback((e) => {
-    e.stopPropagation();
+  React10.useEffect(() => {
     const el = listRef.current;
-    if (!el) return;
-    el.scrollTop += e.deltaY;
-  }, []);
+    if (!el || !open) return;
+    const handleWheel = (e) => {
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      const isScrollable = scrollHeight > clientHeight;
+      if (!isScrollable) return;
+      e.preventDefault();
+      e.stopPropagation();
+      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 });
+  }, [open, filteredOptions]);
   const handleScroll = React10.useCallback(() => {
     if (!onLoadMore || !hasMore || loading) return;
     const el = listRef.current;
@@ -3373,111 +3387,100 @@ function CardSelect({
       onLoadMore();
     }
   }, [onLoadMore, hasMore, loading]);
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          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: "h-4 w-4 shrink-0 opacity-50" })
-          ]
-        }
-      ) }),
-      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",
-        className: "p-0 overflow-hidden",
-        style: {
-          width: "var(--radix-popover-trigger-width)"
-        },
+        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: [
-          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(
-            "div",
-            {
-              ref: listRef,
-              className: "overflow-y-auto overscroll-contain max-h-[300px]",
-              onScroll: handleScroll,
-              onWheel: handleWheel,
-              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-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(option.icon, { className: "h-5 w-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" }) })
-              ] })
-            }
-          )
+          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: "*" })
+        ]
+      }
+    ),
+    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(
+        "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",
+                {
+                  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-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(option.icon, { className: "h-5 w-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" }) })
+          ] })
+        }
+      )
+    ] })
   ] });
 }
 function FormTextarea({
@@ -4041,6 +4044,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;