@oniratec/onira-react-ui 1.2.11 → 1.2.12

package/dist/index.d.ts

@@ -18,6 +18,8 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { UseFormReturn } from 'react-hook-form';
 import { z } from 'zod';
 
+export declare function AsyncSelect<T>({ value, onValueChange, placeholder, searchPlaceholder, disabled, hasError, minChars, debounceMs, fetcher, getOptionValue, getOptionLabel, emptyLabel, loadingLabel, emptyActionLabel, onEmptyActionClick, contentClassName, triggerClassName, }: Props<T>): JSX.Element;
+
 /** =========================
  * Async select field
  * ========================= */
@@ -55,7 +57,7 @@ export declare type AsyncSelectFilter<T> = BaseFilter & {
     optionsCache?: AsyncSelectOption[];
 };
 
-declare type AsyncSelectOption = {
+export declare type AsyncSelectOption = {
     value: string;
     label: string;
     meta?: unknown;
@@ -175,7 +177,7 @@ declare type CustomField<T extends FieldValues> = BaseFieldCommon<T> & {
     }) => ReactNode;
 };
 
-export declare function DataTable<T>({ columns, data, enableSorting, sortState, defaultSortState, onSortChange, unsortedIcon, sortMode, manualSorting, emptyContent, loadingContent, errorContent, isLoading, }: Props<T>): JSX.Element;
+export declare function DataTable<T>({ columns, data, enableSorting, sortState, defaultSortState, onSortChange, unsortedIcon, sortMode, manualSorting, emptyContent, loadingContent, errorContent, isLoading, }: Props_2<T>): JSX.Element;
 
 declare type DataTableProps<T> = Parameters<typeof DataTable<T>>[0];
 
@@ -216,6 +218,8 @@ export declare const DropdownMenuSubTrigger: React_2.ForwardRefExoticComponent<O
 
 export declare const DropdownMenuTrigger: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
 
+declare type Fetcher<T> = (query: string) => Promise<T[]>;
+
 export declare function Field({ className, error, required, ...props }: FieldProps): JSX.Element;
 
 declare interface FieldContextValue {
@@ -335,7 +339,7 @@ export declare interface FormFactoryConfig<TFormModel extends FieldValues, TEnti
     crossRules?: CrossRule<TFormModel>[];
 }
 
-export declare function FormFactoryRenderer<TFormModel extends FieldValues, TEntity>({ config, form, onSubmitAction, handleErrors, submitLabel, maxWidthClass, children, }: Props_4<TFormModel, TEntity>): JSX.Element;
+export declare function FormFactoryRenderer<TFormModel extends FieldValues, TEntity>({ config, form, onSubmitAction, handleErrors, submitLabel, maxWidthClass, children, }: Props_5<TFormModel, TEntity>): JSX.Element;
 
 declare type FormFactoryRendererProps<TFormModel extends FieldValues, TEntity> = Parameters<typeof FormFactoryRenderer<TFormModel, TEntity>>[0];
 
@@ -392,9 +396,9 @@ declare type Option_2<T extends string | number = string> = {
     label: string;
 };
 
-export declare const PageSizeSelector: ({ value, onChange, options }: Props_2) => JSX.Element;
+export declare const PageSizeSelector: ({ value, onChange, options }: Props_3) => JSX.Element;
 
-export declare const Pagination: ({ page, pageSize, total, onPageChange, onPageSizeChange }: Props_3) => JSX.Element;
+export declare const Pagination: ({ page, pageSize, total, onPageChange, onPageSizeChange }: Props_4) => JSX.Element;
 
 export declare const PasswordInput: ForwardRefExoticComponent<PasswordInputProps & RefAttributes<HTMLInputElement>>;
 
