@pine-ds/core 4.0.0-mercury.0 → 4.1.0

package/dist/collection/components/pds-tooltip/pds-tooltip.js

@@ -1,49 +1,173 @@
 import { Host, h } from "@stencil/core";
-import { positionTooltip } from "../../utils/overlay";
+import { autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/dom";
 /**
  * @slot (default) - The tooltip's target element
  * @slot content - HTML content for the tooltip
  */
 export class PdsTooltip {
     constructor() {
+        /**
+         * Internal state: true if the tooltip was opened by user interaction (hover/focus),
+         * false if opened via the `opened` prop or currently closed.
+         */
+        this._isInteractiveOpen = false;
+        this.portalEl = null;
+        this.resolvedPlacement = 'right';
+        this.triggerEl = null;
+        this.contentDiv = null;
+        this.slotMutationObserver = null;
+        this.currentPathname = '';
+        this.pathnameCheckInterval = null;
+        this.stopAutoUpdate = null;
+        /**
+         * Determines whether or not the tooltip has an arrow
+         * @defaultValue true
+         */
+        this.hasArrow = true;
+        /**
+         * Enable this option when using the content slot
+         * @defaultValue false
+         */
+        this.htmlContent = false;
+        /**
+         * Determines the preferred position of the tooltip
+         * @defaultValue "right"
+         */
+        this.placement = 'right';
+        /**
+         * Sets the maximum width of the tooltip content
+         * @defaultValue "352px"
+         */
+        this.maxWidth = '352px';
+        /**
+         * Determines whether or not the tooltip is visible
+         * @defaultValue false
+         */
+        this.opened = false;
+        // connectedCallback fires on every reconnect (unlike componentWillLoad/componentDidLoad,
+        // which are one-time), so resetting this here re-arms exactly one reconnect-cleanup pass
+        // per connect instead of re-scanning on every render for the component's whole lifetime.
+        this.hasCheckedReconnect = false;
         this.handleHide = () => {
+            if (this.opened && !this._isInteractiveOpen) {
+                return;
+            }
             this.hideTooltip();
-            this.pdsTooltipHide.emit();
+            this._isInteractiveOpen = false;
         };
         this.handleShow = () => {
+            if (this.opened && !this._isInteractiveOpen) {
+                return;
+            }
+            this._isInteractiveOpen = true;
             this.showTooltip();
-            this.pdsTooltipShow.emit();
         };
-        this.isOpen = false;
-        this.content = undefined;
-        this.componentId = undefined;
-        this.hasArrow = true;
-        this.htmlContent = false;
-        this.placement = 'right';
-        this.opened = false;
+        this.handlePageShow = () => {
+            if (this.opened && !this._isInteractiveOpen) {
+                return;
+            }
+            this.opened = false;
+            this._isInteractiveOpen = false;
+        };
+        this.handleSpaNavigation = () => {
+            if (this.opened && !this._isInteractiveOpen) {
+                return;
+            }
+            this.hideTooltip();
+            this._isInteractiveOpen = false;
+        };
+        this.checkPathnameChange = () => {
+            if (window.location.pathname !== this.currentPathname) {
+                this.currentPathname = window.location.pathname;
+                this.handleSpaNavigation();
+            }
+        };
     }
-    handleOpenToggle() {
-        if (this.opened) {
-            this.handleShow();
-        }
-        else {
-            this.handleHide();
+    handleOpenToggle(newValue, oldValue) {
+        if (newValue === false && oldValue === true) {
+            this._isInteractiveOpen = false;
         }
     }
     componentWillLoad() {
-        if (this.opened) {
-            this.showTooltip();
+        this._isInteractiveOpen = false;
+        this.resolvedPlacement = this.placement;
+    }
+    componentDidLoad() {
+        window.addEventListener('pageshow', this.handlePageShow);
+        this.currentPathname = window.location.pathname;
+        this.triggerEl = this.el.querySelector('.pds-tooltip__trigger');
+        const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');
+        if (contentSlotWrapper !== null) {
+            this.slotMutationObserver = new MutationObserver(() => {
+                if (this.opened && this.portalEl !== null) {
+                    this.removePortal();
+                    this.createPortal();
+                }
+            });
+            this.slotMutationObserver.observe(contentSlotWrapper, { childList: true, subtree: false });
         }
-        this.el.addEventListener('blur', this.handleHide, true);
-        this.el.addEventListener('focus', this.handleShow, true);
+        // no return; Stencil ignores teardown functions here
     }
-    componentDidUpdate() {
-        if (this.opened) {
-            this.showTooltip();
+    connectedCallback() {
+        this.hasCheckedReconnect = false;
+    }
+    disconnectedCallback() {
+        window.removeEventListener('pageshow', this.handlePageShow);
+        if (this.slotMutationObserver !== null) {
+            this.slotMutationObserver.disconnect();
+            this.slotMutationObserver = null;
+        }
+        // Ensure global listeners/intervals are removed if still present
+        if (this.portalEl !== null) {
+            this.removePortal();
         }
+        if (this.pathnameCheckInterval !== null) {
+            clearInterval(this.pathnameCheckInterval);
+            this.pathnameCheckInterval = null;
+        }
+        // Ensure autoUpdate is stopped if still present
+        if (this.stopAutoUpdate !== null) {
+            this.stopAutoUpdate();
+            this.stopAutoUpdate = null;
+        }
+    }
+    // Unwraps stale nested trigger/content-slot-wrapper siblings left by a page-cache (Turbo, bfcache) reconnect, rerouting content-slot content back to the real content wrapper. Drains both wrappers (not just trigger) so content rerouted into contentWrapper is itself re-checked for further nesting.
+    unwrapReconnectedSlots() {
+        // Direct children only — querySelector would find a stale nested wrapper first.
+        const trigger = Array.from(this.el.children).find((child) => child.matches('.pds-tooltip__trigger'));
+        const contentWrapper = Array.from(this.el.children).find((child) => child.matches('.pds-tooltip__content-slot-wrapper'));
+        if (trigger === undefined || contentWrapper === undefined)
+            return;
+        const staleSelector = '.pds-tooltip__trigger, .pds-tooltip__content-slot-wrapper';
+        const findStaleIn = (root) => Array.from(root.children).find((child) => child.matches(staleSelector));
+        [trigger, contentWrapper].forEach((root) => {
+            let stale = findStaleIn(root);
+            while (stale !== undefined) {
+                const destination = stale.matches('.pds-tooltip__content-slot-wrapper') ? contentWrapper : trigger;
+                Array.from(stale.childNodes).forEach((node) => destination === root ? root.insertBefore(node, stale) : destination.appendChild(node));
+                stale.remove();
+                stale = findStaleIn(root);
+            }
+        });
     }
     componentDidRender() {
-        positionTooltip({ elem: this.el, elemPlacement: this.placement, overlay: this.contentEl });
+        if (!this.hasCheckedReconnect) {
+            this.unwrapReconnectedSlots();
+            this.hasCheckedReconnect = true;
+        }
+        if (this.opened && this.portalEl === null) {
+            this.createPortal();
+        }
+        else if (!this.opened && this.portalEl !== null) {
+            this.removePortal();
+        }
+        // Update portal class when opened state changes
+        if (this.portalEl !== null) {
+            this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;
+            // Update ARIA attributes to stay in sync with visual open state
+            this.portalEl.setAttribute('aria-hidden', this.opened ? 'false' : 'true');
+            this.portalEl.setAttribute('aria-live', this.opened ? 'polite' : 'off');
+        }
     }
     /**
      * Shows the tooltip by enabling the opened property
@@ -57,17 +181,172 @@ export class PdsTooltip {
     async hideTooltip() {
         this.opened = false;
     }
+    /**
+     * Determines the most accurate HTML element to use as the anchor for positioning the tooltip.
+     * If `htmlContent` is false, it attempts to find the actual element slotted as the trigger.
+     * Otherwise, or if no specific element is found, it defaults to the span wrapper around the trigger slot.
+     * This helps with precise alignment.
+     */
+    determinePositioningAnchor() {
+        let positioningAnchor = this.triggerEl;
+        if (this.triggerEl !== null) {
+            const children = this.triggerEl.childNodes;
+            for (let i = 0; i < children.length; i++) {
+                const childNode = children[i];
+                if (childNode.nodeType === Node.ELEMENT_NODE) {
+                    positioningAnchor = childNode;
+                    break; // Found the first element, use it as the anchor
+                }
+            }
+        }
+        // If no ELEMENT_NODE is found within this.triggerEl (e.g., if trigger is just text),
+        // positioningAnchor will correctly remain this.triggerEl (the span).
+        return positioningAnchor;
+    }
+    /**
+     * Centralized method to calculate and apply the tooltip's position using floating UI.
+     * Uses the determined anchor element and applies computePosition with flip, offset, and shift.
+     */
+    async repositionPortal() {
+        const anchor = this.determinePositioningAnchor();
+        if (anchor !== null && this.portalEl !== null) {
+            try {
+                const { x, y, placement: computedPlacement } = await computePosition(anchor, this.portalEl, {
+                    placement: this.placement,
+                    strategy: 'fixed',
+                    middleware: [offset(8), flip(), shift({ padding: 5 })],
+                });
+                this.resolvedPlacement = computedPlacement;
+                Object.assign(this.portalEl.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                    position: 'fixed',
+                });
+                // Update CSS classes to match the resolved placement
+                this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;
+            }
+            catch (error) {
+                console.warn('Failed to position tooltip:', error);
+                this.resolvedPlacement = this.placement; // Fallback to requested placement
+                // Fallback to basic positioning if floating UI fails
+                const anchorRect = anchor.getBoundingClientRect();
+                this.portalEl.style.left = `${anchorRect.right + 8}px`;
+                this.portalEl.style.top = `${anchorRect.top}px`;
+                this.portalEl.style.position = 'fixed';
+            }
+        }
+    }
+    createPortal() {
+        if (this.portalEl !== null)
+            return;
+        this.portalEl = document.createElement('div');
+        this.portalEl.className = `pds-tooltip pds-tooltip--${this.resolvedPlacement} ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''} ${this.opened ? 'pds-tooltip--is-open' : ''} ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}`;
+        this.portalEl.style.position = 'fixed';
+        this.portalEl.style.zIndex = 'var(--pine-z-index-nuclear)';
+        if (this.portalEl.id === '') {
+            const suffix = PdsTooltip.instanceCounter++;
+            const baseId = this.componentId || this.el.id || 'pds-tooltip';
+            this.portalEl.id = `${baseId}-portal-${suffix}`;
+        }
+        if (this.portalEl.getAttribute('id') !== this.portalEl.id) {
+            this.portalEl.setAttribute('id', this.portalEl.id);
+        }
+        this.portalEl.setAttribute('role', 'tooltip');
+        this.portalEl.setAttribute('aria-hidden', this.opened ? 'false' : 'true');
+        this.portalEl.setAttribute('aria-live', this.opened ? 'polite' : 'off');
+        this.portalEl.style.maxWidth = this.maxWidth;
+        this.contentDiv = document.createElement('div');
+        this.contentDiv.className = 'pds-tooltip__content';
+        this.contentDiv.setAttribute('aria-hidden', this.opened ? 'false' : 'true');
+        this.contentDiv.setAttribute('aria-live', this.opened ? 'polite' : 'off');
+        const contentSlotWrapper = this.el.querySelector('.pds-tooltip__content-slot-wrapper');
+        const slottedContentContainer = contentSlotWrapper === null || contentSlotWrapper === void 0 ? void 0 : contentSlotWrapper.querySelector('[slot="content"]');
+        let hasSlottedContent = false;
+        if (slottedContentContainer !== null) {
+            const childrenToClone = Array.from(slottedContentContainer.childNodes);
+            if (childrenToClone.length > 0) {
+                const hasMeaningfulNode = childrenToClone.some(node => {
+                    var _a;
+                    return node.nodeType === Node.ELEMENT_NODE ||
+                        (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '');
+                });
+                if (hasMeaningfulNode) {
+                    hasSlottedContent = true;
+                    childrenToClone.forEach((node /*, index*/) => {
+                        var _a;
+                        if (node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== '')) {
+                            this.contentDiv.appendChild(node.cloneNode(true));
+                        }
+                    });
+                }
+            }
+        }
+        if (!hasSlottedContent && typeof this.content === 'string' && this.content.trim() !== '') {
+            this.contentDiv.textContent = this.content;
+        }
+        this.portalEl.appendChild(this.contentDiv);
+        document.body.appendChild(this.portalEl);
+        this.repositionPortal().catch(error => {
+            console.warn('Failed to position tooltip on creation:', error);
+        });
+        // Use Floating UI's autoUpdate to handle scroll/resize automatically
+        if (this.triggerEl && this.portalEl) {
+            this.stopAutoUpdate = autoUpdate(this.triggerEl, this.portalEl, () => {
+                this.repositionPortal().catch(error => {
+                    console.warn('Failed to reposition tooltip on auto update:', error);
+                });
+            });
+        }
+        // Keep only SPA navigation listeners (not handled by autoUpdate)
+        window.addEventListener('popstate', this.handleSpaNavigation, true);
+        window.addEventListener('hashchange', this.handleSpaNavigation, true);
+        // Start pathname change detection
+        this.pathnameCheckInterval = setInterval(this.checkPathnameChange, 100);
+        // Add ARIA attribute to trigger, now that portalEl and its ID are confirmed
+        if (this.triggerEl !== null && this.portalEl.id !== '') {
+            this.triggerEl.setAttribute('aria-describedby', this.portalEl.id);
+        }
+    }
+    removePortal() {
+        // Stop Floating UI's autoUpdate
+        if (this.stopAutoUpdate !== null) {
+            this.stopAutoUpdate();
+            this.stopAutoUpdate = null;
+        }
+        // Stop pathname change detection
+        if (this.pathnameCheckInterval !== null) {
+            clearInterval(this.pathnameCheckInterval);
+            this.pathnameCheckInterval = null;
+        }
+        if (this.portalEl !== null) {
+            // Remove only SPA navigation listeners (scroll/resize handled by autoUpdate)
+            window.removeEventListener('popstate', this.handleSpaNavigation, true);
+            window.removeEventListener('hashchange', this.handleSpaNavigation, true);
+            // Safely remove portal from DOM
+            try {
+                if (this.portalEl.parentNode) {
+                    this.portalEl.parentNode.removeChild(this.portalEl);
+                }
+            }
+            catch (error) {
+                // Portal might have already been removed by test cleanup
+                console.warn('Portal element could not be removed from DOM:', error);
+            }
+            this.portalEl = null;
+        }
+        // Remove ARIA attribute from trigger
+        if (this.triggerEl !== null) {
+            this.triggerEl.removeAttribute('aria-describedby');
+        }
+        this.contentDiv = null;
+    }
     render() {
-        return (h(Host, { key: '52999e010e83fb265a46867b0b29169f7363a496', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: '6bb63ba10eab04114ced7ead7079d46cc22cb72c', class: `
-            pds-tooltip
-            pds-tooltip--${this.placement}
-            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}
-            ${this.opened ? 'pds-tooltip--is-open' : ''}
-            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}
-          ` }, h("span", { key: '930c148c837912ad9d5ea57e92246e0211b355c4', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '813429e2865fae92050d779ca7f47072313db851' })), h("div", { key: '7f47e8b4ff3d6238f27e38986f032ece94f6b584', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip" }, h("slot", { key: '90b3f02974d250375d55ed332a9c525626ff5439', name: "content" }), this.content))));
+        const hostId = this.componentId || undefined;
+        return (h(Host, { key: 'd9fa5c688ba3baeac14334ec9c03e887ef16115e', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '44ee5332139567d3f25070f73c1e73630f00eec4', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+            /* focusin/out bubble; ensure keyboard users see tooltips */
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: '4eb9c2f891c8cdb9d7f9d944d99bf423908cbc0f' })), h("div", { key: '985b373be21f07c14cd5c8c3095d5e8d290d3e7f', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: 'cd8d6c2dca87b7d72fd01f51e5b1d538c2d93531', name: "content" }))));
     }
     static get is() { return "pds-tooltip"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["pds-tooltip.scss"]
@@ -94,8 +373,10 @@ export class PdsTooltip {
                     "tags": [],
                     "text": "Content for the tooltip. If HTML is required, use the content slot"
                 },
-                "attribute": "content",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "content"
             },
             "componentId": {
                 "type": "string",
@@ -111,8 +392,10 @@ export class PdsTooltip {
                     "tags": [],
                     "text": "A unique identifier used for the underlying component `id` attribute."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
             },
             "hasArrow": {
                 "type": "boolean",
@@ -123,7 +406,7 @@ export class PdsTooltip {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
@@ -131,8 +414,10 @@ export class PdsTooltip {
                         }],
                     "text": "Determines whether or not the tooltip has an arrow"
                 },
-                "attribute": "has-arrow",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "has-arrow",
                 "defaultValue": "true"
             },
             "htmlContent": {
@@ -152,17 +437,26 @@ export class PdsTooltip {
                         }],
                     "text": "Enable this option when using the content slot"
                 },
-                "attribute": "html-content",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "html-content",
                 "defaultValue": "false"
             },
             "placement": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
+                    "original": "PlacementType",
                     "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-                    "references": {}
+                    "references": {
+                        "PlacementType": {
+                            "location": "import",
+                            "path": "@utils/types",
+                            "id": "src/utils/types.ts::PlacementType",
+                            "referenceLocation": "PlacementType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -173,10 +467,35 @@ export class PdsTooltip {
                         }],
                     "text": "Determines the preferred position of the tooltip"
                 },
-                "attribute": "placement",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "placement",
                 "defaultValue": "'right'"
             },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "\"352px\""
+                        }],
+                    "text": "Sets the maximum width of the tooltip content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "'352px'"
+            },
             "opened": {
                 "type": "boolean",
                 "mutable": true,
@@ -194,50 +513,19 @@ export class PdsTooltip {
                         }],
                     "text": "Determines whether or not the tooltip is visible"
                 },
-                "attribute": "opened",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "opened",
                 "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "isOpen": {}
+            "_isInteractiveOpen": {}
         };
     }
-    static get events() {
-        return [{
-                "method": "pdsTooltipHide",
-                "name": "pdsTooltipHide",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted after a tooltip is closed"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "pdsTooltipShow",
-                "name": "pdsTooltipShow",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted after a tooltip is shown"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
     static get methods() {
         return {
             "showTooltip": {
@@ -284,4 +572,4 @@ export class PdsTooltip {
             }];
     }
 }
-//# sourceMappingURL=pds-tooltip.js.map
+PdsTooltip.instanceCounter = 0;