lightning-base-components 1.14.6-alpha → 1.14.7-alpha

package/src/lightning/datatable/columns.js

@@ -13,33 +13,62 @@ const i18n = {
     rowActionsDefaultAriaLabel,
 };
 
+export const SELECTABLE_ROW_CHECKBOX = 'SELECTABLE_CHECKBOX';
+
+const SELECTABLE_COLUMN = {
+    type: SELECTABLE_ROW_CHECKBOX,
+    fixedWidth: 32,
+    tabIndex: -1,
+    internal: true,
+};
+
+/**
+ * Returns the columns default state.
+ *
+ * @returns {Object} The default column state.
+ */
 export function getColumnsDefaultState() {
     return {
         columns: [],
     };
 }
 
+/**
+ * Returns whether or not the datatable has columns.
+ *
+ * @param {Object} state The datatable's state.
+ * @returns {Boolean} Whether the datatable has columns.
+ */
 export function hasColumns(state) {
     return getColumns(state).length > 0;
 }
 
+/**
+ * Returns whether or not the column has been specified by the customer.
+ *
+ * @param {Object} column The column definition object.
+ * @returns {Boolean} Whether the column is customer defined or not.
+ */
 export function isCustomerColumn(column) {
     return column.internal !== true;
 }
 
+/**
+ * Returns the datatable's columns from state.
+ *
+ * @param {Object} state  The datatable's state.
+ * @returns {Array} The datatable's columns definition.
+ */
 export function getColumns(state) {
     return state.columns;
 }
 
-export const SELECTABLE_ROW_CHECKBOX = 'SELECTABLE_CHECKBOX';
-
-const SELECTABLE_COLUMN = {
-    type: SELECTABLE_ROW_CHECKBOX,
-    fixedWidth: 32,
-    tabIndex: -1,
-    internal: true,
-};
-
+/**
+ * Returns whether any of the datatable's columns are editable.
+ *
+ * @param {Array} columns The datatable's column definition.
+ * @returns {Boolean} Whether any of the columns are editable.
+ */
 export function hasEditableColumn(columns) {
     return columns.some((column) => column.editable);
 }
