twico-ui 1.15.0 → 1.16.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.16.0](https://github.com/EncryptionL/twico-ui/compare/v1.15.1...v1.16.0) (2026-07-15)
+
+
+### Features
+
+* **datatable:** batch editor picks columns (searchable) + showBatchEdit/batchEditFields ([#244](https://github.com/EncryptionL/twico-ui/issues/244)) ([82b8806](https://github.com/EncryptionL/twico-ui/commit/82b8806f32f08153f15653de68bdb82ea2dc7ff3)), closes [#236](https://github.com/EncryptionL/twico-ui/issues/236)
+
+## [1.15.1](https://github.com/EncryptionL/twico-ui/compare/v1.15.0...v1.15.1) (2026-07-14)
+
+
+### Bug Fixes
+
+* **datatable:** keep pinned cells opaque in diff mode ([#242](https://github.com/EncryptionL/twico-ui/issues/242)) ([072b15e](https://github.com/EncryptionL/twico-ui/commit/072b15ea73443ad535b3f149d8b620618702b389)), closes [#239](https://github.com/EncryptionL/twico-ui/issues/239)
+
 # [1.15.0](https://github.com/EncryptionL/twico-ui/compare/v1.14.1...v1.15.0) (2026-07-14)
 
 

package/dist/index.cjs

@@ -8328,12 +8328,17 @@ var DT_CSS = `
 .twc-dt__cfg-btn:hover { background: var(--color-surface-sunken); }
 .twc-dt__cfg-btn[data-primary="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-fg); }
 .twc-dt__cfg-btn[data-primary="true"]:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
-.twc-dt__be-row { display: flex; align-items: center; gap: 10px; padding: 5px 6px; opacity: 0.6; transition: opacity var(--duration-fast); }
-.twc-dt__be-row[data-on] { opacity: 1; }
-.twc-dt__be-check { display: inline-flex; align-items: center; gap: 7px; width: 120px; flex: none; font-size: var(--text-sm); color: var(--color-text); cursor: pointer; }
-.twc-dt__be-check input { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; flex: none; }
-.twc-dt__be-check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #244: batch editor = pick columns (searchable), then set a value for each. */
+.twc-dt__be-add { padding: 6px 6px 8px; border-bottom: var(--border-thin) solid var(--color-divider); }
+.twc-dt__be-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; }
+.twc-dt__be-name { width: 108px; flex: none; font-size: var(--text-sm); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-dt__be-ctl { flex: 1; min-width: 0; }
+.twc-dt__be-x { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: none;
+  background: transparent; color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-sm);
+  transition: background-color var(--duration-fast), color var(--duration-fast); }
+.twc-dt__be-x:hover { background: var(--color-surface-sunken); color: var(--color-text); }
+.twc-dt__be-x svg { width: 14px; height: 14px; }
+.twc-dt__be-empty { padding: 14px 8px; font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }
 
 /* Pinned rows */
 .twc-dt__row[data-pinned-row] > .twc-dt__td { background: var(--color-primary-subtle); }
@@ -8348,6 +8353,12 @@ var DT_CSS = `
 .twc-dt__row[data-op="added"] > .twc-dt__td { background: color-mix(in srgb, var(--color-success) 7%, transparent); }
 .twc-dt__row[data-op="removed"] > .twc-dt__td { background: color-mix(in srgb, var(--color-danger) 7%, transparent); }
 .twc-dt__row[data-op="modified"] > .twc-dt__td { background: color-mix(in srgb, var(--color-warning) 6%, transparent); }
+/* #242: pinned cells in a diff row must stay OPAQUE (composite the tint over the surface, not over
+   transparent) or the cells scrolling under a sticky column bleed through. Specificity (0,4,0) wins
+   over the (0,3,0) tint above and matches the non-pinned cells' effective color (tint over surface). */
+.twc-dt__row[data-op="added"] > .twc-dt__td[data-pin] { background: color-mix(in srgb, var(--color-success) 7%, var(--color-surface)); }
+.twc-dt__row[data-op="removed"] > .twc-dt__td[data-pin] { background: color-mix(in srgb, var(--color-danger) 7%, var(--color-surface)); }
+.twc-dt__row[data-op="modified"] > .twc-dt__td[data-pin] { background: color-mix(in srgb, var(--color-warning) 6%, var(--color-surface)); }
 .twc-dt__diff-change { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
 .twc-dt__diff-old { text-decoration: line-through; color: var(--color-text-subtle); }
 .twc-dt__diff-new { color: var(--color-success-subtle-fg); font-weight: var(--font-medium); }
@@ -8998,6 +9009,8 @@ function Datatable({
   onRowUpdate,
   onRowsChange,
   onBatchUpdate,
+  showBatchEdit = true,
+  batchEditFields = null,
   showPageJumper = true,
   selectionMode = "none",
   onRowClick,
@@ -10037,9 +10050,14 @@ function Datatable({
       cancelEdit();
     }
   }
+  const batchEditKey = batchEditFields ? batchEditFields.join("\0") : "";
   const batchEditableCols = React51__namespace.default.useMemo(
-    () => cols.filter((c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false))),
-    [cols, editMode]
+    () => {
+      const base = cols.filter((c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false)));
+      return batchEditFields ? base.filter((c) => batchEditFields.includes(c.field)) : base;
+    },
+    [cols, editMode, batchEditKey]
+    // eslint-disable-line react-hooks/exhaustive-deps
   );
   const [batchEdit, setBatchEdit] = React51__namespace.default.useState(null);
   const [batchEditPos, openBatchEdit, closeBatchEdit] = useFloating();
@@ -10474,7 +10492,7 @@ function Datatable({
           " selected"
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__batch-actions", children: [
-          batchEditableCols.length ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-dt__batch-btn", onClick: (e) => openBatchEditor(e.currentTarget), children: [
+          showBatchEdit && batchEditableCols.length ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-dt__batch-btn", onClick: (e) => openBatchEditor(e.currentTarget), children: [
             /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.pencil }),
             "Edit"
           ] }) : null,
@@ -10963,58 +10981,80 @@ function Datatable({
         ]
       }
     ) : null,
-    batchEdit && batchEditPos ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__pop twc-dt__cfg", style: { top: batchEditPos.top, left: batchEditPos.left, width: 320 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Caret, { pos: batchEditPos }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-head", children: [
-        "Edit ",
-        selected.size,
-        " selected ",
-        selected.size === 1 ? "row" : "rows"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__cfg-list", children: batchEditableCols.map((c) => {
-        const on = !!batchEdit.fields[c.field];
-        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", "data-on": on || void 0, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "twc-dt__be-check", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: on, onChange: (e) => setBatchEdit((b) => ({ ...b, fields: { ...b.fields, [c.field]: e.target.checked } })) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: c.headerName })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__be-ctl", children: opts ? /* @__PURE__ */ jsxRuntime.jsx(
-            Select,
-            {
-              size: "sm",
-              portal: true,
-              searchable: true,
-              placeholder: "New value\u2026",
-              value: batchEdit.values[c.field] ?? "",
-              options: opts,
-              disabled: !on,
-              onChange: (v) => setBatchEdit((b) => ({ ...b, fields: { ...b.fields, [c.field]: true }, values: { ...b.values, [c.field]: v } }))
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              size: "sm",
-              type: c.type === "number" || c.type === "currency" ? "number" : "text",
-              placeholder: "New value\u2026",
-              value: batchEdit.values[c.field] ?? "",
-              disabled: !on,
-              onChange: (e) => setBatchEdit((b) => ({ ...b, values: { ...b.values, [c.field]: e.target.value } }))
-            }
-          ) })
-        ] }, c.field);
-      }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-foot", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__cfg-btn", onClick: () => {
-          setBatchEdit(null);
-          closeBatchEdit();
-        }, children: "Cancel" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-dt__cfg-btn", "data-primary": "true", onClick: applyBatchEdit, children: [
-          "Apply to ",
-          selected.size
+    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 addField = (f) => {
+        if (f) setBatchEdit((b) => ({ ...b, fields: { ...b.fields, [f]: true }, values: { ...b.values, [f]: b.values[f] ?? "" } }));
+      };
+      const removeField = (f) => setBatchEdit((b) => {
+        const fields = { ...b.fields };
+        delete fields[f];
+        const values = { ...b.values };
+        delete values[f];
+        return { ...b, fields, values };
+      });
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__pop twc-dt__cfg", style: { top: batchEditPos.top, left: batchEditPos.left, width: 320 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Caret, { pos: batchEditPos }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-head", children: [
+          "Edit ",
+          selected.size,
+          " selected ",
+          selected.size === 1 ? "row" : "rows"
+        ] }),
+        unpicked.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__be-add", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Select,
+          {
+            size: "sm",
+            portal: true,
+            searchable: true,
+            placeholder: "Add a column\u2026",
+            value: "",
+            "aria-label": "Add a column to edit",
+            options: unpicked.map((c) => ({ value: c.field, label: String(c.headerName ?? c.field) })),
+            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) => {
+          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.jsx("span", { className: "twc-dt__be-name", title: String(c.headerName ?? c.field), children: c.headerName }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__be-ctl", children: opts ? /* @__PURE__ */ jsxRuntime.jsx(
+              Select,
+              {
+                size: "sm",
+                portal: true,
+                searchable: true,
+                placeholder: "New value\u2026",
+                value: batchEdit.values[c.field] ?? "",
+                options: opts,
+                onChange: (v) => setBatchEdit((b) => ({ ...b, values: { ...b.values, [c.field]: v } }))
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                size: "sm",
+                type: c.type === "number" || c.type === "currency" ? "number" : "text",
+                placeholder: "New value\u2026",
+                value: batchEdit.values[c.field] ?? "",
+                onChange: (e) => setBatchEdit((b) => ({ ...b, values: { ...b.values, [c.field]: e.target.value } }))
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__be-x", "aria-label": `Remove ${String(c.headerName ?? c.field)}`, onClick: () => removeField(c.field), children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.x }) })
+          ] }, c.field);
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-foot", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__cfg-btn", onClick: () => {
+            setBatchEdit(null);
+            closeBatchEdit();
+          }, children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-dt__cfg-btn", "data-primary": "true", disabled: pickedCols.length === 0, onClick: applyBatchEdit, children: [
+            "Apply to ",
+            selected.size
+          ] })
         ] })
-      ] })
-    ] }) : null,
+      ] });
+    })() : null,
     colMenu && menuPos ? /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {