lightning-base-components 1.27.2-alpha → 1.27.5-alpha

package/src/lightning/tooltipLibrary/{tooltipLibrary.js → tooltipLibrary.ts}

@@ -1,19 +1,23 @@
-/*
- * Copyright (c) 2025, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
 import { createElement } from 'lwc';
 import { AutoPosition, Direction } from 'lightning/positionLibrary';
-import { assert, guid, normalizeString, isCSR } from 'lightning/utilsPrivate';
+import {
+    assert,
+    getActiveTooltip,
+    guid,
+    normalizeString,
+    setActiveTooltip,
+} from 'lightning/utilsPrivate';
 import LightningPrimitiveBubble from 'lightning/primitiveBubble';
 import AriaObserver from 'lightning/ariaObserver';
+import type { LightningElement } from 'lwc';
+import { features } from 'lightning/features';
 export { Direction } from 'lightning/positionLibrary';
 
 export const BUBBLE_PREFIX = `salesforce-lightning-tooltip-bubble`;
 const BUBBLE_ID = `${BUBBLE_PREFIX}_${guid()}`;
 
-function isResizeObserverSupported() {
+function isResizeObserverSupported(): boolean {
+    // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
     return window.ResizeObserver != null;
 }
 
@@ -22,11 +26,11 @@ function isResizeObserverSupported() {
  * defined in the helptext component which is where the minWidth style came from.
  * TODO: We may want to revisit the minWidth style with the PO and/or UX.
  */
-let CACHED_BUBBLE_ELEMENT;
+let CACHED_BUBBLE_ELEMENT: any;
 
-let activeTooltip;
+let activeTooltip: Tooltip | null;
 
