@aquera/nile-elements 0.1.33 → 0.1.34-beta-1.1

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

@@ -4,58 +4,25 @@
  * 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 { LitElement, CSSResultArray, TemplateResult } from 'lit';
-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 { LitElement, html, css, CSSResultArray } from 'lit';
 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 { classMap } from 'lit/directives/class-map.js';
+import { styles } from './nile-tooltip.css';
 import NileElement from '../internal/nile-element';
-import type { CSSResultGroup } from 'lit';
-import type NilePopup from '../nile-popup/nile-popup';
+import { isInViewport, getValidTooltipPosition, getCaretPosition } from './nile-tooltip-utils';
 /**
  * Nile icon component.
  *
  * @tag nile-tooltip
  *
  */
+
 @customElement('nile-tooltip')
 export 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]`
-   */
-  public static get styles(): CSSResultArray {
-    return [styles];
-  }
-
-  private hoverTimeout: number;
-  // private readonly localize = new LocalizeController(this);
-
-  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
-  @query('.tooltip__body') body: HTMLElement;
-  @query('nile-popup') popup: NilePopup;
-
-  /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
-  @property({ type: String, reflect: true }) content = '';
-
-  /** Size Property to decide the tool tip size */
+  @property({ type: String }) content = '';
   @property({ reflect: true }) size: 'small' | 'large' = 'small';
-
-  /**
-   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
-   * inside of the viewport.
-   */
-  @property() placement:
+  @property({ type: String })
+  placement:
     | 'top'
     | 'top-start'
     | 'top-end'
@@ -67,258 +34,209 @@ export class NileTooltip extends NileElement {
     | 'bottom-end'
     | 'left'
     | 'left-start'
-    | 'left-end' = 'top';
-
-  /** Disables the tooltip so it won't show when triggered. */
+    | 'left-end' = 'bottom';
   @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /** The distance in pixels from which to offset the tooltip away from its target. */
-  @property({ type: Number }) distance = 8;
-
-  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
   @property({ type: Boolean, reflect: true }) open = false;
-
-  /** The distance in pixels from which to offset the tooltip along its target. */
-  @property({ type: Number }) 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.
    */
-  @property() trigger = 'hover focus';
+  @property() trigger = 'hover focus';  
+  @property({ type: Number }) distance = 8;
+  private readonly SHIFT_OFFSET = 16;
+/** The distance in pixels from which to offset the tooltip along its target. */
+  @property({ type: Number }) skidding = 0;
+  @property({ type: Boolean, reflect: true }) hoist = false;
 
-  /**
-   * 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.
-   */
-  @property({ type: Boolean }) hoist = false;
+  @query('.tooltip') tooltip!: HTMLElement;
+  @query('.trigger-container') triggerContainer!: HTMLElement;
+  @query('.tooltip-caret') caret!: HTMLElement;
+  @query('slot[name="content"]') tooltipSlot!: HTMLSlotElement;
 
-  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);
+  private hasTooltipSlot = false;
+  private hoverTimeout: number = 0;
+  private caretSize = 6;
+  private originalPlacement: string = this.placement;
 
-    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);
-    });
+  public static get styles(): CSSResultArray {
+    return [styles];
   }
 
-  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();
-    }
+  connectedCallback() {
+    super.connectedCallback();
+    this.originalPlacement = this.placement;
+    window.addEventListener('resize', this.updateTooltipPosition);
+    window.addEventListener('scroll', this.updateTooltipPosition, true);
   }
 
-  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);
-  }
+  updated(changedProps: Map<string, unknown>) {
+    super.updated?.(changedProps);
 
-  private handleBlur() {
-    if (this.hasTrigger('focus')) {
-      this.hide();
-    }
-  }
+    const validPlacements = [
+      'top', 'top-start', 'top-end',
+      'right', 'right-start', 'right-end',
+      'bottom', 'bottom-start', 'bottom-end',
+      'left', 'left-start', 'left-end'
+    ];
 
-  private handleClick() {
-    if (this.hasTrigger('click')) {
-      if (this.open) {
-        this.hide();
-      } else {
-        this.show();
-      }
+    if (!validPlacements.includes(this.placement)) {
+      console.warn(`[nile-tooltip] Invalid placement "${this.placement}", defaulting to "bottom".`);
+      this.placement = 'bottom';
     }
-  }
 
-  private handleFocus() {
-    if (this.hasTrigger('focus')) {
-      this.show();
+    if (!validPlacements.includes(this.originalPlacement)) {
+      this.originalPlacement = 'bottom';
     }
   }
 
-  private handleKeyDown(event: KeyboardEvent) {
-    // Pressing escape when the target element has focus should dismiss the tooltip
-    if (this.open && event.key === 'Escape') {
-      event.stopPropagation();
-      this.hide();
-    }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('resize', this.updateTooltipPosition);
+    window.removeEventListener('scroll', this.updateTooltipPosition, true);
   }
 
-  private handleMouseOver() {
-    if (this.hasTrigger('hover')) {
-      const delay = parseDuration(
-        getComputedStyle(this).getPropertyValue('--show-delay')
-      );
-      clearTimeout(this.hoverTimeout);
-      this.hoverTimeout = window.setTimeout(() => this.show(), delay);
-    }
+  private handleTooltipSlotChange() {
+    const nodes = this.tooltipSlot.assignedNodes({ flatten: true });
+    this.hasTooltipSlot = nodes.length > 0;
+    this.requestUpdate();
   }
 
-  private handleMouseOut() {
-    if (this.hasTrigger('hover')) {
-      const delay = parseDuration(
-        getComputedStyle(this).getPropertyValue('--hide-delay')
-      );
-      clearTimeout(this.hoverTimeout);
-      this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
+  private updateTooltipPosition = () => {
+    if (!isInViewport(this.triggerContainer)) {
+      this.open = false;
+      return;
     }
-  }
 
-  private hasTrigger(triggerType: string) {
-    const triggers = this.trigger.split(' ');
-    return triggers.includes(triggerType);
-  }
+    const triggerRect = this.triggerContainer.getBoundingClientRect();
+    const tooltipRect = this.tooltip.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    const { top, left, placement } = getValidTooltipPosition(
+      triggerRect,
+      tooltipRect,
+      this.originalPlacement,
+      this.distance,
+      this.skidding,
+      this.caretSize,
+      viewportWidth,
+      viewportHeight
+    );
+
+    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
+    });
 
-  @watch('open', { waitUntilFirstUpdate: true })
-  async handleOpenChange() {
-    if (this.open) {
-      if (this.disabled) {
-        return;
-      }
+    this.caret.style.left = `${caretLeft}px`;
+    this.caret.style.top = `${caretTop}px`;
+  };
 
-      // Show
+  private showTooltip = () => {
+    const trimmedContent = this.content.trim();
+    if (!trimmedContent && !this.hasTooltipSlot) {
+      return;
+    }
+    if (!this.disabled && isInViewport(this.triggerContainer)) {
       this.emit('nile-show');
-
-      await stopAnimations(this.body);
-      this.body.hidden = false;
-      this.popup.active = true;
-      const { keyframes, options } = getAnimation(this, 'tooltip.show', {
-        dir: '',
+      this.open = true;
+      this.updateComplete.then(() => {
+        this.updateTooltipPosition();
+        this.emit('nile-after-show');
       });
-      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.open = false;
+    }
+  };
 
+  private hideTooltip = () => {
+    this.emit('nile-hide');
+    this.open = false;
+    setTimeout(() => {
       this.emit('nile-after-hide');
-    }
-  }
+    }, 200);
+  };
 
-  @watch(['content', 'distance', 'hoist', 'placement', 'skidding'])
-  async handleOptionsChange() {
-    if (this.hasUpdated) {
-      await this.updateComplete;
-      this.popup.reposition();
+  private handleMouseOver = () => {
+    if (this.trigger.includes('hover')) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 150);
     }
-  }
+  };
 
-  @watch('disabled')
-  handleDisabledChange() {
-    if (this.disabled && this.open) {
-      this.hide();
+  private handleMouseOut = () => {
+    if (this.trigger.includes('hover')) {
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 0);
     }
-  }
+  };
 
-  /** Shows the tooltip. */
-  async show() {
-    if (this.open || !this.content?.trim().length) {
-      return undefined;
+  private handleClick = () => {
+    if (this.trigger.includes('click')) {
+      if (!this.open && isInViewport(this.triggerContainer)) {
+        this.showTooltip();
+      } else {
+        this.hideTooltip();
+      }
     }
+  };
 
-    this.open = true;
-    return waitForEvent(this, 'nile-after-show');
-  }
-
-  /** Hides the tooltip */
-  async hide() {
-    if (!this.open) {
-      return undefined;
+  private handleFocus = () => {
+    if (this.trigger.includes('focus')) {
+      this.showTooltip();
     }
+  };
 
-    this.open = false;
-    return waitForEvent(this, 'nile-after-hide');
-  }
+  private handleBlur = () => {
+    if (this.trigger.includes('focus')) {
+      this.hideTooltip();
+    }
+  };
 
   render() {
     return html`
-      <nile-popup
-        part="base"
-        exportparts="
-          popup:base__popup,
-          arrow:base__arrow
-        "
+      <div
         class=${classMap({
           tooltip: true,
-          'tooltip--open': this.open,
+          'tooltip__body--large': this.size === 'large',
         })}
-        placement=${this.placement}
-        distance=${this.distance}
-        skidding=${this.skidding}
-        strategy=${this.hoist ? 'fixed' : 'absolute'}
-        flip
-        shift
-        arrow
+        id="tooltip"
       >
-        <slot slot="anchor" aria-describedby="tooltip"></slot>
-
-        <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="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>
+
+      <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>
     `;
   }
 }
 
-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;
-
 declare global {
   interface HTMLElementTagNameMap {
     'nile-tooltip': NileTooltip;
   }
 }
+