@eocrm/design-system 0.6.24 → 0.8.0

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,95 @@
+import { type ReactNode, type Ref } from 'react';
+import type { TableDensity } from '../Table/index.js';
+import type { DataTableInstance } from './types.js';
+import type { CollapseBreakpoint } from '../_internal/collapse.js';
+export interface DataTableProps<T> {
+    instance: DataTableInstance<T>;
+    density?: TableDensity;
+    striped?: boolean;
+    /** Hover highlight on body rows. Defaults TRUE (DataTable rows are usually interactive). */
+    hover?: boolean;
+    bordered?: boolean;
+    /**
+     * Marks the table busy. Empty tables show skeleton rows; populated tables
+     * keep their rows mounted during a refetch so focus and local row state are
+     * preserved. Defaults to `false`.
+     *
+     * Announced from a polite live region the table owns, gated on the SKELETON
+     * rather than on this prop: a load shorter than `skeletonDelay` shows nothing
+     * and so says nothing, and a refetch over rows already on screen is silent
+     * because nothing visibly changes. The resolution is announced too — "Rows
+     * loaded" or "No rows loaded". `aria-busy` is also set, but reaches no screen
+     * reader on its own.
+     */
+    loading?: boolean;
+    /** Number of skeleton rows when `loading`. Defaults 10. */
+    loadingRowCount?: number;
+    /**
+     * Milliseconds to wait before showing skeleton rows for an empty initial
+     * load. Defaults to `0`; fast loads that finish inside the delay never show
+     * a skeleton.
+     */
+    skeletonDelay?: number;
+    /**
+     * Minimum milliseconds skeleton rows remain visible after appearing.
+     * Defaults to `0`. Arriving rows and the empty state remain hidden until the
+     * visual tail finishes. `aria-busy` still follows actual `loading`, not the
+     * skeleton's visual tail.
+     */
+    skeletonMinDuration?: number;
+    /** Element shown when `data` is empty and not loading. Defaults to a stock <EmptyState>. */
+    emptyState?: ReactNode;
+    /**
+     * Stacks responsive data cells below this container-query breakpoint: `sm`
+     * (480px), `md` (640px), or `lg` (768px). Selection, expansion, sorting,
+     * row actions, and column visibility remain usable. Column sizing, pinning,
+     * and ordering state is retained, but resize/reorder controls and sticky pin
+     * presentation are unavailable while stacked and return after widening.
+     *
+     * This adds a wrapper with `container-type: inline-size`, so the breakpoint
+     * measures the table's available container width, not the viewport. Avoid an
+     * intrinsic-width parent such as `width: max-content`: inline-size containment
+     * can make the wrapper contribute zero intrinsic width there.
+     */
+    collapseBelow?: CollapseBreakpoint;
+    /** Required for a11y when no caption is provided. */
+    'aria-label'?: string;
+    caption?: ReactNode;
+    /**
+     * Drag the whole column while reordering, not just its header cell.
+     *
+     * Default `true` — the dragged column's body cells travel with its header,
+     * and every column the drag displaces shifts its body cells too, so the
+     * header row and the body never disagree mid-drag. Costs one CSS-variable
+     * write per shifted column per frame; the cells move on the compositor, so
+     * the table body is not re-rendered during pointer movement. It does cost
+     * two full body reconciliations per drag — one at drag start, one at drag
+     * end — because the drag-active flag is component state and body rows are
+     * not memoized; that is the number to weigh for a very large table.
+     *
+     * Set `false` for the cheaper preview: only the dragged header cell follows
+     * the pointer and the body stays put until drop. Worth it for very large
+     * tables on low-end hardware, or to restore the previous behavior.
+     *
+     * Pinned columns never move under either setting — they are excluded from
+     * reordering entirely.
+     *
+     * The two settings also differ on **what a release means when no unpinned
+     * slot is under the column** — over a pinned column, or off the table
+     * entirely. Default: the drop commits the slot the preview is showing. The
+     * opt-out: the drop is discarded, because dnd-kit's own preview retracts (the
+     * header snaps back home) in that situation, and a commit would contradict
+     * it. See `docs/components/DataTable.md`, the column-drag bullet.
+     */
+    dragWholeColumn?: boolean;
+    className?: string;
+}
+declare function DataTableInner<T>({ instance, density, striped, hover, bordered, loading, loadingRowCount, skeletonDelay, skeletonMinDuration, emptyState, caption, dragWholeColumn, collapseBelow, className, ...rest }: DataTableProps<T>, ref: Ref<HTMLTableElement>): import("react").JSX.Element;
+/**
+ * Server-driven data table driven by a `useDataTable` instance.
+ * @see docs/components/DataTable.md
+ */
+export declare const DataTable: <T>(props: DataTableProps<T> & {
+    ref?: Ref<HTMLTableElement>;
+}) => ReturnType<typeof DataTableInner>;
+export {};

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,303 @@
+'use client';
+import { Table } from "../Table/Table.js";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+import { useSkeletonVisibility } from "../Skeleton/useSkeletonVisibility.js";
+import { EmptyState } from "../EmptyState/EmptyState.js";
+import { HeaderCell } from "./HeaderCell.js";
+import { BodyRow } from "./BodyRow.js";
+import { reorderRespectingPins } from "./reorderColumns.js";
+import { useColumnDragShift } from "./useColumnDragShift.js";
+import { clampX } from "./columnShift.js";
+import { useFloatingSurface } from "../_internal/overlay/useOverlayStack.js";
+import { dragLabelOf, useDragAccessibility } from "../_internal/dragAnnouncements.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import DataTable_module_default from "./DataTable.module.js";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, useDndContext, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, horizontalListSortingStrategy, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+// src/components/DataTable/DataTable.tsx
+var collapseClass = {
+	sm: DataTable_module_default.collapseSm,
+	md: DataTable_module_default.collapseMd,
+	lg: DataTable_module_default.collapseLg
+};
+/**
+* #282: registers the active column-reorder drag as a floating surface so a
+* host Modal/Drawer yields the Escape that cancels it. A leaf inside DndContext
+* (reads `active` via `useDndContext`) so the drag-active toggle re-renders only
+* this null node — never the table body.
+*/
+function DragFloatingProbe() {
+	const { active } = useDndContext();
+	useFloatingSurface(active != null);
+	return null;
+}
+/**
+* Publishes per-column drag offsets as CSS custom properties on the table
+* element. A leaf that renders `null` for the same reason `DragFloatingProbe`
+* is one: `useDndMonitor` fires on every pointer move, and keeping the
+* subscription here means those events never re-render the table body.
+*/
+function ColumnShiftDriver({ rootRef, enabled, orderedIds, widths, dragRangeRef, lastSlotIdRef, onDragActiveChange }) {
+	useColumnDragShift({
+		rootRef,
+		enabled,
+		orderedIds,
+		widths,
+		dragRangeRef,
+		lastSlotIdRef,
+		onDragActiveChange
+	});
+	return null;
+}
+/** Sorting strategy that moves nothing — see the SortableContext comment. */
+var noopSortingStrategy = () => null;
+function ResponsiveScrollWrap({ collapseBelow, children }) {
+	if (!collapseBelow) return children;
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx(DataTable_module_default.responsiveScrollWrap, collapseClass[collapseBelow]),
+		children
+	});
+}
+function DataTableInner({ instance, density = "comfortable", striped, hover = true, bordered, loading = false, loadingRowCount = 10, skeletonDelay = 0, skeletonMinDuration = 0, emptyState, caption, dragWholeColumn = true, collapseBelow, className, ...rest }, ref) {
+	const t = useTranslation();
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const visibleIds = useMemo(() => instance.visibleColumns.map((c) => c.id), [instance.visibleColumns]);
+	const sortableIds = useMemo(() => instance.unpinnedColumns.filter((c) => c.enableReorder !== false).map((c) => c.id), [instance.unpinnedColumns]);
+	const shiftOrderedIds = useMemo(() => instance.unpinnedColumns.map((c) => c.id), [instance.unpinnedColumns]);
+	const dragRangeRef = useRef(null);
+	const clampToUnpinnedBand = useCallback(({ transform, active }) => {
+		const range = dragRangeRef.current;
+		if (!active || !range) return transform;
+		return {
+			...transform,
+			x: clampX(transform.x, range)
+		};
+	}, []);
+	const modifiers = useMemo(() => [clampToUnpinnedBand], [clampToUnpinnedBand]);
+	const lastSlotIdRef = useRef(null);
+	const handleDragEnd = (event) => {
+		const { active, over } = event;
+		const activeId = String(active.id);
+		const overIdRaw = over ? String(over.id) : null;
+		const fallbackId = dragWholeColumn ? lastSlotIdRef.current : null;
+		const overId = overIdRaw != null && shiftOrderedIds.includes(overIdRaw) ? overIdRaw : fallbackId;
+		if (overId == null || activeId === overId) return;
+		instance.setColumnOrder((prev) => {
+			return reorderRespectingPins({
+				prev,
+				activeId,
+				overId,
+				visibleIds,
+				pinning: instance.columnPinning
+			}) ?? prev;
+		});
+	};
+	const renderColumns = useMemo(() => [
+		...instance.leftPinnedColumns,
+		...instance.unpinnedColumns,
+		...instance.rightPinnedColumns
+	], [
+		instance.leftPinnedColumns,
+		instance.unpinnedColumns,
+		instance.rightPinnedColumns
+	]);
+	const tableWidthPx = ((instance.enableRowSelection ? 1 : 0) + (instance.hasExpansion ? 1 : 0)) * 44 + renderColumns.reduce((sum, col) => sum + (instance.columnSizesPx[col.id] ?? 120), 0);
+	const totalColCount = instance.visibleColumns.length + (instance.enableRowSelection ? 1 : 0) + (instance.hasExpansion ? 1 : 0);
+	const hasRenderedRows = instance.data.length > 0 || instance.pinnedRows.length > 0;
+	const showSkeletonRows = useSkeletonVisibility(loading && !hasRenderedRows, {
+		delay: skeletonDelay,
+		minDuration: skeletonMinDuration
+	});
+	const dataIsEmpty = !loading && !showSkeletonRows && !hasRenderedRows;
+	const [loadPhase, setLoadPhase] = useState("idle");
+	useEffect(() => {
+		setLoadPhase((prev) => {
+			if (showSkeletonRows) return "loading";
+			if (prev !== "loading") return prev;
+			return hasRenderedRows ? "loaded" : "empty";
+		});
+	}, [showSkeletonRows, hasRenderedRows]);
+	useEffect(() => {
+		if (loadPhase !== "loaded" && loadPhase !== "empty") return;
+		const id = setTimeout(() => setLoadPhase("idle"), CLEAR_STATUS_MS);
+		return () => clearTimeout(id);
+	}, [loadPhase]);
+	const responsiveEnabled = collapseBelow != null;
+	const hasResponsiveHeaderItems = instance.enableRowSelection || renderColumns.some((column) => column.sortable === true || typeof column.header !== "string");
+	const [dragActive, setDragActive] = useState(false);
+	const describeColumn = (entry) => {
+		const id = entry ? String(entry.id) : null;
+		const slotId = id != null && shiftOrderedIds.includes(id) ? id : dragWholeColumn ? lastSlotIdRef.current : null;
+		const slot = slotId == null ? -1 : shiftOrderedIds.indexOf(slotId);
+		if (slot < 0) return null;
+		return {
+			label: dragLabelOf(entry?.data.current),
+			index: slot + 1,
+			total: shiftOrderedIds.length
+		};
+	};
+	const dragAccessibility = useDragAccessibility(describeColumn);
+	const tableRef = useRef(null);
+	const setTableRef = useCallback((node) => {
+		tableRef.current = node;
+		if (typeof ref === "function") {
+			const cleanup = ref(node);
+			if (typeof cleanup === "function") return () => {
+				cleanup();
+				tableRef.current = null;
+			};
+		} else if (ref) ref.current = node;
+	}, [ref]);
+	const table = /* @__PURE__ */ jsxs(DndContext, {
+		accessibility: dragAccessibility,
+		sensors,
+		modifiers,
+		onDragEnd: handleDragEnd,
+		children: [
+			/* @__PURE__ */ jsx(DragFloatingProbe, {}),
+			/* @__PURE__ */ jsx(ColumnShiftDriver, {
+				rootRef: tableRef,
+				enabled: dragWholeColumn,
+				orderedIds: shiftOrderedIds,
+				widths: instance.columnSizesPx,
+				dragRangeRef,
+				lastSlotIdRef,
+				onDragActiveChange: setDragActive
+			}),
+			/* @__PURE__ */ jsxs(SortableContext, {
+				items: sortableIds,
+				strategy: dragWholeColumn ? noopSortingStrategy : horizontalListSortingStrategy,
+				children: [/* @__PURE__ */ jsx(ResponsiveScrollWrap, {
+					collapseBelow,
+					children: /* @__PURE__ */ jsxs(Table, {
+						ref: setTableRef,
+						stickyHeader: true,
+						hover,
+						density,
+						striped,
+						bordered,
+						"aria-busy": loading || void 0,
+						"aria-rowcount": instance.rowCount,
+						className: clsx(DataTable_module_default.root, className),
+						...rest,
+						style: { "--data-table-width": `${tableWidthPx}px` },
+						scroll: !responsiveEnabled,
+						children: [
+							caption && /* @__PURE__ */ jsx(Table.Caption, { children: caption }),
+							/* @__PURE__ */ jsxs("colgroup", { children: [
+								instance.enableRowSelection && /* @__PURE__ */ jsx("col", { style: { width: 44 } }),
+								instance.hasExpansion && /* @__PURE__ */ jsx("col", { style: { width: 44 } }),
+								renderColumns.map((col) => /* @__PURE__ */ jsx("col", { style: { width: instance.columnSizesPx[col.id] ?? 120 } }, col.id))
+							] }),
+							/* @__PURE__ */ jsx(Table.Header, {
+								"data-responsive-has-items": responsiveEnabled ? hasResponsiveHeaderItems : void 0,
+								children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+									instance.enableRowSelection && /* @__PURE__ */ jsx(Table.HeaderCell, {
+										align: "center",
+										scope: "col",
+										className: clsx(DataTable_module_default.autoCell, DataTable_module_default.autoCellStickyHeader),
+										style: {
+											position: "sticky",
+											left: 0
+										},
+										"data-responsive-control": responsiveEnabled || void 0,
+										children: /* @__PURE__ */ jsx(Checkbox, {
+											checked: instance.isAllOnPageSelected(),
+											indeterminate: instance.isSomeOnPageSelected(),
+											onChange: () => instance.toggleAllOnPage(),
+											"aria-label": t("dataTable.selectAll")
+										})
+									}),
+									instance.hasExpansion && /* @__PURE__ */ jsx(Table.HeaderCell, {
+										align: "center",
+										scope: "col",
+										className: clsx(DataTable_module_default.autoCell, DataTable_module_default.autoCellStickyHeader),
+										style: {
+											position: "sticky",
+											left: instance.enableRowSelection ? 44 : 0
+										},
+										"aria-label": t("dataTable.rowExpansion")
+									}),
+									renderColumns.map((col) => /* @__PURE__ */ jsx(HeaderCell, {
+										column: col,
+										instance,
+										dragWholeColumn,
+										dragActive,
+										responsiveEnabled
+									}, col.id))
+								] })
+							}),
+							!showSkeletonRows && instance.pinnedRows.length > 0 && /* @__PURE__ */ jsx(Table.Body, {
+								className: DataTable_module_default.pinnedRowsTbody,
+								"aria-label": t("dataTable.pinnedRows"),
+								children: instance.pinnedRows.map((row) => /* @__PURE__ */ jsx(BodyRow, {
+									row,
+									instance,
+									isPinnedRow: true,
+									dragWholeColumn,
+									dragActive,
+									responsiveEnabled
+								}, instance.getRowId(row)))
+							}),
+							/* @__PURE__ */ jsx(Table.Body, { children: showSkeletonRows ? /* @__PURE__ */ jsx(SkeletonRows, {
+								count: loadingRowCount,
+								totalColCount,
+								responsiveEnabled
+							}) : dataIsEmpty ? /* @__PURE__ */ jsx(EmptyRow, {
+								totalColCount,
+								content: emptyState,
+								responsiveEnabled
+							}) : instance.data.map((row) => /* @__PURE__ */ jsx(BodyRow, {
+								row,
+								instance,
+								dragWholeColumn,
+								dragActive,
+								responsiveEnabled
+							}, instance.getRowId(row))) })
+						]
+					})
+				}), /* @__PURE__ */ jsx("span", {
+					role: "status",
+					"aria-live": "polite",
+					className: DataTable_module_default.srStatus,
+					children: loadPhase === "loading" ? t("dataTable.loading") : loadPhase === "loaded" ? t("dataTable.loaded") : loadPhase === "empty" ? t("dataTable.loadedEmpty") : ""
+				})]
+			})
+		]
+	});
+	if (!collapseBelow) return table;
+	return /* @__PURE__ */ jsx("div", {
+		className: DataTable_module_default.responsiveContainer,
+		"data-collapse-below": collapseBelow,
+		children: table
+	});
+}
+function SkeletonRows({ count, totalColCount, responsiveEnabled }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(Table.Row, { children: Array.from({ length: totalColCount }, (_, j) => /* @__PURE__ */ jsx(Table.Cell, {
+		className: clsx(DataTable_module_default.skeletonCell, responsiveEnabled && DataTable_module_default.responsiveFullWidth),
+		children: /* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			width: "80%"
+		})
+	}, j)) }, `sk-${i}`)) });
+}
+/** Long enough for the announcement to be picked up, short enough not to linger. */
+var CLEAR_STATUS_MS = 1e3;
+function EmptyRow({ totalColCount, content, responsiveEnabled }) {
+	const t = useTranslation();
+	return /* @__PURE__ */ jsx(Table.Row, { children: /* @__PURE__ */ jsx(Table.Cell, {
+		colSpan: totalColCount,
+		className: clsx(DataTable_module_default.emptyCell, responsiveEnabled && DataTable_module_default.responsiveFullWidth),
+		children: content ?? /* @__PURE__ */ jsx(EmptyState, { title: t("dataTable.empty") })
+	}) });
+}
+/**
+* Server-driven data table driven by a `useDataTable` instance.
+* @see docs/components/DataTable.md
+*/
+var DataTable = forwardRef(DataTableInner);
+export { DataTable };

package/dist/components/DataTable/DataTable.module.js

@@ -0,0 +1,53 @@
+import "./DataTable.css";
+// src/components/DataTable/DataTable.module.scss
+var root = "DataTable__root__ZGnrX";
+var autoCell = "DataTable__autoCell__Oxuug";
+var clickableRow = "DataTable__clickableRow__p2Gq8";
+var emptyCell = "DataTable__emptyCell__ckjbi";
+var skeletonCell = "DataTable__skeletonCell__AlU2p";
+var autoCellStickyHeader = "DataTable__autoCellStickyHeader__odjE6";
+var autoCellStickyBody = "DataTable__autoCellStickyBody__q1DGR";
+var pinnedLeft = "DataTable__pinnedLeft__HjKkP";
+var pinnedRight = "DataTable__pinnedRight__LBiqU";
+var pinnedRow = "DataTable__pinnedRow__pbFEe";
+var pinnedRowsTbody = "DataTable__pinnedRowsTbody__yGFFz";
+var expandButton = "DataTable__expandButton__70QdK";
+var expandedDetailRow = "DataTable__expandedDetailRow__gx4_7";
+var expandedDetailCell = "DataTable__expandedDetailCell__Qi7Dl";
+var responsiveContainer = "DataTable__responsiveContainer__jIe1C";
+var responsiveScrollWrap = "DataTable__responsiveScrollWrap__5UJJd";
+var responsiveVisualLabel = "DataTable__responsiveVisualLabel__nZSeR";
+var responsiveValue = "DataTable__responsiveValue__s04wI";
+var collapseSm = "DataTable__collapseSm__q1oOg";
+var responsiveDataCell = "DataTable__responsiveDataCell__nHgRT";
+var responsiveFullWidth = "DataTable__responsiveFullWidth__IsWw9";
+var collapseMd = "DataTable__collapseMd__O-SI1";
+var collapseLg = "DataTable__collapseLg__wgqne";
+var srStatus = "DataTable__srStatus__GAgzQ";
+var DataTable_module_default = {
+	root,
+	autoCell,
+	clickableRow,
+	emptyCell,
+	skeletonCell,
+	autoCellStickyHeader,
+	autoCellStickyBody,
+	pinnedLeft,
+	pinnedRight,
+	pinnedRow,
+	pinnedRowsTbody,
+	expandButton,
+	expandedDetailRow,
+	expandedDetailCell,
+	responsiveContainer,
+	responsiveScrollWrap,
+	responsiveVisualLabel,
+	responsiveValue,
+	collapseSm,
+	responsiveDataCell,
+	responsiveFullWidth,
+	collapseMd,
+	collapseLg,
+	srStatus
+};
+export { autoCell, autoCellStickyBody, autoCellStickyHeader, clickableRow, collapseLg, collapseMd, collapseSm, DataTable_module_default as default, emptyCell, expandButton, expandedDetailCell, expandedDetailRow, pinnedLeft, pinnedRight, pinnedRow, pinnedRowsTbody, responsiveContainer, responsiveDataCell, responsiveFullWidth, responsiveScrollWrap, responsiveValue, responsiveVisualLabel, root, skeletonCell, srStatus };

package/dist/components/DataTable/HeaderCell.css

@@ -0,0 +1,203 @@
+:root {
+  --data-table-clickable-row-radius: var(--radius-sm);
+  --data-table-cell-padding-left: var(--space-4);
+  --data-table-empty-padding: var(--space-6) var(--space-4);
+  --data-table-empty-fg: var(--color-fg-muted);
+  --data-table-auto-cell-sticky-header-bg: var(--color-table-header-bg);
+  --data-table-auto-cell-sticky-body-bg: var(--color-table-bg);
+  --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);
+  --data-table-pinned-row-bg: var(--color-bg-row-pinned);
+  --data-table-pinned-bg-row-hover: var(--color-table-row-bg-hover);
+  --data-table-pinned-bg-row-selected: var(--color-table-row-bg-selected);
+  --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);
+  --data-table-expanded-detail-padding: var(--space-3) var(--space-4);
+  --data-table-column-visibility-gap: var(--space-1);
+  --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);
+  --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);
+}
+
+.HeaderCell__headerCell__loEwi {
+  position: relative;
+  overflow: hidden;
+  user-select: none;
+}
+
+.HeaderCell__grip__KWZeA {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--data-table-header-grip-fg);
+  opacity: var(--data-table-header-grip-opacity-hidden);
+  cursor: grab;
+  transition: opacity var(--data-table-header-grip-transition);
+}
+.HeaderCell__headerCell__loEwi:hover .HeaderCell__grip__KWZeA, .HeaderCell__grip__KWZeA:focus-visible {
+  opacity: var(--data-table-header-grip-opacity-visible);
+}
+.HeaderCell__grip__KWZeA:focus-visible {
+  outline: var(--ring-width) solid var(--ring-accent);
+  outline-offset: calc(-1 * var(--ring-offset));
+  border-radius: var(--data-table-header-grip-focus-radius);
+}
+
+.HeaderCell__inner__dn4IA {
+  display: flex;
+  align-items: center;
+  gap: var(--data-table-header-inner-gap);
+  height: 100%;
+  min-width: 0;
+}
+
+.HeaderCell__innerWithResize__IxjPs {
+  padding-right: 24px;
+}
+
+.HeaderCell__innerAlignEnd__JX8qT {
+  justify-content: flex-end;
+}
+
+.HeaderCell__innerAlignCenter__JLJLx {
+  justify-content: center;
+}
+
+.HeaderCell__innerAlignEnd__JX8qT .HeaderCell__label__GfilJ,
+.HeaderCell__innerAlignCenter__JLJLx .HeaderCell__label__GfilJ {
+  flex: 0 1 auto;
+}
+
+.HeaderCell__label__GfilJ {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--data-table-header-label-gap);
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: var(--data-table-header-label-font-weight);
+  color: var(--data-table-header-label-fg);
+  cursor: default;
+  user-select: none;
+}
+.HeaderCell__label__GfilJ.HeaderCell__sortable__IyfbP {
+  cursor: pointer;
+}
+.HeaderCell__label__GfilJ.HeaderCell__sortable__IyfbP:focus-visible {
+  outline: var(--ring-width) solid var(--ring-accent);
+  outline-offset: calc(-1 * var(--ring-offset));
+  border-radius: var(--data-table-header-label-focus-radius);
+}
+
+.HeaderCell__sortIcon__12MgJ {
+  flex-shrink: 0;
+  color: var(--data-table-header-sort-icon-fg);
+  cursor: pointer;
+}
+
+.HeaderCell__sortIconActive__jyFCY {
+  color: var(--data-table-header-sort-icon-fg-active);
+}
+
+.HeaderCell__resizeHandle__FKFM7 {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 24px;
+  cursor: col-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  opacity: var(--data-table-header-resize-handle-opacity-hidden);
+  transition: opacity var(--data-table-header-resize-handle-transition);
+}
+.HeaderCell__headerCell__loEwi:hover .HeaderCell__resizeHandle__FKFM7 {
+  opacity: var(--data-table-header-resize-handle-opacity-visible);
+}
+.HeaderCell__resizeHandle__FKFM7:focus-visible {
+  outline: var(--ring-width) solid var(--ring-accent);
+  outline-offset: calc(-1 * var(--ring-offset));
+  opacity: var(--data-table-header-resize-handle-opacity-visible);
+}
+
+.HeaderCell__resizeChevron__Ml3Jb {
+  width: 8px;
+  height: 8px;
+  color: var(--data-table-header-resize-chevron-fg);
+  flex-shrink: 0;
+  transition: color var(--data-table-header-resize-chevron-transition);
+}
+
+.HeaderCell__resizeBar__-QRgU {
+  width: 1px;
+  height: 60%;
+  background: var(--data-table-header-resize-bar-bg);
+  flex-shrink: 0;
+  transition: background var(--data-table-header-resize-bar-transition-bg), width var(--data-table-header-resize-bar-transition-width);
+}
+
+.HeaderCell__resizeHandle__FKFM7:hover .HeaderCell__resizeBar__-QRgU,
+.HeaderCell__resizeBar__-QRgU.HeaderCell__active__Q3XAA {
+  background: var(--data-table-header-resize-bar-bg-active);
+  width: 2px;
+}
+
+.HeaderCell__resizeHandle__FKFM7:hover .HeaderCell__resizeChevron__Ml3Jb,
+.HeaderCell__resizeHandle__FKFM7:has(.HeaderCell__resizeBar__-QRgU.HeaderCell__active__Q3XAA) .HeaderCell__resizeChevron__Ml3Jb {
+  color: var(--data-table-header-resize-chevron-fg-active);
+}
+
+.HeaderCell__dragging__RtRBs {
+  opacity: var(--data-table-header-dragging-opacity);
+}
+
+.HeaderCell__pinnedLeft__oM3YF,
+.HeaderCell__pinnedRight__7BaLp {
+  background: var(--data-table-header-pinned-bg);
+  z-index: 3;
+}
+
+.HeaderCell__pinnedLeft__oM3YF {
+  box-shadow: var(--data-table-header-pinned-shadow-left);
+}
+
+.HeaderCell__pinnedRight__7BaLp {
+  box-shadow: var(--data-table-header-pinned-shadow-right);
+}

package/dist/components/DataTable/HeaderCell.d.ts

@@ -0,0 +1,12 @@
+import type { ColumnDef, DataTableInstance } from './types.js';
+export interface HeaderCellProps<T> {
+    column: ColumnDef<T>;
+    instance: DataTableInstance<T>;
+    /** Whole-column drag preview is enabled for this table. */
+    dragWholeColumn?: boolean;
+    /** A column drag is currently in progress. */
+    dragActive?: boolean;
+    /** Enables responsive-only header hooks and the dedicated keyboard resize handle. */
+    responsiveEnabled?: boolean;
+}
+export declare function HeaderCell<T>({ column, instance, dragWholeColumn, dragActive, responsiveEnabled, }: HeaderCellProps<T>): import("react").JSX.Element;