lightning-base-components 1.28.14-alpha → 1.28.15-alpha

package/src/lightning/primitiveOverlay/__examples__/basic/basic.js

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { LightningElement } from 'lwc';
+import OverlayAlert from 'overlay/alert';
+import OverlayDemo from 'overlay/demo';
+import OverlayPanel from 'overlay/panel';
+export default class OverlayBasic extends LightningElement {
+    confirmResult = 'unset';
+    handleConfirmModal() {
+        OverlayAlert.open({
+            header: 'Are you sure?',
+            body: 'Click cancel or okay below to get a string result.',
+        }).then((result) => {
+            this.confirmResult = result;
+        });
+    }
+    confirmAltResult = 'unset';
+    handleConfirmAltModal() {
+        OverlayAlert.open({
+            header: 'Do you like this demo?',
+            body: '...',
+            okayText: 'Yes',
+            cancelText: 'Also Yes',
+        }).then((result) => {
+            this.confirmAltResult = result;
+        });
+    }
+    demoResult = 'unset';
+    handleDemoModal() {
+        OverlayDemo.open({
+            header: 'Select an Option',
+            body: 'From the list below select an item',
+            options: [
+                { id: 1, label: 'Option 1' },
+                { id: 2, label: 'Option 2' },
+            ],
+        }).then((result) => {
+            if (result === 0) {
+                this.demoResult = 'dismiss';
+            }
+            else {
+                this.demoResult = result;
+            }
+        });
+    }
+    panelResult = 'unset';
+    handlePanel() {
+        OverlayPanel.open({
+            header: 'Select an Option',
+            body: 'From the list below select an item',
+        }).then((result) => {
+            this.demoResult = result;
+        });
+    }
+}

package/src/lightning/primitiveOverlay/__examples__/demo/demo.d.ts

@@ -0,0 +1,11 @@
+export default class OverlayDemo extends LightningPrimitiveOverlay {
+    header: string;
+    body: string;
+    options: any[];
+    handleOptionClick(e: any): void;
+    handleDismiss(): void;
+    hasFocus: boolean;
+    renderedCallback(): void;
+}
+import LightningPrimitiveOverlay from 'lightning/primitiveOverlay';
+//# sourceMappingURL=demo.d.ts.map

package/src/lightning/primitiveOverlay/__examples__/demo/demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"demo.d.ts","sourceRoot":"","sources":["../../../../../../../modules/lightning/primitiveOverlay/__examples__/demo/demo.js"],"names":[],"mappings":"AAKA;IACI,eAAuB;IAEvB,aAAmB;IAEnB,eAAkB;IAElB,gCAaC;IAED,sBAEC;IAED,kBAAiB;IACjB,yBAMC;CACJ;sCArCqC,4BAA4B"}

package/src/lightning/primitiveOverlay/__examples__/demo/demo.html

@@ -0,0 +1,29 @@
+<template>
+    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
+        aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
+        <div class="slds-modal__container">
+            <header class="slds-modal__header">
+                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={handleDismiss}>
+                    <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
+                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
+                    </svg>
+                    <span class="slds-assistive-text">Close</span>
+                </button>
+                <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">{header}</h2>
+            </header>
+            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
+                <p>{body}</p>
+                <ul>
+                    <template for:each={options} for:item="option">
+                        <li key={option.id}>
+                            <button onclick={handleOptionClick} data-id={option.id}>
+                                {option.label}
+                            </button>
+                        </li>
+                    </template>
+                </ul>
+            </div>
+        </div>
+    </section>
+    <div class="slds-backdrop slds-backdrop_open"></div>
+</template>

package/src/lightning/primitiveOverlay/__examples__/demo/demo.js

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { api } from 'lwc';
+import LightningPrimitiveOverlay from 'lightning/primitiveOverlay';
+import OverlayAlert from 'overlay/alert';
+export default class OverlayDemo extends LightningPrimitiveOverlay {
+    @api
+    header = 'Header';
+    @api
+    body = 'Body';
+    @api
+    options = [];
+    handleOptionClick(e) {
+        const { target } = e;
+        const id = parseInt(target.dataset.id, 10);
+        const option = this.options.find((x) => x.id === id);
+        OverlayAlert.open({
+            header: 'Are you sure?',
+            body: `You selected "${option.label}".`,
+            okayText: `Yes, ${option.label}`,
+        }).then((result) => {
+            if (result === 'okay') {
+                this.close(parseInt(target.dataset.id, 10));
+            }
+        });
+    }
+    handleDismiss() {
+        this.close(0);
+    }
+    hasFocus = false;
+    renderedCallback() {
+        if (!this.hasFocus) {
+            const close = this.template.querySelector('header > button');
+            close.focus();
+            this.hasFocus = true;
+        }
+    }
+}

