twico-ui 1.24.0 → 1.26.0

package/dist/index.d.cts

@@ -1825,8 +1825,9 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   resizableFilters?: boolean;
   /** #304: extend the drag-resize grip to the other toolbar popovers too — Columns, Aggregation, Pivot,
    *  and Batch-edit — each with a corner grip + keyboard resize (Arrows, Home/End, Enter/double-click to
-   *  reset). Implies `resizableFilters`. Each popover's size persists independently via `stateKey`
-   *  (`popoverSizes`). Great for a wide grid whose Columns list is otherwise capped. @default false */
+   *  reset). Independent of `resizableFilters` (which controls the Filters panel): each defaults `true` and
+   *  can be turned off on its own. Each popover's size persists independently via `stateKey` (`popoverSizes`).
+   *  Great for a wide grid whose Columns list is otherwise capped. Set `false` to opt a grid out. @default true */
   resizablePopovers?: 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`. */
@@ -1937,7 +1938,10 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   onStateChange?: (state: DatatableState) => void;
   /** Show a "Go to" page jumper in the footer when there are more than 5 pages. @default true */
   showPageJumper?: boolean;
-  /** Click-to-select mode: "row" highlights the clicked row, "cell" highlights a single cell. @default "none" */
+  /** Click-to-select mode: "row" highlights the clicked row, "cell" enables spreadsheet-like cell selection.
+   *  In "cell" mode the grid supports keyboard navigation and **rectangular range selection** (#317):
+   *  Shift+Click / Shift+Arrow extend a range from an anchor; selected cells expose `aria-selected` and the
+   *  grid is `aria-multiselectable` with `aria-activedescendant` on the active cell. @default "none" */
   selectionMode?: "none" | "row" | "cell";
   /** Fired when a row is clicked in "row" selection mode: (row, key). */
   onRowClick?: (row: T, key: string | number) => void;
@@ -1945,6 +1949,15 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   onCellClick?: (value: any, row: T, field: string) => void;
   /** Fired when the active cell changes: ({ key, field } | null). */
   onActiveCellChange?: (cell: { key: string | number; field: string } | null) => void;
+  /** #317: fired when the rectangular cell selection changes ("cell" mode) — every cell inside the
+   *  anchor→focus rectangle, in row-major order. Empty array when the selection clears. */
+  onCellSelectionChange?: (cells: Array<{ key: string | number; field: string }>) => void;
+  /** #318: enable spreadsheet clipboard on cells ("cell" mode): Ctrl/Cmd+C copies the active cell/range as
+   *  TSV, Ctrl/Cmd+X cuts (copy then clear), Ctrl/Cmd+V pastes onto the target rectangle from the active
+   *  cell. Paste is format-restricted by column `copyType` (incompatible cells are skipped) and commits
+   *  through `onRowUpdate`/`onRowsChange` in one batched change; outcomes are announced via `aria-live`.
+   *  @default false */
+  enableClipboard?: boolean;
   /** Show the **Aggregation** toolbar button and start with the totals row on. From that panel the user
    *  toggles totals and picks columns + functions (a column's `aggregation` prop seeds the initial choice);
    *  changing the prop re-applies it. When false (the default) the Aggregation button is hidden. @default false */
@@ -2156,6 +2169,11 @@ interface DatatableColumn<T = any> {
   loadValueOptions?: (query: string) => Promise<Array<string | { value: string; label: string }>>;
   /** Format the raw value to a string/number for display. */
   valueFormatter?: (value: any, row: T) => React.ReactNode;
+  /** #318: opaque copy/paste compatibility token for the cell clipboard (`enableClipboard`). On an in-app
+   *  paste, a source cell is written to a target only when the two columns' `copyType` match — so e.g. a
+   *  "part-name" value never lands in a "measurement" column. Falls back to a number-vs-text bucket derived
+   *  from `type` when omitted. Examples: "text", "number", "part-name", "master:suppliers". */
+  copyType?: string;
   /** Fully custom cell renderer (badges, avatars, etc.). */
   renderCell?: (value: any, row: T) => React.ReactNode;
   /** Diff-mode (#239) per-column equality override — return true when the two values are equal.

package/dist/index.d.ts

@@ -1825,8 +1825,9 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   resizableFilters?: boolean;
   /** #304: extend the drag-resize grip to the other toolbar popovers too — Columns, Aggregation, Pivot,
    *  and Batch-edit — each with a corner grip + keyboard resize (Arrows, Home/End, Enter/double-click to
-   *  reset). Implies `resizableFilters`. Each popover's size persists independently via `stateKey`
-   *  (`popoverSizes`). Great for a wide grid whose Columns list is otherwise capped. @default false */
+   *  reset). Independent of `resizableFilters` (which controls the Filters panel): each defaults `true` and
+   *  can be turned off on its own. Each popover's size persists independently via `stateKey` (`popoverSizes`).
+   *  Great for a wide grid whose Columns list is otherwise capped. Set `false` to opt a grid out. @default true */
   resizablePopovers?: 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`. */
