twico-ui 1.41.0 → 1.41.1

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+## [1.41.1](https://github.com/EncryptionL/twico-ui/compare/v1.41.0...v1.41.1) (2026-09-24)
+
+
+### Bug Fixes
+
+* **button:** make the neutral pressed tone legible in dark mode ([7cd0cf0](https://github.com/EncryptionL/twico-ui/commit/7cd0cf019b44be2246b2dde870325fffc2c9228c)), closes [#411](https://github.com/EncryptionL/twico-ui/issues/411) [#0b1222](https://github.com/EncryptionL/twico-ui/issues/0b1222) [#0f172a](https://github.com/EncryptionL/twico-ui/issues/0f172a) [#411](https://github.com/EncryptionL/twico-ui/issues/411)
+* **datatable:** apply per-row editable to batch write ([#428](https://github.com/EncryptionL/twico-ui/issues/428)) + reveal once per activeCell ([#429](https://github.com/EncryptionL/twico-ui/issues/429)) ([363044f](https://github.com/EncryptionL/twico-ui/commit/363044f10c4dafcc90caf68b5d8464a7ccff7e41)), closes [#424](https://github.com/EncryptionL/twico-ui/issues/424)
+* **datatable:** make batch keys×patch safe for mixed columns ([#428](https://github.com/EncryptionL/twico-ui/issues/428)) + converge virtualized reveal ([#429](https://github.com/EncryptionL/twico-ui/issues/429)) ([394a79c](https://github.com/EncryptionL/twico-ui/commit/394a79caacc8136403fa6b5386a53cd6b1d64021))
+
 # [1.41.0](https://github.com/EncryptionL/twico-ui/compare/v1.40.0...v1.41.0) (2026-09-23)
 
 

package/dist/index.cjs

@@ -441,7 +441,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); }
@@ -1739,7 +1742,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"). */
@@ -10483,7 +10490,7 @@ function Datatable({
   );
   const effectiveHidden = React53__namespace.default.useMemo(() => combineSources.size ? /* @__PURE__ */ new Set([...hidden, ...combineSources]) : hidden, [hidden, combineSources]);
   const effectiveWrapped = React53__namespace.default.useMemo(() => stackCombineTargets.size ? /* @__PURE__ */ new Set([...wrapped, ...stackCombineTargets]) : wrapped, [wrapped, stackCombineTargets]);
-  const visibleCols = cols.filter((c) => !effectiveHidden.has(c.field));
+  const visibleCols = React53__namespace.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)
   );
@@ -11358,12 +11365,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__namespace.default.useRef(offsets);
+  revealOffsetsRef.current = offsets;
+  const revealMidRef = React53__namespace.default.useRef(keyIndexMid);
+  revealMidRef.current = keyIndexMid;
   React53__namespace.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;
@@ -11389,10 +11402,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);
         }
       }
@@ -11401,7 +11416,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__namespace.default.useEffect(() => {
     if (!activeCellControlled || !activeCellVal) {
       jumpAppliedRef.current = null;
@@ -11493,6 +11508,10 @@ function Datatable({
     [cols, editMode, batchEditKey]
     // eslint-disable-line react-hooks/exhaustive-deps
   );
+  const batchEditableColsSel = React53__namespace.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__namespace.default.useState(null);
   const [batchEditPos, openBatchEdit, closeBatchEdit] = useFloating();
@@ -11527,7 +11546,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();
@@ -11543,20 +11562,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();
@@ -13099,8 +13125,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] ?? "" } }));
       };
@@ -13132,7 +13158,11 @@ function Datatable({
             onChange: addField
           }
         ) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__cfg-list", children: pickedCols.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__be-empty", children: "Pick a column to set its value on all selected rows." }) : pickedCols.map((c, i) => {
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "twc-dt__be-row", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__be-name", title: colLabel(c), children: [