lightning-base-components 1.17.3-alpha → 1.17.6-alpha

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -16,16 +16,6 @@ function isResizeObserverSupported() {
     return window.ResizeObserver != null;
 }
 
-function buildResizeObserver(callback) {
-    if (isResizeObserverSupported()) {
-        return new ResizeObserver(callback);
-    }
-    return {
-        observe() {},
-
-        unobserve() {},
-    };
-}
 /**
  * Shared instance of a primitive bubble used as a tooltip by most components. This was originally
  * defined in the helptext component which is where the minWidth style came from.
@@ -33,6 +23,8 @@ function buildResizeObserver(callback) {
  */
 let CACHED_BUBBLE_ELEMENT;
 
+let activeTooltip;
+
 function getCachedBubbleElement() {
     if (!CACHED_BUBBLE_ELEMENT) {
         CACHED_BUBBLE_ELEMENT = createElement('lightning-primitive-bubble', {
@@ -41,6 +33,7 @@ function getCachedBubbleElement() {
         CACHED_BUBBLE_ELEMENT.contentId = BUBBLE_ID;
         CACHED_BUBBLE_ELEMENT.style.position = 'absolute';
         CACHED_BUBBLE_ELEMENT.style.minWidth = '75px';
+        CACHED_BUBBLE_ELEMENT.disableVisibilityChangeOnLeave = true;
     }
 
     return CACHED_BUBBLE_ELEMENT;
@@ -86,6 +79,7 @@ export class Tooltip {
     _initialized = false;
     _visible = false;
     _isFocusEvent = false;
+    _initialResize = true;
 
     _config = {};
 
@@ -123,6 +117,7 @@ export class Tooltip {
         }
         this.handleDocumentTouch = this.handleDocumentTouch.bind(this);
         this.handleEscape = this.handleEscape.bind(this);
+        this.hide = this.hide.bind(this);
     }
 
     /**
@@ -167,6 +162,7 @@ export class Tooltip {
 
     addInfoListeners() {
         const target = this._target();
+
         if (!this._initialized && target) {
             ['mouseenter', 'focus'].forEach((name) =>
                 target.addEventListener(name, () => this.show())
@@ -181,6 +177,13 @@ export class Tooltip {
     }
 
     hideIfNotSelfCover(event) {
+        /*
+            If the tooltip is already hidden, do not try to hide it. The primitive bubble is shared and we don't want to
+            hide a tooltip that does not belong to this instance.
+        */
+        if (!this._visible) {
+            return;
+        }
         if (event.type === 'mouseleave' && event.clientX && event.clientY) {
             // In any chance, if mouseleave is caused by tooltip itself, it would means
             // tooltip cover the target which mostly caused by dynamic resize of tooltip by CSS or JS.
@@ -209,6 +212,7 @@ export class Tooltip {
 
     addToggleListeners() {
         const target = this._target();
+
         if (!this._initialized && target) {
             target.addEventListener('touchstart', (e) => {
                 e.stopPropagation();
@@ -222,10 +226,11 @@ export class Tooltip {
                     this.hideIfNotSelfCover(event)
                 )
             );
+
             target.addEventListener('keydown', (event) => {
                 if (event.keyCode === 13 && !this._visible) {
                     this.toggle();
-                } else {
+                } else if (this._visible) {
                     this.hide();
                 }
             });
@@ -240,9 +245,31 @@ export class Tooltip {
 
     get resizeObserver() {
         if (!this._resizeObserver) {
-            this._resizeObserver = buildResizeObserver(() => {
+            this._resizeObserver = this._buildResizeObserver(() => {
                 if (this._visible && this._autoPosition) {
-                    this.startPositioning();
+                    const tooltip = this._element();
+                    /**
+                     * There are some cases where the tooltip hide event does not trigger. For example,
+                     * if a tab triggers a focus event on element A and then a pointer triggers mouseenter on element B.
+                     * In this case, the content of the cached tooltip does not match the value of this Tooltip object and
+                     * we know that this tooltip should be hidden. See @W-12512833
+                     */
+                    if (activeTooltip !== this) {
+                        this.hide(false);
+                        return;
+                    }
+                    this.startPositioning().then(() => {
+                        /*
+                         * Once positioning is complete, add the listener to react when the mouse leaves the tooltip.
+                         * Cannot be added before, or the tooltip will flicker and hide if the mouse is in the same
+                         * position as the tooltip and the user tabs onto the tooltip. This cannot be managed inside
+                         * the primitive-bubble, or the ResizeObserver will not be reset correctly.
+                         */
+                        if (this._initialResize) {
+                            tooltip.addEventListener('mouseleave', this.hide);
+                            this._initialResize = false;
+                        }
+                    });
                 }
             });
         }
@@ -250,15 +277,29 @@ export class Tooltip {
     }
 
     show(ev) {
-        if (this._disabled) {
+        if (this._disabled || this._visible) {
             return;
         }
+
+        if (activeTooltip && activeTooltip !== this && activeTooltip._visible) {
+            activeTooltip.hide(false);
+        }
+        activeTooltip = this;
+
         this._isFocusEvent = ev && (ev.type === 'focus' ? true : false);
 
         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.startPositioning();
         document.addEventListener('keydown', this.handleEscape);
@@ -266,17 +307,28 @@ export class Tooltip {
         this.resizeObserver.observe(tooltip);
     }
 
-    hide() {
+    /**
+     * Hides the tooltip
+     *
+     * @param {*} hideBubble the primitive bubble is a shared instance, it may not be desirable to hide it
+     * if the current tooltip is no longer using it.
+     */
+    hide(hideBubble = true) {
         this._visible = false;
         const tooltip = this._element();
-        tooltip.visible = this._visible;
+
+        if (hideBubble) {
+            tooltip.visible = this._visible;
+        }
 
         this.stopPositioning();
 
         document.removeEventListener('touchstart', this.handleDocumentTouch);
         document.removeEventListener('keydown', this.handleEscape);
+        tooltip.removeEventListener('mouseleave', this.hide);
 
         this.resizeObserver.unobserve(tooltip);
+        activeTooltip = null;
     }
 
     toggle() {
@@ -323,7 +375,7 @@ export class Tooltip {
         const targetBox = this._target().getBoundingClientRect();
         const padLeft = targetBox.width * 0.5 - NUBBIN_OFFSET;
 
-        this._autoPosition
+        return this._autoPosition
             .start({
                 target: this._target,
                 element: this._element,
@@ -350,4 +402,15 @@ export class Tooltip {
             this._autoPosition.stop();
         }
     }
+
+    _buildResizeObserver(callback) {
+        if (isResizeObserverSupported()) {
+            return new ResizeObserver(callback);
+        }
+        return {
+            observe() {},
+
+            unobserve() {},
+        };
+    }
 }

package/src/lightning/treeGrid/__docs__/treeGrid.md

@@ -39,8 +39,8 @@ include:
 This component provides styling for up to 20 nested levels. For tree grids that require more than 20 nested levels,
 build your own component.
 
-A checkbox is displayed by default in the first column. The `hide-checkbox-column` attribute
-removes the checkbox.
+A checkbox is displayed by default in the first column. Set the `hide-checkbox-column` attribute
+to `true` to remove the checkbox.
 
 Initialize your tree grid data using the `data`, `columns`, and `key-field` attributes
 and define their values in JavaScript. Note that `key-field` is required.
@@ -49,7 +49,8 @@ This example creates a tree grid with 5 columns, where the
 first column displays a checkbox for row selection. Selecting the checkbox
 enables you to select the entire row of data and triggers the `onrowselection`
 event handler. The `expanded-rows` attribute is optional, and expands nested
-items on a row when provided.
+items on a row when provided. Selecting a row using the checkbox does not select
+the rows nested below it.
 
 The example includes two buttons whose handlers call `lightning-tree-grid` methods
 to collapse all rows and to show which rows are expanded.

package/src/lightning/utilsPrivate/url.js

@@ -9,7 +9,8 @@ export function makeAbsoluteUrl(url) {
     return isAbsoluteUrl(url) ? url : `${protocol}//${url}`;
 }
 
-export const FALLBACK_URL = 'about:blank';
+// eslint-disable-next-line no-script-url
+export const FALLBACK_URL = 'javascript:void(0)';
 const IS_SCRIPT_OR_DATA = /^(?:\w+script|data):/i;
 const IS_HTML_ENTITY = /&#(\w+)(^\w|;)?/g;
 const htmlCtrlEntityRegex = /&(newline|tab);/gi;

package/src/lightning/verticalNavigation/vertical-navigation.slds.css

@@ -0,0 +1,4 @@
+
+:host([data-render-mode="shadow"]) [part~='vertical-navigation'] {
+  position: relative;
+}

package/src/lightning/verticalNavigation/verticalNavigation.css

@@ -0,0 +1 @@
+/* @import './vertical-navigation.slds.css'; */

package/src/lightning/verticalNavigation/verticalNavigation.html

@@ -1,5 +1,5 @@
 <template>
-    <nav class={computedClass} onprivateitemselect={handleItemSelect} onprivateitemregister={handleItemRegister} aria-label={ariaLabel}>
+    <nav class={computedClass} onprivateitemselect={handleItemSelect} onprivateitemregister={handleItemRegister} aria-label={ariaLabel} part="vertical-navigation">
         <slot></slot>
     </nav>
 </template>

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

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

package/src/lightning/verticalNavigationSection/verticalNavigationSection.css

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

package/src/lightning/verticalNavigationSection/verticalNavigationSection.html

@@ -1,5 +1,5 @@
 <template>
-    <div class="slds-nav-vertical__section" onprivateoverflowregister={handleOverflowRegister}>
+    <div class="slds-nav-vertical__section" onprivateoverflowregister={handleOverflowRegister} part="vertical-navigation-section">
         <h2 id="vertical-navigation-section-heading" class="slds-nav-vertical__title" aria-level={_privateHeadingAriaLevel}>{label}</h2>
         <div role="list" aria-describedby="vertical-navigation-section-heading">
             <slot></slot>