twico-ui 1.21.0 → 1.22.0

package/dist/index.d.cts

@@ -1814,6 +1814,14 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
    *  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. */
   toolbarActions?: React.ReactNode;
+  /** Let the user drag-resize the **Filters** popover and its column/operator/value fields (#292), on top
+   *  of the #289 auto-fit (a dragged width overrides the measured one; reset returns to it). Widths + panel
+   *  size persist via `stateKey` and are keyboard-accessible. Set `false` to disable the handles/grip
+   *  (fields still auto-fit). @default true */
+  resizableFilters?: boolean;
+  /** Raise the drag cap for the filter panel's column/operator fields, in px (default col 360 / op 260) —
+   *  the #289-deferred "optional prop to raise the cap". Only affects `resizableFilters`. */
+  filterFieldMaxWidth?: number;
   /**
    * Actions shown in the toolbar when one or more rows are selected (requires
    * `checkboxSelection`). Each handler receives the selected keys, the resolved
@@ -2037,6 +2045,10 @@ interface DatatableState {
   columnPinning: Record<string, "left" | "right">;
   /** Row-density preset. */
   density: "compact" | "standard" | "comfortable";
+  /** #292: user-resized Filters popover size (px). Absent until the user drags the panel grip. */
+  filterPanelSize?: { w?: number; h?: number };
+  /** #292: user-resized Filters field widths (px, panel-global — not per data column). Absent until dragged. */
+  filterFieldWidths?: { col?: number; op?: number; val?: number };
 }
 
 interface DatatableColumn<T = any> {

package/dist/index.d.ts

@@ -1814,6 +1814,14 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
    *  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. */
   toolbarActions?: React.ReactNode;
+  /** Let the user drag-resize the **Filters** popover and its column/operator/value fields (#292), on top
+   *  of the #289 auto-fit (a dragged width overrides the measured one; reset returns to it). Widths + panel
+   *  size persist via `stateKey` and are keyboard-accessible. Set `false` to disable the handles/grip
+   *  (fields still auto-fit). @default true */
+  resizableFilters?: boolean;
+  /** Raise the drag cap for the filter panel's column/operator fields, in px (default col 360 / op 260) —
+   *  the #289-deferred "optional prop to raise the cap". Only affects `resizableFilters`. */
+  filterFieldMaxWidth?: number;
   /**
    * Actions shown in the toolbar when one or more rows are selected (requires
    * `checkboxSelection`). Each handler receives the selected keys, the resolved
@@ -2037,6 +2045,10 @@ interface DatatableState {
   columnPinning: Record<string, "left" | "right">;
   /** Row-density preset. */
   density: "compact" | "standard" | "comfortable";
+  /** #292: user-resized Filters popover size (px). Absent until the user drags the panel grip. */
+  filterPanelSize?: { w?: number; h?: number };
+  /** #292: user-resized Filters field widths (px, panel-global — not per data column). Absent until dragged. */
+  filterFieldWidths?: { col?: number; op?: number; val?: number };
 }
 
 interface DatatableColumn<T = any> {

package/dist/index.mjs

@@ -5467,7 +5467,7 @@ function ColorPicker({
           role: "dialog",
           "aria-modal": "true",
           "aria-label": "Color picker",
-          style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-tooltip)" },
+          style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-floating)" },
           children: [
             /* @__PURE__ */ jsxs(
               "div",
@@ -5945,7 +5945,7 @@ function Combobox({
             role: "listbox",
             ref: popRef,
             "data-placement": coords.flip ? "top" : "bottom",
-            style: { position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom, width: coords.width, right: "auto", zIndex: "var(--z-tooltip)" },
+            style: { position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom, width: coords.width, right: "auto", zIndex: "var(--z-floating)" },
             children: popInner
           }
         ),
@@ -6832,7 +6832,7 @@ function Select({
             ref: popRef,
             "data-state": popState,
             "data-placement": coords.flip ? "top" : "bottom",
-            style: { position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom, width: coords.width, minWidth: coords.minWidth, maxWidth: coords.maxWidth, right: "auto", zIndex: "var(--z-tooltip)" },
+            style: { position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom, width: coords.width, minWidth: coords.minWidth, maxWidth: coords.maxWidth, right: "auto", zIndex: "var(--z-floating)" },
             children: popInner
           }
         ),
@@ -7599,7 +7599,7 @@ function MultiSelect({
             className: "twc-pop twc-pop--portal",
             ref: popRef,
             "data-placement": coords.flip ? "top" : "bottom",
-            style: { position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom, width: coords.width, right: "auto", zIndex: "var(--z-tooltip)" },
+            style: { position: "fixed", left: coords.left, top: coords.top, bottom: coords.bottom, width: coords.width, right: "auto", zIndex: "var(--z-floating)" },
             children: popInner
           }
         ),
@@ -8504,15 +8504,52 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 .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); }
 
-/* Filter panel */
-.twc-dt__filters { width: 580px; max-width: calc(100vw - 32px); }
-.twc-dt__frow { display: flex; align-items: center; gap: 6px; padding: 5px 4px; }
-.twc-dt__f-col { width: 118px; flex: none; }
-.twc-dt__f-op { width: 118px; flex: none; }
-.twc-dt__f-val { flex: 1; min-width: 140px; }
+/* 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
+   neither writer reads the other (reset = remove the -usr var and auto-fit instantly re-wins). */
+.twc-dt__filters {
+  position: relative;
+  width: var(--twc-dt-panel-w, 580px); max-width: calc(100vw - 32px);
+  height: var(--twc-dt-panel-h, auto); max-height: calc(100vh - 32px);
+  display: flex; flex-direction: column;
+}
+/* Rows list scrolls only once the user pins a height; Add-filter stays sticky. Safe because the filter
+   Selects portal to <body> \u2014 an inline (non-portaled) menu would be clipped by this scroll box. */
+.twc-dt__frows { min-height: 0; }
+.twc-dt__filters[data-panel-sized] .twc-dt__frows { flex: 1 1 auto; overflow-y: auto; }
+.twc-dt__filters[data-panel-sized] .twc-dt__f-add { position: sticky; bottom: 0; background: var(--color-surface-raised); padding-inline-end: 20px; }
+/* #289: wrap is a safety net \u2014 a beyond-cap label or the narrow responsive panel drops the value input
+   to its own line instead of clipping the remove button; no effect in the normal (capped) case. */
+.twc-dt__frow { display: flex; align-items: center; gap: 6px; padding: 5px 4px; flex-wrap: wrap; }
+/* col/op: user > measured (-fit, written by the #289 measurer) > 118px, clamped to a drag cap that
+   filterFieldMaxWidth can raise. Position:relative hosts the resize handle. */
+.twc-dt__f-col { position: relative; flex: none; min-width: 118px;
+  width: clamp(118px, var(--twc-dt-fcol-usr, var(--twc-dt-fcol-fit, 118px)), var(--twc-dt-fcol-cap, 360px)); }
+.twc-dt__f-op { position: relative; flex: none; min-width: 118px;
+  width: clamp(118px, var(--twc-dt-fop-usr, var(--twc-dt-fop-fit, 118px)), var(--twc-dt-fop-cap, 260px)); }
+/* 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; }
 .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; }
+/* per-field resize handle \u2014 cloned from the grid's .twc-dt__resizer; always-on baseline opacity so it's
+   discoverable/hittable on touch (no hover there), with a non-color-only focus ring. */
+.twc-dt__f-rz { position: absolute; top: 0; inset-inline-end: -3px; width: 8px; height: 100%; cursor: col-resize; touch-action: none; z-index: 6; opacity: 0.28; transition: opacity var(--duration-fast); }
+.twc-dt__f-rz::after { content: ""; position: absolute; top: 22%; inset-inline-end: 2px; width: 2px; height: 56%; background: var(--color-border-strong); border-radius: 2px; transition: width var(--duration-fast), background-color var(--duration-fast); }
+.twc-dt__frow:hover .twc-dt__f-rz, .twc-dt__f-rz:focus-visible, .twc-dt__f-rz[data-active="true"] { opacity: 1; }
+.twc-dt__f-rz:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-primary); border-radius: 2px; }
+.twc-dt__f-rz:focus-visible::after, .twc-dt__f-rz[data-active="true"]::after { width: 3px; background: var(--color-primary); }
+/* panel corner grip (2-axis) at the bottom-inline-end. */
+.twc-dt__pop-grip { position: absolute; inset-block-end: 2px; inset-inline-end: 2px; width: 14px; height: 14px; cursor: nwse-resize; touch-action: none; z-index: 8; opacity: 0.5; border-radius: 3px; background: linear-gradient(135deg, transparent 0 55%, var(--color-border-strong) 55% 64%, transparent 64% 73%, var(--color-border-strong) 73% 82%, transparent 82%); transition: opacity var(--duration-fast); }
+.twc-dt__pop-grip:hover, .twc-dt__pop-grip:focus-visible, .twc-dt__pop-grip[data-active="true"] { opacity: 1; }
+.twc-dt__pop-grip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
+[dir="rtl"] .twc-dt__pop-grip { cursor: nesw-resize; }
+@media (pointer: coarse) {
+  .twc-dt__f-rz { width: 16px; inset-inline-end: -6px; opacity: 0.4; }
+  .twc-dt__pop-grip { width: 20px; height: 20px; opacity: 0.6; }
+}
 .twc-dt__empty { padding: 30px 12px; text-align: center; color: var(--color-text-subtle); font-size: var(--text-sm); }
 
 /* Action cell */
