pixelize-native-library 1.0.6 → 1.2.0

package/lib/module/modules/data-table/DataTable.js

@@ -0,0 +1,513 @@
+"use strict";
+
+/**
+ * DataTable — a horizontally-scrollable, column-configured table for phone screens. Header and
+ * body live in ONE vertical `FlatList` (header as `ListHeaderComponent`, `stickyHeaderIndices={[0]}`
+ * for the pin) nested inside a single horizontal `ScrollView` — so header and rows are always the
+ * same width and scroll sideways together, without hand-syncing two independent scroll offsets.
+ *
+ * Sort and selection are fully controlled, the same contract `Select` uses for `value`: this
+ * component never sorts `data` itself and never owns `selectedKeys` — it only reports the next
+ * state via `onSortChange`/`onSelectionChange` and renders whatever the caller passes back in.
+ */
+
+import { memo, useCallback, useMemo, useState } from "react";
+import { Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { HEADING_LEVEL, HeadingView } from "../../core/heading/index.js";
+import { Icon } from "../../core/icon/index.js";
+import { VirtualList } from "../../core/list/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { Checkbox } from "../checkbox/index.js";
+import { EmptyState } from "../empty-state/index.js";
+import { Skeleton } from "../skeleton/index.js";
+import { DATA_TABLE_DEFAULT_ROW_HEIGHT, DATA_TABLE_HEADER_HEIGHT, DATA_TABLE_SKELETON_CELL_HEIGHT, DATA_TABLE_SKELETON_ROW_COUNT, DATA_TABLE_SORT_ICON_SIZE, dataTableCellStructure, dataTableFocusRingStructure, dataTableHeaderRowStructure, dataTableRowStructure, dataTableSelectCellStructure, nextSortDirection, resolveColumnWidth, resolveDataTableColors, resolveDefaultCellText, resolveRowBackground, resolveSelectAllSelection, resolveSelectAllState, resolveSortAccessibilityLabel, resolveSortIcon, resolveTotalWidth, rowTouchSlop, toggleSelectionKey } from "./DataTable.variants.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ICON_STROKE = 2;
+const EMPTY_SELECTION = [];
+const SKELETON_ROW_INDICES = Array.from({
+  length: DATA_TABLE_SKELETON_ROW_COUNT
+}, (_, index) => index);
+const ROW_STRUCTURE = dataTableRowStructure();
+const SELECT_CELL_STRUCTURE = dataTableSelectCellStructure();
+
+/** `scrollMarginTop` is a CSS property react-native-web forwards as-is; RN's `ViewStyle` has no key
+ *  for it, and this is a widening intersection rather than a cast, so no `any` is involved. */
+
+function skeletonKeyExtractor(item) {
+  return `skeleton-${item}`;
+}
+
+/** Per-column values the header and the skeleton read. Resolved once per (columns, theme). */
+
+/** Per-column values a body cell reads. Split from the header spec so rows stay free of `testID`. */
+
+function DataTableInner({
+  columns,
+  data,
+  keyExtractor,
+  onRowPress,
+  sortBy,
+  sortDirection,
+  onSortChange,
+  selectable = false,
+  selectedKeys = EMPTY_SELECTION,
+  onSelectionChange,
+  loading = false,
+  emptyMessage = "No data",
+  stickyHeader = true,
+  rowHeight = DATA_TABLE_DEFAULT_ROW_HEIGHT,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const colors = useMemo(() => resolveDataTableColors(theme.colors), [theme.colors]);
+  const totalWidth = useMemo(() => resolveTotalWidth(columns.map(column => column.width), selectable), [columns, selectable]);
+  const headerSpecs = useMemo(() => columns.map(column => {
+    const width = resolveColumnWidth(column.width);
+    return {
+      key: column.key,
+      header: column.header,
+      sortable: column.sortable === true,
+      width,
+      skeletonWidth: Math.max(width - theme.space[3] * 2, 0),
+      cellStyle: [dataTableCellStructure(theme, {
+        align: column.align ?? "left"
+      }), {
+        width
+      }],
+      testID: testID === undefined ? undefined : `${testID}-header-${column.key}`
+    };
+  }), [columns, theme, testID]);
+  const cellSpecs = useMemo(() => columns.map(column => ({
+    key: column.key,
+    header: column.header,
+    cellStyle: [dataTableCellStructure(theme, {
+      align: column.align ?? "left"
+    }), {
+      width: resolveColumnWidth(column.width)
+    }],
+    render: column.render
+  })), [columns, theme]);
+
+  // Only the header needs every key, so a non-selectable 10k table never walks its own data.
+  const rowKeys = useMemo(() => selectable ? data.map((row, index) => keyExtractor(row, index)) : EMPTY_SELECTION, [selectable, data, keyExtractor]);
+  const selectedSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+  const selectAllState = useMemo(() => resolveSelectAllState(selectedKeys, rowKeys), [selectedKeys, rowKeys]);
+  const handleToggleAll = useCallback(() => {
+    onSelectionChange?.(resolveSelectAllSelection(selectedKeys, rowKeys));
+  }, [selectedKeys, rowKeys, onSelectionChange]);
+  const handleToggleRow = useCallback(key => {
+    onSelectionChange?.(toggleSelectionKey(selectedKeys, key));
+  }, [selectedKeys, onSelectionChange]);
+  const handleSortPress = useCallback(key => {
+    onSortChange?.(key, nextSortDirection(key, sortBy, sortDirection));
+  }, [sortBy, sortDirection, onSortChange]);
+  const headerRowStyle = useMemo(() => [dataTableHeaderRowStructure(theme), {
+    width: totalWidth,
+    backgroundColor: colors.headerBackground,
+    borderBottomColor: colors.headerBorder
+  }], [theme, totalWidth, colors]);
+  const headerTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.semibold), {
+    fontSize: theme.fontSizes.sm,
+    color: colors.headerText
+  }], [theme, colors]);
+  const cellTextStyle = useMemo(() => ({
+    fontSize: theme.fontSizes.sm,
+    color: colors.cellText
+  }), [theme, colors]);
+  const focusRingStyle = useMemo(() => [dataTableFocusRingStructure(theme), {
+    borderColor: theme.colors.border.focus
+  }], [theme]);
+
+  // `getItemLayout` offsets are measured from the top of the scroll content, and the header cell
+  // sits above row 0 — omitting its height puts every `scrollToIndex` one header short.
+  const headerOffset = DATA_TABLE_HEADER_HEIGHT + theme.borderWidths.thin;
+
+  // A pinned header is `position: sticky` on web, and the browser scrolls a newly focused row flush
+  // to the container's top edge — underneath it, hiding the row's focus ring. `scrollMarginTop`
+  // holds the row clear of the header; unknown to native, where nothing scrolls focus anyway.
+  const rowScrollMargin = useMemo(() => stickyHeader && Platform.OS === "web" ? {
+    scrollMarginTop: headerOffset
+  } : null, [stickyHeader, headerOffset]);
+  const rowStyle = useMemo(() => [ROW_STRUCTURE, {
+    height: rowHeight,
+    width: totalWidth
+  }, rowScrollMargin], [rowHeight, totalWidth, rowScrollMargin]);
+  const rowHitSlop = useMemo(() => {
+    const slop = rowTouchSlop(rowHeight);
+    return {
+      top: slop,
+      bottom: slop,
+      left: 0,
+      right: 0
+    };
+  }, [rowHeight]);
+  const rootStyle = useMemo(() => [styles.root, style], [style]);
+  const scrollContentStyle = useMemo(() => ({
+    width: totalWidth
+  }), [totalWidth]);
+  const listContainerStyle = useMemo(() => [styles.flatList, {
+    width: totalWidth
+  }], [totalWidth]);
+  const emptyStyle = useMemo(() => ({
+    width: totalWidth,
+    paddingVertical: theme.space[8]
+  }), [totalWidth, theme]);
+  const header = useMemo(() => /*#__PURE__*/_jsx(DataTableHeaderRow, {
+    specs: headerSpecs,
+    rowStyle: headerRowStyle,
+    textStyle: headerTextStyle,
+    iconColor: colors.headerIcon,
+    focusRingStyle: focusRingStyle,
+    selectable: selectable,
+    selectAllChecked: selectAllState.checked,
+    selectAllIndeterminate: selectAllState.indeterminate,
+    onToggleAll: handleToggleAll,
+    sortBy: sortBy,
+    sortDirection: sortDirection,
+    onSortPress: handleSortPress,
+    testID: testID
+  }), [headerSpecs, headerRowStyle, headerTextStyle, colors.headerIcon, focusRingStyle, selectable, selectAllState, handleToggleAll, sortBy, sortDirection, handleSortPress, testID]);
+  const empty = useMemo(() => /*#__PURE__*/_jsx(View, {
+    style: emptyStyle,
+    children: /*#__PURE__*/_jsx(EmptyState, {
+      title: emptyMessage,
+      testID: testID === undefined ? undefined : `${testID}-empty`
+    })
+  }), [emptyStyle, emptyMessage, testID]);
+  const stickyIndices = useMemo(() => stickyHeader ? [0] : undefined, [stickyHeader]);
+  const getRowLayout = useCallback((_, index) => ({
+    length: rowHeight,
+    offset: headerOffset + rowHeight * index,
+    index
+  }), [rowHeight, headerOffset]);
+  const renderRow = useCallback(({
+    item,
+    index
+  }) => {
+    const rowKey = keyExtractor(item, index);
+    return /*#__PURE__*/_jsx(DataTableRow, {
+      row: item,
+      index: index,
+      rowKey: rowKey,
+      specs: cellSpecs,
+      rowStyle: rowStyle,
+      background: resolveRowBackground(colors, index, false),
+      pressedBackground: colors.rowPressed,
+      textStyle: cellTextStyle,
+      focusRingStyle: focusRingStyle,
+      selectable: selectable,
+      selected: selectedSet.has(rowKey),
+      onToggleSelect: handleToggleRow,
+      onPress: onRowPress,
+      hitSlop: rowHitSlop,
+      testID: testID === undefined ? undefined : `${testID}-row-${index}`
+    });
+  }, [keyExtractor, cellSpecs, rowStyle, colors, cellTextStyle, focusRingStyle, selectable, selectedSet, handleToggleRow, onRowPress, rowHitSlop, testID]);
+  const renderSkeletonRow = useCallback(({
+    index
+  }) => /*#__PURE__*/_jsx(DataTableSkeletonRow, {
+    specs: headerSpecs,
+    rowStyle: rowStyle,
+    background: resolveRowBackground(colors, index, false),
+    selectable: selectable,
+    testID: testID === undefined ? undefined : `${testID}-skeleton-${index}`
+  }), [headerSpecs, rowStyle, colors, selectable, testID]);
+  return /*#__PURE__*/_jsx(View, {
+    testID: testID,
+    style: rootStyle,
+    children: /*#__PURE__*/_jsx(ScrollView, {
+      testID: testID === undefined ? undefined : `${testID}-scroll`,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      bounces: false
+      // A read-only table (no `onRowPress`, no sortable column, `selectable={false}`) has no
+      // focusable descendant at all, so its off-screen columns would be unreachable by keyboard.
+      // An explicit stop beats Chrome/Firefox's auto-focusable-scroll-region — Safari has none.
+      ,
+      tabIndex: 0,
+      style: styles.horizontalScroll,
+      contentContainerStyle: scrollContentStyle,
+      children: loading ? /*#__PURE__*/_jsx(View, {
+        style: listContainerStyle,
+        children: /*#__PURE__*/_jsx(VirtualList, {
+          data: SKELETON_ROW_INDICES,
+          keyExtractor: skeletonKeyExtractor,
+          renderItem: renderSkeletonRow,
+          getItemLayout: getRowLayout,
+          ListHeaderComponent: header,
+          stickyHeaderIndices: stickyIndices
+        })
+      }) : /*#__PURE__*/_jsx(View, {
+        style: listContainerStyle,
+        children: /*#__PURE__*/_jsx(VirtualList, {
+          data: data,
+          keyExtractor: keyExtractor,
+          renderItem: renderRow,
+          getItemLayout: getRowLayout,
+          ListHeaderComponent: header,
+          ListEmptyComponent: empty,
+          stickyHeaderIndices: stickyIndices
+        })
+      })
+    })
+  });
+}
+const DataTableHeaderCell = /*#__PURE__*/memo(function DataTableHeaderCell({
+  spec,
+  textStyle,
+  iconColor,
+  focusRingStyle,
+  sortBy,
+  sortDirection,
+  onSortPress
+}) {
+  // Keyboard / external-keyboard / assistive-tech focus (no-op on pure touch, correct everywhere else).
+  const [focused, setFocused] = useState(false);
+  const handlePress = useCallback(() => onSortPress(spec.key), [onSortPress, spec.key]);
+  const handleFocus = useCallback(() => setFocused(true), []);
+  const handleBlur = useCallback(() => setFocused(false), []);
+  const hitSlop = useMemo(() => {
+    const slop = rowTouchSlop(spec.width);
+    return {
+      top: 0,
+      bottom: 0,
+      left: slop,
+      right: slop
+    };
+  }, [spec.width]);
+  const label = /*#__PURE__*/_jsx(Text, {
+    numberOfLines: 1,
+    style: textStyle,
+    children: spec.header
+  });
+  if (!spec.sortable) {
+    return /*#__PURE__*/_jsx(HeadingView, {
+      testID: spec.testID,
+      accessibilityRole: "header",
+      "aria-level": HEADING_LEVEL.subsection,
+      style: spec.cellStyle,
+      children: label
+    });
+  }
+
+  // The heading and the sort control are separate elements on purpose: a sortable column is BOTH a
+  // column header and a button, and one node can carry only one role — collapsing them is what
+  // dropped every sortable column out of the heading outline.
+  return /*#__PURE__*/_jsx(HeadingView, {
+    accessibilityRole: "header",
+    "aria-level": HEADING_LEVEL.subsection,
+    style: styles.headerHeading,
+    testID: spec.testID === undefined ? undefined : `${spec.testID}-heading`,
+    children: /*#__PURE__*/_jsxs(Pressable, {
+      testID: spec.testID,
+      accessibilityRole: "button",
+      accessibilityLabel: resolveSortAccessibilityLabel(spec.header, spec.key, sortBy, sortDirection),
+      hitSlop: hitSlop,
+      onPress: handlePress,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      style: spec.cellStyle,
+      children: [focused && /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        testID: spec.testID === undefined ? undefined : `${spec.testID}-focus-ring`,
+        style: focusRingStyle
+      }), label, /*#__PURE__*/_jsx(Icon, {
+        name: resolveSortIcon(spec.key, sortBy, sortDirection),
+        size: DATA_TABLE_SORT_ICON_SIZE,
+        color: iconColor,
+        strokeWidth: ICON_STROKE
+      })]
+    })
+  });
+});
+const DataTableHeaderRow = /*#__PURE__*/memo(function DataTableHeaderRow({
+  specs,
+  rowStyle,
+  textStyle,
+  iconColor,
+  focusRingStyle,
+  selectable,
+  selectAllChecked,
+  selectAllIndeterminate,
+  onToggleAll,
+  sortBy,
+  sortDirection,
+  onSortPress,
+  testID
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID === undefined ? undefined : `${testID}-header`,
+    style: rowStyle,
+    children: [selectable && /*#__PURE__*/_jsx(View, {
+      style: SELECT_CELL_STRUCTURE,
+      children: /*#__PURE__*/_jsx(Checkbox, {
+        checked: selectAllChecked,
+        indeterminate: selectAllIndeterminate,
+        onCheckedChange: onToggleAll,
+        size: "sm",
+        accessibilityLabel: "Select all rows",
+        testID: testID === undefined ? undefined : `${testID}-select-all`
+      })
+    }), specs.map(spec => /*#__PURE__*/_jsx(DataTableHeaderCell, {
+      spec: spec,
+      textStyle: textStyle,
+      iconColor: iconColor,
+      focusRingStyle: focusRingStyle,
+      sortBy: sortBy,
+      sortDirection: sortDirection,
+      onSortPress: onSortPress
+    }, spec.key))]
+  });
+});
+function DataTableCellInner({
+  row,
+  index,
+  spec,
+  textStyle
+}) {
+  if (spec.render) {
+    return /*#__PURE__*/_jsx(View, {
+      style: spec.cellStyle,
+      children: spec.render(row, index)
+    });
+  }
+
+  // Rows are read one cell at a time, and the column header is off-screen — without the column name
+  // in the label the value is unattributable to an AT user (WCAG 1.3.1).
+  const text = resolveDefaultCellText(row, spec.key);
+  return /*#__PURE__*/_jsx(View, {
+    style: spec.cellStyle,
+    children: /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      accessibilityLabel: `${spec.header}: ${text}`,
+      style: textStyle,
+      children: text
+    })
+  });
+}
+
+// Same generic-preserving double cast the exported `DataTable` documents at the bottom of this file.
+const DataTableCell = /*#__PURE__*/memo(DataTableCellInner);
+function DataTableRowInner({
+  row,
+  index,
+  rowKey,
+  specs,
+  rowStyle,
+  background,
+  pressedBackground,
+  textStyle,
+  focusRingStyle,
+  selectable,
+  selected,
+  onToggleSelect,
+  onPress,
+  hitSlop,
+  testID
+}) {
+  // Keyboard / external-keyboard / assistive-tech focus (no-op on pure touch, correct everywhere else).
+  const [focused, setFocused] = useState(false);
+  const handleToggle = useCallback(() => onToggleSelect(rowKey), [onToggleSelect, rowKey]);
+  const handlePress = useCallback(() => onPress?.(row, index), [onPress, row, index]);
+  const handleFocus = useCallback(() => setFocused(true), []);
+  const handleBlur = useCallback(() => setFocused(false), []);
+  const staticStyle = useMemo(() => [rowStyle, {
+    backgroundColor: background
+  }], [rowStyle, background]);
+  const pressableStyle = useCallback(({
+    pressed
+  }) => [rowStyle, {
+    backgroundColor: pressed ? pressedBackground : background
+  }], [rowStyle, background, pressedBackground]);
+  const cells = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [selectable && /*#__PURE__*/_jsx(View, {
+      style: SELECT_CELL_STRUCTURE,
+      children: /*#__PURE__*/_jsx(Checkbox, {
+        checked: selected,
+        onCheckedChange: handleToggle,
+        size: "sm",
+        accessibilityLabel: `Select row ${index + 1}`,
+        testID: testID === undefined ? undefined : `${testID}-select`
+      })
+    }), specs.map(spec => /*#__PURE__*/_jsx(DataTableCell, {
+      row: row,
+      index: index,
+      spec: spec,
+      textStyle: textStyle
+    }, spec.key))]
+  });
+  if (onPress === undefined) {
+    return /*#__PURE__*/_jsx(View, {
+      testID: testID,
+      style: staticStyle,
+      children: cells
+    });
+  }
+  return /*#__PURE__*/_jsxs(Pressable, {
+    testID: testID,
+    accessibilityRole: "button",
+    hitSlop: hitSlop,
+    onPress: handlePress,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    style: pressableStyle,
+    children: [focused && /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      testID: testID === undefined ? undefined : `${testID}-focus-ring`,
+      style: focusRingStyle
+    }), cells]
+  });
+}
+const DataTableRow = /*#__PURE__*/memo(DataTableRowInner);
+const DataTableSkeletonRow = /*#__PURE__*/memo(function DataTableSkeletonRow({
+  specs,
+  rowStyle,
+  background,
+  selectable,
+  testID
+}) {
+  const staticStyle = useMemo(() => [rowStyle, {
+    backgroundColor: background
+  }], [rowStyle, background]);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    style: staticStyle,
+    children: [selectable && /*#__PURE__*/_jsx(View, {
+      style: SELECT_CELL_STRUCTURE
+    }), specs.map(spec => /*#__PURE__*/_jsx(View, {
+      style: spec.cellStyle,
+      children: /*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: spec.skeletonWidth,
+        height: DATA_TABLE_SKELETON_CELL_HEIGHT
+      })
+    }, spec.key))]
+  });
+});
+const styles = StyleSheet.create({
+  root: {
+    alignSelf: "stretch"
+  },
+  // A bounded ancestor (`style={{ flex: 1 }}` or an explicit height) is what makes this `flex: 1`
+  // do anything — same requirement React Native's own docs state for ScrollView. Unbounded, this
+  // renders at full content height instead (the enclosing screen scrolls it), same as any RN list.
+  horizontalScroll: {
+    flex: 1
+  },
+  flatList: {
+    flex: 1
+  },
+  // A transparent row box: it sizes to the sortable cell inside it and stretches it to the header
+  // row's height, so wrapping the cell in a heading changes no layout.
+  headerHeading: {
+    flexDirection: "row"
+  }
+});
+
+// `memo` infers a concrete prop type from the wrapped function, erasing DataTableInner's own `<T>`
+// — the cast restores per-call inference so `<DataTable<Row> ...>` still narrows `T` for callers.
+// Double-cast through `unknown`: `MemoExoticComponent` and a generic function type don't overlap
+// enough for TS to accept a direct `as`.
+export const DataTable = /*#__PURE__*/memo(DataTableInner);
+//# sourceMappingURL=DataTable.js.map

package/lib/module/modules/data-table/DataTable.variants.js

@@ -0,0 +1,188 @@
+"use strict";
+
+/**
+ * DataTable's style + behaviour resolution — the same split every sibling module copies
+ * (see `Select.variants.ts` / `Menu.variants.ts`):
+ *  - STRUCTURE (row/cell layout, padding, border WIDTH) lives in the variant resolvers below —
+ *    static per (brand, mode), registered once via `StyleSheet.create`.
+ *  - COLOUR is resolved from the theme's ROLE colours (`resolveDataTableColors`), never a raw ramp,
+ *    never a hardcoded hex. A table has no per-instance colour choice, so the resolver takes no
+ *    selector argument (same shape as `resolveCheckboxColors`).
+ *  - BEHAVIOUR (sort cycling, selection set maths, the sorted-column accessible name) is pure here
+ *    so the contract is unit-testable without rendering React Native.
+ *
+ * Free of React, of `lucide`, and of any native import, so the WCAG + behaviour tests import it
+ * directly (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
+ */
+
+import { createThemedVariants, createVariants } from "../../core/style/index.js";
+
+/** The three glyphs a header can show. A literal union rather than an `IconName` import, so this
+ *  file stays free of the icon registry (which pulls `lucide` at runtime); `Icon`'s own `name` prop
+ *  still type-checks these against the closed `IconName` set at the call site. */
+
+/** Same touch-target floor as Button/Select (44dp — Apple HIG minimum, WCAG 2.5.5 AAA). */
+export const MIN_TOUCH_TARGET = 44;
+
+/** Header cells are sortable buttons, so the header is a direct 44dp target — never slop-expanded. */
+export const DATA_TABLE_HEADER_HEIGHT = MIN_TOUCH_TARGET;
+export const DATA_TABLE_DEFAULT_ROW_HEIGHT = 48;
+export const DATA_TABLE_DEFAULT_COLUMN_WIDTH = 120;
+export const DATA_TABLE_SELECT_COLUMN_WIDTH = 48;
+export const DATA_TABLE_SORT_ICON_SIZE = 14;
+export const DATA_TABLE_SKELETON_ROW_COUNT = 5;
+export const DATA_TABLE_SKELETON_CELL_HEIGHT = 12;
+
+/**
+ * Symmetric touch expansion for a pressable row, so `rowHeight + 2·slop ≥ 44` even when a caller
+ * passes a compact `rowHeight` (same `slopFor` technique `Button`/`Select` use for their short sizes).
+ */
+export function rowTouchSlop(rowHeight) {
+  return Math.max(0, Math.ceil((MIN_TOUCH_TARGET - rowHeight) / 2));
+}
+export function resolveColumnWidth(width) {
+  return width ?? DATA_TABLE_DEFAULT_COLUMN_WIDTH;
+}
+
+/** The row's full width — what the header and every body row are pinned to, so the two stay aligned
+ *  while the shared horizontal `ScrollView` moves them together. */
+export function resolveTotalWidth(widths, selectable) {
+  const columns = widths.reduce((sum, width) => sum + resolveColumnWidth(width), 0);
+  return columns + (selectable ? DATA_TABLE_SELECT_COLUMN_WIDTH : 0);
+}
+export function resolveDataTableColors(colors) {
+  return {
+    headerBackground: colors.bg.sunken,
+    headerText: colors.fg.muted,
+    headerIcon: colors.fg.muted,
+    headerBorder: colors.border.interactive,
+    rowBackground: colors.bg.surface,
+    rowBackgroundAlt: colors.bg.sunken,
+    rowPressed: colors.bg.raised,
+    cellText: colors.fg.default
+  };
+}
+
+/** Zebra striping, or the pressed fill when the row is being touched. */
+export function resolveRowBackground(colors, index, pressed) {
+  if (pressed) return colors.rowPressed;
+  return index % 2 === 0 ? colors.rowBackground : colors.rowBackgroundAlt;
+}
+
+/**
+ * asc → desc → asc on the active column; any other column starts at asc. Pressing a new column
+ * never inherits the previous column's direction — a fresh sort reads ascending.
+ */
+export function nextSortDirection(columnKey, activeKey, activeDirection) {
+  if (columnKey !== activeKey) return "asc";
+  return activeDirection === "asc" ? "desc" : "asc";
+}
+export function resolveSortIcon(columnKey, activeKey, activeDirection) {
+  if (columnKey !== activeKey) return "chevrons-up-down";
+  return activeDirection === "desc" ? "chevron-down" : "chevron-up";
+}
+
+/**
+ * WCAG 1.3.3 / 4.1.2 — the sort glyph is a visual-only cue, so the header's accessible name carries
+ * the same state in words. Without this a screen-reader user hears only the column title and cannot
+ * tell which column the table is sorted by.
+ */
+export function resolveSortAccessibilityLabel(header, columnKey, activeKey, activeDirection) {
+  if (columnKey !== activeKey) return `${header}, not sorted`;
+  return activeDirection === "desc" ? `${header}, sorted descending` : `${header}, sorted ascending`;
+}
+
+/**
+ * Fallback cell text when a column has no `render`. `row` is generic and unconstrained (a table
+ * accepts any shape of data), so reading `column.key` off it is a deliberate, narrow escape from
+ * `T` rather than a real type hole — the alternative is forcing every caller to supply `render`.
+ */
+export function resolveDefaultCellText(row, key) {
+  const value = row[key];
+  return value === undefined || value === null ? "" : String(value);
+}
+export function toggleSelectionKey(selectedKeys, key) {
+  return selectedKeys.includes(key) ? selectedKeys.filter(selected => selected !== key) : [...selectedKeys, key];
+}
+export function resolveSelectAllState(selectedKeys, rowKeys) {
+  const selectedHere = rowKeys.filter(key => selectedKeys.includes(key)).length;
+  const checked = rowKeys.length > 0 && selectedHere === rowKeys.length;
+  return {
+    checked,
+    indeterminate: selectedHere > 0 && !checked
+  };
+}
+
+/**
+ * Select-all only ever adds or removes the rows currently in `data` — a key selected elsewhere
+ * (a previous page, a filtered-out row) survives both directions, so the caller owns the full set.
+ */
+export function resolveSelectAllSelection(selectedKeys, rowKeys) {
+  if (resolveSelectAllState(selectedKeys, rowKeys).checked) {
+    return selectedKeys.filter(key => !rowKeys.includes(key));
+  }
+  return [...selectedKeys, ...rowKeys.filter(key => !selectedKeys.includes(key))];
+}
+export const dataTableRowStructure = createVariants({
+  base: {
+    flexDirection: "row",
+    alignItems: "stretch"
+  }
+});
+export const dataTableHeaderRowStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "stretch",
+    height: DATA_TABLE_HEADER_HEIGHT,
+    borderBottomWidth: theme.borderWidths.thin
+  }
+}));
+export const dataTableCellStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: theme.space[1],
+    paddingHorizontal: theme.space[3]
+  },
+  variants: {
+    align: {
+      left: {
+        justifyContent: "flex-start"
+      },
+      center: {
+        justifyContent: "center"
+      },
+      right: {
+        justifyContent: "flex-end"
+      }
+    }
+  },
+  defaultVariants: {
+    align: "left"
+  }
+}));
+
+/**
+ * The keyboard/AT focus ring for a sortable header cell or a pressable row, drawn INSIDE the
+ * element's own bounds. Both are full-bleed: a header cell abuts its neighbours and a row spans the
+ * table's whole width, so the gap-outside ring `Button`/`CopyButton` use would be clipped by the
+ * table's own scroll containers. Square, like the cells it sits in. Colour is applied inline.
+ */
+export const dataTableFocusRingStructure = createThemedVariants(theme => ({
+  base: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: theme.borderWidths.thick
+  }
+}));
+export const dataTableSelectCellStructure = createVariants({
+  base: {
+    width: DATA_TABLE_SELECT_COLUMN_WIDTH,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+//# sourceMappingURL=DataTable.variants.js.map