@cimpress-ui/react 1.31.0 → 1.32.0

package/dist/commonjs/components/table/contexts/refs.d.ts

@@ -0,0 +1,10 @@
+import { type MutableRefObject, type ReactNode } from 'react';
+export interface TableRefs {
+    header: MutableRefObject<HTMLTableSectionElement | null>;
+}
+export declare function TableRefsProvider({ children, header, }: {
+    children: ReactNode;
+    header: MutableRefObject<HTMLTableSectionElement | null>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTableRefs(): TableRefs;
+//# sourceMappingURL=refs.d.ts.map

package/dist/commonjs/components/table/contexts/refs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"refs.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/refs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,gBAAgB,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAElG,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,gBAAgB,CAAC,uBAAuB,GAAG,IAAI,CAAC,CAAC;CAC1D;AAID,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,MAAM,GACP,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,gBAAgB,CAAC,uBAAuB,GAAG,IAAI,CAAC,CAAC;CAC1D,2CASA;AAGD,wBAAgB,YAAY,IAAI,SAAS,CAOxC"}

package/dist/commonjs/components/table/contexts/refs.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableRefsProvider = TableRefsProvider;
+exports.useTableRefs = useTableRefs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TableRefsContext = (0, react_1.createContext)(null);
+function TableRefsProvider({ children, header, }) {
+    const tableRefs = (0, react_1.useMemo)(() => ({
+        header,
+    }), [header]);
+    return (0, jsx_runtime_1.jsx)(TableRefsContext.Provider, { value: tableRefs, children: children });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+function useTableRefs() {
+    const tableRefs = (0, react_1.useContext)(TableRefsContext);
+    if (!tableRefs) {
+        throw new Error('Cannot use table refs outside of a table');
+    }
+    return tableRefs;
+}
+//# sourceMappingURL=refs.js.map

package/dist/commonjs/components/table/contexts/refs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"refs.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/refs.tsx"],"names":[],"mappings":";;AAQA,8CAeC;AAGD,oCAOC;;AAjCD,iCAAkG;AAMlG,MAAM,gBAAgB,GAAG,IAAA,qBAAa,EAAmB,IAAI,CAAC,CAAC;AAE/D,SAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,MAAM,GAIP;IACC,MAAM,SAAS,GAAc,IAAA,eAAO,EAClC,GAAG,EAAE,CAAC,CAAC;QACL,MAAM;KACP,CAAC,EACF,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,OAAO,uBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,YAAG,QAAQ,GAA6B,CAAC;AAC7F,CAAC;AAED,gEAAgE;AAChE,SAAgB,YAAY;IAC1B,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,gBAAgB,CAAC,CAAC;IAC/C,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;IAC9D,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC","sourcesContent":["import { createContext, type MutableRefObject, type ReactNode, useContext, useMemo } from 'react';\n\nexport interface TableRefs {\n  header: MutableRefObject<HTMLTableSectionElement | null>;\n}\n\nconst TableRefsContext = createContext<TableRefs | null>(null);\n\nexport function TableRefsProvider({\n  children,\n  header,\n}: {\n  children: ReactNode;\n  header: MutableRefObject<HTMLTableSectionElement | null>;\n}) {\n  const tableRefs: TableRefs = useMemo(\n    () => ({\n      header,\n    }),\n    [header],\n  );\n\n  return <TableRefsContext.Provider value={tableRefs}>{children}</TableRefsContext.Provider>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableRefs(): TableRefs {\n  const tableRefs = useContext(TableRefsContext);\n  if (!tableRefs) {\n    throw new Error('Cannot use table refs outside of a table');\n  }\n\n  return tableRefs;\n}\n"]}

package/dist/commonjs/components/table/table-body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;GAIG;AACH,QAAA,MAAM,UAAU,wHAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAM/C,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;GAIG;AACH,QAAA,MAAM,UAAU,wHAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

package/dist/commonjs/components/table/table-body.js

@@ -4,11 +4,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableBody = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_aria_1 = require("react-aria");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const localization_provider_js_1 = require("../../i18n/localization-provider.js");
 const spinner_js_1 = require("../spinner/spinner.js");
 const column_collection_js_1 = require("./contexts/column-collection.js");
 const loading_js_1 = require("./contexts/loading.js");
+const row_state_js_1 = require("./contexts/row-state.js");
+const use_table_cell_js_1 = require("./hooks/use-table-cell.js");
 function TableBody({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     const isLoading = (0, loading_js_1.useTableLoading)();
     return ((0, jsx_runtime_1.jsxs)("tbody", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, children: [isLoading && (0, jsx_runtime_1.jsx)(TableLoader, {}), children] }));
@@ -21,9 +24,17 @@ function TableBody({ children, UNSAFE_className, UNSAFE_style, ...props }, ref)
 const _TableBody = (0, forward_ref_js_1.forwardRef)(TableBody, 'TableBody');
 exports.TableBody = _TableBody;
 function TableLoader() {
+    const rowKey = (0, react_aria_1.useId)();
+    return ((0, jsx_runtime_1.jsx)(row_state_js_1.TableRowStateProvider, { rowKey: rowKey, children: (0, jsx_runtime_1.jsx)(TableLoaderInner, {}) }));
+}
+function TableLoaderInner() {
     const loaderCellRef = (0, react_1.useRef)(null);
-    const { colSpan } = (0, column_collection_js_1.useFullWidthCell)(loaderCellRef);
+    const { rowKey } = (0, row_state_js_1.useTableRowState)();
+    const { colSpan, columnKey } = (0, column_collection_js_1.useFullWidthCell)(loaderCellRef);
+    // `useTableCell` requires `TableRowStateProvider`
+    const { cellProps } = (0, use_table_cell_js_1.useTableCell)(loaderCellRef, rowKey, columnKey);
+    const columnData = (0, column_collection_js_1.useColumnData)(columnKey);
     const messages = (0, localization_provider_js_1.useLocalizedMessages)('table');
-    return ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { ref: loaderCellRef, className: "cim-table-loading-state", colSpan: colSpan, "data-alignment": "center", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-table-loading-state-overlay", children: (0, jsx_runtime_1.jsx)(spinner_js_1.Spinner, { size: "medium", "aria-label": messages.format('loadingData'), UNSAFE_style: { height: 'min(70%, 48px)' } }) }) }) }, "__cim__internal__loading-state__"));
+    return ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { ...cellProps, ref: loaderCellRef, className: "cim-table-loading-state", "aria-colindex": columnData?.number, colSpan: colSpan, "data-alignment": "center", children: (0, jsx_runtime_1.jsx)("div", { className: "cim-table-loading-state-overlay", children: (0, jsx_runtime_1.jsx)(spinner_js_1.Spinner, { size: "medium", "aria-label": messages.format('loadingData'), UNSAFE_style: { height: 'min(70%, 48px)' } }) }) }) }, "__cim__internal__loading-state__"));
 }
 //# sourceMappingURL=table-body.js.map

