lightning-base-components 1.18.4-alpha → 1.18.5-alpha

package/metadata/raptor.json

@@ -3169,6 +3169,27 @@
       {
         "name": "value"
       }
+    ],
+    "methods": [
+      {
+        "name": "blur"
+      },
+      {
+        "name": "focus"
+      }
+    ]
+  },
+  "recordPickerGetRecord": {
+    "properties": [
+      {
+        "name": "displayInfo"
+      },
+      {
+        "name": "objectApiName"
+      },
+      {
+        "name": "recordId"
+      }
     ]
   },
   "recordUtils": {},

package/package.json

@@ -1,12 +1,12 @@
 {
     "name": "lightning-base-components",
-    "version": "1.18.4-alpha",
+    "version": "1.18.5-alpha",
     "license": "MIT",
     "files": [
         "external",
         "scopedImports",
         "metadata",
-        "src/lightning/*/!(__container__|__integration__|__perf__|__raptorMocks__|__test__|__tests__)",
+        "src/lightning/*/!(__container__|__perf__|__raptorMocks__|__test__|__tests__)",
         "package.json"
     ],
     "engines": {
@@ -1306,6 +1306,7 @@
             "lightning-radio-group",
             "lightning-select",
             "lightning-spinner",
+            "lightning-tab",
             "lightning-tab-bar",
             "lightning-timepicker",
             "lightning-vertical-navigation",

package/src/lightning/baseCombobox/baseCombobox.js

@@ -21,7 +21,7 @@ import {
 import { AutoPosition, Direction } from 'lightning/positionLibrary';
 import { VARIANT } from 'lightning/inputUtils';
 import AriaObserver from 'lightning/ariaObserver';
-
+import { isCSR } from 'lightning/utilsPrivate';
 const i18n = {
     ariaSelectedOptions: labelAriaSelectedOptions,
     deselectOptionKeyboard: labelDeselectOptionKeyboard,
@@ -51,6 +51,7 @@ const ARIA_INVALID = 'aria-invalid';
 
 export default class LightningBaseCombobox extends LightningShadowBaseClass {
     static delegatesFocus = true;
+    static validationOptOut = ['class'];
 
     /**
      * Controls auto-filling of the input. Set the attribute to pass
@@ -82,17 +83,16 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     @api attributionLogoUrl;
     @api attributionLogoAssistiveText;
 
-    @track _showDropdownActivityIndicator = false;
+    _showDropdownActivityIndicator = false;
     @track _items = [];
-    @track _disabled = false;
-    @track _dropdownVisible = false;
-    @track _hasDropdownOpened = false;
-    @track _highlightedOptionElementId = null;
-    @track _variant;
-    @track _dropdownHeight = 'standard';
-    @track _readonly = false;
-    @track _logoLoaded = false;
-
+    _disabled = false;
+    _dropdownVisible = false;
+    _hasDropdownOpened = false;
+    _highlightedOptionElementId = null;
+    _variant;
+    _dropdownHeight = 'standard';
+    _readonly = false;
+    _logoLoaded = false;
     _inputDescribedBy = [];
     _inputAriaControls;
     _activeElementDomId;
@@ -126,7 +126,9 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     connectedCallback() {
         super.connectedCallback();
         this.setupAriaObserverIfAbsent();
-        this.overrideDropdownAlignment();
+        if (isCSR) {
+            this.overrideDropdownAlignment();
+        }
         this.classList.add('slds-combobox_container');
         this._connected = true;
         this._keyboardInterface = this.dropdownKeyboardInterface();
@@ -597,7 +599,9 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     get dropdownElement() {
-        return this.template.querySelector('[data-dropdown-element]');
+        return isCSR
+            ? this.template.querySelector('[data-dropdown-element]')
+            : null;
     }
 
     get i18n() {
@@ -942,7 +946,9 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     get inputElement() {
-        return this.template.querySelector(INPUT_ELEMENT_SELECTOR);
+        return isCSR
+            ? this.template.querySelector(INPUT_ELEMENT_SELECTOR)
+            : null;
     }
 
     // remove-next-line-for-c-namespace

package/src/lightning/buttonIcon/buttonIcon.js

@@ -1,6 +1,6 @@
 import { api } from 'lwc';
 import { classSet } from 'lightning/utils';
-import { normalizeString as normalize } from 'lightning/utilsPrivate';
+import { normalizeString as normalize, isCSR } from 'lightning/utilsPrivate';
 // remove-next-line-for-c-namespace
 import { Tooltip, TooltipType } from 'lightning/tooltipLibrary';
 import LightningPrimitiveButton from 'lightning/primitiveButton';
@@ -89,6 +89,7 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      * @default medium
      */
     _size = DEFAULT_SIZE;
+
     @api
     get size() {
         return this._originalSize;
@@ -319,22 +320,24 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
     connectedCallback() {
         super.connectedCallback();
         this._connected = true;
-        this.dispatchEvent(
-            new CustomEvent('privatebuttoniconregister', {
-                cancelable: true,
-                bubbles: true,
-                detail: {
-                    // Tooltip type should be toggle for some consumers like helptext
-                    setTooltipType: (tooltipType) => {
-                        this.tooltipType = tooltipType;
-                    },
-                    // Title should not be set for some consumers like helptext (see W-12496300)
-                    showTitle: (showTitle) => {
-                        this.showTitle = showTitle;
+        if (isCSR) {
+            this.dispatchEvent(
+                new CustomEvent('privatebuttoniconregister', {
+                    cancelable: true,
+                    bubbles: true,
+                    detail: {
+                        // Tooltip type should be toggle for some consumers like helptext
+                        setTooltipType: (tooltipType) => {
+                            this.tooltipType = tooltipType;
+                        },
+                        // Title should not be set for some consumers like helptext (see W-12496300)
+                        showTitle: (showTitle) => {
+                            this.showTitle = showTitle;
+                        },
                     },
-                },
-            })
-        );
+                })
+            );
+        }
     }
 
     renderedCallback() {

package/src/lightning/combobox/combobox.js

@@ -19,6 +19,8 @@ import {
     VARIANT,
 } from 'lightning/inputUtils';
 
+import { isCSR } from 'lightning/utilsPrivate';
+
 const i18n = {
     required: labelRequired,
     placeholder: labelPlaceholder,
@@ -30,15 +32,20 @@ const i18n = {
  */
 export default class LightningCombobox extends LightningShadowBaseClass {
     static delegatesFocus = true;
-
-    @track _ariaLabelledBy = '';
-    @track _ariaDescribedBy = '';
-    @track _fieldLevelHelp = '';
-    @track _selectedLabel = '';
-    @track _disabled = false;
-    @track _readOnly = false;
-    @track _spinnerActive = false;
-    @track _required = false;
+    static validationOptOut = ['class'];
+
+    _ariaLabelledBy = '';
+    _ariaDescribedBy = '';
+    _fieldLevelHelp = '';
+    _selectedLabel = '';
+    _disabled = false;
+    _readOnly = false;
+    _spinnerActive = false;
+    _required = false;
+    _variant;
+    _helpMessage;
+    _labelForId;
+    @track _items = [];
 
     /**
      * Reserved for internal use. Controls auto-filling of the field.
@@ -84,12 +91,6 @@ export default class LightningCombobox extends LightningShadowBaseClass {
      */
     @api name;
 
-    @track _items = [];
-    @track _variant;
-    @track _helpMessage;
-
-    _labelForId;
-
     renderedCallback() {
         this.synchronizeA11y();
     }
@@ -376,7 +377,7 @@ export default class LightningCombobox extends LightningShadowBaseClass {
     }
 
     get templateRootNode() {
-        return this.template.host.getRootNode();
+        return isCSR ? this.template.host.getRootNode() : null;
     }
 
     get i18n() {

package/src/lightning/tab/tab.css

@@ -0,0 +1,2 @@
+@import 'lightning/sldsCommon';
+@import './tab.slds.css';

package/src/lightning/tab/tab.js

@@ -1,28 +1,36 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
-
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 /**
  * A single tab in a tabset component.
  * @slot default Placeholder for your content in lightning-tab.
  */
-export default class LightningTab extends LightningElement {
+export default class LightningTab extends LightningShadowBaseClass {
     @track _loadContent = false;
+    _registered = false;
 
     connectedCallback() {
+        super.connectedCallback();
         this._connected = true;
+    }
 
-        this.dispatchEvent(
-            new CustomEvent('privatetabregister', {
-                cancelable: true,
-                bubbles: true,
-                composed: true,
-                detail: {
-                    setDeRegistrationCallback: (deRegistrationCallback) => {
-                        this._deRegistrationCallback = deRegistrationCallback;
+    renderedCallback() {
+        if (!this._registered) {
+            this._registered = true;
+            this.dispatchEvent(
+                new CustomEvent('privatetabregister', {
+                    cancelable: true,
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        setDeRegistrationCallback: (deRegistrationCallback) => {
+                            this._deRegistrationCallback =
+                                deRegistrationCallback;
+                        },
                     },
-                },
-            })
-        );
+                })
+            );
+        }
     }
 
     /**

package/src/lightning/tab/tab.slds.css

@@ -0,0 +1,47 @@
+
+@supports (--styling-hooks: '') {
+  /* Reassignments for parity with SLDS blueprint
+    https://www.lightningdesignsystem.com/components/tabs/#Styling-Hooks-Overview */
+
+
+  :host([data-render-mode="shadow"].slds-tabs_default__content) {
+    --slds-c-tabs-panel-spacing-block-start: var(--slds-c-tab-panel-spacing-block-start);
+    --slds-c-tabs-panel-spacing-block-end: var(--slds-c-tab-panel-spacing-block-end);
+    --slds-c-tabs-panel-spacing-inline-end: var(--slds-c-tab-panel-spacing-inline-end);
+    --slds-c-tabs-panel-spacing-inline-start: var(--slds-c-tab-panel-spacing-inline-start);
+
+    position: relative;
+    padding-block-start: var(--slds-c-tab-panel-spacing-block-start, var(--sds-g-spacing-3, 0.75rem));
+    padding-inline-end: var(--slds-c-tab-panel-spacing-inline-end, 0);
+    padding-block-end: var(--slds-c-tab-panel-spacing-block-end, var(--sds-g-spacing-3, 0.75rem));
+    padding-inline-start: var(--slds-c-tab-panel-spacing-inline-start, 0);
+  }
+
+  :host([data-render-mode="shadow"].slds-tabs_scoped__content) {
+    background-color: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+    border: var(--sds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-base-4, var(--sds-g-color-neutral-base-80, #c9c9c9));
+    border-block-start: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: var(--sds-g-spacing-1, 0.25rem);
+    border-end-start-radius: var(--sds-g-spacing-1, 0.25rem);
+    padding: var(--sds-g-spacing-4, 1rem);
+  }
+
+  :host([data-render-mode="shadow"].slds-vertical-tabs__content) {
+    flex: 1;
+    padding: var(--sds-g-spacing-4, 1rem);
+    background: var(--slds-g-color-neutral-base-100, var(--sds-g-color-neutral-base-100, #ffffff));
+  }
+
+  /* TODO W-12674349: Replace with Visibility Utility Classes when available */
+  :host([data-render-mode="shadow"].slds-show) {
+    display: block;
+  }
+
+  /* TODO W-12674349: Replace with Visibility Utility Classes when available */
+  :host([data-render-mode="shadow"].slds-hide) {
+    display: none !important
+  }
+
+}

package/src/lightning/tabset/tabset.css

@@ -0,0 +1,10 @@
+/* TODO W-12129682: styles are commented out for the future migration of `tabset`
+   to Native Shadow
+
+    :host([data-render-mode="shadow"]) .slds-vertical-tabs {
+        display: flex;
+        overflow: hidden;
+        border: 1px solid var(--slds-g-color-border-base-1, #e5e5e5);
+        border-radius: 0.25rem;]
+    }
+*/

package/src/lightning/tabset/tabset.js

@@ -23,6 +23,8 @@ export default class LightningTabset extends LightningElement {
 
     @track _tabHeaders = [];
 
+    _rerender = false;
+
     connectedCallback() {
         this._tabByValue = {};
         this._connected = true;
@@ -36,6 +38,19 @@ export default class LightningTabset extends LightningElement {
         );
     }
 
+    // must wait for this entire `tab-set` component to be rendered in order to
+    // successfully querySelect `tab-bar` from it, in methods such as _updateTabBarHeaders
+    // or _selectTab.
+    // using _rerender to trigger renderedCallback and execute these methods in here
+    // instead of the handleTabRegister method, where `tab-bar` is not querySelectable.
+    renderedCallback() {
+        if (this._rerender) {
+            this._rerender = false;
+            this._updateTabBarHeaders(this._tabHeaders);
+            this._selectTab(this._activeTabValue);
+        }
+    }
+
     disconnectedCallback() {
         this._connected = false;
     }
@@ -84,7 +99,8 @@ export default class LightningTabset extends LightningElement {
 
     handleTabRegister(event) {
         event.stopPropagation();
-
+        // setting this to true, will trigger _updateTabBarHeaders and _selectTab in renderedCallback
+        this._rerender = true;
         const tab = event.target;
 
         tab.role = 'tabpanel';
@@ -149,6 +165,11 @@ export default class LightningTabset extends LightningElement {
             endIconAlternativeText: tab.endIconAlternativeText,
             showErrorIndicator: tab.showErrorIndicator,
         });
+
+        // need to leave this _updateTabBarHeaders here so that `tab-bar` can be updated
+        // in the case of a "conditional tab". the _updateTabBarHeaders in the renderedCallback
+        // has no knowledge of the new tab being added.
+        // this call works here in the "conditional tab" case, as `tab-set` is already rendered.
         this._updateTabBarHeaders(this._tabHeaders);
 
         this._tabByValue[tabValue] = tab;
@@ -157,10 +178,6 @@ export default class LightningTabset extends LightningElement {
         if (!this._activeTabValue) {
             this._activeTabValue = tab.value;
         }
-
-        if (this._activeTabValue === tab.value) {
-            this._selectTab(tabValue);
-        }
     }
 
     _selectTab(value) {
@@ -242,16 +259,17 @@ export default class LightningTabset extends LightningElement {
      * @param {Array} headers
      */
     _updateTabBarHeaders(headers) {
-        this.template.querySelector('lightning-tab-bar').tabHeaders =
-            headers.slice();
+        if (this.template.querySelector('lightning-tab-bar')) {
+            this.template.querySelector('lightning-tab-bar').tabHeaders =
+                headers.slice();
+        }
     }
 
     _selectTabHeaderByTabValue(value) {
-        if (!this._connected) {
+        const tabBar = this.template.querySelector('lightning-tab-bar');
+        if (!this._connected || !tabBar) {
             return;
         }
-
-        const tabBar = this.template.querySelector('lightning-tab-bar');
         tabBar.selectTabByValue(value);
     }
 

package/src/lightning/button/__wdio__/utam/utam.html

@@ -1,3 +0,0 @@
-<template>
-    <lightning-button label="Click me" variant="brand"></lightning-button>
-</template>

package/src/lightning/button/__wdio__/utam/utam.js

@@ -1,3 +0,0 @@
-import { LightningElement } from 'lwc';
-
-export default class ButtonUtam extends LightningElement {}

package/src/lightning/button/__wdio__/utam/utam.spec.js

@@ -1,20 +0,0 @@
-const Button = require('pageobjects/button');
-
-describe('button utam test', () => {
-    let root;
-
-    beforeEach(async () => {
-        await browser.url('/button/utam');
-        root = await $('button-utam');
-        await root.waitForDisplayed();
-    });
-
-    it('should get the button name', async () => {
-        const button = await utam.load(Button, {
-            element: await root.shadow$('lightning-button'),
-        });
-
-        const label = await button.getButtonName();
-        expect(label).toBe('Click me');
-    });
-});

package/src/lightning/datatable/__wdio__/utam/utam.html

@@ -1,32 +0,0 @@
-<template>
-    <div style="height:160px">
-        <lightning-datatable
-            data-render-mode="default"
-            key-field="id"
-            columns={columns}
-            data={data}
-            default-sort-direction={defaultSortDirection}
-            sorted-direction={sortDirection}
-            sorted-by={sortedBy}
-            onsort={onHandleSort}
-            is-loading={loading}>
-        </lightning-datatable>
-    </div>
-    <div style="height:160px">
-        <lightning-datatable
-            data-render-mode="role-based"
-            key-field="id"
-            columns={columns}
-            data={data}
-            default-sort-direction={defaultSortDirection}
-            sorted-direction={sortDirection}
-            sorted-by={sortedBy}
-            onsort={onHandleSort}
-            is-loading={loading}
-            render-mode="role-based">
-        </lightning-datatable>
-    </div>
-    
-    <lightning-button label="Enable Loading State" onclick={handleLoadingClick}></lightning-button>
-    <lightning-button label="Add More Rows" onclick={handleMoreRowsClick}></lightning-button>
-</template>

package/src/lightning/datatable/__wdio__/utam/utam.js

@@ -1,91 +0,0 @@
-import { LightningElement } from 'lwc';
-
-const data = [
-    { id: 1, name: 'Billy Simmons', age: 40, email: 'billy@salesforce.com' },
-    { id: 2, name: 'Kelsey Denesik', age: 35, email: 'kelsey@salesforce.com' },
-    { id: 3, name: 'Kyle Ruecker', age: 50, email: 'kyle@salesforce.com' },
-    {
-        id: 4,
-        name: 'Krystina Kerluke',
-        age: 37,
-        email: 'krystina@salesforce.com',
-    },
-];
-
-const actions = [
-    { label: 'Show details', name: 'show_details' },
-    { label: 'Delete', name: 'delete' },
-];
-
-const columns = [
-    { label: 'Name', fieldName: 'name' },
-    {
-        label: 'Age',
-        fieldName: 'age',
-        type: 'number',
-        sortable: true,
-        cellAttributes: { alignment: 'left' },
-    },
-    {
-        label: 'Email',
-        fieldName: 'email',
-        type: 'email',
-        hideDefaultActions: true,
-    },
-    {
-        type: 'action',
-        typeAttributes: { rowActions: actions, menuAlignment: 'right' },
-    },
-];
-
-export default class DemoApp extends LightningElement {
-    data = data;
-    columns = columns;
-    defaultSortDirection = 'asc';
-    sortDirection = 'asc';
-    sortedBy;
-    loading = false;
-
-    // Used to sort the 'Age' column
-    sortBy(field, reverse, primer) {
-        const key = primer
-            ? function (x) {
-                  return primer(x[field]);
-              }
-            : function (x) {
-                  return x[field];
-              };
-
-        return function (a, b) {
-            a = key(a);
-            b = key(b);
-            return reverse * ((a > b) - (b > a));
-        };
-    }
-
-    onHandleSort(event) {
-        const { fieldName: sortedBy, sortDirection } = event.detail;
-        const cloneData = [...this.data];
-
-        cloneData.sort(this.sortBy(sortedBy, sortDirection === 'asc' ? 1 : -1));
-        this.data = cloneData;
-        this.sortDirection = sortDirection;
-        this.sortedBy = sortedBy;
-    }
-
-    handleLoadingClick() {
-        this.loading = !this.loading;
-    }
-
-    handleMoreRowsClick() {
-        const control = [
-            {
-                id: 20,
-                name: 'Jacqueline Palmer',
-                age: 60,
-                email: 'jacqueline@salesforce.com',
-            },
-        ];
-        this.data = this.data.concat(this.data).concat(control);
-    }
-}

package/src/lightning/datatable/__wdio__/utam/utam.spec.js

@@ -1,214 +0,0 @@
-const Datatable = require('pageobjects/datatable');
-const Button = require('pageobjects/button');
-
-const tableTypes = {
-    default: '[data-render-mode="default"]',
-    roleBased: '[data-render-mode="role-based"]',
-};
-
-describe('Datatable UTAM Page Object Tests', () => {
-    Object.keys(tableTypes).forEach((type) => {
-        describe(`${type} table`, () => {
-            const TABLE_SELECTOR = tableTypes[type];
-
-            let root;
-
-            beforeEach(async () => {
-                await browser.url('/datatable/utam');
-                root = await $('datatable-utam');
-                await root.waitForDisplayed();
-            });
-
-            it('should get the cell value by row and column index', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                const cellValue = await datatable.getCellValueByIndex(1, 2);
-                expect(cellValue).toBe('Billy Simmons');
-            });
-            it('should get the cell value by row index and column label', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                const cellValue = await datatable.getCellValueByLabel(2, 'Age');
-                expect(cellValue).toBe('35');
-            });
-            it('should get the number of rows in the table', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                const cellValue = await datatable.getNumRows();
-                expect(cellValue).toBe(4);
-            });
-            it('should tell if the table has any rows', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                const cellValue = await datatable.hasRows();
-                expect(cellValue).toBe(true);
-            });
-            it('should toggle selection of row - comprehensive', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                for (let i = 1; i <= 4; i++) {
-                    expect(await datatable.isRowSelected(i)).toBe('false');
-                }
-
-                await datatable.toggleRowSelection(1);
-                expect(await datatable.isRowSelected(1)).toBe('true');
-                [2, 3, 4].forEach(async (i) => {
-                    expect(await datatable.isRowSelected(i)).toBe('false');
-                });
-
-                await datatable.toggleRowSelection(2);
-                expect(await datatable.isRowSelected(2)).toBe('true');
-                [3, 4].forEach(async (i) => {
-                    expect(await datatable.isRowSelected(i)).toBe('false');
-                });
-
-                await datatable.toggleRowSelection(3);
-                expect(await datatable.isRowSelected(3)).toBe('true');
-                expect(await datatable.isRowSelected(4)).toBe('false');
-
-                await datatable.toggleRowSelection(4);
-                expect(await datatable.isRowSelected(4)).toBe('true');
-            });
-            it('should toggle selection of row', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                await datatable.toggleRowSelection(3);
-                expect(await datatable.isRowSelected(3)).toBe('true');
-
-                await datatable.toggleRowSelection(3);
-                expect(await datatable.isRowSelected(3)).toBe('false');
-            });
-            it('should get the number of selected rows when not all rows are selected', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                await datatable.toggleRowSelection(3);
-                expect(await datatable.getNumSelectedRows()).toBe(1);
-
-                await datatable.toggleRowSelection(2);
-                expect(await datatable.getNumSelectedRows()).toBe(2);
-            });
-            it('should get the number of selected rows when all rows are selected', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                await datatable.clickSelectAllCheckbox();
-                expect(await datatable.getNumSelectedRows()).toBe(4);
-            });
-            it('should get the number of columns in the table', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                expect(await datatable.getNumColumns()).toBe(5);
-            });
-            it('should tell whether or not a column is sortable', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                expect(await datatable.isSortableColumn('Age')).toBe(true);
-
-                // Need to speak to UTAM (about isPresent) or find a better way to write this method
-                // If column is not sortable, the test fails with the error:
-                // "Can't find elements with locator 'lightning-primitive-header-factory.slds-is-sortable' inside its scope element."
-                // expect(await datatable.isSortableColumn('Name')).toBe(false);
-            });
-            it('should tell whether or not the row is selectable', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                expect(await datatable.isSelectableRow(1)).toBe(true);
-            });
-            it('should get the width of a column', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                const datatableElement = await root.shadow$(
-                    'lightning-datatable'
-                );
-                const columnHeader = await datatableElement.shadow$(
-                    '[aria-label="Name"]'
-                );
-
-                // Remove intermediate white spaces
-                let expectedWidth = await columnHeader.getAttribute('style');
-                expectedWidth = expectedWidth.replace(/\s/g, '');
-                let actualWidth = await datatable.getWidth('Name');
-                actualWidth = actualWidth.replace(/\s/g, '');
-
-                // Using indexOf in case of presence of ';'
-                expect(actualWidth.indexOf(expectedWidth) >= 0).toBe(true);
-            });
-            it('should tell whether or not a column has header actions', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                expect(await datatable.hasHeaderActions('Name')).toBe(true);
-                expect(await datatable.hasHeaderActions('Age')).toBe(true);
-                // false fails; need to check for true or null; check with UTAM if expected
-                expect(await datatable.hasHeaderActions('Email')).toBe(null);
-            });
-            it('should get the text of the rowheader cell of the specified row', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                expect(await datatable.getRowHeaderText(2)).toBe(
-                    'Kelsey Denesik'
-                );
-            });
-            it('should click column header of the sortable column', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                let cellValue = await datatable.getCellValueByLabel(1, 'Age');
-                expect(cellValue).toBe('40');
-
-                await datatable.clickSortHeaderButton('Age');
-
-                cellValue = await datatable.getCellValueByLabel(1, 'Age');
-                expect(cellValue).toBe('35');
-            });
-            it('should tell whether the specified row has row actions or not', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                expect(await datatable.hasRowActionInRow(2)).toBe(true);
-            });
-            it('should tell whether or not the datatable has the loading indicator visible', async () => {
-                const datatable = await utam.load(Datatable, {
-                    element: await root.shadow$(TABLE_SELECTOR),
-                });
-
-                expect(await datatable.isLoading()).toBe(false);
-
-                const button = await utam.load(Button, {
-                    element: await root.shadow$('lightning-button'),
-                });
-                await button.click();
-
-                expect(await datatable.isLoading()).toBe(true);
-            });
-        });
-    });
-});