lightning-base-components 1.27.5-alpha → 1.28.4-alpha

package/src/lightning/focusUtils/focus.ts

@@ -1,368 +0,0 @@
-import { BUBBLE_PREFIX } from 'lightning/tooltipLibrary';
-
-const IGNORE_AUTOFOCUS = 'ignore-autofocus';
-/**
- *
- * Returns all tabbable elements within a containing element. Tabbable elements are:
- * a visible/non-disabled element that has a tabIndex of 0 and is not within a custom
- * element with tabindex attribute of "-1" on it.
- *
- * @param {Element} container The element to search for tabbable element.
- * @returns {Element[]} Tabbable elements.
- */
-export function findAllTabbableElements(container: Element): Element[] {
-    const result: Element[] = [];
-
-    traverseActiveTreeRecursively(container, (element: Node) => {
-        // Remove the try/catch once https://github.com/salesforce/lwc/issues/1421 is fixed
-        try {
-            if (
-                isTabbable({
-                    element: element as Element,
-                    rootContainer: container,
-                })
-            ) {
-                result.push(element as Element);
-            }
-        } catch (e) {
-            console.warn(e); // eslint-disable-line no-console
-        }
-    });
-    return result;
-}
-
-const FOCUSABLE_NODES = /^input$|^select$|^textarea$|^a$|^button$/;
-
-/**
- * Returns all focusable nodes within a containing element. Focusable nodes are
- * those which have a focus() method specified in the object definition spec:
- * https://www.w3.org/TR/DOM-Level-2-HTML/html.html
- *
- * Exception: button - Browsers today allow setting focus programmatically
- * on button elements + autofocus attribute present on HTMLButtonElement
- *
- * @param {Element} container The element to search for focusable nodes.
- * @returns {Element[]} Focusable elements.
- */
-export function findAllFocusableNodes(container: Element): Element[] {
-    const result: Element[] = [];
-    traverseActiveTreeRecursively(container, (element: Node) => {
-        if (FOCUSABLE_NODES.test((element as Element).tagName.toLowerCase())) {
-            result.push(element as Element);
-        }
-    });
-    return result;
-}
-
-/**
- * Finds the element that currently has focus, even when the element is part of a shadow root or iframe.
- *
- * @returns {Element} Element that has focus.
- */
-export function getElementWithFocus(): Element {
-    // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
-    let currentFocusedElement: Element | null = document.activeElement;
-    while (currentFocusedElement) {
-        if (currentFocusedElement.shadowRoot) {
-            const nextFocusedElement =
-                currentFocusedElement.shadowRoot!.activeElement;
-            if (nextFocusedElement) {
-                currentFocusedElement = nextFocusedElement;
-            } else {
-                return currentFocusedElement;
-            }
-        } else if (
-            (currentFocusedElement as HTMLIFrameElement).contentDocument
-        ) {
-            const nextFocusedElement = (
-                currentFocusedElement as HTMLIFrameElement
-            ).contentDocument!.activeElement;
-            if (nextFocusedElement) {
-                currentFocusedElement = nextFocusedElement;
-            } else {
-                return currentFocusedElement;
-            }
-        } else {
-            return currentFocusedElement;
-        }
-    }
-
-    return undefined;
-}
-
-/**
- * Return the focus to an element if it is still attached to the DOM.
- * @param {Element} element - element which will receive the focus.
- * @returns {boolean} - true if the element is focused.
- */
-export function returnFocusToElement(element: Element): boolean {
-    const isSavedElemInDOM = document.body.contains(element);
-    if (element) {
-        if (isSavedElemInDOM) {
-            (element as HTMLElement).focus();
-            return true;
-        }
-        const isElementInDOM = isElementInDocument(element);
-        if (isElementInDOM) {
-            (element as HTMLElement).focus();
-            return true;
-        }
-    }
-    return false;
-}
-
-/**
- * Return true if the given element is in document (rather it is in shadow or not)
- * @param {Element} element - element to be inspected
- * @returns {boolean} - true if the element is in document, otherwise false
- */
-function isElementInDocument(element: Element): boolean {
-    let currentElement: Node | null = element;
-    // traverse all the way up to the document, to make sure
-    // the element is inside of the document.
-    while (currentElement && currentElement.parentNode) {
-        if (currentElement.parentNode === document) {
-            return true;
-            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
-        } else if (currentElement.parentNode instanceof DocumentFragment) {
-            currentElement = (currentElement.parentNode as ShadowRoot).host;
-        } else {
-            currentElement = currentElement.parentNode;
-        }
-    }
-    return false;
-}
-
-/**
- * Recursively traverse an active tree and run callback on each non-inert node element.
- *
- * @param {Node} node The starting node to recursively traverse.
- * @param {Function} callback Function to call on each node element.
- */
-function traverseActiveTreeRecursively(
-    node: Node,
-    callback: (node: Node) => void
-): void {
-    if (!node) {
-        return;
-    }
-    // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
-    if (node.nodeType === Node.ELEMENT_NODE) {
-        // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
-        // inert is only supported by Chrome for now (behind a flag)
-        if ((node as Element).hasAttribute('inert')) {
-            return;
-        }
-        if (isIframe(node)) {
-            if (isIframeOfSameOrigin(node as HTMLIFrameElement)) {
-                // for a same-origin iframe, we don't want to include the
-                // iframe itself in the list, since we can see any of the
-                // frames focusable children. So, skip calling callback on
-                // the iframe node, and proceed to traverse it's children.
-                traverseActiveTreeRecursively(
-                    (node as HTMLIFrameElement).contentDocument!,
-                    callback
-                );
-            } else if (callback) {
-                // a non same-origin iframe is totally opaque, so include the
-                // iframe in the results, but do no try to traverse into the
-                // iframes children
-                callback(node);
-            }
-            return;
-        }
-        if (callback) {
-            callback(node);
-        }
-        // If the element has a shadow root, traverse that
-        if ((node as Element).shadowRoot) {
-            traverseActiveTreeRecursively(
-                (node as Element).shadowRoot!,
-                callback
-            );
-            return;
-        }
-        // if it's a slot element, get all assigned nodes and traverse them
-        if ((node as Element).localName === 'slot') {
-            const slottedNodes = (node as HTMLSlotElement).assignedNodes({
-                flatten: true,
-            });
-            for (let i = 0; i < slottedNodes.length; i++) {
-                traverseActiveTreeRecursively(slottedNodes[i], callback);
-            }
-            return;
-        }
-    }
-    let child: Node | null = node.firstChild;
-    while (child !== null) {
-        traverseActiveTreeRecursively(child, callback);
-        child = child.nextSibling;
-    }
-}
-
-// returns true if iframe is same origin, and therefore, can focus its internal elements
-function isIframe(node) {
-    // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
-    return node.tagName === 'IFRAME' || node instanceof HTMLIFrameElement;
-}
-
-function isIframeOfSameOrigin(iframe: HTMLIFrameElement): boolean {
-    // if we can access contentDocument (is not null) on the iframe, then it is of same origin
-    return !!iframe.contentDocument;
-}
-
-const ELEMENTS_WITH_DISABLED_ATTRIBUTE = [
-    'button',
-    'select',
-    'textarea',
-    'input',
-];
-
-// https://html.spec.whatwg.org/multipage/interaction.html#dom-tabindex
-const ELEMENTS_WITH_TABINDEX_ZERO_BY_DEFAULT = [
-    'a',
-    'select',
-    'textarea',
-    'input',
-    'button',
-    'iframe',
-    'object',
-    'area',
-    'frame',
-];
-
-function isTabbable({
-    element,
-    rootContainer,
-}: {
-    element: Element;
-    rootContainer: Element;
-}): boolean {
-    const elementLocalName = element.localName;
-
-    // @ts-expect-error .type is being used with a string
-    if (elementLocalName === 'input' && elementLocalName.type === 'hidden') {
-        return false;
-    }
-
-    const tabIndexAttribute = element.getAttribute('tabindex');
-    if (tabIndexAttribute === '-1') {
-        return false;
-    }
-
-    if (
-        (element as HTMLInputElement).disabled &&
-        ELEMENTS_WITH_DISABLED_ATTRIBUTE.includes(element.localName)
-    ) {
-        return false;
-    }
-
-    // Either the attribute was set directly to '0' or it's an element that has tabIndex zero by default
-    const hasTabIndexZero =
-        tabIndexAttribute === '0' ||
-        ((element as HTMLElement).tabIndex === 0 &&
-            ELEMENTS_WITH_TABINDEX_ZERO_BY_DEFAULT.includes(element.localName));
-
-    return (
-        hasTabIndexZero &&
-        isElementVisible(element) &&
-        isParentCustomElementTabbable({ element, rootContainer })
-    );
-}
-
-/**
- * Test if element has role='tooltip'
- * @param {Element} Element that has focus.
- * @returns {boolean} element has role='tooltip'
- */
-const elemHasRoleTooltip = (elem: Element): boolean => {
-    return elem.getAttribute('role') === 'tooltip';
-};
-
-/**
- * Test if the element has class='ignore-autofocus'
- * @param {Element} Element that has focus.
- * @returns {boolean} element has class='ignore-autofocus'
- */
-const elemHasIgnoreAutofocus = (elem: Element): boolean => {
-    return elem.classList.contains(IGNORE_AUTOFOCUS);
-};
-
-/**
- * Test if element has unique properties of <lightning-helptext>
- * @param {Element} Element that needs to be tested
- * @returns {boolean} element matches criteria of <lightning-helptext>
- */
-const elemIsHelpTextComponent = (elem: Element): boolean => {
-    // properties of <lightning-helptext>
-    const tagNameIsButton = elem.tagName.toLowerCase() === 'button';
-    const ariaDescValue = elem.getAttribute('aria-describedby');
-    // ie11 doesn't support .startsWith()
-    const ariaValueMatchesPrefix = ariaDescValue
-        ? String(ariaDescValue).indexOf(BUBBLE_PREFIX) === 0
-        : false;
-    return tagNameIsButton && ariaValueMatchesPrefix;
-};
-
-/**
- * Verify element doesn't have tooltip properties by running tooltip tests
- * Primary use in autofocus feature of LighningModal
- * @param {Element} Element to verify is not a tooltip
- * @returns {boolean} element is not a tooltip
- */
-const elemIsNotTooltip = (elem: Element): boolean => {
-    if (!elem) {
-        return false;
-    }
-    // evaluate whether element has properties of a tooltip
-    // if any tooltip test is true, the element is a tooltip
-    const elemIsTooltip = [
-        // array of tooltip tests
-        elemHasRoleTooltip(elem),
-        elemIsHelpTextComponent(elem),
-        elemHasIgnoreAutofocus(elem),
-    ].some((val) => val === true);
-    return !elemIsTooltip;
-};
-
-/**
- *
- * Returns tabbable elements, filtered to remove any tooltips
- * @param {Element[]} elemsArray Array of elements to filter tooltips from
- * @returns {Element[]} Filtered tabbable elements with no tooltips
- */
-export function filterTooltips(elemsArray: Element[]): Element[] {
-    // reference SLDS tooltip patterns && global focus in
-    // modalBase focusFirstElement() -> used to autofocus first element
-    // https://www.lightningdesignsystem.com/accessibility/patterns/tooltip/
-    return elemsArray && Array.isArray(elemsArray) && elemsArray.length > 0
-        ? elemsArray.filter(elemIsNotTooltip)
-        : [];
-}
-
-function isElementVisible(element: Element): boolean {
-    const { width, height } = element.getBoundingClientRect();
-    const nonZeroSize = width > 0 || height > 0;
-    // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
-    return nonZeroSize && getComputedStyle(element).visibility !== 'hidden';
-}
-
-function isParentCustomElementTabbable({
-    element,
-    rootContainer,
-}: {
-    element: Element;
-    rootContainer: Element;
-}): boolean {
-    const parentRoot = rootContainer.getRootNode();
-    const ownerDocument = element.ownerDocument;
-    let root = element.getRootNode();
-    while (root !== parentRoot && root !== ownerDocument) {
-        const host = (root as ShadowRoot).host;
-        if (host.getAttribute('tabindex') === '-1') {
-            return false;
-        }
-        root = host && host.getRootNode();
-    }
-    return true;
-}

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

