twico-ui 1.40.0 → 1.41.1

package/dist/index.d.cts

@@ -1665,6 +1665,11 @@ interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
   value?: string | null;
   /** Uncontrolled initial value. */
   defaultValue?: string | null;
+  /** Seed the search *text* with this string each time the menu opens (caret placed at the end), without emitting it as
+   *  an `onInputChange`. It is matched against option labels/descriptions like any typed query — not the option
+   *  `value` — so to open a cell editor pre-filled on the current selection, pass its **label** (e.g. `"Japan"`),
+   *  not its value (`"jp"`). */
+  defaultQuery?: string;
   /** Called with the chosen option's value, or `null` when cleared via `clearable`. */
   onChange?: (value: string | null) => void;
   /** Show a clear (×) affix when a value is selected. */
@@ -1680,6 +1685,9 @@ interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
   minWidth?: number;
   /** Called with the raw query on every keystroke — drive a debounced remote fetch (with `loading` + `filter={false}`). */
   onInputChange?: (query: string) => void;
+  /** Called with `true` when the menu opens and `false` when it closes (including when `close()` silently resets the
+   *  typed query) — a host staging that query (e.g. a cell editor) can withdraw it on close. */
+  onOpenChange?: (open: boolean) => void;
   /** Client-side filtering: `false` shows options as-is (server-ranked); a function replaces the default label/description match. */
   filter?: boolean | ((option: ComboboxOption, query: string) => boolean);
   /** Show a loading row instead of the option list / empty state. @default false */
