@cimpress-ui/react 0.2.1 → 0.3.0

package/dist/commonjs/components/table/hooks/use-table-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-table-cell.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table-cell.ts"],"names":[],"mappings":"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","sourcesContent":["import { getFocusableTreeWalker, useFocusRing } from '@react-aria/focus';\nimport { isFocusVisible } from '@react-aria/interactions';\nimport { mergeProps } from '@react-aria/utils';\nimport { type KeyboardEventHandler, useLayoutEffect, type FocusEventHandler, type RefObject } from 'react';\nimport type { FocusableElement, NativeElementProps } from '../../types.js';\nimport { useTableFocus } from '../contexts/focus.js';\nimport { focusTableChild } from '../utils/focus-table-child.js';\n\nexport interface UseTableCell {\n  cellProps: NativeElementProps<HTMLTableCellElement>;\n}\n\nexport function useTableCell(ref: RefObject<HTMLTableCellElement>, rowKey: string, columnKey: string): UseTableCell {\n  const tableFocus = useTableFocus();\n\n  const isTabbable = rowKey === tableFocus.focusedRowKey && columnKey === tableFocus.focusedColumnKey;\n\n  // Handles focusing the cell.\n  // If there is a focusable child, it is focused, otherwise the cell itself is focused.\n  const focusCell = () => {\n    if (!ref.current) {\n      return;\n    }\n\n    // If focus is already on a focusable child within the cell, early return so we don't shift focus\n    if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {\n      return;\n    }\n\n    const treeWalker = getFocusableTreeWalker(ref.current);\n    const focusable = tableFocus.childFocusStrategy === 'last' ? treeWalker.lastChild() : treeWalker.firstChild();\n\n    if (focusable) {\n      // Cell has focusable children, focus the child\n      focusTableChild(focusable as FocusableElement);\n    } else if (!ref.current.contains(document.activeElement)) {\n      // Cell has no focusable children and current focus is outside of the cell, focus the cell itself\n      focusTableChild(ref.current);\n    } else if (ref.current === document.activeElement && !isTabbable) {\n      // Focus is on the current cell, but table focus is elsewhere, update table focus state\n      tableFocus.setFocus(rowKey, columnKey);\n    }\n  };\n\n  // Focus the cell DOM node when table focus moves to this cell\n  useLayoutEffect(() => {\n    if (isTabbable && !ref.current!.contains(document.activeElement)) {\n      focusCell();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ref, isTabbable]);\n\n  const onFocus: FocusEventHandler = (e) => {\n    // Ignore focus events bubbling through portals\n    if (!e.currentTarget.contains(e.target)) {\n      return;\n    }\n\n    // If cell is already focused, return early\n    if (e.currentTarget.contains(e.relatedTarget)) {\n      return;\n    }\n\n    if (e.target !== ref.current) {\n      // If a child element of the cell receives focus, there are 3 scenarios:\n      // - focus happens through a press, we need to update table focus state to the current cell\n      // - focus happens through arrow key navigation within the table,\n      //   we do nothing as table focus state would have already been updated earlier\n      // - focus happens through tabbing into the table from outside,\n      //   we do nothing because we want to restore focus to the previously focused cell,\n      //   and overriding table focus state would make that impossible\n      if (!isFocusVisible()) {\n        tableFocus.setFocus(rowKey, columnKey);\n      }\n    } else {\n      // If the cell itself receives focus, wait a frame so that focus finishes propagating\n      // up to the tree, and move focus to a focusable child if possible.\n      requestAnimationFrame(() => {\n        if (document.activeElement === ref.current) {\n          focusCell();\n        }\n      });\n    }\n  };\n\n  // Handles keyboard navigation between focusable children within the cell.\n  const onKeyDownCapture: KeyboardEventHandler = (e) => {\n    // Ignore keyboard events bubbling through portals\n    if (!e.currentTarget.contains(e.target as Element) || !ref.current || !document.activeElement) {\n      return;\n    }\n\n    const walker = getFocusableTreeWalker(ref.current);\n    walker.currentNode = document.activeElement;\n\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n      // Move to the previous/next focusable element within the cell\n      const childElementToFocus = e.key === 'ArrowLeft' ? walker.previousNode() : walker.nextNode();\n\n      if (childElementToFocus && childElementToFocus !== ref.current) {\n        focusTableChild(childElementToFocus as FocusableElement);\n      } else {\n        // If there is no previous/next focusable element within the current cell, focus should move to the previous/next cell.\n        // This is handled by `useTable`, so we need to let the event bubble up to it.\n        // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n        // Solution: re-dispatch the event from a parent element of the current cell.\n        ref.current.parentElement!.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n      }\n    } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n      // Move to the previous/next cell in the current column.\n      // This is handled by `useTable`, so we need to let the event bubble up to it.\n      // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n      // Solution: re-dispatch the event from a parent element of the current cell.\n      ref.current.parentElement?.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n    } else {\n      // if we didn't handle anything, return early so we don't stop propagation and preventDefault\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  const { focusProps, isFocused } = useFocusRing();\n\n  const customProps: NativeElementProps<HTMLTableCellElement> = {\n    tabIndex: isTabbable ? 0 : -1,\n    onFocus,\n    onKeyDownCapture,\n    'data-cell-row-key': rowKey,\n    'data-cell-column-key': columnKey,\n    'data-focused': isFocused || undefined,\n  };\n\n  return {\n    cellProps: mergeProps(focusProps, customProps),\n  };\n}\n"]}
+{"version":3,"file":"use-table-cell.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table-cell.ts"],"names":[],"mappings":"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","sourcesContent":["import { getFocusableTreeWalker, useFocusRing } from '@react-aria/focus';\nimport { isFocusVisible } from '@react-aria/interactions';\nimport { mergeProps, useEffectEvent, useLayoutEffect } from '@react-aria/utils';\nimport { type KeyboardEventHandler, type FocusEventHandler, type RefObject, useEffect } from 'react';\nimport type { FocusableElement, NativeElementProps } from '../../types.js';\nimport { useTableFocus } from '../contexts/focus.js';\nimport { useTableRowState } from '../contexts/row-state.js';\nimport { useTableState } from '../contexts/table-state.js';\nimport { focusTableChild } from '../utils/focus-table-child.js';\n\nexport interface UseTableCell {\n  cellProps: NativeElementProps<HTMLTableCellElement>;\n}\n\nexport function useTableCell(\n  ref: RefObject<HTMLTableCellElement | null>,\n  rowKey: string,\n  columnKey: string,\n): UseTableCell {\n  const tableFocus = useTableFocus();\n  const { pendingRowSelectionState, setPendingRowSelectionState } = useTableState();\n  const { onSelectionToggle } = useTableRowState();\n\n  const isTabbable = rowKey === tableFocus.focusedRowKey && columnKey === tableFocus.focusedColumnKey;\n\n  // Handles focusing the cell.\n  // If there is a focusable child, it is focused, otherwise the cell itself is focused.\n  const focusCell = () => {\n    if (!ref.current) {\n      return;\n    }\n\n    // If there's a pending selection state, apply it to this cell's row.\n    // If this cell is a header cell, `onSelectionToggle` will be undefined, but we still want to clear the pending selection state.\n    if (pendingRowSelectionState !== undefined) {\n      onSelectionToggle?.(pendingRowSelectionState);\n      setPendingRowSelectionState(undefined);\n    }\n\n    // If focus is already on a focusable child within the cell, early return so we don't shift focus\n    if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {\n      return;\n    }\n\n    const treeWalker = getFocusableTreeWalker(ref.current);\n    const focusable = tableFocus.childFocusStrategy === 'last' ? treeWalker.lastChild() : treeWalker.firstChild();\n\n    if (focusable) {\n      // Cell has focusable children, focus the child\n      focusTableChild(focusable as FocusableElement);\n    } else if (!ref.current.contains(document.activeElement)) {\n      // Cell has no focusable children and current focus is outside of the cell, focus the cell itself\n      focusTableChild(ref.current);\n    } else if (ref.current === document.activeElement && !isTabbable) {\n      // Focus is on the current cell, but table focus is elsewhere, update table focus state\n      tableFocus.setFocus(rowKey, columnKey);\n    }\n  };\n\n  // Focus the cell DOM node when table focus moves to this cell\n  useLayoutEffect(() => {\n    if (isTabbable && !ref.current!.contains(document.activeElement)) {\n      focusCell();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ref, isTabbable]);\n\n  const resetIfFocused = useEffectEvent(() => {\n    if (isTabbable) {\n      tableFocus.setFocus('', '');\n    }\n  });\n\n  // Reset table focus when the focused cell unmounts\n  useEffect(\n    () => () => {\n      resetIfFocused();\n    },\n    [resetIfFocused],\n  );\n\n  const onFocus: FocusEventHandler = (e) => {\n    // Ignore focus events bubbling through portals\n    if (!e.currentTarget.contains(e.target)) {\n      return;\n    }\n\n    // If cell is already focused, return early.\n    // However, if focus happens as a result of a press, we need to re-run the child-focusing logic,\n    // otherwise `useFocusRing` will force the cell itself to become focused.\n    if (e.currentTarget.contains(e.relatedTarget) && isFocusVisible()) {\n      return;\n    }\n\n    // There are 3 scenarios for why a cell might receive focus:\n    // - focus happens through a press, we need to update table focus state to the current cell\n    // - focus happens through arrow key navigation within the table,\n    //   we do nothing as table focus state would have already been updated earlier\n    // - focus happens through tabbing into the table from outside,\n    //   we do nothing because we want to restore focus to the previously focused cell,\n    //   and overriding table focus state would make that impossible\n    if (!isFocusVisible()) {\n      tableFocus.setFocus(rowKey, columnKey);\n    }\n\n    if (e.target === ref.current) {\n      // If the cell itself receives focus, wait a frame so that focus finishes propagating\n      // up to the tree, and move focus to a focusable child if possible.\n      requestAnimationFrame(() => {\n        if (document.activeElement === ref.current) {\n          focusCell();\n        }\n      });\n    }\n  };\n\n  // Handles keyboard navigation between focusable children within the cell.\n  const onKeyDownCapture: KeyboardEventHandler = (e) => {\n    // Ignore keyboard events bubbling through portals\n    if (!e.currentTarget.contains(e.target as Element) || !ref.current || !document.activeElement) {\n      return;\n    }\n\n    const walker = getFocusableTreeWalker(ref.current);\n    walker.currentNode = document.activeElement;\n\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n      // Move to the previous/next focusable element within the cell\n      const childElementToFocus = e.key === 'ArrowLeft' ? walker.previousNode() : walker.nextNode();\n\n      if (childElementToFocus && childElementToFocus !== ref.current) {\n        focusTableChild(childElementToFocus as FocusableElement);\n      } else {\n        // If there is no previous/next focusable element within the current cell, focus should move to the previous/next cell.\n        // This is handled by `useTable`, so we need to let the event bubble up to it.\n        // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n        // Solution: re-dispatch the event from a parent element of the current cell.\n        ref.current.parentElement!.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n      }\n    } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n      // Move to the previous/next cell in the current column.\n      // This is handled by `useTable`, so we need to let the event bubble up to it.\n      // But we also don't want this event to reach children of the current cell, as arrow keys should be used exclusively for table navigation.\n      // Solution: re-dispatch the event from a parent element of the current cell.\n      ref.current.parentElement?.dispatchEvent(new KeyboardEvent(e.nativeEvent.type, e.nativeEvent));\n    } else {\n      // if we didn't handle anything, return early so we don't stop propagation and preventDefault\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  const { focusProps, isFocused } = useFocusRing();\n\n  const customProps: NativeElementProps<HTMLTableCellElement> = {\n    tabIndex: isTabbable ? 0 : -1,\n    onFocus,\n    onKeyDownCapture,\n    'data-cell-row-key': rowKey,\n    'data-cell-column-key': columnKey,\n    'data-focused': isFocused || undefined,\n  };\n\n  return {\n    cellProps: mergeProps(focusProps, customProps),\n  };\n}\n"]}

