lightning-base-components 1.18.4-alpha → 1.18.6-alpha

package/metadata/raptor.json

@@ -3169,6 +3169,27 @@
       {
         "name": "value"
       }
+    ],
+    "methods": [
+      {
+        "name": "blur"
+      },
+      {
+        "name": "focus"
+      }
+    ]
+  },
+  "recordPickerGetRecord": {
+    "properties": [
+      {
+        "name": "displayInfo"
+      },
+      {
+        "name": "objectApiName"
+      },
+      {
+        "name": "recordId"
+      }
     ]
   },
   "recordUtils": {},

package/package.json

@@ -1,12 +1,12 @@
 {
     "name": "lightning-base-components",
-    "version": "1.18.4-alpha",
+    "version": "1.18.6-alpha",
     "license": "MIT",
     "files": [
         "external",
         "scopedImports",
         "metadata",
-        "src/lightning/*/!(__container__|__integration__|__perf__|__raptorMocks__|__test__|__tests__)",
+        "src/lightning/*/!(__container__|__perf__|__raptorMocks__|__test__|__tests__)",
         "package.json"
     ],
     "engines": {
@@ -1307,6 +1307,8 @@
             "lightning-select",
             "lightning-spinner",
             "lightning-tab-bar",
+            "lightning-toast",
+            "lightning-toast-container",
             "lightning-timepicker",
             "lightning-vertical-navigation",
             "lightning-vertical-navigation-section"

package/src/lightning/baseCombobox/baseCombobox.js

@@ -21,7 +21,7 @@ import {
 import { AutoPosition, Direction } from 'lightning/positionLibrary';
 import { VARIANT } from 'lightning/inputUtils';
 import AriaObserver from 'lightning/ariaObserver';
-
+import { isCSR } from 'lightning/utilsPrivate';
 const i18n = {
     ariaSelectedOptions: labelAriaSelectedOptions,
     deselectOptionKeyboard: labelDeselectOptionKeyboard,
@@ -51,6 +51,7 @@ const ARIA_INVALID = 'aria-invalid';
 
 export default class LightningBaseCombobox extends LightningShadowBaseClass {
     static delegatesFocus = true;
+    static validationOptOut = ['class'];
 
     /**
      * Controls auto-filling of the input. Set the attribute to pass
@@ -82,17 +83,16 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     @api attributionLogoUrl;
     @api attributionLogoAssistiveText;
 
-    @track _showDropdownActivityIndicator = false;
+    _showDropdownActivityIndicator = false;
     @track _items = [];
-    @track _disabled = false;
-    @track _dropdownVisible = false;
-    @track _hasDropdownOpened = false;
-    @track _highlightedOptionElementId = null;
-    @track _variant;
-    @track _dropdownHeight = 'standard';
-    @track _readonly = false;
-    @track _logoLoaded = false;
-
+    _disabled = false;
+    _dropdownVisible = false;
+    _hasDropdownOpened = false;
+    _highlightedOptionElementId = null;
+    _variant;
+    _dropdownHeight = 'standard';
+    _readonly = false;
+    _logoLoaded = false;
     _inputDescribedBy = [];
     _inputAriaControls;
     _activeElementDomId;
@@ -126,7 +126,9 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     connectedCallback() {
         super.connectedCallback();
         this.setupAriaObserverIfAbsent();
-        this.overrideDropdownAlignment();
+        if (isCSR) {
+            this.overrideDropdownAlignment();
+        }
         this.classList.add('slds-combobox_container');
         this._connected = true;
         this._keyboardInterface = this.dropdownKeyboardInterface();
@@ -597,7 +599,9 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     get dropdownElement() {
-        return this.template.querySelector('[data-dropdown-element]');
+        return isCSR
+            ? this.template.querySelector('[data-dropdown-element]')
+            : null;
     }
 
     get i18n() {
@@ -942,7 +946,9 @@ export default class LightningBaseCombobox extends LightningShadowBaseClass {
     }
 
     get inputElement() {
-        return this.template.querySelector(INPUT_ELEMENT_SELECTOR);
+        return isCSR
+            ? this.template.querySelector(INPUT_ELEMENT_SELECTOR)
+            : null;
     }
 
     // remove-next-line-for-c-namespace

package/src/lightning/button/button.js

@@ -4,6 +4,7 @@ import {
     normalizeString as normalize,
     normalizeBoolean,
     reflectAttribute,
+    isCSR,
 } from 'lightning/utilsPrivate';
 import LightningPrimitiveButton from 'lightning/primitiveButton';
 import template from './button.html';
@@ -230,7 +231,7 @@ export default class LightningButton extends LightningPrimitiveButton {
     }
 
     get button() {
-        return this.template.querySelector('button');
+        return isCSR ? this.template.querySelector('button') : null;
     }
 
     /**
@@ -240,7 +241,7 @@ export default class LightningButton extends LightningPrimitiveButton {
     connectedCallback() {
         // Set `data-render-mode` attribute in native shadow mode
         if (!this.template.synthetic) {
-            this.template.host.setAttribute('data-render-mode', 'shadow');
+            this.setAttribute('data-render-mode', 'shadow');
         }
         if (!this._connected) {
             reflectAttribute(this, 'variant', this._normalizedVariant);

package/src/lightning/buttonIcon/buttonIcon.js

@@ -1,6 +1,6 @@
 import { api } from 'lwc';
 import { classSet } from 'lightning/utils';
-import { normalizeString as normalize } from 'lightning/utilsPrivate';
+import { normalizeString as normalize, isCSR } from 'lightning/utilsPrivate';
 // remove-next-line-for-c-namespace
 import { Tooltip, TooltipType } from 'lightning/tooltipLibrary';
 import LightningPrimitiveButton from 'lightning/primitiveButton';
@@ -89,6 +89,7 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
      * @default medium
      */
     _size = DEFAULT_SIZE;
+
     @api
     get size() {
         return this._originalSize;
@@ -319,22 +320,24 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
     connectedCallback() {
         super.connectedCallback();
         this._connected = true;
-        this.dispatchEvent(
-            new CustomEvent('privatebuttoniconregister', {
-                cancelable: true,
-                bubbles: true,
-                detail: {
-                    // Tooltip type should be toggle for some consumers like helptext
-                    setTooltipType: (tooltipType) => {
-                        this.tooltipType = tooltipType;
-                    },
-                    // Title should not be set for some consumers like helptext (see W-12496300)
-                    showTitle: (showTitle) => {
-                        this.showTitle = showTitle;
+        if (isCSR) {
+            this.dispatchEvent(
+                new CustomEvent('privatebuttoniconregister', {
+                    cancelable: true,
+                    bubbles: true,
+                    detail: {
+                        // Tooltip type should be toggle for some consumers like helptext
+                        setTooltipType: (tooltipType) => {
+                            this.tooltipType = tooltipType;
+                        },
+                        // Title should not be set for some consumers like helptext (see W-12496300)
+                        showTitle: (showTitle) => {
+                            this.showTitle = showTitle;
+                        },
                     },
-                },
-            })
-        );
+                })
+            );
+        }
     }
 
     renderedCallback() {

package/src/lightning/combobox/combobox.js

@@ -19,6 +19,8 @@ import {
     VARIANT,
 } from 'lightning/inputUtils';
 
+import { isCSR } from 'lightning/utilsPrivate';
+
 const i18n = {
     required: labelRequired,
     placeholder: labelPlaceholder,
@@ -30,15 +32,20 @@ const i18n = {
  */
 export default class LightningCombobox extends LightningShadowBaseClass {
     static delegatesFocus = true;
-
-    @track _ariaLabelledBy = '';
-    @track _ariaDescribedBy = '';
-    @track _fieldLevelHelp = '';
-    @track _selectedLabel = '';
-    @track _disabled = false;
-    @track _readOnly = false;
-    @track _spinnerActive = false;
-    @track _required = false;
+    static validationOptOut = ['class'];
+
+    _ariaLabelledBy = '';
+    _ariaDescribedBy = '';
+    _fieldLevelHelp = '';
+    _selectedLabel = '';
+    _disabled = false;
+    _readOnly = false;
+    _spinnerActive = false;
+    _required = false;
+    _variant;
+    _helpMessage;
+    _labelForId;
+    @track _items = [];
 
     /**
      * Reserved for internal use. Controls auto-filling of the field.
@@ -84,12 +91,6 @@ export default class LightningCombobox extends LightningShadowBaseClass {
      */
     @api name;
 
-    @track _items = [];
-    @track _variant;
-    @track _helpMessage;
-
-    _labelForId;
-
     renderedCallback() {
         this.synchronizeA11y();
     }
@@ -376,7 +377,7 @@ export default class LightningCombobox extends LightningShadowBaseClass {
     }
 
     get templateRootNode() {
-        return this.template.host.getRootNode();
+        return isCSR ? this.template.host.getRootNode() : null;
     }
 
     get i18n() {

package/src/lightning/f6Controller/f6Controller.js

@@ -5,6 +5,7 @@ const DEBOUNCE_KEY_DOWN = 300;
 export const DEFAULT_CONFIG = {
     navKey: 'F6',
     f6RegionAttribute: 'data-f6-region',
+    f6RegionHighlightClass: 'f6-highlight',
 };
 
 /**
@@ -33,7 +34,7 @@ export const getActiveElement = (element) => {
  * quickly move to designated regions in a page.
  * It handles logic for:
  * - Globally detecting F6 regions (i.e. registered components must have the data attribute stored in config - f6RegionAttribute
- *  in their tag, by default, 'data-f6-region')
+ *   in their tag, by default, 'data-f6-region')
  * - Handling F6 keypresses by focusing and highlighting F6 regions
  * Supported keyboard shortcuts:
  * - Ctrl/Cmd + F6 to move focus to the next available registered region.
@@ -71,10 +72,32 @@ export class F6Controller {
     appendStyleElement() {
         // all F6 regions must be position relative.
         this._styleElement = document.createElement('style');
-        this._styleElement.innerText = `[${this.config.f6RegionAttribute}]:focus-within { position: relative; outline: rgb(94, 158, 214) 3px solid; outline-offset: 3px; z-index: 9999;}`;
+        const selector = `[${this.config.f6RegionAttribute}].${this.config.f6RegionHighlightClass}`;
+        this._styleElement.innerText = `${selector} { position: relative; }  ${selector}::after { width: 100%; height: 100%; content: ''; outline: rgb(94, 158, 214) 3px solid; outline-offset: -3px; position: absolute; top: 0; left: 0; z-index: 9999; }`;
         this._styleElement.setAttribute('type', 'text/css');
         document.head.appendChild(this._styleElement);
     }
+
+    /**
+     * Clears all regions of outlines.
+     */
+    clearRegionHighlights() {
+        if (!this.regions || !this.regions.length) {
+            return;
+        }
+        this.regions.forEach((region) => {
+            region.classList.remove(this.config.f6RegionHighlightClass);
+        });
+    }
+
+    /**
+     * Outlines the given element with a dashed line.
+     * @param {Element} element, element to highlight
+     */
+    addRegionHighlight(element) {
+        element.classList.add(this.config.f6RegionHighlightClass);
+    }
+
     /**
      * Find the first focusable element inside of the input element.
      * If no focusable element, set the input element to be focusable.
@@ -130,7 +153,9 @@ export class F6Controller {
         if (adjacentRegionIndex === -1) {
             return;
         }
-        this.focusIn(this.regions[adjacentRegionIndex]);
+        const regionToFocus = this.regions[adjacentRegionIndex];
+        this.focusIn(regionToFocus);
+        this.addRegionHighlight(regionToFocus);
     }
 
     /**
@@ -320,6 +345,7 @@ export class F6Controller {
      */
     initialize(config = {}) {
         document.addEventListener('keydown', this._debounceKeyDownHandler);
+        document.addEventListener('click', this.handleClick);
         this.regions = [];
         this.config = {
             ...this.config,
@@ -331,6 +357,7 @@ export class F6Controller {
     /** Removes the event listeners bound in initialize(). */
     cleanUp() {
         document.removeEventListener('keydown', this._debounceKeyDownHandler);
+        document.removeEventListener('click', this.handleClick);
         this._regions = [];
         this._config = DEFAULT_CONFIG;
         this._debounceKeyDownHandler = null;
@@ -340,12 +367,17 @@ export class F6Controller {
         }
     }
 
+    handleClick = () => {
+        this.clearRegionHighlights();
+    };
+
     /**
      * handle document keydown event, move focus to the adjacent region if it detects CTRL/CMD + F6
      * @param {KeyDown} event
      */
 
     handleKeyDown = (event) => {
+        this.clearRegionHighlights();
         const { key, ctrlKey, metaKey } = event;
         if (key === this.config.navKey && (ctrlKey || metaKey)) {
             this.populateRegions();
@@ -371,6 +403,10 @@ export class F6Controller {
 
         return NodeFilter.FILTER_SKIP;
     };
+
+    getConfig() {
+        return Object.freeze(this.config);
+    }
 }
 
 let f6Controller;
@@ -380,3 +416,13 @@ export const createF6Controller = (config) => {
     }
     return f6Controller;
 };
+
+export const getCurrentRegionAttributeName = () => {
+    if (f6Controller) {
+        const config = f6Controller.getConfig();
+        if (config) {
+            return config.f6RegionAttribute;
+        }
+    }
+    return undefined;
+};

package/src/lightning/formattedRichText/formatted-rich-text.slds.css

@@ -1,6 +1,6 @@
 
 :host([data-render-mode="shadow"].slds-rich-text-editor__output) {
-  line-height: var(--sds-g-line-height);
+  line-height: var(--sds-g-font-lineheight, 1.5);
   overflow-wrap: break-word;
   word-wrap: break-word;
   -webkit-hyphens: manual;

package/src/lightning/formattedRichText/formattedRichText.css

@@ -1,2 +1,3 @@
 @import 'lightning/sldsCommon';
 @import './formatted-rich-text.slds.css';
+@import 'lightning/sldsUtilsThemes';

package/src/lightning/formattedRichText/formattedRichText.html

@@ -1,4 +1,4 @@
 <template>
     <!-- Container for rich text -->
-    <span lwc:dom="manual"></span>
+    <span lwc:dom="manual" part="formatted-rich-text"></span>
 </template>

package/src/lightning/formattedRichText/formattedRichText.js

@@ -14,6 +14,7 @@ import {
  * Other tags and attributes are removed and only their text content is displayed.
  */
 export default class LightningFormattedRichText extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
     /**
      * If present, the component does not create links in the rich text.
      * @type {boolean}

package/src/lightning/layout/layout.js

@@ -13,6 +13,8 @@ import { normalizeBoolean } from 'lightning/utilsPrivate';
  * Represents a responsive grid system for arranging containers on a page.
  */
 export default class LightningLayout extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
+
     /**
      * Determines how to spread the layout items horizontally.
      * The alignment options are center, space, spread, and end.

package/src/lightning/layoutItem/layoutItem.js

@@ -15,6 +15,8 @@ import {
  * @slot default Placeholder for your content in lightning-layout-item.
  */
 export default class LightningLayoutItem extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
+
     /**
      * Make the item fluid so that it absorbs any extra space in its
      * container or shrinks when there is less space. Allowed values are:

package/src/lightning/primitiveButton/primitiveButton.js

@@ -2,6 +2,7 @@ import { api, track } from 'lwc';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     isIE11,
+    isCSR,
     normalizeBoolean,
     normalizeString,
     buttonGroupOrderClass,
@@ -149,7 +150,7 @@ export default class LightningPrimitiveButton extends LightningShadowBaseClass {
     @api
     set ariaControls(value) {
         this.originalAriaControls = value;
-        this.template.host.setAttribute('aria-controls', value);
+        this.setAttribute('aria-controls', value);
         this.setHostRoleAttribute(BUTTON);
     }
 
@@ -165,7 +166,7 @@ export default class LightningPrimitiveButton extends LightningShadowBaseClass {
     @api
     set ariaOwns(value) {
         this.originalAriaOwns = value;
-        this.template.host.setAttribute('aria-owns', value);
+        this.setAttribute('aria-owns', value);
         this.setHostRoleAttribute(BUTTON);
     }
 
@@ -181,7 +182,7 @@ export default class LightningPrimitiveButton extends LightningShadowBaseClass {
     @api
     set ariaDetails(value) {
         this.originalAriaDetails = value;
-        this.template.host.setAttribute('aria-details', value);
+        this.setAttribute('aria-details', value);
         this.setHostRoleAttribute(BUTTON);
     }
 
@@ -197,7 +198,7 @@ export default class LightningPrimitiveButton extends LightningShadowBaseClass {
     @api
     set ariaFlowTo(value) {
         this.originalAriaFlowTo = value;
-        this.template.host.setAttribute('aria-flowto', value);
+        this.setAttribute('aria-flowto', value);
         this.setHostRoleAttribute(BUTTON);
     }
 
@@ -453,7 +454,7 @@ export default class LightningPrimitiveButton extends LightningShadowBaseClass {
         // Workaround for an IE11 bug where click handlers on button ancestors
         // receive the click event even if the button element has the `disabled`
         // attribute set.
-        if (isIE11) {
+        if (isIE11 && isCSR) {
             this.template.addEventListener('click', (event) => {
                 if (this.disabled) {
                     event.stopImmediatePropagation();
@@ -487,9 +488,8 @@ export default class LightningPrimitiveButton extends LightningShadowBaseClass {
      * @default undefined
      */
     setHostRoleAttribute(value) {
-        const hostElement = this.template.host;
-        let ariaRoleValue = hostElement.getAttribute(ROLE) || value;
+        let ariaRoleValue = this.getAttribute(ROLE) || value;
 
-        hostElement.setAttribute(ROLE, ariaRoleValue);
+        this.setAttribute(ROLE, ariaRoleValue);
     }
 }

package/src/lightning/sldsCommon/sldsCommon.css

@@ -24,8 +24,8 @@ h6 {
 }
 
 a {
-    color: var(--slds-g-color-brand-base-50, #0176d3);
-    text-decoration: none;
+    color: var(--slds-g-link-color, var(--slds-g-color-brand-base-50, #0176d3));
+    text-decoration: var(--_slds-g-font-decoration, none);
     transition: color 0.1s linear;
     background-color: transparent;
 }
@@ -37,16 +37,24 @@ a:hover {
 
 a:hover,
 a:focus {
-    text-decoration: underline;
-    color: var(--slds-g-color-brand-base-30, #014486);
+    text-decoration: var(--_slds-g-font-decoration-hover, underline);
+    color: var(--slds-g-link-color-hover, var(--slds-g-color-brand-base-30, #014486));
 }
 
 a:active {
-    color: var(--slds-g-color-brand-base-30, #014486);
+    color: var(--slds-g-link-color-active, var(--slds-g-color-brand-base-30, #014486));
 }
 
 a:focus-visible {
-    outline-color: var(--slds-g-color-brand-base-50, #0176d3);
+    outline-color: var(--_slds-g-color-outline, var(--slds-g-color-brand-base-50, #0176d3));
+}
+
+a:focus {
+    box-shadow: var(--_slds-g-shadow);
+    border-color: var(--_slds-g-color-border);
+    border-width: var(--_slds-g-sizing-border);
+    border-style: var(--_slds-g-style-border);
+    outline: var(--_slds-g-font-decoration-hover);
 }
 
 a,

package/src/lightning/sldsUtilsPosition/sldsUtilsPosition.css

@@ -1,18 +1,18 @@
 /* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
 Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
-.slds-is-static {
+:host([data-render-mode="shadow"]) .slds-is-static {
     position: static;
 }
 
-.slds-is-relative {
+:host([data-render-mode="shadow"]) .slds-is-relative {
     position: relative;
 }
 
-.slds-is-fixed {
+:host([data-render-mode="shadow"]) .slds-is-fixed {
     position: fixed;
 }
 
-.slds-is-absolute {
+:host([data-render-mode="shadow"]) .slds-is-absolute {
     position: absolute;
 }