@oracle/oraclejet-preact 20.0.4 → 20.1.0

package/cjs/Table-a102e1ee.js

@@ -1,4114 +0,0 @@
-/* @oracle/oraclejet-preact: undefined */
-'use strict';
-
-var jsxRuntime = require('preact/jsx-runtime');
-var preact = require('preact');
-var compat = require('preact/compat');
-var hooks = require('preact/hooks');
-require('./CollectionInteractionContext-f84ff7a1.js');
-var useCollectionInteractionContext = require('./useCollectionInteractionContext-6fc0200e.js');
-var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
-var useId = require('./useId-6c0eeb27.js');
-var TabbableModeContext = require('./TabbableModeContext-e99d527e.js');
-var useTestId = require('./useTestId-4f53d561.js');
-var useUser = require('./useUser-1295b5cb.js');
-var classNames = require('./classNames-c14c6ef3.js');
-var FocusTracker = require('./FocusTracker-e2ea43c3.js');
-var ScrollUtils = require('./ScrollUtils-e8076071.js');
-var mergeProps = require('./mergeProps-e3da7237.js');
-var useContextMenuGesture = require('./useContextMenuGesture-530ef8dd.js');
-var TableColGroup = require('./TableColGroup-b7e1e296.js');
-var useTranslationBundle = require('./useTranslationBundle-12dd087d.js');
-var Button = require('./Button-020e0381.js');
-var Dialog = require('./Dialog-8b65180c.js');
-var Flex = require('./Flex-3a257bc3.js');
-var SelectMenuGroupContext = require('./SelectMenuGroupContext-a349d259.js');
-var Submenu = require('./Submenu-8e92469f.js');
-require('./logger-2b636482.js');
-require('./UNSAFE_Separator/themes/SeparatorStyles.css.js');
-
-
-require('./UNSAFE_Menu/themes/redwood/MenuSeparatorVariants.css.js');
-var NumberInputText = require('./NumberInputText-36164d46.js');
-var useColorScheme = require('./useColorScheme-f8b1447d.js');
-var useScale = require('./useScale-db16c2b8.js');
-var useTooltipControlled = require('./useTooltipControlled-0a95856c.js');
-var tooltipUtils = require('./tooltipUtils-2bc15136.js');
-var collectionUtils = require('./collectionUtils-f1d3183f.js');
-var tabbableUtils = require('./tabbableUtils-22a50472.js');
-var EventUtils = require('./EventUtils-404fa5be.js');
-var keys = require('./keys-25710458.js');
-var clientHints = require('./clientHints-c40c5250.js');
-var textSelectionUtils = require('./textSelectionUtils-57082239.js');
-var PRIVATE_Table_themes_Table_css = require('./PRIVATE_Table/themes/Table.css.js');
-var PRIVATE_Table_themes_TableSkeletonStyles_css = require('./PRIVATE_Table/themes/TableSkeletonStyles.css.js');
-var PRIVATE_Table_themes_redwood_TableTheme = require('./PRIVATE_Table/themes/redwood/TableTheme.js');
-var LoadMoreCollection = require('./LoadMoreCollection-eb1f2603.js');
-var PRIVATE_Table_themes_TableRowStyles_css = require('./PRIVATE_Table/themes/TableRowStyles.css.js');
-var PRIVATE_Table_themes_redwood_TableNoDataTheme = require('./PRIVATE_Table/themes/redwood/TableNoDataTheme.js');
-var useInteractionStyle = require('./useInteractionStyle-c203a8a0.js');
-var Selector = require('./Selector-6550b8e0.js');
-var FormContext = require('./FormContext-d1d05967.js');
-var PRIVATE_TableCommon_themes_Common_css = require('./PRIVATE_TableCommon/themes/Common.css.js');
-var useSortableContext = require('./useSortableContext-0510fd8e.js');
-var SelectorAll = require('./SelectorAll-9118eb07.js');
-var SortControl = require('./SortControl-8c15705b.js');
-var PRIVATE_Table_themes_TableHeaderCellStyles_css = require('./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.useTranslationBundle('@oracle/oraclejet-preact');
-    const accessibleLabel = contextMenuConfig.accessibleLabel != null
-        ? contextMenuConfig.accessibleLabel
-        : translations.accContextMenuLabel();
-    return contextMenuConfig.itemsRenderer(contextMenuContext) != null ? (jsxRuntime.jsx(SelectMenuGroupContext.Menu, { "aria-label": accessibleLabel, ...menuProps, children: menuProps.isOpen && contextMenuConfig.itemsRenderer(contextMenuContext) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
-}
-/**
- * The internal component used to render the context menu sort item on the Table
- */
-function TableContextMenuSort({ columnKey, isDisabled, currentSortDirection, onSortCriterionChange }) {
-    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
-    const _handleSort = ({ value }) => {
-        if (onSortCriterionChange != null && value !== currentSortDirection) {
-            onSortCriterionChange([
-                { key: columnKey, sortDirection: value === 'ascending' ? 'ascending' : 'descending' }
-            ]);
-        }
-    };
-    return (jsxRuntime.jsx(Submenu.Submenu, { label: translations.collection_sortColumnMenu(), children: jsxRuntime.jsxs(Submenu.SelectSingleMenuGroup, { value: currentSortDirection, onCommit: _handleSort, children: [jsxRuntime.jsx(Submenu.SelectMenuItem, { isDisabled: isDisabled, value: "ascending", label: translations.collection_sortAscendingSubMenu() }), jsxRuntime.jsx(Submenu.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.useTranslationBundle('@oracle/oraclejet-preact');
-    const handleResize = () => {
-        setIsResizeDialogOpen(true);
-    };
-    return (jsxRuntime.jsx(SelectMenuGroupContext.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.useTranslationBundle('@oracle/oraclejet-preact');
-    const initialWidth = Math.round(appliedColumnWidths.netColumnWidths[columnKey]);
-    const initialWidthRef = hooks.useRef(initialWidth);
-    const numberInputRef = hooks.useRef(null);
-    const [widthValue, setWidthValue] = hooks.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 = hooks.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 = hooks.useCallback((event) => {
-        if (event.key === 'Enter' && !isDisabled) {
-            apply();
-        }
-    }, [apply, isDisabled]);
-    const cancel = hooks.useCallback(() => {
-        setIsResizeDialogOpen(false);
-    }, [setIsResizeDialogOpen]);
-    const handleOnInput = hooks.useCallback((detail) => {
-        setWidthValue(detail.value);
-    }, []);
-    const footer = (jsxRuntime.jsxs(Flex.Flex, { gap: "2x", children: [jsxRuntime.jsx(Button.Button, { onAction: cancel, label: translations.collection_cancel() }), jsxRuntime.jsx(Button.Button, { variant: "callToAction", onAction: apply, label: translations.collection_apply(), isDisabled: isDisabled })] }));
-    return (jsxRuntime.jsx(Dialog.Dialog, { autoFocusRef: numberInputRef, isOpen: isOpen, modality: 'modal', header: translations.collection_resizeColumnDialog(), footer: footer, children: jsxRuntime.jsx("div", { onKeyDown: handleKeyDown, children: jsxRuntime.jsx(NumberInputText.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: (jsxRuntime.jsx(TableContextMenuResize, { isDisabled: !isResizable, setIsResizeDialogOpen: setIsResizeDialogOpen })),
-            sortColumn: (jsxRuntime.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 ? (jsxRuntime.jsxs(jsxRuntime.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 = TableColGroup.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 = TableColGroup.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 }, TableColGroup.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 && TableColGroup.getElementFromCell(rootElement, tableId, realizedCell) != null) {
-                        TableColGroup.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
-                TableColGroup.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 &&
-                TableColGroup.getElementFromCell(rootElement, tableId, currencyStatusRef.current.currentCell) != null) {
-                TableColGroup.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 = TableColGroup.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] = hooks.useState();
-    const [menuProps, setMenuProps] = hooks.useState(_initialMenuProps);
-    const currentCellElementRef = hooks.useRef();
-    const [isResizeDialogOpen, setIsResizeDialogOpen] = hooks.useState(false);
-    const { triggerProps } = useContextMenuGesture.useContextMenuGesture(({ gesture, anchor, target }) => {
-        if (rootRef.current) {
-            // find the cell element the menu is being launched from
-            const cellElement = target.closest(`[${TableColGroup.TABLE_FOCUSABLE_SELECTOR}='${tableId}']`);
-            if (cellElement != null) {
-                const targetCell = TableColGroup.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 = hooks.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 = TableColGroup.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(`[${TableColGroup.TABLE_FOCUSABLE_SELECTOR}='${tableId}']`);
-    if (cellElement != null) {
-        const type = ScrollUtils.getCellType(cellElement);
-        if (type === 'data' || type === 'header' || type === 'footer') {
-            showTooltip(TableColGroup.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(tooltipUtils.SHOW_TOOLTIP_DELAY - SMALL_INTERACTION_DELAY, tooltipUtils.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 = tooltipUtils.getGlobalTooltipManager();
-    const tooltipId = useId.useId();
-    const tooltipCellRef = hooks.useRef();
-    const pendingShowTooltipCellRef = hooks.useRef();
-    const tooltipAnchorRef = hooks.useRef();
-    const tooltipTextRef = hooks.useRef();
-    const [tooltipText, setTooltipText] = hooks.useState();
-    const pointerDownRef = hooks.useRef(false);
-    const pointerDownTimeoutRef = hooks.useRef();
-    const showTooltipTimeoutRef = hooks.useRef();
-    const hideTooltipTimeoutRef = hooks.useRef();
-    // helper method for clearing the hide tooltip timeout
-    const _clearHideTooltipTimeout = hooks.useCallback(() => {
-        clearTimeout(hideTooltipTimeoutRef.current);
-        hideTooltipTimeoutRef.current = undefined;
-    }, []);
-    // helper method for clearing the show tooltip timeout
-    const _clearShowTooltipTimeout = hooks.useCallback(() => {
-        clearTimeout(showTooltipTimeoutRef.current);
-        showTooltipTimeoutRef.current = undefined;
-        pendingShowTooltipCellRef.current = undefined;
-    }, []);
-    // helper method for setting up the show tooltip timeout
-    const _setupShowTooltipTimeout = hooks.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 = TableColGroup.getElementFromCell(rootElement, tableId, cell);
-                    if (cellElement != null && hasTruncatedText(cellElement)) {
-                        setTooltipText(String(cellElement.innerText).trim());
-                        tooltipAnchorRef.current = cellElement;
-                        tooltipCellRef.current = cell;
-                    }
-                }
-            }
-            pendingShowTooltipCellRef.current = undefined;
-        }, tooltipUtils.SHOW_TOOLTIP_DELAY);
-    }, [rootRef, tableId, resizeInfoRef, _clearHideTooltipTimeout]);
-    // helper method for setting up the hide tooltip timeout
-    const _setupHideTooltipTimeout = hooks.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 = hooks.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 = hooks.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 = hooks.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 = hooks.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 = hooks.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 = hooks.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 = (jsxRuntime.jsx(useTooltipControlled.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.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.useColorScheme();
-    const tooltipContent = tooltipAnchorRef.current != null
-        ? tooltipUtils.getWrappedTooltipContent(renderRawContent, 'tooltip', currentColorScheme, tooltipAnchorRef, 'end-top', { mainAxis: mainAxisOffset, crossAxis: crossAxisOffset })
-        : undefined;
-    const destroyCallback = hooks.useCallback(() => {
-        hideTooltip(true);
-    }, [hideTooltip]);
-    hooks.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 = hooks.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 = hooks.useRef(false);
-    // tracks focus loss during render cycle for potential focus recapture cases
-    const isRenderCycle = hooks.useRef(true);
-    isRenderCycle.current = true;
-    const blurredRenderCycleElementRef = hooks.useRef(null);
-    const isPendingLayoutFocusRef = hooks.useRef(false);
-    // track current 'focus info' state
-    const hasFocusRef = hooks.useRef(false);
-    const [isTabbableMode, setIsTabbableMode] = hooks.useState(false);
-    const [isShowFocusRing, setIsShowFocusRing] = hooks.useState(false);
-    // track pointer down information
-    const recentPointerRef = hooks.useRef(false);
-    const pointerTimerRef = hooks.useRef(null);
-    const isShowFocusRingOverrideRef = hooks.useRef(null);
-    // track the active and current cell information
-    const [activeCell, setActiveCell] = hooks.useState(undefined);
-    const currencyStatusRef = hooks.useRef({
-        hasPendingCurrentCellOverride: false,
-        hasPendingCurrentCellOverrideScroll: false
-    });
-    // track pending scrolls to minimize 'flash' of focus rings when scrolling
-    const [deferredScrollDetail, setDeferredScrollDetail] = hooks.useState(undefined);
-    const deferredScrollDetailRef = hooks.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 = hooks.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 = hooks.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 = hooks.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 = hooks.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 = hooks.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 = hooks.useCallback((cell) => {
-        const rootElement = rootRef.current;
-        if (rootElement != null) {
-            setIsTabbableMode(false);
-            const cellElement = TableColGroup.getElementFromCell(rootElement, tableId, cell);
-            if (cellElement != null) {
-                cellElement.focus({ preventScroll: true });
-            }
-            else {
-                rootElement.focus({ preventScroll: true });
-            }
-        }
-    }, [rootRef, tableId]);
-    const notifyFocusFromPointer = hooks.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 = hooks.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 = hooks.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 = TableColGroup.logicalCellExtractor(targetElement, tableId, columnsArray);
-                if (cell != null) {
-                    if (ScrollUtils.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 = hooks.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 || !collectionUtils.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 = hooks.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 = hooks.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 = hooks.useCallback((detail) => {
-        const rootElement = rootRef.current;
-        if (rootElement != null && activeCell != null) {
-            collectionUtils.handleEnterActionableMode(detail.hasFocusWithin && ScrollUtils.getCellType(detail.activeElement) == null, tabbableUtils.allTabbableElements(TableColGroup.getElementFromCell(rootElement, tableId, activeCell)), (value) => {
-                setIsTabbableMode(value != undefined);
-            });
-        }
-    }, [rootRef, activeCell, tableId]);
-    // Callback for the outer Table's FocusTracker usage.
-    const onFocusStartEdge = hooks.useCallback((detail) => {
-        collectionUtils.handleWrapActionableFocus(true, detail.tabbableElements, (value) => {
-            setIsTabbableMode(value != undefined);
-        });
-    }, []);
-    // Callback for the outer Table's FocusTracker usage.
-    const onFocusEndEdge = hooks.useCallback((detail) => {
-        collectionUtils.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
-    hooks.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 = TableColGroup.getElementFromCell(rootElement, tableId, currentActiveCell);
-                    if (cellElement != null) {
-                        if (isCaptureFocus) {
-                            TableColGroup.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) &&
-                                TableColGroup.isAutoFocusCell(rootElement, tableId, currentActiveCell) &&
-                                cellSupportsTabbable(currentActiveCell)) {
-                                _enableTabbableMode(currentActiveCell);
-                            }
-                            else {
-                                cellElement.focus({ preventScroll: true });
-                            }
-                            return;
-                        }
-                        else if (isTabbableMode &&
-                            !collectionUtils.getElementContainsFunc(cellElement, true)(activeElement)) {
-                            if (isCaptureFocus && !TableColGroup.isAutoFocusCell(rootElement, tableId, currentActiveCell)) {
-                                _disableTabbableMode(currentActiveCell);
-                            }
-                            else {
-                                collectionUtils.handleEnterActionableMode(false, tabbableUtils.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) {
-                TableColGroup.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 = tabbableUtils.getActiveElement(rootElement);
-            // if we were tracking focus during the render cycle, ensure we recapture focus if needed
-            if (blurredRenderCycleElement != null &&
-                activeElement === tabbableUtils.getBodyElement(rootElement) &&
-                (!collectionUtils.getElementContainsFunc(rootElement, true)(blurredRenderCycleElement) ||
-                    !tabbableUtils.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(`[${TableColGroup.TABLE_FOCUSABLE_SELECTOR}='${tableId}']`);
-        if (cellElement != null) {
-            const cellType = ScrollUtils.getCellType(cellElement);
-            if (cellType === 'header' || cellType === 'footer') {
-                const isHeader = cellType === 'header';
-                const columnKey = TableColGroup.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(`[${TableColGroup.TABLE_FOCUSABLE_SELECTOR}='${tableId}']`);
-        if (cellElement != null) {
-            cellType = ScrollUtils.getCellType(cellElement);
-            columnKey = TableColGroup.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 = TableColGroup.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 }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-        }
-        else if (TableColGroup.hasFooterCells(rootElement, tableId)) {
-            newCell = { columnKey: newColumnKey, type: 'footer' };
-            onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-        }
-    }
-    else if (cellType === 'loading') {
-        if (isPrevious) {
-            newCell = { columnKey: initialCell.columnKey, type: 'header' };
-            onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-        }
-        else if (TableColGroup.hasFooterCells(rootElement, tableId)) {
-            newCell = { columnKey: initialCell.columnKey, type: 'footer' };
-            onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-        }
-    }
-    else if (cellType === 'loadMore') {
-        if (isPrevious) {
-            const rowKey = TableColGroup.getLastRenderedRowKey(rootElement, tableId);
-            if (rowKey != null) {
-                newCell = { rowKey: rowKey, columnKey: initialCell.columnKey, type: 'data' };
-                onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-            }
-        }
-        else if (TableColGroup.hasFooterCells(rootElement, tableId)) {
-            newCell = { columnKey: initialCell.columnKey, type: 'footer' };
-            onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-        }
-    }
-    else if (cellType !== 'pending') {
-        if (cellType === 'data') {
-            const currentRowKey = initialCell.rowKey;
-            const currentRowElement = collectionUtils.findElementByKey(rootElement, currentRowKey, `[${TableColGroup.TABLE_ROW_SELECTOR}='${tableId}']`);
-            if (currentRowElement != null) {
-                const rowElements = [
-                    ...rootElement.querySelectorAll(`[${TableColGroup.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 = ScrollUtils.getRowKey(adjacentRowElement);
-                    if (rowKey != null) {
-                        newCell = { rowKey: rowKey, columnKey: initialCell.columnKey, type: 'data' };
-                        onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell), isExtendSelectionGesture);
-                    }
-                }
-                else if (!isExtendSelectionGesture) {
-                    if (isPrevious) {
-                        newCell = { columnKey: initialCell.columnKey, type: 'header' };
-                        onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-                    }
-                    else if (TableColGroup.hasLoadMoreCell(rootElement, tableId)) {
-                        newCell = { columnKey: initialCell.columnKey, type: 'loadMore' };
-                        if (TableColGroup.getElementFromCell(rootElement, tableId, newCell) != null) {
-                            onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-                        }
-                    }
-                    else if (TableColGroup.hasFooterCells(rootElement, tableId)) {
-                        newCell = { columnKey: initialCell.columnKey, type: 'footer' };
-                        onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-                    }
-                }
-            }
-        }
-        else if (cellType === 'header' && !isPrevious) {
-            const rowKey = TableColGroup.getFirstRenderedRowKey(rootElement, tableId);
-            if (rowKey != null) {
-                newCell = { rowKey: rowKey, columnKey: initialCell.columnKey, type: 'data' };
-                onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-            }
-            else if (TableColGroup.hasNoDataCell(rootElement, tableId)) {
-                newCell = { type: 'noData' };
-                onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-            }
-            else {
-                newCell = { columnKey: initialCell.columnKey, type: 'loading' };
-                if (TableColGroup.getElementFromCell(rootElement, tableId, newCell) != null) {
-                    onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-                }
-                else if (TableColGroup.hasFooterCells(rootElement, tableId)) {
-                    newCell = { columnKey: initialCell.columnKey, type: 'footer' };
-                    onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-                }
-            }
-        }
-        else if (cellType === 'footer' && isPrevious) {
-            if (TableColGroup.hasNoDataCell(rootElement, tableId)) {
-                newCell = { type: 'noData' };
-                onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-            }
-            else {
-                newCell = { columnKey: initialCell.columnKey, type: 'loading' };
-                if (TableColGroup.getElementFromCell(rootElement, tableId, newCell) != null) {
-                    onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-                }
-                else {
-                    newCell = { columnKey: initialCell.columnKey, type: 'loadMore' };
-                    if (TableColGroup.getElementFromCell(rootElement, tableId, newCell) != null) {
-                        onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-                    }
-                    else {
-                        const rowKey = TableColGroup.getLastRenderedRowKey(rootElement, tableId);
-                        if (rowKey != null) {
-                            newCell = { rowKey: rowKey, columnKey: initialCell.columnKey, type: 'data' };
-                            onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-                        }
-                        else {
-                            newCell = { columnKey: initialCell.columnKey, type: 'header' };
-                            onActiveCellChanged({ value: newCell }, TableColGroup.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(`[${TableColGroup.TABLE_ROW_SELECTOR}='${tableId}']`);
-        if (rowElements.length > 0) {
-            const verticalScrollPosition = TableColGroup.getVerticalScrollPosition(rootElement, scrollerElement, viewportInfo, tableId);
-            const verticalRowIndex = TableColGroup.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 = TableColGroup.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 = TableColGroup.getRowKeyForRowIndex(rootElement, tableId, targetRowIndex);
-            if (newRowKey != null) {
-                const newCell = {
-                    rowKey: newRowKey,
-                    columnKey: initialCell.columnKey,
-                    type: 'data'
-                };
-                if (newRowKey !== initialCell.rowKey) {
-                    onActiveCellChanged({ value: newCell }, TableColGroup.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 }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-            }
-            else {
-                newCell = { columnKey: newKey, type: cellType };
-                onActiveCellChanged({ value: newCell }, TableColGroup.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 = TableColGroup.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 (TableColGroup.hasNoDataCell(rootElement, tableId)) {
-                newCell = { type: 'noData' };
-                onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-            }
-            else {
-                const newRowKey = isPrevious
-                    ? TableColGroup.getFirstRenderedRowKey(rootElement, tableId)
-                    : TableColGroup.getLastRenderedRowKey(rootElement, tableId);
-                if (newRowKey != null) {
-                    newCell = { rowKey: newRowKey, columnKey: newKey, type: 'data' };
-                    onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-                }
-            }
-        }
-        else if (newKey !== initialKey) {
-            if (cellType === 'data') {
-                newCell = { rowKey: initialCell.rowKey, columnKey: newKey, type: cellType };
-                onActiveCellChanged({ value: newCell }, TableColGroup.isAutoFocusCell(rootElement, tableId, newCell));
-            }
-            else {
-                newCell = { columnKey: newKey, type: cellType };
-                onActiveCellChanged({ value: newCell }, TableColGroup.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 = collectionUtils.keyExtractor(targetElement, `[${TableColGroup.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 (!keys.containsKey(selectedRows, newRowKey)) {
-                if (isMultiSelectRowGesture && selectionMode.row !== 'single') {
-                    selectedRows = keys.addKey(selectedRows, newRowKey);
-                }
-                else {
-                    selectedRows = { all: false, keys: new Set([newRowKey]) };
-                }
-            }
-            else if (isMultiSelectRowGesture) {
-                selectedRows = keys.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(`[${TableColGroup.TABLE_FOCUSABLE_SELECTOR}='${tableId}']`);
-        if (cellElement != null) {
-            const cellType = ScrollUtils.getCellType(cellElement);
-            if (cellType === 'header' || cellType === 'footer') {
-                const index = TableColGroup.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 (!keys.containsKey(selectedColumns, column.key)) {
-                            if (isModifierKey && selectionMode.column === 'multiple') {
-                                selectedColumns = keys.addKey(selectedColumns, column.key);
-                            }
-                            else {
-                                selectedColumns = { all: false, keys: new Set([column.key]) };
-                            }
-                        }
-                        else if (isModifierKey) {
-                            selectedColumns = keys.removeKey(selectedColumns, column.key, false);
-                        }
-                        else {
-                            selectedColumns = { all: false, keys: new Set([column.key]) };
-                        }
-                        selectedRows = emptyKeys;
-                    }
-                }
-            }
-        }
-    }
-    if (!keys.isSameKey(selectedRows, selected?.row) || !keys.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 = TableColGroup.getRowKeyForRowIndex(rootElement, tableId, i);
-                    selectedRows = keys.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 = TableColGroup.getRowKeyForRowIndex(rootElement, tableId, i);
-                            selectedRows = keys.removeKey(selectedRows, key, false);
-                        }
-                    }
-                    else if (previousEndIndex < startIndex) {
-                        for (let i = previousEndIndex; i < startIndex; i++) {
-                            const key = TableColGroup.getRowKeyForRowIndex(rootElement, tableId, i);
-                            selectedRows = keys.removeKey(selectedRows, key, false);
-                        }
-                    }
-                }
-            }
-            else {
-                for (let i = startIndex; i >= endIndex; i--) {
-                    const key = TableColGroup.getRowKeyForRowIndex(rootElement, tableId, i);
-                    selectedRows = keys.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 = TableColGroup.getRowKeyForRowIndex(rootElement, tableId, i);
-                            selectedRows = keys.removeKey(selectedRows, key, false);
-                        }
-                    }
-                    else if (previousEndIndex > startIndex) {
-                        for (let i = previousEndIndex; i > startIndex; i--) {
-                            const key = TableColGroup.getRowKeyForRowIndex(rootElement, tableId, i);
-                            selectedRows = keys.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 = keys.addKey(selectedColumns, column.key);
-                    }
-                }
-            }
-            else {
-                for (let i = startIndex; i >= endIndex; i--) {
-                    const column = columnsArray[i];
-                    if (column.value.selectable !== 'disabled') {
-                        selectedColumns = keys.addKey(selectedColumns, column.key);
-                    }
-                }
-            }
-        }
-    }
-    if (!keys.isSameKey(selectedRows, selected?.row) || !keys.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 = TableColGroup.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 = TableColGroup.getElementFromCell(rootElement, tableId, activeCell);
-        const targetCellElement = TableColGroup.getElementFromCell(rootElement, tableId, targetCell);
-        if (activeCellElement != null && targetCellElement != null) {
-            const isRow = targetCell.type === 'data';
-            if (isRow) {
-                return (TableColGroup.getRowIndexForRowElement(rootElement, tableId, activeCellElement.parentElement) != null &&
-                    TableColGroup.getRowIndexForRowElement(rootElement, tableId, targetCellElement.parentElement) != null);
-            }
-            else if (targetCell.type === 'header' || targetCell.type === 'footer') {
-                const isHeader = targetCell.type === 'header';
-                return (TableColGroup.getColumnIndexForHeaderFooterElement(rootElement, tableId, activeCellElement, isHeader) !=
-                    null &&
-                    TableColGroup.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 = TableColGroup.logicalCellExtractor(targetElement, tableId, columnsArray);
-    if (targetCell != null) {
-        const activeCellElement = TableColGroup.getElementFromCell(rootElement, tableId, activeCell);
-        const targetCellElement = TableColGroup.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 = TableColGroup.getRowIndexForRowElement(rootElement, tableId, startElement);
-                    endIndex = TableColGroup.getRowIndexForRowElement(rootElement, tableId, endElement);
-                    const previousElement = isToggleSelectionMode
-                        ? activeCellElement.parentElement
-                        : selectionExtensionElementRef.current;
-                    if (previousElement != null) {
-                        previousEndIndex = TableColGroup.getRowIndexForRowElement(rootElement, tableId, previousElement);
-                    }
-                }
-                else if (targetCell.type === 'header' || targetCell.type === 'footer') {
-                    const isHeader = targetCell.type === 'header';
-                    endElement = targetCellElement;
-                    startIndex = TableColGroup.getColumnIndexForHeaderFooterElement(rootElement, tableId, activeCellElement, isHeader);
-                    endIndex = TableColGroup.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 = TableColGroup.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 = TableColGroup.getRowIndexForRowElement(rootElement, tableId, startElement);
-        }
-        else {
-            startElement = activeCellElement;
-            startIndex = TableColGroup.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
-                    ? TableColGroup.getRowIndexForRowElement(rootElement, tableId, cursorElement)
-                    : TableColGroup.getColumnIndexForHeaderFooterElement(rootElement, tableId, cursorElement, isHeader);
-                extendedElement = isPrevious
-                    ? cursorElement.previousElementSibling
-                    : cursorElement.nextElementSibling;
-                if (extendedElement != null && (!isRow || (isRow && ScrollUtils.getRowKey(extendedElement) != null))) {
-                    if (!isToggleSelectionMode || !isRow) {
-                        selectionExtensionElementRef.current = extendedElement;
-                    }
-                    else if (selectionExtensionElementRef.current == null) {
-                        selectionExtensionElementRef.current = activeCellElement.parentElement;
-                    }
-                    endIndex = isRow
-                        ? TableColGroup.getRowIndexForRowElement(rootElement, tableId, extendedElement)
-                        : TableColGroup.getColumnIndexForHeaderFooterElement(rootElement, tableId, extendedElement, isHeader);
-                }
-                else {
-                    endIndex = isRow
-                        ? TableColGroup.getRowIndexForRowElement(rootElement, tableId, cursorElement)
-                        : TableColGroup.getColumnIndexForHeaderFooterElement(rootElement, tableId, cursorElement, isHeader);
-                }
-            }
-            else {
-                extendedElement = isPrevious
-                    ? startElement.previousElementSibling
-                    : startElement.nextElementSibling;
-                if (extendedElement != null && (!isRow || (isRow && ScrollUtils.getRowKey(extendedElement) != null))) {
-                    selectionExtensionElementRef.current = extendedElement;
-                    endIndex = isRow
-                        ? TableColGroup.getRowIndexForRowElement(rootElement, tableId, extendedElement)
-                        : TableColGroup.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 = collectionUtils.keyExtractor(extensionElement, `[${TableColGroup.TABLE_ROW_SELECTOR}='${tableId}']`);
-                    if (rowKey != null) {
-                        extensionCell = {
-                            type: activeCell.type,
-                            rowKey: rowKey,
-                            columnKey: activeCell.columnKey
-                        };
-                    }
-                }
-                else {
-                    extensionCell = TableColGroup.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 = hooks.useRef();
-    // Keydown handler for the outer Table. This handles all internal
-    // keyboard navigation for the Table.
-    const _keyDownHandler = hooks.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 &&
-                            EventUtils.getRowActionGestureContext(tableId, tableData, event.target, TableColGroup.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 &&
-                                EventUtils.getRowActionGestureContext(tableId, tableData, event.target, TableColGroup.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 || TableColGroup.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 || TableColGroup.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 || TableColGroup.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 || TableColGroup.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 || TableColGroup.isAutoFocusCell(rootElement, tableId, activeCell))) {
-                        handlePageRowGesture(rootElement, scrollerElement, viewportInfo, tableId, sizingInfoRef.current, activeCell, onActiveCellChanged, true, hideTooltip, updateDeferredScrollDetail);
-                        event.preventDefault();
-                    }
-                },
-                PageDown: function () {
-                    if (activeCell != null &&
-                        (!isTabbableMode || TableColGroup.isAutoFocusCell(rootElement, tableId, activeCell))) {
-                        handlePageRowGesture(rootElement, scrollerElement, viewportInfo, tableId, sizingInfoRef.current, activeCell, onActiveCellChanged, false, hideTooltip, updateDeferredScrollDetail);
-                        event.preventDefault();
-                    }
-                },
-                Home: function () {
-                    if (activeCell != null &&
-                        (!isTabbableMode || TableColGroup.isAutoFocusCell(rootElement, tableId, activeCell))) {
-                        handleJumpColumnGesture(rootElement, tableId, columnsArray, activeCell, onActiveCellChanged, true, EventUtils.isLogicalCtrl(event), hideTooltip, updateDeferredScrollDetail);
-                        event.preventDefault();
-                    }
-                },
-                End: function () {
-                    if (activeCell != null &&
-                        (!isTabbableMode || TableColGroup.isAutoFocusCell(rootElement, tableId, activeCell))) {
-                        handleJumpColumnGesture(rootElement, tableId, columnsArray, activeCell, onActiveCellChanged, false, EventUtils.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 = hooks.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, TableColGroup.getElementFromCell(rootElement, tableId, activeCell), true, onTableSelectionChange, isDropDownSelection, selectionMode, selected);
-                                }
-                            }
-                            if (onRowAction != null &&
-                                EventUtils.handleRowActionGesture(tableId, tableData, onRowAction, event.target, TableColGroup.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, TableColGroup.getElementFromCell(rootElement, tableId, activeCell), true, onTableSelectionChange, isDropDownSelection, selectionMode, selected);
-                                }
-                            }
-                            if (onRowAction != null &&
-                                EventUtils.handleRowActionGesture(tableId, tableData, onRowAction, event.target, TableColGroup.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 = TableColGroup.getHeaderRowElement(rootElement, tableId);
-    if (headerRowElement != null) {
-        const headerElements = headerRowElement.querySelectorAll(`[${TableColGroup.TABLE_HEADER_SELECTOR}='${tableId}']`);
-        if (collectionUtils.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 = TableColGroup.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 = hooks.useRef(false);
-    // tracks the column key for any header or footer being hovered over
-    const [hoverStyleColumnInfo, setHoverStyleColumnInfo] = hooks.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 = hooks.useRef();
-    // Pointer move handler for the outer Table.
-    const _pointerMoveHandler = hooks.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 = hooks.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 = hooks.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 (!textSelectionUtils.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 (TableColGroup.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 (clientHints.getClientHints().browser === 'firefox' && EventUtils.isLogicalCtrl(event)) {
-                    setTimeout(() => {
-                        textSelectionUtils.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 = hooks.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 = hooks.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 = hooks.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 = hooks.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 &&
-                    !textSelectionUtils.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, EventUtils.isLogicalCtrl(event) || selectionTouchRef.current, onTableSelectionChange, isDropDownSelection, selectionMode, selected);
-                    }
-                }
-                if (onRowAction != null &&
-                    !textSelectionUtils.getIsSelectionPending() &&
-                    EventUtils.handleRowActionGesture(tableId, tableData, onRowAction, target, TableColGroup.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 = hooks.useRef({
-        isResizing: false,
-        isResizeHover: false,
-        ignoreClick: false
-    });
-    // tracks the column key for any header or footer being hovered over
-    const [activeStyleColumnInfo, setActiveStyleColumnInfo] = hooks.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 = hooks.useRef();
-    // intercept onSelectionChange calls to ensure local selectionExtensionElementRef is cleared
-    const onTableSelectionChange = hooks.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 = TableColGroup.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.mergeProps(focusHandlingProps, keyboardHandlingProps, pointerHandlingProps, contextMenuTriggerProps)
-        : focusHandlingProps;
-    // setup imperative handle implementation
-    hooks.useImperativeHandle(ref, () => {
-        const rootElement = rootRef.current;
-        const scrollerElement = viewportInfo.viewportConfig.scrollerRef.current;
-        return {
-            focus: () => {
-                if (rootElement != null) {
-                    if (currentActiveCell != null) {
-                        const cellElement = TableColGroup.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 TableColGroup.getHorizontalScrollPosition(rootElement, scrollerElement, viewportInfo, sizingInfoRef.current, overflowInfoRef.current, columnsArray, appliedColumnWidths.fullColumnWidths, isRtl);
-            },
-            getVerticalScrollPosition: () => {
-                if (rootElement == null || scrollerElement == null || isLayoutRequired) {
-                    return {};
-                }
-                return TableColGroup.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 = clientHints.getClientHints().browser;
-    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
-    const rowClasses = classNames.classNames([PRIVATE_Table_themes_TableRowStyles_css.tableRowStyles.base]);
-    const { classes: themeClasses } = useComponentTheme.useComponentTheme(PRIVATE_Table_themes_redwood_TableNoDataTheme.TableNoDataRedwoodTheme, {
-        defaultRenderer: renderer == null ? 'isDefaultRenderer' : 'notDefaultRenderer',
-        showFocusRing: isShowFocusRing ? 'isShowFocusRing' : 'notShowFocusRing'
-    });
-    const cellClasses = classNames.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
-    hooks.useLayoutEffect(() => {
-        if (browser === 'firefox') {
-            const rootElement = rootRef.current;
-            if (rootElement != null) {
-                const tableBodyElement = TableColGroup.getTableBodyElement(rootElement, tableId);
-                const noDataElement = TableColGroup.getNoDataCellElement(rootElement, tableId);
-                if (tableBodyElement != null && noDataElement != null) {
-                    noDataElement.style.height = '';
-                    noDataElement.style.height = `${tableBodyElement.getBoundingClientRect().height}px`;
-                }
-            }
-        }
-    });
-    return (jsxRuntime.jsx("tr", { "aria-rowindex": ariaRowIndex, class: rowClasses, role: 'row', children: jsxRuntime.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(PRIVATE_TableCommon_themes_Common_css.preventBrowserTooltipStyle);
-};
-// Pointer Leave handler for elements that need to prevent default browser tooltips
-const _pointerLeaveHandler = (event) => {
-    const targetElement = event.target;
-    targetElement.classList.remove(PRIVATE_TableCommon_themes_Common_css.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 = clientHints.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.classNames(TableColGroup.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 (jsxRuntime.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: jsxRuntime.jsx(FormContext.FormContext.Provider, { value: { textAlign: TableColGroup.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.useTranslationBundle('@oracle/oraclejet-preact');
-    const { interactionProps, applyActiveStyle, applyHoverStyle, applyPseudoHoverStyle } = useInteractionStyle.useInteractionStyle({ disabledKeys: disabledInteractionKeys });
-    const rowStyles = isHighContrast ? PRIVATE_Table_themes_TableRowStyles_css.tableRowStylesHC : PRIVATE_Table_themes_TableRowStyles_css.tableRowStyles;
-    const classArray = [rowStyles.base, isFinalRow ? rowStyles.lastRowHeight : rowStyles.rowHeight];
-    const classes = classNames.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 (jsxRuntime.jsx(Selector.Selector, { "aria-label": translations.collection_selectRow({ ROW_NAME: accessibleRowName }), onChange: handleRowSelectorChange, rowKey: rowKey, selectedKeys: selectedRowKeys }));
-        }
-        : undefined;
-    let isPreviousColumnSelected = false;
-    let isPreviousStickyColumnSelected = false;
-    return (jsxRuntime.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 = keys.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 && keys.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 jsxRuntime.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 = compat.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
-                ? keys.isSameKey(prev.selectedRowKeys, next.selectedRowKeys)
-                : true) &&
-            keys.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 = clientHints.getClientHints().browser;
-    // returns a TableRowContext based on ItemContext (added key)
-    const getRowContext = hooks.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 = keys.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 jsxRuntime.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 (jsxRuntime.jsx("tbody", { class: PRIVATE_Table_themes_Table_css.backgroundStyles.inherit, role: 'presentation', "data-oj-table-body": tableId, children: isShowNoData || !isValidRender ? (jsxRuntime.jsx(TableNoData, { ...getNoDataProps() })) : (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(LoadMoreCollection.LoadMoreCollection, { data: tableData, loadMoreIndicator: jsxRuntime.jsx(TableColGroup.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 }), jsxRuntime.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.classNames([PRIVATE_Table_themes_Table_css.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 jsxRuntime.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 = clientHints.getClientHints().browser;
-    const supportsDefaultTooltip = tooltip !== 'disabled';
-    const supportsAutoFocus = focusTarget === 'content';
-    const cellClasses = classNames.classNames(TableColGroup.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 (jsxRuntime.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: jsxRuntime.jsx(FormContext.FormContext.Provider, { value: { textAlign: TableColGroup.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.classNames([PRIVATE_Table_themes_Table_css.tableFooterRowStyles.base]);
-    let previousColumnKey;
-    let previousStickyColumnKey;
-    let isPreviousSelectable = false;
-    let isPreviousStickySelectable = false;
-    let isPreviousColumnSelected = false;
-    let isPreviousStickyColumnSelected = false;
-    return isRendered ? (jsxRuntime.jsx("tfoot", { class: PRIVATE_Table_themes_Table_css.backgroundStyles.inherit, role: 'presentation', children: jsxRuntime.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 = keys.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 &&
-                                keys.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 jsxRuntime.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 = clientHints.getClientHints().browser;
-    const supportsDefaultTooltip = tooltip !== 'disabled';
-    const supportsAutoFocus = focusTarget === 'content';
-    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
-    const cellClasses = classNames.classNames(TableColGroup.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 (keys.isSameKey(selectedRowKeys, { all: true, deletedKeys: new Set() })) {
-        selectorAllState = 'all';
-    }
-    else if (keys.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
-        ? () => (jsxRuntime.jsx(SelectorAll.SelectorAll, { "aria-label": translations.collection_selectAllRows(), onChange: handleSelectorChange, selected: selectorAllState }))
-        : undefined;
-    const handleSortGesture = hooks.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 = hooks.useCallback(() => {
-        if (renderer != null) {
-            return renderer;
-        }
-        return ({ headerText, sortable, sortDirection }) => {
-            const text = headerText != null ? (jsxRuntime.jsx("div", { class: PRIVATE_Table_themes_Table_css.tableHeaderCellTextStyles.base, children: jsxRuntime.jsx("span", { class: PRIVATE_Table_themes_TableHeaderCellStyles_css.tableHeaderCellStyles.defaultRendererSpan, children: headerText }) })) : undefined;
-            if (sortable === 'enabled' || sortDirection !== 'unsorted') {
-                const isIconFirst = horizontalAlignment === 'end' ||
-                    (!isRtl && horizontalAlignment === 'right') ||
-                    (isRtl && horizontalAlignment === 'left');
-                const containerClasses = classNames.classNames([
-                    PRIVATE_Table_themes_Table_css.tableHeaderSortContainerStyles.base,
-                    PRIVATE_TableCommon_themes_Common_css.justifyContentStyles[horizontalAlignment]
-                ]);
-                return (jsxRuntime.jsxs("div", { class: containerClasses, children: [isIconFirst && jsxRuntime.jsx(SortControl.SortControl, {}), text, !isIconFirst && jsxRuntime.jsx(SortControl.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 (jsxRuntime.jsx(useSortableContext.SortableContext.Provider, { value: { isRendered: isShowSortIcon, sortable, sortDirection, onSort: handleSortGesture }, children: jsxRuntime.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: jsxRuntime.jsx(FormContext.FormContext.Provider, { value: { textAlign: TableColGroup.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.classNames([PRIVATE_Table_themes_Table_css.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 ? (jsxRuntime.jsx("thead", { class: PRIVATE_Table_themes_Table_css.backgroundStyles.inherit, role: 'presentation', children: jsxRuntime.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 = keys.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 &&
-                                keys.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 jsxRuntime.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 = compat.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.useId();
-    const testIdProps = useTestId.useTestId(testId);
-    // rootRef is callback-based to meet useResizeObserver hook's state management requirements
-    const [rootRef, setRootRef] = hooks.useState(preact.createRef());
-    const rootRefCallback = hooks.useCallback((node) => {
-        setRootRef({ current: node });
-    }, []);
-    // innerTableRef is callback-based to meet useResizeObserver hook's state management requirements
-    const [innerTableRef, setInnerTableRef] = hooks.useState(preact.createRef());
-    const innerTableRefCallback = hooks.useCallback((node) => {
-        setInnerTableRef({ current: node });
-    }, []);
-    const { direction, forcedColors } = useUser.useUser();
-    const isHighContrast = forcedColors === 'active';
-    const isRtl = direction === 'rtl';
-    const isEmbedded = useCollectionInteractionContext.useCollectionInteractionContext() === 'embedded';
-    const rowVariant = currentRowVariant ?? isEmbedded ? 'highlight' : 'none';
-    const { managedData: tableData, onManagedLoadMore: onTableLoadMore } = ScrollUtils.useDataManager({
-        data,
-        getRowKey,
-        hasMore,
-        onLoadMore
-    });
-    const { columnBorderEdges, isLayoutRequired, viewportInfo, columnsArray, appliedColumnWidths, sizingInfoRef, overflowInfoRef, innerTableHeight, hasVerticalUnderflow, stickyEdgesState, setStickyEdgesState, stickyColumnInfo, scrollerRefCallback } = TableColGroup.useSizingManager({
-        rootRef,
-        innerTableRef,
-        tableId,
-        tableData,
-        viewportConfig,
-        externalScrollerAccessRef: scrollerRef,
-        layout,
-        columns,
-        columnOrder,
-        columnWidths,
-        isRtl,
-        isHighContrast
-    });
-    const cellHasRenderer = hooks.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.useComponentTheme(PRIVATE_Table_themes_redwood_TableTheme.TableRedwoodTheme, {
-        pendingLayout: isPendingLayout ? 'isPendingLayout' : 'notPendingLayout',
-        showFocusRing: isShowFocusRing ? 'isShowFocusRing' : 'notShowFocusRing',
-        externalScroller: viewportInfo.isExternalScroller ? 'isExternalScroller' : 'notExternalScroller'
-    });
-    let scrollerStyle;
-    let scrollerPadding = '';
-    const scrollerClassArray = [PRIVATE_Table_themes_Table_css.scrollerStyles.base];
-    if (viewportInfo.isExternalScroller) {
-        scrollerClassArray.push(PRIVATE_Table_themes_Table_css.scrollerStyles.externalScroller);
-    }
-    else if (!sizingInfoRef.current.isScrollbarSizeKnown) {
-        scrollerClassArray.push(PRIVATE_Table_themes_Table_css.scrollerStyles.forceScroll);
-    }
-    else {
-        if (overflowInfoRef.current.isHorizontal) {
-            scrollerClassArray.push(PRIVATE_Table_themes_Table_css.scrollerStyles.horizontalScroll);
-        }
-        else {
-            scrollerClassArray.push(PRIVATE_Table_themes_Table_css.scrollerStyles.noHorizontalScroll);
-        }
-        if (overflowInfoRef.current.isVertical) {
-            scrollerClassArray.push(PRIVATE_Table_themes_Table_css.scrollerStyles.verticalScroll);
-        }
-        else {
-            scrollerClassArray.push(PRIVATE_Table_themes_Table_css.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.classNames(scrollerClassArray);
-    const allowBrowserContextMenu = !(clientHints.getClientHints().platform === 'ios' || clientHints.getClientHints().platform === 'android');
-    const classArray = [themeClasses];
-    if (!allowBrowserContextMenu) {
-        classArray.push(PRIVATE_Table_themes_Table_css.userSelectStyles.userSelect);
-    }
-    const classes = classNames.classNames(classArray);
-    const tableClasses = classNames.classNames([PRIVATE_Table_themes_Table_css.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 jsxRuntime.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 ? PRIVATE_Table_themes_TableSkeletonStyles_css.tableSkeletonStylesHC : PRIVATE_Table_themes_TableSkeletonStyles_css.tableSkeletonStyles;
-    const getPendingLayoutSkeletons = () => {
-        return isPendingLayout ? (jsxRuntime.jsx("div", { class: skeletonStyles.pendingLayout, children: jsxRuntime.jsx("table", { role: 'presentation', style: 'width:100%;table-layout:fixed;', children: jsxRuntime.jsx("tbody", { role: 'presentation', children: jsxRuntime.jsx(TableColGroup.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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: [jsxRuntime.jsxs("div", { ref: scrollerRefCallback, class: scrollerClasses, role: 'rowgroup', style: scrollerStyle, tabIndex: -1, ...scrollHandlingProps, children: [jsxRuntime.jsxs(FocusTracker.FocusTracker, { isDisabled: !isTabbableMode, onFocusStartEdge: onFocusStartEdge, onFocusEndEdge: onFocusEndEdge, onStartTracking: onStartFocusTracking, children: [jsxRuntime.jsx(TabbableModeContext.TabbableModeContext.Provider, { value: { isTabbable: isTabbableMode }, children: jsxRuntime.jsxs("table", { ref: innerTableRefCallback, "aria-hidden": isPendingLayout ? true : undefined, class: tableClasses, role: 'presentation', style: getTableStyle(), "data-oj-table-inner-table": tableId, children: [jsxRuntime.jsx(TableColGroup.TableColGroup, { ...getTableColGroupProps() }), jsxRuntime.jsx(TableHeader, { ...getTableHeaderProps() }), jsxRuntime.jsx(TableBody, { ...getTableBodyProps() }), jsxRuntime.jsx(TableFooter, { ...getTableFooterProps() })] }) }), getTableDragIndicator()] }), tooltipContent] }), getPendingLayoutSkeletons()] }), contextMenuConfig != null && contextMenuContext != null && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TableContextMenu, { ...menuProps, contextMenuConfig: contextMenuConfig, contextMenuContext: contextMenuContext }), isResizeDialogOpen &&
-                        currentActiveCell?.columnKey != null &&
-                        appliedColumnWidths != null ? (jsxRuntime.jsx(TableResizeColumnDialog, { isOpen: isResizeDialogOpen, columnKey: currentActiveCell.columnKey, appliedColumnWidths: appliedColumnWidths, onColumnResize: onColumnResize, setIsResizeDialogOpen: setIsResizeDialogOpen })) : undefined] }))] }));
-});
-
-exports.Table = Table;
-//# sourceMappingURL=Table-a102e1ee.js.map