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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lightning-base-components",
-    "version": "1.26.3-rc.0-alpha",
+    "version": "1.26.4-alpha",
     "license": "MIT",
     "files": [
         "external",
@@ -1354,6 +1354,82 @@
                 "name": "@salesforce/label/LWCFileUpload.AccessCheckError",
                 "path": "scopedImports/@salesforce-label-LWCFileUpload.AccessCheckError.js"
             },
+            {
+                "name": "@salesforce/gate/accordionCloseSingleSection.bc.ltng",
+                "path": "scopedImports/@salesforce-gate-accordionCloseSingleSection.bc.ltng.js"
+            },
+            {
+                "name": "@salesforce/gate/assertContext.bc.ltng",
+                "path": "scopedImports/@salesforce-gate-assertContext.bc.ltng.js"
+            },
+            {
+                "name": "@salesforce/gate/bc.256.enableInputSearchCommitEvent",
+                "path": "scopedImports/@salesforce-gate-bc.256.enableInputSearchCommitEvent.js"
+            },
+            {
+                "name": "@salesforce/gate/bc.256.enableReactiveCarousel",
+                "path": "scopedImports/@salesforce-gate-bc.256.enableReactiveCarousel.js"
+            },
+            {
+                "name": "@salesforce/gate/colorIconsMenuItem.bc.ltng",
+                "path": "scopedImports/@salesforce-gate-colorIconsMenuItem.bc.ltng.js"
+            },
+            {
+                "name": "@salesforce/gate/datatableIconSrc.bc.ltng",
+                "path": "scopedImports/@salesforce-gate-datatableIconSrc.bc.ltng.js"
+            },
+            {
+                "name": "@salesforce/gate/formattedDateTimeDateStyle.bc.ltng",
+                "path": "scopedImports/@salesforce-gate-formattedDateTimeDateStyle.bc.ltng.js"
+            },
+            {
+                "name": "@salesforce/gate/groupedComboboxVariants.bc.ltng",
+                "path": "scopedImports/@salesforce-gate-groupedComboboxVariants.bc.ltng.js"
+            },
+            {
+                "name": "@salesforce/gate/inputErrorIcon.ce.ltng",
+                "path": "scopedImports/@salesforce-gate-inputErrorIcon.ce.ltng.js"
+            },
+            {
+                "name": "@salesforce/gate/lookups.lookupMetadataLayoutServiceBased",
+                "path": "scopedImports/@salesforce-gate-lookups.lookupMetadataLayoutServiceBased.js"
+            },
+            {
+                "name": "@salesforce/gate/modalReduceMotionFix.bc.ltng",
+                "path": "scopedImports/@salesforce-gate-modalReduceMotionFix.bc.ltng.js"
+            },
+            {
+                "name": "@salesforce/gate/overlaySldsScopeClass.bc.ltng",
+                "path": "scopedImports/@salesforce-gate-overlaySldsScopeClass.bc.ltng.js"
+            },
+            {
+                "name": "@salesforce/gate/primitiveThemeProviderDisabled.bc.ltng",
+                "path": "scopedImports/@salesforce-gate-primitiveThemeProviderDisabled.bc.ltng.js"
+            },
+            {
+                "name": "@salesforce/gate/recordFormFieldCaching.bc.ltng",
+                "path": "scopedImports/@salesforce-gate-recordFormFieldCaching.bc.ltng.js"
+            },
+            {
+                "name": "@salesforce/gate/regexCustomElementCheck.bc.ltng",
+                "path": "scopedImports/@salesforce-gate-regexCustomElementCheck.bc.ltng.js"
+            },
+            {
+                "name": "@salesforce/gate/sanitizeURL.bc.ltng",
+                "path": "scopedImports/@salesforce-gate-sanitizeURL.bc.ltng.js"
+            },
+            {
+                "name": "@salesforce/gate/treeGridCustomTypes.bc.ltng",
+                "path": "scopedImports/@salesforce-gate-treeGridCustomTypes.bc.ltng.js"
+            },
+            {
+                "name": "@salesforce/gate/treeGridStaticCustomTypes.bc.ltng",
+                "path": "scopedImports/@salesforce-gate-treeGridStaticCustomTypes.bc.ltng.js"
+            },
+            {
+                "name": "@salesforce/gate/treeItemEndIcon.bc.ltng",
+                "path": "scopedImports/@salesforce-gate-treeItemEndIcon.bc.ltng.js"
+            },
             {
                 "name": "@salesforce/i18n/lang",
                 "path": "scopedImports/@salesforce-i18n-lang.js"

package/scopedImports/@salesforce-gate-accordionCloseSingleSection.bc.ltng.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-assertContext.bc.ltng.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-bc.256.enableInputSearchCommitEvent.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-bc.256.enableReactiveCarousel.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-colorIconsMenuItem.bc.ltng.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-datatableIconSrc.bc.ltng.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-formattedDateTimeDateStyle.bc.ltng.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-groupedComboboxVariants.bc.ltng.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-inputErrorIcon.ce.ltng.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-lookups.lookupMetadataLayoutServiceBased.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-modalReduceMotionFix.bc.ltng.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-overlaySldsScopeClass.bc.ltng.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-primitiveThemeProviderDisabled.bc.ltng.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-recordFormFieldCaching.bc.ltng.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-regexCustomElementCheck.bc.ltng.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-sanitizeURL.bc.ltng.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-treeGridCustomTypes.bc.ltng.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-treeGridStaticCustomTypes.bc.ltng.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/scopedImports/@salesforce-gate-treeItemEndIcon.bc.ltng.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export default { isOpen: () => true }

package/src/lightning/features/features.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import gates from './gates/index.js';
+
+// [W-18059145] Gymnastics to avoid creating a dependency from utilsPrivate to
+// features. This works as long as there is a single lightning/features
+// dependency on the page because it happens during initialization. This simple
+// approach was favored over moving privateContext inside of lightning/features
+// because this is a temporary workaround. W-18095657 is the work to remove this
+// workaround in 258.
+import { privateContext } from 'lightning/utilsPrivate';
+
+const _features = Object.assign(Object.create(null), gates);
+
+// We expose features using a read-only object because they should never be
+// modified outside tests. setFeatureForTest() should be used for testing.
+const errorMessage =
+    'This object and its prototype are immutable. Object values can only be updated with `setFeatureForTest()`';
+const features = new Proxy(_features, {
+    set() {
+        throw new TypeError(errorMessage);
+    },
+    defineProperty() {
+        throw new TypeError(errorMessage);
+    },
+    deleteProperty() {
+        throw new TypeError(errorMessage);
+    },
+    setPrototypeOf() {
+        throw new TypeError(errorMessage);
+    },
+});
+
+privateContext.assertContext = privateContext.assertContext.bind({ features });
+
+function setFeatureForTest(name, value) {
+    if (typeof _features[name] === 'undefined') {
+        throw new TypeError(
+            `Unrecognized feature "${name}". Expected one of: ${Object.keys(
+                _features
+            ).join(', ')}`
+        );
+    }
+    _features[name] = value;
+}
+
+export { features, setFeatureForTest };

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

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderable</capability>
+    </capabilities>
+</LightningComponentBundle>

package/src/lightning/features/gates/imports.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+// Please add your gate to http://sfdc.co/bc-gates if you haven't already.
+
+// Imports below are spaced apart and in lexical order in an attempt to minimize merge conflicts.
+
+// eslint-disable-next-line lightning-global/no-invalid-feature-name, lightning-global/no-invalid-gate-name
+export { default as ENABLE_ACCORDION_CLOSE_SINGLE_SECTION } from '@salesforce/gate/accordionCloseSingleSection.bc.ltng';
+
+// eslint-disable-next-line lightning-global/no-invalid-feature-name, lightning-global/no-invalid-gate-name
+export { default as ENABLE_ASSERT_CONTEXT } from '@salesforce/gate/assertContext.bc.ltng';
+
+// eslint-disable-next-line lightning-global/no-invalid-feature-name, lightning-global/no-invalid-gate-name
+export { default as ENABLE_COLOR_ICONS_MENU_ITEM } from '@salesforce/gate/colorIconsMenuItem.bc.ltng';
+
+// eslint-disable-next-line lightning-global/no-invalid-feature-name, lightning-global/no-invalid-gate-name
+export { default as ENABLE_DATATABLE_IMG_SRC } from '@salesforce/gate/datatableIconSrc.bc.ltng';
+
+// eslint-disable-next-line lightning-global/no-invalid-feature-name, lightning-global/no-invalid-gate-name
+export { default as ENABLE_FORMATTED_DATE_TIME_DATE_STYLE } from '@salesforce/gate/formattedDateTimeDateStyle.bc.ltng';
+
+// eslint-disable-next-line lightning-global/no-invalid-feature-name, lightning-global/no-invalid-gate-name
+export { default as ENABLE_GROUPED_COMBOBOX_VARIANTS } from '@salesforce/gate/groupedComboboxVariants.bc.ltng';
+
+// eslint-disable-next-line lightning-global/no-invalid-feature-name, lightning-global/no-invalid-gate-name
+export { default as ENABLE_INPUT_ERROR_ICON } from '@salesforce/gate/inputErrorIcon.ce.ltng';
+
+// eslint-disable-next-line lightning-global/no-invalid-feature-name, lightning-global/no-invalid-gate-name
+export { default as ENABLE_MODAL_REDUCE_MOTION } from '@salesforce/gate/modalReduceMotionFix.bc.ltng';
+
+export { default as enableReactiveCarousel } from '@salesforce/gate/bc.256.enableReactiveCarousel';
+
+// eslint-disable-next-line lightning-global/no-invalid-feature-name, lightning-global/no-invalid-gate-name
+export { default as ENABLE_RECORD_FORM_FIELD_CACHING } from '@salesforce/gate/recordFormFieldCaching.bc.ltng';
+
+// eslint-disable-next-line lightning-global/no-invalid-feature-name, lightning-global/no-invalid-gate-name
+export { default as ENABLE_REGEX_CUSTOM_ELEMENT_CHECK } from '@salesforce/gate/regexCustomElementCheck.bc.ltng';
+
+// eslint-disable-next-line lightning-global/no-invalid-feature-name, lightning-global/no-invalid-gate-name
+export { default as ENABLE_OVERLAY_SLDS_SCOPE_CLASS } from '@salesforce/gate/overlaySldsScopeClass.bc.ltng';
+
+// eslint-disable-next-line lightning-global/no-invalid-feature-name, lightning-global/no-invalid-gate-name
+export { default as ENABLE_SANITIZE_URL } from '@salesforce/gate/sanitizeURL.bc.ltng';
+
+// eslint-disable-next-line lightning-global/no-invalid-feature-name, lightning-global/no-invalid-gate-name
+export { default as ENABLE_TREE_GRID_CUSTOM_TYPES } from '@salesforce/gate/treeGridCustomTypes.bc.ltng';
+
+// eslint-disable-next-line lightning-global/no-invalid-feature-name, lightning-global/no-invalid-gate-name
+export { default as ENABLE_TREE_GRID_STATIC_CUSTOM_TYPES } from '@salesforce/gate/treeGridStaticCustomTypes.bc.ltng';
+
+// eslint-disable-next-line lightning-global/no-invalid-feature-name, lightning-global/no-invalid-gate-name
+export { default as ENABLE_TREE_ITEM_END_ICON } from '@salesforce/gate/treeItemEndIcon.bc.ltng';
+
+export { default as enableInputSearchCommitEvent } from '@salesforce/gate/bc.256.enableInputSearchCommitEvent';
+
+// eslint-disable-next-line lightning-global/no-invalid-feature-name, lightning-global/no-invalid-gate-name
+export { default as primitiveThemeProviderDisabled } from '@salesforce/gate/primitiveThemeProviderDisabled.bc.ltng';

package/src/lightning/features/gates/index.js

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import * as gates from './imports.js';
+
+const resolved = Object.create(null);
+
+// eslint-disable-next-line @lwc/lwc/no-for-of
+for (const [name, gate] of Object.entries(gates)) {
+    // Disabled by default
+    resolved[name] = gate.isOpen({ fallback: false });
+}
+
+export default resolved;

package/src/lightning/input/__docs__/input.md

@@ -1139,7 +1139,7 @@ The event properties are as follows.
 
 **`commit`**
 
-The event fired when you press Enter after interacting with the input, or move away from the input so it loses focus. For the input type `search` the event is also fired when you click the "x" button to clear the search. For the input type `number` the event is also fired when you press Up/Down arrow keys to change the number.
+The event fired when you press Enter after interacting with the input, or move away from the input so it loses focus. For the input type search, the event is only fired when focus leaves the entire component or when the user clicks the "x" button to clear the search. For the input type `number` the event is also fired when you press Up/Down arrow keys to change the number.
 
 The `commit` event doesn’t return any parameters.
 

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/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();