twico-ui 1.13.0 → 1.14.1

package/dist/index.d.cts

@@ -1762,6 +1762,14 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   /** Restrict the toolbar quick-search to these column `field`s (client mode); defaults to every
    *  visible column. Mirrors `runDatatableQuery`'s `options.searchFields`. */
   searchFields?: string[];
+  /** Render the built-in toolbar quick-search box. Set `false` to externalize search — supply your
+   *  own input wired to `quickFilter`/`onQuickFilterChange` (mirrors CardGrid). @default true */
+  searchable?: boolean;
+  /** Controlled quick-search string; pair with `onQuickFilterChange` to drive search from outside
+   *  (the value still flows into client filtering and the `onServerChange` query). */
+  quickFilter?: string;
+  /** Fires with the new quick-search string as the user types (and when a host sets it). */
+  onQuickFilterChange?: (value: string) => void;
   /**
    * Actions shown in the toolbar when one or more rows are selected (requires
    * `checkboxSelection`). Each handler receives the selected keys, the resolved
@@ -1982,6 +1990,13 @@ interface DatatableColumn<T = any> {
   editable?: boolean;
   /** Editor type. "select" (or any column with `valueOptions`) renders a dropdown; else a text/number input by column type. */
   editType?: "text" | "number" | "select";
+  /** Full escape hatch for the inline cell editor — render your own control (a searchable / creatable /
+   *  async `Combobox`, a `MasterCombobox`, …) for a value backed by a large, extensible vocabulary.
+   *  Providing it makes the column editable (unless `editable: false`) and takes precedence over the
+   *  built-in select/text editor. Call `commit(nextValue)` to save (fires `onRowUpdate`/`onRowsChange`)
+   *  or `cancel()` to discard. Twico overlay dropdowns (portaled as `.twc-pop`) are exempt from the
+   *  cell's outside-click auto-cancel, so a Combobox popover works inside the cell. */
+  renderEditCell?: (args: { value: any; row: T; field: string; commit: (nextValue: any) => void; cancel: () => void }) => React.ReactNode;
   /** Hide the column header ⋮ menu. @default false */
   disableColumnMenu?: boolean;
   /** Start with this column's cell text wrapped onto multiple lines (the row grows down) instead of
@@ -1989,6 +2004,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

@@ -1762,6 +1762,14 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   /** Restrict the toolbar quick-search to these column `field`s (client mode); defaults to every
    *  visible column. Mirrors `runDatatableQuery`'s `options.searchFields`. */
   searchFields?: string[];
+  /** Render the built-in toolbar quick-search box. Set `false` to externalize search — supply your
+   *  own input wired to `quickFilter`/`onQuickFilterChange` (mirrors CardGrid). @default true */
+  searchable?: boolean;
+  /** Controlled quick-search string; pair with `onQuickFilterChange` to drive search from outside
+   *  (the value still flows into client filtering and the `onServerChange` query). */
+  quickFilter?: string;
+  /** Fires with the new quick-search string as the user types (and when a host sets it). */
+  onQuickFilterChange?: (value: string) => void;
   /**
    * Actions shown in the toolbar when one or more rows are selected (requires
    * `checkboxSelection`). Each handler receives the selected keys, the resolved
@@ -1982,6 +1990,13 @@ interface DatatableColumn<T = any> {
   editable?: boolean;
   /** Editor type. "select" (or any column with `valueOptions`) renders a dropdown; else a text/number input by column type. */
   editType?: "text" | "number" | "select";
