lightning-base-components 1.21.8-alpha → 1.22.1-alpha

package/src/lightning/datatable/virtualization.js

@@ -12,7 +12,7 @@ export function addTableHeight(state, prevData, newData) {
 
 /**
  * resets state properties relevant to virtualization
- * rowHeights when fixedHeight is false
+ * rowHeights
  *
  * @param {Object} state - datatable state
  */
@@ -43,7 +43,7 @@ export function resetRowHeights(state) {
 
 /**
  * updates state properties relevant to virtualization
- * rowHeights when fixedHeight is false
+ * rowHeights
  *
  * @param {Node} template - the custom element root `this.template` from datatable.js
  * @param {Object} state - datatable state
@@ -71,7 +71,7 @@ export function handleVariableRowHeights(template, state, renderedRows) {
             if (rowElement) {
                 // first rendered row needs height increased by 1 to account for missing border
                 let height = rowElement.getBoundingClientRect().height;
-                if (row.rowIndex === currentRange.start) {
+                if (row.rowIndex && row.rowIndex === currentRange.start) {
                     height++;
                 }
                 state.heightCache[row.key] = height;
@@ -102,10 +102,7 @@ export function handleVariableRowHeights(template, state, renderedRows) {
  * for a given scrollTop value
  */
 export function findFirstVisibleIndex(state, scrollTop) {
-    const { offsetRanges, offsets, rowHeight, fixedHeight, virtualize } = state;
-    if (virtualize && fixedHeight) {
-        return Math.floor(scrollTop / rowHeight);
-    }
+    const { offsetRanges, offsets, rowHeight } = state;
     let start = 0;
     let end = offsetRanges.length - 1;
 
@@ -133,7 +130,7 @@ export function findFirstVisibleIndex(state, scrollTop) {
             // use scrollTop and rowHeight to calculate firstVisibleIndex
             const diff = scrollTop - endOffset;
             const extraRows = Math.floor(diff / rowHeight);
-            state._firstRowOffset = diff % rowHeight;
+            state.firstRowOffset = diff % rowHeight;
             return prevRange.end + extraRows;
         }
         // update start or end for next round of binary search
@@ -319,7 +316,7 @@ function checkOverlap(range1, range2) {
 
 /**
  * updates scrollTop and top values for rows when
- * using virtualization with fixedHeight of false
+ * using virtualization
  */
 function updateVirtualizeStyles(template, state, renderedRows) {
     // update scrollTop so firstVisibleIndex is correctly placed in viewport
@@ -328,12 +325,12 @@ function updateVirtualizeStyles(template, state, renderedRows) {
         state.offsets[state.firstVisibleIndex] + state.firstRowOffset;
 
     // update top of rendered rows based on offsets
-    // all but first rendered row will need to subtract
-    // 1 from offset to account for missing top border
-    // on first rendered row
+    // if first rendered row isn't first row we need to
+    // add 1 to its offset to account for missing top border
+    const addOffset = !!renderedRows[0].rowIndex;
     renderedRows.forEach((row, index) => {
-        let top = state.offsets[row.rowIndex] - 1;
-        if (!index) {
+        let top = state.offsets[row.rowIndex];
+        if (addOffset && !index) {
             top = top + 1; // reset first rendered row to offset in state
         }
         row.style = `position:absolute;top:${top}px;`;

package/src/lightning/formattedAddress/formattedAddress.js

@@ -1,5 +1,6 @@
 import locale from '@salesforce/i18n/locale';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
 import { addressFormat } from 'lightning/internationalizationLibrary';
 
@@ -10,7 +11,7 @@ const MAP_HOST = 'https://www.google.com/maps?q=';
  * The link is opened in a new tab.
  * A static map can be displayed with the address for better context.
  */
-export default class LightningFormattedAddress extends LightningElement {
+export default class LightningFormattedAddress extends LightningShadowBaseClass {
     @track
     state = {
         street: '',

package/src/lightning/formattedDateTime/formattedDateTime.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { dateTimeFormat } from 'lightning/internationalizationLibrary';
 import {
     normalizeBoolean,
@@ -9,7 +10,7 @@ import {
 /**
  * Displays formatted date and time.
  */
-export default class LightningFormattedDateTime extends LightningElement {
+export default class LightningFormattedDateTime extends LightningShadowBaseClass {
     /**
      * The value to be formatted, which can be a Date object, timestamp, or an ISO8601 formatted string.
      * @type {object}

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

@@ -4,6 +4,6 @@
     <minApiVersion>0.0</minApiVersion>
     <support>GA</support>
     <capabilities>
-        <capability>lightning__ServerRenderable</capability>
+        <capability>lightning__ServerRenderableWithHydration</capability>
     </capabilities>
 </LightningComponentBundle>

package/src/lightning/formattedLocation/formattedLocation.js

@@ -1,10 +1,11 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { toFormattedLocation } from 'lightning/utilsPrivate';
 
 /**
  * Displays a geolocation in decimal degrees using the format [latitude, longitude].
  */
-export default class LightningFormattedLocation extends LightningElement {
+export default class LightningFormattedLocation extends LightningShadowBaseClass {
     /**
      * The latitude of the geolocation. Latitude values must be within -90 and 90.
      * @type {number}

package/src/lightning/formattedPhone/formattedPhone.js

@@ -1,10 +1,11 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { toNorthAmericanPhoneNumber } from 'lightning/utilsPrivate';
 
 /**
  * Displays a phone number as a hyperlink with the tel: URL scheme.
  */
-export default class LightningFormattedPhone extends LightningElement {
+export default class LightningFormattedPhone extends LightningShadowBaseClass {
     /**
      * Sets the phone number to display.
      * @type {number}

package/src/lightning/formattedTime/formattedTime.js

@@ -1,10 +1,11 @@
-import { LightningElement, track, api } from 'lwc';
+import { track, api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { normalizeISOTime } from 'lightning/internationalizationLibrary';
 
 /**
  * Displays a formatted time in user's locale format.
  */
-export default class FormattedTime extends LightningElement {
+export default class FormattedTime extends LightningShadowBaseClass {
     @track _formattedTimeValue = null;
     _inputValue = null;
 

package/src/lightning/formattedUrl/formattedUrl.js

@@ -1,11 +1,12 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { makeAbsoluteUrl } from 'lightning/utilsPrivate';
 import { updateRawLinkInfo } from 'lightning/routingService';
 
 /**
  * Displays a URL as a hyperlink.
  */
-export default class LightningFormattedUrl extends LightningElement {
+export default class LightningFormattedUrl extends LightningShadowBaseClass {
     /**
      * Specifies where to open the link. Options include _blank, _parent, _self, and _top.
      * This value defaults to _self.

package/src/lightning/helptext/button-icon.slds.css

@@ -283,7 +283,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
   /* Text color */
   --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
-  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
+  --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
   --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
   --sds-c-button-text-color-active: var(
     --slds-c-button-neutral-text-color-active,
@@ -318,36 +318,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
   --slds-c-button-neutral-color-background: var(
     --slds-c-button-brand-color-background,
-    var(--slds-g-color-accent-container-2)
+    var(--slds-g-color-accent-container-1)
   );
   --slds-c-button-neutral-color-background-hover: var(
     --slds-c-button-brand-color-background-hover,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
   --slds-c-button-neutral-color-background-focus: var(
     --slds-c-button-brand-color-background-focus,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
   --slds-c-button-neutral-color-background-active: var(
     --slds-c-button-brand-color-background-active,
-    var(--slds-g-color-accent-container-3)
+    var(--slds-g-color-accent-container-2)
   );
 
   --slds-c-button-neutral-color-border: var(
     --slds-c-button-brand-color-border,
-    var(--slds-g-color-border-accent-2)
+    var(--slds-g-color-border-accent-1)
   );
   --slds-c-button-neutral-color-border-hover: var(
     --slds-c-button-brand-color-border-hover,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
   --slds-c-button-neutral-color-border-focus: var(
     --slds-c-button-brand-color-border-focus,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
   --slds-c-button-neutral-color-border-active: var(
     --slds-c-button-brand-color-border-active,
-    var(--slds-g-color-border-accent-3)
+    var(--slds-g-color-border-accent-2)
   );
 
   /* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
@@ -399,7 +399,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
   --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
   --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
-  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-2);
+  --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
   --slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);
@@ -427,8 +427,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
    * SLDS light DOM.
    *
    * E.g. --slds-c-button-color-background
-   */
-:host([data-render-mode="shadow"][variant='base']) [part~='button'] {
+*/
+/**
+  * text variant is for button-stateful
+*/
+:host([data-render-mode="shadow"][variant='base']) [part~='button'],:host([data-render-mode="shadow"][variant='text']) [part~='button']{
   --sds-c-button-spacing-inline: 0;
   --slds-c-button-neutral-text-color: var(--slds-g-color-accent-2);
   --slds-c-button-neutral-color-border: transparent;
@@ -440,7 +443,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   --slds-c-button-neutral-color-background-focus: transparent;
   --slds-c-button-neutral-color-background-active: transparent;
 }
-:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled {
+:host([data-render-mode="shadow"][variant='base']) [part~='button']:disabled,:host([data-render-mode="shadow"][variant='text']) [part~='button']:disabled {
   --sds-c-button-color-background: transparent;
   --sds-c-button-color-border: transparent;
 }

package/src/lightning/helptext/helptext.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/inputAddress/__docs__/inputAddress.md

@@ -149,6 +149,7 @@ To enable autocompletion of the address fields using an address lookup field, in
 ```html
 <template>
     <lightning-input-address
+        show-address-lookup
         address-label="Address"
         street-label="Street"
         city-label="City"
@@ -159,7 +160,6 @@ To enable autocompletion of the address fields using an address lookup field, in
         city="San Francisco"
         country="US"
         province="CA"
-        show-address-lookup
     >
     </lightning-input-address>
 </template>
@@ -167,9 +167,50 @@ To enable autocompletion of the address fields using an address lookup field, in
 
 When you start typing an address in the lookup field, a dropdown menu displays matching addresses returned by the Google Maps Places API. Select an address from the dropdown to populate the address fields.
 
-Using `show-address-lookup` is not supported in Playground, Experience Builder sites, Lightning Out,
+Using `show-address-lookup` is not supported in Experience Builder sites, Lightning Out,
 Lightning Components for Visualforce, and standalone apps. While it may work, these targets are not optimized and not officially supported.
 
+#### Using Compact Address Fields
+
+By default, the Street address field is a textarea field. Use compact address fields if you want to separate the Street address field into two input fields instead.
+
+To display compact address fields, include the `show-compact-address` attribute. Use `street-label` to provide a label for the first line of address, and use `subpremise-label` for the second line of address. You can add supplementary information on this field, such as a building number or unit name. 
+
+```html
+<lightning-input-address
+    show-compact-address
+    address-label="Address"
+    street-label="Street Line 1"
+    subpremise-label="Street Line 2"
+    city-label="City"
+    country-label="Country"
+    province-label="Province"
+    postal-code-label="Postal Code"></lightning-input-address>
+```
+
+#### Using the Compact Address Fields with Address Lookup
+
+To enable compact address fields with address lookup, include the `show-address-lookup` and `show-compact-address` attributes. These attributes enable the first street address field as a lookup field.
+
+To provide a label on the second input field, use the `subpremise-label` attribute. You can provide a subpremise value using the `subpremise` attribute. The first input field continues to use `street-label`.
+
+```html
+<lightning-input-address
+    show-address-lookup
+    show-compact-address
+    address-label="Address"
+    street-label="Street Line 1"
+    subpremise-label="Street Line 2"
+    city-label="City"
+    country-label="Country"
+    province-label="Province"
+    postal-code-label="Postal Code"></lightning-input-address>
+```
+
+When you start typing an address in the lookup field, a dropdown menu displays matching addresses returned by the Google Maps Places API. Select an address from the dropdown to populate the address fields.
+
+The `subpremise` field doesn't require a value for submission. You can add supplementary information on this field, such as a building number or unit name. 
+
 #### Validating Required Fields
 
 When you set `required`, a red asterisk is displayed on every address
@@ -279,7 +320,7 @@ See [Input: Styling Hooks Overview](https://www.lightningdesignsystem.com/compon
 
 #### Usage Considerations
 
-Using `show-address-lookup` is not supported in Playground, Experience Builder sites, Lightning Out,
+Using `show-address-lookup` is not supported in Experience Builder sites, Lightning Out,
 Lightning Components for Visualforce, and standalone apps.
 
 When working with address fields such as with the `MailingAddress` field on Salesforce records, consider using the record form components. The `lightning-record-form`, `lightning-record-view-form`, and `lightning-record-edit-form` components provide a form-based UI that's metadata-driven. The components are automatically wired up to your record data, labels, and field-level help text. For more information, see [Work with Records Using Base Components](https://developer.salesforce.com/docs/platform/lwc/guide/data-get-user-input-intro).

package/src/lightning/inputAddress/inputAddress.js

@@ -60,7 +60,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
 
     /**
      * The label for the subpremise field.
-     * Visible only when using show-compact-address-lookup.
+     * Use this attribute with show-compact-address.
      * @type {string}
      */
     @api subpremiseLabel;
@@ -97,7 +97,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
 
     /**
      * The placeholder for the subpremise field.
-     * Visible only when using show-compact-address-lookup.
+     * Use this attribute with show-compact-address.
      * @type {string}
      */
     @api subpremisePlaceholder;
@@ -211,7 +211,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
     /**
      * The value for the street field.
      * Maximum length is 255 characters when rendered as a textarea.
-     * Maximum length is 80 characters when rendered as an input (when using show-compact-address-lookup).
+     * Maximum length is 80 characters when rendered as an input using show-compact-address.
      * @type {string}
      *
      */
@@ -226,6 +226,7 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
     /**
      * The value for the subpremise field.
      * Maximum length is 80 characters.
+     * Use this attribute with show-compact-address.
      * @type {string}
      */
     @api
@@ -306,7 +307,8 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
     }
 
     /**
-     * If present, address lookup using Google Maps is enabled.
+     * If present, an address lookup field using Google Maps is displayed.
+     * When used with show-compact-address, the first street field functions as the address lookup field.
      * @type {boolean}
      * @default false
      */
@@ -320,8 +322,8 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
 
     /**
      * If present, the street field is rendered as two separate inputs instead of a single textarea.
-     * In addition, the search field is no longer rendered as a separate input and its functionality
-     * is moved to the street field.
+     * To provide a label for the first street field, use street-label.
+     * To provide a label for the second street field, use subpremise-label.
      * @type {boolean}
      * @default false
      */

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

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