@aquera/nile-elements 0.1.38 → 0.1.39-beta-1.0

package/dist/src/nile-tooltip/nile-tooltip.d.ts

@@ -4,75 +4,53 @@
  * This source code is licensed under the BSD-3-Clause license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { CSSResultArray, TemplateResult } from 'lit';
-import '../nile-popup/nile-popup';
+import { CSSResultArray } from 'lit';
 import NileElement from '../internal/nile-element';
-import type NilePopup from '../nile-popup/nile-popup';
 /**
- * Nile icon component.
+ * Nile tooltip component.
  *
  * @tag nile-tooltip
  *
  */
 export declare class NileTooltip extends NileElement {
-    /**
-     * The styles for Tooltip
-     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-     */
-    static get styles(): CSSResultArray;
-    private hoverTimeout;
-    defaultSlot: HTMLSlotElement;
-    body: HTMLElement;
-    popup: NilePopup;
-    /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
     content: string;
-    /** Size Property to decide the tool tip size */
-    size: 'small' | 'large';
-    /**
-     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
-     * inside of the viewport.
-     */
     placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
-    /** Disables the tooltip so it won't show when triggered. */
     disabled: boolean;
-    /** The distance in pixels from which to offset the tooltip away from its target. */
-    distance: number;
-    /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
     open: boolean;
-    /** The distance in pixels from which to offset the tooltip along its target. */
-    skidding: number;
     /**
      * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
      * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
      * programmatically.
      */
     trigger: string;
-    /**
-     * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
-     * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
-     * scenarios.
-     */
+    distance: number;
+    private readonly SHIFT_OFFSET;
+    /** The distance in pixels from which to offset the tooltip along its target. */
+    skidding: number;
     hoist: boolean;
+    tooltip: HTMLElement;
+    triggerContainer: HTMLElement;
+    caret: HTMLElement;
+    tooltipSlot: HTMLSlotElement;
+    private hasTooltipSlot;
+    private hoverTimeout;
+    private caretSize;
+    private originalPlacement;
+    static get styles(): CSSResultArray;
     connectedCallback(): void;
-    firstUpdated(): void;
+    updated(changedProps: Map<string, unknown>): void;
     disconnectedCallback(): void;
-    private handleBlur;
-    private handleClick;
-    private handleFocus;
-    private handleKeyDown;
+    private handleTooltipSlotChange;
+    private updateTooltipPosition;
+    private showTooltip;
+    private hideTooltip;
     private handleMouseOver;
     private handleMouseOut;
-    private hasTrigger;
-    handleOpenChange(): Promise<void>;
-    handleOptionsChange(): Promise<void>;
-    handleDisabledChange(): void;
-    /** Shows the tooltip. */
-    show(): Promise<void>;
-    /** Hides the tooltip */
-    hide(): Promise<void>;
-    render(): TemplateResult<1>;
+    private handleClick;
+    private handleFocus;
+    private handleBlur;
+    render(): import("lit-html").TemplateResult<1>;
 }