@@ -416,7 +420,29 @@ declare interface ProfileAvatar_2 {
 
 declare const ProfileAvatar: FC<ProfileAvatar_2>;
 
-declare interface Props<T> {
+declare type Props<T> = {
+    value?: string;
+    onValueChange: (value: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    minChars?: number;
+    debounceMs?: number;
+    fetcher: Fetcher<T>;
+    getOptionValue: (item: T) => string;
+    getOptionLabel: (item: T) => string;
+    emptyLabel?: string;
+    loadingLabel?: string;
+    /** CTA opcional cuando no hay resultados */
+    emptyActionLabel?: string;
+    onEmptyActionClick?: () => void;
+    /** Si quieres controlar ancho del popover */
+    contentClassName?: string;
+    triggerClassName?: string;
+};
+
+declare interface Props_2<T> {
     columns: Column<T>[];
     data: T[];
     enableSorting?: boolean;
@@ -432,13 +458,13 @@ declare interface Props<T> {
     isLoading?: boolean;
 }
 
-declare interface Props_2 {
+declare interface Props_3 {
     value: number;
     onChange: (size: number) => void;
     options?: number[];
 }
 
-declare interface Props_3 {
+declare interface Props_4 {
     page: number;
     pageSize: number;
     total: number;
@@ -446,7 +472,7 @@ declare interface Props_3 {
     onPageSizeChange: (size: number) => void;
 }
 
-declare interface Props_4<TFormModel extends FieldValues, TEntity> {
+declare interface Props_5<TFormModel extends FieldValues, TEntity> {
     config: FormFactoryConfig<TFormModel, TEntity>;
     form: UseFormReturn<TFormModel>;
     onSubmitAction: (data: TFormModel) => void | Promise<void>;

package/dist/index.js

@@ -8977,6 +8977,152 @@ const SelectItem = React.forwardRef(({ className: e, children: t, ...r }, i) =>
   /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { className: "oniratec-select__indicator", children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
 ] }));
 SelectItem.displayName = "SelectItem";
+function useDebouncedValue(e, t) {
+  const [r, i] = React.useState(e);
+  return React.useEffect(() => {
+    const s = setTimeout(() => i(e), t);
+    return () => clearTimeout(s);
+  }, [e, t]), r;
+}
+function AsyncSelect({
+  value: e,
+  onValueChange: t,
+  placeholder: r = "Seleccionar",
+  searchPlaceholder: i = "Buscar...",
+  disabled: s,
+  hasError: a,
+  minChars: n = 2,
+  debounceMs: l = 300,
+  fetcher: h,
+  getOptionValue: d,
+  getOptionLabel: V,
+  emptyLabel: K = "Sin resultados",
+  loadingLabel: y = "Buscando...",
+  emptyActionLabel: q,
+  onEmptyActionClick: H,
+  contentClassName: G,
+  triggerClassName: te
+}) {
+  const [M, j] = React.useState(!1), [F, Z] = React.useState(""), [J, ee] = React.useState(!1), [ie, se] = React.useState([]), [le, ue] = React.useState(""), de = useDebouncedValue(F, l), fe = de.trim().length >= n, pe = React.useRef(null);
+  React.useEffect(() => {
+    const he = (re) => {
+      pe.current && (pe.current.contains(re.target) || j(!1));
+    };
+    return document.addEventListener("mousedown", he), () => document.removeEventListener("mousedown", he);
+  }, []), React.useEffect(() => {
+    let he = !0;
+    return (async () => {
+      if (M) {
+        if (!fe) {
+          se([]);
+          return;
+        }
+        ee(!0);
+        try {
+          const ae = await h(de.trim());
+          if (!he) return;
+          se(ae ?? []);
+        } finally {
+          he && ee(!1);
+        }
+      }
+    })(), () => {
+      he = !1;
+    };
+  }, [M, de, fe, h]), React.useEffect(() => {
+    if (!e) {
+      ue("");
+      return;
+    }
+    const he = ie.find((re) => d(re) === e);
+    he && ue(V(he));
+  }, [e, ie, d, V]);
+  const ve = le || r;
+  return /* @__PURE__ */ jsxs("div", { ref: pe, className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled: s,
+        "aria-invalid": a ? "true" : "false",
+        onClick: () => j((he) => !he),
+        className: cn(
+          "oniratec-async-select__trigger",
+          a && "oniratec-async-select__trigger--error",
+          te
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "oniratec-async-select__value",
+                !le && "oniratec-async-select__value--placeholder"
+              ),
+              children: ve
+            }
+          ),
+          /* @__PURE__ */ jsx(ChevronDown, { className: cn("oniratec-async-select__chevron", M && "rotate-180") })
+        ]
+      }
+    ),
+    M && /* @__PURE__ */ jsxs("div", { className: cn("oniratec-async-select", G), children: [
+      /* @__PURE__ */ jsxs("div", { className: "oniratec-async-select__search", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "oniratec-async-select__search-input",
+            value: F,
+            onChange: (he) => Z(he.target.value),
+            placeholder: i,
+            autoFocus: !0
+          }
+        ),
+        J && /* @__PURE__ */ jsx(Loader2, { className: "oniratec-async-select__loader" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "oniratec-async-select__viewport", children: [
+        !fe && /* @__PURE__ */ jsxs("div", { className: "oniratec-async-select__hint", children: [
+          "Escribe al menos ",
+          n,
+          " caracteres"
+        ] }),
+        fe && J && /* @__PURE__ */ jsx("div", { className: "oniratec-async-select__hint", children: y }),
+        fe && !J && ie.length === 0 && /* @__PURE__ */ jsxs("div", { className: "oniratec-async-select__empty", children: [
+          /* @__PURE__ */ jsx("span", { children: K }),
+          q && H && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "oniratec-async-select__empty-action",
+              onClick: H,
+              children: q
+            }
+          )
+        ] }),
+        ie.length > 0 && /* @__PURE__ */ jsx("ul", { className: "oniratec-async-select__list", children: ie.map((he) => {
+          const re = d(he), ae = V(he), W = re === e;
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "oniratec-async-select__item",
+                W && "oniratec-async-select__item--selected"
+              ),
+              onClick: () => {
+                t(re), ue(ae), j(!1), Z("");
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { children: ae }),
+                W && /* @__PURE__ */ jsx("span", { className: "oniratec-async-select__indicator", children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
+              ]
+            }
+          ) }, re);
+        }) })
+      ] })
+    ] })
+  ] });
+}
 function Skeleton({ className: e }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -9188,152 +9334,6 @@ const DEFAULT_PAGE_SIZES = [5, 10, 25, 50], PageSizeSelector = ({ value: e, onCh
     ] })
   ] });
 };
