@smwb/ui-react 2.7.0 → 2.8.0

package/dist/components/dataDisplay/table/table.js

@@ -1,44 +1,48 @@
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/table/table.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                     */
-import { forwardRef as p } from "react";
+import { forwardRef as u, useState as _ } from "react";
 import r from "clsx";
-import n from "./tablePagination/tablePagination.js";
-const j = p(
-  ({ className: b, dense: t, hovered: o, children: i, paginationSettings: e, isLoading: w, stickyHeader: c, caption: m, stackBelow: s, ..._ }, d) => /* @__PURE__ */ l(
-    "div",
-    {
-      ref: d,
-      className: r(
-        "smwb-table__wrapper",
-        b,
-        {
-          "smwb-table__wrapper_loading": w
-        },
-        s && `smwb-table__wrapper_stack-${s}`
-      ),
-      ..._,
-      children: [
-        /* @__PURE__ */ a("div", { className: r("smwb-table__container", { "smwb-withPagination": !!e }), children: /* @__PURE__ */ l(
-          "table",
+import { ColumnLabels as v, TableLabelsContext as h, TableHeadContext as f, TableRowPlaceContext as x, TableColumnContext as P } from "./tableColumns.js";
+import C from "./tablePagination/tablePagination.js";
+const $ = u(
+  ({ className: m, dense: s, hovered: b, children: n, paginationSettings: l, isLoading: i, stickyHeader: d, caption: o, stackBelow: a, ...c }, w) => {
+    const [p] = _(() => new v());
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: w,
+        className: r(
+          "smwb-table__wrapper",
+          m,
           {
-            className: r("smwb-table", {
-              "smwb-dense": t,
-              "smwb-hovered": o,
-              "smwb-table_sticky-header": c
-            }),
-            children: [
-              m != null && /* @__PURE__ */ a("caption", { className: "smwb-table__caption", children: m }),
-              i
-            ]
-          }
-        ) }),
-        !!e && /* @__PURE__ */ a(n, { ...e })
-      ]
-    }
-  )
+            "smwb-table__wrapper_loading": i
+          },
+          a && `smwb-table__wrapper_stack-${a}`
+        ),
+        ...c,
+        children: [
+          /* @__PURE__ */ e("div", { className: r("smwb-table__container", { "smwb-withPagination": !!l }), children: /* @__PURE__ */ t(
+            "table",
+            {
+              className: r("smwb-table", {
+                "smwb-dense": s,
+                "smwb-hovered": b,
+                "smwb-table_sticky-header": d
+              }),
+              children: [
+                o != null && /* @__PURE__ */ e("caption", { className: "smwb-table__caption", children: o }),
+                /* @__PURE__ */ e(h.Provider, { value: a ? p : null, children: /* @__PURE__ */ e(f.Provider, { value: !1, children: /* @__PURE__ */ e(x.Provider, { value: null, children: /* @__PURE__ */ e(P.Provider, { value: null, children: n }) }) }) })
+              ]
+            }
+          ) }),
+          !!l && /* @__PURE__ */ e(C, { ...l })
+        ]
+      }
+    );
+  }
 );
 export {
-  j as default
+  $ as default
 };
 //# sourceMappingURL=table.js.map

