lightning-base-components 1.18.7-alpha → 1.18.7-ssr

package/src/lightning/f6Controller/f6Controller.js

@@ -2,6 +2,11 @@ import { debounce } from 'lightning/inputUtils';
 import { findAllTabbableElements } from 'lightning/focusUtils';
 const DEBOUNCE_KEY_DOWN = 300;
 
+/**
+ * The configuration for the F6 controller
+ * - navKey: the key used as a trigger for navigating between regions
+ * - f6RegionAttribute: attribute that defines f6 regions
+ */
 export const DEFAULT_CONFIG = {
     navKey: 'F6',
     f6RegionAttribute: 'data-f6-region',
@@ -34,7 +39,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, '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.
@@ -55,18 +60,15 @@ export class F6Controller {
     _styleElement;
 
     /**
-     * Creates a F6Controller with the given configuration.
-     * @param {Object} config - a configuration object
-     * - config.navKey: the key used as a trigger for navigating between regions
-     * - config.f6RegionAttribute: attribute that defines f6 regions
+     * Creates a F6Controller
      */
-    constructor(config = {}) {
+    constructor() {
         // debounce function for handling keydown event
         this._debounceKeyDownHandler = debounce(
             this.handleKeyDown.bind(this),
             DEBOUNCE_KEY_DOWN
         );
-        this.initialize(config);
+        this.initialize();
     }
 
     appendStyleElement() {
@@ -327,30 +329,37 @@ export class F6Controller {
      */
     populateRegions() {
         this.regions = [];
+        this.shadowTreeWalker(document.body);
+    }
 
+    /**
+     * Creates a tree walker from the given root and through
+     * the shadow DOM adding any F6 regions found
+     * @param {Element} root - element for tree walker to start from
+     */
+    shadowTreeWalker(root) {
         const treeWalker = document.createTreeWalker(
-            document.body,
+            root,
             NodeFilter.SHOW_ELEMENT,
-            this.elementFilter,
-            false
+            this.elementFilter
         );
 
         while (treeWalker.nextNode()) {
-            this.regions.push(treeWalker.currentNode);
+            if (treeWalker.currentNode.shadowRoot) {
+                this.shadowTreeWalker(treeWalker.currentNode.shadowRoot);
+            } else {
+                this.regions.push(treeWalker.currentNode);
+            }
         }
     }
 
     /**
      * Add document event listeners to handling all the F6 related interations
      */
-    initialize(config = {}) {
+    initialize() {
         document.addEventListener('keydown', this._debounceKeyDownHandler);
         document.addEventListener('click', this.handleClick);
         this.regions = [];
-        this.config = {
-            ...this.config,
-            ...config,
-        };
         this.appendStyleElement();
     }
 
@@ -359,7 +368,6 @@ export class F6Controller {
         document.removeEventListener('keydown', this._debounceKeyDownHandler);
         document.removeEventListener('click', this.handleClick);
         this._regions = [];
-        this._config = DEFAULT_CONFIG;
         this._debounceKeyDownHandler = null;
         if (this._styleElement) {
             document.head.removeChild(this._styleElement);
@@ -394,9 +402,10 @@ export class F6Controller {
         }
 
         if (
-            element.matches(`*[${this.config.f6RegionAttribute}]`) &&
-            this.isVisible(element) &&
-            !this.isEmpty(element)
+            (element.matches(`*[${this.config.f6RegionAttribute}]`) &&
+                this.isVisible(element) &&
+                !this.isEmpty(element)) ||
+            element.shadowRoot
         ) {
             return NodeFilter.FILTER_ACCEPT;
         }
@@ -410,9 +419,9 @@ export class F6Controller {
 }
 
 let f6Controller;
-export const createF6Controller = (config) => {
+export const createF6Controller = () => {
     if (!f6Controller) {
-        f6Controller = new F6Controller(config);
+        f6Controller = new F6Controller();
     }
     return f6Controller;
 };

package/src/lightning/formattedRichText/formattedRichText.css

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

package/src/lightning/formattedRichText/formattedRichText.js

@@ -1,4 +1,5 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import sanitizeHTML from 'lightning/purifyLib';
 import { linkify } from './linkify';
 import { richTextConfig } from './richTextConfig';
@@ -12,7 +13,7 @@ import {
  * Displays rich text that's formatted with allowed tags and attributes.
  * Other tags and attributes are removed and only their text content is displayed.
  */
-export default class LightningFormattedRichText extends LightningElement {
+export default class LightningFormattedRichText extends LightningShadowBaseClass {
     static validationOptOut = ['class'];
     /**
      * If present, the component does not create links in the rich text.
@@ -58,6 +59,7 @@ export default class LightningFormattedRichText extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-rich-text-editor__output');
         this.connected = true;
     }

package/src/lightning/formattedText/formattedText.css

@@ -1 +1 @@
-/* @import 'lightning/sldsCommon' */
+@import 'lightning/sldsCommon'

package/src/lightning/formattedText/formattedText.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     normalizeBoolean,
     parseToFormattedLinkifiedParts,
@@ -8,7 +9,7 @@ import {
 /**
  * Displays text, replaces newlines with line breaks, and linkifies if requested.
  */
-export default class FormattedText extends LightningElement {
+export default class FormattedText extends LightningShadowBaseClass {
     /**
      * Sets the text to display.
      * @type {string}

package/src/lightning/groupedCombobox/groupedCombobox.html

@@ -18,6 +18,7 @@
                                 data-filter
                                 onready={handleFilterReady}
                                 disabled={disabled}
+                                read-only={readOnly}
                                 items={filterItems}
                                 input-text={filterInputText}
                                 input-icon-name="utility:down"
@@ -35,6 +36,7 @@
                 data-lookup
                 name={name}
                 disabled={disabled}
+                read-only={readOnly}
                 required={required}
                 class={computedLookupComboboxClass}
                 variant="lookup"
@@ -48,6 +50,8 @@
                 input-icon-alternative-text={inputIconAlternativeText}
                 show-input-activity-indicator={showActivityIndicator}
                 show-dropdown-activity-indicator={showDropdownActivityIndicator}
+                custom-role={customRole}
+                custom-aria-has-popup={customAriaHasPopup}
                 onready={handleLookupReady}
                 ontextchange={handleTextChange}
                 ontextinput={handleTextInput}

package/src/lightning/groupedCombobox/groupedCombobox.js

@@ -40,8 +40,6 @@ export default class LightningGroupedCombobox extends LightningElement {
     @api value;
     @api required = false;
     @api disabled = false;
-    // TODO: Need to remove as if a readonly combobox is needed,
-    // the regular lightning-combobox should be used
     @api readOnly = false;
 
     @api inputPill;
@@ -57,6 +55,9 @@ export default class LightningGroupedCombobox extends LightningElement {
      */
     @api disableDefaultHighlight;
 
+    @api customRole = 'combobox';
+    @api customAriaHasPopup = 'listbox';
+
     @track _pills;
 
     @track _variant;

package/src/lightning/helptext/form-element.slds.css

@@ -278,4 +278,12 @@
     :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: HIDDEN */
+
+    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+      display: none
+  }
 }

package/src/lightning/helptext/help-text.slds.css

@@ -484,14 +484,20 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
     justify-content: center;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="left", when present
+   */
   :host([data-render-mode="shadow"]) [part~='start'] {
     display: inline-flex;
-    padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-end: 0;
   }
 
+  /**
+   * Represents inner spacing around icon for icon-position="right", when present
+   */
   :host([data-render-mode="shadow"]) [part~='end'] {
     display: inline-flex;
-    padding-inline-start: var(--sds-g-spacing-2, 0.5rem);
+    padding-inline-start: 0;
   }
 }
 
@@ -883,7 +889,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   /**
       * End part
       */
-  :host([data-render-mode="shadow"]) [part~='end'] {
+  :host([data-render-mode="shadow"]) [part='end'] {
     padding-inline-start: var(--slds-c-buttonicon-end-spacing-inline-start, 0);
   }
 
@@ -912,7 +918,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
   Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
 
 @supports (--styling-hooks: '') {
-  :host([data-render-mode="shadow"]) [part~='help-text'] {
+  :host([data-render-mode="shadow"]) [part='help-text'] {
     --slds-c-buttonicon-color-background: var(--slds-c-helptext-color-background);
     --slds-c-buttonicon-color-background-hover: var(--slds-c-helptext-color-background-hover);
     --slds-c-buttonicon-color-background-focus: var(--slds-c-helptext-color-background-focus);

package/src/lightning/helptext/helptext.css

@@ -1,3 +1,3 @@
-/* @import 'lightning/sldsCommon';
+@import 'lightning/sldsCommon';
 @import './help-text.slds.css';
-@import "./form-element.slds.css"; */
+@import './form-element.slds.css';

package/src/lightning/helptext/helptext.js

@@ -1,5 +1,6 @@
 import labelButtonAlternativeText from '@salesforce/label/LightningHelptext.buttonAlternativeText';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { isValidName } from 'lightning/iconUtils';
 import { normalizeString } from 'lightning/utilsPrivate';
 import { TooltipType } from 'lightning/tooltipLibrary';
@@ -11,7 +12,7 @@ const DEFAULT_ICON_VARIANT = 'bare';
 /**
  * An icon with a text popover used for tooltips.
  */
-export default class LightningHelptext extends LightningElement {
+export default class LightningHelptext extends LightningShadowBaseClass {
     // TODO: future refactoring to remove this.state convention
     @track
     state = {

package/src/lightning/icon/icon.css

@@ -1,2 +1,2 @@
-/* @import 'lightning/sldsCommon';
-@import './icon.slds.css'; */
+@import 'lightning/sldsCommon';
+@import './icon.slds.css';

package/src/lightning/icon/icon.js

@@ -1,4 +1,5 @@
-import { LightningElement, api } from 'lwc';
+import { api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import {
     classListMutation,
     normalizeString,
@@ -16,7 +17,9 @@ import { normalizeVariant } from './util';
 /**
  * Represents a visual element that provides context and enhances usability.
  */
-export default class LightningIcon extends LightningElement {
+export default class LightningIcon extends LightningShadowBaseClass {
+    static validationOptOut = ['class'];
+
     _src;
     _privateIconName;
     _iconName;
@@ -159,6 +162,7 @@ export default class LightningIcon extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-icon_container');
     }
 
@@ -172,7 +176,10 @@ export default class LightningIcon extends LightningElement {
         const name = getName(iconName);
         const color = iconColors[category] && iconColors[category][name];
         if (color) {
-            this.template.host.style = `--sds-c-icon-color-background: var(--slds-c-icon-color-background, ${color});`;
+            this.setAttribute(
+                'style',
+                `--sds-c-icon-color-background: var(--slds-c-icon-color-background, ${color})`
+            );
         }
     }
 }

package/src/lightning/icon/icon.slds.css

@@ -84,7 +84,7 @@
     --slds-c-icon-color-foreground: var(--sds-g-color-neutral-base-70, #aeaeae);
   }
 
-  :host([data-render-mode="shadow"]) [part~='boundary'] {
+  :host([data-render-mode="shadow"]) [part='boundary'] {
     /* --sds-c-icon-color-background: var(--slds-c-icon-color-background); */
     --sds-c-icon-radius-border: var(--slds-c-icon-radius-border, var(--sds-g-radius-border-2, 0.25rem));
     --sds-c-icon-sizing-border: var(--slds-c-icon-sizing-border);
@@ -114,7 +114,7 @@
     display: inline-flex;
   }
 
-  :host([data-render-mode="shadow"]) [part~='icon'] {
+  :host([data-render-mode="shadow"]) [part='icon'] {
     --sds-c-icon-color-foreground: var(--slds-c-icon-color-foreground, var(--sds-g-color-neutral-base-100, #ffffff));
     --sds-c-icon-sizing-height: var(--slds-c-icon-sizing-height, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
     --sds-c-icon-sizing-width: var(--slds-c-icon-sizing-width, var(--slds-c-icon-sizing, var(--sds-g-sizing-9, 2rem)));
@@ -199,7 +199,7 @@
 
 :host([data-render-mode="shadow"]) .slds-input__icon {
   --slds-c-icon-sizing: calc(var(--sds-g-sizing-1, 0.125rem) + var(--sds-g-sizing-4, 0.75rem));
-  
+
   position: absolute;
   top: 50%;
   margin-block-start: -0.4375rem;

package/src/lightning/input/__examples__/checkboxbutton/checkboxbutton.css

@@ -0,0 +1,6 @@
+      .slds-box {
+        padding: 1rem;
+        margin: 0;
+        border-radius: .25rem;
+        border: 1px solid lightgrey;
+      }

package/src/lightning/input/__examples__/checkboxbutton/checkboxbutton.html

@@ -3,6 +3,7 @@
         <h2 class="header">Input Checkbox Button</h2>
         <lightning-input type="checkbox-button" label="Input One" name="input1"></lightning-input>
         <lightning-input type="checkbox-button" label="Input Two" name="input2" checked required></lightning-input>
-        <lightning-input type="checkbox-button" label="Input Three" name="input3" checked disabled></lightning-input>
+        <lightning-input type="checkbox-button" label="Input Three" name="input3" disabled></lightning-input>
+        <lightning-input type="checkbox-button" label="Input Four" name="input3" checked disabled></lightning-input>
     </div>
 </template>

package/src/lightning/input/__examples__/checkboxbutton/checkboxbutton.js

@@ -1,3 +1,3 @@
 import { LightningElement } from 'lwc';
 
-export default class InputCheckboxBasic extends LightningElement {}
+export default class InputCheckboxButton extends LightningElement {}

package/src/lightning/input/__examples__/number/number.html

@@ -19,11 +19,6 @@
         <lightning-input type="number" name="input8" required value="5" label="Required number field with a maximum value of 99" max="99"></lightning-input>
     </div>
 
-    <div>
-        <h2>Input Counter</h2>
-        <lightning-input type="counter" value="123" label="Input with a Counter"></lightning-input>
-    </div>
-
     <div>
         <h2>Live Input Number</h2>
         <lightning-input type="number" name="seven" value={amount} onchange={handleAmountChange} placeholder="type the number of items..." label="Enter a number" ></lightning-input>

package/src/lightning/input/form-element.slds.css

@@ -278,4 +278,12 @@
     :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
       align-items: flex-end;
     }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: HIDDEN */
+
+    :host([data-render-mode="shadow"][variant~='label-hidden']) .slds-form-element__label {
+      display: none
+  }
 }

package/src/lightning/input/input.css

@@ -1,7 +1,5 @@
-/* @import 'lightning/sldsCommon';
-@import './input-text.slds.css';
-@import './input-checkbox.slds.css';
-@import './form-element.slds.css'; */
+@import 'lightning/sldsCommon';
+@import './form-element.slds.css';
 
 :host {
     display: block;