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

package/src/lightning/datatable/datatable.js

@@ -421,8 +421,8 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * Required for better performance.
-     * Associates each row with a unique ID.
+     * Required for better performance. Associates each row with a unique ID.
+     * key-field is case sensitive and must match the value you provide in the data array.
      * @type {string}
      * @required
      */
@@ -471,7 +471,7 @@ export default class LightningDatatable extends LightningElement {
     }
 
     /**
-     * The maximum number of rows that can be selected.
+     * The maximum number of rows that can be selected. Value should be a positive integer
      * Checkboxes are used for selection by default,
      * and radio buttons are used when maxRowSelection is 1.
      * @type {number}
@@ -792,11 +792,12 @@ export default class LightningDatatable extends LightningElement {
     }
 
     get computedTableStyle() {
-        if (this._columnWidthManager.isAutoResizingUpdateQueued()) {
-            return styleToString(['table-layout:auto']);
-        }
+        const tableLayout =
+            this._columnWidthManager.isAutoResizingUpdateQueued()
+                ? 'auto'
+                : 'fixed';
         return styleToString([
-            'table-layout:fixed',
+            `table-layout:${tableLayout}`,
             getCSSWidthStyleOfTable(this.widthsData),
         ]);
     }

package/src/lightning/datatable/rowSelection.js

@@ -616,10 +616,13 @@ export function setMaxRowSelection(state, value) {
         }
     } else {
         state.maxRowSelection = MAX_ROW_SELECTION_DEFAULT;
-        // eslint-disable-next-line no-console
-        console.error(
-            `The maxRowSelection value passed into lightning:datatable should be a positive integer. We receive instead (${value}).`
-        );
+        // suppress console error if no value is passed in
+        if (value !== null && value !== undefined) {
+            // eslint-disable-next-line no-console
+            console.error(
+                `The maxRowSelection value passed into lightning:datatable should be a positive integer. We receive instead (${value}).`
+            );
+        }
     }
 }
 

package/src/lightning/datatable/templates/table/table.html

@@ -49,6 +49,7 @@
                                 <template for:each={state.columns} for:item="def" for:index="colIndex">
                                     <!-- Column Header -->
                                     <th style={def.style}
+                                        role="gridcell"
                                         scope="col"
                                         tabindex={def.tabIndex}
                                         aria-label={def.ariaLabel}

package/src/lightning/datepicker/datepicker.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import './input-text.slds.css';
+@import './form-element.slds.css';

package/src/lightning/datepicker/datepicker.html

@@ -1,7 +1,7 @@
 <template>
-    <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-size_1-of-1" role="group">
+    <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-size_1-of-1" role="group" part="input-text">
         <template if:false={hasExternalLabel}>
-            <label class={computedLabelClass} for="input">
+            <label class={computedLabelClass} for="input" part="label">
                 <template if:true={required}>
                     <abbr class="slds-required" title={i18n.required}>*</abbr>
                 </template>
@@ -12,8 +12,9 @@
         <template if:true={isRangeMessageVisible}>
             <span id="range-message" data-range-message class="slds-assistive-text">{rangeMessage}</span>
         </template>
-        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
+        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right" part="input-container">
             <input type="text" id="input" class="slds-input"
+            part="input"
                     name={name}
                     value={displayValue}
                     placeholder={placeholder}
@@ -55,7 +56,9 @@
         </div>
     </div>
 
-
+    <template if:true={errorMessage}>
         <div id="error-message" data-error-message class={computedClass} aria-live="assertive">{errorMessage}</div>
+    </template>
+
 
 </template>

package/src/lightning/datepicker/datepicker.js

@@ -7,7 +7,8 @@ import labelMinAndMaxRangeMessage from '@salesforce/label/LightningDateTimePicke
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelSelectDateFor from '@salesforce/label/LightningDateTimePicker.selectDateFor';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { LightningElement, track, api } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     normalizeISODate,
     parseFormattedDate,
@@ -27,6 +28,7 @@ import {
     getRealDOMId,
     isIE11,
     computeAriaInvalid,
+    reflectAttribute,
 } from 'lightning/utilsPrivate';
 import {
     generateUniqueId,
@@ -37,6 +39,7 @@ import {
     handleKeyDownOnDatePickerIcon,
     handleBasicKeyDownBehaviour,
 } from './keyboard';
+import AriaObserver from 'lightning/ariaObserver';
 
 const i18n = {
     invalidDate: labelInvalidDate,
@@ -61,7 +64,7 @@ const DATE_STYLE = {
     LONG: 'long',
 };
 
-export default class LightningDatePicker extends LightningElement {
+export default class LightningDatePicker extends LightningShadowBaseClass {
     static delegatesFocus = true;
 
     @track _disabled = false;
@@ -94,6 +97,15 @@ export default class LightningDatePicker extends LightningElement {
 
     @api messageWhenValueMissing;
 
+    @api
+    get rootAriaNode() {
+        return this.ariaObserver.root;
+    }
+
+    set rootAriaNode(root) {
+        this.ariaObserver.root = root;
+    }
+
     @api
     get min() {
         return this._min;
@@ -181,7 +193,12 @@ export default class LightningDatePicker extends LightningElement {
 
     set ariaLabelledByElement(el) {
         this._ariaLabelledBy = el;
-        this.synchronizeA11y();
+
+        this.ariaObserver.connect({
+            attribute: ARIA_LABELLEDBY,
+            targetSelector: 'input',
+            relatedNodeIds: getRealDOMId(this._ariaLabelledBy),
+        });
     }
 
     @api
@@ -191,7 +208,12 @@ export default class LightningDatePicker extends LightningElement {
 
     set ariaControlsElement(el) {
         this._ariaControls = el;
-        this.synchronizeA11y();
+
+        this.ariaObserver.connect({
+            attribute: ARIA_CONTROLS,
+            targetSelector: 'input',
+            relatedNodeIds: getRealDOMId(this.ariaControlsElement),
+        });
     }
 
     @api
@@ -205,7 +227,7 @@ export default class LightningDatePicker extends LightningElement {
         } else {
             this._ariaDescribedBy = [el];
         }
-        this.synchronizeA11y();
+        this.connectAriaDescribedBy();
     }
 
     @api
@@ -213,12 +235,14 @@ export default class LightningDatePicker extends LightningElement {
         return this._ariaDescribedBy;
     }
 
-    get ariaLabelledbyId() {
-        return getRealDOMId(this._ariaLabelledBy);
+    @api
+    get ariaErrorMessageElement() {
+        return this._ariaErrorMessageElement;
     }
 
-    get ariaControlsId() {
-        return getRealDOMId(this.ariaControlsElement);
+    set ariaErrorMessageElement(element) {
+        this._ariaErrorMessageElement = element;
+        this.connectAriaDescribedBy();
     }
 
     synchronizeA11y() {
@@ -228,9 +252,6 @@ export default class LightningDatePicker extends LightningElement {
         }
 
         synchronizeAttrs(input, {
-            [ARIA_LABELLEDBY]: this.ariaLabelledbyId,
-            [ARIA_DESCRIBEDBY]: this.computedAriaDescribedby,
-            [ARIA_CONTROLS]: this.ariaControlsId,
             [ARIA_LABEL]: this._ariaLabel,
             [ARIA_INVALID]: this.computedAriaInvalid,
         });
@@ -242,6 +263,11 @@ export default class LightningDatePicker extends LightningElement {
         );
         calendarButton.ariaDescribedBy =
             this.computedDatepickerButtonAriaDescribedby;
+
+        if (this.isConnected) {
+            this.connectAriaDescribedBy();
+            this.ariaObserver.sync();
+        }
     }
 
     renderedCallback() {
@@ -265,6 +291,7 @@ export default class LightningDatePicker extends LightningElement {
     }
     set disabled(value) {
         this._disabled = normalizeBoolean(value);
+        reflectAttribute(this, 'disabled', this._disabled);
     }
 
     @api
@@ -273,6 +300,7 @@ export default class LightningDatePicker extends LightningElement {
     }
     set readOnly(value) {
         this._readonly = normalizeBoolean(value);
+        reflectAttribute(this, 'readonly', this._readonly);
     }
 
     @api
@@ -299,6 +327,7 @@ export default class LightningDatePicker extends LightningElement {
 
     set variant(value) {
         this._variant = normalizeVariant(value);
+        reflectAttribute(this, 'variant', value);
     }
 
     @api
@@ -349,9 +378,11 @@ export default class LightningDatePicker extends LightningElement {
     constructor() {
         super();
         this.uniqueId = generateUniqueId();
+        this.ariaObserver = new AriaObserver(this);
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.connected = true;
 
         this.keyboardInterface = this.datepickerKeyboardInterface();
@@ -359,6 +390,10 @@ export default class LightningDatePicker extends LightningElement {
 
     disconnectedCallback() {
         this.connected = false;
+        if (this.ariaObserver) {
+            this.ariaObserver.disconnect();
+            this.ariaObserver = undefined;
+        }
     }
 
     get i18n() {
@@ -375,9 +410,12 @@ export default class LightningDatePicker extends LightningElement {
             .toString();
     }
 
-    get computedUniqueErrorMessageElementId() {
-        const el = this.template.querySelector('[data-error-message]');
-        return getRealDOMId(el);
+    get errorMessageElement() {
+        return this.template.querySelector('[data-error-message]');
+    }
+
+    get rangeMessageElement() {
+        return this.template.querySelector('[data-range-message]');
     }
 
     get computedUniqueRangeMessageElementId() {
@@ -410,18 +448,24 @@ export default class LightningDatePicker extends LightningElement {
         return this.disabled || this.readOnly;
     }
 
-    get computedAriaDescribedby() {
-        const ariaValues = [];
+    get ariaErrorMessageElements() {
+        const elements = [this.ariaErrorMessageElement];
 
         if (this.errorMessage) {
-            ariaValues.push(this.computedUniqueErrorMessageElementId);
+            elements.push(this.errorMessageElement);
         }
 
         // To inform user of valid date ranges that are set via min/max attributes
         if (this.isRangeMessageVisible) {
-            ariaValues.push(this.computedUniqueRangeMessageElementId);
+            elements.push(this.rangeMessageElement);
         }
 
+        return elements;
+    }
+
+    get computedAriaDescribedby() {
+        const ariaValues = [];
+
         this._ariaDescribedBy.forEach((item) => {
             const id = getRealDOMId(item);
             if (id) {
@@ -432,6 +476,15 @@ export default class LightningDatePicker extends LightningElement {
         return normalizeAriaAttribute(ariaValues);
     }
 
+    connectAriaDescribedBy() {
+        this.ariaObserver.connect({
+            attribute: ARIA_DESCRIBEDBY,
+            targetSelector: 'input',
+            relatedNodeIds: this.computedAriaDescribedby,
+            relatedNodes: this.ariaErrorMessageElements,
+        });
+    }
+
     get computedDatepickerButtonAriaDescribedby() {
         if (this.isRangeMessageVisible) {
             return this.computedUniqueRangeMessageElementId;
@@ -604,7 +657,10 @@ export default class LightningDatePicker extends LightningElement {
     startPositioning() {
         if (!this._relationship) {
             this._relationship = startPositioning(this, {
-                target: () => this.template.querySelector('input'),
+                target: () =>
+                    this.template.querySelector(
+                        'div.slds-form-element__control'
+                    ),
                 element: () =>
                     this.template
                         .querySelector('lightning-calendar')

package/src/lightning/datepicker/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;
+    }
+}