package/dist/components/dataDisplay/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../../src/components/dataDisplay/table/table.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren, ReactNode, forwardRef } from \"react\";\nimport cn from \"clsx\";\nimport { TablePagination, TablePaginationProps } from \"./index\";\n\nexport interface TableProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  dense?: boolean;\n  isLoading?: boolean;\n  hovered?: boolean;\n  /** Pins the table header while the body scrolls. */\n  stickyHeader?: boolean;\n  /** Optional accessible caption rendered for screen readers. */\n  caption?: ReactNode;\n  /**\n   * Show each row as a card — cells one under another, each with its column's\n   * label — while the table's container is narrower than this breakpoint:\n   * `sm` (420px), `md` (768px) or `lg` (1024px). A container query: the space\n   * the table has decides, not the window. Labels come from `TableCell label`.\n   */\n  stackBelow?: \"sm\" | \"md\" | \"lg\";\n  paginationSettings?: TablePaginationProps;\n}\n\nconst Table = forwardRef<HTMLDivElement, PropsWithChildren<TableProps>>(\n  (\n    { className, dense, hovered, children, paginationSettings, isLoading, stickyHeader, caption, stackBelow, ...props },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"smwb-table__wrapper\",\n          className,\n          {\n            [\"smwb-table__wrapper_loading\"]: isLoading,\n          },\n          stackBelow && `smwb-table__wrapper_stack-${stackBelow}`\n        )}\n        {...props}\n      >\n        <div className={cn(\"smwb-table__container\", { \"smwb-withPagination\": !!paginationSettings })}>\n          <table\n            className={cn(\"smwb-table\", {\n              \"smwb-dense\": dense,\n              [\"smwb-hovered\"]: hovered,\n              \"smwb-table_sticky-header\": stickyHeader,\n            })}\n          >\n            {caption != null && <caption className=\"smwb-table__caption\">{caption}</caption>}\n            {children}\n          </table>\n        </div>\n        {!!paginationSettings && <TablePagination {...paginationSettings} />}\n      </div>\n    );\n  }\n);\n\nexport default Table;\n"],"names":["Table","forwardRef","className","dense","hovered","children","paginationSettings","isLoading","stickyHeader","caption","stackBelow","props","ref","jsxs","cn","jsx","TablePagination"],"mappings":";;;;;;AAyBA,MAAMA,IAAQC;AAAA,EACZ,CACE,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,oBAAAC,GAAoB,WAAAC,GAAW,cAAAC,GAAc,SAAAC,GAAS,YAAAC,GAAY,GAAGC,EAAA,GAC5GC,MAGE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAZ;AAAA,QACA;AAAA,UACG,+BAAgCK;AAAA,QAAA;AAAA,QAEnCG,KAAc,6BAA6BA,CAAU;AAAA,MAAA;AAAA,MAEtD,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWD,EAAG,yBAAyB,EAAE,uBAAuB,CAAC,CAACR,GAAoB,GACzF,UAAA,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAG,cAAc;AAAA,cAC1B,cAAcX;AAAA,cACb,gBAAiBC;AAAA,cAClB,4BAA4BI;AAAA,YAAA,CAC7B;AAAA,YAEA,UAAA;AAAA,cAAAC,KAAW,QAAQ,gBAAAM,EAAC,WAAA,EAAQ,WAAU,uBAAuB,UAAAN,GAAQ;AAAA,cACrEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,QACC,CAAC,CAACC,KAAsB,gBAAAS,EAACC,GAAA,EAAiB,GAAGV,EAAA,CAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI1E;"}
+{"version":3,"file":"table.js","sources":["../../../../src/components/dataDisplay/table/table.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren, ReactNode, forwardRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { TablePagination, TablePaginationProps } from \"./index\";\nimport {\n  ColumnLabels,\n  TableColumnContext,\n  TableHeadContext,\n  TableLabelsContext,\n  TableRowPlaceContext,\n} from \"./tableColumns\";\n\nexport interface TableProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  dense?: boolean;\n  isLoading?: boolean;\n  hovered?: boolean;\n  /** Pins the table header while the body scrolls. */\n  stickyHeader?: boolean;\n  /** Optional accessible caption rendered for screen readers. */\n  caption?: ReactNode;\n  /**\n   * Show each row as a card — cells one under another, each with its column's\n   * label — while the table's container is narrower than this breakpoint:\n   * `sm` (420px), `md` (768px) or `lg` (1024px). A container query: the space\n   * the table has decides, not the window.\n   *\n   * A cell's label is its `TableCell label`, or else the label of the head cell\n   * of its column: the head cell's `label`, or the text of its content. Columns\n   * count as in HTML: by position in the row, with `colSpan`, after the columns\n   * that `rowSpan` cells of the rows above take in the same head or body. A cell\n   * spanning several columns takes no label from the head and fills the card's\n   * width, and a head cell spanning several columns labels none of them. With\n   * several head rows, the lowest head cell over a column names it.\n   *\n   * The columns come from the elements written: rows written as `TableRow` in\n   * `TableHead` or `TableBody`, and cells in a row (arrays and fragments\n   * included). A component that renders a row counts as a row whose cells span\n   * no rows down, and a component that renders cells counts as one cell, with\n   * its own `colSpan` and `rowSpan`: give the cells after such a component, or\n   * the component's own cells, a `label`.\n   */\n  stackBelow?: \"sm\" | \"md\" | \"lg\";\n  paginationSettings?: TablePaginationProps;\n}\n\nconst Table = forwardRef<HTMLDivElement, PropsWithChildren<TableProps>>(\n  (\n    { className, dense, hovered, children, paginationSettings, isLoading, stickyHeader, caption, stackBelow, ...props },\n    ref\n  ) => {\n    const [labels] = useState(() => new ColumnLabels());\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"smwb-table__wrapper\",\n          className,\n          {\n            [\"smwb-table__wrapper_loading\"]: isLoading,\n          },\n          stackBelow && `smwb-table__wrapper_stack-${stackBelow}`\n        )}\n        {...props}\n      >\n        <div className={cn(\"smwb-table__container\", { \"smwb-withPagination\": !!paginationSettings })}>\n          <table\n            className={cn(\"smwb-table\", {\n              \"smwb-dense\": dense,\n              [\"smwb-hovered\"]: hovered,\n              \"smwb-table_sticky-header\": stickyHeader,\n            })}\n          >\n            {caption != null && <caption className=\"smwb-table__caption\">{caption}</caption>}\n            {/* A table inside a cell of another counts its own rows and cells. */}\n            <TableLabelsContext.Provider value={stackBelow ? labels : null}>\n              <TableHeadContext.Provider value={false}>\n                <TableRowPlaceContext.Provider value={null}>\n                  <TableColumnContext.Provider value={null}>{children}</TableColumnContext.Provider>\n                </TableRowPlaceContext.Provider>\n              </TableHeadContext.Provider>\n            </TableLabelsContext.Provider>\n          </table>\n        </div>\n        {!!paginationSettings && <TablePagination {...paginationSettings} />}\n      </div>\n    );\n  }\n);\n\nexport default Table;\n"],"names":["Table","forwardRef","className","dense","hovered","children","paginationSettings","isLoading","stickyHeader","caption","stackBelow","props","ref","labels","useState","ColumnLabels","jsxs","cn","jsx","TableLabelsContext","TableHeadContext","TableRowPlaceContext","TableColumnContext","TablePagination"],"mappings":";;;;;;;AA+CA,MAAMA,IAAQC;AAAA,EACZ,CACE,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,oBAAAC,GAAoB,WAAAC,GAAW,cAAAC,GAAc,SAAAC,GAAS,YAAAC,GAAY,GAAGC,EAAA,GAC5GC,MACG;AACH,UAAM,CAACC,CAAM,IAAIC,EAAS,MAAM,IAAIC,GAAc;AAClD,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAJ;AAAA,QACA,WAAWK;AAAA,UACT;AAAA,UACAf;AAAA,UACA;AAAA,YACG,+BAAgCK;AAAA,UAAA;AAAA,UAEnCG,KAAc,6BAA6BA,CAAU;AAAA,QAAA;AAAA,QAEtD,GAAGC;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAG,yBAAyB,EAAE,uBAAuB,CAAC,CAACX,GAAoB,GACzF,UAAA,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,EAAG,cAAc;AAAA,gBAC1B,cAAcd;AAAA,gBACb,gBAAiBC;AAAA,gBAClB,4BAA4BI;AAAA,cAAA,CAC7B;AAAA,cAEA,UAAA;AAAA,gBAAAC,KAAW,QAAQ,gBAAAS,EAAC,WAAA,EAAQ,WAAU,uBAAuB,UAAAT,GAAQ;AAAA,gBAEtE,gBAAAS,EAACC,EAAmB,UAAnB,EAA4B,OAAOT,IAAaG,IAAS,MACxD,UAAA,gBAAAK,EAACE,EAAiB,UAAjB,EAA0B,OAAO,IAChC,UAAA,gBAAAF,EAACG,EAAqB,UAArB,EAA8B,OAAO,MACpC,UAAA,gBAAAH,EAACI,EAAmB,UAAnB,EAA4B,OAAO,MAAO,UAAAjB,EAAA,CAAS,EAAA,CACtD,GACF,EAAA,CACF;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,UACC,CAAC,CAACC,KAAsB,gBAAAY,EAACK,GAAA,EAAiB,GAAGjB,EAAA,CAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxE;AACF;"}

