@jirawatpyk/aura-react 5.51.0 → 5.52.0

package/dist/esm/Table.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import { cx, devWarnOnce, uid, useIsoLayoutEffect } from "./internal.js";
 import { useDensity } from "./locale.js";
+import { inertProps, skeletonBody, skeletonColgroup } from "./TableSkeleton.js";
 const StackLabels = React.createContext(null);
 const ColumnIndex = React.createContext(-1);
 function flat(children) {
@@ -47,6 +48,33 @@ function headerLabels(children) {
   });
   return out;
 }
+function headerColumns(children) {
+  const out = [];
+  flat(children).forEach(function(c) {
+    if (out.length || !React.isValidElement(c) || c.type !== THead) return;
+    const row = flat(c.props.children).find(function(r) {
+      return React.isValidElement(r);
+    });
+    if (!row) return;
+    flat(row.props.children).forEach(function(cell) {
+      if (!React.isValidElement(cell)) return;
+      const p = cell.props;
+      const t = text(p.children);
+      const style = p.style;
+      const span = Math.max(1, Number(p.colSpan) || 1);
+      for (let i = 0; i < span; i++)
+        out.push({
+          label: p.label != null ? p.label : t != null ? t.replace(/\s+/g, " ").trim() || void 0 : void 0,
+          width: span > 1 ? void 0 : p.skeletonWidth != null ? p.skeletonWidth : p.width != null ? p.width : style && style.width,
+          align: p.align,
+          numeric: p.numeric,
+          card: p.card,
+          skeleton: p.skeleton
+        });
+    });
+  });
+  return out;
+}
 const Table = React.forwardRef(function Table2(props, ref) {
   const {
     caption,
@@ -61,10 +89,24 @@ const Table = React.forwardRef(function Table2(props, ref) {
     maxHeight,
     stackStyle,
     rowHeight,
+    loading,
+    loadingRows,
     className,
     children,
     ...rest
   } = props;
+  const skeletonCols = loading ? headerColumns(children) : null;
+  if (skeletonCols && !skeletonCols.length)
+    devWarnOnce(
+      "tbl-loading-cols",
+      "Table loading: no THead > Tr > Th found among its children, so there are no columns to draw. Put the THead directly inside Table (a function call, not your own component)."
+    );
+  const shownChildren = skeletonCols ? [
+    flat(children).filter(function(c) {
+      return React.isValidElement(c) && c.type === THead;
+    }),
+    skeletonBody(skeletonCols, loadingRows != null ? Math.max(0, loadingRows) : 5, !!stackBelow)
+  ] : children;
   const cards = !!stackBelow && stackStyle === "cards";
   if (maxHeight != null && caption == null && !rest["aria-label"] && !rest["aria-labelledby"])
     devWarnOnce(
@@ -118,10 +160,11 @@ const Table = React.forwardRef(function Table2(props, ref) {
       ),
       style: maxHeight != null ? { maxHeight: typeof maxHeight === "number" ? maxHeight + "px" : maxHeight } : void 0,
       "data-density": density || pageDensity,
-      tabIndex: scrolls ? 0 : void 0,
-      role: scrolls && (caption != null || rest["aria-label"] || rest["aria-labelledby"]) ? "region" : void 0,
-      "aria-labelledby": scrolls ? caption != null ? capId : rest["aria-labelledby"] : void 0,
-      "aria-label": scrolls && caption == null ? rest["aria-label"] : void 0
+      ...loading ? inertProps() : null,
+      tabIndex: scrolls && !loading ? 0 : void 0,
+      role: scrolls && !loading && (caption != null || rest["aria-label"] || rest["aria-labelledby"]) ? "region" : void 0,
+      "aria-labelledby": scrolls && !loading ? caption != null ? capId : rest["aria-labelledby"] : void 0,
+      "aria-label": scrolls && !loading && caption == null ? rest["aria-label"] : void 0
     },
     /* @__PURE__ */ React.createElement(
       "table",
@@ -134,13 +177,15 @@ const Table = React.forwardRef(function Table2(props, ref) {
           (align === "middle" || rowHeight === "density" && align !== "top") && "aura-tbl--middle",
           rowHeight === "density" && "aura-tbl--row-density",
           cards && "aura-tbl--cards",
+          loading && "aura-tbl--skeleton",
           className
         ),
         role: stackBelow ? "table" : void 0,
         ...rest
       },
       caption != null ? /* @__PURE__ */ React.createElement("caption", { id: capId, className: cx("aura-tbl__caption", captionHidden && "aura-sr-only") }, caption) : null,
-      labels ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: labels }, children) : outer ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: null }, children) : children
+      skeletonCols ? skeletonColgroup(skeletonCols) : null,
+      labels ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: labels }, shownChildren) : outer ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: null }, shownChildren) : shownChildren
     )
   );
   return cards ? /* @__PURE__ */ React.createElement(
@@ -194,7 +239,7 @@ function cellClass(base, p) {
   );
 }
 const Th = React.forwardRef(function Th2(props, ref) {
-  const { align, numeric, mono, className, scope, label, card, ...rest } = props;
+  const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, ...rest } = props;
   const stacked = React.useContext(StackLabels) != null;
   return /* @__PURE__ */ React.createElement(
     "th",
@@ -209,7 +254,7 @@ const Th = React.forwardRef(function Th2(props, ref) {
   );
 });
 const Td = React.forwardRef(function Td2(props, ref) {
-  const { align, numeric, mono, className, scope, label, card, ...rest } = props;
+  const { align, numeric, mono, className, scope, label, card, skeleton, skeletonWidth, ...rest } = props;
   const labels = React.useContext(StackLabels), col = React.useContext(ColumnIndex);
   const slot = labels && (card === "title" || card === "action") ? card : void 0;
   const shown = labels && !slot ? label != null ? label : col >= 0 ? labels[col] : void 0 : void 0;

package/dist/esm/TableSkeleton.js

@@ -0,0 +1,170 @@
+'use client';
+import * as React from "react";
+import { cx } from "./classes.js";
+const h = React.createElement;
+function inertProps() {
+  return { inert: parseInt(React.version, 10) >= 19 ? true : "", "aria-hidden": true };
+}
+function widthOf(w) {
+  return w == null || w === "" ? void 0 : typeof w === "number" ? w + "px" : w;
+}
+function skeletonColgroup(cols) {
+  return h(
+    "colgroup",
+    null,
+    cols.map(function(c, i) {
+      const w = widthOf(c.width);
+      return h("col", { key: i, style: w ? { width: w } : void 0 });
+    })
+  );
+}
+function placeholder(c) {
+  const s = c.skeleton || {};
+  if (s.kind === "pill") return h("span", { className: "aura-skel aura-skel--pill" });
+  if (s.kind === "action") return h("span", { className: cx("aura-skel aura-skel--action", s.touch && "is-touch") });
+  if (s.lines === 2)
+    return h(
+      "span",
+      { className: "aura-skel-lines" },
+      h("span", { className: "aura-skel aura-skel--text", style: { width: "100%" } }),
+      h("span", { className: "aura-skel aura-skel--text", style: { width: "60%" } })
+    );
+  return h("span", { className: "aura-skel aura-skel--text", style: { width: "80%" } });
+}
+function cellCls(base, c) {
+  const align = c.align || (c.numeric ? "end" : void 0);
+  return cx(base, align === "end" && "is-end", align === "center" && "is-center", c.numeric && "is-numeric");
+}
+function skeletonBody(cols, n, stacked) {
+  const rows = [];
+  for (let r = 0; r < n; r++)
+    rows.push(
+      h(
+        "tr",
+        { key: r, className: "aura-tbl__row aura-tbl__row--skeleton", role: stacked ? "row" : void 0 },
+        cols.map(function(c, i) {
+          const slot = stacked && (c.card === "title" || c.card === "action") ? c.card : void 0;
+          return h(
+            "td",
+            {
+              key: i,
+              className: cellCls("aura-tbl__td", c),
+              role: stacked ? "cell" : void 0,
+              "data-label": stacked && !slot && c.label ? c.label : void 0,
+              "data-card": slot
+            },
+            placeholder(c)
+          );
+        })
+      )
+    );
+  return h(
+    "tbody",
+    { key: "aura-skeleton", className: "aura-tbl__body", role: stacked ? "rowgroup" : void 0 },
+    rows
+  );
+}
+function tableWrapClass(p) {
+  return cx(
+    "aura-tbl-wrap",
+    p.stackBelow && "is-stackable",
+    p.bordered === false && "is-flush",
+    p.bleed && "aura-bleed-frame",
+    p.bleed && !p.cards && "aura-bleed",
+    p.bleed && p.bleedEnd && !p.cards && "aura-bleed-end"
+  );
+}
+function tableClass(p) {
+  return cx(
+    "aura-tbl",
+    p.stackBelow && "aura-tbl--stack-" + p.stackBelow,
+    (p.align === "middle" || p.rowHeight === "density" && p.align !== "top") && "aura-tbl--middle",
+    p.rowHeight === "density" && "aura-tbl--row-density",
+    p.cards && "aura-tbl--cards",
+    p.className
+  );
+}
+function cardsFrame(el, p) {
+  return p.cards ? h(
+    "div",
+    {
+      className: cx(
+        "aura-tbl-cards aura-tbl-cards--" + p.stackBelow,
+        p.bleed && "aura-bleed",
+        p.bleed && p.bleedEnd && "aura-bleed-end"
+      )
+    },
+    el
+  ) : el;
+}
+function TableSkeleton(props) {
+  const cols = props.columns || [];
+  const n = props.rows != null ? Math.max(0, props.rows) : 5;
+  const stacked = !!props.stackBelow;
+  const cards = stacked && props.stackStyle === "cards";
+  const head = h(
+    "thead",
+    { className: "aura-tbl__head", role: stacked ? "rowgroup" : void 0 },
+    h(
+      "tr",
+      { className: "aura-tbl__row", role: stacked ? "row" : void 0 },
+      cols.map(function(c, i) {
+        return h(
+          "th",
+          { key: i, scope: "col", className: cellCls("aura-tbl__th", c), role: stacked ? "columnheader" : void 0 },
+          c.label
+        );
+      })
+    )
+  );
+  const table = h(
+    "div",
+    Object.assign(
+      {
+        className: tableWrapClass({
+          stackBelow: props.stackBelow,
+          bordered: props.bordered,
+          bleed: props.bleed,
+          bleedEnd: props.bleedEnd,
+          cards
+        }),
+        "data-density": props.density || "comfortable"
+      },
+      inertProps()
+    ),
+    h(
+      "table",
+      {
+        className: cx(
+          tableClass({
+            stackBelow: props.stackBelow,
+            align: props.align,
+            rowHeight: props.rowHeight,
+            cards,
+            className: props.className
+          }),
+          "aura-tbl--skeleton"
+        ),
+        role: stacked ? "table" : void 0
+      },
+      skeletonColgroup(cols),
+      head,
+      skeletonBody(cols, n, stacked)
+    )
+  );
+  return cardsFrame(table, {
+    stackBelow: props.stackBelow,
+    bleed: props.bleed,
+    bleedEnd: props.bleedEnd,
+    cards
+  });
+}
+export {
+  TableSkeleton,
+  cardsFrame,
+  inertProps,
+  skeletonBody,
+  skeletonColgroup,
+  tableClass,
+  tableWrapClass
+};

package/dist/esm/index.js

@@ -42,6 +42,7 @@ import { AppShell } from "./AppShell.js";
 import { ActionBar } from "./ActionBar.js";
 import { Separator } from "./Separator.js";
 import { Table, THead, TBody, TFoot, Tr, Th, Td } from "./Table.js";
+import { TableSkeleton } from "./TableSkeleton.js";
 import { BottomNav } from "./BottomNav.js";
 import { useBreakpoint, useResponsive, breakpoints } from "./responsive.js";
 import { Surface } from "./Surface.js";
@@ -125,6 +126,7 @@ export {
   TFoot,
   THead,
   Table,
+  TableSkeleton,
   Tabs,
   Tag,
   Td,

package/dist/index.d.cts

@@ -1365,9 +1365,54 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	 * `rowHeight="auto"`. Content is centred on the row unless `align="top"`. Rows whose text wraps still grow (with the
 	 * smaller padding). Header and footer rows, and stacked rows (`stackBelow`), are unchanged. */
 	rowHeight?: "density" | undefined;
+	/** 5.52 (Chamber-OS 164): draw the table while its rows load — the head as given, then `loadingRows` placeholder
+	 * rows in the same columns (and, below `stackBelow`, the same cards). Each column's placeholder follows its header
+	 * cell's `skeleton` hint, width (`skeletonWidth`, else its `width`, else an even share) and `card` role. The whole
+	 * table is `aria-hidden` and `inert` meanwhile: announce the load in your own status line. TBody and TFoot children
+	 * are not rendered. For a Server Component (a route's loading.tsx) use `TableSkeleton` from `/server`. */
+	loading?: boolean | undefined;
+	/** Placeholder rows while `loading` (default 5). */
+	loadingRows?: number | undefined;
 	className?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 }
+/** 5.52 (Chamber-OS 164): what a loading column's placeholder cell looks like. */
+export interface TableSkeletonHint {
+	/** Text lines: 2 for a value over its caption. Default 1. */
+	lines?: 1 | 2 | undefined;
+	/** `text` (default) bars, a status `pill`, or an `action` block as tall as a small Button (44px on a phone card or a
+	 * touch screen with `touch`). */
+	kind?: "text" | "pill" | "action" | undefined;
+	/** An `action` block 44px below 640px and on a coarse pointer, as `touchHeight` buttons are. */
+	touch?: boolean | undefined;
+}
+/** 5.52 (Chamber-OS 164): one column of a `TableSkeleton` — the same facts a header cell gives a loading Table. */
+export interface TableSkeletonColumn {
+	/** Header text (and the stacked card's field label). */
+	label?: string | undefined;
+	/** Column width: a share such as `'22%'`, or px. Columns without one split what is left evenly. */
+	width?: string | number | undefined;
+	align?: "start" | "center" | "end" | undefined;
+	numeric?: boolean | undefined;
+	/** Its place in a stacked row: `title`, `action` or `field` (default), as on a Td. */
+	card?: "title" | "action" | "field" | undefined;
+	skeleton?: TableSkeletonHint | undefined;
+}
+/** 5.52 (Chamber-OS 164): a loading Table for Server Components. Same frame, density, stacking and cards as Table. */
+export interface TableSkeletonProps {
+	columns: TableSkeletonColumn[];
+	/** Placeholder rows (default 5). */
+	rows?: number | undefined;
+	density?: "comfortable" | "compact" | undefined;
+	stackBelow?: "sm" | "md" | undefined;
+	stackStyle?: "list" | "cards" | undefined;
+	bordered?: boolean | undefined;
+	bleed?: boolean | undefined;
+	bleedEnd?: boolean | undefined;
+	rowHeight?: "density" | undefined;
+	align?: "top" | "middle" | undefined;
+	className?: string | undefined;
+}
 export interface TableSectionProps extends React$1.HTMLAttributes<HTMLTableSectionElement> {
 	className?: string | undefined;
 }
@@ -1389,6 +1434,12 @@ export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableC
 	 * without a label; `action` sits at the end of that line at its natural size; `field` (default) is a labelled field,
 	 * two to a line under them. */
 	card?: "title" | "action" | "field" | undefined;
+	/** Th in the head only (5.52, Chamber-OS 164): what this column's placeholder cells look like while the Table is
+	 * `loading`. On a head cell, `card` also gives the placeholder cells their place in a stacked row. */
+	skeleton?: TableSkeletonHint | undefined;
+	/** Th in the head only (5.52): this column's width while loading — a share such as `'22%'` — when the loaded table
+	 * sizes it from its content. Default: the cell's `width`, else an even share. */
+	skeletonWidth?: string | number | undefined;
 	className?: string | undefined;
 }
 export interface ActionBarProps {
@@ -2168,6 +2219,9 @@ export declare const Tr: React$1.ForwardRefExoticComponent<TableRowProps & React
 export declare const Th: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
 /** Data cell. `numeric` right-aligns with tabular figures (money, counts). */
 export declare const Td: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
+/** A loading Table (5.52, Chamber-OS 164), for Server Components — e.g. a route's loading.tsx. `aria-hidden` and
+ * `inert`: announce the load in the page's own status line. */
+export declare function TableSkeleton(props: TableSkeletonProps): React$1.ReactElement;
 /** BottomNav — a phone tab bar: icon over a short label, a count or dot, the current page marked. Fixed to the bottom,
  * padded for the home indicator, with a spacer of the same height in the flow so nothing sits under it. Which
  * breakpoints show it is decided in CSS, so the server's HTML is already right and nothing shifts on hydration. */

package/dist/index.d.ts

@@ -1365,9 +1365,54 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	 * `rowHeight="auto"`. Content is centred on the row unless `align="top"`. Rows whose text wraps still grow (with the
 	 * smaller padding). Header and footer rows, and stacked rows (`stackBelow`), are unchanged. */
 	rowHeight?: "density" | undefined;
+	/** 5.52 (Chamber-OS 164): draw the table while its rows load — the head as given, then `loadingRows` placeholder
+	 * rows in the same columns (and, below `stackBelow`, the same cards). Each column's placeholder follows its header
+	 * cell's `skeleton` hint, width (`skeletonWidth`, else its `width`, else an even share) and `card` role. The whole
+	 * table is `aria-hidden` and `inert` meanwhile: announce the load in your own status line. TBody and TFoot children
+	 * are not rendered. For a Server Component (a route's loading.tsx) use `TableSkeleton` from `/server`. */
+	loading?: boolean | undefined;
+	/** Placeholder rows while `loading` (default 5). */
+	loadingRows?: number | undefined;
 	className?: string | undefined;
 	children?: React$1.ReactNode | undefined;
 }
+/** 5.52 (Chamber-OS 164): what a loading column's placeholder cell looks like. */
+export interface TableSkeletonHint {
+	/** Text lines: 2 for a value over its caption. Default 1. */
+	lines?: 1 | 2 | undefined;
+	/** `text` (default) bars, a status `pill`, or an `action` block as tall as a small Button (44px on a phone card or a
+	 * touch screen with `touch`). */
+	kind?: "text" | "pill" | "action" | undefined;
+	/** An `action` block 44px below 640px and on a coarse pointer, as `touchHeight` buttons are. */
+	touch?: boolean | undefined;
+}
+/** 5.52 (Chamber-OS 164): one column of a `TableSkeleton` — the same facts a header cell gives a loading Table. */
+export interface TableSkeletonColumn {
+	/** Header text (and the stacked card's field label). */
+	label?: string | undefined;
+	/** Column width: a share such as `'22%'`, or px. Columns without one split what is left evenly. */
+	width?: string | number | undefined;
+	align?: "start" | "center" | "end" | undefined;
+	numeric?: boolean | undefined;
+	/** Its place in a stacked row: `title`, `action` or `field` (default), as on a Td. */
+	card?: "title" | "action" | "field" | undefined;
+	skeleton?: TableSkeletonHint | undefined;
+}
+/** 5.52 (Chamber-OS 164): a loading Table for Server Components. Same frame, density, stacking and cards as Table. */
+export interface TableSkeletonProps {
+	columns: TableSkeletonColumn[];
+	/** Placeholder rows (default 5). */
+	rows?: number | undefined;
+	density?: "comfortable" | "compact" | undefined;
+	stackBelow?: "sm" | "md" | undefined;
+	stackStyle?: "list" | "cards" | undefined;
+	bordered?: boolean | undefined;
+	bleed?: boolean | undefined;
+	bleedEnd?: boolean | undefined;
+	rowHeight?: "density" | undefined;
+	align?: "top" | "middle" | undefined;
+	className?: string | undefined;
+}
 export interface TableSectionProps extends React$1.HTMLAttributes<HTMLTableSectionElement> {
 	className?: string | undefined;
 }
@@ -1389,6 +1434,12 @@ export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableC
 	 * without a label; `action` sits at the end of that line at its natural size; `field` (default) is a labelled field,
 	 * two to a line under them. */
 	card?: "title" | "action" | "field" | undefined;
+	/** Th in the head only (5.52, Chamber-OS 164): what this column's placeholder cells look like while the Table is
+	 * `loading`. On a head cell, `card` also gives the placeholder cells their place in a stacked row. */
+	skeleton?: TableSkeletonHint | undefined;
+	/** Th in the head only (5.52): this column's width while loading — a share such as `'22%'` — when the loaded table
+	 * sizes it from its content. Default: the cell's `width`, else an even share. */
+	skeletonWidth?: string | number | undefined;
 	className?: string | undefined;
 }
 export interface ActionBarProps {
@@ -2168,6 +2219,9 @@ export declare const Tr: React$1.ForwardRefExoticComponent<TableRowProps & React
 export declare const Th: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
 /** Data cell. `numeric` right-aligns with tabular figures (money, counts). */
 export declare const Td: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
+/** A loading Table (5.52, Chamber-OS 164), for Server Components — e.g. a route's loading.tsx. `aria-hidden` and
+ * `inert`: announce the load in the page's own status line. */
+export declare function TableSkeleton(props: TableSkeletonProps): React$1.ReactElement;
 /** BottomNav — a phone tab bar: icon over a short label, a count or dot, the current page marked. Fixed to the bottom,
  * padded for the home indicator, with a spacer of the same height in the flow so nothing sits under it. Which
  * breakpoints show it is decided in CSS, so the server's HTML is already right and nothing shifts on hydration. */