@sap-ux/ui-components 1.13.5 → 1.14.1

package/dist/components/UITable/UITable.js

@@ -1,780 +1,780 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UITable = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@fluentui/react");
-const UICheckbox_1 = require("../UICheckbox");
-const UIInput_1 = require("../UIInput");
-const UIDropdown_1 = require("../UIDropdown");
-const UIComboBox_1 = require("../UIComboBox");
-const UIDatePicker_1 = require("../UIDatePicker");
-const UITable_helper_1 = require("./UITable-helper");
-const types_1 = require("./types");
-require("./UITable.scss");
-/**
- * UITable component
- * based on: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist
- *
- * @exports
- * @class {UITable}
- * @extends {React.Component<UITableProps, UITableState>}
- */
-class UITable extends react_1.default.Component {
-    /**
-     * Initializes component properties.
-     *
-     * @param props
-     */
-    constructor(props) {
-        super(props);
-        this.inputRefs = {};
-        this.activeElement = {};
-        this.caretPosition = -1;
-        this._onRenderRow = (props) => {
-            if (!props) {
-                return null;
-            }
-            const toggle = !!this.props.renderInputs;
-            return react_1.default.createElement(react_2.DetailsRow, { "data-selection-toggle": toggle, rowFieldsAs: this.renderRowFields.bind(this), ...props });
-        };
-        this.onComboBoxChange = (option) => {
-            this.setState((prevState) => {
-                const editedCell = prevState.editedCell ?? this.activeElement;
-                if (editedCell && option) {
-                    editedCell.newValue = option.text;
-                }
-                return { editedCell };
-            });
-        };
-        this.onDropdownCellValueChange = (selectedOption, item, rowIndex, column) => {
-            const newValue = selectedOption.key;
-            if (typeof this.props.onSave === 'function' &&
-                typeof rowIndex === 'number' &&
-                Number.isInteger(rowIndex) &&
-                column) {
-                const currentValue = this.props.items[rowIndex][column.key];
-                const editedCell = { rowIndex, item, column, errorMessage: undefined };
-                if (currentValue !== newValue) {
-                    this.props.onSave(editedCell, newValue);
-                }
-                const field = column?.fieldName;
-                if (field && item) {
-                    item[field] = newValue;
-                }
-            }
-            this.cancelEdit();
-        };
-        this.state = {
-            columns: props.columns || [],
-            items: props.items || []
-        };
-        this.tableRef = react_1.default.createRef();
-        this.selection = new react_2.Selection({
-            onSelectionChanged: () => {
-                if (typeof this.props.onSelectionChange !== 'function') {
-                    return;
-                }
-                this.props.onSelectionChange(this.selection.getSelectedIndices());
-            }
-        });
-        if (this.props.selectionRef) {
-            this.props.selectionRef.current = this.selection;
-        }
-        this.onTextInputChange = this.onTextInputChange.bind(this);
-        this.onComboBoxChange = this.onComboBoxChange.bind(this);
-        this.onDocumentMousedown = this.onDocumentMousedown.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-        this.onComboBoxKeyDownCapture = this.onComboBoxKeyDownCapture.bind(this);
-        this.validateCell = this.validateCell.bind(this);
-        this.editNextCell = this.editNextCell.bind(this);
-        this._onColumnClick = this._onColumnClick.bind(this);
-        this._onCellRender = this._onCellRender.bind(this);
-        this._onRenderCheckbox = this._onRenderCheckbox.bind(this);
-        this._onRenderField = this._onRenderField?.bind(this);
-        this._onRenderRow = this._onRenderRow?.bind(this);
-        this._onRenderItemColumn = this._onRenderItemColumn?.bind(this);
-        this._onCellActivation = this._onCellActivation?.bind(this);
-    }
-    componentDidMount() {
-        this.onDocMousedown = this.onDocumentMousedown;
-        document.addEventListener('mousedown', this.onDocMousedown, true);
-        window.dispatchEvent(new Event('resize'));
-        this._setTextRefs();
-    }
-    componentWillUnmount() {
-        document.removeEventListener('mousedown', this.onDocMousedown);
-    }
-    /**
-     * On component update.
-     *
-     * @param prevProps
-     * @param prevState
-     */
-    componentDidUpdate(prevProps, prevState) {
-        const scrollContainer = document.querySelector('.ms-ScrollablePane--contentContainer');
-        if (scrollContainer) {
-            const left = scrollContainer.scrollLeft || 0;
-            requestAnimationFrame(() => (scrollContainer.scrollLeft = left));
-        }
-        if (prevProps.items !== this.props.items) {
-            this.setState({ items: this.props.items });
-            this._setTextRefs();
-        }
-        if (prevProps.columns !== this.props.columns) {
-            this.setState({ columns: this.props.columns });
-        }
-        if (prevProps.dataSetKey !== this.props.dataSetKey) {
-            this.setState({ editedCell: undefined });
-        }
-        if (typeof this.props.selectedRow !== 'undefined' && prevProps.selectedRow !== this.props.selectedRow) {
-            (0, UITable_helper_1.scrollToRow)(this.props.selectedRow, this.tableRef?.current);
-        }
-        if (this.props.scrollToAddedRow) {
-            const dataSetChanged = this.props.dataSetKey !== prevProps.dataSetKey;
-            const { items } = this.state;
-            const { items: prevItems } = prevState;
-            const itemsDelta = items.length - prevItems.length;
-            const shouldScrollToNewRow = !dataSetChanged && itemsDelta === 1;
-            if (shouldScrollToNewRow && this.tableRef && this.tableRef.current) {
-                const newRowIndex = items.length - 1;
-                this.tableRef.current.scrollToIndex(newRowIndex);
-            }
-        }
-        const { selectedColumnId } = this.props;
-        const { selectedColumnId: prevSelectedColumnId } = prevProps;
-        // Due to table rendering using columns data from state, instead of props,
-        // to sync selected column change callback with rendered dataset change
-        // selected column id/key needs to be stored on a state level along with columns data
-        if (selectedColumnId !== prevSelectedColumnId) {
-            this.setState({ selectedColumnId });
-        }
-        const columnIsSelected = typeof this.state.selectedColumnId !== 'undefined';
-        const selectedColumnDidChange = prevState.selectedColumnId !== this.state.selectedColumnId;
-        if (columnIsSelected && selectedColumnDidChange) {
-            (0, UITable_helper_1.scrollToColumn)(this.state.selectedColumnId || '', this.state.columns, this.props.selectedRow || 0, this.props.showRowNumbers);
-        }
-        this._restoreCaretPosition();
-    }
-    /**
-     * Restores the caret position. Caret position gets lost when validation finds issue in cell.
-     */
-    _restoreCaretPosition() {
-        const editedCell = this.state.editedCell;
-        if (this.caretPosition !== -1 && typeof editedCell?.rowIndex === 'number' && editedCell.column?.key) {
-            const cell = (0, UITable_helper_1.getCellFromCoords)(editedCell.rowIndex, editedCell.column.key, this.props.columns, true);
-            const input = cell.querySelector('input');
-            if (input && input.selectionStart !== this.caretPosition) {
-                input.setSelectionRange(this.caretPosition, this.caretPosition);
-                this.caretPosition = -1;
-            }
-        }
-    }
-    _setTextRefs() {
-        if (this.props.columns && this.props.items) {
-            for (const rowIndexTmp in this.props.items) {
-                for (const col of this.props.columns) {
-                    if (col.editable === true && this.inputRefs) {
-                        this.inputRefs[rowIndexTmp] = this.inputRefs[rowIndexTmp] || {};
-                        this.inputRefs[rowIndexTmp][col.key] = react_1.default.createRef();
-                    }
-                }
-            }
-        }
-    }
-    /**
-     * On render row fields event.
-     *
-     * @param props
-     * @returns {JSX.Element}
-     */
-    renderRowFields(props) {
-        // disabled is set to false when selectionMode === undefined || selectionMode === SelectionMode.single
-        let disabled = false;
-        const selectionMode = this.props.selectionMode;
-        if (selectionMode === react_2.SelectionMode.multiple || selectionMode === react_2.SelectionMode.none) {
-            disabled = true;
-        }
-        return (react_1.default.createElement("div", { "data-selection-disabled": disabled },
-            react_1.default.createElement(react_2.DetailsRowFields, { ...props })));
-    }
-    /**
-     * On render field event.
-     *
-     * @param props
-     * @param defaultRender
-     * @returns {null | JSX.Element}
-     */
-    _onRenderField(props, defaultRender) {
-        if (!props || !defaultRender) {
-            return null;
-        }
-        const cell = defaultRender(props);
-        const onClick = (e) => {
-            const target = e?.target;
-            const targetTag = target?.tagName;
-            if (['INPUT', 'TEXTAREA', 'SELECT'].includes(targetTag)) {
-                return;
-            }
-            const { item, rowIndex, column } = this.activeElement;
-            this._onCellClick(e, item, rowIndex || 0, column);
-        };
-        // in app-migrator, show a warning message for library projects on main migration view
-        if (props.item.hideCells && props.column.fieldName === 'moduleName' && !props.item.status) {
-            return (react_1.default.createElement("div", { ...(cell?.props || {}), "data-is-focusable": true, onClick: onClick, tabIndex: "0" },
-                cell?.props?.children || null,
-                react_1.default.createElement("div", { className: "table-item-warning" }, "This is a reuse library and does not require input during migration")));
-        }
-        else {
-            return (react_1.default.createElement("div", { ...(cell?.props || {}), "data-is-focusable": true, onClick: onClick, tabIndex: "0" }, cell?.props?.children || null));
-        }
-    }
-    // just sets the active element property on the table, to track it later
-    /**
-     * On cell activation event.
-     *
-     * @param item
-     * @param rowIndex
-     * @param ev
-     */
-    _onCellActivation(item, rowIndex, ev) {
-        const rowEl = ev?.target?.closest('.ms-DetailsRow');
-        let column = {};
-        const cells = rowEl?.querySelectorAll('.ms-DetailsRow-fields .ms-DetailsRow-cell');
-        if (!cells || !cells.length) {
-            return;
-        }
-        // focusing cell, not the row
-        const cellEl = ev?.target?.closest('.ms-DetailsRow-cell');
-        if (cellEl) {
-            const cellIdx = Array.from(cells).indexOf(cellEl);
-            if (cellIdx === -1) {
-                return;
-            }
-            column = this.props.columns[cellIdx];
-            if (!column) {
-                return;
-            }
-        }
-        this.activeElement = { item, rowIndex: rowIndex || 0, column };
-        if (this.props.renderInputs && column?.editable) {
-            const isDropdown = this.activeElement?.column?.columnControlType === types_1.ColumnControlType?.UIDropdown;
-            if (!isDropdown && this.state.editedCell?.column?.key !== this.activeElement?.column?.key) {
-                this.setState({ editedCell: this.activeElement });
-            }
-        }
-    }
-    /**
-     * On render item  column event.
-     *
-     * @param {UIDocument} item
-     * @param {number} index
-     * @param {UIColumn} column
-     * @returns {React.ReactNode}
-     */
-    _onRenderItemColumn(item, index, column) {
-        if (column?.key === '__row_number__') {
-            return react_1.default.createElement("div", { className: "ms-DetailsList-row-number" }, (index || 0) + 1);
-        }
-        return item[column?.fieldName || ''] || '';
-    }
-    // Replace weird radio-button-checkboxes with proper checkboxes
-    /**
-     * On render checkbox event.
-     *
-     * @param {IDetailsListCheckboxProps | undefined} props
-     * @returns {React.ReactElement}
-     */
-    _onRenderCheckbox(props) {
-        return react_1.default.createElement(UICheckbox_1.UICheckbox, { ...props });
-    }
-    // COLUMN HEADER SORT
-    /**
-     * On column click event.
-     *
-     * @param ev
-     * @param column
-     */
-    _onColumnClick(ev, column) {
-        const { columns, items } = this.state;
-        const newColumns = columns.slice();
-        const currColumn = newColumns.filter((currCol) => column.key === currCol.key)[0];
-        newColumns.forEach((newCol) => {
-            if (newCol === currColumn) {
-                currColumn.isSortedDescending = !currColumn.isSortedDescending;
-                currColumn.isSorted = true;
-            }
-            else {
-                newCol.isSorted = false;
-                newCol.isSortedDescending = false;
-            }
-        });
-        const field = currColumn.fieldName || currColumn.name || '';
-        const newItems = (0, UITable_helper_1._copyAndSort)(items, field, currColumn.isSortedDescending);
-        this.setState({ columns: newColumns, items: newItems });
-    }
-    // CELL EDITING
-    /**
-     * On start edit event call.
-     *
-     * @param rowIndex
-     * @param item
-     * @param column
-     * @param errorMessage
-     */
-    startEdit(rowIndex, item, column, errorMessage) {
-        const { editedCell } = this.state;
-        const isAlreadyInEdit = editedCell?.rowIndex === rowIndex && column?.key && editedCell?.column?.key === column?.key;
-        if (!isAlreadyInEdit) {
-            this.setState({ editedCell: { rowIndex, item, column, errorMessage } });
-            if (!this.props.renderInputs) {
-                this.rerenderTable();
-            }
-        }
-        requestAnimationFrame(() => {
-            if (column?.columnControlType === types_1.ColumnControlType.UITextInput) {
-                this.inputRefs?.[rowIndex][column?.key]?.current?.select();
-            }
-            else if (column?.columnControlType === types_1.ColumnControlType.UICombobox ||
-                column?.columnControlType === types_1.ColumnControlType.UIBooleanSelect) {
-                const combo = this.inputRefs?.[rowIndex][column?.key];
-                (0, UITable_helper_1.getComboBoxInput)(combo)?.focus();
-            }
-            else if (column?.columnControlType === types_1.ColumnControlType.UIDatePicker) {
-                this.inputRefs?.[rowIndex][column?.key]?.current?.select();
-            }
-            else if (column?.key) {
-                const otherElement = this.inputRefs?.[rowIndex][column.key]?.current;
-                otherElement.focus();
-            }
-        });
-    }
-    rerenderTable() {
-        if (this.tableRef.current) {
-            this.tableRef.current.forceUpdate();
-        }
-    }
-    cancelEdit() {
-        this.caretPosition = -1;
-        this.setState({ editedCell: undefined });
-        this.rerenderTable();
-    }
-    /**
-     * On save cell event.
-     *
-     * @param cancelEdit
-     * @param value
-     */
-    saveCell(cancelEdit = false, value) {
-        this.caretPosition = -1;
-        if (typeof this.props.onSave === 'function' && this.state.editedCell) {
-            const { rowIndex, column } = this.state.editedCell;
-            if (column?.columnControlType !== types_1.ColumnControlType.UIDropdown && !this.state.editedCell.errorMessage) {
-                let compRef;
-                if (column && this?.inputRefs?.[rowIndex]?.[column.key]) {
-                    compRef = this?.inputRefs[rowIndex][column.key];
-                }
-                const currentValue = column && this.props.items[rowIndex][column.key];
-                let refValue = '';
-                if (column?.columnControlType === types_1.ColumnControlType.UITextInput) {
-                    refValue = compRef?.current?.value || '';
-                }
-                else if (column?.columnControlType === types_1.ColumnControlType.UIDatePicker) {
-                    refValue = compRef?.current?.value || '';
-                }
-                else if (column?.columnControlType === types_1.ColumnControlType.UICombobox ||
-                    column?.columnControlType === types_1.ColumnControlType.UIBooleanSelect) {
-                    const combo = compRef;
-                    refValue = (0, UITable_helper_1.getComboBoxInput)(combo)?.value || '';
-                }
-                const newValue = value ?? refValue;
-                if (currentValue !== newValue) {
-                    this.props.onSave(this.state.editedCell, newValue);
-                }
-                const item = this.state.editedCell?.item;
-                const field = column?.fieldName;
-                if (field && item) {
-                    item[field] = newValue;
-                }
-            }
-        }
-        if (cancelEdit) {
-            this.cancelEdit();
-        }
-    }
-    /**
-     * On mouse down event.
-     *
-     * @param e
-     */
-    onDocumentMousedown(e) {
-        const target = e.target; // needed for TSC
-        if (target.closest('.ms-TextField, .ms-ComboBox, .ms-ComboBox-option, .ui-DatePicker') &&
-            !this.props.renderInputs) {
-            return;
-        }
-        if (this.state.editedCell) {
-            if (this.state.editedCell.errorMessage) {
-                e.preventDefault();
-            }
-            else {
-                this.saveCell(true);
-            }
-        }
-    }
-    /**
-     * On key down event.
-     *
-     * @param {React.KeyboardEvent<Element | IDropdown>} e
-     * @returns {void}
-     */
-    onKeyDown(e) {
-        if (!['Enter', 'Tab', 'Escape', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
-            return;
-        }
-        const isArrow = ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(e.key);
-        const isInput = e.target.tagName === 'INPUT';
-        if (isArrow && isInput) {
-            e.stopPropagation();
-            return;
-        }
-        e.preventDefault();
-        if (e.key === 'Escape') {
-            this.cancelEdit();
-            (0, UITable_helper_1.focusEditedCell)(this.state.editedCell, this.props).catch(() => {
-                // Ignore focus cell error
-            });
-            (0, UITable_helper_1.showFocus)();
-            return;
-        }
-        if (this.state.editedCell?.errorMessage) {
-            return;
-        }
-        e.stopPropagation();
-        if (e.key === 'Enter' || e.key === 'Tab') {
-            this.editNextCell(e.key, e.shiftKey);
-        }
-    }
-    /**
-     * On ComboBox keydown event call.
-     *
-     * @param e
-     */
-    onComboBoxKeyDownCapture(e) {
-        if (e.key === 'Enter' || e.key === 'Tab') {
-            // stop Enter from opening combobox
-            e.stopPropagation();
-            e.preventDefault();
-            this.editNextCell(e.key, e.shiftKey);
-        }
-    }
-    /**
-     * On Edit next cell.
-     *
-     * @param key
-     * @param shiftKey
-     */
-    editNextCell(key, shiftKey) {
-        this.saveCell();
-        let direction = '';
-        if (key === 'Enter') {
-            direction = shiftKey ? 'up' : 'down';
-        }
-        else if (key === 'Tab') {
-            direction = shiftKey ? 'left' : 'right';
-        }
-        if (direction) {
-            (0, UITable_helper_1.hideFocus)();
-        }
-        setTimeout(() => {
-            (0, UITable_helper_1.focusEditedCell)(this.state.editedCell, this.props, direction)
-                .then(() => {
-                if (!direction) {
-                    (0, UITable_helper_1.showFocus)();
-                    return;
-                }
-                (0, UITable_helper_1.hideFocus)();
-                const { rowIndex, item, column } = this.activeElement;
-                this.startEdit(rowIndex, item, column);
-            })
-                .catch((e) => {
-                throw e;
-            });
-        }, 100);
-    }
-    /**
-     * On Cell click.
-     *
-     * @param e
-     * @param item
-     * @param rowIndex
-     * @param column
-     */
-    _onCellClick(e, item, rowIndex, column) {
-        const previousCellHasErrors = this.state.editedCell?.errorMessage;
-        if (previousCellHasErrors) {
-            return;
-        }
-        if (this.props.renderInputs) {
-            return;
-        }
-        const el = e?.target;
-        requestAnimationFrame(() => {
-            // check the checkbox & focus the clicked cell
-            if (el) {
-                const fz = el.closest('.ms-FocusZone');
-                if (fz && fz.click) {
-                    fz.click();
-                }
-                const cell = el.closest('.ms-DetailsRow-cell');
-                if (cell && cell.focus) {
-                    cell.focus();
-                }
-            }
-            if (column?.editable !== true) {
-                (0, UITable_helper_1.showFocus)();
-            }
-        });
-        if (rowIndex !== undefined && item && column && column.editable === true) {
-            e?.stopPropagation();
-            requestAnimationFrame(() => this.startEdit(rowIndex, item, column));
-        }
-    }
-    /**
-     * Validates passed value for cell and updates "errorMessage" property based on validation result.
-     *
-     * @param editedCell Cell to validate
-     * @param value
-     */
-    validateCell(editedCell, value) {
-        const column = editedCell?.column;
-        let errorMessage = '';
-        if (column && typeof column.validate === 'function') {
-            errorMessage = column.validate(value);
-        }
-        if (editedCell && editedCell.errorMessage !== errorMessage) {
-            if (typeof editedCell.rowIndex === 'number' && editedCell.column?.key) {
-                const cell = (0, UITable_helper_1.getCellFromCoords)(editedCell.rowIndex, editedCell.column.key, this.props.columns, true);
-                const input = cell.querySelector('input');
-                this.caretPosition = input.selectionStart || 0;
-            }
-            editedCell.errorMessage = errorMessage || undefined;
-            // Rerender table to show error message
-            this.rerenderTable();
-        }
-    }
-    /**
-     * On Text input change.
-     *
-     * @param e
-     * @param newValue
-     */
-    onTextInputChange(e, newValue = '') {
-        this.setState((prevState) => {
-            const editedCell = prevState.editedCell ?? this.activeElement;
-            if (editedCell) {
-                editedCell.newValue = newValue;
-                const column = editedCell.column;
-                if (column && typeof column.validate === 'function') {
-                    this.validateCell(editedCell, newValue);
-                }
-                if (this.props.renderInputs) {
-                    this.saveCell(false, newValue);
-                }
-            }
-            return { editedCell };
-        });
-    }
-    /**
-     * Gets input ref.
-     *
-     * @param rowIndex
-     * @param column
-     * @returns { React.RefObject<ITextField | IDropdown | HTMLDivElement> | undefined}
-     */
-    _getInputRef(rowIndex, column) {
-        return typeof rowIndex === 'number' && typeof column?.key === 'string'
-            ? this?.inputRefs?.[rowIndex]?.[column.key]
-            : undefined;
-    }
-    /**
-     * Renders dropdown.
-     *
-     * @param item
-     * @param rowIndex
-     * @param column
-     * @returns {any}
-     */
-    _renderDropdown(item, rowIndex, column) {
-        const compRef = this._getInputRef(rowIndex, column);
-        return (react_1.default.createElement(UIDropdown_1.UIDropdown, { id: `dropdown_row${rowIndex}_col${column?.key}`, hidden: item.hideCells ?? false, placeholder: "Select an option", componentRef: compRef, options: column?.data.dropdownOptions, defaultSelectedKey: typeof column?.key === 'string' && item[column?.key]
-                ? item[column?.key]
-                : column?.data.defaultSelectedKey, onChange: (ev, text) => this.onDropdownCellValueChange(text, item, rowIndex, column), onKeyDown: this.onKeyDown }));
-    }
-    /**
-     * Renders combobox.
-     *
-     * @param item
-     * @param rowIndex
-     * @param column
-     * @returns {any}
-     */
-    _renderCombobox(item, rowIndex, column) {
-        const compRef = this._getInputRef(rowIndex, column);
-        const newValue = this.state.editedCell?.newValue;
-        let value;
-        if (column?.fieldName) {
-            value = item[column?.fieldName];
-        }
-        if (typeof newValue !== 'undefined') {
-            value = newValue;
-        }
-        const options = column?.comboboxOptions?.map((o) => ({ key: o, text: o })) || [];
-        return (react_1.default.createElement(UIComboBox_1.UIComboBox, { highlight: true, defaultSelectedKey: value, allowFreeform: false, autoComplete: "on", shouldRestoreFocus: false, wrapperRef: compRef, errorMessage: this.state.editedCell?.errorMessage, openMenuOnClick: false, onPendingValueChanged: this.onComboBoxChange, onKeyDown: this.onKeyDown, onKeyDownCapture: this.onComboBoxKeyDownCapture, onClick: (e) => {
-                e.stopPropagation();
-            }, options: options }));
-    }
-    /**
-     * Renders date picker.
-     *
-     * @param item
-     * @param rowIndex
-     * @param column
-     * @param dateOnly
-     * @returns {any}
-     */
-    _renderDatePicker(item, rowIndex, column, dateOnly = true) {
-        const compRef = this._getInputRef(rowIndex, column);
-        const newValue = this.state.editedCell?.newValue;
-        let value;
-        if (column?.fieldName) {
-            value = item[column?.fieldName];
-        }
-        if (typeof newValue !== 'undefined') {
-            value = newValue;
-        }
-        return (react_1.default.createElement(UIDatePicker_1.UIDatePicker, { defaultValue: value, componentRef: compRef, dateOnly: dateOnly, errorMessage: this.state.editedCell?.errorMessage, onChange: this.onTextInputChange, onKeyDown: this.onKeyDown, onClick: (e) => {
-                e.stopPropagation();
-            } }));
-    }
-    /**
-     * Renders text input.
-     *
-     * @param item
-     * @param rowIndex
-     * @param column
-     * @returns {any}
-     */
-    _renderTextInput(item, rowIndex, column) {
-        const compRef = this._getInputRef(rowIndex, column);
-        const newValue = this.state.editedCell?.newValue;
-        let element;
-        let value;
-        if (column?.fieldName) {
-            value = item[column?.fieldName];
-        }
-        if (typeof newValue !== 'undefined') {
-            value = newValue;
-        }
-        if (!item.hideCells) {
-            element = (react_1.default.createElement(UIInput_1.UITextInput, { defaultValue: value, componentRef: compRef, errorMessage: this.state.editedCell?.errorMessage, onChange: this.onTextInputChange, onKeyDown: this.onKeyDown, onClick: (e) => {
-                    e.stopPropagation();
-                } }));
-        }
-        return element;
-    }
-    /**
-     * On cell render.
-     *
-     * @param item
-     * @param rowIndex
-     * @param column
-     * @returns {any}
-     */
-    _onCellRender(item, rowIndex, column) {
-        // inputs & dropdowns always visible
-        if (this.props.renderInputs && rowIndex !== undefined) {
-            if (column?.columnControlType === types_1.ColumnControlType.UIDropdown) {
-                return this._renderDropdown(item, rowIndex, column);
-            }
-            return this._renderTextInput(item, rowIndex, column);
-        }
-        // inputs visible only in "edit mode" (after cell click)
-        const editedCell = this.state.editedCell;
-        const itsThisRow = editedCell && editedCell.rowIndex === rowIndex;
-        const itsThisCol = editedCell && editedCell.column?.key === column?.key;
-        const isCellInEditMode = itsThisRow && itsThisCol;
-        if (isCellInEditMode && rowIndex !== undefined) {
-            if (column?.columnControlType === types_1.ColumnControlType.UICombobox) {
-                return this._renderCombobox(item, rowIndex, column);
-            }
-            else if (column?.columnControlType === types_1.ColumnControlType.UIBooleanSelect) {
-                return this._renderCombobox(item, rowIndex, { ...column, comboboxOptions: ['true', 'false'] });
-            }
-            else if (column?.columnControlType === types_1.ColumnControlType.UIDatePicker) {
-                return this._renderDatePicker(item, rowIndex, column, column?.type === 'Date');
-            }
-            else {
-                return this._renderTextInput(item, rowIndex, column);
-            }
-        }
-        const onClick = (e) => {
-            e.stopPropagation();
-            this._onCellClick(e, item, rowIndex || 0, column);
-        };
-        return (react_1.default.createElement("span", { style: { cursor: 'text', padding: 5 }, onClick: onClick }, item[column?.fieldName || 0]));
-    }
-    /**
-     * @returns {JSX.Element}
-     */
-    render() {
-        // get columns & items from props, so that detailsListProps does not contain them
-        // because we want them to come from state, and be passed to component only once
-        let { columns, items, checkboxVisibility, headerRenderer, selectionMode } = this.props;
-        const { scrollablePaneProps, showRowNumbers, ...detailsListProps } = this.props;
-        // get them from state if they exist
-        if (this.state.columns) {
-            columns = this.state.columns;
-        }
-        if (this.state.items) {
-            items = this.state.items;
-        }
-        if (columns) {
-            columns.forEach((col) => {
-                col.onColumnClick = this._onColumnClick;
-                if (col.editable === true) {
-                    col.onRender = this._onCellRender;
-                }
-                else {
-                    col.className = 'uneditable';
-                }
-                if (col.key === this.props.selectedColumnId) {
-                    col.headerClassName = 'selected';
-                }
-            });
-            columns = (0, UITable_helper_1.addRowNumbers)(columns, showRowNumbers);
-        }
-        const styles = (0, UITable_helper_1.getStylesForSelectedCell)(this.state);
-        if (typeof checkboxVisibility === 'undefined') {
-            checkboxVisibility = react_2.CheckboxVisibility.hidden;
-        }
-        if (typeof selectionMode === 'undefined') {
-            selectionMode = react_2.SelectionMode.single;
-        }
-        if (typeof headerRenderer === 'undefined') {
-            headerRenderer = UITable_helper_1._onHeaderRender;
-        }
-        const focusZoneProps = {
-            direction: react_2.FocusZoneDirection.vertical,
-            shouldEnterInnerZone: (ev) => {
-                return ev.key === 'ArrowRight';
-            }
-        };
-        return (react_1.default.createElement(react_2.ScrollablePane, { ...scrollablePaneProps, styles: { stickyAbove: { zIndex: 2 } } },
-            react_1.default.createElement(react_2.DetailsList, { checkboxVisibility: checkboxVisibility, componentRef: this.tableRef, selection: this.selection, selectionMode: selectionMode, onRenderCheckbox: this._onRenderCheckbox, onRenderDetailsHeader: headerRenderer, onRenderField: this._onRenderField, onRenderRow: this._onRenderRow, onRenderItemColumn: this._onRenderItemColumn, layoutMode: react_2.DetailsListLayoutMode.fixedColumns, constrainMode: react_2.ConstrainMode.unconstrained, focusZoneProps: focusZoneProps, onActiveItemChanged: this._onCellActivation, ...detailsListProps, items: items, columns: columns, styles: styles })));
-    }
-}
-exports.UITable = UITable;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UITable = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+const UICheckbox_1 = require("../UICheckbox");
+const UIInput_1 = require("../UIInput");
+const UIDropdown_1 = require("../UIDropdown");
+const UIComboBox_1 = require("../UIComboBox");
+const UIDatePicker_1 = require("../UIDatePicker");
+const UITable_helper_1 = require("./UITable-helper");
+const types_1 = require("./types");
+require("./UITable.scss");
+/**
+ * UITable component
+ * based on: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist
+ *
+ * @exports
+ * @class {UITable}
+ * @extends {React.Component<UITableProps, UITableState>}
+ */
+class UITable extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     *
+     * @param props
+     */
+    constructor(props) {
+        super(props);
+        this.inputRefs = {};
+        this.activeElement = {};
+        this.caretPosition = -1;
+        this._onRenderRow = (props) => {
+            if (!props) {
+                return null;
+            }
+            const toggle = !!this.props.renderInputs;
+            return react_1.default.createElement(react_2.DetailsRow, { "data-selection-toggle": toggle, rowFieldsAs: this.renderRowFields.bind(this), ...props });
+        };
+        this.onComboBoxChange = (option) => {
+            this.setState((prevState) => {
+                const editedCell = prevState.editedCell ?? this.activeElement;
+                if (editedCell && option) {
+                    editedCell.newValue = option.text;
+                }
+                return { editedCell };
+            });
+        };
+        this.onDropdownCellValueChange = (selectedOption, item, rowIndex, column) => {
+            const newValue = selectedOption.key;
+            if (typeof this.props.onSave === 'function' &&
+                typeof rowIndex === 'number' &&
+                Number.isInteger(rowIndex) &&
+                column) {
+                const currentValue = this.props.items[rowIndex][column.key];
+                const editedCell = { rowIndex, item, column, errorMessage: undefined };
+                if (currentValue !== newValue) {
+                    this.props.onSave(editedCell, newValue);
+                }
+                const field = column?.fieldName;
+                if (field && item) {
+                    item[field] = newValue;
+                }
+            }
+            this.cancelEdit();
+        };
+        this.state = {
+            columns: props.columns || [],
+            items: props.items || []
+        };
+        this.tableRef = react_1.default.createRef();
+        this.selection = new react_2.Selection({
+            onSelectionChanged: () => {
+                if (typeof this.props.onSelectionChange !== 'function') {
+                    return;
+                }
+                this.props.onSelectionChange(this.selection.getSelectedIndices());
+            }
+        });
+        if (this.props.selectionRef) {
+            this.props.selectionRef.current = this.selection;
+        }
+        this.onTextInputChange = this.onTextInputChange.bind(this);
+        this.onComboBoxChange = this.onComboBoxChange.bind(this);
+        this.onDocumentMousedown = this.onDocumentMousedown.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
+        this.onComboBoxKeyDownCapture = this.onComboBoxKeyDownCapture.bind(this);
+        this.validateCell = this.validateCell.bind(this);
+        this.editNextCell = this.editNextCell.bind(this);
+        this._onColumnClick = this._onColumnClick.bind(this);
+        this._onCellRender = this._onCellRender.bind(this);
+        this._onRenderCheckbox = this._onRenderCheckbox.bind(this);
+        this._onRenderField = this._onRenderField?.bind(this);
+        this._onRenderRow = this._onRenderRow?.bind(this);
+        this._onRenderItemColumn = this._onRenderItemColumn?.bind(this);
+        this._onCellActivation = this._onCellActivation?.bind(this);
+    }
+    componentDidMount() {
+        this.onDocMousedown = this.onDocumentMousedown;
+        document.addEventListener('mousedown', this.onDocMousedown, true);
+        window.dispatchEvent(new Event('resize'));
+        this._setTextRefs();
+    }
+    componentWillUnmount() {
+        document.removeEventListener('mousedown', this.onDocMousedown);
+    }
+    /**
+     * On component update.
+     *
+     * @param prevProps
+     * @param prevState
+     */
+    componentDidUpdate(prevProps, prevState) {
+        const scrollContainer = document.querySelector('.ms-ScrollablePane--contentContainer');
+        if (scrollContainer) {
+            const left = scrollContainer.scrollLeft || 0;
+            requestAnimationFrame(() => (scrollContainer.scrollLeft = left));
+        }
+        if (prevProps.items !== this.props.items) {
+            this.setState({ items: this.props.items });
+            this._setTextRefs();
+        }
+        if (prevProps.columns !== this.props.columns) {
+            this.setState({ columns: this.props.columns });
+        }
+        if (prevProps.dataSetKey !== this.props.dataSetKey) {
+            this.setState({ editedCell: undefined });
+        }
+        if (typeof this.props.selectedRow !== 'undefined' && prevProps.selectedRow !== this.props.selectedRow) {
+            (0, UITable_helper_1.scrollToRow)(this.props.selectedRow, this.tableRef?.current);
+        }
+        if (this.props.scrollToAddedRow) {
+            const dataSetChanged = this.props.dataSetKey !== prevProps.dataSetKey;
+            const { items } = this.state;
+            const { items: prevItems } = prevState;
+            const itemsDelta = items.length - prevItems.length;
+            const shouldScrollToNewRow = !dataSetChanged && itemsDelta === 1;
+            if (shouldScrollToNewRow && this.tableRef && this.tableRef.current) {
+                const newRowIndex = items.length - 1;
+                this.tableRef.current.scrollToIndex(newRowIndex);
+            }
+        }
+        const { selectedColumnId } = this.props;
+        const { selectedColumnId: prevSelectedColumnId } = prevProps;
+        // Due to table rendering using columns data from state, instead of props,
+        // to sync selected column change callback with rendered dataset change
+        // selected column id/key needs to be stored on a state level along with columns data
+        if (selectedColumnId !== prevSelectedColumnId) {
+            this.setState({ selectedColumnId });
+        }
+        const columnIsSelected = typeof this.state.selectedColumnId !== 'undefined';
+        const selectedColumnDidChange = prevState.selectedColumnId !== this.state.selectedColumnId;
+        if (columnIsSelected && selectedColumnDidChange) {
+            (0, UITable_helper_1.scrollToColumn)(this.state.selectedColumnId || '', this.state.columns, this.props.selectedRow || 0, this.props.showRowNumbers);
+        }
+        this._restoreCaretPosition();
+    }
+    /**
+     * Restores the caret position. Caret position gets lost when validation finds issue in cell.
+     */
+    _restoreCaretPosition() {
+        const editedCell = this.state.editedCell;
+        if (this.caretPosition !== -1 && typeof editedCell?.rowIndex === 'number' && editedCell.column?.key) {
+            const cell = (0, UITable_helper_1.getCellFromCoords)(editedCell.rowIndex, editedCell.column.key, this.props.columns, true);
+            const input = cell.querySelector('input');
+            if (input && input.selectionStart !== this.caretPosition) {
+                input.setSelectionRange(this.caretPosition, this.caretPosition);
+                this.caretPosition = -1;
+            }
+        }
+    }
+    _setTextRefs() {
+        if (this.props.columns && this.props.items) {
+            for (const rowIndexTmp in this.props.items) {
+                for (const col of this.props.columns) {
+                    if (col.editable === true && this.inputRefs) {
+                        this.inputRefs[rowIndexTmp] = this.inputRefs[rowIndexTmp] || {};
+                        this.inputRefs[rowIndexTmp][col.key] = react_1.default.createRef();
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * On render row fields event.
+     *
+     * @param props
+     * @returns {JSX.Element}
+     */
+    renderRowFields(props) {
+        // disabled is set to false when selectionMode === undefined || selectionMode === SelectionMode.single
+        let disabled = false;
+        const selectionMode = this.props.selectionMode;
+        if (selectionMode === react_2.SelectionMode.multiple || selectionMode === react_2.SelectionMode.none) {
+            disabled = true;
+        }
+        return (react_1.default.createElement("div", { "data-selection-disabled": disabled },
+            react_1.default.createElement(react_2.DetailsRowFields, { ...props })));
+    }
+    /**
+     * On render field event.
+     *
+     * @param props
+     * @param defaultRender
+     * @returns {null | JSX.Element}
+     */
+    _onRenderField(props, defaultRender) {
+        if (!props || !defaultRender) {
+            return null;
+        }
+        const cell = defaultRender(props);
+        const onClick = (e) => {
+            const target = e?.target;
+            const targetTag = target?.tagName;
+            if (['INPUT', 'TEXTAREA', 'SELECT'].includes(targetTag)) {
+                return;
+            }
+            const { item, rowIndex, column } = this.activeElement;
+            this._onCellClick(e, item, rowIndex || 0, column);
+        };
+        // in app-migrator, show a warning message for library projects on main migration view
+        if (props.item.hideCells && props.column.fieldName === 'moduleName' && !props.item.status) {
+            return (react_1.default.createElement("div", { ...(cell?.props || {}), "data-is-focusable": true, onClick: onClick, tabIndex: "0" },
+                cell?.props?.children || null,
+                react_1.default.createElement("div", { className: "table-item-warning" }, "This is a reuse library and does not require input during migration")));
+        }
+        else {
+            return (react_1.default.createElement("div", { ...(cell?.props || {}), "data-is-focusable": true, onClick: onClick, tabIndex: "0" }, cell?.props?.children || null));
+        }
+    }
+    // just sets the active element property on the table, to track it later
+    /**
+     * On cell activation event.
+     *
+     * @param item
+     * @param rowIndex
+     * @param ev
+     */
+    _onCellActivation(item, rowIndex, ev) {
+        const rowEl = ev?.target?.closest('.ms-DetailsRow');
+        let column = {};
+        const cells = rowEl?.querySelectorAll('.ms-DetailsRow-fields .ms-DetailsRow-cell');
+        if (!cells || !cells.length) {
+            return;
+        }
+        // focusing cell, not the row
+        const cellEl = ev?.target?.closest('.ms-DetailsRow-cell');
+        if (cellEl) {
+            const cellIdx = Array.from(cells).indexOf(cellEl);
+            if (cellIdx === -1) {
+                return;
+            }
+            column = this.props.columns[cellIdx];
+            if (!column) {
+                return;
+            }
+        }
+        this.activeElement = { item, rowIndex: rowIndex || 0, column };
+        if (this.props.renderInputs && column?.editable) {
+            const isDropdown = this.activeElement?.column?.columnControlType === types_1.ColumnControlType?.UIDropdown;
+            if (!isDropdown && this.state.editedCell?.column?.key !== this.activeElement?.column?.key) {
+                this.setState({ editedCell: this.activeElement });
+            }
+        }
+    }
+    /**
+     * On render item  column event.
+     *
+     * @param {UIDocument} item
+     * @param {number} index
+     * @param {UIColumn} column
+     * @returns {React.ReactNode}
+     */
+    _onRenderItemColumn(item, index, column) {
+        if (column?.key === '__row_number__') {
+            return react_1.default.createElement("div", { className: "ms-DetailsList-row-number" }, (index || 0) + 1);
+        }
+        return item[column?.fieldName || ''] || '';
+    }
+    // Replace weird radio-button-checkboxes with proper checkboxes
+    /**
+     * On render checkbox event.
+     *
+     * @param {IDetailsListCheckboxProps | undefined} props
+     * @returns {React.ReactElement}
+     */
+    _onRenderCheckbox(props) {
+        return react_1.default.createElement(UICheckbox_1.UICheckbox, { ...props });
+    }
+    // COLUMN HEADER SORT
+    /**
+     * On column click event.
+     *
+     * @param ev
+     * @param column
+     */
+    _onColumnClick(ev, column) {
+        const { columns, items } = this.state;
+        const newColumns = columns.slice();
+        const currColumn = newColumns.filter((currCol) => column.key === currCol.key)[0];
+        newColumns.forEach((newCol) => {
+            if (newCol === currColumn) {
+                currColumn.isSortedDescending = !currColumn.isSortedDescending;
+                currColumn.isSorted = true;
+            }
+            else {
+                newCol.isSorted = false;
+                newCol.isSortedDescending = false;
+            }
+        });
+        const field = currColumn.fieldName || currColumn.name || '';
+        const newItems = (0, UITable_helper_1._copyAndSort)(items, field, currColumn.isSortedDescending);
+        this.setState({ columns: newColumns, items: newItems });
+    }
+    // CELL EDITING
+    /**
+     * On start edit event call.
+     *
+     * @param rowIndex
+     * @param item
+     * @param column
+     * @param errorMessage
+     */
+    startEdit(rowIndex, item, column, errorMessage) {
+        const { editedCell } = this.state;
+        const isAlreadyInEdit = editedCell?.rowIndex === rowIndex && column?.key && editedCell?.column?.key === column?.key;
+        if (!isAlreadyInEdit) {
+            this.setState({ editedCell: { rowIndex, item, column, errorMessage } });
+            if (!this.props.renderInputs) {
+                this.rerenderTable();
+            }
+        }
+        requestAnimationFrame(() => {
+            if (column?.columnControlType === types_1.ColumnControlType.UITextInput) {
+                this.inputRefs?.[rowIndex][column?.key]?.current?.select();
+            }
+            else if (column?.columnControlType === types_1.ColumnControlType.UICombobox ||
+                column?.columnControlType === types_1.ColumnControlType.UIBooleanSelect) {
+                const combo = this.inputRefs?.[rowIndex][column?.key];
+                (0, UITable_helper_1.getComboBoxInput)(combo)?.focus();
+            }
+            else if (column?.columnControlType === types_1.ColumnControlType.UIDatePicker) {
+                this.inputRefs?.[rowIndex][column?.key]?.current?.select();
+            }
+            else if (column?.key) {
+                const otherElement = this.inputRefs?.[rowIndex][column.key]?.current;
+                otherElement.focus();
+            }
+        });
+    }
+    rerenderTable() {
+        if (this.tableRef.current) {
+            this.tableRef.current.forceUpdate();
+        }
+    }
+    cancelEdit() {
+        this.caretPosition = -1;
+        this.setState({ editedCell: undefined });
+        this.rerenderTable();
+    }
+    /**
+     * On save cell event.
+     *
+     * @param cancelEdit
+     * @param value
+     */
+    saveCell(cancelEdit = false, value) {
+        this.caretPosition = -1;
+        if (typeof this.props.onSave === 'function' && this.state.editedCell) {
+            const { rowIndex, column } = this.state.editedCell;
+            if (column?.columnControlType !== types_1.ColumnControlType.UIDropdown && !this.state.editedCell.errorMessage) {
+                let compRef;
+                if (column && this?.inputRefs?.[rowIndex]?.[column.key]) {
+                    compRef = this?.inputRefs[rowIndex][column.key];
+                }
+                const currentValue = column && this.props.items[rowIndex][column.key];
+                let refValue = '';
+                if (column?.columnControlType === types_1.ColumnControlType.UITextInput) {
+                    refValue = compRef?.current?.value || '';
+                }
+                else if (column?.columnControlType === types_1.ColumnControlType.UIDatePicker) {
+                    refValue = compRef?.current?.value || '';
+                }
+                else if (column?.columnControlType === types_1.ColumnControlType.UICombobox ||
+                    column?.columnControlType === types_1.ColumnControlType.UIBooleanSelect) {
+                    const combo = compRef;
+                    refValue = (0, UITable_helper_1.getComboBoxInput)(combo)?.value || '';
+                }
+                const newValue = value ?? refValue;
+                if (currentValue !== newValue) {
+                    this.props.onSave(this.state.editedCell, newValue);
+                }
+                const item = this.state.editedCell?.item;
+                const field = column?.fieldName;
+                if (field && item) {
+                    item[field] = newValue;
+                }
+            }
+        }
+        if (cancelEdit) {
+            this.cancelEdit();
+        }
+    }
+    /**
+     * On mouse down event.
+     *
+     * @param e
+     */
+    onDocumentMousedown(e) {
+        const target = e.target; // needed for TSC
+        if (target.closest('.ms-TextField, .ms-ComboBox, .ms-ComboBox-option, .ui-DatePicker') &&
+            !this.props.renderInputs) {
+            return;
+        }
+        if (this.state.editedCell) {
+            if (this.state.editedCell.errorMessage) {
+                e.preventDefault();
+            }
+            else {
+                this.saveCell(true);
+            }
+        }
+    }
+    /**
+     * On key down event.
+     *
+     * @param {React.KeyboardEvent<Element | IDropdown>} e
+     * @returns {void}
+     */
+    onKeyDown(e) {
+        if (!['Enter', 'Tab', 'Escape', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+            return;
+        }
+        const isArrow = ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(e.key);
+        const isInput = e.target.tagName === 'INPUT';
+        if (isArrow && isInput) {
+            e.stopPropagation();
+            return;
+        }
+        e.preventDefault();
+        if (e.key === 'Escape') {
+            this.cancelEdit();
+            (0, UITable_helper_1.focusEditedCell)(this.state.editedCell, this.props).catch(() => {
+                // Ignore focus cell error
+            });
+            (0, UITable_helper_1.showFocus)();
+            return;
+        }
+        if (this.state.editedCell?.errorMessage) {
+            return;
+        }
+        e.stopPropagation();
+        if (e.key === 'Enter' || e.key === 'Tab') {
+            this.editNextCell(e.key, e.shiftKey);
+        }
+    }
+    /**
+     * On ComboBox keydown event call.
+     *
+     * @param e
+     */
+    onComboBoxKeyDownCapture(e) {
+        if (e.key === 'Enter' || e.key === 'Tab') {
+            // stop Enter from opening combobox
+            e.stopPropagation();
+            e.preventDefault();
+            this.editNextCell(e.key, e.shiftKey);
+        }
+    }
+    /**
+     * On Edit next cell.
+     *
+     * @param key
+     * @param shiftKey
+     */
+    editNextCell(key, shiftKey) {
+        this.saveCell();
+        let direction = '';
+        if (key === 'Enter') {
+            direction = shiftKey ? 'up' : 'down';
+        }
+        else if (key === 'Tab') {
+            direction = shiftKey ? 'left' : 'right';
+        }
+        if (direction) {
+            (0, UITable_helper_1.hideFocus)();
+        }
+        setTimeout(() => {
+            (0, UITable_helper_1.focusEditedCell)(this.state.editedCell, this.props, direction)
+                .then(() => {
+                if (!direction) {
+                    (0, UITable_helper_1.showFocus)();
+                    return;
+                }
+                (0, UITable_helper_1.hideFocus)();
+                const { rowIndex, item, column } = this.activeElement;
+                this.startEdit(rowIndex, item, column);
+            })
+                .catch((e) => {
+                throw e;
+            });
+        }, 100);
+    }
+    /**
+     * On Cell click.
+     *
+     * @param e
+     * @param item
+     * @param rowIndex
+     * @param column
+     */
+    _onCellClick(e, item, rowIndex, column) {
+        const previousCellHasErrors = this.state.editedCell?.errorMessage;
+        if (previousCellHasErrors) {
+            return;
+        }
+        if (this.props.renderInputs) {
+            return;
+        }
+        const el = e?.target;
+        requestAnimationFrame(() => {
+            // check the checkbox & focus the clicked cell
+            if (el) {
+                const fz = el.closest('.ms-FocusZone');
+                if (fz && fz.click) {
+                    fz.click();
+                }
+                const cell = el.closest('.ms-DetailsRow-cell');
+                if (cell && cell.focus) {
+                    cell.focus();
+                }
+            }
+            if (column?.editable !== true) {
+                (0, UITable_helper_1.showFocus)();
+            }
+        });
+        if (rowIndex !== undefined && item && column && column.editable === true) {
+            e?.stopPropagation();
+            requestAnimationFrame(() => this.startEdit(rowIndex, item, column));
+        }
+    }
+    /**
+     * Validates passed value for cell and updates "errorMessage" property based on validation result.
+     *
+     * @param editedCell Cell to validate
+     * @param value
+     */
+    validateCell(editedCell, value) {
+        const column = editedCell?.column;
+        let errorMessage = '';
+        if (column && typeof column.validate === 'function') {
+            errorMessage = column.validate(value);
+        }
+        if (editedCell && editedCell.errorMessage !== errorMessage) {
+            if (typeof editedCell.rowIndex === 'number' && editedCell.column?.key) {
+                const cell = (0, UITable_helper_1.getCellFromCoords)(editedCell.rowIndex, editedCell.column.key, this.props.columns, true);
+                const input = cell.querySelector('input');
+                this.caretPosition = input.selectionStart || 0;
+            }
+            editedCell.errorMessage = errorMessage || undefined;
+            // Rerender table to show error message
+            this.rerenderTable();
+        }
+    }
+    /**
+     * On Text input change.
+     *
+     * @param e
+     * @param newValue
+     */
+    onTextInputChange(e, newValue = '') {
+        this.setState((prevState) => {
+            const editedCell = prevState.editedCell ?? this.activeElement;
+            if (editedCell) {
+                editedCell.newValue = newValue;
+                const column = editedCell.column;
+                if (column && typeof column.validate === 'function') {
+                    this.validateCell(editedCell, newValue);
+                }
+                if (this.props.renderInputs) {
+                    this.saveCell(false, newValue);
+                }
+            }
+            return { editedCell };
+        });
+    }
+    /**
+     * Gets input ref.
+     *
+     * @param rowIndex
+     * @param column
+     * @returns { React.RefObject<ITextField | IDropdown | HTMLDivElement> | undefined}
+     */
+    _getInputRef(rowIndex, column) {
+        return typeof rowIndex === 'number' && typeof column?.key === 'string'
+            ? this?.inputRefs?.[rowIndex]?.[column.key]
+            : undefined;
+    }
+    /**
+     * Renders dropdown.
+     *
+     * @param item
+     * @param rowIndex
+     * @param column
+     * @returns {any}
+     */
+    _renderDropdown(item, rowIndex, column) {
+        const compRef = this._getInputRef(rowIndex, column);
+        return (react_1.default.createElement(UIDropdown_1.UIDropdown, { id: `dropdown_row${rowIndex}_col${column?.key}`, hidden: item.hideCells ?? false, placeholder: "Select an option", componentRef: compRef, options: column?.data.dropdownOptions, defaultSelectedKey: typeof column?.key === 'string' && item[column?.key]
+                ? item[column?.key]
+                : column?.data.defaultSelectedKey, onChange: (ev, text) => this.onDropdownCellValueChange(text, item, rowIndex, column), onKeyDown: this.onKeyDown }));
+    }
+    /**
+     * Renders combobox.
+     *
+     * @param item
+     * @param rowIndex
+     * @param column
+     * @returns {any}
+     */
+    _renderCombobox(item, rowIndex, column) {
+        const compRef = this._getInputRef(rowIndex, column);
+        const newValue = this.state.editedCell?.newValue;
+        let value;
+        if (column?.fieldName) {
+            value = item[column?.fieldName];
+        }
+        if (typeof newValue !== 'undefined') {
+            value = newValue;
+        }
+        const options = column?.comboboxOptions?.map((o) => ({ key: o, text: o })) || [];
+        return (react_1.default.createElement(UIComboBox_1.UIComboBox, { highlight: true, defaultSelectedKey: value, allowFreeform: false, autoComplete: "on", shouldRestoreFocus: false, wrapperRef: compRef, errorMessage: this.state.editedCell?.errorMessage, openMenuOnClick: false, onPendingValueChanged: this.onComboBoxChange, onKeyDown: this.onKeyDown, onKeyDownCapture: this.onComboBoxKeyDownCapture, onClick: (e) => {
+                e.stopPropagation();
+            }, options: options }));
+    }
+    /**
+     * Renders date picker.
+     *
+     * @param item
+     * @param rowIndex
+     * @param column
+     * @param dateOnly
+     * @returns {any}
+     */
+    _renderDatePicker(item, rowIndex, column, dateOnly = true) {
+        const compRef = this._getInputRef(rowIndex, column);
+        const newValue = this.state.editedCell?.newValue;
+        let value;
+        if (column?.fieldName) {
+            value = item[column?.fieldName];
+        }
+        if (typeof newValue !== 'undefined') {
+            value = newValue;
+        }
+        return (react_1.default.createElement(UIDatePicker_1.UIDatePicker, { defaultValue: value, componentRef: compRef, dateOnly: dateOnly, errorMessage: this.state.editedCell?.errorMessage, onChange: this.onTextInputChange, onKeyDown: this.onKeyDown, onClick: (e) => {
+                e.stopPropagation();
+            } }));
+    }
+    /**
+     * Renders text input.
+     *
+     * @param item
+     * @param rowIndex
+     * @param column
+     * @returns {any}
+     */
+    _renderTextInput(item, rowIndex, column) {
+        const compRef = this._getInputRef(rowIndex, column);
+        const newValue = this.state.editedCell?.newValue;
+        let element;
+        let value;
+        if (column?.fieldName) {
+            value = item[column?.fieldName];
+        }
+        if (typeof newValue !== 'undefined') {
+            value = newValue;
+        }
+        if (!item.hideCells) {
+            element = (react_1.default.createElement(UIInput_1.UITextInput, { defaultValue: value, componentRef: compRef, errorMessage: this.state.editedCell?.errorMessage, onChange: this.onTextInputChange, onKeyDown: this.onKeyDown, onClick: (e) => {
+                    e.stopPropagation();
+                } }));
+        }
+        return element;
+    }
+    /**
+     * On cell render.
+     *
+     * @param item
+     * @param rowIndex
+     * @param column
+     * @returns {any}
+     */
+    _onCellRender(item, rowIndex, column) {
+        // inputs & dropdowns always visible
+        if (this.props.renderInputs && rowIndex !== undefined) {
+            if (column?.columnControlType === types_1.ColumnControlType.UIDropdown) {
+                return this._renderDropdown(item, rowIndex, column);
+            }
+            return this._renderTextInput(item, rowIndex, column);
+        }
+        // inputs visible only in "edit mode" (after cell click)
+        const editedCell = this.state.editedCell;
+        const itsThisRow = editedCell && editedCell.rowIndex === rowIndex;
+        const itsThisCol = editedCell && editedCell.column?.key === column?.key;
+        const isCellInEditMode = itsThisRow && itsThisCol;
+        if (isCellInEditMode && rowIndex !== undefined) {
+            if (column?.columnControlType === types_1.ColumnControlType.UICombobox) {
+                return this._renderCombobox(item, rowIndex, column);
+            }
+            else if (column?.columnControlType === types_1.ColumnControlType.UIBooleanSelect) {
+                return this._renderCombobox(item, rowIndex, { ...column, comboboxOptions: ['true', 'false'] });
+            }
+            else if (column?.columnControlType === types_1.ColumnControlType.UIDatePicker) {
+                return this._renderDatePicker(item, rowIndex, column, column?.type === 'Date');
+            }
+            else {
+                return this._renderTextInput(item, rowIndex, column);
+            }
+        }
+        const onClick = (e) => {
+            e.stopPropagation();
+            this._onCellClick(e, item, rowIndex || 0, column);
+        };
+        return (react_1.default.createElement("span", { style: { cursor: 'text', padding: 5 }, onClick: onClick }, item[column?.fieldName || 0]));
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        // get columns & items from props, so that detailsListProps does not contain them
+        // because we want them to come from state, and be passed to component only once
+        let { columns, items, checkboxVisibility, headerRenderer, selectionMode } = this.props;
+        const { scrollablePaneProps, showRowNumbers, ...detailsListProps } = this.props;
+        // get them from state if they exist
+        if (this.state.columns) {
+            columns = this.state.columns;
+        }
+        if (this.state.items) {
+            items = this.state.items;
+        }
+        if (columns) {
+            columns.forEach((col) => {
+                col.onColumnClick = this._onColumnClick;
+                if (col.editable === true) {
+                    col.onRender = this._onCellRender;
+                }
+                else {
+                    col.className = 'uneditable';
+                }
+                if (col.key === this.props.selectedColumnId) {
+                    col.headerClassName = 'selected';
+                }
+            });
+            columns = (0, UITable_helper_1.addRowNumbers)(columns, showRowNumbers);
+        }
+        const styles = (0, UITable_helper_1.getStylesForSelectedCell)(this.state);
+        if (typeof checkboxVisibility === 'undefined') {
+            checkboxVisibility = react_2.CheckboxVisibility.hidden;
+        }
+        if (typeof selectionMode === 'undefined') {
+            selectionMode = react_2.SelectionMode.single;
+        }
+        if (typeof headerRenderer === 'undefined') {
+            headerRenderer = UITable_helper_1._onHeaderRender;
+        }
+        const focusZoneProps = {
+            direction: react_2.FocusZoneDirection.vertical,
+            shouldEnterInnerZone: (ev) => {
+                return ev.key === 'ArrowRight';
+            }
+        };
+        return (react_1.default.createElement(react_2.ScrollablePane, { ...scrollablePaneProps, styles: { stickyAbove: { zIndex: 2 } } },
+            react_1.default.createElement(react_2.DetailsList, { checkboxVisibility: checkboxVisibility, componentRef: this.tableRef, selection: this.selection, selectionMode: selectionMode, onRenderCheckbox: this._onRenderCheckbox, onRenderDetailsHeader: headerRenderer, onRenderField: this._onRenderField, onRenderRow: this._onRenderRow, onRenderItemColumn: this._onRenderItemColumn, layoutMode: react_2.DetailsListLayoutMode.fixedColumns, constrainMode: react_2.ConstrainMode.unconstrained, focusZoneProps: focusZoneProps, onActiveItemChanged: this._onCellActivation, ...detailsListProps, items: items, columns: columns, styles: styles })));
+    }
+}
+exports.UITable = UITable;
 //# sourceMappingURL=UITable.js.map