@aquera/nile-elements 0.1.35-beta-1.2 → 0.1.35

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

@@ -4,53 +4,75 @@
  * 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 } from 'lit';
+import { CSSResultArray, TemplateResult } from 'lit';
+import '../nile-popup/nile-popup';
 import NileElement from '../internal/nile-element';
+import type NilePopup from '../nile-popup/nile-popup';
 /**
- * Nile tooltip component.
+ * Nile icon 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;
-    distance: number;
-    private readonly SHIFT_OFFSET;
-    /** The distance in pixels from which to offset the tooltip along its target. */
-    skidding: number;
+    /**
+     * 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.
+     */
     hoist: boolean;
-    tooltip: HTMLElement;
-    triggerContainer: HTMLElement;
-    caret: HTMLElement;
-    tooltipSlot: HTMLSlotElement;
-    private hasTooltipSlot;
-    private hoverTimeout;
-    private caretSize;
-    private originalPlacement;
-    static get styles(): CSSResultArray;
     connectedCallback(): void;
-    updated(changedProps: Map<string, unknown>): void;
+    firstUpdated(): void;
     disconnectedCallback(): void;
-    private handleTooltipSlotChange;
-    private updateTooltipPosition;
-    private showTooltip;
-    private hideTooltip;
-    private handleMouseOver;
-    private handleMouseOut;
+    private handleBlur;
     private handleClick;
     private handleFocus;
-    private handleBlur;
-    render(): import("lit-html").TemplateResult<1>;
+    private handleKeyDown;
+    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>;
 }
+export default NileTooltip;
 declare global {
     interface HTMLElementTagNameMap {
         'nile-tooltip': NileTooltip;

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

@@ -1,17 +1,23 @@
-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 { html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+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 NileElement from '../internal/nile-element';
-import { isInViewport, getValidTooltipPosition, getCaretPosition } from './nile-tooltip-utils';
 /**
- * Nile tooltip component.
+ * Nile icon component.
  *
  * @tag nile-tooltip
  *
@@ -19,288 +25,279 @@ import { isInViewport, getValidTooltipPosition, getCaretPosition } from './nile-
 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';
-        this.distance = 8;
-        this.SHIFT_OFFSET = 16;
-        /** The distance in pixels from which to offset the tooltip along its target. */
-        this.skidding = 0;
+        /**
+         * 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.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.originalPlacement = this.placement;
-        window.addEventListener('resize', this.updateTooltipPosition);
-        window.addEventListener('scroll', this.updateTooltipPosition, true);
+        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);
+        });
     }
-    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';
+    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();
         }
-        if (!validPlacements.includes(this.originalPlacement)) {
-            this.originalPlacement = '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 (changedProps.has('open') && this.open) {
-            this.updateComplete.then(() => {
-                requestAnimationFrame(() => {
-                    this.updateTooltipPosition();
-                });
+    }
+    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: '',
             });
+            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');
         }
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        window.removeEventListener('resize', this.updateTooltipPosition);
-        window.removeEventListener('scroll', this.updateTooltipPosition, true);
+    async handleOptionsChange() {
+        if (this.hasUpdated) {
+            await this.updateComplete;
+            this.popup.reposition();
+        }
     }
-    handleTooltipSlotChange() {
-        const nodes = this.tooltipSlot.assignedNodes({ flatten: true });
-        this.hasTooltipSlot = nodes.length > 0;
-        this.requestUpdate();
+    handleDisabledChange() {
+        if (this.disabled && this.open) {
+            this.hide();
+        }
+    }
+    /** 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');
     }
     render() {
         return html `
-      <div
-        class="tooltip"
-        id="tooltip"
+      <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-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 slot="anchor" aria-describedby="tooltip"></slot>
 
-      <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>
+        <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>
     `;
     }
 };
 __decorate([
-    property({ type: String })
+    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 })
 ], NileTooltip.prototype, "content", void 0);
 __decorate([
-    property({ type: String })
+    property({ reflect: true })
+], NileTooltip.prototype, "size", void 0);
+__decorate([
+    property()
 ], NileTooltip.prototype, "placement", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileTooltip.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NileTooltip.prototype, "open", void 0);
-__decorate([
-    property()
-], NileTooltip.prototype, "trigger", 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({ type: Boolean, reflect: true })
-], NileTooltip.prototype, "hoist", void 0);
+    property()
+], NileTooltip.prototype, "trigger", void 0);
 __decorate([
-    query('.tooltip')
-], NileTooltip.prototype, "tooltip", void 0);
+    property({ type: Boolean })
+], NileTooltip.prototype, "hoist", void 0);
 __decorate([
-    query('.trigger-container')
-], NileTooltip.prototype, "triggerContainer", void 0);
+    watch('open', { waitUntilFirstUpdate: true })
+], NileTooltip.prototype, "handleOpenChange", null);
 __decorate([
-    query('.tooltip-caret')
-], NileTooltip.prototype, "caret", void 0);
+    watch(['content', 'distance', 'hoist', 'placement', 'skidding'])
+], NileTooltip.prototype, "handleOptionsChange", null);
 __decorate([
-    query('slot[name="content"]')
-], NileTooltip.prototype, "tooltipSlot", void 0);
+    watch('disabled')
+], NileTooltip.prototype, "handleDisabledChange", null);
 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