package/dist/commonjs/components/table/table-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-body.js","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,iCAAkE;AAClE,yDAAkD;AAClD,kFAA2E;AAC3E,sDAAgD;AAEhD,0EAAmE;AACnE,sDAAwD;AAOxD,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EACtE,GAA0C;IAE1C,MAAM,SAAS,GAAG,IAAA,4BAAe,GAAE,CAAC;IAEpC,OAAO,CACL,sCAAW,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,aACzE,SAAS,IAAI,uBAAC,WAAW,KAAG,EAC5B,QAAQ,IACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,IAAA,2BAAU,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE/B,+BAAS;AAEhC,SAAS,WAAW;IAClB,MAAM,aAAa,GAAG,IAAA,cAAM,EAAuB,IAAI,CAAC,CAAC;IACzD,MAAM,EAAE,OAAO,EAAE,GAAG,IAAA,uCAAgB,EAAC,aAAa,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,IAAA,+CAAoB,EAAC,OAAO,CAAC,CAAC;IAE/C,OAAO,CACL,yCACE,+BAAI,GAAG,EAAE,aAAa,EAAE,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAE,OAAO,oBAAiB,QAAQ,YACnG,gCAAK,SAAS,EAAC,iCAAiC,YAC9C,uBAAC,oBAAO,IACN,IAAI,EAAC,QAAQ,gBACD,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,EAC1C,YAAY,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAC1C,GACE,GACH,IATC,kCAAkC,CAUrC,CACN,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { useRef, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport type { CommonProps } from '../types.js';\nimport { useFullWidthCell } from './contexts/column-collection.js';\nimport { useTableLoading } from './contexts/loading.js';\n\nexport interface TableBodyProps extends CommonProps {\n  /** The rows that belong to this table body. */\n  children: ReactNode;\n}\n\nfunction TableBody(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableBodyProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  const isLoading = useTableLoading();\n\n  return (\n    <tbody {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\n      {isLoading && <TableLoader />}\n      {children}\n    </tbody>\n  );\n}\n\n/**\n * Renders a body section within a table.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableBody = forwardRef(TableBody, 'TableBody');\n\nexport { _TableBody as TableBody };\n\nfunction TableLoader() {\n  const loaderCellRef = useRef<HTMLTableCellElement>(null);\n  const { colSpan } = useFullWidthCell(loaderCellRef);\n  const messages = useLocalizedMessages('table');\n\n  return (\n    <tr key=\"__cim__internal__loading-state__\">\n      <td ref={loaderCellRef} className=\"cim-table-loading-state\" colSpan={colSpan} data-alignment=\"center\">\n        <div className=\"cim-table-loading-state-overlay\">\n          <Spinner\n            size=\"medium\"\n            aria-label={messages.format('loadingData')}\n            UNSAFE_style={{ height: 'min(70%, 48px)' }}\n          />\n        </div>\n      </td>\n    </tr>\n  );\n}\n"]}
+{"version":3,"file":"table-body.js","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,iCAAkE;AAClE,2CAAmC;AACnC,yDAAkD;AAClD,kFAA2E;AAC3E,sDAAgD;AAEhD,0EAAkF;AAClF,sDAAwD;AACxD,0DAAkF;AAClF,iEAAyD;AAOzD,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EACtE,GAA0C;IAE1C,MAAM,SAAS,GAAG,IAAA,4BAAe,GAAE,CAAC;IAEpC,OAAO,CACL,sCAAW,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,aACzE,SAAS,IAAI,uBAAC,WAAW,KAAG,EAC5B,QAAQ,IACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,IAAA,2BAAU,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE/B,+BAAS;AAEhC,SAAS,WAAW;IAClB,MAAM,MAAM,GAAG,IAAA,kBAAK,GAAE,CAAC;IAEvB,OAAO,CACL,uBAAC,oCAAqB,IAAC,MAAM,EAAE,MAAM,YACnC,uBAAC,gBAAgB,KAAG,GACE,CACzB,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB;IACvB,MAAM,aAAa,GAAG,IAAA,cAAM,EAAuB,IAAI,CAAC,CAAC;IACzD,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,+BAAgB,GAAE,CAAC;IACtC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAA,uCAAgB,EAAC,aAAa,CAAC,CAAC;IAC/D,kDAAkD;IAClD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,gCAAY,EAAC,aAAa,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IACrE,MAAM,UAAU,GAAG,IAAA,oCAAa,EAAC,SAAS,CAAC,CAAC;IAC5C,MAAM,QAAQ,GAAG,IAAA,+CAAoB,EAAC,OAAO,CAAC,CAAC;IAE/C,OAAO,CACL,yCACE,kCACM,SAAS,EACb,GAAG,EAAE,aAAa,EAClB,SAAS,EAAC,yBAAyB,mBACpB,UAAU,EAAE,MAAM,EACjC,OAAO,EAAE,OAAO,oBACD,QAAQ,YAEvB,gCAAK,SAAS,EAAC,iCAAiC,YAC9C,uBAAC,oBAAO,IACN,IAAI,EAAC,QAAQ,gBACD,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,EAC1C,YAAY,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAC1C,GACE,GACH,IAhBC,kCAAkC,CAiBrC,CACN,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { useRef, type ForwardedRef, type ReactNode } from 'react';\nimport { useId } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport type { CommonProps } from '../types.js';\nimport { useColumnData, useFullWidthCell } from './contexts/column-collection.js';\nimport { useTableLoading } from './contexts/loading.js';\nimport { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\n\nexport interface TableBodyProps extends CommonProps {\n  /** The rows that belong to this table body. */\n  children: ReactNode;\n}\n\nfunction TableBody(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableBodyProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  const isLoading = useTableLoading();\n\n  return (\n    <tbody {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\n      {isLoading && <TableLoader />}\n      {children}\n    </tbody>\n  );\n}\n\n/**\n * Renders a body section within a table.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableBody = forwardRef(TableBody, 'TableBody');\n\nexport { _TableBody as TableBody };\n\nfunction TableLoader() {\n  const rowKey = useId();\n\n  return (\n    <TableRowStateProvider rowKey={rowKey}>\n      <TableLoaderInner />\n    </TableRowStateProvider>\n  );\n}\n\nfunction TableLoaderInner() {\n  const loaderCellRef = useRef<HTMLTableCellElement>(null);\n  const { rowKey } = useTableRowState();\n  const { colSpan, columnKey } = useFullWidthCell(loaderCellRef);\n  // `useTableCell` requires `TableRowStateProvider`\n  const { cellProps } = useTableCell(loaderCellRef, rowKey, columnKey);\n  const columnData = useColumnData(columnKey);\n  const messages = useLocalizedMessages('table');\n\n  return (\n    <tr key=\"__cim__internal__loading-state__\">\n      <td\n        {...cellProps}\n        ref={loaderCellRef}\n        className=\"cim-table-loading-state\"\n        aria-colindex={columnData?.number}\n        colSpan={colSpan}\n        data-alignment=\"center\"\n      >\n        <div className=\"cim-table-loading-state-overlay\">\n          <Spinner\n            size=\"medium\"\n            aria-label={messages.format('loadingData')}\n            UNSAFE_style={{ height: 'min(70%, 48px)' }}\n          />\n        </div>\n      </td>\n    </tr>\n  );\n}\n"]}

package/dist/commonjs/components/table/table-container.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { AriaLabelingProps, CommonProps } from '../types.js';
 export interface TableContainerProps extends CommonProps, AriaLabelingProps {
     /** The contents of the container. */

package/dist/commonjs/components/table/table-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-container.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAElE,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,iBAAiB;IACzE,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAmBD;;;;GAIG;AACH,QAAA,MAAM,eAAe,qKAA+D,CAAC;AAErF,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC"}
+{"version":3,"file":"table-container.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA2D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhG,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,iBAAiB;IACzE,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAuED;;;;GAIG;AACH,QAAA,MAAM,eAAe,qKAA+D,CAAC;AAErF,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC"}

package/dist/commonjs/components/table/table-container.js

@@ -6,12 +6,54 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@react-aria/utils");
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 const focusable_container_js_1 = require("../internal/focusable-container/focusable-container.js");
+const refs_js_1 = require("./contexts/refs.js");
 function TableContainer({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { ...props, ref: ref, className: (0, clsx_1.default)('cim-table-container', UNSAFE_className), style: UNSAFE_style, scrollDirection: "horizontal", children: children }));
+    const containerRef = (0, utils_1.useObjectRef)(ref);
+    const headerRef = (0, react_1.useRef)(null);
+    const [headerHeight, setHeaderHeight] = (0, react_1.useState)(40);
+    const [hasClassicHorizontalScrollbar, setHasClassicHorizontalScrollbar] = (0, react_1.useState)(false);
+    const [hasClassicVerticalScrollbar, setHasClassicVerticalScrollbar] = (0, react_1.useState)(false);
+    (0, utils_1.useResizeObserver)({
+        ref: containerRef,
+        onResize: () => {
+            const element = containerRef.current;
+            if (element) {
+                setHasClassicHorizontalScrollbar(element.offsetHeight - element.clientHeight > Number.EPSILON);
+                setHasClassicVerticalScrollbar(element.offsetWidth - element.clientWidth > Number.EPSILON);
+            }
+        },
+    });
+    (0, utils_1.useLayoutEffect)(() => {
+        const headerElement = headerRef.current;
+        const isSSR = typeof window === 'undefined';
+        let observer;
+        if (headerElement && !isSSR) {
+            observer = new window.ResizeObserver((entries) => {
+                if (entries[0]) {
+                    const { target } = entries[0];
+                    setHeaderHeight(target.clientHeight);
+                }
+            });
+            observer.observe(headerElement);
+        }
+        return () => {
+            if (headerElement && observer) {
+                observer.unobserve(headerElement);
+            }
+        };
+    }, [headerRef]);
+    return ((0, jsx_runtime_1.jsx)(refs_js_1.TableRefsProvider, { header: headerRef, children: (0, jsx_runtime_1.jsx)("div", { className: "cim-table-container-outer", children: (0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { ...props, ref: containerRef, className: (0, clsx_1.default)('cim-table-container', UNSAFE_className), style: {
+                    ...UNSAFE_style,
+                    '--cim-table-header-height': `${headerHeight}px`,
+                    '--cim-table-has-classic-v-scrollbar': hasClassicVerticalScrollbar ? 1 : 0,
+                    '--cim-table-has-classic-h-scrollbar': hasClassicHorizontalScrollbar ? 1 : 0,
+                }, scrollDirection: "horizontal", children: children }) }) }));
 }
 /**
  * Renders a scrollable container that allows a table to overflow in a responsive way.

package/dist/commonjs/components/table/table-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-container.js","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,yDAAkD;AAClD,mEAA2D;AAC3D,mGAA4F;AAQ5F,SAAS,cAAc,CACrB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAuB,EAC3E,GAAiC;IAEjC,OAAO,CACL,uBAAC,2CAAkB,OACb,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,gBAAgB,CAAC,EACxD,KAAK,EAAE,YAAY,EACnB,eAAe,EAAC,YAAY,YAE3B,QAAQ,GACU,CACtB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,eAAe,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,cAAc,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAEzD,yCAAc","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\n\nexport interface TableContainerProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the container. */\n  children: ReactNode;\n}\n\nfunction TableContainer(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <FocusableContainer\n      {...props}\n      ref={ref}\n      className={clsx('cim-table-container', UNSAFE_className)}\n      style={UNSAFE_style}\n      scrollDirection=\"horizontal\"\n    >\n      {children}\n    </FocusableContainer>\n  );\n}\n\n/**\n * Renders a scrollable container that allows a table to overflow in a responsive way.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableContainer = withStyleProps(forwardRef(TableContainer), 'TableContainer');\n\nexport { _TableContainer as TableContainer };\n"]}
+{"version":3,"file":"table-container.js","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useLayoutEffect, useObjectRef, useResizeObserver } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport { type CSSProperties, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { TableRefsProvider } from './contexts/refs.js';\n\nexport interface TableContainerProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the container. */\n  children: ReactNode;\n}\n\nfunction TableContainer(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const containerRef = useObjectRef(ref);\n  const headerRef = useRef<HTMLTableSectionElement | null>(null);\n  const [headerHeight, setHeaderHeight] = useState(40);\n  const [hasClassicHorizontalScrollbar, setHasClassicHorizontalScrollbar] = useState(false);\n  const [hasClassicVerticalScrollbar, setHasClassicVerticalScrollbar] = useState(false);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: () => {\n      const element = containerRef.current;\n      if (element) {\n        setHasClassicHorizontalScrollbar(element.offsetHeight - element.clientHeight > Number.EPSILON);\n        setHasClassicVerticalScrollbar(element.offsetWidth - element.clientWidth > Number.EPSILON);\n      }\n    },\n  });\n\n  useLayoutEffect(() => {\n    const headerElement = headerRef.current;\n    const isSSR = typeof window === 'undefined';\n\n    let observer: ResizeObserver | undefined;\n\n    if (headerElement && !isSSR) {\n      observer = new window.ResizeObserver((entries) => {\n        if (entries[0]) {\n          const { target } = entries[0];\n          setHeaderHeight(target.clientHeight);\n        }\n      });\n\n      observer.observe(headerElement);\n    }\n\n    return () => {\n      if (headerElement && observer) {\n        observer.unobserve(headerElement);\n      }\n    };\n  }, [headerRef]);\n\n  return (\n    <TableRefsProvider header={headerRef}>\n      <div className=\"cim-table-container-outer\">\n        <FocusableContainer\n          {...props}\n          ref={containerRef}\n          className={clsx('cim-table-container', UNSAFE_className)}\n          style={\n            {\n              ...UNSAFE_style,\n              '--cim-table-header-height': `${headerHeight}px`,\n              '--cim-table-has-classic-v-scrollbar': hasClassicVerticalScrollbar ? 1 : 0,\n              '--cim-table-has-classic-h-scrollbar': hasClassicHorizontalScrollbar ? 1 : 0,\n            } as CSSProperties\n          }\n          scrollDirection=\"horizontal\"\n        >\n          {children}\n        </FocusableContainer>\n      </div>\n    </TableRefsProvider>\n  );\n}\n\n/**\n * Renders a scrollable container that allows a table to overflow in a responsive way.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableContainer = withStyleProps(forwardRef(TableContainer), 'TableContainer');\n\nexport { _TableContainer as TableContainer };\n"]}