package/dist/components/dataDisplay/table/tableBody.js

@@ -1,7 +1,13 @@
-import { jsx as a } from "react/jsx-runtime";
-import e from "clsx";
-const b = ({ children: o, className: t, ...r }) => /* @__PURE__ */ a("tbody", { ...r, className: e("smwb-table__body", t), children: o });
+import { jsx as m } from "react/jsx-runtime";
+import { useContext as a } from "react";
+import l from "clsx";
+import { TableLabelsContext as n, useRowPlaces as b, withRows as c } from "./tableColumns.js";
+import i from "./tableRow.js";
+const x = ({ children: o, className: t, ...e }) => {
+  const r = a(n) != null, s = b();
+  return /* @__PURE__ */ m("tbody", { ...e, className: l("smwb-table__body", t), children: c(o, r, i, s) });
+};
 export {
-  b as default
+  x as default
 };
 //# sourceMappingURL=tableBody.js.map

package/dist/components/dataDisplay/table/tableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableBody.js","sources":["../../../../src/components/dataDisplay/table/tableBody.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  className?: string;\n}\n\nconst TableBody = ({ children, className, ...props }: PropsWithChildren<TableBodyProps>) => {\n  return (\n    <tbody {...props} className={cn(\"smwb-table__body\", className)}>\n      {children}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n"],"names":["TableBody","children","className","props","jsx","cn"],"mappings":";;AAOA,MAAMA,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,QAEzC,gBAAAC,EAAC,WAAO,GAAGD,GAAO,WAAWE,EAAG,oBAAoBH,CAAS,GAC1D,UAAAD,GACH;"}
+{"version":3,"file":"tableBody.js","sources":["../../../../src/components/dataDisplay/table/tableBody.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren, useContext } from \"react\";\nimport cn from \"clsx\";\nimport { TableLabelsContext, useRowPlaces, withRows } from \"./tableColumns\";\nimport TableRow from \"./tableRow\";\n\nexport interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {\n  className?: string;\n}\n\nconst TableBody = ({ children, className, ...props }: PropsWithChildren<TableBodyProps>) => {\n  // In a stacked table each row learns the columns that `rowSpan` cells above\n  // it take, so its cells find their columns' labels.\n  const stacked = useContext(TableLabelsContext) != null;\n  const keep = useRowPlaces();\n  return (\n    <tbody {...props} className={cn(\"smwb-table__body\", className)}>\n      {withRows(children, stacked, TableRow, keep)}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n"],"names":["TableBody","children","className","props","stacked","useContext","TableLabelsContext","keep","useRowPlaces","jsx","cn","withRows","TableRow"],"mappings":";;;;;AASA,MAAMA,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,QAA+C;AAG1F,QAAMC,IAAUC,EAAWC,CAAkB,KAAK,MAC5CC,IAAOC,EAAA;AACb,SACE,gBAAAC,EAAC,SAAA,EAAO,GAAGN,GAAO,WAAWO,EAAG,oBAAoBR,CAAS,GAC1D,UAAAS,EAASV,GAAUG,GAASQ,GAAUL,CAAI,GAC7C;AAEJ;"}

package/dist/components/dataDisplay/table/tableCell.d.ts

@@ -2,8 +2,16 @@ import { PropsWithChildren, TdHTMLAttributes } from "react";
 export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
     className?: string;
     cellAlign?: "left" | "right" | "center";
-    /** The column's name, shown next to the value when the table stacks rows as cards (`Table stackBelow`). */
-    label?: string;
+    /**
+     * The column's name, shown next to the value when the table stacks rows as
+     * cards (`Table stackBelow`). Without it, the cell takes the label of its
+     * column's head cell; `false` keeps the cell unlabelled, so it fills the
+     * card's width (an action, a sub-row). A caller's own `data-label` counts as a
+     * given label too.
+     */
+    label?: string | false;
+    /** The cell's label written by hand, as the attribute the stacked layout shows; `label` replaces it. */
+    "data-label"?: string;
 }
 declare const TableCell: ({ children, cellAlign, className, label, ...props }: PropsWithChildren<TableCellProps>) => import("react/jsx-runtime").JSX.Element;
 export default TableCell;

package/dist/components/dataDisplay/table/tableCell.js

@@ -1,16 +1,23 @@
-import { jsx as r } from "react/jsx-runtime";
-import m from "clsx";
-const c = ({ children: t, cellAlign: e = "left", className: a, label: l, ...o }) => /* @__PURE__ */ r(
-  "td",
-  {
-    ...o,
-    className: m("smwb-table__cell", a),
-    align: e || "left",
-    ...l !== void 0 && { "data-label": l },
-    children: t
-  }
-);
+import { jsx as x } from "react/jsx-runtime";
+import { useContext as n, useSyncExternalStore as C } from "react";
+import S from "clsx";
+import { TableLabelsContext as p, TableColumnContext as v, TableHeadContext as L, cellSpan as T } from "./tableColumns.js";
+const H = () => () => {
+}, j = ({ children: m, cellAlign: i = "left", className: b, label: t, ...e }) => {
+  var d;
+  const o = e["data-label"], a = n(p), l = n(v), u = n(L), s = a != null && l != null && !u && t === void 0 && o === void 0 && T(e.colSpan) === 1, c = () => s ? a.get(l.column) : void 0, f = C(s ? a.subscribe : H, c, c), r = t === !1 ? o : (d = t != null ? t : o) != null ? d : f;
+  return /* @__PURE__ */ x(
+    "td",
+    {
+      ...e,
+      className: S("smwb-table__cell", b),
+      align: i || "left",
+      ...r !== void 0 && { "data-label": r },
+      children: m
+    }
+  );
+};
 export {
-  c as default
+  j as default
 };
 //# sourceMappingURL=tableCell.js.map

package/dist/components/dataDisplay/table/tableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableCell.js","sources":["../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, TdHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /** The column's name, shown next to the value when the table stacks rows as cards (`Table stackBelow`). */\n  label?: string;\n}\n\nconst TableCell = ({ children, cellAlign = \"left\", className, label, ...props }: PropsWithChildren<TableCellProps>) => {\n  return (\n    <td\n      {...props}\n      className={cn(\"smwb-table__cell\", className)}\n      align={cellAlign || \"left\"}\n      // Only a given label sets data-label: without one, a caller's own\n      // data-label (the way to label cells by hand) must survive, as in Solid.\n      {...(label !== undefined && { \"data-label\": label })}\n    >\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["TableCell","children","cellAlign","className","label","props","jsx","cn"],"mappings":";;AAUA,MAAMA,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,IAAY,QAAQ,WAAAC,GAAW,OAAAC,GAAO,GAAGC,QAEpE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,WAAWE,EAAG,oBAAoBJ,CAAS;AAAA,IAC3C,OAAOD,KAAa;AAAA,IAGnB,GAAIE,MAAU,UAAa,EAAE,cAAcA,EAAA;AAAA,IAE3C,UAAAH;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"tableCell.js","sources":["../../../../src/components/dataDisplay/table/tableCell.tsx"],"sourcesContent":["import React, { PropsWithChildren, TdHTMLAttributes, useContext, useSyncExternalStore } from \"react\";\nimport cn from \"clsx\";\nimport { TableColumnContext, TableHeadContext, TableLabelsContext, cellSpan } from \"./tableColumns\";\n\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  className?: string;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  /**\n   * The column's name, shown next to the value when the table stacks rows as\n   * cards (`Table stackBelow`). Without it, the cell takes the label of its\n   * column's head cell; `false` keeps the cell unlabelled, so it fills the\n   * card's width (an action, a sub-row). A caller's own `data-label` counts as a\n   * given label too.\n   */\n  label?: string | false;\n  /** The cell's label written by hand, as the attribute the stacked layout shows; `label` replaces it. */\n  \"data-label\"?: string;\n}\n\nconst noSubscribe = () => () => {};\n\nconst TableCell = ({ children, cellAlign = \"left\", className, label, ...props }: PropsWithChildren<TableCellProps>) => {\n  const ownDataLabel = props[\"data-label\"];\n  const labels = useContext(TableLabelsContext);\n  const place = useContext(TableColumnContext);\n  const inHead = useContext(TableHeadContext);\n  // Only a body cell of a stacked table, with no label of its own and one column\n  // wide, looks its label up in the head.\n  const fromHead =\n    labels != null &&\n    place != null &&\n    !inHead &&\n    label === undefined &&\n    ownDataLabel === undefined &&\n    cellSpan(props.colSpan) === 1;\n  const read = () => (fromHead ? labels.get(place.column) : undefined);\n  const headLabel = useSyncExternalStore(fromHead ? labels.subscribe : noSubscribe, read, read);\n  const dataLabel = label === false ? ownDataLabel : (label ?? ownDataLabel ?? headLabel);\n\n  return (\n    <td\n      {...props}\n      className={cn(\"smwb-table__cell\", className)}\n      align={cellAlign || \"left\"}\n      // A caller's own data-label (the way to label cells by hand) survives\n      // unless a label replaces it, as in Solid.\n      {...(dataLabel !== undefined && { \"data-label\": dataLabel })}\n    >\n      {children}\n    </td>\n  );\n};\n\nexport default TableCell;\n"],"names":["noSubscribe","TableCell","children","cellAlign","className","label","props","ownDataLabel","labels","useContext","TableLabelsContext","place","TableColumnContext","inHead","TableHeadContext","fromHead","cellSpan","read","headLabel","useSyncExternalStore","dataLabel","_a","jsx","cn"],"mappings":";;;;AAmBA,MAAMA,IAAc,MAAM,MAAM;AAAC,GAE3BC,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,IAAY,QAAQ,WAAAC,GAAW,OAAAC,GAAO,GAAGC,QAA+C;;AACrH,QAAMC,IAAeD,EAAM,YAAY,GACjCE,IAASC,EAAWC,CAAkB,GACtCC,IAAQF,EAAWG,CAAkB,GACrCC,IAASJ,EAAWK,CAAgB,GAGpCC,IACJP,KAAU,QACVG,KAAS,QACT,CAACE,KACDR,MAAU,UACVE,MAAiB,UACjBS,EAASV,EAAM,OAAO,MAAM,GACxBW,IAAO,MAAOF,IAAWP,EAAO,IAAIG,EAAM,MAAM,IAAI,QACpDO,IAAYC,EAAqBJ,IAAWP,EAAO,YAAYR,GAAaiB,GAAMA,CAAI,GACtFG,IAAYf,MAAU,KAAQE,KAAgBc,IAAAhB,KAAA,OAAAA,IAASE,MAAT,OAAAc,IAAyBH;AAE7E,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGhB;AAAA,MACJ,WAAWiB,EAAG,oBAAoBnB,CAAS;AAAA,MAC3C,OAAOD,KAAa;AAAA,MAGnB,GAAIiB,MAAc,UAAa,EAAE,cAAcA,EAAA;AAAA,MAE/C,UAAAlB;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/dataDisplay/table/tableColumns.d.ts

@@ -0,0 +1,83 @@
+import { ComponentType, ReactNode } from "react";
+/**
+ * The column labels of a stacked table (`Table stackBelow`): its head cells
+ * publish them by column position, and the body cells of each column read them.
+ * A column may have a head cell in several head rows; the lowest row's wins,
+ * whatever order the cells wrote in, so each label is kept by its head row.
+ *
+ * Head cells write while they render, so cells rendered after them — the body
+ * follows the head in the markup — read the labels in the same pass: on the
+ * server too, and while hydrating, so the server markup has them and the client
+ * makes the same. A change after that reaches the body cells through `notify`,
+ * which head cells call from an effect.
+ *
+ * A render that never commits (an interrupted transition) leaves what it wrote
+ * until the head cell of that row and column writes again. That is the price of
+ * labels in the server markup. The next committed render of the head puts the
+ * committed labels back in the store, but notifies only if the committed label
+ * changed since its last commit: otherwise the body cells show it once they
+ * render on their own.
+ */
+export declare class ColumnLabels {
+    private readonly labels;
+    private readonly listeners;
+    private changed;
+    get(column: number): string | undefined;
+    set(column: number, row: number, owner: string, label: string | undefined): void;
+    /** Drops the label of the column's head cell in `row`, unless another head cell has taken that place since. */
+    remove(column: number, row: number, owner: string): void;
+    notify(): void;
+    subscribe: (listener: () => void) => (() => void);
+}
+/** The column labels of the table around, while it stacks rows (`stackBelow`); null otherwise. */
+export declare const TableLabelsContext: import("react").Context<ColumnLabels | null>;
+/** Whether the cells around are in the table's head. */
+export declare const TableHeadContext: import("react").Context<boolean>;
+/** Where a cell sits: the column it starts at and its row within the head or body, both from 0. */
+export interface CellPlace {
+    column: number;
+    row: number;
+}
+/** A row's place in its head or body: its index, and the columns that cells of the rows above span into. */
+export interface RowPlace {
+    row: number;
+    taken: ReadonlySet<number>;
+}
+/** The cell's place in a stacked table; null in a table that doesn't stack. */
+export declare const TableColumnContext: import("react").Context<CellPlace | null>;
+/** The row's place in its head or body, in a stacked table; null otherwise or outside a head or body. */
+export declare const TableRowPlaceContext: import("react").Context<RowPlace | null>;
+/** How many columns a cell spans, from its `colSpan`. */
+export declare const cellSpan: (colSpan: number | string | undefined) => number;
+/** How many rows a cell spans, from its `rowSpan`: `0` spans the rest of its head or body, as in HTML. */
+export declare const cellRowSpan: (rowSpan: number | string | undefined) => number;
+/** Keeps a place object of the last render while it is equal to this render's. */
+export type KeepPlace<T> = (index: number, place: T) => T;
+export declare const useRowPlaces: () => KeepPlace<RowPlace>;
+export declare const useCellPlaces: () => KeepPlace<CellPlace>;
+/**
+ * Gives each row of a head or body its place, so that its cells start after
+ * the columns that `rowSpan` cells of the rows above take. Rows count in the
+ * order they are written, the ones in arrays and fragments included. Only the
+ * cells of a `rowType` element written there are seen: a component that renders
+ * a row counts as a row whose cells span no further down.
+ *
+ * Every row is wrapped whether or not the table stacks, so a change of
+ * `stackBelow` keeps the rows and their state.
+ */
+export declare function withRows(children: ReactNode, stacked: boolean, rowType: ComponentType<never>, keep: KeepPlace<RowPlace>): ReactNode;
+/**
+ * Gives each cell of a row its place. Cells count in the order they are written,
+ * the ones in arrays and fragments included; any other element — a component
+ * that renders a cell — counts as one cell, with its own `colSpan` and `rowSpan`.
+ * Each cell is wrapped whether or not the table stacks, so a change of
+ * `stackBelow` keeps the cells' content and its state.
+ */
+export declare function withColumns(children: ReactNode, stacked: boolean, place: RowPlace | null, keep: KeepPlace<CellPlace>): ReactNode;
+/**
+ * The text of a header's content: its strings and numbers, those inside elements
+ * included, with white space collapsed. A component that makes its text itself
+ * (a translated message, an icon) gives none: name such a column by
+ * `TableHeadCell label`.
+ */
+export declare function textOf(node: ReactNode): string;

package/dist/components/dataDisplay/table/tableColumns.js

@@ -0,0 +1,112 @@
+import { jsx as m } from "react/jsx-runtime";
+import { createContext as u, useRef as b, Children as x, isValidElement as p, Fragment as C, cloneElement as y } from "react";
+class j {
+  constructor() {
+    this.labels = /* @__PURE__ */ new Map(), this.listeners = /* @__PURE__ */ new Set(), this.changed = !1, this.subscribe = (t) => (this.listeners.add(t), () => {
+      this.listeners.delete(t);
+    });
+  }
+  get(t) {
+    var r;
+    const e = this.labels.get(t);
+    if (!e) return;
+    let o = -1;
+    for (const s of e.keys()) s > o && (o = s);
+    return (r = e.get(o)) == null ? void 0 : r.label;
+  }
+  set(t, e, o, r) {
+    let s = this.labels.get(t);
+    s || (s = /* @__PURE__ */ new Map(), this.labels.set(t, s));
+    const l = s.get(e);
+    (l == null ? void 0 : l.owner) === o && l.label === r || (s.set(e, { owner: o, label: r }), this.changed = !0);
+  }
+  /** Drops the label of the column's head cell in `row`, unless another head cell has taken that place since. */
+  remove(t, e, o) {
+    var s;
+    const r = this.labels.get(t);
+    ((s = r == null ? void 0 : r.get(e)) == null ? void 0 : s.owner) === o && (r.delete(e), r.size || this.labels.delete(t), this.changed = !0);
+  }
+  notify() {
+    this.changed && (this.changed = !1, this.listeners.forEach((t) => t()));
+  }
+}
+const A = u(null), L = u(!1), k = u(null), P = u(null), M = (n) => Math.max(1, Math.floor(Number(n)) || 1), R = (n) => {
+  if (n === void 0 || n === "") return 1;
+  const t = Math.floor(Number(n));
+  return t === 0 ? 1 / 0 : Math.max(1, t) || 1;
+};
+function w(n, t, e) {
+  let o = 0;
+  return n.map((r) => {
+    var i;
+    for (; ((i = e[o]) != null ? i : 0) > t; ) o++;
+    const s = o, l = M(r.colSpan), c = t + R(r.rowSpan);
+    for (let a = 0; a < l; a++) e[s + a] = c;
+    return o += l, s;
+  });
+}
+const E = (n, t) => n.row === t.row && n.taken.size === t.taken.size && [...n.taken].every((e) => t.taken.has(e)), S = (n, t) => n.column === t.column && n.row === t.row;
+function d(n) {
+  const t = b([]), e = t.current, o = [];
+  return t.current = o, (r, s) => {
+    const l = e[r], c = l !== void 0 && n(l, s) ? l : s;
+    return o[r] = c, c;
+  };
+}
+const N = () => d(E), O = () => d(S);
+function f(n, t) {
+  return x.map(n, (e) => p(e) ? e.type === C ? y(
+    e,
+    void 0,
+    f(e.props.children, t)
+  ) : t(e) : e);
+}
+function v(n) {
+  const t = [];
+  return f(n, (e) => (t.push(e), null)), t;
+}
+function F(n, t, e, o) {
+  const r = [];
+  let s = 0;
+  return f(n, (l) => {
+    let c = null;
+    if (t) {
+      const i = s++;
+      c = o(i, { row: i, taken: new Set(r.flatMap((h, g) => h > i ? [g] : [])) });
+      const a = l.type === e ? v(l.props.children).map(
+        (h) => h.props
+      ) : [];
+      w(a, i, r);
+    }
+    return /* @__PURE__ */ m(P.Provider, { value: c, children: l });
+  });
+}
+function H(n, t, e, o) {
+  var c;
+  const r = (c = e == null ? void 0 : e.row) != null ? c : 0, s = [];
+  e == null || e.taken.forEach((i) => s[i] = r + 1);
+  let l = 0;
+  return f(n, (i) => {
+    const a = t ? o(l++, { column: w([i.props], r, s)[0], row: r }) : null;
+    return /* @__PURE__ */ m(k.Provider, { value: a, children: i });
+  });
+}
+function I(n) {
+  const t = (e) => typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(t).join("") : p(e) ? t(e.props.children) : "";
+  return t(n).replace(/\s+/g, " ").trim();
+}
+export {
+  j as ColumnLabels,
+  k as TableColumnContext,
+  L as TableHeadContext,
+  A as TableLabelsContext,
+  P as TableRowPlaceContext,
+  R as cellRowSpan,
+  M as cellSpan,
+  I as textOf,
+  O as useCellPlaces,
+  N as useRowPlaces,
+  H as withColumns,
+  F as withRows
+};
+//# sourceMappingURL=tableColumns.js.map

package/dist/components/dataDisplay/table/tableColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableColumns.js","sources":["../../../../src/components/dataDisplay/table/tableColumns.tsx"],"sourcesContent":["import {\n  Children,\n  ComponentType,\n  Fragment,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useRef,\n} from \"react\";\n\n/**\n * The column labels of a stacked table (`Table stackBelow`): its head cells\n * publish them by column position, and the body cells of each column read them.\n * A column may have a head cell in several head rows; the lowest row's wins,\n * whatever order the cells wrote in, so each label is kept by its head row.\n *\n * Head cells write while they render, so cells rendered after them — the body\n * follows the head in the markup — read the labels in the same pass: on the\n * server too, and while hydrating, so the server markup has them and the client\n * makes the same. A change after that reaches the body cells through `notify`,\n * which head cells call from an effect.\n *\n * A render that never commits (an interrupted transition) leaves what it wrote\n * until the head cell of that row and column writes again. That is the price of\n * labels in the server markup. The next committed render of the head puts the\n * committed labels back in the store, but notifies only if the committed label\n * changed since its last commit: otherwise the body cells show it once they\n * render on their own.\n */\nexport class ColumnLabels {\n  private readonly labels = new Map<number, Map<number, { owner: string; label: string | undefined }>>();\n  private readonly listeners = new Set<() => void>();\n  private changed = false;\n\n  get(column: number): string | undefined {\n    const rows = this.labels.get(column);\n    if (!rows) return undefined;\n    let row = -1;\n    for (const at of rows.keys()) if (at > row) row = at;\n    return rows.get(row)?.label;\n  }\n\n  set(column: number, row: number, owner: string, label: string | undefined): void {\n    let rows = this.labels.get(column);\n    if (!rows) {\n      rows = new Map<number, { owner: string; label: string | undefined }>();\n      this.labels.set(column, rows);\n    }\n    const prev = rows.get(row);\n    if (prev?.owner === owner && prev.label === label) return;\n    rows.set(row, { owner, label });\n    this.changed = true;\n  }\n\n  /** Drops the label of the column's head cell in `row`, unless another head cell has taken that place since. */\n  remove(column: number, row: number, owner: string): void {\n    const rows = this.labels.get(column);\n    if (rows?.get(row)?.owner !== owner) return;\n    rows.delete(row);\n    if (!rows.size) this.labels.delete(column);\n    this.changed = true;\n  }\n\n  notify(): void {\n    if (!this.changed) return;\n    this.changed = false;\n    this.listeners.forEach((listener) => listener());\n  }\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n}\n\n/** The column labels of the table around, while it stacks rows (`stackBelow`); null otherwise. */\nexport const TableLabelsContext = createContext<ColumnLabels | null>(null);\n\n/** Whether the cells around are in the table's head. */\nexport const TableHeadContext = createContext(false);\n\n/** Where a cell sits: the column it starts at and its row within the head or body, both from 0. */\nexport interface CellPlace {\n  column: number;\n  row: number;\n}\n\n/** A row's place in its head or body: its index, and the columns that cells of the rows above span into. */\nexport interface RowPlace {\n  row: number;\n  taken: ReadonlySet<number>;\n}\n\n/** The cell's place in a stacked table; null in a table that doesn't stack. */\nexport const TableColumnContext = createContext<CellPlace | null>(null);\n\n/** The row's place in its head or body, in a stacked table; null otherwise or outside a head or body. */\nexport const TableRowPlaceContext = createContext<RowPlace | null>(null);\n\n/** How many columns a cell spans, from its `colSpan`. */\nexport const cellSpan = (colSpan: number | string | undefined): number => Math.max(1, Math.floor(Number(colSpan)) || 1);\n\n/** How many rows a cell spans, from its `rowSpan`: `0` spans the rest of its head or body, as in HTML. */\nexport const cellRowSpan = (rowSpan: number | string | undefined): number => {\n  if (rowSpan === undefined || rowSpan === \"\") return 1;\n  const rows = Math.floor(Number(rowSpan));\n  return rows === 0 ? Infinity : Math.max(1, rows) || 1;\n};\n\ntype SpanProps = { colSpan?: number | string; rowSpan?: number | string };\n\n/**\n * Places a row's cells on the grid of its head or body: each starts at the first\n * column from the left not taken by an earlier cell of the row or by a cell of\n * a row above that spans down into it. `taken[column]` is the row the column is\n * taken until (exclusive); the row's cells are added to it.\n */\nfunction placeRow(cells: SpanProps[], row: number, taken: number[]): number[] {\n  let column = 0;\n  return cells.map((cell) => {\n    while ((taken[column] ?? 0) > row) column++;\n    const at = column;\n    const span = cellSpan(cell.colSpan);\n    const until = row + cellRowSpan(cell.rowSpan);\n    for (let i = 0; i < span; i++) taken[at + i] = until;\n    column += span;\n    return at;\n  });\n}\n\n/** Keeps a place object of the last render while it is equal to this render's. */\nexport type KeepPlace<T> = (index: number, place: T) => T;\n\nconst sameRowPlace = (a: RowPlace, b: RowPlace): boolean =>\n  a.row === b.row && a.taken.size === b.taken.size && [...a.taken].every((column) => b.taken.has(column));\n\nconst sameCellPlace = (a: CellPlace, b: CellPlace): boolean => a.column === b.column && a.row === b.row;\n\n/**\n * The place objects of the last render, kept while equal, so that a row or\n * cell under a memoized parent doesn't render again because its head or body\n * did. The cache holds values only: a render that never commits leaves equal\n * objects, which are as good.\n */\nfunction usePlaces<T>(same: (a: T, b: T) => boolean): KeepPlace<T> {\n  const cache = useRef<T[]>([]);\n  const last = cache.current;\n  const next: T[] = [];\n  cache.current = next;\n  return (index, place) => {\n    const prev = last[index];\n    const kept = prev !== undefined && same(prev, place) ? prev : place;\n    next[index] = kept;\n    return kept;\n  };\n}\n\nexport const useRowPlaces = (): KeepPlace<RowPlace> => usePlaces(sameRowPlace);\nexport const useCellPlaces = (): KeepPlace<CellPlace> => usePlaces(sameCellPlace);\n\n/** Maps a list's elements, the ones in arrays and fragments included, keeping its shape. */\nfunction mapElements(nodes: ReactNode, map: (element: ReactElement) => ReactNode): ReactNode {\n  return Children.map(nodes, (child) => {\n    if (!isValidElement(child)) return child;\n    if (child.type === Fragment) {\n      return cloneElement(\n        child,\n        undefined,\n        mapElements((child as ReactElement<{ children?: ReactNode }>).props.children, map)\n      );\n    }\n    return map(child);\n  });\n}\n\n/** A list's elements, the ones in arrays and fragments included, in order. */\nfunction elementsOf(nodes: ReactNode): ReactElement[] {\n  const list: ReactElement[] = [];\n  mapElements(nodes, (element) => {\n    list.push(element);\n    return null;\n  });\n  return list;\n}\n\n/**\n * Gives each row of a head or body its place, so that its cells start after\n * the columns that `rowSpan` cells of the rows above take. Rows count in the\n * order they are written, the ones in arrays and fragments included. Only the\n * cells of a `rowType` element written there are seen: a component that renders\n * a row counts as a row whose cells span no further down.\n *\n * Every row is wrapped whether or not the table stacks, so a change of\n * `stackBelow` keeps the rows and their state.\n */\nexport function withRows(\n  children: ReactNode,\n  stacked: boolean,\n  rowType: ComponentType<never>,\n  keep: KeepPlace<RowPlace>\n): ReactNode {\n  const taken: number[] = [];\n  let row = 0;\n  return mapElements(children, (element) => {\n    let place: RowPlace | null = null;\n    if (stacked) {\n      const at = row++;\n      place = keep(at, { row: at, taken: new Set(taken.flatMap((until, column) => (until > at ? [column] : []))) });\n      const cells =\n        element.type === rowType\n          ? elementsOf((element as ReactElement<{ children?: ReactNode }>).props.children).map(\n              (cell) => cell.props as SpanProps\n            )\n          : [];\n      placeRow(cells, at, taken);\n    }\n    return <TableRowPlaceContext.Provider value={place}>{element}</TableRowPlaceContext.Provider>;\n  });\n}\n\n/**\n * Gives each cell of a row its place. Cells count in the order they are written,\n * the ones in arrays and fragments included; any other element — a component\n * that renders a cell — counts as one cell, with its own `colSpan` and `rowSpan`.\n * Each cell is wrapped whether or not the table stacks, so a change of\n * `stackBelow` keeps the cells' content and its state.\n */\nexport function withColumns(\n  children: ReactNode,\n  stacked: boolean,\n  place: RowPlace | null,\n  keep: KeepPlace<CellPlace>\n): ReactNode {\n  const row = place?.row ?? 0;\n  const taken: number[] = [];\n  place?.taken.forEach((column) => (taken[column] = row + 1));\n  let index = 0;\n  return mapElements(children, (element) => {\n    const at = stacked ? keep(index++, { column: placeRow([element.props as SpanProps], row, taken)[0], row }) : null;\n    return <TableColumnContext.Provider value={at}>{element}</TableColumnContext.Provider>;\n  });\n}\n\n/**\n * The text of a header's content: its strings and numbers, those inside elements\n * included, with white space collapsed. A component that makes its text itself\n * (a translated message, an icon) gives none: name such a column by\n * `TableHeadCell label`.\n */\nexport function textOf(node: ReactNode): string {\n  const collect = (value: ReactNode): string => {\n    if (typeof value === \"string\" || typeof value === \"number\") return String(value);\n    if (Array.isArray(value)) return value.map(collect).join(\"\");\n    if (isValidElement(value)) return collect((value as ReactElement<{ children?: ReactNode }>).props.children);\n    return \"\";\n  };\n  return collect(node).replace(/\\s+/g, \" \").trim();\n}\n"],"names":["ColumnLabels","listener","column","rows","row","at","_a","owner","label","prev","TableLabelsContext","createContext","TableHeadContext","TableColumnContext","TableRowPlaceContext","cellSpan","colSpan","cellRowSpan","rowSpan","placeRow","cells","taken","cell","span","until","i","sameRowPlace","a","b","sameCellPlace","usePlaces","same","cache","useRef","last","next","index","place","kept","useRowPlaces","useCellPlaces","mapElements","nodes","map","Children","child","isValidElement","Fragment","cloneElement","elementsOf","list","element","withRows","children","stacked","rowType","keep","withColumns","textOf","node","collect","value"],"mappings":"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"}

