twico-ui 1.30.0 → 1.31.1

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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)
+
+
+### Bug Fixes
+
+* **datatable:** keep DT_CSS a plain literal so single-component bundles tree-shake ([9574c2b](https://github.com/EncryptionL/twico-ui/commit/9574c2b52be39bdfcd27241a381b463eb7002c11)), closes [#330](https://github.com/EncryptionL/twico-ui/issues/330)
+
+
+### Features
+
+* **datatable:** MUI DataGrid-style per-row And/Or filter connector + controllable filterLogic ([3d79a1f](https://github.com/EncryptionL/twico-ui/commit/3d79a1f1c2e8f55d439e1bfeb37c0258b37cf5bc)), closes [#303](https://github.com/EncryptionL/twico-ui/issues/303) [#330](https://github.com/EncryptionL/twico-ui/issues/330)
+
 # [1.30.0](https://github.com/EncryptionL/twico-ui/compare/v1.29.0...v1.30.0) (2026-08-04)
 
 

package/dist/index.cjs

@@ -8211,6 +8211,7 @@ function classifyDiff(from = [], to = [], columns = [], rowKey, opts = {}) {
   });
   return { rows, counts };
 }
+var DT_FILTER_PANEL_W = 620;
 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);
@@ -8633,13 +8634,14 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 .twc-dt__panel-count { font-weight: 600; color: var(--color-text-muted); text-transform: none; letter-spacing: 0; margin-inline-start: 6px; font-variant-numeric: tabular-nums; }
 .twc-dt__link { border: none; background: transparent; color: var(--color-primary); font-family: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: var(--radius-sm); }
 .twc-dt__link:hover { background: var(--color-primary-subtle); }
-/* #303: AND/OR connective toggle (segmented pill) in the Filters panel head. */
-.twc-dt__flogic { display: inline-flex; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
-.twc-dt__flogic-btn { border: none; background: transparent; color: var(--color-text-muted); font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-wide); cursor: pointer; padding: 2px 8px; }
-.twc-dt__flogic-btn + .twc-dt__flogic-btn { border-inline-start: var(--border-thin) solid var(--color-border); }
-.twc-dt__flogic-btn:hover { background: var(--color-surface-sunken); }
-.twc-dt__flogic-btn[data-active] { background: var(--color-primary); color: var(--color-primary-fg); }
-.twc-dt__flogic-btn[data-active]:hover { background: var(--color-primary); }
+/* #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. 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
    cascade \u2014 user drag (-usr) > #289 measured auto-fit (-fit) > 118px fallback \u2014 entirely in clamp(), so
@@ -8649,7 +8651,7 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
      equal-specificity 'position: relative' defined later would clobber it, dropping the popover into normal
      flow below the table. The panel stays position: fixed, which already anchors the absolutely-positioned
      .twc-dt__pop-grip; per-field handles anchor to their own position: relative .twc-dt__f-* fields. */
-  width: var(--twc-dt-panel-w, 580px); max-width: calc(100vw - 32px);
+  width: var(--twc-dt-panel-w, 620px); max-width: calc(100vw - 32px);
   height: var(--twc-dt-panel-h, auto); max-height: calc(100vh - 32px);
   display: flex; flex-direction: column;
 }
@@ -9261,6 +9263,9 @@ function Datatable({
   searchable = true,
   quickFilter,
   onQuickFilterChange,
+  filterLogic: filterLogicProp,
+  defaultFilterLogic = "and",
+  onFilterLogicChange,
   toolbarActions,
   resizableFilters = true,
   resizablePopovers = true,
@@ -9354,7 +9359,14 @@ function Datatable({
   });
   const [sort, setSort] = React51__namespace.default.useState(null);
   const [filters, setFilters] = React51__namespace.default.useState([]);
-  const [filterLogic, setFilterLogic] = React51__namespace.default.useState("and");
+  const filterLogicControlled = filterLogicProp !== void 0;
+  const [filterLogicInternal, setFilterLogicInternal] = React51__namespace.default.useState(defaultFilterLogic === "or" ? "or" : "and");
+  const filterLogic = filterLogicControlled ? filterLogicProp === "or" ? "or" : "and" : filterLogicInternal;
+  const setFilterLogic = (next) => {
+    const v = next === "or" ? "or" : "and";
+    if (!filterLogicControlled) setFilterLogicInternal(v);
+    onFilterLogicChange?.(v);
+  };
   const [hidden, setHidden] = React51__namespace.default.useState(() => /* @__PURE__ */ new Set());
   const [showRowNum, setShowRowNum] = React51__namespace.default.useState(rowNumbers);
   const [wrapped, setWrapped] = React51__namespace.default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
@@ -9442,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
   });
