@eocrm/design-system 0.6.20 → 0.6.21

package/docs/components/DataTable.md

@@ -53,7 +53,7 @@ const instance = useDataTable<Deal>({
 - Resize via the right-edge handle. Without `collapseBelow`, the legacy keyboard path stays on a focused sortable header label: `←`/`→` for −/+8px; Shift+`←`/`→` for ±32px. With `collapseBelow`, the wide presentation exposes a dedicated focusable resize separator with the same keys; the separator and resize interaction are unavailable while stacked and return after widening.
 - `ColumnVisibilityTrigger` is the only built-in companion. For column pinning UI (Phase 2 ships state, no built-in UI), wire your own using `instance.pinColumn(id, side)`.
 - **Phase 2 ships pinning rendering.** `columnPinning` now applies sticky CSS with cumulative offsets and an inside-edge shadow; `pinnedRows` renders in a separate `<tbody>` above the main body. The selection auto-column is auto-left-pinned at offset 0. Pinned columns are LOCKED in place — no drag grip, can't be reordered. Their sort still works. Declare initial pinning either on the hook (`defaultColumnPinning: { left: ['name'], right: ['actions'] }`) or directly on each column (`pin: 'left' | 'right'`); the hook prop wins when both are set. **Phase 3 ships expandable rows.** Pass `renderExpandedRow: (row) => ReactNode` to add a per-row chevron auto-column at the left edge. Clicking the chevron toggles a detail row beneath the main row, spanning all columns. ARIA-wired with `aria-expanded` + `aria-controls`. The chevron auto-column is sticky-left like the selection cell; when both are enabled, selection is first and expand is second. DataTable is now feature-complete per the original spec.
-- **Cell content is single-line + ellipsized by default.** DataTable's internal table uses `table-layout: fixed` so column widths from `ColumnDef.size` (or runtime `columnSizing`) are authoritative, and every cell gets `overflow: hidden; text-overflow: ellipsis; white-space: nowrap`. Wide content truncates with `…` at the column boundary; the column does NOT expand to fit. If you need multi-line cells, render `<Table>` directly — DataTable is opinionated here so pinning offsets stay pixel-correct.
+- **Cell content is single-line + ellipsized by default.** DataTable's internal table uses `table-layout: fixed` so column widths from `ColumnDef.size` (or runtime `columnSizing`) are authoritative, and every cell gets `overflow: hidden; text-overflow: ellipsis; white-space: nowrap`. The table is as wide as the sum of its column sizes, or 100% of its container when that is wider (columns then scale up proportionally). Content never widens it. Wide content, including nested block content such as a `Stack` or a long `Badge`, is clipped at the column boundary, and text truncates with `…`; the column does NOT expand to fit. If you need multi-line cells, render `<Table>` directly — DataTable is opinionated here so pinning offsets stay pixel-correct.
 - **A column drag commits wherever the preview parked it** — however far the pointer roams, including over a pinned column or clear off the table. There is no "outside" to release into: the column is clamped to the unpinned band, so the preview is always showing a real slot and the drop honors it. This deliberately differs from `Kanban`, where releasing outside the columns cancels — there the pointer can genuinely aim somewhere else. **Escape is the only cancel.** The `dragWholeColumn={false}` opt-out is the exception: its preview is dnd-kit's own and RETRACTS (the header snaps home) when no unpinned slot is under the column, so a release there is discarded — matching what that preview shows.
 
 **When NOT to use:**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eocrm/design-system",
-  "version": "0.6.20",
+  "version": "0.6.21",
   "description": "Design system for the EOCRM product — React 19 + SCSS modules + CSS custom properties.",
   "license": "Apache-2.0",
   "type": "module",
@@ -50,7 +50,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@eocrm/design-tokens": "0.6.20",
+    "@eocrm/design-tokens": "0.6.21",
     "@floating-ui/react-dom": "^2.1.8",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.2.0",

package/src/components/DataTable/DataTable.module.scss

@@ -9,18 +9,18 @@
 // internal table-sizing properties (not consumer layout). Same precedent as the
 // Table primitive's `position: sticky` for the sticky-header band.
 .root {
-  // table-layout: fixed + width: max-content makes each <col>'s declared
-  // width AUTHORITATIVE for the cell. Default `table-layout: auto` plus the
-  // Table primitive's `min-width: 100%` would distribute columns
-  // proportionally within the parent's width, which causes pin offsets to
-  // misalign — the 44px auto-cell rendering at e.g. 40px because the table
-  // was capped at the wrap's width, then the left-pinned column at left:44
-  // leaves a 4px gap that exposes scroll content during horizontal scroll.
-  // `width: max-content` lets the table grow to its intrinsic column-sum
-  // width when that exceeds the wrap; Table primitive's scrollWrap then
-  // scrolls horizontally as designed.
+  // table-layout: fixed + an explicit width makes each <col>'s declared
+  // width AUTHORITATIVE for the cell. `--data-table-width` is the sum of the
+  // <col> widths, set inline by DataTable.tsx. Default `table-layout: auto`
+  // would distribute columns proportionally within the parent's width,
+  // misaligning pin offsets. Never use an intrinsic width (`max-content`)
+  // here: it is computed from cell content, so one long nowrap cell widens
+  // its column past `size` (#733). `min-width: 100%` still stretches the
+  // table to fill a wider wrap; a narrower wrap scrolls horizontally.
+  // Fallback `0` is still content-independent: a fixed-layout table is the
+  // greater of its `width` and the sum of its column widths.
   table-layout: fixed;
-  width: max-content;
+  width: var(--data-table-width, 0);
   min-width: 100%;
 }
 // stylelint-enable property-disallowed-list

package/src/components/DataTable/DataTable.tsx

@@ -5,6 +5,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type CSSProperties,
   type ReactNode,
   type Ref,
   type RefObject,
@@ -41,7 +42,7 @@ import {
   useDragAccessibility,
   type DescribeDragTarget,
 } from '../_internal/dragAnnouncements';
-import { AUTO_CELL_WIDTH } from './pinStyle';
+import { AUTO_CELL_WIDTH, DEFAULT_COL_WIDTH } from './pinStyle';
 import type { DataTableInstance } from './types';
 import type { CollapseBreakpoint } from '../_internal/collapse';
 import { useTranslation } from '../../i18n/useTranslation';
@@ -380,6 +381,16 @@ function DataTableInner<T>(
     [instance.leftPinnedColumns, instance.unpinnedColumns, instance.rightPinnedColumns],
   );
 
+  // Explicit table width = sum of the <col> widths. Under `table-layout:
+  // fixed` that keeps every column at its declared size (#733); an intrinsic
+  // width like `max-content` would be computed from cell content instead.
+  const tableWidthPx =
+    ((instance.enableRowSelection ? 1 : 0) + (instance.hasExpansion ? 1 : 0)) * AUTO_CELL_WIDTH +
+    renderColumns.reduce(
+      (sum, col) => sum + (instance.columnSizesPx[col.id] ?? DEFAULT_COL_WIDTH),
+      0,
+    );
+
   const totalColCount =
     instance.visibleColumns.length +
     (instance.enableRowSelection ? 1 : 0) +
@@ -542,6 +553,7 @@ function DataTableInner<T>(
             aria-rowcount={instance.rowCount}
             className={clsx(styles.root, className)}
             {...rest}
+            style={{ '--data-table-width': `${tableWidthPx}px` } as CSSProperties}
             scroll={!responsiveEnabled}
           >
             {caption && <Table.Caption>{caption}</Table.Caption>}
@@ -550,7 +562,10 @@ function DataTableInner<T>(
               {instance.enableRowSelection && <col style={{ width: AUTO_CELL_WIDTH }} />}
               {instance.hasExpansion && <col style={{ width: AUTO_CELL_WIDTH }} />}
               {renderColumns.map((col) => (
-                <col key={col.id} style={{ width: instance.columnSizesPx[col.id] ?? 120 }} />
+                <col
+                  key={col.id}
+                  style={{ width: instance.columnSizesPx[col.id] ?? DEFAULT_COL_WIDTH }}
+                />
               ))}
             </colgroup>
 

package/src/components/DataTable/HeaderCell.tsx

@@ -15,7 +15,7 @@ import type { TableSortDirection } from '../Table';
 import { useTranslation } from '../../i18n/useTranslation';
 import { useResizeHandle } from './useResizeHandle';
 import type { ColumnDef, DataTableInstance } from './types';
-import { getPinStyle } from './pinStyle';
+import { DEFAULT_COL_WIDTH, getPinStyle } from './pinStyle';
 import { shiftVarName } from './columnShift';
 
 import styles from './HeaderCell.module.scss';
@@ -223,7 +223,7 @@ export function HeaderCell<T>({
   });
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortableResult;
 
-  const width = instance.columnSizesPx[column.id] ?? 120;
+  const width = instance.columnSizesPx[column.id] ?? DEFAULT_COL_WIDTH;
   const resize = useResizeHandle({
     initialWidth: width,
     minWidth: column.minSize ?? 40,
@@ -248,7 +248,7 @@ export function HeaderCell<T>({
     if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
       e.preventDefault();
       const step = (e.shiftKey ? 32 : 8) * (e.key === 'ArrowRight' ? 1 : -1);
-      const current = instance.columnSizesPx[column.id] ?? 120;
+      const current = instance.columnSizesPx[column.id] ?? DEFAULT_COL_WIDTH;
       const minW = column.minSize ?? 40;
       const maxW = column.maxSize;
       let next = current + step;

package/src/components/DataTable/pinStyle.ts

@@ -6,6 +6,9 @@ import type { DataTableInstance } from './types';
  */
 export const AUTO_CELL_WIDTH = 44;
 
+/** Width of a column with no `size` and no runtime sizing state. */
+export const DEFAULT_COL_WIDTH = 120;
+
 export interface PinStyle {
   position?: 'sticky';
   left?: number;

package/src/components/DataTable/useColumnDragShift.ts

@@ -7,9 +7,10 @@ import { clampX, computeColumnShifts, shiftVarName, type DragRangeX } from './co
  * geometry of the header cells inside `root`.
  *
  * Declared widths (`columnSizingPx` / the `<col>` elements) cannot be used for
- * this. `DataTable.module.scss` sets `table-layout: fixed; width: max-content;
- * min-width: 100%`, so whenever the column sum is narrower than the scroll wrap
- * the table stretches and every rendered column is WIDER than declared. Summing
+ * this. `DataTable.module.scss` sets `table-layout: fixed;
+ * width: var(--data-table-width, 0); min-width: 100%`, so whenever the column
+ * sum is narrower than the scroll wrap the table stretches and every rendered
+ * column is WIDER than declared. Summing
  * declared widths then under-reports the travel and makes the last slot
  * unreachable — the exact regression this replaced.
  *

package/src/components/DataTable/useDataTable.ts

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import { useControllableState } from '../_internal/useControllableState';
+import { DEFAULT_COL_WIDTH } from './pinStyle';
 import type {
   ColumnOrderState,
   ColumnPinningState,
@@ -157,8 +158,6 @@ export function useDataTable<T>(options: UseDataTableOptions<T>): DataTableInsta
     onChange: options.onSortChange,
   });
 
-  const DEFAULT_COL_WIDTH = 120;
-
   const columnsById = useMemo(() => {
     const m = new Map<string, (typeof columns)[number]>();
     for (const c of columns) m.set(c.id, c);