package/dist/components/dataDisplay/table/tableHead.js

@@ -1,7 +1,13 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
+import { useContext as s } from "react";
 import m from "clsx";
-const d = ({ children: a, className: e, ...t }) => /* @__PURE__ */ r("thead", { ...t, className: m("smwb-table__head", e), children: a });
+import { TableLabelsContext as n, useRowPlaces as c, TableHeadContext as d, withRows as i } from "./tableColumns.js";
+import b from "./tableRow.js";
+const x = ({ children: t, className: o, ...r }) => {
+  const a = s(n) != null, l = c();
+  return /* @__PURE__ */ e("thead", { ...r, className: m("smwb-table__head", o), children: /* @__PURE__ */ e(d.Provider, { value: !0, children: i(t, a, b, l) }) });
+};
 export {
-  d as default
+  x as default
 };
 //# sourceMappingURL=tableHead.js.map

package/dist/components/dataDisplay/table/tableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableHead.js","sources":["../../../../src/components/dataDisplay/table/tableHead.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {\n  className?: string;\n}\n\nconst TableHead = ({ children, className, ...props }: PropsWithChildren<TableHeadProps>) => {\n  return (\n    <thead {...props} className={cn(\"smwb-table__head\", className)}>\n      {children}\n    </thead>\n  );\n};\n\nexport default TableHead;\n"],"names":["TableHead","children","className","props","jsx","cn"],"mappings":";;AAOA,MAAMA,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,QAEzC,gBAAAC,EAAC,WAAO,GAAGD,GAAO,WAAWE,EAAG,oBAAoBH,CAAS,GAC1D,UAAAD,GACH;"}
+{"version":3,"file":"tableHead.js","sources":["../../../../src/components/dataDisplay/table/tableHead.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren, useContext } from \"react\";\nimport cn from \"clsx\";\nimport { TableHeadContext, TableLabelsContext, useRowPlaces, withRows } from \"./tableColumns\";\nimport TableRow from \"./tableRow\";\n\nexport interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {\n  className?: string;\n}\n\nconst TableHead = ({ children, className, ...props }: PropsWithChildren<TableHeadProps>) => {\n  // In a stacked table each row learns the columns that `rowSpan` cells above\n  // it take, so its head cells label the columns they stand over.\n  const stacked = useContext(TableLabelsContext) != null;\n  const keep = useRowPlaces();\n  return (\n    <thead {...props} className={cn(\"smwb-table__head\", className)}>\n      <TableHeadContext.Provider value={true}>{withRows(children, stacked, TableRow, keep)}</TableHeadContext.Provider>\n    </thead>\n  );\n};\n\nexport default TableHead;\n"],"names":["TableHead","children","className","props","stacked","useContext","TableLabelsContext","keep","useRowPlaces","jsx","cn","TableHeadContext","withRows","TableRow"],"mappings":";;;;;AASA,MAAMA,IAAY,CAAC,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,QAA+C;AAG1F,QAAMC,IAAUC,EAAWC,CAAkB,KAAK,MAC5CC,IAAOC,EAAA;AACb,SACE,gBAAAC,EAAC,WAAO,GAAGN,GAAO,WAAWO,EAAG,oBAAoBR,CAAS,GAC3D,UAAA,gBAAAO,EAACE,EAAiB,UAAjB,EAA0B,OAAO,IAAO,UAAAC,EAASX,GAAUG,GAASS,GAAUN,CAAI,EAAA,CAAE,EAAA,CACvF;AAEJ;"}

package/dist/components/dataDisplay/table/tableHeadCell.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ThHTMLAttributes } from "react";
+import { PropsWithChildren, ReactNode, ThHTMLAttributes } from "react";
 export type SortDirection = "asc" | "desc" | false;
 export interface TableHeadCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
     className?: string;
@@ -16,13 +16,34 @@ export interface TableHeadCellProps extends ThHTMLAttributes<HTMLTableCellElemen
      * button, link, label, anything focusable) or in a portal. Content that is not
      * a control, such as click-to-edit text, keeps its click from sorting by
      * calling `preventDefault()` on it. A nested control's name, or its value,