@@ -8623,6 +8660,7 @@ var NUM_OPS = [
 ];
 var opsFor = (type) => type === "number" ? NUM_OPS : STR_OPS;
 var isMultiOp = (op) => op === "isAnyOf";
+var ALL_OP_LABELS = [...new Set([...STR_OPS, ...NUM_OPS].map((o) => o.label))];
 var filterTypeOf = (col) => {
   const ft = col && col.filterType;
   if (ft === "number" || ft === "string") return ft;
@@ -9064,6 +9102,8 @@ function Datatable({
   quickFilter,
   onQuickFilterChange,
   toolbarActions,
+  resizableFilters = true,
+  filterFieldMaxWidth,
   rowPinning = false,
   rowReorder = false,
   rowResize = false,
@@ -9212,6 +9252,8 @@ function Datatable({
   const [rowGrab, setRowGrab] = React51__default.useState(null);
   const [reorderMsg, setReorderMsg] = React51__default.useState("");
   const rowFocusRef = React51__default.useRef(null);
+  const [fWidths, setFWidths] = React51__default.useState({});
+  const [fPanelSize, setFPanelSize] = React51__default.useState(null);
   const serializeState = () => ({
     filters: filters.map(({ id, ...f }) => f),
     // strip the internal row id
@@ -9224,7 +9266,10 @@ function Datatable({
     columnVisibility: Object.fromEntries([...hidden].map((f) => [f, false])),
     // absent = visible
     columnPinning: Object.fromEntries([...pins.left.map((f) => [f, "left"]), ...pins.right.map((f) => [f, "right"])]),
-    density
+    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
   });
   const applyState = (s) => {
     if (!s || typeof s !== "object") return;
@@ -9249,6 +9294,16 @@ function Datatable({
       setPins({ left: l, right: r2 });
     }
     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];
+      if (Object.keys(fw).length) setFWidths(fw);
+    }
+    if (s.filterPanelSize && typeof s.filterPanelSize === "object") {
+      const w = typeof s.filterPanelSize.w === "number" ? clampNum(s.filterPanelSize.w, 220, fMaxW()) : void 0;
+      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 } : {} });
+    }
   };
   const stateReadyRef = React51__default.useRef(false);
   const onStateChangeRef = React51__default.useRef(onStateChange);
@@ -9265,7 +9320,7 @@ function Datatable({
       }
     }
     return void 0;
-  }, [filters, sort, quick, pageVal, sizeVal, order, widths, hidden, pins, density, stateKey]);
+  }, [filters, sort, quick, pageVal, sizeVal, order, widths, hidden, pins, density, fWidths, fPanelSize, stateKey]);
   React51__default.useEffect(() => {
     let saved = null;
     if (stateKey) {
@@ -9295,6 +9350,8 @@ function Datatable({
     };
   }, []);
   const scrollRef = React51__default.useRef(null);
+  const filterPanelRef = React51__default.useRef(null);
+  const measureCanvas = React51__default.useRef(null);
   const [scrollTop, setScrollTop] = React51__default.useState(0);
   const [viewportH, setViewportH] = React51__default.useState(0);
   const [ovTip, setOvTip] = React51__default.useState(null);
@@ -10328,7 +10385,204 @@ function Datatable({
     ] });
   }
   const tableMinWidth = leadW + ordered.reduce((a, c) => a + widthOf(c), 0);
