lightning-base-components 1.15.1-alpha → 1.15.2-alpha

package/metadata/raptor.json

@@ -49,7 +49,6 @@
       }
     ]
   },
-  "analyticsDataServiceApi": {},
   "analyticsSmartDataDiscoveryApi": {},
   "analyticsWaveApi": {
     "minVersion": "52.0"
@@ -157,6 +156,9 @@
       {
         "name": "name"
       },
+      {
+        "name": "stretch"
+      },
       {
         "name": "type"
       },
@@ -562,6 +564,7 @@
     ]
   },
   "commerceApi": {},
+  "communityInfoApi": {},
   "communityMicrobatchingApi": {},
   "communityNavigationMenuApi": {},
   "communityRecordSeoPropertiesApi": {},
@@ -894,6 +897,9 @@
       {
         "name": "latitude"
       },
+      {
+        "name": "locale"
+      },
       {
         "name": "longitude"
       },
@@ -1169,6 +1175,9 @@
   "groupedCombobox": {
     "slotNames": [],
     "properties": [
+      {
+        "name": "disableDefaultHighlight"
+      },
       {
         "name": "disabled"
       },
@@ -1350,11 +1359,13 @@
     "slotNames": []
   },
   "iconUtils": {},
+  "industriesActionPlanApi": {},
   "industriesCibApi": {},
   "industriesClmApi": {},
   "industriesDecisionMatrixDesignerApi": {},
   "industriesEinsteinAIAcceleratorApi": {},
   "industriesExplainabilityApi": {},
+  "industriesHealthcloudApi": {},
   "industriesHealthcloudHpiApi": {},
   "industriesIdentityVerificationApi": {},
   "industriesInterestTaggingApi": {},
@@ -1362,6 +1373,7 @@
   "industriesPublicSectorApi": {},
   "industriesRcgTenantmanagementApi": {},
   "industriesRuleBuilderApi": {},
+  "industriesServiceExcellenceApi": {},
   "industriesSustainabilityBeiApi": {},
   "industriesSustainabilityDgfApi": {},
   "industriesSustainabilityRecalculateApi": {},
@@ -1546,6 +1558,9 @@
       {
         "name": "addressLabel"
       },
+      {
+        "name": "addressLookupLabel"
+      },
       {
         "name": "addressLookupPlaceholder"
       },
@@ -1579,6 +1594,9 @@
       {
         "name": "fieldLevelHelp"
       },
+      {
+        "name": "locale"
+      },
       {
         "name": "postalCode"
       },
@@ -2456,6 +2474,9 @@
       {
         "name": "size"
       },
+      {
+        "name": "suppressNoneOption"
+      },
       {
         "name": "validity"
       },
@@ -2550,6 +2571,7 @@
       }
     ]
   },
+  "platformNamedCredentialApi": {},
   "platformNotificationUtils": {},
   "platformOverlayUtils": {},
   "platformResourceLoader": {
@@ -2900,6 +2922,7 @@
       }
     ]
   },
+  "refresh": {},
   "relativeDateTime": {
     "minVersion": "0.0",
     "slotNames": [],
@@ -2977,6 +3000,7 @@
     ]
   },
   "routingService": {},
