@facter/ds-core 1.33.9 → 1.33.11

package/dist/index.js

@@ -16,10 +16,11 @@ var DialogPrimitive = require('@radix-ui/react-dialog');
 var sonner = require('sonner');
 var SwitchPrimitives = require('@radix-ui/react-switch');
 var reactHookForm = require('react-hook-form');
-var PopoverPrimitive = require('@radix-ui/react-popover');
+var reactDom = require('react-dom');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var PopoverPrimitive = require('@radix-ui/react-popover');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
@@ -50,10 +51,10 @@ var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
-var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
@@ -3410,22 +3411,6 @@ function FormInput({
   ) });
 }
 FormInput.displayName = "Form.Input";
-var Popover = PopoverPrimitive__namespace.Root;
-var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-var PopoverContent = React10__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  PopoverPrimitive__namespace.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__namespace.Content.displayName;
 function FormSelect({
   name,
   label,
@@ -3494,7 +3479,13 @@ function FormSelect({
               {
                 value: option.value,
                 disabled: option.disabled,
-                children: option.label
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  option.icon && /* @__PURE__ */ jsxRuntime.jsx(option.icon, { className: "h-4 w-4 text-muted-foreground" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label }),
+                    option.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground ml-2", children: option.description })
+                  ] })
+                ] })
               },
               option.value
             ))
@@ -3527,8 +3518,11 @@ function CardSelect({
   const [open, setOpen] = React10__namespace.useState(false);
   const [search, setSearch] = React10__namespace.useState("");
   const selected = options.find((o) => o.value === value);
+  const containerRef = React10__namespace.useRef(null);
+  const dropdownRef = React10__namespace.useRef(null);
   const listRef = React10__namespace.useRef(null);
   const searchRef = React10__namespace.useRef(null);
+  const [dropdownPos, setDropdownPos] = React10__namespace.useState({});
   const filteredOptions = React10__namespace.useMemo(() => {
     if (!searchable || onSearch || !search) return options;
     const q = search.toLowerCase();
@@ -3543,25 +3537,72 @@ function CardSelect({
     },
     [onSearch]
   );
-  const handleOpenChange = React10__namespace.useCallback(
-    (nextOpen) => {
-      setOpen(nextOpen);
-      if (!nextOpen) {
-        setSearch("");
-        if (onSearch) onSearch("");
+  React10__namespace.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__namespace.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__namespace.useEffect(() => {
+    if (!open) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [open]);
+  React10__namespace.useEffect(() => {
+    if (!open) {
+      setSearch("");
+      if (onSearch) onSearch("");
+    }
+  }, [open, onSearch]);
+  React10__namespace.useEffect(() => {
+    if (open && searchable) {
+      setTimeout(() => searchRef.current?.focus(), 0);
+    }
+  }, [open, searchable]);
   React10__namespace.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 });
@@ -3575,116 +3616,110 @@ function CardSelect({
       onLoadMore();
     }
   }, [onLoadMore, hasMore, loading]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
-              selected.icon && /* @__PURE__ */ jsxRuntime.jsx(selected.icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: selected.label })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: placeholder }),
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn("h-4 w-4 shrink-0 opacity-50 transition-transform", open && "rotate-180") })
-          ]
-        }
-      ) }),
-      label && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
-          ]
-        }
-      )
-    ] }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative", children: [
     /* @__PURE__ */ jsxRuntime.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: [
-          searchable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+          selected ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+            selected.icon && /* @__PURE__ */ jsxRuntime.jsx(selected.icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: selected.label })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn("h-4 w-4 shrink-0 opacity-50 transition-transform", open && "rotate-180") })
+        ]
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-0.5", children: "*" })
+        ]
+      }
+    ),
+    open && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ 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;
+                    const isDisabled = option.disabled || disabled;
+                    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(option.icon, { className: "h-3.5 w-3.5 text-primary" }) }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium leading-tight", children: option.label }),
+                            option.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs leading-tight text-muted-foreground", children: option.description })
+                          ] }),
+                          isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" }) })
+                        ]
+                      },
+                      option.value
+                    );
+                  }),
+                  loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-3", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) })
+                ] })
               }
             )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.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__ */ 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;
-                  const isDisabled = option.disabled || disabled;
-                  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(option.icon, { className: "h-3.5 w-3.5 text-primary" }) }),
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium leading-tight", children: option.label }),
-                          option.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs leading-tight text-muted-foreground", children: option.description })
-                        ] }),
-                        isSelected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" }) })
-                      ]
-                    },
-                    option.value
-                  );
-                }),
-                loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-3", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) })
-              ] })
-            }
-          )
-        ]
-      }
+          ]
+        }
+      ),
+      document.body
     )
   ] });
 }
@@ -4249,6 +4284,22 @@ var DropdownMenuShortcut = ({
   );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+var Popover = PopoverPrimitive__namespace.Root;
+var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
+var PopoverContent = React10__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  PopoverPrimitive__namespace.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__namespace.Content.displayName;
 var TooltipProvider = TooltipPrimitive__namespace.Provider;
 var TooltipRoot = TooltipPrimitive__namespace.Root;
 var TooltipTrigger = TooltipPrimitive__namespace.Trigger;