-  const filterableCols = cols.filter((c) => c.filterable);
+  const filterableCols = React51__default.useMemo(() => cols.filter((c) => c.filterable), [cols]);
+  React51__default.useEffect(() => {
+    const el = filterPanelRef.current;
+    if (panel !== "filters" || !el || typeof document === "undefined") return void 0;
+    const measure = () => {
+      if (!el.isConnected) return;
+      const trigger = el.querySelector(".twc-sel__trigger");
+      const cs = getComputedStyle(trigger || el);
+      const ctx = (measureCanvas.current || (measureCanvas.current = document.createElement("canvas"))).getContext("2d");
+      if (!ctx) return;
+      ctx.font = cs.font || `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize}/${cs.lineHeight} ${cs.fontFamily}`;
+      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 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`);
+      if (Number.isFinite(opW)) el.style.setProperty("--twc-dt-fop-fit", `${opW}px`);
+    };
+    measure();
+    document.fonts?.ready?.then?.(measure).catch?.(() => {
+    });
+    let ro;
+    if (typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(measure);
+      ro.observe(el);
+    }
+    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 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)));
+  const fLiveW = (field) => {
+    const p = filterPanelRef.current, el = p && p.querySelector(F_SEL[field]);
+    return el ? el.getBoundingClientRect().width : F_MIN[field];
+  };
+  const fCap = (field) => {
+    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);
+  };
+  const isRtl = () => {
+    const p = filterPanelRef.current;
+    return p ? getComputedStyle(p).direction === "rtl" : false;
+  };
+  const startFieldResize = (e, field) => {
+    if (e.button != null && e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const panel2 = filterPanelRef.current;
+    if (!panel2) return;
+    const handle = e.currentTarget;
+    const startX = e.clientX;
+    const startW = fLiveW(field);
+    const cap = fCap(field);
+    const dir = isRtl() ? -1 : 1;
+    handle.setAttribute("data-active", "true");
+    if (field === "val") panel2.setAttribute("data-val-fixed", "");
+    let last = startW;
+    const onMove = (ev) => {
+      last = clampNum(startW + (ev.clientX - startX) * dir, F_MIN[field], cap);
+      panel2.style.setProperty(F_VAR[field], `${last}px`);
+    };
+    const onUp = () => {
+      setFWidths((m) => ({ ...m, [field]: last }));
+      handle.removeAttribute("data-active");
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  };
+  const onFieldResizeKey = (e, field) => {
+    if (e.key === "Enter" || e.key === " " || e.key === "Backspace") {
+      e.preventDefault();
+      e.stopPropagation();
+      resetFWidth(field);
+      return;
+    }
+    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const cur = fLiveW(field), cap = fCap(field), step = e.shiftKey ? 2 : 10, dir = isRtl() ? -1 : 1;
+    let next = cur;
+    if (e.key === "ArrowRight") next = cur + step * dir;
+    else if (e.key === "ArrowLeft") next = cur - step * dir;
+    else if (e.key === "Home") next = F_MIN[field];
+    else if (e.key === "End") next = cap;
+    setFWidths((m) => ({ ...m, [field]: clampNum(next, F_MIN[field], cap) }));
+  };
+  const resetFWidth = (field) => {
+    setFWidths((m) => {
+      const n = { ...m };
+      delete n[field];
+      return n;
+    });
+    const p = filterPanelRef.current;
+    if (p) {
+      p.style.removeProperty(F_VAR[field]);
+      if (field === "val") p.removeAttribute("data-val-fixed");
+    }
+  };
+  const startPanelResize = (e) => {
+    if (e.button != null && e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const panel2 = filterPanelRef.current;
+    if (!panel2) return;
+    const grip = e.currentTarget;
+    const startX = e.clientX, startY = e.clientY;
+    const r2 = panel2.getBoundingClientRect();
+    const startW = r2.width, startH = r2.height;
+    const dir = isRtl() ? -1 : 1;
+    grip.setAttribute("data-active", "true");
+    panel2.setAttribute("data-panel-sized", "");
+    let lw = startW, lh = startH;
+    const onMove = (ev) => {
+      lw = clampNum(startW + (ev.clientX - startX) * dir, 220, fMaxW());
+      lh = clampNum(startH + (ev.clientY - startY), 120, fMaxH());
+      panel2.style.setProperty("--twc-dt-panel-w", `${lw}px`);
+      panel2.style.setProperty("--twc-dt-panel-h", `${lh}px`);
+    };
+    const onUp = () => {
+      setFPanelSize({ 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 onPanelGripKey = (e) => {
+    if (e.key === "Enter" || e.key === " " || e.key === "Backspace") {
+      e.preventDefault();
+      resetPanelSize();
+      return;
+    }
+    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) return;
+    e.preventDefault();
+    const panel2 = filterPanelRef.current;
+    if (!panel2) return;
+    const r2 = panel2.getBoundingClientRect();
+    const step = e.shiftKey ? 4 : 20;
+    const dir = isRtl() ? -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 = 220;
+      h = 120;
+    } else if (e.key === "End") {
+      w = fMaxW();
+      h = fMaxH();
+    }
+    setFPanelSize({ w: clampNum(w, 220, fMaxW()), h: clampNum(h, 120, fMaxH()) });
+  };
+  const resetPanelSize = () => {
+    setFPanelSize(null);
+    const p = filterPanelRef.current;
+    if (p) {
+      p.style.removeProperty("--twc-dt-panel-w");
+      p.style.removeProperty("--twc-dt-panel-h");
+      p.removeAttribute("data-panel-sized");
+    }
+  };
+  const resetFilterSizes = () => {
+    setFWidths({});
+    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));
+      p.removeAttribute("data-val-fixed");
+      p.removeAttribute("data-panel-sized");
+    }
+  };
+  const hasFilterSizeOverride = fWidths.col != null || fWidths.op != null || fWidths.val != null || fPanelSize != null;
+  const fieldHandle = (field, rowIdx) => resizableFilters && rowIdx === 0 ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "twc-dt__f-rz",
+      role: "separator",
+      "aria-orientation": "vertical",
+      tabIndex: 0,
+      "aria-label": `Resize ${F_LABEL[field]} field (Enter to reset)`,
+      onPointerDown: (e) => startFieldResize(e, field),
+      onClick: (e) => e.stopPropagation(),
+      onKeyDown: (e) => onFieldResizeKey(e, field)
+    }
+  ) : null;
   const orderIdxOf = (f) => {
     const i = order.indexOf(f);
     return i === -1 ? 9999 : i;
@@ -11698,78 +11952,126 @@ function Datatable({
         ] })
       ] });
     })() : null,
-    panel === "filters" && panelPos ? /* @__PURE__ */ jsxs("div", { className: "twc-dt__pop twc-dt__filters", style: { top: panelPos.top, left: panelPos.left }, children: [
-      /* @__PURE__ */ jsxs("div", { className: "twc-dt__panel-head", children: [
-        /* @__PURE__ */ jsx("span", { className: "twc-dt__panel-title", children: "Filters" }),
-        filters.length ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__link", onClick: () => setFilters([]), children: "Clear all" }) : null
-      ] }),
-      filters.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-dt__empty", style: { padding: "16px 12px" }, children: "No filters applied" }) : filters.map((f) => {
-        const col = colByField[f.field] || cols[0];
-        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-col", children: /* @__PURE__ */ jsx(
-            Select,
+    panel === "filters" && panelPos ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: filterPanelRef,
+        className: "twc-dt__pop twc-dt__filters",
+        style: {
+          top: panelPos.top,
+          left: panelPos.left,
+          "--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-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,
+          "--twc-dt-fop-cap": filterFieldMaxWidth ? `${filterFieldMaxWidth}px` : void 0
+        },
+        "data-val-fixed": fWidths.val != null ? "" : void 0,
+        "data-panel-sized": fPanelSize?.h != null ? "" : void 0,
+        children: [
+          /* @__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", gap: 2 }, children: [
+              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
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "twc-dt__frows", children: filters.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-dt__empty", style: { padding: "16px 12px" }, children: "No filters applied" }) : filters.map((f, i) => {
+            const col = colByField[f.field] || cols[0];
+            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__ */ jsxs("div", { className: "twc-dt__f-col", children: [
+                /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    size: "sm",
+                    portal: true,
+                    value: f.field,
+                    options: filterableCols.map((c) => ({ value: c.field, label: c.headerName })),
+                    onChange: (v) => {
+                      const nc = colByField[v];
+                      setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, field: v, op: opsFor(filterTypeOf(nc))[0].value, value: "" } : x));
+                    }
+                  }
+                ),
+                fieldHandle("col", i)
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "twc-dt__f-op", children: [
+                /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    size: "sm",
+                    portal: true,
+                    value: f.op,
+                    options: ops.map((o) => ({ value: o.value, label: o.label })),
+                    onChange: (v) => setFilters((arr) => arr.map((x) => {
+                      if (x.id !== f.id) return x;
+                      const nextMulti = isMultiOp(v);
+                      const wasArr = Array.isArray(x.value);
+                      return { ...x, op: v, value: nextMulti ? wasArr ? x.value : [] : wasArr ? "" : x.value };
+                    }))
+                  }
+                ),
+                fieldHandle("op", i)
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "twc-dt__f-val", children: [
+                op.noInput ? null : op.multi ? col.loadValueOptions ? /* @__PURE__ */ jsx(
+                  AsyncFilterValue,
+                  {
+                    col,
+                    value: f.value,
+                    onChange: (vals) => setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, value: vals } : x))
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  MultiSelect,
+                  {
+                    portal: true,
+                    placeholder: "Any of\u2026",
+                    value: Array.isArray(f.value) ? f.value : [],
+                    options: optionsForField(f.field),
+                    onChange: (vals) => setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, value: vals } : x))
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    size: "sm",
+                    type: filterTypeOf(col) === "number" ? "number" : "text",
+                    placeholder: "Value",
+                    value: f.value,
+                    onChange: (e) => setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, value: e.target.value } : x))
+                  }
+                ),
+                fieldHandle("val", i)
+              ] }),
+              /* @__PURE__ */ 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__ */ jsx(Svg, { d: I.x }) })
+            ] }, f.id);
+          }) }),
+          /* @__PURE__ */ jsx("div", { className: "twc-dt__f-add", style: { padding: "6px 4px 2px" }, children: /* @__PURE__ */ jsxs("button", { type: "button", className: "twc-dt__mi", style: { color: "var(--color-primary)" }, onClick: () => addFilter(cols[0].field), children: [
+            /* @__PURE__ */ jsx(Svg, { d: I.plus, style: { color: "var(--color-primary)" } }),
+            " Add filter"
+          ] }) }),
+          resizableFilters ? /* @__PURE__ */ jsx(
+            "span",
             {
-              size: "sm",
-              portal: true,
-              value: f.field,
-              options: filterableCols.map((c) => ({ value: c.field, label: c.headerName })),
-              onChange: (v) => {
-                const nc = colByField[v];
-                setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, field: v, op: opsFor(filterTypeOf(nc))[0].value, value: "" } : x));
+              className: "twc-dt__pop-grip",
+              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"}`,
+              onPointerDown: startPanelResize,
+              onKeyDown: onPanelGripKey,
+              onDoubleClick: (e) => {
+                e.preventDefault();
+                resetPanelSize();
               }
             }
-          ) }),
-          /* @__PURE__ */ jsx("div", { className: "twc-dt__f-op", children: /* @__PURE__ */ jsx(
-            Select,
-            {
-              size: "sm",
-              portal: true,
-              value: f.op,
-              options: ops.map((o) => ({ value: o.value, label: o.label })),
-              onChange: (v) => setFilters((arr) => arr.map((x) => {
-                if (x.id !== f.id) return x;
-                const nextMulti = isMultiOp(v);
-                const wasArr = Array.isArray(x.value);
-                return { ...x, op: v, value: nextMulti ? wasArr ? x.value : [] : wasArr ? "" : x.value };
-              }))
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { className: "twc-dt__f-val", children: op.noInput ? null : op.multi ? col.loadValueOptions ? /* @__PURE__ */ jsx(
-            AsyncFilterValue,
-            {
-              col,
-              value: f.value,
-              onChange: (vals) => setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, value: vals } : x))
-            }
-          ) : /* @__PURE__ */ jsx(
-            MultiSelect,
-            {
-              portal: true,
-              placeholder: "Any of\u2026",
-              value: Array.isArray(f.value) ? f.value : [],
-              options: optionsForField(f.field),
-              onChange: (vals) => setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, value: vals } : x))
-            }
-          ) : /* @__PURE__ */ jsx(
-            Input,
-            {
-              size: "sm",
-              type: filterTypeOf(col) === "number" ? "number" : "text",
-              placeholder: "Value",
-              value: f.value,
-              onChange: (e) => setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, value: e.target.value } : x))
-            }
-          ) }),
-          /* @__PURE__ */ 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__ */ jsx(Svg, { d: I.x }) })
-        ] }, f.id);
-      }),
-      /* @__PURE__ */ jsx("div", { style: { padding: "6px 4px 2px" }, children: /* @__PURE__ */ jsxs("button", { type: "button", className: "twc-dt__mi", style: { color: "var(--color-primary)" }, onClick: () => addFilter(cols[0].field), children: [
-        /* @__PURE__ */ jsx(Svg, { d: I.plus, style: { color: "var(--color-primary)" } }),
-        " Add filter"
-      ] }) })
-    ] }) : null
+          ) : null
+        ]
+      }
+    ) : null
   ] });
 }
 function space(v) {
@@ -12571,7 +12873,7 @@ function DatePicker({
           role: "dialog",
           "aria-modal": "true",
           "aria-label": "Choose date",
-          style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-tooltip)" },
+          style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-floating)" },
           children: [
             /* @__PURE__ */ jsxs("div", { className: "twc-dp__head", children: [
               /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dp__nav", "aria-label": mode === "years" ? "Previous decade" : mode === "months" ? "Previous year" : "Previous month", onClick: () => setView(mode === "years" ? new Date(y - 10, m, 1) : mode === "months" ? new Date(y - 1, m, 1) : new Date(y, m - 1, 1)), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) }) }),
@@ -13148,7 +13450,7 @@ function DateRangePicker({
           role: "dialog",
           "aria-modal": "true",
           "aria-label": "Choose date range",
-          style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-tooltip)" },
+          style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-floating)" },
           children: [
             presetItems.length ? /* @__PURE__ */ jsx("div", { className: "twc-drp__presets", children: presetItems.map((p, i) => /* @__PURE__ */ jsx("button", { type: "button", className: "twc-drp__preset", onClick: () => applyPreset(p), children: p.label }, i)) }) : null,
             /* @__PURE__ */ jsxs("div", { className: "twc-drp__cal", children: [
@@ -13677,7 +13979,7 @@ function TimePicker({
           role: "dialog",
           "aria-modal": "true",
           "aria-label": "Choose time",
-          style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-tooltip)" },
+          style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-floating)" },
           children: /* @__PURE__ */ jsx("div", { className: "twc-tp__cols", children: columns.map((col) => {
             const firstTab = col.items.find((it) => it.selected) || col.items.find((it) => !it.disabled);
             return /* @__PURE__ */ jsxs("div", { className: "twc-tp__col", role: "listbox", "aria-label": col.aria, "data-col": col.key, children: [