twico-ui 1.41.0 → 1.41.1

package/dist/index.d.cts

@@ -2051,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

@@ -2051,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"). */
@@ -10462,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)
   );
@@ -11337,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;
@@ -11368,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);
         }
       }
@@ -11380,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;
@@ -11472,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();
@@ -11506,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();
@@ -11522,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();
@@ -13078,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] ?? "" } }));
       };
@@ -13111,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: [