@nectary/components 4.12.1 → 5.0.1

package/tooltip/index.js

@@ -1,17 +1,20 @@
-import '../text';
-import '../pop';
-import { defineCustomElement, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, rectOverlap, getReactEventHandler, shouldReduceMotion } from '../utils';
-const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([text-align=right]) #text{--sinch-comp-text-align:right}:host([text-align=center]) #text{--sinch-comp-text-align:center}:host([text-align=left]) #text{--sinch-comp-text-align:left}</style><sinch-pop id="pop"><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
-import { TooltipState } from './tooltip-state';
-import { getPopOrientation, orientationValues, textAlignValues, typeValues } from './utils';
+import "../text/index.js";
+import "../pop/index.js";
+import { shouldReduceMotion, updateAttribute, getAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, setClass } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { rectOverlap } from "../utils/rect.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { TooltipState } from "./tooltip-state.js";
+import { getPopOrientation, orientationValues, textAlignValues, typeValues } from "./utils.js";
+const templateHTML = '<style>\n  :host {\n    display: contents;\n  }\n\n  #content-wrapper {\n    padding-bottom: 8px;\n    filter: drop-shadow(var(--sinch-comp-tooltip-shadow));\n  }\n\n  :host([orientation="left"]) #content-wrapper {\n    padding-bottom: 0;\n    padding-right: 8px;\n  }\n\n  :host([orientation="right"]) #content-wrapper {\n    padding-bottom: 0;\n    padding-left: 8px;\n  }\n\n  :host([orientation^="bottom"]) #content-wrapper {\n    padding-bottom: 0;\n    padding-top: 8px;\n  }\n\n  #content {\n    position: relative;\n    display: block;\n    max-width: 300px;\n    padding: 2px 6px;\n    box-sizing: border-box;\n    background-color: var(--sinch-local-color-background);\n    border-radius: var(--sinch-comp-tooltip-shape-radius);\n    pointer-events: none;\n    opacity: 0;\n\n    --sinch-local-color-background: var(--sinch-comp-tooltip-color-background);\n    --sinch-global-color-text: var(--sinch-comp-tooltip-color-text);\n  }\n\n  #text {\n    word-break: break-word;\n    pointer-events: none;\n\n    --sinch-comp-text-font: var(--sinch-comp-tooltip-font-body);\n  }\n\n  #tip {\n    position: absolute;\n    left: 50%;\n    top: 100%;\n    transform: translateX(-50%) rotate(0);\n    transform-origin: top center;\n    fill: var(--sinch-local-color-background);\n    pointer-events: none;\n  }\n\n  #tip.hidden {\n    display: none;\n  }\n\n  :host([orientation="left"]) #tip {\n    transform: translateX(-50%) rotate(270deg);\n    top: 50%;\n    left: 100%;\n  }\n\n  :host([orientation="right"]) #tip {\n    transform: translateX(-50%) rotate(90deg);\n    top: 50%;\n    left: 0;\n  }\n\n  :host([orientation^="bottom"]) #tip {\n    transform: translateX(-50%) rotate(180deg);\n    top: 0;\n  }\n\n  :host([text-align="right"]) #text {\n    --sinch-comp-text-align: right;\n  }\n\n  :host([text-align="center"]) #text {\n    --sinch-comp-text-align: center;\n  }\n\n  :host([text-align="left"]) #text {\n    --sinch-comp-text-align: left;\n  }\n</style>\n\n<sinch-pop id="pop">\n  <slot id="target" slot="target"></slot>\n  <div id="content-wrapper" slot="content">\n    <div id="content">\n      <sinch-text id="text" type="s"></sinch-text>\n      <svg id="tip" width="8" height="4" aria-hidden="true">\n        <path d="m4 4 4-4h-8l4 4Z" />\n      </svg>\n    </div>\n  </div>\n</sinch-pop>';
 const TIP_SIZE = 8;
-const SHOW_DELAY_SLOW = 1000;
+const SHOW_DELAY_SLOW = 1e3;
 const SHOW_DELAY_FAST = 250;
 const HIDE_DELAY = 0;
 const ANIMATION_DURATION = 100;