@@ -1937,7 +1938,10 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   onStateChange?: (state: DatatableState) => void;
   /** Show a "Go to" page jumper in the footer when there are more than 5 pages. @default true */
   showPageJumper?: boolean;
-  /** Click-to-select mode: "row" highlights the clicked row, "cell" highlights a single cell. @default "none" */
+  /** Click-to-select mode: "row" highlights the clicked row, "cell" enables spreadsheet-like cell selection.
+   *  In "cell" mode the grid supports keyboard navigation and **rectangular range selection** (#317):
+   *  Shift+Click / Shift+Arrow extend a range from an anchor; selected cells expose `aria-selected` and the
+   *  grid is `aria-multiselectable` with `aria-activedescendant` on the active cell. @default "none" */
   selectionMode?: "none" | "row" | "cell";
   /** Fired when a row is clicked in "row" selection mode: (row, key). */
   onRowClick?: (row: T, key: string | number) => void;
@@ -1945,6 +1949,15 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   onCellClick?: (value: any, row: T, field: string) => void;
   /** Fired when the active cell changes: ({ key, field } | null). */
   onActiveCellChange?: (cell: { key: string | number; field: string } | null) => void;
+  /** #317: fired when the rectangular cell selection changes ("cell" mode) — every cell inside the
+   *  anchor→focus rectangle, in row-major order. Empty array when the selection clears. */
+  onCellSelectionChange?: (cells: Array<{ key: string | number; field: string }>) => void;
+  /** #318: enable spreadsheet clipboard on cells ("cell" mode): Ctrl/Cmd+C copies the active cell/range as
+   *  TSV, Ctrl/Cmd+X cuts (copy then clear), Ctrl/Cmd+V pastes onto the target rectangle from the active
+   *  cell. Paste is format-restricted by column `copyType` (incompatible cells are skipped) and commits
+   *  through `onRowUpdate`/`onRowsChange` in one batched change; outcomes are announced via `aria-live`.
+   *  @default false */
+  enableClipboard?: boolean;
   /** Show the **Aggregation** toolbar button and start with the totals row on. From that panel the user
    *  toggles totals and picks columns + functions (a column's `aggregation` prop seeds the initial choice);
    *  changing the prop re-applies it. When false (the default) the Aggregation button is hidden. @default false */