-function getCachedBubbleElement() {
+function getCachedBubbleElement(): HTMLElement {
     if (!CACHED_BUBBLE_ELEMENT) {
         CACHED_BUBBLE_ELEMENT = createElement('lightning-primitive-bubble', {
             is: LightningPrimitiveBubble,
@@ -66,7 +70,7 @@ const NUBBIN_OFFSET = 24;
 export const TooltipType = {
     Info: 'info',
     Toggle: 'toggle',
-};
+} as const;
 
 /**
  * Allows us to attach a tooltip to components. Typical usage is as follows:
@@ -74,16 +78,32 @@ export const TooltipType = {
  * - Call Tooltip.initialize() to add the appropriate listeners to the element that needs a tooltip
  * See buttonIcon and buttonMenu for example usage.
  */
+
+type TooltipConfig = {
+    root?: LightningElement;
+    target?: () => HTMLElement;
+    element?: () => HTMLElement;
+    align?: { horizontal?: string; vertical?: string };
+    targetAlign?: { horizontal?: string; vertical?: string };
+    disableAriaDescribedBy?: boolean;
+    type?: string;
+};
+
 export class Tooltip {
-    _autoPosition = null;
+    _autoPosition: AutoPosition | null = null;
     _disabled = true;
     _initialized = false;
     _visible = false;
     _isFocusEvent = false;
     _initialResize = true;
-    _ariaObserver = null;
-
-    _config = {};
+    _ariaObserver: AriaObserver | null = null;
+    _resizeObserver;
+    _config: TooltipConfig = {};
+    _value: string = '';
+    _root: LightningElement;
+    _target: () => any;
+    _element: () => any;
+    _type: string;
 
     /**
      * A shared instance of primitiveBubble is used when an element is not specified in the config
@@ -91,8 +111,9 @@ export class Tooltip {
      * @param {string} value the content of the tooltip
      * @param {object} config specifies the root component, target element of the tooltip
      */
-    constructor(value, config) {
-        assert(config.target, 'target for tooltip is undefined or missing');
+
+    constructor(value: string, config: TooltipConfig) {
+        assert(!!config.target, 'target for tooltip is undefined or missing');
 
         this.value = value;
 
@@ -112,7 +133,7 @@ export class Tooltip {
 
         // If a tooltip element is not given, fall back on the globally shared instance.
         this._element = config.element;
-        if (isCSR && !this._element) {
+        if (!import.meta.env.SSR && !this._element) {
             this._element = getCachedBubbleElement;
             const bubbleElement = getCachedBubbleElement();
             if (bubbleElement.parentNode === null) {
@@ -127,14 +148,14 @@ export class Tooltip {
     /**
      * Disables the tooltip.
      */
-    detach() {
+    detach(): void {
         this._disabled = true;
     }
 
     /**
      * Enables the tooltip.
      */
-    attach() {
+    attach(): void {
         this._disabled = false;
     }
 
@@ -142,7 +163,7 @@ export class Tooltip {
      * Adds the appropriate event listeners to the target element to make the tooltip appear. Also
      * links the tooltip and target element via the aria-describedby attribute for screen readers.
      */
-    initialize() {
+    initialize(): void {
         const target = this._target();
         if (!this._initialized && target) {
             switch (this._type) {
@@ -168,19 +189,22 @@ export class Tooltip {
         }
     }
 
-    disconnect() {
-        if (this._ariaObserver) this._ariaObserver.disconnect();
-        if (this._visible) this.hide();
+    disconnect(): void {
+        if (this._ariaObserver) {
+            this._ariaObserver.disconnect();
+        }
+        if (this._visible) {
+            this.hide();
+        }
     }
 
-    addInfoListeners() {
+    addInfoListeners(): void {
         const target = this._target();
 
         if (!this._initialized && target) {
             ['mouseenter', 'focus'].forEach((name) =>
                 target.addEventListener(name, () => this.show())
             );
-            // Unlike the tooltip in Aura, we want clicks and keys to dismiss the tooltip.
             ['mouseleave', 'blur', 'click', 'keydown'].forEach((name) =>
                 target.addEventListener(name, (event) => {
                     if (!this._visible) {
@@ -196,7 +220,7 @@ export class Tooltip {
         }
     }
 
-    hideIfNotSelfCover(event) {
+    hideIfNotSelfCover(event: MouseEvent | KeyboardEvent): void {
         /*
             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.
@@ -205,13 +229,21 @@ export class Tooltip {
             return;
         }
         const tooltip = this._element();
-        if (event.type === 'mouseleave' && event.clientX && event.clientY) {
+        if (
+            event.type === 'mouseleave' &&
+            // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
+            event instanceof MouseEvent &&
+            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.
             try {
                 const yOffset = tooltip.align.vertical === 'top' ? 1 : 0;
+                // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
                 const elementMouseIsOver = document.elementFromPoint
-                    ? document.elementFromPoint(
+                    ? // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
+                      document.elementFromPoint(
                           event.clientX,
                           event.clientY + yOffset
                       )
@@ -229,13 +261,13 @@ export class Tooltip {
         this.hide();
     }
 
-    handleDocumentTouch() {
+    handleDocumentTouch(): void {
         if (this._visible) {
             this.hide();
         }
     }
 
-    addToggleListeners() {
+    addToggleListeners(): void {
         const target = this._target();
 
         if (!this._initialized && target) {
@@ -262,14 +294,17 @@ export class Tooltip {
         }
     }
 
-    handleEscape(e) {
-        if (e.key === 'Escape' && this._isFocusEvent) {
+    handleEscape(e: KeyboardEvent): void {
+        if (features.enableTooltipHoverDismiss && e.key === 'Escape') {
+            e.stopPropagation();
+            this.hideIfNotSelfCover(e);
+        } else if (e.key === 'Escape' && this._isFocusEvent) {
             e.stopPropagation();
             this.hideIfNotSelfCover(e);
         }
     }
 
-    get resizeObserver() {
+    get resizeObserver(): ResizeObserver {
         if (!this._resizeObserver) {
             this._resizeObserver = this._buildResizeObserver(() => {
                 if (this._visible && this._autoPosition) {
@@ -280,7 +315,12 @@ export class Tooltip {
                      * 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) {
+                    if (
+                        (!features.enableTooltipHoverDismiss &&
+                            activeTooltip !== this) ||
+                        (features.enableTooltipHoverDismiss &&
+                            getActiveTooltip() !== this)
+                    ) {
                         this.hide(false);
                         return;
                     }
@@ -302,15 +342,29 @@ export class Tooltip {
         return this._resizeObserver;
     }
 
-    show(ev) {
+    show(ev?: Event): void {
         if (this._disabled || this._visible) {
             return;
         }
 
-        if (activeTooltip && activeTooltip !== this && activeTooltip._visible) {
-            activeTooltip.hide(false);
+        const currentActiveTooltip = features.enableTooltipHoverDismiss
+            ? getActiveTooltip()
+            : activeTooltip;
+
+        if (
+            currentActiveTooltip &&
+            currentActiveTooltip !== this &&
+            currentActiveTooltip._visible
+        ) {
+            currentActiveTooltip.hide(false);
+        }
+
+        if (features.enableTooltipHoverDismiss) {
+            setActiveTooltip(this);
+        } else {
+            const that = this;
+            activeTooltip = that;
         }
-        activeTooltip = this;
 
         this._isFocusEvent = ev && (ev.type === 'focus' ? true : false);
 
@@ -325,7 +379,9 @@ export class Tooltip {
         }
 
         this.startPositioning();
+        // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
         document.addEventListener('keydown', this.handleEscape);
+        // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
         document.addEventListener('touchstart', this.handleDocumentTouch);
         this.resizeObserver.observe(tooltip);
     }
@@ -336,7 +392,7 @@ export class 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) {
+    hide(hideBubble: boolean = true): void {
         this._visible = false;
         const tooltip = this._element();
 
@@ -346,15 +402,21 @@ export class Tooltip {
 
         this.stopPositioning();
 
+        // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
         document.removeEventListener('touchstart', this.handleDocumentTouch);
+        // eslint-disable-next-line @lwc/lwc/ssr-no-restricted-browser-globals
         document.removeEventListener('keydown', this.handleEscape);
         tooltip.removeEventListener('mouseleave', this.hide);
 
         this.resizeObserver.unobserve(tooltip);
-        activeTooltip = null;
+        if (features.enableTooltipHoverDismiss) {
+            setActiveTooltip(null);
+        } else {
+            activeTooltip = null;
+        }
     }
 
-    toggle() {
+    toggle(): void {
         if (this._visible) {
             this.hide();
         } else {
@@ -362,24 +424,24 @@ export class Tooltip {
         }
     }
 
-    get value() {
+    get value(): string {
         return this._value;
     }
 
-    set value(value) {
+    set value(value: string) {
         this._value = value;
         this._disabled = !value;
     }
 
-    get initialized() {
+    get initialized(): boolean {
         return this._initialized;
     }
 
-    get visible() {
+    get visible(): boolean {
         return this._visible;
     }
 
-    startPositioning() {
+    startPositioning(): Promise<void> {
         if (!this._autoPosition) {
             this._autoPosition = new AutoPosition(this._root);
         }
@@ -396,7 +458,7 @@ export class Tooltip {
 
         // Pads the tooltip so its nubbin is at the center of the target element.
         const targetBox = this._target().getBoundingClientRect();
-        const padLeft = targetBox.width * 0.5 - NUBBIN_OFFSET;
+        const padLeft = (targetBox.width * 0.5) - NUBBIN_OFFSET;
 
         return this._autoPosition
             .start({
@@ -420,20 +482,20 @@ export class Tooltip {
             });
     }
 
-    stopPositioning() {
+    stopPositioning(): void {
         if (this._autoPosition) {
             this._autoPosition.stop();
         }
     }
 
-    _buildResizeObserver(callback) {
+    _buildResizeObserver(callback: () => void): ResizeObserver {
         if (isResizeObserverSupported()) {
             return new ResizeObserver(callback);
         }
         return {
             observe() {},
-
+            disconnect() {},
             unobserve() {},
-        };
+        } as ResizeObserver;
     }
 }

package/src/lightning/touchScrollLibrary/{touchScrollLibrary.js → touchScrollLibrary.ts}

@@ -1,48 +1,50 @@
-/*
- * Copyright (c) 2025, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
 import { assert } from 'lightning/utilsPrivate';
+// eslint-disable-next-line @lwc/lwc/ssr-no-form-factor
 import formFactor from '@salesforce/client/formFactor';
 
-function getPositionY(event) {
-    return event.touches ? event.touches[0].screenY : event.screenY;
+interface TouchEventWithScrolling extends TouchEvent {
+    cancelScrolling?: boolean;
+    preventBounce?: boolean;
+}
+
+function getPositionY(event: TouchEventWithScrolling): number {
+    return event.touches ? event.touches[0].screenY : (event as any).screenY;
 }
 
-function canScroll(el) {
-    var canScrollY = el.scrollHeight > el.offsetHeight;
-    var canScrollX = el.scrollWidth > el.offsetWidth;
+function canScroll(el: HTMLElement): boolean {
+    const canScrollY = el.scrollHeight > el.offsetHeight;
+    const canScrollX = el.scrollWidth > el.offsetWidth;
     return canScrollY || canScrollX;
 }
 
-function alwaysScrolls(el) {
-    var isInputRange = el.tagName === 'INPUT' && el.type === 'range';
+function alwaysScrolls(el: HTMLElement): boolean {
+    const isInputRange =
+        el.tagName === 'INPUT' && (el as HTMLInputElement).type === 'range';
     return isInputRange;
 }
 
-function nativeScroll(el) {
-    var isTextarea = el.tagName === 'TEXTAREA';
+function nativeScroll(el: HTMLElement): boolean {
+    const isTextarea = el.tagName === 'TEXTAREA';
     return isTextarea;
 }
 
-function isAtTop(el) {
+function isAtTop(el: HTMLElement): boolean {
     return el.scrollTop === 0;
 }
 
-function isAtBottom(el) {
+function isAtBottom(el: HTMLElement): boolean {
     return (
         el.scrollHeight - el.scrollTop === el.offsetHeight ||
         el.scrollHeight - el.scrollTop === el.clientHeight
     );
 }
 
-function skipUiScroller(event) {
+function skipUiScroller(event: TouchEventWithScrolling): void {
     event.cancelScrolling = true;
     event.preventBounce = false;
 }
 
-function enableUiScroller(event) {
+function enableUiScroller(event: TouchEventWithScrolling): void {
     event.cancelScrolling = false;
     event.preventBounce = true;
 }
@@ -54,29 +56,30 @@ function enableUiScroller(event) {
  */
 export class TouchScroller {
     _initialized = false;
-    _startY = null;
+    _startY: number | null = null;
+    _target: HTMLElement;
 
-    static isMobile() {
+    static isMobile(): boolean {
         return formFactor !== 'Large';
     }
 
-    constructor(target) {
+    constructor(target: HTMLElement) {
         assert(
-            target,
+            !!target,
             'a non-empty target is required for TouchScroller to add touch listeners to'
         );
         this._target = target;
         this.initialize();
     }
 
-    initialize() {
+    initialize(): void {
         if (!this._initialized && this._target) {
             if (TouchScroller.isMobile()) {
                 this._target.addEventListener('touchstart', (event) =>
-                    this.handleTouchStart(event)
+                    this.handleTouchStart(event as TouchEventWithScrolling)
                 );
                 this._target.addEventListener('touchmove', (event) =>
-                    this.handleTouchMove(event)
+                    this.handleTouchMove(event as TouchEventWithScrolling)
                 );
             }
 
@@ -84,7 +87,7 @@ export class TouchScroller {
         }
     }
 
-    handleTouchStart(event) {
+    handleTouchStart(event: TouchEventWithScrolling): void {
         this._startY = getPositionY(event);
     }
 
@@ -92,9 +95,9 @@ export class TouchScroller {
      * Vertical touch scrolling, borrows heavily from scrollerWrapperController.handleTouchmove.
      * @param {Event} event the touch event to handle
      */
-    handleTouchMove(event) {
-        var el = event.currentTarget;
-        var target = event.target;
+    handleTouchMove(event: TouchEventWithScrolling): void {
+        const el = event.currentTarget as HTMLElement;
+        const target = event.target as HTMLElement;
 
         // Elements that have their own scroll behavior such as input type range never cause
         // bouncing or container scrolling.
@@ -112,8 +115,10 @@ export class TouchScroller {
             const curY = getPositionY(event);
 
             // Determine if the user is trying to scroll past the top or bottom.
-            let atTop = this._startY < curY && isAtTop(el);
-            let atBottom = this._startY > curY && isAtBottom(el);
+            let atTop =
+                this._startY !== null && this._startY < curY && isAtTop(el);
+            let atBottom =
+                this._startY !== null && this._startY > curY && isAtBottom(el);
 
             // When target is scrollable, we also need to check if the user is trying to scroll
             // past the edge of target.