package/src/lightning/primitiveOverlay/__examples__/panel/panel.d.ts

@@ -0,0 +1,9 @@
+export default class OverlayPanel extends LightningPrimitiveOverlay {
+    header: string;
+    body: string;
+    handleDismiss(): void;
+    hasFocus: boolean;
+    renderedCallback(): void;
+}
+import LightningPrimitiveOverlay from 'lightning/primitiveOverlay';
+//# sourceMappingURL=panel.d.ts.map

package/src/lightning/primitiveOverlay/__examples__/panel/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../../../../../modules/lightning/primitiveOverlay/__examples__/panel/panel.js"],"names":[],"mappings":"AAGA;IACI,eAAuB;IAEvB,aAAmB;IAEnB,sBAEC;IAED,kBAAiB;IACjB,yBAMC;CACJ;sCAnBqC,4BAA4B"}

package/src/lightning/primitiveOverlay/__examples__/panel/panel.html

@@ -0,0 +1,17 @@
+<template>
+    <lightning-focus-trap>
+        <div class="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-left slds-is-open" aria-hidden="false">
+            <div class="slds-panel__header">
+                <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">{header}</h2>
+                <button class="slds-button slds-button_icon slds-button_icon-small slds-panel__close" title="Collapse Panel Header" onclick={handleDismiss}>
+                <svg class="slds-button__icon" aria-hidden="true">
+                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
+                </svg>
+                <span class="slds-assistive-text">Collapse Panel Header</span>
+                </button>
+            </div>
+            <div class="slds-panel__body">{body}</div>
+        </div>
+    </lightning-focus-trap>
+    <!-- <div class="slds-backdrop slds-backdrop_open"></div>-->
+</template>

package/src/lightning/primitiveOverlay/__examples__/panel/panel.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { api } from 'lwc';
+import LightningPrimitiveOverlay from 'lightning/primitiveOverlay';
+export default class OverlayPanel extends LightningPrimitiveOverlay {
+    @api
+    header = 'Header';
+    @api
+    body = 'Body';
+    handleDismiss() {
+        this.close('dismiss');
+    }
+    hasFocus = false;
+    renderedCallback() {
+        if (!this.hasFocus) {
+            const close = this.template.querySelector('div > button');
+            close.focus();
+            this.hasFocus = true;
+        }
+    }
+}

package/src/lightning/primitiveOverlay/primitiveOverlay.d.ts

@@ -0,0 +1,8 @@
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { instanceName } from 'lightning/overlayUtils';
+export default class LightningPrimitiveOverlay extends LightningShadowBaseClass {
+    static [instanceName]: string;
+    static open(apis: object): Promise<void>;
+    close(result?: any, promise?: Promise<void>): void;
+}
+//# sourceMappingURL=primitiveOverlay.d.ts.map

package/src/lightning/primitiveOverlay/primitiveOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitiveOverlay.d.ts","sourceRoot":"","sources":["../../../../../modules/lightning/primitiveOverlay/primitiveOverlay.ts"],"names":[],"mappings":"AACA,OAAO,wBAAwB,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAwBtD,MAAM,CAAC,OAAO,OAAO,yBAA0B,SAAQ,wBAAwB;IAI3E,MAAM,CAAC,CAAC,YAAY,CAAC,SAAiC;IAOtD,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAaxC,KAAK,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI;CAKrD"}

package/src/lightning/primitiveOverlay/primitiveOverlay.html

@@ -0,0 +1,4 @@
+<template>
+    <!-- This template is overridden when the class is extended. -->
+</template>
+

package/src/lightning/primitiveOverlay/primitiveOverlay.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { createElement, api } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { instanceName } from 'lightning/overlayUtils';
+import OverlayContainer from 'lightning/overlayContainer';
+const ROOT = 'body';
+const OVERLAY_CONTAINER = 'lightning-overlay-container';
+function container() {
+    let element = document.querySelector(`${ROOT} > ${OVERLAY_CONTAINER}`);
+    if (!element) {
+        element = createElement(OVERLAY_CONTAINER, {
+            is: OverlayContainer,
+        });
+        element.classList.add('slds-scope');
+        document.body.appendChild(element);
+    }
+    return element;
+}
+export default class LightningPrimitiveOverlay extends LightningShadowBaseClass {
+    static [instanceName] = 'lightning-primitive-overlay';
+    static open(apis) {
+        if (!import.meta.env.SSR) {
+            return container().push(this, apis);
+        }
+        return new Promise(() => { });
+    }
+    @api
+    close(result, promise) {
+        if (!import.meta.env.SSR) {
+            container().pop(this.template.host, result, promise);
+        }
+    }
+}