package/dist/commonjs/components/table/table-header.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { CommonProps } from '../types.js';
 export interface TableHeaderProps extends CommonProps {
     /** The header rows that belong to this table header. */

package/dist/commonjs/components/table/table-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-header.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAaD;;;;GAIG;AACH,QAAA,MAAM,YAAY,0HAAyC,CAAC;AAE5D,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}
+{"version":3,"file":"table-header.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;GAIG;AACH,QAAA,MAAM,YAAY,0HAAyC,CAAC;AAE5D,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}

package/dist/commonjs/components/table/table-header.js

@@ -3,9 +3,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@react-aria/utils");
+const react_1 = require("react");
 const forward_ref_js_1 = require("../../forward-ref.js");
+const refs_js_1 = require("./contexts/refs.js");
 function TableHeader({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return ((0, jsx_runtime_1.jsx)("thead", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, children: children }));
+    const { header: headerRef } = (0, refs_js_1.useTableRefs)();
+    const mergedRef = (0, utils_1.useObjectRef)((0, react_1.useMemo)(() => (0, utils_1.mergeRefs)(ref, headerRef), [ref, headerRef]));
+    return ((0, jsx_runtime_1.jsx)("thead", { ...props, ref: mergedRef, className: UNSAFE_className, style: UNSAFE_style, children: children }));
 }
 /**
  * Renders a header section within a table.

package/dist/commonjs/components/table/table-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-header.js","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAGb,yDAAkD;AAQlD,SAAS,WAAW,CAClB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAoB,EACxE,GAA0C;IAE1C,OAAO,CACL,qCAAW,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,YACzE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAG,IAAA,2BAAU,EAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAEnC,mCAAW","sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface TableHeaderProps extends CommonProps {\n  /** The header rows that belong to this table header. */\n  children: ReactNode;\n}\n\nfunction TableHeader(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableHeaderProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  return (\n    <thead {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\n      {children}\n    </thead>\n  );\n}\n\n/**\n * Renders a header section within a table.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableHeader = forwardRef(TableHeader, 'TableHeader');\n\nexport { _TableHeader as TableHeader };\n"]}
+{"version":3,"file":"table-header.js","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,6CAA4D;AAC5D,iCAAmE;AACnE,yDAAkD;AAElD,gDAAkD;AAOlD,SAAS,WAAW,CAClB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAoB,EACxE,GAA0C;IAE1C,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,sBAAY,GAAE,CAAC;IAC7C,MAAM,SAAS,GAAG,IAAA,oBAAY,EAAC,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,iBAAS,EAAC,GAAG,EAAE,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAE3F,OAAO,CACL,qCAAW,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,YAC/E,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAG,IAAA,2BAAU,EAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAEnC,mCAAW","sourcesContent":["'use client';\n\nimport { mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useMemo, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { useTableRefs } from './contexts/refs.js';\n\nexport interface TableHeaderProps extends CommonProps {\n  /** The header rows that belong to this table header. */\n  children: ReactNode;\n}\n\nfunction TableHeader(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableHeaderProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  const { header: headerRef } = useTableRefs();\n  const mergedRef = useObjectRef(useMemo(() => mergeRefs(ref, headerRef), [ref, headerRef]));\n\n  return (\n    <thead {...props} ref={mergedRef} className={UNSAFE_className} style={UNSAFE_style}>\n      {children}\n    </thead>\n  );\n}\n\n/**\n * Renders a header section within a table.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableHeader = forwardRef(TableHeader, 'TableHeader');\n\nexport { _TableHeader as TableHeader };\n"]}

package/dist/esm/components/table/contexts/refs.d.ts

@@ -0,0 +1,10 @@
+import { type MutableRefObject, type ReactNode } from 'react';
+export interface TableRefs {
+    header: MutableRefObject<HTMLTableSectionElement | null>;
+}
+export declare function TableRefsProvider({ children, header, }: {
+    children: ReactNode;
+    header: MutableRefObject<HTMLTableSectionElement | null>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTableRefs(): TableRefs;
+//# sourceMappingURL=refs.d.ts.map

package/dist/esm/components/table/contexts/refs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"refs.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/contexts/refs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,gBAAgB,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAElG,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,gBAAgB,CAAC,uBAAuB,GAAG,IAAI,CAAC,CAAC;CAC1D;AAID,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,MAAM,GACP,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,gBAAgB,CAAC,uBAAuB,GAAG,IAAI,CAAC,CAAC;CAC1D,2CASA;AAGD,wBAAgB,YAAY,IAAI,SAAS,CAOxC"}

package/dist/esm/components/table/contexts/refs.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+const TableRefsContext = createContext(null);
+export function TableRefsProvider({ children, header, }) {
+    const tableRefs = useMemo(() => ({
+        header,
+    }), [header]);
+    return _jsx(TableRefsContext.Provider, { value: tableRefs, children: children });
+}
+// eslint-disable-next-line react-refresh/only-export-components
+export function useTableRefs() {
+    const tableRefs = useContext(TableRefsContext);
+    if (!tableRefs) {
+        throw new Error('Cannot use table refs outside of a table');
+    }
+    return tableRefs;
+}
+//# sourceMappingURL=refs.js.map

package/dist/esm/components/table/contexts/refs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"refs.js","sourceRoot":"","sources":["../../../../../src/components/table/contexts/refs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAyC,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAMlG,MAAM,gBAAgB,GAAG,aAAa,CAAmB,IAAI,CAAC,CAAC;AAE/D,MAAM,UAAU,iBAAiB,CAAC,EAChC,QAAQ,EACR,MAAM,GAIP;IACC,MAAM,SAAS,GAAc,OAAO,CAClC,GAAG,EAAE,CAAC,CAAC;QACL,MAAM;KACP,CAAC,EACF,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,OAAO,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,YAAG,QAAQ,GAA6B,CAAC;AAC7F,CAAC;AAED,gEAAgE;AAChE,MAAM,UAAU,YAAY;IAC1B,MAAM,SAAS,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC/C,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;IAC9D,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC","sourcesContent":["import { createContext, type MutableRefObject, type ReactNode, useContext, useMemo } from 'react';\n\nexport interface TableRefs {\n  header: MutableRefObject<HTMLTableSectionElement | null>;\n}\n\nconst TableRefsContext = createContext<TableRefs | null>(null);\n\nexport function TableRefsProvider({\n  children,\n  header,\n}: {\n  children: ReactNode;\n  header: MutableRefObject<HTMLTableSectionElement | null>;\n}) {\n  const tableRefs: TableRefs = useMemo(\n    () => ({\n      header,\n    }),\n    [header],\n  );\n\n  return <TableRefsContext.Provider value={tableRefs}>{children}</TableRefsContext.Provider>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTableRefs(): TableRefs {\n  const tableRefs = useContext(TableRefsContext);\n  if (!tableRefs) {\n    throw new Error('Cannot use table refs outside of a table');\n  }\n\n  return tableRefs;\n}\n"]}

package/dist/esm/components/table/table-body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;GAIG;AACH,QAAA,MAAM,UAAU,wHAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}
+{"version":3,"file":"table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAM/C,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;GAIG;AACH,QAAA,MAAM,UAAU,wHAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

package/dist/esm/components/table/table-body.js

@@ -1,11 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
+import { useId } from 'react-aria';
 import { forwardRef } from '../../forward-ref.js';
 import { useLocalizedMessages } from '../../i18n/localization-provider.js';
 import { Spinner } from '../spinner/spinner.js';
-import { useFullWidthCell } from './contexts/column-collection.js';
+import { useColumnData, useFullWidthCell } from './contexts/column-collection.js';
 import { useTableLoading } from './contexts/loading.js';
+import { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';
+import { useTableCell } from './hooks/use-table-cell.js';
 function TableBody({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     const isLoading = useTableLoading();
     return (_jsxs("tbody", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, children: [isLoading && _jsx(TableLoader, {}), children] }));
@@ -18,9 +21,17 @@ function TableBody({ children, UNSAFE_className, UNSAFE_style, ...props }, ref)
 const _TableBody = forwardRef(TableBody, 'TableBody');
 export { _TableBody as TableBody };
 function TableLoader() {
+    const rowKey = useId();
+    return (_jsx(TableRowStateProvider, { rowKey: rowKey, children: _jsx(TableLoaderInner, {}) }));
+}
+function TableLoaderInner() {
     const loaderCellRef = useRef(null);
-    const { colSpan } = useFullWidthCell(loaderCellRef);
+    const { rowKey } = useTableRowState();
+    const { colSpan, columnKey } = useFullWidthCell(loaderCellRef);
+    // `useTableCell` requires `TableRowStateProvider`
+    const { cellProps } = useTableCell(loaderCellRef, rowKey, columnKey);
+    const columnData = useColumnData(columnKey);
     const messages = useLocalizedMessages('table');
-    return (_jsx("tr", { children: _jsx("td", { ref: loaderCellRef, className: "cim-table-loading-state", colSpan: colSpan, "data-alignment": "center", children: _jsx("div", { className: "cim-table-loading-state-overlay", children: _jsx(Spinner, { size: "medium", "aria-label": messages.format('loadingData'), UNSAFE_style: { height: 'min(70%, 48px)' } }) }) }) }, "__cim__internal__loading-state__"));
+    return (_jsx("tr", { children: _jsx("td", { ...cellProps, ref: loaderCellRef, className: "cim-table-loading-state", "aria-colindex": columnData?.number, colSpan: colSpan, "data-alignment": "center", children: _jsx("div", { className: "cim-table-loading-state-overlay", children: _jsx(Spinner, { size: "medium", "aria-label": messages.format('loadingData'), UNSAFE_style: { height: 'min(70%, 48px)' } }) }) }) }, "__cim__internal__loading-state__"));
 }
 //# sourceMappingURL=table-body.js.map

package/dist/esm/components/table/table-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-body.js","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,MAAM,EAAqC,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAOxD,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EACtE,GAA0C;IAE1C,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;IAEpC,OAAO,CACL,oBAAW,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,aACzE,SAAS,IAAI,KAAC,WAAW,KAAG,EAC5B,QAAQ,IACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC;AAEnC,SAAS,WAAW;IAClB,MAAM,aAAa,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAC;IACzD,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAE/C,OAAO,CACL,uBACE,aAAI,GAAG,EAAE,aAAa,EAAE,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAE,OAAO,oBAAiB,QAAQ,YACnG,cAAK,SAAS,EAAC,iCAAiC,YAC9C,KAAC,OAAO,IACN,IAAI,EAAC,QAAQ,gBACD,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,EAC1C,YAAY,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAC1C,GACE,GACH,IATC,kCAAkC,CAUrC,CACN,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { useRef, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport type { CommonProps } from '../types.js';\nimport { useFullWidthCell } from './contexts/column-collection.js';\nimport { useTableLoading } from './contexts/loading.js';\n\nexport interface TableBodyProps extends CommonProps {\n  /** The rows that belong to this table body. */\n  children: ReactNode;\n}\n\nfunction TableBody(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableBodyProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  const isLoading = useTableLoading();\n\n  return (\n    <tbody {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\n      {isLoading && <TableLoader />}\n      {children}\n    </tbody>\n  );\n}\n\n/**\n * Renders a body section within a table.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableBody = forwardRef(TableBody, 'TableBody');\n\nexport { _TableBody as TableBody };\n\nfunction TableLoader() {\n  const loaderCellRef = useRef<HTMLTableCellElement>(null);\n  const { colSpan } = useFullWidthCell(loaderCellRef);\n  const messages = useLocalizedMessages('table');\n\n  return (\n    <tr key=\"__cim__internal__loading-state__\">\n      <td ref={loaderCellRef} className=\"cim-table-loading-state\" colSpan={colSpan} data-alignment=\"center\">\n        <div className=\"cim-table-loading-state-overlay\">\n          <Spinner\n            size=\"medium\"\n            aria-label={messages.format('loadingData')}\n            UNSAFE_style={{ height: 'min(70%, 48px)' }}\n          />\n        </div>\n      </td>\n    </tr>\n  );\n}\n"]}
+{"version":3,"file":"table-body.js","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,MAAM,EAAqC,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAOzD,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EACtE,GAA0C;IAE1C,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;IAEpC,OAAO,CACL,oBAAW,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,aACzE,SAAS,IAAI,KAAC,WAAW,KAAG,EAC5B,QAAQ,IACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC;AAEnC,SAAS,WAAW;IAClB,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,OAAO,CACL,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,YACnC,KAAC,gBAAgB,KAAG,GACE,CACzB,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB;IACvB,MAAM,aAAa,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAC;IACzD,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC/D,kDAAkD;IAClD,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC,aAAa,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IACrE,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAC5C,MAAM,QAAQ,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAE/C,OAAO,CACL,uBACE,gBACM,SAAS,EACb,GAAG,EAAE,aAAa,EAClB,SAAS,EAAC,yBAAyB,mBACpB,UAAU,EAAE,MAAM,EACjC,OAAO,EAAE,OAAO,oBACD,QAAQ,YAEvB,cAAK,SAAS,EAAC,iCAAiC,YAC9C,KAAC,OAAO,IACN,IAAI,EAAC,QAAQ,gBACD,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,EAC1C,YAAY,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAC1C,GACE,GACH,IAhBC,kCAAkC,CAiBrC,CACN,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { useRef, type ForwardedRef, type ReactNode } from 'react';\nimport { useId } from 'react-aria';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.js';\nimport { Spinner } from '../spinner/spinner.js';\nimport type { CommonProps } from '../types.js';\nimport { useColumnData, useFullWidthCell } from './contexts/column-collection.js';\nimport { useTableLoading } from './contexts/loading.js';\nimport { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\n\nexport interface TableBodyProps extends CommonProps {\n  /** The rows that belong to this table body. */\n  children: ReactNode;\n}\n\nfunction TableBody(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableBodyProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  const isLoading = useTableLoading();\n\n  return (\n    <tbody {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\n      {isLoading && <TableLoader />}\n      {children}\n    </tbody>\n  );\n}\n\n/**\n * Renders a body section within a table.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableBody = forwardRef(TableBody, 'TableBody');\n\nexport { _TableBody as TableBody };\n\nfunction TableLoader() {\n  const rowKey = useId();\n\n  return (\n    <TableRowStateProvider rowKey={rowKey}>\n      <TableLoaderInner />\n    </TableRowStateProvider>\n  );\n}\n\nfunction TableLoaderInner() {\n  const loaderCellRef = useRef<HTMLTableCellElement>(null);\n  const { rowKey } = useTableRowState();\n  const { colSpan, columnKey } = useFullWidthCell(loaderCellRef);\n  // `useTableCell` requires `TableRowStateProvider`\n  const { cellProps } = useTableCell(loaderCellRef, rowKey, columnKey);\n  const columnData = useColumnData(columnKey);\n  const messages = useLocalizedMessages('table');\n\n  return (\n    <tr key=\"__cim__internal__loading-state__\">\n      <td\n        {...cellProps}\n        ref={loaderCellRef}\n        className=\"cim-table-loading-state\"\n        aria-colindex={columnData?.number}\n        colSpan={colSpan}\n        data-alignment=\"center\"\n      >\n        <div className=\"cim-table-loading-state-overlay\">\n          <Spinner\n            size=\"medium\"\n            aria-label={messages.format('loadingData')}\n            UNSAFE_style={{ height: 'min(70%, 48px)' }}\n          />\n        </div>\n      </td>\n    </tr>\n  );\n}\n"]}

package/dist/esm/components/table/table-container.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { AriaLabelingProps, CommonProps } from '../types.js';
 export interface TableContainerProps extends CommonProps, AriaLabelingProps {
     /** The contents of the container. */

package/dist/esm/components/table/table-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-container.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAElE,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,iBAAiB;IACzE,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAmBD;;;;GAIG;AACH,QAAA,MAAM,eAAe,qKAA+D,CAAC;AAErF,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC"}
+{"version":3,"file":"table-container.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA2D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhG,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,iBAAiB;IACzE,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAuED;;;;GAIG;AACH,QAAA,MAAM,eAAe,qKAA+D,CAAC;AAErF,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC"}

package/dist/esm/components/table/table-container.js

@@ -1,11 +1,53 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useObjectRef, useResizeObserver } from '@react-aria/utils';
 import clsx from 'clsx';