@@ -2043,10 +2051,18 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   /** Controlled-rows callback: receives the full next rows array after an edit (client mode). */
   onRowsChange?: (rows: T[]) => void;
   /** Fired when the built-in batch editor applies columns across selected rows:
-   *  (changedRows, patch, selectedKeys). The selection-toolbar "Edit" button appears
-   *  automatically when there are editable columns. Server-mode caveat: `changedRows`
-   *  resolves only rows on the currently loaded page; for cross-page selections use the
-   *  complete `selectedKeys` array and apply the `patch` server-side. */
+   *  `(changedRows, patch, selectedKeys)`. The selection-toolbar "Edit" button appears
+   *  automatically when there are editable columns.
+   *  - `changedRows` is **authoritative**: each row carries exactly the fields it may change
+   *    (a per-row `editable` predicate (#424/#428) is applied per cell). Persist these for a
+   *    complete, cell-precise write of the loaded page.
+   *  - `patch` is the column-uniform union of the picked field values.
+   *  - `selectedKeys` are the keys a `keys × patch` write can safely apply the **whole** patch
+   *    to — loaded rows on which **every** picked column is editable (so it never touches a
+   *    locked cell), plus any selected key on an **unloaded** page (which can't be predicate-
+   *    tested client-side — you apply and enforce the predicate server-side). For a mixed
+   *    batch where a row is editable on only some picked columns, that row is in `changedRows`
+   *    but not `selectedKeys`; use `changedRows` for the exact per-cell result. */
   onBatchUpdate?: (changedRows: T[], patch: Record<string, any>, selectedKeys: Array<string | number>) => void;
   /** Render the built-in "Edit" button in the selection toolbar (the batch editor). Set `false` to
    *  suppress it and ship your own batch-edit action via `batchActions` — otherwise you'd get two

package/dist/index.d.ts

@@ -1665,6 +1665,11 @@ interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
   value?: string | null;
   /** Uncontrolled initial value. */
   defaultValue?: string | null;
+  /** Seed the search *text* with this string each time the menu opens (caret placed at the end), without emitting it as
+   *  an `onInputChange`. It is matched against option labels/descriptions like any typed query — not the option
+   *  `value` — so to open a cell editor pre-filled on the current selection, pass its **label** (e.g. `"Japan"`),
+   *  not its value (`"jp"`). */
+  defaultQuery?: string;
   /** Called with the chosen option's value, or `null` when cleared via `clearable`. */
   onChange?: (value: string | null) => void;
   /** Show a clear (×) affix when a value is selected. */
@@ -1680,6 +1685,9 @@ interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
   minWidth?: number;
   /** Called with the raw query on every keystroke — drive a debounced remote fetch (with `loading` + `filter={false}`). */
   onInputChange?: (query: string) => void;
+  /** Called with `true` when the menu opens and `false` when it closes (including when `close()` silently resets the
+   *  typed query) — a host staging that query (e.g. a cell editor) can withdraw it on close. */
+  onOpenChange?: (open: boolean) => void;
   /** Client-side filtering: `false` shows options as-is (server-ranked); a function replaces the default label/description match. */
   filter?: boolean | ((option: ComboboxOption, query: string) => boolean);
   /** Show a loading row instead of the option list / empty state. @default false */
@@ -2043,10 +2051,18 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   /** Controlled-rows callback: receives the full next rows array after an edit (client mode). */
   onRowsChange?: (rows: T[]) => void;
   /** Fired when the built-in batch editor applies columns across selected rows:
-   *  (changedRows, patch, selectedKeys). The selection-toolbar "Edit" button appears
-   *  automatically when there are editable columns. Server-mode caveat: `changedRows`
-   *  resolves only rows on the currently loaded page; for cross-page selections use the
-   *  complete `selectedKeys` array and apply the `patch` server-side. */
+   *  `(changedRows, patch, selectedKeys)`. The selection-toolbar "Edit" button appears
+   *  automatically when there are editable columns.
+   *  - `changedRows` is **authoritative**: each row carries exactly the fields it may change
+   *    (a per-row `editable` predicate (#424/#428) is applied per cell). Persist these for a
+   *    complete, cell-precise write of the loaded page.
+   *  - `patch` is the column-uniform union of the picked field values.
+   *  - `selectedKeys` are the keys a `keys × patch` write can safely apply the **whole** patch
+   *    to — loaded rows on which **every** picked column is editable (so it never touches a
+   *    locked cell), plus any selected key on an **unloaded** page (which can't be predicate-
+   *    tested client-side — you apply and enforce the predicate server-side). For a mixed
+   *    batch where a row is editable on only some picked columns, that row is in `changedRows`
+   *    but not `selectedKeys`; use `changedRows` for the exact per-cell result. */
   onBatchUpdate?: (changedRows: T[], patch: Record<string, any>, selectedKeys: Array<string | number>) => void;
   /** Render the built-in "Edit" button in the selection toolbar (the batch editor). Set `false` to
    *  suppress it and ship your own batch-edit action via `batchActions` — otherwise you'd get two

package/dist/index.mjs

@@ -420,7 +420,10 @@ var ICONBTN_CSS = `
 .twc-iconbtn[aria-pressed="true"][data-pressed-tone="warning"] { --_accent: var(--color-warning); --_accent-subtle: var(--color-warning-subtle); --_accent-subtle-fg: var(--color-warning-subtle-fg); }
 .twc-iconbtn[aria-pressed="true"][data-pressed-tone="info"] { --_accent: var(--color-info); --_accent-subtle: var(--color-info-subtle); --_accent-subtle-fg: var(--color-info-subtle-fg); }
 .twc-iconbtn[aria-pressed="true"][data-pressed-tone="danger"] { --_accent: var(--color-danger); --_accent-subtle: var(--color-danger-subtle); --_accent-subtle-fg: var(--color-danger-subtle-fg); }
-.twc-iconbtn[aria-pressed="true"][data-pressed-tone="neutral"] { --_accent: var(--color-border-strong); --_accent-subtle: var(--color-surface-sunken); --_accent-subtle-fg: var(--color-text); }
+/* #430: color-surface-sunken steps toward the page background in dark mode, so a neutral pressed fill was
+   invisible on a surface panel. Fill with color-border (steps away from the background in both themes) + a
+   stronger color-text-subtle edge so the outline also carries the "on" state. Mirrors Button. */
+.twc-iconbtn[aria-pressed="true"][data-pressed-tone="neutral"] { --_accent: var(--color-text-subtle); --_accent-subtle: var(--color-border); --_accent-subtle-fg: var(--color-text); }
 /* #418: keep the pressed look on hover (matching-specificity, after the variant hover rules). */
 .twc-iconbtn[aria-pressed="true"]:hover:not(:disabled) { background: var(--_accent-subtle); color: var(--_accent-subtle-fg); border-color: var(--_accent); filter: brightness(0.97); }
 .dark .twc-iconbtn[aria-pressed="true"]:hover:not(:disabled) { filter: brightness(1.25); }
@@ -1718,7 +1721,11 @@ var CSS2 = `
 .twc-btn[aria-pressed="true"][data-pressed-tone="warning"] { --_accent: var(--color-warning); --_accent-subtle: var(--color-warning-subtle); --_accent-subtle-fg: var(--color-warning-subtle-fg); }
 .twc-btn[aria-pressed="true"][data-pressed-tone="info"] { --_accent: var(--color-info); --_accent-subtle: var(--color-info-subtle); --_accent-subtle-fg: var(--color-info-subtle-fg); }
 .twc-btn[aria-pressed="true"][data-pressed-tone="danger"] { --_accent: var(--color-danger); --_accent-subtle: var(--color-danger-subtle); --_accent-subtle-fg: var(--color-danger-subtle-fg); }
-.twc-btn[aria-pressed="true"][data-pressed-tone="neutral"] { --_accent: var(--color-border-strong); --_accent-subtle: var(--color-surface-sunken); --_accent-subtle-fg: var(--color-text); }
+/* #430: color-surface-sunken steps TOWARD the page background in dark mode (0b1222 under 0f172a), so a neutral
+   pressed fill was invisible on a surface panel. Fill with color-border instead \u2014 it steps AWAY from the
+   background in both themes (lighter in dark, darker in light) \u2014 and strengthen the edge with color-text-subtle
+   so the outline carries the "on" state too (neutral has no meaning-colour to recolour the label). */
+.twc-btn[aria-pressed="true"][data-pressed-tone="neutral"] { --_accent: var(--color-text-subtle); --_accent-subtle: var(--color-border); --_accent-subtle-fg: var(--color-text); }
 /* #418: keep the pressed look under the pointer \u2014 the variant hover rules (0,4,0) otherwise beat the base
    pressed rule (0,2,0). This matching-specificity rule, source-ordered after them, restores the fill/fg/border
    (resetting the text colour too, so solid stays legible \u2014 incl. tone="danger"). */
@@ -6328,6 +6335,7 @@ function Combobox({
   options,
   value,
   defaultValue = null,
+  defaultQuery,
   onChange,
   clearable = false,
   disabled = false,
@@ -6335,6 +6343,7 @@ function Combobox({
   portal = true,
   minWidth = 0,
   onInputChange,
+  onOpenChange,
   filter,
   loading = false,
   emptyText = "No results found",
@@ -6451,9 +6460,18 @@ function Combobox({
   React53__default.useEffect(() => {
     setActive(0);
   }, [query]);
+  const onOpenChangeRef = React53__default.useRef(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  const prevOpenRef = React53__default.useRef(open);
+  React53__default.useEffect(() => {
+    if (prevOpenRef.current !== open) {
+      prevOpenRef.current = open;
+      onOpenChangeRef.current?.(open);
+    }
+  }, [open]);
   React53__default.useEffect(() => {
     if (!open) return;
-    const idx = flat.findIndex((o) => o.value === current);
+    const idx = visible.findIndex((o) => o.value === current);
     setActive(idx >= 0 ? idx : 0);
   }, [open]);
   React53__default.useEffect(() => {
@@ -6480,8 +6498,13 @@ function Combobox({
   }, [active, open, virtualized, rows, listH]);
   function openMenu() {
     if (disabled) return;
-    setQuery("");
+    const seed = defaultQuery || "";
+    setQuery(seed);
     setOpen(true);
+    if (seed) requestAnimationFrame(() => {
+      const el = inputRef.current;
+      if (el) el.setSelectionRange(seed.length, seed.length);
+    });
   }
   function close() {
     setOpen(false);
@@ -10446,7 +10469,7 @@ function Datatable({
   );
   const effectiveHidden = React53__default.useMemo(() => combineSources.size ? /* @__PURE__ */ new Set([...hidden, ...combineSources]) : hidden, [hidden, combineSources]);
   const effectiveWrapped = React53__default.useMemo(() => stackCombineTargets.size ? /* @__PURE__ */ new Set([...wrapped, ...stackCombineTargets]) : wrapped, [wrapped, stackCombineTargets]);
-  const visibleCols = cols.filter((c) => !effectiveHidden.has(c.field));
+  const visibleCols = React53__default.useMemo(() => cols.filter((c) => !effectiveHidden.has(c.field)), [cols, effectiveHidden]);
   const colFieldsKey = JSON.stringify(
     cols.filter((c) => typeof c.field === "string" && c.type !== "actions").map((c) => c.field)
   );
@@ -11321,12 +11344,18 @@ function Datatable({
   const revealOn = !!scrollActiveCellIntoView;
   const revealBlock = scrollActiveCellIntoView && typeof scrollActiveCellIntoView === "object" && scrollActiveCellIntoView.block === "center" ? "center" : "nearest";
   const revealInline = scrollActiveCellIntoView && typeof scrollActiveCellIntoView === "object" && scrollActiveCellIntoView.inline === "center" ? "center" : "nearest";
+  const revealRi = activeCellVal ? keyIndex.get(activeCellVal.key) : void 0;
+  const revealCi = activeCellVal ? cellColIndex(activeCellVal.field) : -1;
+  const revealOffsetsRef = React53__default.useRef(offsets);
+  revealOffsetsRef.current = offsets;
+  const revealMidRef = React53__default.useRef(keyIndexMid);
+  revealMidRef.current = keyIndexMid;
   React53__default.useEffect(() => {
     if (!revealOn || !activeCellVal) return void 0;
     const block = revealBlock, inline = revealInline;
-    const ri = keyIndex.get(activeCellVal.key), ci = cellColIndex(activeCellVal.field);
+    const ri = revealRi, ci = revealCi;
     if (ri == null || ci < 0) return void 0;
-    let raf = 0;
+    let raf = 0, tries = 0;
     const reveal = () => {
       const sc = scrollRef.current;
       if (!sc) return;
@@ -11352,10 +11381,12 @@ function Datatable({
           } else if (tR.left < scR.left + leftInset) sc.scrollLeft -= scR.left + leftInset - tR.left;
           else if (tR.right > scR.right - rightInset) sc.scrollLeft += tR.right - (scR.right - rightInset);
         }
-      } else if (virtualizing && offsets) {
-        const mi = keyIndexMid.get(activeCellVal.key);
-        if (mi != null && offsets[mi] != null) {
-          sc.scrollTop = Math.max(0, offsets[mi] - (block === "center" ? sc.clientHeight / 2 : headH));
+      } else if (virtualizing && revealOffsetsRef.current) {
+        const off = revealOffsetsRef.current;
+        const mi = revealMidRef.current.get(activeCellVal.key);
+        if (mi != null && off[mi] != null && tries < 30) {
+          tries += 1;
+          sc.scrollTop = Math.max(0, off[mi] - (block === "center" ? sc.clientHeight / 2 : headH));
           raf = requestAnimationFrame(reveal);
         }
       }
@@ -11364,7 +11395,7 @@ function Datatable({
     return () => {
       if (raf) cancelAnimationFrame(raf);
     };
-  }, [activeCellVal?.key, activeCellVal?.field, revealOn, revealBlock, revealInline, keyIndex, cellColIndex, virtualizing, offsets, keyIndexMid, headH]);
+  }, [activeCellVal?.key, activeCellVal?.field, revealOn, revealBlock, revealInline, revealRi, revealCi, virtualizing, headH]);
   React53__default.useEffect(() => {
     if (!activeCellControlled || !activeCellVal) {
       jumpAppliedRef.current = null;
@@ -11456,6 +11487,10 @@ function Datatable({
     [cols, editMode, batchEditKey]
     // eslint-disable-line react-hooks/exhaustive-deps
   );
+  const batchEditableColsSel = React53__default.useMemo(
+    () => batchEditableCols.filter((c) => typeof c.editable !== "function" || selectedRows.some((r2) => c.editable(r2, { field: c.field }))),
+    [batchEditableCols, selectedRows]
+  );
   const hasBatchEditor = showBatchEdit && batchEditableCols.length > 0;
   const [batchEdit, setBatchEdit] = React53__default.useState(null);
   const [batchEditPos, openBatchEdit, closeBatchEdit] = useFloating();
@@ -11490,7 +11525,7 @@ function Datatable({
   }, [batchEdit, selected.size, closeBatchEdit]);
   function applyBatchEdit() {
     if (!batchEdit) return;
-    const active = batchEditableCols.filter((c) => batchEdit.fields[c.field]);
+    const active = batchEditableColsSel.filter((c) => batchEdit.fields[c.field]);
     if (!active.length) {
       setBatchEdit(null);
       closeBatchEdit();
@@ -11506,20 +11541,27 @@ function Datatable({
       patch[c.field] = v;
     });
     const selKeys2 = new Set(selected);
+    const loadedSel = /* @__PURE__ */ new Set();
     const changedRows = [];
+    const safeKeys = [];
     const nextAll = rows.map((r2, i) => {
       const k = keyOf(r2, i);
       if (!selKeys2.has(k)) return r2;
+      loadedSel.add(k);
       const rowPatch = {};
+      let allEditable = true;
       for (const c of active) {
         if (typeof c.editable !== "function" || c.editable(r2, { field: c.field })) rowPatch[c.field] = patch[c.field];
+        else allEditable = false;
       }
+      if (allEditable) safeKeys.push(k);
       if (!Object.keys(rowPatch).length) return r2;
       const updated = { ...r2, ...rowPatch };
       changedRows.push(updated);
       return updated;
     });
-    onBatchUpdate?.(changedRows, patch, [...selected]);
+    for (const k of selKeys2) if (!loadedSel.has(k)) safeKeys.push(k);
+    onBatchUpdate?.(changedRows, patch, safeKeys);
     onRowsChange?.(nextAll);
     setBatchEdit(null);
     closeBatchEdit();
@@ -13062,8 +13104,8 @@ function Datatable({
       }
     ) : null,
     batchEdit && batchEditPos ? (() => {
-      const pickedCols = Object.keys(batchEdit.fields).filter((f) => batchEdit.fields[f]).map((f) => batchEditableCols.find((c) => c.field === f)).filter(Boolean);
-      const unpicked = batchEditableCols.filter((c) => !batchEdit.fields[c.field]);
+      const pickedCols = Object.keys(batchEdit.fields).filter((f) => batchEdit.fields[f]).map((f) => batchEditableColsSel.find((c) => c.field === f)).filter(Boolean);
+      const unpicked = batchEditableColsSel.filter((c) => !batchEdit.fields[c.field]);
       const addField = (f) => {
         if (f) setBatchEdit((b) => ({ ...b, fields: { ...b.fields, [f]: true }, values: { ...b.values, [f]: b.values[f] ?? "" } }));
       };
@@ -13095,7 +13137,11 @@ function Datatable({
             onChange: addField
           }
         ) }) : null,
-        /* @__PURE__ */ jsx("div", { className: "twc-dt__cfg-list", children: pickedCols.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-dt__be-empty", children: "Pick a column to set its value on all selected rows." }) : pickedCols.map((c, i) => {
+        /* @__PURE__ */ jsx("div", { className: "twc-dt__cfg-list", children: pickedCols.length === 0 ? (
+          // #428: when a predicate leaves no column editable for the current selection, say so instead of
+          // inviting a pick that can't be made (the "Add a column…" picker is hidden when unpicked is empty).
+          /* @__PURE__ */ jsx("div", { className: "twc-dt__be-empty", children: unpicked.length ? "Pick a column to set its value on all selected rows." : "No columns are editable for the current selection." })
+        ) : pickedCols.map((c, i) => {
           const opts = c.valueOptions ? c.valueOptions.map((o) => typeof o === "string" ? { value: o, label: o } : o) : null;
           return /* @__PURE__ */ jsxs("div", { className: "twc-dt__be-row", children: [
             /* @__PURE__ */ jsxs("span", { className: "twc-dt__be-name", title: colLabel(c), children: [