@pingux/astro 2.206.2-alpha.0 → 2.207.0-alpha.0

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -644,10 +644,21 @@ declare const _default: {
             '&.is-last-column-sticky': {
                 'thead tr th:last-of-type': {
                     backgroundColor: string;
+                    '&::after': {
+                        backgroundColor: any;
+                    };
                 };
                 'tbody tr': {
+                    '&:nth-of-type(odd) td:last-of-type': {
+                        '&::after': {
+                            backgroundColor: any;
+                        };
+                    };
                     '&:nth-of-type(even) td:last-of-type': {
                         backgroundColor: string;
+                        '&::after': {
+                            backgroundColor: any;
+                        };
                     };
                 };
             };
@@ -666,6 +677,9 @@ declare const _default: {
         data: {
             color: string;
         };
+        resizer: {
+            backgroundColor: any;
+        };
     };
     statusIcon: {
         base: {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -241,11 +241,22 @@ var _default = exports["default"] = {
     container: {
       '&.is-last-column-sticky': {
         'thead tr th:last-of-type': {
-          backgroundColor: 'backgroundBase'
+          backgroundColor: 'backgroundBase',
+          '&::after': {
+            backgroundColor: _onyxTokens.astroTokensDark.color.common['border-dark']
+          }
         },
         'tbody tr': {
+          '&:nth-of-type(odd) td:last-of-type': {
+            '&::after': {
+              backgroundColor: _onyxTokens.astroTokensDark.color.common['border-dark']
+            }
+          },
           '&:nth-of-type(even) td:last-of-type': {
-            backgroundColor: 'backgroundBase'
+            backgroundColor: 'backgroundBase',
+            '&::after': {
+              backgroundColor: _onyxTokens.astroTokensDark.color.common['border-dark']
+            }
           }
         }
       }
@@ -263,6 +274,9 @@ var _default = exports["default"] = {
     },
     data: {
       color: 'text.secondary'
+    },
+    resizer: {
+      backgroundColor: _onyxTokens.astroTokensDark.color.common['border-dark']
     }
   },
   statusIcon: statusIcon,

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -1826,6 +1826,13 @@ declare const _default: {
             fontSize: string;
             py: string;
         };
+        tableHeaderButton: {
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+        };
     };
     forms: {
         input: import("theme-ui").ThemeUICSSObject;
@@ -6921,6 +6928,9 @@ declare const _default: {
                     outlineColor: string;
                 };
             };
+            resizer: {
+                backgroundColor: any;
+            };
         };
         tabs: {
             '&.is-horizontal': {

package/lib/cjs/styles/themes/next-gen/variants/button.d.ts

@@ -1522,5 +1522,12 @@ declare const buttons: {
         fontSize: string;
         py: string;
     };
+    tableHeaderButton: {
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+    };
 };
 export default buttons;

package/lib/cjs/styles/themes/next-gen/variants/button.js

@@ -648,6 +648,9 @@ var buttons = {
   aiChat: aiChat,
   paginationMenu: paginationMenu,
   ButtonInputGroupContentRight: ButtonInputGroupContentRight,
-  selectLink: selectLink
+  selectLink: selectLink,
+  tableHeaderButton: {
+    '&.is-focused': _objectSpread({}, defaultFocus)
+  }
 };
 var _default = exports["default"] = buttons;

package/lib/cjs/styles/themes/next-gen/variants/tableBase.d.ts

@@ -113,4 +113,7 @@ export declare const tableBase: {
             outlineColor: string;
         };
     };
+    resizer: {
+        backgroundColor: any;
+    };
 };

package/lib/cjs/styles/themes/next-gen/variants/tableBase.js

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.tableBase = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _onyxTokens = require("@pingux/onyx-tokens");
 var _colors = _interopRequireDefault(require("../colors/colors"));
 var _button = require("./button");
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -92,6 +93,9 @@ var thead = {
     boxShadow: "0 1px 0 ".concat(_colors["default"].border.base)
   }
 };
+var resizer = {
+  backgroundColor: _onyxTokens.astroTokens.color.common['border-dark']
+};
 var head = {
   px: 'lg',
   py: 'sm',
@@ -126,5 +130,6 @@ var tableBase = exports.tableBase = {
   thead: thead,
   head: head,
   tbody: tbody,
-  data: data
+  data: data,
+  resizer: resizer
 };

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -2207,6 +2207,9 @@ declare const _default: {
                 outlineColor: string;
             };
         };
