twico-ui 1.18.0 → 1.18.2

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.18.2](https://github.com/EncryptionL/twico-ui/compare/v1.18.1...v1.18.2) (2026-07-23)
+
+
+### Bug Fixes
+
+* **datatable:** scope the reorder grab cursor to the drag handle ([e6bc6cd](https://github.com/EncryptionL/twico-ui/commit/e6bc6cd71a4295fa25635a8a9467720133e041dd)), closes [#263](https://github.com/EncryptionL/twico-ui/issues/263)
+
+## [1.18.1](https://github.com/EncryptionL/twico-ui/compare/v1.18.0...v1.18.1) (2026-07-23)
+
+
+### Bug Fixes
+
+* **datatable:** stop the reorder grip from clipping the selection checkbox ([096f5e8](https://github.com/EncryptionL/twico-ui/commit/096f5e8977949bc664ffcec21931c9062d831522)), closes [#261](https://github.com/EncryptionL/twico-ui/issues/261)
+
 # [1.18.0](https://github.com/EncryptionL/twico-ui/compare/v1.17.2...v1.18.0) (2026-07-17)
 
 

package/dist/index.cjs

@@ -8346,8 +8346,8 @@ var DT_CSS = `
 .twc-dt__row[data-pinned-row="top"] > .twc-dt__td { border-bottom: var(--border-medium) solid var(--color-primary-border); box-shadow: 0 1px 0 var(--color-primary-border); }
 .twc-dt__row[data-pinned-row="bottom"] > .twc-dt__td { border-top: var(--border-medium) solid var(--color-primary-border); }
 
-/* Row reordering */
-.twc-dt__row[data-reorderable] { cursor: grab; }
+/* Row reordering \u2014 the grab affordance lives on the drag handle only (#263), not the whole row, so
+   hovering a normal data cell isn't presented as draggable (the row stays a drag source for the mouse). */
 .twc-dt__row[data-row-dragging] { opacity: 0.4; }
 /* #239 diff mode: row op tint + before\u2192after cells (single-line, clipped by the td's own overflow). */
 .twc-dt__row[data-op="added"] > .twc-dt__td { background: color-mix(in srgb, var(--color-success) 7%, transparent); }
@@ -8378,6 +8378,7 @@ var DT_CSS = `
 .twc-dt__row:hover .twc-dt__row-handle, .twc-dt__row-handle:focus-visible { opacity: 0.7; }
 .twc-dt__row-handle:focus-visible { outline: none; box-shadow: var(--ring); color: var(--color-primary); }
 .twc-dt__row-handle[data-grabbed="true"] { opacity: 1; color: var(--color-primary); }
+.twc-dt__row-handle:active, .twc-dt__row-handle[data-grabbed="true"] { cursor: grabbing; }
 .twc-dt__row-handle svg { width: 14px; height: 14px; }
 /* Visually-hidden aria-live region for reorder announcements */
 .twc-dt__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@@ -9451,7 +9452,8 @@ function Datatable({
     return [...L, ...mid, ...R];
   }, [pins, hidden, visibleCols, colByField, order]);
   const NUM_W = 56;
-  const numLeft = checkboxSelection ? 44 : 0;
+  const CHK_W = checkboxSelection ? rowReorder ? 68 : 44 : 0;
+  const numLeft = CHK_W;
   const leadW = numLeft + (showRowNum ? NUM_W : 0);
   const stickyOf = (field) => {
     if (pins.left.includes(field)) {
@@ -10374,7 +10376,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: 44 }, 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: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
               reorderable ? rowHandle(k, midIdx, row) : null,
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -10782,7 +10784,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: 44, minWidth: 44 }, 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": 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(
               "span",
               {
                 className: "twc-dt__check",
@@ -10958,7 +10960,7 @@ function Datatable({
             })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? Array.from({ length: paginated ? Math.min(sizeVal, 8) : 8 }).map((_, ri) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "twc-dt__row", role: "row", children: [
-            checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: 44 }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "18px", height: 18, borderRadius: 4 } }) }) : null,
+            checkboxSelection ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: CHK_W }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "18px", height: 18, borderRadius: 4 } }) }) : null,
             showRowNum ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "twc-dt__td twc-dt__rownum", role: "gridcell", "aria-hidden": "true", "data-pin": "left", style: { insetInlineStart: numLeft, width: NUM_W }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "16px", height: 14, borderRadius: 4 } }) }) : null,
             ordered.map((c, ci) => {
               const st = stickyOf(c.field);
@@ -10980,7 +10982,7 @@ 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: 44 } }) : null,
+            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,
             ordered.map((c) => {
               const st = stickyOf(c.field);