-function useDebouncedValue(e, t) {
-  const [r, i] = React.useState(e);
-  return React.useEffect(() => {
-    const s = setTimeout(() => i(e), t);
-    return () => clearTimeout(s);
-  }, [e, t]), r;
-}
-function AsyncSelect({
-  value: e,
-  onValueChange: t,
-  placeholder: r = "Seleccionar",
-  searchPlaceholder: i = "Buscar...",
-  disabled: s,
-  hasError: a,
-  minChars: n = 2,
-  debounceMs: l = 300,
-  fetcher: h,
-  getOptionValue: d,
-  getOptionLabel: V,
-  emptyLabel: K = "Sin resultados",
-  loadingLabel: y = "Buscando...",
-  emptyActionLabel: q,
-  onEmptyActionClick: H,
-  contentClassName: G,
-  triggerClassName: te
-}) {
-  const [M, j] = React.useState(!1), [F, Z] = React.useState(""), [J, ee] = React.useState(!1), [ie, se] = React.useState([]), [le, ue] = React.useState(""), de = useDebouncedValue(F, l), fe = de.trim().length >= n, pe = React.useRef(null);
-  React.useEffect(() => {
-    const he = (re) => {
-      pe.current && (pe.current.contains(re.target) || j(!1));
-    };
-    return document.addEventListener("mousedown", he), () => document.removeEventListener("mousedown", he);
-  }, []), React.useEffect(() => {
-    let he = !0;
-    return (async () => {
-      if (M) {
-        if (!fe) {
-          se([]);
-          return;
-        }
-        ee(!0);
-        try {
-          const ae = await h(de.trim());
-          if (!he) return;
-          se(ae ?? []);
-        } finally {
-          he && ee(!1);
-        }
-      }
-    })(), () => {
-      he = !1;
-    };
-  }, [M, de, fe, h]), React.useEffect(() => {
-    if (!e) {
-      ue("");
-      return;
-    }
-    const he = ie.find((re) => d(re) === e);
-    he && ue(V(he));
-  }, [e, ie, d, V]);
-  const ve = le || r;
-  return /* @__PURE__ */ jsxs("div", { ref: pe, className: "relative w-full", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        disabled: s,
-        "aria-invalid": a ? "true" : "false",
-        onClick: () => j((he) => !he),
-        className: cn(
-          "oniratec-async-select__trigger",
-          a && "oniratec-async-select__trigger--error",
-          te
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "oniratec-async-select__value",
-                !le && "oniratec-async-select__value--placeholder"
-              ),
-              children: ve
-            }
-          ),
-          /* @__PURE__ */ jsx(ChevronDown, { className: cn("oniratec-async-select__chevron", M && "rotate-180") })
-        ]
-      }
-    ),
-    M && /* @__PURE__ */ jsxs("div", { className: cn("oniratec-async-select", G), children: [
-      /* @__PURE__ */ jsxs("div", { className: "oniratec-async-select__search", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            className: "oniratec-async-select__search-input",
-            value: F,
-            onChange: (he) => Z(he.target.value),
-            placeholder: i,
-            autoFocus: !0
-          }
-        ),
-        J && /* @__PURE__ */ jsx(Loader2, { className: "oniratec-async-select__loader" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "oniratec-async-select__viewport", children: [
-        !fe && /* @__PURE__ */ jsxs("div", { className: "oniratec-async-select__hint", children: [
-          "Escribe al menos ",
-          n,
-          " caracteres"
-        ] }),
-        fe && J && /* @__PURE__ */ jsx("div", { className: "oniratec-async-select__hint", children: y }),
-        fe && !J && ie.length === 0 && /* @__PURE__ */ jsxs("div", { className: "oniratec-async-select__empty", children: [
-          /* @__PURE__ */ jsx("span", { children: K }),
-          q && H && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "oniratec-async-select__empty-action",
-              onClick: H,
-              children: q
-            }
-          )
-        ] }),
-        ie.length > 0 && /* @__PURE__ */ jsx("ul", { className: "oniratec-async-select__list", children: ie.map((he) => {
-          const re = d(he), ae = V(he), W = re === e;
-          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: cn(
-                "oniratec-async-select__item",
-                W && "oniratec-async-select__item--selected"
-              ),
-              onClick: () => {
-                t(re), ue(ae), j(!1), Z("");
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", { children: ae }),
-                W && /* @__PURE__ */ jsx("span", { className: "oniratec-async-select__indicator", children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
-              ]
-            }
-          ) }, re);
-        }) })
-      ] })
-    ] })
-  ] });
-}
 function FiltersPanel({
   filters: e,
   value: t,
@@ -12749,6 +12749,7 @@ function renderFiltersModal(e, t, r, i) {
   );
 }
 export {
+  AsyncSelect,
   Box,
   Breadcrumbs,
   Button,