@nectary/components 1.3.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/pop/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement, Context, subscribeContext, isTargetEqual } from '../utils';
-const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus" tabindex="-1"></div><dialog id="dialog"><div id="content"><slot name="content"></slot></div><div id="target-open"><slot name="target-open"></slot></div></dialog>';
+const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus"></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content"><slot name="content"></slot></div></dialog>';
 import { assertOrientation, disableScroll, enableScroll, orientationValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -153,13 +153,13 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     if (!this.isConnected || this.#isOpen()) {
       return;
     }
-    this.#$targetSlot.addEventListener('blur', this.#stopEventPropagation, true);
-    this.#$focus.style.setProperty('display', 'block');
-    this.#$focus.addEventListener('focus', this.#captureRelatedActiveElement);
+    this.#$targetSlot.addEventListener('blur', this.#captureActiveElement, true);
+    this.#$focus.setAttribute('tabindex', '-1');
+    this.#$focus.style.display = 'block';
     this.#$focus.focus();
-    this.#$focus.removeEventListener('focus', this.#captureRelatedActiveElement);
-    this.#$focus.style.removeProperty('display');
-    this.#$targetSlot.removeEventListener('blur', this.#stopEventPropagation, true);
+    this.#$targetSlot.removeEventListener('blur', this.#captureActiveElement, true);
+    this.#$focus.removeAttribute('tabindex');
+    this.#$focus.removeAttribute('style');
     this.#$dialog.showModal();
     this.#$target.setAttribute('aria-expanded', 'true');
     this.#updateOrientation();
@@ -336,10 +336,6 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   #dispatchCloseEvent() {
     this.dispatchEvent(new CustomEvent('-close'));
   }
-  #captureRelatedActiveElement = e => {
-    e.stopPropagation();
-    this.#targetActiveElement = e.relatedTarget;
-  };
   #captureActiveElement = e => {
     e.stopPropagation();
     this.#targetActiveElement = e.target;

package/tooltip/index.js

@@ -7,7 +7,7 @@ import { assertOrientation, getPopOrientation, orientationValues } from './utils
 const TIP_SIZE = 8;
 const SHOW_DELAY = 1000;
 const HIDE_DELAY = 0;
-const ANIMATION_DURATION = 50;
+const ANIMATION_DURATION = 100;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tooltip', class extends NectaryElement {
@@ -37,7 +37,8 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
       showDelay: SHOW_DELAY,
       hideDelay: this.#shouldReduceMotion ? HIDE_DELAY + ANIMATION_DURATION : HIDE_DELAY,
       hideAnimationDuration: this.#shouldReduceMotion ? 0 : ANIMATION_DURATION,
-      onShow: this.#onStateShow,
+      onShowStart: this.#onStateShowStart,
+      onShowEnd: this.#onStateShowEnd,
       onHideStart: this.#onStateHideStart,
       onHideEnd: this.#onStateHideEnd
     });
@@ -108,29 +109,27 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     }
   }
   #onMouseDown = () => {
-    this.#tooltipState.interrupt();
-    this.#unsubscribeScroll();
+    this.#tooltipState.destroy();
   };
   #onPopClose = () => {
     this.#tooltipState.destroy();
-    this.#unsubscribeScroll();
   };
   #onMouseEnter = () => {
     this.#tooltipState.show();
-    this.#subscribeScroll();
-    this.#subscribeMouseLeaveEvents();
   };
   #onMouseLeave = e => {
     if (!this.#isOpen() || e.relatedTarget !== this.#$contentWrapper && e.relatedTarget !== this.#$target) {
       this.#tooltipState.hide();
-      this.#unsubscribeScroll();
     }
   };
   #onScroll = () => {
     this.#tooltipState.destroy();
-    this.#unsubscribeScroll();
   };