+  /** Full escape hatch for the inline cell editor — render your own control (a searchable / creatable /
+   *  async `Combobox`, a `MasterCombobox`, …) for a value backed by a large, extensible vocabulary.
+   *  Providing it makes the column editable (unless `editable: false`) and takes precedence over the
+   *  built-in select/text editor. Call `commit(nextValue)` to save (fires `onRowUpdate`/`onRowsChange`)
+   *  or `cancel()` to discard. Twico overlay dropdowns (portaled as `.twc-pop`) are exempt from the
+   *  cell's outside-click auto-cancel, so a Combobox popover works inside the cell. */
+  renderEditCell?: (args: { value: any; row: T; field: string; commit: (nextValue: any) => void; cancel: () => void }) => React.ReactNode;
   /** Hide the column header ⋮ menu. @default false */
   disableColumnMenu?: boolean;
   /** Start with this column's cell text wrapped onto multiple lines (the row grows down) instead of
@@ -1989,6 +2004,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

@@ -7070,7 +7070,8 @@ var FIELD_CSS2 = `
 .twc-field__req { color: var(--color-danger); }
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
-
+`;
+var INPUT_EXTRA_CSS = `
 .twc-input {
   --_h: var(--control-h-md);
   display: flex; align-items: center; gap: var(--space-2);
@@ -7079,6 +7080,7 @@ var FIELD_CSS2 = `
   background: var(--color-surface);
   border: var(--border-thin) solid var(--color-border);
   border-radius: var(--radius-md);
+  overflow: hidden;
   transition: border-color var(--duration-fast) var(--ease-standard),
               box-shadow var(--duration-fast) var(--ease-standard),
               background-color var(--duration-fast) var(--ease-standard);
@@ -7112,9 +7114,6 @@ var FIELD_CSS2 = `
 .twc-input__reveal:hover { background: var(--color-surface-sunken); color: var(--color-text); }
 .twc-input__reveal:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-input__reveal svg { width: 17px; height: 17px; }
-`;
-var INPUT_EXTRA_CSS = `
-.twc-input { overflow: hidden; }
 .twc-input__addon { align-self: stretch; display: inline-flex; align-items: center; padding-inline: var(--space-3);
   background: var(--color-surface-sunken); color: var(--color-text-muted); font-size: var(--text-sm);
   font-weight: var(--font-semibold); white-space: nowrap; flex: none; }
@@ -8625,6 +8624,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";
@@ -8825,6 +8871,9 @@ function Datatable({
   rowGrouping = [],
   rowNumbers = false,
   searchFields = null,
+  searchable = true,
+  quickFilter,
+  onQuickFilterChange,
   rowPinning = false,
   rowReorder = false,
   rowResize = false,
@@ -8907,7 +8956,13 @@ function Datatable({
     return { left, right };
   });
   const [density, setDensity] = React51__default.useState(densityProp);
-  const [quick, setQuick] = React51__default.useState("");
+  const [internalQuick, setInternalQuick] = React51__default.useState("");
+  const quick = quickFilter !== void 0 ? quickFilter : internalQuick;
+  const commitQuick = (v) => {
+    onQuickFilterChange?.(v);
+    if (quickFilter === void 0) setInternalQuick(v);
+    commitPage(0);
+  };
   const [selected, setSelected] = React51__default.useState(() => /* @__PURE__ */ new Set());
   const [activeRow, setActiveRow] = React51__default.useState(null);
   const [activeCell, setActiveCell] = React51__default.useState(null);
@@ -9787,7 +9842,7 @@ function Datatable({
     setSelected(/* @__PURE__ */ new Set());
   }
   const [editing, setEditing] = React51__default.useState(null);
-  const isColEditable = (c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false));
+  const isColEditable = (c) => c.type !== "actions" && c.editable !== false && (c.editable === true || c.renderEditCell != null || editMode);
   function beginEdit(rowK, col, row) {
     if (!isColEditable(col)) return;
     setEditing({ key: rowK, field: col.field, value: row[col.field] ?? "" });
@@ -10118,7 +10173,13 @@ function Datatable({
                   !checkboxSelection && reorderable && ci === 0 && !isEditing ? /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, maxWidth: "100%" }, children: [
                     rowHandle(k, midIdx, row),
                     /* @__PURE__ */ jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: isActions ? renderActions(c, row) : c.renderCell ? c.renderCell(val, row) : c.valueFormatter ? c.valueFormatter(val, row) : val })
-                  ] }) : isEditing ? /* @__PURE__ */ jsx(
+                  ] }) : isEditing ? c.renderEditCell ? (
+                    // #236: full escape hatch — the host drops in its own editor (searchable/creatable/
+                    // async Combobox, …) and drives the lifecycle via commit/cancel. Wrapped in
+                    // .twc-dt__editor-wrap so inline clicks (and any .twc-pop portal dropdown) don't
+                    // trip the outside-click auto-cancel.
+                    /* @__PURE__ */ jsx("div", { className: "twc-dt__editor-wrap", children: c.renderEditCell({ value: editing.value, row, field: c.field, commit: (v) => commitEdit(v), cancel: cancelEdit }) })
+                  ) : /* @__PURE__ */ jsx(
                     EditCell,
                     {
                       col: c,
@@ -10408,13 +10469,10 @@ function Datatable({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ jsxs("div", { className: "twc-dt__search", children: [
+      searchable ? /* @__PURE__ */ jsxs("div", { className: "twc-dt__search", children: [
         /* @__PURE__ */ jsx(Svg, { d: I.search }),
-        /* @__PURE__ */ jsx("input", { placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => {
-          setQuick(e.target.value);
-          commitPage(0);
-        } })
-      ] })
+        /* @__PURE__ */ jsx("input", { placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => commitQuick(e.target.value) })
+      ] }) : null
     ] }),
     !pivotActive && activeGroupBy.length ? /* @__PURE__ */ jsxs("div", { className: "twc-dt__groupbar", children: [
       /* @__PURE__ */ jsx(Svg, { d: I.group }),
@@ -11273,7 +11331,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,