@servicetitan/anvil2 2.8.0 → 2.9.1

package/dist/{DataTable-DK9xRjnq.js → DataTable-JRxu2yTP.js}

@@ -1,56 +1,58 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { C as Chip } from './Chip-BnofwIUN.js';
+import { C as Chip } from './Chip-Ce0WGKAc.js';
 import { F as Flex } from './Flex-WyyZm1bf.js';
 import * as React from 'react';
-import { useRef, useState, useLayoutEffect, createContext, useContext, useCallback, forwardRef, useMemo, useImperativeHandle, useEffect, useId, Fragment as Fragment$1, useReducer } from 'react';
+import { useRef, useState, useLayoutEffect, createContext, useContext, useCallback, forwardRef, useMemo, useImperativeHandle, useEffect, useId, memo as memo$1, Fragment as Fragment$1, isValidElement } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
 import { D as DateTime } from './luxon-wpz4A-OQ.js';
-import { C as Checkbox } from './Checkbox-DbaZrUE2.js';
-import { B as Button } from './Button-a_D7tUgM.js';
+import { C as Checkbox } from './Checkbox-Cw1-KFvq.js';
+import { B as Button } from './Button-BdrrhBTI.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { S as SvgEdit } from './edit-DQOiktcu.js';
 import { I as Icon } from './Icon-DuIlne4x.js';
 import { S as SrOnly } from './SrOnly-eUpYGpAT.js';
 import { u as useNumberField } from './useNumberField-eMyk7MB8.js';
 import { u as useMergeRefs, m as mergeRefs } from './useMergeRefs-Dfmtq9cI.js';
-import { a as SelectMenuSync, S as SelectMenu } from './SelectMenuSync-CuZp9mnt.js';
-import { a as MultiSelectMenuSync, M as MultiSelectMenu } from './MultiSelectMenuSync-B_mXpTEe.js';
+import { a as SelectMenuSync, S as SelectMenu } from './SelectMenuSync-DXrwecFt.js';
+import { a as MultiSelectMenuSync, M as MultiSelectMenu } from './MultiSelectMenuSync-7C1wW4oO.js';
+import { F as FieldLabel } from './FieldLabel-HO2VP-4B.js';
 import { S as SvgError } from './error-DR_wWdYY.js';
 import { S as SvgWarning } from './warning-c4Wj1rI4.js';
 import { T as Tooltip } from './Tooltip-C1PBRnJv.js';
 import { flushSync } from 'react-dom';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
-import './anvil-fonts.css';import './DataTable.css';/* empty css                     */
-import { P as Pagination } from './Pagination-CjGmJ_rU.js';
+import { P as Pagination } from './Pagination-B5jqHYG3.js';
 import { T as ThemeProviderContext } from './ThemeProviderContext-l52GohYT.js';
+import { u as useVirtualizer } from './index-DXeGMe23.js';
 import { S as Spinner } from './Spinner-BqmcE2pb.js';
 import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
 import { u as usePrefersColorScheme } from './usePrefersColorScheme-_hT7dK7_.js';
 
