twico-ui 1.15.0 → 1.16.0

package/dist/index.d.cts

@@ -1893,6 +1893,14 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
    *  resolves only rows on the currently loaded page; for cross-page selections use the
    *  complete `selectedKeys` array and apply the `patch` server-side. */
   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
+   *  "Edit" buttons. @default true */
+  showBatchEdit?: boolean;
+  /** Allow-list the column `field`s the built-in batch editor offers. Defaults to every editable
+   *  column. Use it to trim a wide grid's editor **without** touching `editable` (which would also
+   *  disable inline cell editing). */
+  batchEditFields?: string[];
   /** Show a "Go to" page jumper in the footer when there are more than 5 pages. @default true */
   showPageJumper?: boolean;
   /** Click-to-select mode: "row" highlights the clicked row, "cell" highlights a single cell. @default "none" */

package/dist/index.d.ts

@@ -1893,6 +1893,14 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
    *  resolves only rows on the currently loaded page; for cross-page selections use the
    *  complete `selectedKeys` array and apply the `patch` server-side. */
   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
+   *  "Edit" buttons. @default true */
+  showBatchEdit?: boolean;
+  /** Allow-list the column `field`s the built-in batch editor offers. Defaults to every editable
+   *  column. Use it to trim a wide grid's editor **without** touching `editable` (which would also
+   *  disable inline cell editing). */
+  batchEditFields?: string[];
   /** Show a "Go to" page jumper in the footer when there are more than 5 pages. @default true */
   showPageJumper?: boolean;
   /** Click-to-select mode: "row" highlights the clicked row, "cell" highlights a single cell. @default "none" */

package/dist/index.mjs

@@ -8307,12 +8307,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); }
@@ -8327,6 +8332,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); }
@@ -8977,6 +8988,8 @@ function Datatable({
   onRowUpdate,
   onRowsChange,
   onBatchUpdate,
+  showBatchEdit = true,
+  batchEditFields = null,
   showPageJumper = true,
   selectionMode = "none",
   onRowClick,
@@ -10016,9 +10029,14 @@ function Datatable({
       cancelEdit();
     }
   }
+  const batchEditKey = batchEditFields ? batchEditFields.join("\0") : "";
   const batchEditableCols = React51__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__default.useState(null);
   const [batchEditPos, openBatchEdit, closeBatchEdit] = useFloating();
@@ -10453,7 +10471,7 @@ function Datatable({
           " selected"
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "twc-dt__batch-actions", children: [
-          batchEditableCols.length ? /* @__PURE__ */ jsxs("button", { type: "button", className: "twc-dt__batch-btn", onClick: (e) => openBatchEditor(e.currentTarget), children: [
+          showBatchEdit && batchEditableCols.length ? /* @__PURE__ */ jsxs("button", { type: "button", className: "twc-dt__batch-btn", onClick: (e) => openBatchEditor(e.currentTarget), children: [
             /* @__PURE__ */ jsx(Svg, { d: I.pencil }),
             "Edit"
           ] }) : null,
@@ -10942,58 +10960,80 @@ function Datatable({
         ]
       }
     ) : null,
-    batchEdit && batchEditPos ? /* @__PURE__ */ jsxs("div", { className: "twc-dt__pop twc-dt__cfg", style: { top: batchEditPos.top, left: batchEditPos.left, width: 320 }, children: [
-      /* @__PURE__ */ jsx(Caret, { pos: batchEditPos }),
-      /* @__PURE__ */ jsxs("div", { className: "twc-dt__cfg-head", children: [
-        "Edit ",
-        selected.size,
-        " selected ",
-        selected.size === 1 ? "row" : "rows"
-      ] }),
-      /* @__PURE__ */ 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__ */ jsxs("div", { className: "twc-dt__be-row", "data-on": on || void 0, children: [
-          /* @__PURE__ */ jsxs("label", { className: "twc-dt__be-check", children: [
-            /* @__PURE__ */ jsx("input", { type: "checkbox", checked: on, onChange: (e) => setBatchEdit((b) => ({ ...b, fields: { ...b.fields, [c.field]: e.target.checked } })) }),
-            /* @__PURE__ */ jsx("span", { children: c.headerName })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "twc-dt__be-ctl", children: opts ? /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "twc-dt__cfg-foot", children: [
-        /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__cfg-btn", onClick: () => {
-          setBatchEdit(null);
-          closeBatchEdit();
-        }, children: "Cancel" }),
-        /* @__PURE__ */ 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__ */ jsxs("div", { className: "twc-dt__pop twc-dt__cfg", style: { top: batchEditPos.top, left: batchEditPos.left, width: 320 }, children: [
+        /* @__PURE__ */ jsx(Caret, { pos: batchEditPos }),
+        /* @__PURE__ */ jsxs("div", { className: "twc-dt__cfg-head", children: [
+          "Edit ",
+          selected.size,
+          " selected ",
+          selected.size === 1 ? "row" : "rows"
+        ] }),
+        unpicked.length ? /* @__PURE__ */ jsx("div", { className: "twc-dt__be-add", children: /* @__PURE__ */ 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__ */ 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) => {
+          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__ */ jsx("span", { className: "twc-dt__be-name", title: String(c.headerName ?? c.field), children: c.headerName }),
+            /* @__PURE__ */ jsx("div", { className: "twc-dt__be-ctl", children: opts ? /* @__PURE__ */ 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__ */ 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__ */ jsx("button", { type: "button", className: "twc-dt__be-x", "aria-label": `Remove ${String(c.headerName ?? c.field)}`, onClick: () => removeField(c.field), children: /* @__PURE__ */ jsx(Svg, { d: I.x }) })
+          ] }, c.field);
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "twc-dt__cfg-foot", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__cfg-btn", onClick: () => {
+            setBatchEdit(null);
+            closeBatchEdit();
+          }, children: "Cancel" }),
+          /* @__PURE__ */ 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__ */ jsxs(
       "div",
       {