twico-ui 1.31.0 → 1.31.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.31.1](https://github.com/EncryptionL/twico-ui/compare/v1.31.0...v1.31.1) (2026-08-04)
+
+
+### Bug Fixes
+
+* **datatable:** make the filter And/Or connector a resizable field (no more truncation) ([15698fd](https://github.com/EncryptionL/twico-ui/commit/15698fdee0191e178cfb0a65cb08775c25d20b91)), closes [#289](https://github.com/EncryptionL/twico-ui/issues/289) [#292](https://github.com/EncryptionL/twico-ui/issues/292)
+
 # [1.31.0](https://github.com/EncryptionL/twico-ui/compare/v1.30.0...v1.31.0) (2026-08-04)
 
 

package/dist/index.cjs

@@ -8212,7 +8212,6 @@ function classifyDiff(from = [], to = [], columns = [], rowKey, opts = {}) {
   return { rows, counts };
 }
 var DT_FILTER_PANEL_W = 620;
-var DT_FILTER_LOGIC_W = 68;
 var DT_CSS = `
 .twc-dt { display: flex; flex-direction: column; font-family: var(--font-sans); color: var(--color-text);
   border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg);
@@ -8637,8 +8636,11 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 .twc-dt__link:hover { background: var(--color-primary-subtle); }
 /* #330: MUI DataGrid-style per-row And/Or connector. Row 1 shows a static "Where"; the first connector
    row (row 2) hosts an editable And/Or Select bound to the single filterLogic; rows 3+ echo it as static
-   text. Fixed-width leading cell so the Column/Operator/Value cells stay aligned across rows. */
-.twc-dt__f-logic { position: relative; flex: none; width: 68px; }
+   text. Leading cell aligns the Column/Operator/Value cells across rows. It is a first-class resizable
+   filter field like col/op: auto-fit to its content (-fit, from the #289 measurer) with a user drag tier
+   (-usr) winning in the clamp cascade, so it no longer truncates and the width can be adjusted manually. */
+.twc-dt__f-logic { position: relative; flex: none; min-width: 84px;
+  width: clamp(84px, var(--twc-dt-flogic-usr, var(--twc-dt-flogic-fit, 84px)), var(--twc-dt-flogic-cap, 180px)); }
 .twc-dt__f-where { display: inline-flex; align-items: center; height: 38px; padding-inline: 6px; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--font-medium); }
 
 /* Filter panel \u2014 user-resizable (#292): panel size + per-field widths resolve through a two-tier CSS var
@@ -9452,7 +9454,7 @@ function Datatable({
     density,
     // #292: additive, optional — user-resized filter panel + field widths (panel-global, not per column).
     filterPanelSize: fPanelSize || void 0,
-    filterFieldWidths: fWidths.col != null || fWidths.op != null || fWidths.val != null ? fWidths : void 0,
+    filterFieldWidths: fWidths.col != null || fWidths.op != null || fWidths.val != null || fWidths.logic != null ? fWidths : void 0,
     // #304: additive, optional — user-resized sizes of the other toolbar popovers, keyed by popover id.
     popoverSizes: Object.keys(popSizes).length ? popSizes : void 0
   });
@@ -9482,7 +9484,7 @@ function Datatable({
     if (s.density === "compact" || s.density === "standard" || s.density === "comfortable") setDensity(s.density);
     if (s.filterFieldWidths && typeof s.filterFieldWidths === "object") {
       const fw = {};
-      for (const k of ["col", "op", "val"]) if (typeof s.filterFieldWidths[k] === "number") fw[k] = s.filterFieldWidths[k];
+      for (const k of ["col", "op", "val", "logic"]) if (typeof s.filterFieldWidths[k] === "number") fw[k] = s.filterFieldWidths[k];
       if (Object.keys(fw).length) setFWidths(fw);
     }
     if (s.filterPanelSize && typeof s.filterPanelSize === "object") {
@@ -10853,9 +10855,11 @@ function Datatable({
       const pad2 = trigger ? (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0) : 24;
       const chrome = pad2 + 8 + 16 + 4;
       const widest = (labels) => labels.reduce((m, l) => Math.max(m, ctx.measureText(String(l)).width), 0);
-      const colCap = Math.max(118, Math.min(210, el.clientWidth - DT_FILTER_LOGIC_W - 118 - 30 - 30 - 140 - 5 * 6 - 2 * 4));
+      const logicW = Math.min(180, Math.max(84, Math.ceil(widest(["And", "Or"]) + chrome)));
+      const colCap = Math.max(118, Math.min(210, el.clientWidth - logicW - 118 - 30 - 30 - 140 - 5 * 6 - 2 * 4));
       const colW = Math.min(colCap, Math.max(118, Math.ceil(widest(filterableCols.map((c) => c.headerName ?? c.field)) + chrome)));
       const opW = Math.min(170, Math.max(118, Math.ceil(widest(ALL_OP_LABELS) + chrome)));
+      if (Number.isFinite(logicW)) el.style.setProperty("--twc-dt-flogic-fit", `${logicW}px`);
       if (Number.isFinite(colW)) el.style.setProperty("--twc-dt-fcol-fit", `${colW}px`);
       if (Number.isFinite(opW)) el.style.setProperty("--twc-dt-fop-fit", `${opW}px`);
     };
@@ -10869,10 +10873,10 @@ function Datatable({
     }
     return () => ro?.disconnect();
   }, [panel, filterableCols, filters.length]);
-  const F_MIN = { col: 118, op: 118, val: 140 };
-  const F_VAR = { col: "--twc-dt-fcol-usr", op: "--twc-dt-fop-usr", val: "--twc-dt-fval-usr" };
-  const F_SEL = { col: ".twc-dt__f-col", op: ".twc-dt__f-op", val: ".twc-dt__f-val" };
-  const F_LABEL = { col: "column", op: "operator", val: "value" };
+  const F_MIN = { col: 118, op: 118, val: 140, logic: 84 };
+  const F_VAR = { col: "--twc-dt-fcol-usr", op: "--twc-dt-fop-usr", val: "--twc-dt-fval-usr", logic: "--twc-dt-flogic-usr" };
+  const F_SEL = { col: ".twc-dt__f-col", op: ".twc-dt__f-op", val: ".twc-dt__f-val", logic: ".twc-dt__f-logic" };
+  const F_LABEL = { col: "column", op: "operator", val: "value", logic: "connector" };
   const fMaxW = () => typeof window === "undefined" ? 9999 : window.innerWidth - 32;
   const fMaxH = () => typeof window === "undefined" ? 9999 : window.innerHeight - 32;
   const clampNum = (v, lo, hi) => Math.max(lo, Math.min(hi, Math.round(v)));
@@ -10881,11 +10885,12 @@ function Datatable({
     return el ? el.getBoundingClientRect().width : F_MIN[field];
   };
   const fCap = (field) => {
+    if (field === "logic") return 180;
     if (field === "col") return filterFieldMaxWidth || 360;
     if (field === "op") return filterFieldMaxWidth || 260;
     const p = filterPanelRef.current;
     if (!p) return 640;
-    return clampNum(p.clientWidth - DT_FILTER_LOGIC_W - fLiveW("col") - fLiveW("op") - 30 - 30 - 5 * 6 - 2 * 4, F_MIN.val, 640);
+    return clampNum(p.clientWidth - fLiveW("logic") - fLiveW("col") - fLiveW("op") - 30 - 30 - 5 * 6 - 2 * 4, F_MIN.val, 640);
   };
   const isRtl = () => {
     const p = filterPanelRef.current;
@@ -11018,12 +11023,12 @@ function Datatable({
     setFPanelSize(null);
     const p = filterPanelRef.current;
     if (p) {
-      ["--twc-dt-fcol-usr", "--twc-dt-fop-usr", "--twc-dt-fval-usr", "--twc-dt-panel-w", "--twc-dt-panel-h"].forEach((v) => p.style.removeProperty(v));
+      ["--twc-dt-fcol-usr", "--twc-dt-fop-usr", "--twc-dt-fval-usr", "--twc-dt-flogic-usr", "--twc-dt-panel-w", "--twc-dt-panel-h"].forEach((v) => p.style.removeProperty(v));
       p.removeAttribute("data-val-fixed");
       p.removeAttribute("data-panel-sized");
     }
   };
-  const hasFilterSizeOverride = fWidths.col != null || fWidths.op != null || fWidths.val != null || fPanelSize != null;
+  const hasFilterSizeOverride = fWidths.col != null || fWidths.op != null || fWidths.val != null || fWidths.logic != null || fPanelSize != null;
   const POP_MIN_W = { columns: 240, agg: 240, pivot: 260, batchedit: 260 };
   const popMinW = (id) => POP_MIN_W[id] || 200;
   const clearPop = (id, node) => {
@@ -12573,6 +12578,7 @@ function Datatable({
           "--twc-dt-fcol-usr": fWidths.col != null ? `${fWidths.col}px` : void 0,
           "--twc-dt-fop-usr": fWidths.op != null ? `${fWidths.op}px` : void 0,
           "--twc-dt-fval-usr": fWidths.val != null ? `${fWidths.val}px` : void 0,
+          "--twc-dt-flogic-usr": fWidths.logic != null ? `${fWidths.logic}px` : void 0,
           "--twc-dt-panel-w": fPanelSize?.w != null ? `${fPanelSize.w}px` : void 0,
           "--twc-dt-panel-h": fPanelSize?.h != null ? `${fPanelSize.h}px` : void 0,
           "--twc-dt-fcol-cap": filterFieldMaxWidth ? `${filterFieldMaxWidth}px` : void 0,
@@ -12593,17 +12599,20 @@ function Datatable({
             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-logic", children: i === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__f-where", children: "Where" }) : i === 1 ? /* @__PURE__ */ jsxRuntime.jsx(
-                Select,
-                {
-                  size: "sm",
-                  portal: true,
-                  "aria-label": "Combine with the other filters",
-                  value: filterLogic,
-                  options: [{ value: "and", label: "And" }, { value: "or", label: "Or" }],
-                  onChange: (v) => setFilterLogic(v)
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__f-where", children: filterLogic === "or" ? "Or" : "And" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__f-logic", children: [
+                i === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__f-where", children: "Where" }) : i === 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+                  Select,
+                  {
+                    size: "sm",
+                    portal: true,
+                    "aria-label": "Combine with the other filters",
+                    value: filterLogic,
+                    options: [{ value: "and", label: "And" }, { value: "or", label: "Or" }],
+                    onChange: (v) => setFilterLogic(v)
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__f-where", children: filterLogic === "or" ? "Or" : "And" }),
+                fieldHandle("logic", i)
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__f-col", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   Select,