twico-ui 1.20.0 → 1.20.2

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.20.2](https://github.com/EncryptionL/twico-ui/compare/v1.20.1...v1.20.2) (2026-07-24)
+
+
+### Bug Fixes
+
+* **datatable:** restore persisted column order with new columns at their code position ([c1095eb](https://github.com/EncryptionL/twico-ui/commit/c1095eb238239914491ea004a3c297d33c98d69b)), closes [#259](https://github.com/EncryptionL/twico-ui/issues/259) [#284](https://github.com/EncryptionL/twico-ui/issues/284)
+
+## [1.20.1](https://github.com/EncryptionL/twico-ui/compare/v1.20.0...v1.20.1) (2026-07-23)
+
+
+### Bug Fixes
+
+* **datatable:** Esc cancels a cell edit for custom renderEditCell editors ([f886023](https://github.com/EncryptionL/twico-ui/commit/f88602390edf75b1217b5ecd5a659951ce9c7748)), closes [#273](https://github.com/EncryptionL/twico-ui/issues/273)
+
 # [1.20.0](https://github.com/EncryptionL/twico-ui/compare/v1.19.1...v1.20.0) (2026-07-23)
 
 

package/dist/index.cjs

@@ -8647,6 +8647,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) {
@@ -9222,9 +9253,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)));
@@ -9336,12 +9365,7 @@ function Datatable({
   }));
   const pivotActive = pivotOn && pivotConfig.rows.length > 0 && pivotConfig.values.length > 0;
   React51__namespace.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__namespace.default.useRef(false);
   React51__namespace.default.useEffect(() => {
@@ -10498,7 +10522,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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
                     EditCell,
                     {