lightning-base-components 1.13.1-alpha → 1.13.5-alpha

package/src/lightning/positionLibrary/__examples__/components/components.js

@@ -0,0 +1,29 @@
+import { LightningElement, api } from 'lwc';
+
+export default class PlaygroundCompoennts extends LightningElement {
+    @api component;
+
+    get isHelpText() {
+        return this.component === 'helpText';
+    }
+
+    get isButtonMenu() {
+        return this.component === 'button-menu';
+    }
+
+    get isComboBox() {
+        return this.component === 'combobox';
+    }
+
+    get isDatePicker() {
+        return this.component === 'datepicker';
+    }
+
+    get comboBoxOptions() {
+        return [
+            { label: 'New', value: 'new' },
+            { label: 'In Progress', value: 'inProgress' },
+            { label: 'Finished', value: 'finished' },
+        ];
+    }
+}

package/src/lightning/positionLibrary/__examples__/playground/playground.css

@@ -0,0 +1,84 @@
+.config {
+    background: white;
+    border-radius: 5px;
+    padding: 8px 15px 13px 15px;
+    position: fixed;
+    width: auto;
+    left: 10px;
+    right: 10px;
+}
+
+.config-bottom {
+    bottom: 130px;
+}
+
+.slds-col {
+    border-left: 1px solid #eef4ff;
+    border-right: 1px solid #eef4ff;
+}
+
+.container {
+    width: var(--containerWidth, 300px);
+    height: var(--containerHeight, 200px);
+    border: 3.5px solid #0176d3;
+}
+
+.container-text {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.container-placeholder {
+    background: transparent;
+    height: 1000px;
+    /* width: 50%;
+    margin: auto; */
+    word-wrap: break-word;
+}
+
+.top-left {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.top-right {
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.bottom-left {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+
+.bottom-right {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+
+.viewport-placeholder {
+    height: 200vh;
+    width: 50%;
+    background: transparent;
+}
+
+*::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 6px;
+}
+
+*::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+body {
+    overflow-y: auto;
+}

package/src/lightning/positionLibrary/__examples__/playground/playground.html

@@ -0,0 +1,122 @@
+<template>
+    <!-- Container -->
+    <div class={computedContainerClass}>
+        <p class="container-text">Container</p>
+
+        <template if:true={isUseShadowRootContainer}>
+            <positionLibrary-playground-shadow-scroll>
+                <positionLibrary-components
+                    component={selectedComponent}
+                    class={computedComponentClass}
+                ></positionLibrary-components>
+            </positionLibrary-playground-shadow-scroll>
+        </template>
+
+        <template if:false={isUseShadowRootContainer}>
+            <positionLibrary-components
+                component={selectedComponent}
+                class={computedComponentClass}
+            ></positionLibrary-components>
+        </template>
+
+        <template if:true={isContainerScroll}>
+            <div class="container-placeholder"></div>
+        </template>
+    </div>
+
+    <!-- Config panel -->
+    <div class={computedConfigClass}>
+        <div class="slds-text-heading_medium slds-m-bottom_x-small">
+            Configuration
+        </div>
+
+        <div class="slds-grid slds-gutters_small">
+            <div class="slds-col slds-size_1-of-5">
+                <lightning-combobox
+                    name="components"
+                    label="Select a component"
+                    placeholder="Please select"
+                    value={selectedComponent}
+                    options={componentOptions}
+                    onchange={handleComponentSelector}
+                >
+                </lightning-combobox>
+            </div>
+            <div class="slds-col slds-size_2-of-5">
+                <lightning-slider
+                    label="Container Width(px)"
+                    step="50"
+                    min="100"
+                    max="500"
+                    value={containerWidth}
+                    onchange={handleWidthSlider}
+                ></lightning-slider>
+                <lightning-slider
+                    label="Container Height(px)"
+                    step="50"
+                    min="100"
+                    max="500"
+                    value={containerHeight}
+                    onchange={handleHeightSlider}
+                ></lightning-slider>
+            </div>
+            <div class="slds-col slds-size_1-of-5">
+                <lightning-combobox
+                    name="containerPosition"
+                    label="Container Position"
+                    placeholder="Please select"
+                    value={containerPosition}
+                    options={positionOptions}
+                    onchange={handleContainerPosition}
+                >
+                </lightning-combobox>
+                <lightning-combobox
+                    name="componentPosition"
+                    label="Component Position"
+                    placeholder="Please select"
+                    value={componentPosition}
+                    options={positionOptions}
+                    onchange={handleComponentPosition}
+                >
+                </lightning-combobox>
+            </div>
+            <div class="slds-col slds-size_1-of-5">
+                <lightning-input
+                    type="toggle"
+                    name="container scrollbar"
+                    label="Container Scrollbar"
+                    message-toggle-active="Enabled"
+                    message-toggle-inactive="Disabled"
+                    checked={isContainerScroll}
+                    onchange={handleContainerScroll}
+                    disabled={isContainerScrollDisabled}
+                ></lightning-input>
+                <lightning-input
+                    type="toggle"
+                    name="viewport scrollbar"
+                    label="Viewport Scrollbar"
+                    message-toggle-active="Enabled"
+                    message-toggle-inactive="Disabled"
+                    checked={isViewportScroll}
+                    onchange={handleViewportScroll}
+                    class="slds-m-top_medium"
+                ></lightning-input>
+                <lightning-input
+                    type="toggle"
+                    name="ShadowRoot Container"
+                    label="ShadowRoot Container"
+                    message-toggle-active="Enabled"
+                    message-toggle-inactive="Disabled"
+                    checked={isUseShadowRootContainer}
+                    onchange={handleShadowContainer}
+                    class="slds-m-top_medium"
+                ></lightning-input>
+            </div>
+        </div>
+    </div>
+
+    <!-- Placeholder to enable scrollbar of viewport -->
+    <template if:true={isViewportScroll}>
+        <div class="viewport-placeholder"></div>
+    </template>
+</template>

package/src/lightning/positionLibrary/__examples__/playground/playground.js

@@ -0,0 +1,103 @@
+import { LightningElement } from 'lwc';
+import { classSet } from 'lightning/utils';
+
+export default class PositionLibraryPlayground extends LightningElement {
+    selectedComponent = 'helpText';
+    containerPosition = 'topLeft';
+    componentPosition = 'topLeft';
+
+    containerWidth = 300;
+    containerHeight = 200;
+
+    isContainerScroll = false;
+    isViewportScroll = false;
+    isUseShadowRootContainer = false;
+
+    componentOptions = [
+        { label: 'helpText', value: 'helpText' },
+        { label: 'button-menu', value: 'button-menu' },
+        { label: 'combobox', value: 'combobox' },
+        { label: 'datepicker', value: 'datepicker' },
+    ];
+
+    positionOptions = [
+        { label: 'top left', value: 'topLeft' },
+        { label: 'top right', value: 'topRight' },
+        { label: 'bottom left', value: 'bottomLeft' },
+        { label: 'bottom right', value: 'bottomRight' },
+    ];
+
+    handleComponentSelector(event) {
+        this.selectedComponent = event.detail.value;
+    }
+
+    handleContainerPosition(event) {
+        this.containerPosition = event.detail.value;
+    }
+
+    handleComponentPosition(event) {
+        this.componentPosition = event.detail.value;
+    }
+
+    get computedComponentClass() {
+        return classSet().add({
+            'top-left': this.componentPosition === 'topLeft',
+            'top-right': this.componentPosition === 'topRight',
+            'bottom-left': this.componentPosition === 'bottomLeft',
+            'bottom-right': this.componentPosition === 'bottomRight',
+        });
+    }
+
+    // container has style overflow-y:auto(slds-scrollable_y)
+    get computedContainerClass() {
+        const classnames = classSet('container slds-scrollable_y');
+
+        return classnames.add({
+            'top-left': this.containerPosition === 'topLeft',
+            'top-right': this.containerPosition === 'topRight',
+            'bottom-left': this.containerPosition === 'bottomLeft',
+            'bottom-right': this.containerPosition === 'bottomRight',
+        });
+    }
+
+    get computedConfigClass() {
+        const classnames = classSet('config');
+
+        return classnames.add({
+            'config-bottom':
+                this.containerPosition === 'topLeft' ||
+                this.containerPosition === 'topRight',
+        });
+    }
+
+    handleWidthSlider(event) {
+        this.containerWidth = event.detail.value;
+        const css = document.body.style;
+        css.setProperty('--containerWidth', `${this.containerWidth}px`);
+    }
+
+    handleHeightSlider(event) {
+        this.containerHeight = event.detail.value;
+        const css = document.body.style;
+        css.setProperty('--containerHeight', `${this.containerHeight}px`);
+    }
+
+    handleContainerScroll() {
+        this.isContainerScroll = !this.isContainerScroll;
+    }
+
+    handleViewportScroll() {
+        this.isViewportScroll = !this.isViewportScroll;
+    }
+
+    handleShadowContainer() {
+        this.isUseShadowRootContainer = !this.isUseShadowRootContainer;
+        if (this.isUseShadowRootContainer) {
+            this.isContainerScroll = false;
+        }
+    }
+
+    get isContainerScrollDisabled() {
+        return this.isUseShadowRootContainer === true;
+    }
+}

package/src/lightning/positionLibrary/__examples__/playgroundShadowScroll/playgroundShadowScroll.html

@@ -0,0 +1,8 @@
+<template>
+    <div
+        style="overflow: auto; width: 100%; height: 100%; background: #f3f2f2"
+        onprivatescrollablecontainer={handleScroll}
+    >
+        <slot></slot>
+    </div>
+</template>

package/src/lightning/positionLibrary/__examples__/playgroundShadowScroll/playgroundShadowScroll.js

@@ -0,0 +1,9 @@
+import { LightningElement } from 'lwc';
+
+export default class PlaygroundShadowScroll extends LightningElement {
+    handleScroll(event) {
+        const { callback } = event.detail;
+        callback(event.composedPath());
+        event.stopPropagation();
+    }
+}

package/src/lightning/positionLibrary/elementProxy.js

@@ -142,9 +142,21 @@ export class ElementProxy {
             ? '0'
             : parseInt(style.top.replace('px', ''), 10);
 
-        const leftDif = Math.round(this.left - (absPos.left + scrollLeft));
+        let leftDif = Math.round(this.left - (absPos.left + scrollLeft));
         const topDif = this.top - (absPos.top + scrollTop);
 
+        const viewPortWidth = w.innerWidth || document.body.clientWidth;
+        let rightPos = parseInt(style.right, 10);
+        if (
+            originalLeft + leftDif + parseInt(style.width, 10) >
+                viewPortWidth &&
+            rightPos <= 0
+        ) {
+            rightPos = rightPos < 0 ? -rightPos : leftDif;
+            this._node.style.right = -rightPos + 'px';
+            leftDif = 0;
+        }
+
         this._node.style.left = `${originalLeft + leftDif}px`;
         this._node.style.top = `${originalTop + topDif}px`;
 

package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.html

@@ -20,6 +20,7 @@
                         required={required}
                         class="dt-type-edit-factory slds-col"
                         column-def={columnDef}
+                        type-attributes={resolvedTypeAttributes}
                         edited-value={editedValue}
                         onblur={handleTypeElemBlur}
                         onfocus={handleTypeElemFocus}

package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.js

@@ -19,6 +19,7 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
     @api columnDef;
     @api isMassEditEnabled = false;
     @api numberOfSelectedRows;
+    @api resolvedTypeAttributes;
 
     connectedCallback() {
         this.interactingState = new InteractingState({
@@ -117,7 +118,7 @@ export default class PrimitiveDatatableIeditPanel extends LightningElement {
 
     @api
     get value() {
-        return this.inputableElement.value;
+        return this.inputableElement ? this.inputableElement.value : null;
     }
 
     @api

package/src/lightning/primitiveDatatableIeditTypeFactory/primitiveDatatableIeditTypeFactory.js

@@ -31,6 +31,7 @@ export default class LightningPrimitiveDatatableIeditTypeFactory extends Lightni
     columnLabel;
     @api editedValue;
     @api required;
+    @api typeAttributes;
 
     @api
     get columnDef() {
@@ -137,13 +138,6 @@ export default class LightningPrimitiveDatatableIeditTypeFactory extends Lightni
         return this._columnDef.editTemplate;
     }
 
-    /**
-     * Returns typeAttributes defined for custom type template
-     */
-    get typeAttributes() {
-        return this._columnDef.typeAttributes;
-    }
-
     /**
      * for percent, currency types use if step passed in, if not fallback to default
      * @returns {*|string}

package/src/lightning/primitiveDatatableLoadingIndicator/primitiveDatatableLoadingIndicator.html

@@ -1,4 +1,4 @@
 <template>
-    <lightning-spinner variant="brand" alternative-text={i18n.loading} style="height: 40px;">
+    <lightning-spinner size="small" variant="brand" alternative-text={i18n.loading} style="height: 40px;">
     </lightning-spinner>
 </template>

package/src/lightning/tabBar/tabBar.js

@@ -101,14 +101,14 @@ export default class LightningTabBar extends LightningElement {
                 showErrorIndicator: tab.showErrorIndicator,
             };
         });
-        this._allTabs = allTabs;
-        let selectedTab = this._allTabs[0];
+
+        let selectedTab = allTabs[0];
         if (this._selectedTab) {
-            selectedTab = this._allTabs.find(
+            selectedTab = allTabs.find(
                 (tab) => tab.value === this._selectedTab.value
             );
             if (!selectedTab) {
-                selectedTab = this._allTabs[0];
+                selectedTab = allTabs[0];
             }
         }
         if (selectedTab) {
@@ -117,6 +117,7 @@ export default class LightningTabBar extends LightningElement {
             selectedTab.ariaSelected = 'true';
             selectedTab.tabIndex = 0;
         }
+        this._allTabs = allTabs;
 
         this._queueSynchronizeA11 = true;
 
@@ -128,7 +129,7 @@ export default class LightningTabBar extends LightningElement {
 
     @api
     selectTabByValue(tabValue) {
-        this._selectTab(tabValue, { fireTabSelectEvent: true });
+        this._selectTab(tabValue);
     }
 
     @api
@@ -276,13 +277,8 @@ export default class LightningTabBar extends LightningElement {
         tab.tabIndex = 0;
 
         this._selectedTab = tab;
-
-        if (options.fireTabSelectEvent) {
-            //Case added specifically for the reactive property of active tab
-            this._selectTabAndFireSelectEvent(this._selectedTab.value);
-            if (this._hasOverflow) {
-                this._recomputeOverflow();
-            }
+        if (this._hasOverflow) {
+            this._queueOverflow();
         }
     }
 

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -10,7 +10,8 @@ import LightningPrimitiveBubble from 'lightning/primitiveBubble';
 
 export { Direction } from 'lightning/positionLibrary';
 
-const BUBBLE_ID = `salesforce-lightning-tooltip-bubble_${guid()}`;
+export const BUBBLE_PREFIX = `salesforce-lightning-tooltip-bubble`;
+const BUBBLE_ID = `${BUBBLE_PREFIX}_${guid()}`;
 
 function isResizeObserverSupported() {
     return window.ResizeObserver != null;

package/src/lightning/utilsPrivate/utilsPrivate.js

@@ -108,20 +108,26 @@ export function isNotUndefinedOrNull(value) {
     return !isUndefinedOrNull(value);
 }
 
-const DEFAULT_ZINDEX_BASELINE = 9000;
+const DEFAULT_MODAL_ZINDEX = 9000;
+const DEFAULT_ZINDEX_OFFSET = 100;
+const DEFAULT_ZINDEX_BASELINE = DEFAULT_MODAL_ZINDEX + DEFAULT_ZINDEX_OFFSET;
 /**
  * Returns the zIndex baseline from slds zIndex variable --lwc-zIndexModal.
  * @returns {Number} zIndex baseline
  */
 export function getZIndexBaseline() {
-    const value = (
+    // When SLDS styles are present, typically on Core
+    // this currently resolves to: '9000' (string)
+    const modalZindexValueLwc = (
         window.getComputedStyle(document.documentElement) ||
         document.documentElement.style
     ).getPropertyValue('--lwc-zIndexModal');
 
-    const base = parseInt(value, 10);
+    const baseZindexModalLwc = parseInt(modalZindexValueLwc, 10);
 
-    return isNaN(base) ? DEFAULT_ZINDEX_BASELINE : base;
+    return isNaN(baseZindexModalLwc)
+        ? DEFAULT_ZINDEX_BASELINE
+        : baseZindexModalLwc + DEFAULT_ZINDEX_OFFSET;
 }
 
 export function timeout(interval) {

package/src/lightning/accordion/__utam__/accordion.utam.json

@@ -1,13 +0,0 @@
-{
-    "elements": [
-        {
-            "name": "accordionSections",
-            "public": true,
-            "type": "utam-lightning/pageObjects/accordionSection",
-            "selector": {
-                "css": "lightning-accordion-section",
-                "returnAll": true
-            }
-        }
-    ]
-}

package/src/lightning/accordionSection/__utam__/accordionSection.utam.json

@@ -1,71 +0,0 @@
-{
-    "methods": [
-        {
-            "name": "isActive",
-            "compose": [
-                {
-                    "element": "sectionOpen",
-                    "apply": "isPresent"
-                }
-            ]
-        },
-        {
-            "name": "getLabel",
-            "compose": [
-                {
-                    "element": "label",
-                    "apply": "getText"
-                }
-            ]
-        },
-        {
-            "name": "toggle",
-            "compose": [
-                {
-                    "element": "label",
-                    "apply": "click"
-                }
-            ]
-        },
-        {
-            "name": "getContent",
-            "compose": [
-                {
-                    "element": "content",
-                    "apply": "getText"
-                }
-            ]
-        }
-    ],
-    "shadow": {
-        "elements": [
-            {
-                "name": "sectionOpen",
-                "selector": {
-                    "css": "section.slds-accordion__section.slds-is-open"
-                }
-            },
-            {
-                "name": "section",
-                "selector": {
-                    "css": "section.slds-accordion__section"
-                },
-                "elements": [
-                    {
-                        "name": "label",
-                        "type": "clickable",
-                        "selector": {
-                            "css": "section.slds-accordion__section > div.slds-accordion__summary > h3 > button > span"
-                        }
-                    },
-                    {
-                        "name": "content",
-                        "selector": {
-                            "css": "div.slds-accordion__content"
-                        }
-                    }
-                ]
-            }
-        ]
-    }
-}