@adecore/ui 0.61.0 → 0.62.0

package/dist/table/parts.js

@@ -0,0 +1,1075 @@
+import { c as _c } from "react/compiler-runtime";
+import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { ArrowDown, ArrowUp, ChevronsUpDown } from 'lucide-react';
+import { Children, createContext, useContext, useId } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from "../Icon.js";
+import { ScrollArea } from "../ScrollArea.js";
+import { Skeleton } from "../Skeleton.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const BREAKPOINTS = ['sm', 'md', 'lg', 'xl', '2xl'];
+/* A narrower query comes later in the CSS, so it wins over a wider one. */
+const TEMPLATE_BELOW = {
+  sm: '@max-sm:grid-cols-(--table-columns-sm)',
+  md: '@max-md:grid-cols-(--table-columns-md)',
+  lg: '@max-lg:grid-cols-(--table-columns-lg)',
+  xl: '@max-xl:grid-cols-(--table-columns-xl)',
+  '2xl': '@max-2xl:grid-cols-(--table-columns-2xl)'
+};
+const HIDDEN_BELOW = {
+  sm: '@max-sm:hidden',
+  md: '@max-md:hidden',
+  lg: '@max-lg:hidden',
+  xl: '@max-xl:hidden',
+  '2xl': '@max-2xl:hidden'
+};
+const ROW_HEIGHT = {
+  regular: 'min-h-10',
+  compact: 'min-h-8'
+};
+const CELL_PADDING = {
+  regular: 'py-2',
+  compact: 'py-1'
+};
+const TEXT_SIZE = {
+  regular: 'text-sm',
+  compact: 'text-xs'
+};
+const ARIA_SORT = {
+  none: 'none',
+  asc: 'ascending',
+  desc: 'descending'
+};
+const SKELETON_WIDTHS = ['w-3/4', 'w-1/2', 'w-2/3'];
+/* Every row is a subgrid of the table, so its cells line up with the columns and it still has a box to tint and focus. */
+const ROW = 'col-span-full grid grid-cols-subgrid items-center px-4.5';
+/* A click that lands on one of these inside a row is the control's, not the row's. */
+const CONTROLS = 'a[href], button, input, select, textarea, label, [contenteditable="true"], [role="button"], [role="checkbox"], [role="switch"], [role="menuitem"], [role="option"]';
+const TableContext = createContext({
+  columns: [],
+  density: 'regular',
+  scrolls: false
+});
+const ColumnIndexContext = createContext(-1);
+const templateOf = columns => columns.map(column => column.width).join(' ');
+/* Below a breakpoint every column that hides at it or at a wider one is gone. */
+const visibleBelow = (columns, breakpoint) => columns.filter(column => column.hideBelow === undefined || BREAKPOINTS.indexOf(column.hideBelow) < BREAKPOINTS.indexOf(breakpoint));
+/* A cell knows its column by its place in the row, so cells are the row's direct children. */
+const indexed = children => Children.map(children, (child, index) => /*#__PURE__*/_jsx(ColumnIndexContext, {
+  value: index,
+  children: child
+}));
+const columnClass = column => clsx('flex min-w-0 items-center gap-2', column?.align === 'end' && 'justify-end text-end tabular-nums', column?.hideBelow && HIDDEN_BELOW[column.hideBelow]);
+function useColumn() {
+  const {
+    columns
+  } = useContext(TableContext);
+  return columns[useContext(ColumnIndexContext)];
+}
+/* A grid rather than a `<table>`, so a cell holds any control and a column can leave on a narrow table. */
+export function TableRoot(t0) {
+  const $ = _c(36);
+  let children;
+  let className;
+  let columns;
+  let label;
+  let maxHeight;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      label,
+      columns,
+      density: t1,
+      framed: t2,
+      maxHeight,
+      className,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = columns;
+    $[4] = label;
+    $[5] = maxHeight;
+    $[6] = props;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    children = $[1];
+    className = $[2];
+    columns = $[3];
+    label = $[4];
+    maxHeight = $[5];
+    props = $[6];
+    t1 = $[7];
+    t2 = $[8];
+  }
+  const density = t1 === undefined ? "regular" : t1;
+  const framed = t2 === undefined ? false : t2;
+  const scrolls = maxHeight !== undefined;
+  let t3;
+  let tracks;
+  if ($[9] !== columns || $[10] !== density) {
+    let t4;
+    if ($[13] !== columns) {
+      t4 = breakpoint => columns.some(column => column.hideBelow === breakpoint);
+      $[13] = columns;
+      $[14] = t4;
+    } else {
+      t4 = $[14];
+    }
+    const used = BREAKPOINTS.filter(t4);
+    tracks = {
+      "--table-columns": templateOf(columns)
+    };
+    for (const breakpoint_0 of used) {
+      tracks[`--table-columns-${breakpoint_0}`] = templateOf(visibleBelow(columns, breakpoint_0));
+    }
+    t3 = clsx("ade-table-grid grid grid-cols-(--table-columns) gap-x-3", used.map(_temp), TEXT_SIZE[density]);
+    $[9] = columns;
+    $[10] = density;
+    $[11] = t3;
+    $[12] = tracks;
+  } else {
+    t3 = $[11];
+    tracks = $[12];
+  }
+  const grid = t3;
+  let t4;
+  if ($[15] !== columns || $[16] !== density || $[17] !== scrolls) {
+    t4 = {
+      columns,
+      density,
+      scrolls
+    };
+    $[15] = columns;
+    $[16] = density;
+    $[17] = scrolls;
+    $[18] = t4;
+  } else {
+    t4 = $[18];
+  }
+  const t5 = framed && "overflow-clip rounded-lg border border-border bg-surface";
+  let t6;
+  if ($[19] !== className || $[20] !== t5) {
+    t6 = clsx("@container min-w-0 text-text", t5, className);
+    $[19] = className;
+    $[20] = t5;
+    $[21] = t6;
+  } else {
+    t6 = $[21];
+  }
+  let t7;
+  if ($[22] !== children || $[23] !== grid || $[24] !== maxHeight || $[25] !== scrolls || $[26] !== tracks) {
+    t7 = scrolls ? /*#__PURE__*/_jsx(ScrollArea, {
+      viewportClassName: grid,
+      style: {
+        ...tracks,
+        maxHeight
+      },
+      children: children
+    }) : /*#__PURE__*/_jsx("div", {
+      className: grid,
+      style: tracks,
+      children: children
+    });
+    $[22] = children;
+    $[23] = grid;
+    $[24] = maxHeight;
+    $[25] = scrolls;
+    $[26] = tracks;
+    $[27] = t7;
+  } else {
+    t7 = $[27];
+  }
+  let t8;
+  if ($[28] !== label || $[29] !== props || $[30] !== t6 || $[31] !== t7) {
+    t8 = /*#__PURE__*/_jsx("div", {
+      role: "table",
+      "aria-label": label,
+      ...props,
+      className: t6,
+      children: t7
+    });
+    $[28] = label;
+    $[29] = props;
+    $[30] = t6;
+    $[31] = t7;
+    $[32] = t8;
+  } else {
+    t8 = $[32];
+  }
+  let t9;
+  if ($[33] !== t4 || $[34] !== t8) {
+    t9 = /*#__PURE__*/_jsx(TableContext, {
+      value: t4,
+      children: t8
+    });
+    $[33] = t4;
+    $[34] = t8;
+    $[35] = t9;
+  } else {
+    t9 = $[35];
+  }
+  return t9;
+}
+/* The row of column headers. It stays at the top while the body scrolls, on the surface color. */
+function _temp(breakpoint_1) {
+  return TEMPLATE_BELOW[breakpoint_1];
+}
+export function TableHead(t0) {
+  const $ = _c(24);
+  let children;
+  let className;
+  let props;
+  let ref;
+  let render;
+  if ($[0] !== t0) {
+    ({
+      render,
+      className,
+      ref,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = ref;
+    $[5] = render;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    ref = $[4];
+    render = $[5];
+  }
+  const {
+    density,
+    scrolls
+  } = useContext(TableContext);
+  const t1 = scrolls && "sticky top-0 z-1 bg-surface";
+  let t2;
+  if ($[6] !== className || $[7] !== t1) {
+    t2 = clsx("ade-table-head col-span-full grid grid-cols-subgrid border-b border-border", t1, className);
+    $[6] = className;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  const t3 = density === "compact" ? "min-h-7" : "min-h-8";
+  let t4;
+  if ($[9] !== t3) {
+    t4 = clsx(ROW, t3, "text-2xs font-medium text-text-muted");
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== children) {
+    t5 = indexed(children);
+    $[11] = children;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== t4 || $[14] !== t5) {
+    t6 = /*#__PURE__*/_jsx("div", {
+      role: "row",
+      className: t4,
+      children: t5
+    });
+    $[13] = t4;
+    $[14] = t5;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  let t7;
+  if ($[16] !== props || $[17] !== t2 || $[18] !== t6) {
+    t7 = {
+      role: "rowgroup",
+      ...props,
+      className: t2,
+      children: t6
+    };
+    $[16] = props;
+    $[17] = t2;
+    $[18] = t6;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  let t8;
+  if ($[20] !== ref || $[21] !== render || $[22] !== t7) {
+    t8 = {
+      render,
+      ref,
+      defaultTagName: "div",
+      props: t7
+    };
+    $[20] = ref;
+    $[21] = render;
+    $[22] = t7;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  return useRender(t8);
+}
+export function TableColumn(t0) {
+  const $ = _c(26);
+  let children;
+  let className;
+  let onSort;
+  let props;
+  let ref;
+  let render;
+  let sort;
+  if ($[0] !== t0) {
+    ({
+      sort,
+      onSort,
+      render,
+      className,
+      ref,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = onSort;
+    $[4] = props;
+    $[5] = ref;
+    $[6] = render;
+    $[7] = sort;
+  } else {
+    children = $[1];
+    className = $[2];
+    onSort = $[3];
+    props = $[4];
+    ref = $[5];
+    render = $[6];
+    sort = $[7];
+  }
+  const column = useColumn();
+  let t1;
+  if ($[8] !== children) {
+    t1 = /*#__PURE__*/_jsx("span", {
+      className: "truncate",
+      children: children
+    });
+    $[8] = children;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  const label = t1;
+  const t2 = sort === undefined ? undefined : ARIA_SORT[sort];
+  let t3;
+  if ($[10] !== className || $[11] !== column) {
+    t3 = clsx(columnClass(column), "py-1.5", className);
+    $[10] = className;
+    $[11] = column;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  let t4;
+  if ($[13] !== label || $[14] !== onSort || $[15] !== sort) {
+    t4 = sort === undefined ? label : /*#__PURE__*/_jsxs("button", {
+      type: "button",
+      className: "-mx-1 inline-flex min-w-0 items-center gap-1 rounded-sm px-1 hover:text-text",
+      onClick: () => onSort?.(sort === "asc" ? "desc" : "asc"),
+      children: [label, /*#__PURE__*/_jsx(Icon, {
+        icon: sort === "asc" ? ArrowUp : sort === "desc" ? ArrowDown : ChevronsUpDown,
+        size: 12,
+        className: clsx("shrink-0", sort === "none" && "text-text-faint")
+      })]
+    });
+    $[13] = label;
+    $[14] = onSort;
+    $[15] = sort;
+    $[16] = t4;
+  } else {
+    t4 = $[16];
+  }
+  let t5;
+  if ($[17] !== props || $[18] !== t2 || $[19] !== t3 || $[20] !== t4) {
+    t5 = {
+      role: "columnheader",
+      "aria-sort": t2,
+      ...props,
+      className: t3,
+      children: t4
+    };
+    $[17] = props;
+    $[18] = t2;
+    $[19] = t3;
+    $[20] = t4;
+    $[21] = t5;
+  } else {
+    t5 = $[21];
+  }
+  let t6;
+  if ($[22] !== ref || $[23] !== render || $[24] !== t5) {
+    t6 = {
+      render,
+      ref,
+      defaultTagName: "div",
+      props: t5
+    };
+    $[22] = ref;
+    $[23] = render;
+    $[24] = t5;
+    $[25] = t6;
+  } else {
+    t6 = $[25];
+  }
+  return useRender(t6);
+}
+const fromControl = event => {
+  const row = event.currentTarget;
+  const target = event.target;
+  // React bubbles a click out of a portal, such as a menu opened from a cell, into the row.
+  if (!(target instanceof Element) || !row.contains(target)) {
+    return true;
+  }
+  const control = target.closest(CONTROLS);
+  return control !== null && control !== row && row.contains(control);
+};
+/* With `onClick` the row is a tab stop that Enter and Space press, unless `focusable` is false, and a click on a control inside it stays the control's. */
+export function TableRow(t0) {
+  const $ = _c(37);
+  let children;
+  let className;
+  let onClick;
+  let onKeyDown;
+  let props;
+  let ref;
+  let render;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== t0) {
+    ({
+      selected: t1,
+      muted: t2,
+      focusable: t3,
+      onClick,
+      onKeyDown,
+      render,
+      className,
+      ref,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = onClick;
+    $[4] = onKeyDown;
+    $[5] = props;
+    $[6] = ref;
+    $[7] = render;
+    $[8] = t1;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    children = $[1];
+    className = $[2];
+    onClick = $[3];
+    onKeyDown = $[4];
+    props = $[5];
+    ref = $[6];
+    render = $[7];
+    t1 = $[8];
+    t2 = $[9];
+    t3 = $[10];
+  }
+  const selected = t1 === undefined ? false : t1;
+  const muted = t2 === undefined ? false : t2;
+  const focusable = t3 === undefined ? true : t3;
+  const {
+    density
+  } = useContext(TableContext);
+  const clickable = onClick !== undefined;
+  const pressable = clickable && focusable;
+  const t4 = pressable ? 0 : undefined;
+  const t5 = selected ? "" : undefined;
+  const t6 = ROW_HEIGHT[density];
+  const t7 = selected ? "bg-accent-soft" : clickable && "hover:bg-surface-hover";
+  const t8 = pressable && "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-on-surface";
+  const t9 = muted && "text-text-muted";
+  let t10;
+  if ($[11] !== className || $[12] !== t6 || $[13] !== t7 || $[14] !== t8 || $[15] !== t9) {
+    t10 = clsx("ade-table-line", ROW, t6, t7, t8, t9, className);
+    $[11] = className;
+    $[12] = t6;
+    $[13] = t7;
+    $[14] = t8;
+    $[15] = t9;
+    $[16] = t10;
+  } else {
+    t10 = $[16];
+  }
+  let t11;
+  if ($[17] !== clickable || $[18] !== onClick) {
+    t11 = clickable ? event => {
+      if (!fromControl(event)) {
+        onClick(event);
+      }
+    } : undefined;
+    $[17] = clickable;
+    $[18] = onClick;
+    $[19] = t11;
+  } else {
+    t11 = $[19];
+  }
+  let t12;
+  if ($[20] !== onKeyDown || $[21] !== pressable) {
+    t12 = event_0 => {
+      onKeyDown?.(event_0);
+      if (!pressable || event_0.defaultPrevented || event_0.target !== event_0.currentTarget || event_0.key !== "Enter" && event_0.key !== " ") {
+        return;
+      }
+      event_0.preventDefault();
+      event_0.currentTarget.click();
+    };
+    $[20] = onKeyDown;
+    $[21] = pressable;
+    $[22] = t12;
+  } else {
+    t12 = $[22];
+  }
+  let t13;
+  if ($[23] !== children) {
+    t13 = indexed(children);
+    $[23] = children;
+    $[24] = t13;
+  } else {
+    t13 = $[24];
+  }
+  let t14;
+  if ($[25] !== props || $[26] !== t10 || $[27] !== t11 || $[28] !== t12 || $[29] !== t13 || $[30] !== t4 || $[31] !== t5) {
+    t14 = {
+      role: "row",
+      tabIndex: t4,
+      ...props,
+      "data-selected": t5,
+      className: t10,
+      onClick: t11,
+      onKeyDown: t12,
+      children: t13
+    };
+    $[25] = props;
+    $[26] = t10;
+    $[27] = t11;
+    $[28] = t12;
+    $[29] = t13;
+    $[30] = t4;
+    $[31] = t5;
+    $[32] = t14;
+  } else {
+    t14 = $[32];
+  }
+  let t15;
+  if ($[33] !== ref || $[34] !== render || $[35] !== t14) {
+    t15 = {
+      render,
+      ref,
+      defaultTagName: "div",
+      props: t14
+    };
+    $[33] = ref;
+    $[34] = render;
+    $[35] = t14;
+    $[36] = t15;
+  } else {
+    t15 = $[36];
+  }
+  return useRender(t15);
+}
+const isText = children => typeof children === 'string' || typeof children === 'number' || Array.isArray(children) && children.every(child => typeof child === 'string' || typeof child === 'number');
+/* Takes its column's alignment and hiding. Any content may sit inside: a pill, a switch, a checkbox, an input or a menu button. */
+export function TableCell(t0) {
+  const $ = _c(25);
+  let children;
+  let className;
+  let props;
+  let ref;
+  let render;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      truncate: t1,
+      mono: t2,
+      render,
+      className,
+      ref,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = ref;
+    $[5] = render;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    ref = $[4];
+    render = $[5];
+    t1 = $[6];
+    t2 = $[7];
+  }
+  const truncate = t1 === undefined ? true : t1;
+  const mono = t2 === undefined ? false : t2;
+  const column = useColumn();
+  const {
+    density
+  } = useContext(TableContext);
+  let t3;
+  if ($[8] !== className || $[9] !== column || $[10] !== density || $[11] !== mono || $[12] !== truncate) {
+    t3 = clsx(columnClass(column), CELL_PADDING[density], !truncate && "flex-wrap", mono && "font-mono text-code text-text-muted", className);
+    $[8] = className;
+    $[9] = column;
+    $[10] = density;
+    $[11] = mono;
+    $[12] = truncate;
+    $[13] = t3;
+  } else {
+    t3 = $[13];
+  }
+  let t4;
+  if ($[14] !== children || $[15] !== truncate) {
+    t4 = isText(children) ? /*#__PURE__*/_jsx("span", {
+      className: truncate ? "min-w-0 truncate" : "min-w-0 break-words",
+      children: children
+    }) : children;
+    $[14] = children;
+    $[15] = truncate;
+    $[16] = t4;
+  } else {
+    t4 = $[16];
+  }
+  let t5;
+  if ($[17] !== props || $[18] !== t3 || $[19] !== t4) {
+    t5 = {
+      role: "cell",
+      ...props,
+      className: t3,
+      children: t4
+    };
+    $[17] = props;
+    $[18] = t3;
+    $[19] = t4;
+    $[20] = t5;
+  } else {
+    t5 = $[20];
+  }
+  let t6;
+  if ($[21] !== ref || $[22] !== render || $[23] !== t5) {
+    t6 = {
+      render,
+      ref,
+      defaultTagName: "div",
+      props: t5
+    };
+    $[21] = ref;
+    $[22] = render;
+    $[23] = t5;
+    $[24] = t6;
+  } else {
+    t6 = $[24];
+  }
+  return useRender(t6);
+}
+export function TableGroup(t0) {
+  const $ = _c(25);
+  let children;
+  let className;
+  let label;
+  let props;
+  let ref;
+  let render;
+  if ($[0] !== t0) {
+    ({
+      label,
+      render,
+      className,
+      ref,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = label;
+    $[4] = props;
+    $[5] = ref;
+    $[6] = render;
+  } else {
+    children = $[1];
+    className = $[2];
+    label = $[3];
+    props = $[4];
+    ref = $[5];
+    render = $[6];
+  }
+  const {
+    columns
+  } = useContext(TableContext);
+  const id = useId();
+  let t1;
+  if ($[7] !== className) {
+    t1 = clsx("col-span-full grid grid-cols-subgrid", className);
+    $[7] = className;
+    $[8] = t1;
+  } else {
+    t1 = $[8];
+  }
+  let t2;
+  if ($[9] !== columns.length || $[10] !== id || $[11] !== label) {
+    t2 = /*#__PURE__*/_jsx("div", {
+      role: "row",
+      className: "ade-table-line col-span-full grid min-h-8 grid-cols-subgrid items-end px-4.5 pt-3 pb-1 text-2xs text-text-faint",
+      children: /*#__PURE__*/_jsx("div", {
+        role: "cell",
+        id: id,
+        "aria-colspan": columns.length,
+        className: "col-span-full min-w-0 truncate",
+        children: label
+      })
+    });
+    $[9] = columns.length;
+    $[10] = id;
+    $[11] = label;
+    $[12] = t2;
+  } else {
+    t2 = $[12];
+  }
+  let t3;
+  if ($[13] !== children || $[14] !== t2) {
+    t3 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t2, children]
+    });
+    $[13] = children;
+    $[14] = t2;
+    $[15] = t3;
+  } else {
+    t3 = $[15];
+  }
+  let t4;
+  if ($[16] !== id || $[17] !== props || $[18] !== t1 || $[19] !== t3) {
+    t4 = {
+      role: "rowgroup",
+      "aria-labelledby": id,
+      ...props,
+      className: t1,
+      children: t3
+    };
+    $[16] = id;
+    $[17] = props;
+    $[18] = t1;
+    $[19] = t3;
+    $[20] = t4;
+  } else {
+    t4 = $[20];
+  }
+  let t5;
+  if ($[21] !== ref || $[22] !== render || $[23] !== t4) {
+    t5 = {
+      render,
+      ref,
+      defaultTagName: "div",
+      props: t4
+    };
+    $[21] = ref;
+    $[22] = render;
+    $[23] = t4;
+    $[24] = t5;
+  } else {
+    t5 = $[24];
+  }
+  return useRender(t5);
+}
+/* The totals under the body, behind a stronger line. Its cells follow the columns like a row's. */
+export function TableFoot(t0) {
+  const $ = _c(23);
+  let children;
+  let className;
+  let props;
+  let ref;
+  let render;
+  if ($[0] !== t0) {
+    ({
+      render,
+      className,
+      ref,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = ref;
+    $[5] = render;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    ref = $[4];
+    render = $[5];
+  }
+  const {
+    density
+  } = useContext(TableContext);
+  let t1;
+  if ($[6] !== className) {
+    t1 = clsx("col-span-full grid grid-cols-subgrid border-t border-border font-medium", className);
+    $[6] = className;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  const t2 = ROW_HEIGHT[density];
+  let t3;
+  if ($[8] !== t2) {
+    t3 = clsx(ROW, t2);
+    $[8] = t2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== children) {
+    t4 = indexed(children);
+    $[10] = children;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== t3 || $[13] !== t4) {
+    t5 = /*#__PURE__*/_jsx("div", {
+      role: "row",
+      className: t3,
+      children: t4
+    });
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] !== props || $[16] !== t1 || $[17] !== t5) {
+    t6 = {
+      role: "rowgroup",
+      ...props,
+      className: t1,
+      children: t5
+    };
+    $[15] = props;
+    $[16] = t1;
+    $[17] = t5;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  let t7;
+  if ($[19] !== ref || $[20] !== render || $[21] !== t6) {
+    t7 = {
+      render,
+      ref,
+      defaultTagName: "div",
+      props: t6
+    };
+    $[19] = ref;
+    $[20] = render;
+    $[21] = t6;
+    $[22] = t7;
+  } else {
+    t7 = $[22];
+  }
+  return useRender(t7);
+}
+/* The one row of a table without rows, its message across every column. */
+export function TableEmpty(t0) {
+  const $ = _c(19);
+  let children;
+  let className;
+  let props;
+  let ref;
+  let render;
+  if ($[0] !== t0) {
+    ({
+      render,
+      className,
+      ref,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = ref;
+    $[5] = render;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    ref = $[4];
+    render = $[5];
+  }
+  const {
+    columns
+  } = useContext(TableContext);
+  let t1;
+  if ($[6] !== className) {
+    t1 = clsx("ade-table-line", ROW, className);
+    $[6] = className;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  let t2;
+  if ($[8] !== children || $[9] !== columns.length) {
+    t2 = /*#__PURE__*/_jsx("div", {
+      role: "cell",
+      "aria-colspan": columns.length,
+      className: "col-span-full min-w-0 py-6 text-center break-words text-text-muted",
+      children: children
+    });
+    $[8] = children;
+    $[9] = columns.length;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  let t3;
+  if ($[11] !== props || $[12] !== t1 || $[13] !== t2) {
+    t3 = {
+      role: "row",
+      ...props,
+      className: t1,
+      children: t2
+    };
+    $[11] = props;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  let t4;
+  if ($[15] !== ref || $[16] !== render || $[17] !== t3) {
+    t4 = {
+      render,
+      ref,
+      defaultTagName: "div",
+      props: t3
+    };
+    $[15] = ref;
+    $[16] = render;
+    $[17] = t3;
+    $[18] = t4;
+  } else {
+    t4 = $[18];
+  }
+  return useRender(t4);
+}
+/* Rows of bars under the columns; a screen reader hears that the table is loading instead. */
+export function TableLoading(t0) {
+  const $ = _c(14);
+  const {
+    rows: t1,
+    className,
+    ref
+  } = t0;
+  const rows = t1 === undefined ? 3 : t1;
+  const {
+    t
+  } = useTranslation("ui");
+  const {
+    columns
+  } = useContext(TableContext);
+  let t2;
+  if ($[0] !== t) {
+    t2 = t("table.loading");
+    $[0] = t;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== className) {
+    t3 = clsx("col-span-full grid grid-cols-subgrid", className);
+    $[2] = className;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== columns || $[5] !== rows) {
+    let t5;
+    if ($[7] !== columns) {
+      t5 = (_, row) => /*#__PURE__*/_jsx(TableRow, {
+        "aria-hidden": true,
+        children: Array.from(columns, (__0, index) => /*#__PURE__*/_jsx(TableCell, {
+          children: /*#__PURE__*/_jsx(Skeleton, {
+            className: SKELETON_WIDTHS[(row + index) % SKELETON_WIDTHS.length]
+          })
+        }, index))
+      }, row);
+      $[7] = columns;
+      $[8] = t5;
+    } else {
+      t5 = $[8];
+    }
+    t4 = Array.from({
+      length: rows
+    }, t5);
+    $[4] = columns;
+    $[5] = rows;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[9] !== ref || $[10] !== t2 || $[11] !== t3 || $[12] !== t4) {
+    t5 = /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      role: "rowgroup",
+      "aria-busy": true,
+      "aria-label": t2,
+      className: t3,
+      children: t4
+    });
+    $[9] = ref;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  return t5;
+}