+  "salesEnablementProgramApi": {},
   "select": {
     "slotNames": [],
     "properties": [
@@ -3422,7 +3446,6 @@
   "uiRelatedListApi": {
     "minVersion": "53.0"
   },
-  "unstable_analyticsDataServiceApi": {},
   "unstable_analyticsSmartDataDiscoveryApi": {},
   "unstable_analyticsWaveApi": {},
   "unstable_analyticsWavePrivateApi": {},
@@ -3449,6 +3472,7 @@
   "unstable_uiActionsApi": {},
   "unstable_uiAppsApi": {},
   "unstable_uiDuplicatesApi": {},
+  "unstable_uiGraphQLApi": {},
   "unstable_uiLayoutApi": {},
   "unstable_uiListApi": {},
   "unstable_uiListsApi": {},
@@ -3458,6 +3482,7 @@
   "unstable_uiRecordApi": {},
   "unstable_uiRecordAvatarApi": {},
   "unstable_uiRelatedListApi": {},
+  "unstable_uiSearchApi": {},
   "userConsentCookie": {
     "minVersion": "53.0"
   },

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "lightning-base-components",
-    "version": "1.15.1-alpha",
+    "version": "1.15.2-alpha",
     "engines": {
-        "node": ">=14.16.0"
+        "node": ">=14.18.2"
     },
     "files": [
         "external",
@@ -881,6 +881,10 @@
                 "name": "@salesforce/label/LightningMap.titleWithAddress",
                 "path": "scopedImports/@salesforce-label-LightningMap.titleWithAddress.js"
             },
+            {
+                "name": "@salesforce/label/LightningMap.defaultTitle",
+                "path": "scopedImports/@salesforce-label-LightningMap.defaultTitle.js"
+            },
             {
                 "name": "@salesforce/label/LightningPrimitiveCoordinate.selected",
                 "path": "scopedImports/@salesforce-label-LightningPrimitiveCoordinate.selected.js"

package/scopedImports/@salesforce-label-LightningMap.defaultTitle.js

@@ -0,0 +1 @@
+export default 'Map of {0} Markers';

package/src/lightning/alert/__docs__/alert.md

@@ -1,7 +1,5 @@
 The `lightning/alert` module lets you create an alert modal within your component. Use `LightningAlert` on your components to communicate a state that affects the entire system, not just a feature or page.
 
-`lightning/alert` is not supported on mobile devices.
-
 Use `LightningAlert.open()` instead of the native `window.alert()` for a more consistent user experience. They have similar functions, but `LightningAlert.open()` works in cross-origin iframes, where the `.alert()` method is no longer supported in Chrome and Safari. Unlike `window.alert()`, `LightningAlert.open()` doesn't halt execution on the page, it returns a Promise. Use `async`/`await` or `.then()` for any code you want to execute after the alert has closed.
 
 Import `LightningAlert` from the `lightning/alert` module in the component that will launch the alert modal, and call `LightningAlert.open()` with your desired attributes.

package/src/lightning/baseCombobox/baseCombobox.html

@@ -44,6 +44,7 @@
                     aria-expanded={computedAriaExpanded}
                     aria-haspopup="listbox"
                     name={name}
+                    role="combobox"
                     data-value={computedInputValue}
                     disabled={disabled}
                     aria-label={computedButtonTriggerAriaLabel}
@@ -60,7 +61,7 @@
                     </span>
                 </button>
             </template>
-            <template if:true={hasInputPill}>
+            <template if:true={isCloseVisible}>
                 <div class="slds-input__icon-group slds-input__icon-group_right">
                     <button onclick={handlePillRemove} type="button"
                         class="slds-button slds-button_icon slds-input__icon slds-input__icon_right"

package/src/lightning/baseCombobox/baseCombobox.js

@@ -13,6 +13,7 @@ import {
     normalizeBoolean,
     normalizeString,
     synchronizeAttrs,
+    computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 // remove-next-line-for-c-namespace
 import { AutoPosition, Direction } from 'lightning/positionLibrary';
@@ -39,6 +40,7 @@ const ARIA_LABELLEDBY = 'aria-labelledby';
 const ARIA_DESCRIBEDBY = 'aria-describedby';
 const ARIA_LABEL = 'aria-label';
 const ARIA_ACTIVEDESCENDANT = 'aria-activedescendant';
+const ARIA_INVALID = 'aria-invalid';
 
 export default class LightningBaseCombobox extends LightningElement {
     static delegatesFocus = true;
@@ -89,6 +91,8 @@ export default class LightningBaseCombobox extends LightningElement {
     _inputAriaControls;
     _activeElementDomId;
     _autocomplete = 'off';
+    originDisableDefaultHighlight;
+    privateDisableDefaultHighlight;
 
     constructor() {
         super();
@@ -276,6 +280,21 @@ export default class LightningBaseCombobox extends LightningElement {
         }
     }
 
+    /**
+     * Whether disable the highlighting default item behavior
+     *
+     * @type {boolean}
+     * @memberof LightningBaseCombobox
+     */
+    @api
+    get disableDefaultHighlight() {
+        return this.originDisableDefaultHighlight;
+    }
+    set disableDefaultHighlight(value) {
+        this.originDisableDefaultHighlight = value;
+        this.privateDisableDefaultHighlight = normalizeBoolean(value);
+    }
+
     @api
     highlightInputText() {
         if (this._connected) {
@@ -331,6 +350,7 @@ export default class LightningBaseCombobox extends LightningElement {
             [ARIA_LABEL]: this.isUserInputDisabled
                 ? this.computedButtonTriggerAriaLabel
                 : this.inputLabel,
+            [ARIA_INVALID]: this.computedAriaInvalid,
         });
     }
 
@@ -880,6 +900,13 @@ export default class LightningBaseCombobox extends LightningElement {
         return this.inputPill && Object.keys(this.inputPill).length > 0;
     }
 
+    get isCloseVisible() {
+        if (this.disabled) {
+            return false;
+        }
+        return this.hasInputPill;
+    }
+
     handlePillRemove() {
         this.inputElement.focus();
         this._events.dispatchPillRemove(this.inputPill);
@@ -924,12 +951,14 @@ export default class LightningBaseCombobox extends LightningElement {
 
     highlightDefaultItem() {
         this.removeHighlight();
-        // eslint-disable-next-line @lwc/lwc/no-async-operation
-        requestAnimationFrame(() => {
-            this.highlightOptionAndScrollIntoView(
-                this.findOptionElementByIndex(this._highlightedItemIndex)
-            );
-        });
+        if (!this.privateDisableDefaultHighlight) {
+            // eslint-disable-next-line @lwc/lwc/no-async-operation
+            requestAnimationFrame(() => {
+                this.highlightOptionAndScrollIntoView(
+                    this.findOptionElementByIndex(this._highlightedItemIndex)
+                );
+            });
+        }
     }
 
     get isDropdownEmpty() {
@@ -1012,6 +1041,12 @@ export default class LightningBaseCombobox extends LightningElement {
             },
         };
     }
+
+    get computedAriaInvalid() {
+        const ariaInvalid =
+            this.template.host.getAttribute('data-aria-invalid');
+        return computeAriaInvalid(ariaInvalid, true);
+    }
 }
 
 function scrollIntoViewIfNeeded(element, scrollingParent) {

package/src/lightning/button/button.js

@@ -1,6 +1,9 @@
 import { api, track } from 'lwc';
 import { classSet } from 'lightning/utils';
-import { normalizeString as normalize } from 'lightning/utilsPrivate';
+import {
+    normalizeString as normalize,
+    normalizeBoolean,
+} from 'lightning/utilsPrivate';
 import LightningPrimitiveButton from 'lightning/primitiveButton';
 import template from './button.html';
 
@@ -9,6 +12,7 @@ import template from './button.html';
  */
 export default class LightningButton extends LightningPrimitiveButton {
     static delegatesFocus = true;
+    _stretch = false;
 
     /**
      * The name for the button element.
@@ -62,6 +66,22 @@ export default class LightningButton extends LightningPrimitiveButton {
      */
     @api iconPosition = 'left';
 
+    /**
+     * Setting it to true allows the button to take up the entire available width.
+     * This value defaults to false.
+     *
+     * @type {boolean}
+     * @default false
+     */
+    @api
+    get stretch() {
+        return this._stretch;
+    }
+
+    set stretch(value) {
+        this._stretch = normalizeBoolean(value);
+    }
+
     /**
      * Specifies the type of button.
      * Valid values are button, reset, and submit.
@@ -97,6 +117,7 @@ export default class LightningButton extends LightningPrimitiveButton {
                     this.normalizedVariant === 'destructive-text',
                 'slds-button_inverse': this.normalizedVariant === 'inverse',
                 'slds-button_success': this.normalizedVariant === 'success',
+                'slds-button_stretch': this.stretch,
             })
             .toString();
     }

package/src/lightning/checkboxGroup/checkboxGroup.html

@@ -1,5 +1,5 @@
 <template>
-    <fieldset aria-describedby={computearaiDescriedBy}>
+    <fieldset>
 
         <legend class={computedLegendClass}>
             <template if:true={required}>
@@ -32,6 +32,6 @@
         <template if:true={_helpMessage}>
             <div id="helptext" data-helptext class="slds-form-element__help">{_helpMessage}</div>
         </template>
-        
+
     </fieldset>
 </template>

package/src/lightning/checkboxGroup/checkboxGroup.js

@@ -97,8 +97,17 @@ export default class LightningCheckboxGroup extends LightningElement {
         });
     }
 
+    get fieldsetElement() {
+        return this.template.querySelector('fieldset');
+    }
+
     renderedCallback() {
         this.synchronizeA11y();
+        synchronizeAttrs(this.fieldsetElement, {
+            'aria-describedby': getRealDOMId(
+                this.template.querySelector('[data-helptext]')
+            ),
+        });
     }
 
     /**
@@ -313,9 +322,4 @@ export default class LightningCheckboxGroup extends LightningElement {
             })
             .toString();
     }
-
-    computearaiDescriedBy() {
-        const helpMessage = this.template.querySelector('[data-helptext]');
-        return getRealDOMId(helpMessage);
-    }
 }

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

@@ -118,9 +118,11 @@ We recommend using the HTML `<select>` element on mobile instead.
 
 You must provide a text label for accessibility to make the information
 available to assistive technology. The `label` attribute creates an HTML label
-element for your input component. To hide a label from view and make it
+element for your component. To hide a label from view and make it
 available to assistive technology, use the `label-hidden` variant.
 
+This component uses `button` elements for select-only comboboxes to comply with the [Lightning Design System combobox blueprint](https://www.lightningdesignsystem.com/components/combobox/#%22Input%22-markup).
+
 #### Custom Events
 
 **`change`**

package/src/lightning/combobox/combobox.js

@@ -300,7 +300,6 @@ export default class LightningCombobox extends LightningElement {
     /**
      * Represents the validity states that an element can be in, with respect to constraint validation.
      * @type {object}
-     * @required
      */
     @api
     get validity() {

package/src/lightning/confirm/__docs__/confirm.md

@@ -1,7 +1,5 @@
 The `lightning/confirm` module lets you create a confirm modal within your component. Use `LightningConfirm` on your component to ask the user to respond before they continue.
 
-`lightning/confirm` is not supported on mobile devices.
-
 Use `LightningConfirm.open()` instead of the native `window.confirm()` for a more consistent user experience. They have similar functions, but `LightningConfirm.open()` works in cross-origin iframes, where the `.confirm()` method is no longer supported in Chrome and Safari. Unlike `window.confirm()`, `LightningConfirm.open()` doesn't halt execution on the page, it returns a Promise. Use `async`/`await` or `.then()` for any code you want to execute after the confirm has closed.
 
 Import `LightningConfirm` from the `lightning/confirm` module in the component that will launch the confirm modal, and call `LightningConfirm.open()` with your desired attributes.

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

@@ -30,6 +30,7 @@ include:
 
 -   Displaying and formatting of columns with appropriate data types
 -   Infinite scrolling of rows
+-   Virtualized rendering
 -   Inline editing for some data types
 -   Header actions
 -   Row-level actions
@@ -606,6 +607,50 @@ the `totalNumberOfRows` attribute during initialization.
     SELECT COUNT(Id) FROM Contact
 ```
 
+#### Virtualize Rendering
+
+A virtualized datatable only renders the rows that are visible and a buffer of a few rows above and below them. This makes scrolling a lot smoother for datatables with more than 200 rows. This example shows how to enable virtualization for a datatable. 
+
+In the JavaScript file of your component, create a `renderConfig` object with the attribute `virtualize` set to `vertical`.
+
+```
+import { LightningElement } from 'lwc';
+
+export default class DataTable extends LightningElement {
+    // set data
+    // set columns
+    renderConfig = {
+        virtualize: 'vertical',
+        // additional customization
+    };
+}
+```
+
+In your `lightning-datatable` component file, set the `render-config` attribute to the `renderConfig` object you created. Set the component’s `render-mode` attribute to `role-based` and set the `lightning-datatable` component’s parent container to an explicit height. This can be a pixel value, a percentage, or an inherited height.
+
+```
+<template>
+    <div style="height: 300px;">
+        <lightning-datatable
+            key-field="id"
+            data={data}
+            columns={columns}
+            render-mode="role-based"
+            render-config={renderConfig}>
+        </lightning-datatable>
+    </div>
+</template>
+```
+
+The `render-config` attribute supports these properties. 
+Property|Type|Default Value|Description
+-----|-----|-----|-----
+`bufferSize`|Number|`5`|Sets the number of additional rows that the component renders before and after the rows displayed in the viewport.
+`fixedHeight`|Boolean|`false`|Makes every row the same height to reduce the load time that's spent caching the height of each row separately. If column wrapping is also enabled, rows can be positioned improperly.
+`rowHeight`|Number|`30.5`|Height in pixels of a table row with one line of text.
+`virtualize`|String|Empty string|Enables virtualization when set to `vertical`.
+
+
 #### Creating Header Actions
 
 Header actions refer to tasks you can perform on a column of data, such

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

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