-export default NileTooltip;
 declare global {
     interface HTMLElementTagNameMap {
         'nile-tooltip': NileTooltip;

package/dist/src/nile-tooltip/nile-tooltip.js

@@ -1,23 +1,17 @@
+import { __decorate } from "tslib";
 /**
  * Copyright Aquera Inc 2023
  *
  * This source code is licensed under the BSD-3-Clause license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { __decorate } from "tslib";
-import { styles } from './nile-tooltip.css';
-import '../nile-popup/nile-popup';
-import { animateTo, parseDuration, stopAnimations } from '../internal/animate';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property, query } from 'lit/decorators.js';
-import { getAnimation, setDefaultAnimation, } from '../utilities/animation-registry';
 import { html } from 'lit';
-// import { LocalizeController } from '../utilities/localize';
-import { waitForEvent } from '../internal/event';
-import { watch } from '../internal/watch';
+import { customElement, property, query } from 'lit/decorators.js';
+import { styles } from './nile-tooltip.css';
 import NileElement from '../internal/nile-element';
+import { isInViewport, getValidTooltipPosition, getCaretPosition } from './nile-tooltip-utils';
 /**
- * Nile icon component.
+ * Nile tooltip component.
  *
  * @tag nile-tooltip
  *
@@ -25,279 +19,288 @@ import NileElement from '../internal/nile-element';
 let NileTooltip = class NileTooltip extends NileElement {
     constructor() {
         super(...arguments);
-        /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
         this.content = '';
-        /** Size Property to decide the tool tip size */
-        this.size = 'small';
-        /**
-         * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
-         * inside of the viewport.
-         */
         this.placement = 'top';
-        /** Disables the tooltip so it won't show when triggered. */
         this.disabled = false;
-        /** The distance in pixels from which to offset the tooltip away from its target. */
-        this.distance = 8;
-        /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
         this.open = false;
-        /** The distance in pixels from which to offset the tooltip along its target. */
-        this.skidding = 0;
         /**
          * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
          * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
          * programmatically.
          */
         this.trigger = 'hover focus';
-        /**
-         * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
-         * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
-         * scenarios.
-         */
+        this.distance = 8;
+        this.SHIFT_OFFSET = 16;
+        /** The distance in pixels from which to offset the tooltip along its target. */
+        this.skidding = 0;
         this.hoist = false;
+        this.hasTooltipSlot = false;
+        this.hoverTimeout = 0;
+        this.caretSize = 6;
+        this.originalPlacement = this.placement;
+        this.updateTooltipPosition = () => {
+            if (!isInViewport(this.triggerContainer)) {
+                this.open = false;
+                return;
+            }
+            const triggerRect = this.triggerContainer.getBoundingClientRect();
+            const tooltipRect = this.tooltip.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            let { top, left, placement } = getValidTooltipPosition(triggerRect, tooltipRect, this.originalPlacement, this.distance, this.skidding, this.caretSize, viewportWidth, viewportHeight);
+            // FallBack Positions
+            // Bottom
+            if (this.originalPlacement.startsWith('bottom')) {
+                const availableSpaceBelow = viewportHeight - triggerRect.bottom;
+                if (availableSpaceBelow < tooltipRect.height + this.distance) {
+                    let newPlacement = 'top';
+                    if (this.originalPlacement === 'bottom-start') {
+                        newPlacement = 'top';
+                    }
+                    else if (this.originalPlacement === 'bottom-end') {
+                        newPlacement = 'top';
+                    }
+                    const newPosition = getValidTooltipPosition(triggerRect, tooltipRect, newPlacement, this.distance, this.skidding, this.caretSize, viewportWidth, viewportHeight);
+                    top = newPosition.top;
+                    left = newPosition.left;
+                    placement = newPosition.placement;
+                }
+            }
+            // Top
+            if (this.originalPlacement.startsWith('top')) {
+                const availableSpaceAbove = triggerRect.top;
+                const availableSpaceBelow = viewportHeight - triggerRect.bottom;
+                if (availableSpaceAbove < tooltipRect.height + this.distance && availableSpaceBelow >= tooltipRect.height + this.distance) {
+                    let newPlacement = 'bottom';
+                    if (this.originalPlacement === 'top-start') {
+                        newPlacement = 'bottom-start';
+                    }
+                    else if (this.originalPlacement === 'top-end') {
+                        newPlacement = 'bottom-end';
+                    }
+                    const newPosition = getValidTooltipPosition(triggerRect, tooltipRect, newPlacement, this.distance, this.skidding, this.caretSize, viewportWidth, viewportHeight);
+                    top = newPosition.top;
+                    left = newPosition.left;
+                    placement = newPosition.placement;
+                }
+            }
+            // Left
+            if (this.originalPlacement.startsWith('left')) {
+                const availableSpaceLeft = triggerRect.left;
+                const availableSpaceRight = viewportWidth - triggerRect.right;
+                if (availableSpaceLeft < tooltipRect.width + this.distance && availableSpaceRight >= tooltipRect.width + this.distance) {
+                    let newPlacement = 'right';
+                    if (this.originalPlacement === 'left-start') {
+                        newPlacement = 'right-start';
+                    }
+                    else if (this.originalPlacement === 'left-end') {
+                        newPlacement = 'right-end';
+                    }
+                    const newPosition = getValidTooltipPosition(triggerRect, tooltipRect, newPlacement, this.distance, this.skidding, this.caretSize, viewportWidth, viewportHeight);
+                    top = newPosition.top;
+                    left = newPosition.left;
+                    placement = newPosition.placement;
+                }
+            }
+            // Right
+            if (this.originalPlacement.startsWith('right')) {
+                const availableSpaceRight = viewportWidth - triggerRect.right;
+                const availableSpaceLeft = triggerRect.left;
+                if (availableSpaceRight < tooltipRect.width + this.distance && availableSpaceLeft >= tooltipRect.width + this.distance) {
+                    let newPlacement = 'left';
+                    if (this.originalPlacement === 'right-start') {
+                        newPlacement = 'left-start';
+                    }
+                    else if (this.originalPlacement === 'right-end') {
+                        newPlacement = 'left-end';
+                    }
+                    const newPosition = getValidTooltipPosition(triggerRect, tooltipRect, newPlacement, this.distance, this.skidding, this.caretSize, viewportWidth, viewportHeight);
+                    top = newPosition.top;
+                    left = newPosition.left;
+                    placement = newPosition.placement;
+                }
+            }
+            this.setAttribute('placement', placement);
+            this.tooltip.style.top = `${top}px`;
+            this.tooltip.style.left = `${left}px`;
+            const { caretLeft, caretTop } = getCaretPosition({
+                placement,
+                tooltipRect,
+                triggerRect,
+                caretSize: this.caretSize,
+                left,
+                top
+            });
+            this.caret.style.left = `${caretLeft}px`;
+            this.caret.style.top = `${caretTop}px`;
+        };
+        this.showTooltip = () => {
+            const trimmedContent = this.content.trim();
+            if (!trimmedContent && !this.hasTooltipSlot) {
+                return;
+            }
+            if (!this.disabled && isInViewport(this.triggerContainer)) {
+                this.emit('nile-show');
+                this.open = true;
+                this.updateComplete.then(() => {
+                    requestAnimationFrame(() => {
+                        this.updateTooltipPosition();
+                        this.emit('nile-after-show');
+                    });
+                });
+            }
+            else {
+                this.open = false;
+            }
+        };
+        this.hideTooltip = () => {
+            this.emit('nile-hide');
+            this.open = false;
+            setTimeout(() => {
+                this.emit('nile-after-hide');
+            }, 200);
+        };
+        this.handleMouseOver = () => {
+            if (this.trigger.includes('hover')) {
+                clearTimeout(this.hoverTimeout);
+                this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 300);
+            }
+        };
+        this.handleMouseOut = () => {
+            if (this.trigger.includes('hover')) {
+                clearTimeout(this.hoverTimeout);
+                this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 150);
+            }
+        };
+        this.handleClick = () => {
+            if (this.trigger.includes('click')) {
+                if (!this.open && isInViewport(this.triggerContainer)) {
+                    this.showTooltip();
+                }
+                else {
+                    this.hideTooltip();
+                }
+            }
+        };
+        this.handleFocus = () => {
+            if (this.trigger.includes('focus')) {
+                this.showTooltip();
+            }
+        };
+        this.handleBlur = () => {
+            if (this.trigger.includes('focus')) {
+                this.hideTooltip();
+            }
+        };
     }