+        resizer: {
+            backgroundColor: any;
+        };
     };
     tabs: {
         '&.is-horizontal': {

package/lib/cjs/types/tableBase.d.ts

@@ -1,15 +1,16 @@
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 import type { TableState } from '@react-stately/table';
 import { TableColumnResizeState } from '@react-stately/table';
 import type { GridNode } from '@react-types/grid';
-import type { Node } from '@react-types/shared';
-import type { TableProps } from '@react-types/table';
+import type { FocusableElement, Key, Node } from '@react-types/shared';
+import type { ColumnSize, TableProps } from '@react-types/table';
 import { TestingAttributes } from './shared/test';
 import { BoxProps } from './box';
 import { DOMAttributes } from './shared';
+export type ResizeHandler = (widths: Map<Key, ColumnSize>) => void;
 export interface BaseProp extends BoxProps, TestingAttributes, DOMAttributes {
 }
-export interface TableBaseProps<T extends object> extends TableProps<T>, Omit<BaseProp, 'children'> {
+export interface TableBaseProps<T extends object> extends TableProps<T>, Omit<BaseProp, 'children' | 'onResize'> {
     'aria-label'?: string;
     selectionMode?: 'none' | 'single' | 'multiple';
     selectionBehavior?: 'replace' | 'toggle';
@@ -18,6 +19,9 @@ export interface TableBaseProps<T extends object> extends TableProps<T>, Omit<Ba
     caption?: ReactNode | string;
     isStickyHeader?: boolean;
     isLastColumnSticky?: boolean;
+    onResizeStart?: ResizeHandler;
+    onResize?: ResizeHandler;
+    onResizeEnd?: ResizeHandler;
 }
 export interface TableRowGroupProps extends BaseProp {
     type: 'thead' | 'tbody';
@@ -30,17 +34,29 @@ export interface TableHeaderRowProps<T> extends BaseProp {
     children: ReactNode;
     className?: string;
 }
-export interface TableColumnHeaderProps<T> extends BaseProp {
+export interface ResizerProps<T> {
+    column: GridNode<T>;
+    layoutState: TableColumnResizeState<T>;
+    triggerRef?: RefObject<FocusableElement | null>;
+    onResizeStart?: (widths: Map<Key, ColumnSize>) => void;
+    onResize?: (widths: Map<Key, ColumnSize>) => void;
+    onResizeEnd?: (widths: Map<Key, ColumnSize>) => void;
+}
+export interface TableColumnHeaderProps<T> extends Omit<BaseProp, 'onResize'> {
     column: GridNode<T>;
     state: TableState<T>;
     className?: string;
     layoutState: TableColumnResizeState<T>;
+    onResizeStart?: ResizeHandler;
+    onResize?: ResizeHandler;
+    onResizeEnd?: ResizeHandler;
 }
 export interface TableRowProps<T> extends BaseProp {
     item: Node<T>;
     state: TableState<T>;
     children: ReactNode;
     className?: string;
+    hasSelectionCheckboxes?: boolean;
 }
 export interface TableCellProps<T> extends BaseProp {
     cell: GridNode<T>;

package/lib/components/Button/Buttons.styles.js

@@ -342,5 +342,15 @@ export default {
   withIcon: withIcon,
   filter: filter,
   searchNavTabLabel: tabLabelButton,
-  selectLink: selectLink
+  selectLink: selectLink,
+  tableHeaderButton: {
+    fontSize: 'md',
+    fontWeight: '1',
+    color: 'text.primary',
+    lineHeight: 'body',
+    backgroundColor: 'transparent',
+    borderRadius: '0px',
+    textAlign: 'left',
+    '&.is-focused': _objectSpread({}, defaultFocus)
+  }
 };

package/lib/components/TableBase/TableBase.js

@@ -10,7 +10,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["caption", "selectionMode", "selectionBehavior", "hasSelectionCheckboxes", "isStickyHeader", "className", "isLastColumnSticky"],
+var _excluded = ["caption", "selectionMode", "selectionBehavior", "hasSelectionCheckboxes", "isStickyHeader", "className", "isLastColumnSticky", "onResizeStart", "onResize", "onResizeEnd"],
   _excluded2 = ["caption"],
   _excluded3 = ["type", "children", "className", "isSticky"];
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
@@ -20,7 +20,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _co
 import React, { forwardRef, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useFocusRing } from '@react-aria/focus';
 import { useHover, usePress } from '@react-aria/interactions';
-import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox } from '@react-aria/table';
+import { useTable, useTableCell, useTableColumnHeader, useTableColumnResize, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox } from '@react-aria/table';
 import { mergeProps, useResizeObserver } from '@react-aria/utils';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useTableColumnResizeState, useTableState } from '@react-stately/table';
@@ -56,6 +56,9 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
     isStickyHeader = _props$isStickyHeader === void 0 ? false : _props$isStickyHeader,
     className = props.className,
     isLastColumnSticky = props.isLastColumnSticky,
+    onResizeStart = props.onResizeStart,
+    onResize = props.onResize,
+    onResizeEnd = props.onResizeEnd,
     others = _objectWithoutProperties(props, _excluded);
   var tableRef = useLocalOrForwardRef(ref);
   var headerRef = useRef(null);
@@ -136,7 +139,10 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
         key: column.key,
         column: column,
         state: state,
-        layoutState: layoutState
+        layoutState: layoutState,
+        onResizeStart: onResizeStart,
+        onResize: onResize,
+        onResizeEnd: onResizeEnd
       });
     }));
   })), ___EmotionJSX(TableRowGroup, _extends({
@@ -154,12 +160,13 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
   }, ___EmotionJSX(Loader, {
     variant: "loader.withinDataTable"
   })), _mapInstanceProperty(_context3 = _Array$from(collection.body.childNodes)).call(_context3, function (row) {
-    var _context4;
+    var _context4, _collection$getChildr, _collection$getChildr2;
     return ___EmotionJSX(TableRow, {
       key: row.key,
       item: row,
-      state: state
-    }, _mapInstanceProperty(_context4 = _Array$from(collection.getChildren(row.key))).call(_context4, function (cell) {
+      state: state,
+      hasSelectionCheckboxes: hasSelectionCheckboxes
+    }, _mapInstanceProperty(_context4 = _Array$from((_collection$getChildr = (_collection$getChildr2 = collection.getChildren) === null || _collection$getChildr2 === void 0 ? void 0 : _collection$getChildr2.call(collection, row.key)) !== null && _collection$getChildr !== void 0 ? _collection$getChildr : [])).call(_context4, function (cell) {
       return cell.props.isSelectionCell ? ___EmotionJSX(TableCheckboxCell, {
         key: cell.key,
         cell: cell,
@@ -225,39 +232,87 @@ function TableHeaderRow(props) {
     ref: ref
   }), children);
 }
+function Resizer(props) {
+  var column = props.column,
+    layoutState = props.layoutState,
+    triggerRef = props.triggerRef,
+    onResizeStart = props.onResizeStart,
+    onResize = props.onResize,
+    onResizeEnd = props.onResizeEnd;
+  var ref = useRef(null);
+  var _useTableColumnResize = useTableColumnResize({
+      column: column,
+      'aria-label': "".concat(column.textValue, " column width"),
+      triggerRef: triggerRef,
+      onResizeStart: onResizeStart,
+      onResize: onResize,
+      onResizeEnd: onResizeEnd
+    }, layoutState, ref),
+    resizerProps = _useTableColumnResize.resizerProps,
+    inputProps = _useTableColumnResize.inputProps;
+  var _useFocusRing = useFocusRing(),
+    isFocusVisible = _useFocusRing.isFocusVisible,
+    focusProps = _useFocusRing.focusProps;
+
+  // The input must be nested inside the Box that carries resizerProps so that
+  // keyboard events fired on the input (Enter to start resize, Escape/Tab to
+  // end it) bubble up to the element with the keyboard handlers.
+
+  var _useStatusClasses3 = useStatusClasses('', {
+      isFocused: isFocusVisible
+    }),
+    classNames = _useStatusClasses3.classNames;
+  return ___EmotionJSX(Box, _extends({
+    role: "presentation",
+    variant: "tableBase.resizer",
+    className: classNames
+  }, resizerProps), ___EmotionJSX("input", _extends({
+    ref: ref
+  }, mergeProps(inputProps, focusProps))));
+}
 function TableColumnHeader(props) {
-  var _column$props;
+  var _column$props, _column$props2;
   var column = props.column,
     state = props.state,
     className = props.className,
-    layoutState = props.layoutState;
+    layoutState = props.layoutState,
+    onResizeStart = props.onResizeStart,
+    onResize = props.onResize,
+    onResizeEnd = props.onResizeEnd;
   var ref = useRef(null);
   var _useTableColumnHeader = useTableColumnHeader({
       node: column
     }, state, ref),
     columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
-  var _useFocusRing = useFocusRing(),
-    isFocusVisible = _useFocusRing.isFocusVisible,
-    focusProps = _useFocusRing.focusProps;
+
+  // within: true catches keyboard focus on the resizer <input> child so the
+  // <th> shows its focus ring even when the child is the active element.
+  var _useFocusRing2 = useFocusRing({
+      within: true
+    }),
+    isFocusVisible = _useFocusRing2.isFocusVisible,
+    focusProps = _useFocusRing2.focusProps;
   var allowsSorting = (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.allowsSorting;
+  var allowsResizing = (_column$props2 = column.props) === null || _column$props2 === void 0 ? void 0 : _column$props2.allowsResizing;
   var _useGetTheme = useGetTheme(),
     icons = _useGetTheme.icons;
   var Ascending = icons.Ascending,
     Descending = icons.Descending;
   var sortDescriptor = state.sortDescriptor;
-  var arrowIcon = (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.column) === column.key && (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.direction) === 'ascending' ? Ascending : Descending;
+  var isSortedAscending = (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.column) === column.key && (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.direction) === 'ascending';
+  var arrowIcon = isSortedAscending ? Ascending : Descending;
   var sortIcon = ___EmotionJSX(Icon, {
     icon: arrowIcon,
     size: "xs",
     "aria-hidden": "true",
     title: {
-      name: (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.direction) === 'ascending' ? 'Sort ascending' : 'Sort descending'
+      name: isSortedAscending ? 'Sort ascending' : 'Sort descending'
     }
   });
-  var _useStatusClasses3 = useStatusClasses(className, {
+  var _useStatusClasses4 = useStatusClasses(className, {
       isFocused: isFocusVisible
     }),
-    classNames = _useStatusClasses3.classNames;
+    classNames = _useStatusClasses4.classNames;
   useHandleFocusRef(ref);
   return ___EmotionJSX(Box, _extends({
     as: "th",
@@ -266,19 +321,27 @@ function TableColumnHeader(props) {
     variant: "tableBase.head",
     className: classNames,
     sx: _objectSpread({
-      width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key)
+      width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key),
+      position: 'relative'
     }, column.props.sx)
   }, mergeProps(columnHeaderProps, focusProps, column.props)), ___EmotionJSX(Box, {
     isRow: true,
     gap: "sm",
     alignItems: "center"
-  }, ___EmotionJSX(Text, null, column.rendered), allowsSorting && sortIcon));
+  }, ___EmotionJSX(Text, null, column.rendered), allowsSorting && sortIcon), allowsResizing && ___EmotionJSX(Resizer, {
+    column: column,
+    layoutState: layoutState,
+    onResizeStart: onResizeStart,
+    onResize: onResize,
+    onResizeEnd: onResizeEnd
+  }));
 }
 function TableRow(props) {
   var item = props.item,
     state = props.state,
     children = props.children,
-    className = props.className;
+    className = props.className,
+    hasSelectionCheckboxes = props.hasSelectionCheckboxes;
   var ref = useRef(null);
   var _useTableRow = useTableRow({
       node: item
@@ -286,31 +349,50 @@ function TableRow(props) {
     rowProps = _useTableRow.rowProps;
   var isSelected = state.selectionManager.isSelected(item.key);
   var isDisabled = state.disabledKeys.has(item.key);
-  var _useFocusRing2 = useFocusRing(),
-    isFocusVisible = _useFocusRing2.isFocusVisible,
-    focusProps = _useFocusRing2.focusProps;
+  var _useFocusRing3 = useFocusRing(),
+    isFocusVisible = _useFocusRing3.isFocusVisible,
+    focusProps = _useFocusRing3.focusProps;
   var _useHover = useHover({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
+
+  // allowTextSelectionOnPress: true prevents the press handler from suppressing
+  // native text-selection drags (user-select: none is not applied on pointer down).
+  // When hasSelectionCheckboxes is true, isDisabled: true disables the visual
+  // isPressed state — selection is handled solely by the checkbox cells.
   var _usePress = usePress({
-      ref: ref
+      ref: ref,
+      allowTextSelectionOnPress: true,
+      isDisabled: !!hasSelectionCheckboxes
     }),
     pressProps = _usePress.pressProps,
     isPressed = _usePress.isPressed;
-  var _useStatusClasses4 = useStatusClasses(className, {
+
+  // React Aria's useSelectableItem only maps Space to selection (not Enter).
+  // Enter is reserved for "action" which is unused here, so we manually toggle
+  // selection on Enter to match expected keyboard behavior.
+  var enterKeyProps = useCallback(function (e) {
+    if (e.key !== 'Enter') return;
+    if (isDisabled || state.selectionManager.selectionMode === 'none') return;
+    e.preventDefault();
+    state.selectionManager.toggleSelection(item.key);
+  }, [isDisabled, item.key, state.selectionManager]);
+  var _useStatusClasses5 = useStatusClasses(className, {
       isSelected: isSelected,
       isHovered: isHovered,
       isPressed: isPressed,
       isFocused: isFocusVisible,
       isDisabled: isDisabled
     }),
-    classNames = _useStatusClasses4.classNames;
+    classNames = _useStatusClasses5.classNames;
   return ___EmotionJSX(Box, _extends({
     as: "tr",
     display: "table-row",
     className: classNames,
     variant: "tableBase.row"
-  }, mergeProps(rowProps, focusProps, hoverProps, pressProps), {
+  }, mergeProps(rowProps, focusProps, hoverProps, pressProps, {
+    onKeyDown: enterKeyProps
+  }), {
     ref: ref
   }), children);
 }
@@ -324,14 +406,19 @@ function TableCell(props) {
       node: cell
     }, state, ref),
     gridCellProps = _useTableCell.gridCellProps;
-  var _useFocusRing3 = useFocusRing(),
-    isFocusVisible = _useFocusRing3.isFocusVisible,
-    focusProps = _useFocusRing3.focusProps;
-  var _useStatusClasses5 = useStatusClasses(className, {
+  var _useFocusRing4 = useFocusRing(),
+    isFocusVisible = _useFocusRing4.isFocusVisible,
+    focusProps = _useFocusRing4.focusProps;
+  var _useStatusClasses6 = useStatusClasses(className, {
       isFocused: isFocusVisible
     }),
-    classNames = _useStatusClasses5.classNames;
+    classNames = _useStatusClasses6.classNames;
   useHandleFocusRef(ref);
+
+  // Prevents pointer events reaching the row's press handler, allowing native text-selection drags.
+  var stopPointerPropagation = useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
   return ___EmotionJSX(Box, _extends({
     as: "td",
     display: "table-cell",
@@ -341,8 +428,22 @@ function TableCell(props) {
     sx: _objectSpread({
       width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(cell.column.key)
     }, cell.props.sx)
-  }, mergeProps(gridCellProps, focusProps, cell.props)), cell.rendered);
+  }, mergeProps({
+    onPointerDown: stopPointerPropagation,
+    onMouseDown: stopPointerPropagation
+  }, gridCellProps, focusProps, cell.props)), cell.rendered);
 }
+
+// Native checkboxes only toggle on Space, not Enter. This handler makes Enter
+// behave the same as Space by calling the checkbox's onChange callback.
+var handleCheckboxEnterKey = function handleCheckboxEnterKey(onChange, isSelected) {
+  return function (e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      onChange === null || onChange === void 0 || onChange(!isSelected);
+    }
+  };
+};
 function TableSelectAllCell(props) {
   var column = props.column,
     state = props.state,
@@ -365,7 +466,8 @@ function TableSelectAllCell(props) {
     ref: ref
   }), state.selectionManager.selectionMode === 'single' ? ___EmotionJSX(VisuallyHidden, null, checkboxProps['aria-label']) : ___EmotionJSX(CheckboxField, _extends({
     checkBoxProps: {
-      'data-testid': 'select-all-checkbox'
+      'data-testid': 'select-all-checkbox',
+      onKeyDown: handleCheckboxEnterKey(checkboxProps.onChange, checkboxProps.isSelected)
     }
   }, checkboxProps)));
 }
@@ -391,6 +493,10 @@ function TableCheckboxCell(props) {
     }, cell.props.sx)
   }, gridCellProps, {
     ref: ref
-  }), ___EmotionJSX(CheckboxField, checkboxProps));
+  }), ___EmotionJSX(CheckboxField, _extends({
+    checkBoxProps: {
+      onKeyDown: handleCheckboxEnterKey(checkboxProps.onChange, checkboxProps.isSelected)
+    }
+  }, checkboxProps)));
 }
 export default TableBase;