+import { useRef, useState } from 'react';
 import { forwardRef } from '../../forward-ref.js';
 import { withStyleProps } from '../../with-style-props.js';
 import { FocusableContainer } from '../internal/focusable-container/focusable-container.js';
+import { TableRefsProvider } from './contexts/refs.js';
 function TableContainer({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return (_jsx(FocusableContainer, { ...props, ref: ref, className: clsx('cim-table-container', UNSAFE_className), style: UNSAFE_style, scrollDirection: "horizontal", children: children }));
+    const containerRef = useObjectRef(ref);
+    const headerRef = useRef(null);
+    const [headerHeight, setHeaderHeight] = useState(40);
+    const [hasClassicHorizontalScrollbar, setHasClassicHorizontalScrollbar] = useState(false);
+    const [hasClassicVerticalScrollbar, setHasClassicVerticalScrollbar] = useState(false);
+    useResizeObserver({
+        ref: containerRef,
+        onResize: () => {
+            const element = containerRef.current;
+            if (element) {
+                setHasClassicHorizontalScrollbar(element.offsetHeight - element.clientHeight > Number.EPSILON);
+                setHasClassicVerticalScrollbar(element.offsetWidth - element.clientWidth > Number.EPSILON);
+            }
+        },
+    });
+    useLayoutEffect(() => {
+        const headerElement = headerRef.current;
+        const isSSR = typeof window === 'undefined';
+        let observer;
+        if (headerElement && !isSSR) {
+            observer = new window.ResizeObserver((entries) => {
+                if (entries[0]) {
+                    const { target } = entries[0];
+                    setHeaderHeight(target.clientHeight);
+                }
+            });
+            observer.observe(headerElement);
+        }
+        return () => {
+            if (headerElement && observer) {
+                observer.unobserve(headerElement);
+            }
+        };
+    }, [headerRef]);
+    return (_jsx(TableRefsProvider, { header: headerRef, children: _jsx("div", { className: "cim-table-container-outer", children: _jsx(FocusableContainer, { ...props, ref: containerRef, className: clsx('cim-table-container', UNSAFE_className), style: {
+                    ...UNSAFE_style,
+                    '--cim-table-header-height': `${headerHeight}px`,
+                    '--cim-table-has-classic-v-scrollbar': hasClassicVerticalScrollbar ? 1 : 0,
+                    '--cim-table-has-classic-h-scrollbar': hasClassicHorizontalScrollbar ? 1 : 0,
+                }, scrollDirection: "horizontal", children: children }) }) }));
 }
 /**
  * Renders a scrollable container that allows a table to overflow in a responsive way.

package/dist/esm/components/table/table-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-container.js","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAQ5F,SAAS,cAAc,CACrB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAuB,EAC3E,GAAiC;IAEjC,OAAO,CACL,KAAC,kBAAkB,OACb,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,CAAC,EACxD,KAAK,EAAE,YAAY,EACnB,eAAe,EAAC,YAAY,YAE3B,QAAQ,GACU,CACtB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,eAAe,GAAG,cAAc,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAErF,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\n\nexport interface TableContainerProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the container. */\n  children: ReactNode;\n}\n\nfunction TableContainer(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <FocusableContainer\n      {...props}\n      ref={ref}\n      className={clsx('cim-table-container', UNSAFE_className)}\n      style={UNSAFE_style}\n      scrollDirection=\"horizontal\"\n    >\n      {children}\n    </FocusableContainer>\n  );\n}\n\n/**\n * Renders a scrollable container that allows a table to overflow in a responsive way.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableContainer = withStyleProps(forwardRef(TableContainer), 'TableContainer');\n\nexport { _TableContainer as TableContainer };\n"]}
+{"version":3,"file":"table-container.js","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useLayoutEffect, useObjectRef, useResizeObserver } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport { type CSSProperties, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { TableRefsProvider } from './contexts/refs.js';\n\nexport interface TableContainerProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the container. */\n  children: ReactNode;\n}\n\nfunction TableContainer(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const containerRef = useObjectRef(ref);\n  const headerRef = useRef<HTMLTableSectionElement | null>(null);\n  const [headerHeight, setHeaderHeight] = useState(40);\n  const [hasClassicHorizontalScrollbar, setHasClassicHorizontalScrollbar] = useState(false);\n  const [hasClassicVerticalScrollbar, setHasClassicVerticalScrollbar] = useState(false);\n\n  useResizeObserver({\n    ref: containerRef,\n    onResize: () => {\n      const element = containerRef.current;\n      if (element) {\n        setHasClassicHorizontalScrollbar(element.offsetHeight - element.clientHeight > Number.EPSILON);\n        setHasClassicVerticalScrollbar(element.offsetWidth - element.clientWidth > Number.EPSILON);\n      }\n    },\n  });\n\n  useLayoutEffect(() => {\n    const headerElement = headerRef.current;\n    const isSSR = typeof window === 'undefined';\n\n    let observer: ResizeObserver | undefined;\n\n    if (headerElement && !isSSR) {\n      observer = new window.ResizeObserver((entries) => {\n        if (entries[0]) {\n          const { target } = entries[0];\n          setHeaderHeight(target.clientHeight);\n        }\n      });\n\n      observer.observe(headerElement);\n    }\n\n    return () => {\n      if (headerElement && observer) {\n        observer.unobserve(headerElement);\n      }\n    };\n  }, [headerRef]);\n\n  return (\n    <TableRefsProvider header={headerRef}>\n      <div className=\"cim-table-container-outer\">\n        <FocusableContainer\n          {...props}\n          ref={containerRef}\n          className={clsx('cim-table-container', UNSAFE_className)}\n          style={\n            {\n              ...UNSAFE_style,\n              '--cim-table-header-height': `${headerHeight}px`,\n              '--cim-table-has-classic-v-scrollbar': hasClassicVerticalScrollbar ? 1 : 0,\n              '--cim-table-has-classic-h-scrollbar': hasClassicHorizontalScrollbar ? 1 : 0,\n            } as CSSProperties\n          }\n          scrollDirection=\"horizontal\"\n        >\n          {children}\n        </FocusableContainer>\n      </div>\n    </TableRefsProvider>\n  );\n}\n\n/**\n * Renders a scrollable container that allows a table to overflow in a responsive way.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableContainer = withStyleProps(forwardRef(TableContainer), 'TableContainer');\n\nexport { _TableContainer as TableContainer };\n"]}

