twico-ui 1.19.1 → 1.20.1

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.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)
+
+
+### Features
+
+* **datatable:** add column filterType, decoupling filter operators from the edit type ([68dbb6e](https://github.com/EncryptionL/twico-ui/commit/68dbb6e80cc3e50fd1072eff5fa8cf2415259ef0)), closes [#271](https://github.com/EncryptionL/twico-ui/issues/271) [263/#267](https://github.com/EncryptionL/twico-ui/issues/267) [#269](https://github.com/EncryptionL/twico-ui/issues/269) [#269](https://github.com/EncryptionL/twico-ui/issues/269) [#270](https://github.com/EncryptionL/twico-ui/issues/270) [#271](https://github.com/EncryptionL/twico-ui/issues/271)
+
 ## [1.19.1](https://github.com/EncryptionL/twico-ui/compare/v1.19.0...v1.19.1) (2026-07-23)
 
 

package/dist/index.cjs

@@ -6769,6 +6769,7 @@ function Select({
         "data-disabled": o.disabled || void 0,
         "data-selected": isSel || void 0,
         "data-active": idx === active || void 0,
+        title: typeof o.label === "string" ? o.label : void 0,
         onMouseEnter: () => {
           if (!o.disabled) setActive(idx);
         },
@@ -8495,13 +8496,15 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 .twc-dt__col-list { max-height: 230px; overflow-y: auto; }
 .twc-dt__col-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-md); cursor: pointer; }
 .twc-dt__col-row:hover { background: var(--color-surface-sunken); }
-.twc-dt__col-row[draggable="true"] { cursor: grab; }
+/* #271 (columns-panel analog of #263/#267): grab lives on the grip only, not the whole row \u2014 the row
+   keeps its 'cursor: pointer' (toggles visibility) and stays a drag source for the mouse. */
 .twc-dt__col-row[data-dragging="true"] { opacity: 0.5; }
 .twc-dt__col-row[data-dropbefore="true"] { box-shadow: inset 0 3px 0 var(--color-primary); }
 .twc-dt__col-row[data-dropafter="true"] { box-shadow: inset 0 -3px 0 var(--color-primary); }
-.twc-dt__col-grip { display: inline-flex; color: var(--color-text-subtle); flex: none; opacity: 0.45; }
+.twc-dt__col-grip { display: inline-flex; color: var(--color-text-subtle); flex: none; opacity: 0.45; cursor: grab; }
 .twc-dt__col-row:hover .twc-dt__col-grip { opacity: 0.8; }
 .twc-dt__col-grip svg { width: 14px; height: 14px; }
+.twc-dt__col-grip:active, .twc-dt__col-row[data-dragging="true"] .twc-dt__col-grip { cursor: grabbing; }
 .twc-dt__col-name { flex: 1; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-dt__col-pins { display: inline-flex; gap: 2px; flex: none; }
 .twc-dt__col-pin { display: inline-grid; place-items: center; width: 24px; height: 24px; border: none; padding: 0; background: transparent; color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-sm); transition: background-color var(--duration-fast), color var(--duration-fast); }
@@ -8639,6 +8642,11 @@ var NUM_OPS = [
 ];
 var opsFor = (type) => type === "number" ? NUM_OPS : STR_OPS;
 var isMultiOp = (op) => op === "isAnyOf";
+var filterTypeOf = (col) => {
+  const ft = col && col.filterType;
+  if (ft === "number" || ft === "string") return ft;
+  return col && col.type === "number" ? "number" : "string";
+};
 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) {
@@ -8721,7 +8729,10 @@ function runDatatableQuery(rows, query, options = {}) {
   let out = Array.isArray(rows) ? rows : [];
   const quick = String(q.quickFilter || "").trim().toLowerCase();
   if (quick) out = out.filter((r2) => searchFields.some((f) => String(gv(f, r2) ?? "").toLowerCase().includes(quick)));
-  for (const f of q.filters || []) out = out.filter((r2) => testFilter(gv(f.field, r2), f.op, f.value, typeOf(f.field)));
+  for (const f of q.filters || []) {
+    const fc = cols.find((c) => c.field === f.field);
+    out = out.filter((r2) => testFilter(gv(f.field, r2), f.op, f.value, filterTypeOf(fc)));
+  }
   if (q.sort && q.sort.field) {
     const { field, dir } = q.sort, numeric = typeOf(field) === "number";
     out = [...out].sort((a, b) => {
@@ -9539,7 +9550,7 @@ function Datatable({
     for (const f of filters) {
       const col = colByField[f.field];
       if (!col) continue;
-      out = out.filter((r2) => testFilter(getColVal(col, r2), f.op, f.value, col.type));
+      out = out.filter((r2) => testFilter(getColVal(col, r2), f.op, f.value, filterTypeOf(col)));
     }
     if (sort) {
       const col = colByField[sort.field];
@@ -9857,7 +9868,7 @@ function Datatable({
   }
   function addFilter(field) {
     const col = colByField[field] || cols[0];
-    setFilters((f) => [...f, { id: Date.now() + Math.random(), field: col.field, op: opsFor(col.type)[0].value, value: "" }]);
+    setFilters((f) => [...f, { id: Date.now() + Math.random(), field: col.field, op: opsFor(filterTypeOf(col))[0].value, value: "" }]);
   }
   function setPin(field, side) {
     setPins((p) => {
@@ -10487,7 +10498,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,
                     {
@@ -11672,7 +11698,7 @@ function Datatable({
       ] }),
       filters.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__empty", style: { padding: "16px 12px" }, children: "No filters applied" }) : filters.map((f) => {
         const col = colByField[f.field] || cols[0];
-        const ops = opsFor(col.type);
+        const ops = opsFor(filterTypeOf(col));
         const op = ops.find((o) => o.value === f.op) || ops[0];
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__frow", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__f-col", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -11684,7 +11710,7 @@ function Datatable({
               options: filterableCols.map((c) => ({ value: c.field, label: c.headerName })),
               onChange: (v) => {
                 const nc = colByField[v];
-                setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, field: v, op: opsFor(nc.type)[0].value, value: "" } : x));
+                setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, field: v, op: opsFor(filterTypeOf(nc))[0].value, value: "" } : x));
               }
             }
           ) }),
@@ -11723,7 +11749,7 @@ function Datatable({
             Input,
             {
               size: "sm",
-              type: col.type === "number" ? "number" : "text",
+              type: filterTypeOf(col) === "number" ? "number" : "text",
               placeholder: "Value",
               value: f.value,
               onChange: (e) => setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, value: e.target.value } : x))