package/src/lightning/primitiveOverlay/primitiveOverlay.js-meta.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
+    <capabilities>
+        <capability>lightning__ServerRenderable</capability>
+    </capabilities>
+</LightningComponentBundle>
+

package/src/lightning/tooltipLibrary/tooltipLibrary.d.ts

@@ -37,6 +37,7 @@ export declare class Tooltip {
     _target: () => any;
     _element: () => any;
     _type: string;
+    boundHandleTooltipMouseLeave?: (event: MouseEvent | Event) => void;
     constructor(value: string, config: TooltipConfig);
     detach(): void;
     attach(): void;
@@ -45,6 +46,7 @@ export declare class Tooltip {
     addInfoListeners(): void;
     hideIfNotSelfCover(event: MouseEvent | KeyboardEvent): void;
     handleDocumentTouch(): void;
+    _handleTooltipMouseLeave: (event: MouseEvent | Event) => void;
     addToggleListeners(): void;
     handleEscape(e: KeyboardEvent): void;
     get resizeObserver(): ResizeObserver;

package/src/lightning/tooltipLibrary/tooltipLibrary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltipLibrary.d.ts","sourceRoot":"","sources":["../../../../../modules/lightning/tooltipLibrary/tooltipLibrary.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAa,MAAM,2BAA2B,CAAC;AASpE,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,eAAO,MAAM,aAAa,wCAAwC,CAAC;AAsDnE,eAAO,MAAM,WAAW;;;CAGd,CAAC;AASX,KAAK,aAAa,GAAG;IACjB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,WAAW,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,WAAW,CAAC;IAC5B,KAAK,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnD,WAAW,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,OAAO;IAChB,aAAa,EAAE,YAAY,GAAG,IAAI,CAAQ;IAC1C,SAAS,UAAQ;IACjB,YAAY,UAAS;IACrB,QAAQ,UAAS;IACjB,aAAa,UAAS;IACtB,cAAc,UAAQ;IACtB,aAAa,EAAE,YAAY,GAAG,IAAI,CAAQ;IAC1C,eAAe,MAAC;IAChB,OAAO,EAAE,aAAa,CAAM;IAC5B,MAAM,EAAE,MAAM,CAAM;IACpB,KAAK,EAAE,gBAAgB,CAAC;IACxB,OAAO,EAAE,MAAM,GAAG,CAAC;IACnB,QAAQ,EAAE,MAAM,GAAG,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;gBASF,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa;IAoChD,MAAM,IAAI,IAAI;IAOd,MAAM,IAAI,IAAI;IAQd,UAAU,IAAI,IAAI;IA0BlB,UAAU,IAAI,IAAI;IASlB,gBAAgB,IAAI,IAAI;IAsBxB,kBAAkB,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,GAAG,IAAI;IAyC3D,mBAAmB,IAAI,IAAI;IAM3B,kBAAkB,IAAI,IAAI;IA2B1B,YAAY,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAUpC,IAAI,cAAc,IAAI,cAAc,CAoCnC;IAED,IAAI,CAAC,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI;IAkDtB,IAAI,CAAC,UAAU,GAAE,OAAc,GAAG,IAAI;IAwBtC,MAAM,IAAI,IAAI;IAQd,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC;IAyCjC,eAAe,IAAI,IAAI;IAMvB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,cAAc;CAU7D"}
+{"version":3,"file":"tooltipLibrary.d.ts","sourceRoot":"","sources":["../../../../../modules/lightning/tooltipLibrary/tooltipLibrary.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAa,MAAM,2BAA2B,CAAC;AASpE,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,eAAO,MAAM,aAAa,wCAAwC,CAAC;AAsDnE,eAAO,MAAM,WAAW;;;CAGd,CAAC;AASX,KAAK,aAAa,GAAG;IACjB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,WAAW,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,WAAW,CAAC;IAC5B,KAAK,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnD,WAAW,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,OAAO;IAChB,aAAa,EAAE,YAAY,GAAG,IAAI,CAAQ;IAC1C,SAAS,UAAQ;IACjB,YAAY,UAAS;IACrB,QAAQ,UAAS;IACjB,aAAa,UAAS;IACtB,cAAc,UAAQ;IACtB,aAAa,EAAE,YAAY,GAAG,IAAI,CAAQ;IAC1C,eAAe,MAAC;IAChB,OAAO,EAAE,aAAa,CAAM;IAC5B,MAAM,EAAE,MAAM,CAAM;IACpB,KAAK,EAAE,gBAAgB,CAAC;IACxB,OAAO,EAAE,MAAM,GAAG,CAAC;IACnB,QAAQ,EAAE,MAAM,GAAG,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,KAAK,IAAI,CAAC;gBASvD,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa;IAwChD,MAAM,IAAI,IAAI;IAOd,MAAM,IAAI,IAAI;IAQd,UAAU,IAAI,IAAI;IA0BlB,UAAU,IAAI,IAAI;IASlB,gBAAgB,IAAI,IAAI;IAsBxB,kBAAkB,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,GAAG,IAAI;IAyC3D,mBAAmB,IAAI,IAAI;IAiB3B,wBAAwB,UAAW,UAAU,GAAG,KAAK,KAAG,IAAI,CAoC1D;IAEF,kBAAkB,IAAI,IAAI;IA2B1B,YAAY,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAUpC,IAAI,cAAc,IAAI,cAAc,CA6CnC;IAED,IAAI,CAAC,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI;IAkDtB,IAAI,CAAC,UAAU,GAAE,OAAc,GAAG,IAAI;IA+BtC,MAAM,IAAI,IAAI;IAQd,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC;IAyCjC,eAAe,IAAI,IAAI;IAMvB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,cAAc;CAU7D"}

package/src/lightning/tooltipLibrary/tooltipLibrary.js

@@ -51,6 +51,7 @@ export class Tooltip {
     _target;
     _element;
     _type;
+    boundHandleTooltipMouseLeave;
     constructor(value, config) {
         assert(!!config.target, 'target for tooltip is undefined or missing');
         this.value = value;
@@ -76,6 +77,10 @@ export class Tooltip {
         this.handleDocumentTouch = this.handleDocumentTouch.bind(this);
         this.handleEscape = this.handleEscape.bind(this);
         this.hide = this.hide.bind(this);
+        if (features.enableTooltipFlashingFix) {
+            this.boundHandleTooltipMouseLeave =
+                this._handleTooltipMouseLeave.bind(this);
+        }
     }
     detach() {
         this._disabled = true;
@@ -161,6 +166,30 @@ export class Tooltip {
             this.hide();
         }
     }
+    _handleTooltipMouseLeave = (event) => {
+        if (!this._visible) {
+            return;
+        }
+        if (event instanceof MouseEvent && event.clientX && event.clientY) {
+            try {
+                const target = this._target();
+                if (target) {
+                    const { clientX, clientY } = event;
+                    const { left, right, top, bottom } = target.getBoundingClientRect();
+                    const tolerance = 1;
+                    if (clientX >= left - tolerance &&
+                        clientX <= right + tolerance &&
+                        clientY >= top - tolerance &&
+                        clientY <= bottom + tolerance) {
+                        return;
+                    }
+                }
+            }
+            catch (ex) {
+            }
+        }
+        this.hide();
+    };
     addToggleListeners() {
         const target = this._target();
         if (!this._initialized && target) {
@@ -200,11 +229,19 @@ export class Tooltip {
                         this.hide(false);
                         return;
                     }
-                    this.startPositioning().then(() => {
+                    this.startPositioning()
+                        .then(() => {
                         if (this._initialResize) {
-                            tooltip.addEventListener('mouseleave', this.hide);
+                            if (features.enableTooltipFlashingFix) {
+                                tooltip.addEventListener('mouseleave', this.boundHandleTooltipMouseLeave);
+                            }
+                            else {
+                                tooltip.addEventListener('mouseleave', this.hide);
+                            }
                             this._initialResize = false;
                         }
+                    })
+                        .catch(() => {
                     });
                 }
             });
@@ -253,7 +290,12 @@ export class Tooltip {
         this.stopPositioning();
         document.removeEventListener('touchstart', this.handleDocumentTouch);
         document.removeEventListener('keydown', this.handleEscape);
-        tooltip.removeEventListener('mouseleave', this.hide);
+        if (features.enableTooltipFlashingFix) {
+            tooltip.removeEventListener('mouseleave', this.boundHandleTooltipMouseLeave);
+        }
+        else {
+            tooltip.removeEventListener('mouseleave', this.hide);
+        }
         this.resizeObserver.unobserve(tooltip);
         if (features.enableTooltipHoverDismiss) {
             setActiveTooltip(null);