package/lib/components/TableBase/TableBase.mdx

@@ -3,29 +3,62 @@ import * as TableBaseStories from './TableBase.stories';
 
 <Meta of={TableBaseStories} isTemplate />
 
-# Table
+# TableBase
 
-Data tables display information in a grid-like format of rows and columns. 
-They organize information in a way that’s easy to scan so that users can look for patterns and develop insights from data. 
+Data tables display information in a grid-like format of rows and columns.
+They organize information in a way that's easy to scan so that users can look for patterns and develop insights from data.
 
-Column header names describe the type of content displayed in each column. 
+Column header names describe the type of content displayed in each column.
 Each row contains data related to a single entity.
 
-Tables should:
+TableBase should:
 - Have consistently aligned content.
 - Use multiple heading rows for higher-level grouping of the columns.
 - Use column dividers sparingly.
 
-Tables shouldn’t use different indicators to represent empty fields.
+This basic component is rendered as an HTML `<table>`, which accepts the `<TBody>` component and the `<THead>` as children.
 
-This basic component is rendered as an HTML `<table>`, which accepts the `<TableBody>` component and the `<TableHead>` as children.
+### When to Use
+
+Use TableBase when you need a fully custom table implementation that goes beyond what higher-level table components provide. Common use cases include:
+
+- Sticky columns (e.g., pinning the last column during horizontal scroll)
+- Custom row or column grouping
+- Non-standard selection behaviors
+- Bespoke cell rendering or layout that requires direct control over the table structure
+
+TableBase is the lowest-level table primitive in Astro and gives you direct access to the underlying React Aria/Stately table hooks. Use it when you need that level of control.
 
 ### Required Components
 
