lightning-base-components 1.22.1-alpha → 1.22.3-alpha

package/src/lightning/checkboxGroup/checkboxGroup.js

@@ -5,6 +5,7 @@ import {
     synchronizeAttrs,
     getRealDOMId,
     classListMutation,
+    isCSR,
 } from 'lightning/utilsPrivate';
 import {
     FieldConstraintApi,
@@ -25,6 +26,8 @@ const DEBOUNCE_PERIOD = 200;
  * A checkbox group that enables selection of single or multiple options.
  */
 export default class LightningCheckboxGroup extends LightningElement {
+    static validationOptOut = ['class'];
+
     static delegatesFocus = true;
 
     /**
@@ -98,7 +101,7 @@ export default class LightningCheckboxGroup extends LightningElement {
     }
 
     get fieldsetElement() {
-        return this.template.querySelector('fieldset');
+        return isCSR ? this.template.querySelector('fieldset') : null;
     }
 
     renderedCallback() {
@@ -207,7 +210,7 @@ export default class LightningCheckboxGroup extends LightningElement {
      */
     @api
     checkValidity() {
-        return this._constraint.checkValidity();
+        return isCSR ? this._constraint.checkValidity() : null;
     }
 
     /**
@@ -218,9 +221,12 @@ export default class LightningCheckboxGroup extends LightningElement {
     @api
     reportValidity() {
         // required to make sure the sync happens after the render
-        return this._constraint.reportValidity((message) => {
-            this._helpMessage = message;
-        });
+        if (isCSR) {
+            return this._constraint.reportValidity((message) => {
+                this._helpMessage = message;
+            });
+        }
+        return null;
     }
 
     /**
@@ -242,8 +248,11 @@ export default class LightningCheckboxGroup extends LightningElement {
     }
 
     get computedUniqueHelpElementId() {
-        const helpElement = this.template.querySelector('[data-helptext]');
-        return getRealDOMId(helpElement);
+        if (isCSR) {
+            const helpElement = this.template.querySelector('[data-helptext]');
+            return getRealDOMId(helpElement);
+        }
+        return null;
     }
 
     /**
@@ -251,9 +260,11 @@ export default class LightningCheckboxGroup extends LightningElement {
      */
     @api
     focus() {
-        const firstCheckbox = this.template.querySelector('input');
-        if (firstCheckbox) {
-            firstCheckbox.focus();
+        if (isCSR) {
+            const firstCheckbox = this.template.querySelector('input');
+            if (firstCheckbox) {
+                firstCheckbox.focus();
+            }
         }
     }
 

package/src/lightning/checkboxGroup/checkboxGroup.js-meta.xml

@@ -3,4 +3,7 @@
     <isExposed>true</isExposed>
     <minApiVersion>41.0</minApiVersion>
     <support>GA</support>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/colorPickerPanel/colorPickerPanel.js

@@ -5,7 +5,7 @@ import labelDoneButton from '@salesforce/label/LightningColorPicker.doneButton';
 import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
-import { keyCodes, isCSR } from 'lightning/utilsPrivate';
+import { keyCodes } from 'lightning/utilsPrivate';
 
 const i18n = {
     cancelButton: labelCancelButton,
@@ -26,16 +26,6 @@ export default class LightningColorPickerPanel extends LightningShadowBaseClass
         this._selectedColor = this.currentColor || DEFAULT_COLOR;
     }
 
-    renderedCallback() {
-        // W-14600421 bug fix: prevent panel from falling outside user focus,
-        // like when viewports are too small
-        if (isCSR && typeof document.body.scrollIntoView === 'function') {
-            this.template
-                .querySelector('lightning-color-picker-custom')
-                .scrollIntoView();
-        }
-    }
-
     get i18n() {
         return i18n;
     }

package/src/lightning/combobox/combobox.html

@@ -34,7 +34,7 @@
                 variant={variant}></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>
+            <div id="help-text" data-help-text class="slds-form-element__help" aria-live="polite">{_helpMessage}</div>
         </template>
     </div>
 </template>

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

@@ -1260,12 +1260,17 @@ To return the name of the action, use the `event.target.action.name` property.
 
 Each row header renders with an `aria-label` attribute with the labels you provide for the column definition. By default, the row number column renders with `aria-label="Row Number"` and cannot be changed. When row selection is enabled, each row renders with `aria-selected` set to true or false depending on whether the row is selected. Each cell renders with a `gridcell` role.
 
-Use the following `aria` attributes on `lightning-datatable` to provide a caption or description on your table for assistive technologies. These attributes are rendered on the `<table>` element. We recommend that you use one or the other, but not both.
+Use the following `aria` attributes on `lightning-datatable` to provide a caption or description on your table for assistive technologies. These attributes are rendered on the `<table>` element. 
 
-| Attribute       | Type              | Description                                                                                                                        |
-| --------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| aria-label      | string            | Provides an assistive label to identify a table from other tables on a page.                                                       |
-| aria-labelledby | ID reference list | Specifies the ID or list of IDs of the element or elements that contain visible descriptive text to caption or describe the table. |
+| Attribute        | Type              | Description                                                                                                                                        |
+| ---------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| aria-label       | string            | Provides an assistive label to identify a table from other tables on a page.                                                                       |
+| aria-describedby | ID reference list | Specifies the ID or space-separated list of IDs that describes the current element.                                                                |
+| aria-labelledby  | ID reference list | Specifies the ID or space-separated list of IDs of the element or elements that contain visible descriptive text to caption or describe the table. |
+
+When using `aria-label`, consider using `aria-describedby` to provide supplemental information. We don't recommend using `aria-label` together with `aria-labelledby`. When there's visible text that labels an element, consider using `aria-labelledby` instead of `aria-label`. 
+
+If you use `aria-describedby`, the element that provides the description doesn't need to be visible. For more information, see [MDN web docs: aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby).
 
 ##### Provide an Accessible Label for the Table
 

package/src/lightning/datatable/autoWidthStrategy.js

@@ -19,27 +19,27 @@ function getTotalColumnWidth(columnWidths) {
 }
 
 /**
- * Determines whether or not a specified width can be removed from a column
+ * Determines the new width of a column of after removing a set amount
  *
  * @param {Number} currentWidth The current width of the column in pixels
  * @param {Number} widthToRemove The proposed amount of width to remove in pixels
  * @param {Number} minColumnWidth The minimum width the column can be in pixels
- * @returns {Boolean} Whether or not the specified width can be removed
+ * @returns {Number} The new width of the column in pixels
  */
-function canRemoveWidth(currentWidth, widthToRemove, minColumnWidth) {
-    return currentWidth - widthToRemove >= minColumnWidth;
+function getReducedWidth(currentWidth, widthToRemove, minColumnWidth) {
+    return Math.max(currentWidth - widthToRemove, minColumnWidth);
 }
 
 /**
- * Determines whether or not a specified width can be added to a column
+ * Determines the new width of a column of after adding a set amount
  *
  * @param {Number} currentWidth The current width of the column in pixels
- * @param {Number} widthToAdd The proposed amount of width to add in pixels
+ * @param {Number} widthToRemove The proposed amount of width to add in pixels
  * @param {Number} maxColumnWidth The maximum width the column can be in pixels
- * @returns {Boolean} Whether or not the specified width can be added
+ * @returns {Number} The new width of the column in pixels
  */
-function canAddWidth(currentWidth, widthToAdd, maxColumnWidth) {
-    return currentWidth + widthToAdd <= maxColumnWidth;
+function getEnlargedWidth(currentWidth, widthToAdd, maxColumnWidth) {
+    return Math.min(currentWidth + widthToAdd, maxColumnWidth);
 }
 
 /**
@@ -397,17 +397,13 @@ export class AutoWidthStrategy {
             for (let i = 0; i < colsWithMinWidthLength; i += 1) {
                 const colIndex = colsWithMinWidth[i];
                 const currentWidth = columnWidths[colIndex];
-                if (
-                    canAddWidth(
-                        currentWidth,
-                        extraWidthPerColumn,
-                        maxColumnWidth
-                    )
-                ) {
-                    const newWidth = currentWidth + extraWidthPerColumn;
-                    columnWidthsSum += extraWidthPerColumn;
-                    columnWidths[colIndex] = newWidth;
-                }
+                const newWidth = getEnlargedWidth(
+                    currentWidth,
+                    extraWidthPerColumn,
+                    maxColumnWidth
+                );
+                columnWidthsSum += newWidth - currentWidth;
+                columnWidths[colIndex] = newWidth;
             }
         }
 
@@ -428,16 +424,13 @@ export class AutoWidthStrategy {
             for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
                 const col = columns[colIndex];
                 const currentWidth = columnWidths[colIndex];
-                if (
-                    !getColumnWidth(col) &&
-                    canAddWidth(
+                if (!getColumnWidth(col)) {
+                    const newWidth = getEnlargedWidth(
                         currentWidth,
                         extraWidthPerColumn,
                         maxColumnWidth
-                    )
-                ) {
-                    const newWidth = currentWidth + extraWidthPerColumn;
-                    columnWidthsSum += extraWidthPerColumn;
+                    );
+                    columnWidthsSum += newWidth - currentWidth;
                     columnWidths[colIndex] = newWidth;
                 }
             }
@@ -474,17 +467,13 @@ export class AutoWidthStrategy {
             for (let i = 0, { length } = colsWithMaxWidth; i < length; i += 1) {
                 const colIndex = colsWithMaxWidth[i];
                 const currentWidth = columnWidths[colIndex];
-                if (
-                    canRemoveWidth(
-                        currentWidth,
-                        extraWidthPerColumn,
-                        minColumnWidth
-                    )
-                ) {
-                    const newWidth = currentWidth - extraWidthPerColumn;
-                    columnWidthsSum -= extraWidthPerColumn;
-                    columnWidths[colIndex] = newWidth;
-                }
+                const newWidth = getReducedWidth(
+                    currentWidth,
+                    extraWidthPerColumn,
+                    minColumnWidth
+                );
+                columnWidthsSum -= currentWidth - newWidth;
+                columnWidths[colIndex] = newWidth;
             }
         }
 
@@ -508,15 +497,14 @@ export class AutoWidthStrategy {
                 const currentWidth = columnWidths[colIndex];
                 if (
                     !colsWithMinWidth.includes(colIndex) &&
-                    !getColumnWidth(col) &&
-                    canRemoveWidth(
+                    !getColumnWidth(col)
+                ) {
+                    const newWidth = getReducedWidth(
                         currentWidth,
                         extraWidthPerColumn,
                         minColumnWidth
-                    )
-                ) {
-                    const newWidth = currentWidth - extraWidthPerColumn;
-                    columnWidthsSum -= extraWidthPerColumn;
+                    );
+                    columnWidthsSum -= currentWidth - newWidth;
                     columnWidths[colIndex] = newWidth;
                 }
             }

package/src/lightning/datatable/columnResizer.js

@@ -150,10 +150,11 @@ export function getCustomerColumnWidths(columns, widthsData) {
  * It returns if table is rendered and not hidden.
  *
  * @param {Node} template - The datatable template
+ * @param {Object} refs - The datatable refs
  * @returns {boolean} - Whether the datatable is rendered and not hidden on the page
  */
-export function isTableRenderedVisible(template) {
-    const scrollerY = getScrollerY(template);
+export function isTableRenderedVisible(template, refs) {
+    const scrollerY = getScrollerY(template, refs);
     return (
         scrollerY &&
         !!(

package/src/lightning/datatable/columnWidthManager.js

@@ -156,10 +156,11 @@ export class ColumnWidthManager {
      * Adjusts all the column sizes based on the supplied widths data.
      *
      * @param {Node} template The datatable template
+     * @param {Object} refs The datatable refs
      * @param {Array} columns The column definitions
      * @param {Object} widthsData The widths data object
      */
-    adjustColumnsSize(template, columns, widthsData) {
+    adjustColumnsSize(template, refs, columns, widthsData) {
         const {
             columnWidthStrategy,
             isAutoResizingUpdateQueued,
@@ -170,9 +171,9 @@ export class ColumnWidthManager {
             // If table is hidden when updating and `ResizeObserver` is not available,
             // then updating sizes causes min widths to be set.
             // Hence, the check if ok update from DOM.
-            if (this.shouldResizeWithUpdate(template, widthsData)) {
+            if (this.shouldResizeWithUpdate(template, refs, widthsData)) {
                 adjustedWidths = columnWidthStrategy.getAdjustedColumnWidths(
-                    this.getDatatableInterface(template),
+                    this.getDatatableInterface(template, refs),
                     columns,
                     isAutoResizingUpdateQueued
                 );
@@ -193,12 +194,13 @@ export class ColumnWidthManager {
      * Adjusts all the column widths after a resize happens.
      *
      * @param {Node} template The datatable template
+     * @param {Object} refs The datatable refs
      * @param {Array} columns The column definitions
      * @param {Object} widthsData The widths data object
      */
-    adjustColumnsSizeAfterResize(template, columns, widthsData) {
+    adjustColumnsSizeAfterResize(dt, columns, widthsData) {
         const adjustedWidths = this.columnWidthStrategy.getAdjustedColumnWidths(
-            this.getDatatableInterface(template),
+            this.getDatatableInterface(dt.template, dt.refs),
             columns
         );
         updateColumnWidths(columns, widthsData, adjustedWidths);
@@ -346,14 +348,15 @@ export class ColumnWidthManager {
      * Determines if a column should resize with an update.
      *
      * @param {Node} template The datatable template
+     * @param {Object} refs The datatable refs
      * @param {Object} widthsData The source widths data
      * @returns {Boolean} Whether the column should resize with an update
      */
-    shouldResizeWithUpdate(template, widthsData) {
+    shouldResizeWithUpdate(template, refs, widthsData) {
         if (widthsData.columnWidths.length > 0) {
             // Can resize from DOM when table is visible.
             // Otherwise, only when `ResizeObserver` is available in browser.
-            return isTableRenderedVisible(template);
+            return isTableRenderedVisible(template, refs);
         }
         return true;
     }
@@ -362,12 +365,13 @@ export class ColumnWidthManager {
      * Retrieves the datatable interface from the DOM
      *
      * @param {Node} template The datatable template
+     * @param {Object} refs The datatable refs
      * @returns {Object} The datatable interface
      */
-    getDatatableInterface(template) {
+    getDatatableInterface(template, refs) {
         return {
             getAvailableWidthFromDom() {
-                const scrollerX = getScrollerX(template);
+                const scrollerX = getScrollerX(template, refs);
                 return scrollerX.offsetWidth;
             },
             getDataCellWidths() {
@@ -395,7 +399,9 @@ export class ColumnWidthManager {
                 return result;
             },
             getTableElementWidth() {
-                return template.querySelector('.slds-table').offsetWidth;
+                const elem =
+                    refs?.tableElement || template.querySelector('.slds-table');
+                return elem.offsetWidth;
             },
         };
     }

package/src/lightning/datatable/columns.js

@@ -273,11 +273,14 @@ export function setColumns(state, rawColumns, types) {
         }
 
         // partially inline updateHeaderInternalActions from datatable/headerActions
+        // change alignment for last col and second-to-last col when last col is
+        // has a fixedWith under 100 (this includes action columns)
         const { actions } = normCol;
         normCol.actions = {
             menuAlignment:
                 normCol.isLastCol ||
-                normalizedColumns[colIndex + 1].type === 'action'
+                normalizedColumns[colIndex + 1].type === 'action' ||
+                normalizedColumns[colIndex + 1].fixedWidth < 100
                     ? 'auto-right'
                     : 'auto-left',
             customerActions: Array.isArray(actions) ? actions : [],