twico-ui 1.13.0 → 1.14.0

package/dist/index.d.cts

@@ -1989,6 +1989,11 @@ interface DatatableColumn<T = any> {
   wrapText?: boolean;
   /** Distinct values for the "is any of" multi-value filter (recommended in server mode). */
   valueOptions?: Array<string | { value: string; label: string }>;
+  /** Async loader for the "is any of" filter's options — searchable/lazy server-backed values (for a
+   *  large reference/master list). Called with the type-ahead query (debounced; `""` primes the list)
+   *  and takes precedence over `valueOptions` for the filter picker, which then loads server-side
+   *  (no local filtering) with a loading state. */
+  loadValueOptions?: (query: string) => Promise<Array<string | { value: string; label: string }>>;
   /** Format the raw value to a string/number for display. */
   valueFormatter?: (value: any, row: T) => React.ReactNode;
   /** Fully custom cell renderer (badges, avatars, etc.). */

package/dist/index.d.ts

@@ -1989,6 +1989,11 @@ interface DatatableColumn<T = any> {
   wrapText?: boolean;
   /** Distinct values for the "is any of" multi-value filter (recommended in server mode). */
   valueOptions?: Array<string | { value: string; label: string }>;
+  /** Async loader for the "is any of" filter's options — searchable/lazy server-backed values (for a
+   *  large reference/master list). Called with the type-ahead query (debounced; `""` primes the list)
+   *  and takes precedence over `valueOptions` for the filter picker, which then loads server-side
+   *  (no local filtering) with a loading state. */
+  loadValueOptions?: (query: string) => Promise<Array<string | { value: string; label: string }>>;
   /** Format the raw value to a string/number for display. */
   valueFormatter?: (value: any, row: T) => React.ReactNode;
   /** Fully custom cell renderer (badges, avatars, etc.). */

package/dist/index.mjs

@@ -8625,6 +8625,53 @@ function Caret({ pos }) {
   const left = Math.max(12, Math.min(pos.anchorX - pos.left, pos.width - 20));
   return /* @__PURE__ */ jsx("span", { className: "twc-dt__caret", style: { left } });
 }
+function AsyncFilterValue({ col, value, onChange }) {
+  const [opts, setOpts] = React51__default.useState([]);
+  const [loading, setLoading] = React51__default.useState(false);
+  const reqRef = React51__default.useRef(0);
+  const debRef = React51__default.useRef();
+  const load = React51__default.useCallback((query) => {
+    const id = ++reqRef.current;
+    setLoading(true);
+    Promise.resolve(col.loadValueOptions(query)).then(
+      (res) => {
+        if (reqRef.current === id) {
+          setOpts((Array.isArray(res) ? res : []).map((o) => typeof o === "string" ? { value: o, label: o } : o));
+          setLoading(false);
+        }
+      },
+      () => {
+        if (reqRef.current === id) setLoading(false);
+      }
+    );
+  }, [col]);
+  React51__default.useEffect(() => {
+    load("");
+    return () => clearTimeout(debRef.current);
+  }, [load]);
+  const onInput = React51__default.useCallback((q) => {
+    clearTimeout(debRef.current);
+    debRef.current = setTimeout(() => load(q), 250);
+  }, [load]);
+  const selected = Array.isArray(value) ? value : [];
+  const merged = React51__default.useMemo(() => {
+    const seen2 = new Set(opts.map((o) => o.value));
+    return [...selected.filter((v) => !seen2.has(v)).map((v) => ({ value: v, label: String(v) })), ...opts];
+  }, [opts, selected]);
+  return /* @__PURE__ */ jsx(
+    MultiSelect,
+    {
+      portal: true,
+      placeholder: "Any of\u2026",
+      value: selected,
+      options: merged,
+      filter: false,
+      loading,
+      onInputChange: onInput,
+      onChange
+    }
+  );
+}
 function EditCell({ col, value, options, onChange, onCommit, onCommitValue, onCancel, onKeyDown }) {
   const ref = React51__default.useRef(null);
   const isSelect = col.editType === "select" || options && col.editType !== "text";
@@ -11273,7 +11320,14 @@ function Datatable({
               }))
             }
           ) }),
-          /* @__PURE__ */ jsx("div", { className: "twc-dt__f-val", children: op.noInput ? null : op.multi ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "twc-dt__f-val", children: op.noInput ? null : op.multi ? col.loadValueOptions ? /* @__PURE__ */ jsx(
+            AsyncFilterValue,
+            {
+              col,
+              value: f.value,
+              onChange: (vals) => setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, value: vals } : x))
+            }
+          ) : /* @__PURE__ */ jsx(
             MultiSelect,
             {
               portal: true,