-     * becomes part of the sort control's accessible name.
+     * becomes part of the sort control's accessible name: put controls in
+     * `actions` instead.
      */
     sortable?: boolean;
     /** Current sort direction for this column. */
     sortDirection?: SortDirection;
     /** Invoked when the user activates the sort control. */
     onSort?: () => void;
+    /**
+     * The column's controls — a filter field, a menu button, a column resizer —
+     * drawn after the sort control, outside it. Their names and values stay out
+     * of the sort control's accessible name, and their keys and clicks never
+     * reach it. Rendered whether or not the cell is sortable.
+     *
+     * The column header is then named after the children alone: the cell's
+     * `aria-labelledby` points at the sort control, unless the cell is given
+     * `aria-label` or `aria-labelledby`. Named from its content, the header would
+     * take in the controls' names and values too.
+     */
+    actions?: ReactNode;
+    /**
+     * The column's name for its body cells while the table stacks rows as cards
+     * (`Table stackBelow`). Without it, the text of the children is the name; give
+     * `label` where they hold no text of their own (an icon, a translated message
+     * component) or more than the name. An empty `label` leaves the column's cells
+     * unlabelled, so they fill the card's width.
+     */
+    label?: string;
 }
-declare const TableHeadCell: ({ children, className, cellAlign, isSortedByAsc, isSortedByDesc, sortable, sortDirection, onSort, ...props }: PropsWithChildren<TableHeadCellProps>) => import("react/jsx-runtime").JSX.Element;
+declare const TableHeadCell: ({ children, className, cellAlign, isSortedByAsc, isSortedByDesc, sortable, sortDirection, onSort, actions, label, ...props }: PropsWithChildren<TableHeadCellProps>) => import("react/jsx-runtime").JSX.Element;
 export default TableHeadCell;