lightning-base-components 1.14.2-alpha → 1.14.3-alpha

package/metadata/raptor.json

@@ -1352,6 +1352,7 @@
   "industriesCibApi": {},
   "industriesDecisionMatrixDesignerApi": {},
   "industriesExplainabilityApi": {},
+  "industriesHealthcloudHpiApi": {},
   "industriesIdentityVerificationApi": {},
   "industriesInterestTaggingApi": {},
   "industriesLoyaltyEngineApi": {},

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.14.2-alpha",
+    "version": "1.14.3-alpha",
     "engines": {
         "node": ">=12.18.3"
     },
@@ -57,6 +57,10 @@
                 "name": "@salesforce/label/LightningErrorMessage.validityTooShort",
                 "path": "scopedImports/@salesforce-label-LightningErrorMessage.validityTooShort.js"
             },
+            {
+                "name": "@salesforce/label/LightningErrorMessage.validitySelectAtleastOne",
+                "path": "scopedImports/@salesforce-label-LightningErrorMessage.validitySelectAtleastOne.js"
+            },
             {
                 "name": "@salesforce/label/LightningCarousel.tabString",
                 "path": "scopedImports/@salesforce-label-LightningCarousel.tabString.js"
@@ -369,6 +373,14 @@
                 "name": "@salesforce/label/LightningDualListbox.requiredOptionError",
                 "path": "scopedImports/@salesforce-label-LightningDualListbox.requiredOptionError.js"
             },
+            {
+                "name": "@salesforce/label/LightningDualListbox.movedOptionsSingular",
+                "path": "scopedImports/@salesforce-label-LightningDualListbox.movedOptionsSingular.js"
+            },
+            {
+                "name": "@salesforce/label/LightningDualListbox.movedOptionsPlural",
+                "path": "scopedImports/@salesforce-label-LightningDualListbox.movedOptionsPlural.js"
+            },
             {
                 "name": "@salesforce/label/LightningProgressIndicator.stageComplete",
                 "path": "scopedImports/@salesforce-label-LightningProgressIndicator.stageComplete.js"
@@ -861,6 +873,10 @@
                 "name": "@salesforce/label/LightningMap.iframeTitle",
                 "path": "scopedImports/@salesforce-label-LightningMap.iframeTitle.js"
             },
