@aquera/nile-elements 0.1.32-beta-1.2 → 0.1.32-beta-1.4

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

@@ -0,0 +1,178 @@
+import { fixture, html, assert, oneEvent, waitUntil } from '@open-wc/testing';
+import './nile-tooltip';
+import { NileTooltip } from './nile-tooltip';
+
+describe('NileTooltip', () => {
+
+  it('renders with default properties', async () => {
+    const el = await fixture<NileTooltip>(html`<nile-tooltip content="Hello"><button>Hover me</button></nile-tooltip>`);
+    assert.equal(el.content, 'Hello');
+    assert.equal(el.placement, 'bottom');
+    assert.equal(el.size, 'small');
+    assert.equal(el.disabled, false);
+    assert.equal(el.open, false);
+  });
+
+  it('renders text content when no slot is used', async () => {
+    const el = await fixture<NileTooltip>(html`<nile-tooltip content="Fallback"><button>Trigger</button></nile-tooltip>`);
+    const content = el.shadowRoot!.querySelector('.tooltip-content')!;
+    assert.include(content.textContent!, 'Fallback');
+  });
+
+  it('uses slotted content when provided', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip>
+        <div slot="content">Slot Content</div>
+        <button>Trigger</button>
+      </nile-tooltip>
+    `);
+
+    const slot = el.shadowRoot!.querySelector('slot[name="content"]') as HTMLSlotElement;
+    const assigned = slot.assignedNodes({ flatten: true });
+    assert.isAbove(assigned.length, 0);
+    assert.include(assigned[0].textContent ?? '', 'Slot Content');
+  });
+
+  it('shows tooltip on hover when trigger includes "hover"', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Tooltip" trigger="hover">
+        <button>Hover me</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container')!;
+    trigger.dispatchEvent(new Event('mouseover', { bubbles: true }));
+    await waitUntil(() => el.open === true);
+    assert.isTrue(el.open);
+  });
+
+  it('hides tooltip on mouseout when trigger includes "hover"', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Tooltip" trigger="hover">
+        <button>Hover me</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container')!;
+    trigger.dispatchEvent(new Event('mouseover', { bubbles: true }));
+    await waitUntil(() => el.open === true);
+    trigger.dispatchEvent(new Event('mouseout', { bubbles: true }));
+    await waitUntil(() => el.open === false);
+  });
+
+  it('toggles tooltip on click when trigger includes "click"', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Click me" trigger="click">
+        <button>Click</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container') as HTMLElement;
+    trigger.click();
+    await waitUntil(() => el.open === true);
+    trigger.click();
+    await waitUntil(() => el.open === false);
+  });
+
+  it('shows and hides tooltip on focus/blur when trigger includes "focus"', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Focus" trigger="focus">
+        <button>Focus</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container')!;
+    trigger.dispatchEvent(new Event('focusin'));
+    await waitUntil(() => el.open === true);
+    trigger.dispatchEvent(new Event('focusout'));
+    await waitUntil(() => el.open === false);
+  });
+
+  it('does not show tooltip when disabled', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Disabled" disabled trigger="hover">
+        <button>Hover me</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container')!;
+    trigger.dispatchEvent(new Event('mouseover'));
+    await new Promise(resolve => setTimeout(resolve, 200));
+    assert.isFalse(el.open);
+  });
+
+  it('applies size class correctly', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Tooltip" size="large">
+        <button>Trigger</button>
+      </nile-tooltip>
+    `);
+    const tooltip = el.shadowRoot!.querySelector('.tooltip')!;
+    assert.isTrue(tooltip.classList.contains('tooltip__body--large'));
+  });
+
+  it('emits nile-show and nile-after-show events', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Event test" trigger="click">
+        <button>Click</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container') as HTMLElement;
+    setTimeout(() => trigger.click());
+    const showEvent = await oneEvent(el, 'nile-show');
+    assert.ok(showEvent);
+    const afterShow = await oneEvent(el, 'nile-after-show');
+    assert.ok(afterShow);
+  });
+
+  it('emits nile-hide and nile-after-hide events', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Event test" trigger="click">
+        <button>Click</button>
+      </nile-tooltip>
+    `);
+    const trigger = el.shadowRoot!.querySelector('.trigger-container') as HTMLElement;
+    trigger.click();
+    await waitUntil(() => el.open === true);
+    setTimeout(() => trigger.click());
+    const hideEvent = await oneEvent(el, 'nile-hide');
+    assert.ok(hideEvent);
+    const afterHide = await oneEvent(el, 'nile-after-hide');
+    assert.ok(afterHide);
+  });
+
+  it('defaults to "bottom" placement when given invalid value', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip content="Fallback" placement=${'invalid' as unknown as NileTooltip['placement']} >
+        <button>Trigger</button>
+      </nile-tooltip>
+    `);
+    await el.updateComplete;
+    assert.equal(el.placement, 'bottom');
+  });
+
+
+  it('updates hasTooltipSlot on slot change', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip>
+        <div slot="content">Initial slot</div>
+        <button>Trigger</button>
+      </nile-tooltip>
+    `);
+
+    const slot = el.shadowRoot!.querySelector('slot[name="content"]') as HTMLSlotElement;
+    const newSlotNode = document.createElement('div');
+    newSlotNode.slot = 'content';
+    newSlotNode.textContent = 'Updated slot';
+    el.appendChild(newSlotNode);
+
+    slot.dispatchEvent(new Event('slotchange'));
+    await el.updateComplete;
+
+    assert.isTrue((el as any).hasTooltipSlot);
+  });
+
+  it('respects hoist attribute', async () => {
+    const el = await fixture<NileTooltip>(html`
+      <nile-tooltip hoist content="Hoisted">
+        <button>Hoist</button>
+      </nile-tooltip>
+    `);
+    assert.isTrue(el.hoist);
+  });
+});

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

@@ -1,198 +1,171 @@
-import { LitElement, html, css,  CSSResultArray } from 'lit';
+/**
+ * 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 { LitElement, html, css, CSSResultArray } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-tooltip.css';
 import NileElement from '../internal/nile-element';
+import { isInViewport, getValidTooltipPosition, getCaretPosition } from './nile-tooltip-utils';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-tooltip
+ *
+ */
 
-type TooltipPlacement = 
-  | 'top' | 'top-start' | 'top-end' 
-  | 'right' | 'right-start' | 'right-end' 
-  | 'bottom' | 'bottom-start' | 'bottom-end' 
-  | 'left' | 'left-start' | 'left-end';
-
-// CSS Anchor positiong
 @customElement('nile-tooltip')
 export class NileTooltip extends NileElement {
   @property({ type: String }) content = '';
   @property({ reflect: true }) size: 'small' | 'large' = 'small';
-  @property({ type: String }) placement: TooltipPlacement = 'top';
+  @property({ type: String })
+  placement:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end' = 'bottom';
   @property({ type: Boolean, reflect: true }) disabled = false;
   @property({ type: Boolean, reflect: true }) open = false;
-  @property() trigger = 'hover focus';
+  /**
+   * 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({ 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 }) hoist = false;
+  @property({ type: Boolean, reflect: true }) hoist = false;
 
   @query('.tooltip') tooltip!: HTMLElement;
-  @query('slot') slotElement!: HTMLSlotElement;
+  @query('.trigger-container') triggerContainer!: HTMLElement;
+  @query('.tooltip-caret') caret!: HTMLElement;
+  @query('slot[name="content"]') tooltipSlot!: HTMLSlotElement;
 
-  private hoverTimeout: number;
+  private hasTooltipSlot = false;
+  private hoverTimeout: number = 0;
+  private caretSize = 6;
+  private originalPlacement: string = this.placement;
 
-   public static get styles(): CSSResultArray {
-      return [styles];
-    }
-  
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
 
- 
- 
   connectedCallback() {
     super.connectedCallback();
+    this.originalPlacement = this.placement;
     window.addEventListener('resize', this.updateTooltipPosition);
     window.addEventListener('scroll', this.updateTooltipPosition, true);
   }
 
+  updated(changedProps: Map<string, unknown>) {
+    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 = 'bottom';
+    }
+
+    if (!validPlacements.includes(this.originalPlacement)) {
+      this.originalPlacement = 'bottom';
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     window.removeEventListener('resize', this.updateTooltipPosition);
     window.removeEventListener('scroll', this.updateTooltipPosition, true);
   }
 
-  private getBasePlacement(placement: TooltipPlacement): 'top' | 'right' | 'bottom' | 'left' {
-    return placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';
-  }
-
-  private getAlignmentModifier(placement: TooltipPlacement): 'start' | 'end' | null {
-    const parts = placement.split('-');
-    return parts.length > 1 ? parts[1] as 'start' | 'end' : null;
+  private handleTooltipSlotChange() {
+    const nodes = this.tooltipSlot.assignedNodes({ flatten: true });
+    this.hasTooltipSlot = nodes.length > 0;
+    this.requestUpdate();
   }
 
   private updateTooltipPosition = () => {
-    if (!this.tooltip || !this.open) return;
-
-    const triggerEl = this.slotElement.assignedElements()[0] as HTMLElement;
-    if (!triggerEl) return;
+    if (!isInViewport(this.triggerContainer)) {
+      this.open = false;
+      return;
+    }
 
- 
-    
-    const triggerRect = triggerEl.getBoundingClientRect();
+    const triggerRect = this.triggerContainer.getBoundingClientRect();
     const tooltipRect = this.tooltip.getBoundingClientRect();
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
-    
-    let top = 0, left = 0;
-    let finalPlacement = this.placement;
-    const basePlacement = this.getBasePlacement(this.placement);
-    const alignment = this.getAlignmentModifier(this.placement);
-
-     
-    const fitsLeft = triggerRect.left - tooltipRect.width - this.distance > 0;
-    const fitsRight = triggerRect.right + tooltipRect.width + this.distance < viewportWidth;
-    const fitsBottom = triggerRect.bottom + tooltipRect.height + this.distance < viewportHeight;
-    const fitsTop = triggerRect.top - tooltipRect.height - this.distance > 0;
-
-   
-    let finalBasePlacement = basePlacement;
-    
- 
-    if ((basePlacement === 'left' && !fitsLeft) || (basePlacement === 'right' && !fitsRight)) {
-      finalBasePlacement = fitsBottom ? 'bottom' : (fitsTop ? 'top' : 'bottom');
-    } 
- 
-    else if (basePlacement === 'top' && !fitsTop) {
-      finalBasePlacement = fitsBottom ? 'bottom' : (fitsLeft ? 'left' : 'right');
-    } else if (basePlacement === 'bottom' && !fitsBottom) {
-      finalBasePlacement = fitsTop ? 'top' : (fitsLeft ? 'left' : 'right');
-    }
-
-     
-    let finalAlignment = alignment;
-    
- 
-    if ((basePlacement === 'left' || basePlacement === 'right') && 
-        (finalBasePlacement === 'top' || finalBasePlacement === 'bottom')) {
-       
-      if (alignment === 'start') {
-        finalAlignment = 'start';
-      } else if (alignment === 'end') {
-        finalAlignment = 'end';
-      }
-    }
-
-   
-    switch (finalBasePlacement) {
-      case 'left':
-        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + this.skidding;
-        left = triggerRect.left - tooltipRect.width - this.distance;
-        break;
-      case 'right':
-        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 + this.skidding;
-        left = triggerRect.right + this.distance;
-        break;
-      case 'top':
-        top = triggerRect.top - tooltipRect.height - this.distance;
-        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + this.skidding;
-        break;
-      case 'bottom':
-        top = triggerRect.bottom + this.distance;
-        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2 + this.skidding;
-        break;
-    }
-
-  
-    if ((finalBasePlacement === 'top' || finalBasePlacement === 'bottom') && finalAlignment) {
-      if (finalAlignment === 'start') {
-        left = triggerRect.left + this.skidding;
-      } else if (finalAlignment === 'end') {
-        left = triggerRect.right - tooltipRect.width + this.skidding;
-      }
-    }
-    
-   
-    if ((finalBasePlacement === 'left' || finalBasePlacement === 'right') && finalAlignment) {
-      if (finalAlignment === 'start') {
-        top = triggerRect.top + this.skidding;
-      } else if (finalAlignment === 'end') {
-        top = triggerRect.bottom - tooltipRect.height + this.skidding;
-      }
-    }
-
-  
-    finalPlacement = finalAlignment ? `${finalBasePlacement}-${finalAlignment}` : finalBasePlacement;
-
- 
-    if (left < 0) left = 5;
-    if (left + tooltipRect.width > viewportWidth) left = viewportWidth - tooltipRect.width - 5;
-    if (top < 0) top = 5;
-    if (top + tooltipRect.height > viewportHeight) top = viewportHeight - tooltipRect.height - 5;
 
-    
+    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`;
-    this.tooltip.setAttribute('data-placement', finalPlacement as string);
+
+    const { caretLeft, caretTop } = getCaretPosition({
+      placement,
+      tooltipRect,
+      triggerRect,
+      caretSize: this.caretSize,
+      left,
+      top
+    });
+
+    this.caret.style.left = `${caretLeft}px`;
+    this.caret.style.top = `${caretTop}px`;
   };
 
   private showTooltip = () => {
-    if (!this.disabled  && 
-    this.content.trim() !== '') {
-      this.open = true;
+    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(() => {
         this.updateTooltipPosition();
-        
- 
-        this.tooltip.addEventListener('transitionend', this.handleAfterShow, { once: true });
+        this.emit('nile-after-show');
       });
+    } else {
+      this.open = false;
     }
   };
