lightning-base-components 1.17.3-alpha → 1.17.6-alpha

package/src/lightning/f6Controller/f6Controller.js

@@ -0,0 +1,382 @@
+import { debounce } from 'lightning/inputUtils';
+import { findAllTabbableElements } from 'lightning/focusUtils';
+const DEBOUNCE_KEY_DOWN = 300;
+
+export const DEFAULT_CONFIG = {
+    navKey: 'F6',
+    f6RegionAttribute: 'data-f6-region',
+};
+
+/**
+ * finds and returns the active element from an element
+ * @param {Element} element
+ * @returns {Element} - active element, otherwise, undefined
+ */
+export const getActiveElement = (element) => {
+    if (!element) {
+        return element;
+    }
+    if (!element.shadowRoot) {
+        if (element.activeElement) {
+            return getActiveElement(element.activeElement);
+        }
+        return element;
+    }
+    if (!element.shadowRoot.activeElement) {
+        return element;
+    }
+    return getActiveElement(element.shadowRoot.activeElement);
+};
+
+/**
+ * F6Controller is a global focus management system which allows end users to use keyboard shortcuts to
+ * 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')
+ * - Handling F6 keypresses by focusing and highlighting F6 regions
+ * Supported keyboard shortcuts:
+ * - Ctrl/Cmd + F6 to move focus to the next available registered region.
+ * - Shift + Ctrl/Cmd + F6 to move focus to the previous available registered region.
+ */
+
+export class F6Controller {
+    // an array of registered components
+    regions = [];
+
+    // Default configuration
+    config = DEFAULT_CONFIG;
+
+    // reference to the debounced key down handler
+    _debounceKeyDownHandler;
+
+    // reference to the style element
+    _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
+     */
+    constructor(config = {}) {
+        // debounce function for handling keydown event
+        this._debounceKeyDownHandler = debounce(
+            this.handleKeyDown.bind(this),
+            DEBOUNCE_KEY_DOWN
+        );
+        this.initialize(config);
+    }
+
+    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;}`;
+        this._styleElement.setAttribute('type', 'text/css');
+        document.head.appendChild(this._styleElement);
+    }
+    /**
+     * Find the first focusable element inside of the input element.
+     * If no focusable element, set the input element to be focusable.
+     * @param {Element} element element to be examined
+     * @returns {Element} - the focusable element
+     */
+    findFocusableElement(element) {
+        if (!element || !element.isConnected) {
+            return undefined;
+        }
+
+        const tabbableElements = findAllTabbableElements(element);
+        if (tabbableElements && tabbableElements.length) {
+            return tabbableElements[0];
+        }
+        element.tabIndex = '-1';
+        return element;
+    }
+
+    /**
+     * Focus inside the given region:
+     * - element that last had focus in that region, else
+     * - first focusable element in that region, else
+     * - focus on region itself (no focusable elements in region)
+     * @param {Element} region - representing a region of the page
+     */
+    focusIn(region) {
+        const element = this.findFocusableElement(region);
+        if (element) {
+            element.focus();
+        }
+    }
+
+    /**
+     * Navigates to next/previous region
+     * @param {KeyboardEvent} event - a KeyDown event
+     */
+    handleNavigation(event) {
+        event.preventDefault();
+        if (!this.regions.length) {
+            return;
+        }
+        const isPrevious = event.shiftKey;
+        const currentRegionIndex = this.getElementRegionIndex(
+            getActiveElement(event.target)
+        );
+
+        const adjacentRegionIndex = this.getAdjacentRegionIndex(
+            currentRegionIndex,
+            isPrevious
+        );
+
+        if (adjacentRegionIndex === -1) {
+            return;
+        }
+        this.focusIn(this.regions[adjacentRegionIndex]);
+    }
+
+    /**
+     * Determines whether or not container contains element through the shadow DOM.
+     * @param {Element} container - container element
+     * @param {Element} element - target element
+     * @returns {boolean}
+     */
+    shadowContains(container, element) {
+        if (container === element || container.contains(element)) {
+            return true;
+        }
+
+        if (container.shadowRoot) {
+            if (
+                this.isElementInContainerElements(
+                    container.shadowRoot.children,
+                    element
+                )
+            ) {
+                return true;
+            }
+        }
+        if (container.tagName === 'SLOT') {
+            if (
+                this.isElementInContainerElements(
+                    container.assignedElements(),
+                    element
+                )
+            ) {
+                return true;
+            }
+        }
+
+        return this.isElementInContainerElements(container.children, element);
+    }
+
+    /**
+     * Returns true if the container element contains the searchElement
+     * @param {Array} containerElements
+     * @param {Element} searchElement
+     * @returns {boolean}
+     */
+    isElementInContainerElements(containerElements, searchElement) {
+        if (!containerElements || !containerElements.length) {
+            return false;
+        }
+        const numElements = containerElements.length;
+        for (let index = 0; index < numElements; index++) {
+            if (this.shadowContains(containerElements[index], searchElement)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * Find the index of the region containing a given DOM element.
+     * Regions can't be nested, and are thus mutually exclusive.
+     * @param {Element} element - a DOM element
+     * @returns {number} index of DOM element's associated region in region array,
+     * or -1 if element is not contained in any region
+     */
+    getElementRegionIndex(element) {
+        if (!this.regions || !this.regions.length) {
+            return -1;
+        }
+        return this.regions.findIndex((container) => {
+            return this.shadowContains(container, element);
+        });
+    }
+
+    /**
+     * Gets the index of the next (or previous) region to highlight.
+     * @param {number} currentRegionIndex, index of the current region
+     * @param {boolean} isPrevious, true to get the index of the previous region
+     * @returns {number} index of the region to highlight next or -1 if the current region is the last region (1st region for reverse)
+     */
+    getAdjacentRegionIndex(currentRegionIndex, isPrevious) {
+        const lastRegionIndex = this.regions.length - 1;
+        if (lastRegionIndex < 0) {
+            return -1;
+        }
+        if (isPrevious) {
+            if (currentRegionIndex <= 0) {
+                return lastRegionIndex;
+            }
+            return currentRegionIndex - 1;
+        }
+
+        if (currentRegionIndex === lastRegionIndex) {
+            return 0;
+        }
+        return currentRegionIndex + 1;
+    }
+
+    /**
+     * Checks if a DOM element is visible. This only checks for visibility using
+     * `display:none` (on element or any of its ancestors) and doesn't account for
+     * elements hidden through other means - such as a opacity, visibility, aria-hidden, etc.
+     * @param {Element} element, a DOM element
+     * @returns {boolean} false if `display:none` or `visibility:hidden` is set anywhere in element's ancestor tree, true otherwise
+     */
+    isVisible(element) {
+        if (element === document.body || !(element instanceof Element)) {
+            return true;
+        }
+        try {
+            const computedStyle =
+                window.getComputedStyle(element) || element.style;
+            if (!computedStyle) {
+                return false;
+            }
+            const { display, visibility } = computedStyle;
+            if (
+                (display && display.toLowerCase() === 'none') ||
+                (visibility && visibility.toLowerCase() === 'hidden')
+            ) {
+                return false;
+            }
+            return this.isVisible(element.parentNode);
+        } catch (error) {
+            return false;
+        }
+    }
+
+    /**
+     * Checks if a DOM element has no content inside. A DOM has no content inside if it
+     * only contains slots as children.
+     * @param {Element} element, a DOM element
+     * @returns {boolean} - true if element has no children other than slots
+     */
+    isEmpty(element) {
+        if (element.tagName === 'SLOT') {
+            if (!this.isEmptyChildren(element.assignedElements())) {
+                return false;
+            }
+        }
+
+        let children = element.children;
+        if ((!children || !children.length) && element.shadowRoot) {
+            children = element.shadowRoot.children;
+        }
+
+        return this.isEmptyChildren(children);
+    }
+
+    /**
+     * Check if the children are all empty
+     * @param {*} children - element
+     * @returns {boolean} true if all the child element are empty
+     */
+    isEmptyChildren(children) {
+        if (!children || !children.length) {
+            return true;
+        }
+        const numChildren = children.length;
+        for (let index = 0; index < numChildren; index++) {
+            const child = children[index];
+            if (child.tagName !== 'SLOT' || !this.isEmpty(child)) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    /**
+     * Searches for regions in the DOM and populates this.regions
+     */
+    populateRegions() {
+        this.regions = [];
+
+        const treeWalker = document.createTreeWalker(
+            document.body,
+            NodeFilter.SHOW_ELEMENT,
+            this.elementFilter,
+            false
+        );
+
+        while (treeWalker.nextNode()) {
+            this.regions.push(treeWalker.currentNode);
+        }
+    }
+
+    /**
+     * Add document event listeners to handling all the F6 related interations
+     */
+    initialize(config = {}) {
+        document.addEventListener('keydown', this._debounceKeyDownHandler);
+        this.regions = [];
+        this.config = {
+            ...this.config,
+            ...config,
+        };
+        this.appendStyleElement();
+    }
+
+    /** Removes the event listeners bound in initialize(). */
+    cleanUp() {
+        document.removeEventListener('keydown', this._debounceKeyDownHandler);
+        this._regions = [];
+        this._config = DEFAULT_CONFIG;
+        this._debounceKeyDownHandler = null;
+        if (this._styleElement) {
+            document.head.removeChild(this._styleElement);
+            this._styleElement = null;
+        }
+    }
+
+    /**
+     * handle document keydown event, move focus to the adjacent region if it detects CTRL/CMD + F6
+     * @param {KeyDown} event
+     */
+
+    handleKeyDown = (event) => {
+        const { key, ctrlKey, metaKey } = event;
+        if (key === this.config.navKey && (ctrlKey || metaKey)) {
+            this.populateRegions();
+            this.handleNavigation(event);
+        }
+    };
+
+    elementFilter = (element) => {
+        if (
+            element.parentElement &&
+            element.parentElement.matches(`*[${this.config.f6RegionAttribute}]`)
+        ) {
+            return NodeFilter.FILTER_REJECT;
+        }
+
+        if (
+            element.matches(`*[${this.config.f6RegionAttribute}]`) &&
+            this.isVisible(element) &&
+            !this.isEmpty(element)
+        ) {
+            return NodeFilter.FILTER_ACCEPT;
+        }
+
+        return NodeFilter.FILTER_SKIP;
+    };
+}
+
+let f6Controller;
+export const createF6Controller = (config) => {
+    if (!f6Controller) {
+        f6Controller = new F6Controller(config);
+    }
+    return f6Controller;
+};

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

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

package/src/lightning/formattedRichText/formattedRichText.js

@@ -119,9 +119,10 @@ export default class LightningFormattedRichText extends LightningElement {
 
     renderRichText() {
         if (this.connected) {
-            const richText = this.sanitize(
-                this.disableLinkify ? this.value : linkify(this.value)
-            );
+            const sanitizeText = this.sanitize(this.value);
+            const richText = this.disableLinkify
+                ? sanitizeText
+                : linkify(sanitizeText);
             const container = this.container;
 
             if (this.clean) {

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

@@ -0,0 +1,232 @@
+
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+  @supports (--styling-hooks: '') {
+    /* FORM ELEMENT: BASE */
+    :host([data-render-mode="shadow"]) .slds-form-element {
+        position: relative;
+        min-width: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__label {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        hyphens: auto;
+        display: inline-block;
+        color: var(--sds-g-color-neutral-base-30, #444444);
+        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        margin-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__label:empty {
+        margin: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__control {
+        clear: left; /* NOTE: Ideally we want left to be inline-start but browser support is not ready for that value. We need to figure out better RTL support */
+        position: relative;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__control .slds-radio,:host([data-render-mode="shadow"]) 
+    .slds-form-element__control .slds-checkbox {
+        display: block;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__icon {
+        display: inline-block;
+        position: relative;
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        vertical-align: top;
+        line-height: var(--sds-g-font-lineheight-1, 1);
+        z-index: 1;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__icon .slds-button_icon {
+        position: relative;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__help,:host([data-render-mode="shadow"]) 
+    .slds-form-element__helper { 
+        font-size: var(--sds-g-font-scale-neg-3, 0.75rem);
+        margin-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        display: block;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_edit .slds-form-element__static {
+        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly {
+        flex-basis: 0%;
+        border-bottom: var(--sds-g-sizing-border-1, 1px) solid var(--sds-g-color-neutral-base-90, #e5e5e5);
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__control {
+        padding-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        padding-block-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_readonly .slds-form-element__label {
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__legend {
+        font-weight: var(--sds-g-font-weight-7, 700);
+        float: left;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__addon {
+        display: inline-block;
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: var(--sds-g-spacing-2, 0.5rem);
+        margin-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        align-self: center;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static {
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-word;
+        display: inline-block;
+        font-size: var(--sds-g-font-scale-neg-1, 0.875rem);
+        font-weight: var(--sds-g-font-weight-4, 400);
+        color: var(--sds-g-color-neutral-base-10, #181818);
+        width: 100%;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static.slds-text-longform *:last-child {
+        margin-block-end: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static:empty {
+        min-height: calc(var(--sds-g-sizing-6, 1.25rem) + 1px);
+        vertical-align: bottom;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element__static--edit {
+        width: calc(100% - var(--sds-g-sizing-7, 1.5rem));
+    }
+
+    :host([data-render-mode="shadow"]) .slds-required {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+        margin-block-start: 0;
+        margin-block-end: 0;
+        margin-inline-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+        margin-inline-end: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-has-error .slds-form-element__help {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    :host([data-render-mode="shadow"][invalid]) .slds-form-element__help {
+        color: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: STACKED */
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) {
+        display: block;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']):not(:host([data-render-mode="shadow"]) .slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-stacked']):not(:host([data-render-mode="shadow"]) .slds-is-editing) {
+        padding: 0 var(--sds-g-spacing-1, 0.25rem);
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element {
+        padding: 0;
+        margin-block-end: 0;
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-stacked']):not([class*="slds-size"]) {
+          width: 100%;
+          flex-basis: 100%;
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__label,:host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+        border-bottom: 0; /* Remove border when using legacy version of slds-form-element */
+        padding-inline-start: 0;
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__control {
+        width: 100%;
+        flex-basis: 100%;
+        clear: left;
+    }
+
+    :host([data-render-mode="shadow"][variant~='label-stacked']) .slds-form-element__icon {
+        float: none;
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    /* --------------------------------------- */
+    
+    /* FORM ELEMENT: INLINE */
+
+    :host([data-render-mode="shadow"][variant~='label-inline']) {
+        display: block;
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-inline']):not(:host([data-render-mode="shadow"]) .slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-inline']):not([class*="slds-size"]) {
+        width: 100%;
+        flex-basis: 100%;
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-inline']):not(:host([data-render-mode="shadow"]) .slds-is-editing) {
+        padding: var(--sds-g-spacing-1, 0.25rem);   
+    }
+  
+    :host([data-render-mode="shadow"][variant~='label-inline']).slds-is-edited {
+        padding-block-start: var(--sds-g-sizing-6, 1.25rem)
+    }
+
+    @media (min-width: 48em) {
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__label {
+          float: left;
+          max-width: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Removing icon width for when the help-text icon is present */
+          flex-basis: calc(33% - var(--sds-g-sizing-6, 1.25rem)); /* Some form element controls are set to display:flex */
+          flex-grow: 1; /* For IE and Safari which didn't auto expand to the available space */
+          margin-block-end: 0;
+          position: relative;
+          z-index: 1;
+        }
+  
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+          padding-inline-start: 33%;
+          clear: none; /* Reset clear: left when switching to horizontal form layout */
+        }
+  
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control .slds-form-element__control {
+          padding-inline-start: 0; /* Remove left padding on nested form controls, due to issues related to lightning-form components */
+        }
+      
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list__column .slds-form-element__label {
+            width: auto;
+            max-width: 100%;
+            -ms-flex-preferred-size: auto;
+            flex-basis: auto;
+            float: none;
+            position: relative;
+            padding-inline-start: 0;
+            margin-block-end: 0;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+            clear: none;
+        }
+    }
+}

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

@@ -899,6 +899,10 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       --slds-c-buttonicon-bare-color-border-disabled,
       transparent
     );
+    --slds-c-buttonicon-color-background-disabled: var(
+      --slds-c-buttonicon-bare-color-background-disabled,
+      transparent
+    );
   }
 
   /**
@@ -1128,7 +1132,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
       * outcome is the removal of this class and replacing the class with the SLDS
       * utility package solution.
       */
-  :host([data-render-mode="shadow"]) [part~='button-icon'] .slds-assistive-text {
+  :host([data-render-mode="shadow"]) .slds-assistive-text {
     position: absolute !important;
     margin: -1px !important;
     border: 0 !important;

package/src/lightning/helptext/helptext.css

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

package/src/lightning/helptext/helptext.html

@@ -7,6 +7,7 @@
             alternative-text={alternativeText}
             tooltip={content}
             onprivatebuttoniconregister={handleButtonIconRegister}
+            tabindex={tabIndex}
         ></lightning-button-icon>
     </div>
 </template>

package/src/lightning/helptext/helptext.js

@@ -28,6 +28,15 @@ export default class LightningHelptext extends LightningElement {
     @api
     content;
 
+    /**
+     * Reserved for internal use only.
+     * Should be set to -1 if button should not
+     * be focused during tab navigation and should
+     * be set to 0 if button should be focused.
+     * @type {number}
+     */
+    @api tabIndex;
+
     set iconName(value) {
         this.state.iconName = value;
     }