+            {
+                "name": "@salesforce/label/LightningMap.titleWithAddress",
+                "path": "scopedImports/@salesforce-label-LightningMap.titleWithAddress.js"
+            },
             {
                 "name": "@salesforce/label/LightningPrimitiveCoordinate.selected",
                 "path": "scopedImports/@salesforce-label-LightningPrimitiveCoordinate.selected.js"

package/scopedImports/@salesforce-label-LightningDualListbox.movedOptionsPlural.js

@@ -0,0 +1 @@
+export default 'Items {0} moved to the list {1}';

package/scopedImports/@salesforce-label-LightningDualListbox.movedOptionsSingular.js

@@ -0,0 +1 @@
+export default 'Item {0} moved to the list {1}';

package/scopedImports/@salesforce-label-LightningErrorMessage.validitySelectAtleastOne.js

@@ -0,0 +1 @@
+export default 'You must select at least one choice from this set.';

package/scopedImports/@salesforce-label-LightningMap.titleWithAddress.js

@@ -0,0 +1 @@
+export default 'Map of {0}';

package/src/lightning/ariaObserver/__docs__/ariaObserver.md

@@ -0,0 +1,142 @@
+The `lightning/ariaObserver` module provides an easy way for users to write accessible component that works in both synthetic and native shadow.
+
+## Aria ID referencing in native shadow
+Use the` AriaObserver` library to write accessible component that works where `ariaLabelledBy` would break native shadow. 
+
+Here's an example that won't work with native shadow. In the following code, we support attribute `ariaLabelledBy` in our component `c-foo`, so the `input` element is labelled by external elements.
+
+``` html
+<template>
+    <input aria-labelledby={ariaLabelledBy}>
+</template>
+```
+
+```
+class Foo extends LightningElement {
+    @api ariaLabelledBy;
+}
+```
+
+This example uses the `aria-labelledby` attribute to use the internal input as an external label in `c-foo`.
+
+``` html
+<span id="my-label">Input field</span>
+<c-foo aria-labelledby="my-label"></c-foo>
+```
+
+The above example works fine in synthetic shadow, but in native shadow mode, the `aria-labelledby` ID reference is broken. The `input` element is isolated in its own shadow DOM, so the label with id `my-label` isn't in the same shadow boundary.
+
+## Creating AriaObserver
+
+To use `AriaObserver` in your component, first import it from `lightning/ariaObserver`. Then, instantiate the `AriaObserver` within your component.
+
+The `AriaObserver` constructor takes one parameter:
+- `cmpReference` The reference of the current component (`this`).
+
+``` js
+import AriaObserver from 'lightning/ariaObserver';
+
+class Foo extends LightningElement {
+    constructor() {
+        super();
+        this.ariaObserver = new AriaObserver(this);
+    }
+}
+```
+
+Next, use the `connect(options)` method to connect between the internal element and the external reference. It takes an options object with the following keys:
+- `targetSelector` The selector to the internal element where the aria attribute should be attached.
+- `attribute` The name of the aria attribute. Two supported options: `aria-labelledby`and `aria-describedby`.
+- `id` The ID of the external element. Alternatively, you can use `ids` for multiple IDs.
+
+This example uses `connect(options)` to display an aria label for the internal `input` element.
+``` js
+@api
+get ariaLabelledBy() {
+    return this._ariaLabelledBy;
+}
+set ariaLabelledBy(refs) {
+    this._ariaLabelledBy = refs;
+
+    this.ariaObserver.connect({
+        targetSelector: 'input',
+        attribute: 'aria-labelledby',
+        id: refs
+    });
+}
+```
+
+Then use the `sync()` method to synchronize the ID references when the template is re-rendered.
+
+``` js
+renderedCallback() {
+    this.ariaObserver.sync();
+}
+```
+
+Finally, disconnect the aria observer and free the resources at the end of the component lifecycle.
+
+``` js
+disconnectedCallback() {
+    if (this.ariaObserver) {
+        this.ariaObserver.disconnect();
+        this.ariaObserver = undefined;
+    }
+}
+```
+
+Here is all these steps combined into a complete example of a component using `AriaObserver`.
+
+``` html
+<template>
+    <!-- element where the aria attribute is attached -->
+    <input>
+</template>
+```
+
+``` js
+import {api, LightningElement} from 'lwc';
+import AriaObserver from 'lightning/ariaObserver';
+
+export default class Foo extends LightningElement {
+    constructor() {
+        super();
+        this.ariaObserver = new AriaObserver(this);
+    }
+
+    _ariaLabelledBy = '';
+
+    @api
+    get ariaLabelledBy() {
+        return this._ariaLabelledBy;
+    }
+    set ariaLabelledBy(refs) {
+        this._ariaLabelledBy = refs;
+
+        /* Establish the connection between input and the external label */
+        this.ariaObserver.connect({
+            targetSelector: 'input',
+            attribute: 'aria-labelledby',
+            id: refs
+        });
+    }
+
+    renderedCallback() {
+        this.ariaObserver.sync();
+    }
+
+    disconnectedCallback() {
+        if (this.ariaObserver) {
+            this.ariaObserver.disconnect();
+            this.ariaObserver = undefined;
+        }
+    }
+}
+```
+
+## Limitations
+`AriaObserver` only works with text-only aria ID references.
+
+Supported attributes:
+- `aria-labelledby`
+- `aria-describedby`

package/src/lightning/buttonMenu/keyboard.js

@@ -113,16 +113,6 @@ export function handleKeyDownOnMenuTrigger(event, menuInterface) {
                 menuInterface.toggleMenuVisibility();
             }
             break;
-        // W3: Home and End: If arrow key wrapping is not supported, move focus to first and last item
-        // Note: We do support wrapping, but it doesn't hurt to support these keys anyway.
-        case keyCodes.home:
-            preventDefaultAndStopPropagation(event);
-            menuInterface.focusOnIndex(0);
-            break;
-        case keyCodes.end:
-            preventDefaultAndStopPropagation(event);
-            menuInterface.focusOnIndex(menuInterface.getTotalMenuItems() - 1);
-            break;
         // W3: Escape: Close the menu and return focus to the element or context, e.g., menu button or
         // parent menu item, from which the menu was opened
         case keyCodes.escape:

package/src/lightning/card/card.html

@@ -40,5 +40,11 @@
                 <slot name="footer"></slot>
             </div>
         </template>
+        <!-- This dummy placeholder slot is required because
+            a slot's presence is verified by assignedElements count
+            and not whether the slot itself is present or not -->
+        <template if:false={showFooter}>
+            <slot name="footer" class="slds-hide"></slot>
+        </template>
     </article>
 </template>

package/src/lightning/checkboxGroup/checkboxGroup.html

@@ -1,5 +1,5 @@
 <template>
-    <fieldset aria-required={required}>
+    <fieldset aria-describedby={computearaiDescriedBy}>
 
         <legend class={computedLegendClass}>
             <template if:true={required}>
@@ -32,6 +32,6 @@
         <template if:true={_helpMessage}>
             <div id="helptext" data-helptext class="slds-form-element__help">{_helpMessage}</div>
         </template>
-
+        
     </fieldset>
 </template>

package/src/lightning/checkboxGroup/checkboxGroup.js

@@ -295,7 +295,7 @@ export default class LightningCheckboxGroup extends LightningElement {
     get _constraint() {
         if (!this._constraintApi) {
             this._constraintApi = new FieldConstraintApi(() => this, {
-                valueMissing: () =>
+                validitySelectAtleastOneValue: () =>
                     !this.disabled && this.required && this.value.length === 0,
             });
         }
@@ -313,4 +313,9 @@ export default class LightningCheckboxGroup extends LightningElement {
             })
             .toString();
     }
+
+    computearaiDescriedBy() {
+        const helpMessage = this.template.querySelector('[data-helptext]');
+        return getRealDOMId(helpMessage);
+    }
 }