@@ -50,8 +79,8 @@ export function hasEditableColumn(columns) {
  * that are present in both the input and output array, the relative ordering between
  * them that existed in the input array is maintained in the output array.
  *
- * @param {Array} columns - the datatable's column definitions. Must be truthy and must be
- *                          filled with truthy column definition objects.
+ * @param {Array} columns The datatable's column definition. Must be truthy and must be
+ *                        filled with truthy column definition objects.
  */
 export function getEditableColumns(columns) {
     return columns.filter((column) => column.editable);
@@ -64,8 +93,8 @@ export function getEditableColumns(columns) {
  * the invocation of this function results in a no-op because we instead rely on later
  * row level checks to determine cell editability.
  *
- * @param {Object} column column metadata
- * @param {Object} types the DatatableTypes object
+ * @param {Object} column The column definition object.
+ * @param {Object} types The DatatableTypes object.
  */
 export function normalizeEditable(column, types) {
     if (types.isEditableType(column.type)) {
@@ -81,10 +110,24 @@ export function normalizeEditable(column, types) {
     }
 }
 
+/**
+ * Steps through and corrects column definitions inconsistencies.
+ *
+ * For customer-specified columns, we verify all parameters are valid and set
+ * how we would expect them to prevent errors from bubbling up.
+ * See `normalizeColumnDataType`, `normalizeEditable`.
+ *
+ * For tree-types, we verify all sub-type attributes are within our allowed
+ * parameters. See `getNormalizedSubTypeAttribute`.
+ *
+ * @param {Object} state The datatable state.
+ * @param {Array} columns The datatable's column definitions.
+ * @param {Object} types  The type handling factory.
+ */
 export function normalizeColumns(state, columns, types) {
     if (columns.length !== 0) {
         let firstColumnForReaders = 0;
-        // workaround https://git.soma.salesforce.com/raptor/raptor/issues/763
+        // Workaround: https://git.soma.salesforce.com/raptor/raptor/issues/763
         const normalizedColumns = Object.assign([], columns);
 
         if (!state.hideCheckboxColumn) {
@@ -100,7 +143,7 @@ export function normalizeColumns(state, columns, types) {
 
         const columnKeyMap = {};
         state.columns = normalizedColumns.map((column, index) => {
-            // Verify columnKey is unique
+            // Verify `columnKey` is unique
             const columnKey = column.columnKey;
             if (columnKey && columnKeyMap[columnKey]) {
                 console.error(
@@ -115,7 +158,8 @@ export function normalizeColumns(state, columns, types) {
             );
             normalizedColumn.ariaLabel =
                 normalizedColumn.label || normalizedColumn.ariaLabel || null;
-            // customType attribute is needed to render default iedit component
+
+            // `customType` attribute is needed to render default iedit component
             normalizedColumn.editableCustomType =
                 types.isStandardCellLayoutForCustomType(normalizedColumn.type);
 
@@ -131,6 +175,7 @@ export function normalizeColumns(state, columns, types) {
                     normalizedColumn.typeAttributes
                 );
             }
+
             return Object.assign(normalizedColumn, {
                 tabIndex: -1,
                 colKeyValue: generateColKeyValue(normalizedColumn, index),
@@ -142,17 +187,12 @@ export function normalizeColumns(state, columns, types) {
     }
 }
 
-function normalizeColumnDataType(column, types) {
-    if (!types.isValidType(column.type)) {
-        column.type = getRegularColumnDefaults().type;
-    }
-}
-
 /**
  * Normalizes the subType and subTypeAttributes in the typeAttributes.
- * @param {String} type the type of this column
- * @param {Object} typeAttributes the type attributes of the column
- * @returns {Object} a new typeAttributes object with the sybtype and subTypeAttributes normalized.
+ *
+ * @param {String} type The type of this column
+ * @param {Object} typeAttributes The type attributes of the column
+ * @returns {Object} A new typeAttributes object with the sybtype and subTypeAttributes normalized.
  */
 export function getNormalizedSubTypeAttribute(type, typeAttributes) {
     const typeAttributesOverrides = {};
@@ -166,42 +206,12 @@ export function getNormalizedSubTypeAttribute(type, typeAttributes) {
     return Object.assign({}, typeAttributes, typeAttributesOverrides);
 }
 
-function getRegularColumnDefaults() {
-    return {
-        type: 'text',
-        typeAttributes: {},
-        cellAttributes: {},
-    };
-}
-
-function getActionColumnDefaults() {
-    return {
-        fixedWidth: 50,
-        resizable: false,
-        ariaLabel: i18n.rowActionsDefaultAriaLabel,
-    };
-}
-
-function getTreeColumnDefaults() {
-    return {
-        type: 'tree',
-        subType: 'text',
-        typeAttributes: {},
-        cellAttributes: {},
-    };
-}
-
-function getColumnDefaults(column) {
-    switch (column.type) {
-        case 'action':
-            return getActionColumnDefaults();
-        case 'tree':
-            return getTreeColumnDefaults();
-        default:
-            return getRegularColumnDefaults();
-    }
-}
-
+/**
+ * Retrieves the type attributes for a given column.
+ *
+ * @param {Object} column The column definition object.
+ * @returns Type attributes for the given column, if they exist.
+ */
 export function getTypeAttributesValues(column) {
     if (isObjectLike(column.typeAttributes)) {
         return column.typeAttributes;
@@ -209,6 +219,12 @@ export function getTypeAttributesValues(column) {
     return {};
 }
 
+/**
+ * Retrieves the sub-type attributes for a given column.
+ *
+ * @param {Object} column The column definition object.
+ * @returns {Object} Sub-type attributes for the given column, if they exist.
+ */
 export function getSubTypeAttributesValues(column) {
     if (isObjectLike(column.typeAttributes.subTypeAttributes)) {
         return column.typeAttributes.subTypeAttributes;
@@ -216,6 +232,12 @@ export function getSubTypeAttributesValues(column) {
     return {};
 }
 
+/**
+ * Retrieves the cell attributes for a given column.
+ *
+ * @param {Object} column The column definition object.
+ * @returns {Object} Cell attributes for the given column, if they exist.
+ */
 export function getCellAttributesValues(column) {
     if (isObjectLike(column.cellAttributes)) {
         return column.cellAttributes;
@@ -226,9 +248,9 @@ export function getCellAttributesValues(column) {
 /**
  * Generates a unique column key value.
  *
- * @param {object} columnMetadata - the object for an specific column metadata
- * @param {int} index - optionally, the index of the column.
- * @returns {string} It generate the column key value based on the column field name and type.
+ * @param {Object} columnMetadata The object for an specific column metadata
+ * @param {Integer} index Optionally, the index of the column.
+ * @returns {String} It generates the column key value based on the column field name and type.
  */
 export function generateColKeyValue(columnMetadata, index) {
     const { columnKey, fieldName, type } = columnMetadata;
@@ -239,9 +261,10 @@ export function generateColKeyValue(columnMetadata, index) {
 /**
  * Return the index in dt.columns (user definition) related to colKeyValue.
  *      -1 if no column with that key exist or if its internal.
+ *
  * @param {Object} state The datatable state
  * @param {String} colKeyValue The generated key for the column
- * @return {Number} The index in dt.columns. -1 if not found or if its internal.
+ * @returns {Number} The index in `dt.columns`. -1 if not found or if its internal.
  */
 export function getUserColumnIndex(state, colKeyValue) {
     const stateColumnIndex = getStateColumnIndex(state, colKeyValue);
@@ -267,8 +290,8 @@ export function getUserColumnIndex(state, colKeyValue) {
  *
  * These indexes are set in the state object - `state.headerIndexes`
  *
- * @param {object} columns - the current normalized column metadata
- * @returns {object} headerIndexes e.g. { 'name-text': 0, 'amount-number': 1 }
+ * @param {Object} columns The current normalized column metadata
+ * @returns {Object} headerIndexes e.g. { 'name-text': 0, 'amount-number': 1 }
  */
 export const generateHeaderIndexes = function (columns) {
     return columns.reduce((prev, col, index) => {
@@ -282,17 +305,18 @@ export const generateHeaderIndexes = function (columns) {
  *
  * @param {Object} state The datatable state
  * @param {String} colKeyValue The generated key for the column
- * @return {number} The index in state.columns.
+ * @returns {Number} The index in state.columns
  */
 export function getStateColumnIndex(state, colKeyValue) {
     return state.headerIndexes[colKeyValue];
 }
 
 /**
+ * Retrieves a column index number by its key.
  *
- * @param {Object} state - The datatable state
- * @param {String} key - the key of the column. Defaults to field name if 'columnKey' is not provided.
- * @returns {number} The index in state.columns, -1 if it does not exist
+ * @param {Object} state The datatable state
+ * @param {String} key The key of the column. Defaults to field name if 'columnKey' is not provided.
+ * @returns {Number} The index in state.columns, -1 if it does not exist
  */
 export function getColumnIndexByColumnKey(state, key) {
     let i = 0;
@@ -307,3 +331,74 @@ export function getColumnIndexByColumnKey(state, key) {
 
     return existFieldName ? i : -1;
 }
+
+/************************** PRIVATE METHODS ***************************/
+
+/**
+ * If the specified column type is not supported, resets it to default.
+ *
+ * @param {Object} column The column definition object.
+ * @param {Object} types The type handling factory.
+ */
+function normalizeColumnDataType(column, types) {
+    if (!types.isValidType(column.type)) {
+        column.type = getRegularColumnDefaults().type;
+    }
+}
+
+/**
+ * Returns the column defaults based on its type.
+ *
+ * @param {Object} column The column definition object.
+ * @returns {Object} The column defaults.
+ */
+function getColumnDefaults(column) {
+    switch (column.type) {
+        case 'action':
+            return getActionColumnDefaults();
+        case 'tree':
+            return getTreeColumnDefaults();
+        default:
+            return getRegularColumnDefaults();
+    }
+}
+
+/**
+ * Retrieves the defaults for regular columns.
+ *
+ * @returns {Object} Regular column defaults
+ */
+function getRegularColumnDefaults() {
+    return {
+        type: 'text',
+        typeAttributes: {},
+        cellAttributes: {},
+    };
+}
+
+/**
+ * Retrieves the defaults for action columns.
+ *
+ * @returns {Object} Action column defaults
+ */
+function getActionColumnDefaults() {
+    return {
+        fixedWidth: 50,
+        resizable: false,
+        ariaLabel: i18n.rowActionsDefaultAriaLabel,
+    };
+}
+
+/**
+ * Retrieves the defaults for tree columns.
+ *
+ * @returns {Object} Tree column defaults
+ */
+function getTreeColumnDefaults() {
+    return {
+        type: 'tree',
+        subType: 'text',
+        typeAttributes: {},
+        cellAttributes: {},
+    };
+}

package/src/lightning/datatable/datatable.js

@@ -82,6 +82,7 @@ import {
     refocusCellElement,
     isCellElement,
     getActiveCellElement,
+    getDataRow,
     FOCUS_CLASS,
 } from './keyboard';
 import {
@@ -138,10 +139,15 @@ import {
     isViewportRenderingEnabled,
     setViewportRendering,
     getDTWrapperHeight,
-    setFirstVisibleIndex,
     setVirtualize,
     RenderManager,
 } from './renderManager';
+import {
+    handleVariableRowHeights,
+    resetRowHeights,
+    resetTableHeight,
+    findFirstVisibleIndex,
+} from './virtualization';
 
 import { hasTreeDataType } from './tree';
 import { setErrors, getTableError, getErrors } from './errors';
@@ -203,7 +209,9 @@ export default class LightningDatatable extends LightningElement {
     _privateTypes = {};
     _privateWidthObserver = null; // Instance of LightningDatatableResizeObserver
     _renderMode = 'table';
+    _shouldResetHeights = false;
     _suppressBottomBar = false;
+    _shouldResetFocus = false; // used to ensure focus isn't lost from changes in renderedRows
 
     /************************* PUBLIC PROPERTIES *************************/
 
@@ -283,6 +291,7 @@ export default class LightningDatatable extends LightningElement {
         // do necessary updates since rows have changed
         if (hasValidKeyField(this.state)) {
             this.updateRowsState();
+            resetTableHeight(this.state);
         }
         if (this._customerSelectedRows) {
             this.setSelectedRows(this._customerSelectedRows);
@@ -797,8 +806,8 @@ export default class LightningDatatable extends LightningElement {
      * virtualization is enabled
      */
     get computedTbodyStyle() {
-        const style = [];
-        const { firstVisibleIndex, bufferSize, virtualize, rows, rowHeight } =
+        const style = {};
+        const { firstVisibleIndex, bufferSize, virtualize, tableHeight } =
             this.state;
         if (
             hasRowNumberColumn(this.state) &&
@@ -809,11 +818,11 @@ export default class LightningDatatable extends LightningElement {
                 0
             );
             const rowNumber = firstRenderedRow + getRowNumberOffset(this.state);
-            style.push(`counter-reset: row-number ${rowNumber}`);
+            style['counter-reset'] = `row-number ${rowNumber}`;
         }
         if (virtualize) {
-            const length = rows.length;
-            style.push('position: relative', `height:${length * rowHeight}px`);
+            style.position = 'relative';
+            style.height = `${tableHeight}px`;
         }
         return styleToString(style);
     }
@@ -938,6 +947,8 @@ export default class LightningDatatable extends LightningElement {
         if (virtualize) {
             const { firstIndex, lastIndex } =
                 this._renderManager.getRenderedRange(this.state);
+            // we shouldn't lose focus from re-renders caused by a change in renderedRows
+            this._shouldResetFocus = true;
             return rows.slice(firstIndex, lastIndex);
         }
         if (this.viewportRendering && !isIE11) {
@@ -1124,10 +1135,7 @@ export default class LightningDatatable extends LightningElement {
             if (fireResizeEvent) {
                 this.fireOnResize(false);
             }
-
-            const role = '[role="' + this.computedTableRole + '"]';
-
-            this.template.querySelector(role).style = this.computedTableStyle;
+            this.updateTableAndScrollerStyleOnRender();
         }
 
         // Managing the cell widths is only required for the role-based table
@@ -1142,17 +1150,23 @@ export default class LightningDatatable extends LightningElement {
         // set the previous focused cell to null after render is done
         resetCellToFocusFromPrev(state);
         // reset focus styles on re-render
-        if (state.activeCell && state.activeCell.focused) {
-            const cellElement = getActiveCellElement(template, state);
-            if (
-                cellElement &&
-                cellElement.parentElement &&
-                !cellElement.parentElement.classList.contains(FOCUS_CLASS)
-            ) {
-                setFocusActiveCell(template, state, null, null, false);
+        if (this._shouldResetFocus) {
+            // since focus is now getting reset, can change this back to false
+            this._shouldResetFocus = false;
+            if (state.activeCell && state.activeCell.focused) {
+                const cellElement = getActiveCellElement(template, state);
+                if (
+                    cellElement &&
+                    cellElement.parentElement &&
+                    !cellElement.parentElement.classList.contains(FOCUS_CLASS)
+                ) {
+                    setFocusActiveCell(template, state, null, null, false);
+                }
             }
         }
 
+        this.updateVirtualizedRowHeights();
+
         if (this.viewportRendering || state.virtualize) {
             const resizeTarget = this.template.querySelector(
                 'div.dt-outer-container'
@@ -1175,6 +1189,18 @@ export default class LightningDatatable extends LightningElement {
         }
     }
 
+    updateTableAndScrollerStyleOnRender() {
+        const role = '[role="' + this.computedTableRole + '"]';
+        const tableElement = this.template.querySelector(role);
+        const scrollYEle = this.template.querySelector('.slds-scrollable_y');
+        if (tableElement) {
+            tableElement.style = this.computedTableStyle;
+        }
+        if (scrollYEle) {
+            scrollYEle.style = this.computedScrollerStyle;
+        }
+    }
+
     disconnectedCallback() {
         if (this._privateWidthObserver) {
             this._privateWidthObserver.disconnect();
@@ -1253,7 +1279,10 @@ export default class LightningDatatable extends LightningElement {
 
         handleInlineEditPanelScroll.call(this, event);
         if (this.state.virtualize) {
-            setFirstVisibleIndex(this.state, event.target.scrollTop);
+            this.state.firstVisibleIndex = findFirstVisibleIndex(
+                this.state,
+                event.target.scrollTop
+            );
         } else if (this.viewportRendering) {
             this._renderManager.handleScroll(this.state, event);
         }
@@ -1347,6 +1376,7 @@ export default class LightningDatatable extends LightningElement {
     handleResizeEnd(event) {
         event.stopPropagation();
         this._isResizing = false;
+        this._shouldResetHeights = true;
     }
 
     /**
@@ -1419,10 +1449,19 @@ export default class LightningDatatable extends LightningElement {
      * Handles the `focusout` event on <table> and the corresponding
      * <div> on the role-based table
      *
+     * This gets called both when we expect the table to lose focus
+     * and when the active cell loses focus after renderedRows changes
+     * on a virtualized table, in which case we don't want to lose focus.
+     *
+     * We account for this by setting activeCell.focused to the value of
+     * _shouldResetFocus, which will be true if and only if focus was
+     * lost due to a renderedRows change for a virtualized table.
+     *
      * @param {FocusEvent} event - `focusout`
      */
     handleTableFocusOut(event) {
         handleDatatableFocusOut.call(this, event);
+        this.state.activeCell.focused = this._shouldResetFocus;
     }
 
     /**
@@ -1601,6 +1640,41 @@ export default class LightningDatatable extends LightningElement {
         }
     }
 
+    updateVirtualizedRowHeights() {
+        const state = this.state;
+        const virtualizedRows = state.virtualize && this.renderedRows.length;
+
+        // no need to handle other virtualization/row height logic
+        // if heights need to be reset
+        if (this._shouldResetHeights) {
+            resetRowHeights(state);
+            this._shouldResetHeights = false;
+        } else if (virtualizedRows && !state.fixedHeight) {
+            // if row heights aren't fixed, we need to update items
+            // in state to know where rows should be positioned
+            handleVariableRowHeights(this.template, state, this.renderedRows);
+        } else if (virtualizedRows && state.fixedHeight) {
+            // if heights are fixed, we only need to check height of first row
+            const rowElement = this.template.querySelector(
+                getDataRow(this.renderedRows[0].key)
+            );
+            // increase height by 1 since first rendered row is missing an extra 1px border
+            if (rowElement) {
+                const height = rowElement.getBoundingClientRect().height + 1;
+                if (state.rowHeight !== height) {
+                    state.rowHeight = height;
+                    resetTableHeight(state);
+                    state.rows.forEach((row) => {
+                        row.style = styleToString({
+                            position: 'absolute',
+                            top: `${row.rowIndex * height}px`,
+                        });
+                    });
+                }
+            }
+        }
+    }
+
     setSelectedRows(value) {
         setSelectedRowsKeys(this.state, value);
         handleRowSelectionChange.call(this);
@@ -1620,7 +1694,7 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * @return {Object} containing the visible dimensions of the table { left, right, top, bottom, }
+     * @returns {Object} containing the visible dimensions of the table { left, right, top, bottom, }
      */
     getViewableRect() {
         const scrollerX = this.template

package/src/lightning/datatable/headerActions.js

@@ -16,7 +16,7 @@ const DIVIDER_REM_HEIGHT = 1.0625;
  *
  * @param {Object} state The state of the datatable
  * @param {Object} columnDefinition The column definition to extract internal actions from
- * @return {Array} All wrapText internal actions
+ * @returns {Array} All wrapText internal actions
  */
 export function getInternalActions(state, columnDefinition) {
     return [...getActions(state, columnDefinition)];
@@ -113,7 +113,7 @@ function dispatchHeaderActionEvent(dt, action, colKeyValue) {
  *
  * @param {Array} columns Array of all the columns
  * @param {Integer} index The current column index to check
- * @return {String} The computed alignment
+ * @returns {String} The computed alignment
  */
 function getMenuAlignment(columns, index) {
     const isLastColumn = index === columns.length - 1;

package/src/lightning/datatable/keyboard.js

@@ -10,7 +10,7 @@ import {
 } from './tree';
 import { isCellEditable, getRowByKey } from './rows';
 import { isRTL, getShadowActiveElements } from 'lightning/utilsPrivate';
-import { setFirstVisibleIndex } from './renderManager';
+import { findFirstVisibleIndex } from './virtualization';
 
 // Indicator/flag for a header row
 const HEADER_ROW = 'HEADER';
@@ -88,7 +88,7 @@ const SELECTORS = {
  * user keys down on a cell that contains actionable items (ex. edit button, links,
  * email, buttons).
  *
- * @param {Event} event - Custom DOM event (privatecellkeydown) sent by the cell
+ * @param {Event} event Custom DOM event (privatecellkeydown) sent by the cell
  */
 export function handleKeydownOnCell(event) {
     event.stopPropagation();
@@ -110,7 +110,7 @@ export function handleKeydownOnCell(event) {
  * Those events are handled by `handleKeydownOnCell()` and the remaining are
  * handled by this function.
  *
- * @param {*} event
+ * @param {Event} event
  */
 export function handleKeydownOnTable(event) {
     const targetTagName = event.target.tagName.toLowerCase();
@@ -127,10 +127,10 @@ export function handleKeydownOnTable(event) {
  * Changes the datatable state based on the keyboard event sent from the cell component.
  * The result of those changes may trigger a re-render on the table
  *
- * @param {node} template - the custom element root `this.template`
- * @param {object} state - datatable state
- * @param {event} event - custom DOM event sent by the cell
- * @returns {object} - mutated state
+ * @param {Node} template The custom element root `this.template`
+ * @param {Object} state Datatable state
+ * @param {Event} event Custom DOM event sent by the cell
+ * @returns {Object} Mutated state
  */
 function reactToKeyboardInActionMode(template, state, event) {
     switch (event.detail.keyCode) {
@@ -1313,7 +1313,7 @@ function isHeaderRow(rowIndex) {
     return rowIndex === -1;
 }
 
-function getDataRow(rowKeyValue) {
+export function getDataRow(rowKeyValue) {
     return `[data-row-key-value="${rowKeyValue}"]`;
 }
 
@@ -1365,7 +1365,7 @@ function updateScrollTop(state, template, element) {
     } else if (findMeRect.bottom > parentRect.bottom - BOTTOM_MARGIN) {
         scrollableY.scrollTop += SCROLL_OFFSET;
     }
-    setFirstVisibleIndex(state, scrollableY.scrollTop);
+    findFirstVisibleIndex(state, scrollableY.scrollTop);
 }
 
 function scrollToCell(state, template, rowIndex) {
@@ -1380,7 +1380,7 @@ function scrollToCell(state, template, rowIndex) {
 
     const scrollableY = template.querySelector('.slds-scrollable_y');
     scrollableY.scrollTop = scrollTop;
-    setFirstVisibleIndex(state, scrollTop);
+    findFirstVisibleIndex(state, scrollTop);
 }
 
 export function isActiveCellEditable(state) {