@aquera/nile-elements 0.1.33-beta-1.0 → 0.1.33

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.33-beta-1.0",
+  "version": "0.1.33",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-input/nile-input.css.ts

@@ -15,14 +15,6 @@ export const styles = css`
     display: block;
   }
 
-  /* To Hide Safari's AutoFill icon */
-  input::-webkit-contacts-auto-fill-button {
-    visibility: hidden;
-    width: 0;
-    margin: 0;
-    padding: 0;
-  }
-
   .form-control .form-control__label {
     display: none;
   }

package/src/nile-menu/nile-menu.ts

@@ -31,6 +31,8 @@ export class NileMenu extends NileElement {
 
   @property({ type: Boolean }) showNoResults: boolean = false;
 
+  @property({ type: Boolean }) allowSpaceKey: boolean = false;
+
   @property({ type: String }) noResultsMessage: string = 'No results found';
 
   @query('slot:not([name])') defaultSlot!: HTMLSlotElement;
@@ -67,12 +69,6 @@ export class NileMenu extends NileElement {
   }
 
   private handleKeyDown(event: KeyboardEvent) {
-    const target = event.target as HTMLElement;
-
-    // Only handle keyboard shortcuts if NOT inside input, textarea, or contenteditable
-    if (target.closest('nile-input') || target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
-      return; // Ignore handling space, arrows, etc.
-    }
 
     // Make a selection when pressing enter
     if (event.key === 'Enter') {
@@ -82,7 +78,7 @@ export class NileMenu extends NileElement {
     }
 
     // Prevent scrolling when space is pressed (ONLY if not typing)
-    if (event.key === ' ') {
+    if (!this.allowSpaceKey && event.key === ' ') {
       event.preventDefault();
     }
 
@@ -107,7 +103,7 @@ export class NileMenu extends NileElement {
         items[index].focus();
       }
     }
-}
+  }
 
 
   private handleMouseDown(event: MouseEvent) {

package/src/nile-table/nile-table.ts

@@ -74,7 +74,7 @@ export class NileTable extends NileElement {
 	handleBodyCssUpdate(){
     if (this.rows.length<2) return;
     const tableBodies = this.rows;
-		const firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base');
+		const firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base')
 		if(firstEl) {
 			firstEl.style.borderTopRightRadius="var(--nile-radius-radius-xl)";
 			firstEl.style.borderTopLeftRadius = 'var(--nile-radius-radius-xl)';
@@ -84,7 +84,7 @@ export class NileTable extends NileElement {
 		}
 		tableBodies.forEach((tb,i)=>{
 			if(i>0 && i<tableBodies.length-1){
-				const el=tb.shadowRoot?.querySelector<HTMLDivElement>('div.base');
+				const el=tb.shadowRoot?.querySelector<HTMLDivElement>('div.base')
 				if(el) {
 					el.style.borderTopRightRadius="0px";
 					el.style.borderTopLeftRadius = "0px";

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

@@ -11,63 +11,60 @@ import { css } from 'lit';
  * Tooltip CSS
  */
 export const styles = css`
+  :host {
+    --max-width: 20rem;
+    --hide-delay: 0ms;
+    --show-delay: 150ms;
 
+    display: contents;
+  }
 