package/src/lightning/colorPickerCustom/colorPickerCustom.js

@@ -8,6 +8,7 @@ import labelHexLabel from '@salesforce/label/LightningColorPicker.hexLabel';
 import labelHueInput from '@salesforce/label/LightningColorPicker.hueInput';
 import labelRInput from '@salesforce/label/LightningColorPicker.rInput';
 import labelRedAbbr from '@salesforce/label/LightningColorPicker.redAbbr';
+import formFactorPropertyName from '@salesforce/client/formFactor';
 import { LightningElement, api, track } from 'lwc';
 import { keyCodes } from 'lightning/utilsPrivate';
 import { generateUniqueId, getErrorMessage } from 'lightning/inputUtils';
@@ -58,7 +59,25 @@ export default class LightningColorPickerCustom extends LightningElement {
         if (!this._initialized) {
             // eslint-disable-next-line @lwc/lwc/no-async-operation
             requestAnimationFrame(() => {
-                this.focus();
+                // (*1*)
+                if (formFactorPropertyName !== 'Large') {
+                    /**
+                     * We need to wait for one more animation frame and invoke .focus()
+                     * in iOS. This is because the positionLibray.js initially sets the position
+                     * of this color-picker element to "top: 0px" and then later repositions it asynchronously
+                     * it the next animation frames. The first (*1*) rAF callback is fired between
+                     * setting "top: 0px" and then later repositioning it. Calling .focus() in this callback
+                     * triggers a re-paint step and the page is scrolled to the top due to "top: 0px" being
+                     * present in the styles. To avoid this, we can delay the next re-paint after color-picker
+                     * is repositioned correctly by positionLibrary.js. Hence we wait for next animation frame
+                     * and then call .focus() to trigger the next re-paint after the color-picker is repositioned correctly
+                     * which was initially positioned with "top: 0px" by positionLibrary.js
+                     */
+                    // eslint-disable-next-line @lwc/lwc/no-async-operation
+                    requestAnimationFrame(() => this.focus());
+                } else {
+                    this.focus();
+                }
             });
             this.gradient();
             this.handleUpdateAnchor();

package/src/lightning/datatable/__docs__/datatable.md

@@ -244,6 +244,28 @@ Valid data types and their supported attributes include:
 | text        | Displays text using [lightning-formatted-text](bundle/lightning-formatted-text/). This is the default data type.                                                                                                                                                                                                                                                       | linkify                                                                                                                                                       |
 | url         | Displays a URL using [lightning-formatted-url](bundle/lightning-formatted-url/)                                                                                                                                                                                                                                                                                        | label, target, tooltip                                                                                                                                        |
 
+In some situations, multiple columns reference the same `fieldName` but have different `fieldApiNames` and different ways of working with the field information. To give a column a unique ID when using the same field name for two columns, use the attribute `columnKey` instead of `fieldName` on one of the column definitions.
+
+```javascript
+get columns() {
+    return [
+        // Column using 'fieldName' as identifier
+        {
+            label: 'Lead',
+            fieldName: 'leadId',
+            ...
+        },
+        // Column using 'columnKey' as identifier
+        {
+            label: 'Company',
+            columnKey: 'leadCompany',
+            fieldName: 'leadId',
+            ...
+        }
+    ]
+}
+```
+
 #### Custom Formatting Examples
 
 To customize the formatting based on the data type, pass in the attributes for
@@ -494,6 +516,21 @@ const columns = [
 
 Custom classes are currently not supported. To apply custom styling on your datatable cells, create a custom data type and then apply your custom CSS classes. See [Custom Data Type Layout and Styles](docs/component-library/documentation/lwc/lwc.data_table_custom_types_styling).
 
+#### Displaying Indicators for Read-Only Fields
+
+You can display a lock icon on read-only fields to specify they're not editable. To specify that a column's field as read-only, set the column attribute `editable` to `false` and the column attribute `displayReadOnlyIcon` to `true` in the associated column definition. This example displays a lock icon on each field in a column called "Website."
+
+```javascript
+const columns = [
+    {
+        label: 'Website',
+        fieldName: 'website',
+        type: 'url',
+        editable: false,
+        displayReadOnlyIcon: true,
+    }
+```
+
 #### Using Infinite Scrolling to Load More Rows
 
 Infinite scrolling enables you to load a subset of data and then display more
@@ -1031,6 +1068,24 @@ handleSave(event) {
 }
 ```
 
+You can also program an external element, such as a button, to open an inline edit panel on the currently active cell or next editable cell in the datatable. Invoke the `openInlineEdit()` method in the external element that should direct a user to the first editable cell in your datatable component.
+
+This example opens a datatable cell for inline edit when the user clicks an "Edit" button.
+
+```javascript
+import { LightningElement } from 'lwc';
+export default class DatatableWithInlineEdit extends LightningElement {
+    data = [];
+    columns = columns;
+    rowOffset = 0;
+
+    handleClick() {
+        const dt = this.template.querySelector('lightning-datatable');
+        dt.openInlineEdit();
+    }
+}
+```
+
 For more information, see [Display Data in a Table with Inline Editing](docs/component-library/documentation/lwc/lwc.data_table_inline_edit).
 
 #### Displaying Errors

package/src/lightning/datatable/__examples__/basic/basic.html

@@ -5,5 +5,5 @@
                 data={data}
                 columns={columns}>
         </lightning-datatable>
-    </div>    
+    </div>
 </template>

package/src/lightning/datatable/columns-shared.js

@@ -4,7 +4,7 @@
  * which also has a dependency on `columns.js` for `getColumnName()`.
  *
  * We split out some of the functions that could cause circular dependencies with
- * `column.js` into the `*-shared.js` files. `inlineEdit-shared.js` is another.
+ * `column.js` into the `*-shared.js` files. `inlineEditShared.js` is another.
  */
 
 export function getColumnName(column) {

package/src/lightning/datatable/datatable.js

@@ -42,7 +42,7 @@ import {
 import {
     syncSelectedRowsKeys,
     handleRowSelectionChange,
-    updateSelectionState,
+    updateBulkSelectionState,
     getMaxRowSelection,
     setMaxRowSelection,
     getSelectedRowsKeys,
@@ -53,7 +53,7 @@ import {
     handleDeselectRow,
     getHideSelectAllCheckbox,
     getCurrentSelectionLength,
-} from './selector';
+} from './rowSelection';
 import {
     syncActiveCell,
     handleKeydownOnCell,
@@ -80,6 +80,7 @@ import {
     handleKeydownOnTable,
     addFocusStylesToActiveCell,
     refocusCellElement,
+    isCellElement,
 } from './keyboard';
 import {
     getRowNumberOffset,
@@ -134,7 +135,13 @@ import {
 import {
     isViewportRenderingEnabled,
     setViewportRendering,
+    getDTRows,
+    getDTRenderedRowCount,
+    setDTRenderedRowCount,
+    getDTWrapperHeight,
+    normalizeVirtualization,
     RenderManager,
+    DEFAULT_ROW_HEIGHT,
 } from './renderManager';
 
 import { hasTreeDataType } from './tree';
@@ -144,6 +151,7 @@ import { generateUniqueId } from 'lightning/inputUtils';
 import DatatableTypes from './types';
 import labelAriaLiveNavigationMode from '@salesforce/label/LightningDatatable.ariaLiveNavigationMode';
 import labelAriaLiveActionMode from '@salesforce/label/LightningDatatable.ariaLiveActionMode';
+import { styleToString } from './utils';
 
 const i18n = {
     ariaLiveNavigationMode: labelAriaLiveNavigationMode,
@@ -192,12 +200,14 @@ export default class LightningDatatable extends LightningElement {
     _customerSelectedRows = null;
     _datatableId = generateUniqueId('lgt-datatable');
     _draftValues = [];
+    _firstVisibleIndex = 0; // first row that should be visible in viewport, used for virtualization
     _isResizing = false; // Whether resizing is in progress
     _privateTypes = {};
     _privateWidthObserver = null; // Instance of LightningDatatableResizeObserver
     _renderMode = 'table';
     _renderedRowCount = 0;
     _suppressBottomBar = false;
+    _virtualize = '';
 
     /************************* PUBLIC PROPERTIES *************************/
 
@@ -493,6 +503,7 @@ export default class LightningDatatable extends LightningElement {
      * @type {object}
      * @property {boolean} viewportRendering - Specifies whether to defer rendering of rows outside the viewport until the user begins scrolling. To use this feature, create a fixed-height container element for lightning-datatable.
      * @property {number} rowHeight - Specifies the height of a row, in px
+     * @property {string} virtualize - specifies whether to enable virtualization. This requires the "role-based" render mode and a fixed-height container for lightning-datatable
      */
 
     /**
@@ -508,10 +519,28 @@ export default class LightningDatatable extends LightningElement {
 
     set renderConfig(value) {
         if (typeof value === 'object' && !isIE11) {
-            const enableViewportRendering = value.viewportRendering;
-            setViewportRendering(this.state, enableViewportRendering);
+            const { viewportRendering, virtualize } = value;
+            setViewportRendering(this.state, viewportRendering);
+            if (this.state.renderModeRoleBased) {
+                this._virtualize = normalizeVirtualization(virtualize);
+            }
 
-            this._renderManager.configure(this, value);
+            this._renderManager.configure(
+                this.getRows,
+                this.getWrapperHeight,
+                this.getRenderedRowCount,
+                this.setRenderedRowCount,
+                value
+            );
+            // if renderConfig already exists, update rendering
+            if (this._renderConfig) {
+                this._renderManager.updateViewportRendering(
+                    this.state.rows,
+                    this.setRenderedRowCount,
+                    this.gridContainer,
+                    true
+                );
+            }
             this._renderConfig = value;
         }
     }
@@ -759,24 +788,38 @@ export default class LightningDatatable extends LightningElement {
 
     get computedTableStyle() {
         if (this._columnWidthManager.isAutoResizingUpdateQueued()) {
-            return ['table-layout:auto'].join(';');
+            return styleToString(['table-layout:auto']);
         }
-        return [
+        return styleToString([
             'table-layout:fixed',
             getCSSWidthStyleOfTable(this.widthsData),
-        ].join(';');
+        ]);
     }
 
+    /**
+     * Resets row-number counter to offset to show
+     * correct value when row number column is present
+     * and adds necessary position and height styles when
+     * virtualization is enabled
+     */
     get computedTbodyStyle() {
+        const style = [];
         if (
             hasRowNumberColumn(this.state) &&
             getRowNumberOffset(this.state) >= 0
         ) {
-            return (
+            style.push(
                 'counter-reset: row-number ' + getRowNumberOffset(this.state)
             );
         }
-        return '';
+        if (this._virtualize) {
+            const length = this.state.rows.length;
+            style.push(
+                'position: relative',
+                `height:${length * DEFAULT_ROW_HEIGHT}px`
+            );
+        }
+        return styleToString(style);
     }
 
     /**
@@ -812,9 +855,7 @@ export default class LightningDatatable extends LightningElement {
             styles['overflow-x'] = 'auto';
         }
 
-        return Object.entries(styles)
-            .map(([key, value]) => key + ':' + value)
-            .join(';');
+        return styleToString(styles);
     }
 
     /**
@@ -897,6 +938,14 @@ export default class LightningDatatable extends LightningElement {
     }
 
     get renderedRows() {
+        if (this._virtualize) {
+            const { firstIndex, lastIndex } =
+                this._renderManager.getRenderedRange(
+                    this._firstVisibleIndex,
+                    this._renderedRowCount
+                );
+            return this.state.rows.slice(firstIndex, lastIndex);
+        }
         if (this.viewportRendering && !isIE11) {
             return this.state.rows.slice(0, this._renderedRowCount);
         }
@@ -936,6 +985,10 @@ export default class LightningDatatable extends LightningElement {
         this.updateRowsAndCellIndexes = updateRowsAndCellIndexes.bind(this);
 
         this._renderManager = new RenderManager();
+        this.getRenderedRowCount = getDTRenderedRowCount.bind(this);
+        this.setRenderedRowCount = setDTRenderedRowCount.bind(this);
+        this.getRows = getDTRows.bind(this);
+        this.getWrapperHeight = getDTWrapperHeight.bind(this);
     }
 
     /**
@@ -1095,16 +1148,24 @@ export default class LightningDatatable extends LightningElement {
         // set the previous focused cell to null after render is done
         resetCellToFocusFromPrev(state);
 
-        if (this.viewportRendering) {
-            this._renderManager.connectResizeObserver(this);
+        if (this.viewportRendering || this._virtualize) {
+            const resizeTarget = this.template.querySelector(
+                'div.dt-outer-container'
+            );
+            this._renderManager.connectResizeObserver(resizeTarget);
             if (!this._renderManager.hasWrapperHeight()) {
-                this._renderManager.updateWrapperHeight(this);
+                this._renderManager.updateWrapperHeight(this.getWrapperHeight);
 
                 // Reset the row count if we already had one before updating the wrapper height.
                 // This can happen if the number of rows was calculated before the datatable
                 // was rendered.
                 if (this._renderedRowCount) {
-                    this._renderManager.updateViewportRendering(this, true);
+                    this._renderManager.updateViewportRendering(
+                        this.state.rows,
+                        this.setRenderedRowCount,
+                        this.gridContainer,
+                        true
+                    );
                 }
             }
         }
@@ -1187,9 +1248,16 @@ export default class LightningDatatable extends LightningElement {
         }
 
         handleInlineEditPanelScroll.call(this, event);
-
-        if (this.viewportRendering) {
-            this._renderManager.handleScroll(this, event);
+        if (this._virtualize) {
+            this._firstVisibleIndex =
+                this._renderManager.getFirstVisibleIndex(event);
+        } else if (this.viewportRendering) {
+            this._renderManager.handleScroll(
+                this.state.rows,
+                this._renderedRowCount,
+                this.setRenderedRowCount,
+                event
+            );
         }
     }
 
@@ -1202,8 +1270,9 @@ export default class LightningDatatable extends LightningElement {
     handleCellClick(event) {
         // handles the case when clicking on the margin/pading of the td/th
         const targetTagName = event.target.tagName.toLowerCase();
+        const targetRole = event.target.getAttribute('role');
 
-        if (targetTagName === 'td' || targetTagName === 'th') {
+        if (isCellElement(targetTagName, targetRole)) {
             // get the row/col key value from the primitive cell.
             const { rowKeyValue, colKeyValue } =
                 event.target.querySelector(':first-child');
@@ -1464,8 +1533,12 @@ export default class LightningDatatable extends LightningElement {
 
         this.updateRowsAndCellIndexes(state);
 
-        if (this.viewportRendering) {
-            this._renderManager.updateViewportRendering(this);
+        if (this.viewportRendering || this._virtualize) {
+            this._renderManager.updateViewportRendering(
+                this.state.rows,
+                this.setRenderedRowCount,
+                this.gridContainer
+            );
         }
 
         this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
@@ -1508,7 +1581,7 @@ export default class LightningDatatable extends LightningElement {
         // Updates state.wrapText and when isWrapableType, sets internal header actions
         updateHeaderActions(state);
         this.updateRowsAndCellIndexes(state);
-        updateSelectionState(state);
+        updateBulkSelectionState(state);
         this._columnWidthManager.handleRowNumberOffsetChange(state, widthsData);
         updateColumnWidthsMetadata(getColumns(state), widthsData);
         // set the celltofocus next to null if the column still exists after indexes calculation