-const template = document.createElement('template');
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Tooltip extends NectaryElement {
+class Tooltip extends NectaryElement {
   #$pop;
   #$tooltipText;
   #$content;
@@ -27,12 +30,12 @@ export class Tooltip extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$pop = shadowRoot.querySelector('#pop');
-    this.#$tooltipText = shadowRoot.querySelector('#text');
-    this.#$content = shadowRoot.querySelector('#content');
-    this.#$contentWrapper = shadowRoot.querySelector('#content-wrapper');
-    this.#$tip = shadowRoot.querySelector('#tip');
-    this.#$target = shadowRoot.querySelector('#target');
+    this.#$pop = shadowRoot.querySelector("#pop");
+    this.#$tooltipText = shadowRoot.querySelector("#text");
+    this.#$content = shadowRoot.querySelector("#content");
+    this.#$contentWrapper = shadowRoot.querySelector("#content-wrapper");
+    this.#$tip = shadowRoot.querySelector("#tip");
+    this.#$target = shadowRoot.querySelector("#target");
     this.#shouldReduceMotion = shouldReduceMotion();
     this.#tooltipState = new TooltipState({
       showDelay: SHOW_DELAY_SLOW,
@@ -50,11 +53,11 @@ export class Tooltip extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.setAttribute('role', 'tooltip');
-    this.#$pop.addEventListener('-close', this.#onPopClose, options);
-    this.addEventListener('-show', this.#onShowReactHandler, options);
-    this.addEventListener('-hide', this.#onHideReactHandler, options);
-    updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
+    this.setAttribute("role", "tooltip");
+    this.#$pop.addEventListener("-close", this.#onPopClose, options);
+    this.addEventListener("-show", this.#onShowReactHandler, options);
+    this.addEventListener("-hide", this.#onHideReactHandler, options);
+    updateAttribute(this.#$pop, "orientation", getPopOrientation(this.orientation));
     this.#updateText();
   }
   disconnectedCallback() {
@@ -64,67 +67,69 @@ export class Tooltip extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['text', 'orientation', 'text-align', 'type', 'aria-label', 'aria-description'];
+    return [
+      "text",
+      "orientation",
+      "text-align",
+      "type",
+      "aria-label",
+      "aria-description"
+    ];
   }
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case 'text':
-        {
-          this.#updateText();
-          break;
-        }
-      case 'orientation':
-        {
-          updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
-          if (this.#isOpen()) {
-            this.#resetTipOrientation();
-            this.#updateTipOrientation();
-          }
-          break;
-        }
-      case 'text-align':
-        {
-          updateAttribute(this.#$pop, 'text-align', newVal);
-          break;
-        }
-      case 'type':
-        {
-          this.#tooltipState.updateOptions({
-            showDelay: newVal === 'fast' ? SHOW_DELAY_FAST : SHOW_DELAY_SLOW
-          });
-          break;
-        }
-      case 'aria-label':
-      case 'aria-description':
-        {
-          updateAttribute(this.#$pop, name, newVal);
-          break;
+      case "text": {
+        this.#updateText();
+        break;
+      }
+      case "orientation": {
+        updateAttribute(this.#$pop, "orientation", getPopOrientation(this.orientation));
+        if (this.#isOpen()) {
+          this.#resetTipOrientation();
+          this.#updateTipOrientation();
         }
+        break;
+      }
+      case "text-align": {
+        updateAttribute(this.#$pop, "text-align", newVal);
+        break;
+      }
+      case "type": {
+        this.#tooltipState.updateOptions({
+          showDelay: newVal === "fast" ? SHOW_DELAY_FAST : SHOW_DELAY_SLOW
+        });
+        break;
+      }
+      case "aria-label":
+      case "aria-description": {
+        updateAttribute(this.#$pop, name, newVal);
+        break;
+      }
     }
   }
   get text() {
-    return getAttribute(this, 'text', '');
+    return getAttribute(this, "text", "");
   }
   set text(value) {
-    updateAttribute(this, 'text', value);
+    updateAttribute(this, "text", value);
   }
   get orientation() {
-    return getLiteralAttribute(this, orientationValues, 'orientation', 'top');
+    return getLiteralAttribute(this, orientationValues, "orientation", "top");
   }
   set orientation(value) {
-    updateLiteralAttribute(this, orientationValues, 'orientation', value);
+    updateLiteralAttribute(this, orientationValues, "orientation", value);
   }
-  get 'text-align'() {
-    return getLiteralAttribute(this, textAlignValues, 'text-align', 'left');
+  get "text-align"() {
+    return getLiteralAttribute(this, textAlignValues, "text-align", "left");
   }
-  set 'text-align'(value) {
-    updateLiteralAttribute(this, textAlignValues, 'text-align', value);
+  set "text-align"(value) {
+    updateLiteralAttribute(this, textAlignValues, "text-align", value);
   }
   get type() {
-    return getLiteralAttribute(this, typeValues, 'type', 'slow');
+    return getLiteralAttribute(this, typeValues, "type", "slow");
   }
   set type(value) {
-    updateLiteralAttribute(this, typeValues, 'type', value);
+    updateLiteralAttribute(this, typeValues, "type", value);
   }
   get footprintRect() {
     return this.#$pop.footprintRect;
@@ -132,16 +137,18 @@ export class Tooltip extends NectaryElement {
   get tooltipRect() {
     return this.#$pop.popoverRect;
   }
+  // Begin hide animation if shown, skipping HIDE_DELAY wait
   #onMouseDown = () => {
     this.#tooltipState.destroy();
   };
+  // Underlying pop asks for a close
   #onPopClose = () => {
     this.#tooltipState.destroy();
   };
   #onMouseEnter = () => {
     this.#tooltipState.show();
   };
-  #onMouseLeave = e => {
+  #onMouseLeave = (e) => {
     if (!this.#isOpen() || e.relatedTarget !== this.#$contentWrapper && e.relatedTarget !== this.#$target) {
       this.#tooltipState.hide();
     }
@@ -149,13 +156,15 @@ export class Tooltip extends NectaryElement {
   #onScroll = () => {
     this.#tooltipState.destroy();
   };
+  // Tooltip begins to wait for SHOW_DELAY on mouseenter
   #onStateShowStart = () => {
     this.#subscribeScroll();
     this.#subscribeMouseLeaveEvents();
   };
+  // SHOW_DELAY ended, tooltip can be shown with animation
   #onStateShowEnd = () => {
     this.#dispatchShowEvent();
-    updateBooleanAttribute(this.#$pop, 'open', true);
+    updateBooleanAttribute(this.#$pop, "open", true);
     requestAnimationFrame(this.#updateTipOrientation);
     if (this.#animation !== null) {
       this.#animation.updatePlaybackRate(1);
@@ -166,27 +175,29 @@ export class Tooltip extends NectaryElement {
       }, {
         duration: this.#shouldReduceMotion ? 0 : ANIMATION_DURATION,
         iterations: 1,
-        fill: 'forwards'
+        fill: "forwards"
       });
     }
   };
+  // HIDE_DELAY ended, begin tooltip hide animation
   #onStateHideStart = () => {
     this.#animation.updatePlaybackRate(-1);
     this.#animation.play();
   };
+  // Hide animation ended, tooltip can be hidden
   #onStateHideEnd = () => {
     if (this.#isOpen()) {
       this.#animation.finish();
       this.#dispatchHideEvent();
-      updateBooleanAttribute(this.#$pop, 'open', false);
+      updateBooleanAttribute(this.#$pop, "open", false);
     }
     this.#resetTipOrientation();
     this.#unsubscribeMouseLeaveEvents();
     this.#unsubscribeScroll();
   };
   #resetTipOrientation() {
-    this.#$tip.style.top = '';
-    this.#$tip.style.left = '';
+    this.#$tip.style.top = "";
+    this.#$tip.style.left = "";
   }
   #updateTipOrientation = () => {
     const orient = this.orientation;
@@ -194,20 +205,20 @@ export class Tooltip extends NectaryElement {
     const contentRect = this.#$content.getBoundingClientRect();
     const diffX = targetRect.x - contentRect.x;
     const diffY = targetRect.y - contentRect.y;
-    if (orient === 'left' || orient === 'right') {
+    if (orient === "left" || orient === "right") {
       const yPos = Math.max(TIP_SIZE, Math.min(diffY + targetRect.height / 2, contentRect.height - TIP_SIZE));
       this.#$tip.style.top = `${yPos}px`;
     } else {
       let xPos = Math.max(TIP_SIZE, Math.min(diffX + targetRect.width / 2, contentRect.width - TIP_SIZE));
-      if (orient === 'bottom-left' || orient === 'top-left') {
+      if (orient === "bottom-left" || orient === "top-left") {
         xPos = Math.max(xPos, contentRect.width * 0.75);
       }
-      if (orient === 'bottom-right' || orient === 'top-right') {
+      if (orient === "bottom-right" || orient === "top-right") {
         xPos = Math.min(xPos, contentRect.width * 0.25);
       }
       this.#$tip.style.left = `${xPos}px`;
     }
-    setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
+    setClass(this.#$tip, "hidden", rectOverlap(targetRect, contentRect));
   };
   #updateText() {
     if (!this.isDomConnected) {
@@ -227,50 +238,51 @@ export class Tooltip extends NectaryElement {
     if (!this.isDomConnected || this.#isSubscribed) {
       return;
     }
-    this.#$target.addEventListener('mouseenter', this.#onMouseEnter, {
+    this.#$target.addEventListener("mouseenter", this.#onMouseEnter, {
       signal: this.#controller.signal
     });
     this.#isSubscribed = true;
   }
   #unsubscribeMouseEnterEvent() {
-    this.#$target.removeEventListener('mouseenter', this.#onMouseEnter);
+    this.#$target.removeEventListener("mouseenter", this.#onMouseEnter);
     this.#isSubscribed = false;
   }
   #subscribeMouseLeaveEvents() {
-    const options = {
-      signal: this.#controller.signal
-    };
-    this.#$target.addEventListener('mousedown', this.#onMouseDown, options);
-    this.#$target.addEventListener('mouseleave', this.#onMouseLeave, options);
-    this.#$contentWrapper.addEventListener('mouseenter', this.#onMouseEnter, options);
-    this.#$contentWrapper.addEventListener('mouseleave', this.#onMouseLeave, options);
+    const options = { signal: this.#controller.signal };
+    this.#$target.addEventListener("mousedown", this.#onMouseDown, options);
+    this.#$target.addEventListener("mouseleave", this.#onMouseLeave, options);
+    this.#$contentWrapper.addEventListener("mouseenter", this.#onMouseEnter, options);
+    this.#$contentWrapper.addEventListener("mouseleave", this.#onMouseLeave, options);
   }
   #unsubscribeMouseLeaveEvents() {
-    this.#$target.removeEventListener('mousedown', this.#onMouseDown);
-    this.#$target.removeEventListener('mouseleave', this.#onMouseLeave);
-    this.#$contentWrapper.removeEventListener('mouseenter', this.#onMouseEnter);
-    this.#$contentWrapper.removeEventListener('mouseleave', this.#onMouseLeave);
+    this.#$target.removeEventListener("mousedown", this.#onMouseDown);
+    this.#$target.removeEventListener("mouseleave", this.#onMouseLeave);
+    this.#$contentWrapper.removeEventListener("mouseenter", this.#onMouseEnter);
+    this.#$contentWrapper.removeEventListener("mouseleave", this.#onMouseLeave);
   }
   #subscribeScroll() {
-    window.addEventListener('wheel', this.#onScroll, true);
+    window.addEventListener("wheel", this.#onScroll, true);
   }
   #unsubscribeScroll() {
-    window.removeEventListener('wheel', this.#onScroll, true);
+    window.removeEventListener("wheel", this.#onScroll, true);
   }
   #isOpen() {
-    return this.#$pop.hasAttribute('open');
+    return this.#$pop.hasAttribute("open");
   }
   #dispatchShowEvent() {
-    this.dispatchEvent(new CustomEvent('-show'));
+    this.dispatchEvent(new CustomEvent("-show"));
   }
   #dispatchHideEvent() {
-    this.dispatchEvent(new CustomEvent('-hide'));
+    this.dispatchEvent(new CustomEvent("-hide"));
   }
   #onShowReactHandler = () => {
-    getReactEventHandler(this, 'on-show')?.();
+    getReactEventHandler(this, "on-show")?.();
   };
   #onHideReactHandler = () => {
-    getReactEventHandler(this, 'on-hide')?.();
+    getReactEventHandler(this, "on-hide")?.();
   };
 }
-defineCustomElement('sinch-tooltip', Tooltip);
+defineCustomElement("sinch-tooltip", Tooltip);
+export {
+  Tooltip
+};

package/tooltip/tooltip-state.js

@@ -1,6 +1,6 @@
-export class TooltipState {
+class TooltipState {
   #timerId = null;
-  #state = 'hide';
+  #state = "hide";
   #options;
   constructor(options) {
     this.#options = options;
@@ -13,77 +13,66 @@ export class TooltipState {
   }
   show() {
     switch (this.#state) {
-      case 'hide':
-        {
-          this.#switchToHideToShow();
-          break;
-        }
-      case 'show-to-hide':
-        {
-          this.#switchToState('show');
-          break;
-        }
+      case "hide": {
+        this.#switchToHideToShow();
+        break;
+      }
+      case "show-to-hide": {
+        this.#switchToState("show");
+        break;
+      }
     }
   }
   hide() {
     switch (this.#state) {
-      case 'hide-to-show':
-        {
-          this.#onHideAnimationEnd();
-          break;
-        }
-      case 'show':
-        {
-          this.#switchToShowToHide();
-          break;
-        }
+      case "hide-to-show": {
+        this.#onHideAnimationEnd();
+        break;
+      }
+      case "show": {
+        this.#switchToShowToHide();
+        break;
+      }
     }
   }
   interrupt() {
     switch (this.#state) {
-      case 'hide-to-show':
-        {
-          this.#onHideAnimationEnd();
-          break;
-        }
-      case 'show':
-        {
-          this.#switchToShowToHide(true, false);
-          break;
-        }
-      case 'show-to-hide':
-        {
-          this.#switchToShowToHide(true, false);
-          break;
-        }
+      case "hide-to-show": {
+        this.#onHideAnimationEnd();
+        break;
+      }
+      case "show": {
+        this.#switchToShowToHide(true, false);
+        break;
+      }
+      case "show-to-hide": {
+        this.#switchToShowToHide(true, false);
+        break;
+      }
     }
   }
   destroy() {
     switch (this.#state) {
-      case 'hide-to-show':
-        {
-          this.#onHideAnimationEnd();
-          break;
-        }
-      case 'show':
-        {
-          this.#switchToShowToHide(true, true);
-          break;
-        }
-      case 'show-to-hide':
-        {
-          this.#switchToShowToHide(true, true);
-          break;
-        }
-      case 'hide':
-        {
-          this.#onHideAnimationEnd();
-          break;
-        }
+      case "hide-to-show": {
+        this.#onHideAnimationEnd();
+        break;
+      }
+      case "show": {
+        this.#switchToShowToHide(true, true);
+        break;
+      }
+      case "show-to-hide": {
+        this.#switchToShowToHide(true, true);
+        break;
+      }
+      case "hide": {
+        this.#onHideAnimationEnd();
+        break;
+      }
     }
   }
   #switchToHideToShow() {
-    this.#switchToState('hide-to-show');
+    this.#switchToState("hide-to-show");
     this.#options.onShowStart();
     if (this.#options.showDelay === 0) {
       this.#onSwitchToShow();
@@ -92,7 +81,7 @@ export class TooltipState {
     }
   }
   #switchToShowToHide(skipDelay, skipHideAnimation) {
-    this.#switchToState('show-to-hide');
+    this.#switchToState("show-to-hide");
     if (skipDelay === true || this.#options.hideDelay === 0) {
       this.#onShowToHideEnd(skipHideAnimation);
     } else {
@@ -100,11 +89,11 @@ export class TooltipState {
     }
   }
   #onSwitchToShow = () => {
-    this.#switchToState('show');
+    this.#switchToState("show");
     this.#options.onShowEnd();
   };
-  #onShowToHideEnd = skipHideAnimation => {
-    this.#switchToState('hide');
+  #onShowToHideEnd = (skipHideAnimation) => {
+    this.#switchToState("hide");
     this.#options.onHideStart();
     if (skipHideAnimation === true || this.#options.hideAnimationDuration === 0) {
       this.#onHideAnimationEnd();
@@ -113,7 +102,7 @@ export class TooltipState {
     }
   };
   #onHideAnimationEnd = () => {
-    this.#switchToState('hide');
+    this.#switchToState("hide");
     this.#options.onHideEnd();
   };
   #switchToState(nextState) {
@@ -123,4 +112,7 @@ export class TooltipState {
       this.#timerId = null;
     }
   }
-}
+}
+export {
+  TooltipState
+};

package/tooltip/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchTooltipOrientation = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export type TSinchTooltipTextAlign = 'center' | 'right' | 'left';
 export type TSinchTooltipType = 'slow' | 'fast';
@@ -37,3 +37,23 @@ export type TSinchTooltip = {
 };
 export type TSinchTooltipElement = NectaryComponentVanillaByType<TSinchTooltip>;
 export type TSinchTooltipReact = NectaryComponentReactByType<TSinchTooltip>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-tooltip': TSinchTooltip;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tooltip': NectaryComponentVanilla<'sinch-tooltip'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tooltip': NectaryComponentReact<'sinch-tooltip'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-tooltip': NectaryComponentReact<'sinch-tooltip'>;
+        }
+    }
+}

