twico-ui 1.22.3 → 1.24.0

package/dist/index.cjs

@@ -5671,6 +5671,10 @@ var COMBO_CSS = `
 .twc-opt__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
 .twc-opt__label { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-opt__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #300: wrapOptions \u2014 let long labels/descriptions wrap onto multiple lines instead of truncating.
+   overflow-wrap: anywhere also breaks a single very long token so it can't overflow the popover edge. */
+.twc-opt[data-wrap="true"] { align-items: flex-start; }
+.twc-opt[data-wrap="true"] .twc-opt__label, .twc-opt[data-wrap="true"] .twc-opt__desc { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
 .twc-opt__check { flex: none; color: var(--color-primary); display: inline-flex; }
 .twc-opt__check svg { width: 16px; height: 16px; }
 .twc-pop__empty { padding: 14px 12px; text-align: center; font-size: var(--text-sm); color: var(--color-text-subtle); }
@@ -5731,8 +5735,9 @@ function Combobox({
   loading = false,
   emptyText = "No results found",
   name,
-  virtualized = false,
+  virtualized: virtualizedProp = false,
   overscan = 8,
+  wrapOptions = false,
   id,
   className = "",
   onFocus,
@@ -5740,6 +5745,8 @@ function Combobox({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
+  if (virtualizedProp && wrapOptions) warnOnce("combobox-wrap-virtualized", "twico-ui Combobox: `wrapOptions` disables `virtualized` \u2014 wrapped option rows aren't a fixed height.");
+  const virtualized = virtualizedProp && !wrapOptions;
   const groups = React51__namespace.default.useMemo(() => normalizeGroups(options), [options]);
   const flat = React51__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
   const autoId = React51__namespace.default.useId();
@@ -5926,6 +5933,7 @@ function Combobox({
         "data-disabled": o.disabled || void 0,
         "data-selected": isSel || void 0,
         "data-active": idx === active || void 0,
+        "data-wrap": wrapOptions || void 0,
         onMouseEnter: () => {
           if (!o.disabled) setActive(idx);
         },
@@ -8552,6 +8560,13 @@ 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); }
 
 /* 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
@@ -8582,7 +8597,9 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 /* value: the flex shock-absorber by default; the first drag flips it to a fixed width (data-val-fixed). */
 .twc-dt__f-val { position: relative; flex: 1 1 140px; min-width: 140px; }
 .twc-dt__filters[data-val-fixed] .twc-dt__f-val { flex: 0 0 clamp(140px, var(--twc-dt-fval-usr, 240px), 640px); }
-.twc-dt__filters[data-val-fixed] .twc-dt__frm-x { margin-inline-start: auto; }
+/* #303: each row now has two .twc-dt__frm-x (the add-condition "+" then remove "x"); put the auto margin
+   only on the first so the pair hugs the row end together (two auto margins would split the free space). */
+.twc-dt__filters[data-val-fixed] .twc-dt__frm-x:first-of-type { margin-inline-start: auto; }
 .twc-dt__frm-x { display: inline-grid; place-items: center; width: 30px; height: 38px; border: none; background: transparent; color: var(--color-text-subtle); border-radius: var(--radius-md); cursor: pointer; flex: none; align-self: flex-start; }
 .twc-dt__frm-x:hover { background: var(--color-danger-subtle); color: var(--color-danger-subtle-fg); }
 .twc-dt__frm-x svg { width: 15px; height: 15px; }
@@ -8602,6 +8619,13 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
   .twc-dt__f-rz { width: 16px; inset-inline-end: -6px; opacity: 0.4; }
   .twc-dt__pop-grip { width: 20px; height: 20px; opacity: 0.6; }
 }
+/* #304: generic resizable popovers. When the grip commits a size, the panel carries data-pop-sized +
+   --twc-dt-pop-w/-h; the width override beats each panel default (incl. inline widths) and the inner
+   scroll list drops its max-height and flexes to fill the taller panel. The panel keeps its base
+   position: fixed (the absolute grip anchors to it) \u2014 do NOT set position here (see #294). Filters keep
+   their own data-panel-sized system (untouched). */
+.twc-dt__pop[data-pop-sized] { display: flex; flex-direction: column; width: var(--twc-dt-pop-w) !important; height: var(--twc-dt-pop-h); max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); }
+.twc-dt__pop[data-pop-sized] .twc-dt__col-list, .twc-dt__pop[data-pop-sized] .twc-dt__cfg-list, .twc-dt__pop[data-pop-sized] .twc-dt__pivot-body { max-height: none; flex: 1 1 auto; overflow-y: auto; }
 .twc-dt__empty { padding: 30px 12px; text-align: center; color: var(--color-text-subtle); font-size: var(--text-sm); }
 
 /* Action cell */
@@ -8831,9 +8855,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 || []) {
-    const fc = cols.find((c) => c.field === f.field);
-    out = out.filter((r2) => testFilter(gv(f.field, r2), f.op, f.value, filterTypeOf(fc)));
+  const qF = (q.filters || []).map((f) => [cols.find((c) => c.field === f.field), f]).filter(([fc]) => fc);
+  if (qF.length) {
+    if (q.filterLogic === "or") out = out.filter((r2) => qF.some(([fc, f]) => testFilter(gv(f.field, r2), f.op, f.value, filterTypeOf(fc))));
+    else for (const [fc, f] of qF) 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";
@@ -9155,6 +9180,7 @@ function Datatable({
   onQuickFilterChange,
   toolbarActions,
   resizableFilters = true,
+  resizablePopovers = false,
   filterFieldMaxWidth,
   rowPinning = false,
   rowReorder = false,
@@ -9244,6 +9270,7 @@ 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 [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)));
@@ -9309,9 +9336,12 @@ function Datatable({
   const rowFocusRef = React51__namespace.default.useRef(null);
   const [fWidths, setFWidths] = React51__namespace.default.useState({});
   const [fPanelSize, setFPanelSize] = React51__namespace.default.useState(null);
+  const [popSizes, setPopSizes] = React51__namespace.default.useState({});
   const serializeState = () => ({
     filters: filters.map(({ id, ...f }) => f),
     // strip the internal row id
+    filterLogic,
+    // #303: "and" (default) | "or"
     sort,
     quickFilter: quick,
     page: pageVal,
@@ -9324,12 +9354,15 @@ 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 : 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
   });
   const applyState = (s) => {
     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 ("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)));
@@ -9359,6 +9392,14 @@ function Datatable({
       const h = typeof s.filterPanelSize.h === "number" ? clampNum(s.filterPanelSize.h, 120, fMaxH()) : void 0;
       if (w != null || h != null) setFPanelSize({ ...w != null ? { w } : {}, ...h != null ? { h } : {} });
     }
+    if (s.popoverSizes && typeof s.popoverSizes === "object") {
+      const next = {};
+      for (const [id, sz] of Object.entries(s.popoverSizes)) {
+        if (!sz || typeof sz !== "object" || typeof sz.w !== "number" || typeof sz.h !== "number") continue;
+        next[id] = { w: clampNum(sz.w, popMinW(id), fMaxW()), h: clampNum(sz.h, 120, fMaxH()) };
+      }
+      if (Object.keys(next).length) setPopSizes(next);
+    }
   };
   const stateReadyRef = React51__namespace.default.useRef(false);
   const stateRestoredRef = React51__namespace.default.useRef(false);
@@ -9376,7 +9417,7 @@ function Datatable({
       }
     }
     return void 0;
-  }, [filters, sort, quick, pageVal, sizeVal, order, widths, hidden, pins, density, fWidths, fPanelSize, stateKey]);
+  }, [filters, filterLogic, sort, quick, pageVal, sizeVal, order, widths, hidden, pins, density, fWidths, fPanelSize, popSizes, stateKey]);
   const restoreState = () => {
     let saved = null;
     if (stateKey) {
@@ -9643,24 +9684,26 @@ function Datatable({
   const CHK_W = checkboxSelection ? rowReorder ? 68 : 44 : 0;
   const numLeft = CHK_W;
   const leadW = numLeft + (showRowNum ? NUM_W : 0);
+  const visLeft = React51__namespace.default.useMemo(() => pins.left.filter((f) => colByField[f] && !hidden.has(f)), [pins.left, colByField, hidden]);
+  const visRight = React51__namespace.default.useMemo(() => pins.right.filter((f) => colByField[f] && !hidden.has(f)), [pins.right, colByField, hidden]);
   const stickyOf = (field) => {
-    if (pins.left.includes(field)) {
+    if (visLeft.includes(field)) {
       let off = leadW;
-      for (const f of pins.left) {
+      for (const f of visLeft) {
         if (f === field) break;
         off += widthOf(colByField[f] || {});
       }
-      const isEdge = pins.left[pins.left.length - 1] === field;
+      const isEdge = visLeft[visLeft.length - 1] === field;
       return { style: { insetInlineStart: off }, pin: "left", edge: isEdge ? "left" : void 0 };
     }
-    if (pins.right.includes(field)) {
+    if (visRight.includes(field)) {
       let off = 0;
-      const rev = [...pins.right].reverse();
+      const rev = [...visRight].reverse();
       for (const f of rev) {
         if (f === field) break;
         off += widthOf(colByField[f] || {});
       }
-      const isEdge = pins.right[0] === field;
+      const isEdge = visRight[0] === field;
       return { style: { insetInlineEnd: off }, pin: "right", edge: isEdge ? "right" : void 0 };
     }
     return {};
@@ -9679,10 +9722,13 @@ function Datatable({
       const searchCols = searchFields && searchFields.length ? searchFields.map((f) => colByField[f] || { field: f }) : visibleCols;
       out = out.filter((r2) => searchCols.some((c) => String(getColVal(c, r2) ?? "").toLowerCase().includes(q)));
     }
-    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, filterTypeOf(col)));
+    const activeF = filters.map((f) => [colByField[f.field], f]).filter(([col]) => col);
+    if (activeF.length) {
+      if (filterLogic === "or") {
+        out = out.filter((r2) => activeF.some(([col, f]) => testFilter(getColVal(col, r2), f.op, f.value, filterTypeOf(col))));
+      } else {
+        for (const [col, f] of activeF) out = out.filter((r2) => testFilter(getColVal(col, r2), f.op, f.value, filterTypeOf(col)));
+      }
     }
     if (sort) {
       const col = colByField[sort.field];
@@ -9699,7 +9745,7 @@ function Datatable({
       out = [...out].sort((a, b) => (idx.get(keyOf(a)) ?? 1e9) - (idx.get(keyOf(b)) ?? 1e9));
     }
     return out;
-  }, [rows, quick, filters, sort, visibleCols, colByField, serverMode, rowOrder, searchFields]);
+  }, [rows, quick, filters, filterLogic, sort, visibleCols, colByField, serverMode, rowOrder, searchFields]);
   const paginated = pageSize > 0;
   const serverTotal = rowCount == null ? processed.length : rowCount;
   const totalRows = serverMode ? serverTotal : processed.length;
@@ -9974,6 +10020,8 @@ function Datatable({
         pageSize: sizeVal,
         sort,
         filters: filters.map(({ id, ...f }) => f),
+        filterLogic,
+        // #303: "and" (default) | "or" — the server groups its WHERE accordingly
         quickFilter: quick.trim(),
         visibleColumns,
         hiddenColumns
@@ -9981,7 +10029,7 @@ function Datatable({
       });
     }, 250);
     return () => clearTimeout(t);
-  }, [serverMode, pageVal, sizeVal, sort, filters, quick, visibleColumns, hiddenColumns]);
+  }, [serverMode, pageVal, sizeVal, sort, filters, filterLogic, quick, visibleColumns, hiddenColumns]);
   const onColVisRef = React51__namespace.default.useRef(onColumnVisibilityChange);
   onColVisRef.current = onColumnVisibilityChange;
   const lastVisibleKey = React51__namespace.default.useRef(null);
@@ -10639,7 +10687,97 @@ function Datatable({
     }
   };
   const hasFilterSizeOverride = fWidths.col != null || fWidths.op != null || fWidths.val != null || fPanelSize != null;
-  const fieldHandle = (field, rowIdx) => resizableFilters && rowIdx === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+  const POP_MIN_W = { columns: 240, agg: 240, pivot: 260, batchedit: 260 };
+  const popMinW = (id) => POP_MIN_W[id] || 200;
+  const clearPop = (id, node) => {
+    if (node) {
+      node.style.removeProperty("--twc-dt-pop-w");
+      node.style.removeProperty("--twc-dt-pop-h");
+      node.removeAttribute("data-pop-sized");
+    }
+    setPopSizes((s) => {
+      if (!(id in s)) return s;
+      const n = { ...s };
+      delete n[id];
+      return n;
+    });
+  };
+  const startPopResize = (id) => (e) => {
+    if (e.button != null && e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const pop = e.currentTarget.closest(".twc-dt__pop");
+    if (!pop) return;
+    const grip = e.currentTarget;
+    const startX = e.clientX, startY = e.clientY;
+    const r2 = pop.getBoundingClientRect();
+    const startW = r2.width, startH = r2.height;
+    const dir = typeof getComputedStyle !== "undefined" && getComputedStyle(pop).direction === "rtl" ? -1 : 1;
+    pop.style.setProperty("--twc-dt-pop-w", `${startW}px`);
+    pop.style.setProperty("--twc-dt-pop-h", `${startH}px`);
+    grip.setAttribute("data-active", "true");
+    pop.setAttribute("data-pop-sized", "");
+    let lw = startW, lh = startH;
+    const onMove = (ev) => {
+      lw = clampNum(startW + (ev.clientX - startX) * dir, popMinW(id), fMaxW());
+      lh = clampNum(startH + (ev.clientY - startY), 120, fMaxH());
+      pop.style.setProperty("--twc-dt-pop-w", `${lw}px`);
+      pop.style.setProperty("--twc-dt-pop-h", `${lh}px`);
+    };
+    const onUp = () => {
+      setPopSizes((s) => ({ ...s, [id]: { w: lw, h: lh } }));
+      grip.removeAttribute("data-active");
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  };
+  const onPopGripKey = (id) => (e) => {
+    if (e.key === "Enter" || e.key === " " || e.key === "Backspace") {
+      e.preventDefault();
+      clearPop(id, e.currentTarget.closest(".twc-dt__pop"));
+      return;
+    }
+    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) return;
+    e.preventDefault();
+    const pop = e.currentTarget.closest(".twc-dt__pop");
+    if (!pop) return;
+    const r2 = pop.getBoundingClientRect();
+    const step = e.shiftKey ? 4 : 20;
+    const dir = typeof getComputedStyle !== "undefined" && getComputedStyle(pop).direction === "rtl" ? -1 : 1;
+    let w = r2.width, h = r2.height;
+    if (e.key === "ArrowRight") w += step * dir;
+    else if (e.key === "ArrowLeft") w -= step * dir;
+    else if (e.key === "ArrowDown") h += step;
+    else if (e.key === "ArrowUp") h -= step;
+    else if (e.key === "Home") {
+      w = popMinW(id);
+      h = 120;
+    } else if (e.key === "End") {
+      w = fMaxW();
+      h = fMaxH();
+    }
+    setPopSizes((s) => ({ ...s, [id]: { w: clampNum(w, popMinW(id), fMaxW()), h: clampNum(h, 120, fMaxH()) } }));
+  };
+  const popStyle = (id) => popSizes[id] ? { "--twc-dt-pop-w": `${popSizes[id].w}px`, "--twc-dt-pop-h": `${popSizes[id].h}px` } : null;
+  const popGrip = (id) => resizablePopovers ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "twc-dt__pop-grip",
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": "Resize panel (Enter or double-click to reset)",
+      "aria-valuetext": popSizes[id] ? `Width ${Math.round(popSizes[id].w)} pixels, height ${Math.round(popSizes[id].h)} pixels` : "Default size",
+      onPointerDown: startPopResize(id),
+      onKeyDown: onPopGripKey(id),
+      onDoubleClick: (e) => {
+        e.preventDefault();
+        clearPop(id, e.currentTarget.closest(".twc-dt__pop"));
+      }
+    }
+  ) : null;
+  const fieldHandle = (field, rowIdx) => (resizableFilters || resizablePopovers) && rowIdx === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
       className: "twc-dt__f-rz",
@@ -10761,7 +10899,7 @@ function Datatable({
         onDragEnd: reorderable ? () => setRowDrag({ from: null, over: null, after: false }) : void 0,
         onClick: (e) => handleRowClick(e, k, row),
         children: [
-          checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", "data-pin-edge": pins.left.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: CHK_W }, children: [
+          checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", "data-pin-edge": visLeft.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: CHK_W }, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
               reorderable ? rowHandle(k, midIdx, row) : null,
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -10786,7 +10924,7 @@ function Datatable({
             ] }),
             rowResize && !pinSide ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__row-resizer", title: "Drag to resize row", onPointerDown: (e) => startRowResize(e, k, e.currentTarget.closest("tr")), onClick: (e) => e.stopPropagation() }) : null
           ] }) : null,
-          showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": pins.left.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: typeof ri === "number" ? (paginated || serverMode ? pageVal * sizeVal : 0) + ri + 1 : "" }) : null,
+          showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": visLeft.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: typeof ri === "number" ? (paginated || serverMode ? pageVal * sizeVal : 0) + ri + 1 : "" }) : null,
           ordered.map((c, ci) => {
             const st = stickyOf(c.field);
             const val = getColVal(c, row);
@@ -11196,7 +11334,7 @@ function Datatable({
             onKeyDown: onGridKeyDown,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("thead", { ref: theadRef, children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
-                checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("th", { className: "twc-dt__th", role: "columnheader", "aria-label": "Select", "data-pin": "left", "data-pin-edge": pins.left.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: CHK_W, minWidth: CHK_W }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__th-inner", style: { justifyContent: "center", padding: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("th", { className: "twc-dt__th", role: "columnheader", "aria-label": "Select", "data-pin": "left", "data-pin-edge": visLeft.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: CHK_W, minWidth: CHK_W }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__th-inner", style: { justifyContent: "center", padding: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
                     className: "twc-dt__check",
@@ -11216,7 +11354,7 @@ function Datatable({
                     children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: allSel ? I.check : I.minus })
                   }
                 ) }) }) : null,
-                showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("th", { className: "twc-dt__th twc-dt__rownum", role: "columnheader", "aria-label": "Row number", "data-pin": "left", "data-pin-edge": pins.left.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W, minWidth: NUM_W }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__th-inner", children: [
+                showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("th", { className: "twc-dt__th twc-dt__rownum", role: "columnheader", "aria-label": "Row number", "data-pin": "left", "data-pin-edge": visLeft.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W, minWidth: NUM_W }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__th-inner", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__th-label", style: { flex: "none", cursor: "default" }, children: "#" }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
@@ -11394,8 +11532,8 @@ function Datatable({
                 pinnedBottomRows.map((row) => renderLeaf(row, keyIndex.get(keyOf(row)), "bottom"))
               ] }) }),
               hasAggregation && aggOn && !loading && paged.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("tfoot", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { role: "row", children: [
-                checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { role: "gridcell", "data-pin": "left", "data-pin-edge": pins.left.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: CHK_W } }) : null,
-                showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": pins.left.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W } }) : null,
+                checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { role: "gridcell", "data-pin": "left", "data-pin-edge": visLeft.length || showRowNum ? void 0 : "left", style: { insetInlineStart: 0, width: CHK_W } }) : null,
+                showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", "data-pin-edge": visLeft.length ? void 0 : "left", style: { insetInlineStart: numLeft, width: NUM_W } }) : null,
                 ordered.map((c) => {
                   const st = stickyOf(c.field);
                   const v = aggregate(c);
@@ -11494,7 +11632,7 @@ function Datatable({
         delete values[f];
         return { ...b, fields, values };
       });
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__pop twc-dt__cfg", style: { top: batchEditPos.top, left: batchEditPos.left, width: 320 }, children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__pop twc-dt__cfg", style: { top: batchEditPos.top, left: batchEditPos.left, width: 320, ...popStyle("batchedit") }, "data-pop-sized": popSizes.batchedit ? "" : void 0, children: [
         /* @__PURE__ */ jsxRuntime.jsx(Caret, { pos: batchEditPos }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-head", children: [
           "Edit ",
@@ -11556,7 +11694,8 @@ function Datatable({
             "Apply to ",
             selected.size
           ] })
-        ] })
+        ] }),
+        popGrip("batchedit")
       ] });
     })() : null,
     colMenu && menuPos ? /* @__PURE__ */ jsxRuntime.jsxs(
@@ -11729,7 +11868,7 @@ function Datatable({
         ]
       }
     ) : null,
-    panel === "columns" && panelPos ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__pop twc-dt__cols", style: { top: panelPos.top, left: panelPos.left }, role: "dialog", "aria-label": "Column settings", children: [
+    panel === "columns" && panelPos ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__pop twc-dt__cols", style: { top: panelPos.top, left: panelPos.left, ...popStyle("columns") }, "data-pop-sized": popSizes.columns ? "" : void 0, role: "dialog", "aria-label": "Column settings", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__panel-head", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__panel-title", children: [
           "Columns ",
@@ -11854,9 +11993,10 @@ function Datatable({
             c.field
           );
         })
-      ] })
+      ] }),
+      popGrip("columns")
     ] }) : null,
-    panel === "agg" && panelPos ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__pop twc-dt__cfg", style: { top: panelPos.top, left: panelPos.left, width: 300 }, role: "dialog", "aria-label": "Aggregation settings", children: [
+    panel === "agg" && panelPos ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__pop twc-dt__cfg", style: { top: panelPos.top, left: panelPos.left, width: 300, ...popStyle("agg") }, "data-pop-sized": popSizes.agg ? "" : void 0, role: "dialog", "aria-label": "Aggregation settings", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__panel-head", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__panel-title", children: "Aggregation" }),
         /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__link", onClick: () => setAggConfig({}), children: "Clear" })
@@ -11905,13 +12045,14 @@ function Datatable({
             }
           ) })
         ] }, c.field);
-      }) })
+      }) }),
+      popGrip("agg")
     ] }) : null,
     panel === "pivot" && panelPos ? (() => {
       const fieldOpts = ordered.filter((c) => c.type !== "actions").map((c) => ({ value: c.field, label: c.headerName }));
       const aggOpts = [{ value: "sum", label: "Sum" }, { value: "avg", label: "Avg" }, { value: "min", label: "Min" }, { value: "max", label: "Max" }, { value: "count", label: "Count" }];
       const valueFieldOpts = ordered.filter((c) => c.type !== "actions" && !pivotConfig.values.some((v) => v.field === c.field)).map((c) => ({ value: c.field, label: c.headerName }));
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__pop twc-dt__cfg", style: { top: panelPos.top, left: panelPos.left, width: 320 }, role: "dialog", "aria-label": "Pivot settings", children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__pop twc-dt__cfg", style: { top: panelPos.top, left: panelPos.left, width: 320, ...popStyle("pivot") }, "data-pop-sized": popSizes.pivot ? "" : void 0, role: "dialog", "aria-label": "Pivot settings", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__panel-head", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__panel-title", children: "Pivot" }),
           /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__link", onClick: () => {
@@ -11919,106 +12060,109 @@ function Datatable({
             setPivotOn(false);
           }, children: "Reset" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-toggle", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Pivot mode" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "twc-dt__sw",
-              "data-on": pivotOn || void 0,
-              role: "switch",
-              "aria-checked": pivotOn,
-              tabIndex: 0,
-              onClick: () => setPivotOn((v) => !v),
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  setPivotOn((v) => !v);
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__pivot-body", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-toggle", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Pivot mode" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "twc-dt__sw",
+                "data-on": pivotOn || void 0,
+                role: "switch",
+                "aria-checked": pivotOn,
+                tabIndex: 0,
+                onClick: () => setPivotOn((v) => !v),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    setPivotOn((v) => !v);
+                  }
                 }
               }
-            }
-          )
-        ] }),
-        !pivotActive && pivotOn ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-hint", children: [
-          "Add at least one ",
-          /* @__PURE__ */ jsxRuntime.jsx("b", { children: "Row" }),
-          " field and one ",
-          /* @__PURE__ */ jsxRuntime.jsx("b", { children: "Value" }),
-          " to see the pivot."
-        ] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-section", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__cfg-label", children: "Rows" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            MultiSelect,
-            {
-              portal: true,
-              placeholder: "Add row fields\u2026",
-              value: pivotConfig.rows,
-              options: fieldOpts,
-              onChange: (vals) => {
-                setPivotConfig((p) => ({ ...p, rows: vals }));
-                if (vals.length) setPivotOn(true);
-              }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-section", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__cfg-label", children: "Columns" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            MultiSelect,
-            {
-              portal: true,
-              placeholder: "Add column fields\u2026",
-              value: pivotConfig.columns,
-              options: fieldOpts,
-              onChange: (vals) => setPivotConfig((p) => ({ ...p, columns: vals }))
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-section", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__cfg-label", children: "Values" }),
-          pivotConfig.values.map((v, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-row", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__cfg-name", children: colByField[v.field]?.headerName || v.field }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__cfg-ctl", children: /* @__PURE__ */ jsxRuntime.jsx(
-              Select,
+            )
+          ] }),
+          !pivotActive && pivotOn ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-hint", children: [
+            "Add at least one ",
+            /* @__PURE__ */ jsxRuntime.jsx("b", { children: "Row" }),
+            " field and one ",
+            /* @__PURE__ */ jsxRuntime.jsx("b", { children: "Value" }),
+            " to see the pivot."
+          ] }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-section", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__cfg-label", children: "Rows" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              MultiSelect,
               {
-                size: "sm",
-                value: v.agg || "sum",
-                options: aggOpts,
                 portal: true,
-                onChange: (a) => setPivotConfig((p) => ({ ...p, values: p.values.map((x, j) => j === i ? { ...x, agg: a } : x) }))
+                placeholder: "Add row fields\u2026",
+                value: pivotConfig.rows,
+                options: fieldOpts,
+                onChange: (vals) => {
+                  setPivotConfig((p) => ({ ...p, rows: vals }));
+                  if (vals.length) setPivotOn(true);
+                }
               }
-            ) }),
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-section", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__cfg-label", children: "Columns" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+              MultiSelect,
               {
-                type: "button",
-                className: "twc-dt__cfg-x",
-                "aria-label": `Remove ${colByField[v.field]?.headerName || v.field}`,
-                onClick: () => setPivotConfig((p) => ({ ...p, values: p.values.filter((_, j) => j !== i) })),
-                children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.x })
+                portal: true,
+                placeholder: "Add column fields\u2026",
+                value: pivotConfig.columns,
+                options: fieldOpts,
+                onChange: (vals) => setPivotConfig((p) => ({ ...p, columns: vals }))
               }
             )
-          ] }, v.field + i)),
-          valueFieldOpts.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__cfg-add", children: /* @__PURE__ */ jsxRuntime.jsx(
-            Select,
-            {
-              size: "sm",
-              placeholder: "Add value field\u2026",
-              value: "",
-              options: valueFieldOpts,
-              portal: true,
-              searchable: true,
-              searchPlaceholder: "Search fields\u2026",
-              onChange: (f) => {
-                if (f) {
-                  setPivotConfig((p) => p.values.some((x) => x.field === f) ? p : { ...p, values: [...p.values, { field: f, agg: "sum" }] });
-                  setPivotOn(true);
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-section", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__cfg-label", children: "Values" }),
+            pivotConfig.values.map((v, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__cfg-row", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__cfg-name", children: colByField[v.field]?.headerName || v.field }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__cfg-ctl", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Select,
+                {
+                  size: "sm",
+                  value: v.agg || "sum",
+                  options: aggOpts,
+                  portal: true,
+                  onChange: (a) => setPivotConfig((p) => ({ ...p, values: p.values.map((x, j) => j === i ? { ...x, agg: a } : x) }))
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "twc-dt__cfg-x",
+                  "aria-label": `Remove ${colByField[v.field]?.headerName || v.field}`,
+                  onClick: () => setPivotConfig((p) => ({ ...p, values: p.values.filter((_, j) => j !== i) })),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.x })
+                }
+              )
+            ] }, v.field + i)),
+            valueFieldOpts.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__cfg-add", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Select,
+              {
+                size: "sm",
+                placeholder: "Add value field\u2026",
+                value: "",
+                options: valueFieldOpts,
+                portal: true,
+                searchable: true,
+                searchPlaceholder: "Search fields\u2026",
+                onChange: (f) => {
+                  if (f) {
+                    setPivotConfig((p) => p.values.some((x) => x.field === f) ? p : { ...p, values: [...p.values, { field: f, agg: "sum" }] });
+                    setPivotOn(true);
+                  }
                 }
               }
-            }
-          ) }) : null
-        ] })
+            ) }) : null
+          ] })
+        ] }),
+        popGrip("pivot")
       ] });
     })() : null,
     panel === "filters" && panelPos ? /* @__PURE__ */ jsxRuntime.jsxs(
@@ -12042,8 +12186,12 @@ function Datatable({
         children: [
           /* @__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", gap: 2 }, children: [
-              resizableFilters && hasFilterSizeOverride ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__link", onClick: resetFilterSizes, children: "Reset sizes" }) : null,
+            /* @__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 || resizablePopovers) && 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
             ] })
           ] }),
@@ -12115,6 +12263,7 @@ function Datatable({
                 ),
                 fieldHandle("val", i)
               ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__frm-x", "aria-label": `Add another condition on ${col.headerName}`, title: "Add another condition on this column", onClick: () => addFilter(f.field), children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.plus }) }),
               /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__frm-x", "aria-label": "Remove filter", onClick: () => setFilters((arr) => arr.filter((x) => x.id !== f.id)), children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.x }) })
             ] }, f.id);
           }) }),
@@ -12122,7 +12271,7 @@ function Datatable({
             /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.plus, style: { color: "var(--color-primary)" } }),
             " Add filter"
           ] }) }),
-          resizableFilters ? /* @__PURE__ */ jsxRuntime.jsx(
+          resizableFilters || resizablePopovers ? /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               className: "twc-dt__pop-grip",