@facter/ds-core 1.33.5 → 1.33.7

package/dist/index.mjs

@@ -17,11 +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 { createPortal } from 'react-dom';
+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';
@@ -638,15 +637,15 @@ var SelectItem = React10.forwardRef(({ className, children, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-pointer select-none items-center justify-between rounded-sm py-1.5 px-3 text-sm outline-none",
+      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
       "focus:bg-accent focus:text-accent-foreground",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
-      /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center ml-2", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-primary" }) }) })
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
     ]
   }
 ));
@@ -3380,6 +3379,22 @@ 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,
@@ -3448,13 +3463,7 @@ function FormSelect({
               {
                 value: option.value,
                 disabled: option.disabled,
-                children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", 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 })
-                  ] })
-                ] })
+                children: option.label
               },
               option.value
             ))
@@ -3487,12 +3496,8 @@ 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 [listMaxHeight, setListMaxHeight] = React10.useState(300);
   const filteredOptions = React10.useMemo(() => {
     if (!searchable || onSearch || !search) return options;
     const q = search.toLowerCase();
@@ -3507,81 +3512,16 @@ 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) => {
-      const target = e.target;
-      if (containerRef.current && !containerRef.current.contains(target) && (!dropdownRef.current || !dropdownRef.current.contains(target))) {
-        setOpen(false);
+  const handleOpenChange = React10.useCallback(
+    (nextOpen) => {
+      setOpen(nextOpen);
+      if (!nextOpen) {
+        setSearch("");
+        if (onSearch) 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;
-      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]);
+    },
+    [onSearch]
+  );
   const handleScroll = React10.useCallback(() => {
     if (!onLoadMore || !hasMore || loading) return;
     const el = listRef.current;
@@ -3591,112 +3531,116 @@ function CardSelect({
       onLoadMore();
     }
   }, [onLoadMore, hasMore, loading]);
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
+  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: "*" })
+          ]
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxs(
-      "button",
+      PopoverContent,
       {
-        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"
-        ),
+        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();
+          }
+        },
         children: [
-          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"
-                }
-              )
-            ] }),
+          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(
-              "div",
+              "input",
               {
-                ref: listRef,
-                className: "overflow-y-auto overscroll-contain",
-                style: { maxHeight: listMaxHeight },
-                onScroll: handleScroll,
-                "data-scroll-lock-scrollable": true,
-                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" }) })
-                ] })
+                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"
               }
             )
-          ]
-        }
-      ),
-      document.body
+          ] }),
+          /* @__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" }) })
+              ] })
+            }
+          )
+        ]
+      }
     )
   ] });
 }
@@ -4261,22 +4205,6 @@ 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;