twico-ui 1.18.0 → 1.18.2

package/dist/index.mjs

@@ -8325,8 +8325,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); }
@@ -8357,6 +8357,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; }
@@ -9430,7 +9431,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)) {
@@ -10353,7 +10355,7 @@ function Datatable({
         onDragEnd: reorderable ? () => setRowDrag({ from: null, over: null, after: false }) : void 0,
         onClick: (e) => handleRowClick(e, k, row),
         children: [
-          checkboxSelection ? /* @__PURE__ */ 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__ */ 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__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 }, children: [
               reorderable ? rowHandle(k, midIdx, row) : null,
               /* @__PURE__ */ jsx(
@@ -10761,7 +10763,7 @@ function Datatable({
         onKeyDown: onGridKeyDown,
         children: [
           /* @__PURE__ */ jsx("thead", { ref: theadRef, children: /* @__PURE__ */ jsxs("tr", { role: "row", "aria-rowindex": 1, children: [
-            checkboxSelection ? /* @__PURE__ */ 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__ */ jsx("div", { className: "twc-dt__th-inner", style: { justifyContent: "center", padding: 0 }, children: /* @__PURE__ */ jsx(
+            checkboxSelection ? /* @__PURE__ */ 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__ */ jsx("div", { className: "twc-dt__th-inner", style: { justifyContent: "center", padding: 0 }, children: /* @__PURE__ */ jsx(
               "span",
               {
                 className: "twc-dt__check",
@@ -10937,7 +10939,7 @@ function Datatable({
             })
           ] }) }),
           /* @__PURE__ */ jsx("tbody", { children: loading ? Array.from({ length: paginated ? Math.min(sizeVal, 8) : 8 }).map((_, ri) => /* @__PURE__ */ jsxs("tr", { className: "twc-dt__row", role: "row", children: [
-            checkboxSelection ? /* @__PURE__ */ jsx("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: 44 }, children: /* @__PURE__ */ jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "18px", height: 18, borderRadius: 4 } }) }) : null,
+            checkboxSelection ? /* @__PURE__ */ jsx("td", { className: "twc-dt__td", role: "gridcell", "data-pin": "left", style: { insetInlineStart: 0, width: CHK_W }, children: /* @__PURE__ */ jsx("span", { className: "twc-dt__sk", "aria-hidden": "true", style: { "--_w": "18px", height: 18, borderRadius: 4 } }) }) : null,
             showRowNum ? /* @__PURE__ */ 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__ */ 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);
@@ -10959,7 +10961,7 @@ function Datatable({
             pinnedBottomRows.map((row) => renderLeaf(row, keyIndex.get(keyOf(row)), "bottom"))
           ] }) }),
           hasAggregation && aggOn && !loading && paged.length > 0 ? /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { role: "row", children: [
-            checkboxSelection ? /* @__PURE__ */ 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__ */ 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__ */ 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);