-:host {
-      position: relative;
-      display: inline-block;
-    }
-    .tooltip {
-      position: fixed;
-      z-index: 1000;
-      background-color: var(--nile-tooltip-color-background, #333);
-      color: var(--nile-colors-white-base, #fff);
-      padding: 6px 10px;
-      border-radius: 4px;
-      font-size: var(--nile-tooltip-font-size-sm, 14px);
-      line-height: var(--nile-tooltip-line-height-sm, 1.5);
-      opacity: 0;
-      transition: opacity 0.2s, transform 0.2s;
-      pointer-events: none;
-      white-space: normal;
-      visibility: hidden;
-      overflow: visible;
- 
-    }
-    :host([open]) .tooltip {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: auto;
-    }
-    .tooltip__body--large {
-      font-size: var(--nile-tooltip-font-size-lg, 16px);
-      line-height: var(--nile-tooltip-line-height-lg, 1.75);
-    }
-    .tooltip-content {
-      overflow: auto;
-      max-width: 252px;
-      max-height: 116px;
-    }
-    .tooltip-caret {
-      position: absolute;
-      width: calc(2 * var(--caret-size, 6px));
-      height: calc(2 * var(--caret-size, 6px));
-      background-color: inherit;
-      transform: rotate(45deg);
-      z-index: -1;
-    }
-    .trigger-container {
-      display: inline-block;
-    }
- 
+  .tooltip {
+    --arrow-size: 6px;
+    --arrow-color: var(--nile-tooltip-color-background);
+  }
 
+  .tooltip::part(popup) {
+    pointer-events: none;
+    z-index: 1000;
+  }
 
+  .tooltip[placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
 
+  .tooltip[placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
 
+  .tooltip[placement^='left']::part(popup) {
+    transform-origin: right;
+  }
 
+  .tooltip[placement^='right']::part(popup) {
+    transform-origin: left;
+  }
 
+  .tooltip__body {
+    display: block;
+    width: max-content;
+    max-width: var(--max-width);
+    border-radius: 4px;
+    background-color: var(--nile-tooltip-color-background);
+    font-size: var(--nile-tooltip-font-size-sm);
+    font-weight: var(--nile-tooltip-font-weight-sm);
+    line-height: var(--nile-tooltip-line-height-sm);
+    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);
+    color: var(--nile-colors-white-base);
+    pointer-events: none;
+    word-break: break-word;
+  }
 
- 
+  .tooltip__body--large {
+    font-size: var(--nile-tooltip-font-size-lg);
+    line-height: var(--nile-tooltip-line-height-lg);
+    font-weight: var(--nile-tooltip-font-weight-lg);
+  }
 `;
 
-export default [styles];
+export default [styles];

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

@@ -4,25 +4,58 @@
  * 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 { 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 { 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';
+import type { CSSResultGroup } from 'lit';
+import type NilePopup from '../nile-popup/nile-popup';
 /**
  * Nile icon component.
  *
  * @tag nile-tooltip
  *
  */
-
 @customElement('nile-tooltip')
 export class NileTooltip extends NileElement {
-  @property({ type: String }) content = '';
+  /**
+   * 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({ reflect: true }) size: 'small' | 'large' = 'small';
-  @property({ type: String })
-  placement:
+
+  /**
+   * 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:
     | 'top'
     | 'top-start'
     | 'top-end'
@@ -34,209 +67,258 @@ export class NileTooltip extends NileElement {
     | 'bottom-end'
     | 'left'
     | 'left-start'
-    | 'left-end' = 'bottom';
+    | 'left-end' = 'top';
+
+  /** Disables the tooltip so it won't show when triggered. */
   @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({ 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;
+  @property() trigger = 'hover focus';
 
-  @query('.tooltip') tooltip!: HTMLElement;
-  @query('.trigger-container') triggerContainer!: HTMLElement;
-  @query('.tooltip-caret') caret!: HTMLElement;
-  @query('slot[name="content"]') tooltipSlot!: HTMLSlotElement;
+  /**
+   * 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;
 
-  private hasTooltipSlot = false;
-  private hoverTimeout: number = 0;
-  private caretSize = 6;
-  private originalPlacement: string = this.placement;
+  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);
 
-  public static get styles(): CSSResultArray {
-    return [styles];
+    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);
+    });
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    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: Map<string, unknown>) {
-    super.updated?.(changedProps);
+  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);
+  }
 
-    const validPlacements = [
-      'top', 'top-start', 'top-end',
-      'right', 'right-start', 'right-end',
-      'bottom', 'bottom-start', 'bottom-end',
-      'left', 'left-start', 'left-end'
-    ];
+  private handleBlur() {
+    if (this.hasTrigger('focus')) {
+      this.hide();
+    }
+  }
 
-    if (!validPlacements.includes(this.placement)) {
-      console.warn(`[nile-tooltip] Invalid placement "${this.placement}", defaulting to "bottom".`);
-      this.placement = 'bottom';
+  private handleClick() {
+    if (this.hasTrigger('click')) {
+      if (this.open) {
+        this.hide();
+      } else {
+        this.show();
+      }
     }
+  }
 
-    if (!validPlacements.includes(this.originalPlacement)) {
-      this.originalPlacement = 'bottom';
+  private handleFocus() {
+    if (this.hasTrigger('focus')) {
+      this.show();
     }
   }
 
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener('resize', this.updateTooltipPosition);
-    window.removeEventListener('scroll', this.updateTooltipPosition, true);
+  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();
+    }
   }
 
-  private handleTooltipSlotChange() {
-    const nodes = this.tooltipSlot.assignedNodes({ flatten: true });
-    this.hasTooltipSlot = nodes.length > 0;
-    this.requestUpdate();
+  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 updateTooltipPosition = () => {
-    if (!isInViewport(this.triggerContainer)) {
-      this.open = false;
-      return;
+  private handleMouseOut() {
+    if (this.hasTrigger('hover')) {
+      const delay = parseDuration(
+        getComputedStyle(this).getPropertyValue('--hide-delay')
+      );
+      clearTimeout(this.hoverTimeout);
+      this.hoverTimeout = window.setTimeout(() => this.hide(), delay);
     }
+  }
 
-    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
-    });
+  private hasTrigger(triggerType: string) {
+    const triggers = this.trigger.split(' ');
+    return triggers.includes(triggerType);
+  }
 
-    this.caret.style.left = `${caretLeft}px`;
-    this.caret.style.top = `${caretTop}px`;
-  };
+  @watch('open', { waitUntilFirstUpdate: true })
+  async handleOpenChange() {
+    if (this.open) {
+      if (this.disabled) {
+        return;
+      }
 
-  private showTooltip = () => {
-    const trimmedContent = this.content.trim();
-    if (!trimmedContent && !this.hasTooltipSlot) {
-      return;
-    }
-    if (!this.disabled && isInViewport(this.triggerContainer)) {
+      // Show
       this.emit('nile-show');
-      this.open = true;
-      this.updateComplete.then(() => {
-        this.updateTooltipPosition();
-        this.emit('nile-after-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 {
-      this.open = false;
-    }
-  };
+      // Hide
+      this.emit('nile-hide');
 
-  private hideTooltip = () => {
-    this.emit('nile-hide');
-    this.open = false;
-    setTimeout(() => {
-      this.emit('nile-after-hide');
-    }, 200);
-  };
+      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;
 
-  private handleMouseOver = () => {
-    if (this.trigger.includes('hover')) {
-      clearTimeout(this.hoverTimeout);
-      this.hoverTimeout = window.setTimeout(() => this.showTooltip(), 150);
+      this.emit('nile-after-hide');
     }
-  };
+  }
 
-  private handleMouseOut = () => {
-    if (this.trigger.includes('hover')) {
-      clearTimeout(this.hoverTimeout);
-      this.hoverTimeout = window.setTimeout(() => this.hideTooltip(), 0);
+  @watch(['content', 'distance', 'hoist', 'placement', 'skidding'])
+  async handleOptionsChange() {
+    if (this.hasUpdated) {
+      await this.updateComplete;
+      this.popup.reposition();
     }
-  };
+  }
 
-  private handleClick = () => {
-    if (this.trigger.includes('click')) {
-      if (!this.open && isInViewport(this.triggerContainer)) {
-        this.showTooltip();
-      } else {
-        this.hideTooltip();
-      }
+  @watch('disabled')
+  handleDisabledChange() {
+    if (this.disabled && this.open) {
+      this.hide();
     }
-  };
+  }
 
-  private handleFocus = () => {
-    if (this.trigger.includes('focus')) {
-      this.showTooltip();
+  /** Shows the tooltip. */
+  async show() {
+    if (this.open || !this.content?.trim().length) {
+      return undefined;
     }
-  };
 
-  private handleBlur = () => {
-    if (this.trigger.includes('focus')) {
-      this.hideTooltip();
+    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
+      <nile-popup
+        part="base"
+        exportparts="
+          popup:base__popup,
+          arrow:base__arrow
+        "
         class=${classMap({
           tooltip: true,
-          'tooltip__body--large': this.size === 'large',
+          'tooltip--open': this.open,
         })}
-        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>
-
-      <div
-        class="trigger-container"
-        tabindex="0"
-        @mouseover=${this.handleMouseOver}
-        @mouseout=${this.handleMouseOut}
-        @click=${this.handleClick}
-        @focusin=${this.handleFocus}
-        @focusout=${this.handleBlur}
-        aria-describedby="tooltip"
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        flip
+        shift
+        arrow
       >
-        <slot></slot>
-      </div>
+        <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>
     `;
   }
 }
 
+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;
   }
 }
-