twico-ui 1.30.0 → 1.31.0

package/dist/index.d.cts

@@ -1822,6 +1822,15 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   quickFilter?: string;
   /** Fires with the new quick-search string as the user types (and when a host sets it). */
   onQuickFilterChange?: (value: string) => void;
+  /** #330: how the filter clauses combine — `"and"` (all must match) or `"or"` (any). A single, set-wide
+   *  connective (matching MUI DataGrid's `logicOperator`), surfaced as the per-row And/Or connector in the
+   *  Filters panel and included as `filterLogic` in the `onServerChange` query. Pass this (with
+   *  `onFilterLogicChange`) to control it; omit for uncontrolled (seeded by `defaultFilterLogic`). */
+  filterLogic?: "and" | "or";
+  /** #330: initial And/Or connective when `filterLogic` is uncontrolled. @default "and" */
+  defaultFilterLogic?: "and" | "or";
+  /** #330: fires with the new connective (`"and"` | `"or"`) when the user changes the per-row And/Or select. */
+  onFilterLogicChange?: (logic: "and" | "or") => void;
   /** Custom node rendered in a **leading slot** of the toolbar row, before the built-in Columns/Filters
    *  cluster (#286) — for host controls like an "Add row" button or bulk actions. Mirrors `CardGrid`'s
    *  `toolbar` prop, so no internal-class/absolute-position hacks are needed. */

package/dist/index.d.ts

@@ -1822,6 +1822,15 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   quickFilter?: string;
   /** Fires with the new quick-search string as the user types (and when a host sets it). */
   onQuickFilterChange?: (value: string) => void;
+  /** #330: how the filter clauses combine — `"and"` (all must match) or `"or"` (any). A single, set-wide
+   *  connective (matching MUI DataGrid's `logicOperator`), surfaced as the per-row And/Or connector in the
+   *  Filters panel and included as `filterLogic` in the `onServerChange` query. Pass this (with
+   *  `onFilterLogicChange`) to control it; omit for uncontrolled (seeded by `defaultFilterLogic`). */
+  filterLogic?: "and" | "or";
+  /** #330: initial And/Or connective when `filterLogic` is uncontrolled. @default "and" */
+  defaultFilterLogic?: "and" | "or";
+  /** #330: fires with the new connective (`"and"` | `"or"`) when the user changes the per-row And/Or select. */
+  onFilterLogicChange?: (logic: "and" | "or") => void;
   /** Custom node rendered in a **leading slot** of the toolbar row, before the built-in Columns/Filters
    *  cluster (#286) — for host controls like an "Add row" button or bulk actions. Mirrors `CardGrid`'s
    *  `toolbar` prop, so no internal-class/absolute-position hacks are needed. */

package/dist/index.mjs

@@ -8190,6 +8190,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);
@@ -8612,13 +8614,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
@@ -8628,7 +8628,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;
 }
@@ -9240,6 +9240,9 @@ function Datatable({
   searchable = true,
   quickFilter,
   onQuickFilterChange,
+  filterLogic: filterLogicProp,
+  defaultFilterLogic = "and",
+  onFilterLogicChange,
   toolbarActions,
   resizableFilters = true,
   resizablePopovers = true,
@@ -9333,7 +9336,14 @@ function Datatable({
   });
   const [sort, setSort] = React51__default.useState(null);
   const [filters, setFilters] = React51__default.useState([]);
-  const [filterLogic, setFilterLogic] = React51__default.useState("and");
+  const filterLogicControlled = filterLogicProp !== void 0;
+  const [filterLogicInternal, setFilterLogicInternal] = React51__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__default.useState(() => /* @__PURE__ */ new Set());
   const [showRowNum, setShowRowNum] = React51__default.useState(rowNumbers);
   const [wrapped, setWrapped] = React51__default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
@@ -9429,7 +9439,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)));
@@ -10822,7 +10832,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`);
@@ -10854,7 +10864,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;
@@ -11551,7 +11561,7 @@ function Datatable({
             } else {
               setPanel("filters");
               setColMenu(null);
-              openPanel(e.currentTarget, "left", 580);
+              openPanel(e.currentTarget, "left", DT_FILTER_PANEL_W);
             }
           },
           children: [
@@ -12119,7 +12129,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__ */ jsx(Svg, { d: I.filter }),
                 " Filter"
@@ -12553,10 +12563,6 @@ function Datatable({
           /* @__PURE__ */ jsxs("div", { className: "twc-dt__panel-head", children: [
             /* @__PURE__ */ jsx("span", { className: "twc-dt__panel-title", children: "Filters" }),
             /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
-              filters.length > 1 ? /* @__PURE__ */ jsxs("span", { className: "twc-dt__flogic", role: "group", "aria-label": "Combine filters with", children: [
-                /* @__PURE__ */ 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__ */ 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__ */ jsx("button", { type: "button", className: "twc-dt__link", onClick: resetFilterSizes, children: "Reset sizes" }) : null,
               filters.length ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__link", onClick: () => setFilters([]), children: "Clear all" }) : null
             ] })
@@ -12566,6 +12572,17 @@ function Datatable({
             const ops = opsFor(filterTypeOf(col));
             const op = ops.find((o) => o.value === f.op) || ops[0];
             return /* @__PURE__ */ jsxs("div", { className: "twc-dt__frow", children: [
+              /* @__PURE__ */ jsx("div", { className: "twc-dt__f-logic", children: i === 0 ? /* @__PURE__ */ jsx("span", { className: "twc-dt__f-where", children: "Where" }) : i === 1 ? /* @__PURE__ */ 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__ */ jsx("span", { className: "twc-dt__f-where", children: filterLogic === "or" ? "Or" : "And" }) }),
               /* @__PURE__ */ jsxs("div", { className: "twc-dt__f-col", children: [
                 /* @__PURE__ */ jsx(
                   Select,
@@ -12645,7 +12662,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) => {