lightning-base-components 1.21.4-alpha → 1.21.6-alpha

package/metadata/raptor.json

@@ -2030,7 +2030,7 @@
         "name": "showAddressLookup"
       },
       {
-        "name": "showCompactAddressLookup"
+        "name": "showCompactAddress"
       },
       {
         "name": "street"
@@ -3083,6 +3083,7 @@
     "minVersion": "45.0"
   },
   "platformScaleCenterApi": {},
+  "platformSharingApi": {},
   "platformShowToastEvent": {
     "minVersion": "45.0"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.21.4-alpha",
+    "version": "1.21.6-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -986,6 +986,10 @@
                 "name": "@salesforce/label/LightningLookup.modalCancel",
                 "path": "scopedImports/@salesforce-label-LightningLookup.modalCancel.js"
             },
+            {
+                "name": "@salesforce/label/LightningLookup.messageWhenSearchTermTooShort",
+                "path": "scopedImports/@salesforce-label-LightningLookup.messageWhenSearchTermTooShort.js"
+            },
             {
                 "name": "@salesforce/label/LightningRecordPicker.invalidConfigurationErrorMessage",
                 "path": "scopedImports/@salesforce-label-LightningRecordPicker.invalidConfigurationErrorMessage.js"
@@ -1365,6 +1369,7 @@
             "lightning-button-icon-stateful",
             "lightning-button-menu",
             "lightning-button-stateful",
+            "lightning-card",
             "lightning-calendar",
             "lightning-color-picker-custom",
             "lightning-color-picker-panel",
@@ -1402,9 +1407,11 @@
             "lightning-progress-ring",
             "lightning-primitive-bubble",
             "lightning-primitive-button",
+            "primitive-file-droppable-zone",
             "lightning-primitive-input-checkbox",
             "lightning-primitive-input-checkbox-button",
             "lightning-primitive-input-color",
+            "lightning-primitive-colorpicker-button",
             "lightning-primitive-input-file",
             "lightning-primitive-input-simple",
             "lightning-primitive-input-toggle",
@@ -1524,6 +1531,7 @@
             "lightning-primitive-bubble",
             "lightning-primitive-button",
             "lightning-primitive-color-picker-button",
+            "primitive-file-droppable-zone",
             "lightning-primitive-icon",
             "lightning-primitive-input-checkbox",
             "lightning-primitive-input-checkbox-button",

package/scopedImports/@salesforce-label-LightningLookup.messageWhenSearchTermTooShort.js

@@ -0,0 +1 @@
+export default 'Type at least 2 characters to perform a search.';

package/src/lightning/accordion/__docs__/accordion.md

@@ -272,7 +272,3 @@ 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 can't call `preventDefault()` on this event. |
 | composed   | false | This event does not propagate outside the template in which it was dispatched.                            |
-
-#### Source Code
-
-`lightning-accordion` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/accordionSection/__docs__/accordionSection.md

@@ -91,7 +91,3 @@ renders with `aria-expanded="true"`. When a section is collapsed, the button ren
 Additionally, the button uses the `aria-controls` attribute to identify the content that relates to the controlling button on the accordion section.
 
 To expand or collapse a section using the keyboard, press the Tab key to set focus on the toggle button or header text and press Enter.
-
-#### Source Code
-
-`lightning-accordion-section` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/avatar/__docs__/avatar.md

@@ -153,7 +153,3 @@ To understand how we implemented SLDS in `lightning-avatar`, see the **Source Co
 #### Accessibility
 
 Use the `alternative-text` attribute to describe the avatar, such as a user's initials or name. This description provides the value for the `alt` attribute in the `img` HTML tag.
-
-#### Source Code
-
-`lightning-avatar` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/badge/__docs__/badge.md

@@ -97,7 +97,3 @@ To understand how we implemented SLDS in `lightning-badge`, see the **Source Cod
 #### Usage Considerations
 
 Badges with nested elements are not supported. To create a label that can contain links, use `lightning-pill` instead.
-
-#### Source Code
-
-`lightning-badge` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/badge/badge.slds.css

@@ -12,7 +12,7 @@
     align-items: center;
     padding: var(--slds-g-spacing-1) var(--slds-g-spacing-2);
     color: var(--slds-c-badge-text-color, var(--slds-g-color-on-surface-3));
-    font-size: var(--slds-c-badge-font-size, var(--slds-g-font-scale-neg-2));
+    font-size: var(--slds-c-badge-font-size, var(--slds-g-font-scale-neg-1));
     font-weight: var(--slds-g-font-weight-7);
     /* stylelint-disable */
     line-height: var(--slds-c-badge-font-lineheight, initial);

package/src/lightning/barcodeScanner/__docs__/barcodeScanner.md

@@ -116,7 +116,3 @@ The `errors` event has these properties.
 | bubbles    | false | This event does not bubble.                                                                                          |
 | cancelable | true  | This event can be canceled. You can call `preventDefault()` on this event to prevent firing the click event. |
 | composed   | false | This event does not propagate outside the template in which it was dispatched.                                               |
-
-#### Source Code
-
-`lightning-barcode-scanner` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/baseCombobox/baseCombobox.js

@@ -856,7 +856,7 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     highlightOption(option) {
         this.removeHighlight();
         if (option) {
-            option.highlight(option.ariaChecked);
+            option.highlight();
             this._highlightedOptionElement = option;
             this._highlightedOptionElementId =
                 option.getAttribute('data-item-id');
@@ -877,7 +877,7 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     removeHighlight() {
         const option = this._highlightedOptionElement;
         if (option) {
-            option.removeHighlight(option.ariaChecked);
+            option.removeHighlight();
             this._highlightedOptionElement = null;
             this._highlightedOptionElementId = null;
             this._activeElementDomId = null;

package/src/lightning/baseComboboxItem/baseComboboxItem.js

@@ -43,22 +43,18 @@ export default class LightningBaseComboboxItem extends LightningShadowBaseClass
     }
 
     @api
-    highlight(isSelected) {
-        this.toggleHighlight(true, isSelected);
+    highlight() {
+        this.toggleHighlight(true);
     }
 
     @api
-    removeHighlight(isSelected) {
-        this.toggleHighlight(false, isSelected);
+    removeHighlight() {
+        this.toggleHighlight(false);
     }
 
-    toggleHighlight(highlighted, isSelected) {
+    toggleHighlight(highlighted) {
         if (this.item.selectable) {
-            //Only announce the selected item from the list, not the hovered or focused ones.
-            this.setAttribute(
-                'aria-selected',
-                isSelected === 'true' ? true : false
-            );
+            this.setAttribute('aria-selected', highlighted ? 'true' : 'false');
             this.classList.toggle('slds-has-focus', highlighted);
         }
     }

package/src/lightning/button/__docs__/button.md

@@ -104,15 +104,15 @@ Use the `variant` attribute with one of these values to apply styling and animat
 -   `inverse` uses the background color and light text, useful for dark backgrounds.
 -   `success` is a green button used to indicate a successful action.
 
-##### Animation 
+##### Animation
 
-Buttons are animated by default. For the `base` variant, an underline is drawn when you mouse over the button. For the other variants, a ripple of contrasting color displays when you click the button. 
+Buttons are animated by default. For the `base` variant, an underline is drawn when you mouse over the button. For the other variants, a ripple of contrasting color displays when you click the button.
 
 When a button is disabled, the animation is disabled as well.
 
 If your browser or operating system is set to reduce animation, the button animations don't display.
 
-To prevent animation for a button, use the `disable-animation` attribute. 
+To prevent animation for a button, use the `disable-animation` attribute.
 
 ```html
 <template>
@@ -279,7 +279,3 @@ Use the following accessibility and `aria` attributes on `lightning-button`.
 | tabindex         | integer           | Specifies whether the button is focusable during tab navigation. Set tab index to -1 to prevent focus on the button during tab navigation. The default value is 0, which makes the button focusable during tab navigation. For more information see [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).                      |
 
 For more information, see the [WAI-ARIA Specification](https://www.w3.org/TR/wai-aria/).
-
-#### Source Code
-
-`lightning-button` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/buttonGroup/__docs__/buttonGroup.md

@@ -73,10 +73,6 @@ To apply additional styling, use SLDS [utility classes](https://www.lightningdes
 
 You can customize the `lightning-button-*` base components you use within `lightning-button-group` using SLDS styling hooks. For more information, see the corresponding base component documentation.
 
-#### Source Code
-
-`lightning-button-group` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.
-
 #### See Also
 
 [lightning-navigation](bundle/lightning-navigation/documentation)

package/src/lightning/buttonIcon/__docs__/buttonIcon.md

@@ -208,7 +208,3 @@ Use the following accessibility and `aria` attributes on `lightning-button-icon`
 | tabindex         | integer           | Specifies whether the button is focusable during tab navigation. Set tab index to -1 to prevent focus on the button during tab navigation. The default value is 0, which makes the button focusable during tab navigation. For more information, see [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).       |
 
 For more information, see the [WAI-ARIA Specification](https://www.w3.org/TR/wai-aria/).
-
-#### Source Code
-
-`lightning-button-icon` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/buttonIconStateful/__docs__/buttonIconStateful.md

@@ -179,7 +179,3 @@ Use the following accessibility and `aria` attributes on `lightning-button-icon-
 | aria-live        | string            | Indicates whether the button will be updated, and describes the types of updates assistive technologies will make. Possible values include `off`, `polite`, and `assertive`. The default is `off`. For the screen reader to announce changes when the user is idle, use `polite`. For immediate notifications, use `assertive`. |
 
 For more information, see the [WAI-ARIA Specification](https://www.w3.org/TR/wai-aria/).
-
-#### Source Code
-
-`lightning-button-icon-stateful` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/buttonMenu/__docs__/buttonMenu.md

@@ -327,7 +327,3 @@ 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 of the component in which it was dispatched.                         |
-
-#### Source Code
-
-`lightning-button-menu` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/buttonStateful/__docs__/buttonStateful.md

@@ -162,7 +162,3 @@ This component has usage differences from its Aura counterpart. See [Base Compon
 This component uses `aria-live="polite"`, which means the button label is read after the current user task or content.
 
 To inform screen readers that a button is disabled, set the `disabled` attribute to true.
-
-#### Source Code
-
-`lightning-button-stateful` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/buttonStateful/buttonStateful.html

@@ -4,24 +4,26 @@
             onblur={handleButtonBlur}
             onclick={handleButtonClick}
             aria-live="polite"
+            aria-relevant="additions"
+            aria-pressed={computedAriaPressed}
             part="button"
             disabled={disabled}>
 
             <span class="slds-text-not-selected">
                 <template if:true={iconNameWhenOff}>
-                    <lightning-primitive-icon part="start" icon-name={iconNameWhenOff} svg-class="slds-button__icon_stateful slds-button__icon_left" variant="bare"></lightning-primitive-icon>
+                    <lightning-primitive-icon aria-hidden="true" part="start" icon-name={iconNameWhenOff} svg-class="slds-button__icon_stateful slds-button__icon_left" variant="bare"></lightning-primitive-icon>
                 </template>
                 {privateLabelWhenOff}
             </span>
             <span class="slds-text-selected">
                 <template if:true={iconNameWhenOn}>
-                    <lightning-primitive-icon part="start" icon-name={iconNameWhenOn} svg-class="slds-button__icon_stateful slds-button__icon_left" variant="bare"></lightning-primitive-icon>
+                    <lightning-primitive-icon aria-hidden="true" part="start" icon-name={iconNameWhenOn} svg-class="slds-button__icon_stateful slds-button__icon_left" variant="bare"></lightning-primitive-icon>
                 </template>
                 {privateLabelWhenOn}
             </span>
             <span class="slds-text-selected-focus">
                 <template if:true={privateIconNameWhenHover}>
-                    <lightning-primitive-icon part="start" icon-name={privateIconNameWhenHover} svg-class="slds-button__icon_stateful slds-button__icon_left" variant="bare"></lightning-primitive-icon>
+                    <lightning-primitive-icon aria-hidden="true" part="start" icon-name={privateIconNameWhenHover} svg-class="slds-button__icon_stateful slds-button__icon_left" variant="bare"></lightning-primitive-icon>
                 </template>
                 {privateLabelWhenHover}
             </span>

package/src/lightning/buttonStateful/buttonStateful.js

@@ -239,6 +239,10 @@ export default class LightningButtonStateful extends LightningShadowBaseClass {
         this.dispatchEvent(new CustomEvent('focus'));
     }
 
+    get computedAriaPressed() {
+        return String(this.state.selected);
+    }
+
     // validate a label is a string and not zero length
     isValidLabel(labelVal) {
         // if not a string or of length 0 then label is not valid

package/src/lightning/card/__docs__/card.md

@@ -108,7 +108,3 @@ To understand how we implemented SLDS in `lightning-card`, see the **Source Code
 Icons are not available in Lightning Out, but they are available in Lightning Components for Visualforce and other experiences.
 
 This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
-
-#### Source Code
-
-`lightning-card` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

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

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

package/src/lightning/carousel/__docs__/carousel.md

@@ -88,7 +88,3 @@ This example creates a basic carousel with three images and disables automatic s
 
 Use the Tab key to move focus to the carousel, then tab again to focus on the indicator buttons.
 Use right and left arrow keys to scroll to the next or previous image.
-
-#### Source Code
-
-`lightning-carousel` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/checkboxGroup/__docs__/checkboxGroup.md

@@ -194,7 +194,3 @@ element. The legend contains the `label` value. The `fieldset` element enables
 grouping of related checkboxes to facilitate tabbing navigation and speech
 navigation for accessibility purposes. Similarly, the `legend` element
 improves accessibility by enabling a caption to be assigned to the `fieldset`.
-
-#### Source Code
-
-`lightning-checkbox-group` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/combobox/__docs__/combobox.md

@@ -156,7 +156,3 @@ The `open` event does not return any parameters.
 | 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 of the component in which it was dispatched.                         |
-
-#### Source Code
-
-`lightning-combobox` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

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

@@ -187,7 +187,10 @@
     }
 
 :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 */
+        /* @W-14518344 The following line still exists in SLDS-internal
+           but it was removed here because it was causing the input 
+           component to not display it's bottom border
+        border-bottom: 0; Remove border when using legacy version of slds-form-element */
         padding-inline-start: 0;
     }
 

package/src/lightning/datatable/columnWidthManager.js

@@ -1,7 +1,7 @@
 import { RESIZER_DEFAULT_STATE, isTableRenderedVisible } from './columnResizer';
 import { AutoWidthStrategy } from './autoWidthStrategy';
 import { FixedWidthStrategy } from './fixedWidthStrategy';
-import { getScrollerXFromScrollerY, getScrollerY } from './utils';
+import { getScrollerX } from './utils';
 import {
     getRowNumberColumnIndex,
     getAdjustedRowNumberColumnWidth,
@@ -364,8 +364,8 @@ export class ColumnWidthManager {
     getDatatableInterface(template) {
         return {
             getAvailableWidthFromDom() {
-                const scrollerY = getScrollerY(template);
-                return getScrollerXFromScrollerY(scrollerY).offsetWidth;
+                const scrollerX = getScrollerX(template);
+                return scrollerX.offsetWidth;
             },
             getDataCellWidths() {
                 const cellElements = template.querySelectorAll(

package/src/lightning/datatable/columns.js

@@ -43,7 +43,11 @@ const SELECTABLE_COLUMN = {
  * @param {Array} rawColumns - The user provided column definitions to normalize
  * @param {Object} types - The type handling factory
  */
-export function normalizeColumns(state, rawColumns, types) {
+export function setColumns(state, rawColumns, types) {
+    // Untracked state changes.
+    state.hadTreeDataTypePreviously = state.treeColumn !== undefined;
+    state.treeColumn = undefined;
+
     const { length: colCount } = rawColumns;
     if (colCount === 0) {
         // Tracked state change.
@@ -176,13 +180,22 @@ export function normalizeColumns(state, rawColumns, types) {
         }
 
         // Generate colKeyValue after normalizing customer column.
-        normCol.colKeyValue = generateColKeyValue(normCol, colIndex);
+        const colKeyValue =
+            normCol.colKeyValue ||
+            `${colName || colIndex}-${columnType}-${colIndex}`;
+
+        normCol.colKeyValue = colKeyValue;
         normCol.isScopeCol = colIndex === firstColumnForReaders;
         normCol.isLastCol = colIndex === normColCount - 1;
+        normCol.name = colName;
         normCol.tabIndex = -1;
 
         // normalize tree column
         if (normCol.type === 'tree') {
+            if (state.treeColumn === undefined) {
+                // Untracked state changes
+                state.treeColumn = normCol;
+            }
             // normalized subType attributes
             const { typeAttributes } = normCol;
             const typeAttributesOverrides = {};
@@ -201,10 +214,9 @@ export function normalizeColumns(state, rawColumns, types) {
 
         // partially inline updateHeaderInternalActions from datatable/headerActions
         const { actions } = normCol;
-        const isLastColumn = colIndex === normColCount - 1;
         normCol.actions = {
             menuAlignment:
-                isLastColumn ||
+                normCol.isLastCol ||
                 normalizedColumns[colIndex + 1].type === 'action'
                     ? 'auto-right'
                     : 'auto-left',
@@ -247,19 +259,6 @@ export function getCellAttributesValues(column) {
     return isObjectLike(cellAttributes) ? cellAttributes : {};
 }
 
-/**
- * Generates a unique column key value.
- *
- * @param {Object} columnMetadata The object for an specific column metadata
- * @param {Integer} index Optionally, the index of the column.
- * @returns {String} It generates the column key value based on the column field name and type.
- */
-export function generateColKeyValue(columnMetadata, index) {
-    const { columnKey, fieldName, type } = columnMetadata;
-    const prefix = columnKey || fieldName || index;
-    return `${prefix}-${type}-${index}`;
-}
-
 /**
  * Return the index in dt.columns (user definition) related to colKeyValue.
  *      -1 if no column with that key exist or if its internal.
@@ -296,7 +295,7 @@ export function getUserColumnIndex(state, colKeyValue) {
  */
 export const generateHeaderIndexes = function (columns) {
     return columns.reduce((prev, col, index) => {
-        prev[generateColKeyValue(col, index)] = index;
+        prev[col.colKeyValue] = index;
         return prev;
     }, {});
 };