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

An implementation of GitHub's Primer Design System using React

'use strict';

var reactCompilerRuntime = require('react-compiler-runtime');
var octiconsReact = require('@primer/octicons-react');
var clsx = require('clsx');
var React = require('react');
var _VisuallyHidden = require('../_VisuallyHidden.js');
var sorting = require('./sorting.js');
var useTable = require('./useTable.js');
var ButtonReset = require('../internal/components/ButtonReset.js');
var Table_module = require('./Table.module.css.js');
var BoxWithFallback = require('../internal/components/BoxWithFallback.js');
var jsxRuntime = require('react/jsx-runtime');
var ScrollableRegion = require('../ScrollableRegion/ScrollableRegion.js');
var SkeletonText = require('../SkeletonText/SkeletonText.js');
var Text = require('../Text/Text.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

const Table = /*#__PURE__*/React__default.default.forwardRef(function Table(t0, ref) {
  const $ = reactCompilerRuntime.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.clsx("TableOverflowWrapper", Table_module.TableOverflowWrapper);
    $[6] = t2;
  } else {
    t2 = $[6];
  }
  let t3;
  if ($[7] !== className) {
    t3 = clsx.clsx(className, "Table", Table_module.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__*/jsxRuntime.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__*/jsxRuntime.jsx(ScrollableRegion.ScrollableRegion, {
      "aria-labelledby": labelledby,
      className: t2,
      children: t6
    });
    $[18] = labelledby;
    $[19] = t6;
    $[20] = t7;
  } else {
    t7 = $[20];
  }
  return t7;
});

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

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

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

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

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

function TableHeader(t0) {
  const $ = reactCompilerRuntime.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.clsx("TableHeader", Table_module.TableHeader);
    $[4] = t1;
  } else {
    t1 = $[4];
  }
  let t2;
  if ($[5] !== align || $[6] !== children || $[7] !== rest) {
    t2 = /*#__PURE__*/jsxRuntime.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 $ = reactCompilerRuntime.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.clsx("TableSortButton", Table_module.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 === sorting.SortDirection.NONE || direction === sorting.SortDirection.ASC ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
      children: [/*#__PURE__*/jsxRuntime.jsx(octiconsReact.SortAscIcon, {
        className: clsx.clsx("TableSortIcon", "TableSortIcon--ascending", Table_module.TableSortIcon, Table_module["TableSortIcon--ascending"])
      }), direction === sorting.SortDirection.NONE ? /*#__PURE__*/jsxRuntime.jsx(_VisuallyHidden, {
        children: "sort ascending"
      }) : null]
    }) : null;
    $[9] = direction;
    $[10] = t3;
  } else {
    t3 = $[10];
  }
  let t4;
  if ($[11] !== direction) {
    t4 = direction === sorting.SortDirection.DESC ? /*#__PURE__*/jsxRuntime.jsx(octiconsReact.SortDescIcon, {
      className: clsx.clsx("TableSortIcon", "TableSortIcon--descending", Table_module.TableSortIcon, Table_module["TableSortIcon--descending"])
    }) : null;
    $[11] = direction;
    $[12] = t4;
  } else {
    t4 = $[12];
  }
  let t5;
  if ($[13] !== children || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
    t5 = /*#__PURE__*/jsxRuntime.jsxs(ButtonReset.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__*/jsxRuntime.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 $ = reactCompilerRuntime.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.clsx("TableRow", Table_module.TableRow);
    $[3] = t1;
  } else {
    t1 = $[3];
  }
  let t2;
  if ($[4] !== children || $[5] !== rest) {
    t2 = /*#__PURE__*/jsxRuntime.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 $ = reactCompilerRuntime.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.clsx("TableCell", className, Table_module.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__*/jsxRuntime.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 $ = reactCompilerRuntime.c(2);
  const {
    children
  } = t0;
  let t1;
  if ($[0] !== children) {
    t1 = /*#__PURE__*/jsxRuntime.jsx(Text, {
      color: "fg.subtle",
      children: children
    });
    $[0] = children;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  return t1;
}

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

function TableContainer(t0) {
  const $ = reactCompilerRuntime.c(10);
  let children;
  let className;
  let rest;
  if ($[0] !== t0) {
    ({
      children,
      className,
      ...rest
    } = t0);
    $[0] = t0;
    $[1] = children;
    $[2] = className;
    $[3] = rest;
  } else {
    children = $[1];
    className = $[2];
    rest = $[3];
  }
  let t1;
  if ($[4] !== className) {
    t1 = clsx.clsx(className, Table_module.TableContainer);
    $[4] = className;
    $[5] = t1;
  } else {
    t1 = $[5];
  }
  let t2;
  if ($[6] !== children || $[7] !== rest || $[8] !== t1) {
    t2 = /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
      ...rest,
      className: t1,
      children: children
    });
    $[6] = children;
    $[7] = rest;
    $[8] = t1;
    $[9] = t2;
  } else {
    t2 = $[9];
  }
  return t2;
}
const TableTitle = /*#__PURE__*/React__default.default.forwardRef(function TableTitle(t0, ref) {
  const $ = reactCompilerRuntime.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.clsx("TableTitle", Table_module.TableTitle);
    $[0] = t2;
  } else {
    t2 = $[0];
  }
  let t3;
  if ($[1] !== BaseComponent || $[2] !== children || $[3] !== id || $[4] !== ref) {
    t3 = /*#__PURE__*/jsxRuntime.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 $ = reactCompilerRuntime.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.clsx("TableSubtitle", Table_module.TableSubtitle);
    $[0] = t2;
  } else {
    t2 = $[0];
  }
  let t3;
  if ($[1] !== BaseComponent || $[2] !== children || $[3] !== id) {
    t3 = /*#__PURE__*/jsxRuntime.jsx(BaseComponent, {
      className: t2,
      id: id,
      children: children
    });
    $[1] = BaseComponent;
    $[2] = children;
    $[3] = id;
    $[4] = t3;
  } else {
    t3 = $[4];
  }
  return t3;
}
function TableDivider() {
  const $ = reactCompilerRuntime.c(1);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = /*#__PURE__*/jsxRuntime.jsx("div", {
      className: clsx.clsx("TableDivider", Table_module.TableDivider),
      role: "presentation"
    });
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  return t0;
}
function TableActions(t0) {
  const $ = reactCompilerRuntime.c(3);
  const {
    children
  } = t0;
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = clsx.clsx("TableActions", Table_module.TableActions);
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  let t2;
  if ($[1] !== children) {
    t2 = /*#__PURE__*/jsxRuntime.jsx("div", {
      className: t1,
      children: children
    });
    $[1] = children;
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  return t2;
}

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

function TableSkeleton(t0) {
  const $ = reactCompilerRuntime.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
  } = useTable.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__*/jsxRuntime.jsx(TableHead, {
      children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(TableBody, {
      children: /*#__PURE__*/jsxRuntime.jsx(TableRow, {
        children: t4.map((_, i_0) => /*#__PURE__*/jsxRuntime.jsxs(TableCell, {
          className: clsx.clsx("TableCellSkeleton", Table_module.TableCellSkeleton),
          children: [/*#__PURE__*/jsxRuntime.jsx(_VisuallyHidden, {
            children: "Loading"
          }), /*#__PURE__*/jsxRuntime.jsx("div", {
            className: clsx.clsx("TableCellSkeletonItems", Table_module.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__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
    className: clsx.clsx("TableCellSkeletonItem", Table_module.TableCellSkeletonItem),
    children: /*#__PURE__*/jsxRuntime.jsx(SkeletonText.SkeletonText, {})
  }, i_1);
}
_temp2.displayName = "_temp2";
function _temp(column, i) {
  return /*#__PURE__*/jsxRuntime.jsx(TableHeader, {
    children: typeof column.header === "string" ? column.header : column.header()
  }, i);
}
_temp.displayName = "_temp";

exports.Table = Table;
exports.TableActions = TableActions;
exports.TableBody = TableBody;
exports.TableCell = TableCell;
exports.TableCellPlaceholder = TableCellPlaceholder;
exports.TableContainer = TableContainer;
exports.TableDivider = TableDivider;
exports.TableHead = TableHead;
exports.TableHeader = TableHeader;
exports.TableRow = TableRow;
exports.TableSkeleton = TableSkeleton;
exports.TableSortHeader = TableSortHeader;
exports.TableSubtitle = TableSubtitle;
exports.TableTitle = TableTitle;