@eocrm/design-system 0.0.0-stage → 0.6.18

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

@@ -0,0 +1,511 @@
+@use '../../styles/mixins' as *;
+@use './DataTable.tokens';
+@use '../Table/Table.tokens';
+@use '../_internal/collapse' as bp;
+
+// Visual / behavior modifiers ONLY. No layout (Rule 4).
+
+// stylelint-disable property-disallowed-list -- Rule 4 escape hatch: these are
+// 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;
+  width: max-content;
+  min-width: 100%;
+}
+// stylelint-enable property-disallowed-list
+
+// Even with table-layout: fixed, body cells inflate to fit their content's
+// min-content width if there's no overflow constraint — defeating col widths
+// and breaking pinning offset math (sticky cells overlap or gap because the
+// hook's pin offsets use declared widths, but rendered widths are larger).
+// Force every cell inside a DataTable to clip + ellipsize. This is an
+// opinionated default: consumers wanting multi-line cells can opt out by
+// styling specific cell content with `white-space: normal` or by avoiding
+// DataTable (use the raw <Table> primitive instead).
+.root :where(th, td) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Reserve room in the cell's left padding for the column reorder grip. The
+// grip is absolute-positioned inside the header's padding zone; body cells
+// share the same padding-left so the header label aligns with the body
+// content below it.
+// Doubled `.root` is deliberate: specificity 0,2,1 beats the Table primitive's
+// density-driven `.density-dense .th` / `.density-comfortable .td` rules
+// (0,2,0) which would otherwise reset padding-x via the density shorthand.
+// `:is(th, td)` over `:where(th, td)` is also deliberate — `:is()` preserves
+// the type-selector specificity bump (whereas `:where()` drops to 0,0,0).
+// Only padding-LEFT is overridden; the right side stays density-driven so
+// dense tables keep their tight trailing edge. The auto-select cell is
+// excluded so its centered checkbox stays centered (asymmetric L/R padding
+// would otherwise shift the checkbox right).
+.root.root :is(th, td):not(.autoCell) {
+  padding-left: var(--data-table-cell-padding-left);
+}
+
+// Selection auto-column — fixed narrow width is set via inline <col width> in colgroup.
+.autoCell {
+  // text-align center is set by <Table.Cell align="center" />
+  vertical-align: middle;
+}
+
+.clickableRow {
+  cursor: pointer;
+
+  // Inset: the row's ring must sit inside the row box, not overlap its
+  // neighbour. (`outline: none` used to sit below too — written for an
+  // outline that the box-shadow mixin never emitted, and it would now erase
+  // the ring.)
+  &:focus-visible {
+    @include focus-ring($offset: calc(-1 * var(--ring-offset)));
+
+    border-radius: var(--data-table-clickable-row-radius);
+  }
+}
+
+// Empty state row — single colspan cell with centered content.
+.emptyCell {
+  text-align: center;
+  padding: var(--data-table-empty-padding);
+  color: var(--data-table-empty-fg);
+}
+
+// Skeleton row cells — give some visual breathing room.
+.skeletonCell {
+  vertical-align: middle;
+}
+
+// Auto-select cell sticky-left classes (Phase 2+).
+// Separate header/body variants avoid needing :global(thead/tbody) selectors
+// (no :global precedent exists in this codebase).
+
+// Header version: auto-select header is the sticky "corner" — stacks above:
+//   - Table's sticky-header band (z-index 1 per Table.module.scss)
+//   - Pinned body cells (z-index 1 per DataTable.module.scss)
+// :where() in Table.module.scss drops the header band's specificity so this wins.
+.autoCellStickyHeader {
+  background: var(--data-table-auto-cell-sticky-header-bg);
+  z-index: 3;
+}
+
+// Body version (applied in Task 7): stays above unpinned body cells (z-index 0)
+// but below sticky header band (z-index 1 in Table primitive).
+.autoCellStickyBody {
+  background: var(--data-table-auto-cell-sticky-body-bg);
+  z-index: 1;
+}
+
+// Body pinned-cell sticky styles. Mirrors HeaderCell.module.scss's
+// .pinnedLeft / .pinnedRight but at body z-index (1 instead of 3).
+
+.pinnedLeft,
+.pinnedRight {
+  background: var(--data-table-pinned-bg);
+  z-index: 1;
+}
+
+.pinnedLeft {
+  box-shadow: var(--data-table-pinned-shadow-left);
+}
+
+.pinnedRight {
+  box-shadow: var(--data-table-pinned-shadow-right);
+}
+
+// Pinned rows (separate <tbody> above the main body) get a subtle tint.
+.pinnedRow {
+  background: var(--data-table-pinned-row-bg);
+}
+
+.pinnedRow .pinnedLeft,
+.pinnedRow .pinnedRight {
+  // Explicitly re-apply the pinned-row tint so it overrides the per-cell
+  // --color-table-bg background that would otherwise win via higher specificity
+  // from the body .pinnedLeft / .pinnedRight rule above.
+  background: var(--data-table-pinned-row-bg);
+}
+
+// Dedicated tbody class for the pinned-rows section (used in Task 8).
+.pinnedRowsTbody {
+  // No layout-affecting styles — Rule 4. Background and visual modifiers only.
+  background: var(--data-table-pinned-row-bg);
+}
+
+// Pinned cells have an opaque background (so unpinned scrolling content can't
+// show through them). That background would otherwise defeat the row-level
+// hover and selected highlights from the Table primitive — pinned cells would
+// stay "white" while the rest of the row turns blue. Mirror the row states
+// here so the pinned cells visually participate in selection / hover.
+// `:not(.pinnedRow)` excludes the always-tinted pinned-rows section — its
+// pinned-cell background is already overridden above to use the pinned-row
+// tint, and we don't want hover/selected to override that tint and create a
+// visual mismatch between pinned-cell and unpinned-cell backgrounds within
+// the same pinned row.
+.root tbody tr:not(.pinnedRow):hover .pinnedLeft,
+.root tbody tr:not(.pinnedRow):hover .pinnedRight,
+.root tbody tr:not(.pinnedRow):hover .autoCellStickyBody {
+  background: var(--data-table-pinned-bg-row-hover);
+}
+
+.root tbody tr:not(.pinnedRow)[aria-selected='true'] .pinnedLeft,
+.root tbody tr:not(.pinnedRow)[aria-selected='true'] .pinnedRight,
+.root tbody tr:not(.pinnedRow)[aria-selected='true'] .autoCellStickyBody {
+  background: var(--data-table-pinned-bg-row-selected);
+}
+
+// Expand chevron button — small clickable target inside the auto-expand
+// cell. Mirrors the visual weight of the auto-select Checkbox: 14px icon
+// inside ~24px hit area, transparent background, focus-visible ring.
+.expandButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--data-table-expand-button-fg);
+  cursor: pointer;
+  border-radius: var(--data-table-expand-button-radius);
+  transition:
+    background var(--data-table-expand-button-transition-bg),
+    color var(--data-table-expand-button-transition-color);
+
+  &:hover {
+    background: var(--data-table-expand-button-bg-hover);
+    color: var(--data-table-expand-button-fg-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+// Expanded detail row — the extra <Table.Row> rendered below a data row
+// when its expansion state is true. Spans all columns via colSpan. It's
+// a panel, not a table row: the consumer's renderExpandedRow output
+// lives inside, so we strip all row-level styling (striped tint, hover
+// flash, cursor) and let the panel sit on the table's base background.
+// Crucially NOT clickable (no .clickableRow class) so onRowClick
+// doesn't fire when the consumer interacts with their rendered detail
+// content.
+// Selectors must beat the Table primitive's row-styling chains:
+//   .hover   .tbody .tr:hover             → (0,4,0)
+//   .striped .tbody .tr:nth-of-type(even) → (0,4,0)
+// The doubled-class trick (`.expandedDetailRow.expandedDetailRow`) plus
+// `tbody tr` elements yields (0,4,2) — wins by element count on tie.
+.root tbody tr.expandedDetailRow.expandedDetailRow {
+  background: transparent;
+  cursor: default;
+}
+
+.root tbody tr.expandedDetailRow.expandedDetailRow:hover,
+.root tbody tr.expandedDetailRow.expandedDetailRow:nth-of-type(even) {
+  background: transparent;
+}
+
+// The single colSpan cell that holds the consumer's renderExpandedRow
+// output. Symmetric vertical padding — the panel sits flush against
+// the data row above it (which acts as its own visual anchor) and
+// needs the same breathing room below before the next data row.
+// Selector must beat Table primitive's density modifiers:
+//   .density-dense       .td → (0,2,0)
+//   .density-comfortable .td → (0,2,0)
+// `.root .expandedDetailRow .expandedDetailCell` is (0,3,0) — wins.
+.root .expandedDetailRow .expandedDetailCell {
+  padding: var(--data-table-expanded-detail-padding);
+  white-space: normal;
+}
+
+// Opt-in responsive wrapper. The table's available inline size, rather than
+// the viewport, drives the presentation switch.
+.responsiveContainer {
+  container-type: inline-size;
+}
+
+.responsiveScrollWrap {
+  width: 100%;
+  overflow-x: auto;
+}
+
+// These nodes stay mounted while an opted-in table crosses its container
+// breakpoint. They are layout-neutral in the wide presentation.
+.responsiveVisualLabel {
+  display: none;
+}
+
+.responsiveValue {
+  display: contents;
+}
+
+// Re-template the existing semantic table tree as cards without remounting
+// consumer cell content. Wide-table state (column sizes, order, and pins) stays
+// intact and becomes visible again when the container widens.
+@mixin stacked-presentation {
+  // DndContext appends accessibility siblings beside the table. This mixin is
+  // mounted on the named, direct scroll wrapper: the breakpoint target is a
+  // descendant of the size container, and every child selector stays inside
+  // that table instance rather than reaching nested tables.
+  > .root {
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
+
+  > .root > colgroup {
+    display: none;
+  }
+
+  > .root > :where(caption, thead, tbody) {
+    width: 100%;
+  }
+
+  > .root > :where(caption, thead) {
+    display: block;
+  }
+
+  > .root > thead > tr {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-1);
+    width: 100%;
+    padding: var(--space-1);
+    border-bottom: var(--border-width) solid var(--table-border-color);
+    background: var(--table-header-bg);
+  }
+
+  // With no retained header item, every cell below is out of flow. Neutralize
+  // the row paint as well so expansion-only and plain-data tables do not show
+  // an empty compact band.
+  > .root > thead[data-responsive-has-items='false'] > tr {
+    gap: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+
+  // A string header is proven to be the plain visual label repeated in each
+  // card. Rich nodes and render functions stay visible because they may contain
+  // focusable controls. The empty expansion auto-header is hidden separately.
+  // stylelint-disable property-disallowed-list -- Visually hidden header cells
+  // retain native table labelling for assistive technology without occupying
+  // room in the compact strip.
+  > .root
+    > thead
+    > tr
+    > th[data-responsive-plain-label='true']:not([data-responsive-sortable='true']),
+  > .root > thead > tr > th.autoCell:not([data-responsive-control='true']) {
+    @include visually-hidden;
+
+    position: absolute !important;
+    left: auto !important;
+    right: auto !important;
+    transform: none !important;
+  }
+  // stylelint-enable property-disallowed-list
+
+  > .root
+    > thead
+    > tr
+    > th:is([data-responsive-control='true'], [data-responsive-retained-header='true']) {
+    display: block;
+    width: auto;
+    padding: var(--space-1) var(--space-2);
+    border: 0;
+    background: transparent;
+    white-space: normal;
+  }
+
+  > .root > tbody {
+    display: grid;
+    gap: var(--space-3);
+    width: 100%;
+  }
+
+  > .root > tbody + tbody {
+    padding-block-start: var(--space-3);
+  }
+
+  > .root > tbody > tr {
+    display: grid;
+    grid-template-columns: repeat(2, min-content) minmax(0, 1fr);
+    gap: var(--space-1);
+    width: 100%;
+    padding: var(--space-1);
+    border: var(--border-width) solid var(--table-border-color);
+    border-radius: var(--data-table-clickable-row-radius);
+    background: var(--table-bg);
+  }
+
+  // Pinned rows stay tinted across the Table primitive's striped, hover, and
+  // selected state selectors. Matching each state keeps the cascade explicit
+  // without making the tint globally important.
+  > .root > tbody > tr.pinnedRow,
+  > .root > tbody > tr.pinnedRow:nth-of-type(even),
+  > .root > tbody > tr.pinnedRow:hover,
+  > .root > tbody > tr.pinnedRow[aria-selected='true'],
+  > .root > tbody > tr.pinnedRow[aria-selected='true']:hover {
+    background: var(--data-table-pinned-row-bg);
+  }
+
+  > .root > tbody > tr > td {
+    border: 0;
+  }
+
+  // stylelint-disable property-disallowed-list -- Responsive card internals:
+  // field/detail cells must span the card grid, and wide-table sticky offsets
+  // are inline styles that require !important to neutralize below the query.
+  > .root > tbody > tr > .responsiveDataCell,
+  > .root > tbody > tr > .responsiveFullWidth,
+  > .root > tbody > tr > .expandedDetailCell {
+    grid-column: 1 / -1;
+    width: 100%;
+  }
+
+  > .root > thead > tr > th,
+  > .root > tbody > tr > td {
+    position: static !important;
+    left: auto !important;
+    right: auto !important;
+    transform: none !important;
+  }
+  // stylelint-enable property-disallowed-list
+
+  > .root > tbody > tr > .responsiveDataCell {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+    align-items: start;
+    gap: var(--space-2);
+    overflow: visible;
+    text-align: start;
+    text-overflow: clip;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  > .root > tbody > tr > .responsiveDataCell > .responsiveVisualLabel {
+    display: block;
+    color: var(--table-header-fg);
+    font-weight: var(--table-header-font-weight);
+    overflow-wrap: anywhere;
+    white-space: normal;
+  }
+
+  // stylelint-disable property-disallowed-list -- Responsive card internals:
+  // the stable value wrapper owns the value grid track, and unlabelled values
+  // expand over the absent label track.
+  > .root > tbody > tr > .responsiveDataCell > .responsiveValue {
+    display: block;
+    grid-column: 2;
+    min-width: 0;
+    overflow: visible;
+    overflow-wrap: anywhere;
+    white-space: normal;
+  }
+
+  // Nothing here neutralizes `white-space` on arbitrary descendants, and
+  // nothing should (#527). The cell's own nowrap is undone above; a descendant
+  // that DECLARES its own — PersonDisplay's description, Badge, Text's public
+  // `truncate` prop — declares it for a reason and contains itself. A blanket
+  // `:where(*) { white-space: normal }` here reaches into every one of them and
+  // breaks them mid-word, because `overflow-wrap: anywhere` above is inherited.
+  // DataTable.test.tsx enforces this.
+
+  > .root > tbody > tr > .responsiveDataCell > .responsiveVisualLabel:empty {
+    display: none;
+  }
+
+  > .root > tbody > tr > .responsiveDataCell > .responsiveVisualLabel:empty + .responsiveValue {
+    grid-column: 1 / -1;
+  }
+  // stylelint-enable property-disallowed-list
+
+  // Auto cells remain compact, unlabelled controls. Transparent pinned-cell
+  // paint lets the row's striped, hover, selected, or pinned tone show through.
+  > .root > tbody > tr > .autoCell {
+    width: auto;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+    white-space: normal;
+  }
+
+  > .root > tbody > tr > :is(.pinnedLeft, .pinnedRight) {
+    background: transparent;
+    box-shadow: none;
+    z-index: auto;
+  }
+
+  // HeaderCell owns separate CSS-module pin classes, so its stable DOM hook is
+  // the only safe way to neutralize header pin paint from this module.
+  > .root > thead > tr > th[data-responsive-pinned='true'] {
+    background: transparent;
+    box-shadow: none;
+    z-index: auto;
+  }
+
+  // Reordering and resizing describe the wide column layout. The elements use
+  // stable data hooks because HeaderCell's CSS-module classes are separately
+  // hashed and must never be selected across module boundaries.
+  > .root
+    > thead
+    > tr
+    > th
+    > span
+    > span
+    > :is([data-responsive-drag-grip], [data-responsive-resize-handle]) {
+    display: none;
+    pointer-events: none;
+  }
+
+  > .root > thead > tr > th > span > span > [data-responsive-header-content] {
+    padding-right: 0;
+  }
+
+  > .root > tbody > :where(.expandedDetailRow, .pinnedRow),
+  > .root > tbody > tr > :where(.responsiveFullWidth, .expandedDetailCell) {
+    width: 100%;
+  }
+
+  > .root > tbody > tr > :where(.responsiveFullWidth, .expandedDetailCell) {
+    overflow: visible;
+    text-overflow: clip;
+    white-space: normal;
+  }
+}
+
+@container (max-width: #{bp.$collapse-sm}) {
+  .responsiveContainer > .responsiveScrollWrap.collapseSm {
+    @include stacked-presentation;
+  }
+}
+
+@container (max-width: #{bp.$collapse-md}) {
+  .responsiveContainer > .responsiveScrollWrap.collapseMd {
+    @include stacked-presentation;
+  }
+}
+
+@container (max-width: #{bp.$collapse-lg}) {
+  .responsiveContainer > .responsiveScrollWrap.collapseLg {
+    @include stacked-presentation;
+  }
+}
+
+.srStatus {
+  @include visually-hidden;
+}

package/src/components/DataTable/DataTable.tokens.scss

@@ -0,0 +1,80 @@
+// DataTable.tokens.scss — Component-scoped tokens for <DataTable>, its <HeaderCell>, and <ColumnVisibilityTrigger>. Mirrors the structural-selector hierarchy (header / pinned / pinned-row tints + the doubled-class expanded-detail row). The Table-primitive surface tokens (--color-table-*) are kept primitive — DataTable references them by their semantic name so a Table theme override still reaches DataTable.
+:root {
+  // ── Root + cell defaults ─────────────────────────────────────────────────
+  --data-table-clickable-row-radius: var(--radius-sm);
+
+  // Reserved left-padding on every DataTable cell so the absolutely-positioned
+  // header reorder grip sits in dedicated space without overlapping the column
+  // label. Applied uniformly to body cells too so the header label visually
+  // aligns with the column's body content.
+  --data-table-cell-padding-left: var(--space-4);
+
+  // ── Empty state ──────────────────────────────────────────────────────────
+  --data-table-empty-padding: var(--space-6) var(--space-4);
+  --data-table-empty-fg: var(--color-fg-muted);
+
+  // ── Sticky auto-select cells ─────────────────────────────────────────────
+  --data-table-auto-cell-sticky-header-bg: var(--color-table-header-bg);
+  --data-table-auto-cell-sticky-body-bg: var(--color-table-bg);
+
+  // ── Pinned columns (body) ────────────────────────────────────────────────
+  --data-table-pinned-bg: var(--color-table-bg);
+  --data-table-pinned-shadow-left: var(--shadow-table-pinned-edge);
+  --data-table-pinned-shadow-right: var(--shadow-table-pinned-edge-right);
+
+  // ── Pinned rows ──────────────────────────────────────────────────────────
+  --data-table-pinned-row-bg: var(--color-bg-row-pinned);
+
+  // ── Pinned-cell hover / selected (mirrors row-level Table primitive) ─────
+  --data-table-pinned-bg-row-hover: var(--color-table-row-bg-hover);
+  --data-table-pinned-bg-row-selected: var(--color-table-row-bg-selected);
+
+  // ── Expand button (chevron) ──────────────────────────────────────────────
+  --data-table-expand-button-fg: var(--color-fg-muted);
+  --data-table-expand-button-radius: var(--radius-sm);
+  --data-table-expand-button-bg-hover: var(--color-bg-muted);
+  --data-table-expand-button-fg-hover: var(--color-fg);
+  --data-table-expand-button-transition-bg: var(--transition-fast);
+  --data-table-expand-button-transition-color: var(--transition-fast);
+
+  // ── Expanded detail row ──────────────────────────────────────────────────
+  --data-table-expanded-detail-padding: var(--space-3) var(--space-4);
+
+  // ── ColumnVisibilityTrigger ──────────────────────────────────────────────
+  --data-table-column-visibility-gap: var(--space-1);
+
+  // ── HeaderCell — grip / inner / label / sort / resize / drag ────────────
+  --data-table-header-grip-fg: var(--color-fg-muted);
+  --data-table-header-grip-opacity-hidden: var(--opacity-hidden);
+  --data-table-header-grip-opacity-visible: var(--opacity-visible);
+  --data-table-header-grip-transition: var(--transition-fast);
+  --data-table-header-grip-focus-radius: var(--radius-sm);
+
+  --data-table-header-inner-gap: var(--space-1);
+
+  --data-table-header-label-gap: var(--space-1);
+  --data-table-header-label-font-weight: var(--font-weight-semibold);
+  --data-table-header-label-fg: var(--color-fg);
+  --data-table-header-label-focus-radius: var(--radius-sm);
+
+  --data-table-header-sort-icon-fg: var(--color-fg-muted);
+  --data-table-header-sort-icon-fg-active: var(--color-fg);
+
+  --data-table-header-resize-handle-opacity-hidden: var(--opacity-hidden);
+  --data-table-header-resize-handle-opacity-visible: var(--opacity-visible);
+  --data-table-header-resize-handle-transition: var(--transition-fast);
+  --data-table-header-resize-chevron-fg: var(--color-fg-muted);
+  --data-table-header-resize-chevron-transition: var(--transition-fast);
+  --data-table-header-resize-bar-bg: var(--color-fg-muted);
+  --data-table-header-resize-bar-transition-bg: var(--transition-fast);
+  --data-table-header-resize-bar-transition-width: var(--transition-fast);
+  --data-table-header-resize-bar-bg-active: var(--color-accent);
+  --data-table-header-resize-chevron-fg-active: var(--color-accent);
+
+  --data-table-header-dragging-opacity: var(--opacity-dragging);
+
+  // HeaderCell — pinned column variant
+  --data-table-header-pinned-bg: var(--color-table-header-bg);
+  --data-table-header-pinned-shadow-left: var(--shadow-table-pinned-edge);
+  --data-table-header-pinned-shadow-right: var(--shadow-table-pinned-edge-right);
+}