package/tooltip/types.js

@@ -1 +1 @@
-export {};
+

package/tooltip/utils.js

@@ -1,18 +1,37 @@
-export const typeValues = ['fast', 'slow'];
-export const orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
-export const textAlignValues = ['right', 'center', 'left'];
-export const getPopOrientation = orientation => {
-  if (orientation === 'top') {
-    return 'top-center';
+const typeValues = ["fast", "slow"];
+const orientationValues = [
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right"
+];
+const textAlignValues = [
+  "right",
+  "center",
+  "left"
+];
+const getPopOrientation = (orientation) => {
+  if (orientation === "top") {
+    return "top-center";
   }
-  if (orientation === 'bottom') {
-    return 'bottom-center';
+  if (orientation === "bottom") {
+    return "bottom-center";
   }
-  if (orientation === 'left') {
-    return 'center-left';
+  if (orientation === "left") {
+    return "center-left";
   }
-  if (orientation === 'right') {
-    return 'center-right';
+  if (orientation === "right") {
+    return "center-right";
   }
   return orientation;
-};
+};
+export {
+  getPopOrientation,
+  orientationValues,
+  textAlignValues,
+  typeValues
+};

package/types.d.ts

@@ -1,31 +1,14 @@
-import type { HTMLAttributes, CSSProperties } from 'react'
-import type { ReactifyEvents, WebComponentReactBaseProp, SafeSelect, CamelCaseify, RemoveReadonly, SetAttributes, ExtendEventListeners } from './utils/adapters'
-
+import type { ReactifyEvents, WebComponentReactBaseProp, SafeSelect, CamelCaseify, RemoveReadonly, SetAttributes, ExtendEventListeners } from './utils/adapters';
+import type { CSSProperties } from 'react';
 export type TRect = {
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-}
-
-export type NectaryComponentVanillaByType<T extends NectaryComponentMap[keyof NectaryComponentMap]> =
-  Omit<HTMLElement, 'addEventListener' | 'removeEventListener'> &
-  ExtendEventListeners<Required<SafeSelect<T, 'events'>>> &
-  SetAttributes<Required<RemoveReadonly<SafeSelect<T, 'props'>>>> &
-  Required<CamelCaseify<SafeSelect<T, 'props'>>> &
-  Required<SafeSelect<T, 'methods'>>
-
-export type NectaryComponentReactByType<T extends NectaryComponentMap[keyof NectaryComponentMap]> =
-  WebComponentReactBaseProp<NectaryComponentVanillaByType<T>> &
-  ReactifyEvents<SafeSelect<T, 'events'>> &
-  RemoveReadonly<SafeSelect<T, 'props'>> &
-  {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type NectaryComponentVanillaByType<T extends NectaryComponentMap[keyof NectaryComponentMap]> = Omit<HTMLElement, 'addEventListener' | 'removeEventListener'> & ExtendEventListeners<Required<SafeSelect<T, 'events'>>> & SetAttributes<Required<RemoveReadonly<SafeSelect<T, 'props'>>>> & Required<CamelCaseify<SafeSelect<T, 'props'>>> & Required<SafeSelect<T, 'methods'>>;
+export type NectaryComponentReactByType<T extends NectaryComponentMap[keyof NectaryComponentMap]> = WebComponentReactBaseProp<NectaryComponentVanillaByType<T>> & ReactifyEvents<SafeSelect<T, 'events'>> & RemoveReadonly<SafeSelect<T, 'props'>> & {
     style?: Partial<SafeSelect<T, 'style'>> & CSSProperties;
-  }
-
-
-export type NectaryComponentVanilla<K extends keyof NectaryComponentMap> =
-  NectaryComponentVanillaByType<NectaryComponentMap[K]>
-
-export type NectaryComponentReact<K extends keyof NectaryComponentMap> =
-  NectaryComponentReactByType<NectaryComponentMap[K]>
+};
+export type NectaryComponentVanilla<K extends keyof NectaryComponentMap> = NectaryComponentVanillaByType<NectaryComponentMap[K]>;
+export type NectaryComponentReact<K extends keyof NectaryComponentMap> = NectaryComponentReactByType<NectaryComponentMap[K]>;

package/utils/adapters.js

@@ -1 +1 @@
-export {};
+