@primer/react/dist/DataTable/Table.js

An implementation of GitHub's Primer Design System using React

import Text_default from "../Text/Text.js";
import VisuallyHidden from "../_VisuallyHidden.js";
import { ScrollableRegion } from "../ScrollableRegion/ScrollableRegion.js";
import { SkeletonText } from "../SkeletonText/SkeletonText.js";
import { SortDirection } from "./sorting.js";
import { useTableLayout } from "./useTable.js";
import { Button } from "../internal/components/ButtonReset.js";
import Table_module_css_default from "./Table.module.css.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import React from "react";
import { SortAscIcon, SortDescIcon } from "@primer/octicons-react";
//#region src/DataTable/Table.tsx
const Table = /*#__PURE__*/ React.forwardRef(function Table(t0, ref) {
	const $ = c(21);
	let className;
	let gridTemplateColumns;
	let labelledby;
	let rest;
	let t1;
	if ($[0] !== t0) {
		({"aria-labelledby": labelledby, cellPadding: t1, className, gridTemplateColumns, ...rest} = t0);
		$[0] = t0;
		$[1] = className;
		$[2] = gridTemplateColumns;
		$[3] = labelledby;
		$[4] = rest;
		$[5] = t1;
	} else {
		className = $[1];
		gridTemplateColumns = $[2];
		labelledby = $[3];
		rest = $[4];
		t1 = $[5];
	}
	const cellPadding = t1 === void 0 ? "normal" : t1;
	let t2;
	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
		t2 = clsx("TableOverflowWrapper", Table_module_css_default.TableOverflowWrapper);
		$[6] = t2;
	} else t2 = $[6];
	let t3;
	if ($[7] !== className) {
		t3 = clsx(className, "Table", Table_module_css_default.Table);
		$[7] = className;
		$[8] = t3;
	} else t3 = $[8];
	let t4;
	if ($[9] !== gridTemplateColumns) {
		t4 = { "--grid-template-columns": gridTemplateColumns };
		$[9] = gridTemplateColumns;
		$[10] = t4;
	} else t4 = $[10];
	const t5 = t4;
	let t6;
	if ($[11] !== cellPadding || $[12] !== labelledby || $[13] !== ref || $[14] !== rest || $[15] !== t3 || $[16] !== t5) {
		t6 = /*#__PURE__*/ jsx("table", {
			...rest,
			"aria-labelledby": labelledby,
			"data-cell-padding": cellPadding,
			className: t3,
			role: "table",
			ref,
			style: t5,
			"data-component": "Table"
		});
		$[11] = cellPadding;
		$[12] = labelledby;
		$[13] = ref;
		$[14] = rest;
		$[15] = t3;
		$[16] = t5;
		$[17] = t6;
	} else t6 = $[17];
	let t7;
	if ($[18] !== labelledby || $[19] !== t6) {
		t7 = /*#__PURE__*/ jsx(ScrollableRegion, {
			"aria-labelledby": labelledby,
			className: t2,
			children: t6
		});
		$[18] = labelledby;
		$[19] = t6;
		$[20] = t7;
	} else t7 = $[20];
	return t7;
});
function TableHead(t0) {
	const $ = c(3);
	const { children } = t0;
	let t1;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t1 = clsx("TableHead", Table_module_css_default.TableHead);
		$[0] = t1;
	} else t1 = $[0];
	let t2;
	if ($[1] !== children) {
		t2 = /*#__PURE__*/ jsx("thead", {
			className: t1,
			role: "rowgroup",
			"data-component": "Table.Head",
			children
		});
		$[1] = children;
		$[2] = t2;
	} else t2 = $[2];
	return t2;
}
function TableBody(t0) {
	const $ = c(3);
	const { children } = t0;
	let t1;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t1 = clsx("TableBody", Table_module_css_default.TableBody);
		$[0] = t1;
	} else t1 = $[0];
	let t2;
	if ($[1] !== children) {
		t2 = /*#__PURE__*/ jsx("tbody", {
			className: t1,
			role: "rowgroup",
			"data-component": "Table.Body",
			children
		});
		$[1] = children;
		$[2] = t2;
	} else t2 = $[2];
	return t2;
}
function TableHeader(t0) {
	const $ = c(9);
	let align;
	let children;
	let rest;
	if ($[0] !== t0) {
		({align, children, ...rest} = t0);
		$[0] = t0;
		$[1] = align;
		$[2] = children;
		$[3] = rest;
	} else {
		align = $[1];
		children = $[2];
		rest = $[3];
	}
	let t1;
	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
		t1 = clsx("TableHeader", Table_module_css_default.TableHeader);
		$[4] = t1;
	} else t1 = $[4];
	let t2;
	if ($[5] !== align || $[6] !== children || $[7] !== rest) {
		t2 = /*#__PURE__*/ jsx("th", {
			"data-component": "Table.Header",
			...rest,
			className: t1,
			role: "columnheader",
			scope: "col",
			"data-cell-align": align,
			children
		});
		$[5] = align;
		$[6] = children;
		$[7] = rest;
		$[8] = t2;
	} else t2 = $[8];
	return t2;
}
function TableSortHeader(t0) {
	const $ = c(23);
	let align;
	let children;
	let direction;
	let onToggleSort;
	let rest;
	if ($[0] !== t0) {
		({align, children, direction, onToggleSort, ...rest} = t0);
		$[0] = t0;
		$[1] = align;
		$[2] = children;
		$[3] = direction;
		$[4] = onToggleSort;
		$[5] = rest;
	} else {
		align = $[1];
		children = $[2];
		direction = $[3];
		onToggleSort = $[4];
		rest = $[5];
	}
	const ariaSort = direction === "DESC" ? "descending" : direction === "ASC" ? "ascending" : void 0;
	let t1;
	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
		t1 = clsx("TableSortButton", Table_module_css_default.TableSortButton);
		$[6] = t1;
	} else t1 = $[6];
	let t2;
	if ($[7] !== onToggleSort) {
		t2 = () => {
			onToggleSort();
		};
		$[7] = onToggleSort;
		$[8] = t2;
	} else t2 = $[8];
	let t3;
	if ($[9] !== direction) {
		t3 = direction === SortDirection.NONE || direction === SortDirection.ASC ? /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(SortAscIcon, { className: clsx("TableSortIcon", "TableSortIcon--ascending", Table_module_css_default.TableSortIcon, Table_module_css_default["TableSortIcon--ascending"]) }), direction === SortDirection.NONE ? /*#__PURE__*/ jsx(VisuallyHidden, { children: "sort ascending" }) : null] }) : null;
		$[9] = direction;
		$[10] = t3;
	} else t3 = $[10];
	let t4;
	if ($[11] !== direction) {
		t4 = direction === SortDirection.DESC ? /*#__PURE__*/ jsx(SortDescIcon, { className: clsx("TableSortIcon", "TableSortIcon--descending", Table_module_css_default.TableSortIcon, Table_module_css_default["TableSortIcon--descending"]) }) : null;
		$[11] = direction;
		$[12] = t4;
	} else t4 = $[12];
	let t5;
	if ($[13] !== children || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
		t5 = /*#__PURE__*/ jsxs(Button, {
			type: "button",
			className: t1,
			"data-component": "Table.SortHeader.Button",
			onClick: t2,
			children: [
				children,
				t3,
				t4
			]
		});
		$[13] = children;
		$[14] = t2;
		$[15] = t3;
		$[16] = t4;
		$[17] = t5;
	} else t5 = $[17];
	let t6;
	if ($[18] !== align || $[19] !== ariaSort || $[20] !== rest || $[21] !== t5) {
		t6 = /*#__PURE__*/ jsx(TableHeader, {
			...rest,
			"aria-sort": ariaSort,
			align,
			"data-component": "Table.SortHeader",
			children: t5
		});
		$[18] = align;
		$[19] = ariaSort;
		$[20] = rest;
		$[21] = t5;
		$[22] = t6;
	} else t6 = $[22];
	return t6;
}
function TableRow(t0) {
	const $ = c(7);
	let children;
	let rest;
	if ($[0] !== t0) {
		({children, ...rest} = t0);
		$[0] = t0;
		$[1] = children;
		$[2] = rest;
	} else {
		children = $[1];
		rest = $[2];
	}
	let t1;
	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
		t1 = clsx("TableRow", Table_module_css_default.TableRow);
		$[3] = t1;
	} else t1 = $[3];
	let t2;
	if ($[4] !== children || $[5] !== rest) {
		t2 = /*#__PURE__*/ jsx("tr", {
			...rest,
			className: t1,
			role: "row",
			"data-component": "Table.Row",
			children
		});
		$[4] = children;
		$[5] = rest;
		$[6] = t2;
	} else t2 = $[6];
	return t2;
}
function TableCell(t0) {
	const $ = c(16);
	let align;
	let children;
	let className;
	let rest;
	let scope;
	if ($[0] !== t0) {
		({align, className, children, scope, ...rest} = t0);
		$[0] = t0;
		$[1] = align;
		$[2] = children;
		$[3] = className;
		$[4] = rest;
		$[5] = scope;
	} else {
		align = $[1];
		children = $[2];
		className = $[3];
		rest = $[4];
		scope = $[5];
	}
	const BaseComponent = scope ? "th" : "td";
	const role = scope ? "rowheader" : "cell";
	let t1;
	if ($[6] !== className) {
		t1 = clsx("TableCell", className, Table_module_css_default.TableCell);
		$[6] = className;
		$[7] = t1;
	} else t1 = $[7];
	let t2;
	if ($[8] !== BaseComponent || $[9] !== align || $[10] !== children || $[11] !== rest || $[12] !== role || $[13] !== scope || $[14] !== t1) {
		t2 = /*#__PURE__*/ jsx(BaseComponent, {
			...rest,
			className: t1,
			scope,
			role,
			"data-cell-align": align,
			"data-component": "Table.Cell",
			children
		});
		$[8] = BaseComponent;
		$[9] = align;
		$[10] = children;
		$[11] = rest;
		$[12] = role;
		$[13] = scope;
		$[14] = t1;
		$[15] = t2;
	} else t2 = $[15];
	return t2;
}
function TableCellPlaceholder(t0) {
	const $ = c(2);
	const { children } = t0;
	let t1;
	if ($[0] !== children) {
		t1 = /*#__PURE__*/ jsx(Text_default, {
			className: Table_module_css_default.PlaceholderText,
			"data-component": "Table.CellPlaceholder",
			children
		});
		$[0] = children;
		$[1] = t1;
	} else t1 = $[1];
	return t1;
}
function TableContainer(t0) {
	const $ = c(12);
	let as;
	let children;
	let className;
	let rest;
	if ($[0] !== t0) {
		({children, className, as, ...rest} = t0);
		$[0] = t0;
		$[1] = as;
		$[2] = children;
		$[3] = className;
		$[4] = rest;
	} else {
		as = $[1];
		children = $[2];
		className = $[3];
		rest = $[4];
	}
	const Component = as || "div";
	let t1;
	if ($[5] !== className) {
		t1 = clsx(className, Table_module_css_default.TableContainer);
		$[5] = className;
		$[6] = t1;
	} else t1 = $[6];
	let t2;
	if ($[7] !== Component || $[8] !== children || $[9] !== rest || $[10] !== t1) {
		t2 = /*#__PURE__*/ jsx(Component, {
			...rest,
			className: t1,
			"data-component": "Table.Container",
			children
		});
		$[7] = Component;
		$[8] = children;
		$[9] = rest;
		$[10] = t1;
		$[11] = t2;
	} else t2 = $[11];
	return t2;
}
const TableTitle = /*#__PURE__*/ React.forwardRef(function TableTitle(t0, ref) {
	const $ = c(6);
	const { as: t1, children, id } = t0;
	const BaseComponent = t1 === void 0 ? "h2" : t1;
	let t2;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t2 = clsx("TableTitle", Table_module_css_default.TableTitle);
		$[0] = t2;
	} else t2 = $[0];
	let t3;
	if ($[1] !== BaseComponent || $[2] !== children || $[3] !== id || $[4] !== ref) {
		t3 = /*#__PURE__*/ jsx(BaseComponent, {
			className: t2,
			id,
			ref,
			"data-component": "Table.Title",
			children
		});
		$[1] = BaseComponent;
		$[2] = children;
		$[3] = id;
		$[4] = ref;
		$[5] = t3;
	} else t3 = $[5];
	return t3;
});
function TableSubtitle(t0) {
	const $ = c(5);
	const { as: t1, children, id } = t0;
	const BaseComponent = t1 === void 0 ? "div" : t1;
	let t2;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t2 = clsx("TableSubtitle", Table_module_css_default.TableSubtitle);
		$[0] = t2;
	} else t2 = $[0];
	let t3;
	if ($[1] !== BaseComponent || $[2] !== children || $[3] !== id) {
		t3 = /*#__PURE__*/ jsx(BaseComponent, {
			className: t2,
			id,
			"data-component": "Table.Subtitle",
			children
		});
		$[1] = BaseComponent;
		$[2] = children;
		$[3] = id;
		$[4] = t3;
	} else t3 = $[4];
	return t3;
}
function TableDivider() {
	const $ = c(1);
	let t0;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t0 = /*#__PURE__*/ jsx("div", {
			className: clsx("TableDivider", Table_module_css_default.TableDivider),
			role: "presentation",
			"data-component": "Table.Divider"
		});
		$[0] = t0;
	} else t0 = $[0];
	return t0;
}
function TableActions(t0) {
	const $ = c(3);
	const { children } = t0;
	let t1;
	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
		t1 = clsx("TableActions", Table_module_css_default.TableActions);
		$[0] = t1;
	} else t1 = $[0];
	let t2;
	if ($[1] !== children) {
		t2 = /*#__PURE__*/ jsx("div", {
			className: t1,
			"data-component": "Table.Actions",
			children
		});
		$[1] = children;
		$[2] = t2;
	} else t2 = $[2];
	return t2;
}
function TableSkeleton(t0) {
	const $ = c(20);
	let cellPadding;
	let columns;
	let rest;
	let t1;
	if ($[0] !== t0) {
		({cellPadding, columns, rows: t1, ...rest} = t0);
		$[0] = t0;
		$[1] = cellPadding;
		$[2] = columns;
		$[3] = rest;
		$[4] = t1;
	} else {
		cellPadding = $[1];
		columns = $[2];
		rest = $[3];
		t1 = $[4];
	}
	const rows = t1 === void 0 ? 10 : t1;
	const { gridTemplateColumns } = useTableLayout(columns);
	let t2;
	if ($[5] !== columns) {
		t2 = Array.isArray(columns) ? columns.map(_temp) : null;
		$[5] = columns;
		$[6] = t2;
	} else t2 = $[6];
	let t3;
	if ($[7] !== t2) {
		t3 = /*#__PURE__*/ jsx(TableHead, { children: /*#__PURE__*/ jsx(TableRow, { children: t2 }) });
		$[7] = t2;
		$[8] = t3;
	} else t3 = $[8];
	let t4;
	if ($[9] !== columns.length) {
		t4 = Array.from({ length: columns.length });
		$[9] = columns.length;
		$[10] = t4;
	} else t4 = $[10];
	let t5;
	if ($[11] !== rows || $[12] !== t4) {
		t5 = /*#__PURE__*/ jsx(TableBody, { children: /*#__PURE__*/ jsx(TableRow, { children: t4.map((_, i_0) => /*#__PURE__*/ jsxs(TableCell, {
			className: clsx("TableCellSkeleton", Table_module_css_default.TableCellSkeleton),
			children: [/*#__PURE__*/ jsx(VisuallyHidden, { children: "Loading" }), /*#__PURE__*/ jsx("div", {
				className: clsx("TableCellSkeletonItems", Table_module_css_default.TableCellSkeletonItems),
				children: Array.from({ length: rows }).map(_temp2)
			})]
		}, i_0)) }) });
		$[11] = rows;
		$[12] = t4;
		$[13] = t5;
	} else t5 = $[13];
	let t6;
	if ($[14] !== cellPadding || $[15] !== gridTemplateColumns || $[16] !== rest || $[17] !== t3 || $[18] !== t5) {
		t6 = /*#__PURE__*/ jsxs(Table, {
			...rest,
			cellPadding,
			gridTemplateColumns,
			children: [t3, t5]
		});
		$[14] = cellPadding;
		$[15] = gridTemplateColumns;
		$[16] = rest;
		$[17] = t3;
		$[18] = t5;
		$[19] = t6;
	} else t6 = $[19];
	return t6;
}
function _temp2(__0, i_1) {
	return /*#__PURE__*/ jsx("div", {
		className: clsx("TableCellSkeletonItem", Table_module_css_default.TableCellSkeletonItem),
		children: /*#__PURE__*/ jsx(SkeletonText, {})
	}, i_1);
}
_temp2.displayName = "_temp2";
function _temp(column, i) {
	return /*#__PURE__*/ jsx(TableHeader, { children: typeof column.header === "string" ? column.header : column.header() }, i);
}
_temp.displayName = "_temp";
//#endregion
export { Table, TableActions, TableBody, TableCell, TableCellPlaceholder, TableContainer, TableDivider, TableHead, TableHeader, TableRow, TableSkeleton, TableSortHeader, TableSubtitle, TableTitle };