twico-ui 1.20.0 → 1.20.2

package/dist/index.d.cts

@@ -2094,7 +2094,9 @@ interface DatatableColumn<T = any> {
    *  Providing it makes the column editable (unless `editable: false`) and takes precedence over the
    *  built-in select/text editor. Call `commit(nextValue)` to save (fires `onRowUpdate`/`onRowsChange`)
    *  or `cancel()` to discard. Twico overlay dropdowns (portaled as `.twc-pop`) are exempt from the
-   *  cell's outside-click auto-cancel, so a Combobox popover works inside the cell. */
+   *  cell's outside-click auto-cancel, so a Combobox popover works inside the cell. **Escape cancels**
+   *  the edit automatically (the wrapper calls `cancel()`), so you needn't wire a keydown — stop
+   *  propagation on Escape only if your control needs it (e.g. to close its own open dropdown). */
   renderEditCell?: (args: { value: any; row: T; field: string; commit: (nextValue: any) => void; cancel: () => void }) => React.ReactNode;
   /** Custom control for this column's clause in the **batch** editor (#247) — the counterpart of
    *  `renderEditCell` for the "Edit N selected rows" popover. Use it when the value is backed by a large,

package/dist/index.d.ts

@@ -2094,7 +2094,9 @@ interface DatatableColumn<T = any> {
    *  Providing it makes the column editable (unless `editable: false`) and takes precedence over the
    *  built-in select/text editor. Call `commit(nextValue)` to save (fires `onRowUpdate`/`onRowsChange`)
    *  or `cancel()` to discard. Twico overlay dropdowns (portaled as `.twc-pop`) are exempt from the
-   *  cell's outside-click auto-cancel, so a Combobox popover works inside the cell. */
+   *  cell's outside-click auto-cancel, so a Combobox popover works inside the cell. **Escape cancels**
+   *  the edit automatically (the wrapper calls `cancel()`), so you needn't wire a keydown — stop
+   *  propagation on Escape only if your control needs it (e.g. to close its own open dropdown). */
   renderEditCell?: (args: { value: any; row: T; field: string; commit: (nextValue: any) => void; cancel: () => void }) => React.ReactNode;
   /** Custom control for this column's clause in the **batch** editor (#247) — the counterpart of
    *  `renderEditCell` for the "Edit N selected rows" popover. Use it when the value is backed by a large,

package/dist/index.mjs

@@ -8626,6 +8626,37 @@ var filterTypeOf = (col) => {
   if (ft === "number" || ft === "string") return ft;
   return col && col.type === "number" ? "number" : "string";
 };
+function mergeColOrder(saved, propFields) {
+  const known = new Set(propFields);
+  const result = saved.filter((f) => known.has(f));
+  const placed = new Set(result);
+  for (let i = 0; i < propFields.length; i++) {
+    const f = propFields[i];
+    if (!f || placed.has(f)) continue;
+    let at = 0;
+    for (let j = i - 1; j >= 0; j--) {
+      const idx = result.indexOf(propFields[j]);
+      if (idx !== -1) {
+        at = idx + 1;
+        break;
+      }
+    }
+    if (at === 0) {
+      let before = result.length;
+      for (let j = i + 1; j < propFields.length; j++) {
+        const idx = result.indexOf(propFields[j]);
+        if (idx !== -1) {
+          before = idx;
+          break;
+        }
+      }
+      at = before;
+    }
+    result.splice(at, 0, f);
+    placed.add(f);
+  }
+  return result;
+}
 var getColVal = (col, row) => col && col.valueGetter ? col.valueGetter(row) : row == null ? void 0 : row[col && col.field];
 var diffValueNode = (col, v, row) => col.renderCell ? col.renderCell(v, row) : col.valueFormatter ? col.valueFormatter(v, row) : v == null ? "" : v;
 function renderDiffCell(col, val, row) {
@@ -9201,9 +9232,7 @@ function Datatable({
     if (typeof s.page === "number" && !pageControlled) setInternalPage(Math.max(0, Math.floor(s.page)));
     if (typeof s.pageSize === "number" && !pageSizeControlled) setInternalRpp(s.pageSize > 0 ? s.pageSize : 10);
     if (Array.isArray(s.columnOrder)) {
-      const savedOrder = s.columnOrder.filter((f) => known.has(f));
-      const missing = cols.map((c) => c.field).filter((f) => f && !savedOrder.includes(f));
-      setOrder([...savedOrder, ...missing]);
+      setOrder(mergeColOrder(s.columnOrder, cols.map((c) => c.field).filter(Boolean)));
     }
     if (s.columnWidths && typeof s.columnWidths === "object") setWidths(Object.fromEntries(Object.entries(s.columnWidths).filter(([f, w]) => known.has(f) && typeof w === "number")));
     if (s.columnVisibility && typeof s.columnVisibility === "object") setHidden(new Set(Object.keys(s.columnVisibility).filter((f) => known.has(f) && s.columnVisibility[f] === false)));
@@ -9315,12 +9344,7 @@ function Datatable({
   }));
   const pivotActive = pivotOn && pivotConfig.rows.length > 0 && pivotConfig.values.length > 0;
   React51__default.useEffect(() => {
-    setOrder((prev) => {
-      const fields = columns.map((c) => c.field);
-      const kept = prev.filter((f) => fields.includes(f));
-      const added = fields.filter((f) => !kept.includes(f));
-      return [...kept, ...added];
-    });
+    setOrder((prev) => mergeColOrder(prev, columns.map((c) => c.field).filter(Boolean)));
   }, [columns]);
   const densitySyncedRef = React51__default.useRef(false);
   React51__default.useEffect(() => {
@@ -10477,7 +10501,22 @@ function Datatable({
                     // async Combobox, …) and drives the lifecycle via commit/cancel. Wrapped in
                     // .twc-dt__editor-wrap so inline clicks (and any .twc-pop portal dropdown) don't
                     // trip the outside-click auto-cancel.
-                    /* @__PURE__ */ jsx("div", { className: "twc-dt__editor-wrap", children: c.renderEditCell({ value: editing.value, row, field: c.field, commit: (v) => commitEdit(v), cancel: cancelEdit }) })
+                    // #273: the wrapper handles Escape → cancel so it works for every custom editor without
+                    // each having to wire a keydown (they only get commit/cancel). A custom control that
+                    // wants Escape itself (e.g. to close its own open dropdown) stops propagation first.
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "twc-dt__editor-wrap",
+                        onKeyDown: (e) => {
+                          if (e.key === "Escape") {
+                            e.stopPropagation();
+                            cancelEdit();
+                          }
+                        },
+                        children: c.renderEditCell({ value: editing.value, row, field: c.field, commit: (v) => commitEdit(v), cancel: cancelEdit })
+                      }
+                    )
                   ) : /* @__PURE__ */ jsx(
                     EditCell,
                     {