lightning-base-components 1.18.1-alpha → 1.18.2-alpha

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

@@ -0,0 +1,281 @@
+
+/* 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: '') {
+    /* TODO: Swap with utility classes */
+    :host([data-render-mode="shadow"]) fieldset {
+      border: 0;
+      margin: 0;
+      padding: 0;
+    }
+
+    /* 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__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;
+    }
+
+    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+    /* :host([variant~='label-stacked']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2);
+    }
+
+    :host([variant~='label-stacked']):not(.slds-is-editing) {
+        padding: 0 var(--sds-g-spacing-1);
+    } */
+
+    /* :host([variant~='label-stacked']):not([class*="slds-size"]) {
+          width: 100%;
+          flex-basis: 100%;
+    } */
+
+    :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']) .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;
+    }
+
+    /*
+    we have to combine with slds class here to avoid duplication
+    of this rule in child elements who import this stylesheet
+    in lighting-input this slds class is synonymous with the variant
+    */
+
+    :host([data-render-mode="shadow"][variant~='label-inline'].slds-form-element_horizontal) {
+        padding: var(--sds-g-spacing-1, 0.25rem);
+        margin-block-end: var(--sds-g-spacing-2, 0.5rem);
+    }
+
+    /* TODO: Using `:not` is currently not working, and it could break the build because of issues with the dist script */
+
+    /* :host([variant~='label-inline']):not(.slds-form-element_readonly) {
+        margin-block-end: var(--sds-g-spacing-2);
+    }
+
+    :host([variant~='label-inline']):not([class*="slds-size"]) {
+        width: 100%;
+        flex-basis: 100%;
+    }
+
+    :host([variant~='label-inline']:not(.slds-is-editing)) {
+        padding: var(--sds-g-spacing-1);
+    } */
+
+    :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']) lightning-helptext {
+          float: left;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-form-element__control {
+          margin-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-form-element__help {
+          margin-inline-start: 33%;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) .slds-dueling-list {
+            clear: none;
+        }
+    }
+
+    /* --------------------------------------- */
+
+    /* FORM ELEMENT: COMPOUND */
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row {
+      display: flex;
+      margin-bottom: var(--sds-g-spacing-1, 0.25rem);
+      margin-left: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+      margin-right: calc(var(--sds-g-spacing-1, 0.25rem) * -1);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element__row .slds-form-element__label {
+      padding-top: 0;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_compound .slds-form-element {
+      padding-left: var(--sds-g-spacing-1, 0.25rem);
+      padding-right: var(--sds-g-spacing-1, 0.25rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-form-element_address .slds-form-element__row {
+      align-items: flex-end;
+    }
+}

package/src/lightning/timepicker/timepicker.css

@@ -0,0 +1,3 @@
+@import 'lightning/sldsCommon';
+@import './timepicker.slds.css';
+@import './form-element.slds.css';

package/src/lightning/timepicker/timepicker.html

@@ -10,6 +10,7 @@
     </template>
     <div class="slds-form-element__control">
         <lightning-base-combobox
+            part="input-container"
             onready={handleReady}
             autocomplete={autocomplete}
             dropdown-height="small"
@@ -33,8 +34,11 @@
             onblur={handleBlur}
             onselect={handleTimeSelect}
             data-aria-invalid={computedAriaInvalid}
+            root-aria-node={rootAriaNode}
+            input-described-by-elements={ariaDescribedByElements}
+            aria-error-message-elements={ariaErrorMessageElements}
         >
         </lightning-base-combobox>
     </div>
-        <div id="error-message" data-error-message class={computedClass} aria-live="assertive">{_errorMessage}</div>
+    <div id="error-message" data-error-message class={computedClass} aria-live="assertive">{_errorMessage}</div>
 </template>

package/src/lightning/timepicker/timepicker.js

@@ -1,5 +1,4 @@
 /* eslint-disable @lwc/lwc/no-api-reassignments */
-
 import labelInvalidDate from '@salesforce/label/LightningDateTimePicker.invalidDate';
 import labelRangeOverflow from '@salesforce/label/LightningDateTimePicker.rangeOverflow';
 import labelRangeUnderflow from '@salesforce/label/LightningDateTimePicker.rangeUnderflow';
@@ -22,6 +21,7 @@ import {
     synchronizeAttrs,
     normalizeString,
     computeAriaInvalid,
+    reflectAttribute,
 } from 'lightning/utilsPrivate';
 import { normalizeVariant, VARIANT } from 'lightning/inputUtils';
 
@@ -57,6 +57,8 @@ export default class LightningTimePicker extends LightningElement {
     @track _readonly = true;
     @track _describedByElements = [];
 
+    @api rootAriaNode;
+
     /**
      * Controls auto-filling of the input. Set the attribute to pass
      * through autocomplete values to be interpreted by the browser.
@@ -72,6 +74,11 @@ export default class LightningTimePicker extends LightningElement {
     @api name;
     @api placeholder = '';
 
+    @api
+    get comboboxComponent() {
+        return this.template.querySelector('lightning-base-combobox');
+    }
+
     @api messageWhenValueMissing;
     _ariaDescribedByElements;
     _timeStyle = TIME_STYLE.SHORT;
@@ -206,6 +213,7 @@ export default class LightningTimePicker extends LightningElement {
 
     set variant(value) {
         this._variant = normalizeVariant(value);
+        reflectAttribute(this, 'variant', this._variant);
     }
 
     @api
@@ -275,24 +283,19 @@ export default class LightningTimePicker extends LightningElement {
         this.connected = false;
     }
 
-    synchronizeA11y() {
-        const label = this.template.querySelector('label');
-        const comboBox = this.template.querySelector('lightning-base-combobox');
-        let describedByElements = [];
-        if (this._ariaDescribedByElements) {
-            describedByElements = describedByElements.concat(
-                this._ariaDescribedByElements
-            );
-        }
+    @api ariaErrorMessageElement;
 
+    get ariaErrorMessageElements() {
+        const elements = [this.ariaErrorMessageElement];
         if (this._errorMessage) {
-            const errorMessage = this.template.querySelector(
-                '[data-error-message]'
-            );
-            describedByElements.push(errorMessage);
+            elements.push(this.template.querySelector('[data-error-message]'));
         }
+        return elements;
+    }
+
+    synchronizeA11y() {
+        const label = this.template.querySelector('label');
 
-        comboBox.inputDescribedByElements = describedByElements;
         synchronizeAttrs(label, {
             for: this._mainInputId,
         });

package/src/lightning/timepicker/timepicker.slds.css

@@ -0,0 +1,18 @@
+
+/* 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: '') {
+  /* ASSISTIVE TEXT */
+  :host([data-render-mode="shadow"]) .slds-assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+  }
+}

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -1,12 +1,8 @@
 import { createElement } from 'lwc';
 import { AutoPosition, Direction } from 'lightning/positionLibrary';
-import {
-    assert,
-    guid,
-    normalizeAriaAttribute,
-    normalizeString,
-} from 'lightning/utilsPrivate';
+import { assert, guid, normalizeString } from 'lightning/utilsPrivate';
 import LightningPrimitiveBubble from 'lightning/primitiveBubble';
+import AriaObserver from 'lightning/ariaObserver';
 export { Direction } from 'lightning/positionLibrary';
 
 export const BUBBLE_PREFIX = `salesforce-lightning-tooltip-bubble`;
@@ -80,6 +76,7 @@ export class Tooltip {
     _visible = false;
     _isFocusEvent = false;
     _initialResize = true;
+    _ariaObserver = null;
 
     _config = {};
 
@@ -150,16 +147,23 @@ export class Tooltip {
                     this.addInfoListeners();
                     break;
             }
-            const ariaDescribedBy = normalizeAriaAttribute([
-                target.getAttribute(ARIA_DESCRIBEDBY),
-                this._element().contentId,
-            ]);
-            target.setAttribute(ARIA_DESCRIBEDBY, ariaDescribedBy);
+
+            this._ariaObserver = new AriaObserver(this._root);
+
+            this._ariaObserver.connect({
+                attribute: ARIA_DESCRIBEDBY,
+                targetNode: this._target(),
+                relatedNodes: this._element(),
+            });
 
             this._initialized = true;
         }
     }
 
+    disconnect() {
+        this._ariaObserver.disconnect();
+    }
+
     addInfoListeners() {
         const target = this._target();
 
@@ -232,6 +236,9 @@ export class Tooltip {
                     this.toggle();
                 } else if (this._visible) {
                     this.hide();
+                    if (event.key === 'Escape') {
+                        event.stopPropagation();
+                    }
                 }
             });
         }
@@ -291,15 +298,10 @@ export class Tooltip {
         this._visible = true;
         this._initialResize = true;
         const tooltip = this._element();
+        tooltip.visible = this._visible;
+        tooltip.content = this._value;
 
-        /*
-            When tabbing, populating the tooltip and making it visible too early can lead to bad interactions
-            when the mouse is hovering over a tooltip. W-12559092
-        */
-        if (!this._isFocusEvent) {
-            tooltip.content = this._value;
-            tooltip.visible = this._visible;
-        }
+        this._ariaObserver.sync();
 
         this.startPositioning();
         document.addEventListener('keydown', this.handleEscape);

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;
-}