-  #onStateShow = () => {
+  #onStateShowStart = () => {
+    this.#subscribeScroll();
+    this.#subscribeMouseLeaveEvents();
+  };
+  #onStateShowEnd = () => {
     this.#dispatchShowEvent();
     updateBooleanAttribute(this.#$pop, 'open', true);
     requestAnimationFrame(this.#updateTipOrientation);
@@ -152,11 +151,14 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#animation.play();
   };
   #onStateHideEnd = () => {
-    this.#animation.finish();
+    if (this.#isOpen()) {
+      this.#animation.finish();
+      this.#dispatchHideEvent();
+      updateBooleanAttribute(this.#$pop, 'open', false);
+    }
     this.#resetTipOrientation();
-    updateBooleanAttribute(this.#$pop, 'open', false);
-    this.#dispatchHideEvent();
     this.#unsubscribeMouseLeaveEvents();
+    this.#unsubscribeScroll();
   };
   #resetTipOrientation() {
     this.#$tip.style.top = '';
@@ -187,17 +189,16 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     if (!this.isConnected) {
       return;
     }
-    const value = this.text;
-    this.#$tooltipText.textContent = value;
-    if (value.length === 0) {
+    const text = this.text;
+    this.#$tooltipText.textContent = text;
+    if (text.length === 0) {
       if (this.#isSubscribed) {
         this.#tooltipState.destroy();
         this.#unsubscribeMouseEnterEvent();
-        this.#unsubscribeMouseLeaveEvents();
       }
-      return;
+    } else {
+      this.#subscribeMouseEnterEvent();
     }
-    this.#subscribeMouseEnterEvent();
   }
   #subscribeMouseEnterEvent() {
     if (!this.isConnected || this.#isSubscribed) {

package/tooltip/tooltip-state.d.ts

@@ -2,7 +2,8 @@ type TTooltipStateOptions = {
     showDelay: number;
     hideDelay: number;
     hideAnimationDuration: number;
-    onShow(): void;
+    onShowStart(): void;
+    onShowEnd(): void;
     onHideStart(): void;
     onHideEnd(): void;
 };

package/tooltip/tooltip-state.js

@@ -1,119 +1,121 @@
 export class TooltipState {
   #timerId = null;
-  #state = 'initial';
+  #state = 'hide';
   #options;
   constructor(options) {
     this.#options = options;
   }
   show() {
+    console.log('-> show');
     switch (this.#state) {
-      case 'initial':
-        {
-          this.#delayShow();
-          break;
-        }
-      case 'hide-delay':
+      case 'hide':
         {
-          this.#cancelStateChange('show');
+          this.#switchToHideToShow();
           break;
         }
-      case 'hide':
+      case 'show-to-hide':
         {
-          this.#cancelStateChange();
-          this.#onShow();
+          this.#switchToState('show');
           break;
         }
     }
   }
   hide() {
+    console.log('-> hide');
     switch (this.#state) {
-      case 'show-delay':
+      case 'hide-to-show':
         {
-          this.#cancelStateChange('initial');
+          this.#onHideAnimationEnd();
           break;
         }
       case 'show':
         {
-          this.#delayHide();
+          this.#switchToShowToHide();
           break;
         }
     }
   }
   interrupt() {
+    console.log('-> interrupt');
     switch (this.#state) {
-      case 'show-delay':
+      case 'hide-to-show':
         {
-          this.#cancelStateChange('initial');
+          this.#onHideAnimationEnd();
           break;
         }
       case 'show':
         {
-          this.#onHideStart();
+          this.#switchToShowToHide(true, false);
           break;
         }
-      case 'hide-delay':
+      case 'show-to-hide':
         {
-          this.#cancelStateChange();
-          this.#onHideStart();
+          this.#switchToShowToHide(true, false);
           break;
         }
     }
   }
   destroy() {
+    console.log('-> destroy');
     switch (this.#state) {
-      case 'show-delay':
+      case 'hide-to-show':
         {
-          this.#cancelStateChange('initial');
+          this.#onHideAnimationEnd();
           break;
         }
       case 'show':
         {
-          this.#onHideStart(true);
+          this.#switchToShowToHide(true, true);
           break;
         }
-      case 'hide-delay':
+      case 'show-to-hide':
         {
-          this.#cancelStateChange();
-          this.#onHideStart(true);
+          this.#switchToShowToHide(true, true);
           break;
         }
       case 'hide':
         {
-          this.#cancelStateChange();
-          this.#onHideEnd();
+          this.#onHideAnimationEnd();
           break;
         }
     }
   }
-  #delayShow() {
-    this.#state = 'show-delay';
-    this.#timerId = window.setTimeout(this.#onShow, this.#options.showDelay);
+  #switchToHideToShow() {
+    this.#switchToState('hide-to-show');
+    this.#options.onShowStart();
+    if (this.#options.showDelay === 0) {
+      this.#onSwitchToShow();
+    } else {
+      this.#timerId = window.setTimeout(this.#onSwitchToShow, this.#options.showDelay);
+    }
   }
-  #delayHide() {
-    this.#state = 'hide-delay';
-    this.#timerId = window.setTimeout(this.#onHideStart, this.#options.hideDelay);
+  #switchToShowToHide(skipDelay, skipHideAnimation) {
+    this.#switchToState('show-to-hide');
+    if (skipDelay === true || this.#options.hideDelay === 0) {
+      this.#onShowToHideEnd(skipHideAnimation);
+    } else {
+      this.#timerId = window.setTimeout(this.#onShowToHideEnd, this.#options.hideDelay);
+    }
   }
-  #onShow = () => {
-    this.#state = 'show';
-    this.#options.onShow();
+  #onSwitchToShow = () => {
+    this.#switchToState('show');
+    this.#options.onShowEnd();
   };
-  #onHideStart = isImmediate => {
-    this.#state = 'hide';
+  #onShowToHideEnd = skipHideAnimation => {
+    this.#switchToState('hide');
     this.#options.onHideStart();
-    if (isImmediate === true || this.#options.hideAnimationDuration === 0) {
-      this.#onHideEnd();
+    if (skipHideAnimation === true || this.#options.hideAnimationDuration === 0) {
+      this.#onHideAnimationEnd();
     } else {
-      this.#timerId = window.setTimeout(this.#onHideEnd, this.#options.hideAnimationDuration);
+      this.#timerId = window.setTimeout(this.#onHideAnimationEnd, this.#options.hideAnimationDuration);
     }
   };
-  #onHideEnd = () => {
-    this.#state = 'initial';
+  #onHideAnimationEnd = () => {
+    this.#switchToState('hide');
     this.#options.onHideEnd();
   };
-  #cancelStateChange(nextState) {
-    if (nextState != null) {
-      this.#state = nextState;
-    }
+  #switchToState(nextState) {
+    this.#state = nextState;
     if (this.#timerId !== null) {
       clearTimeout(this.#timerId);
       this.#timerId = null;