package/dist/commonjs/components/table/hooks/use-table.d.ts

@@ -3,5 +3,5 @@ import type { NativeElementProps } from '../../types.js';
 export interface UseTable {
     tableProps: NativeElementProps<HTMLTableElement>;
 }
-export declare function useTable(ref: RefObject<HTMLTableElement>): UseTable;
+export declare function useTable(ref: RefObject<HTMLTableElement | null>): UseTable;
 //# sourceMappingURL=use-table.d.ts.map

package/dist/commonjs/components/table/hooks/use-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-table.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAoB,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAI3E,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CAClD;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,SAAS,CAAC,gBAAgB,CAAC,GAAG,QAAQ,CAsJnE"}
+{"version":3,"file":"use-table.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAoB,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAK3E,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CAClD;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,GAAG,QAAQ,CAkK1E"}

package/dist/commonjs/components/table/hooks/use-table.js

@@ -5,9 +5,11 @@ const focus_1 = require("@react-aria/focus");
 const interactions_1 = require("@react-aria/interactions");
 const utils_1 = require("@react-aria/utils");
 const focus_js_1 = require("../contexts/focus.js");
+const table_state_js_1 = require("../contexts/table-state.js");
 const focus_table_child_js_1 = require("../utils/focus-table-child.js");
 function useTable(ref) {
     const tableFocus = (0, focus_js_1.useTableFocus)();
+    const { rowSelectionMode, onAllRowsSelectionToggle } = (0, table_state_js_1.useTableState)();
     const restoreCellFocus = (e) => {
         if (!tableFocus.focusedRowKey || !tableFocus.focusedColumnKey) {
             // User hasn't interacted with the table yet.
@@ -64,14 +66,14 @@ function useTable(ref) {
             }
             else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
                 // Focus previous/next cell in the same column
-                const selector = `[data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}']:not([data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}'])`;
+                const selector = constructColumnSelector(e.currentTarget, tableFocus.focusedRowKey, tableFocus.focusedColumnKey);
                 const walker = (0, focus_1.getFocusableTreeWalker)(e.currentTarget, { accept: (node) => node.matches(selector) });
                 walker.currentNode = focusedCellElement;
                 cellElementToFocus = e.key === 'ArrowUp' ? walker.previousNode() : walker.nextNode();
             }
             else if (e.key === 'PageUp' || e.key === 'PageDown') {
                 // Move focus up/down by 5 rows
-                const selector = `[data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}']:not([data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}'])`;
+                const selector = constructColumnSelector(e.currentTarget, tableFocus.focusedRowKey, tableFocus.focusedColumnKey);
                 const walker = (0, focus_1.getFocusableTreeWalker)(e.currentTarget, { accept: (node) => node.matches(selector) });
                 walker.currentNode = focusedCellElement;
                 const advance = e.key === 'PageUp' ? walker.previousNode.bind(walker) : walker.nextNode.bind(walker);
@@ -86,7 +88,7 @@ function useTable(ref) {
                 // otherwise, move focus to the first/last cell of the current row
                 const selector = '[data-cell-row-key][data-cell-column-key]';
                 const walker = (0, focus_1.getFocusableTreeWalker)(e.currentTarget, { accept: (node) => node.matches(selector) });
-                walker.currentNode = isCtrlKeyPressed(e) ? e.currentTarget : focusedCellElement.parentElement;
+                walker.currentNode = (0, utils_1.isCtrlKeyPressed)(e) ? e.currentTarget : focusedCellElement.parentElement;
                 cellElementToFocus = e.key === 'Home' ? walker.firstChild() : walker.lastChild();
                 newChildFocusStrategy = e.key === 'Home' ? 'first' : 'last';
             }
@@ -102,6 +104,10 @@ function useTable(ref) {
                 }
                 return;
             }
+            else if (e.key === 'a' && (0, utils_1.isCtrlKeyPressed)(e) && rowSelectionMode === 'multiple') {
+                // Select all rows
+                onAllRowsSelectionToggle?.(true);
+            }
             else {
                 // if we didn't handle anything, return early so we don't preventDefault
                 return;
@@ -132,11 +138,19 @@ function useTable(ref) {
         tableProps: (0, utils_1.mergeProps)(focusableProps, keyboardProps, customProps),
     };
 }
-// TODO: use `isCtrlKeyPressed` from `@react-aria/utils` after version upgrade
-function isCtrlKeyPressed(e) {
-    if ((0, utils_1.isMac)()) {
-        return e.metaKey;
+/** Constructs a DOM selector for cells in the same column, taking `colspan` into account. */
+function constructColumnSelector(tableElement, rowKey, columnKey) {
+    const baseSelector = `[data-cell-column-key='${CSS.escape(columnKey)}']:not([data-cell-row-key='${CSS.escape(rowKey)}'])`;
+    const columnHeader = tableElement.querySelector(`th[data-cell-row-key='${CSS.escape(rowKey)}'][data-cell-column-key='${CSS.escape(columnKey)}']`);
+    const columnSelectors = [baseSelector];
+    let currentColumn = columnHeader?.previousElementSibling;
+    while (currentColumn) {
+        const { cellColumnKey } = currentColumn.dataset;
+        if (cellColumnKey) {
+            columnSelectors.push(`[data-cell-column-key='${CSS.escape(cellColumnKey)}'][colspan]:not([data-cell-row-key='${CSS.escape(rowKey)}'])`);
+        }
+        currentColumn = currentColumn.previousElementSibling;
     }
-    return e.ctrlKey;
+    return `:is(${columnSelectors.join(', ')})`;
 }
 //# sourceMappingURL=use-table.js.map

package/dist/commonjs/components/table/hooks/use-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-table.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { getFocusableTreeWalker, useFocusable } from '@react-aria/focus';\nimport { getInteractionModality, useKeyboard } from '@react-aria/interactions';\nimport { isMac, mergeProps } from '@react-aria/utils';\nimport type { FocusEventHandler, RefObject } from 'react';\nimport type { FocusableElement, NativeElementProps } from '../../types.js';\nimport { type ChildFocusStrategy, useTableFocus } from '../contexts/focus.js';\nimport { focusTableChild } from '../utils/focus-table-child.js';\n\nexport interface UseTable {\n  tableProps: NativeElementProps<HTMLTableElement>;\n}\n\nexport function useTable(ref: RefObject<HTMLTableElement>): UseTable {\n  const tableFocus = useTableFocus();\n\n  const restoreCellFocus: FocusEventHandler = (e) => {\n    if (!tableFocus.focusedRowKey || !tableFocus.focusedColumnKey) {\n      // User hasn't interacted with the table yet.\n      // Focus the first or last cell, depending on which direction the user is tabbing from.\n      const lastFocusedElement = e.relatedTarget as Element;\n      const cellElements = e.currentTarget.querySelectorAll('[data-cell-row-key][data-cell-column-key]');\n      let cellElementToFocus: Element | undefined;\n\n      if (\n        lastFocusedElement &&\n        e.currentTarget.compareDocumentPosition(lastFocusedElement) & Node.DOCUMENT_POSITION_FOLLOWING\n      ) {\n        cellElementToFocus = cellElements[cellElements.length - 1];\n      } else {\n        cellElementToFocus = cellElements[0];\n      }\n\n      const { cellRowKey, cellColumnKey } = (cellElementToFocus as HTMLTableCellElement).dataset;\n\n      // We know the keys are defined, because we queried the DOM for elements that have them\n      tableFocus.setFocus(cellRowKey!, cellColumnKey!);\n    } else {\n      const element = e.currentTarget.querySelector(\n        `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}'][data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}']`,\n      ) as HTMLTableCellElement;\n\n      if (element) {\n        // If focus is already within the cell, don't refocus\n        if (!element.contains(document.activeElement)) {\n          focusTableChild(element);\n        }\n      }\n    }\n  };\n\n  const { focusableProps } = useFocusable(\n    {\n      onFocus: (e) => {\n        // Ignore focus events bubbling through portals\n        if (!e.currentTarget.contains(e.target)) {\n          return;\n        }\n\n        restoreCellFocus(e);\n      },\n    },\n    ref,\n  );\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: (e) => {\n      // Ignore keyboard events bubbling through portals\n      if (!e.currentTarget.contains(e.target)) {\n        return;\n      }\n\n      const focusedCellElement = e.currentTarget.querySelector(\n        `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}'][data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}']`,\n      ) as HTMLTableCellElement;\n\n      let cellElementToFocus: Node | null = null;\n      let newChildFocusStrategy: ChildFocusStrategy | undefined;\n\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n        // Focus previous/next cell in the same row\n        const selector = `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}']:not([data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}'])`;\n        const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n        walker.currentNode = focusedCellElement;\n        cellElementToFocus = e.key === 'ArrowLeft' ? walker.previousNode() : walker.nextNode();\n        newChildFocusStrategy = e.key === 'ArrowLeft' ? 'last' : 'first';\n      } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n        // Focus previous/next cell in the same column\n        const selector = `[data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}']:not([data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}'])`;\n        const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n        walker.currentNode = focusedCellElement;\n        cellElementToFocus = e.key === 'ArrowUp' ? walker.previousNode() : walker.nextNode();\n      } else if (e.key === 'PageUp' || e.key === 'PageDown') {\n        // Move focus up/down by 5 rows\n        const selector = `[data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}']:not([data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}'])`;\n        const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n        walker.currentNode = focusedCellElement;\n\n        const advance = e.key === 'PageUp' ? walker.previousNode.bind(walker) : walker.nextNode.bind(walker);\n\n        // `advance()` will do nothing if there's no appropriate node found, so it's safe to just call it 5 times\n        for (let i = 0; i < 5; i++) {\n          advance();\n        }\n\n        cellElementToFocus = walker.currentNode;\n      } else if (e.key === 'Home' || e.key === 'End') {\n        // If Ctrl/Cmd is pressed, move focus to the first/last cell of the table;\n        // otherwise, move focus to the first/last cell of the current row\n        const selector = '[data-cell-row-key][data-cell-column-key]';\n        const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n        walker.currentNode = isCtrlKeyPressed(e) ? e.currentTarget : focusedCellElement.parentElement!;\n        cellElementToFocus = e.key === 'Home' ? walker.firstChild() : walker.lastChild();\n        newChildFocusStrategy = e.key === 'Home' ? 'first' : 'last';\n      } else if (e.key === 'Tab') {\n        // Table is supposed to be a single Tab stop, but cells may contain elements that are tabbable (checkboxes, buttons, menus, etc.).\n        // We don't control the rendering of these elements, so we can't override their tabIndex to prevent tabbing.\n        // Instead, we detect when Tab key is pressed, and move focus manually to the guard element before/after the table,\n        // so that the browser default behavior will apply starting from that element rather than the currently focused one.\n        const tableElement = e.currentTarget as HTMLTableElement;\n        const guardElement = e.shiftKey ? tableElement.previousElementSibling : tableElement.nextElementSibling;\n\n        if (guardElement) {\n          focusTableChild(guardElement as FocusableElement);\n        }\n\n        return;\n      } else {\n        // if we didn't handle anything, return early so we don't preventDefault\n        return;\n      }\n\n      if (cellElementToFocus) {\n        const { cellRowKey, cellColumnKey } = (cellElementToFocus as HTMLTableCellElement).dataset;\n\n        // We know the keys are defined, because we queried the DOM for elements that have them\n        tableFocus.setFocus(cellRowKey!, cellColumnKey!, newChildFocusStrategy);\n      }\n\n      e.preventDefault();\n    },\n  });\n\n  const customProps: NativeElementProps<HTMLTableElement> = {\n    role: 'grid',\n    // If no cell is tabbable within the table, make the table itself tabbable,\n    // otherwise the Tab key will just skip it\n    tabIndex: tableFocus.focusedRowKey && tableFocus.focusedColumnKey ? -1 : 0,\n    onFocusCapture: (e) => {\n      // If we're navigating into the table with a keyboard, focus the last focused cell instead of the first tabbable element\n      if (\n        getInteractionModality() === 'keyboard' &&\n        !e.currentTarget.contains(e.relatedTarget) &&\n        e.currentTarget.contains(e.target)\n      ) {\n        restoreCellFocus(e);\n      }\n    },\n  };\n\n  return {\n    tableProps: mergeProps(focusableProps, keyboardProps, customProps),\n  };\n}\n\n// TODO: use `isCtrlKeyPressed` from `@react-aria/utils` after version upgrade\nfunction isCtrlKeyPressed(e: { ctrlKey: boolean; metaKey: boolean }): boolean {\n  if (isMac()) {\n    return e.metaKey;\n  }\n\n  return e.ctrlKey;\n}\n"]}
+{"version":3,"file":"use-table.js","sourceRoot":"","sources":["../../../../../src/components/table/hooks/use-table.ts"],"names":[],"mappings":"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","sourcesContent":["import { getFocusableTreeWalker, useFocusable } from '@react-aria/focus';\nimport { getInteractionModality, useKeyboard } from '@react-aria/interactions';\nimport { isCtrlKeyPressed, mergeProps } from '@react-aria/utils';\nimport type { FocusEventHandler, RefObject } from 'react';\nimport type { FocusableElement, NativeElementProps } from '../../types.js';\nimport { type ChildFocusStrategy, useTableFocus } from '../contexts/focus.js';\nimport { useTableState } from '../contexts/table-state.js';\nimport { focusTableChild } from '../utils/focus-table-child.js';\n\nexport interface UseTable {\n  tableProps: NativeElementProps<HTMLTableElement>;\n}\n\nexport function useTable(ref: RefObject<HTMLTableElement | null>): UseTable {\n  const tableFocus = useTableFocus();\n  const { rowSelectionMode, onAllRowsSelectionToggle } = useTableState();\n\n  const restoreCellFocus: FocusEventHandler = (e) => {\n    if (!tableFocus.focusedRowKey || !tableFocus.focusedColumnKey) {\n      // User hasn't interacted with the table yet.\n      // Focus the first or last cell, depending on which direction the user is tabbing from.\n      const lastFocusedElement = e.relatedTarget as Element;\n      const cellElements = e.currentTarget.querySelectorAll('[data-cell-row-key][data-cell-column-key]');\n      let cellElementToFocus: Element | undefined;\n\n      if (\n        lastFocusedElement &&\n        e.currentTarget.compareDocumentPosition(lastFocusedElement) & Node.DOCUMENT_POSITION_FOLLOWING\n      ) {\n        cellElementToFocus = cellElements[cellElements.length - 1];\n      } else {\n        cellElementToFocus = cellElements[0];\n      }\n\n      const { cellRowKey, cellColumnKey } = (cellElementToFocus as HTMLTableCellElement).dataset;\n\n      // We know the keys are defined, because we queried the DOM for elements that have them\n      tableFocus.setFocus(cellRowKey!, cellColumnKey!);\n    } else {\n      const element = e.currentTarget.querySelector(\n        `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}'][data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}']`,\n      ) as HTMLTableCellElement;\n\n      if (element) {\n        // If focus is already within the cell, don't refocus\n        if (!element.contains(document.activeElement)) {\n          focusTableChild(element);\n        }\n      }\n    }\n  };\n\n  const { focusableProps } = useFocusable(\n    {\n      onFocus: (e) => {\n        // Ignore focus events bubbling through portals\n        if (!e.currentTarget.contains(e.target)) {\n          return;\n        }\n\n        restoreCellFocus(e);\n      },\n    },\n    ref,\n  );\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: (e) => {\n      // Ignore keyboard events bubbling through portals\n      if (!e.currentTarget.contains(e.target)) {\n        return;\n      }\n\n      const focusedCellElement = e.currentTarget.querySelector(\n        `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}'][data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}']`,\n      ) as HTMLTableCellElement;\n\n      let cellElementToFocus: Node | null = null;\n      let newChildFocusStrategy: ChildFocusStrategy | undefined;\n\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n        // Focus previous/next cell in the same row\n        const selector = `[data-cell-row-key='${CSS.escape(tableFocus.focusedRowKey)}']:not([data-cell-column-key='${CSS.escape(tableFocus.focusedColumnKey)}'])`;\n        const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n        walker.currentNode = focusedCellElement;\n        cellElementToFocus = e.key === 'ArrowLeft' ? walker.previousNode() : walker.nextNode();\n        newChildFocusStrategy = e.key === 'ArrowLeft' ? 'last' : 'first';\n      } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n        // Focus previous/next cell in the same column\n        const selector = constructColumnSelector(\n          e.currentTarget,\n          tableFocus.focusedRowKey,\n          tableFocus.focusedColumnKey,\n        );\n        const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n        walker.currentNode = focusedCellElement;\n        cellElementToFocus = e.key === 'ArrowUp' ? walker.previousNode() : walker.nextNode();\n      } else if (e.key === 'PageUp' || e.key === 'PageDown') {\n        // Move focus up/down by 5 rows\n        const selector = constructColumnSelector(\n          e.currentTarget,\n          tableFocus.focusedRowKey,\n          tableFocus.focusedColumnKey,\n        );\n        const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n        walker.currentNode = focusedCellElement;\n\n        const advance = e.key === 'PageUp' ? walker.previousNode.bind(walker) : walker.nextNode.bind(walker);\n\n        // `advance()` will do nothing if there's no appropriate node found, so it's safe to just call it 5 times\n        for (let i = 0; i < 5; i++) {\n          advance();\n        }\n\n        cellElementToFocus = walker.currentNode;\n      } else if (e.key === 'Home' || e.key === 'End') {\n        // If Ctrl/Cmd is pressed, move focus to the first/last cell of the table;\n        // otherwise, move focus to the first/last cell of the current row\n        const selector = '[data-cell-row-key][data-cell-column-key]';\n        const walker = getFocusableTreeWalker(e.currentTarget, { accept: (node) => node.matches(selector) });\n        walker.currentNode = isCtrlKeyPressed(e) ? e.currentTarget : focusedCellElement.parentElement!;\n        cellElementToFocus = e.key === 'Home' ? walker.firstChild() : walker.lastChild();\n        newChildFocusStrategy = e.key === 'Home' ? 'first' : 'last';\n      } else if (e.key === 'Tab') {\n        // Table is supposed to be a single Tab stop, but cells may contain elements that are tabbable (checkboxes, buttons, menus, etc.).\n        // We don't control the rendering of these elements, so we can't override their tabIndex to prevent tabbing.\n        // Instead, we detect when Tab key is pressed, and move focus manually to the guard element before/after the table,\n        // so that the browser default behavior will apply starting from that element rather than the currently focused one.\n        const tableElement = e.currentTarget as HTMLTableElement;\n        const guardElement = e.shiftKey ? tableElement.previousElementSibling : tableElement.nextElementSibling;\n\n        if (guardElement) {\n          focusTableChild(guardElement as FocusableElement);\n        }\n\n        return;\n      } else if (e.key === 'a' && isCtrlKeyPressed(e) && rowSelectionMode === 'multiple') {\n        // Select all rows\n        onAllRowsSelectionToggle?.(true);\n      } else {\n        // if we didn't handle anything, return early so we don't preventDefault\n        return;\n      }\n\n      if (cellElementToFocus) {\n        const { cellRowKey, cellColumnKey } = (cellElementToFocus as HTMLTableCellElement).dataset;\n\n        // We know the keys are defined, because we queried the DOM for elements that have them\n        tableFocus.setFocus(cellRowKey!, cellColumnKey!, newChildFocusStrategy);\n      }\n\n      e.preventDefault();\n    },\n  });\n\n  const customProps: NativeElementProps<HTMLTableElement> = {\n    role: 'grid',\n    // If no cell is tabbable within the table, make the table itself tabbable,\n    // otherwise the Tab key will just skip it\n    tabIndex: tableFocus.focusedRowKey && tableFocus.focusedColumnKey ? -1 : 0,\n    onFocusCapture: (e) => {\n      // If we're navigating into the table with a keyboard, focus the last focused cell instead of the first tabbable element\n      if (\n        getInteractionModality() === 'keyboard' &&\n        !e.currentTarget.contains(e.relatedTarget) &&\n        e.currentTarget.contains(e.target)\n      ) {\n        restoreCellFocus(e);\n      }\n    },\n  };\n\n  return {\n    tableProps: mergeProps(focusableProps, keyboardProps, customProps),\n  };\n}\n\n/** Constructs a DOM selector for cells in the same column, taking `colspan` into account. */\nfunction constructColumnSelector(tableElement: HTMLTableElement, rowKey: string, columnKey: string): string {\n  const baseSelector = `[data-cell-column-key='${CSS.escape(columnKey)}']:not([data-cell-row-key='${CSS.escape(rowKey)}'])`;\n  const columnHeader = tableElement.querySelector(\n    `th[data-cell-row-key='${CSS.escape(rowKey)}'][data-cell-column-key='${CSS.escape(columnKey)}']`,\n  );\n\n  const columnSelectors: string[] = [baseSelector];\n\n  let currentColumn = columnHeader?.previousElementSibling;\n\n  while (currentColumn) {\n    const { cellColumnKey } = (currentColumn as HTMLElement).dataset;\n\n    if (cellColumnKey) {\n      columnSelectors.push(\n        `[data-cell-column-key='${CSS.escape(cellColumnKey)}'][colspan]:not([data-cell-row-key='${CSS.escape(rowKey)}'])`,\n      );\n    }\n\n    currentColumn = currentColumn.previousElementSibling;\n  }\n\n  return `:is(${columnSelectors.join(', ')})`;\n}\n"]}

package/dist/commonjs/components/table/table-all-rows-selector.d.ts

@@ -0,0 +1,11 @@
+import type { CommonProps, LabellableProps } from '../types.js';
+export interface TableAllRowsSelectorProps extends CommonProps, Omit<LabellableProps, 'label'> {
+}
+/**
+ * Controls the selection state of all rows within a table.
+ *
+ * See [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+declare const _TableAllRowsSelector: (props: TableAllRowsSelectorProps & import("react").RefAttributes<HTMLLabelElement>) => import("react").JSX.Element | null;
+export { _TableAllRowsSelector as TableAllRowsSelector };
+//# sourceMappingURL=table-all-rows-selector.d.ts.map

package/dist/commonjs/components/table/table-all-rows-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-all-rows-selector.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-all-rows-selector.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGhE,MAAM,WAAW,yBAA0B,SAAQ,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;CAAG;AAoBjG;;;;GAIG;AACH,QAAA,MAAM,qBAAqB,4HAA2D,CAAC;AAEvF,OAAO,EAAE,qBAAqB,IAAI,oBAAoB,EAAE,CAAC"}

package/dist/commonjs/components/table/table-all-rows-selector.js

@@ -0,0 +1,23 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableAllRowsSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const checkbox_js_1 = require("../checkbox/checkbox.js");
+const table_state_js_1 = require("./contexts/table-state.js");
+function TableAllRowsSelector(props, ref) {
+    const { rowSelectionMode, areAllRowsSelected, areSomeRowsSelected, onAllRowsSelectionToggle } = (0, table_state_js_1.useTableState)();
+    if (rowSelectionMode !== 'multiple') {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(checkbox_js_1.Checkbox, { ...props, ref: ref, isSelected: areAllRowsSelected, isIndeterminate: areSomeRowsSelected, onChange: onAllRowsSelectionToggle }));
+}
+/**
+ * Controls the selection state of all rows within a table.
+ *
+ * See [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _TableAllRowsSelector = (0, forward_ref_js_1.forwardRef)(TableAllRowsSelector, 'TableAllRowsSelector');
+exports.TableAllRowsSelector = _TableAllRowsSelector;
+//# sourceMappingURL=table-all-rows-selector.js.map

package/dist/commonjs/components/table/table-all-rows-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-all-rows-selector.js","sourceRoot":"","sources":["../../../../src/components/table/table-all-rows-selector.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAGb,yDAAkD;AAClD,yDAAmD;AAEnD,8DAA0D;AAI1D,SAAS,oBAAoB,CAAC,KAAgC,EAAE,GAAmC;IACjG,MAAM,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,GAAG,IAAA,8BAAa,GAAE,CAAC;IAEhH,IAAI,gBAAgB,KAAK,UAAU,EAAE,CAAC;QACpC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,uBAAC,sBAAQ,OACH,KAAK,EACT,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,kBAAkB,EAC9B,eAAe,EAAE,mBAAmB,EACpC,QAAQ,EAAE,wBAAwB,GAClC,CACH,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,qBAAqB,GAAG,IAAA,2BAAU,EAAC,oBAAoB,EAAE,sBAAsB,CAAC,CAAC;AAErD,qDAAoB","sourcesContent":["'use client';\n\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { Checkbox } from '../checkbox/checkbox.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\nimport { useTableState } from './contexts/table-state.js';\n\nexport interface TableAllRowsSelectorProps extends CommonProps, Omit<LabellableProps, 'label'> {}\n\nfunction TableAllRowsSelector(props: TableAllRowsSelectorProps, ref: ForwardedRef<HTMLLabelElement>) {\n  const { rowSelectionMode, areAllRowsSelected, areSomeRowsSelected, onAllRowsSelectionToggle } = useTableState();\n\n  if (rowSelectionMode !== 'multiple') {\n    return null;\n  }\n\n  return (\n    <Checkbox\n      {...props}\n      ref={ref}\n      isSelected={areAllRowsSelected}\n      isIndeterminate={areSomeRowsSelected}\n      onChange={onAllRowsSelectionToggle}\n    />\n  );\n}\n\n/**\n * Controls the selection state of all rows within a table.\n *\n * See [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableAllRowsSelector = forwardRef(TableAllRowsSelector, 'TableAllRowsSelector');\n\nexport { _TableAllRowsSelector as TableAllRowsSelector };\n"]}

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

@@ -1,26 +1,19 @@
 import type { ReactNode } from 'react';
 import type { CommonProps } from '../types.js';
-export interface UNSTABLE_TableBodyCellProps extends CommonProps {
+export interface TableBodyCellProps extends CommonProps {
+    /** The contents of the cell. */
     children: ReactNode;
     /**
      * A unique identifier for the column that this cell belongs to.
      * Cells that belong to the same column must have the same `columnKey`.
      */
     columnKey: string;
-    /**
-     * The position of the column that this cell belongs to within the full dataset.
-     *
-     * Provide this value if your table presents a subset of columns, such as when the user toggles column visibility.
-     *
-     * This number must be:
-     * - greater than or equal to `1`
-     * - greater than the `columnNumber` of any previous cells in the current row
-     * - less than or equal to the `totalColumnCount` of the parent `Table`
-     *
-     * Use together with `totalColumnCount` on the `Table` component.
-     */
-    columnNumber?: number;
 }
-declare const _UNSTABLE_TableBodyCell: (props: UNSTABLE_TableBodyCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").JSX.Element | null;
-export { _UNSTABLE_TableBodyCell as UNSTABLE_TableBodyCell };
+/**
+ * Renders a cell within a table body row.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+declare const _TableBodyCell: (props: TableBodyCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").JSX.Element | null;
+export { _TableBodyCell as TableBodyCell };
 //# sourceMappingURL=table-body-cell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"table-body-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-cell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,WAAW,2BAA4B,SAAQ,WAAW;IAC9D,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAuBD,QAAA,MAAM,uBAAuB,kIAAsD,CAAC;AAEpF,OAAO,EAAE,uBAAuB,IAAI,sBAAsB,EAAE,CAAC"}
+{"version":3,"file":"table-body-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-cell.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK/C,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAyBD;;;;GAIG;AACH,QAAA,MAAM,cAAc,yHAA6C,CAAC;AAElE,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,CAAC"}

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

@@ -1,17 +1,25 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_TableBodyCell = void 0;
+exports.TableBodyCell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("@react-aria/utils");
 const forward_ref_js_1 = require("../../forward-ref.js");
+const column_collection_js_1 = require("./contexts/column-collection.js");
 const row_state_js_1 = require("./contexts/row-state.js");
 const use_table_cell_js_1 = require("./hooks/use-table-cell.js");
-function UNSTABLE_TableBodyCell({ children, UNSAFE_className, UNSAFE_style, columnKey, columnNumber, ...props }, ref) {
+function TableBodyCell({ children, UNSAFE_className, UNSAFE_style, columnKey, ...props }, ref) {
     const cellRef = (0, utils_1.useObjectRef)(ref);
     const { rowKey } = (0, row_state_js_1.useTableRowState)();
     const { cellProps } = (0, use_table_cell_js_1.useTableCell)(cellRef, rowKey, columnKey);
-    return ((0, jsx_runtime_1.jsx)("td", { ...(0, utils_1.mergeProps)(props, cellProps), ref: cellRef, className: UNSAFE_className, style: UNSAFE_style, "aria-colindex": columnNumber, children: children }));
+    const columnData = (0, column_collection_js_1.useColumnData)(columnKey);
+    return ((0, jsx_runtime_1.jsx)("td", { ...(0, utils_1.mergeProps)(props, cellProps), ref: cellRef, className: UNSAFE_className, style: columnData?.width !== undefined ? { ...UNSAFE_style, width: columnData.width } : UNSAFE_style, "aria-colindex": columnData?.number, "data-alignment": columnData?.contentAlignment, children: children }));
 }
-const _UNSTABLE_TableBodyCell = (0, forward_ref_js_1.forwardRef)(UNSTABLE_TableBodyCell, 'TableBodyCell');
-exports.UNSTABLE_TableBodyCell = _UNSTABLE_TableBodyCell;
+/**
+ * Renders a cell within a table body row.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _TableBodyCell = (0, forward_ref_js_1.forwardRef)(TableBodyCell, 'TableBodyCell');
+exports.TableBodyCell = _TableBodyCell;
 //# sourceMappingURL=table-body-cell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"table-body-cell.js","sourceRoot":"","sources":["../../../../src/components/table/table-body-cell.tsx"],"names":[],"mappings":";;;;AAAA,6CAA6D;AAE7D,yDAAkD;AAElD,0DAA2D;AAC3D,iEAAyD;AAwBzD,SAAS,sBAAsB,CAC7B,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,EAA+B,EAC5G,GAAuC;IAEvC,MAAM,OAAO,GAAG,IAAA,oBAAY,EAAC,GAAG,CAAC,CAAC;IAClC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,+BAAgB,GAAE,CAAC;IACtC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,gCAAY,EAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IAE/D,OAAO,CACL,kCACM,IAAA,kBAAU,EAAC,KAAK,EAAE,SAAS,CAAC,EAChC,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,mBACJ,YAAY,YAE1B,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAED,MAAM,uBAAuB,GAAG,IAAA,2BAAU,EAAC,sBAAsB,EAAE,eAAe,CAAC,CAAC;AAEhD,yDAAsB","sourcesContent":["import { mergeProps, useObjectRef } from '@react-aria/utils';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { useTableRowState } from './contexts/row-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\n\nexport interface UNSTABLE_TableBodyCellProps extends CommonProps {\n  children: ReactNode;\n  /**\n   * A unique identifier for the column that this cell belongs to.\n   * Cells that belong to the same column must have the same `columnKey`.\n   */\n  columnKey: string;\n  /**\n   * The position of the column that this cell belongs to within the full dataset.\n   *\n   * Provide this value if your table presents a subset of columns, such as when the user toggles column visibility.\n   *\n   * This number must be:\n   * - greater than or equal to `1`\n   * - greater than the `columnNumber` of any previous cells in the current row\n   * - less than or equal to the `totalColumnCount` of the parent `Table`\n   *\n   * Use together with `totalColumnCount` on the `Table` component.\n   */\n  columnNumber?: number;\n}\n\nfunction UNSTABLE_TableBodyCell(\n  { children, UNSAFE_className, UNSAFE_style, columnKey, columnNumber, ...props }: UNSTABLE_TableBodyCellProps,\n  ref: ForwardedRef<HTMLTableCellElement>,\n) {\n  const cellRef = useObjectRef(ref);\n  const { rowKey } = useTableRowState();\n  const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n\n  return (\n    <td\n      {...mergeProps(props, cellProps)}\n      ref={cellRef}\n      className={UNSAFE_className}\n      style={UNSAFE_style}\n      aria-colindex={columnNumber}\n    >\n      {children}\n    </td>\n  );\n}\n\nconst _UNSTABLE_TableBodyCell = forwardRef(UNSTABLE_TableBodyCell, 'TableBodyCell');\n\nexport { _UNSTABLE_TableBodyCell as UNSTABLE_TableBodyCell };\n"]}
+{"version":3,"file":"table-body-cell.js","sourceRoot":"","sources":["../../../../src/components/table/table-body-cell.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,6CAA6D;AAE7D,yDAAkD;AAElD,0EAAgE;AAChE,0DAA2D;AAC3D,iEAAyD;AAYzD,SAAS,aAAa,CACpB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAsB,EACrF,GAAuC;IAEvC,MAAM,OAAO,GAAG,IAAA,oBAAY,EAAC,GAAG,CAAC,CAAC;IAClC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,+BAAgB,GAAE,CAAC;IACtC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,gCAAY,EAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IAC/D,MAAM,UAAU,GAAG,IAAA,oCAAa,EAAC,SAAS,CAAC,CAAC;IAE5C,OAAO,CACL,kCACM,IAAA,kBAAU,EAAC,KAAK,EAAE,SAAS,CAAC,EAChC,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,UAAU,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,YAAY,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,YAAY,mBACrF,UAAU,EAAE,MAAM,oBACjB,UAAU,EAAE,gBAAgB,YAE3C,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,cAAc,GAAG,IAAA,2BAAU,EAAC,aAAa,EAAE,eAAe,CAAC,CAAC;AAEvC,uCAAa","sourcesContent":["'use client';\n\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { useColumnData } from './contexts/column-collection.js';\nimport { useTableRowState } from './contexts/row-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\n\nexport interface TableBodyCellProps extends CommonProps {\n  /** The contents of the cell. */\n  children: ReactNode;\n  /**\n   * A unique identifier for the column that this cell belongs to.\n   * Cells that belong to the same column must have the same `columnKey`.\n   */\n  columnKey: string;\n}\n\nfunction TableBodyCell(\n  { children, UNSAFE_className, UNSAFE_style, columnKey, ...props }: TableBodyCellProps,\n  ref: ForwardedRef<HTMLTableCellElement>,\n) {\n  const cellRef = useObjectRef(ref);\n  const { rowKey } = useTableRowState();\n  const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n  const columnData = useColumnData(columnKey);\n\n  return (\n    <td\n      {...mergeProps(props, cellProps)}\n      ref={cellRef}\n      className={UNSAFE_className}\n      style={columnData?.width !== undefined ? { ...UNSAFE_style, width: columnData.width } : UNSAFE_style}\n      aria-colindex={columnData?.number}\n      data-alignment={columnData?.contentAlignment}\n    >\n      {children}\n    </td>\n  );\n}\n\n/**\n * Renders a cell within a table body row.\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 _TableBodyCell = forwardRef(TableBodyCell, 'TableBodyCell');\n\nexport { _TableBodyCell as TableBodyCell };\n"]}

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

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import type { CommonProps } from '../types.js';
+export interface TableBodyRowProps extends CommonProps {
+    /** The cells that belong to this row. */
+    children: ReactNode;
+    /**
+     * The row's position within the full dataset, including headers.
+     *
+     * Provide this value if your table presents a subset of rows, such as when using pagination.
+     *
+     * This number must be:
+     * - greater than or equal to `1`
+     * - greater than the `rowNumber` of any previous rows
+     * - less than or equal to the `totalRowCount` of the parent `Table`
+     *
+     * Use together with `totalRowCount` on the `Table` component.
+     */
+    rowNumber?: number;
+    /**
+     * Whether the row is selected.
+     *
+     * This value will be ignored if `rowSelectionMode` on the `Table` component is set to `'none'`.
+     */
+    isSelected?: boolean;
+    /**
+     * A function called when the row's selection state should change.
+     *
+     * If called without an argument, you are free to pick the new selection state based on your own logic.
+     * If called with an argument, you must set the selection state to the provided value.
+     */
+    onSelectionToggle?: (value?: boolean) => void;
+}
+/**
+ * Renders a row within a table body.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+declare const _TableBodyRow: (props: TableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").JSX.Element | null;
+export { _TableBodyRow as TableBodyRow };
+//# sourceMappingURL=table-body-row.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-body-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK/C,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAoBD;;;;GAIG;AACH,QAAA,MAAM,aAAa,uHAA2C,CAAC;AAwB/D,OAAO,EAAE,aAAa,IAAI,YAAY,EAAE,CAAC"}

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

@@ -0,0 +1,28 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableBodyRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@react-aria/utils");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const row_state_js_1 = require("./contexts/row-state.js");
+const table_state_js_1 = require("./contexts/table-state.js");
+const use_selectable_row_js_1 = require("./hooks/use-selectable-row.js");
+function TableBodyRow({ isSelected, onSelectionToggle, ...props }, ref) {
+    const rowKey = (0, utils_1.useId)();
+    return ((0, jsx_runtime_1.jsx)(row_state_js_1.TableRowStateProvider, { rowKey: rowKey, isSelected: isSelected, onSelectionToggle: onSelectionToggle, children: (0, jsx_runtime_1.jsx)(TableBodyRowInner, { props: props, forwardedRef: ref }) }));
+}
+/**
+ * Renders a row within a table body.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _TableBodyRow = (0, forward_ref_js_1.forwardRef)(TableBodyRow, 'TableBodyRow');
+exports.TableBodyRow = _TableBodyRow;
+function TableBodyRowInner({ props: { children, UNSAFE_className, UNSAFE_style, rowNumber, ...props }, forwardedRef, }) {
+    const { rowSelectionMode } = (0, table_state_js_1.useTableState)();
+    const { isSelected } = (0, row_state_js_1.useTableRowState)();
+    const { rowProps } = (0, use_selectable_row_js_1.useSelectableRow)();
+    return ((0, jsx_runtime_1.jsx)("tr", { ...(0, utils_1.mergeProps)(rowProps, props), ref: forwardedRef, className: UNSAFE_className, style: UNSAFE_style, "aria-rowindex": rowNumber, "aria-selected": rowSelectionMode !== 'none' ? (isSelected ?? false) : undefined, children: children }));
+}
+//# sourceMappingURL=table-body-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-body-row.js","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,6CAAsD;AAEtD,yDAAkD;AAElD,0DAAkF;AAClF,8DAA0D;AAC1D,yEAAiE;AAiCjE,SAAS,YAAY,CACnB,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,KAAK,EAAqB,EAC9D,GAAsC;IAEtC,MAAM,MAAM,GAAG,IAAA,aAAK,GAAE,CAAC;IAEvB,OAAO,CACL,uBAAC,oCAAqB,IAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,iBAAiB,YACjG,uBAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,GAChC,CACzB,CAAC;AACJ,CAAC;AAOD;;;;GAIG;AACH,MAAM,aAAa,GAAG,IAAA,2BAAU,EAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAwBrC,qCAAY;AAtBtC,SAAS,iBAAiB,CAAC,EACzB,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACxE,YAAY,GACW;IACvB,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,8BAAa,GAAE,CAAC;IAC7C,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,+BAAgB,GAAE,CAAC;IAC1C,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,wCAAgB,GAAE,CAAC;IAExC,OAAO,CACL,kCACM,IAAA,kBAAU,EAAC,QAAQ,EAAE,KAAK,CAAC,EAC/B,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,mBACJ,SAAS,mBACT,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,YAE7E,QAAQ,GACN,CACN,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { mergeProps, useId } from '@react-aria/utils';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';\nimport { useTableState } from './contexts/table-state.js';\nimport { useSelectableRow } from './hooks/use-selectable-row.js';\n\nexport interface TableBodyRowProps extends CommonProps {\n  /** The cells that belong to this row. */\n  children: ReactNode;\n  /**\n   * The row's position within the full dataset, including headers.\n   *\n   * Provide this value if your table presents a subset of rows, such as when using pagination.\n   *\n   * This number must be:\n   * - greater than or equal to `1`\n   * - greater than the `rowNumber` of any previous rows\n   * - less than or equal to the `totalRowCount` of the parent `Table`\n   *\n   * Use together with `totalRowCount` on the `Table` component.\n   */\n  rowNumber?: number;\n  /**\n   * Whether the row is selected.\n   *\n   * This value will be ignored if `rowSelectionMode` on the `Table` component is set to `'none'`.\n   */\n  isSelected?: boolean;\n  /**\n   * A function called when the row's selection state should change.\n   *\n   * If called without an argument, you are free to pick the new selection state based on your own logic.\n   * If called with an argument, you must set the selection state to the provided value.\n   */\n  onSelectionToggle?: (value?: boolean) => void;\n}\n\nfunction TableBodyRow(\n  { isSelected, onSelectionToggle, ...props }: TableBodyRowProps,\n  ref: ForwardedRef<HTMLTableRowElement>,\n) {\n  const rowKey = useId();\n\n  return (\n    <TableRowStateProvider rowKey={rowKey} isSelected={isSelected} onSelectionToggle={onSelectionToggle}>\n      <TableBodyRowInner props={props} forwardedRef={ref} />\n    </TableRowStateProvider>\n  );\n}\n\ninterface TableBodyRowInnerProps {\n  props: Omit<TableBodyRowProps, 'isSelected' | 'onSelectionToggle'>;\n  forwardedRef: ForwardedRef<HTMLTableRowElement>;\n}\n\n/**\n * Renders a row within a table body.\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 _TableBodyRow = forwardRef(TableBodyRow, 'TableBodyRow');\n\nfunction TableBodyRowInner({\n  props: { children, UNSAFE_className, UNSAFE_style, rowNumber, ...props },\n  forwardedRef,\n}: TableBodyRowInnerProps) {\n  const { rowSelectionMode } = useTableState();\n  const { isSelected } = useTableRowState();\n  const { rowProps } = useSelectableRow();\n\n  return (\n    <tr\n      {...mergeProps(rowProps, props)}\n      ref={forwardedRef}\n      className={UNSAFE_className}\n      style={UNSAFE_style}\n      aria-rowindex={rowNumber}\n      aria-selected={rowSelectionMode !== 'none' ? (isSelected ?? false) : undefined}\n    >\n      {children}\n    </tr>\n  );\n}\n\nexport { _TableBodyRow as TableBodyRow };\n"]}

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

@@ -1,8 +1,14 @@
 import type { ReactNode } from 'react';
 import type { CommonProps } from '../types.js';
-export interface UNSTABLE_TableBodyProps extends CommonProps {
+export interface TableBodyProps extends CommonProps {
+    /** The rows that belong to this table body. */
     children: ReactNode;
 }
-declare const _UNSTABLE_TableBody: (props: UNSTABLE_TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>) => import("react").JSX.Element | null;
-export { _UNSTABLE_TableBody as UNSTABLE_TableBody };
+/**
+ * Renders a body section within a table.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+declare const _TableBody: (props: TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>) => import("react").JSX.Element | null;
+export { _TableBody as TableBody };
 //# sourceMappingURL=table-body.d.ts.map

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":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAaD,QAAA,MAAM,mBAAmB,iIAA8C,CAAC;AAExE,OAAO,EAAE,mBAAmB,IAAI,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body.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,cAAe,SAAQ,WAAW;IACjD,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAaD;;;;GAIG;AACH,QAAA,MAAM,UAAU,wHAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

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

@@ -1,11 +1,17 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_TableBody = void 0;
+exports.TableBody = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const forward_ref_js_1 = require("../../forward-ref.js");
-function UNSTABLE_TableBody({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+function TableBody({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     return ((0, jsx_runtime_1.jsx)("tbody", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, children: children }));
 }
-const _UNSTABLE_TableBody = (0, forward_ref_js_1.forwardRef)(UNSTABLE_TableBody, 'TableBody');
-exports.UNSTABLE_TableBody = _UNSTABLE_TableBody;
+/**
+ * Renders a body section within a table.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _TableBody = (0, forward_ref_js_1.forwardRef)(TableBody, 'TableBody');
+exports.TableBody = _TableBody;
 //# 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":";;;;AACA,yDAAkD;AAOlD,SAAS,kBAAkB,CACzB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA2B,EAC/E,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,MAAM,mBAAmB,GAAG,IAAA,2BAAU,EAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC;AAExC,iDAAkB","sourcesContent":["import type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_TableBodyProps extends CommonProps {\n  children: ReactNode;\n}\n\nfunction UNSTABLE_TableBody(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_TableBodyProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  return (\n    <tbody {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\n      {children}\n    </tbody>\n  );\n}\n\nconst _UNSTABLE_TableBody = forwardRef(UNSTABLE_TableBody, 'TableBody');\n\nexport { _UNSTABLE_TableBody as UNSTABLE_TableBody };\n"]}
+{"version":3,"file":"table-body.js","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAGb,yDAAkD;AAQlD,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EACtE,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,UAAU,GAAG,IAAA,2BAAU,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE/B,+BAAS","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 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  return (\n    <tbody {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\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"]}

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

@@ -1,8 +1,14 @@
-import { type ReactNode } from 'react';
-import type { CommonProps, LabellableProps } from '../types.js';
-export interface UNSTABLE_TableContainerProps extends CommonProps, Omit<LabellableProps, 'label'> {
+import type { ReactNode } from 'react';
+import type { AriaLabelingProps, CommonProps } from '../types.js';
+export interface TableContainerProps extends CommonProps, AriaLabelingProps {
+    /** The contents of the container. */
     children: ReactNode;
 }
-declare const _UNSTABLE_TableContainer: (props: UNSTABLE_TableContainerProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
-export { _UNSTABLE_TableContainer as UNSTABLE_TableContainer };
+/**
+ * Renders a scrollable container that allows a table to overflow in a responsive way.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+declare const _TableContainer: (props: TableContainerProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _TableContainer as TableContainer };
 //# sourceMappingURL=table-container.d.ts.map

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,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrF,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEhE,MAAM,WAAW,4BAA6B,SAAQ,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IAC/F,QAAQ,EAAE,SAAS,CAAC;CACrB;AA+CD,QAAA,MAAM,wBAAwB,8KAAwE,CAAC;AAEvG,OAAO,EAAE,wBAAwB,IAAI,uBAAuB,EAAE,CAAC"}
+{"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"}

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

@@ -1,40 +1,23 @@
+'use client';
 "use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_TableContainer = void 0;
+exports.TableContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const focus_1 = require("@react-aria/focus");
-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");
-function UNSTABLE_TableContainer({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    const containerRef = (0, utils_1.useObjectRef)(ref);
-    const { focusProps, isFocusVisible } = (0, focus_1.useFocusRing)();
-    const [isScrollable, setIsScrollable] = (0, react_1.useState)(false);
-    (0, react_1.useLayoutEffect)(() => {
-        const containerElement = containerRef.current;
-        const isSSR = typeof window === 'undefined';
-        let containerResizeObserver;
-        if (containerElement && !isSSR) {
-            containerResizeObserver = new window.ResizeObserver((entries) => {
-                if (entries[0]) {
-                    setIsScrollable(entries[0].target.scrollWidth > entries[0].target.clientWidth);
-                }
-            });
-            containerResizeObserver.observe(containerElement);
-        }
-        return () => {
-            if (containerElement && containerResizeObserver) {
-                containerResizeObserver.unobserve(containerElement);
-            }
-        };
-    }, [containerRef]);
-    return ((0, jsx_runtime_1.jsx)("div", { ...(0, utils_1.mergeProps)(props, focusProps), ref: containerRef, className: (0, clsx_1.default)('cim-table-container', UNSAFE_className), style: UNSAFE_style, tabIndex: isScrollable ? 0 : -1, "data-focus-visible": isFocusVisible || undefined, children: children }));
+const focusable_container_js_1 = require("../internal/focusable-container/focusable-container.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 _UNSTABLE_TableContainer = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_TableContainer), 'TableContainer');
-exports.UNSTABLE_TableContainer = _UNSTABLE_TableContainer;
+/**
+ * Renders a scrollable container that allows a table to overflow in a responsive way.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _TableContainer = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(TableContainer), 'TableContainer');
+exports.TableContainer = _TableContainer;
 //# sourceMappingURL=table-container.js.map