-  
-  private handleAfterShow = () => {
-    this.emit('nile-after-show');
-  };
-  
 
   private hideTooltip = () => {
-    if (!this.open) return;
-    
     this.emit('nile-hide');
     this.open = false;
-    
-    this.tooltip.addEventListener('transitionend', this.handleAfterHide, { once: true });
-  };
-  
-  private handleAfterHide = () => {
-    this.emit('nile-after-hide');
+    setTimeout(() => {
+      this.emit('nile-after-hide');
+    }, 200);
   };
-  
+
   private handleMouseOver = () => {
     if (this.trigger.includes('hover')) {
       clearTimeout(this.hoverTimeout);
@@ -209,22 +182,13 @@ export class NileTooltip extends NileElement {
 
   private handleClick = () => {
     if (this.trigger.includes('click')) {
-      this.open = !this.open;
-      this.emit('nile-show');
-      this.updateComplete.then(() => this.updateTooltipPosition());
-    }
-  };
-
-  updated(changedProperties: Map<string, any>) {
-    super.updated(changedProperties);
-    
-   
-    if (changedProperties.has('open') || changedProperties.has('hoist')) {
-      if (this.open && this.hoist) {
-      
+      if (!this.open && isInViewport(this.triggerContainer)) {
+        this.showTooltip();
+      } else {
+        this.hideTooltip();
       }
     }
-  }
+  };
 
   private handleFocus = () => {
     if (this.trigger.includes('focus')) {
@@ -240,17 +204,32 @@ export class NileTooltip extends NileElement {
 
   render() {
     return html`
-      <div class=${classMap({ tooltip: true, 'tooltip__body--large': this.size === 'large' })}>
-        ${this.content}
+      <div
+        class=${classMap({
+          tooltip: true,
+          'tooltip__body--large': this.size === 'large',
+        })}
+        id="tooltip"
+      >
+        <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
+
+      <div
+        class="trigger-container"
+        tabindex="0"
         @mouseover=${this.handleMouseOver}
         @mouseout=${this.handleMouseOut}
         @click=${this.handleClick}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
+        @focusin=${this.handleFocus}
+        @focusout=${this.handleBlur}
         aria-describedby="tooltip"
-      ></slot>
+      >
+        <slot></slot>
+      </div>
     `;
   }
 }
@@ -259,4 +238,5 @@ declare global {
   interface HTMLElementTagNameMap {
     'nile-tooltip': NileTooltip;
   }
-}
+}
+