@facter/ds-core 1.11.0 → 1.13.0

package/dist/index.d.mts

@@ -898,6 +898,14 @@ interface FormSelectProps<T extends FieldValues = FieldValues> extends BaseField
     selectSize?: 'sm' | 'default' | 'lg';
     /** Render as dropdown (default) or visual card grid */
     variant?: 'default' | 'card';
+    /** Server-side search callback. If not provided, filters locally */
+    onSearch?: (query: string) => void;
+    /** Infinite scroll: callback to load more items */
+    onLoadMore?: () => void;
+    /** Infinite scroll: whether there are more items to load */
+    hasMore?: boolean;
+    /** Placeholder for the search input */
+    searchPlaceholder?: string;
 }
 interface FormTextareaProps<T extends FieldValues = FieldValues> extends BaseFieldProps<T>, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, 'name'> {
     hideError?: boolean;
@@ -929,7 +937,7 @@ declare namespace FormInput {
     var displayName: string;
 }
 
-declare function FormSelect<T extends FieldValues = FieldValues>({ name, label, description, required, disabled, className, options, placeholder, icon, hideError, selectSize, emptyText, loading, variant, }: FormSelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function FormSelect<T extends FieldValues = FieldValues>({ name, label, description, required, disabled, className, options, placeholder, icon, hideError, selectSize, emptyText, loading, variant, searchable, onSearch, onLoadMore, hasMore, searchPlaceholder, }: FormSelectProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace FormSelect {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -898,6 +898,14 @@ interface FormSelectProps<T extends FieldValues = FieldValues> extends BaseField
     selectSize?: 'sm' | 'default' | 'lg';
     /** Render as dropdown (default) or visual card grid */
     variant?: 'default' | 'card';
+    /** Server-side search callback. If not provided, filters locally */
+    onSearch?: (query: string) => void;
+    /** Infinite scroll: callback to load more items */
+    onLoadMore?: () => void;
+    /** Infinite scroll: whether there are more items to load */
+    hasMore?: boolean;
+    /** Placeholder for the search input */
+    searchPlaceholder?: string;
 }
 interface FormTextareaProps<T extends FieldValues = FieldValues> extends BaseFieldProps<T>, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, 'name'> {
     hideError?: boolean;
@@ -929,7 +937,7 @@ declare namespace FormInput {
     var displayName: string;
 }
 
-declare function FormSelect<T extends FieldValues = FieldValues>({ name, label, description, required, disabled, className, options, placeholder, icon, hideError, selectSize, emptyText, loading, variant, }: FormSelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function FormSelect<T extends FieldValues = FieldValues>({ name, label, description, required, disabled, className, options, placeholder, icon, hideError, selectSize, emptyText, loading, variant, searchable, onSearch, onLoadMore, hasMore, searchPlaceholder, }: FormSelectProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace FormSelect {
     var displayName: string;
 }

package/dist/index.js

@@ -3269,7 +3269,12 @@ function FormSelect({
   selectSize = "default",
   emptyText = "Nenhuma op\xE7\xE3o dispon\xEDvel",
   loading = false,
-  variant = "default"
+  variant = "default",
+  searchable = false,
+  onSearch,
+  onLoadMore,
+  hasMore,
+  searchPlaceholder = "Buscar..."
 }) {
   const form = reactHookForm.useFormContext();
   const fieldState = form.getFieldState(name, form.formState);
@@ -3290,7 +3295,14 @@ function FormSelect({
             label,
             required,
             error: !!error,
-            placeholder
+            placeholder,
+            searchable,
+            onSearch,
+            onLoadMore,
+            hasMore,
+            loading,
+            emptyText,
+            searchPlaceholder
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(
           Select,
@@ -3338,11 +3350,61 @@ function CardSelect({
   label,
   required,
   error,
-  placeholder = "Selecione..."
+  placeholder = "Selecione...",
+  searchable,
+  onSearch,
+  onLoadMore,
+  hasMore,
+  loading,
+  emptyText = "Nenhuma op\xE7\xE3o dispon\xEDvel",
+  searchPlaceholder = "Buscar..."
 }) {
   const [open, setOpen] = React10__namespace.useState(false);
+  const [search, setSearch] = React10__namespace.useState("");
   const selected = options.find((o) => o.value === value);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+  const listRef = React10__namespace.useRef(null);
+  const searchRef = React10__namespace.useRef(null);
+  const filteredOptions = React10__namespace.useMemo(() => {
+    if (!searchable || onSearch || !search) return options;
+    const q = search.toLowerCase();
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(q) || o.description?.toLowerCase().includes(q)
+    );
+  }, [options, search, searchable, onSearch]);
+  const handleSearch = React10__namespace.useCallback(
+    (value2) => {
+      setSearch(value2);
+      if (onSearch) onSearch(value2);
+    },
+    [onSearch]
+  );
+  React10__namespace.useEffect(() => {
+    if (!open) {
+      setSearch("");
+      if (onSearch) onSearch("");
+    }
+  }, [open, onSearch]);
+  React10__namespace.useEffect(() => {
+    if (open && searchable) {
+      setTimeout(() => searchRef.current?.focus(), 0);
+    }
+  }, [open, searchable]);
+  const handleWheel = React10__namespace.useCallback((e) => {
+    e.stopPropagation();
+    const el = listRef.current;
+    if (!el) return;
+    el.scrollTop += e.deltaY;
+  }, []);
+  const handleScroll = React10__namespace.useCallback(() => {
+    if (!onLoadMore || !hasMore || loading) return;
+    const el = listRef.current;
+    if (!el) return;
+    const { scrollTop, scrollHeight, clientHeight } = el;
+    if (scrollHeight - scrollTop - clientHeight < 80) {
+      onLoadMore();
+    }
+  }, [onLoadMore, hasMore, loading]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
@@ -3379,45 +3441,72 @@ function CardSelect({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       PopoverContent,
       {
         align: "start",
-        className: "p-2 overflow-y-auto",
+        className: "p-0 overflow-hidden",
         style: {
-          width: "var(--radix-popover-trigger-width)",
-          maxHeight: "var(--radix-popover-content-available-height)"
+          width: "var(--radix-popover-trigger-width)"
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border/50", children: options.map((option) => {
-          const isSelected = value === option.value;
-          const isDisabled = option.disabled || disabled;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
+        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(
+            "div",
             {
-              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-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(option.icon, { className: "h-5 w-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
-          );
-        }) })
+              ref: listRef,
+              className: "overflow-y-auto overscroll-contain max-h-[300px]",
+              onScroll: handleScroll,
+              onWheel: handleWheel,
+              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-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(option.icon, { className: "h-5 w-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" }) })
+              ] })
+            }
+          )
+        ]
       }
     )
   ] });