@@ -1,6 +0,0 @@
-<?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/focusUtils/focusUtils.ts

@@ -1,7 +0,0 @@
-export {
-    findAllTabbableElements,
-    findAllFocusableNodes,
-    getElementWithFocus,
-    filterTooltips,
-    returnFocusToElement,
-} from './focus';

package/src/lightning/formattedAddress/__docs__/formattedAddress.md

@@ -1,114 +0,0 @@
----
-examples:
-    - name: basic
-      label: Formatted Address
-      description: Displays an address that's linked to Google Maps and an address in plain text.
-    - name: latitude
-      label: Formatted Address with Latitude/Longitude
-      description: Displays an address that includes latitude and longitude.
-    - name: customLocale
-      label: Formatted Address with Custom Locale
-      description: Displays an address in the format of a specific locale.
----
-
-A `lightning-formatted-address` component displays addresses in a format and field order
-that's determined by the user's Salesforce locale.
-
-Specify a valid address using attributes for `street`, `city`, `country`, `province`, and
-`postal-code`.
-
-This example displays an address.
-
-```html
-<template>
-    <lightning-formatted-address
-        street="1 Market St."
-        city="San Francisco"
-        country="US"
-        province="CA"
-        postal-code="94105"
-    >
-    </lightning-formatted-address>
-</template>
-```
-
-The output looks like this in the en-US locale.
-
-1 Market St.\
-San Francisco, CA 94105\
-US
-
-By default, the address is displayed as a link that
-opens the given location in Google Maps in a new tab. The link
-follows the format `https://www.google.com/maps/?q=your+address`.
-In the example, the link would be
-`https://www.google.com/maps/?q=121%20Spear%20St.%0ASan%20Francisco,%20CA%2094105%0AUS`.
-
-Specify the `disabled` attribute to display the address in plain text
-without a link.
-
-#### Specifying Coordinates for Mapping
-
-You can provide the `latitude` and `longitude` attributes in addition to
-the address fields. This enables faster map rendering by avoiding the
-geocode processing that's required for street addresses on Google Maps.
-The formatted address displays the street address fields,
-but the link URL uses the latitude and longitude for Google Maps.
-
-This example displays an address and uses latitude and longitude for mapping.
-
-```html
-<template>
-    <lightning-formatted-address
-        street="1 Market St."
-        city="San Francisco"
-        country="US"
-        province="CA"
-        postal-code="94105"
-        latitude="37.792179"
-        longitude="-122.392735"
-    >
-    </lightning-formatted-address>
-</template>
-```
-
-The link URL with latitude and longitude follows the format
-`https://www.google.com/maps/?q=37.792179,-122.392735`.
-
-#### Showing a Static Map
-
-Use the `show-static-map` attribute to display a map with your address.
-The address and the static map are both linked to Google Maps.
-
-```html
-<template>
-    <lightning-formatted-address
-        street="1 Market St."
-        city="San Francisco"
-        country="US"
-        province="CA"
-        postal-code="94105"
-        show-static-map
-    >
-    </lightning-formatted-address>
-</template>
-```
-
-#### Address Line Truncation
-
-By default, the [slds-truncate](https://www.lightningdesignsystem.com/utilities/truncation/) class is assigned to each line of the address.
-To remove address line truncation, set `variant="plain"`. This will render each address line without truncating it.
-
-```html
-<template>
-    <lightning-formatted-address
-        street="45 Ffordd Penmynydd"
-        city="Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch"
-        country="United Kingdom"
-        province="Wales"
-        postal-code="LL61 5UJ"
-        variant="plain"
-        disabled
-    ></lightning-formatted-address>
-</template>
-```

package/src/lightning/formattedAddress/__examples__/basic/basic.html

@@ -1,46 +0,0 @@
-<template>
-    <div class="slds-m-vertical_medium">
-        <h1 class="slds-text-heading_small">Formatted Address</h1>
-        <p class="slds-text-body_regular">This component formats an address and automatically links it to Google Maps.</p>
-    </div>
-
-    <lightning-formatted-address
-        street="121 Spear St."
-        city="San Francisco"
-        country="US"
-        province="CA"
-        postal-code="94105"
-    ></lightning-formatted-address>
-
-    <div class="slds-m-vertical_medium">
-        <h1 class="slds-text-heading_small">Formatted Address in Plain Text</h1>
-        <p class="slds-text-body_regular">This component formats an address but doesn't link to Google Maps.</p>
-    </div>
-
-    <lightning-formatted-address
-        street="121 Spear St."
-        city="San Francisco"
-        country="US"
-        province="CA"
-        postal-code="94105"
-        disabled
-    ></lightning-formatted-address>
-
-    <div class="slds-m-vertical_medium">
-        <h1 class="slds-text-heading_small">Formatted Address where variant='plain'</h1>
-        <p class="slds-text-body_regular">This component does not have the slds-truncate class attached to each address line, so lines will wrap instead of truncating.</p>
-    </div>
-
-    <div style="width: 100px; word-break: break-all;">
-        <lightning-formatted-address
-            street="45 Ffordd Penmynydd"
-            city="St Mary's Church in the Hollow of the White Hazel near a Rapid Whirlpool and the Church of St. Tysilio near the Red Cave"
-            country="United Kingdom"
-            province="Wales"
-            postal-code="LL61 5UJ"
-            variant="plain"
-            disabled
-        ></lightning-formatted-address>
-    </div>
-    
-</template>

package/src/lightning/formattedAddress/__examples__/customLocale/customLocale.html

@@ -1,22 +0,0 @@
-<template>
-    <h1 class="slds-text-heading_small">Address in Spanish format</h1>
-
-    <lightning-formatted-address
-        street="Avenida Concha Espina, Nº 1"
-        city="Madrid"
-        postal-code="28036"
-        country="España"
-        locale="es-ES"
-    ></lightning-formatted-address>
-
-    <h1 class="slds-text-heading_small">Address in Japanese format</h1>
-
-    <lightning-formatted-address
-        street="下連雀1丁目1−83"
-        city="三鷹市"
-        country="日本"
-        province="東京都"
-        postal-code="181–0013"
-        locale="ja-JP"
-    ></lightning-formatted-address>
-</template>

package/src/lightning/formattedAddress/__examples__/latitude/latitude.html

@@ -1,18 +0,0 @@
-<template>
-    <div class="slds-m-vertical_medium">
-        <h1 class="slds-text-heading_small">Formatted Address with Coordinates</h1>
-        <p class="slds-text-body_regular">This component formats an address, and automatically links it to Google Maps
-            using latitude and longitude coordinates for faster map rendering.
-        </p>
-    </div>
-
-    <lightning-formatted-address
-        street="121 Spear St."
-        city="San Francisco"
-        country="US"
-        province="CA"
-        postal-code="94105"
-        latitude="37.792179"
-        longitude="-122.392735"
-    ></lightning-formatted-address>
-</template>

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

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
-    <minApiVersion>42.0</minApiVersion>
-    <isExposed>true</isExposed>
-    <support>GA</support>
-    <capabilities>
-        <capability>lightning__ServerRenderableWithHydration</capability>
-    </capabilities>
-</LightningComponentBundle>