@oracle/oraclejet-preact 20.0.3 → 20.1.0

package/es/Table-535987d0.js

@@ -0,0 +1,4112 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, Fragment, jsxs } from 'preact/jsx-runtime';
+import { Fragment as Fragment$1, createRef } from 'preact';
+import { memo, forwardRef } from 'preact/compat';
+import { useRef, useState, useCallback, useEffect, useMemo, useImperativeHandle, useLayoutEffect } from 'preact/hooks';
+import './CollectionInteractionContext-7cf19abc.js';
+import { u as useCollectionInteractionContext } from './useCollectionInteractionContext-3895c632.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import { u as useId } from './useId-03dbfdf0.js';
+import { T as TabbableModeContext } from './TabbableModeContext-7d8ad946.js';
+import { u as useTestId } from './useTestId-ab1bede6.js';
+import { u as useUser } from './useUser-e543b73c.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { F as FocusTracker } from './FocusTracker-70300f1c.js';
+import { g as getCellType, a as getRowKey, u as useDataManager } from './ScrollUtils-8a50c01e.js';
+import { m as mergeProps } from './mergeProps-88ea8306.js';
+import { u as useContextMenuGesture } from './useContextMenuGesture-e09f4c69.js';
+import { i as isAutoFocusCell, g as getElementFromCell, a as applyScrollDetail, r as resetVerticalScrollPosition, b as getBoundaryColumnKey, T as TABLE_FOCUSABLE_SELECTOR, l as logicalCellExtractor, c as getColumnKey, h as hasFooterCells, d as getLastRenderedRowKey, e as TABLE_ROW_SELECTOR, f as hasLoadMoreCell, j as getFirstRenderedRowKey, k as hasNoDataCell, m as getVerticalScrollPosition, n as getRowIndexForRowKey, o as getScrollerBottom, p as getRowKeyForRowIndex, q as getColumnIndexForHeaderFooterElement, s as getRowIndexForRowElement, t as getHeaderRowElement, u as TABLE_HEADER_SELECTOR, v as useScrollHandling, w as getHorizontalScrollPosition, x as getTableBodyElement, y as getNoDataCellElement, z as getDataCellClassArray, A as getFormTextAlign, B as TableSkeletonRow, C as getHeaderFooterCellClassArray, D as useSizingManager, E as TableColGroup } from './TableColGroup-d74bd4f5.js';
+import { u as useTranslationBundle } from './useTranslationBundle-bc6e0896.js';
+import { B as Button } from './Button-a76ecfa8.js';
+import { D as Dialog } from './Dialog-d1de5b06.js';
+import { F as Flex } from './Flex-fc483125.js';
+import { M as Menu, a as MenuItem } from './SelectMenuGroupContext-130a850c.js';
+import { S as Submenu, a as SelectSingleMenuGroup, b as SelectMenuItem } from './Submenu-fa7c2b4f.js';
+import './logger-c92f309c.js';
+import './UNSAFE_Separator/themes/SeparatorStyles.css.js';
+import './MenuSeparatorStyles.styles.css';
+import './UNSAFE_Menu/themes/redwood/MenuSeparatorBaseTheme.styles.css';
+import './UNSAFE_Menu/themes/redwood/MenuSeparatorVariants.css.js';
+import { N as NumberInputText } from './NumberInputText-60be5757.js';
+import { u as useColorScheme } from './useColorScheme-67245285.js';
+import { u as useScale } from './useScale-93490e54.js';
+import { T as TooltipContent } from './useTooltipControlled-b7f30aee.js';
+import { S as SHOW_TOOLTIP_DELAY, g as getWrappedTooltipContent, H as HIDE_TOOLTIP_DELAY, a as getGlobalTooltipManager } from './tooltipUtils-90fb656f.js';
+import { g as getElementContainsFunc, o as handleEnterActionableMode, p as handleWrapActionableFocus, f as findElementByKey, k as keyExtractor } from './collectionUtils-5313629f.js';
+import { a as allTabbableElements, g as getActiveElement, c as getBodyElement, i as isTabbableElement } from './tabbableUtils-c8311ec6.js';
+import { g as getRowActionGestureContext, i as isLogicalCtrl, h as handleRowActionGesture } from './EventUtils-e1b93d3a.js';
+import { c as containsKey, a as addKey, r as removeKey, e as isSameKey } from './keys-49c92dbb.js';
+import { g as getClientHints } from './clientHints-a42b510c.js';
+import { g as getIsSelectionPending, c as clearElementSelection } from './textSelectionUtils-e87a47ff.js';
+import { backgroundStyles, tableDragIndicatorStyles, tableFooterRowStyles, tableHeaderCellTextStyles, tableHeaderSortContainerStyles, tableHeaderRowStyles, innerTableStyles, scrollerStyles, userSelectStyles } from './PRIVATE_Table/themes/Table.css.js';
+import { tableSkeletonStylesHC, tableSkeletonStyles } from './PRIVATE_Table/themes/TableSkeletonStyles.css.js';
+import { TableRedwoodTheme } from './PRIVATE_Table/themes/redwood/TableTheme.js';
+import { a as LoadMoreCollection } from './LoadMoreCollection-d9f22790.js';
+import { tableRowStyles, tableRowStylesHC } from './PRIVATE_Table/themes/TableRowStyles.css.js';
+import { TableNoDataRedwoodTheme } from './PRIVATE_Table/themes/redwood/TableNoDataTheme.js';
+import { u as useInteractionStyle } from './useInteractionStyle-99e32c23.js';
+import { S as Selector } from './Selector-23bccbe7.js';
+import { F as FormContext } from './FormContext-55fb8000.js';
+import { preventBrowserTooltipStyle, justifyContentStyles } from './PRIVATE_TableCommon/themes/Common.css.js';
+import { S as SortableContext } from './useSortableContext-88a0fc5a.js';
+import { S as SelectorAll } from './SelectorAll-3d39196b.js';
+import { S as SortControl } from './SortControl-1044fcd9.js';
+import { tableHeaderCellStyles } from './PRIVATE_Table/themes/TableHeaderCellStyles.css.js';
+
+/**
+ * The internal component used to render a custom context menu on the Table
+ */
+function TableContextMenu({ contextMenuConfig, contextMenuContext, ...menuProps }) {
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const accessibleLabel = contextMenuConfig.accessibleLabel != null
+        ? contextMenuConfig.accessibleLabel
+        : translations.accContextMenuLabel();
+    return contextMenuConfig.itemsRenderer(contextMenuContext) != null ? (jsx(Menu, { "aria-label": accessibleLabel, ...menuProps, children: menuProps.isOpen && contextMenuConfig.itemsRenderer(contextMenuContext) })) : (jsx(Fragment, {}));
+}
+/**
+ * The internal component used to render the context menu sort item on the Table
+ */
+function TableContextMenuSort({ columnKey, isDisabled, currentSortDirection, onSortCriterionChange }) {
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const _handleSort = ({ value }) => {
+        if (onSortCriterionChange != null && value !== currentSortDirection) {
+            onSortCriterionChange([
+                { key: columnKey, sortDirection: value === 'ascending' ? 'ascending' : 'descending' }
+            ]);
+        }
+    };
+    return (jsx(Submenu, { label: translations.collection_sortColumnMenu(), children: jsxs(SelectSingleMenuGroup, { value: currentSortDirection, onCommit: _handleSort, children: [jsx(SelectMenuItem, { isDisabled: isDisabled, value: "ascending", label: translations.collection_sortAscendingSubMenu() }), jsx(SelectMenuItem, { isDisabled: isDisabled, value: "descending", label: translations.collection_sortDescendingSubMenu() })] }) }));
+}
+/**
+ * The internal component used to render the context menu column resize item on the Table
+ */
+function TableContextMenuResize({ isDisabled, setIsResizeDialogOpen }) {
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const handleResize = () => {
+        setIsResizeDialogOpen(true);
+    };
+    return (jsx(MenuItem, { label: translations.collection_resizeColumnMenu(), onAction: handleResize, isDisabled: isDisabled }));
+}
+/**
+ * The internal component used to render the column resize dialog on the Table
+ */
+function TableResizeColumnDialog({ isOpen, columnKey, onColumnResize, appliedColumnWidths, setIsResizeDialogOpen }) {
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const initialWidth = Math.round(appliedColumnWidths.netColumnWidths[columnKey]);
+    const initialWidthRef = useRef(initialWidth);
+    const numberInputRef = useRef(null);
+    const [widthValue, setWidthValue] = useState(String(initialWidth));
+    let isDisabled;
+    let messages;
+    if (widthValue == null ||
+        Number.isNaN(parseInt(widthValue)) ||
+        String(parseInt(widthValue)) !== widthValue.trim() ||
+        parseInt(widthValue) < 16 ||
+        parseInt(widthValue) > 100000) {
+        messages = [
+            {
+                severity: 'error',
+                detail: translations.collection_resizeMessageDetail({ MIN: '16', MAX: '100000' })
+            }
+        ];
+        isDisabled = true;
+    }
+    else {
+        isDisabled = false;
+    }
+    const apply = useCallback(() => {
+        if (columnKey != null && onColumnResize != null && widthValue != null) {
+            if (parseInt(widthValue) !== initialWidthRef.current) {
+                onColumnResize({
+                    key: columnKey,
+                    newWidth: parseInt(widthValue),
+                    allColumnWidths: appliedColumnWidths.netColumnWidths,
+                    paddingWidth: appliedColumnWidths.totalBorderOffset,
+                    gesture: 'contextMenu',
+                    type: 'absolute'
+                });
+            }
+        }
+        setIsResizeDialogOpen(false);
+    }, [columnKey, onColumnResize, widthValue, appliedColumnWidths, setIsResizeDialogOpen]);
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === 'Enter' && !isDisabled) {
+            apply();
+        }
+    }, [apply, isDisabled]);
+    const cancel = useCallback(() => {
+        setIsResizeDialogOpen(false);
+    }, [setIsResizeDialogOpen]);
+    const handleOnInput = useCallback((detail) => {
+        setWidthValue(detail.value);
+    }, []);
+    const footer = (jsxs(Flex, { gap: "2x", children: [jsx(Button, { onAction: cancel, label: translations.collection_cancel() }), jsx(Button, { variant: "callToAction", onAction: apply, label: translations.collection_apply(), isDisabled: isDisabled })] }));
+    return (jsx(Dialog, { autoFocusRef: numberInputRef, isOpen: isOpen, modality: 'modal', header: translations.collection_resizeColumnDialog(), footer: footer, children: jsx("div", { onKeyDown: handleKeyDown, children: jsx(NumberInputText, { label: translations.collection_width(), onInput: handleOnInput, suffix: translations.collection_pixels(), messages: messages, isRequired: true, isRequiredShown: true, ref: numberInputRef, value: widthValue }) }) }));
+}
+
+/**
+ * Helper function to determine if a given active cell represents a 'transient' state.
+ */
+function isTransientCell(activeCell) {
+    return (activeCell != null &&
+        (activeCell.type === 'loadMore' ||
+            activeCell.type === 'loading' ||
+            activeCell.type === 'pending'));
+}
+/**
+ * Helper function to compare two given cell descriptors.
+ */
+function cellComparator(cell1, cell2) {
+    if (cell1 == null) {
+        return cell2 == null;
+    }
+    if (cell2 == null) {
+        return false;
+    }
+    if (cell1.type === cell2.type && cell1.rowKey === cell2.rowKey) {
+        // special case the transient 'loading' cell types as column keys are hints used for when a user
+        // navigates back to another region using the keyboard - otherwise we'd go to the first column
+        if (cell1.type === 'loading' || cell1.type === 'loadMore' || cell1.type === 'pending') {
+            return true;
+        }
+        return cell1.columnKey === cell2.columnKey;
+    }
+    return false;
+}
+function getCellContextMenuContextFromCell(tableData, columnsArray, setIsResizeDialogOpen, cell, sortCriterion, onSortCriterionChange) {
+    if (cell?.type === 'data' || cell?.type === 'header' || cell?.type === 'footer') {
+        let isSortable = false;
+        let isResizable = false;
+        for (let i = 0; i < columnsArray.length; i++) {
+            const column = columnsArray[i];
+            if (column.key === cell.columnKey) {
+                isSortable = column.value.sortable === 'enabled';
+                isResizable = column.value.resizable === 'enabled';
+                break;
+            }
+        }
+        let currentSortDirection;
+        if (sortCriterion != null) {
+            for (const criterion of sortCriterion) {
+                if (criterion.key === cell.columnKey) {
+                    currentSortDirection = criterion.sortDirection;
+                    break;
+                }
+            }
+        }
+        const allMenuItems = {
+            resizeColumn: (jsx(TableContextMenuResize, { isDisabled: !isResizable, setIsResizeDialogOpen: setIsResizeDialogOpen })),
+            sortColumn: (jsx(TableContextMenuSort, { columnKey: cell.columnKey, isDisabled: !isSortable, currentSortDirection: currentSortDirection, onSortCriterionChange: onSortCriterionChange }))
+        };
+        const hasResizableColumns = columnsArray.some((column) => {
+            return column.value.resizable === 'enabled';
+        });
+        const hasSortableColumns = columnsArray.some((column) => {
+            return column.value.sortable === 'enabled';
+        });
+        const defaultMenuItems = hasResizableColumns || hasSortableColumns ? (jsxs(Fragment, { children: [hasResizableColumns ? allMenuItems['resizeColumn'] : undefined, hasSortableColumns ? allMenuItems['sortColumn'] : undefined] })) : undefined;
+        if (cell.type === 'data') {
+            for (const rowData of tableData) {
+                if (rowData.metadata.key === cell.rowKey) {
+                    return {
+                        allMenuItems,
+                        defaultMenuItems,
+                        rowData: rowData.data,
+                        rowKey: cell.rowKey,
+                        columnKey: cell.columnKey,
+                        type: 'data'
+                    };
+                }
+            }
+        }
+        else {
+            return {
+                allMenuItems,
+                defaultMenuItems,
+                columnKey: cell.columnKey,
+                type: cell.type
+            };
+        }
+    }
+    return undefined;
+}
+/**
+ * Helper function to determine the resulting cell from a cell override.
+ */
+function _getCellFromCellOverride(tableData, columnsArray, cellOverride, currentCell) {
+    let cellType;
+    let cellRowKey;
+    let cellColumnKey;
+    if (cellOverride.rowKey != null) {
+        cellType = 'data';
+        cellRowKey = cellOverride.rowKey;
+        if (cellOverride.columnKey != null) {
+            cellColumnKey = cellOverride.columnKey;
+        }
+        else if (currentCell?.columnKey != null) {
+            cellColumnKey = currentCell.columnKey;
+        }
+        else {
+            cellColumnKey = getBoundaryColumnKey(columnsArray, true);
+        }
+        if (cellColumnKey == null) {
+            return undefined;
+        }
+    }
+    else if (cellOverride.columnKey != null) {
+        cellColumnKey = cellOverride.columnKey;
+        if (cellOverride.type != null) {
+            cellType = cellOverride.type;
+        }
+        else if (currentCell?.type != null && currentCell.type !== 'noData') {
+            cellType = currentCell.type;
+        }
+        else {
+            cellType = 'header';
+        }
+        if (cellType === 'data') {
+            if (currentCell?.rowKey != null) {
+                cellRowKey = currentCell.rowKey;
+            }
+            else if (tableData.length > 0) {
+                cellRowKey = tableData[0].metadata.key;
+            }
+            if (cellRowKey == null) {
+                return undefined;
+            }
+        }
+    }
+    else if (cellOverride.type != null) {
+        cellType = cellOverride.type;
+        if (cellType !== 'noData') {
+            if (currentCell?.columnKey != null) {
+                cellColumnKey = currentCell.columnKey;
+            }
+            else {
+                cellColumnKey = getBoundaryColumnKey(columnsArray, true);
+            }
+            if (cellColumnKey == null) {
+                return undefined;
+            }
+            if (cellType === 'data') {
+                if (currentCell?.rowKey != null) {
+                    cellRowKey = currentCell.rowKey;
+                }
+                else if (tableData.length > 0) {
+                    cellRowKey = tableData[0].metadata.key;
+                }
+                if (cellRowKey == null) {
+                    return undefined;
+                }
+            }
+        }
+    }
+    else {
+        return undefined;
+    }
+    return { type: cellType, rowKey: cellRowKey, columnKey: cellColumnKey };
+}
+/**
+ * Helper function to determine the resulting cell type from a cell override.
+ */
+function _getCellTypeFromCellOverride(cellOverride, currentCell) {
+    if (cellOverride.type != null) {
+        return cellOverride.type;
+    }
+    if (cellOverride.rowKey != null) {
+        return 'data';
+    }
+    // if no type or rowKey was given, a columnKey must have been given
+    if (currentCell?.type != null && currentCell.type !== 'noData') {
+        return currentCell.type;
+    }
+    return 'header';
+}
+/**
+ * Helper function to apply a current cell override if necessary.
+ */
+function applyCurrentCellOverride(rootElement, scrollerElement, viewportInfo, tableId, tableData, columnsArray, stickyColumnInfo, sizingInfo, overflowInfo, currencyStatusRef, onActiveCellChanged, isEmbeddedSelect, isPendingLayout, isDataLoaded, isRtl, currentCellOverride, appliedColumnWidths) {
+    // when embedded select, use most recent non-null current cell value as override base
+    const currentCell = isEmbeddedSelect
+        ? currencyStatusRef.current.previousEmbeddedSelectCurrentCell
+        : currencyStatusRef.current.currentCell;
+    // ensure any new currentCellOverride settings are applied if necessary
+    if (currencyStatusRef.current.hasPendingCurrentCellOverride ||
+        currencyStatusRef.current.currentCellOverride !== currentCellOverride) {
+        if (currentCellOverride != null) {
+            // attempt to find the cell the override specifies
+            const realizedCell = _getCellFromCellOverride(tableData, columnsArray, currentCellOverride, currentCell);
+            if (realizedCell != null) {
+                // override cell was determined - apply the override immediately
+                onActiveCellChanged({ value: realizedCell }, isAutoFocusCell(rootElement, tableId, realizedCell), false, true);
+                currencyStatusRef.current.currentCellOverride = currentCellOverride;
+                currencyStatusRef.current.hasPendingCurrentCellOverride = false;
+                if (isEmbeddedSelect) {
+                    // scroll 'current-cell-override' vertically into view immediately for embedded select
+                    // otherwise, cell will be scrolled into view once the component or cell receives focus
+                    if (!isPendingLayout && getElementFromCell(rootElement, tableId, realizedCell) != null) {
+                        applyScrollDetail(rootElement, scrollerElement, viewportInfo, tableId, columnsArray, stickyColumnInfo, sizingInfo, overflowInfo, { cell: realizedCell, locationY: 'inView' }, isRtl, appliedColumnWidths);
+                        currencyStatusRef.current.hasPendingCurrentCellOverrideScroll = false;
+                    }
+                    else if (isPendingLayout || !isDataLoaded) {
+                        // corresponding element was not found - data is not ready for scrolling
+                        currencyStatusRef.current.hasPendingCurrentCellOverrideScroll = true;
+                    }
+                    else {
+                        // corresponding element was not found - value was garbage
+                        currencyStatusRef.current.hasPendingCurrentCellOverrideScroll = false;
+                    }
+                }
+                else {
+                    // not in an embedded select, so no scrolling should be performed
+                    currencyStatusRef.current.hasPendingCurrentCellOverrideScroll = false;
+                }
+            }
+            else if (!isDataLoaded) {
+                // override cell could not be determined - data is still fetching
+                currencyStatusRef.current.hasPendingCurrentCellOverride = true;
+            }
+            else {
+                // override cell could not be determined - value was garbage
+                currencyStatusRef.current.currentCellOverride = currentCellOverride;
+                currencyStatusRef.current.hasPendingCurrentCellOverride = false;
+                currencyStatusRef.current.hasPendingCurrentCellOverrideScroll = false;
+            }
+        }
+        else {
+            // override is set to clear the current cell
+            onActiveCellChanged({ value: currentCellOverride });
+            currencyStatusRef.current.currentCellOverride = currentCellOverride;
+            currencyStatusRef.current.hasPendingCurrentCellOverride = false;
+            if (isEmbeddedSelect) {
+                // scroll back to the top for embedded select
+                resetVerticalScrollPosition(scrollerElement);
+            }
+            currencyStatusRef.current.hasPendingCurrentCellOverrideScroll = false;
+        }
+    }
+    else if (currencyStatusRef.current.hasPendingCurrentCellOverrideScroll) {
+        // try and apply any pending scroll from a previous cell override at this time
+        if (currencyStatusRef.current.currentCell != null) {
+            if (!isPendingLayout &&
+                getElementFromCell(rootElement, tableId, currencyStatusRef.current.currentCell) != null) {
+                applyScrollDetail(rootElement, scrollerElement, viewportInfo, tableId, columnsArray, stickyColumnInfo, sizingInfo, overflowInfo, { cell: currencyStatusRef.current.currentCell, locationY: 'inView' }, isRtl, appliedColumnWidths);
+                currencyStatusRef.current.hasPendingCurrentCellOverrideScroll = false;
+            }
+            else if (!isPendingLayout && isDataLoaded) {
+                // corresponding element was not found - value was garbage
+                currencyStatusRef.current.hasPendingCurrentCellOverrideScroll = false;
+            }
+        }
+        else {
+            // there is no longer a current cell to try and scroll to
+            currencyStatusRef.current.hasPendingCurrentCellOverrideScroll = false;
+        }
+    }
+}
+/**
+ * Helper to determine if the given render state includes the cell specified.
+ */
+function _renderIncludesCell(cell, columnsArray, tableData, hasMore, isPendingLayout, hasFooters) {
+    // pending layout is special as other regions exist, but are not yet navigable
+    if (isPendingLayout) {
+        return cell.type === 'pending';
+    }
+    if (cell.type === 'header' || (hasFooters && cell.type === 'footer')) {
+        for (let i = 0; i < columnsArray.length; i++) {
+            if (columnsArray[i].key === cell.columnKey) {
+                return true;
+            }
+        }
+    }
+    else if (tableData.length > 0) {
+        if (cell.type === 'loadMore') {
+            return hasMore;
+        }
+        if (cell.type === 'data') {
+            let isColumnValid = false;
+            for (let i = 0; i < columnsArray.length; i++) {
+                if (columnsArray[i].key === cell.columnKey) {
+                    isColumnValid = true;
+                    break;
+                }
+            }
+            if (isColumnValid) {
+                for (let i = 0; i < tableData.length; i++) {
+                    if (tableData[i].metadata.key === cell.rowKey) {
+                        return true;
+                    }
+                }
+            }
+        }
+    }
+    else {
+        return (cell.type === 'loading' && hasMore) || (cell.type === 'noData' && !hasMore);
+    }
+    return false;
+}
+/**
+ * Helper to get the cell that should currently be a tab stop for the given render state.
+ */
+function determineActiveCell(columnsArray, currencyStatusRef, tableData, hasMore, isPendingLayout, isEmbeddedSelect, hasFooters, currentCellOverride) {
+    if (isPendingLayout) {
+        return { type: 'pending' };
+    }
+    // if no columns are specified, it is a special case 'noData' display
+    const firstColumnKey = getBoundaryColumnKey(columnsArray, true);
+    if (firstColumnKey == null) {
+        return { type: 'noData' };
+    }
+    // if nothing specifies where focus should go, use the first header cell
+    const defaultFirstCell = {
+        type: 'header',
+        columnKey: firstColumnKey
+    };
+    // when embedded select, use most recent non-null current cell value as override base
+    const currentCell = isEmbeddedSelect
+        ? currencyStatusRef.current.previousEmbeddedSelectCurrentCell
+        : currencyStatusRef.current.currentCell;
+    if (currencyStatusRef.current.hasPendingCurrentCellOverride ||
+        currencyStatusRef.current.currentCellOverride !== currentCellOverride) {
+        if (currentCellOverride != null) {
+            // attempt to find the cell the override specifies
+            const realizedCell = _getCellFromCellOverride(tableData, columnsArray, currentCellOverride, currentCell);
+            if (realizedCell != null &&
+                _renderIncludesCell(realizedCell, columnsArray, tableData, hasMore, isPendingLayout, hasFooters)) {
+                return realizedCell;
+            }
+            // if here, the resulting cell from the override could not be determined or was not valid
+            const overrideCellType = _getCellTypeFromCellOverride(currentCellOverride, currentCell);
+            if (overrideCellType === 'data') {
+                if (tableData.length === 0 && hasMore) {
+                    // pending 'data' override when 'loading' skeletons are shown
+                    return { type: 'loading', columnKey: currentCell?.columnKey };
+                }
+            }
+            else if (overrideCellType === 'noData' && tableData.length === 0 && hasMore) {
+                // pending 'noData' override when 'loading' skeletons are shown
+                return { type: 'loading', columnKey: currentCell?.columnKey };
+            }
+        }
+        else if (_renderIncludesCell(defaultFirstCell, columnsArray, tableData, hasMore, isPendingLayout, hasFooters)) {
+            return defaultFirstCell;
+        }
+        else {
+            return undefined;
+        }
+    }
+    // if here, there is no current cell override that can be applied during this render
+    const activeCell = currencyStatusRef.current.activeCell;
+    if (activeCell != null) {
+        if (activeCell.type === 'loadMore') {
+            const initialData = currencyStatusRef.current.loadMoreInitialData;
+            // if loadMore skeletons are no longer shown, or the data has changed, shift to
+            // the next row in the data set if possible - otherwise just the closest row
+            if (tableData.length > 0 && tableData !== initialData) {
+                const rowKey = initialData != null && tableData.length > initialData.length
+                    ? tableData[initialData.length].metadata.key
+                    : tableData[tableData.length - 1].metadata.key;
+                const columnKey = currentCell?.columnKey != null ? currentCell.columnKey : firstColumnKey;
+                const cell = { type: 'data', rowKey: rowKey, columnKey: columnKey };
+                if (_renderIncludesCell(cell, columnsArray, tableData, hasMore, isPendingLayout, hasFooters)) {
+                    return cell;
+                }
+            }
+            else if (tableData.length === 0) {
+                if (hasMore) {
+                    return { type: 'loading', columnKey: currentCell?.columnKey };
+                }
+                else {
+                    return { type: 'noData' };
+                }
+            }
+        }
+        if (_renderIncludesCell(activeCell, columnsArray, tableData, hasMore, isPendingLayout, hasFooters)) {
+            return activeCell;
+        }
+        else if (activeCell.type === 'loading') {
+            if (currentCell != null && (currentCell.type === 'data' || currentCell.type === 'noData')) {
+                // if the current cell is already set to 'data' or 'noData', and is now available, return it
+                if (_renderIncludesCell(currentCell, columnsArray, tableData, hasMore, isPendingLayout, hasFooters)) {
+                    return currentCell;
+                }
+            }
+            // otherwise, find the first row if available, and try and maintain the columnKey
+            if (tableData.length > 0) {
+                const rowKey = tableData[0].metadata.key;
+                const columnKey = currentCell?.columnKey != null ? currentCell.columnKey : firstColumnKey;
+                const cell = { type: 'data', rowKey: rowKey, columnKey: columnKey };
+                if (_renderIncludesCell(cell, columnsArray, tableData, hasMore, isPendingLayout, hasFooters)) {
+                    return cell;
+                }
+            }
+            else {
+                return { type: 'noData' };
+            }
+        }
+    }
+    // if here, there is no active cell, or the active cell is no longer valid
+    if (currentCell != null) {
+        if (_renderIncludesCell(currentCell, columnsArray, tableData, hasMore, isPendingLayout, hasFooters)) {
+            return currentCell;
+        }
+        if (currentCell.type === 'data') {
+            if (tableData.length === 0 && hasMore) {
+                // pending 'data' override when 'loading' skeletons are shown
+                return { type: 'loading', columnKey: currentCell.columnKey };
+            }
+        }
+        else if (currentCell.type === 'noData' && tableData.length === 0 && hasMore) {
+            // pending 'noData' override when 'loading' skeletons are shown
+            return { type: 'loading', columnKey: firstColumnKey };
+        }
+    }
+    if (_renderIncludesCell(defaultFirstCell, columnsArray, tableData, hasMore, isPendingLayout, hasFooters)) {
+        return defaultFirstCell;
+    }
+    return undefined;
+}
+
+const TOUCH_OFFSET_VALUE = 40;
+const menuPropGestureStates = {
+    mouse: {
+        initialFocus: 'menu',
+        placement: 'bottom-start',
+        offsetValue: 2
+    },
+    keyboard: {
+        initialFocus: 'firstItem',
+        placement: 'bottom-start',
+        offsetValue: 0
+    },
+    touch: {
+        initialFocus: 'menu',
+        placement: 'end',
+        offsetValue: TOUCH_OFFSET_VALUE
+    }
+};
+const _initialMenuProps = {
+    isOpen: false,
+    initialFocus: 'menu',
+    placement: 'bottom-start',
+    offsetValue: 0,
+    anchorRef: { current: null }
+};
+const useContextMenu = (rootRef, tableId, tableData, columnsArray, contextMenuConfig, sortCriterion, onSortCriterionChange) => {
+    const [contextMenuContext, setContextMenuContext] = useState();
+    const [menuProps, setMenuProps] = useState(_initialMenuProps);
+    const currentCellElementRef = useRef();
+    const [isResizeDialogOpen, setIsResizeDialogOpen] = useState(false);
+    const { triggerProps } = useContextMenuGesture(({ gesture, anchor, target }) => {
+        if (rootRef.current) {
+            // find the cell element the menu is being launched from
+            const cellElement = target.closest(`[${TABLE_FOCUSABLE_SELECTOR}='${tableId}']`);
+            if (cellElement != null) {
+                const targetCell = logicalCellExtractor(cellElement, tableId, columnsArray);
+                if (targetCell != null) {
+                    const cellContextMenuContext = getCellContextMenuContextFromCell(tableData, columnsArray, setIsResizeDialogOpen, targetCell, sortCriterion, onSortCriterionChange);
+                    if (cellContextMenuContext != null) {
+                        currentCellElementRef.current = cellElement;
+                        const anchorBasedOnGesture = gesture === 'keyboard' ? cellElement : anchor;
+                        setContextMenuContext(cellContextMenuContext);
+                        setMenuProps({
+                            ...menuPropGestureStates[gesture],
+                            anchorRef: { current: anchorBasedOnGesture },
+                            isOpen: true
+                        });
+                    }
+                }
+            }
+        }
+    }, { isDisabled: !contextMenuConfig });
+    const handleCloseContextMenu = useCallback((detail) => {
+        // set focus back on the cell that was determined as the initial target
+        if (detail.reason === 'dismissed' || detail.reason === 'itemAction') {
+            currentCellElementRef.current?.focus({ preventScroll: true });
+        }
+        // close the menu
+        setMenuProps({ ..._initialMenuProps });
+    }, []);
+    return {
+        menuProps: { ...menuProps, onClose: handleCloseContextMenu },
+        contextMenuContext: contextMenuContext,
+        contextMenuTriggerProps: triggerProps,
+        isResizeDialogOpen: isResizeDialogOpen,
+        setIsResizeDialogOpen: setIsResizeDialogOpen
+    };
+};
+
+/**
+ * Browser zoom levels are not handled identically between Range sizes and Element sizes, so this offset
+ * should be used when comparing horizontal widths. Using a smaller value (0.01 for example) causes false
+ * positives, while using a larger value (0.05 for example) causes actual truncations to be missed.
+ */
+const HORIZONTAL_TRUNCATION_OFFSET = 0.015;
+/**
+ * Default Redwood line-height overrides cause false positives as the Range sizes are always for a 'normal'
+ * line-height, and none of the default scale fonts have 'normal' line-height values. This causes offsets
+ * of between 0.5px and 1.5px. As a true truncation will cause an offset of closer to a full line height
+ * (at least 12px for 2xs text), use a larger offset value than the currently observed 1.5px max for safety.
+ */
+const VERTICAL_TRUNCATION_OFFSET = 5;
+/**
+ * Helper method to determine if a given cell contains truncated text.
+ */
+const hasTruncatedText = (cellElement) => {
+    if (cellElement.getAttribute('data-oj-table-tooltip') !== 'enabled') {
+        return false;
+    }
+    const innerText = String(cellElement.innerText).trim();
+    if (innerText === '') {
+        return false;
+    }
+    const walker = document.createTreeWalker(cellElement, NodeFilter.SHOW_TEXT);
+    while (walker.nextNode()) {
+        const range = new Range();
+        const textNode = walker.currentNode;
+        range.selectNodeContents(textNode);
+        const untruncatedTextLength = range.getBoundingClientRect().width;
+        const untruncatedTextHeight = range.getBoundingClientRect().height;
+        let firstParent = true;
+        let parentElement = textNode.parentElement;
+        while (parentElement != null) {
+            const parentStyles = getComputedStyle(parentElement);
+            if (firstParent) {
+                // only verify truncation status of 'visible' text nodes
+                if (untruncatedTextLength === 0 || parentStyles.visibility === 'hidden') {
+                    break;
+                }
+                firstParent = false;
+            }
+            const horizontalPadding = parseFloat(parentStyles.paddingLeft) + parseFloat(parentStyles.paddingRight);
+            const horizontalBorder = parseFloat(parentStyles.borderLeft) + parseFloat(parentStyles.borderRight);
+            const renderedTextLength = parentElement.getBoundingClientRect().width - horizontalPadding - horizontalBorder;
+            const verticalPadding = parseFloat(parentStyles.paddingTop) + parseFloat(parentStyles.paddingBottom);
+            const verticalBorder = parseFloat(parentStyles.borderTop) + parseFloat(parentStyles.borderBottom);
+            const renderedTextHeight = parentElement.getBoundingClientRect().height - verticalPadding - verticalBorder;
+            if (untruncatedTextLength - renderedTextLength > HORIZONTAL_TRUNCATION_OFFSET ||
+                untruncatedTextHeight - renderedTextHeight > VERTICAL_TRUNCATION_OFFSET) {
+                return true;
+            }
+            if (parentElement === cellElement) {
+                break;
+            }
+            parentElement = parentElement.parentElement;
+        }
+    }
+    return false;
+};
+/**
+ * Helper function to handle updating the Table's tooltip due to a focus navigation gesture.
+ */
+function handleNavigationTooltipGesture(rootElement, tableId, cell, showTooltip, hideTooltip) {
+    hideTooltip(true);
+    if (cell.type === 'data' || cell.type === 'header' || cell.type === 'footer') {
+        const cellElement = getElementFromCell(rootElement, tableId, cell);
+        if (cellElement != null) {
+            showTooltip(cell);
+        }
+    }
+}
+/**
+ * Helper function to handle updating the Table's tooltip due to a pointer move gesture.
+ */
+function handleMoveTooltipGesture(tableId, columnsArray, event, showTooltip, hideTooltip, tooltipId) {
+    let tooltipShown = false;
+    const targetElement = event.relatedTarget;
+    if (targetElement != null && targetElement.closest(`#${tooltipId}`) != null) {
+        return;
+    }
+    const cellElement = event.target.closest(`[${TABLE_FOCUSABLE_SELECTOR}='${tableId}']`);
+    if (cellElement != null) {
+        const type = getCellType(cellElement);
+        if (type === 'data' || type === 'header' || type === 'footer') {
+            showTooltip(logicalCellExtractor(cellElement, tableId, columnsArray));
+            tooltipShown = true;
+        }
+    }
+    if (!tooltipShown) {
+        hideTooltip();
+    }
+}
+/**
+ * Helper function to handle updating the Table's tooltip due to a pointer leave gesture.
+ */
+const handleLeaveTableTooltipGesture = (rootElement, event, hideTooltip, tooltipId) => {
+    const targetElement = event.relatedTarget;
+    if (targetElement != null && targetElement.closest(`#${tooltipId}`) != null) {
+        // the pointer 'left' the table, but is only over a cell tooltip - in most cases, we want
+        // to just return here as the pointer is still 'over' the table. however, this can also
+        // occur when the pointer is technically outside of the table's bounds, and in that case
+        // we don't actually want to return as we should clear out our cell tooltip as expected
+        const boundingRect = rootElement.getBoundingClientRect();
+        const isOutOfBounds = event.clientX < boundingRect.left ||
+            event.clientX > boundingRect.right ||
+            event.clientY < boundingRect.top ||
+            event.clientY > boundingRect.bottom;
+        if (!isOutOfBounds) {
+            return;
+        }
+    }
+    hideTooltip();
+};
+
+// delay small interaction times concerning a tooltip
+const SMALL_INTERACTION_DELAY = 50;
+const TABLE_HIDE_TOOLTIP_DELAY = Math.max(Math.min(SHOW_TOOLTIP_DELAY - SMALL_INTERACTION_DELAY, HIDE_TOOLTIP_DELAY), 0);
+/**
+ * Hook that manages cell template tooltip interactions on the Table when truncation is present.
+ */
+function useTruncationTooltip({ rootRef, tableId, resizeInfoRef }) {
+    const globalTooltipManager = getGlobalTooltipManager();
+    const tooltipId = useId();
+    const tooltipCellRef = useRef();
+    const pendingShowTooltipCellRef = useRef();
+    const tooltipAnchorRef = useRef();
+    const tooltipTextRef = useRef();
+    const [tooltipText, setTooltipText] = useState();
+    const pointerDownRef = useRef(false);
+    const pointerDownTimeoutRef = useRef();
+    const showTooltipTimeoutRef = useRef();
+    const hideTooltipTimeoutRef = useRef();
+    // helper method for clearing the hide tooltip timeout
+    const _clearHideTooltipTimeout = useCallback(() => {
+        clearTimeout(hideTooltipTimeoutRef.current);
+        hideTooltipTimeoutRef.current = undefined;
+    }, []);
+    // helper method for clearing the show tooltip timeout
+    const _clearShowTooltipTimeout = useCallback(() => {
+        clearTimeout(showTooltipTimeoutRef.current);
+        showTooltipTimeoutRef.current = undefined;
+        pendingShowTooltipCellRef.current = undefined;
+    }, []);
+    // helper method for setting up the show tooltip timeout
+    const _setupShowTooltipTimeout = useCallback(() => {
+        showTooltipTimeoutRef.current = setTimeout(function () {
+            // when showing a tooltip, clear any pending 'clear tooltip timeouts'
+            if (hideTooltipTimeoutRef.current != null) {
+                _clearHideTooltipTimeout();
+            }
+            // only show a tooltip if not currently performing a column resize gesture
+            if (!resizeInfoRef.current.isResizing) {
+                showTooltipTimeoutRef.current = undefined;
+                const cell = pendingShowTooltipCellRef.current;
+                const rootElement = rootRef.current;
+                if (rootElement != null && cell != null) {
+                    const cellElement = getElementFromCell(rootElement, tableId, cell);
+                    if (cellElement != null && hasTruncatedText(cellElement)) {
+                        setTooltipText(String(cellElement.innerText).trim());
+                        tooltipAnchorRef.current = cellElement;
+                        tooltipCellRef.current = cell;
+                    }
+                }
+            }
+            pendingShowTooltipCellRef.current = undefined;
+        }, SHOW_TOOLTIP_DELAY);
+    }, [rootRef, tableId, resizeInfoRef, _clearHideTooltipTimeout]);
+    // helper method for setting up the hide tooltip timeout
+    const _setupHideTooltipTimeout = useCallback(() => {
+        hideTooltipTimeoutRef.current = setTimeout(function () {
+            // unlike in the showtooltip timeout logic, we do not want to clear
+            // pending show tooltip timeouts when clearing a tooltip as it could
+            // still be waiting to be shown in another location at this time
+            hideTooltipTimeoutRef.current = undefined;
+            setTooltipText(undefined);
+            tooltipAnchorRef.current = undefined;
+            tooltipCellRef.current = undefined;
+        }, TABLE_HIDE_TOOLTIP_DELAY);
+    }, []);
+    // callback method to signal a tooltip is desired on the given cell
+    const showTooltip = useCallback((anchorCell) => {
+        if (cellComparator(tooltipCellRef.current, anchorCell)) {
+            // if the tooltip is already showing in the right cell, clear all timeouts
+            if (showTooltipTimeoutRef.current != null) {
+                _clearShowTooltipTimeout();
+            }
+            if (hideTooltipTimeoutRef.current != null) {
+                _clearHideTooltipTimeout();
+            }
+            return;
+        }
+        if (showTooltipTimeoutRef.current == null) {
+            // if no tooltip is already pending, start a new tooltip timeout
+            pendingShowTooltipCellRef.current = anchorCell;
+            _setupShowTooltipTimeout();
+        }
+        else if (!cellComparator(pendingShowTooltipCellRef.current, anchorCell)) {
+            // if a different tooltip is already pending, start a new tooltip timeout
+            _clearShowTooltipTimeout();
+            pendingShowTooltipCellRef.current = anchorCell;
+            _setupShowTooltipTimeout();
+        }
+        if (tooltipCellRef.current != null && hideTooltipTimeoutRef.current == null) {
+            // if the tooltip is showing on a different cell, ensure a hide timeout is setup
+            _setupHideTooltipTimeout();
+        }
+    }, [
+        _setupShowTooltipTimeout,
+        _setupHideTooltipTimeout,
+        _clearShowTooltipTimeout,
+        _clearHideTooltipTimeout
+    ]);
+    // callback method to signal the current tooltip is no longer desired
+    const hideTooltip = useCallback((isImmediate) => {
+        // ignore hide tooltip calls if due to focus loss from a pointer down on the tooltip itself
+        if (pointerDownRef.current) {
+            return;
+        }
+        if (showTooltipTimeoutRef.current != null) {
+            _clearShowTooltipTimeout();
+        }
+        if (isImmediate) {
+            if (hideTooltipTimeoutRef.current != null) {
+                _clearHideTooltipTimeout();
+            }
+            setTooltipText(undefined);
+            tooltipAnchorRef.current = undefined;
+            tooltipCellRef.current = undefined;
+        }
+        else if (hideTooltipTimeoutRef.current == null) {
+            _setupHideTooltipTimeout();
+        }
+    }, [_setupHideTooltipTimeout, _clearShowTooltipTimeout, _clearHideTooltipTimeout]);
+    // Pointer move handler for the tooltip.
+    const _pointerMoveHandler = useCallback((_event) => {
+        if (showTooltipTimeoutRef.current != null) {
+            clearTimeout(showTooltipTimeoutRef.current);
+            showTooltipTimeoutRef.current = undefined;
+            pendingShowTooltipCellRef.current = undefined;
+        }
+        if (hideTooltipTimeoutRef.current != null) {
+            clearTimeout(hideTooltipTimeoutRef.current);
+            hideTooltipTimeoutRef.current = undefined;
+        }
+    }, []);
+    // Pointer leave handler for the tooltip.
+    const _pointerLeaveHandler = useCallback((event) => {
+        const targetElement = event.relatedTarget;
+        if (targetElement != null && targetElement.closest(`#${tableId}`) != null) {
+            return;
+        }
+        hideTooltip();
+    }, [tableId, hideTooltip]);
+    // Pointer down handler for the tooltip.
+    const _pointerDownHandler = useCallback((_event) => {
+        pointerDownRef.current = true;
+        if (pointerDownTimeoutRef.current != null) {
+            clearTimeout(pointerDownTimeoutRef.current);
+        }
+        pointerDownTimeoutRef.current = setTimeout(function () {
+            pointerDownRef.current = false;
+            pointerDownTimeoutRef.current = undefined;
+        }, SMALL_INTERACTION_DELAY);
+    }, []);
+    // handles logic involving competing tooltips managed outside of the TableView.
+    // make sure this check runs BEFORE the rendered content is created below
+    const isOpenOverrideRef = useRef(true);
+    if (tooltipText != null && tooltipText !== tooltipTextRef.current) {
+        isOpenOverrideRef.current = true;
+    }
+    const tooltipPointerProps = {
+        onPointerLeave: _pointerLeaveHandler,
+        onPointerMove: _pointerMoveHandler,
+        onPointerDown: _pointerDownHandler
+    };
+    // avoid applying undefined text after initial render completes as it can appear
+    // while the tooltip is going through its closing animation and looks broken
+    const renderRawContent = (jsx(TooltipContent, { ...tooltipPointerProps, id: tooltipId, isOpen: isOpenOverrideRef.current, isDatatip: false, children: tooltipText != null ? tooltipText : tooltipTextRef.current }));
+    // make sure these are in sync AFTER the rendered content is created above - this helps ensure
+    // that empty text does not show up while the tooltip is going through a closing animation.
+    tooltipTextRef.current = tooltipText;
+    // offsets attempt to show the tooltip without overlapping content of nearby cells
+    const scale = useScale();
+    let mainAxisOffset = -8;
+    let crossAxisOffset = -14;
+    if (scale === 'md') {
+        mainAxisOffset = -7;
+        crossAxisOffset = -12;
+    }
+    else if (scale === 'sm') {
+        mainAxisOffset = -6;
+        crossAxisOffset = -11;
+    }
+    const currentColorScheme = useColorScheme();
+    const tooltipContent = tooltipAnchorRef.current != null
+        ? getWrappedTooltipContent(renderRawContent, 'tooltip', currentColorScheme, tooltipAnchorRef, 'end-top', { mainAxis: mainAxisOffset, crossAxis: crossAxisOffset })
+        : undefined;
+    const destroyCallback = useCallback(() => {
+        hideTooltip(true);
+    }, [hideTooltip]);
+    useEffect(() => {
+        if (isOpenOverrideRef.current && tooltipAnchorRef.current != null) {
+            globalTooltipManager.register(destroyCallback);
+        }
+        else {
+            globalTooltipManager.unregister(destroyCallback);
+        }
+    }, [tooltipAnchorRef, destroyCallback, tooltipText, globalTooltipManager]);
+    return { tooltipContent, tooltipId, showTooltip, hideTooltip, tooltipAnchorRef };
+}
+
+// constant timeout values for delays following a input gesture until enabling focus rings
+const MOUSE_FOCUS_SHIFT_TIMEOUT = 100;
+const TOUCH_FOCUS_SHIFT_TIMEOUT = 200;
+// constant event.key values that trigger focus ring logic
+const NAVIGATION_KEYS = [
+    ' ',
+    'F2',
+    'Enter',
+    'Esc', // Firefox 36 and earlier uses 'Esc' instead of 'Escape'
+    'Escape',
+    'ArrowLeft',
+    'ArrowUp',
+    'ArrowRight',
+    'ArrowDown',
+    'Home',
+    'End',
+    'PageUp',
+    'PageDown'
+];
+// constant event.key values that trigger 'scroll to current' logic
+const SCROLL_KEYS = [
+    ' ',
+    'F2',
+    'Enter',
+    'Esc', // Firefox 36 and earlier uses 'Esc' instead of 'Escape'
+    'Escape'
+];
+/**
+ * Hook that manages focus interactions on the Preact Table
+ */
+function useFocusHandling({ rootRef, viewportInfo, tableId, isRtl, tableData, hasMore, hasFooters, columnsArray, stickyColumnInfo, sizingInfoRef, overflowInfoRef, selectionExtensionElementRef, cellSupportsTabbable, appliedColumnWidths, currentCellOverride, onPersistCurrentCell, showTooltip, hideTooltip, isPendingLayout, isEmbedded, isDataLoaded }) {
+    // tracks whether the most recent 'blur' was caused by focus being lost by the browser window (or iframe)
+    // used when determining whether scrolling active into view should be skipped when focus is regained
+    const blurFromWindowRef = useRef(false);
+    // tracks whether a keydown 'tab' is currently detected - used when handling a keyup 'tab' event to scroll
+    // the active cell into view in the event that focus is received from outside of the page (or iframe)
+    const isTabDownDetectedRef = useRef(false);
+    // tracks focus loss during render cycle for potential focus recapture cases
+    const isRenderCycle = useRef(true);
+    isRenderCycle.current = true;
+    const blurredRenderCycleElementRef = useRef(null);
+    const isPendingLayoutFocusRef = useRef(false);
+    // track current 'focus info' state
+    const hasFocusRef = useRef(false);
+    const [isTabbableMode, setIsTabbableMode] = useState(false);
+    const [isShowFocusRing, setIsShowFocusRing] = useState(false);
+    // track pointer down information
+    const recentPointerRef = useRef(false);
+    const pointerTimerRef = useRef(null);
+    const isShowFocusRingOverrideRef = useRef(null);
+    // track the active and current cell information
+    const [activeCell, setActiveCell] = useState(undefined);
+    const currencyStatusRef = useRef({
+        hasPendingCurrentCellOverride: false,
+        hasPendingCurrentCellOverrideScroll: false
+    });
+    // track pending scrolls to minimize 'flash' of focus rings when scrolling
+    const [deferredScrollDetail, setDeferredScrollDetail] = useState(undefined);
+    const deferredScrollDetailRef = useRef();
+    // keep state and ref in-sync to avoid edge cases where a gesture updating the scroll detail is handled
+    // inbetween a render cycle that changes the scroll detail and the useEffect that applies the detail
+    const updateDeferredScrollDetail = useCallback((scrollDetail) => {
+        setDeferredScrollDetail(scrollDetail);
+        deferredScrollDetailRef.current = scrollDetail;
+    }, []);
+    const wasTransient = isTransientCell(currencyStatusRef.current.activeCell);
+    const currentActiveCell = determineActiveCell(columnsArray, currencyStatusRef, tableData, hasMore, isPendingLayout, isEmbedded, hasFooters, currentCellOverride);
+    // intercept onPersistCurrentCell calls to ensure internal state is updated appropriately
+    const onActiveCellChanged = useMemo(() => {
+        return (detail, isAutoFocus, isSelectionExtension, skipScrollCellIntoView) => {
+            const newActiveCell = detail.value;
+            if (!cellComparator(currencyStatusRef.current.activeCell, newActiveCell)) {
+                setActiveCell(newActiveCell);
+                currencyStatusRef.current.activeCell = newActiveCell;
+                if (!isTransientCell(newActiveCell)) {
+                    const newCurrentCell = newActiveCell;
+                    // only update current cell when 'active' is not one of the transient 'skeleton' regions
+                    if (onPersistCurrentCell != null) {
+                        onPersistCurrentCell({ value: newCurrentCell });
+                    }
+                    currencyStatusRef.current.currentCell = newCurrentCell;
+                    // make sure pending current cell override states are updated on current changed
+                    if (newCurrentCell != null) {
+                        currencyStatusRef.current.previousEmbeddedSelectCurrentCell = newCurrentCell;
+                    }
+                    currencyStatusRef.current.currentCellOverride = currentCellOverride;
+                    currencyStatusRef.current.hasPendingCurrentCellOverride = false;
+                    currencyStatusRef.current.hasPendingCurrentCellOverrideScroll = false;
+                }
+                else if (newActiveCell?.type === 'loadMore') {
+                    currencyStatusRef.current.loadMoreInitialData = tableData;
+                }
+                if (!isSelectionExtension) {
+                    selectionExtensionElementRef.current = undefined;
+                    if (isAutoFocus && newActiveCell != null && cellSupportsTabbable(newActiveCell)) {
+                        // attempt to auto-focus cell contents
+                        setIsTabbableMode(true);
+                        setIsShowFocusRing(false);
+                    }
+                    else if (isTabbableMode) {
+                        // exit tabbable mode when navigating away from auto-focus cell
+                        setIsTabbableMode(false);
+                    }
+                }
+            }
+            if (newActiveCell != null && !recentPointerRef.current && !skipScrollCellIntoView) {
+                updateDeferredScrollDetail({
+                    cell: newActiveCell,
+                    locationX: 'inView',
+                    locationY: 'inView'
+                });
+            }
+        };
+    }, [
+        currentCellOverride,
+        isTabbableMode,
+        cellSupportsTabbable,
+        tableData,
+        onPersistCurrentCell,
+        selectionExtensionElementRef,
+        updateDeferredScrollDetail
+    ]);
+    // Helper function to set the Table's focus tracking state to reflect that it is inactive.
+    const _setAsInactive = useCallback(() => {
+        hasFocusRef.current = false;
+        isPendingLayoutFocusRef.current = false;
+        setIsTabbableMode(false);
+        setIsShowFocusRing(false);
+        hideTooltip();
+    }, [hideTooltip]);
+    // Helper function to set the Table's focus tracking state to reflect that one of its cells has focus.
+    const _enableNavigationMode = useCallback((cell, skipScrollCellIntoView) => {
+        const rootElement = rootRef.current;
+        const scrollerElement = viewportInfo.viewportConfig.scrollerRef.current;
+        if (rootElement != null && scrollerElement != null) {
+            setIsTabbableMode(false);
+            const focusRingState = isShowFocusRingOverrideRef.current !== null
+                ? isShowFocusRingOverrideRef.current
+                : !recentPointerRef.current;
+            setIsShowFocusRing(focusRingState);
+            if (focusRingState) {
+                handleNavigationTooltipGesture(rootElement, tableId, cell, showTooltip, hideTooltip);
+            }
+            onActiveCellChanged({ value: cell }, false, false, skipScrollCellIntoView);
+        }
+    }, [rootRef, viewportInfo, tableId, onActiveCellChanged, showTooltip, hideTooltip]);
+    // Helper function to set the Table's focus tracking state to reflect that it is tabbable.
+    const _enableTabbableMode = useCallback((cell, isKeyboard, skipScrollCellIntoView) => {
+        const rootElement = rootRef.current;
+        const scrollerElement = viewportInfo.viewportConfig.scrollerRef.current;
+        if (rootElement != null && scrollerElement != null) {
+            setIsTabbableMode(true);
+            if (!isKeyboard) {
+                setIsShowFocusRing(false);
+                onActiveCellChanged({ value: cell }, true, false, skipScrollCellIntoView);
+            }
+        }
+    }, [rootRef, viewportInfo, onActiveCellChanged]);
+    // Helper function to set the Table's focus tracking state to reflect that a user has
+    // exited tabbable mode via the keyboard (esc or 'F2')
+    const _disableTabbableMode = useCallback((cell) => {
+        const rootElement = rootRef.current;
+        if (rootElement != null) {
+            setIsTabbableMode(false);
+            const cellElement = getElementFromCell(rootElement, tableId, cell);
+            if (cellElement != null) {
+                cellElement.focus({ preventScroll: true });
+            }
+            else {
+                rootElement.focus({ preventScroll: true });
+            }
+        }
+    }, [rootRef, tableId]);
+    const notifyFocusFromPointer = useCallback((isTouch) => {
+        if (pointerTimerRef.current != null) {
+            clearTimeout(pointerTimerRef.current);
+        }
+        recentPointerRef.current = true;
+        pointerTimerRef.current = setTimeout(() => {
+            recentPointerRef.current = false;
+        }, isTouch ? TOUCH_FOCUS_SHIFT_TIMEOUT : MOUSE_FOCUS_SHIFT_TIMEOUT);
+    }, []);
+    // PointerDown handler for the outer Table. Focus transfers that occur following a pointerdown
+    // on desktop devices should not result in a focus ring being shown on the focused element
+    const _pointerDownHandler = useCallback((event) => {
+        if (isShowFocusRing) {
+            setIsShowFocusRing(false);
+        }
+        if (event.pointerType !== 'touch') {
+            notifyFocusFromPointer(false);
+        }
+    }, [isShowFocusRing, notifyFocusFromPointer]);
+    // PointerUp handler for the outer Table. Focus transfers that occur following a pointerup
+    // on any type of device should not result in a focus ring being shown on the focused element
+    const _pointerUpHandler = useCallback((event) => {
+        notifyFocusFromPointer(event.pointerType === 'touch');
+    }, [notifyFocusFromPointer]);
+    // Focus handler for the outer Table. On focus, a focusable area needs to be 'active'.
+    // If an 'active' area already exists, nothing further is needed. Otherwise, the first
+    // focusable element should be made 'active'.
+    const _onFocusHandler = (event) => {
+        hasFocusRef.current = true;
+        const rootElement = rootRef.current;
+        const scrollerElement = viewportInfo.viewportConfig.scrollerRef.current;
+        if (rootElement != null) {
+            // don't scroll active into view if previous blur was due to window focus loss
+            const skipScrollCellIntoView = blurFromWindowRef.current || isPendingLayout;
+            blurFromWindowRef.current = false;
+            const targetElement = event.target;
+            if (targetElement === rootElement || targetElement === scrollerElement) {
+                if (currentActiveCell != null) {
+                    _enableNavigationMode(currentActiveCell, skipScrollCellIntoView);
+                }
+            }
+            else {
+                const cell = logicalCellExtractor(targetElement, tableId, columnsArray);
+                if (cell != null) {
+                    if (getCellType(targetElement) != null) {
+                        // handle individual focusable regions receiving focus
+                        _enableNavigationMode(cell, skipScrollCellIntoView);
+                    }
+                    else {
+                        _enableTabbableMode(cell, false, skipScrollCellIntoView);
+                    }
+                }
+            }
+        }
+        isShowFocusRingOverrideRef.current = null;
+    };
+    // Blur handler for the outer Table. When a blur is caused by the browser window itself
+    // losing focus (changing tabs or leaving an iframe for example), an eventual re-focus due
+    // to the window re-gaining focus needs to be handled differently (no auto-scroll mostly).
+    const _onBlurHandler = useCallback((event) => {
+        const rootElement = rootRef.current;
+        if (rootElement != null) {
+            if (event.target === document.activeElement) {
+                // save focus ring state so it's set once focus comes back
+                isShowFocusRingOverrideRef.current = isShowFocusRing;
+            }
+            const relatedTarget = event.relatedTarget;
+            const isUnknownRelatedTarget = relatedTarget == null;
+            blurFromWindowRef.current = isUnknownRelatedTarget;
+            if (isUnknownRelatedTarget || !getElementContainsFunc(rootElement, true)(relatedTarget)) {
+                _setAsInactive();
+                if (isRenderCycle.current) {
+                    // store element that loses focus during a render cycle for recapturing focus logic
+                    blurredRenderCycleElementRef.current = event.target;
+                }
+                // reset tab down detection when component loses focus
+                isTabDownDetectedRef.current = false;
+            }
+        }
+    }, [rootRef, isShowFocusRing, _setAsInactive]);
+    // KeyDown handler for the outer Table. This specific handler tracks 'focus' transfer keys
+    // Esc, F2, Enter, and Tab. It also ensures the active cell is scrolled into view on any key
+    const _onKeyDownHandler = useCallback((event) => {
+        if (event.key === 'Tab') {
+            isTabDownDetectedRef.current = true;
+        }
+        const rootElement = rootRef.current;
+        const scrollerElement = viewportInfo.viewportConfig.scrollerRef.current;
+        if (rootElement != null && scrollerElement != null) {
+            const isNavigationKey = NAVIGATION_KEYS.indexOf(event.key) > -1;
+            if (isNavigationKey) {
+                if (pointerTimerRef.current != null) {
+                    clearTimeout(pointerTimerRef.current);
+                }
+                pointerTimerRef.current = null;
+                recentPointerRef.current = false;
+            }
+            if (isPendingLayout) {
+                if (isNavigationKey) {
+                    setIsShowFocusRing(true);
+                }
+            }
+            else if (activeCell != null) {
+                if (cellSupportsTabbable(activeCell)) {
+                    if (event.key === 'F2') {
+                        if (isTabbableMode) {
+                            _disableTabbableMode(activeCell);
+                        }
+                        else {
+                            _enableTabbableMode(activeCell, true);
+                        }
+                    }
+                    else if (event.key === 'Esc' || event.key === 'Escape') {
+                        // Firefox 36 and earlier uses 'Esc' instead of 'Escape'
+                        _disableTabbableMode(activeCell);
+                    }
+                    else if (event.key === 'Enter' && !isTabbableMode && !isEmbedded) {
+                        _enableTabbableMode(activeCell, true);
+                    }
+                }
+                if (!isTabbableMode) {
+                    if (isNavigationKey) {
+                        setIsShowFocusRing(true);
+                    }
+                    if (SCROLL_KEYS.indexOf(event.key) > -1) {
+                        updateDeferredScrollDetail({
+                            cell: activeCell,
+                            locationX: 'inView',
+                            locationY: 'inView'
+                        });
+                    }
+                }
+            }
+        }
+    }, [
+        rootRef,
+        viewportInfo,
+        isTabbableMode,
+        isEmbedded,
+        activeCell,
+        cellSupportsTabbable,
+        isPendingLayout,
+        _enableTabbableMode,
+        _disableTabbableMode,
+        updateDeferredScrollDetail
+    ]);
+    // KeyUp handler for the outer Table. This specific handler tracks the 'tab' key
+    // It ensures the active cell is scrolled into view when tabbing into the component
+    const _onKeyUpHandler = useCallback((event) => {
+        if (event.key === 'Tab') {
+            // if a keyup 'tab' event is detected without a matching keydown 'tab', scroll active
+            // cell into view to handle case where focus is gained from outside the page (or iframe)
+            if (activeCell != null && !isTabDownDetectedRef.current) {
+                updateDeferredScrollDetail({
+                    cell: activeCell,
+                    locationX: 'inView',
+                    locationY: 'inView'
+                });
+            }
+            isTabDownDetectedRef.current = false;
+        }
+    }, [activeCell, updateDeferredScrollDetail]);
+    // Callback for the outer Table's FocusTracker usage.
+    const onStartFocusTracking = useCallback((detail) => {
+        const rootElement = rootRef.current;
+        if (rootElement != null && activeCell != null) {
+            handleEnterActionableMode(detail.hasFocusWithin && getCellType(detail.activeElement) == null, allTabbableElements(getElementFromCell(rootElement, tableId, activeCell)), (value) => {
+                setIsTabbableMode(value != undefined);
+            });
+        }
+    }, [rootRef, activeCell, tableId]);
+    // Callback for the outer Table's FocusTracker usage.
+    const onFocusStartEdge = useCallback((detail) => {
+        handleWrapActionableFocus(true, detail.tabbableElements, (value) => {
+            setIsTabbableMode(value != undefined);
+        });
+    }, []);
+    // Callback for the outer Table's FocusTracker usage.
+    const onFocusEndEdge = useCallback((detail) => {
+        handleWrapActionableFocus(false, detail.tabbableElements, (value) => {
+            setIsTabbableMode(value != undefined);
+        });
+    }, []);
+    // Ensure focus is properly set at the completion of every render cycle
+    // NO DEPENDENCY ARRAY HERE TO ENSURE THIS RUNS ON EVERY RENDER CYCLE
+    useEffect(() => {
+        const rootElement = rootRef.current;
+        const scrollerElement = viewportInfo.viewportConfig.scrollerRef.current;
+        if (rootElement != null && scrollerElement != null) {
+            // internal method responsible for ensuring focus is applied to the appropriate cells or contents
+            const _applyInternalFocus = (rootElement, activeElement, isCaptureFocus) => {
+                if (currentActiveCell != null) {
+                    // ensure real browser focus is on the correct cell element
+                    const cellElement = getElementFromCell(rootElement, tableId, currentActiveCell);
+                    if (cellElement != null) {
+                        if (isCaptureFocus) {
+                            applyScrollDetail(rootElement, scrollerElement, viewportInfo, tableId, columnsArray, stickyColumnInfo, sizingInfoRef.current, overflowInfoRef.current, {
+                                cell: currentActiveCell,
+                                locationX: 'inView',
+                                locationY: 'inView'
+                            }, isRtl, appliedColumnWidths);
+                        }
+                        // cell is valid, so set focus on it if needed
+                        if (!isTabbableMode && activeElement !== cellElement) {
+                            if (wasTransient &&
+                                !isTransientCell(currentActiveCell) &&
+                                isAutoFocusCell(rootElement, tableId, currentActiveCell) &&
+                                cellSupportsTabbable(currentActiveCell)) {
+                                _enableTabbableMode(currentActiveCell);
+                            }
+                            else {
+                                cellElement.focus({ preventScroll: true });
+                            }
+                            return;
+                        }
+                        else if (isTabbableMode &&
+                            !getElementContainsFunc(cellElement, true)(activeElement)) {
+                            if (isCaptureFocus && !isAutoFocusCell(rootElement, tableId, currentActiveCell)) {
+                                _disableTabbableMode(currentActiveCell);
+                            }
+                            else {
+                                handleEnterActionableMode(false, allTabbableElements(cellElement), (value) => {
+                                    setIsTabbableMode(value != undefined);
+                                    if (isCaptureFocus) {
+                                        rootElement.focus({ preventScroll: true });
+                                    }
+                                }, true);
+                            }
+                            return;
+                        }
+                        else if (activeCell !== currentActiveCell) {
+                            // if element is already focused, ensure state is up to date
+                            onActiveCellChanged({ value: currentActiveCell }, false, false, true);
+                        }
+                    }
+                }
+                if (isCaptureFocus) {
+                    rootElement.focus({ preventScroll: true });
+                }
+            };
+            // ensure the current cell is scrolled into view when necessary
+            // only run if the state and ref match - otherwise another render cycle may be pending
+            if (deferredScrollDetail != null &&
+                deferredScrollDetail === deferredScrollDetailRef.current) {
+                applyScrollDetail(rootElement, scrollerElement, viewportInfo, tableId, columnsArray, stickyColumnInfo, sizingInfoRef.current, overflowInfoRef.current, deferredScrollDetail, isRtl, appliedColumnWidths);
+                deferredScrollDetailRef.current = undefined;
+            }
+            // ensure current-cell-override is up to date on each render
+            applyCurrentCellOverride(rootElement, scrollerElement, viewportInfo, tableId, tableData, columnsArray, stickyColumnInfo, sizingInfoRef.current, overflowInfoRef.current, currencyStatusRef, onActiveCellChanged, isEmbedded, isPendingLayout, isDataLoaded, isRtl, currentCellOverride, appliedColumnWidths);
+            const blurredRenderCycleElement = blurredRenderCycleElementRef.current;
+            blurredRenderCycleElementRef.current = null;
+            isRenderCycle.current = false;
+            const activeElement = getActiveElement(rootElement);
+            // if we were tracking focus during the render cycle, ensure we recapture focus if needed
+            if (blurredRenderCycleElement != null &&
+                activeElement === getBodyElement(rootElement) &&
+                (!getElementContainsFunc(rootElement, true)(blurredRenderCycleElement) ||
+                    !isTabbableElement(blurredRenderCycleElement, true))) {
+                deferredScrollDetailRef.current = undefined;
+                _applyInternalFocus(rootElement, activeElement, true);
+            }
+            else if (hasFocusRef.current &&
+                cellComparator(activeCell, currencyStatusRef.current.activeCell)) {
+                _applyInternalFocus(rootElement, activeElement);
+            }
+        }
+    });
+    return {
+        focusHandlingProps: {
+            onPointerDown: _pointerDownHandler,
+            onPointerUp: _pointerUpHandler,
+            onFocus: _onFocusHandler,
+            onBlur: _onBlurHandler,
+            onKeyDown: _onKeyDownHandler,
+            onKeyUp: _onKeyUpHandler
+        },
+        activeCell,
+        onActiveCellChanged,
+        currentCell: currencyStatusRef.current.currentCell,
+        currentActiveCell,
+        isShowFocusRing,
+        isTabbableMode,
+        onStartFocusTracking,
+        onFocusStartEdge,
+        onFocusEndEdge,
+        updateDeferredScrollDetail
+    };
+}
+
+/**
+ * Helper function to get the row action context from row information
+ */
+const getActionContext = (_index, key, data) => {
+    return { key, data };
+};
+/**
+ * Helper function to determine if a pointer or keyboard event should trigger a sort action gesture
+ */
+const isSortActionGesture = (columnsArray, columnKey) => {
+    for (const column of columnsArray) {
+        if (column.key === columnKey) {
+            return column.value.sortable === 'enabled';
+        }
+    }
+    return false;
+};
+/**
+ * Helper function to handle a sort action gesture
+ */
+const handleSortActionGesture = (columnsArray, columnKey, onSortCriterionChange, sortCriterion) => {
+    if (isSortActionGesture(columnsArray, columnKey)) {
+        let sortDirection;
+        if (sortCriterion != null) {
+            for (const criterion of sortCriterion) {
+                if (criterion.key === columnKey) {
+                    sortDirection = criterion.sortDirection;
+                    break;
+                }
+            }
+        }
+        const newDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
+        onSortCriterionChange([{ key: columnKey, sortDirection: newDirection }]);
+        return true;
+    }
+    return false;
+};
+
+/**
+ * Helper function to handle a hover gesture over a column header or footer region.
+ */
+function handleOverColumnHeaderFooterGesture(tableId, event, setHoverStyleColumnInfo, hoverStyleColumnInfo) {
+    // only track 'hover' information for mouse events
+    if (event.pointerType === 'mouse') {
+        const cellElement = event.target.closest(`[${TABLE_FOCUSABLE_SELECTOR}='${tableId}']`);
+        if (cellElement != null) {
+            const cellType = getCellType(cellElement);
+            if (cellType === 'header' || cellType === 'footer') {
+                const isHeader = cellType === 'header';
+                const columnKey = getColumnKey(cellElement);
+                if (columnKey !== hoverStyleColumnInfo?.key ||
+                    !hoverStyleColumnInfo?.isHeader !== isHeader) {
+                    setHoverStyleColumnInfo({ key: columnKey, isHeader: cellType === 'header' });
+                    return;
+                }
+            }
+        }
+    }
+    handleEndInteractionColumnHeaderFooterGesture(setHoverStyleColumnInfo, hoverStyleColumnInfo);
+}
+/**
+ * Helper function to handle an active gesture over a column header or footer region.
+ */
+function handleActiveColumnHeaderFooterGesture(tableId, event, setActiveStyleColumnInfo, activeStyleColumnInfo, activeCell) {
+    let cellType;
+    let columnKey;
+    if (activeCell != null) {
+        cellType = activeCell.type;
+        columnKey = activeCell.columnKey;
+    }
+    else if (event instanceof PointerEvent && event.pointerType === 'touch') {
+        // only handle touch events since hover events have the same treatment
+        const cellElement = event.target.closest(`[${TABLE_FOCUSABLE_SELECTOR}='${tableId}']`);
+        if (cellElement != null) {
+            cellType = getCellType(cellElement);
+            columnKey = getColumnKey(cellElement);
+        }
+    }
+    if (columnKey != null && (cellType === 'header' || cellType === 'footer')) {
+        const isHeader = cellType === 'header';
+        if (columnKey !== activeStyleColumnInfo?.key || !activeStyleColumnInfo?.isHeader !== isHeader) {
+            setActiveStyleColumnInfo({ key: columnKey, isHeader: cellType === 'header' });
+            return;
+        }
+    }
+    handleEndInteractionColumnHeaderFooterGesture(setActiveStyleColumnInfo, activeStyleColumnInfo);
+}
+/**
+ * Helper function to handle the end of an interaction style gesture for the table region.
+ */
+function handleEndInteractionColumnHeaderFooterGesture(setInteractionStyleColumnInfo, interactionStyleColumnInfo) {
+    if (interactionStyleColumnInfo != null) {
+        setInteractionStyleColumnInfo(undefined);
+    }
+}
+
+/**
+ * Helper function to handle an 'Up' or 'Down' arrow key press.
+ * Up - Moves to the same cell in the previous row (including headers and footers). No op if already on the first row.
+ * Down - Moves to the same cell in the next row (including headers and footers). No op if already on the last row.
+ */
+function handleAdjacentRowGesture(rootElement, tableId, columnsArray, initialCell, onActiveCellChanged, isPrevious, isExtendSelectionGesture, hideTooltip, updateDeferredScrollDetail) {
+    const firstColumnKey = getBoundaryColumnKey(columnsArray, true);
+    if (firstColumnKey == null) {
+        return;
+    }
+    let newCell = initialCell;
+    const cellType = initialCell.type;
+    if (cellType === 'noData') {
+        const newColumnKey = firstColumnKey;
+        if (isPrevious) {
+            newCell = { columnKey: newColumnKey, type: 'header' };
+            onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+        }
+        else if (hasFooterCells(rootElement, tableId)) {
+            newCell = { columnKey: newColumnKey, type: 'footer' };
+            onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+        }
+    }
+    else if (cellType === 'loading') {
+        if (isPrevious) {
+            newCell = { columnKey: initialCell.columnKey, type: 'header' };
+            onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+        }
+        else if (hasFooterCells(rootElement, tableId)) {
+            newCell = { columnKey: initialCell.columnKey, type: 'footer' };
+            onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+        }
+    }
+    else if (cellType === 'loadMore') {
+        if (isPrevious) {
+            const rowKey = getLastRenderedRowKey(rootElement, tableId);
+            if (rowKey != null) {
+                newCell = { rowKey: rowKey, columnKey: initialCell.columnKey, type: 'data' };
+                onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+            }
+        }
+        else if (hasFooterCells(rootElement, tableId)) {
+            newCell = { columnKey: initialCell.columnKey, type: 'footer' };
+            onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+        }
+    }
+    else if (cellType !== 'pending') {
+        if (cellType === 'data') {
+            const currentRowKey = initialCell.rowKey;
+            const currentRowElement = findElementByKey(rootElement, currentRowKey, `[${TABLE_ROW_SELECTOR}='${tableId}']`);
+            if (currentRowElement != null) {
+                const rowElements = [
+                    ...rootElement.querySelectorAll(`[${TABLE_ROW_SELECTOR}='${tableId}']`)
+                ];
+                const currentRowIndex = rowElements.indexOf(currentRowElement);
+                let adjacentRowElement;
+                if (isPrevious && currentRowIndex > 0) {
+                    adjacentRowElement = rowElements[currentRowIndex - 1];
+                }
+                else if (!isPrevious && currentRowIndex < rowElements.length - 1) {
+                    adjacentRowElement = rowElements[currentRowIndex + 1];
+                }
+                if (adjacentRowElement != null) {
+                    const rowKey = getRowKey(adjacentRowElement);
+                    if (rowKey != null) {
+                        newCell = { rowKey: rowKey, columnKey: initialCell.columnKey, type: 'data' };
+                        onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell), isExtendSelectionGesture);
+                    }
+                }
+                else if (!isExtendSelectionGesture) {
+                    if (isPrevious) {
+                        newCell = { columnKey: initialCell.columnKey, type: 'header' };
+                        onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+                    }
+                    else if (hasLoadMoreCell(rootElement, tableId)) {
+                        newCell = { columnKey: initialCell.columnKey, type: 'loadMore' };
+                        if (getElementFromCell(rootElement, tableId, newCell) != null) {
+                            onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+                        }
+                    }
+                    else if (hasFooterCells(rootElement, tableId)) {
+                        newCell = { columnKey: initialCell.columnKey, type: 'footer' };
+                        onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+                    }
+                }
+            }
+        }
+        else if (cellType === 'header' && !isPrevious) {
+            const rowKey = getFirstRenderedRowKey(rootElement, tableId);
+            if (rowKey != null) {
+                newCell = { rowKey: rowKey, columnKey: initialCell.columnKey, type: 'data' };
+                onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+            }
+            else if (hasNoDataCell(rootElement, tableId)) {
+                newCell = { type: 'noData' };
+                onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+            }
+            else {
+                newCell = { columnKey: initialCell.columnKey, type: 'loading' };
+                if (getElementFromCell(rootElement, tableId, newCell) != null) {
+                    onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+                }
+                else if (hasFooterCells(rootElement, tableId)) {
+                    newCell = { columnKey: initialCell.columnKey, type: 'footer' };
+                    onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+                }
+            }
+        }
+        else if (cellType === 'footer' && isPrevious) {
+            if (hasNoDataCell(rootElement, tableId)) {
+                newCell = { type: 'noData' };
+                onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+            }
+            else {
+                newCell = { columnKey: initialCell.columnKey, type: 'loading' };
+                if (getElementFromCell(rootElement, tableId, newCell) != null) {
+                    onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+                }
+                else {
+                    newCell = { columnKey: initialCell.columnKey, type: 'loadMore' };
+                    if (getElementFromCell(rootElement, tableId, newCell) != null) {
+                        onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+                    }
+                    else {
+                        const rowKey = getLastRenderedRowKey(rootElement, tableId);
+                        if (rowKey != null) {
+                            newCell = { rowKey: rowKey, columnKey: initialCell.columnKey, type: 'data' };
+                            onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+                        }
+                        else {
+                            newCell = { columnKey: initialCell.columnKey, type: 'header' };
+                            onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+                        }
+                    }
+                }
+            }
+        }
+    }
+    if (!cellComparator(initialCell, newCell)) {
+        hideTooltip(true);
+    }
+    else {
+        updateDeferredScrollDetail({ cell: newCell, locationX: 'inView', locationY: 'inView' });
+    }
+}
+/**
+ * Helper function to handle a 'PageUp' or 'PageDown' arrow key press.
+ * PageUp - Moves to the same cell in the first visible row in the current viewport,
+ * and scrolls the Table so it becomes the last visible row in the viewport when able.
+ * PageDown - Moves to the same cell in the last visible row in the current viewport,
+ * and scrolls the Table so it becomes the first visible row in the viewport when able.
+ */
+function handlePageRowGesture(rootElement, scrollerElement, viewportInfo, tableId, sizingInfo, initialCell, onActiveCellChanged, isPrevious, hideTooltip, updateDeferredScrollDetail) {
+    if (initialCell.type !== 'noData' && initialCell.type !== 'pending') {
+        const rowElements = rootElement.querySelectorAll(`[${TABLE_ROW_SELECTOR}='${tableId}']`);
+        if (rowElements.length > 0) {
+            const verticalScrollPosition = getVerticalScrollPosition(rootElement, scrollerElement, viewportInfo, tableId);
+            const verticalRowIndex = getRowIndexForRowKey(rootElement, tableId, verticalScrollPosition.rowKey);
+            let targetRowIndex;
+            if (isPrevious) {
+                if (verticalScrollPosition.offsetY === 0) {
+                    targetRowIndex = Math.max(verticalRowIndex - 1, 0);
+                }
+                else {
+                    targetRowIndex = verticalRowIndex;
+                }
+            }
+            else {
+                const scrollerBottom = getScrollerBottom(rootElement, scrollerElement, viewportInfo.viewportConfig, sizingInfo, tableId);
+                targetRowIndex = verticalRowIndex;
+                while (rowElements.length > targetRowIndex + 1) {
+                    targetRowIndex += 1;
+                    const elementBottom = rowElements[targetRowIndex].getBoundingClientRect().bottom;
+                    if (elementBottom > scrollerBottom) {
+                        break;
+                    }
+                }
+            }
+            const newRowKey = getRowKeyForRowIndex(rootElement, tableId, targetRowIndex);
+            if (newRowKey != null) {
+                const newCell = {
+                    rowKey: newRowKey,
+                    columnKey: initialCell.columnKey,
+                    type: 'data'
+                };
+                if (newRowKey !== initialCell.rowKey) {
+                    onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell), false, true);
+                }
+                if (!cellComparator(initialCell, newCell)) {
+                    hideTooltip(true);
+                }
+                updateDeferredScrollDetail({
+                    cell: newCell,
+                    locationX: 'inView',
+                    locationY: isPrevious ? 'bottom' : 'top'
+                });
+            }
+        }
+    }
+}
+/**
+ * Helper function to get the column key next to the given column key in the specified direction. Returns
+ * null if there is no adjacent column in the direction specified.
+ */
+function _getAdjacentColumnKey(initialKey, columnsArray, isPrevious) {
+    let currentIndex = -1;
+    const columnsCount = columnsArray.length;
+    for (let i = 0; i < columnsCount; i++) {
+        if (columnsArray[i].key === initialKey) {
+            currentIndex = i;
+            break;
+        }
+    }
+    if (isPrevious && currentIndex !== 0) {
+        return columnsArray[currentIndex - 1].key;
+    }
+    else if (!isPrevious && currentIndex !== columnsCount - 1) {
+        return columnsArray[currentIndex + 1].key;
+    }
+    return undefined;
+}
+/**
+ * Helper function to handle a 'Previous' or 'Next' arrow key press.
+ * Previous - Moves to the previous cell in the current row. No op if already on the first cell in that row.
+ * Next - Moves to the next cell in the current row. No op if already on the last cell in that row.
+ */
+function handleAdjacentColumnGesture(rootElement, tableId, columnsArray, initialCell, onActiveCellChanged, isPrevious, hideTooltip, updateDeferredScrollDetail) {
+    let newCell = initialCell;
+    const cellType = initialCell.type;
+    if (cellType === 'data' || cellType === 'header' || cellType === 'footer') {
+        const initialKey = initialCell.columnKey;
+        const newKey = _getAdjacentColumnKey(initialKey, columnsArray, isPrevious);
+        if (newKey != null) {
+            if (cellType === 'data') {
+                newCell = { rowKey: initialCell.rowKey, columnKey: newKey, type: cellType };
+                onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+            }
+            else {
+                newCell = { columnKey: newKey, type: cellType };
+                onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+            }
+        }
+    }
+    if (!cellComparator(initialCell, newCell)) {
+        hideTooltip(true);
+    }
+    else {
+        updateDeferredScrollDetail({ cell: newCell, locationX: 'inView', locationY: 'inView' });
+    }
+}
+/**
+ * Helper function to handle a 'Home' or 'End' key press.
+ * Home - Jumps to the first cell in the current row. No op if already on the first cell in that row.
+ * Ctrl/Cmd + Home - Jumps to the first cell in the first data row. If no data rows are present,
+ * jumps to the first cell in the current region (header or footer). No op if already on that cell.
+ * End - Jumps to the last cell in the current row. No op if already on the last cell in that row.
+ * Ctrl/Cmd + End - Jumps to the last cell in the last data row. If no data rows are present,
+ * jumps to the last cell in the current region (header or footer). No op if already on that cell.
+ */
+function handleJumpColumnGesture(rootElement, tableId, columnsArray, initialCell, onActiveCellChanged, isPrevious, includeRows, hideTooltip, updateDeferredScrollDetail) {
+    const newKey = getBoundaryColumnKey(columnsArray, isPrevious);
+    if (newKey == null) {
+        return;
+    }
+    let newCell = initialCell;
+    const cellType = initialCell.type;
+    if (cellType === 'data' || cellType === 'header' || cellType === 'footer') {
+        const initialKey = initialCell.columnKey;
+        if (includeRows) {
+            if (hasNoDataCell(rootElement, tableId)) {
+                newCell = { type: 'noData' };
+                onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+            }
+            else {
+                const newRowKey = isPrevious
+                    ? getFirstRenderedRowKey(rootElement, tableId)
+                    : getLastRenderedRowKey(rootElement, tableId);
+                if (newRowKey != null) {
+                    newCell = { rowKey: newRowKey, columnKey: newKey, type: 'data' };
+                    onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+                }
+            }
+        }
+        else if (newKey !== initialKey) {
+            if (cellType === 'data') {
+                newCell = { rowKey: initialCell.rowKey, columnKey: newKey, type: cellType };
+                onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+            }
+            else {
+                newCell = { columnKey: newKey, type: cellType };
+                onActiveCellChanged({ value: newCell }, isAutoFocusCell(rootElement, tableId, newCell));
+            }
+        }
+    }
+    if (!cellComparator(initialCell, newCell)) {
+        hideTooltip(true);
+    }
+    else {
+        updateDeferredScrollDetail({ cell: newCell, locationX: 'inView', locationY: 'inView' });
+    }
+}
+
+/**
+ * Helper function to handle a selection gesture (click, spacebar, etc...)
+ */
+function handleSelectionGesture(rootElement, tableId, columnsArray, targetElement, isModifierKey, onSelectionChange, isDropDownSelection, selectionMode, selected) {
+    const emptyKeys = { all: false, keys: new Set() };
+    let selectedRows = selected?.row != null ? selected.row : emptyKeys;
+    let selectedColumns = selected?.column != null ? selected.column : emptyKeys;
+    const newRowKey = keyExtractor(targetElement, `[${TABLE_ROW_SELECTOR}='${tableId}']`);
+    if (newRowKey != null) {
+        if (selectionMode?.row === 'single' ||
+            selectionMode?.row === 'multiple' ||
+            selectionMode?.row === 'multipleToggle') {
+            const isToggleSelectionMode = isDropDownSelection || selectionMode.row === 'multipleToggle';
+            const isMultiSelectRowGesture = isModifierKey || isToggleSelectionMode;
+            if (selectedRows == null) {
+                selectedRows = { all: false, keys: new Set([newRowKey]) };
+            }
+            else if (!containsKey(selectedRows, newRowKey)) {
+                if (isMultiSelectRowGesture && selectionMode.row !== 'single') {
+                    selectedRows = addKey(selectedRows, newRowKey);
+                }
+                else {
+                    selectedRows = { all: false, keys: new Set([newRowKey]) };
+                }
+            }
+            else if (isMultiSelectRowGesture) {
+                selectedRows = removeKey(selectedRows, newRowKey, false);
+            }
+            else {
+                selectedRows = { all: false, keys: new Set([newRowKey]) };
+            }
+            selectedColumns = emptyKeys;
+        }
+    }
+    else if (selectionMode?.column === 'single' || selectionMode?.column === 'multiple') {
+        const cellElement = targetElement.closest(`[${TABLE_FOCUSABLE_SELECTOR}='${tableId}']`);
+        if (cellElement != null) {
+            const cellType = getCellType(cellElement);
+            if (cellType === 'header' || cellType === 'footer') {
+                const index = getColumnIndexForHeaderFooterElement(rootElement, tableId, cellElement, cellType === 'header');
+                if (index != null) {
+                    const column = columnsArray[index];
+                    if (column.value.selectable !== 'disabled') {
+                        if (selectedColumns == null) {
+                            selectedColumns = { all: false, keys: new Set([column.key]) };
+                        }
+                        else if (!containsKey(selectedColumns, column.key)) {
+                            if (isModifierKey && selectionMode.column === 'multiple') {
+                                selectedColumns = addKey(selectedColumns, column.key);
+                            }
+                            else {
+                                selectedColumns = { all: false, keys: new Set([column.key]) };
+                            }
+                        }
+                        else if (isModifierKey) {
+                            selectedColumns = removeKey(selectedColumns, column.key, false);
+                        }
+                        else {
+                            selectedColumns = { all: false, keys: new Set([column.key]) };
+                        }
+                        selectedRows = emptyKeys;
+                    }
+                }
+            }
+        }
+    }
+    if (!isSameKey(selectedRows, selected?.row) || !isSameKey(selectedColumns, selected?.column)) {
+        onSelectionChange({ value: { row: selectedRows, column: selectedColumns }, target: targetElement }, false);
+    }
+}
+/**
+ * Helper function to calculate and apply a new selection state corresponding to the range provided
+ */
+function _applyRangeSelection(rootElement, tableId, columnsArray, targetElement, startIndex, endIndex, isRowGesture, onSelectionChange, isDropDownSelection, selectionMode, selected, previousEndIndex) {
+    const emptyKeys = { all: false, keys: new Set() };
+    let selectedRows = selected?.row != null ? selected.row : emptyKeys;
+    let selectedColumns = selected?.column != null ? selected.column : emptyKeys;
+    if (isRowGesture) {
+        selectedColumns = emptyKeys;
+        if (selectionMode?.row === 'multiple' || selectionMode?.row === 'multipleToggle') {
+            const isToggleSelectionMode = isDropDownSelection || selectionMode.row === 'multipleToggle';
+            selectedRows = isToggleSelectionMode ? selectedRows : emptyKeys;
+            // selected rows should be added in the order that they are selected
+            if (startIndex <= endIndex) {
+                for (let i = startIndex; i <= endIndex; i++) {
+                    const key = getRowKeyForRowIndex(rootElement, tableId, i);
+                    selectedRows = addKey(selectedRows, key);
+                }
+                // toggle selection gesture is additive except for rows added from previous gesture
+                if (isToggleSelectionMode && previousEndIndex != null) {
+                    if (previousEndIndex > endIndex) {
+                        for (let i = previousEndIndex; i > endIndex; i--) {
+                            const key = getRowKeyForRowIndex(rootElement, tableId, i);
+                            selectedRows = removeKey(selectedRows, key, false);
+                        }
+                    }
+                    else if (previousEndIndex < startIndex) {
+                        for (let i = previousEndIndex; i < startIndex; i++) {
+                            const key = getRowKeyForRowIndex(rootElement, tableId, i);
+                            selectedRows = removeKey(selectedRows, key, false);
+                        }
+                    }
+                }
+            }
+            else {
+                for (let i = startIndex; i >= endIndex; i--) {
+                    const key = getRowKeyForRowIndex(rootElement, tableId, i);
+                    selectedRows = addKey(selectedRows, key);
+                }
+                // toggle selection gesture is additive except for rows added from previous gesture
+                if (isToggleSelectionMode && previousEndIndex != null) {
+                    if (previousEndIndex < endIndex) {
+                        for (let i = previousEndIndex; i < endIndex; i++) {
+                            const key = getRowKeyForRowIndex(rootElement, tableId, i);
+                            selectedRows = removeKey(selectedRows, key, false);
+                        }
+                    }
+                    else if (previousEndIndex > startIndex) {
+                        for (let i = previousEndIndex; i > startIndex; i--) {
+                            const key = getRowKeyForRowIndex(rootElement, tableId, i);
+                            selectedRows = removeKey(selectedRows, key, false);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    else {
+        selectedRows = emptyKeys;
+        if (selectionMode?.column === 'multiple') {
+            selectedColumns = emptyKeys;
+            // selected columns should be added in the order that they are selected
+            if (startIndex <= endIndex) {
+                for (let i = startIndex; i <= endIndex; i++) {
+                    const column = columnsArray[i];
+                    if (column.value.selectable !== 'disabled') {
+                        selectedColumns = addKey(selectedColumns, column.key);
+                    }
+                }
+            }
+            else {
+                for (let i = startIndex; i >= endIndex; i--) {
+                    const column = columnsArray[i];
+                    if (column.value.selectable !== 'disabled') {
+                        selectedColumns = addKey(selectedColumns, column.key);
+                    }
+                }
+            }
+        }
+    }
+    if (!isSameKey(selectedRows, selected?.row) || !isSameKey(selectedColumns, selected?.column)) {
+        onSelectionChange({ value: { row: selectedRows, column: selectedColumns }, target: targetElement }, true);
+    }
+}
+/**
+ * Determines whether a potential range selection gesture is valid based on the given target
+ */
+function isRangeSelectionGesture(rootElement, tableId, columnsArray, targetElement, activeCell, selectionMode) {
+    const targetCell = logicalCellExtractor(targetElement, tableId, columnsArray);
+    if ((((selectionMode?.row === 'multiple' || selectionMode?.row === 'multipleToggle') &&
+        activeCell.type === 'data') ||
+        (selectionMode?.column === 'multiple' &&
+            (activeCell.type === 'header' || activeCell.type === 'footer'))) &&
+        targetCell?.type === activeCell.type) {
+        const activeCellElement = getElementFromCell(rootElement, tableId, activeCell);
+        const targetCellElement = getElementFromCell(rootElement, tableId, targetCell);
+        if (activeCellElement != null && targetCellElement != null) {
+            const isRow = targetCell.type === 'data';
+            if (isRow) {
+                return (getRowIndexForRowElement(rootElement, tableId, activeCellElement.parentElement) != null &&
+                    getRowIndexForRowElement(rootElement, tableId, targetCellElement.parentElement) != null);
+            }
+            else if (targetCell.type === 'header' || targetCell.type === 'footer') {
+                const isHeader = targetCell.type === 'header';
+                return (getColumnIndexForHeaderFooterElement(rootElement, tableId, activeCellElement, isHeader) !=
+                    null &&
+                    getColumnIndexForHeaderFooterElement(rootElement, tableId, targetCellElement, isHeader) !=
+                        null);
+            }
+        }
+    }
+    return false;
+}
+/**
+ * Helper function to handle a range selection gesture (shift+click)
+ */
+function handleRangeSelectionGesture(rootElement, tableId, columnsArray, targetElement, activeCell, onActiveCellChanged, selectionExtensionElementRef, onSelectionChange, isDropDownSelection, selectionMode, selected) {
+    const targetCell = logicalCellExtractor(targetElement, tableId, columnsArray);
+    if (targetCell != null) {
+        const activeCellElement = getElementFromCell(rootElement, tableId, activeCell);
+        const targetCellElement = getElementFromCell(rootElement, tableId, targetCell);
+        if (activeCellElement != null && targetCellElement != null) {
+            if ((((selectionMode?.row === 'multiple' || selectionMode?.row === 'multipleToggle') &&
+                targetCell.type === 'data') ||
+                (selectionMode?.column === 'multiple' &&
+                    (targetCell.type === 'header' || targetCell.type === 'footer'))) &&
+                targetCell.type === activeCell.type) {
+                let startIndex;
+                let endIndex;
+                let previousEndIndex;
+                let endElement;
+                const isToggleSelectionMode = isDropDownSelection || selectionMode.row === 'multipleToggle';
+                const isRow = targetCell.type === 'data';
+                if (isRow) {
+                    endElement = targetCellElement.parentElement;
+                    const startElement = isToggleSelectionMode && selectionExtensionElementRef.current != null
+                        ? selectionExtensionElementRef.current
+                        : activeCellElement.parentElement;
+                    startIndex = getRowIndexForRowElement(rootElement, tableId, startElement);
+                    endIndex = getRowIndexForRowElement(rootElement, tableId, endElement);
+                    const previousElement = isToggleSelectionMode
+                        ? activeCellElement.parentElement
+                        : selectionExtensionElementRef.current;
+                    if (previousElement != null) {
+                        previousEndIndex = getRowIndexForRowElement(rootElement, tableId, previousElement);
+                    }
+                }
+                else if (targetCell.type === 'header' || targetCell.type === 'footer') {
+                    const isHeader = targetCell.type === 'header';
+                    endElement = targetCellElement;
+                    startIndex = getColumnIndexForHeaderFooterElement(rootElement, tableId, activeCellElement, isHeader);
+                    endIndex = getColumnIndexForHeaderFooterElement(rootElement, tableId, targetCellElement, isHeader);
+                }
+                if (startIndex != null && endIndex != null) {
+                    if (!isRow || !isToggleSelectionMode) {
+                        selectionExtensionElementRef.current = endElement;
+                    }
+                    else {
+                        if (selectionExtensionElementRef.current == null) {
+                            selectionExtensionElementRef.current = activeCellElement.parentElement;
+                        }
+                        onActiveCellChanged({ value: targetCell }, false, true);
+                        targetCellElement.focus({ preventScroll: true });
+                    }
+                    _applyRangeSelection(rootElement, tableId, columnsArray, targetElement, startIndex, endIndex, isRow, onSelectionChange, isDropDownSelection, selectionMode, selected, previousEndIndex);
+                    return true;
+                }
+            }
+        }
+    }
+    return false;
+}
+/**
+ * Helper function to handle a selection extension gesture (shift+arrow key)
+ */
+function handleExtendSelectionGesture(rootElement, tableId, columnsArray, targetElement, isPrevious, activeCell, selectionExtensionElementRef, onSelectionChange, isDropDownSelection, updateDeferredScrollDetail, selectionMode, selected) {
+    const activeCellElement = getElementFromCell(rootElement, tableId, activeCell);
+    if (activeCellElement != null) {
+        let startIndex;
+        let startElement;
+        const isToggleSelectionMode = isDropDownSelection || selectionMode?.row === 'multipleToggle';
+        const isRow = activeCell.type === 'data';
+        const isHeader = activeCell.type === 'header';
+        if (isRow) {
+            startElement =
+                isToggleSelectionMode && selectionExtensionElementRef.current != null
+                    ? selectionExtensionElementRef.current
+                    : activeCellElement.parentElement;
+            startIndex = getRowIndexForRowElement(rootElement, tableId, startElement);
+        }
+        else {
+            startElement = activeCellElement;
+            startIndex = getColumnIndexForHeaderFooterElement(rootElement, tableId, startElement, isHeader);
+        }
+        if (startIndex != null) {
+            let endIndex;
+            let previousEndIndex;
+            let extendedElement;
+            const cursorElement = isToggleSelectionMode && isRow
+                ? activeCellElement.parentElement
+                : selectionExtensionElementRef.current;
+            if (cursorElement != null) {
+                previousEndIndex = isRow
+                    ? getRowIndexForRowElement(rootElement, tableId, cursorElement)
+                    : getColumnIndexForHeaderFooterElement(rootElement, tableId, cursorElement, isHeader);
+                extendedElement = isPrevious
+                    ? cursorElement.previousElementSibling
+                    : cursorElement.nextElementSibling;
+                if (extendedElement != null && (!isRow || (isRow && getRowKey(extendedElement) != null))) {
+                    if (!isToggleSelectionMode || !isRow) {
+                        selectionExtensionElementRef.current = extendedElement;
+                    }
+                    else if (selectionExtensionElementRef.current == null) {
+                        selectionExtensionElementRef.current = activeCellElement.parentElement;
+                    }
+                    endIndex = isRow
+                        ? getRowIndexForRowElement(rootElement, tableId, extendedElement)
+                        : getColumnIndexForHeaderFooterElement(rootElement, tableId, extendedElement, isHeader);
+                }
+                else {
+                    endIndex = isRow
+                        ? getRowIndexForRowElement(rootElement, tableId, cursorElement)
+                        : getColumnIndexForHeaderFooterElement(rootElement, tableId, cursorElement, isHeader);
+                }
+            }
+            else {
+                extendedElement = isPrevious
+                    ? startElement.previousElementSibling
+                    : startElement.nextElementSibling;
+                if (extendedElement != null && (!isRow || (isRow && getRowKey(extendedElement) != null))) {
+                    selectionExtensionElementRef.current = extendedElement;
+                    endIndex = isRow
+                        ? getRowIndexForRowElement(rootElement, tableId, extendedElement)
+                        : getColumnIndexForHeaderFooterElement(rootElement, tableId, extendedElement, isHeader);
+                }
+                else {
+                    endIndex = startIndex;
+                }
+            }
+            if (endIndex != null) {
+                _applyRangeSelection(rootElement, tableId, columnsArray, targetElement, startIndex, endIndex, isRow, onSelectionChange, isDropDownSelection, selectionMode, selected, previousEndIndex);
+            }
+            // scroll 'extensionElement' into view if focus is not shifted
+            if (!isRow || !isToggleSelectionMode) {
+                const extensionElement = selectionExtensionElementRef.current != null
+                    ? selectionExtensionElementRef.current
+                    : activeCellElement;
+                let extensionCell;
+                if (isRow) {
+                    const rowKey = keyExtractor(extensionElement, `[${TABLE_ROW_SELECTOR}='${tableId}']`);
+                    if (rowKey != null) {
+                        extensionCell = {
+                            type: activeCell.type,
+                            rowKey: rowKey,
+                            columnKey: activeCell.columnKey
+                        };
+                    }
+                }
+                else {
+                    extensionCell = logicalCellExtractor(extensionElement, tableId, columnsArray);
+                }
+                if (extensionCell != null) {
+                    updateDeferredScrollDetail({
+                        cell: extensionCell,
+                        locationX: 'inView',
+                        locationY: 'inView'
+                    });
+                }
+            }
+        }
+    }
+}
+
+/**
+ * Hook that manages keyboard interactions on the Preact Table
+ */
+function useKeyboardHandling({ rootRef, viewportInfo, tableId, tableData, isRtl, isTabbableMode, columnsArray, sizingInfoRef, selectionExtensionElementRef, activeCell, onActiveCellChanged, isDropDownSelection, selectionMode, selected, onTableSelectionChange, activeStyleColumnInfo, setActiveStyleColumnInfo, onRowAction, sortCriterion, onSortCriterionChange, hideTooltip, updateDeferredScrollDetail }) {
+    // state for the key that a space or enter keydown occurrs on for matching keyup handling
+    const triggerDownKeyRef = useRef();
+    // Keydown handler for the outer Table. This handles all internal
+    // keyboard navigation for the Table.
+    const _keyDownHandler = useCallback((event) => {
+        const rootElement = rootRef.current;
+        const scrollerElement = viewportInfo.viewportConfig.scrollerRef.current;
+        if (rootElement != null && scrollerElement != null) {
+            const keyHandlers = {
+                ' ': function () {
+                    if (activeCell != null) {
+                        triggerDownKeyRef.current = activeCell.rowKey;
+                        if (!isTabbableMode) {
+                            handleActiveColumnHeaderFooterGesture(tableId, event, setActiveStyleColumnInfo, activeStyleColumnInfo, activeCell);
+                            // prevent default action on space to avoid scrolling during a selection
+                            event.preventDefault();
+                        }
+                        if (onRowAction != null &&
+                            getRowActionGestureContext(tableId, tableData, event.target, TABLE_ROW_SELECTOR, getActionContext, activeCell) != null) {
+                            event.stopPropagation();
+                        }
+                    }
+                },
+                Enter: function () {
+                    if (activeCell != null) {
+                        triggerDownKeyRef.current = activeCell.rowKey;
+                        if (activeCell.type === 'data') {
+                            if (isDropDownSelection && !isTabbableMode) {
+                                event.preventDefault();
+                            }
+                            if (onRowAction != null &&
+                                getRowActionGestureContext(tableId, tableData, event.target, TABLE_ROW_SELECTOR, getActionContext, activeCell) != null) {
+                                event.stopPropagation();
+                            }
+                        }
+                        else if (activeCell.type === 'header' &&
+                            !isTabbableMode &&
+                            onSortCriterionChange != null &&
+                            isSortActionGesture(columnsArray, activeCell.columnKey)) {
+                            event.stopPropagation();
+                        }
+                    }
+                },
+                ArrowUp: function () {
+                    if (activeCell != null &&
+                        (!isTabbableMode || isAutoFocusCell(rootElement, tableId, activeCell))) {
+                        let isExtendSelectionGesture = false;
+                        if (!isTabbableMode &&
+                            activeCell.type === 'data' &&
+                            event.shiftKey &&
+                            onTableSelectionChange != null &&
+                            (selectionMode?.row === 'multiple' || selectionMode?.row === 'multipleToggle')) {
+                            handleExtendSelectionGesture(rootElement, tableId, columnsArray, rootElement, true, activeCell, selectionExtensionElementRef, onTableSelectionChange, isDropDownSelection, updateDeferredScrollDetail, selectionMode, selected);
+                            isExtendSelectionGesture = true;
+                        }
+                        if (!isExtendSelectionGesture ||
+                            isDropDownSelection ||
+                            selectionMode?.row === 'multipleToggle') {
+                            handleAdjacentRowGesture(rootElement, tableId, columnsArray, activeCell, onActiveCellChanged, true, isExtendSelectionGesture, hideTooltip, updateDeferredScrollDetail);
+                        }
+                        event.preventDefault();
+                    }
+                },
+                ArrowDown: function () {
+                    if (activeCell != null &&
+                        (!isTabbableMode || isAutoFocusCell(rootElement, tableId, activeCell))) {
+                        let isExtendSelectionGesture = false;
+                        if (!isTabbableMode &&
+                            activeCell.type === 'data' &&
+                            event.shiftKey &&
+                            onTableSelectionChange != null &&
+                            (selectionMode?.row === 'multiple' || selectionMode?.row === 'multipleToggle')) {
+                            handleExtendSelectionGesture(rootElement, tableId, columnsArray, rootElement, false, activeCell, selectionExtensionElementRef, onTableSelectionChange, isDropDownSelection, updateDeferredScrollDetail, selectionMode, selected);
+                            isExtendSelectionGesture = true;
+                        }
+                        if (!isExtendSelectionGesture ||
+                            isDropDownSelection ||
+                            selectionMode?.row === 'multipleToggle') {
+                            handleAdjacentRowGesture(rootElement, tableId, columnsArray, activeCell, onActiveCellChanged, false, isExtendSelectionGesture, hideTooltip, updateDeferredScrollDetail);
+                        }
+                        event.preventDefault();
+                    }
+                },
+                ArrowLeft: function () {
+                    if (activeCell != null &&
+                        (!isTabbableMode || isAutoFocusCell(rootElement, tableId, activeCell))) {
+                        if (!isTabbableMode &&
+                            (activeCell.type === 'header' || activeCell.type === 'footer') &&
+                            event.shiftKey &&
+                            onTableSelectionChange != null &&
+                            selectionMode?.column === 'multiple') {
+                            handleExtendSelectionGesture(rootElement, tableId, columnsArray, rootElement, true, activeCell, selectionExtensionElementRef, onTableSelectionChange, isDropDownSelection, updateDeferredScrollDetail, selectionMode, selected);
+                        }
+                        else {
+                            handleAdjacentColumnGesture(rootElement, tableId, columnsArray, activeCell, onActiveCellChanged, !isRtl, hideTooltip, updateDeferredScrollDetail);
+                        }
+                        event.preventDefault();
+                    }
+                },
+                ArrowRight: function () {
+                    if (activeCell != null &&
+                        (!isTabbableMode || isAutoFocusCell(rootElement, tableId, activeCell))) {
+                        if (!isTabbableMode &&
+                            (activeCell.type === 'header' || activeCell.type === 'footer') &&
+                            event.shiftKey &&
+                            onTableSelectionChange != null &&
+                            selectionMode?.column === 'multiple') {
+                            handleExtendSelectionGesture(rootElement, tableId, columnsArray, rootElement, false, activeCell, selectionExtensionElementRef, onTableSelectionChange, isDropDownSelection, updateDeferredScrollDetail, selectionMode, selected);
+                        }
+                        else {
+                            handleAdjacentColumnGesture(rootElement, tableId, columnsArray, activeCell, onActiveCellChanged, isRtl, hideTooltip, updateDeferredScrollDetail);
+                        }
+                        event.preventDefault();
+                    }
+                },
+                PageUp: function () {
+                    if (activeCell != null &&
+                        (!isTabbableMode || isAutoFocusCell(rootElement, tableId, activeCell))) {
+                        handlePageRowGesture(rootElement, scrollerElement, viewportInfo, tableId, sizingInfoRef.current, activeCell, onActiveCellChanged, true, hideTooltip, updateDeferredScrollDetail);
+                        event.preventDefault();
+                    }
+                },
+                PageDown: function () {
+                    if (activeCell != null &&
+                        (!isTabbableMode || isAutoFocusCell(rootElement, tableId, activeCell))) {
+                        handlePageRowGesture(rootElement, scrollerElement, viewportInfo, tableId, sizingInfoRef.current, activeCell, onActiveCellChanged, false, hideTooltip, updateDeferredScrollDetail);
+                        event.preventDefault();
+                    }
+                },
+                Home: function () {
+                    if (activeCell != null &&
+                        (!isTabbableMode || isAutoFocusCell(rootElement, tableId, activeCell))) {
+                        handleJumpColumnGesture(rootElement, tableId, columnsArray, activeCell, onActiveCellChanged, true, isLogicalCtrl(event), hideTooltip, updateDeferredScrollDetail);
+                        event.preventDefault();
+                    }
+                },
+                End: function () {
+                    if (activeCell != null &&
+                        (!isTabbableMode || isAutoFocusCell(rootElement, tableId, activeCell))) {
+                        handleJumpColumnGesture(rootElement, tableId, columnsArray, activeCell, onActiveCellChanged, false, isLogicalCtrl(event), hideTooltip, updateDeferredScrollDetail);
+                        event.preventDefault();
+                    }
+                }
+            };
+            if (Object.keys(keyHandlers).includes(event.key)) {
+                keyHandlers[event.key]();
+            }
+        }
+    }, [
+        rootRef,
+        viewportInfo,
+        tableId,
+        tableData,
+        isRtl,
+        isTabbableMode,
+        columnsArray,
+        sizingInfoRef,
+        selectionExtensionElementRef,
+        activeCell,
+        onActiveCellChanged,
+        isDropDownSelection,
+        selectionMode,
+        selected,
+        onTableSelectionChange,
+        activeStyleColumnInfo,
+        setActiveStyleColumnInfo,
+        onRowAction,
+        onSortCriterionChange,
+        hideTooltip,
+        updateDeferredScrollDetail
+    ]);
+    // Keyup handler for the outer Table.
+    const _keyUpHandler = useCallback((event) => {
+        const rootElement = rootRef.current;
+        const scrollerElement = viewportInfo.viewportConfig.scrollerRef.current;
+        if (rootElement != null && scrollerElement != null) {
+            const keyHandlers = {
+                ' ': function () {
+                    if (activeCell != null) {
+                        handleEndInteractionColumnHeaderFooterGesture(setActiveStyleColumnInfo, activeStyleColumnInfo);
+                        if (triggerDownKeyRef.current === activeCell.rowKey) {
+                            if (!isTabbableMode) {
+                                if (onTableSelectionChange != null) {
+                                    handleSelectionGesture(rootElement, tableId, columnsArray, getElementFromCell(rootElement, tableId, activeCell), true, onTableSelectionChange, isDropDownSelection, selectionMode, selected);
+                                }
+                            }
+                            if (onRowAction != null &&
+                                handleRowActionGesture(tableId, tableData, onRowAction, event.target, TABLE_ROW_SELECTOR, getActionContext, activeCell)) {
+                                event.stopPropagation();
+                            }
+                        }
+                        triggerDownKeyRef.current = undefined;
+                    }
+                },
+                Enter: function () {
+                    if (activeCell != null && triggerDownKeyRef.current === activeCell.rowKey) {
+                        if (activeCell.type === 'data') {
+                            if (isDropDownSelection && !isTabbableMode) {
+                                if (onTableSelectionChange != null) {
+                                    handleSelectionGesture(rootElement, tableId, columnsArray, getElementFromCell(rootElement, tableId, activeCell), true, onTableSelectionChange, isDropDownSelection, selectionMode, selected);
+                                }
+                            }
+                            if (onRowAction != null &&
+                                handleRowActionGesture(tableId, tableData, onRowAction, event.target, TABLE_ROW_SELECTOR, getActionContext, activeCell)) {
+                                event.stopPropagation();
+                            }
+                        }
+                        else if (activeCell.type === 'header' &&
+                            !isTabbableMode &&
+                            onSortCriterionChange != null &&
+                            handleSortActionGesture(columnsArray, activeCell.columnKey, onSortCriterionChange, sortCriterion)) {
+                            event.stopPropagation();
+                        }
+                    }
+                    triggerDownKeyRef.current = undefined;
+                }
+            };
+            if (Object.keys(keyHandlers).includes(event.key)) {
+                keyHandlers[event.key]();
+            }
+        }
+    }, [
+        rootRef,
+        viewportInfo,
+        tableId,
+        tableData,
+        isTabbableMode,
+        columnsArray,
+        activeCell,
+        activeStyleColumnInfo,
+        setActiveStyleColumnInfo,
+        isDropDownSelection,
+        selectionMode,
+        selected,
+        onTableSelectionChange,
+        onRowAction,
+        sortCriterion,
+        onSortCriterionChange
+    ]);
+    return { onKeyDown: _keyDownHandler, onKeyUp: _keyUpHandler };
+}
+
+/**
+ * Helper function to handle a hover over a resizable column region gesture.
+ */
+function handleOverResizeRegionGesture(rootElement, tableId, event, columnsArray, resizeInfoRef, isRtl) {
+    // handle hover feedback around potentially resizable columns
+    _updateResizingState(rootElement, tableId, event, columnsArray, resizeInfoRef, isRtl);
+}
+/**
+ * Helper function to handle a column resize start gesture (pointer down).
+ */
+function handleColumnResizeStartGesture(rootElement, scrollerElement, tableId, event, columnsArray, appliedColumnWidths, resizeInfoRef, isRtl, hideTooltip, onColumnResizing) {
+    if (resizeInfoRef.current.key == null) {
+        _updateResizingState(rootElement, tableId, event, columnsArray, resizeInfoRef, isRtl);
+    }
+    if (resizeInfoRef.current.key != null) {
+        const rect = scrollerElement.getBoundingClientRect();
+        const pointerX = isRtl ? rect.right - event.clientX : event.clientX - rect.left;
+        resizeInfoRef.current = {
+            isResizing: true,
+            isResizeHover: true,
+            key: resizeInfoRef.current.key,
+            startX: pointerX,
+            delta: 0,
+            ignoreClick: resizeInfoRef.current.ignoreClick
+        };
+        if (onColumnResizing != null) {
+            onColumnResizing({
+                key: resizeInfoRef.current.key,
+                delta: 0,
+                allColumnWidths: appliedColumnWidths.netColumnWidths,
+                paddingWidth: appliedColumnWidths.totalBorderOffset
+            });
+        }
+        hideTooltip(true);
+        return true;
+    }
+    return false;
+}
+/**
+ * Helper function to ensure the resizing state is updated based on the latest pointer event.
+ */
+function _updateResizingState(rootElement, tableId, event, columnsArray, resizeInfoRef, isRtl) {
+    const headerRowElement = getHeaderRowElement(rootElement, tableId);
+    if (headerRowElement != null) {
+        const headerElements = headerRowElement.querySelectorAll(`[${TABLE_HEADER_SELECTOR}='${tableId}']`);
+        if (getElementContainsFunc(headerRowElement)(event.target)) {
+            let isResizeHover = false;
+            for (let i = 0; i < headerElements.length; i++) {
+                const headerElement = headerElements[i];
+                const cellRect = headerElement.getBoundingClientRect();
+                const endEdge = isRtl ? cellRect.left : cellRect.right;
+                if (Math.abs(endEdge - event.pageX) <= 8) {
+                    if (columnsArray[i].value.edgeResizable !== 'enabled') {
+                        break;
+                    }
+                    // resize operation on end side of header cell
+                    resizeInfoRef.current.key = columnsArray[i].key;
+                    headerRowElement.style.cursor = 'col-resize';
+                    isResizeHover = true;
+                    resizeInfoRef.current.isResizeHover = true;
+                }
+            }
+            if (!isResizeHover) {
+                headerRowElement.style.cursor = '';
+                resizeInfoRef.current.key = undefined;
+                resizeInfoRef.current.isResizeHover = false;
+            }
+        }
+        else {
+            if (headerRowElement != null) {
+                headerRowElement.style.cursor = '';
+            }
+            resizeInfoRef.current.key = undefined;
+            resizeInfoRef.current.isResizeHover = false;
+        }
+    }
+}
+/**
+ * Helper function to handle a pointer move gesture during a column resize.
+ */
+function handleColumnResizingGesture(scrollerElement, event, appliedColumnWidths, resizeInfoRef, isRtl, onColumnResizing) {
+    if (resizeInfoRef.current.isResizing) {
+        const rect = scrollerElement.getBoundingClientRect();
+        const currentX = isRtl ? rect.right - event.clientX : event.clientX - rect.left;
+        resizeInfoRef.current.delta = currentX - resizeInfoRef.current.startX;
+        // handle resize move operation
+        if (onColumnResizing != null) {
+            onColumnResizing({
+                key: resizeInfoRef.current.key,
+                delta: resizeInfoRef.current.delta,
+                allColumnWidths: appliedColumnWidths.netColumnWidths,
+                paddingWidth: appliedColumnWidths.totalBorderOffset
+            });
+        }
+    }
+}
+/**
+ * Helper function to handle a column resize end gesture (pointer up).
+ */
+function handleColumnResizeEndGesture(scrollerElement, event, appliedColumnWidths, resizeInfoRef, isRtl, onColumnResize) {
+    if (resizeInfoRef.current.isResizing) {
+        if (onColumnResize != null) {
+            const rect = scrollerElement.getBoundingClientRect();
+            const currentX = isRtl ? rect.right - event.clientX : event.clientX - rect.left;
+            resizeInfoRef.current.delta = currentX - resizeInfoRef.current.startX;
+            onColumnResize({
+                key: resizeInfoRef.current.key,
+                delta: resizeInfoRef.current.delta,
+                allColumnWidths: appliedColumnWidths.netColumnWidths,
+                paddingWidth: appliedColumnWidths.totalBorderOffset,
+                gesture: 'pointer',
+                type: 'delta'
+            });
+        }
+    }
+    resizeInfoRef.current = {
+        isResizing: false,
+        isResizeHover: resizeInfoRef.current.isResizeHover,
+        ignoreClick: resizeInfoRef.current.ignoreClick
+    };
+}
+/**
+ * Helper function to handle the pointer leaving the entire Table when previously hovering
+ * over a column resize region.
+ */
+function handleLeaveResizingGesture(rootElement, tableId, resizeInfoRef) {
+    if (!resizeInfoRef.current.isResizing) {
+        const headerRowElement = getHeaderRowElement(rootElement, tableId);
+        if (headerRowElement != null) {
+            headerRowElement.style.cursor = '';
+        }
+        resizeInfoRef.current.isResizeHover = false;
+    }
+}
+/**
+ * Helper function to handle a pointer entering the Table when it was previously handling
+ * a column resize gesture.
+ */
+function handleEnterResizingGesture(scrollerElement, event, appliedColumnWidths, resizeInfoRef, isRtl, onColumnResize) {
+    // handle case where user was resizing, moved pointer out of the Table,
+    // released the button, and has now entered the table once again
+    if (resizeInfoRef.current.isResizing && event.buttons === 0) {
+        handleColumnResizeEndGesture(scrollerElement, event, appliedColumnWidths, resizeInfoRef, isRtl, onColumnResize);
+    }
+}
+
+/**
+ * Hook that manages pointer interactions on the Preact Table
+ */
+function usePointerHandling({ rootRef, viewportInfo, tableId, tableData, isRtl, columnsArray, appliedColumnWidths, resizeInfoRef, selectionExtensionElementRef, onColumnResizing, onColumnResize, activeCell, onActiveCellChanged, isDropDownSelection, selectionMode, selected, onTableSelectionChange, activeStyleColumnInfo, setActiveStyleColumnInfo, onRowAction, showTooltip, hideTooltip, tooltipId }) {
+    // tracks whether the most recent 'pointerdown' event was due to a touch gesture
+    const selectionTouchRef = useRef(false);
+    // tracks the column key for any header or footer being hovered over
+    const [hoverStyleColumnInfo, setHoverStyleColumnInfo] = useState();
+    // tracks the current 'pointer over' element for comparison during 'click' event handling to
+    // prevent screen readers from triggering undesired selection gestures from simulated events
+    const pointerInfoRef = useRef();
+    // Pointer move handler for the outer Table.
+    const _pointerMoveHandler = useCallback((event) => {
+        const rootElement = rootRef.current;
+        const scrollerElement = viewportInfo.viewportConfig.scrollerRef.current;
+        if (rootElement != null) {
+            pointerInfoRef.current = { target: event.target, x: event.clientX, y: event.clientY };
+            handleMoveTooltipGesture(tableId, columnsArray, event, showTooltip, hideTooltip, tooltipId);
+            if (onColumnResizing != null) {
+                if (!resizeInfoRef.current.isResizing) {
+                    handleOverResizeRegionGesture(rootElement, tableId, event, columnsArray, resizeInfoRef, isRtl);
+                }
+                else if (scrollerElement != null && appliedColumnWidths != null) {
+                    handleColumnResizingGesture(scrollerElement, event, appliedColumnWidths, resizeInfoRef, isRtl, onColumnResizing);
+                }
+            }
+        }
+    }, [
+        rootRef,
+        viewportInfo,
+        tableId,
+        columnsArray,
+        appliedColumnWidths,
+        resizeInfoRef,
+        isRtl,
+        onColumnResizing,
+        showTooltip,
+        hideTooltip,
+        tooltipId
+    ]);
+    // Pointer over handler for the outer Table.
+    const _pointerOverHandler = useCallback((event) => {
+        const rootElement = rootRef.current;
+        if (rootElement != null) {
+            pointerInfoRef.current = { target: event.target, x: event.clientX, y: event.clientY };
+            handleOverColumnHeaderFooterGesture(tableId, event, setHoverStyleColumnInfo, hoverStyleColumnInfo);
+        }
+    }, [rootRef, tableId, hoverStyleColumnInfo]);
+    // Pointer down handler for the outer Table. It ensures the area targeted is 'current'.
+    // NOTE - This event handling is triggered prior to 'onFocus' handling and ensures the
+    // 'pending current' area is set when an initial pointer interaction focuses the Table.
+    const _pointerDownHandler = useCallback((event) => {
+        handleActiveColumnHeaderFooterGesture(tableId, event, setActiveStyleColumnInfo, activeStyleColumnInfo);
+        const rootElement = rootRef.current;
+        const scrollerElement = viewportInfo.viewportConfig.scrollerRef.current;
+        if (rootElement != null) {
+            selectionTouchRef.current = event.pointerType === 'touch';
+            const targetElement = event.target;
+            if (onTableSelectionChange != null &&
+                activeCell != null &&
+                event.shiftKey &&
+                isRangeSelectionGesture(rootElement, tableId, columnsArray, targetElement, activeCell, selectionMode)) {
+                // prevent focus change on selection extension gesture
+                if (!getIsSelectionPending()) {
+                    event.preventDefault();
+                }
+            }
+            else if (scrollerElement != null &&
+                appliedColumnWidths != null &&
+                handleColumnResizeStartGesture(rootElement, scrollerElement, tableId, event, columnsArray, appliedColumnWidths, resizeInfoRef, isRtl, hideTooltip, onColumnResizing)) {
+                // prevent focus change on column resize gesture
+                event.preventDefault();
+                resizeInfoRef.current.ignoreClick = true;
+            }
+            else if (logicalCellExtractor(targetElement, tableId, columnsArray) == null) {
+                // prevent focus shift when interacting with 'non-focusable' regions (ie - scrollbar)
+                event.preventDefault();
+            }
+            else {
+                // in firefox, ctrl/cmd + click triggers browser selection of <tr> elements, which
+                // conflicts with our multiple row selection gesture. to prevent this, schedule a
+                // macro-task to remove any node-based selection to ensure there is no 'pending'
+                // browser selection found during eventual click event handling
+                if (getClientHints().browser === 'firefox' && isLogicalCtrl(event)) {
+                    setTimeout(() => {
+                        clearElementSelection();
+                    }, 0);
+                }
+            }
+        }
+    }, [
+        rootRef,
+        viewportInfo,
+        tableId,
+        columnsArray,
+        appliedColumnWidths,
+        resizeInfoRef,
+        activeStyleColumnInfo,
+        setActiveStyleColumnInfo,
+        isRtl,
+        hideTooltip,
+        activeCell,
+        selectionMode,
+        onTableSelectionChange,
+        onColumnResizing
+    ]);
+    // Pointer up handler for the outer Table.
+    const _pointerUpHandler = useCallback((event) => {
+        handleEndInteractionColumnHeaderFooterGesture(setActiveStyleColumnInfo, activeStyleColumnInfo);
+        const scrollerElement = viewportInfo.viewportConfig.scrollerRef.current;
+        if (scrollerElement != null && appliedColumnWidths != null) {
+            handleColumnResizeEndGesture(scrollerElement, event, appliedColumnWidths, resizeInfoRef, isRtl, onColumnResize);
+        }
+    }, [
+        viewportInfo,
+        appliedColumnWidths,
+        resizeInfoRef,
+        activeStyleColumnInfo,
+        setActiveStyleColumnInfo,
+        isRtl,
+        onColumnResize
+    ]);
+    // Pointer leave handler for the outer Table.
+    const _pointerLeaveHandler = useCallback((event) => {
+        handleEndInteractionColumnHeaderFooterGesture(setHoverStyleColumnInfo, hoverStyleColumnInfo);
+        handleEndInteractionColumnHeaderFooterGesture(setActiveStyleColumnInfo, activeStyleColumnInfo);
+        const rootElement = rootRef.current;
+        if (rootElement != null) {
+            handleLeaveResizingGesture(rootElement, tableId, resizeInfoRef);
+            handleLeaveTableTooltipGesture(rootElement, event, hideTooltip, tooltipId);
+        }
+        pointerInfoRef.current = undefined;
+    }, [
+        rootRef,
+        tableId,
+        resizeInfoRef,
+        activeStyleColumnInfo,
+        setActiveStyleColumnInfo,
+        hoverStyleColumnInfo,
+        hideTooltip,
+        tooltipId
+    ]);
+    // Pointer enter handler for the outer Table.
+    const _pointerEnterHandler = useCallback((event) => {
+        const scrollerElement = viewportInfo.viewportConfig.scrollerRef.current;
+        if (scrollerElement != null && appliedColumnWidths != null) {
+            handleEnterResizingGesture(scrollerElement, event, appliedColumnWidths, resizeInfoRef, isRtl, onColumnResize);
+        }
+    }, [viewportInfo, appliedColumnWidths, resizeInfoRef, isRtl, onColumnResize]);
+    // Click handler for the outer Table. It ensures the Table's selection state is
+    // updated to reflect the area targeted, and any action events are fired correctly.
+    const _clickHandler = useCallback((event) => {
+        const rootElement = rootRef.current;
+        if (rootElement != null) {
+            // only handle click events that match the latest mouse over/move info to prevent screen readers
+            // from triggering undesired selections due to simulated click events when transferring focus
+            if (selectionTouchRef.current ||
+                (pointerInfoRef.current != null &&
+                    pointerInfoRef.current.target === event.target &&
+                    Math.abs(pointerInfoRef.current.x - event.clientX) <= 1 &&
+                    Math.abs(pointerInfoRef.current.y - event.clientY) <= 1)) {
+                let isSelectionExtension = false;
+                const target = event.target;
+                if (onTableSelectionChange != null &&
+                    !resizeInfoRef.current.ignoreClick &&
+                    !getIsSelectionPending()) {
+                    if (activeCell != null && event.shiftKey) {
+                        isSelectionExtension = handleRangeSelectionGesture(rootElement, tableId, columnsArray, target, activeCell, onActiveCellChanged, selectionExtensionElementRef, onTableSelectionChange, isDropDownSelection, selectionMode, selected);
+                    }
+                    if (!isSelectionExtension) {
+                        handleSelectionGesture(rootElement, tableId, columnsArray, target, isLogicalCtrl(event) || selectionTouchRef.current, onTableSelectionChange, isDropDownSelection, selectionMode, selected);
+                    }
+                }
+                if (onRowAction != null &&
+                    !getIsSelectionPending() &&
+                    handleRowActionGesture(tableId, tableData, onRowAction, target, TABLE_ROW_SELECTOR, getActionContext)) {
+                    event.stopPropagation();
+                }
+            }
+        }
+        resizeInfoRef.current.ignoreClick = false;
+    }, [
+        rootRef,
+        tableId,
+        columnsArray,
+        tableData,
+        resizeInfoRef,
+        selectionExtensionElementRef,
+        activeCell,
+        onActiveCellChanged,
+        isDropDownSelection,
+        selectionMode,
+        selected,
+        onTableSelectionChange,
+        onRowAction
+    ]);
+    return {
+        pointerHandlingProps: {
+            onPointerOver: _pointerOverHandler,
+            onPointerMove: _pointerMoveHandler,
+            onPointerDown: _pointerDownHandler,
+            onPointerUp: _pointerUpHandler,
+            onPointerLeave: _pointerLeaveHandler,
+            onPointerEnter: _pointerEnterHandler,
+            onClick: _clickHandler
+        },
+        hoverStyleColumnInfo
+    };
+}
+
+const _defaultDisabledRowInteractionKeys = ['enter'];
+/**
+ * Hook that manages interactions and events on the Preact Table
+ */
+function useInteractionManager({ rootRef, viewportInfo, ref, tableId, tableData, hasMore, hasFooters, isRtl, columnsArray, stickyColumnInfo, appliedColumnWidths, isLayoutRequired, sizingInfoRef, overflowInfoRef, stickyEdgesState, setStickyEdgesState, cellHasRenderer, horizontalScrollPositionOverride, verticalScrollPositionOverride, onColumnResizing, onColumnResize, currentCellOverride, onPersistCurrentCell, selectionMode, selected, onSelectionChange, onRowAction, sortCriterion, onSortCriterionChange, isPendingLayout, isEmbedded, contextMenuConfig }) {
+    // tracks the current column resize state
+    const resizeInfoRef = useRef({
+        isResizing: false,
+        isResizeHover: false,
+        ignoreClick: false
+    });
+    // tracks the column key for any header or footer being hovered over
+    const [activeStyleColumnInfo, setActiveStyleColumnInfo] = useState();
+    // handles default tooltip state management
+    const { tooltipContent, tooltipId, tooltipAnchorRef, showTooltip, hideTooltip } = useTruncationTooltip({ rootRef, tableId, resizeInfoRef });
+    // whether row selection is triggered on 'enter' keypresses in addition to 'spacebar'
+    const disabledRowInteractionKeys = isEmbedded ? undefined : _defaultDisabledRowInteractionKeys;
+    // tracks the current selection extension element (if any)
+    const selectionExtensionElementRef = useRef();
+    // intercept onSelectionChange calls to ensure local selectionExtensionElementRef is cleared
+    const onTableSelectionChange = useMemo(() => {
+        return onSelectionChange != null
+            ? (detail, isExtendableSelection) => {
+                if (!isExtendableSelection) {
+                    selectionExtensionElementRef.current = undefined;
+                }
+                onSelectionChange(detail);
+            }
+            : undefined;
+    }, [onSelectionChange]);
+    // setup focus tracking using the useFocusHandling hook
+    const { focusHandlingProps, activeCell, onActiveCellChanged, currentActiveCell, currentCell, isShowFocusRing, isTabbableMode, onStartFocusTracking, onFocusStartEdge, onFocusEndEdge, updateDeferredScrollDetail } = useFocusHandling({
+        rootRef,
+        viewportInfo,
+        tableId,
+        tableData,
+        hasMore,
+        hasFooters,
+        columnsArray,
+        stickyColumnInfo,
+        sizingInfoRef,
+        overflowInfoRef,
+        selectionExtensionElementRef,
+        isRtl,
+        cellSupportsTabbable: cellHasRenderer,
+        appliedColumnWidths,
+        currentCellOverride,
+        onPersistCurrentCell,
+        showTooltip,
+        hideTooltip,
+        isPendingLayout,
+        isEmbedded,
+        isDataLoaded: !hasMore || tableData.length > 0
+    });
+    const keyboardHandlingProps = useKeyboardHandling({
+        rootRef,
+        viewportInfo,
+        tableId,
+        tableData,
+        isRtl,
+        isTabbableMode,
+        columnsArray,
+        sizingInfoRef,
+        selectionExtensionElementRef,
+        activeCell,
+        onActiveCellChanged,
+        isDropDownSelection: isEmbedded,
+        selectionMode,
+        selected,
+        onTableSelectionChange,
+        activeStyleColumnInfo,
+        setActiveStyleColumnInfo,
+        onRowAction,
+        sortCriterion,
+        onSortCriterionChange,
+        hideTooltip,
+        updateDeferredScrollDetail
+    });
+    const { hoverStyleColumnInfo, pointerHandlingProps } = usePointerHandling({
+        rootRef,
+        viewportInfo,
+        tableId,
+        tableData,
+        isRtl,
+        columnsArray,
+        appliedColumnWidths,
+        resizeInfoRef,
+        selectionExtensionElementRef,
+        onColumnResizing,
+        onColumnResize,
+        activeCell,
+        onActiveCellChanged,
+        isDropDownSelection: isEmbedded,
+        selectionMode,
+        selected,
+        onTableSelectionChange,
+        activeStyleColumnInfo,
+        setActiveStyleColumnInfo,
+        onRowAction,
+        showTooltip,
+        hideTooltip,
+        tooltipId
+    });
+    const scrollHandlingProps = useScrollHandling({
+        rootRef,
+        viewportInfo,
+        tableId,
+        isLayoutRequired,
+        sizingInfoRef,
+        overflowInfoRef,
+        columnsArray,
+        stickyColumnInfo,
+        stickyEdgesState,
+        setStickyEdgesState,
+        fullColumnWidths: appliedColumnWidths?.fullColumnWidths,
+        horizontalScrollPositionOverride,
+        verticalScrollPositionOverride,
+        tooltipAnchorRef,
+        hideTooltip,
+        isPendingLayout,
+        isRtl
+    });
+    const { contextMenuTriggerProps, menuProps, contextMenuContext, isResizeDialogOpen, setIsResizeDialogOpen } = useContextMenu(rootRef, tableId, tableData, columnsArray, contextMenuConfig, sortCriterion, onSortCriterionChange);
+    const interactionManagerProps = !isPendingLayout
+        ? mergeProps(focusHandlingProps, keyboardHandlingProps, pointerHandlingProps, contextMenuTriggerProps)
+        : focusHandlingProps;
+    // setup imperative handle implementation
+    useImperativeHandle(ref, () => {
+        const rootElement = rootRef.current;
+        const scrollerElement = viewportInfo.viewportConfig.scrollerRef.current;
+        return {
+            focus: () => {
+                if (rootElement != null) {
+                    if (currentActiveCell != null) {
+                        const cellElement = getElementFromCell(rootElement, tableId, currentActiveCell);
+                        if (cellElement != null) {
+                            cellElement.focus();
+                            return;
+                        }
+                    }
+                    // if no current cell element was found, just focus the root element
+                    rootElement.focus();
+                }
+            },
+            getHorizontalScrollPosition: () => {
+                if (rootElement == null ||
+                    scrollerElement == null ||
+                    isLayoutRequired ||
+                    appliedColumnWidths == null) {
+                    return {};
+                }
+                return getHorizontalScrollPosition(rootElement, scrollerElement, viewportInfo, sizingInfoRef.current, overflowInfoRef.current, columnsArray, appliedColumnWidths.fullColumnWidths, isRtl);
+            },
+            getVerticalScrollPosition: () => {
+                if (rootElement == null || scrollerElement == null || isLayoutRequired) {
+                    return {};
+                }
+                return getVerticalScrollPosition(rootElement, scrollerElement, viewportInfo, tableId);
+            }
+        };
+    }, [
+        rootRef,
+        viewportInfo,
+        tableId,
+        columnsArray,
+        currentActiveCell,
+        isLayoutRequired,
+        appliedColumnWidths,
+        sizingInfoRef,
+        overflowInfoRef,
+        isRtl
+    ]);
+    return {
+        interactionManagerProps,
+        scrollHandlingProps,
+        onTableSelectionChange,
+        isShowFocusRing,
+        isTabbableMode,
+        currentCell,
+        currentActiveCell,
+        resizeInfoRef,
+        onStartFocusTracking,
+        onFocusStartEdge,
+        onFocusEndEdge,
+        activeStyleColumnInfo,
+        hoverStyleColumnInfo,
+        tooltipContent,
+        contextMenuContext,
+        menuProps,
+        isResizeDialogOpen,
+        setIsResizeDialogOpen,
+        disabledRowInteractionKeys
+    };
+}
+
+/**
+ * The internal component used to render an empty table cell in a TableBody.
+ */
+function TableNoData({ rootRef, tableId, columnsCount, isShowFocusRing, hasTabIndex, isTabbableMode, ariaRowIndex, renderer }) {
+    const browser = getClientHints().browser;
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const rowClasses = classNames([tableRowStyles.base]);
+    const { classes: themeClasses } = useComponentTheme(TableNoDataRedwoodTheme, {
+        defaultRenderer: renderer == null ? 'isDefaultRenderer' : 'notDefaultRenderer',
+        showFocusRing: isShowFocusRing ? 'isShowFocusRing' : 'notShowFocusRing'
+    });
+    const cellClasses = classNames([themeClasses]);
+    function defaultContentRenderer() {
+        return translations.collection_noData();
+    }
+    const contentRenderer = renderer != null ? renderer : defaultContentRenderer;
+    // in firefox, table element heights are not stretched unless explicitly set in some cases
+    useLayoutEffect(() => {
+        if (browser === 'firefox') {
+            const rootElement = rootRef.current;
+            if (rootElement != null) {
+                const tableBodyElement = getTableBodyElement(rootElement, tableId);
+                const noDataElement = getNoDataCellElement(rootElement, tableId);
+                if (tableBodyElement != null && noDataElement != null) {
+                    noDataElement.style.height = '';
+                    noDataElement.style.height = `${tableBodyElement.getBoundingClientRect().height}px`;
+                }
+            }
+        }
+    });
+    return (jsx("tr", { "aria-rowindex": ariaRowIndex, class: rowClasses, role: 'row', children: jsx("td", { "aria-colindex": 1, class: cellClasses, style: browser !== 'firefox' ? 'height: 100%;' : undefined, tabIndex: hasTabIndex ? 0 : -1, role: 'gridcell', colSpan: columnsCount, "data-oj-cell-type": 'noData', "data-oj-table-focusable": tableId, "data-oj-table-nodata": tableId, children: contentRenderer({ isTabbable: isTabbableMode }) }) }));
+}
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+// Pointer Enter handler for elements that need to prevent default browser tooltips
+const _pointerEnterHandler = (event) => {
+    const targetElement = event.target;
+    targetElement.classList.add(preventBrowserTooltipStyle);
+};
+// Pointer Leave handler for elements that need to prevent default browser tooltips
+const _pointerLeaveHandler = (event) => {
+    const targetElement = event.target;
+    targetElement.classList.remove(preventBrowserTooltipStyle);
+};
+/*
+ * Props that can be spread on elements that need to prevent default browser tooltips
+ */
+const preventBrowserTooltipProps = {
+    onPointerEnter: _pointerEnterHandler,
+    onPointerLeave: _pointerLeaveHandler
+};
+
+function _defaultCellRenderer({ rowData, field }) {
+    return field != null ? String(rowData[field]) : undefined;
+}
+/**
+ * The internal component used to render a single cell in a TableRow.
+ */
+function TableCell({ tableId, rowData, field, columnKey, columnIndex, rowKey, rowIndex, isFinalRowIndex, isFinalColumnIndex, isFirstLogicalColumnIndex, isFinalLogicalColumnIndex, hasVerticalGridlines, hasHorizontalGridlines, hasFooters, hasVerticalUnderflow, hasMore, isRowSelected, isPreviousRowSelected, isColumnSelected, isNextColumnSelected, isPreviousColumnSelected, isSticky, isShowFocusRing, hasTabIndex, isTabbableMode, isAccRowHeader, focusTarget = 'cell', renderer = _defaultCellRenderer, selectorRenderer, isRowSelectionEnabled, isRowSingleSelection, variant, applyActiveStyle, applyHoverStyle, applyPseudoHoverStyle, isStickyStartEdge, isStickyEndEdge, hasStartEdge, hasEndEdge, isRtl, isHighContrast, padding, tooltip, horizontalAlignment = 'start', verticalAlignment = 'center' }) {
+    const browser = getClientHints().browser;
+    const rowContext = { key: rowKey, data: rowData };
+    const columnPadding = typeof padding === 'function' ? padding(rowContext) : padding;
+    const columnTooltip = typeof tooltip === 'function' ? tooltip(rowContext) : tooltip;
+    const supportsDefaultTooltip = columnTooltip !== 'disabled';
+    const hasLastHorizontalGridline = hasHorizontalGridlines && (hasMore || hasVerticalUnderflow || !hasFooters);
+    const cellClasses = classNames(getDataCellClassArray({
+        isFirstColumnIndex: columnIndex === 0 || isFirstLogicalColumnIndex,
+        isFinalColumnIndex: isFinalColumnIndex || isFinalLogicalColumnIndex,
+        isFirstRowIndex: rowIndex === 0,
+        isFinalRowIndex,
+        hasVerticalGridlines,
+        hasHorizontalGridlines,
+        hasLastHorizontalGridline,
+        isRowSelected,
+        isPreviousRowSelected,
+        isColumnSelected,
+        isNextColumnSelected,
+        isPreviousColumnSelected,
+        isSticky,
+        hasStartEdge,
+        hasEndEdge,
+        isShowFocusRing,
+        isRowSelectionEnabled,
+        isRowSingleSelection,
+        isActive: applyActiveStyle,
+        isHover: applyHoverStyle,
+        isPseudoHover: applyPseudoHoverStyle,
+        isStickyStartEdge,
+        isStickyEndEdge,
+        isRtl,
+        isHighContrast,
+        horizontalAlignment,
+        verticalAlignment,
+        variant,
+        padding: columnPadding
+    }));
+    const cellRendererProps = {
+        rowData: rowData,
+        rowKey: rowKey,
+        field: field,
+        columnKey: columnKey,
+        selector: selectorRenderer,
+        isTabbable: isTabbableMode
+    };
+    const supportsAutoFocus = typeof focusTarget === 'function'
+        ? focusTarget(rowContext) === 'content'
+        : focusTarget === 'content';
+    return (jsx("td", { "aria-colindex": columnIndex + 1, class: cellClasses, tabIndex: hasTabIndex ? 0 : -1, role: isAccRowHeader ? 'rowheader' : 'gridcell', "data-oj-cell-type": 'data', "data-oj-column-key": columnKey, "data-oj-table-focusable": tableId, "data-oj-table-data": tableId, "data-oj-table-tooltip": supportsDefaultTooltip ? 'enabled' : undefined, "data-oj-table-auto-focus": supportsAutoFocus ? 'enabled' : undefined, ...(supportsDefaultTooltip && browser === 'safari' ? preventBrowserTooltipProps : {}), ...(isColumnSelected ? { 'aria-selected': true } : {}), children: jsx(FormContext.Provider, { value: { textAlign: getFormTextAlign(horizontalAlignment, isRtl) }, children: renderer(cellRendererProps) }) }));
+}
+
+/**
+ * The internal component used to render a single row in Table.
+ */
+function TableRow({ tableId, rowKey, rowData, rowIndex, isFinalRow, columnsArray, rowHeaderColumnKeys, hasVerticalGridlines, hasHorizontalGridlines, hasFooters, hasVerticalUnderflow, hasMore, isSelected, isPreviousSelected, isRowSelectionEnabled, isSingleRowSelectionEnabled, selectedRowKeys = { all: false, keys: new Set() }, isShowFocusRing, activeColumnKey, isTabbableMode, selectedColumnKeys = { all: false, keys: new Set() }, variant, disabledInteractionKeys, onSelectionChange, startStickyEdge, endStickyEdge, firstStickyColumnIndex, finalStickyColumnIndex, columnBorderEdges, isRtl, isHighContrast }) {
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const { interactionProps, applyActiveStyle, applyHoverStyle, applyPseudoHoverStyle } = useInteractionStyle({ disabledKeys: disabledInteractionKeys });
+    const rowStyles = isHighContrast ? tableRowStylesHC : tableRowStyles;
+    const classArray = [rowStyles.base, isFinalRow ? rowStyles.lastRowHeight : rowStyles.rowHeight];
+    const classes = classNames(classArray);
+    const accessibleRowName = (rowIndex + 2).toString();
+    const handleRowSelectorChange = (detail) => {
+        if (onSelectionChange != null) {
+            onSelectionChange({
+                value: {
+                    row: detail.value,
+                    column: { all: false, keys: new Set() }
+                },
+                target: detail.target
+            }, false);
+        }
+    };
+    const selectorRenderer = isRowSelectionEnabled && !isSingleRowSelectionEnabled
+        ? () => {
+            // conversion from 0-based index and adding the header row as it is always rendered
+            return (jsx(Selector, { "aria-label": translations.collection_selectRow({ ROW_NAME: accessibleRowName }), onChange: handleRowSelectorChange, rowKey: rowKey, selectedKeys: selectedRowKeys }));
+        }
+        : undefined;
+    let isPreviousColumnSelected = false;
+    let isPreviousStickyColumnSelected = false;
+    return (jsx("tr", { "aria-rowindex": rowIndex + 2, class: classes, role: 'row', "data-oj-key": rowKey, "data-oj-table-row": tableId, ...(isRowSelectionEnabled
+            ? isSelected
+                ? { 'aria-selected': true }
+                : { 'aria-selected': false }
+            : {}), ...(typeof rowKey === 'number' && { 'data-oj-key-type': 'number' }), ...(isRowSelectionEnabled && interactionProps), children: columnsArray.map((column, columnIndex) => {
+            const columnKey = column.key;
+            const isColumnSelected = containsKey(selectedColumnKeys, columnKey);
+            const isActive = columnKey === activeColumnKey;
+            const hasTabIndex = isActive && !isTabbableMode;
+            const isSticky = column.value.sticky === 'enabled';
+            let nextVisibleColumn;
+            let isNextVisibleColumnSelected = false;
+            let isPreviousVisibleColumnSelected = false;
+            let isFirstLogicalColumnIndex = false;
+            let isFinalLogicalColumnIndex = false;
+            if (isSticky) {
+                if (startStickyEdge != null && firstStickyColumnIndex === columnIndex) {
+                    isFirstLogicalColumnIndex = true;
+                }
+                if (endStickyEdge != null && finalStickyColumnIndex === columnIndex) {
+                    isFinalLogicalColumnIndex = true;
+                }
+                if ((startStickyEdge != null && startStickyEdge > columnIndex) ||
+                    (endStickyEdge != null && endStickyEdge <= columnIndex)) {
+                    for (let i = columnIndex + 1; i < columnsArray.length; i++) {
+                        if (columnsArray[i].value.sticky === 'enabled') {
+                            nextVisibleColumn = columnsArray[i];
+                            break;
+                        }
+                    }
+                }
+                else {
+                    nextVisibleColumn =
+                        columnIndex < columnsArray.length - 1 ? columnsArray[columnIndex + 1] : undefined;
+                }
+                isNextVisibleColumnSelected =
+                    startStickyEdge === columnIndex
+                        ? false
+                        : nextVisibleColumn != null && containsKey(selectedColumnKeys, nextVisibleColumn.key);
+                if ((startStickyEdge != null && startStickyEdge >= columnIndex) ||
+                    (endStickyEdge != null && endStickyEdge < columnIndex)) {
+                    isPreviousVisibleColumnSelected = isPreviousStickyColumnSelected;
+                }
+                else if (endStickyEdge !== columnIndex) {
+                    isPreviousVisibleColumnSelected = isPreviousColumnSelected;
+                }
+            }
+            else {
+                isPreviousVisibleColumnSelected = isPreviousColumnSelected;
+            }
+            const cellProps = {
+                tableId: tableId,
+                rowData: rowData,
+                field: column.value.field,
+                stickyColumn: column.value.sticky,
+                columnKey: columnKey,
+                columnIndex: columnIndex,
+                rowKey: rowKey,
+                rowIndex: rowIndex,
+                isFinalRowIndex: isFinalRow,
+                isFinalColumnIndex: columnIndex === columnsArray.length - 1,
+                isFirstLogicalColumnIndex: isFirstLogicalColumnIndex,
+                isFinalLogicalColumnIndex: isFinalLogicalColumnIndex,
+                hasVerticalGridlines: hasVerticalGridlines,
+                hasHorizontalGridlines: hasHorizontalGridlines,
+                hasFooters: hasFooters,
+                hasVerticalUnderflow: hasVerticalUnderflow,
+                hasMore: hasMore,
+                isRowSelected: isSelected,
+                isPreviousRowSelected: isPreviousSelected,
+                isSticky: isSticky,
+                isColumnSelected: isColumnSelected,
+                isNextColumnSelected: isNextVisibleColumnSelected,
+                isPreviousColumnSelected: isPreviousVisibleColumnSelected,
+                isShowFocusRing: isShowFocusRing && isActive,
+                hasTabIndex: hasTabIndex,
+                isTabbableMode: isTabbableMode,
+                isAccRowHeader: rowHeaderColumnKeys.has(column.key),
+                renderer: column.value.renderer,
+                selectorRenderer: selectorRenderer,
+                isRowSelectionEnabled: isRowSelectionEnabled,
+                variant: variant,
+                isRowSingleSelection: isSingleRowSelectionEnabled,
+                applyActiveStyle: applyActiveStyle,
+                applyHoverStyle: applyHoverStyle,
+                applyPseudoHoverStyle: applyPseudoHoverStyle,
+                isStickyStartEdge: columnIndex === startStickyEdge,
+                isStickyEndEdge: columnIndex === endStickyEdge,
+                hasStartEdge: columnBorderEdges[columnIndex].hasStart,
+                hasEndEdge: columnBorderEdges[columnIndex].hasEnd,
+                isRtl: isRtl,
+                isHighContrast: isHighContrast,
+                padding: column.value.padding,
+                tooltip: column.value.tooltip,
+                focusTarget: column.value.focusTarget,
+                horizontalAlignment: column.value.alignment?.horizontal != null
+                    ? column.value.alignment.horizontal
+                    : column.value.horizontalAlignment,
+                verticalAlignment: column.value.alignment?.vertical
+            };
+            isPreviousColumnSelected = isColumnSelected;
+            if (isSticky) {
+                isPreviousStickyColumnSelected = isColumnSelected;
+            }
+            return jsx(TableCell, { ...cellProps });
+        }) }, rowKey));
+}
+const _areStringSetsEquivalent = (set1, set2) => {
+    if (set1 == null) {
+        return set2 == null;
+    }
+    if (set2 == null) {
+        return false;
+    }
+    return set1.size === set2.size && [...set1].every((x) => set2.has(x));
+};
+const _areColumnsArraysEquivalent = (columnsArray1, columnsArray2) => {
+    if (columnsArray1.length === columnsArray2.length) {
+        for (let i = 0; i < columnsArray1.length; i++) {
+            if (columnsArray1[i].key !== columnsArray2[i].key ||
+                columnsArray1[i].value !== columnsArray2[i].value) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return false;
+};
+const MemoizeTableRow = memo(TableRow, (prev, next) => {
+    if (prev && next) {
+        return (prev.tableId === next.tableId &&
+            prev.rowKey === next.rowKey &&
+            prev.rowData === next.rowData &&
+            prev.rowIndex === next.rowIndex &&
+            prev.isFinalRow === next.isFinalRow &&
+            _areColumnsArraysEquivalent(prev.columnsArray, next.columnsArray) &&
+            prev.hasHorizontalGridlines === next.hasHorizontalGridlines &&
+            prev.hasVerticalGridlines === next.hasVerticalGridlines &&
+            (!next.isFinalRow ||
+                (prev.hasFooters === next.hasFooters &&
+                    prev.hasVerticalUnderflow === next.hasVerticalUnderflow &&
+                    prev.hasMore === next.hasMore)) &&
+            _areStringSetsEquivalent(prev.rowHeaderColumnKeys, next.rowHeaderColumnKeys) &&
+            prev.isSelected === next.isSelected &&
+            prev.isPreviousSelected === next.isPreviousSelected &&
+            prev.isRowSelectionEnabled === next.isRowSelectionEnabled &&
+            prev.isSingleRowSelectionEnabled === next.isSingleRowSelectionEnabled &&
+            (prev.isRowSelectionEnabled && !prev.isSingleRowSelectionEnabled
+                ? isSameKey(prev.selectedRowKeys, next.selectedRowKeys)
+                : true) &&
+            isSameKey(prev.selectedColumnKeys, next.selectedColumnKeys) &&
+            prev.isShowFocusRing === next.isShowFocusRing &&
+            prev.activeColumnKey === next.activeColumnKey &&
+            prev.isTabbableMode === next.isTabbableMode &&
+            prev.variant === next.variant &&
+            prev.onSelectionChange === next.onSelectionChange &&
+            prev.startStickyEdge === next.startStickyEdge &&
+            prev.endStickyEdge === next.endStickyEdge &&
+            prev.firstStickyColumnIndex === next.firstStickyColumnIndex &&
+            prev.finalStickyColumnIndex === next.finalStickyColumnIndex &&
+            prev.columnBorderEdges === next.columnBorderEdges &&
+            prev.isRtl === next.isRtl &&
+            prev.isHighContrast === next.isHighContrast &&
+            prev.disabledInteractionKeys === next.disabledInteractionKeys);
+    }
+    return false;
+});
+
+/**
+ * The internal component used to render the tbody of a Table.
+ */
+function TableBody({ rootRef, viewportInfo, tableId, isValidRender, getAccessibleRowHeaders, tableData, columnsArray, hasVerticalGridlines, hasHorizontalGridlines, hasFooters, hasVerticalUnderflow, isShowFocusRing, isTabbableMode, hasMore, onLoadMore, activeCell, currentRowKey, currentRowVariant, selected, isRowSelectionEnabled, isSingleRowSelectionEnabled, disabledInteractionKeys, onSelectionChange, noDataRenderer, startStickyEdge, endStickyEdge, firstStickyColumnIndex, finalStickyColumnIndex, columnBorderEdges, isRtl, isEmbedded, isHighContrast }) {
+    const browser = getClientHints().browser;
+    // returns a TableRowContext based on ItemContext (added key)
+    const getRowContext = useCallback((context) => {
+        return {
+            index: context.index,
+            data: context.data.data,
+            key: context.data.metadata.key
+        };
+    }, []);
+    let isPreviousSelected = false;
+    const collectionChildrenFunc = (context) => {
+        const tableRowContext = getRowContext(context);
+        const rowKey = tableRowContext.key;
+        const containsActiveCell = activeCell?.rowKey === rowKey;
+        const activeColumnKey = containsActiveCell ? activeCell.columnKey : undefined;
+        const isSelected = containsKey(selected.row, rowKey);
+        const rowProps = {
+            tableId,
+            columnsArray,
+            rowHeaderColumnKeys: getAccessibleRowHeaders(tableRowContext),
+            hasVerticalGridlines,
+            hasHorizontalGridlines,
+            hasFooters,
+            hasVerticalUnderflow,
+            hasMore,
+            isSelected,
+            isPreviousSelected,
+            disabledInteractionKeys,
+            onSelectionChange,
+            isRowSelectionEnabled,
+            isSingleRowSelectionEnabled,
+            variant: currentRowKey === rowKey ? currentRowVariant : 'none',
+            isShowFocusRing: isShowFocusRing && containsActiveCell,
+            activeColumnKey,
+            isTabbableMode,
+            selectedRowKeys: selected.row,
+            selectedColumnKeys: selected.column,
+            rowIndex: tableRowContext.index,
+            rowKey,
+            rowData: tableRowContext.data,
+            isFinalRow: tableRowContext.index === tableData.length - 1,
+            startStickyEdge,
+            endStickyEdge,
+            firstStickyColumnIndex: firstStickyColumnIndex,
+            finalStickyColumnIndex: finalStickyColumnIndex,
+            columnBorderEdges,
+            isRtl,
+            isHighContrast
+        };
+        isPreviousSelected = isSelected;
+        return jsx(MemoizeTableRow, { ...rowProps });
+    };
+    const getNoDataProps = () => {
+        const isActive = activeCell?.type === 'noData';
+        const hasTabIndex = isActive && !isTabbableMode;
+        return {
+            rootRef,
+            tableId,
+            columnsCount: columnsArray.length,
+            isShowFocusRing: isShowFocusRing && isActive,
+            hasTabIndex,
+            isTabbableMode,
+            ariaRowIndex: isValidRender ? 2 : 1,
+            renderer: isValidRender ? noDataRenderer : undefined
+        };
+    };
+    const isShowEmptyLoading = tableData.length === 0 && hasMore;
+    const isShowNoData = tableData.length === 0 && !hasMore;
+    return (jsx("tbody", { class: backgroundStyles.inherit, role: 'presentation', "data-oj-table-body": tableId, children: isShowNoData || !isValidRender ? (jsx(TableNoData, { ...getNoDataProps() })) : (jsxs(Fragment$1, { children: [jsx(LoadMoreCollection, { data: tableData, loadMoreIndicator: jsx(TableSkeletonRow, { tableId: tableId, hasTabIndex: isShowEmptyLoading
+                            ? activeCell?.type === 'loading'
+                            : activeCell?.type === 'loadMore', colspan: columnsArray.length, isLoadMore: !isShowEmptyLoading, isShowFocusRing: isShowFocusRing &&
+                            (isShowEmptyLoading
+                                ? activeCell?.type === 'loading'
+                                : activeCell?.type === 'loadMore'), isEmbedded: isEmbedded, isHighContrast: isHighContrast }), hasMore: hasMore, onLoadMore: onLoadMore, viewportConfig: viewportInfo.viewportConfig, children: collectionChildrenFunc }), jsx("tr", { style: browser !== 'firefox' ? 'height: 100%;' : undefined, role: 'presentation', "data-oj-table-spacer": tableId })] })) }));
+}
+
+/**
+ * The internal component used to render a drag indicator line in the Table.
+ */
+function TableDragIndicator({ position, isRtl, height }) {
+    const tableDragIndicatorClasses = classNames([tableDragIndicatorStyles.base]);
+    const getDragIndicatorStyle = () => {
+        const heightString = height != null ? `height:${height}px;` : '';
+        if (position != null) {
+            return isRtl
+                ? `right:${position}px;cursor:col-resize;${heightString}`
+                : `left:${position}px;cursor:col-resize;${heightString}`;
+        }
+        return `display:none;`;
+    };
+    return jsx("div", { class: tableDragIndicatorClasses, style: getDragIndicatorStyle() });
+}
+
+function _defaultFooterCellRenderer({ footerText }) {
+    return footerText != null ? footerText : undefined;
+}
+/**
+ * The internal component used to render a single cell in a TableFooterRow.
+ */
+function TableFooterCell({ tableId, columnKey, columnIndex, isFinalColumnIndex, isFirstLogicalColumnIndex, isFinalLogicalColumnIndex, hasVerticalGridlines, isSelected, isNextColumnSelected, isPreviousColumnSelected, isSticky, isColumnSelectable, isShowFocusRing, hasTabIndex, isTabbableMode, stickyBottomOffset = 0, focusTarget = 'cell', footerText, renderer = _defaultFooterCellRenderer, isStickyStartEdge, isStickyEndEdge, hasStartEdge, hasEndEdge, isActiveStyle, isHoverStyle, isPreviousCellActiveStyle, isPreviousCellHoverStyle, isRtl, isHighContrast, padding, tooltip, horizontalAlignment = 'start', verticalAlignment = 'center' }) {
+    const browser = getClientHints().browser;
+    const supportsDefaultTooltip = tooltip !== 'disabled';
+    const supportsAutoFocus = focusTarget === 'content';
+    const cellClasses = classNames(getHeaderFooterCellClassArray({
+        isHeader: false,
+        isActiveStyle,
+        isHoverStyle,
+        isPreviousCellActiveStyle,
+        isPreviousCellHoverStyle,
+        isFirstColumnIndex: columnIndex === 0 || isFirstLogicalColumnIndex,
+        isFinalColumnIndex: isFinalColumnIndex || isFinalLogicalColumnIndex,
+        hasVerticalGridlines,
+        isSelected,
+        isNextColumnSelected,
+        isPreviousColumnSelected,
+        isSticky,
+        hasStartEdge,
+        hasEndEdge,
+        isShowFocusRing,
+        isStickyStartEdge,
+        isStickyEndEdge,
+        isRtl,
+        horizontalAlignment,
+        verticalAlignment,
+        isHighContrast,
+        padding
+    }));
+    const footerCellRendererProps = {
+        key: columnKey,
+        footerText: footerText,
+        isTabbable: isTabbableMode
+    };
+    return (jsx("td", { "aria-colindex": columnIndex + 1, ...(isSelected
+            ? { 'aria-selected': true }
+            : isColumnSelectable
+                ? { 'aria-selected': false }
+                : {}), class: cellClasses, style: `bottom:${stickyBottomOffset}px;`, tabIndex: hasTabIndex ? 0 : -1, role: 'gridcell', "data-oj-cell-type": 'footer', "data-oj-column-key": columnKey, "data-oj-table-focusable": tableId, "data-oj-table-footer": tableId, "data-oj-table-tooltip": supportsDefaultTooltip ? 'enabled' : undefined, "data-oj-table-auto-focus": supportsAutoFocus ? 'enabled' : undefined, ...(supportsDefaultTooltip && browser === 'safari' ? preventBrowserTooltipProps : {}), children: jsx(FormContext.Provider, { value: { textAlign: getFormTextAlign(horizontalAlignment, isRtl) }, children: renderer(footerCellRendererProps) }) }));
+}
+
+/**
+ * The internal component used to render a footer region in Table.
+ */
+function TableFooter({ tableId, isRendered, columnsArray, hasVerticalGridlines, activeKey, isTabbableMode, isShowFocusRing, selectedColumnKeys, isColumnSelectionEnabled, activeStyleKey, hoverStyleKey, stickyBottomOffset, startStickyEdge, endStickyEdge, firstStickyColumnIndex, finalStickyColumnIndex, columnBorderEdges, dataRowCount, isRtl, isHighContrast }) {
+    const rowClasses = classNames([tableFooterRowStyles.base]);
+    let previousColumnKey;
+    let previousStickyColumnKey;
+    let isPreviousSelectable = false;
+    let isPreviousStickySelectable = false;
+    let isPreviousColumnSelected = false;
+    let isPreviousStickyColumnSelected = false;
+    return isRendered ? (jsx("tfoot", { class: backgroundStyles.inherit, role: 'presentation', children: jsx("tr", { "aria-rowindex": Math.max(dataRowCount, 1) + 2, class: rowClasses, role: 'row', "data-oj-table-footer-row": tableId, children: columnsArray.map((column, columnIndex) => {
+                const columnKey = column.key;
+                const isSticky = column.value.sticky === 'enabled';
+                const isSelectable = isColumnSelectionEnabled && column.value.selectable !== 'disabled';
+                const isSelected = containsKey(selectedColumnKeys, columnKey);
+                const isActive = columnKey === activeKey;
+                const hasTabIndex = isActive && !isTabbableMode;
+                let previousVisibleColumnKey;
+                let isPreviousVisibleColumnSelectable = false;
+                let isPreviousVisibleColumnSelected = false;
+                let nextVisibleColumn;
+                let isNextVisibleColumnSelected = false;
+                let isFirstLogicalColumnIndex = false;
+                let isFinalLogicalColumnIndex = false;
+                if (isSticky) {
+                    if (startStickyEdge != null && firstStickyColumnIndex === columnIndex) {
+                        isFirstLogicalColumnIndex = true;
+                    }
+                    if (endStickyEdge != null && finalStickyColumnIndex === columnIndex) {
+                        isFinalLogicalColumnIndex = true;
+                    }
+                    if ((startStickyEdge != null && startStickyEdge > columnIndex) ||
+                        (endStickyEdge != null && endStickyEdge <= columnIndex)) {
+                        for (let i = columnIndex + 1; i < columnsArray.length; i++) {
+                            if (columnsArray[i].value.sticky === 'enabled') {
+                                nextVisibleColumn = columnsArray[i];
+                                break;
+                            }
+                        }
+                    }
+                    else {
+                        nextVisibleColumn =
+                            columnIndex < columnsArray.length - 1 ? columnsArray[columnIndex + 1] : undefined;
+                    }
+                    isNextVisibleColumnSelected =
+                        startStickyEdge === columnIndex
+                            ? false
+                            : nextVisibleColumn != null &&
+                                containsKey(selectedColumnKeys, nextVisibleColumn.key);
+                    if ((startStickyEdge != null && startStickyEdge >= columnIndex) ||
+                        (endStickyEdge != null && endStickyEdge < columnIndex)) {
+                        previousVisibleColumnKey = previousStickyColumnKey;
+                        isPreviousVisibleColumnSelectable = isPreviousStickySelectable;
+                        isPreviousVisibleColumnSelected = isPreviousStickyColumnSelected;
+                    }
+                    else if (endStickyEdge !== columnIndex) {
+                        previousVisibleColumnKey = previousColumnKey;
+                        isPreviousVisibleColumnSelectable = isPreviousSelectable;
+                        isPreviousVisibleColumnSelected = isPreviousColumnSelected;
+                    }
+                }
+                else {
+                    previousVisibleColumnKey = previousColumnKey;
+                    isPreviousVisibleColumnSelectable = isPreviousSelectable;
+                    isPreviousVisibleColumnSelected = isPreviousColumnSelected;
+                }
+                const footerCellProps = {
+                    tableId: tableId,
+                    columnKey: columnKey,
+                    columnIndex: columnIndex,
+                    isFinalColumnIndex: columnIndex === columnsArray.length - 1,
+                    isFirstLogicalColumnIndex: isFirstLogicalColumnIndex,
+                    isFinalLogicalColumnIndex: isFinalLogicalColumnIndex,
+                    hasVerticalGridlines: hasVerticalGridlines,
+                    stickyBottomOffset: stickyBottomOffset,
+                    isSticky: isSticky,
+                    isSelected: isSelected,
+                    isNextColumnSelected: isNextVisibleColumnSelected,
+                    isPreviousColumnSelected: isPreviousVisibleColumnSelected,
+                    hasStartEdge: columnBorderEdges[columnIndex].hasStart,
+                    hasEndEdge: columnBorderEdges[columnIndex].hasEnd,
+                    isColumnSelectable: isSelectable,
+                    isShowFocusRing: isShowFocusRing && isActive,
+                    hasTabIndex: hasTabIndex,
+                    isTabbableMode: isTabbableMode,
+                    footerText: column.value.footerText,
+                    renderer: column.value.footerRenderer,
+                    isStickyStartEdge: columnIndex === startStickyEdge,
+                    isStickyEndEdge: columnIndex === endStickyEdge,
+                    isActiveStyle: isSelectable && activeStyleKey === columnKey,
+                    isHoverStyle: isSelectable && hoverStyleKey === columnKey,
+                    isPreviousCellActiveStyle: activeStyleKey != null &&
+                        activeStyleKey === previousVisibleColumnKey &&
+                        isPreviousVisibleColumnSelectable,
+                    isPreviousCellHoverStyle: hoverStyleKey != null &&
+                        hoverStyleKey === previousVisibleColumnKey &&
+                        isPreviousVisibleColumnSelectable,
+                    isRtl: isRtl,
+                    isHighContrast: isHighContrast,
+                    padding: column.value.footerPadding,
+                    tooltip: column.value.footerTooltip,
+                    focusTarget: column.value.footerFocusTarget,
+                    horizontalAlignment: column.value.footerAlignment?.horizontal != null
+                        ? column.value.footerAlignment.horizontal
+                        : column.value.horizontalAlignment,
+                    verticalAlignment: column.value.footerAlignment?.vertical
+                };
+                previousColumnKey = columnKey;
+                isPreviousSelectable = isSelectable;
+                isPreviousColumnSelected = isSelected;
+                if (isSticky) {
+                    previousStickyColumnKey = columnKey;
+                    isPreviousStickySelectable = isSelectable;
+                    isPreviousStickyColumnSelected = isSelected;
+                }
+                return jsx(TableFooterCell, { ...footerCellProps });
+            }) }) })) : null;
+}
+
+/**
+ * The internal component used to render a single cell in a TableHeaderRow.
+ */
+function TableHeaderCell({ tableId, columnKey, columnIndex, isFinalColumnIndex, isFirstLogicalColumnIndex, isFinalLogicalColumnIndex, hasVerticalGridlines, isSelected, isNextColumnSelected, isPreviousColumnSelected, isSticky, isColumnSelectable, isRowSelectionEnabled, selectedRowKeys = { all: false, keys: new Set() }, isShowFocusRing, hasTabIndex, isTabbableMode, headerText, stickyTopOffset = 0, focusTarget = 'cell', renderer, onSelectionChange, isShowSortIcon, sortable = 'disabled', sortDirection = 'unsorted', onSortCriterionChange, isStickyStartEdge, isStickyEndEdge, hasStartEdge, hasEndEdge, isActiveStyle, isHoverStyle, isPreviousCellActiveStyle, isPreviousCellHoverStyle, isRtl, isAccColumnHeader, isHighContrast, padding, tooltip, horizontalAlignment = 'start', verticalAlignment = 'center' }) {
+    const browser = getClientHints().browser;
+    const supportsDefaultTooltip = tooltip !== 'disabled';
+    const supportsAutoFocus = focusTarget === 'content';
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const cellClasses = classNames(getHeaderFooterCellClassArray({
+        isHeader: true,
+        isActiveStyle,
+        isHoverStyle,
+        isPreviousCellActiveStyle,
+        isPreviousCellHoverStyle,
+        isFirstColumnIndex: columnIndex === 0 || isFirstLogicalColumnIndex,
+        isFinalColumnIndex: isFinalColumnIndex || isFinalLogicalColumnIndex,
+        hasVerticalGridlines,
+        isSelected,
+        isNextColumnSelected,
+        isPreviousColumnSelected,
+        isSticky,
+        isShowFocusRing,
+        isStickyStartEdge,
+        isStickyEndEdge,
+        hasStartEdge,
+        hasEndEdge,
+        isRtl,
+        horizontalAlignment,
+        verticalAlignment,
+        isHighContrast,
+        padding
+    }));
+    let selectorAllState;
+    if (isSameKey(selectedRowKeys, { all: true, deletedKeys: new Set() })) {
+        selectorAllState = 'all';
+    }
+    else if (isSameKey(selectedRowKeys, { all: false, keys: new Set() })) {
+        selectorAllState = 'none';
+    }
+    else {
+        selectorAllState = 'partial';
+    }
+    const handleSelectorChange = (detail) => {
+        if (onSelectionChange != null) {
+            onSelectionChange({
+                value: {
+                    row: detail.value,
+                    column: { all: false, keys: new Set() }
+                },
+                target: detail.target
+            }, false);
+        }
+    };
+    const selectorRenderer = isRowSelectionEnabled
+        ? () => (jsx(SelectorAll, { "aria-label": translations.collection_selectAllRows(), onChange: handleSelectorChange, selected: selectorAllState }))
+        : undefined;
+    const handleSortGesture = useCallback(() => {
+        if (onSortCriterionChange != null) {
+            const newDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
+            onSortCriterionChange([{ key: columnKey, sortDirection: newDirection }]);
+        }
+    }, [columnKey, sortDirection, onSortCriterionChange]);
+    const headerCellRendererProps = {
+        key: columnKey,
+        headerText: headerText,
+        sortable: sortable,
+        sortDirection: sortDirection,
+        selector: selectorRenderer,
+        isTabbable: isTabbableMode
+    };
+    const getHeaderCellRenderer = useCallback(() => {
+        if (renderer != null) {
+            return renderer;
+        }
+        return ({ headerText, sortable, sortDirection }) => {
+            const text = headerText != null ? (jsx("div", { class: tableHeaderCellTextStyles.base, children: jsx("span", { class: tableHeaderCellStyles.defaultRendererSpan, children: headerText }) })) : undefined;
+            if (sortable === 'enabled' || sortDirection !== 'unsorted') {
+                const isIconFirst = horizontalAlignment === 'end' ||
+                    (!isRtl && horizontalAlignment === 'right') ||
+                    (isRtl && horizontalAlignment === 'left');
+                const containerClasses = classNames([
+                    tableHeaderSortContainerStyles.base,
+                    justifyContentStyles[horizontalAlignment]
+                ]);
+                return (jsxs("div", { class: containerClasses, children: [isIconFirst && jsx(SortControl, {}), text, !isIconFirst && jsx(SortControl, {})] }));
+            }
+            return text;
+        };
+    }, [renderer, horizontalAlignment, isRtl]);
+    const getAriaSelected = () => {
+        if (isSelected) {
+            return { 'aria-selected': true };
+        }
+        return isColumnSelectable ? { 'aria-selected': false } : undefined;
+    };
+    const getAriaSort = () => {
+        if (sortDirection === 'ascending' || sortDirection === 'descending') {
+            return { 'aria-sort': sortDirection };
+        }
+        return undefined;
+    };
+    return (jsx(SortableContext.Provider, { value: { isRendered: isShowSortIcon, sortable, sortDirection, onSort: handleSortGesture }, children: jsx("th", { "aria-colindex": columnIndex + 1, ...getAriaSelected(), ...getAriaSort(), class: cellClasses, style: `top:${stickyTopOffset}px;`, tabIndex: hasTabIndex ? 0 : -1, role: isAccColumnHeader ? 'columnheader' : 'gridcell', "data-oj-cell-type": 'header', "data-oj-column-key": columnKey, "data-oj-table-focusable": tableId, "data-oj-table-header": tableId, "data-oj-table-tooltip": supportsDefaultTooltip ? 'enabled' : undefined, "data-oj-table-auto-focus": supportsAutoFocus ? 'enabled' : undefined, ...(supportsDefaultTooltip && browser === 'safari' ? preventBrowserTooltipProps : {}), children: jsx(FormContext.Provider, { value: { textAlign: getFormTextAlign(horizontalAlignment, isRtl) }, children: getHeaderCellRenderer()(headerCellRendererProps) }) }) }));
+}
+
+/**
+ * The internal component used to render a header region in Table.
+ */
+function TableHeader({ tableId, isRendered, columnsArray, hasVerticalGridlines, activeKey, isTabbableMode, isShowFocusRing, selectedColumnKeys, selectedRowKeys, isColumnSelectionEnabled, isRowSelectionEnabled, onSelectionChange, isForceSortIcons, activeStyleKey, hoverStyleKey, sortCriterion, onSortCriterionChange, stickyTopOffset, startStickyEdge, endStickyEdge, firstStickyColumnIndex, finalStickyColumnIndex, columnBorderEdges, isResizeHover, isRtl, isHighContrast }) {
+    const rowClasses = classNames([tableHeaderRowStyles.base]);
+    const getStyle = () => {
+        return isResizeHover ? 'cursor: col-resize;' : '';
+    };
+    let previousColumnKey;
+    let previousStickyColumnKey;
+    let isPreviousSelectable = false;
+    let isPreviousStickySelectable = false;
+    let isPreviousColumnSelected = false;
+    let isPreviousStickyColumnSelected = false;
+    return isRendered ? (jsx("thead", { class: backgroundStyles.inherit, role: 'presentation', children: jsx("tr", { "aria-rowindex": 1, class: rowClasses, role: 'row', style: getStyle(), "data-oj-table-header-row": tableId, children: columnsArray.map((column, columnIndex) => {
+                const columnKey = column.key;
+                let sortDirection;
+                if (sortCriterion != null) {
+                    for (const criterion of sortCriterion) {
+                        if (criterion.key === columnKey) {
+                            sortDirection = criterion.sortDirection;
+                            break;
+                        }
+                    }
+                }
+                const sortable = column.value.sortable;
+                const hasSortIcon = sortable === 'enabled' || sortDirection != null;
+                const isShowSortIcon = hasSortIcon &&
+                    (isForceSortIcons || sortDirection != null || hoverStyleKey === columnKey);
+                const isSticky = column.value.sticky === 'enabled';
+                const isSelectable = isColumnSelectionEnabled && column.value.selectable !== 'disabled';
+                const isSelected = containsKey(selectedColumnKeys, columnKey);
+                const isActive = columnKey === activeKey;
+                const hasTabIndex = isActive && !isTabbableMode;
+                let previousVisibleColumnKey;
+                let isPreviousVisibleColumnSelectable = false;
+                let isPreviousVisibleColumnSelected = false;
+                let nextVisibleColumn;
+                let isNextVisibleColumnSelected = false;
+                let isFirstLogicalColumnIndex = false;
+                let isFinalLogicalColumnIndex = false;
+                if (isSticky) {
+                    if (startStickyEdge != null && firstStickyColumnIndex === columnIndex) {
+                        isFirstLogicalColumnIndex = true;
+                    }
+                    if (endStickyEdge != null && finalStickyColumnIndex === columnIndex) {
+                        isFinalLogicalColumnIndex = true;
+                    }
+                    if ((startStickyEdge != null && startStickyEdge > columnIndex) ||
+                        (endStickyEdge != null && endStickyEdge <= columnIndex)) {
+                        for (let i = columnIndex + 1; i < columnsArray.length; i++) {
+                            if (columnsArray[i].value.sticky === 'enabled') {
+                                nextVisibleColumn = columnsArray[i];
+                                break;
+                            }
+                        }
+                    }
+                    else {
+                        nextVisibleColumn =
+                            columnIndex < columnsArray.length - 1 ? columnsArray[columnIndex + 1] : undefined;
+                    }
+                    isNextVisibleColumnSelected =
+                        startStickyEdge === columnIndex
+                            ? false
+                            : nextVisibleColumn != null &&
+                                containsKey(selectedColumnKeys, nextVisibleColumn.key);
+                    if ((startStickyEdge != null && startStickyEdge >= columnIndex) ||
+                        (endStickyEdge != null && endStickyEdge < columnIndex)) {
+                        previousVisibleColumnKey = previousStickyColumnKey;
+                        isPreviousVisibleColumnSelectable = isPreviousStickySelectable;
+                        isPreviousVisibleColumnSelected = isPreviousStickyColumnSelected;
+                    }
+                    else if (endStickyEdge !== columnIndex) {
+                        previousVisibleColumnKey = previousColumnKey;
+                        isPreviousVisibleColumnSelectable = isPreviousSelectable;
+                        isPreviousVisibleColumnSelected = isPreviousColumnSelected;
+                    }
+                }
+                else {
+                    previousVisibleColumnKey = previousColumnKey;
+                    isPreviousVisibleColumnSelectable = isPreviousSelectable;
+                    isPreviousVisibleColumnSelected = isPreviousColumnSelected;
+                }
+                const headerCellProps = {
+                    tableId: tableId,
+                    hasVerticalGridlines: hasVerticalGridlines,
+                    columnKey: columnKey,
+                    columnIndex: columnIndex,
+                    isFinalColumnIndex: columnIndex === columnsArray.length - 1,
+                    isFirstLogicalColumnIndex: isFirstLogicalColumnIndex,
+                    isFinalLogicalColumnIndex: isFinalLogicalColumnIndex,
+                    stickyTopOffset: stickyTopOffset,
+                    isSticky: isSticky,
+                    isSelected: isSelected,
+                    isNextColumnSelected: isNextVisibleColumnSelected,
+                    isPreviousColumnSelected: isPreviousVisibleColumnSelected,
+                    hasStartEdge: columnBorderEdges[columnIndex].hasStart,
+                    hasEndEdge: columnBorderEdges[columnIndex].hasEnd,
+                    selectedRowKeys: selectedRowKeys,
+                    isColumnSelectable: isSelectable,
+                    isRowSelectionEnabled: isRowSelectionEnabled,
+                    isShowFocusRing: isShowFocusRing && isActive,
+                    hasTabIndex: hasTabIndex,
+                    isTabbableMode: isTabbableMode,
+                    headerText: column.value.headerText,
+                    renderer: column.value.headerRenderer,
+                    onSelectionChange: onSelectionChange,
+                    isShowSortIcon: isShowSortIcon,
+                    sortable: sortable,
+                    sortDirection: sortDirection,
+                    onSortCriterionChange: onSortCriterionChange,
+                    isStickyStartEdge: columnIndex === startStickyEdge,
+                    isStickyEndEdge: columnIndex === endStickyEdge,
+                    isActiveStyle: isSelectable && activeStyleKey === columnKey,
+                    isHoverStyle: isSelectable && hoverStyleKey === columnKey,
+                    isPreviousCellActiveStyle: activeStyleKey != null &&
+                        activeStyleKey === previousVisibleColumnKey &&
+                        isPreviousVisibleColumnSelectable,
+                    isPreviousCellHoverStyle: hoverStyleKey != null &&
+                        hoverStyleKey === previousVisibleColumnKey &&
+                        isPreviousVisibleColumnSelectable,
+                    isRtl: isRtl,
+                    isAccColumnHeader: column.value.accessibleColumnHeader !== 'disabled',
+                    isHighContrast: isHighContrast,
+                    padding: column.value.headerPadding,
+                    tooltip: column.value.headerTooltip,
+                    focusTarget: column.value.headerFocusTarget,
+                    horizontalAlignment: column.value.headerAlignment?.horizontal != null
+                        ? column.value.headerAlignment.horizontal
+                        : column.value.horizontalAlignment,
+                    verticalAlignment: column.value.headerAlignment?.vertical
+                };
+                previousColumnKey = columnKey;
+                isPreviousSelectable = isSelectable;
+                isPreviousColumnSelected = isSelected;
+                if (isSticky) {
+                    previousStickyColumnKey = columnKey;
+                    isPreviousStickySelectable = isSelectable;
+                    isPreviousStickyColumnSelected = isSelected;
+                }
+                return jsx(TableHeaderCell, { ...headerCellProps });
+            }) }) })) : null;
+}
+
+const _defaultSelected = {
+    row: { all: false, keys: new Set() },
+    column: { all: false, keys: new Set() }
+};
+const _disabledHeaderFooterInteractionKeys = ['enter'];
+/**
+ * Component that renders data in a flat table.
+ */
+const Table = forwardRef(function Table({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, getAccessibleRowHeaders, columns, columnOrder, columnWidths, contextMenuConfig, viewportConfig, layout = 'contents', data, getRowKey, hasMore = false, onLoadMore = () => { }, currentCellOverride, onPersistCurrentCell, currentRowVariant, gridlines, selectionMode, selected = _defaultSelected, onSelectionChange, onRowAction, sortCriterion, onSortCriterionChange, horizontalScrollPositionOverride, verticalScrollPositionOverride, columnResizingIndicator, onColumnResizing, onColumnResize, noDataRenderer, scrollerRef, testId }, ref) {
+    const tableId = useId();
+    const testIdProps = useTestId(testId);
+    // rootRef is callback-based to meet useResizeObserver hook's state management requirements
+    const [rootRef, setRootRef] = useState(createRef());
+    const rootRefCallback = useCallback((node) => {
+        setRootRef({ current: node });
+    }, []);
+    // innerTableRef is callback-based to meet useResizeObserver hook's state management requirements
+    const [innerTableRef, setInnerTableRef] = useState(createRef());
+    const innerTableRefCallback = useCallback((node) => {
+        setInnerTableRef({ current: node });
+    }, []);
+    const { direction, forcedColors } = useUser();
+    const isHighContrast = forcedColors === 'active';
+    const isRtl = direction === 'rtl';
+    const isEmbedded = useCollectionInteractionContext() === 'embedded';
+    const rowVariant = currentRowVariant ?? isEmbedded ? 'highlight' : 'none';
+    const { managedData: tableData, onManagedLoadMore: onTableLoadMore } = useDataManager({
+        data,
+        getRowKey,
+        hasMore,
+        onLoadMore
+    });
+    const { columnBorderEdges, isLayoutRequired, viewportInfo, columnsArray, appliedColumnWidths, sizingInfoRef, overflowInfoRef, innerTableHeight, hasVerticalUnderflow, stickyEdgesState, setStickyEdgesState, stickyColumnInfo, scrollerRefCallback } = useSizingManager({
+        rootRef,
+        innerTableRef,
+        tableId,
+        tableData,
+        viewportConfig,
+        externalScrollerAccessRef: scrollerRef,
+        layout,
+        columns,
+        columnOrder,
+        columnWidths,
+        isRtl,
+        isHighContrast
+    });
+    const cellHasRenderer = useCallback((cell) => {
+        let hasRenderer = false;
+        if (cell.type === 'noData') {
+            hasRenderer = noDataRenderer != null;
+        }
+        else if (cell.type !== 'loadMore' && cell.type !== 'loading' && cell.type !== 'pending') {
+            for (const column of columnsArray) {
+                if (column.key === cell.columnKey) {
+                    if (cell.type === 'data') {
+                        hasRenderer = column.value.renderer != null;
+                    }
+                    else if (cell.type === 'header') {
+                        hasRenderer = column.value.headerRenderer != null;
+                    }
+                    else if (cell.type === 'footer') {
+                        hasRenderer = column.value.footerRenderer != null;
+                    }
+                    break;
+                }
+            }
+        }
+        return hasRenderer;
+    }, [columnsArray, noDataRenderer]);
+    const isPendingLayout = layout === 'pending';
+    // aria-rowcount includes header and footer rows
+    const hasFooters = columnsArray.some((column) => {
+        return column.value.footerRenderer != null || column.value.footerText != null;
+    });
+    const ariaRowCount = hasMore || isPendingLayout ? -1 : tableData.length + (hasFooters ? 2 : 1);
+    const ariaColumnCount = Math.max(columnsArray.length, 1);
+    const { interactionManagerProps, scrollHandlingProps, onTableSelectionChange, isShowFocusRing, isTabbableMode, currentCell, currentActiveCell, resizeInfoRef, onStartFocusTracking, onFocusStartEdge, onFocusEndEdge, activeStyleColumnInfo, hoverStyleColumnInfo, tooltipContent, contextMenuContext, menuProps, isResizeDialogOpen, setIsResizeDialogOpen, disabledRowInteractionKeys } = useInteractionManager({
+        rootRef,
+        viewportInfo,
+        ref,
+        tableId,
+        tableData,
+        hasMore,
+        hasFooters,
+        isRtl,
+        columnsArray,
+        stickyColumnInfo,
+        appliedColumnWidths,
+        isLayoutRequired,
+        sizingInfoRef,
+        overflowInfoRef,
+        stickyEdgesState,
+        setStickyEdgesState,
+        cellHasRenderer,
+        horizontalScrollPositionOverride,
+        verticalScrollPositionOverride,
+        onColumnResizing,
+        onColumnResize,
+        currentCellOverride,
+        onPersistCurrentCell,
+        selectionMode,
+        selected,
+        onSelectionChange,
+        onRowAction,
+        sortCriterion,
+        onSortCriterionChange,
+        isPendingLayout,
+        isEmbedded,
+        contextMenuConfig
+    });
+    // initialize base Table style classes
+    const { classes: themeClasses } = useComponentTheme(TableRedwoodTheme, {
+        pendingLayout: isPendingLayout ? 'isPendingLayout' : 'notPendingLayout',
+        showFocusRing: isShowFocusRing ? 'isShowFocusRing' : 'notShowFocusRing',
+        externalScroller: viewportInfo.isExternalScroller ? 'isExternalScroller' : 'notExternalScroller'
+    });
+    let scrollerStyle;
+    let scrollerPadding = '';
+    const scrollerClassArray = [scrollerStyles.base];
+    if (viewportInfo.isExternalScroller) {
+        scrollerClassArray.push(scrollerStyles.externalScroller);
+    }
+    else if (!sizingInfoRef.current.isScrollbarSizeKnown) {
+        scrollerClassArray.push(scrollerStyles.forceScroll);
+    }
+    else {
+        if (overflowInfoRef.current.isHorizontal) {
+            scrollerClassArray.push(scrollerStyles.horizontalScroll);
+        }
+        else {
+            scrollerClassArray.push(scrollerStyles.noHorizontalScroll);
+        }
+        if (overflowInfoRef.current.isVertical) {
+            scrollerClassArray.push(scrollerStyles.verticalScroll);
+        }
+        else {
+            scrollerClassArray.push(scrollerStyles.noVerticalScroll);
+            scrollerPadding = `padding-inline-end: ${sizingInfoRef.current.defaultScrollbarWidth}px;`;
+        }
+    }
+    // hide the table contents when layout is required and otherwise valid
+    if (isLayoutRequired && columnsArray.length > 0) {
+        scrollerStyle = `${scrollerPadding}opacity:0.001;`;
+    }
+    else {
+        scrollerStyle = scrollerPadding;
+    }
+    const scrollerClasses = classNames(scrollerClassArray);
+    const allowBrowserContextMenu = !(getClientHints().platform === 'ios' || getClientHints().platform === 'android');
+    const classArray = [themeClasses];
+    if (!allowBrowserContextMenu) {
+        classArray.push(userSelectStyles.userSelect);
+    }
+    const classes = classNames(classArray);
+    const tableClasses = classNames([innerTableStyles.base]);
+    const startStickyEdge = stickyEdgesState.start;
+    const endStickyEdge = stickyEdgesState.end;
+    const hasVerticalGridlines = gridlines?.vertical === 'visible';
+    const hasHorizontalGridlines = gridlines?.horizontal !== 'hidden';
+    const isRowSelectionEnabled = selectionMode?.row === 'single' ||
+        selectionMode?.row === 'multiple' ||
+        selectionMode?.row === 'multipleToggle';
+    const isColumnSelectionEnabled = selectionMode?.column === 'single' || selectionMode?.column === 'multiple';
+    const supportsMultipleSelection = selectionMode?.column === 'multiple' ||
+        selectionMode?.row === 'multiple' ||
+        selectionMode?.row === 'multipleToggle';
+    const getTableBodyProps = () => {
+        return {
+            rootRef,
+            viewportInfo,
+            tableId,
+            isValidRender: columnsArray.length > 0,
+            tableData,
+            columnsArray,
+            getAccessibleRowHeaders,
+            hasVerticalGridlines,
+            hasHorizontalGridlines,
+            hasFooters,
+            hasVerticalUnderflow,
+            selected,
+            isRowSelectionEnabled,
+            isSingleRowSelectionEnabled: selectionMode?.row === 'single',
+            activeCell: currentActiveCell,
+            currentRowKey: currentCell?.type === 'data' ? currentCell.rowKey : undefined,
+            currentRowVariant: rowVariant,
+            isShowFocusRing,
+            isTabbableMode,
+            hasMore,
+            onLoadMore: onTableLoadMore,
+            noDataRenderer,
+            disabledInteractionKeys: disabledRowInteractionKeys,
+            onSelectionChange: onTableSelectionChange,
+            startStickyEdge,
+            endStickyEdge,
+            firstStickyColumnIndex: stickyColumnInfo.firstStickyColumnIndex,
+            finalStickyColumnIndex: stickyColumnInfo.finalStickyColumnIndex,
+            columnBorderEdges,
+            isRtl,
+            isEmbedded,
+            isHighContrast
+        };
+    };
+    const getTableColGroupProps = () => {
+        let columnWidthsArray;
+        if (!isLayoutRequired && appliedColumnWidths?.realColumnWidths != null) {
+            columnWidthsArray = appliedColumnWidths.realColumnWidths;
+        }
+        else if (layout === 'fixed') {
+            // default to 100px for each column when layout is not yet available
+            columnWidthsArray = [];
+            for (let i = 0; i < columnsArray.length; i++) {
+                columnWidthsArray[i] = 100;
+            }
+        }
+        else {
+            columnWidthsArray = [];
+            for (let i = 0; i < columnsArray.length; i++) {
+                columnWidthsArray[i] = undefined;
+            }
+        }
+        return {
+            tableId,
+            isRendered: columnsArray.length > 0,
+            columnWidthsArray
+        };
+    };
+    const getTableHeaderProps = () => {
+        return {
+            tableId,
+            isRendered: columnsArray.length > 0,
+            columnsArray,
+            hasVerticalGridlines,
+            activeKey: currentActiveCell?.type === 'header' ? currentActiveCell.columnKey : undefined,
+            isTabbableMode,
+            selectedColumnKeys: selected.column,
+            selectedRowKeys: selected.row,
+            isColumnSelectionEnabled,
+            isRowSelectionEnabled,
+            disabledInteractionKeys: _disabledHeaderFooterInteractionKeys,
+            onSelectionChange: onTableSelectionChange,
+            isForceSortIcons: layout === 'contents' && isLayoutRequired,
+            activeStyleKey: activeStyleColumnInfo?.isHeader ? activeStyleColumnInfo?.key : undefined,
+            hoverStyleKey: hoverStyleColumnInfo?.isHeader ? hoverStyleColumnInfo?.key : undefined,
+            sortCriterion,
+            onSortCriterionChange,
+            isShowFocusRing,
+            stickyTopOffset: viewportInfo.viewportConfig.scrollerOffsetTop,
+            startStickyEdge,
+            endStickyEdge,
+            firstStickyColumnIndex: stickyColumnInfo.firstStickyColumnIndex,
+            finalStickyColumnIndex: stickyColumnInfo.finalStickyColumnIndex,
+            columnBorderEdges,
+            isResizeHover: resizeInfoRef.current.isResizeHover,
+            isRtl,
+            isHighContrast
+        };
+    };
+    const getTableFooterProps = () => {
+        return {
+            tableId,
+            isRendered: hasFooters,
+            columnsArray,
+            hasVerticalGridlines,
+            activeKey: currentActiveCell?.type === 'footer' ? currentActiveCell.columnKey : undefined,
+            isTabbableMode,
+            selectedColumnKeys: selected.column,
+            isColumnSelectionEnabled,
+            activeStyleKey: !activeStyleColumnInfo?.isHeader ? activeStyleColumnInfo?.key : undefined,
+            hoverStyleKey: !hoverStyleColumnInfo?.isHeader ? hoverStyleColumnInfo?.key : undefined,
+            isShowFocusRing,
+            disabledInteractionKeys: _disabledHeaderFooterInteractionKeys,
+            stickyBottomOffset: viewportInfo.viewportConfig.scrollerOffsetBottom,
+            startStickyEdge,
+            endStickyEdge,
+            firstStickyColumnIndex: stickyColumnInfo.firstStickyColumnIndex,
+            finalStickyColumnIndex: stickyColumnInfo.finalStickyColumnIndex,
+            columnBorderEdges,
+            dataRowCount: tableData.length,
+            isRtl,
+            isHighContrast
+        };
+    };
+    const getTableDragIndicator = () => {
+        if (columnResizingIndicator != null &&
+            !isLayoutRequired &&
+            appliedColumnWidths?.fullColumnWidths != null) {
+            let position = 0;
+            for (let i = 0; i < columnsArray.length; i++) {
+                position += appliedColumnWidths.fullColumnWidths[i];
+                if (columnsArray[i].key === columnResizingIndicator.key) {
+                    if (columnResizingIndicator.delta != null) {
+                        position += columnResizingIndicator.delta;
+                    }
+                    break;
+                }
+            }
+            return jsx(TableDragIndicator, { position: position, isRtl: isRtl, height: innerTableHeight });
+        }
+        return undefined;
+    };
+    const getTableStyle = () => {
+        if (!isLayoutRequired && appliedColumnWidths?.realColumnWidths != null) {
+            let totalWidth = 0;
+            for (let i = 0; i < appliedColumnWidths.realColumnWidths.length; i++) {
+                totalWidth += appliedColumnWidths.realColumnWidths[i];
+            }
+            return `width:${totalWidth}px;table-layout:fixed;`;
+        }
+        else if (columnsArray.length > 0) {
+            if (layout === 'fixed') {
+                // default to 100px for each column when layout is not yet available
+                return `width:${columnsArray.length * 100}px;table-layout:fixed;`;
+            }
+            else {
+                // shrink table down as much as possible when a 'contents' layout is required, otherwise
+                // the sampled column widths will not reflect the true weight sizes with line-clamping
+                return 'width:max-content;will-change:width;';
+            }
+        }
+        // no columns are present
+        return 'width:100%;';
+    };
+    const skeletonStyles = isHighContrast ? tableSkeletonStylesHC : tableSkeletonStyles;
+    const getPendingLayoutSkeletons = () => {
+        return isPendingLayout ? (jsx("div", { class: skeletonStyles.pendingLayout, children: jsx("table", { role: 'presentation', style: 'width:100%;table-layout:fixed;', children: jsx("tbody", { role: 'presentation', children: jsx(TableSkeletonRow, { tableId: tableId, hasTabIndex: currentActiveCell?.type === 'pending', colspan: ariaColumnCount, isPendingLayout: true, isShowFocusRing: false, isEmbedded: isEmbedded, isHighContrast: isHighContrast }) }) }) })) : undefined;
+    };
+    const ariaMultiSelectableProps = supportsMultipleSelection
+        ? { 'aria-multiselectable': true }
+        : isRowSelectionEnabled || isColumnSelectionEnabled
+            ? { 'aria-multiselectable': false }
+            : {};
+    return (jsxs(Fragment, { children: [jsxs("div", { ...testIdProps, ref: rootRefCallback, "aria-colcount": ariaColumnCount, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-rowcount": ariaRowCount, ...ariaMultiSelectableProps, class: classes, id: tableId, role: 'grid', tabIndex: currentActiveCell != null ? -1 : 0, ...interactionManagerProps, children: [jsxs("div", { ref: scrollerRefCallback, class: scrollerClasses, role: 'rowgroup', style: scrollerStyle, tabIndex: -1, ...scrollHandlingProps, children: [jsxs(FocusTracker, { isDisabled: !isTabbableMode, onFocusStartEdge: onFocusStartEdge, onFocusEndEdge: onFocusEndEdge, onStartTracking: onStartFocusTracking, children: [jsx(TabbableModeContext.Provider, { value: { isTabbable: isTabbableMode }, children: jsxs("table", { ref: innerTableRefCallback, "aria-hidden": isPendingLayout ? true : undefined, class: tableClasses, role: 'presentation', style: getTableStyle(), "data-oj-table-inner-table": tableId, children: [jsx(TableColGroup, { ...getTableColGroupProps() }), jsx(TableHeader, { ...getTableHeaderProps() }), jsx(TableBody, { ...getTableBodyProps() }), jsx(TableFooter, { ...getTableFooterProps() })] }) }), getTableDragIndicator()] }), tooltipContent] }), getPendingLayoutSkeletons()] }), contextMenuConfig != null && contextMenuContext != null && (jsxs(Fragment, { children: [jsx(TableContextMenu, { ...menuProps, contextMenuConfig: contextMenuConfig, contextMenuContext: contextMenuContext }), isResizeDialogOpen &&
+                        currentActiveCell?.columnKey != null &&
+                        appliedColumnWidths != null ? (jsx(TableResizeColumnDialog, { isOpen: isResizeDialogOpen, columnKey: currentActiveCell.columnKey, appliedColumnWidths: appliedColumnWidths, onColumnResize: onColumnResize, setIsResizeDialogOpen: setIsResizeDialogOpen })) : undefined] }))] }));
+});
+
+export { Table as T };
+//# sourceMappingURL=Table-535987d0.js.map