@itwin/components-react 4.0.0-dev.2 → 4.0.0-dev.4

package/lib/cjs/components-react/table/component/Table.js

@@ -0,0 +1,1335 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/* eslint-disable deprecation/deprecation */
+/** @packageDocumentation
+ * @module Table
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableRow = exports.Table = exports.TableSelectionTarget = void 0;
+require("./Table.scss");
+require("../columnfiltering/ColumnFiltering.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const dedupe_1 = __importDefault(require("classnames/dedupe"));
+const lodash_1 = require("lodash");
+const React = __importStar(require("react"));
+const react_data_grid_1 = __importDefault(require("react-data-grid"));
+const core_bentley_1 = require("@itwin/core-bentley");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const SelectionHandler_1 = require("../../common/selection/SelectionHandler");
+const SelectionModes_1 = require("../../common/selection/SelectionModes");
+const ShowHideMenu_1 = require("../../common/showhide/ShowHideMenu");
+const TypeConverterManager_1 = require("../../converters/TypeConverterManager");
+const ItemStyle_1 = require("../../properties/ItemStyle");
+const ValueRendererManager_1 = require("../../properties/ValueRendererManager");
+const ColumnFiltering_1 = require("../columnfiltering/ColumnFiltering");
+const MultiSelectFilter_1 = require("../columnfiltering/data-grid-addons/MultiSelectFilter");
+const NumericFilter_1 = require("../columnfiltering/data-grid-addons/NumericFilter");
+const SingleSelectFilter_1 = require("../columnfiltering/data-grid-addons/SingleSelectFilter");
+const DataGridFilterParser_1 = require("../columnfiltering/DataGridFilterParser");
+const MultiValueFilter_1 = require("../columnfiltering/multi-value-filter/MultiValueFilter");
+const TableFilterDescriptorCollection_1 = require("../columnfiltering/TableFilterDescriptorCollection");
+const TableDataProvider_1 = require("../TableDataProvider");
+const DragDropHeaderCell_1 = require("./DragDropHeaderCell");
+const TableCell_1 = require("./TableCell");
+const TableColumn_1 = require("./TableColumn");
+// cspell:ignore Overscan columnfiltering Dedupe popout
+const TABLE_ROW_HEIGHT = 27;
+const TABLE_FILTER_ROW_HEIGHT = 32;
+/**
+ * Specifies table selection target.
+ * @deprecated in 3.0. Use the Table component in @itwin/itwinui-react instead, which does not use this enum.
+ * @public
+ */
+var TableSelectionTarget;
+(function (TableSelectionTarget) {
+    TableSelectionTarget[TableSelectionTarget["Row"] = 0] = "Row";
+    TableSelectionTarget[TableSelectionTarget["Cell"] = 1] = "Cell";
+})(TableSelectionTarget = exports.TableSelectionTarget || (exports.TableSelectionTarget = {}));
+/** Scroll Direction */
+var SCROLL_DIRECTION;
+(function (SCROLL_DIRECTION) {
+    SCROLL_DIRECTION["UP"] = "upwards";
+    SCROLL_DIRECTION["DOWN"] = "downwards";
+    SCROLL_DIRECTION["LEFT"] = "left";
+    SCROLL_DIRECTION["RIGHT"] = "right";
+    SCROLL_DIRECTION["NONE"] = "none";
+})(SCROLL_DIRECTION || (SCROLL_DIRECTION = {}));
+const initialState = {
+    columns: [],
+    hiddenColumns: [],
+    rows: [],
+    rowsCount: 0,
+    cellEditorState: { active: false },
+    menuVisible: false,
+    menuX: 0,
+    menuY: 0,
+    gridContainer: null,
+};
+/** ReactDataGrid requires a class component for the RowRenderer because it sets a ref to it. */
+class TableRowRenderer extends React.Component {
+    render() {
+        const creatorFn = this.props.rowRendererCreator();
+        return creatorFn(this.props);
+    }
+}
+/**
+ * Table React component that displays rows and columns in a grid along with a header
+ * @deprecated in 3.0. Use the Table component in @itwin/itwinui-react instead, which does not use this class.
+ * @public
+ */
+class Table extends React.Component {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this._pageAmount = 100;
+        this._disposableListeners = new core_bentley_1.DisposableList();
+        this._isMounted = false;
+        this._currentUpdate = 0 /* None */;
+        this._pendingUpdate = 0 /* None */;
+        this._rowLoadGuid = core_bentley_1.Guid.createValue();
+        this._selectedRowIndices = new Set();
+        this._selectedCellKeys = new Map(); // column keys -> rowIndices
+        this._pressedItemSelected = false;
+        this._tableRef = React.createRef();
+        this._gridRef = React.createRef();
+        this._gridContainerRef = React.createRef();
+        this._filterRowShown = false;
+        this._topRowIndex = 0;
+        this._pokeScrollTimer = new core_react_1.Timer(100);
+        /** @internal */
+        this.state = initialState;
+        this._onRowsSelected = (rowIndices, replace) => {
+            if (this.props.onRowsSelected)
+                this.props.onRowsSelected(this.createRowIterator(rowIndices), replace); // eslint-disable-line @typescript-eslint/no-floating-promises
+        };
+        this._onRowsDeselected = (rowIndices) => {
+            if (this.props.onRowsDeselected)
+                this.props.onRowsDeselected(this.createRowIterator(rowIndices)); // eslint-disable-line @typescript-eslint/no-floating-promises
+        };
+        this._onCellsSelected = (cellKeys, replace) => {
+            if (this.props.onCellsSelected)
+                this.props.onCellsSelected(this.createCellIterator(cellKeys), replace); // eslint-disable-line @typescript-eslint/no-floating-promises
+        };
+        this._onCellsDeselected = (cellKeys) => {
+            if (this.props.onCellsDeselected)
+                this.props.onCellsDeselected(this.createCellIterator(cellKeys)); // eslint-disable-line @typescript-eslint/no-floating-promises
+        };
+        this._onColumnsChanged = async () => {
+            await this.updateColumns();
+            this._cellItemSelectionHandlers = undefined;
+        };
+        // Workaround for react-data-grid bug that shows blank grid when updating after grid has been scrolled.
+        // Force a re-render by scrolling up 1 then down 1
+        this._pokeScrollAfterUpdate = () => {
+            // istanbul ignore else
+            if (this._gridRef.current && this._topRowIndex !== 0) {
+                const grid = this._gridRef.current;
+                // istanbul ignore else
+                if (grid.getRowOffsetHeight && grid.getDataGridDOMNode) {
+                    const gridCanvas = grid.getDataGridDOMNode().querySelector(".react-grid-Canvas");
+                    // Scroll up 1
+                    let top = TABLE_ROW_HEIGHT * this._topRowIndex - 1;
+                    gridCanvas.scrollTop = top;
+                    // Scroll back down
+                    top = TABLE_ROW_HEIGHT * this._topRowIndex;
+                    gridCanvas.scrollTop = top;
+                }
+            }
+        };
+        this._queuePokeScroll = () => {
+            this._unsetPokeScrollTimeout();
+            this._pokeScrollTimer.setOnExecute(() => { this._pokeScrollAfterUpdate(); });
+            this._pokeScrollTimer.start();
+        };
+        this._unsetPokeScrollTimeout = () => {
+            this._pokeScrollTimer.stop();
+        };
+        this._onRowsChanged = async () => {
+            await this.updateRows();
+            this._queuePokeScroll();
+        };
+        this._columnDescriptionToReactDataGridColumn = (columnDescription) => {
+            const isEditable = !!columnDescription.editable;
+            const column = {
+                key: columnDescription.key,
+                name: columnDescription.label,
+                icon: columnDescription.icon,
+                width: columnDescription.width,
+                resizable: !!columnDescription.resizable,
+                sortable: !!columnDescription.sortable,
+                draggable: !!this.props.reorderableColumns,
+                filterable: !!columnDescription.filterable,
+            };
+            column.events = {};
+            if (this.props.onCellContextMenu) {
+                column.events.onContextMenu = this.cellContextMenu.bind(this, column);
+            }
+            if (isEditable) {
+                column.events.onClick = this.cellEditOnClick.bind(this, column);
+            }
+            if (columnDescription.filterRenderer !== undefined) {
+                switch (columnDescription.filterRenderer) {
+                    case TableDataProvider_1.FilterRenderer.Numeric:
+                        column.filterRenderer = NumericFilter_1.NumericFilter;
+                        break;
+                    case TableDataProvider_1.FilterRenderer.MultiSelect:
+                        column.filterRenderer = MultiSelectFilter_1.MultiSelectFilter;
+                        break;
+                    case TableDataProvider_1.FilterRenderer.MultiValue:
+                        column.filterRenderer = MultiValueFilter_1.MultiValueFilter;
+                        break;
+                    case TableDataProvider_1.FilterRenderer.SingleSelect:
+                        column.filterRenderer = SingleSelectFilter_1.SingleSelectFilter;
+                        break;
+                    case TableDataProvider_1.FilterRenderer.Text:
+                        // column.filterRenderer is not set for the Text input filter
+                        break;
+                }
+            }
+            return column;
+        };
+        this._getCellItem = (row, columnKey) => {
+            return row.cells.find((cell) => cell.key === columnKey) || /* istanbul ignore next */ { key: columnKey };
+        };
+        this._rowComponentSelectionHandler = {
+            deselectAll: () => {
+                this._selectedRowIndices = new Set();
+                if (!this._pressedItemSelected) {
+                    this._deactivateCellEditor();
+                    this.forceUpdate();
+                }
+            },
+            selectBetween: (rowIndex1, rowIndex2) => {
+                const selections = [];
+                const lowerNumber = rowIndex1 < rowIndex2 ? rowIndex1 : rowIndex2;
+                const higherNumber = rowIndex1 > rowIndex2 ? rowIndex1 : rowIndex2;
+                for (let i = lowerNumber; i <= higherNumber; i++) {
+                    // istanbul ignore else
+                    if (!this._selectedRowIndices.has(i)) {
+                        selections.push(i);
+                        this._selectedRowIndices.add(i);
+                    }
+                }
+                this.forceUpdate();
+                return selections;
+            },
+            updateSelection: (selections, deselections) => {
+                for (const rowIndex of selections) {
+                    // istanbul ignore else
+                    if (!this._selectedRowIndices.has(rowIndex))
+                        this._selectedRowIndices.add(rowIndex);
+                }
+                for (const rowIndex of deselections) {
+                    // istanbul ignore else
+                    if (this._selectedRowIndices.has(rowIndex))
+                        this._selectedRowIndices.delete(rowIndex);
+                }
+                this.forceUpdate();
+            },
+            areEqual: (item1, item2) => item1 === item2,
+        };
+        this._cellComponentSelectionHandler = {
+            deselectAll: () => {
+                this._selectedCellKeys = new Map();
+                this.forceUpdate();
+            },
+            selectBetween: (item1, item2) => {
+                const selections = [];
+                const lowerIndex = item1.rowIndex < item2.rowIndex ? item1.rowIndex : item2.rowIndex;
+                const higherIndex = item1.rowIndex > item2.rowIndex ? item1.rowIndex : item2.rowIndex;
+                let secondItem;
+                let firstItemFound = false;
+                let secondItemFound = false;
+                for (let rowIndex = lowerIndex; rowIndex <= higherIndex; rowIndex++) {
+                    for (const column of this.state.columns) {
+                        if (!firstItemFound) {
+                            if (rowIndex === item1.rowIndex && column.key === item1.columnKey) {
+                                firstItemFound = true;
+                                secondItem = item2;
+                            }
+                            else {
+                                // istanbul ignore else
+                                if (rowIndex === item2.rowIndex && column.key === item2.columnKey) {
+                                    firstItemFound = true;
+                                    secondItem = item1;
+                                }
+                                else
+                                    continue;
+                            }
+                        }
+                        const cellKey = { rowIndex, columnKey: column.key };
+                        if (!this.isCellSelected(cellKey))
+                            selections.push(cellKey);
+                        if (rowIndex === secondItem.rowIndex && column.key === secondItem.columnKey) {
+                            secondItemFound = true;
+                            break;
+                        }
+                    }
+                    if (secondItemFound)
+                        break;
+                }
+                this.selectCells(selections);
+                this.forceUpdate();
+                return selections;
+            },
+            updateSelection: (selections, deselections) => {
+                this.selectCells(selections);
+                this.deselectCells(deselections);
+                this.forceUpdate();
+            },
+            areEqual: (item1, item2) => item1.rowIndex === item2.rowIndex && item1.columnKey === item2.columnKey,
+        };
+        this._rowGetter = (i) => {
+            if (this.state.rows[i])
+                return this.state.rows[i];
+            // get another page of rows
+            // note: always start loading at the beginning of a page to avoid
+            // requesting duplicate data (e.g. a page that starts at 0, at 1, at 2, ...)
+            this._rowGetterAsync(i - (i % this._pageAmount)); // eslint-disable-line @typescript-eslint/no-floating-promises
+            // Return placeholder object
+            return { item: { key: "", cells: [] }, index: i, cells: {} };
+        };
+        this._rowGetterAsync = (0, lodash_1.memoize)(async (index) => {
+            // istanbul ignore next
+            if (index < 0)
+                return;
+            // load up to `this._pageAmount` more rows
+            const maxIndex = Math.min(this.state.rowsCount, index + this._pageAmount);
+            const loadResult = await this.loadRows(index, maxIndex);
+            // istanbul ignore next
+            if (!this._isMounted)
+                return;
+            // istanbul ignore next
+            if (this._pendingUpdate !== 0 /* None */)
+                return;
+            const selectedRowIndices = this._selectedRowIndices;
+            for (const rowIndex of loadResult.selectedRowIndices) {
+                // istanbul ignore else
+                if (!selectedRowIndices.has(rowIndex))
+                    selectedRowIndices.add(rowIndex);
+            }
+            this._selectedRowIndices = selectedRowIndices;
+            this.selectCells(loadResult.selectedCellKeys);
+            this.setState((prev) => {
+                const rows = [...prev.rows];
+                loadResult.rows.forEach((r, i) => { rows[index + i] = r; });
+                return { rows };
+            }, async () => {
+                if (this.props.onRowsLoaded)
+                    this.props.onRowsLoaded(index, index + loadResult.rows.length - 1);
+                const showFilter = this._isShowFilterRow();
+                if (showFilter !== this._filterRowShown)
+                    this.toggleFilterRow(showFilter);
+            });
+        });
+        this._handleGridSort = (columnKey, sortDirection) => {
+            let directionEnum;
+            switch (sortDirection) {
+                case "ASC":
+                    directionEnum = core_react_1.SortDirection.Ascending;
+                    break;
+                case "DESC":
+                    directionEnum = core_react_1.SortDirection.Descending;
+                    break;
+                case "NONE":
+                default:
+                    directionEnum = core_react_1.SortDirection.NoSort;
+                    break;
+            }
+            // Sort the column
+            this.gridSortAsync(columnKey, directionEnum); // eslint-disable-line @typescript-eslint/no-floating-promises
+            this._queuePokeScroll();
+        };
+        this._createRowRenderer = () => {
+            return (props) => {
+                // istanbul ignore next
+                const renderRow = this.props.renderRow ? this.props.renderRow : this.renderRow;
+                const { row: rowProps, ...reactDataGridRowProps } = props;
+                if (this._tableSelectionTarget === TableSelectionTarget.Row) {
+                    const selectionFunction = this._rowSelectionHandler.createSelectionFunction(this._rowComponentSelectionHandler, this.createRowItemSelectionHandler(props.row.index));
+                    const onClick = (e) => selectionFunction(e.shiftKey, e.ctrlKey);
+                    const onMouseDown = () => {
+                        this._rowSelectionHandler.createDragAction(this._rowComponentSelectionHandler, [this.rowItemSelectionHandlers], props.row.index);
+                    };
+                    const onMouseMove = (e) => {
+                        // istanbul ignore else
+                        if (e.buttons === 1)
+                            this._rowSelectionHandler.updateDragAction(props.row.index);
+                    };
+                    const isSelected = this._selectedRowIndices.has(props.row.index);
+                    const cells = this.createRowCells(rowProps, isSelected);
+                    const row = renderRow(rowProps.item, { ...reactDataGridRowProps, cells, isSelected });
+                    return React.createElement("div", { className: (0, classnames_1.default)("components-table-row"), onClickCapture: onClick, onMouseMove: onMouseMove, onMouseDown: onMouseDown, style: props.row.style, role: "presentation" }, row);
+                }
+                else {
+                    const cells = this.createRowCells(rowProps, false);
+                    return renderRow(rowProps.item, { ...reactDataGridRowProps, cells });
+                }
+            };
+        };
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        this.renderRow = (item, props) => {
+            return React.createElement(TableRow, { key: item.key, ...props });
+        };
+        this._onMouseUp = () => {
+            if (this._tableSelectionTarget === TableSelectionTarget.Row)
+                this._rowSelectionHandler.completeDragAction();
+            else
+                this._cellSelectionHandler.completeDragAction();
+        };
+        this._onMouseDown = () => {
+            document.addEventListener("mouseup", this._onMouseUp, { capture: true, once: true });
+        };
+        this._onHeaderDrop = (source, target) => {
+            const cols = [...this.state.columns];
+            const columnSourceIndex = this.state.columns.findIndex((i) => i.key === source);
+            const columnTargetIndex = this.state.columns.findIndex((i) => i.key === target);
+            cols.splice(columnTargetIndex, 0, cols.splice(columnSourceIndex, 1)[0]);
+            // istanbul ignore else
+            if (this.props.settingsIdentifier) {
+                const stateStorage = this.props.settingsStorage || /* istanbul ignore next */ new core_react_1.LocalStateStorage();
+                const keys = cols.map((col) => col.key);
+                stateStorage.saveSetting(this.props.settingsIdentifier, "ColumnReorder", keys); // eslint-disable-line @typescript-eslint/no-floating-promises
+            }
+            this.setState({ columns: [] }, () => {
+                this.setState({ columns: cols });
+            });
+        };
+        this._deactivateCellEditor = () => {
+            if (this.state.cellEditorState.active)
+                this.setState({ cellEditorState: { active: false } }, () => setTimeout(() => this.setFocusToSelected()));
+        };
+        this._onCellCommit = async (args) => {
+            // istanbul ignore else
+            if (this.props.onPropertyUpdated) {
+                const cellUpdatedArgs = {
+                    rowIndex: this.state.cellEditorState.rowIndex,
+                    colIndex: this.state.cellEditorState.colIndex,
+                    cellKey: this.state.cellEditorState.cellKey,
+                };
+                const allowed = await this.props.onPropertyUpdated(args, cellUpdatedArgs);
+                // istanbul ignore else
+                if (allowed && this.state.cellEditorState.rowIndex !== undefined && this.state.cellEditorState.rowIndex >= 0) {
+                    this._deactivateCellEditor();
+                    await this.updateRows();
+                }
+                else {
+                    this._deactivateCellEditor();
+                }
+            }
+        };
+        this._getVisibleColumns = () => {
+            return this.state.columns
+                .filter((tableColumn) => this.state.hiddenColumns.indexOf(tableColumn.key) === -1)
+                .map((tableColumn) => tableColumn.reactDataGridColumn);
+        };
+        this._handleShowHideContextMenu = (e) => {
+            const header = e.currentTarget.querySelector(".react-grid-Header");
+            // istanbul ignore else
+            if (header) {
+                const headerRect = header.getBoundingClientRect();
+                const offsetY = headerRect.top;
+                const height = headerRect.height;
+                const x = e.clientX, y = e.clientY;
+                // istanbul ignore else
+                if (y < offsetY + height) {
+                    e.preventDefault();
+                    this.setState({
+                        menuX: x, menuY: y,
+                        menuVisible: true,
+                    });
+                }
+            }
+        };
+        this._hideContextMenu = () => {
+            // istanbul ignore else
+            if (this.props.showHideColumns)
+                this.setState({ menuVisible: false });
+        };
+        // istanbul ignore next
+        this._handleShowHideChange = (cols) => {
+            this.setState({ hiddenColumns: cols });
+            if (this.props.settingsIdentifier) {
+                const stateStorage = this.props.settingsStorage || new core_react_1.LocalStateStorage();
+                stateStorage.saveSetting(this.props.settingsIdentifier, "ColumnShowHideHiddenColumns", cols); // eslint-disable-line @typescript-eslint/no-floating-promises
+            }
+            return true;
+        };
+        // istanbul ignore next
+        this._onDialogOpen = (dialogState) => this.setState({ dialog: dialogState });
+        // istanbul ignore next
+        this._onDialogClose = () => this.setState({ dialog: undefined });
+        this._handleFilterChange = (filter) => {
+            const columnKey = filter.column.key;
+            const tableColumn = this.state.columns.find((column) => column.key === columnKey);
+            // istanbul ignore else
+            if (tableColumn) {
+                setTimeout(async () => {
+                    await DataGridFilterParser_1.DataGridFilterParser.handleFilterChange(filter, tableColumn.columnFilterDescriptor, tableColumn.columnDescription, this._applyFilter);
+                });
+            }
+        };
+        // istanbul ignore next
+        this._handleOnClearFilters = () => {
+            this.filterDescriptors.clear();
+            this._applyFilter(); // eslint-disable-line @typescript-eslint/no-floating-promises
+        };
+        this._applyFilter = async () => {
+            // istanbul ignore else
+            if (this.props.dataProvider.applyFilterDescriptors) {
+                await this.props.dataProvider.applyFilterDescriptors(this.filterDescriptors);
+                await this.updateRows();
+                // istanbul ignore else
+                if (this.props.onApplyFilter)
+                    this.props.onApplyFilter();
+            }
+        };
+        // istanbul ignore next
+        this._getValidFilterValues = (columnKey) => {
+            const tableColumn = this.state.columns.find((column) => column.reactDataGridColumn.key === columnKey);
+            if (tableColumn && tableColumn.distinctValueCollection) {
+                return tableColumn.distinctValueCollection.values;
+            }
+            return [];
+        };
+        // TODO: Enable, when table gets refactored. Explanation in ./../table/NonPrimitiveValueRenderer
+        // private _onPopupShow = (popupState: PropertyPopupState) => this.setState({ popup: popupState });
+        // private _onPopupHide = () =>  this.setState({ popup: undefined });
+        // istanbul ignore next
+        this._onScroll = (scrollData) => {
+            this._topRowIndex = scrollData.rowVisibleStartIdx;
+            if (this.props.onScrollToRow)
+                this.props.onScrollToRow(scrollData.rowVisibleStartIdx);
+        };
+        this._onKeyboardEvent = (e, keyDown) => {
+            if ((0, core_react_1.isNavigationKey)(e.key) && !this.state.cellEditorState.active && !this.isFocusOnInputElement()) {
+                if (this._tableSelectionTarget === TableSelectionTarget.Row) {
+                    const handleKeyboardSelectItem = (index) => {
+                        const selectionFunction = this._rowSelectionHandler.createSelectionFunction(this._rowComponentSelectionHandler, this.createRowItemSelectionHandler(index));
+                        selectionFunction(e.shiftKey, e.ctrlKey);
+                    };
+                    const handleKeyboardActivateItem = (index) => {
+                        // istanbul ignore else
+                        if (this.state.keyboardEditorCellKey) {
+                            const columnIndex = this.getColumnIndexFromKey(this.state.keyboardEditorCellKey);
+                            // istanbul ignore else
+                            if (0 <= columnIndex && columnIndex < this.state.columns.length) {
+                                const columnDescription = this.state.columns[columnIndex].columnDescription;
+                                // istanbul ignore else
+                                if (columnDescription && columnDescription.editable)
+                                    this.activateCellEditor(index, columnIndex, this.state.keyboardEditorCellKey);
+                            }
+                        }
+                    };
+                    const handleCrossAxisArrowKey = (forward) => {
+                        // istanbul ignore else
+                        if (this.state.keyboardEditorCellKey) {
+                            let newEditorCellKey;
+                            const columnIndex = this.getColumnIndexFromKey(this.state.keyboardEditorCellKey);
+                            // istanbul ignore else
+                            if (columnIndex >= 0) {
+                                let newColIndex = columnIndex;
+                                while (!newEditorCellKey) {
+                                    if (forward)
+                                        newColIndex++;
+                                    else
+                                        newColIndex--;
+                                    if (newColIndex < 0)
+                                        newColIndex = this.state.columns.length - 1;
+                                    else if (newColIndex >= this.state.columns.length)
+                                        newColIndex = 0;
+                                    // istanbul ignore next
+                                    if (newColIndex === columnIndex)
+                                        break;
+                                    const isEditable = this.state.columns[newColIndex].columnDescription.editable;
+                                    if (isEditable)
+                                        newEditorCellKey = this.state.columns[newColIndex].key;
+                                }
+                                // istanbul ignore else
+                                if (newEditorCellKey)
+                                    this.setState({ keyboardEditorCellKey: newEditorCellKey });
+                            }
+                        }
+                    };
+                    const itemKeyboardNavigator = new core_react_1.ItemKeyboardNavigator(handleKeyboardSelectItem, handleKeyboardActivateItem);
+                    itemKeyboardNavigator.orientation = core_react_1.Orientation.Vertical;
+                    itemKeyboardNavigator.allowWrap = false;
+                    itemKeyboardNavigator.itemCount = this.state.rowsCount;
+                    itemKeyboardNavigator.crossAxisArrowKeyHandler = handleCrossAxisArrowKey;
+                    const processedRow = this._rowSelectionHandler.processedItem ? this._rowSelectionHandler.processedItem /* istanbul ignore next */ : 0;
+                    keyDown ?
+                        itemKeyboardNavigator.handleKeyDownEvent(e, processedRow) :
+                        itemKeyboardNavigator.handleKeyUpEvent(e, processedRow);
+                }
+                else {
+                    const handleKeyboardSelectItem = (index) => {
+                        const processedCell = this._cellSelectionHandler.processedItem;
+                        // istanbul ignore else
+                        if (processedCell) {
+                            const cellKey = { rowIndex: index, columnKey: processedCell.columnKey };
+                            const selectionHandler = this.createCellItemSelectionHandler(cellKey);
+                            const selectionFunction = this._cellSelectionHandler.createSelectionFunction(this._cellComponentSelectionHandler, selectionHandler);
+                            selectionFunction(e.shiftKey, e.ctrlKey);
+                        }
+                    };
+                    const handleKeyboardActivateItem = (index) => {
+                        const processedCell = this._cellSelectionHandler.processedItem;
+                        // istanbul ignore else
+                        if (processedCell) {
+                            const columnIndex = this.getColumnIndexFromKey(processedCell.columnKey);
+                            // istanbul ignore else
+                            if (0 <= columnIndex && columnIndex < this.state.columns.length) {
+                                const columnDescription = this.state.columns[columnIndex].columnDescription;
+                                // istanbul ignore else
+                                if (columnDescription && columnDescription.editable)
+                                    this.activateCellEditor(index, columnIndex, processedCell.columnKey);
+                            }
+                        }
+                    };
+                    const handleCrossAxisArrowKey = (forward) => {
+                        const processedCell = this._cellSelectionHandler.processedItem;
+                        // istanbul ignore else
+                        if (processedCell) {
+                            const columnIndex = this.getColumnIndexFromKey(processedCell.columnKey);
+                            // istanbul ignore else
+                            if (columnIndex >= 0) {
+                                let newColIndex = columnIndex;
+                                if (forward)
+                                    newColIndex++;
+                                else
+                                    newColIndex--;
+                                if (newColIndex < 0)
+                                    newColIndex = this.state.columns.length - 1;
+                                else if (newColIndex >= this.state.columns.length)
+                                    newColIndex = 0;
+                                const columnKey = this.state.columns[newColIndex].key;
+                                const cellKey = { rowIndex: processedCell.rowIndex, columnKey };
+                                const selectionHandler = this.createCellItemSelectionHandler(cellKey);
+                                const selectionFunction = this._cellSelectionHandler.createSelectionFunction(this._cellComponentSelectionHandler, selectionHandler);
+                                selectionFunction(e.shiftKey, e.ctrlKey);
+                            }
+                        }
+                    };
+                    const itemKeyboardNavigator = new core_react_1.ItemKeyboardNavigator(handleKeyboardSelectItem, handleKeyboardActivateItem);
+                    itemKeyboardNavigator.orientation = core_react_1.Orientation.Vertical;
+                    itemKeyboardNavigator.allowWrap = false;
+                    itemKeyboardNavigator.itemCount = this.state.rowsCount;
+                    itemKeyboardNavigator.crossAxisArrowKeyHandler = handleCrossAxisArrowKey;
+                    const processedRow = this._cellSelectionHandler.processedItem ? this._cellSelectionHandler.processedItem.rowIndex : /* istanbul ignore next */ 0;
+                    keyDown ?
+                        itemKeyboardNavigator.handleKeyDownEvent(e, processedRow) :
+                        itemKeyboardNavigator.handleKeyUpEvent(e, processedRow);
+                }
+            }
+        };
+        this._onKeyDown = (e) => this._onKeyboardEvent(e, true);
+        this._onKeyUp = (e) => this._onKeyboardEvent(e, false);
+        if (props.pageAmount)
+            this._pageAmount = props.pageAmount;
+        this._disposableListeners.add(props.dataProvider.onColumnsChanged.addListener(this._onColumnsChanged));
+        this._disposableListeners.add(props.dataProvider.onRowsChanged.addListener(this._onRowsChanged));
+        this._rowSelectionHandler = new SelectionHandler_1.SelectionHandler(props.selectionMode ? props.selectionMode : SelectionModes_1.SelectionMode.Single);
+        this._cellSelectionHandler = new SelectionHandler_1.SelectionHandler(props.selectionMode ? props.selectionMode : SelectionModes_1.SelectionMode.Single);
+        this._rowSelectionHandler.onItemsSelectedCallback = this._onRowsSelected;
+        this._rowSelectionHandler.onItemsDeselectedCallback = this._onRowsDeselected;
+        this._cellSelectionHandler.onItemsSelectedCallback = this._onCellsSelected;
+        this._cellSelectionHandler.onItemsDeselectedCallback = this._onCellsDeselected;
+    }
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    get rowItemSelectionHandlers() {
+        // istanbul ignore else
+        if (!this._rowItemSelectionHandlers) {
+            this._rowItemSelectionHandlers = [];
+            for (let i = 0; i < this.state.rowsCount; i++)
+                this._rowItemSelectionHandlers.push(this.createRowItemSelectionHandler(i));
+        }
+        return this._rowItemSelectionHandlers;
+    }
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    get cellItemSelectionHandlers() {
+        // istanbul ignore else
+        if (!this._cellItemSelectionHandlers) {
+            this._cellItemSelectionHandlers = [];
+            for (let rowIndex = 0; rowIndex < this.state.rowsCount; rowIndex++) {
+                this._cellItemSelectionHandlers[rowIndex] = [];
+                for (const column of this.state.columns) {
+                    this._cellItemSelectionHandlers[rowIndex].push(this.createCellItemSelectionHandler({ rowIndex, columnKey: column.key }));
+                }
+            }
+        }
+        return this._cellItemSelectionHandlers;
+    }
+    async *createRowIterator(rowIndices) {
+        for (const index of rowIndices)
+            yield await this.props.dataProvider.getRow(index);
+    }
+    async *createCellIterator(cellKeys) {
+        for (const key of cellKeys) {
+            const row = await this.props.dataProvider.getRow(key.rowIndex);
+            yield [row, this._getCellItem(row, key.columnKey)];
+        }
+    }
+    get _tableSelectionTarget() {
+        return this.props.tableSelectionTarget ? this.props.tableSelectionTarget : TableSelectionTarget.Row;
+    }
+    /** @internal */
+    componentDidUpdate(previousProps, previousState) {
+        this._rowSelectionHandler.selectionMode = this.props.selectionMode ? this.props.selectionMode : SelectionModes_1.SelectionMode.Single;
+        this._cellSelectionHandler.selectionMode = this.props.selectionMode ? this.props.selectionMode : SelectionModes_1.SelectionMode.Single;
+        if (previousProps.dataProvider !== this.props.dataProvider) {
+            this._disposableListeners.dispose();
+            this._disposableListeners.add(this.props.dataProvider.onColumnsChanged.addListener(this._onColumnsChanged));
+            this._disposableListeners.add(this.props.dataProvider.onRowsChanged.addListener(this._onRowsChanged));
+        }
+        if (this.props.dataProvider !== previousProps.dataProvider) {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            this.update();
+            return;
+        }
+        // When hiddenColumns length is changed, we need to re-render component so that cell widths would be calculated appropriately.
+        if (previousState.hiddenColumns.length !== this.state.hiddenColumns.length)
+            this.forceUpdate();
+        if (this.props.isCellSelected !== previousProps.isCellSelected
+            || this.props.isRowSelected !== previousProps.isRowSelected
+            || this.props.tableSelectionTarget !== previousProps.tableSelectionTarget) {
+            this.updateSelectedRows();
+            this.updateSelectedCells();
+        }
+        if (this.props.scrollToRow !== previousProps.scrollToRow) {
+            // istanbul ignore else
+            if (this.props.scrollToRow !== undefined)
+                this.scrollToRow(this.props.scrollToRow);
+        }
+        /* istanbul ignore next */
+        if (this.props.onRender)
+            this.props.onRender();
+    }
+    /** @internal */
+    componentDidMount() {
+        let gridContainer = null;
+        this._isMounted = true;
+        // The previously used ReactResizeDetector, which does not work in popout/child windows, used deprecated React.findDomNode
+        // which is now deprecated so, so new ElementResizeObserver requires you to pass the element to observe. So get the
+        // same HTMLDivElement from grid as was used previously by ReactResizeDetector.
+        if (this._gridRef.current) {
+            const grid = this._gridRef.current;
+            gridContainer = grid.getDataGridDOMNode();
+        }
+        this.setState({ gridContainer }, () => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            this.update();
+        });
+    }
+    /** @internal */
+    componentWillUnmount() {
+        this._isMounted = false;
+        this._disposableListeners.dispose();
+        this._unsetPokeScrollTimeout();
+    }
+    scrollToRow(rowIndex) {
+        // istanbul ignore else
+        if (this._gridRef.current) {
+            const grid = this._gridRef.current;
+            // istanbul ignore else
+            if (grid.getRowOffsetHeight && grid.getDataGridDOMNode) {
+                const top = TABLE_ROW_HEIGHT * rowIndex;
+                const gridCanvas = grid.getDataGridDOMNode().querySelector(".react-grid-Canvas");
+                gridCanvas.scrollTop = top;
+                this._topRowIndex = rowIndex;
+                // istanbul ignore else
+                if (this.props.onScrollToRow)
+                    this.props.onScrollToRow(rowIndex);
+            }
+        }
+    }
+    setFocusToSelected() {
+        // istanbul ignore next
+        if (this._gridRef.current) {
+            const grid = this._gridRef.current;
+            // istanbul ignore else
+            if (grid.getDataGridDOMNode) {
+                const gridSelected = grid.getDataGridDOMNode().querySelector(".rdg-selected");
+                // istanbul ignore else
+                if (gridSelected) {
+                    gridSelected.focus();
+                }
+            }
+        }
+    }
+    async handlePendingUpdate() {
+        const update = this._pendingUpdate;
+        this._pendingUpdate = 0 /* None */;
+        let status = 0 /* Continue */;
+        if (update === 2 /* Complete */)
+            status = await this.updateColumns();
+        // istanbul ignore else
+        if (status === 0 /* Continue */ && update > 0 /* None */)
+            status = await this.updateRows();
+        return status;
+    }
+    async updateColumns() {
+        if (this._currentUpdate !== 0 /* None */) {
+            this._pendingUpdate = 2 /* Complete */;
+            return 1 /* Abort */;
+        }
+        this._currentUpdate = 2 /* Complete */;
+        const columnDescriptions = await this.props.dataProvider.getColumns();
+        this._currentUpdate = 0 /* None */;
+        // istanbul ignore next
+        if (!this._isMounted)
+            return 1 /* Abort */;
+        if (this._pendingUpdate === 2 /* Complete */) {
+            await this.handlePendingUpdate();
+            return 1 /* Abort */;
+        }
+        let dataGridColumns = columnDescriptions.map(this._columnDescriptionToReactDataGridColumn);
+        if (this.props.settingsIdentifier) {
+            const stateStorage = this.props.settingsStorage || /* istanbul ignore next */ this.props.uiStateStorage || /* istanbul ignore next */ new core_react_1.LocalStateStorage();
+            const reorderResult = await stateStorage.getSetting(this.props.settingsIdentifier, "ColumnReorder");
+            // istanbul ignore next
+            if (reorderResult.status === core_react_1.UiStateStorageStatus.Success) {
+                const setting = reorderResult.setting;
+                // map columns according to the keys in columns, in the order of the loaded array of keys
+                dataGridColumns = setting.map((key) => dataGridColumns.filter((col) => col.key === key)[0]);
+            }
+            else if (reorderResult.status === core_react_1.UiStateStorageStatus.NotFound) {
+                const keys = columnDescriptions.map((col) => col.key);
+                await stateStorage.saveSetting(this.props.settingsIdentifier, "ColumnReorder", keys);
+            }
+            const showhideResult = await stateStorage.getSetting(this.props.settingsIdentifier, "ColumnShowHideHiddenColumns");
+            // istanbul ignore next
+            if (showhideResult.status === core_react_1.UiStateStorageStatus.Success) {
+                const hiddenColumns = showhideResult.setting;
+                this.setState({ hiddenColumns });
+            }
+        }
+        let keyboardEditorCellKey;
+        const tableColumns = dataGridColumns.map((dataGridColumn, index) => {
+            const tableColumn = new TableColumn_1.TableColumn(this, columnDescriptions[index], dataGridColumn);
+            tableColumn.dataProvider = this.props.dataProvider;
+            if (!keyboardEditorCellKey && tableColumn.columnDescription.editable)
+                keyboardEditorCellKey = tableColumn.key;
+            if (tableColumn.filterable)
+                dataGridColumn.filterableColumn = tableColumn;
+            return tableColumn;
+        });
+        for (const tableColumn of tableColumns) {
+            if (tableColumn.filterable)
+                tableColumn.distinctValueCollection = await tableColumn.getDistinctValues(this.props.maximumDistinctValues);
+        }
+        this.setState({ columns: tableColumns, keyboardEditorCellKey });
+        if (this._pendingUpdate !== 0 /* None */) {
+            return this.handlePendingUpdate();
+        }
+        return 0 /* Continue */;
+    }
+    async updateRows() {
+        if (this._currentUpdate !== 0 /* None */) {
+            if (this._pendingUpdate === 0 /* None */)
+                this._pendingUpdate = 1 /* Rows */;
+            return 1 /* Abort */;
+        }
+        this._currentUpdate = 1 /* Rows */;
+        const rowsCount = await this.props.dataProvider.getRowsCount();
+        this._currentUpdate = 0 /* None */;
+        // istanbul ignore next
+        if (!this._isMounted)
+            return 1 /* Abort */;
+        if (this._pendingUpdate !== 0 /* None */) {
+            return this.handlePendingUpdate();
+        }
+        if (rowsCount !== this.state.rowsCount) {
+            this._rowItemSelectionHandlers = undefined;
+            this._cellItemSelectionHandlers = undefined;
+            // when updating the rows with new data from dataProvider clear out existing selections
+            this._selectedRowIndices.clear();
+            this._selectedCellKeys.clear();
+        }
+        this._rowGetterAsync.cache.clear();
+        this.setState({ rowsCount, rows: [] });
+        return 0 /* Continue */;
+    }
+    /** @internal */
+    async update() {
+        let status = await this.updateColumns();
+        if (status !== 1 /* Abort */)
+            status = await this.updateRows();
+        if (this.props.scrollToRow !== undefined)
+            this.scrollToRow(this.props.scrollToRow);
+        /* istanbul ignore next */
+        if (this.props.onRender)
+            this.props.onRender();
+        return status;
+    }
+    /** @internal */
+    updateSelectedRows() {
+        const selectedRowIndices = new Set();
+        if (this.props.isRowSelected) {
+            for (let rowIndex = 0; rowIndex < this.state.rows.length; rowIndex++) {
+                if (this.state.rows[rowIndex] && this.props.isRowSelected(this.state.rows[rowIndex].item))
+                    selectedRowIndices.add(rowIndex);
+            }
+        }
+        this._selectedRowIndices = selectedRowIndices;
+        this.forceUpdate();
+    }
+    /** @internal */
+    updateSelectedCells() {
+        const selectedCellKeys = new Map();
+        if (this.props.isCellSelected) {
+            for (const column of this.state.columns) {
+                const set = new Set();
+                for (let rowIndex = 0; rowIndex < this.state.rows.length; rowIndex++) {
+                    // istanbul ignore next
+                    if (!this.state.rows[rowIndex])
+                        continue;
+                    const cellItem = this._getCellItem(this.state.rows[rowIndex].item, column.key);
+                    if (this.props.isCellSelected(rowIndex, cellItem))
+                        set.add(rowIndex);
+                }
+                // istanbul ignore else
+                if (set.size !== 0)
+                    selectedCellKeys.set(column.key, set);
+            }
+        }
+        this._selectedCellKeys = selectedCellKeys;
+        this.forceUpdate();
+    }
+    isCellSelected(key) {
+        const set = this._selectedCellKeys.get(key.columnKey);
+        if (set)
+            return set.has(key.rowIndex);
+        return false;
+    }
+    selectCells(cellKeys) {
+        for (const key of cellKeys) {
+            let set = this._selectedCellKeys.get(key.columnKey);
+            if (!set) {
+                set = new Set();
+                this._selectedCellKeys.set(key.columnKey, set);
+            }
+            set.add(key.rowIndex);
+        }
+    }
+    deselectCells(cellKeys) {
+        for (const key of cellKeys) {
+            // istanbul ignore else
+            const set = this._selectedCellKeys.get(key.columnKey);
+            // istanbul ignore else
+            if (set)
+                set.delete(key.rowIndex);
+        }
+    }
+    createRowItemSelectionHandler(rowIndex) {
+        return {
+            preselect: () => {
+                this._pressedItemSelected = this._selectedRowIndices.has(rowIndex);
+            },
+            select: () => {
+                // istanbul ignore else
+                if (!this._selectedRowIndices.has(rowIndex)) {
+                    this._selectedRowIndices.add(rowIndex);
+                    if (!this._pressedItemSelected)
+                        this.forceUpdate();
+                }
+            },
+            deselect: () => {
+                // istanbul ignore else
+                if (this._selectedRowIndices.has(rowIndex)) {
+                    this._selectedRowIndices.delete(rowIndex);
+                    this.forceUpdate();
+                }
+            },
+            isSelected: () => this._selectedRowIndices.has(rowIndex),
+            item: () => rowIndex,
+        };
+    }
+    createCellItemSelectionHandler(cellKey) {
+        return {
+            preselect: () => {
+                this._pressedItemSelected = this.isCellSelected(cellKey);
+            },
+            select: () => {
+                this.selectCells([cellKey]);
+                this.forceUpdate();
+            },
+            deselect: () => {
+                this.deselectCells([cellKey]);
+                this.forceUpdate();
+            },
+            isSelected: () => this.isCellSelected(cellKey),
+            item: () => cellKey,
+        };
+    }
+    async renderCellContent(cellItem, column, displayValue) {
+        if (column.icon)
+            return () => React.createElement(TableCell_1.TableIconCellContent, { iconName: displayValue });
+        return (props) => {
+            var _a;
+            return (React.createElement(TableCell_1.TableCellContent, { height: TABLE_ROW_HEIGHT, isSelected: props.isSelected, cellItem: cellItem, onDialogOpen: this._onDialogOpen, propertyValueRendererManager: this.props.propertyValueRendererManager
+                    ? this.props.propertyValueRendererManager
+                    : ValueRendererManager_1.PropertyValueRendererManager.defaultManager, style: { zIndex: (((_a = cellItem.mergedCellsCount) !== null && _a !== void 0 ? _a : 1) > 1) ? 1 : undefined } }));
+        };
+    }
+    async getCellDisplayValue(cellItem) {
+        var _a;
+        // istanbul ignore next
+        if (!cellItem.record || cellItem.record.value.valueFormat !== appui_abstract_1.PropertyValueFormat.Primitive)
+            return "";
+        const value = cellItem.record.value.value;
+        if (value === undefined)
+            return "";
+        const displayValue = await TypeConverterManager_1.TypeConverterManager
+            .getConverter(cellItem.record.property.typename, (_a = cellItem.record.property.converter) === null || _a === void 0 ? void 0 : _a.name)
+            .convertPropertyToString(cellItem.record.property, value);
+        return displayValue ? displayValue : /* istanbul ignore next */ "";
+    }
+    async createPropsForRowItem(item, index) {
+        const cellProps = {};
+        for (const column of this.state.columns) {
+            const cellItem = this._getCellItem(item, column.key);
+            const displayValue = await this.getCellDisplayValue(cellItem);
+            cellProps[column.key] = {
+                item: cellItem,
+                displayValue,
+                render: await this.renderCellContent(cellItem, column.reactDataGridColumn, displayValue),
+            };
+        }
+        const rowStyle = ItemStyle_1.TableRowStyleProvider.createStyle(item.colorOverrides ? item.colorOverrides : {});
+        return {
+            item,
+            index,
+            cells: cellProps,
+            render: undefined,
+            style: rowStyle,
+        };
+    }
+    async loadRows(beginIndex, endIndex) {
+        const result = {
+            rows: [],
+            selectedRowIndices: [],
+            selectedCellKeys: [],
+        };
+        this._rowLoadGuid = core_bentley_1.Guid.createValue();
+        const currentSelectedRowGuid = this._rowLoadGuid;
+        const promises = new Array();
+        for (let i = beginIndex; i < endIndex; ++i) {
+            promises.push(this.props.dataProvider.getRow(i).then(async (rowData) => this.createPropsForRowItem(rowData, i).then((rowProps) => (rowProps))));
+        }
+        try {
+            result.rows = await Promise.all(promises);
+        }
+        catch { }
+        // istanbul ignore else
+        // Check if another loadRows got called while this one was still going
+        if (currentSelectedRowGuid === this._rowLoadGuid) {
+            for (const rowProps of result.rows) {
+                if (this.props.isRowSelected && this.props.isRowSelected(rowProps.item))
+                    result.selectedRowIndices.push(rowProps.index);
+                if (this.props.isCellSelected) {
+                    for (const column of this.state.columns) {
+                        const cellItem = this._getCellItem(rowProps.item, column.key);
+                        if (this.props.isCellSelected(rowProps.index, cellItem))
+                            result.selectedCellKeys.push({ rowIndex: rowProps.index, columnKey: column.key });
+                    }
+                }
+            }
+        }
+        return result;
+    }
+    getColumnIndexFromKey(columnKey) {
+        return this.state.columns.findIndex((column) => column.key === columnKey);
+    }
+    async gridSortAsync(columnKey, directionEnum) {
+        const columnIndex = this.getColumnIndexFromKey(columnKey);
+        // istanbul ignore next
+        if (columnIndex < 0)
+            return;
+        await this.props.dataProvider.sort(columnIndex, directionEnum);
+        // istanbul ignore next
+        if (!this._isMounted)
+            return;
+        this.updateRows(); // eslint-disable-line @typescript-eslint/no-floating-promises
+    }
+    createRowCells(rowProps, isSelected) {
+        var _a;
+        const cells = {};
+        let gridColumns = [];
+        let foundHiddenColumns = 0;
+        // istanbul ignore else
+        if (this._gridRef.current && this._gridRef.current.getDataGridDOMNode)
+            gridColumns = this._gridRef.current.getDataGridDOMNode().querySelectorAll(".react-grid-HeaderCell");
+        for (let index = 0; index < this.state.columns.length; index++) {
+            const column = this.state.columns[index];
+            const cellProps = rowProps.cells[column.key];
+            if (!cellProps) {
+                continue;
+            }
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            const CellContent = cellProps.render;
+            const isEditorCell = this.state.cellEditorState.active
+                && this.state.cellEditorState.rowIndex === rowProps.index
+                && this.state.cellEditorState.colIndex === index
+                && cellProps.item.record;
+            let onClick;
+            let onMouseMove;
+            let onMouseDown;
+            let className;
+            const cellKey = { rowIndex: rowProps.index, columnKey: column.key };
+            if (this._tableSelectionTarget === TableSelectionTarget.Cell) {
+                const selectionHandler = this.createCellItemSelectionHandler(cellKey);
+                const selectionFunction = this._cellSelectionHandler.createSelectionFunction(this._cellComponentSelectionHandler, selectionHandler);
+                onClick = (e) => selectionFunction(e.shiftKey, e.ctrlKey);
+                onMouseMove = (e) => {
+                    // istanbul ignore else
+                    if (e.buttons === 1)
+                        this._cellSelectionHandler.updateDragAction(cellKey);
+                };
+                onMouseDown = () => {
+                    this._cellSelectionHandler.createDragAction(this._cellComponentSelectionHandler, this.cellItemSelectionHandlers, cellKey);
+                };
+                className = (0, classnames_1.default)({ "is-selected": this.isCellSelected(cellKey) });
+            }
+            else {
+                if (this._selectedRowIndices.has(rowProps.index))
+                    className = (0, classnames_1.default)({ "is-keyboard-editable": this.state.keyboardEditorCellKey === column.key });
+            }
+            className = (0, classnames_1.default)(className, this.getCellBorderStyle(cellKey));
+            const mergedAdjacentCellsCount = ((_a = cellProps.item.mergedCellsCount) !== null && _a !== void 0 ? _a : 1) - 1;
+            let cellWidth = 0;
+            for (let i = 0; i <= mergedAdjacentCellsCount; i++) {
+                const col = this.state.columns[index + i];
+                if (this.state.hiddenColumns.indexOf(col.key) === -1) {
+                    const gridColumn = gridColumns[index + i - foundHiddenColumns];
+                    const gridColumnWidth = gridColumn ? gridColumn.getBoundingClientRect().width : 0;
+                    cellWidth += gridColumnWidth;
+                }
+                else {
+                    foundHiddenColumns++;
+                }
+                if (i > 0) {
+                    cells[col.key] = (React.createElement(TableCell_1.TableCell, { className: className.replace("border-bottom", ""), title: "empty-cell", onClick: onClick, onMouseMove: onMouseMove, onMouseDown: onMouseDown }));
+                }
+                const mergedColumn = this.state.columns[index + i];
+                const emptyCellKey = { rowIndex: rowProps.index, columnKey: mergedColumn.key };
+                className = (0, dedupe_1.default)(className, this.getCellBorderStyle(emptyCellKey));
+            }
+            index += mergedAdjacentCellsCount;
+            cells[column.key] = (React.createElement(TableCell_1.TableCell, { className: className, title: cellProps.displayValue, onClick: onClick, onMouseMove: onMouseMove, onMouseDown: onMouseDown, cellEditingProps: isEditorCell ? {
+                    onCancel: this._deactivateCellEditor,
+                    onCommit: this._onCellCommit,
+                    propertyRecord: cellProps.item.record,
+                    setFocus: true,
+                } : undefined, style: { width: (mergedAdjacentCellsCount > 0) ? cellWidth : undefined } },
+                React.createElement(CellContent, { isSelected: isSelected })));
+        }
+        return cells;
+    }
+    getCellBorderStyle(key) {
+        const isCellSelected = (cellKey) => {
+            if (this._tableSelectionTarget === TableSelectionTarget.Row) {
+                return this._selectedRowIndices.has(cellKey.rowIndex);
+            }
+            return this.isCellSelected(cellKey);
+        };
+        const cellIsSelected = isCellSelected(key);
+        const columnIndex = this.state.columns.findIndex((column) => key.columnKey === column.key);
+        const isTopBorderVisible = () => {
+            if (key.rowIndex === 0) {
+                return cellIsSelected;
+            }
+            if (cellIsSelected) {
+                return !isCellSelected({ rowIndex: key.rowIndex - 1, columnKey: key.columnKey });
+            }
+            // Bottom border is rendered by drawing the top border on the node below
+            // Check if the node above needs its bottom border drawn
+            return isCellSelected({ rowIndex: key.rowIndex - 1, columnKey: key.columnKey });
+        };
+        const isRightBorderVisible = () => {
+            if (!cellIsSelected) {
+                return false;
+            }
+            if (columnIndex === this.state.columns.length - 1) {
+                return true;
+            }
+            return !isCellSelected({ rowIndex: key.rowIndex, columnKey: this.state.columns[columnIndex + 1].key });
+        };
+        const isBottomBorderVisible = () => {
+            return cellIsSelected && key.rowIndex === this.state.rowsCount - 1;
+        };
+        const isLeftBorderVisible = () => {
+            if (!cellIsSelected) {
+                return false;
+            }
+            if (columnIndex === 0) {
+                return true;
+            }
+            return !isCellSelected({ rowIndex: key.rowIndex, columnKey: this.state.columns[columnIndex - 1].key });
+        };
+        return (0, classnames_1.default)({
+            "border-top": isTopBorderVisible(),
+            "border-right": isRightBorderVisible(),
+            "border-bottom": isBottomBorderVisible(),
+            "border-left": isLeftBorderVisible(),
+        });
+    }
+    cellEditOnClick(column, _ev, args) {
+        // Prevent editing when property record is not primitive
+        // istanbul ignore else
+        if (this.state.rows[args.rowIdx]) {
+            const record = this._getCellItem(this.state.rows[0].item, column.key).record;
+            // istanbul ignore next
+            if (record && record.value.valueFormat !== appui_abstract_1.PropertyValueFormat.Primitive)
+                return;
+        }
+        if (this.state.keyboardEditorCellKey !== column.key)
+            this.setState({ keyboardEditorCellKey: column.key });
+        let activate = false;
+        if (this._pressedItemSelected)
+            activate = true;
+        if (activate)
+            this.activateCellEditor(args.rowIdx, args.idx, column.key);
+        else
+            this._deactivateCellEditor();
+    }
+    cellContextMenu(column, e, args) {
+        // istanbul ignore else
+        if (this.props.onCellContextMenu) {
+            const contextMenuArgs = {
+                rowIndex: args.rowIdx,
+                colIndex: args.idx,
+                cellKey: column.key,
+                event: e,
+            };
+            // istanbul ignore else
+            if (this.state.rows[args.rowIdx])
+                contextMenuArgs.cellItem = this._getCellItem(this.state.rows[args.rowIdx].item, column.key);
+            e.preventDefault();
+            this.props.onCellContextMenu(contextMenuArgs);
+        }
+    }
+    activateCellEditor(rowIndex, colIndex, cellKey) {
+        const cellEditorState = { active: true, rowIndex, colIndex, cellKey };
+        // istanbul ignore else
+        if (cellEditorState !== this.state.cellEditorState) {
+            this.setState({ cellEditorState }, () => {
+                // istanbul ignore else
+                if (this.props.onPropertyEditing)
+                    this.props.onPropertyEditing(cellEditorState);
+            });
+        }
+    }
+    /** @internal */
+    shouldComponentUpdate(_props) {
+        return true;
+    }
+    _isShowFilterRow() {
+        return this.state.columns.some((tableColumn) => tableColumn.filterable);
+    }
+    /** Turn on/off filter row */
+    toggleFilterRow(showFilter) {
+        // istanbul ignore else
+        if (this._gridRef.current) {
+            const grid = this._gridRef.current;
+            // istanbul ignore else
+            if (grid.onToggleFilter && showFilter !== this._filterRowShown) {
+                grid.onToggleFilter();
+                this._filterRowShown = showFilter;
+            }
+        }
+    }
+    /** Gets the filter descriptors for the table.
+     * @internal
+     */
+    get filterDescriptors() {
+        if (undefined === this._filterDescriptors) {
+            this._filterDescriptors = new TableFilterDescriptorCollection_1.TableFilterDescriptorCollection();
+            this._filterDescriptors.logicalOperator = ColumnFiltering_1.FilterCompositionLogicalOperator.And;
+        }
+        return this._filterDescriptors;
+    }
+    /** Gets ECExpression to get property display value.
+     * @internal
+     */
+    // istanbul ignore next
+    getPropertyDisplayValueExpression(property) {
+        if (this.props.dataProvider.getPropertyDisplayValueExpression !== undefined)
+            return this.props.dataProvider.getPropertyDisplayValueExpression(property);
+        return property;
+    }
+    /** Determines if focus is in an input element - for filter checking */
+    isFocusOnInputElement() {
+        const element = document.activeElement;
+        return element &&
+            (element instanceof HTMLInputElement ||
+                element instanceof HTMLSelectElement ||
+                element instanceof HTMLTextAreaElement);
+    }
+    /** @internal */
+    render() {
+        const rowRenderer = React.createElement(TableRowRenderer, { rowRendererCreator: () => this._createRowRenderer() });
+        const visibleColumns = this._getVisibleColumns();
+        const tableClassName = (0, classnames_1.default)("components-table", "components-smallEditor-host", this.props.className, {
+            "hide-header": this.props.hideHeader,
+            "striped-rows": this.props.stripedRows,
+            "row-selection": this._tableSelectionTarget === TableSelectionTarget.Row,
+            "cell-selection": this._tableSelectionTarget === TableSelectionTarget.Cell,
+        });
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: tableClassName, style: this.props.style, onMouseDown: this._onMouseDown, onContextMenu: this.props.showHideColumns ? this._handleShowHideContextMenu : undefined, onKeyDown: this._onKeyDown, onKeyUp: this._onKeyUp, role: "presentation" },
+                this.props.showHideColumns &&
+                    React.createElement(ShowHideMenu_1.ShowHideMenu, { opened: this.state.menuVisible, items: this.state.columns.map((column) => ({ id: column.key, label: column.reactDataGridColumn.name })), x: this.state.menuX, y: this.state.menuY, initialHidden: this.state.hiddenColumns, onClose: this._hideContextMenu, onShowHideChange: this._handleShowHideChange }),
+                React.createElement(core_react_1.ElementResizeObserver, { watchedElement: this.state.gridContainer, render: ({ width, height }) => {
+                        setTimeout(() => this._queuePokeScroll());
+                        return (React.createElement(react_data_grid_1.default, { ref: this._gridRef, columns: visibleColumns, rowGetter: this._rowGetter, rowRenderer: rowRenderer, rowsCount: this.state.rowsCount, ...(this.props.reorderableColumns ? {
+                                draggableHeaderCell: DragDropHeaderCell_1.DragDropHeaderCell,
+                                onHeaderDrop: this._onHeaderDrop,
+                            } : {}), minHeight: height, minWidth: width, headerRowHeight: TABLE_ROW_HEIGHT, rowHeight: TABLE_ROW_HEIGHT, onGridSort: this._handleGridSort, enableRowSelect: null, onAddFilter: this._handleFilterChange, onClearFilters: this._handleOnClearFilters, headerFiltersHeight: TABLE_FILTER_ROW_HEIGHT, getValidFilterValues: this._getValidFilterValues, onScroll: this._onScroll }));
+                    } })),
+            React.createElement("div", { ref: this._tableRef }, this.state.dialog
+                ?
+                    // istanbul ignore next
+                    React.createElement(core_react_1.Dialog, { opened: true, onClose: this._onDialogClose, title: this.state.dialog.title, height: "50vh" }, this.state.dialog.content)
+                : undefined)));
+    }
+}
+exports.Table = Table;
+/**
+ * Default component for rendering a row for the Table
+ * @internal
+ */
+class TableRow extends React.Component {
+    /** @internal */
+    render() {
+        const { cells, isSelected, ...props } = this.props;
+        return (React.createElement(react_data_grid_1.default.Row, { ...props, row: cells, isSelected: isSelected }));
+    }
+}
+exports.TableRow = TableRow;
+//# sourceMappingURL=Table.js.map