lightning-base-components 1.26.2-rc.0-alpha → 1.26.4-alpha

package/src/lightning/inputAddress/__docs__/inputAddress.md

@@ -229,11 +229,39 @@ 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.
 
-To filter address results by country, pass in an array of ISO 3166-1 Alpha-2 country code strings to the `country-lookup-filter` attribute. Country codes are case-insensitive. You can specify up to a maximum of five country codes.
+#### Filter Address Lookup Based on Country Options
+
+To filter address lookups by country, pass in an array of ISO 3166-1 Alpha-2 country code strings to the `country-lookup-filter` attribute. Country codes are case-insensitive. Enable address lookup by including `show-address-lookup`.
+
+```html
+<template>
+    <lightning-input-address
+        show-address-lookup
+        address-label="Address"
+        street-label="Street"
+        city-label="City"
+        province-label="State"
+        country-label="Country"
+        postal-code-label="Zip Code"
+        country-lookup-filter={countries}
+    >
+    </lightning-input-address>
+</template>
+```
+
+In your JavaScript file, pass in a list of country codes. You can specify a maximum of five country codes. 
+
+```javascript
+import { LightningElement } from 'lwc';
+
+export default class CountryFilterExample extends LightningElement {
+  countries = ['AU', 'GB', 'JP']; 
+}
+```
 
 For a list of valid country codes, see [Google for Developers: countries.csv](https://developers.google.com/public-data/docs/canonical/countries_csv).
 
-**Important:** Using an invalid two-letter country code in the array will prevent the Google Maps Places API from returning results and may trigger console errors. If the array contains a country code longer than two characters or exceeds the five-country filter limit, the component will default to no filter. Additionally, if a non-array value is passed to the attribute, the component will also default to no filter.
+**Important:** Using an invalid two-letter country code in the array prevents the Google Maps Places API from returning results and may trigger console errors. If the array contains a country code longer than two characters or exceeds the five-country filter limit, the component defaults to using no filter. Additionally, if a non-array value is passed to the attribute, the component also defaults to using no filter.
 
 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.

package/src/lightning/inputAddress/inputAddress.js

@@ -367,8 +367,8 @@ export default class LightningInputAddress extends LightningShadowBaseClass {
 
     /**
      * A list of ISO 3166-1 Alpha-2 country codes to filter the address with. Country codes are case-insensitive.
-     * Should only be used when show-address-lookup attribute is present.
-     * Specify up to 5 country codes.
+     * Use with the show-address-lookup attribute.
+     * Specify up to five country codes.
      *
      * @type {list}
      * @default []

package/src/lightning/menuItem/__docs__/menuItem.md

@@ -66,13 +66,8 @@ Use the `icon-name` attribute to add an icon after the text of the menu item.
 Use the `prefix-icon-name` attribute to add an icon before the text of the menu
 item.
 
-You can also use the `icon-type` attribute to control the appearance of icons in menu items. The `icon-type` attribute accepts two values:
-
-- `standard` (default): All icons are displayed in grayscale.
-- `color`: All icons and their respective background colors are supported.
-
-
 This example displays an icon in grayscale before the menu item text.
+
 ```html
 <template>
     <lightning-button-menu>
@@ -83,7 +78,17 @@ This example displays an icon in grayscale before the menu item text.
 </template>
 ```
 
-To enable colored icons and backgrounds, use the `icon-type="color"` attribute:
+#### Adding Icons with Background Colors
+
+The [SLDS action and object icons](https://v1.lightningdesignsystem.com/icons/) (standard and custom) are defined with color backgrounds. However, when you use these icons in menu items, the colors aren't displayed by default.
+
+To display icons with a background color in menu items, use the `icon-type` attribute. The `icon-type` attribute accepts two values.
+
+- `standard` (default): Displays the icon on the menu item in grayscale.
+- `color`: Displays the icon on the menu item with a background color. Action icons and object icons display a white glyph on a colored background that's defined in [SLDS](https://v1.lightningdesignsystem.com/icons/#standard). Doctype and utility icons don't display with a background color.
+
+To enable colored icons and backgrounds, use the `icon-type="color"` attribute. In this example, the `standard:event` icon is displayed with a background color and the `utility:settings` icon is displayed in grayscale.
+
 ```html
 <template>
     <lightning-button-menu>

package/src/lightning/positionLibrary/elementProxy.js

@@ -135,10 +135,11 @@ export class ElementProxy {
         const element = this._node;
         const rect = element.getBoundingClientRect();
 
-        const offsetWidth = element.offsetWidth || rect.width || 1;
-        const offsetHeight = element.offsetHeight || rect.height || 1;
-        const actualWidth = rect.width;
-        const actualHeight = rect.height;
+        const offsetWidth = element.offsetWidth || Math.round(rect.width) || 1;
+        const offsetHeight =
+            element.offsetHeight || Math.round(rect.height) || 1;
+        const actualWidth = Math.round(rect.width);
+        const actualHeight = Math.round(rect.height);
         const widthRatio = Number((actualWidth / offsetWidth).toFixed(2));
         const heightRatio = Number((actualHeight / offsetHeight).toFixed(2));
         return Math.min(widthRatio, heightRatio);
@@ -166,17 +167,22 @@ export class ElementProxy {
 
         //since this.top dosent consist of marginTop , we need to subtract the margin to the top from absTop
         const adjustedAbsPosTop =
-            adjustForZoom(absPos.top) +
+            adjustForZoom(Math.round(absPos.top)) +
             scrollTop -
-            (adjustForZoom(this.top) < adjustForZoom(absPos.top) + scrollTop
+            (adjustForZoom(this.top) <
+            adjustForZoom(Math.round(absPos.top)) + scrollTop
                 ? marginTop
                 : -marginTop);
         const marginAdjustment =
             adjustForZoom(this.top) < adjustForZoom(adjustedAbsPosTop)
                 ? marginTop
                 : -marginTop;
-        const zoomAdjustedAbsLeft = adjustForZoom(absPos.left + scrollLeft);
-        const zoomAdjustedAbsTop = adjustForZoom(absPos.top + scrollTop);
+        const zoomAdjustedAbsLeft = adjustForZoom(
+            Math.round(absPos.left) + scrollLeft
+        );
+        const zoomAdjustedAbsTop = adjustForZoom(
+            Math.round(absPos.top) + scrollTop
+        );
 
         let leftDif = Math.round(
             adjustForZoom(this.left) - zoomAdjustedAbsLeft

package/src/lightning/primitiveCellFactory/primitiveCellFactory.js

@@ -324,6 +324,7 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
             'slds-grid_align-end': computedAlignment === 'right',
             'slds-grid_align-center': computedAlignment === 'center',
             'slds-grid_align-spread':
+                columnType !== 'tree' &&
                 isSpreadComputedAlignment(computedAlignment),
         });
     }

package/src/lightning/primitiveInputSimple/primitiveInputSimple.html

@@ -87,7 +87,6 @@
                         <button
                             data-element-id="searchClear"
                             class="slds-input__icon slds-input__icon_right slds-button slds-button_icon"
-                            onblur={handleBlur}
                             onclick={clearAndSetFocusOnInput}
                             type="button"
                         >

package/src/lightning/primitiveInputSimple/primitiveInputSimple.js

@@ -4,7 +4,7 @@
  * For full license text, see the LICENSE.txt file
  */
 import { api } from 'lwc';
-import { features } from 'lightning/features'
+import { features } from 'lightning/features';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import labelRequired from '@salesforce/label/LightningControl.required';
 import labelClearInput from '@salesforce/label/LightningControl.clear';
@@ -37,7 +37,7 @@ import {
     normalizeKeyValue,
     normalizeString,
     setDecoratedDragonInputValueWithoutEvent,
-    isDesktopBrowser
+    isDesktopBrowser,
 } from 'lightning/utilsPrivate';
 
 import { InputSelectionCache } from './selection';
@@ -59,7 +59,6 @@ const DEFAULT_FORMATTER = VALID_NUMBER_FORMATTERS[0];
 
 export default class LightningPrimitiveInputSimple extends LightningShadowBaseClass {
     _type;
-
     @api hasExternalLabel;
     @api computedLabelClass;
     @api required;
@@ -201,8 +200,6 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
         this._value = normalizeInput(value);
 
         if (this._rendered) {
-            const badInput = this.validity.badInput;
-
             if (this.isTypeNumber) {
                 this._value = stringifyNumber(value);
                 // the extra check for whether the value has changed is done for cases
@@ -289,6 +286,8 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
     _step;
     _numberRawValue = '';
     _value = '';
+    _committedValue;
+    _focusOutListenerAttached = false;
 
     /********* EVENT HANDLERS *********/
     handleFocus(event) {
@@ -374,10 +373,33 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
         this.reflectPopulatedState();
     }
 
+    handleFocusOut(event) {
+        // commit event for type=search are handled by this focusout handler rather
+        // than the handleChange method due to there being a clear button present
+        // where the user can once again edit the value
+        const { relatedTarget } = event;
+        const focusLeftComponent = !(
+            relatedTarget instanceof Node &&
+            this.template.contains(relatedTarget)
+        );
+        if (focusLeftComponent) {
+            this.dispatchCommitEvent();
+        }
+    }
+
     handleChange(event) {
         event.stopPropagation();
 
-        this.dispatchCommitEvent();
+        // type=search will fire a commit event when focus has left the entire component
+        // in the handleFocusOut method.
+        if (features.enableInputSearchCommitEvent) {
+            if (!this.isTypeSearch) {
+                this.dispatchCommitEvent();
+            }
+        } else {
+            this.dispatchCommitEvent();
+        }
+
         if (this.isTypeMobileDateTime) {
             if (
                 this.value ===
@@ -406,7 +428,14 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
     /********* EVENT DISPATCHERS *********/
 
     dispatchCommitEvent() {
-        this.dispatchEvent(new CustomEvent('commit'));
+        if (features.enableInputSearchCommitEvent) {
+            if (this._committedValue !== this.value) {
+                this._committedValue = this.value;
+                this.dispatchEvent(new CustomEvent('commit'));
+            }
+        } else {
+            this.dispatchEvent(new CustomEvent('commit'));
+        }
     }
 
     dispatchChangeEvent() {
@@ -561,7 +590,11 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
     }
 
     get showErrorIcon() {
-        return features.ENABLE_INPUT_ERROR_ICON && this._helpMessage && !this.isTypeSearch;
+        return (
+            features.ENABLE_INPUT_ERROR_ICON &&
+            this._helpMessage &&
+            !this.isTypeSearch
+        );
     }
 
     get computedFormElementClass() {
@@ -669,10 +702,8 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
 
         this.setInputValue('');
         this._value = '';
-        // this._updateValueAndValidityAttribute('');
 
         this.inputElement.focus();
-
         this.dispatchChangeEventWithDetail({
             value: this._value,
         });
@@ -732,6 +763,29 @@ export default class LightningPrimitiveInputSimple extends LightningShadowBaseCl
         reflectAttribute(this, 'variant', this.variant);
         reflectAttribute(this, 'disabled', this.disabled);
         reflectAttribute(this, 'readonly', this.readOnly);
+
+        if (
+            this.isTypeSearch &&
+            !this._focusOutListenerAttached &&
+            features.enableInputSearchCommitEvent
+        ) {
+            this.focusOutEventHandler = this.handleFocusOut.bind(this);
+            this.refs.container.addEventListener(
+                'focusout',
+                this.focusOutEventHandler
+            );
+            this._focusOutListenerAttached = true;
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.isTypeSearch && features.enableInputSearchCommitEvent) {
+            this.refs.container.removeEventListener(
+                'focusout',
+                this.focusOutEventHandler
+            );
+            this._focusOutListenerAttached = false;
+        }
     }
     constructor() {
         super();

package/src/lightning/treeGrid/__docs__/treeGrid.md

@@ -231,7 +231,7 @@ aspects of your columns.
 
 The tree grid formats the data cells of a column based on the type you
 specify for the column. Each data type
-is associated with a base Lightning web component. For example, specifying the
+is associated with a base component. For example, specifying the
 `text` type renders the associated data using a `lightning-formatted-text`
 component. Some of these types allow you to pass in the attributes via the
 `typeAttributes` attribute to customize your output.
@@ -294,7 +294,7 @@ When using currency or date and time types, the default user locale is used
 when no locale formatting is provided. For more information on attributes, see
 the corresponding component documentation.
 
-For more information on creating your own data types, see [Create a Custom Data Type](https://developer.salesforce.com/docs/platform/lwc/guide/data-table-custom-types).
+For more information on creating your own data types, see [Create a Custom Data Type](https://developer.salesforce.com/docs/platform/lwc/guide/tree-grid-custom-types).
 
 #### Appending an Icon to Column Data
 

package/src/lightning/treeGrid/treeGrid.js

@@ -193,11 +193,6 @@ export default class LightningTreeGrid extends LightningShadowBaseClass {
         }
     }
 
-    set columns(value) {
-        this._rawColumns = value;
-        this._columns = normalizeColumns(value);
-    }
-
     /**
      * Array of the columns object that's used to define the data types.
      * Required properties include 'label', 'fieldName', and 'type'. The default type is 'text'.
@@ -209,9 +204,9 @@ export default class LightningTreeGrid extends LightningShadowBaseClass {
         return this._rawColumns;
     }
 
-    set data(value) {
-        this._rawData = value;
-        this.flattenData();
+    set columns(value) {
+        this._rawColumns = value;
+        this._columns = normalizeColumns(value);
     }
 
     /**
@@ -224,9 +219,8 @@ export default class LightningTreeGrid extends LightningShadowBaseClass {
         return this._rawData;
     }
 
-    set expandedRows(value) {
-        this._publicExpandedRows = Object.assign([], value);
-        this._expandedRows = Object.assign([], value);
+    set data(value) {
+        this._rawData = value;
         this.flattenData();
     }
 
@@ -245,6 +239,12 @@ export default class LightningTreeGrid extends LightningShadowBaseClass {
         return this._publicExpandedRows;
     }
 
+    set expandedRows(value) {
+        this._publicExpandedRows = Object.assign([], value);
+        this._expandedRows = Object.assign([], value);
+        this.flattenData();
+    }
+
     get normalizedColumns() {
         return this._columns;
     }
@@ -334,7 +334,16 @@ export default class LightningTreeGrid extends LightningShadowBaseClass {
         this.toggleRow(this.data, name, nextState);
         this._selectedRows = this._selectedRowKeys.slice();
     };
+
+    /**
+     * Enables programmatic row selection with a list of key-field values.
+     * @type {list}
+     */
     @api
+    get selectedRows() {
+        return this._selectedRows;
+    }
+
     set selectedRows(value) {
         this._selectedRows = value;
         if (Array.isArray(value)) {
@@ -342,10 +351,6 @@ export default class LightningTreeGrid extends LightningShadowBaseClass {
         }
     }
 
-    get selectedRows() {
-        return this._selectedRows;
-    }
-
     handleToggleAll = (event) => {
         assertContext(this);
         event.stopPropagation();