lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/combobox/combobox.html

@@ -1,33 +1,35 @@
 <template>
-    <label class={computedLabelClass}>
-        <template if:true={required}>
-            <abbr class="slds-required" title={i18n.required}>*</abbr>
-        </template>
-        {label}
-    </label>
-    <lightning-helptext if:true={_fieldLevelHelp} content={_fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
+    <div part="combobox">
+        <label class={computedLabelClass}>
+            <template if:true={required}>
+                <abbr class="slds-required" title={i18n.required}>*</abbr>
+            </template>
+            {label}
+        </label>
+        <lightning-helptext if:true={_fieldLevelHelp} content={_fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
 
-    <div class="slds-form-element__control">
-        <lightning-base-combobox name={name}
-            autocomplete={autocomplete}
-            required={required}
-            disabled={disabled}
-            placeholder={placeholder}
-            items={_items}
-            input-text={_selectedLabel}
-            input-label={label}
-            input-icon-size="xx-small"
-            input-icon-name="utility:down"
-            show-dropdown-activity-indicator={spinnerActive}
-            dropdown-alignment={dropdownAlignment}
-            ondropdownopen={handleDropdownOpen}
-            onfocus={handleFocus}
-            onblur={handleBlur}
-            onready={handleComboboxReady}
-            onselect={handleSelect}></lightning-base-combobox>
+        <div class="slds-form-element__control">
+            <lightning-base-combobox name={name}
+                autocomplete={autocomplete}
+                root-aria-node={templateRootNode}
+                required={required}
+                disabled={disabled}
+                placeholder={placeholder}
+                items={_items}
+                input-text={_selectedLabel}
+                input-label={label}
+                input-icon-size="xx-small"
+                input-icon-name="utility:down"
+                show-dropdown-activity-indicator={spinnerActive}
+                dropdown-alignment={dropdownAlignment}
+                ondropdownopen={handleDropdownOpen}
+                onfocus={handleFocus}
+                onblur={handleBlur}
+                onready={handleComboboxReady}
+                onselect={handleSelect}></lightning-base-combobox>
+        </div>
+        <template if:true={_helpMessage}>
+            <div id="help-text" data-help-text class="slds-form-element__help" aria-live="assertive">{_helpMessage}</div>
+        </template>
     </div>
-    <template if:true={_helpMessage}>
-        <div id="help-text" data-help-text class="slds-form-element__help" aria-live="assertive">{_helpMessage}</div>
-    </template>
-
 </template>

package/src/lightning/combobox/combobox.js

@@ -1,13 +1,15 @@
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelPlaceholder from '@salesforce/label/LightningCombobox.placeholder';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
-    normalizeBoolean,
+    classListMutation,
     normalizeArray,
+    normalizeBoolean,
+    reflectAttribute,
     synchronizeAttrs,
-    classListMutation,
 } from 'lightning/utilsPrivate';
 import {
     isEmptyString,
@@ -26,7 +28,7 @@ const i18n = {
  * A widget that provides an input field that is readonly,
  * accompanied by a dropdown list of selectable options.
  */
-export default class LightningCombobox extends LightningElement {
+export default class LightningCombobox extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     @track _ariaLabelledBy = '';
@@ -93,6 +95,7 @@ export default class LightningCombobox extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.interactingState = new InteractingState();
@@ -181,6 +184,7 @@ export default class LightningCombobox extends LightningElement {
     set variant(value) {
         this._variant = normalizeVariant(value);
         this.updateClassList();
+        reflectAttribute(this, 'variant', this._variant);
     }
 
     /**
@@ -325,6 +329,15 @@ export default class LightningCombobox extends LightningElement {
     @api
     reportValidity() {
         return this._constraint.reportValidity((message) => {
+            // manage invalid attribute on the base combobox
+            // this is done to allow css to target invalid base-combobox state
+            // we may want to update the logic in base combobox to handle this
+            // more generally once more usages like grouped, lookupaddress etc. are migrated
+            reflectAttribute(
+                this.template.querySelector('lightning-base-combobox'),
+                'invalid',
+                !this.checkValidity()
+            );
             this._helpMessage = message;
         });
     }
@@ -362,6 +375,10 @@ export default class LightningCombobox extends LightningElement {
         baseCombobox.inputDescribedByElements = this.computedAriaDescribedBy;
     }
 
+    get templateRootNode() {
+        return this.template.host.getRootNode();
+    }
+
     get i18n() {
         return i18n;
     }

package/src/lightning/combobox/combobox.slds.css

@@ -0,0 +1,13 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+@supports (--styling-hooks: '') {
+  /**
+   * Invalid State
+   */
+  :host([data-render-mode="shadow"][invalid]) [part~='combobox'] {
+    --slds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
+    --slds-c-inputtext-sizing-border: var(--sds-g-sizing-border-1, 1px);
+  }
+}

package/src/lightning/combobox/form-element.slds.css

@@ -0,0 +1,281 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+  @supports (--styling-hooks: '') {
+    /* TODO: Swap with utility classes */
+    :host([data-render-mode="shadow"]) fieldset {
+      border: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+    /* FORM ELEMENT: BASE */
+    :host([data-render-mode="shadow"]) .slds-form-element {
+        position: relative;
+        min-width: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__label {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        hyphens: auto;
+        display: inline-block;
+        color: var(--sds-g-color-neutral-base-30, #444444);
+        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        margin-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__label:empty {
+        margin: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__control {
+        clear: left; /* NOTE: Ideally we want left to be inline-start but browser support is not ready for that value. We need to figure out better RTL support */
+        position: relative;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__icon {
+        display: inline-block;
+        position: relative;
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        vertical-align: top;
+        line-height: var(--sds-g-font-lineheight-1, 1);
+        z-index: 1;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
+        position: relative;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
+    .slds-form-element__helper {
+        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+        margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        display: block;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
+        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly {
+        flex-basis: 0%;
+        border-bottom: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
+        padding-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        padding-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__legend {
+        font-weight: var(--sds-g-font-weight-7, 700);
+        float: left;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__addon {
+        display: inline-block;
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
+        margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        align-self: center;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-word;
+        display: inline-block;
+        font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+        font-weight: var(--sds-g-font-weight-4, 400);
+        color: var(--sds-g-color-neutral-base-10, #181818);
+        width: 100%;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static:empty {
+        min-height: calc(var(--sds-g-sizing-6, 1.25rem) + 1px);
+        vertical-align: bottom;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static--edit {
+        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-required {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        margin-inline-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    :host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: STACKED */
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+        display: block;
+    }
+
+    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2);
+    }
+
+    :host([variant~='label-stacked']):not(.slds-is-editing) {
+        padding: 0 var(--sds-g-spacing-1);
+    } */
+
+    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+          width: 100%;
+          flex-basis: 100%;
+    } */
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
+        padding: 0;
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        padding-inline-start: 0;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+        width: 100%;
+        flex-basis: 100%;
+        clear: left;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+        float: none;
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: INLINE */
+
+    :host([data-render-mode="shadow"][variant~='label-inline']) {
+        display: block;
+    }
+
+    /*
+    we have to combine with slds class here to avoid duplication
+    of this rule in child elements who import this stylesheet
+    in lighting-input this slds class is synonymous with the variant
+    */
+
+    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+        padding: var(--sds-g-spacing-1, 0.25rem);
+        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+    }
+
+    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2);
+    }
+
+    :host([variant~='label-inline']):not([class*="slds-size"]) {
+        width: 100%;
+        flex-basis: 100%;
+    }
+
+    :host([variant~='label-inline']:not(.slds-is-editing)) {
+        padding: var(--sds-g-spacing-1);
+    } */
+
+    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+        padding-block-start: var(--sds-g-sizing-6, 1.25rem)
+    }
+
+    @media (min-width: 48em) {
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+          float: left;
+          max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
+          flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
+          flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */
+          margin-block-end: 0;
+          position: relative;
+          z-index: 1;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) lightning-helptext {
+          float: left;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+          margin-inline-start: 33%;
+          clear: none; /* Reset clear: left when switching to horizontal form layout */
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+          padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+            width: auto;
+            max-width: 100%;
+            -ms-flex-preferred-size: auto;
+            flex-basis: auto;
+            float: none;
+            position: relative;
+            padding-inline-start: 0;
+            margin-block-end: 0;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__help {
+          margin-inline-start: 33%;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+            clear: none;
+        }
+    }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: COMPOUND */
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
+      display: flex;
+      margin-bottom: var(--sds-g-spacing-1, 0.25rem);
+      margin-left: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+      margin-right: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
+      padding-top: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
+      padding-left: var(--sds-g-spacing-1, 0.25rem);
+      padding-right: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
+      align-items: flex-end;
+    }
+}

package/src/lightning/configProvider/defaultConfig.js

@@ -1,4 +1,5 @@
 import localizationService from './defaultLocalizationConfig';
+import { isCSR } from 'lightning/utilsPrivate';
 
 function getConfigFromAura($A) {
     return {
@@ -34,7 +35,7 @@ function createStandAloneConfig() {
 }
 
 export function getDefaultConfig() {
-    return window.$A !== undefined && window.$A.localizationService
+    return isCSR && window.$A !== undefined && window.$A.localizationService
         ? getConfigFromAura(window.$A)
         : createStandAloneConfig();
 }

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

@@ -42,7 +42,10 @@ include:
 
 Tables can be populated during initialization using the `data`, `columns`, and
 `key-field` attributes. The `key-field` attribute is required for correct table behavior.
-It associates each row with a unique identifier.
+It associates each row with a unique identifier. The value you use for `key-field` is
+case-sensitive and must match what's in your `data` array.
+If you use `key-field="Id"`, make sure the Id you provide in the `data` array
+uses `Id` and not `id`.
 
 This example creates a table whose first column displays a checkbox for row selection.
 The checkbox column is displayed by default, and you can hide it by adding `hide-checkbox-column` in your markup.
@@ -53,7 +56,7 @@ Selecting the checkbox selects the entire row of data and triggers the `onrowsel
     <lightning-datatable
         data={data}
         columns={columns}
-        key-field="id"
+        key-field="Id"
         onrowselection={getSelectedName}
     >
     </lightning-datatable>
@@ -71,51 +74,51 @@ or decreasing confidence trend. The icon is specified with the `cellAttributes`
 property. See **Working with Column Properties** for more information about the
 properties for columns.
 
-The JavaScript also loads two rows of data in the table. The id for each
+The JavaScript also loads two rows of data in the table. The Id for each
 table row is used as the `key-field`.
 
 ```javascript
 import { LightningElement } from 'lwc';
 
 const columns = [
-    { label: 'Opportunity name', fieldName: 'opportunityName', type: 'text' },
+    { label: 'Opportunity name', fieldName: 'OpportunityName', type: 'text' },
     {
         label: 'Confidence',
-        fieldName: 'confidence',
+        fieldName: 'Confidence',
         type: 'percent',
         cellAttributes: {
-            iconName: { fieldName: 'trendIcon' },
+            iconName: { fieldName: 'TrendIcon' },
             iconPosition: 'right',
         },
     },
     {
         label: 'Amount',
-        fieldName: 'amount',
+        fieldName: 'Amount',
         type: 'currency',
         typeAttributes: { currencyCode: 'EUR', step: '0.001' },
     },
-    { label: 'Contact Email', fieldName: 'contact', type: 'email' },
-    { label: 'Contact Phone', fieldName: 'phone', type: 'phone' },
+    { label: 'Contact Email', fieldName: 'Contact', type: 'email' },
+    { label: 'Contact Phone', fieldName: 'Phone', type: 'phone' },
 ];
 
 const data = [
     {
-        id: 'a',
-        opportunityName: 'Cloudhub',
-        confidence: 0.2,
-        amount: 25000,
-        contact: 'jrogers@cloudhub.com',
-        phone: '2352235235',
-        trendIcon: 'utility:down',
+        Id: 'a',
+        OpportunityName: 'Cloudhub',
+        Confidence: 0.2,
+        Amount: 25000,
+        Contact: 'jrogers@cloudhub.com',
+        Phone: '2352235235',
+        TrendIcon: 'utility:down',
     },
     {
-        id: 'b',
-        opportunityName: 'Quip',
-        confidence: 0.78,
-        amount: 740000,
-        contact: 'quipy@quip.com',
-        phone: '2352235235',
-        trendIcon: 'utility:up',
+        Id: 'b',
+        OpportunityName: 'Quip',
+        Confidence: 0.78,
+        Amount: 740000,
+        Contact: 'quipy@quip.com',
+        Phone: '2352235235',
+        TrendIcon: 'utility:up',
     },
 ];
 
@@ -127,7 +130,7 @@ export default class DatatableExample extends LightningElement {
         const selectedRows = event.detail.selectedRows;
         // Display that fieldName of the selected rows
         for (let i = 0; i < selectedRows.length; i++) {
-            alert('You selected: ' + selectedRows[i].opportunityName);
+            alert('You selected: ' + selectedRows[i].OpportunityName);
         }
     }
 }
@@ -154,7 +157,7 @@ public with sharing class ContactController {
 }
 ```
 
-The template wires up the datatable to the contact records using the `Id` field.
+The template wires up the datatable to the contact records using the `id` field.
 
 ```html
 <template>
@@ -552,7 +555,7 @@ there are no more data to load.
         <lightning-datatable
             columns={columns}
             data={data}
-            key-field="id"
+            key-field="Id"
             enable-infinite-loading
             onloadmore={loadMoreData}
         >
@@ -657,7 +660,7 @@ Publishing State column matches either the Published or Unpublished state.
     <lightning-datatable
         columns={mycolumns}
         data={mydata}
-        key-field="id"
+        key-field="Id"
         onheaderaction={handleHeaderAction}
     >
     </lightning-datatable>
@@ -746,7 +749,7 @@ Supported attributes for the row actions are as follows.
     <lightning-datatable
         columns={mycolumns}
         data={mydata}
-        key-field="id"
+        key-field="Id"
         onrowaction={handleRowAction}
     >
     </lightning-datatable>
@@ -890,7 +893,7 @@ Columns have a default minimum width of 50px and maximum width of 1000px. To cha
 
 ```html
 <lightning-datatable
-    key-field="id"
+    key-field="Id"
     data={data}
     columns={columns}
     min-column-width="80"
@@ -904,7 +907,7 @@ Resizing a column fires the `resize` event. For more information, See the **Cust
 
 ```html
 <lightning-datatable
-    key-field="id"
+    key-field="Id"
     data={data}
     columns={columns}
     onresize={handleResize}
@@ -982,7 +985,7 @@ useful when you want to preselect rows.
 <lightning-datatable
     columns={columns}
     data={data}
-    key-field="id"
+    key-field="Id"
     selected-rows={selectedRows}
 >
 </lightning-datatable>
@@ -1051,7 +1054,7 @@ press the Enter or Tab key, or move away from the cell.
 ```html
 <template>
     <lightning-datatable
-        key-field="id"
+        key-field="Id"
         data={data}
         columns={columns}
         onsave={handleSave}
@@ -1104,7 +1107,7 @@ Your `lightning-datatable` component should look like this.
 ```html
 <template>
     <lightning-datatable
-        key-field="id"
+        key-field="Id"
         data={data}
         columns={columns}
         errors={errors}
@@ -1187,7 +1190,7 @@ This example displays three lines of text and hides the rest; the text on line 3
 <lightning-datatable
     data={data}
     columns={columns}
-    key-field="id"
+    key-field="Id"
     wrap-text-max-lines="3"
 >
 </lightning-datatable>
@@ -1247,7 +1250,7 @@ If you have descriptions on an element or on multiple elements for the table, se
 <h3 id="table-desc2">EMEA Region</h3>
 <lightning-datatable
     aria-labelledby="table-desc1 table-desc2"
-    key-field="id"
+    key-field="Id"
     data={data}
     columns={columns}
 >
@@ -1426,3 +1429,10 @@ The event properties are as follows.
 | bubbles    | false | This event does not bubble.                                                                                |
 | cancelable | false | This event has no default behavior that can be canceled. You cannot call `preventDefault()` on this event. |
 | composed   | false | This event does not propagate outside the template in which it was dispatched.                             |
+
+
+#### LWC Recipes
+
+The [LWC Recipes GitHub repository](https://github.com/trailheadapps/lwc-recipes) contains code examples for Lightning Web Components that you can test in an org.
+
+For a recipe that uses `lightning-datatable`, see the `c-datatable-*` components in the LWC Recipes repo.

package/src/lightning/datatable/autoWidthStrategy.js

@@ -282,6 +282,9 @@ export class AutoWidthStrategy {
                 if (columnDefinition && columnDefinition.wrapText) {
                     return width / widthsMetadata.wrapTextMaxLines;
                 }
+                if (columnDefinition.fixedWidth) {
+                    return columnDefinition.fixedWidth;
+                }
                 return width;
             });
         const headerCellWidths = datatableInterface.getHeaderCellWidths();

package/src/lightning/datatable/columnWidthManager.js

@@ -411,7 +411,7 @@ export class ColumnWidthManager {
         return (
             newData.length > 0 &&
             (previousData.length === 0 ||
-                previousData.length === newData.length)
+                previousData.length !== newData.length)
         );
     }