lightning-base-components 1.21.2-alpha → 1.21.4-alpha

package/src/lightning/verticalNavigationOverflow/verticalNavigationOverflow.html

@@ -1,10 +1,12 @@
 <template>
     <div class="slds-nav-vertical__overflow">
         <button
+            part="button"
             id="vertical-navigation-button"
             onclick={toggleOverflow}
             class="slds-button slds-button_reset slds-nav-vertical__action slds-nav-vertical__action_overflow" aria-controls="vertical-navigation-heading" aria-expanded={_isExpanded}  >
             <lightning-primitive-icon
+                part="start"
                 icon-name={computedIconName}
                 svg-class="slds-button__icon slds-button__icon_left"
                 variant="bare">

package/src/lightning/verticalNavigationOverflow/verticalNavigationOverflow.js

@@ -1,13 +1,15 @@
-import { LightningElement, track } from 'lwc';
+import { track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import showMoreLabel from '@salesforce/label/LightningVerticalNavigation.showMore';
 import showLessLabel from '@salesforce/label/LightningVerticalNavigation.showLess';
+import { isCSR } from 'lightning/utilsPrivate';
 
 const SLDS_SHOW = 'slds-show';
 const SLDS_HIDE = 'slds-hide';
 const COLLAPSED_ICON = 'utility:chevronright';
 const EXPANDED_ICON = 'utility:chevrondown';
 
-export default class LightningVerticalNavigationSection extends LightningElement {
+export default class LightningVerticalNavigationSection extends LightningShadowBaseClass {
     @track _isExpanded = false;
 
     get computedActionText() {
@@ -35,17 +37,20 @@ export default class LightningVerticalNavigationSection extends LightningElement
     }
 
     connectedCallback() {
-        this.dispatchEvent(
-            new CustomEvent('privateoverflowregister', {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    callbacks: {
-                        updateAssistiveText:
-                            this.updateAssistiveText.bind(this),
+        super.connectedCallback();
+        if (isCSR) {
+            this.dispatchEvent(
+                new CustomEvent('privateoverflowregister', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        callbacks: {
+                            updateAssistiveText:
+                                this.updateAssistiveText.bind(this),
+                        },
                     },
-                },
-            })
-        );
+                })
+            );
+        }
     }
 }

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

@@ -2,4 +2,7 @@
 <LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
     <isExposed>true</isExposed>
     <minApiVersion>41.0</minApiVersion>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/verticalNavigationOverflow/verticalNavigationOverflow.lbc.native.css

@@ -0,0 +1,5 @@
+@import 'lightning/sldsCommon';
+@import 'lightning/sldsUtilsVisibility';
+@import './vertical-navigation-section.slds.css';
+@import './button.slds.css';
+@import './vertical-navigation-item.slds.css';

package/src/lightning/verticalNavigationSection/vertical-navigation-section.slds.css

@@ -1,19 +1,17 @@
 
