lightning-base-components 1.18.1-alpha → 1.18.3-alpha

package/src/lightning/utilsPrivate/browser.js

@@ -1,6 +1,8 @@
-export const isIE11 = isIE11Test(navigator);
-export const isChrome = isChromeTest(navigator);
-export const isSafari = isSafariTest(navigator);
+import { isCSR } from './ssr';
+
+export const isIE11 = isCSR && isIE11Test(navigator);
+export const isChrome = isCSR && isChromeTest(navigator);
+export const isSafari = isCSR && isSafariTest(navigator);
 
 // The following functions are for tests only
 export function isIE11Test(navigator) {

package/src/lightning/utilsPrivate/os.js

@@ -1,3 +1,5 @@
+import { isCSR } from './ssr';
+
 /**
  * Verify if user is using MAC OS or not
  * @returns {boolean} - true if Mac OS
@@ -30,7 +32,7 @@ export const isAndroidOSTest = ({ userAgent }) => {
     return /android/i.test(userAgent);
 };
 
-export const isMacOS = isMacOSTest(navigator);
-export const isWindowsOS = isWindowsOSTest(navigator);
-export const isiOS = isiOSTest(navigator);
-export const isAndroidOS = isAndroidOSTest(navigator);
+export const isMacOS = isCSR && isMacOSTest(navigator);
+export const isWindowsOS = isCSR && isWindowsOSTest(navigator);
+export const isiOS = isCSR && isiOSTest(navigator);
+export const isAndroidOS = isCSR && isAndroidOSTest(navigator);

package/src/lightning/utilsPrivate/ssr.js

@@ -0,0 +1,4 @@
+/**
+ * Determine if environment is CSR or SSR
+ */
+export const isCSR = typeof window !== 'undefined';

package/src/lightning/utilsPrivate/utilsPrivate.js

@@ -51,6 +51,8 @@ export {
     isHeadingLevelValid,
 } from './ariaLevelHeadingUtils.js';
 
+export { isCSR } from './ssr';
+
 /**
  * @param {HTMLElement} element Element to act on
  * @param {Object} values values and attributes to set, if the value is

package/src/lightning/verticalNavigation/verticalNavigation.css

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

package/src/lightning/verticalNavigation/verticalNavigation.js

@@ -1,4 +1,5 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { classSet } from 'lightning/utils';
 import {
     assert,
@@ -17,7 +18,7 @@ const ALLOWED_CHILDREN = [
  * A vertical list of links that either take the user to another page or parts of the page the user is in.
  * @slot default Placeholder for lightning-vertical-navigation-section and lightning-vertical-navigation-overflow.
  */
-export default class LightningVerticalNavigation extends LightningElement {
+export default class LightningVerticalNavigation extends LightningShadowBaseClass {
     @track _compact;
     @track _shaded;
     @track _selectedItem;

package/src/lightning/verticalNavigationSection/verticalNavigationSection.css

@@ -1,4 +1,5 @@
-/* @import './vertical-navigation-section.slds.css'; */
+@import 'lightning/sldsCommon';
+@import './vertical-navigation-section.slds.css';
 
 div[role="list"] {
     list-style: none;

package/src/lightning/verticalNavigationSection/verticalNavigationSection.js

@@ -1,7 +1,8 @@
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { guid, isHeadingLevelValid } from 'lightning/utilsPrivate';
 
-export default class LightningVerticalNavigationSection extends LightningElement {
+export default class LightningVerticalNavigationSection extends LightningShadowBaseClass {
     headingId = guid();
 
     @track _label;

package/src/lightning/accordion/__perf__DISABLED/accordion-perf-utils.js

@@ -1,76 +0,0 @@
-/**
- * Generates N Sections belonging to the ownerAccordionId.
- *
- * @param {Integer} n - The number of sections to generate
- * @param {String} ownerAccordionId - The owner accordion of these sections (the section name will be prefixed with it)
- * @return {Array} The generated sections.
- */
-export function generateSections(n, ownerAccordionId) {
-    const result = [];
-
-    for (let i = 0; i < n; i++) {
-        result.push({
-            name: `${ownerAccordionId}-section-${i}`,
-            label: `${ownerAccordionId}-label-for-section-${i}`,
-            content: `${ownerAccordionId}-content-${i} Content paragraph`,
-        });
-    }
-
-    return result;
-}
-
-/**
- * Gets an array of section names belonging to ownerAccordionId accordion.
- *
- * @param {String} ownerAccordionId - the owner accordion id.
- * @param {Integer} firstSectionId - Start getting names from $firstSectionId section.
- * @param {Integer} sectionIdIncrement - The gap between sections (sectionIdIncrement - 1)
- * @param {Integer} maxSectionId - The max sectionId that is allowed to be returned
- * @return {Array} The sections names satisfying the above constrains.
- */
-export function getSectionNames({
-    ownerAccordionId,
-    firstSectionId,
-    sectionIdIncrement,
-    maxSectionId,
-}) {
-    const result = [];
-
-    for (let i = firstSectionId; i < maxSectionId; i += sectionIdIncrement) {
-        result.push(`${ownerAccordionId}-section-${i}`);
-    }
-
-    return result;
-}
-
-/**
- * Generates N accordions data. Each one with the following:
- *      - activeSectionName: For accordion i, the open section is i. Ex: acc-2 has open the section 2 (acc-2-section-2)
- *      - sections: An array of sections containing nSections.
- *      - allowMultipleSectionsOpen: true or false according allowMultipleSectionsOpen.
- *
- * @param {Integer} numberOfAccordions - number of accordions to generate (0..N-1)
- * @param {Integer} numberOfSectionsPerAccordion - number of sections to generate for each accordion.
- * @param {Boolean} [allowMultipleSectionsOpen=false] - whether or not the accordions allow multiple sections open at one time.
- * @return {Array} - The generated accordions.
- */
-export function generateAccordions({
-    numberOfAccordions,
-    numberOfSectionsPerAccordion,
-    allowMultipleSectionsOpen = false,
-}) {
-    const results = [];
-
-    for (let i = 0; i < numberOfAccordions; i++) {
-        results.push({
-            activeSectionName: `acc-${i}-section-${i}`,
-            allowMultipleSectionsOpen,
-            sections: generateSections(
-                numberOfSectionsPerAccordion,
-                'acc-' + i
-            ),
-        });
-    }
-
-    return results;
-}

package/src/lightning/accordion/__perf__DISABLED/accordion10Multiple25SectionEach.perf.js

@@ -1,57 +0,0 @@
-import { measure, main } from '../../../perf';
-import { createElement } from 'lwc';
-import PerfAccordionContainer from './container/container';
-import { generateAccordions, getSectionNames } from './accordion-perf-utils';
-
-const measureName = 'accordion-10-multiple-25-sections-each';
-
-// eslint-disable-next-line no-undef
-measure(measureName, 10, benchmark, run, (tag, run) => {
-    const elements = [];
-    const accordions = generateAccordions({
-        numberOfAccordions: 10,
-        numberOfSectionsPerAccordion: 25,
-        allowMultipleSectionsOpen: true,
-    });
-
-    // we need to rewrite the open sections
-    for (let i = 0, n = accordions.length; i < n; i++) {
-        accordions[i].activeSectionName = getSectionNames({
-            ownerAccordionId: 'acc-' + i,
-            firstSectionId: 0,
-            sectionIdIncrement: 2,
-            maxSectionId: 25,
-        });
-    }
-
-    // lets store the new values for sections in the update
-    const openUpdates = [];
-
-    for (let i = 0, n = accordions.length; i < n; i++) {
-        openUpdates[i] = getSectionNames({
-            ownerAccordionId: 'acc-' + i,
-            firstSectionId: 1,
-            sectionIdIncrement: 2,
-            maxSectionId: 25,
-        });
-    }
-
-    run('create', (i) => {
-        const element = createElement(tag, { is: PerfAccordionContainer });
-        Object.assign(element, accordions[i]);
-
-        elements[i] = element;
-    });
-
-    run('append', (i) => {
-        main.appendChild(elements[i]);
-    });
-
-    run('update - open a section', (i) => {
-        elements[i].activeSectionName = openUpdates[i];
-    });
-
-    run('remove', (i) => {
-        main.removeChild(elements[i]);
-    });
-});

package/src/lightning/accordion/__perf__DISABLED/accordion10Simple25SectionEach.perf.js

@@ -1,37 +0,0 @@
-import { measure, main } from '../../../perf';
-import { createElement } from 'lwc';
-import PerfAccordionContainer from './container/container';
-import { generateAccordions } from './accordion-perf-utils';
-
-const measureName = 'accordion-10-single-25-sections-each';
-
-// eslint-disable-next-line no-undef
-measure(measureName, 10, benchmark, run, (tag, run) => {
-    const elements = [];
-    const accordions = generateAccordions({
-        numberOfAccordions: 10,
-        numberOfSectionsPerAccordion: 25,
-        allowMultipleSectionsOpen: false,
-    });
-
-    run('create', (i) => {
-        const element = createElement(tag, { is: PerfAccordionContainer });
-        Object.assign(element, accordions[i]);
-
-        elements[i] = element;
-    });
-
-    run('append', (i) => {
-        main.appendChild(elements[i]);
-    });
-
-    run('update - open a section', (i) => {
-        // section 20 is always closed given that in the accordion i the open section is i,
-        // and we only have 10 accordions with 25 sections each
-        elements[i].activeSectionName = 'acc-' + i + '-section-20';
-    });
-
-    run('remove', (i) => {
-        main.removeChild(elements[i]);
-    });
-});

package/src/lightning/accordion/__perf__DISABLED/accordionMultiple50Section.perf.js

@@ -1,45 +0,0 @@
-import { measure, main } from '../../../perf';
-import { createElement } from 'lwc';
-import PerfAccordionContainer from './container/container';
-import { generateSections, getSectionNames } from './accordion-perf-utils';
-
-const measureName = 'accordion-1-multipleSection-50-sections';
-
-// eslint-disable-next-line no-undef
-measure(measureName, 1, benchmark, run, (tag, run) => {
-    const elements = [];
-    const accordion = {
-        activeSectionName: getSectionNames({
-            ownerAccordionId: 'acc-1',
-            firstSectionId: 0,
-            sectionIdIncrement: 2,
-            maxSectionId: 50,
-        }),
-        allowMultipleSectionsOpen: true,
-        sections: generateSections(50, 'acc-1'),
-    };
-
-    run('create', (i) => {
-        const element = createElement(tag, { is: PerfAccordionContainer });
-        Object.assign(element, accordion);
-
-        elements[i] = element;
-    });
-
-    run('append', (i) => {
-        main.appendChild(elements[i]);
-    });
-
-    run('update - open/close a section', (i) => {
-        elements[i].activeSectionName = getSectionNames({
-            ownerAccordionId: 'acc-1',
-            firstSectionId: 1,
-            sectionIdIncrement: 2,
-            maxSectionId: 50,
-        });
-    });
-
-    run('remove', (i) => {
-        main.removeChild(elements[i]);
-    });
-});

package/src/lightning/accordion/__perf__DISABLED/accordionSimple50Section.perf.js

@@ -1,35 +0,0 @@
-import { measure, main } from '../../../perf';
-import { createElement } from 'lwc';
-import PerfAccordionContainer from './container/container';
-import { generateSections } from './accordion-perf-utils';
-
-const measureName = 'accordion-1-singleSection-50-sections';
-
-// eslint-disable-next-line no-undef
-measure(measureName, 1, benchmark, run, (tag, run) => {
-    const elements = [];
-    const accordion = {
-        activeSectionName: 'acc-1-section-10', // section 10 is open
-        allowMultipleSectionsOpen: false,
-        sections: generateSections(50, 'acc-1'),
-    };
-
-    run('create', (i) => {
-        const element = createElement(tag, { is: PerfAccordionContainer });
-        Object.assign(element, accordion);
-
-        elements[i] = element;
-    });
-
-    run('append', (i) => {
-        main.appendChild(elements[i]);
-    });
-
-    run('update - open a section', (i) => {
-        elements[i].activeSectionName = 'acc-1-section-30';
-    });
-
-    run('remove', (i) => {
-        main.removeChild(elements[i]);
-    });
-});

package/src/lightning/accordion/__perf__DISABLED/container/container.html

@@ -1,15 +0,0 @@
-<template>
-    <lightning-accordion
-        active-section-name={activeSectionName}
-        allow-multiple-sections-open={allowMultipleSectionsOpen}
-        >
-        <template for:each={sections} for:item="section">
-            <lightning-accordion-section
-                key={section.name}
-                name={section.name}
-                label={section.label}>
-                <p>{section.content}</p>
-            </lightning-accordion-section>
-        </template>
-    </lightning-accordion>
-</template>

package/src/lightning/accordion/__perf__DISABLED/container/container.js

@@ -1,7 +0,0 @@
-import { LightningElement, api } from 'lwc';
-
-export default class PerfAccordionContainer extends LightningElement {
-    @api activeSectionName;
-    @api sections = [];
-    @api allowMultipleSectionsOpen = false;
-}

package/src/lightning/iconUtils/isIframeInEdge.js

@@ -1,7 +0,0 @@
-// Taken from https://github.com/jonathantneal/svg4everybody/pull/139
-// Remove this iframe-in-edge check once the following is resolved https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8323875/
-const isEdgeUA = /\bEdge\/.(\d+)\b/.test(navigator.userAgent);
-const inIframe = window.top !== window.self;
-const isIframeInEdge = isEdgeUA && inIframe;
-
-export default isIframeInEdge;

package/src/lightning/iconUtils/supportsSvg.js

@@ -1,16 +0,0 @@
-import isIframeInEdge from './isIframeInEdge';
-
-// Taken from https://git.soma.salesforce.com/aura/lightning-global/blob/999dc35f948246181510df6e56f45ad4955032c2/src/main/components/lightning/SVGLibrary/stamper.js#L89-L98
-// Which looks like it was inspired by https://github.com/jonathantneal/svg4everybody/blob/377d27208fcad3671ed466e9511556cb9c8b5bd8/lib/svg4everybody.js#L92-L107
-// Modify at your own risk!
-const newerIEUA = /\bTrident\/[567]\b|\bMSIE (?:9|10)\.0\b/;
-const webkitUA = /\bAppleWebKit\/(\d+)\b/;
-const olderEdgeUA = /\bEdge\/12\.(\d+)\b/;
-const isIE =
-    newerIEUA.test(navigator.userAgent) ||
-    (navigator.userAgent.match(olderEdgeUA) || [])[1] < 10547 ||
-    (navigator.userAgent.match(webkitUA) || [])[1] < 537;
-
-const supportsSvg = !isIE && !isIframeInEdge;
-
-export default supportsSvg;