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

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { SortAscIcon, SortDescIcon } from '@primer/octicons-react';
import { clsx } from 'clsx';
import React from 'react';
import VisuallyHidden from '../_VisuallyHidden.js';
import { SortDirection } from './sorting.js';
import { useTableLayout } from './useTable.js';
import { Button } from '../internal/components/ButtonReset.js';
import classes from './Table.module.css.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { ScrollableRegion } from '../ScrollableRegion/ScrollableRegion.js';
import { SkeletonText } from '../SkeletonText/SkeletonText.js';
import Text from '../Text/Text.js';

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 === undefined ? "normal" : t1;
  let t2;
  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = clsx("TableOverflowWrapper", classes.TableOverflowWrapper);
    $[6] = t2;
  } else {
    t2 = $[6];
  }
  let t3;
  if ($[7] !== className) {
    t3 = clsx(className, "Table", classes.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: ref,
      style: t5
    });
    $[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;
});

// ----------------------------------------------------------------------------
// TableHead
// ----------------------------------------------------------------------------

function TableHead(t0) {
  const $ = c(3);
  const {
    children
  } = t0;
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = clsx("TableHead", classes.TableHead);
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  let t2;
  if ($[1] !== children) {
    t2 = /*#__PURE__*/jsx("thead", {
      className: t1,
      role: "rowgroup",
      children: children
    });
    $[1] = children;
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  return t2;
}

// ----------------------------------------------------------------------------
// TableBody
// ----------------------------------------------------------------------------

function TableBody(t0) {
  const $ = c(3);
  const {
    children
  } = t0;
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = clsx("TableBody", classes.TableBody);
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  let t2;
  if ($[1] !== children) {
    t2 = /*#__PURE__*/jsx("tbody", {
      className: t1,
      role: "rowgroup",
      children: children
    });
    $[1] = children;
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  return t2;
}

// ----------------------------------------------------------------------------
// TableHeader
// ----------------------------------------------------------------------------

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", classes.TableHeader);
    $[4] = t1;
  } else {
    t1 = $[4];
  }
  let t2;
  if ($[5] !== align || $[6] !== children || $[7] !== rest) {
    t2 = /*#__PURE__*/jsx("th", {
      ...rest,
      className: t1,
      role: "columnheader",
      scope: "col",
      "data-cell-align": align,
      children: 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" : undefined;
  let t1;
  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = clsx("TableSortButton", classes.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", classes.TableSortIcon, classes["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", classes.TableSortIcon, classes["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,
      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: align,
      children: t5
    });
    $[18] = align;
    $[19] = ariaSort;
    $[20] = rest;
    $[21] = t5;
    $[22] = t6;
  } else {
    t6 = $[22];
  }
  return t6;
}

// ----------------------------------------------------------------------------
// TableRow
// ----------------------------------------------------------------------------

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", classes.TableRow);
    $[3] = t1;
  } else {
    t1 = $[3];
  }
  let t2;
  if ($[4] !== children || $[5] !== rest) {
    t2 = /*#__PURE__*/jsx("tr", {
      ...rest,
      className: t1,
      role: "row",
      children: children
    });
    $[4] = children;
    $[5] = rest;
    $[6] = t2;
  } else {
    t2 = $[6];
  }
  return t2;
}

// ----------------------------------------------------------------------------
// TableCell
// ----------------------------------------------------------------------------

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, classes.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: scope,
      role: role,
      "data-cell-align": align,
      children: 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, {
      className: classes.PlaceholderText,
      children: children
    });
    $[0] = children;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  return t1;
}

// ----------------------------------------------------------------------------
// TableContainer
// ----------------------------------------------------------------------------

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, classes.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,
      children: 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 Component = t1 === undefined ? "h2" : t1;
  const BaseComponent = Component;
  let t2;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = clsx("TableTitle", classes.TableTitle);
    $[0] = t2;
  } else {
    t2 = $[0];
  }
  let t3;
  if ($[1] !== BaseComponent || $[2] !== children || $[3] !== id || $[4] !== ref) {
    t3 = /*#__PURE__*/jsx(BaseComponent, {
      className: t2,
      id: id,
      ref: ref,
      children: 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 === undefined ? "div" : t1;
  let t2;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = clsx("TableSubtitle", classes.TableSubtitle);
    $[0] = t2;
  } else {
    t2 = $[0];
  }
  let t3;
  if ($[1] !== BaseComponent || $[2] !== children || $[3] !== id) {
    t3 = /*#__PURE__*/jsx(BaseComponent, {
      className: t2,
      id: id,
      children: 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", classes.TableDivider),
      role: "presentation"
    });
    $[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", classes.TableActions);
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  let t2;
  if ($[1] !== children) {
    t2 = /*#__PURE__*/jsx("div", {
      className: t1,
      children: children
    });
    $[1] = children;
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  return t2;
}

// ----------------------------------------------------------------------------
// TableSkeleton
// ----------------------------------------------------------------------------

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 === undefined ? 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", classes.TableCellSkeleton),
          children: [/*#__PURE__*/jsx(VisuallyHidden, {
            children: "Loading"
          }), /*#__PURE__*/jsx("div", {
            className: clsx("TableCellSkeletonItems", classes.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: cellPadding,
      gridTemplateColumns: 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", classes.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";

export { Table, TableActions, TableBody, TableCell, TableCellPlaceholder, TableContainer, TableDivider, TableHead, TableHeader, TableRow, TableSkeleton, TableSortHeader, TableSubtitle, TableTitle };