@@ -2156,6 +2169,11 @@ interface DatatableColumn<T = any> {
   loadValueOptions?: (query: string) => Promise<Array<string | { value: string; label: string }>>;
   /** Format the raw value to a string/number for display. */
   valueFormatter?: (value: any, row: T) => React.ReactNode;
+  /** #318: opaque copy/paste compatibility token for the cell clipboard (`enableClipboard`). On an in-app
+   *  paste, a source cell is written to a target only when the two columns' `copyType` match — so e.g. a
+   *  "part-name" value never lands in a "measurement" column. Falls back to a number-vs-text bucket derived
+   *  from `type` when omitted. Examples: "text", "number", "part-name", "master:suppliers". */
+  copyType?: string;
   /** Fully custom cell renderer (badges, avatars, etc.). */
   renderCell?: (value: any, row: T) => React.ReactNode;
   /** Diff-mode (#239) per-column equality override — return true when the two values are equal.

package/dist/index.mjs

@@ -8440,6 +8440,8 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 .twc-dt__row[data-selectable="true"] { cursor: pointer; }
 .twc-dt__row[data-active="true"] .twc-dt__td { background: var(--color-primary-subtle); box-shadow: inset 0 0 0 9999px transparent; }
 .twc-dt__row[data-active="true"] .twc-dt__td[data-pin] { background: var(--color-primary-subtle); }
+/* #317: data-cell-selected fills the range rectangle; data-cell-active keeps the ring on the moving corner. */
+.twc-dt__td[data-cell-selected="true"] { background: var(--color-primary-subtle); }
 .twc-dt__td[data-cell-active="true"] { box-shadow: inset 0 0 0 2px var(--color-primary); background: var(--color-primary-subtle); }
 .twc-dt__row:last-child .twc-dt__td { border-bottom: none; }
 
@@ -8594,6 +8596,9 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 .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; }
+/* #316: a second grip in the bottom-inline-start corner grows a right-anchored panel toward the empty side (right edge pinned). */
+.twc-dt__pop-grip[data-side="start"] { inset-inline-start: 2px; inset-inline-end: auto; cursor: nesw-resize; background: linear-gradient(225deg, transparent 0 55%, var(--color-border-strong) 55% 64%, transparent 64% 73%, var(--color-border-strong) 73% 82%, transparent 82%); }
+[dir="rtl"] .twc-dt__pop-grip[data-side="start"] { cursor: nwse-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; }
@@ -9148,6 +9153,8 @@ function Datatable({
   onRowClick,
   onCellClick,
   onActiveCellChange,
+  onCellSelectionChange,
+  enableClipboard = false,
   showAggregation = false,
   ariaLabel = "Data table",
   "aria-label": ariaLabelAttr,
@@ -9159,7 +9166,8 @@ function Datatable({
   onQuickFilterChange,
   toolbarActions,
   resizableFilters = true,
-  resizablePopovers = false,
+  resizablePopovers = true,
+  // #314: default-on (matches resizableFilters) — set false to opt a grid out
   filterFieldMaxWidth,
   rowPinning = false,
   rowReorder = false,
@@ -9277,6 +9285,8 @@ function Datatable({
   const [selected, setSelected] = React51__default.useState(() => /* @__PURE__ */ new Set());
   const [activeRow, setActiveRow] = React51__default.useState(null);
   const [activeCell, setActiveCell] = React51__default.useState(null);
+  const [anchorCell, setAnchorCell] = React51__default.useState(null);
+  const gridId = React51__default.useId();
   const [internalPage, setInternalPage] = React51__default.useState(0);
   const [internalRpp, setInternalRpp] = React51__default.useState(pageSize > 0 ? pageSize : 10);
   const pageControlled = page !== void 0;
@@ -9376,6 +9386,7 @@ function Datatable({
       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 (typeof sz.left === "number") next[id].left = clampNum(sz.left, 8, fMaxW());
       }
       if (Object.keys(next).length) setPopSizes(next);
     }
@@ -9827,6 +9838,38 @@ function Datatable({
     middleRows.forEach((r2, i) => m.set(keyOf(r2, keyIndex.get(keyOf(r2)) ?? i), i));
     return m;
   }, [middleRows, keyIndex]);
+  const cellColIndex = React51__default.useCallback((field) => ordered.findIndex((c) => c.field === field), [ordered]);
+  const cellRect = React51__default.useMemo(() => {
+    if (selectionMode !== "cell" || !activeCell) return null;
+    const ar = keyIndex.get(activeCell.key), ac = cellColIndex(activeCell.field);
+    if (ar == null || ac < 0) return null;
+    const anchor = anchorCell || activeCell;
+    const nr = keyIndex.get(anchor.key), nc = cellColIndex(anchor.field);
+    const r0 = nr == null ? ar : Math.min(ar, nr), r1 = nr == null ? ar : Math.max(ar, nr);
+    const c0 = nc < 0 ? ac : Math.min(ac, nc), c1 = nc < 0 ? ac : Math.max(ac, nc);
+    return { r0, r1, c0, c1 };
+  }, [selectionMode, activeCell, anchorCell, keyIndex, cellColIndex]);
+  const activeCellId = React51__default.useMemo(() => {
+    if (selectionMode !== "cell" || !activeCell) return void 0;
+    const ar = keyIndex.get(activeCell.key), ac = cellColIndex(activeCell.field);
+    return ar == null || ac < 0 ? void 0 : `${gridId}-${ar}-${ac}`;
+  }, [selectionMode, activeCell, keyIndex, cellColIndex, gridId]);
+  const onCellSelRef = React51__default.useRef(onCellSelectionChange);
+  onCellSelRef.current = onCellSelectionChange;
+  const prevSelSigRef = React51__default.useRef("");
+  React51__default.useEffect(() => {
+    const cb = onCellSelRef.current;
+    if (selectionMode !== "cell" || !cb) return;
+    const cells = [];
+    if (cellRect) for (let r2 = cellRect.r0; r2 <= cellRect.r1; r2++) for (let c = cellRect.c0; c <= cellRect.c1; c++) {
+      const row = leafRows[r2], col = ordered[c];
+      if (row && col) cells.push({ key: keyOf(row, r2), field: col.field });
+    }
+    const sig = cells.map((x) => `${x.key}|${x.field}`).join(",");
+    if (sig === prevSelSigRef.current) return;
+    prevSelSigRef.current = sig;
+    cb(cells);
+  }, [cellRect, selectionMode, leafRows, ordered]);
   const canReorderRows = rowReorder && !activeGroupBy.length && !sort;
   function onRowDrop(targetKey) {
     const fromKey = rowDrag.from;
@@ -10239,6 +10282,7 @@ function Datatable({
     const next = { key: k, field: col.field };
     setActiveCell(next);
     setActiveRow(k);
+    if (!(e.shiftKey && anchorCell)) setAnchorCell(next);
     onCellClick?.(row[col.field], row, col.field);
     onActiveCellChange?.(next);
   }
@@ -10250,6 +10294,24 @@ function Datatable({
     if (editing) return;
     const td = e.target.closest(".twc-dt__td[data-r]");
     if (!td) return;
+    if (enableClipboard && selectionMode === "cell" && (e.ctrlKey || e.metaKey)) {
+      const k = e.key.toLowerCase();
+      if (k === "c") {
+        e.preventDefault();
+        copySelection(false);
+        return;
+      }
+      if (k === "x") {
+        e.preventDefault();
+        copySelection(true);
+        return;
+      }
+      if (k === "v") {
+        e.preventDefault();
+        pasteSelection();
+        return;
+      }
+    }
     let r2 = +td.getAttribute("data-r"), c = +td.getAttribute("data-c");
     const maxR = leafRows.length - 1, maxC = ordered.length - 1;
     let handled = true;
@@ -10302,6 +10364,16 @@ function Datatable({
       e.preventDefault();
       setFocus({ r: r2, c });
       focusCell(r2, c);
+      if (selectionMode === "cell") {
+        const nk = keyOf(leafRows[r2], r2), col = ordered[c];
+        if (col) {
+          const nc = { key: nk, field: col.field };
+          setActiveCell(nc);
+          setActiveRow(nk);
+          if (!e.shiftKey) setAnchorCell(nc);
+          onActiveCellChange?.(nc);
+        }
+      }
     }
   }
   React51__default.useEffect(() => {
@@ -10418,11 +10490,149 @@ function Datatable({
     setBatchEdit(null);
     closeBatchEdit();
   }
+  const [clipboardMsg, setClipboardMsg] = React51__default.useState("");
+  const clipboardRef = React51__default.useRef(null);
+  const copyTypeOf = (col) => col && col.copyType != null ? col.copyType : col && col.type === "number" ? "number" : "text";
+  const writeClipboard = (text) => {
+    const execFallback = () => {
+      try {
+        if (typeof document !== "undefined") {
+          const ta = document.createElement("textarea");
+          ta.value = text;
+          ta.style.position = "fixed";
+          ta.style.opacity = "0";
+          document.body.appendChild(ta);
+          ta.focus();
+          ta.select();
+          document.execCommand("copy");
+          document.body.removeChild(ta);
+        }
+      } catch {
+      }
+    };
+    try {
+      if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.writeText) return navigator.clipboard.writeText(text).catch(execFallback);
+    } catch {
+    }
+    execFallback();
+    return Promise.resolve();
+  };
+  const writeCellPatches = (patchByKey) => {
+    if (!patchByKey.size) return 0;
+    const changed = [];
+    const nextAll = rows.map((r2, i) => {
+      const k = keyOf(r2, i);
+      const patch = patchByKey.get(k);
+      if (!patch) return r2;
+      const updated = { ...r2, ...patch };
+      changed.push([updated, r2, patch]);
+      return updated;
+    });
+    changed.forEach(([updated, orig, patch]) => {
+      for (const f of Object.keys(patch)) onRowUpdate?.(updated, orig, f);
+    });
+    if (onRowsChange && changed.length) onRowsChange(nextAll);
+    return changed.length;
+  };
+  const rectCells = () => {
+    if (!cellRect) return null;
+    const out = [];
+    for (let r2 = cellRect.r0; r2 <= cellRect.r1; r2++) {
+      const row = leafRows[r2];
+      if (!row) continue;
+      const line = [];
+      for (let c = cellRect.c0; c <= cellRect.c1; c++) {
+        const col = ordered[c];
+        if (col) line.push({ key: keyOf(row, r2), field: col.field, col, value: getColVal(col, row) });
+      }
+      out.push(line);
+    }
+    return out.length ? out : null;
+  };
+  const copySelection = (cut) => {
+    const grid = rectCells();
+    if (!grid) return;
+    const tsv = grid.map((line) => line.map((cell) => cell.value == null ? "" : String(cell.value)).join("	")).join("\n");
+    clipboardRef.current = { tsv, colTypes: grid[0].map((cell) => copyTypeOf(cell.col)), matrix: grid.map((line) => line.map((cell) => cell.value)) };
+    writeClipboard(tsv);
+    const n = grid.reduce((a, line) => a + line.length, 0);
+    if (cut) {
+      const patchByKey = /* @__PURE__ */ new Map();
+      let clearable = 0;
+      for (const line of grid) for (const cell of line) {
+        if (!isColEditable(cell.col)) continue;
+        clearable++;
+        const p = patchByKey.get(cell.key) || {};
+        p[cell.field] = cell.col.type === "number" ? null : "";
+        patchByKey.set(cell.key, p);
+      }
+      writeCellPatches(patchByKey);
+      setClipboardMsg(`Cut ${clearable} cell${clearable === 1 ? "" : "s"}${clearable < n ? `, ${n - clearable} read-only kept` : ""}`);
+    } else {
+      setClipboardMsg(`Copied ${n} cell${n === 1 ? "" : "s"}`);
+    }
+  };
+  const pasteSelection = async () => {
+    if (!cellRect) return;
+    let text = null;
+    try {
+      if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.readText) text = await navigator.clipboard.readText();
+    } catch {
+      setClipboardMsg("Paste unavailable \u2014 clipboard permission denied");
+      return;
+    }
+    if (text == null) {
+      setClipboardMsg("Nothing to paste");
+      return;
+    }
+    const inApp = clipboardRef.current && clipboardRef.current.tsv === text ? clipboardRef.current : null;
+    let matrix;
+    if (inApp) matrix = inApp.matrix;
+    else {
+      const lines = text.replace(/\r\n?/g, "\n").split("\n");
+      if (lines.length && lines[lines.length - 1] === "") lines.pop();
+      matrix = lines.map((line) => line.split("	"));
+    }
+    const patchByKey = /* @__PURE__ */ new Map();
+    let written = 0, skipped = 0;
+    for (let i = 0; i < matrix.length; i++) {
+      const rr = cellRect.r0 + i;
+      const row = leafRows[rr];
+      if (!row) break;
+      for (let j = 0; j < matrix[i].length; j++) {
+        const cc = cellRect.c0 + j;
+        const col = ordered[cc];
+        if (!col) break;
+        if (!isColEditable(col)) {
+          skipped++;
+          continue;
+        }
+        if (inApp && inApp.colTypes[j] != null && inApp.colTypes[j] !== copyTypeOf(col)) {
+          skipped++;
+          continue;
+        }
+        let v = matrix[i][j];
+        if (col.type === "number") {
+          v = v === "" ? null : Number(v);
+          if (Number.isNaN(v)) v = null;
+        }
+        const k = keyOf(row, rr);
+        const p = patchByKey.get(k) || {};
+        p[col.field] = v;
+        patchByKey.set(k, p);
+        written++;
+      }
+    }
+    writeCellPatches(patchByKey);
+    setClipboardMsg(`Pasted ${written} cell${written === 1 ? "" : "s"}${skipped ? `, ${skipped} skipped (incompatible column)` : ""}`);
+  };
   React51__default.useEffect(() => {
     if (!editing) return;
     const onDown = (e) => {
       if (e.target.closest(".twc-dt__editor-wrap") || e.target.closest(".twc-pop")) return;
-      setEditing(null);
+      const col = colByField[editing.field];
+      if (col && col.renderEditCell) setEditing(null);
+      else commitEdit();
     };
     document.addEventListener("mousedown", onDown, true);
     return () => document.removeEventListener("mousedown", onDown, true);
@@ -10672,6 +10882,7 @@ function Datatable({
     if (node) {
       node.style.removeProperty("--twc-dt-pop-w");
       node.style.removeProperty("--twc-dt-pop-h");
+      node.style.removeProperty("left");
       node.removeAttribute("data-pop-sized");
     }
     setPopSizes((s) => {
@@ -10681,7 +10892,7 @@ function Datatable({
       return n;
     });
   };
-  const startPopResize = (id) => (e) => {
+  const startPopResize = (id, side) => (e) => {
     if (e.button != null && e.button !== 0) return;
     e.preventDefault();
     e.stopPropagation();
@@ -10690,21 +10901,27 @@ function Datatable({
     const grip = e.currentTarget;
     const startX = e.clientX, startY = e.clientY;
     const r2 = pop.getBoundingClientRect();
-    const startW = r2.width, startH = r2.height;
+    const startW = r2.width, startH = r2.height, startLeft = r2.left, startRight = r2.right;
     const dir = typeof getComputedStyle !== "undefined" && getComputedStyle(pop).direction === "rtl" ? -1 : 1;
+    const toStart = side === "start";
     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;
+    let lw = startW, lh = startH, ll = startLeft;
     const onMove = (ev) => {
-      lw = clampNum(startW + (ev.clientX - startX) * dir, popMinW(id), fMaxW());
+      const dw = toStart ? (startX - ev.clientX) * dir : (ev.clientX - startX) * dir;
+      lw = clampNum(startW + dw, 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`);
+      if (toStart) {
+        ll = Math.max(8, startRight - lw);
+        pop.style.left = `${ll}px`;
+      }
     };
     const onUp = () => {
-      setPopSizes((s) => ({ ...s, [id]: { w: lw, h: lh } }));
+      setPopSizes((s) => ({ ...s, [id]: { ...s[id] || {}, w: lw, h: lh, ...toStart ? { left: ll } : {} } }));
       grip.removeAttribute("data-active");
       window.removeEventListener("pointermove", onMove);
       window.removeEventListener("pointerup", onUp);
@@ -10712,7 +10929,7 @@ function Datatable({
     window.addEventListener("pointermove", onMove);
     window.addEventListener("pointerup", onUp);
   };
-  const onPopGripKey = (id) => (e) => {
+  const onPopGripKey = (id, side) => (e) => {
     if (e.key === "Enter" || e.key === " " || e.key === "Backspace") {
       e.preventDefault();
       clearPop(id, e.currentTarget.closest(".twc-dt__pop"));
@@ -10737,26 +10954,55 @@ function Datatable({
       w = fMaxW();
       h = fMaxH();
     }
-    setPopSizes((s) => ({ ...s, [id]: { w: clampNum(w, popMinW(id), fMaxW()), h: clampNum(h, 120, fMaxH()) } }));
+    w = clampNum(w, popMinW(id), fMaxW());
+    h = clampNum(h, 120, fMaxH());
+    const left = side === "start" ? Math.max(8, r2.right - w) : void 0;
+    setPopSizes((s) => ({ ...s, [id]: { ...s[id] || {}, w, h, ...left != null ? { left } : {} } }));
   };
-  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__ */ 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"));
+  const popStyle = (id) => {
+    const s = popSizes[id];
+    if (!s) return null;
+    const st = { "--twc-dt-pop-w": `${s.w}px`, "--twc-dt-pop-h": `${s.h}px` };
+    if (s.left != null) st.left = `${s.left}px`;
+    return st;
+  };
+  const popGrip = (id) => resizablePopovers ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "twc-dt__pop-grip",
+        "data-side": "end",
+        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, "end"),
+        onKeyDown: onPopGripKey(id, "end"),
+        onDoubleClick: (e) => {
+          e.preventDefault();
+          clearPop(id, e.currentTarget.closest(".twc-dt__pop"));
+        }
       }
-    }
-  ) : null;
-  const fieldHandle = (field, rowIdx) => (resizableFilters || resizablePopovers) && rowIdx === 0 ? /* @__PURE__ */ jsx(
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "twc-dt__pop-grip",
+        "data-side": "start",
+        role: "slider",
+        tabIndex: 0,
+        "aria-label": "Resize panel leftward (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, "start"),
+        onKeyDown: onPopGripKey(id, "start"),
+        onDoubleClick: (e) => {
+          e.preventDefault();
+          clearPop(id, e.currentTarget.closest(".twc-dt__pop"));
+        }
+      }
+    )
+  ] }) : null;
+  const fieldHandle = (field, rowIdx) => resizableFilters && rowIdx === 0 ? /* @__PURE__ */ jsx(
     "span",
     {
       className: "twc-dt__f-rz",
@@ -10911,22 +11157,27 @@ function Datatable({
             const editable = isColEditable(c);
             const isEditing = editing && editing.key === k && editing.field === c.field;
             const cellActive = selectionMode === "cell" && activeCell && activeCell.key === k && activeCell.field === c.field;
+            const cellSelected = selectionMode === "cell" && cellRect && ri >= cellRect.r0 && ri <= cellRect.r1 && ci >= cellRect.c0 && ci <= cellRect.c1;
+            const cellId = selectionMode === "cell" ? `${gridId}-${ri}-${ci}` : void 0;
             const display = c.valueFormatter ? c.valueFormatter(val, row) : val;
             const cellTitle = !isActions && !c.renderCell && !isEditing && (typeof display === "string" || typeof display === "number") ? String(display) : void 0;
             return /* @__PURE__ */ jsxs(
               "td",
               {
+                id: cellId,
                 className: "twc-dt__td",
                 role: "gridcell",
                 "data-r": ri,
                 "data-c": ci,
                 "aria-colindex": ci + 1 + (checkboxSelection ? 1 : 0),
                 tabIndex: focus.r === ri && focus.c === ci ? 0 : -1,
+                "aria-selected": cellSelected || void 0,
                 "data-num": c.type === "number" || void 0,
                 "data-actions": isActions || void 0,
                 "data-editable": editable && !isEditing || void 0,
                 "data-editing": isEditing || void 0,
                 "data-cell-active": cellActive || void 0,
+                "data-cell-selected": cellSelected || void 0,
                 "data-wrap": wrapped.has(c.field) || void 0,
                 "data-pin": st.pin,
                 "data-pin-edge": st.edge,
@@ -11288,6 +11539,7 @@ function Datatable({
       /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__groupbar-clear", onClick: () => setGroupBy([]), children: "Clear all" })
     ] }) : null,
     /* @__PURE__ */ jsx("div", { className: "twc-dt__sr", role: "status", "aria-live": "polite", children: reorderMsg }),
+    /* @__PURE__ */ jsx("div", { className: "twc-dt__sr", role: "status", "aria-live": "polite", children: clipboardMsg }),
     pivotActive ? renderPivot() : /* @__PURE__ */ jsx(
       "div",
       {
@@ -11309,6 +11561,8 @@ function Datatable({
             "aria-label": ariaLabelAttr || ariaLabel,
             "aria-rowcount": totalRows + 1,
             "aria-colcount": ordered.length + (checkboxSelection ? 1 : 0),
+            "aria-multiselectable": selectionMode === "cell" || void 0,
+            "aria-activedescendant": activeCellId,
             "aria-busy": loading || void 0,
             onKeyDown: onGridKeyDown,
             children: [
@@ -12170,7 +12424,7 @@ function Datatable({
                 /* @__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 || resizablePopovers) && hasFilterSizeOverride ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__link", onClick: resetFilterSizes, children: "Reset sizes" }) : 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
             ] })
           ] }),
@@ -12250,7 +12504,7 @@ function Datatable({
             /* @__PURE__ */ jsx(Svg, { d: I.plus, style: { color: "var(--color-primary)" } }),
             " Add filter"
           ] }) }),
-          resizableFilters || resizablePopovers ? /* @__PURE__ */ jsx(
+          resizableFilters ? /* @__PURE__ */ jsx(
             "span",
             {
               className: "twc-dt__pop-grip",