@nectary/components 4.12.0 → 4.12.1

package/tooltip/index.js

@@ -1,20 +1,17 @@
-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>';
+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';
 const TIP_SIZE = 8;
-const SHOW_DELAY_SLOW = 1e3;
+const SHOW_DELAY_SLOW = 1000;
 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;
-class Tooltip extends NectaryElement {
+export class Tooltip extends NectaryElement {
   #$pop;
   #$tooltipText;
   #$content;
@@ -30,12 +27,12 @@ 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,
@@ -53,11 +50,11 @@ 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() {
@@ -67,69 +64,67 @@ 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();
+      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;
         }
-        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;
@@ -137,18 +132,16 @@ 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();
     }
@@ -156,15 +149,13 @@ 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);
@@ -175,29 +166,27 @@ 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;
@@ -205,20 +194,20 @@ 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) {
@@ -238,51 +227,50 @@ 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);
-export {
-  Tooltip
-};
+defineCustomElement('sinch-tooltip', Tooltip);

package/tooltip/tooltip-state.js

@@ -1,6 +1,6 @@
-class TooltipState {
+export class TooltipState {
   #timerId = null;
-  #state = "hide";
+  #state = 'hide';
   #options;
   constructor(options) {
     this.#options = options;
@@ -13,66 +13,77 @@ 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();
@@ -81,7 +92,7 @@ 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 {
@@ -89,11 +100,11 @@ 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();
@@ -102,7 +113,7 @@ class TooltipState {
     }
   };
   #onHideAnimationEnd = () => {
-    this.#switchToState("hide");
+    this.#switchToState('hide');
     this.#options.onHideEnd();
   };
   #switchToState(nextState) {
@@ -112,7 +123,4 @@ class TooltipState {
       this.#timerId = null;
     }
   }
-}
-export {
-  TooltipState
-};
+}

package/tooltip/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } 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,23 +37,3 @@ 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,37 +1,18 @@
-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";
+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';
   }
-  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,14 +1,31 @@
-import type { ReactifyEvents, WebComponentReactBaseProp, SafeSelect, CamelCaseify, RemoveReadonly, SetAttributes, ExtendEventListeners } from './utils/adapters';
-import type { CSSProperties } from 'react';
+import type { HTMLAttributes, CSSProperties } from 'react'
+import type { ReactifyEvents, WebComponentReactBaseProp, SafeSelect, CamelCaseify, RemoveReadonly, SetAttributes, ExtendEventListeners } from './utils/adapters'
+
 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 {};