twico-ui 1.30.0 → 1.31.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.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,8 @@ 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);
@@ -8633,13 +8635,11 @@ 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. Fixed-width leading cell so the Column/Operator/Value cells stay aligned across rows. */
+.twc-dt__f-logic { position: relative; flex: none; width: 68px; }
+.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 +8649,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 +9261,9 @@ function Datatable({
   searchable = true,
   quickFilter,
   onQuickFilterChange,
+  filterLogic: filterLogicProp,
+  defaultFilterLogic = "and",
+  onFilterLogicChange,
   toolbarActions,
   resizableFilters = true,
   resizablePopovers = true,
@@ -9354,7 +9357,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)));
@@ -9450,7 +9460,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)));
@@ -10843,7 +10853,7 @@ 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 colCap = Math.max(118, Math.min(210, el.clientWidth - DT_FILTER_LOGIC_W - 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(colW)) el.style.setProperty("--twc-dt-fcol-fit", `${colW}px`);
@@ -10875,7 +10885,7 @@ function Datatable({
     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 - DT_FILTER_LOGIC_W - fLiveW("col") - fLiveW("op") - 30 - 30 - 5 * 6 - 2 * 4, F_MIN.val, 640);
   };
   const isRtl = () => {
     const p = filterPanelRef.current;
@@ -11572,7 +11582,7 @@ function Datatable({
             } else {
               setPanel("filters");
               setColMenu(null);
-              openPanel(e.currentTarget, "left", 580);
+              openPanel(e.currentTarget, "left", DT_FILTER_PANEL_W);
             }
           },
           children: [
@@ -12140,7 +12150,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"
@@ -12574,10 +12584,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 +12593,17 @@ 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-col", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   Select,
@@ -12666,7 +12683,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) => {