-const booleanFormatter = (value, { trueLabel = "True", falseLabel = "False" } = {}) => {
+import './DataTable.css';const booleanFormatter = (value, { trueLabel = "True", falseLabel = "False" } = {}) => {
   if (value == null) {
     return null;
   }
   return value ? trueLabel : falseLabel;
 };
 
-const styles$e = {
-	"table-header-cell": "_table-header-cell_1ffr7_2",
-	"table-body-cell": "_table-body-cell_1ffr7_3",
-	"table-footer-cell": "_table-footer-cell_1ffr7_4",
-	"last-pinned-left-column": "_last-pinned-left-column_1ffr7_33",
-	"first-pinned-right-column": "_first-pinned-right-column_1ffr7_33",
-	"empty-cell": "_empty-cell_1ffr7_54",
-	"table-cell-internal-select": "_table-cell-internal-select_1ffr7_71",
-	"table-cell-internal-expand": "_table-cell-internal-expand_1ffr7_72",
-	"table-header-cell-group": "_table-header-cell-group_1ffr7_91",
-	"table-header-cell-sortable": "_table-header-cell-sortable_1ffr7_100"};
+const styles$f = {
+	"table-header-cell": "_table-header-cell_nfkc_2",
+	"table-body-cell": "_table-body-cell_nfkc_3",
+	"table-footer-cell": "_table-footer-cell_nfkc_4",
+	"last-pinned-left-column": "_last-pinned-left-column_nfkc_33",
+	"first-pinned-right-column": "_first-pinned-right-column_nfkc_33",
+	"empty-cell": "_empty-cell_nfkc_54",
+	"table-cell-internal-select": "_table-cell-internal-select_nfkc_71",
+	"table-cell-internal-expand": "_table-cell-internal-expand_nfkc_72",
+	"table-header-cell-group": "_table-header-cell-group_nfkc_91",
+	"table-header-cell-sortable": "_table-header-cell-sortable_nfkc_100",
+	"table-header-cell-interactive": "_table-header-cell-interactive_nfkc_101"};
 
 const TableEmptyCellContent = () => {
-  return /* @__PURE__ */ jsx("span", { "aria-label": "empty table cell", className: styles$e["empty-cell"], children: "—" });
+  return /* @__PURE__ */ jsx("span", { "aria-label": "empty table cell", className: styles$f["empty-cell"], children: "—" });
 };
 
-const styles$d = {
+const styles$e = {
 	"truncate-chips": "_truncate-chips_1lgyk_2"
 };
 
@@ -136,7 +138,7 @@ const TruncateChips = ({
     "div",
     {
       ref: containerRef,
-      className: cx(styles$d["truncate-chips"], className),
+      className: cx(styles$e["truncate-chips"], className),
       style: {
         marginInlineEnd: plusChipWidth
       },
@@ -250,6 +252,238 @@ const dateTimeFormatter = (value, {
   return localizedDateTime.toLocaleString(formatOptions);
 };
 
+const SUPPORTED_INLINE_TAGS = ["strong", "b", "em", "i", "code", "mark"];
+const INLINE_TAG_REGEX = new RegExp(
+  `<(${SUPPORTED_INLINE_TAGS.join("|")})(\\s[^>]*)?>([\\s\\S]*?)</\\1>`,
+  "gi"
+);
+const INLINE_WRAPPERS = {
+  strong: ["**", "**"],
+  b: ["**", "**"],
+  em: ["*", "*"],
+  i: ["*", "*"],
+  code: ["`", "`"],
+  mark: ["==", "=="]
+};
+function convertInlineTags(html) {
+  let result = html;
+  let previous = "";
+  while (result !== previous) {
+    previous = result;
+    result = result.replace(INLINE_TAG_REGEX, (_, tag, _attrs, content) => {
+      const normalizedTag = tag.toLowerCase();
+      const wrapper = INLINE_WRAPPERS[normalizedTag];
+      if (!wrapper) return content;
+      return wrapper[0] + convertInlineTags(content) + wrapper[1];
+    });
+  }
+  return result;
+}
+const BR_REGEX = /<br\s*\/?>/gi;
+const P_OPEN_REGEX = /<p(\s[^>]*)?>/gi;
+const P_CLOSE_REGEX = /<\/p>/gi;
+const NAMED_ENTITIES = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  nbsp: " ",
+  quot: '"',
+  "#39": "'"
+};
+const ENTITY_REGEX = /&(#x[0-9a-fA-F]+|#\d+|[a-zA-Z]+);/g;
+function decodeEntities(text) {
+  return text.replace(ENTITY_REGEX, (match, entity) => {
+    if (entity.startsWith("#x")) {
+      return String.fromCharCode(parseInt(entity.slice(2), 16));
+    }
+    if (entity.startsWith("#")) {
+      return String.fromCharCode(parseInt(entity.slice(1), 10));
+    }
+    return NAMED_ENTITIES[entity] ?? match;
+  });
+}
+const SUPPORTED_TAGS = [
+  "strong",
+  "b",
+  "em",
+  "i",
+  "code",
+  "mark",
+  "ul",
+  "ol",
+  "li",
+  "br",
+  "p"
+];
+const UNSUPPORTED_TAG_REGEX = new RegExp(
+  `<(?!/?(?:${SUPPORTED_TAGS.join("|")})\\b)[a-zA-Z][^>]*>[\\s\\S]*?</[a-zA-Z][^>]*>`,
+  "gi"
+);
+const ORPHANED_CLOSE_TAG_REGEX = new RegExp(
+  `</(?!(?:${SUPPORTED_TAGS.join("|")})\\b)[a-zA-Z][^>]*>`,
+  "gi"
+);
+function removeUnsupportedTags(html) {
+  let result = html;
+  let previous = "";
+  while (result !== previous) {
+    previous = result;
+    result = result.replace(UNSUPPORTED_TAG_REGEX, "");
+  }
+  result = result.replace(ORPHANED_CLOSE_TAG_REGEX, "");
+  return result;
+}
+const UL_REGEX = /<ul(\s[^>]*)?>[\s\S]*?<\/ul>/gi;
+const OL_REGEX = /<ol(\s[^>]*)?>[\s\S]*?<\/ol>/gi;
+const LI_REGEX = /<li(\s[^>]*)?>[\s\S]*?<\/li>/gi;
+const LI_CONTENT_REGEX = /^<li(\s[^>]*)?>|<\/li>$/gi;
+function convertList(listHtml, ordered) {
+  const items = listHtml.match(LI_REGEX);
+  if (!items) return "";
+  return items.map((item, index) => {
+    const content = convertInlineTags(
+      item.replace(LI_CONTENT_REGEX, "").trim()
+    );
+    return ordered ? `${index + 1}. ${content}` : `- ${content}`;
+  }).join("\n");
+}
+function convertLists(html) {
+  let result = html;
+  result = result.replace(UL_REGEX, (match) => convertList(match, false));
+  result = result.replace(OL_REGEX, (match) => convertList(match, true));
+  return result;
+}
+function htmlToMarkdown(value) {
+  if (value == null || value === "") {
+    return "";
+  }
+  let result = value;
+  result = removeUnsupportedTags(result);
+  result = result.replace(P_OPEN_REGEX, "");
+  result = result.replace(P_CLOSE_REGEX, "\n");
+  result = convertLists(result);
+  result = result.replace(BR_REGEX, "\n");
+  result = convertInlineTags(result);
+  result = decodeEntities(result);
+  result = result.replace(/\n+$/, "");
+  return result;
+}
+
+const code = "_code_1u8e7_1";
+const highlight = "_highlight_1u8e7_2";
+const list = "_list_1u8e7_3";
+const container = "_container_1u8e7_4";
+const styles$d = {
+	code: code,
+	highlight: highlight,
+	list: list,
+	container: container
+};
+
+const INLINE_REGEX = /\*\*\*(.+?)\*\*\*|\*\*(.+?)\*\*|\*(.+?)\*|==(.+?)==|`(.+?)`/g;
+const UNORDERED_LIST_REGEX = /^- (.+)$/;
+const ORDERED_LIST_REGEX = /^\d+\. (.+)$/;
+function parseInline(text) {
+  const parts = [];
+  let lastIndex = 0;
+  INLINE_REGEX.lastIndex = 0;
+  let match;
+  while ((match = INLINE_REGEX.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(text.substring(lastIndex, match.index));
+    }
+    const key = match.index;
+    const savedIndex = INLINE_REGEX.lastIndex;
+    if (match[1]) {
+      parts.push(
+        /* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx("em", { children: parseInline(match[1]) }) }, key)
+      );
+    } else if (match[2]) {
+      parts.push(/* @__PURE__ */ jsx("strong", { children: parseInline(match[2]) }, key));
+    } else if (match[3]) {
+      parts.push(/* @__PURE__ */ jsx("em", { children: parseInline(match[3]) }, key));
+    } else if (match[4]) {
+      parts.push(
+        /* @__PURE__ */ jsx("mark", { className: styles$d.highlight, children: parseInline(match[4]) }, key)
+      );
+    } else if (match[5]) {
+      parts.push(
+        /* @__PURE__ */ jsx("code", { className: styles$d.code, children: match[5] }, key)
+      );
+    }
+    INLINE_REGEX.lastIndex = savedIndex;
+    lastIndex = savedIndex;
+  }
+  if (lastIndex < text.length) {
+    parts.push(text.substring(lastIndex));
+  }
+  return parts;
+}
+function parseBlocks(text) {
+  const lines = text.split("\n");
+  const blocks = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    const ulMatch = line.match(UNORDERED_LIST_REGEX);
+    const olMatch = line.match(ORDERED_LIST_REGEX);
+    if (ulMatch) {
+      const items = [ulMatch[1]];
+      i++;
+      while (i < lines.length) {
+        const nextUl = lines[i].match(UNORDERED_LIST_REGEX);
+        if (!nextUl) break;
+        items.push(nextUl[1]);
+        i++;
+      }
+      blocks.push({ type: "ul", items });
+    } else if (olMatch) {
+      const items = [olMatch[1]];
+      i++;
+      while (i < lines.length) {
+        const nextOl = lines[i].match(ORDERED_LIST_REGEX);
+        if (!nextOl) break;
+        items.push(nextOl[1]);
+        i++;
+      }
+      blocks.push({ type: "ol", items });
+    } else {
+      if (line !== "") {
+        blocks.push({ type: "text", content: line });
+      }
+      i++;
+    }
+  }
+  return blocks;
+}
+function renderBlocks(blocks) {
+  return blocks.map((block, index) => {
+    switch (block.type) {
+      case "text":
+        return /* @__PURE__ */ jsx("span", { children: parseInline(block.content) }, index);
+      case "ul":
+        return /* @__PURE__ */ jsx("ul", { className: styles$d.list, children: block.items.map((item, i) => /* @__PURE__ */ jsx("li", { children: parseInline(item) }, i)) }, index);
+      case "ol":
+        return /* @__PURE__ */ jsx("ol", { className: styles$d.list, children: block.items.map((item, i) => /* @__PURE__ */ jsx("li", { children: parseInline(item) }, i)) }, index);
+    }
+  });
+}
+const markdownFormatter = (value) => {
+  if (value == null || value === "") {
+    return null;
+  }
+  const blocks = parseBlocks(value);
+  if (blocks.length === 1 && blocks[0].type === "text") {
+    return /* @__PURE__ */ jsx(Fragment, { children: parseInline(blocks[0].content) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: styles$d.container, children: renderBlocks(blocks) });
+};
+
+const htmlFormatter = (value) => {
+  const markdown = htmlToMarkdown(value);
+  return markdownFormatter(markdown);
+};
+
 const numberFormatter = (value, options = {}) => {
   const {
     locale = "en-US",
@@ -391,6 +625,14 @@ const COLUMN_TYPE_DEFAULTS = {
       value,
       options
     )
+  },
+  markdown: {
+    align: "start",
+    createRenderCell: () => (value) => markdownFormatter(value)
+  },
+  html: {
+    align: "start",
+    createRenderCell: () => (value) => htmlFormatter(value)
   }
 };
 function resolveColumnTypeConfig(config) {
@@ -951,7 +1193,7 @@ const createRow = (table, id, original, rowIndex, depth, subRows, parentId) => {
       var _row$getValue;
       return (_row$getValue = row.getValue(columnId)) != null ? _row$getValue : table.options.renderFallbackValue;
     },
-    subRows: subRows != null ? subRows : [],
+    subRows: [],
     getLeafRows: () => flattenBy(row.subRows, d => d.subRows),
     getParentRow: () => row.parentId ? table.getRow(row.parentId, true) : undefined,
     getParentRows: () => {
@@ -3416,146 +3658,6 @@ function expandRows(rowModel) {
   };
 }
 
-function getGroupedRowModel() {
-  return table => memo(() => [table.getState().grouping, table.getPreGroupedRowModel()], (grouping, rowModel) => {
-    if (!rowModel.rows.length || !grouping.length) {
-      rowModel.rows.forEach(row => {
-        row.depth = 0;
-        row.parentId = undefined;
-      });
-      return rowModel;
-    }
-
-    // Filter the grouping list down to columns that exist
-    const existingGrouping = grouping.filter(columnId => table.getColumn(columnId));
-    const groupedFlatRows = [];
-    const groupedRowsById = {};
-    // const onlyGroupedFlatRows: Row[] = [];
-    // const onlyGroupedRowsById: Record<RowId, Row> = {};
-    // const nonGroupedFlatRows: Row[] = [];
-    // const nonGroupedRowsById: Record<RowId, Row> = {};
-
-    // Recursively group the data
-    const groupUpRecursively = function (rows, depth, parentId) {
-      if (depth === void 0) {
-        depth = 0;
-      }
-      // Grouping depth has been been met
-      // Stop grouping and simply rewrite thd depth and row relationships
-      if (depth >= existingGrouping.length) {
-        return rows.map(row => {
-          row.depth = depth;
-          groupedFlatRows.push(row);
-          groupedRowsById[row.id] = row;
-          if (row.subRows) {
-            row.subRows = groupUpRecursively(row.subRows, depth + 1, row.id);
-          }
-          return row;
-        });
-      }
-      const columnId = existingGrouping[depth];
-
-      // Group the rows together for this level
-      const rowGroupsMap = groupBy(rows, columnId);
-
-      // Perform aggregations for each group
-      const aggregatedGroupedRows = Array.from(rowGroupsMap.entries()).map((_ref, index) => {
-        let [groupingValue, groupedRows] = _ref;
-        let id = `${columnId}:${groupingValue}`;
-        id = parentId ? `${parentId}>${id}` : id;
-
-        // First, Recurse to group sub rows before aggregation
-        const subRows = groupUpRecursively(groupedRows, depth + 1, id);
-        subRows.forEach(subRow => {
-          subRow.parentId = id;
-        });
-
-        // Flatten the leaf rows of the rows in this group
-        const leafRows = depth ? flattenBy(groupedRows, row => row.subRows) : groupedRows;
-        const row = createRow(table, id, leafRows[0].original, index, depth, undefined, parentId);
-        Object.assign(row, {
-          groupingColumnId: columnId,
-          groupingValue,
-          subRows,
-          leafRows,
-          getValue: columnId => {
-            // Don't aggregate columns that are in the grouping
-            if (existingGrouping.includes(columnId)) {
-              if (row._valuesCache.hasOwnProperty(columnId)) {
-                return row._valuesCache[columnId];
-              }
-              if (groupedRows[0]) {
-                var _groupedRows$0$getVal;
-                row._valuesCache[columnId] = (_groupedRows$0$getVal = groupedRows[0].getValue(columnId)) != null ? _groupedRows$0$getVal : undefined;
-              }
-              return row._valuesCache[columnId];
-            }
-            if (row._groupingValuesCache.hasOwnProperty(columnId)) {
-              return row._groupingValuesCache[columnId];
-            }
-
-            // Aggregate the values
-            const column = table.getColumn(columnId);
-            const aggregateFn = column == null ? void 0 : column.getAggregationFn();
-            if (aggregateFn) {
-              row._groupingValuesCache[columnId] = aggregateFn(columnId, leafRows, groupedRows);
-              return row._groupingValuesCache[columnId];
-            }
-          }
-        });
-        subRows.forEach(subRow => {
-          groupedFlatRows.push(subRow);
-          groupedRowsById[subRow.id] = subRow;
-          // if (subRow.getIsGrouped?.()) {
-          //   onlyGroupedFlatRows.push(subRow);
-          //   onlyGroupedRowsById[subRow.id] = subRow;
-          // } else {
-          //   nonGroupedFlatRows.push(subRow);
-          //   nonGroupedRowsById[subRow.id] = subRow;
-          // }
-        });
-        return row;
-      });
-      return aggregatedGroupedRows;
-    };
-    const groupedRows = groupUpRecursively(rowModel.rows, 0);
-    groupedRows.forEach(subRow => {
-      groupedFlatRows.push(subRow);
-      groupedRowsById[subRow.id] = subRow;
-      // if (subRow.getIsGrouped?.()) {
-      //   onlyGroupedFlatRows.push(subRow);
-      //   onlyGroupedRowsById[subRow.id] = subRow;
-      // } else {
-      //   nonGroupedFlatRows.push(subRow);
-      //   nonGroupedRowsById[subRow.id] = subRow;
-      // }
-    });
-    return {
-      rows: groupedRows,
-      flatRows: groupedFlatRows,
-      rowsById: groupedRowsById
-    };
-  }, getMemoOptions(table.options, 'debugTable', 'getGroupedRowModel', () => {
-    table._queue(() => {
-      table._autoResetExpanded();
-      table._autoResetPageIndex();
-    });
-  }));
-}
-function groupBy(rows, columnId) {
-  const groupMap = new Map();
-  return rows.reduce((map, row) => {
-    const resKey = `${row.getGroupingValue(columnId)}`;
-    const previous = map.get(resKey);
-    if (!previous) {
-      map.set(resKey, [row]);
-    } else {
-      previous.push(row);
-    }
-    return map;
-  }, groupMap);
-}
-
 function getPaginationRowModel(opts) {
   return table => memo(() => [table.getState().pagination, table.getPrePaginationRowModel(), table.options.paginateExpandedRows ? undefined : table.getState().expanded], (pagination, rowModel) => {
     if (!rowModel.rows.length) {
@@ -3818,8 +3920,8 @@ function useDTFocusDispatchContext() {
 }
 
 const styles$c = {
-	"table-base": "_table-base_11xh7_2",
-	"data-table-base": "_data-table-base_11xh7_15"
+	"table-base": "_table-base_1ihr3_2",
+	"data-table-base": "_data-table-base_1ihr3_15"
 };
 
 const SimpleTableBase = ({
@@ -3847,7 +3949,7 @@ const DataTableBase = ({
   ...rest
 }) => {
   const tableBaseClassNames = cx(className, styles$c["data-table-base"]);
-  const { focusTableGenerally, blur } = useDTFocusDispatchContext();
+  const { focusTableGenerally, blur, moveFocusToCell } = useDTFocusDispatchContext();
   const handleBlur = (event) => {
     if (!event.currentTarget.contains(event.relatedTarget)) {
       blur();
@@ -3856,6 +3958,16 @@ const DataTableBase = ({
   const handleFocus = (event) => {
     if (event.target === event.currentTarget) {
       focusTableGenerally();
+      return;
+    }
+    const targetEl = event.target;
+    const cellEl = targetEl.closest("[data-cell-pos]");
+    const cellPosAttr = cellEl?.getAttribute("data-cell-pos");
+    if (cellPosAttr) {
+      const [rowIndex, columnIndex] = cellPosAttr.split(",").map(Number);
+      if (!Number.isNaN(rowIndex) && !Number.isNaN(columnIndex)) {
+        moveFocusToCell({ rowIndex, columnIndex });
+      }
     }
   };
   return /* @__PURE__ */ jsx(
@@ -3913,10 +4025,10 @@ const getCommonPinningClasses = (column) => {
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
   if (isLastLeftPinnedColumn) {
-    return styles$e["last-pinned-left-column"];
+    return styles$f["last-pinned-left-column"];
   }
   if (isFirstRightPinnedColumn) {
-    return styles$e["first-pinned-right-column"];
+    return styles$f["first-pinned-right-column"];
   }
 };
 
@@ -3939,9 +4051,9 @@ const DataTableEditableCellEditIcon = () => {
 };
 
 const TableBodyCell = forwardRef(({ type, children, className, isExpandCell, isSelectCell, ...rest }, ref) => {
-  const classes = cx(styles$e["table-body-cell"], className, {
-    [styles$e["table-cell-internal-expand"]]: isExpandCell,
-    [styles$e["table-cell-internal-select"]]: isSelectCell
+  const classes = cx(styles$f["table-body-cell"], className, {
+    [styles$f["table-cell-internal-expand"]]: isExpandCell,
+    [styles$f["table-cell-internal-select"]]: isSelectCell
   });
   const CellElement = type === "simple" ? "td" : "div";
   return /* @__PURE__ */ jsx(
@@ -3959,19 +4071,19 @@ const TableBodyCell = forwardRef(({ type, children, className, isExpandCell, isS
 TableBodyCell.displayName = "TableBodyCell";
 
 const styles$9 = {
-	"data-table-body-cell": "_data-table-body-cell_l8lyo_2",
-	"data-table-body-cell-input": "_data-table-body-cell-input_l8lyo_3",
-	"table-body-cell": "_table-body-cell_l8lyo_18",
-	"table-header-cell": "_table-header-cell_l8lyo_19",
-	"table-footer-cell": "_table-footer-cell_l8lyo_20",
-	"data-table-body-cell-editing": "_data-table-body-cell-editing_l8lyo_32",
-	"data-table-header-cell": "_data-table-header-cell_l8lyo_33",
-	"data-table-footer-cell": "_data-table-footer-cell_l8lyo_36",
-	"data-table-body-cell-hovered": "_data-table-body-cell-hovered_l8lyo_82",
-	"data-table-body-cell-error": "_data-table-body-cell-error_l8lyo_85",
-	"data-table-body-cell-warning": "_data-table-body-cell-warning_l8lyo_102",
-	"cell-error-icon": "_cell-error-icon_l8lyo_111",
-	"cell-warning-icon": "_cell-warning-icon_l8lyo_112"
+	"data-table-body-cell": "_data-table-body-cell_ab20z_2",
+	"data-table-body-cell-input": "_data-table-body-cell-input_ab20z_3",
+	"table-body-cell": "_table-body-cell_ab20z_18",
+	"table-header-cell": "_table-header-cell_ab20z_19",
+	"table-footer-cell": "_table-footer-cell_ab20z_20",
+	"data-table-cell-content": "_data-table-cell-content_ab20z_30",
+	"data-table-body-cell-editing": "_data-table-body-cell-editing_ab20z_51",
+	"data-table-header-cell": "_data-table-header-cell_ab20z_52",
+	"data-table-footer-cell": "_data-table-footer-cell_ab20z_55",
+	"data-table-body-cell-error": "_data-table-body-cell-error_ab20z_104",
+	"data-table-body-cell-warning": "_data-table-body-cell-warning_ab20z_121",
+	"cell-error-icon": "_cell-error-icon_ab20z_130",
+	"cell-warning-icon": "_cell-warning-icon_ab20z_131"
 };
 
 function formatCellPositionString(cellPosition) {
@@ -4018,37 +4130,33 @@ const getCommonPinningStyles = (column) => {
     zIndex: isPinned ? 1 : 0
   };
 };
+const EMPTY_PINNING_STYLES = Object.freeze({
+  left: void 0,
+  right: void 0,
+  position: "relative",
+  zIndex: 0
+});
 const useCommonPinningStyles = (column) => {
+  const isPinned = column.getIsPinned();
   const left = column.getStart("left");
   const right = column.getAfter("right");
-  const isPinned = column.getIsPinned();
-  return useMemo(
-    () => ({
+  return useMemo(() => {
+    if (!isPinned) return EMPTY_PINNING_STYLES;
+    return {
       left: isPinned === "left" ? `${left}px` : void 0,
       right: isPinned === "right" ? `${right}px` : void 0,
-      position: isPinned ? "sticky" : "relative",
-      zIndex: isPinned ? 1 : 0
-    }),
-    [left, right, isPinned]
-  );
+      position: "sticky",
+      zIndex: 1
+    };
+  }, [left, right, isPinned]);
 };
 
 const INTERNAL_ROW_ACTION_PRIMARY_COLUMN_ID = "a2-table-internal-row-action-primary";
 const INTERNAL_ROW_ACTION_SECONDARY_COLUMN_ID = "a2-table-internal-row-action-secondary";
 
-const CellFocusContext = createContext(
-  null
-);
-function useCellFocusContext() {
-  return useContext(CellFocusContext);
-}
-
 function DataTableBodyImmutableCell(props) {
-  const { cell, cellPosition, children, isHovered, ...rest } = props;
+  const { cell, cellPosition, children, ...rest } = props;
   const cellRef = useRef(null);
-  const [tabIndex, setTabIndex] = useState(-1);
-  const [isFocused, setIsFocused] = useState(false);
-  const { moveFocusToCell } = useDTFocusDispatchContext();
   const column = cell.column;
   const rowCanExpand = cell.row.getCanExpand();
   const rowIsExpanded = cell.row.getIsExpanded();
@@ -4063,11 +4171,10 @@ function DataTableBodyImmutableCell(props) {
   const cellError = meta?.errors?.[column.id];
   const cellWarning = meta?.warnings?.[column.id];
   const classes = cx(styles$9["data-table-body-cell"], rest.className, {
-    [styles$9["data-table-body-cell-hovered"]]: isHovered,
     [styles$9["data-table-body-cell-error"]]: !!cellError,
     [styles$9["data-table-body-cell-warning"]]: !cellError && !!cellWarning,
-    [styles$e["table-cell-internal-expand"]]: isExpandCell,
-    [styles$e["table-cell-internal-select"]]: isSelectCell
+    [styles$f["table-cell-internal-expand"]]: isExpandCell,
+    [styles$f["table-cell-internal-select"]]: isSelectCell
   });
   const commonPinningStyles = useCommonPinningStyles(column);
   const { jumpFocus, moveFocus } = useDTFocusDispatchContext();
@@ -4135,19 +4242,6 @@ function DataTableBodyImmutableCell(props) {
       toggleRowExpanded
     ]
   );
-  const handleFocus = useCallback(() => {
-    setTabIndex(0);
-    setIsFocused(true);
-    moveFocusToCell(cellPosition);
-  }, [moveFocusToCell, cellPosition]);
-  const handleBlur = useCallback(() => {
-    setTabIndex(-1);
-    setIsFocused(false);
-  }, []);
-  const cellFocusContextValue = useMemo(
-    () => ({ isCellFocused: isFocused }),
-    [isFocused]
-  );
   return /* @__PURE__ */ jsx(
     TableBodyCell,
     {
@@ -4155,13 +4249,11 @@ function DataTableBodyImmutableCell(props) {
       ...rest,
       className: classes,
       ref: cellRef,
-      tabIndex,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
+      tabIndex: -1,
       style: commonPinningStyles,
       onKeyDown: handleKeyDown,
       "data-cell-pos": formatCellPositionString(cellPosition),
-      children: /* @__PURE__ */ jsx(CellFocusContext.Provider, { value: cellFocusContextValue, children })
+      children
     }
   );
 }
@@ -4290,10 +4382,6 @@ function DataTableEditableTextCellInner(props, ref) {
     },
     [beginEditing, cellPosition, moveFocusToCell]
   );
-  const cellFocusContextValue = useMemo(
-    () => ({ isCellFocused: tabIndex === 0 && !isEditing }),
-    [tabIndex, isEditing]
-  );
   useEffect(() => {
     if (isEditing) {
       inputRef.current?.focus();
@@ -4329,7 +4417,7 @@ function DataTableEditableTextCellInner(props, ref) {
             onBlur: handleInputBlur,
             onKeyDown: handleInputKeyDown
           }
-        ) }) : /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
+        ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           children,
           !isEditing && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
         ] }),
@@ -4488,10 +4576,6 @@ function DataTableEditableNumberCellInner(props, ref) {
     },
     [beginEditing, cellPosition, moveFocusToCell]
   );
-  const cellFocusContextValue = useMemo(
-    () => ({ isCellFocused: tabIndex === 0 && !isEditing }),
-    [tabIndex, isEditing]
-  );
   useEffect(() => {
     if (isEditing) {
       localInputRef.current?.focus();
@@ -4527,7 +4611,7 @@ function DataTableEditableNumberCellInner(props, ref) {
             onBlur: handleInputBlur,
             onKeyDown: handleInputKeyDown
           }
-        ) }) : /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
+        ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           children,
           !isEditing && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
         ] }),
@@ -4605,10 +4689,6 @@ function useEditableMenuCell({
     },
     []
   );
-  const cellFocusContextValue = useMemo(
-    () => ({ isCellFocused: tabIndex === 0 }),
-    [tabIndex]
-  );
   return {
     tabIndex,
     cellRef,
@@ -4618,8 +4698,7 @@ function useEditableMenuCell({
     handleImplicitClose,
     handleCellMouseDown,
     handleCellBlur,
-    handleCellFocus,
-    cellFocusContextValue
+    handleCellFocus
   };
 }
 
@@ -4656,8 +4735,7 @@ function DataTableEditableSelectCellInner(props, ref) {
     handleImplicitClose,
     handleCellMouseDown,
     handleCellBlur,
-    handleCellFocus,
-    cellFocusContextValue
+    handleCellFocus
   } = useEditableMenuCell({ cellPosition, onCellKeyDown, ref });
   const selectedOption = useMemo(() => {
     if (cellValue === void 0 || cellValue === null) return null;
@@ -4703,10 +4781,8 @@ function DataTableEditableSelectCellInner(props, ref) {
             "data-state": dataState,
             onKeyDown: (e) => handleCellKeyDown(e, menuKeyDown, isOpen),
             children: [
-              /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
-                children,
-                !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
-              ] }),
+              children,
+              !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {}),
               /* @__PURE__ */ jsx(SrOnly, { children: isOpen ? "Press Enter or Space to select a cell value. Press Escape or F2 to cancel." : "Press Enter or F2 to edit cell value." })
             ]
           }
@@ -4800,8 +4876,7 @@ function DataTableEditableSelectAsyncCellInner(props, ref) {
     handleImplicitClose,
     handleCellMouseDown,
     handleCellBlur,
-    handleCellFocus,
-    cellFocusContextValue
+    handleCellFocus
   } = useEditableMenuCell({ cellPosition, onCellKeyDown, ref });
   const selectedOption = useMemo(() => {
     if (cellValue === void 0 || cellValue === null) return null;
@@ -4852,10 +4927,8 @@ function DataTableEditableSelectAsyncCellInner(props, ref) {
             "data-state": dataState,
             onKeyDown: (e) => handleCellKeyDown(e, menuKeyDown, isOpen),
             children: [
-              /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
-                children,
-                !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
-              ] }),
+              children,
+              !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {}),
               /* @__PURE__ */ jsx(SrOnly, { children: isOpen ? "Press Enter or Space to select a cell value. Press Escape or F2 to cancel." : "Press Enter or F2 to edit cell value." })
             ]
           }
@@ -4918,8 +4991,7 @@ function DataTableEditableMultiselectCellInner(props, ref) {
     handleImplicitClose,
     handleCellMouseDown,
     handleCellBlur,
-    handleCellFocus,
-    cellFocusContextValue
+    handleCellFocus
   } = useEditableMenuCell({ cellPosition, onCellKeyDown, ref });
   const selectedOptions = useMemo(() => {
     if (!Array.isArray(cellValue)) return [];
@@ -4966,10 +5038,8 @@ function DataTableEditableMultiselectCellInner(props, ref) {
             "data-state": dataState,
             onKeyDown: (e) => handleCellKeyDown(e, menuKeyDown, isOpen),
             children: [
-              /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
-                children,
-                !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
-              ] }),
+              children,
+              !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {}),
               /* @__PURE__ */ jsx(SrOnly, { children: isOpen ? "Press Enter or Space to select cell values. Press Escape or F2 to close." : "Press Enter or F2 to edit cell value." })
             ]
           }
@@ -5064,8 +5134,7 @@ function DataTableEditableMultiselectAsyncCellInner(props, ref) {
     handleImplicitClose,
     handleCellMouseDown,
     handleCellBlur,
-    handleCellFocus,
-    cellFocusContextValue
+    handleCellFocus
   } = useEditableMenuCell({ cellPosition, onCellKeyDown, ref });
   const selectedOptions = useMemo(() => {
     if (!Array.isArray(cellValue)) return [];
@@ -5115,10 +5184,8 @@ function DataTableEditableMultiselectAsyncCellInner(props, ref) {
             "data-state": dataState,
             onKeyDown: (e) => handleCellKeyDown(e, menuKeyDown, isOpen),
             children: [
-              /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
-                children,
-                !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
-              ] }),
+              children,
+              !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {}),
               /* @__PURE__ */ jsx(SrOnly, { children: isOpen ? "Press Enter or Space to select cell values. Press Escape or F2 to close." : "Press Enter or F2 to edit cell value." })
             ]
           }
@@ -5209,8 +5276,7 @@ function DataTableEditableBooleanCellInner(props, ref) {
     handleImplicitClose,
     handleCellMouseDown,
     handleCellBlur,
-    handleCellFocus,
-    cellFocusContextValue
+    handleCellFocus
   } = useEditableMenuCell({ cellPosition, onCellKeyDown, ref });
   const selectedOption = useMemo(() => {
     if (cellValue === void 0) return null;
@@ -5255,10 +5321,8 @@ function DataTableEditableBooleanCellInner(props, ref) {
             "data-state": dataState,
             onKeyDown: (e) => handleCellKeyDown(e, menuKeyDown, isOpen),
             children: [
-              /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
-                children,
-                !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
-              ] }),
+              children,
+              !isOpen && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {}),
               /* @__PURE__ */ jsx(SrOnly, { children: isOpen ? "Press Enter or Space to select a cell value. Press Escape or F2 to cancel." : "Press Enter or F2 to edit cell value." })
             ]
           }
@@ -5288,7 +5352,7 @@ const DataTableEditableBooleanCell = Object.assign(
 );
 
 function DataTableBodyMutableCell(props) {
-  const { cell, cellPosition, children, isHovered, ...rest } = props;
+  const { cell, cellPosition, children, ...rest } = props;
   const editableCellRef = useRef(null);
   const column = cell.column;
   const rowCanExpand = cell.row.getCanExpand();
@@ -5298,7 +5362,6 @@ function DataTableBodyMutableCell(props) {
   const cellError = meta?.errors?.[column.id];
   const cellWarning = meta?.warnings?.[column.id];
   const classes = cx(styles$9["data-table-body-cell"], rest.className, {
-    [styles$9["data-table-body-cell-hovered"]]: isHovered,
     [styles$9["data-table-body-cell-error"]]: !!cellError,
     [styles$9["data-table-body-cell-warning"]]: !cellError && !!cellWarning
   });
@@ -5391,14 +5454,13 @@ function DataTableBodyMutableCell(props) {
         onKeyDown: handleKeyDown,
         style: commonPinningStyles
       },
-      isHovered,
       children
     }
   );
 }
 
 function DataTableBodyCell(props) {
-  const { cell, cellPosition, children, isHovered, ...rest } = props;
+  const { cell, cellPosition, children, ...rest } = props;
   const column = cell.column;
   const editMode = column.columnDef.meta?.editMode;
   const Component = editMode ? DataTableBodyMutableCell : DataTableBodyImmutableCell;
@@ -5409,51 +5471,34 @@ function DataTableBodyCell(props) {
       cellPosition,
       ...rest,
       "data-cell-pos": formatCellPositionString(cellPosition),
-      isHovered,
       children
     }
   );
 }
 
 const styles$8 = {
-	"data-table-body-row": "_data-table-body-row_3jgem_2",
-	"data-table-body-sub-component-row": "_data-table-body-sub-component-row_3jgem_22",
-	"data-table-body-sub-component-container": "_data-table-body-sub-component-container_3jgem_26",
-	"data-table-body-sub-component-content": "_data-table-body-sub-component-content_3jgem_31",
-	"data-table-body-cell-group": "_data-table-body-cell-group_3jgem_37"
+	"data-table-body-row": "_data-table-body-row_1lv2u_2",
+	"data-table-body-sub-component-row": "_data-table-body-sub-component-row_1lv2u_22",
+	"data-table-body-sub-component-container": "_data-table-body-sub-component-container_1lv2u_26",
+	"data-table-body-sub-component-content": "_data-table-body-sub-component-content_1lv2u_31",
+	"data-table-body-virtualized": "_data-table-body-virtualized_1lv2u_35",
+	"data-table-body-row-virtualized": "_data-table-body-row-virtualized_1lv2u_40",
+	"data-table-body-cell-group": "_data-table-body-cell-group_1lv2u_50"
 };
 
-const DTHoverStateContext = createContext({
-  hoveredColumnId: null,
-  resizingColumnId: null
-});
-const DTHoverDispatchContext = createContext(() => {
-});
-
-function useDTHoverStateContext() {
-  const state = useContext(DTHoverStateContext);
-  return {
-    getIsHovered: (columnId) => {
-      return state.hoveredColumnId === columnId && !state.resizingColumnId;
-    },
-    hoveredColumnId: state.hoveredColumnId
-  };
-}
-
-function DataTableBodyRow({
+function DataTableBodyRowInner({
   columnOrder,
   row,
   rowIndex,
-  tableHasSubRows
+  tableHasSubRows,
+  isExpanded,
+  canExpand,
+  depth,
+  parentRowCanExpand
 }) {
   const visibleCells = row.getVisibleCells();
-  const canExpand = row.getCanExpand();
-  const isExpanded = row.getIsExpanded();
-  const depth = row.depth;
   const id = row.id;
   const original = row.original;
-  const parentRowCanExpand = row.getParentRow()?.getCanExpand() ?? false;
-  const { hoveredColumnId } = useDTHoverStateContext();
   const { focusSubComponent, blurSubComponent } = useDTFocusDispatchContext();
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
@@ -5477,7 +5522,7 @@ function DataTableBodyRow({
               cellPosition: { rowIndex, columnIndex },
               "aria-colindex": columnIndex + 1,
               className: cellClasses,
-              isHovered: hoveredColumnId === cell.column.id,
+              "data-anv-column-id": cell.column.id,
               children: flexRender(cell.column.columnDef.cell, cell.getContext())
             },
             cell.id
@@ -5502,6 +5547,17 @@ function DataTableBodyRow({
     )
   ] }, row.id);
 }
+function areRowPropsEqual(prev, next) {
+  const getRowVersion = next.getRowVersion;
+  if (!getRowVersion) {
+    return false;
+  }
+  return prev.row.id === next.row.id && getRowVersion(prev.row.original) === getRowVersion(next.row.original) && prev.rowIndex === next.rowIndex && prev.isExpanded === next.isExpanded && prev.canExpand === next.canExpand && prev.depth === next.depth && prev.parentRowCanExpand === next.parentRowCanExpand && prev.tableHasSubRows === next.tableHasSubRows && prev.columnOrder === next.columnOrder && prev.isSelected === next.isSelected && prev.isSomeSelected === next.isSomeSelected;
+}
+const DataTableBodyRow = memo$1(
+  DataTableBodyRowInner,
+  areRowPropsEqual
+);
 
 const useColumnOrder = ({ table }) => {
   const getColumnIndexes = useCallback((column) => {
@@ -5530,25 +5586,104 @@ const useColumnOrder = ({ table }) => {
   };
 };
 
-const DataTableBodyContent = ({
+function NonVirtualizedContent({
   table,
-  hasSubRows
-}) => {
+  hasSubRows,
+  getRowVersion
+}) {
   const { columnOrder } = useColumnOrder({ table });
-  return table.getRowModel().rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
+  const headerCount = table.getHeaderGroups().length;
+  return /* @__PURE__ */ jsx(Fragment, { children: table.getRowModel().rows.map((row, rowIndex) => /* @__PURE__ */ jsx(
     DataTableBodyRow,
     {
       columnOrder,
       row,
-      rowIndex: rowIndex + table.getHeaderGroups().length,
-      tableHasSubRows: hasSubRows
+      rowIndex: rowIndex + headerCount,
+      tableHasSubRows: hasSubRows,
+      isExpanded: row.getIsExpanded(),
+      canExpand: row.getCanExpand(),
+      depth: row.depth,
+      parentRowCanExpand: row.getParentRow()?.getCanExpand() ?? false,
+      isSelected: row.getIsSelected(),
+      isSomeSelected: row.getIsSomeSelected(),
+      getRowVersion
     },
     row.id
-  ));
-};
+  )) });
+}
+function VirtualizedContent({
+  table,
+  hasSubRows,
+  virtualizer,
+  getRowVersion
+}) {
+  const { columnOrder } = useColumnOrder({ table });
+  const headerCount = table.getHeaderGroups().length;
+  const rows = table.getRowModel().rows;
+  const virtualItems = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+  const measureRef = useMemo(
+    () => (el) => {
+      if (el) virtualizer.measureElement(el);
+    },
+    [virtualizer]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: styles$8["data-table-body-virtualized"],
+      "data-virtualized-body": "true",
+      style: { height: `${totalSize}px` },
+      children: virtualItems.map((virtualRow) => {
+        const row = rows[virtualRow.index];
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: measureRef,
+            "data-index": virtualRow.index,
+            className: styles$8["data-table-body-row-virtualized"],
+            style: { transform: `translateY(${virtualRow.start}px)` },
+            children: /* @__PURE__ */ jsx(
+              DataTableBodyRow,
+              {
+                columnOrder,
+                row,
+                rowIndex: virtualRow.index + headerCount,
+                tableHasSubRows: hasSubRows,
+                isExpanded: row.getIsExpanded(),
+                canExpand: row.getCanExpand(),
+                depth: row.depth,
+                parentRowCanExpand: row.getParentRow()?.getCanExpand() ?? false,
+                isSelected: row.getIsSelected(),
+                isSomeSelected: row.getIsSomeSelected(),
+                getRowVersion
+              }
+            )
+          },
+          row.id
+        );
+      })
+    }
+  );
+}
 function DataTableBody(props) {
-  const { table, hasSubRows, ...rest } = props;
-  return /* @__PURE__ */ jsx(TableBody, { type: "data-table", ...rest, children: /* @__PURE__ */ jsx(DataTableBodyContent, { table, hasSubRows }) });
+  const { table, hasSubRows, virtualizer, getRowVersion, ...rest } = props;
+  return /* @__PURE__ */ jsx(TableBody, { type: "data-table", ...rest, children: virtualizer ? /* @__PURE__ */ jsx(
+    VirtualizedContent,
+    {
+      table,
+      hasSubRows,
+      virtualizer,
+      getRowVersion
+    }
+  ) : /* @__PURE__ */ jsx(
+    NonVirtualizedContent,
+    {
+      table,
+      hasSubRows,
+      getRowVersion
+    }
+  ) });
 }
 
 const styles$7 = {
@@ -5570,7 +5705,7 @@ function TableFooter({ type, children, ...rest }) {
 
 const TableFooterCell = forwardRef((props, ref) => {
   const { type, children, className, ...rest } = props;
-  const classes = cx(styles$e["table-footer-cell"], className);
+  const classes = cx(styles$f["table-footer-cell"], className);
   const CellElement = type === "simple" ? "td" : "div";
   return /* @__PURE__ */ jsx(
     CellElement,
@@ -5588,16 +5723,7 @@ TableFooterCell.displayName = "TableFooterCell";
 
 function DataTableFooterCell(props) {
   const { cellPosition, children, className, ...rest } = props;
-  const [tabIndex, setTabIndex] = useState(-1);
   const footerCellRef = useRef(null);
-  const { moveFocusToCell } = useDTFocusDispatchContext();
-  const handleFocus = useCallback(() => {
-    moveFocusToCell(cellPosition);
-    setTabIndex(0);
-  }, [moveFocusToCell, cellPosition, setTabIndex]);
-  const handleBlur = useCallback(() => {
-    setTabIndex(-1);
-  }, [setTabIndex]);
   const { jumpFocus, moveFocus } = useDTFocusDispatchContext();
   const handleKeyDown = useCallback(
     (event) => {
@@ -5638,9 +5764,7 @@ function DataTableFooterCell(props) {
       type: "data-table",
       ...rest,
       ref: footerCellRef,
-      tabIndex,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
+      tabIndex: -1,
       onKeyDown: handleKeyDown,
       className: cx(styles$9["data-table-footer-cell"], className),
       "data-cell-pos": formatCellPositionString(cellPosition),
@@ -5795,6 +5919,27 @@ function DataTableFooter({
   ) : /* @__PURE__ */ jsx(DefaultTableFooterRows, { table, columns }) });
 }
 
+function useCellFocusListener(elementRef) {
+  const [isFocused, setIsFocused] = useState(false);
+  useEffect(() => {
+    const el = elementRef.current;
+    if (!el) return;
+    const cell = el.closest('[data-anv="table-body-cell"]');
+    if (!cell) return;
+    const onFocusIn = () => setIsFocused(true);
+    const onFocusOut = (e) => {
+      if (!cell.contains(e.relatedTarget)) setIsFocused(false);
+    };
+    cell.addEventListener("focusin", onFocusIn);
+    cell.addEventListener("focusout", onFocusOut);
+    return () => {
+      cell.removeEventListener("focusin", onFocusIn);
+      cell.removeEventListener("focusout", onFocusOut);
+    };
+  }, [elementRef]);
+  return isFocused;
+}
+
 const variantConfig = {
   error: {
     icon: SvgError,
@@ -5809,7 +5954,8 @@ const variantConfig = {
 };
 function CellStatus({ status, variant }) {
   const message = typeof status === "string" ? status : void 0;
-  const cellFocusContext = useCellFocusContext();
+  const ref = useRef(null);
+  const isCellFocused = useCellFocusListener(ref);
   const [isHovered, setIsHovered] = useState(false);
   const config = variantConfig[variant];
   const icon = /* @__PURE__ */ jsx(
@@ -5821,13 +5967,14 @@ function CellStatus({ status, variant }) {
     }
   );
   if (!message) {
-    return icon;
+    return /* @__PURE__ */ jsx("span", { ref, children: icon });
   }
-  const isTooltipOpen = cellFocusContext?.isCellFocused || isHovered;
+  const isTooltipOpen = isCellFocused || isHovered;
   return /* @__PURE__ */ jsxs(Tooltip, { open: isTooltipOpen, children: [
     /* @__PURE__ */ jsx(
       Tooltip.Trigger,
       {
+        ref,
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: icon
@@ -5837,22 +5984,116 @@ function CellStatus({ status, variant }) {
   ] });
 }
 
+const sharedColumnHelper = createColumnHelper();
+function resolveHeaderAlign(align, isGroup = false) {
+  if (isGroup) {
+    return "start";
+  }
+  return align ?? "start";
+}
+function getHeaderJustifyContent(align) {
+  if (align === "center") {
+    return "center";
+  }
+  if (align === "end") {
+    return "flex-end";
+  }
+  return "flex-start";
+}
+function normalizeColumnHeader(columnDef) {
+  return {
+    label: columnDef.header?.label ?? columnDef.headerLabel ?? String(columnDef.id),
+    required: columnDef.header?.required,
+    moreInfo: columnDef.header?.moreInfo
+  };
+}
+function renderColumnHeader(header, {
+  align,
+  isGroup = false
+}) {
+  const resolvedAlign = resolveHeaderAlign(align, isGroup);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-a2-datatable-header-wrapper": "true",
+      "data-a2-datatable-header-align": resolvedAlign,
+      "data-a2-datatable-header-kind": isGroup ? "group" : "leaf",
+      style: {
+        justifyContent: getHeaderJustifyContent(resolvedAlign),
+        maxWidth: "100%",
+        width: "fit-content"
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-a2-datatable-header-content": "true",
+          style: { maxWidth: "100%", width: "fit-content" },
+          children: /* @__PURE__ */ jsx(
+            FieldLabel,
+            {
+              el: "div",
+              required: header.required,
+              moreInfo: header.moreInfo,
+              style: {
+                maxWidth: "100%",
+                textAlign: resolvedAlign,
+                width: "fit-content"
+              },
+              children: header.label
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function renderRawCellValue(value) {
+  if (value === null || value === void 0) {
+    return null;
+  }
+  if (value === "") {
+    return "";
+  }
+  if (typeof value === "string" || typeof value === "number" || typeof value === "bigint") {
+    return value;
+  }
+  if (typeof value === "boolean") {
+    return String(value);
+  }
+  if (typeof value === "symbol") {
+    return value.toString();
+  }
+  if (typeof value === "object" && isValidElement(value)) {
+    return value;
+  }
+  if (Array.isArray(value)) {
+    return value.map((item, index) => /* @__PURE__ */ jsx(Fragment$1, { children: renderRawCellValue(item) }, index));
+  }
+  return String(value);
+}
 function getTanStackColumnDef({
   columnDef,
   emptyCellContent
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 }) {
-  const columnHelper = createColumnHelper();
+  const normalizedHeader = normalizeColumnHeader(columnDef);
   if (columnDef.columns && columnDef.columns.length > 0) {
-    return columnHelper.group({
+    return sharedColumnHelper.group({
       id: columnDef.id,
-      header: columnDef.headerLabel,
+      header: () => renderColumnHeader(normalizedHeader, {
+        align: columnDef.align,
+        isGroup: true
+      }),
       columns: columnDef.columns.map(
         (column) => getTanStackColumnDef({
           columnDef: column,
           emptyCellContent
         })
       ),
+      meta: {
+        columnDef,
+        headerAlign: resolveHeaderAlign(columnDef.align, true),
+        isGroupHeader: true
+      },
       footer: columnDef.footerContent ? () => columnDef.footerContent : void 0,
       enableResizing: columnDef.resizable
     });
@@ -5874,17 +6115,22 @@ function getTanStackColumnDef({
     }
   }
   const resolvedEmptyContent = columnDef.emptyCellContent ?? emptyCellContent ?? /* @__PURE__ */ jsx(TableEmptyCellContent, {});
-  return columnHelper.accessor((row) => row[columnDef.id], {
+  const metaColumnDef = {
+    ...columnDef,
+    headerLabel: normalizedHeader.label
+  };
+  return sharedColumnHelper.accessor((row) => row[columnDef.id], {
     id: columnDef.id,
     cell: (info) => {
+      const rawCellValue = info.row.original[columnDef.id];
       let cellContent;
       if (resolvedRenderCell) {
-        cellContent = resolvedRenderCell(info.getValue(), {
+        cellContent = resolvedRenderCell(rawCellValue, {
           row: info.row.original,
           depth: info.row.depth
         });
       } else {
-        cellContent = info.getValue();
+        cellContent = renderRawCellValue(rawCellValue);
       }
       if (cellContent === "") {
         cellContent = resolvedEmptyContent;
@@ -5893,16 +6139,10 @@ function getTanStackColumnDef({
       const cellError = meta?.errors?.[columnDef.id];
       const cellWarning = meta?.warnings?.[columnDef.id];
       return /* @__PURE__ */ jsxs(
-        Flex,
+        "div",
         {
-          justifyContent: resolvedAlign,
-          alignItems: "center",
-          wrap: "wrap",
-          gap: "1",
-          style: {
-            width: "100%",
-            textAlign: resolvedAlign
-          },
+          className: styles$9["data-table-cell-content"],
+          "data-align": resolvedAlign ?? "start",
           children: [
             cellError ? /* @__PURE__ */ jsx(CellStatus, { status: cellError, variant: "error" }) : cellWarning ? /* @__PURE__ */ jsx(CellStatus, { status: cellWarning, variant: "warning" }) : null,
             cellContent ?? resolvedEmptyContent
@@ -5910,17 +6150,25 @@ function getTanStackColumnDef({
         }
       );
     },
-    header: () => /* @__PURE__ */ jsx(Flex, { justifyContent: resolvedAlign, wrap: "wrap", grow: 1, children: columnDef.headerLabel }),
+    header: () => renderColumnHeader(normalizedHeader, {
+      align: resolvedAlign
+    }),
     footer: columnDef.footerContent ? () => columnDef.footerContent : void 0,
     minSize: columnDef.minWidth,
     maxSize: columnDef.maxWidth,
+    // TanStack's `size` is the column's starting width — we use `defaultWidth`
+    // when provided and fall back to `minWidth` so the auto-sizing basis
+    // matches the manual-resize floor by default.
+    size: columnDef.defaultWidth ?? columnDef.minWidth,
     enableResizing: columnDef.resizable,
     enableSorting: !!columnDef.sortable,
     meta: {
       editMode: columnDef.editConfig?.mode,
       editConfig: columnDef.editConfig,
-      columnDef
+      columnDef: metaColumnDef,
       // Store original for type narrowing
+      headerAlign: resolveHeaderAlign(resolvedAlign),
+      isGroupHeader: false
     },
     // If custom sorting function is provided, use it
     ...columnDef.sortable && typeof columnDef.sortable === "function" ? {
@@ -5937,12 +6185,20 @@ function getTanStackColumnDef({
   });
 }
 
+function shallowSortingEqual(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].id !== b[i].id || a[i].desc !== b[i].desc) return false;
+  }
+  return true;
+}
+
 const SvgArrowUpward = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M13 19V7.83l4.88 4.88c.39.39 1.03.39 1.42 0a.996.996 0 0 0 0-1.41l-6.59-6.59a.996.996 0 0 0-1.41 0l-6.6 6.58a.996.996 0 1 0 1.41 1.41L11 7.83V19c0 .55.45 1 1 1s1-.45 1-1z" }));
 
 const SvgArrowDownward = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M11 5v11.17l-4.88-4.88c-.39-.39-1.03-.39-1.42 0a.996.996 0 0 0 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0l6.59-6.59a.996.996 0 1 0-1.41-1.41L13 16.17V5c0-.55-.45-1-1-1s-1 .45-1 1z" }));
 
 const styles$5 = {
-	"table-header": "_table-header_y7cb1_2"
+	"table-header": "_table-header_nz2nu_2"
 };
 
 function TableHeader({ type, children, ...rest }) {
@@ -5966,15 +6222,17 @@ const TableHeaderCell = forwardRef(
     className,
     isGroup,
     isSortable,
+    isInteractiveHeaderCell,
     isSelectCell,
     isExpandCell,
     ...rest
   }, ref) => {
-    const classes = cx(styles$e["table-header-cell"], className, {
-      [styles$e["table-header-cell-group"]]: isGroup,
-      [styles$e["table-header-cell-sortable"]]: isSortable,
-      [styles$e["table-cell-internal-expand"]]: isExpandCell,
-      [styles$e["table-cell-internal-select"]]: isSelectCell
+    const classes = cx(styles$f["table-header-cell"], className, {
+      [styles$f["table-header-cell-group"]]: isGroup,
+      [styles$f["table-header-cell-sortable"]]: isSortable,
+      [styles$f["table-header-cell-interactive"]]: isInteractiveHeaderCell,
+      [styles$f["table-cell-internal-expand"]]: isExpandCell,
+      [styles$f["table-cell-internal-select"]]: isSelectCell
     });
     const CellElement = type === "simple" ? "th" : "div";
     return /* @__PURE__ */ jsx(
@@ -5992,6 +6250,23 @@ const TableHeaderCell = forwardRef(
 );
 TableHeaderCell.displayName = "TableHeaderCell";
 
+const INTERACTIVE_DESCENDANT_SELECTOR = [
+  "button",
+  "a[href]",
+  "input",
+  "select",
+  "textarea",
+  '[role="button"]',
+  '[role="link"]',
+  '[contenteditable="true"]'
+].join(", ");
+function isInteractiveDescendant(target, currentTarget) {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+  const interactiveElement = target.closest(INTERACTIVE_DESCENDANT_SELECTOR);
+  return !!interactiveElement && currentTarget.contains(interactiveElement);
+}
 function DataTableHeaderCellInner(props, forwardedRef) {
   const { cellPosition, children, header, className, ...rest } = props;
   const internalRef = useRef(null);
@@ -6006,20 +6281,11 @@ function DataTableHeaderCellInner(props, forwardedRef) {
     },
     [forwardedRef]
   );
-  const { moveFocusToCell } = useDTFocusDispatchContext();
-  const [tabIndex, setTabIndex] = useState(-1);
-  const handleFocus = useCallback(() => {
-    moveFocusToCell(cellPosition);
-    setTabIndex(0);
-  }, [moveFocusToCell, cellPosition, setTabIndex]);
-  const handleBlur = useCallback(() => {
-    setTabIndex(-1);
-  }, [setTabIndex]);
   const { jumpFocus, moveFocus } = useDTFocusDispatchContext();
   const columnId = header.column.id;
   const isExpandCell = columnId === INTERNAL_ROW_ACTION_PRIMARY_COLUMN_ID;
   const isSelectCell = columnId === INTERNAL_ROW_ACTION_SECONDARY_COLUMN_ID;
-  const isSortingCell = header.column.columnDef.enableSorting;
+  const isSortingCell = header.column.getCanSort();
   const handleKeyDown = useCallback(
     (event) => {
       switch (event.key) {
@@ -6051,6 +6317,9 @@ function DataTableHeaderCellInner(props, forwardedRef) {
         }
         case " ":
         case "Enter": {
+          if (isInteractiveDescendant(event.target, event.currentTarget)) {
+            return;
+          }
           const isDisabled = header.column.columnDef.meta?.disableHeaderAction;
           if (isSelectCell && !isDisabled) {
             event.preventDefault();
@@ -6083,18 +6352,20 @@ function DataTableHeaderCellInner(props, forwardedRef) {
   );
   const handleClick = useCallback(
     (event) => {
-      if (header.column.columnDef.enableSorting) {
-        const target = event.target;
-        const resizeHandle = target.closest(
+      if (isSortingCell) {
+        if (!(event.target instanceof Element)) {
+          return;
+        }
+        const resizeHandle = event.target.closest(
           '[aria-roledescription="Resize handle"]'
         );
-        if (resizeHandle) {
+        if (resizeHandle || isInteractiveDescendant(event.target, event.currentTarget)) {
           return;
         }
         header.column.getToggleSortingHandler()?.(event);
       }
     },
-    [header.column]
+    [header.column, isSortingCell]
   );
   return /* @__PURE__ */ jsxs(
     TableHeaderCell,
@@ -6102,17 +6373,15 @@ function DataTableHeaderCellInner(props, forwardedRef) {
       type: "data-table",
       ...rest,
       ref: setRefs,
-      tabIndex,
-      onFocus: handleFocus,
+      tabIndex: -1,
       onClick: handleClick,
-      onBlur: handleBlur,
       onKeyDown: handleKeyDown,
       className: cx(styles$9["data-table-header-cell"], className),
       "data-cell-pos": formatCellPositionString(cellPosition),
       "aria-sort": header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : void 0,
       children: [
         children,
-        header.column.columnDef.enableSorting && /* @__PURE__ */ jsxs(SrOnly, { children: [
+        isSortingCell && /* @__PURE__ */ jsxs(SrOnly, { children: [
           header.column.getIsSorted() === "asc" ? "Sorted ascending." : header.column.getIsSorted() === "desc" ? "Sorted descending." : "Not sorted.",
           " ",
           "Click to toggle sort."
@@ -6160,32 +6429,48 @@ function ResizeHandle({
 }
 
 const styles$3 = {
-	"data-table-header-row": "_data-table-header-row_6qs0u_17"
+	"data-table-header-row": "_data-table-header-row_w353z_17"
 };
 
-function useDTHoverDispatchContext() {
-  return useContext(DTHoverDispatchContext);
+function getHeaderContentAlign(align) {
+  if (align === "center") {
+    return "center";
+  }
+  if (align === "end") {
+    return "flex-end";
+  }
+  return "flex-start";
 }
-
-function DataTableHeader({ table }) {
-  const dispatch = useDTHoverDispatchContext();
+function DataTableHeader({
+  table,
+  tableRef
+}) {
+  const getTableBase = useCallback(
+    () => tableRef.current?.querySelector(
+      '[data-anv="data-table-base"]'
+    ) ?? null,
+    [tableRef]
+  );
   const handleHoverColumn = useCallback(
     (columnId) => {
-      dispatch({
-        type: "HOVER_START",
-        payload: { columnId }
-      });
+      const base = getTableBase();
+      if (!base) return;
+      base.setAttribute("data-anv-hover-col", columnId);
+      base.querySelectorAll(`[data-anv-column-id="${CSS.escape(columnId)}"]`).forEach((el) => el.setAttribute("data-anv-is-hovered-col", "true"));
     },
-    [dispatch]
+    [getTableBase]
   );
   const handleHoverColumnLeave = useCallback(
     (columnId) => {
-      dispatch({
-        type: "HOVER_END",
-        payload: { columnId }
-      });
+      const base = getTableBase();
+      if (!base) return;
+      if (base.getAttribute("data-anv-hover-col") !== columnId) return;
+      base.removeAttribute("data-anv-hover-col");
+      base.querySelectorAll(
+        `[data-anv-column-id="${CSS.escape(columnId)}"][data-anv-is-hovered-col="true"]`
+      ).forEach((el) => el.removeAttribute("data-anv-is-hovered-col"));
     },
-    [dispatch]
+    [getTableBase]
   );
   const cellRefs = useRef(/* @__PURE__ */ new Map());
   const createResizeStartHandler = useCallback(
@@ -6203,15 +6488,6 @@ function DataTableHeader({ table }) {
     },
     [table]
   );
-  const handleResizeEnd = useCallback(
-    (columnId) => {
-      dispatch({
-        type: "RESIZE_END",
-        payload: { columnId }
-      });
-    },
-    [dispatch]
-  );
   const { columnOrder } = useColumnOrder({ table });
   return /* @__PURE__ */ jsx(TableHeader, { type: "data-table", children: table.getHeaderGroups().map((headerGroup, index) => /* @__PURE__ */ jsx(
     "div",
@@ -6224,6 +6500,13 @@ function DataTableHeader({ table }) {
         const isInternalSelectColumn = header.column.id === INTERNAL_ROW_ACTION_SECONDARY_COLUMN_ID;
         const isInternalExpandColumn = header.column.id === INTERNAL_ROW_ACTION_PRIMARY_COLUMN_ID;
         const gridColumn = header.colSpan > 1 ? `span ${header.colSpan}` : void 0;
+        const headerContentAlign = getHeaderContentAlign(
+          header.column.columnDef.meta?.headerAlign
+        );
+        const isGroupHeader = header.subHeaders.length > 0;
+        const hasGroupDivider = isGroupHeader || Boolean(header.column.parent && isLastInParentGroup);
+        const isHeaderActionDisabled = header.column.columnDef.meta?.disableHeaderAction === true;
+        const headerCellInteractive = !isGroupHeader && (header.column.getCanSort() || (isInternalExpandColumn || isInternalSelectColumn) && !isHeaderActionDisabled);
         return /* @__PURE__ */ jsx(
           DataTableHeaderCell,
           {
@@ -6236,17 +6519,19 @@ function DataTableHeader({ table }) {
               }
             },
             className: getCommonPinningClasses(header.column),
+            "data-anv-column-id": header.column.id,
             style: {
               gridColumn,
               ...getCommonPinningStyles(header.column)
             },
             "aria-colspan": header.colSpan,
-            isGroup: "columns" in header.column.columnDef || header.getContext().header.column.parent && isLastInParentGroup,
-            isSortable: header.column.columnDef.enableSorting,
+            isGroup: hasGroupDivider,
+            isSortable: header.column.getCanSort(),
+            isInteractiveHeaderCell: headerCellInteractive,
             isSelectCell: isInternalSelectColumn,
             isExpandCell: isInternalExpandColumn,
-            onMouseEnter: isInternalExpandColumn || isInternalSelectColumn ? void 0 : () => handleHoverColumn(header.column.id),
-            onMouseLeave: isInternalExpandColumn || isInternalSelectColumn ? void 0 : () => handleHoverColumnLeave(header.column.id),
+            onMouseEnter: headerCellInteractive ? () => handleHoverColumn(header.column.id) : void 0,
+            onMouseLeave: headerCellInteractive ? () => handleHoverColumnLeave(header.column.id) : void 0,
             cellPosition: {
               rowIndex: index,
               columnIndex: columnOrder.indexOf(header.column.getIndex())
@@ -6255,30 +6540,53 @@ function DataTableHeader({ table }) {
               Flex,
               {
                 direction: "row",
-                alignItems: "flex-end",
+                alignItems: "center",
                 gap: 2,
                 style: {
                   width: "100%"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs(Flex, { direction: "row", alignItems: "center", gap: 2, grow: 1, children: [
-                    flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    ),
+                  /* @__PURE__ */ jsxs(
+                    Flex,
                     {
-                      asc: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowUpward, size: "small" }),
-                      desc: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowDownward, size: "small" })
-                    }[header.column.getIsSorted()] ?? null
-                  ] }),
+                      direction: "row",
+                      alignItems: "center",
+                      justifyContent: headerContentAlign,
+                      gap: 2,
+                      grow: 1,
+                      style: {
+                        minWidth: 0,
+                        width: "100%"
+                      },
+                      children: [
+                        flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        ),
+                        header.column.getIsSorted() ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              alignItems: "center",
+                              display: "flex",
+                              flexShrink: 0
+                            },
+                            children: {
+                              asc: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowUpward, size: "small" }),
+                              desc: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowDownward, size: "small" })
+                            }[header.column.getIsSorted()] ?? null
+                          }
+                        ) : null
+                      ]
+                    }
+                  ),
                   header.column.columnDef.enableResizing && /* @__PURE__ */ jsx(
                     ResizeHandle,
                     {
                       header,
                       onResizeStart: createResizeStartHandler(
                         header.column.id
-                      ),
-                      onResizeEnd: () => handleResizeEnd(header.column.id)
+                      )
                     }
                   )
                 ]
@@ -6294,8 +6602,8 @@ function DataTableHeader({ table }) {
 }
 
 const styles$2 = {
-	"table-container": "_table-container_z7onx_2",
-	"table-scroll-container": "_table-scroll-container_z7onx_57"
+	"table-container": "_table-container_vqc6w_2",
+	"table-scroll-container": "_table-scroll-container_vqc6w_57"
 };
 
 const TableContainer = forwardRef(
@@ -6448,49 +6756,6 @@ function usePageDataCache(config) {
   return { getOrLoad, clearCache };
 }
 
-function DTHoverProvider({ children }) {
-  const [state, dispatch] = useReducer(reducer$1, initialState$1);
-  return /* @__PURE__ */ jsx(DTHoverStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(DTHoverDispatchContext.Provider, { value: dispatch, children }) });
-}
-function reducer$1(state, action) {
-  switch (action.type) {
-    case "HOVER_START": {
-      return {
-        ...state,
-        hoveredColumnId: action.payload.columnId
-      };
-    }
-    case "HOVER_END": {
-      if (state.hoveredColumnId !== action.payload.columnId) {
-        return state;
-      }
-      return {
-        ...state,
-        hoveredColumnId: null
-      };
-    }
-    case "RESIZE_START": {
-      return {
-        ...state,
-        resizingColumnId: action.payload.columnId
-      };
-    }
-    case "RESIZE_END": {
-      return {
-        ...state,
-        resizingColumnId: null
-      };
-    }
-    default: {
-      throw new Error("Unknown action");
-    }
-  }
-}
-const initialState$1 = {
-  hoveredColumnId: null,
-  resizingColumnId: null
-};
-
 function scrollCellIntoView(element, stickyDimensions) {
   const isBodyCell = element.getAttribute("data-anv") === "table-body-cell";
   const scrollContainer = element.closest(
@@ -6676,9 +6941,32 @@ function DTFocusProvider({
   columnCount,
   tableRef,
   leftPinnedWidth,
-  rightPinnedWidth
+  rightPinnedWidth,
+  virtualizer,
+  headerRowCount
 }) {
   const stateRef = useRef(initialState);
+  const lastTabbablePosRef = useRef(null);
+  const syncRovingTabindex = useCallback(() => {
+    const restorePoint = stateRef.current.focusRestorePoint;
+    const prev = lastTabbablePosRef.current;
+    const nextEl = tableRef.current?.querySelector(
+      `[data-cell-pos="${formatCellPositionString(restorePoint)}"]`
+    );
+    const restorePointUnchanged = prev && prev.rowIndex === restorePoint.rowIndex && prev.columnIndex === restorePoint.columnIndex;
+    if (restorePointUnchanged && nextEl?.tabIndex === 0) {
+      return;
+    }
+    const prevEl = prev && !restorePointUnchanged ? tableRef.current?.querySelector(
+      `[data-cell-pos="${formatCellPositionString(prev)}"]`
+    ) : null;
+    if (prevEl) prevEl.tabIndex = -1;
+    if (nextEl) nextEl.tabIndex = 0;
+    lastTabbablePosRef.current = restorePoint;
+  }, [tableRef]);
+  useLayoutEffect(() => {
+    syncRovingTabindex();
+  }, [syncRovingTabindex, rowCount, columnCount]);
   const dispatch = useCallback(
     (action) => {
       const newState = reducer(stateRef.current, action, rowCount, columnCount);
@@ -6693,26 +6981,55 @@ function DTFocusProvider({
         }
       }
       stateRef.current = newState;
+      syncRovingTabindex();
       if (!newState.focusedCell || shouldSkipFocusUpdate) {
         return;
       }
-      const element = tableRef.current?.querySelector(
-        `[data-cell-pos="${formatCellPositionString(newState.focusedCell)}"]`
-      );
-      if (element) {
-        element.focus();
-        scrollCellIntoView(element, {
-          leftWidth: leftPinnedWidth,
-          rightWidth: rightPinnedWidth
-        });
-      } else {
-        dispatch({
-          type: "FOCUS_CELL_MANUALLY",
-          payload: { cellPosition: { rowIndex: 0, columnIndex: 0 } }
-        });
+      const focusTargetCell = () => {
+        if (!newState.focusedCell) return;
+        if (!areCellPositionsEqual(
+          newState.focusedCell,
+          stateRef.current.focusedCell
+        )) {
+          return;
+        }
+        const element = tableRef.current?.querySelector(
+          `[data-cell-pos="${formatCellPositionString(newState.focusedCell)}"]`
+        );
+        if (element) {
+          element.focus();
+          scrollCellIntoView(element, {
+            leftWidth: leftPinnedWidth,
+            rightWidth: rightPinnedWidth
+          });
+        } else {
+          dispatch({
+            type: "FOCUS_CELL_MANUALLY",
+            payload: { cellPosition: { rowIndex: 0, columnIndex: 0 } }
+          });
+        }
+      };
+      if (virtualizer && newState.focusedCell) {
+        const virtualRowIndex = newState.focusedCell.rowIndex - headerRowCount;
+        const bodyRowCount = virtualizer.options.count;
+        if (virtualRowIndex >= 0 && virtualRowIndex < bodyRowCount) {
+          virtualizer.scrollToIndex(virtualRowIndex, { align: "auto" });
+          requestAnimationFrame(focusTargetCell);
+          return;
+        }
       }
+      focusTargetCell();
     },
-    [rowCount, columnCount, tableRef, leftPinnedWidth, rightPinnedWidth]
+    [
+      rowCount,
+      columnCount,
+      tableRef,
+      leftPinnedWidth,
+      rightPinnedWidth,
+      syncRovingTabindex,
+      virtualizer,
+      headerRowCount
+    ]
   );
   const state = useMemo(
     () => ({ getFocusedCell: () => stateRef.current.focusedCell }),
@@ -6721,6 +7038,38 @@ function DTFocusProvider({
   return /* @__PURE__ */ jsx(DTFocusStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(DTFocusDispatchContext.Provider, { value: dispatch, children }) });
 }
 
+const VIRTUALIZATION_THRESHOLD = 101;
+const DEFAULT_ESTIMATED_ROW_HEIGHT = 35;
+function useDataTableVirtualizer({
+  rowCount,
+  scrollRef,
+  disabled
+}) {
+  const shouldVirtualize = !disabled && rowCount >= VIRTUALIZATION_THRESHOLD;
+  const virtualizer = useVirtualizer({
+    count: shouldVirtualize ? rowCount : 0,
+    // `scrollRef` points at the outer TableContainer div, which does not
+    // itself scroll — the nested [data-anv="table-scroll-container"] child
+    // owns `overflow-y: auto`. Descend to that child so the virtualizer
+    // tracks the right element. Fall back to `scrollRef.current` for
+    // containers that one day collapse the scroll wrapper.
+    getScrollElement: () => {
+      const outer = scrollRef.current;
+      if (!outer) return null;
+      return outer.querySelector(
+        '[data-anv="table-scroll-container"]'
+      ) ?? outer;
+    },
+    estimateSize: () => DEFAULT_ESTIMATED_ROW_HEIGHT,
+    overscan: 5,
+    measureElement: typeof window !== "undefined" && typeof navigator !== "undefined" && navigator.userAgent.indexOf("jsdom") === -1 ? (el) => el?.getBoundingClientRect().height ?? DEFAULT_ESTIMATED_ROW_HEIGHT : void 0
+  });
+  return useMemo(
+    () => shouldVirtualize ? virtualizer : void 0,
+    [shouldVirtualize, virtualizer]
+  );
+}
+
 const EMPTY_DATA = [];
 function DataTableInner(props, ref) {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
@@ -6743,6 +7092,8 @@ function DataTableInner(props, ref) {
     sortedColumn,
     emptyState,
     emptyCellContent,
+    disableVirtualization,
+    getRowVersion,
     className,
     style,
     ...rest
@@ -6831,11 +7182,13 @@ function DataTableInner(props, ref) {
     isLoading
   } = useAsyncData(dataSource);
   const totalItemCount = paginationObject?.totalRowCount ?? resolvedData?.length ?? 0;
-  const hasSubRows = !!resolvedData?.some(
-    (row) => row?.subRows?.length ?? 0 > 0
+  const hasSubRows = useMemo(
+    () => !!resolvedData?.some((row) => (row?.subRows?.length ?? 0) > 0),
+    [resolvedData]
   );
-  const hasSubComponent = !!resolvedData?.some(
-    (row) => row?.subComponent != null
+  const hasSubComponent = useMemo(
+    () => !!resolvedData?.some((row) => row?.subComponent != null),
+    [resolvedData]
   );
   const isExpandable = hasSubRows || hasSubComponent;
   const [expanded, setExpanded] = useOptionallyControlledState({
@@ -7019,9 +7372,9 @@ function DataTableInner(props, ref) {
     columns,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
-    getGroupedRowModel: getGroupedRowModel(),
+    ...isPaginated && { getPaginationRowModel: getPaginationRowModel() },
+    ...isExpandable && { getExpandedRowModel: getExpandedRowModel() },
+    // Grouping row model is retained for future use; cheap to exclude now.
     getRowId: (row) => row.id.toString(),
     getSubRows: (row) => row.subRows ?? void 0,
     getRowCanExpand: (row) => {
@@ -7054,8 +7407,7 @@ function DataTableInner(props, ref) {
     },
     onSortingChange: (updaterOrValue) => {
       const newSorting = typeof updaterOrValue === "function" ? updaterOrValue(sorting) : updaterOrValue;
-      const sortingChanged = JSON.stringify(newSorting) !== JSON.stringify(sorting);
-      if (!sortingChanged) {
+      if (shallowSortingEqual(newSorting, sorting ?? [])) {
         return;
       }
       setSorting(newSorting);
@@ -7064,6 +7416,11 @@ function DataTableInner(props, ref) {
       }
     }
   });
+  const rowVirtualizer = useDataTableVirtualizer({
+    rowCount: table.getRowModel().rows.length,
+    scrollRef: tableRef,
+    disabled: disableVirtualization
+  });
   const headers = table.getFlatHeaders();
   const headerRowCount = table.getHeaderGroups().length;
   const bodyRowCount = table.getRowModel().rows.length;
@@ -7120,16 +7477,14 @@ function DataTableInner(props, ref) {
       if (hasBeenResized) {
         return `${currentSize}px`;
       }
-      const minSize = header.column.columnDef.minSize ?? currentSize;
+      if (header.column.getIsPinned()) {
+        return `${currentSize}px`;
+      }
       const maxSize = header.column.columnDef.maxSize;
-      return `minmax(${minSize}px, ${maxSize ? `${maxSize}px` : "1fr"})`;
+      return `minmax(${currentSize}px, ${maxSize ? `${maxSize}px` : "1fr"})`;
     }).join(" ");
     vars["--a2-grid-template-columns"] = gridColumns;
     vars["--a2-table-width"] = allHaveMaxWidth ? "max-content" : "100%";
-    for (let i = 0; i < headers.length; i++) {
-      const header = headers[i];
-      vars[`--a2-table-col-${header.column.getIndex()}-size`] = header.column.getSize();
-    }
     return vars;
   }, [headers, columnSizing]);
   const columnCount = useMemo(() => {
@@ -7143,7 +7498,9 @@ function DataTableInner(props, ref) {
       tableRef,
       leftPinnedWidth: table.getLeftTotalSize(),
       rightPinnedWidth: table.getRightTotalSize(),
-      children: /* @__PURE__ */ jsx(DTHoverProvider, { children: /* @__PURE__ */ jsxs(
+      virtualizer: rowVirtualizer,
+      headerRowCount,
+      children: /* @__PURE__ */ jsxs(
         TableContainer,
         {
           ...rest,
@@ -7165,8 +7522,16 @@ function DataTableInner(props, ref) {
                 colCount: columnCount,
                 hasSubRows,
                 children: [
-                  /* @__PURE__ */ jsx(DataTableHeader, { table }),
-                  /* @__PURE__ */ jsx(DataTableBody, { table, hasSubRows }),
+                  /* @__PURE__ */ jsx(DataTableHeader, { table, tableRef }),
+                  /* @__PURE__ */ jsx(
+                    DataTableBody,
+                    {
+                      table,
+                      hasSubRows,
+                      virtualizer: rowVirtualizer,
+                      getRowVersion
+                    }
+                  ),
                   isEmpty && emptyState && /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx(SrOnly, { children: "No data to display." }),
                     /* @__PURE__ */ jsx("div", { className: styles["empty-state-container"], children: /* @__PURE__ */ jsxs(
@@ -7243,11 +7608,11 @@ function DataTableInner(props, ref) {
             )
           ]
         }
-      ) })
+      )
     }
   );
 }
 const DataTable = forwardRef(DataTableInner);
 
-export { COLUMN_TYPE_DEFAULTS as C, DataTable as D, chipsFormatter as a, booleanFormatter as b, createColumnHelper$1 as c, currencyFormatter as d, dateFormatter as e, dateTimeFormatter as f, getColumnTypeDefaults as g, dateFormatPresets as h, timeFormatter as i, numberFormatter as n, percentFormatter as p, resolveColumnTypeConfig as r, timeFormatPresets as t, yearlessDateFormatter as y };
-//# sourceMappingURL=DataTable-DK9xRjnq.js.map
+export { COLUMN_TYPE_DEFAULTS as C, DataTable as D, chipsFormatter as a, booleanFormatter as b, createColumnHelper$1 as c, currencyFormatter as d, dateFormatter as e, dateTimeFormatter as f, getColumnTypeDefaults as g, htmlFormatter as h, dateFormatPresets as i, timeFormatter as j, markdownFormatter as m, numberFormatter as n, percentFormatter as p, resolveColumnTypeConfig as r, timeFormatPresets as t, yearlessDateFormatter as y };
+//# sourceMappingURL=DataTable-JRxu2yTP.js.map