@@ -9450,7 +9462,7 @@ function Datatable({
     if (!s || typeof s !== "object") return;
     const known = new Set(cols.map((c) => c.field).filter(Boolean));
     if (Array.isArray(s.filters)) setFilters(s.filters.filter((f) => f && known.has(f.field)).map((f, i) => ({ id: Date.now() + Math.random() + i, field: f.field, op: f.op, value: f.value })));
-    if (s.filterLogic === "or" || s.filterLogic === "and") setFilterLogic(s.filterLogic);
+    if ((s.filterLogic === "or" || s.filterLogic === "and") && !filterLogicControlled) setFilterLogicInternal(s.filterLogic);
     if ("sort" in s) setSort(s.sort && known.has(s.sort.field) ? { field: s.sort.field, dir: s.sort.dir === "desc" ? "desc" : "asc" } : null);
     if (typeof s.quickFilter === "string" && quickFilter === void 0) setInternalQuick(s.quickFilter);
     if (typeof s.page === "number" && !pageControlled) setInternalPage(Math.max(0, Math.floor(s.page)));
@@ -9472,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") {
@@ -10843,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 - 118 - 30 - 140 - 3 * 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`);
     };
@@ -10859,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)));
@@ -10871,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 - fLiveW("col") - fLiveW("op") - 30 - 24, 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;
@@ -11008,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) => {
@@ -11572,7 +11587,7 @@ function Datatable({
             } else {
               setPanel("filters");
               setColMenu(null);
-              openPanel(e.currentTarget, "left", 580);
+              openPanel(e.currentTarget, "left", DT_FILTER_PANEL_W);
             }
           },
           children: [
@@ -12140,7 +12155,7 @@ function Datatable({
                 closeMenu();
                 restoreTriggerFocus();
                 setPanel("filters");
-                openPanel(document.querySelector(".twc-dt__toolbar .twc-dt__tbtn:nth-child(2)"), "left", 580);
+                openPanel(document.querySelector(".twc-dt__toolbar .twc-dt__tbtn:nth-child(2)"), "left", DT_FILTER_PANEL_W);
               }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.filter }),
                 " Filter"
@@ -12563,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,
@@ -12574,10 +12590,6 @@ function Datatable({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__panel-head", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__panel-title", children: "Filters" }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
-              filters.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__flogic", role: "group", "aria-label": "Combine filters with", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__flogic-btn", "data-active": filterLogic === "and" || void 0, "aria-pressed": filterLogic === "and", onClick: () => setFilterLogic("and"), children: "AND" }),
-                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__flogic-btn", "data-active": filterLogic === "or" || void 0, "aria-pressed": filterLogic === "or", onClick: () => setFilterLogic("or"), children: "OR" })
-              ] }) : null,
               resizableFilters && hasFilterSizeOverride ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__link", onClick: resetFilterSizes, children: "Reset sizes" }) : null,
               filters.length ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__link", onClick: () => setFilters([]), children: "Clear all" }) : null
             ] })
@@ -12587,6 +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.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,
@@ -12666,7 +12692,7 @@ function Datatable({
               role: "slider",
               tabIndex: 0,
               "aria-label": "Resize filters panel (Enter to reset)",
-              "aria-valuetext": `Width ${Math.round(fPanelSize?.w ?? 580)} pixels, height ${fPanelSize?.h != null ? Math.round(fPanelSize.h) + " pixels" : "auto"}`,
+              "aria-valuetext": `Width ${Math.round(fPanelSize?.w ?? DT_FILTER_PANEL_W)} pixels, height ${fPanelSize?.h != null ? Math.round(fPanelSize.h) + " pixels" : "auto"}`,
               onPointerDown: startPanelResize,
               onKeyDown: onPanelGripKey,
               onDoubleClick: (e) => {