-    /**
-     * The styles for Tooltip
-     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-     */
     static get styles() {
         return [styles];
     }
     connectedCallback() {
         super.connectedCallback();
-        this.handleBlur = this.handleBlur.bind(this);
-        this.handleClick = this.handleClick.bind(this);
-        this.handleFocus = this.handleFocus.bind(this);
-        this.handleKeyDown = this.handleKeyDown.bind(this);
-        this.handleMouseOver = this.handleMouseOver.bind(this);
-        this.handleMouseOut = this.handleMouseOut.bind(this);
-        this.updateComplete.then(() => {
-            this.addEventListener('blur', this.handleBlur, true);
-            this.addEventListener('focus', this.handleFocus, true);
-            this.addEventListener('click', this.handleClick);
-            this.addEventListener('keydown', this.handleKeyDown);
-            this.addEventListener('mouseover', this.handleMouseOver);
-            this.addEventListener('mouseout', this.handleMouseOut);
-        });
+        this.originalPlacement = this.placement;
+        window.addEventListener('resize', this.updateTooltipPosition);
+        window.addEventListener('scroll', this.updateTooltipPosition, true);
     }
-    firstUpdated() {
-        this.body.hidden = !this.open;
-        // If the tooltip is visible on init, update its position
-        if (this.open) {
-            this.popup.active = true;
-            this.popup.reposition();
+    updated(changedProps) {
+        super.updated?.(changedProps);
+        const validPlacements = [
+            'top', 'top-start', 'top-end',
+            'right', 'right-start', 'right-end',
+            'bottom', 'bottom-start', 'bottom-end',
+            'left', 'left-start', 'left-end'
+        ];
+        if (!validPlacements.includes(this.placement)) {
+            console.warn(`[nile-tooltip] Invalid placement "${this.placement}", defaulting to "bottom".`);
+            this.placement = 'top';
         }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('blur', this.handleBlur, true);
-        this.removeEventListener('focus', this.handleFocus, true);
-        this.removeEventListener('click', this.handleClick);
-        this.removeEventListener('keydown', this.handleKeyDown);
-        this.removeEventListener('mouseover', this.handleMouseOver);
-        this.removeEventListener('mouseout', this.handleMouseOut);
-    }
-    handleBlur() {
-        if (this.hasTrigger('focus')) {
-            this.hide();
+        if (!validPlacements.includes(this.originalPlacement)) {
+            this.originalPlacement = 'top';
         }
-    }
-    handleClick() {
-        if (this.hasTrigger('click')) {
-            if (this.open) {
-                this.hide();
-            }
-            else {
-                this.show();
-            }
-        }
-    }
-    handleFocus() {
-        if (this.hasTrigger('focus')) {
-            this.show();
-        }
-    }
-    handleKeyDown(event) {
-        // Pressing escape when the target element has focus should dismiss the tooltip
-        if (this.open && event.key === 'Escape') {
-            event.stopPropagation();
-            this.hide();
-        }
-    }
-    handleMouseOver() {
-        if (this.hasTrigger('hover')) {
-            const delay = parseDuration(getComputedStyle(this).getPropertyValue('--show-delay'));
-            clearTimeout(this.hoverTimeout);
-            this.hoverTimeout = window.setTimeout(() => this.show(), delay);
-        }
-    }
-    handleMouseOut() {
-        if (this.hasTrigger('hover')) {
-            const delay = parseDuration(getComputedStyle(this).getPropertyValue('--hide-delay'));
-            clearTimeout(this.hoverTimeout);
-            this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
-        }
-    }
-    hasTrigger(triggerType) {
-        const triggers = this.trigger.split(' ');
-        return triggers.includes(triggerType);
-    }
-    async handleOpenChange() {
-        if (this.open) {
-            if (this.disabled) {
-                return;
-            }
-            // Show
-            this.emit('nile-show');
-            await stopAnimations(this.body);
-            this.body.hidden = false;
-            this.popup.active = true;
-            const { keyframes, options } = getAnimation(this, 'tooltip.show', {
-                dir: '',
+        if (changedProps.has('open') && this.open) {
+            this.updateComplete.then(() => {
+                requestAnimationFrame(() => {
+                    this.updateTooltipPosition();
+                });
             });
-            await animateTo(this.popup.popup, keyframes, options);
-            this.emit('nile-after-show');
-        }
-        else {
-            // Hide
-            this.emit('nile-hide');
-            await stopAnimations(this.body);
-            const { keyframes, options } = getAnimation(this, 'tooltip.hide', {
-                dir: '',
-            });
-            await animateTo(this.popup.popup, keyframes, options);
-            this.popup.active = false;
-            this.body.hidden = true;
-            this.emit('nile-after-hide');
         }
     }
-    async handleOptionsChange() {
-        if (this.hasUpdated) {
-            await this.updateComplete;
-            this.popup.reposition();
-        }
-    }
-    handleDisabledChange() {
-        if (this.disabled && this.open) {
-            this.hide();
-        }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('resize', this.updateTooltipPosition);
+        window.removeEventListener('scroll', this.updateTooltipPosition, true);
     }
-    /** Shows the tooltip. */
-    async show() {
-        if (this.open || !this.content?.trim().length) {
-            return undefined;
-        }
-        this.open = true;
-        return waitForEvent(this, 'nile-after-show');
-    }
-    /** Hides the tooltip */
-    async hide() {
-        if (!this.open) {
-            return undefined;
-        }
-        this.open = false;
-        return waitForEvent(this, 'nile-after-hide');
+    handleTooltipSlotChange() {
+        const nodes = this.tooltipSlot.assignedNodes({ flatten: true });
+        this.hasTooltipSlot = nodes.length > 0;
+        this.requestUpdate();
     }
     render() {
         return html `
-      <nile-popup
-        part="base"
-        exportparts="
-          popup:base__popup,
-          arrow:base__arrow
-        "
-        class=${classMap({
-            tooltip: true,
-            'tooltip--open': this.open,
-        })}
-        placement=${this.placement}
-        distance=${this.distance}
-        skidding=${this.skidding}
-        strategy=${this.hoist ? 'fixed' : 'absolute'}
-        flip
-        shift
-        arrow
+      <div
+        class="tooltip"
+        id="tooltip"
       >
-        <slot slot="anchor" aria-describedby="tooltip"></slot>
+        <div class="tooltip-content" part="content">
+          <slot name="content" @slotchange=${this.handleTooltipSlotChange}></slot>
+          ${!this.hasTooltipSlot ? html `${this.content}` : null}
+        </div>
+        <div class="tooltip-caret" style="--caret-size: ${this.caretSize}px;"></div>
+      </div>
 
-        <slot
-          name="content"
-          part="body"
-          id="tooltip"
-          class=${classMap({
-            tooltip__body: true,
-            'tooltip__body--large': this.size === 'large',
-        })}
-          role="tooltip"
-          aria-live=${this.open ? 'polite' : 'off'}
-        >
-          ${this.content}
-        </slot>
-      </nile-popup>
+      <div
+        class="trigger-container"
+        tabindex="0"
+        @mouseover=${this.handleMouseOver}
+        @mouseout=${this.handleMouseOut}
+        @click=${this.handleClick}
+        @focusin=${this.handleFocus}
+        @focusout=${this.handleBlur}
+        aria-describedby="tooltip"
+      >
+        <slot></slot>
+      </div>
     `;
     }
 };
 __decorate([
-    query('slot:not([name])')
-], NileTooltip.prototype, "defaultSlot", void 0);
-__decorate([
-    query('.tooltip__body')
-], NileTooltip.prototype, "body", void 0);
-__decorate([
-    query('nile-popup')
-], NileTooltip.prototype, "popup", void 0);
-__decorate([
-    property({ type: String, reflect: true })
+    property({ type: String })
 ], NileTooltip.prototype, "content", void 0);
 __decorate([
-    property({ reflect: true })
-], NileTooltip.prototype, "size", void 0);
-__decorate([
-    property()
+    property({ type: String })
 ], NileTooltip.prototype, "placement", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileTooltip.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Number })
-], NileTooltip.prototype, "distance", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileTooltip.prototype, "open", void 0);
-__decorate([
-    property({ type: Number })
-], NileTooltip.prototype, "skidding", void 0);
 __decorate([
     property()
 ], NileTooltip.prototype, "trigger", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Number })
+], NileTooltip.prototype, "distance", void 0);
+__decorate([
+    property({ type: Number })
+], NileTooltip.prototype, "skidding", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
 ], NileTooltip.prototype, "hoist", void 0);
 __decorate([
-    watch('open', { waitUntilFirstUpdate: true })
-], NileTooltip.prototype, "handleOpenChange", null);
+    query('.tooltip')
+], NileTooltip.prototype, "tooltip", void 0);
+__decorate([
+    query('.trigger-container')
+], NileTooltip.prototype, "triggerContainer", void 0);
 __decorate([
-    watch(['content', 'distance', 'hoist', 'placement', 'skidding'])
-], NileTooltip.prototype, "handleOptionsChange", null);
+    query('.tooltip-caret')
+], NileTooltip.prototype, "caret", void 0);
 __decorate([
-    watch('disabled')
-], NileTooltip.prototype, "handleDisabledChange", null);
+    query('slot[name="content"]')
+], NileTooltip.prototype, "tooltipSlot", void 0);
 NileTooltip = __decorate([
     customElement('nile-tooltip')
 ], NileTooltip);
 export { NileTooltip };
-setDefaultAnimation('tooltip.show', {
-    keyframes: [
-        { opacity: 0, scale: 0.8 },
-        { opacity: 1, scale: 1 },
-    ],
-    options: { duration: 150, easing: 'ease' },
-});
-setDefaultAnimation('tooltip.hide', {
-    keyframes: [
-        { opacity: 1, scale: 1 },
-        { opacity: 0, scale: 0.8 },
-    ],
-    options: { duration: 150, easing: 'ease' },
-});
-export default NileTooltip;
 //# sourceMappingURL=nile-tooltip.js.map