package/dist/esm/components/table/table-header.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { CommonProps } from '../types.js';
 export interface TableHeaderProps extends CommonProps {
     /** The header rows that belong to this table header. */

package/dist/esm/components/table/table-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-header.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAaD;;;;GAIG;AACH,QAAA,MAAM,YAAY,0HAAyC,CAAC;AAE5D,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}
+{"version":3,"file":"table-header.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgBD;;;;GAIG;AACH,QAAA,MAAM,YAAY,0HAAyC,CAAC;AAE5D,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}

package/dist/esm/components/table/table-header.js

@@ -1,8 +1,13 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { mergeRefs, useObjectRef } from '@react-aria/utils';
+import { useMemo } from 'react';
 import { forwardRef } from '../../forward-ref.js';
+import { useTableRefs } from './contexts/refs.js';
 function TableHeader({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    return (_jsx("thead", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, children: children }));
+    const { header: headerRef } = useTableRefs();
+    const mergedRef = useObjectRef(useMemo(() => mergeRefs(ref, headerRef), [ref, headerRef]));
+    return (_jsx("thead", { ...props, ref: mergedRef, className: UNSAFE_className, style: UNSAFE_style, children: children }));
 }
 /**
  * Renders a header section within a table.

package/dist/esm/components/table/table-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-header.js","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAQlD,SAAS,WAAW,CAClB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAoB,EACxE,GAA0C;IAE1C,OAAO,CACL,mBAAW,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,YACzE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAG,UAAU,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAE5D,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC","sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface TableHeaderProps extends CommonProps {\n  /** The header rows that belong to this table header. */\n  children: ReactNode;\n}\n\nfunction TableHeader(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableHeaderProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  return (\n    <thead {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\n      {children}\n    </thead>\n  );\n}\n\n/**\n * Renders a header section within a table.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableHeader = forwardRef(TableHeader, 'TableHeader');\n\nexport { _TableHeader as TableHeader };\n"]}
+{"version":3,"file":"table-header.js","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAqC,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAOlD,SAAS,WAAW,CAClB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAoB,EACxE,GAA0C;IAE1C,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,EAAE,CAAC;IAC7C,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,EAAE,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAE3F,OAAO,CACL,mBAAW,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,YAC/E,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAG,UAAU,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAE5D,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { mergeRefs, useObjectRef } from '@react-aria/utils';\nimport { useMemo, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { useTableRefs } from './contexts/refs.js';\n\nexport interface TableHeaderProps extends CommonProps {\n  /** The header rows that belong to this table header. */\n  children: ReactNode;\n}\n\nfunction TableHeader(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableHeaderProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  const { header: headerRef } = useTableRefs();\n  const mergedRef = useObjectRef(useMemo(() => mergeRefs(ref, headerRef), [ref, headerRef]));\n\n  return (\n    <thead {...props} ref={mergedRef} className={UNSAFE_className} style={UNSAFE_style}>\n      {children}\n    </thead>\n  );\n}\n\n/**\n * Renders a header section within a table.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableHeader = forwardRef(TableHeader, 'TableHeader');\n\nexport { _TableHeader as TableHeader };\n"]}