-This component requires these additional components: 
+This component requires these additional components:
+
+- **TableCaption** — renders an accessible `<caption>` element for the table
+- **THead** — wraps the header section (`<thead>`)
+  - **Column** — defines each column header cell (`<th>`)
+- **TBody** — wraps the body section (`<tbody>`)
+  - **Row** — defines each data row (`<tr>`)
+    - **Cell** — defines each data cell (`<td>`)
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component.
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | Moves focus to the next focusable component. All focusable components in the table are included in the page tab sequence. |
+| Shift + Tab | Moves focus to the previous focusable component. |
+| Space or Enter | Focuses the component and triggers an action if one is associated with it. |
+| Arrow keys | Can be used to navigate between the components in the table. |
+| Home or Page Up | Shifts the focus to the first row. |
+| End or Page Down | Shifts the focus to the last visible row. |
+
+#### Screen Readers
 
-- TableCaption
-- TableHead
-- TableRow
-- TableCell
-- TableBody
+This component uses the following attributes to assist screen readers:
+- The **`aria-label`** attribute should be provided on the `TableBase` to give the table an accessible name. When a visible `TableCaption` is present, use **`aria-labelledby`** to associate the caption with the table instead.
+- The **`aria-rowcount`** and **`aria-columncount`** attributes are used to indicate the total number of rows and columns in the grid structure.
+- Each `Row` uses the **`aria-rowindex`** attribute to enumerate its position within the table.
+- Each `Column` and `Cell` uses the **`aria-colindex`** attribute to enumerate its position within its row.