-@supports (--styling-hooks: '') {
-    :host([data-render-mode="shadow"]) .slds-nav-vertical__title {
-        padding-block-start: var(--slds-g-spacing-2);
-        padding-block-end: var(--slds-g-spacing-2);
-        padding-inline-start: var(--slds-g-spacing-5);
-        padding-inline-end: var(--slds-g-spacing-4);
-        font-size: var(--slds-g-font-size-base);
-        font-weight: var(--slds-g-font-weight-7);
-    }
+:host([data-render-mode="shadow"]) .slds-nav-vertical__title {
+    padding-block-start: var(--slds-c-verticalnavigationsection-spacing-blockstart, var(--slds-g-spacing-2));
+    padding-block-end: var(--slds-c-verticalnavigationsection-spacing-blockend, var(--slds-g-spacing-2));
+    padding-inline-start: var(--slds-c-verticalnavigationsection-spacing-inlinestart, var(--slds-g-spacing-5));
+    padding-inline-end: var(--slds-g-spacing-4);
+    font-size: var(--slds-g-spacing-4);
+    font-weight: var(--slds-g-font-weight-7);
+}
 
-    :host([data-render-mode="shadow"]) .slds-nav-vertical__section:not(:first-of-type) {
-        margin-block-start: var(--slds-g-spacing-2);
-    }
+:host([data-render-mode="shadow"]) .slds-nav-vertical__section:not(:first-of-type) {
+    margin-block-start: var(--slds-g-spacing-2);
+}
 
-    :host([data-render-mode="shadow"]) .slds-nav-vertical__title:not(:first-of-type) {
-        margin-block-start: var(--slds-g-spacing-2);
-    }
+:host([data-render-mode="shadow"]) .slds-nav-vertical__title:not(:first-of-type) {
+    margin-block-start: var(--slds-g-spacing-2);
 }

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

@@ -2,4 +2,7 @@
 <LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
     <isExposed>true</isExposed>
     <minApiVersion>41.0</minApiVersion>
+    <capabilities>
+        <capability>lightning__ServerRenderableWithHydration</capability>
+    </capabilities>
 </LightningComponentBundle>

package/src/lightning/datatable/__examples__/customDatatableWrapper/customDatatableWrapper.js

@@ -1,158 +0,0 @@
-import { LightningElement, track } from 'lwc';
-
-// Add <datatable-custom-datatable-wrapper></datatable-custom-datatable-wrapper> to the lwr-playground to see the table
-
-const columns = [
-    {
-        label: 'Reorder',
-        type: 'orderingButtons',
-        fixedWidth: 90,
-        fieldName: 'id',
-        typeAttributes: {
-            isFirstRow: { fieldName: 'isFirstRow' },
-            isLastRow: { fieldName: 'isLastRow' },
-        },
-    },
-    {
-        label: 'Account Name',
-        type: 'customName',
-        typeAttributes: {
-            accountName: { fieldName: 'name' },
-        },
-    },
-    {
-        label: 'Website',
-        fieldName: 'website',
-        type: 'customLink',
-        typeAttributes: {
-            label: { fieldName: 'name' },
-            tooltip: { fieldName: 'name' },
-        },
-        hideDefaultActions: true,
-        actions: [
-            { label: 'Action 1', name: 'action1' },
-            { label: 'Action 2', name: 'action2' },
-        ],
-    },
-    {
-        label: 'Amount',
-        type: 'customNumber',
-        fieldName: 'amount',
-        editable: true,
-        typeAttributes: {
-            min: 0,
-        },
-    },
-    { label: 'Icon', type: 'iconPill' },
-    {
-        label: '',
-        type: 'deleteRowButton',
-        fieldName: 'id',
-        fixedWidth: 70,
-        typeAttributes: {
-            attrA: { fieldName: 'attrA' },
-            attrB: { fieldName: 'attrB' },
-        },
-    },
-];
-
-const exampleData = [
-    {
-        id: 1,
-        name: 'Name 1',
-        website: 'https://www.google.com',
-        amount: 200.0,
-        isFirstRow: true,
-        isLastRow: false,
-    },
-    {
-        id: 2,
-        name: 'Name 2',
-        website: 'https://www.salesforce.com',
-        amount: 500000.0,
-        isFirstRow: false,
-        isLastRow: false,
-    },
-    {
-        id: 3,
-        name: 'Name 3',
-        website: 'https://www.quora.com',
-        amount: 600.0,
-        isFirstRow: false,
-        isLastRow: true,
-    },
-];
-
-export default class CustomDatatableWrapper extends LightningElement {
-    @track data = exampleData;
-    @track columns = columns;
-
-    moveRowUp(event) {
-        const { rowId } = event.detail;
-        const index = findRowIndex(this.data, rowId);
-        if (index > 0) {
-            const row = this.data[index];
-            const previous = this.data[index - 1];
-            this.data = this.data
-                .slice(0, index - 1)
-                .concat([row, previous])
-                .concat(this.data.slice(index + 1));
-            if (index - 1 === 0) {
-                this.data[0].isFirstRow = true;
-                this.data[1].isFirstRow = false;
-            } else if (index === this.data.length - 1) {
-                this.data[index].isLastRow = true;
-                this.data[index - 1].isLastRow = false;
-            }
-        }
-    }
-
-    moveRowDown(event) {
-        const { rowId } = event.detail;
-        const index = findRowIndex(this.data, rowId);
-        const length = this.data.length;
-        if (index < length - 1) {
-            const row = this.data[index];
-            const next = this.data[index + 1];
-            this.data = this.data
-                .slice(0, index)
-                .concat([next, row])
-                .concat(this.data.slice(index + 2));
-            if (index === 0) {
-                this.data[0].isFirstRow = true;
-                this.data[1].isFirstRow = false;
-            } else if (index === this.data.length - 2) {
-                this.data[index].isLastRow = false;
-                this.data[index + 1].isLastRow = true;
-            }
-        }
-    }
-
-    deleteRow(event) {
-        const { rowId } = event.detail;
-        const index = findRowIndex(this.data, rowId);
-        const length = this.data.length;
-        if (index >= 0) {
-            this.data = this.data
-                .slice(0, index)
-                .concat(this.data.slice(index + 1));
-            if (index === 0) {
-                this.data[0].isFirstRow = true;
-            } else if (index === length - 1) {
-                this.data[length - 2].isLastRow = true;
-            }
-        }
-    }
-}
-
-function findRowIndex(data, rowId) {
-    let index = -1;
-    data.some((row, i) => {
-        if (row.id === rowId) {
-            index = i;
-            return true;
-        }
-        return false;
-    });
-    return index;
-}

package/src/lightning/datatable/__examples__/customDatatypeDeleteRowBtn/customDatatypeDeleteRowBtn.html

@@ -1,6 +0,0 @@
-<template>
-    <div style="text-align: center;">
-        <lightning-button-icon icon-name="utility:delete" onclick={fireDeleteRow}>
-        </lightning-button-icon>
-    </div>
-</template>

package/src/lightning/datatable/__examples__/customDatatypeLink/customDatatypeLink.html

@@ -1,9 +0,0 @@
-<template>
-    <div>
-        <p><lightning-formatted-url value={url} tooltip="Omit leading slash" label={label} target="_blank"></lightning-formatted-url></p>
-        <p><lightning-formatted-url value={url} tooltip="Use full domain name" label={label}
-                target="_blank"></lightning-formatted-url></p>
-        <p><lightning-formatted-url value={url} tooltip="Use https://domain-name"
-                label={label} target="_blank"></lightning-formatted-url></p>
-    </div>
-</template>

package/src/lightning/datatable/__examples__/customDatatypeRowOrderingBtn/customDatatypeRowOrderingBtn.js

@@ -1,40 +0,0 @@
-import { LightningElement, api } from 'lwc';
-import mix from 'lightning/mixinBuilder';
-import { baseNavigation } from 'lightning/datatableKeyboardMixins';
-import template from './customDatatypeRowOrderingBtn.html';
-
-export default class CustomDatatypeRowOrderingBtn extends mix(
-    LightningElement
-).with(baseNavigation) {
-    @api rowId;
-    @api isFirstRow;
-    @api isLastRow;
-
-    render() {
-        return template;
-    }
-
-    fireMoveRowUp() {
-        const event = new CustomEvent('privatemoverowup', {
-            composed: true,
-            bubbles: true,
-            cancelable: true,
-            detail: {
-                rowId: this.rowId,
-            },
-        });
-        this.dispatchEvent(event);
-    }
-
-    fireMoveRowDown() {
-        const event = new CustomEvent('privatemoverowdown', {
-            composed: true,
-            bubbles: true,
-            cancelable: true,
-            detail: {
-                rowId: this.rowId,
-            },
-        });
-        this.dispatchEvent(event);
-    }
-}

package/src/lightning/datatable/__examples__/customDatatypeTable/customNumber.html

@@ -1,3 +0,0 @@
-<template>
-    <datatable-custom-datatype-number value={value}></datatable-custom-datatype-number>
-</template>

package/src/lightning/datatable/inlineEditShared.js

@@ -1,26 +0,0 @@
-/**
- * Retrieves the dirty/unsaved value of a cell that resulted from an inline
- * edit change. If no change was made on the cell, this function
- * returns `undefined`.
- *
- * @param {Object} state - datatable's state object
- * @param {String} rowKeyValue - computed id for the row
- * @param {String} colKeyValue - computed id for the column
- * @returns {String} The dirty/unsaved value of the cell.
- *                   If no change was made, this returns `undefined`
- */
-export function getDirtyValueFromCell(state, rowKeyValue, colKeyValue) {
-    const dirtyValues = state.inlineEdit.dirtyValues;
-
-    if (
-        dirtyValues &&
-        // eslint-disable-next-line no-prototype-builtins
-        dirtyValues.hasOwnProperty(rowKeyValue) &&
-        // eslint-disable-next-line no-prototype-builtins
-        dirtyValues[rowKeyValue].hasOwnProperty(colKeyValue)
-    ) {
-        return dirtyValues[rowKeyValue][colKeyValue];
-    }
-
-    return undefined;
-}

package/src/lightning/datatable/resizeSensor.js

@@ -1,244 +0,0 @@
-/**
- * IMPORTANT: This ResizeSensor is only used in the event that the standard ResizeObserver
- * is NOT available on the browser.
- *
- * Currently only IE11 does not support the ResizeObserver. We should be able to
- * remove this once we fully drop support of IE11.
- */
-
-/**
- * Based on Marc J. Schmidt library: https://github.com/marcj/css-element-queries/blob/master
- */
-
-class EventQueue {
-    q = [];
-
-    add(ev) {
-        this.q.push(ev);
-    }
-
-    call(sizeInfo) {
-        for (let i = 0, j = this.q.length; i < j; i++) {
-            this.q[i].call(this, sizeInfo);
-        }
-    }
-
-    remove(ev) {
-        const newQueue = [];
-        for (let i = 0, j = this.q.length; i < j; i++) {
-            if (this.q[i] !== ev) {
-                newQueue.push(this.q[i]);
-            }
-        }
-        this.q = newQueue;
-    }
-
-    length() {
-        return this.q.length;
-    }
-}
-
-/**
- * Get element size
- *
- * @param {HTMLElement} element Element to return the size.
- * @returns {Object} {width, height}
- */
-function getElementSize(element) {
-    const rect = element.getBoundingClientRect();
-    return {
-        width: Math.round(rect.width),
-        height: Math.round(rect.height),
-    };
-}
-
-function createResizeSensor() {
-    const resizeSensor = document.createElement('div');
-    resizeSensor.dir = 'ltr';
-    resizeSensor.className = 'resize-sensor';
-    const style =
-        'position: absolute; left: -10px; top: -10px; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;';
-    const styleChild = 'position: absolute; left: 0; top: 0; transition: 0s;';
-
-    resizeSensor.style.cssText = style;
-    // eslint-disable-next-line @lwc/lwc/no-inner-html
-    resizeSensor.innerHTML =
-        `<div class="resize-sensor-expand" style="${style}">` +
-        `<div style="${styleChild}"></div>` +
-        `</div>` +
-        `<div class="resize-sensor-shrink" style="${style}">` +
-        `<div style="${styleChild} width: 200%; height: 200%"></div>` +
-        `</div>`;
-
-    return resizeSensor;
-}
-
-/**
- * Attaches the resize event to an element
- *
- * @param {HTMLElement} element Element to listen resize
- * @param {Function} resizeListener Resize event listener
- */
-function attachResizeEvent(element, resizeListener) {
-    if (!element) {
-        return;
-    }
-    if (element.resizedAttached) {
-        element.resizedAttached.add(resizeListener);
-        return;
-    }
-
-    element.resizedAttached = new EventQueue();
-    element.resizedAttached.add(resizeListener);
-
-    const resizeSensor = createResizeSensor();
-    element.resizeSensor = resizeSensor;
-    element.appendChild(resizeSensor);
-
-    const position = (
-        window.getComputedStyle(element) || element.style
-    ).getPropertyValue('position');
-
-    if (
-        position !== 'absolute' &&
-        position !== 'relative' &&
-        position !== 'fixed'
-    ) {
-        element.style.position = 'relative';
-    }
-
-    const expand = resizeSensor.childNodes[0];
-    const expandChild = expand.childNodes[0];
-    const shrink = resizeSensor.childNodes[1];
-
-    let dirty, rafId;
-    let size = getElementSize(element);
-    let lastWidth = size.width;
-    let lastHeight = size.height;
-    let initialHiddenCheck = true,
-        resetRafId;
-
-    const resetExpandShrink = function () {
-        expandChild.style.width = '100000px';
-        expandChild.style.height = '100000px';
-
-        expand.scrollLeft = 100000;
-        expand.scrollTop = 100000;
-
-        shrink.scrollLeft = 100000;
-        shrink.scrollTop = 100000;
-    };
-
-    const reset = function () {
-        // Check if element is hidden
-        if (initialHiddenCheck) {
-            if (!expand.scrollTop && !expand.scrollLeft) {
-                // reset
-                resetExpandShrink();
-
-                // Check in next frame
-                if (!resetRafId) {
-                    // eslint-disable-next-line @lwc/lwc/no-async-operation
-                    resetRafId = requestAnimationFrame(() => {
-                        resetRafId = 0;
-                        reset();
-                    });
-                }
-
-                return;
-            }
-
-            initialHiddenCheck = false;
-        }
-
-        resetExpandShrink();
-    };
-    resizeSensor.resetSensor = reset;
-
-    const onResized = function () {
-        rafId = 0;
-
-        if (!dirty) {
-            return;
-        }
-
-        lastWidth = size.width;
-        lastHeight = size.height;
-
-        if (element.resizedAttached) {
-            element.resizedAttached.call(size);
-        }
-    };
-
-    const onScroll = function () {
-        size = getElementSize(element);
-        dirty = size.width !== lastWidth || size.height !== lastHeight;
-
-        if (dirty && !rafId) {
-            // eslint-disable-next-line @lwc/lwc/no-async-operation
-            rafId = requestAnimationFrame(onResized);
-        }
-
-        reset();
-    };
-
-    const addEvent = function (el, name, cb) {
-        el.addEventListener(name, cb);
-    };
-
-    addEvent(expand, 'scroll', onScroll);
-    addEvent(shrink, 'scroll', onScroll);
-
-    // Fix for custom Elements
-    // eslint-disable-next-line @lwc/lwc/no-async-operation
-    requestAnimationFrame(reset);
-}
-
-/**
- * Removes a resize event from an element.
- *
- * @param {HTMLElement} element Element to remove resize listener from
- * @param {Event} event The event to remove
- */
-function detach(elem, ev) {
-    if (!elem) {
-        return;
-    }
-    if (elem.resizedAttached && typeof ev === 'function') {
-        elem.resizedAttached.remove(ev);
-        if (elem.resizedAttached.length()) {
-            return;
-        }
-    }
-    if (elem.resizeSensor) {
-        if (elem.contains(elem.resizeSensor)) {
-            elem.removeChild(elem.resizeSensor);
-        }
-        delete elem.resizeSensor;
-        delete elem.resizedAttached;
-    }
-}
-
-export class ResizeSensor {
-    constructor(element, resizeListener) {
-        this.targetElement = element;
-        this.resizeListener = resizeListener;
-
-        attachResizeEvent(this.targetElement, this.resizeListener);
-    }
-
-    detach() {
-        detach(this.targetElement, this.resizeListener);
-    }
-
-    // Reattach resize event with existing target element and listener
-    reattach(targetElement) {
-        this.targetElement = targetElement;
-
-        attachResizeEvent(this.targetElement, this.resizeListener);
-    }
-
-    reset() {
-        this.targetElement.resizeSensor.resetSensor();
-    }
-}

package/src/lightning/formattedRichText/linkify.js

@@ -1,43 +0,0 @@
-import {
-    urlRegexString,
-    emailRegexString,
-    tagRegexString,
-    createHttpHref,
-    createEmailHref,
-} from 'lightning/utilsPrivate';
-
-const linkRegex = new RegExp(
-    `${tagRegexString}|${emailRegexString}|${urlRegexString}`,
-    'gi'
-);
-
-const createHttpLink = function (match) {
-    const href = createHttpHref(match);
-    return `<a href="${href}" target="_blank" rel="noopener">${match}</a>`;
-};
-
-const createEmailLink = function (match) {
-    const href = createEmailHref(match);
-    return `<a href="${href}">${match}</a>`;
-};
-
-export const linkify = function (text) {
-    if (typeof text !== 'string') {
-        return '';
-    }
-    return text.replace(linkRegex, (match, tagMatch, emailMatch, hrefMatch) => {
-        if (tagMatch) {
-            return tagMatch;
-        } else if (hrefMatch) {
-            const endsWithQuote = hrefMatch.endsWith('&quot');
-            let href = hrefMatch;
-            if (endsWithQuote) {
-                href = hrefMatch.slice(0, hrefMatch.lastIndexOf('&quot'));
-            }
-            return createHttpLink(href) + (endsWithQuote ? '&quot' : '');
-        } else if (emailMatch) {
-            return createEmailLink(emailMatch);
-        }
-        return match;
-    });
-};

package/src/lightning/utilsPrivate/smartSetAttribute.js

@@ -1,19 +0,0 @@
-/**
- * Set an attribute on an element, if it's a normal element
- * it will use setAttribute, if it's an LWC component
- * it will use the public property
- *
- * @param {HTMLElement} element The element to act on
- * @param {String} attribute the attribute to set
- * @param {Any} value the value to set
- */
-export function smartSetAttribute(element, attribute, value) {
-    if (element.tagName.match(/^LIGHTNING/i)) {
-        attribute = attribute.replace(/-\w/g, (m) => m[1].toUpperCase());
-        element[attribute] = value ? value : null;
-    } else if (value) {
-        element.setAttribute(attribute, value);
-    } else {
-        element.removeAttribute(attribute);
-    }
-}