twico-ui 1.25.0 → 1.26.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+# [1.26.0](https://github.com/EncryptionL/twico-ui/compare/v1.25.0...v1.26.0) (2026-08-03)
+
+
+### Features
+
+* **datatable:** bottom-left popover grip, cell range selection, keyboard clipboard ([#316](https://github.com/EncryptionL/twico-ui/issues/316), [#317](https://github.com/EncryptionL/twico-ui/issues/317), [#318](https://github.com/EncryptionL/twico-ui/issues/318)) ([0c1a583](https://github.com/EncryptionL/twico-ui/commit/0c1a583ef8b983410547f7f1fb92f8660ec926c3))
+
 # [1.25.0](https://github.com/EncryptionL/twico-ui/compare/v1.24.0...v1.25.0) (2026-08-03)
 
 

package/dist/index.cjs

@@ -8461,6 +8461,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; }
 
@@ -8615,6 +8617,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; }
@@ -9169,6 +9174,8 @@ function Datatable({
   onRowClick,
   onCellClick,
   onActiveCellChange,
+  onCellSelectionChange,
+  enableClipboard = false,
   showAggregation = false,
   ariaLabel = "Data table",
   "aria-label": ariaLabelAttr,
@@ -9299,6 +9306,8 @@ function Datatable({
   const [selected, setSelected] = React51__namespace.default.useState(() => /* @__PURE__ */ new Set());
   const [activeRow, setActiveRow] = React51__namespace.default.useState(null);
   const [activeCell, setActiveCell] = React51__namespace.default.useState(null);
+  const [anchorCell, setAnchorCell] = React51__namespace.default.useState(null);
+  const gridId = React51__namespace.default.useId();
   const [internalPage, setInternalPage] = React51__namespace.default.useState(0);
   const [internalRpp, setInternalRpp] = React51__namespace.default.useState(pageSize > 0 ? pageSize : 10);
   const pageControlled = page !== void 0;
@@ -9398,6 +9407,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);
     }
@@ -9849,6 +9859,38 @@ function Datatable({
     middleRows.forEach((r2, i) => m.set(keyOf(r2, keyIndex.get(keyOf(r2)) ?? i), i));
     return m;
   }, [middleRows, keyIndex]);
+  const cellColIndex = React51__namespace.default.useCallback((field) => ordered.findIndex((c) => c.field === field), [ordered]);
+  const cellRect = React51__namespace.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__namespace.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__namespace.default.useRef(onCellSelectionChange);
+  onCellSelRef.current = onCellSelectionChange;
+  const prevSelSigRef = React51__namespace.default.useRef("");
+  React51__namespace.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;
@@ -10261,6 +10303,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);
   }
@@ -10272,6 +10315,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;
@@ -10324,6 +10385,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__namespace.default.useEffect(() => {
@@ -10440,6 +10511,142 @@ function Datatable({
     setBatchEdit(null);
     closeBatchEdit();
   }
+  const [clipboardMsg, setClipboardMsg] = React51__namespace.default.useState("");
+  const clipboardRef = React51__namespace.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__namespace.default.useEffect(() => {
     if (!editing) return;
     const onDown = (e) => {
@@ -10696,6 +10903,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) => {
@@ -10705,7 +10913,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();
@@ -10714,21 +10922,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);
@@ -10736,7 +10950,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"));
@@ -10761,25 +10975,54 @@ 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__ */ 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"));
+  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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.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;
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
     "span",
     {
@@ -10935,22 +11178,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__ */ jsxRuntime.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,
@@ -11312,6 +11560,7 @@ function Datatable({
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__groupbar-clear", onClick: () => setGroupBy([]), children: "Clear all" })
     ] }) : null,
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__sr", role: "status", "aria-live": "polite", children: reorderMsg }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__sr", role: "status", "aria-live": "polite", children: clipboardMsg }),
     pivotActive ? renderPivot() : /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -11333,6 +11582,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: [