@nectary/components 4.12.1 → 5.0.1

package/persistent-overlay/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchDialogProps } from '../dialog/types';
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchPersistentOverlayProps = {
     /** Controls whether the dialog should be open */
     open: TSinchDialogProps['open'];
@@ -22,3 +22,23 @@ export type TSinchPersistentOverlay = {
 };
 export type TSinchPersistentOverlayElement = NectaryComponentVanillaByType<TSinchPersistentOverlay>;
 export type TSinchPersistentOverlayReact = NectaryComponentReactByType<TSinchPersistentOverlay>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-persistent-overlay': TSinchPersistentOverlay;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-persistent-overlay': NectaryComponentVanilla<'sinch-persistent-overlay'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-persistent-overlay': NectaryComponentReact<'sinch-persistent-overlay'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-persistent-overlay': NectaryComponentReact<'sinch-persistent-overlay'>;
+        }
+    }
+}

package/persistent-overlay/types.js

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

package/pop/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/pop/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-pop");

package/pop/index.d.ts

@@ -1,6 +1,7 @@
 import { NectaryElement } from '../utils';
-import type { TSinchPopOrientation, TSinchPop } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+import type { TSinchPopOrientation } from './types';
+import type { TRect } from '../types';
+export * from './types';
 export declare class Pop extends NectaryElement {
     #private;
     constructor();
@@ -19,23 +20,3 @@ export declare class Pop extends NectaryElement {
     get popoverRect(): TRect;
     attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-pop': TSinchPop;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-pop': NectaryComponentVanilla<'sinch-pop'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-pop': NectaryComponentReact<'sinch-pop'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-pop': NectaryComponentReact<'sinch-pop'>;
-        }
-    }
-}

package/pop/index.js

@@ -1,9 +1,16 @@
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement, Context, subscribeContext, isTargetEqual, isAttrEqual } 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"></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content"><slot name="content"></slot></div></dialog>';
-import { disableOverscroll, enableOverscroll, orientationValues } from './utils';
-const template = document.createElement('template');
+import { Context, subscribeContext } from "../utils/context.js";
+import { getBooleanAttribute, updateBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateIntegerAttribute, getIntegerAttribute, isAttrEqual, isAttrTrue } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getRect } from "../utils/rect.js";
+import { getFirstSlotElement, getFirstFocusableElement, isElementFocused } from "../utils/slot.js";
+import { throttleAnimationFrame } from "../utils/throttle.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { isTargetEqual } from "../utils/event-target.js";
+import { orientationValues, disableOverscroll, enableOverscroll } from "./utils.js";
+const templateHTML = '<style>\n:host {\n  display: contents;\n  position: relative;\n}\n\ndialog {\n  position: fixed;\n  left: 0;\n  top: 0;\n  margin: 0;\n  outline: none;\n  padding: 0;\n  border: none;\n  box-sizing: border-box;\n  max-width: unset;\n  max-height: unset;\n  z-index: 1;\n  background: none;\n  overflow: visible;\n}\n\ndialog:not([open]) {\n  display: none;\n}\n\ndialog::backdrop {\n  background-color: transparent;\n}\n\n#content {\n  position: relative;\n  z-index: 1;\n}\n\n#target-open {\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n#focus {\n  display: none;\n  position: absolute;\n  width: 0;\n  height: 0;\n}\n</style>\n\n<slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot>\n<div id="focus"></div>\n<dialog id="dialog">\n  <div id="target-open">\n    <slot name="target-open"></slot>\n  </div>\n  <div id="content">\n    <slot name="content"></slot>\n  </div>\n</dialog>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Pop extends NectaryElement {
+class Pop extends NectaryElement {
   #$targetWrapper;
   #$focus;
   #$dialog;
@@ -23,16 +30,16 @@ export class Pop extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$targetWrapper = shadowRoot.querySelector('#target');
-    this.#$focus = shadowRoot.querySelector('#focus');
-    this.#$dialog = shadowRoot.querySelector('#dialog');
+    this.#$targetWrapper = shadowRoot.querySelector("#target");
+    this.#$focus = shadowRoot.querySelector("#focus");
+    this.#$dialog = shadowRoot.querySelector("#dialog");
     this.#$targetSlot = shadowRoot.querySelector('slot[name="target"]');
     this.#$targetOpenSlot = shadowRoot.querySelector('slot[name="target-open"]');
     this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
-    this.#$targetOpenWrapper = shadowRoot.querySelector('#target-open');
+    this.#$targetOpenWrapper = shadowRoot.querySelector("#target-open");
     this.#resizeThrottle = throttleAnimationFrame(this.#updateOrientation);
-    this.#keydownContext = new Context(this.#$contentSlot, 'keydown');
-    this.#visibilityContext = new Context(this.#$contentSlot, 'visibility');
+    this.#keydownContext = new Context(this.#$contentSlot, "keydown");
+    this.#visibilityContext = new Context(this.#$contentSlot, "visibility");
     this.#controller = new AbortController();
   }
   connectedCallback() {
@@ -40,23 +47,15 @@ export class Pop extends NectaryElement {
     if (this.#controller === null) {
       this.#controller = new AbortController();
     }
-    const {
-      signal
-    } = this.#controller;
+    const { signal } = this.#controller;
     this.#keydownContext.listen(signal);
     this.#visibilityContext.listen(signal);
-    this.setAttribute('role', 'dialog');
-    this.#$dialog.addEventListener('cancel', this.#onCancel, {
-      signal
-    });
-    this.#$dialog.addEventListener('mousedown', this.#onBackdropMouseDown, {
-      signal
-    });
-    this.addEventListener('-close', this.#onCloseReactHandler, {
-      signal
-    });
-    subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
-    if (getBooleanAttribute(this, 'open')) {
+    this.setAttribute("role", "dialog");
+    this.#$dialog.addEventListener("cancel", this.#onCancel, { signal });
+    this.#$dialog.addEventListener("mousedown", this.#onBackdropMouseDown, { signal });
+    this.addEventListener("-close", this.#onCloseReactHandler, { signal });
+    subscribeContext(this, "visibility", this.#onContextVisibility, signal);
+    if (getBooleanAttribute(this, "open")) {
       this.#onExpand();
     }
   }
@@ -68,31 +67,34 @@ export class Pop extends NectaryElement {
     this.#onCollapse();
   }
   static get observedAttributes() {
-    return ['orientation', 'open'];
+    return [
+      "orientation",
+      "open"
+    ];
   }
   set modal(isModal) {
-    updateBooleanAttribute(this, 'modal', isModal);
+    updateBooleanAttribute(this, "modal", isModal);
   }
   get modal() {
-    return getBooleanAttribute(this, 'modal');
+    return getBooleanAttribute(this, "modal");
   }
   set open(isOpen) {
-    updateBooleanAttribute(this, 'open', isOpen);
+    updateBooleanAttribute(this, "open", isOpen);
   }
   get open() {
-    return getBooleanAttribute(this, 'open');
+    return getBooleanAttribute(this, "open");
   }
   get orientation() {
-    return getLiteralAttribute(this, orientationValues, 'orientation');
+    return getLiteralAttribute(this, orientationValues, "orientation");
   }
   set orientation(value) {
-    updateLiteralAttribute(this, orientationValues, 'orientation', value);
+    updateLiteralAttribute(this, orientationValues, "orientation", value);
   }
   set inset(inset) {
-    updateIntegerAttribute(this, 'inset', inset);
+    updateIntegerAttribute(this, "inset", inset);
   }
   get inset() {
-    return getIntegerAttribute(this, 'inset', 0);
+    return getIntegerAttribute(this, "inset", 0);
   }
   get footprintRect() {
     return this.#getTargetRect();
@@ -105,28 +107,26 @@ export class Pop extends NectaryElement {
       return;
     }
     switch (name) {
-      case 'open':
-        {
-          const shouldOpen = isAttrTrue(newVal);
-          if (shouldOpen) {
-            requestAnimationFrame(() => {
-              if (this.isDomConnected && getBooleanAttribute(this, 'open')) {
-                this.#onExpand();
-              }
-            });
-          } else {
-            this.#onCollapse();
-          }
-          updateBooleanAttribute(this, 'open', shouldOpen);
-          break;
+      case "open": {
+        const shouldOpen = isAttrTrue(newVal);
+        if (shouldOpen) {
+          requestAnimationFrame(() => {
+            if (this.isDomConnected && getBooleanAttribute(this, "open")) {
+              this.#onExpand();
+            }
+          });
+        } else {
+          this.#onCollapse();
         }
-      case 'orientation':
-        {
-          if (this.#$dialog.open) {
-            this.#updateOrientation();
-          }
-          break;
+        updateBooleanAttribute(this, "open", shouldOpen);
+        break;
+      }
+      case "orientation": {
+        if (this.#$dialog.open) {
+          this.#updateOrientation();
         }
+        break;
+      }
     }
   }
   #getTargetRect() {
@@ -137,7 +137,7 @@ export class Pop extends NectaryElement {
     if (item === null) {
       return getRect(this.#$targetWrapper);
     }
-    if (Reflect.has(item, 'footprintRect')) {
+    if (Reflect.has(item, "footprintRect")) {
       return item.footprintRect;
     }
     return getRect(item);
@@ -153,17 +153,17 @@ export class Pop extends NectaryElement {
     if (!this.isDomConnected || this.#$dialog.open) {
       return;
     }
-    this.#$targetSlot.addEventListener('blur', this.#stopEventPropagation, true);
-    this.#$focus.setAttribute('tabindex', '-1');
-    this.#$focus.style.display = 'block';
-    this.#$focus.addEventListener('focus', this.#captureRelatedActiveElement);
+    this.#$targetSlot.addEventListener("blur", this.#stopEventPropagation, true);
+    this.#$focus.setAttribute("tabindex", "-1");
+    this.#$focus.style.display = "block";
+    this.#$focus.addEventListener("focus", this.#captureRelatedActiveElement);
     this.#$focus.focus();
-    this.#$focus.removeEventListener('focus', this.#captureRelatedActiveElement);
-    this.#$targetSlot.removeEventListener('blur', this.#stopEventPropagation, true);
-    this.#$focus.removeAttribute('tabindex');
-    this.#$focus.removeAttribute('style');
+    this.#$focus.removeEventListener("focus", this.#captureRelatedActiveElement);
+    this.#$targetSlot.removeEventListener("blur", this.#stopEventPropagation, true);
+    this.#$focus.removeAttribute("tabindex");
+    this.#$focus.removeAttribute("style");
     this.#$dialog.showModal();
-    this.#$targetWrapper.setAttribute('aria-expanded', 'true');
+    this.#$targetWrapper.setAttribute("aria-expanded", "true");
     this.#updateOrientation();
     if (this.modal) {
       getFirstFocusableElement(this.#$contentSlot)?.focus();
@@ -175,43 +175,41 @@ export class Pop extends NectaryElement {
       const marginTop = parseInt(targetElComputedStyle.marginTop);
       const marginBottom = parseInt(targetElComputedStyle.marginBottom);
       const targetRect = this.#getTargetRect();
-      this.#$targetWrapper.style.setProperty('display', 'block');
-      this.#$targetWrapper.style.setProperty('width', `${targetRect.width + marginLeft + marginRight}px`);
-      this.#$targetWrapper.style.setProperty('height', `${targetRect.height + marginTop + marginBottom}px`);
-      this.#$targetOpenWrapper.style.setProperty('width', `${targetRect.width}px`);
-      this.#$targetOpenWrapper.style.setProperty('height', `${targetRect.height}px`);
-      this.#targetStyleValue = $targetEl.getAttribute('style');
-      $targetEl.style.setProperty('margin', '0');
-      $targetEl.style.setProperty('position', 'static');
-      if (targetElComputedStyle.transform !== 'none') {
+      this.#$targetWrapper.style.setProperty("display", "block");
+      this.#$targetWrapper.style.setProperty("width", `${targetRect.width + marginLeft + marginRight}px`);
+      this.#$targetWrapper.style.setProperty("height", `${targetRect.height + marginTop + marginBottom}px`);
+      this.#$targetOpenWrapper.style.setProperty("width", `${targetRect.width}px`);
+      this.#$targetOpenWrapper.style.setProperty("height", `${targetRect.height}px`);
+      this.#targetStyleValue = $targetEl.getAttribute("style");
+      $targetEl.style.setProperty("margin", "0");
+      $targetEl.style.setProperty("position", "static");
+      if (targetElComputedStyle.transform !== "none") {
         const matrix = new DOMMatrixReadOnly(targetElComputedStyle.transform);
-        $targetEl.style.setProperty('transform', matrix.translate(-matrix.e, -matrix.f).toString());
+        $targetEl.style.setProperty("transform", matrix.translate(-matrix.e, -matrix.f).toString());
       }
-      getFirstSlotElement(this.#$targetSlot)?.setAttribute('slot', 'target-open');
-      this.#$targetOpenSlot.addEventListener('keydown', this.#onTargetKeydown);
+      getFirstSlotElement(this.#$targetSlot)?.setAttribute("slot", "target-open");
+      this.#$targetOpenSlot.addEventListener("keydown", this.#onTargetKeydown);
       if (this.#targetActiveElement !== null) {
-        this.#$targetOpenSlot.addEventListener('focus', this.#stopEventPropagation, true);
+        this.#$targetOpenSlot.addEventListener("focus", this.#stopEventPropagation, true);
         this.#targetActiveElement.focus();
-        this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+        this.#$targetOpenSlot.removeEventListener("focus", this.#stopEventPropagation, true);
         if (!isElementFocused(this.#targetActiveElement)) {
           requestAnimationFrame(() => {
             if (this.isDomConnected && this.#$dialog.open) {
-              this.#$targetOpenSlot.addEventListener('focus', this.#stopEventPropagation, true);
+              this.#$targetOpenSlot.addEventListener("focus", this.#stopEventPropagation, true);
               this.#targetActiveElement.focus();
-              this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+              this.#$targetOpenSlot.removeEventListener("focus", this.#stopEventPropagation, true);
             }
           });
         }
       }
     }
     disableOverscroll();
-    window.addEventListener('scroll', this.#updatePosition, {
-      passive: false
-    });
-    window.addEventListener('resize', this.#onResize);
+    window.addEventListener("scroll", this.#updatePosition, { passive: false });
+    window.addEventListener("resize", this.#onResize);
     requestAnimationFrame(() => {
       if (this.isDomConnected && this.#$dialog.open) {
-        this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange);
+        this.#$contentSlot.addEventListener("slotchange", this.#onContentSlotChange);
       }
     });
     this.#dispatchContentVisibility(true);
@@ -222,45 +220,41 @@ export class Pop extends NectaryElement {
     }
     const isNonModal = !this.modal;
     this.#dispatchContentVisibility(false);
-    this.#$targetOpenSlot.removeEventListener('keydown', this.#onTargetKeydown);
+    this.#$targetOpenSlot.removeEventListener("keydown", this.#onTargetKeydown);
     if (isNonModal) {
-      this.#$targetOpenSlot.addEventListener('blur', this.#captureActiveElement, true);
+      this.#$targetOpenSlot.addEventListener("blur", this.#captureActiveElement, true);
     }
     this.#$dialog.close();
-    this.#$targetWrapper.setAttribute('aria-expanded', 'false');
+    this.#$targetWrapper.setAttribute("aria-expanded", "false");
     if (isNonModal) {
-      this.#$targetOpenSlot.removeEventListener('blur', this.#captureActiveElement, true);
+      this.#$targetOpenSlot.removeEventListener("blur", this.#captureActiveElement, true);
     }
     if (isNonModal) {
       const targetEl = this.#getFirstTargetElement(this.#$targetOpenSlot);
-      targetEl.style.removeProperty('margin');
-      targetEl.style.removeProperty('position');
-      targetEl.style.removeProperty('transform');
+      targetEl.style.removeProperty("margin");
+      targetEl.style.removeProperty("position");
+      targetEl.style.removeProperty("transform");
       if (this.#targetStyleValue !== null) {
-        targetEl.setAttribute('style', this.#targetStyleValue);
+        targetEl.setAttribute("style", this.#targetStyleValue);
         this.#targetStyleValue = null;
       }
-      getFirstSlotElement(this.#$targetOpenSlot)?.setAttribute('slot', 'target');
-      this.#$targetWrapper.style.removeProperty('display');
-      this.#$targetWrapper.style.removeProperty('width');
-      this.#$targetWrapper.style.removeProperty('height');
+      getFirstSlotElement(this.#$targetOpenSlot)?.setAttribute("slot", "target");
+      this.#$targetWrapper.style.removeProperty("display");
+      this.#$targetWrapper.style.removeProperty("width");
+      this.#$targetWrapper.style.removeProperty("height");
     }
     if (this.#targetActiveElement !== null) {
       if (!isElementFocused(this.#targetActiveElement)) {
-        this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);
-        this.#targetActiveElement.focus({
-          preventScroll: true
-        });
-        this.#$targetSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+        this.#$targetSlot.addEventListener("focus", this.#stopEventPropagation, true);
+        this.#targetActiveElement.focus({ preventScroll: true });
+        this.#$targetSlot.removeEventListener("focus", this.#stopEventPropagation, true);
         if (!isElementFocused(this.#targetActiveElement)) {
           const $targetEl = this.#targetActiveElement;
           requestAnimationFrame(() => {
             if (this.isDomConnected && !this.#$dialog.open) {
-              this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);
-              $targetEl.focus({
-                preventScroll: true
-              });
-              this.#$targetSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+              this.#$targetSlot.addEventListener("focus", this.#stopEventPropagation, true);
+              $targetEl.focus({ preventScroll: true });
+              this.#$targetSlot.removeEventListener("focus", this.#stopEventPropagation, true);
             }
           });
         }
@@ -269,9 +263,9 @@ export class Pop extends NectaryElement {
     }
     enableOverscroll();
     this.#resizeThrottle.cancel();
-    window.removeEventListener('resize', this.#onResize);
-    window.removeEventListener('scroll', this.#updatePosition);
-    this.#$contentSlot.removeEventListener('slotchange', this.#onContentSlotChange);
+    window.removeEventListener("resize", this.#onResize);
+    window.removeEventListener("scroll", this.#updatePosition);
+    this.#$contentSlot.removeEventListener("slotchange", this.#onContentSlotChange);
   }
   #onResize = () => {
     this.#resizeThrottle.fn();
@@ -284,47 +278,47 @@ export class Pop extends NectaryElement {
     const inset = this.inset;
     let xPos = 0;
     let yPos = 0;
-    if (orient === 'bottom-right' || orient === 'top-right' || orient === 'top-stretch' || orient === 'bottom-stretch') {
+    if (orient === "bottom-right" || orient === "top-right" || orient === "top-stretch" || orient === "bottom-stretch") {
       xPos = targetRect.x;
     }
-    if (orient === 'bottom-left' || orient === 'top-left') {
+    if (orient === "bottom-left" || orient === "top-left") {
       xPos = targetRect.x + targetRect.width - modalWidth;
     }
-    if (orient === 'bottom-center' || orient === 'top-center') {
+    if (orient === "bottom-center" || orient === "top-center") {
       xPos = targetRect.x + targetRect.width / 2 - modalWidth / 2;
     }
-    if (orient === 'center-right') {
+    if (orient === "center-right") {
       xPos = targetRect.x + targetRect.width;
     }
-    if (orient === 'center-left') {
+    if (orient === "center-left") {
       xPos = targetRect.x - modalWidth;
     }
-    if (orient === 'bottom-left' || orient === 'bottom-right' || orient === 'bottom-stretch' || orient === 'bottom-center') {
+    if (orient === "bottom-left" || orient === "bottom-right" || orient === "bottom-stretch" || orient === "bottom-center") {
       yPos = targetRect.y + targetRect.height;
     }
-    if (orient === 'top-left' || orient === 'top-right' || orient === 'top-stretch' || orient === 'top-center') {
+    if (orient === "top-left" || orient === "top-right" || orient === "top-stretch" || orient === "top-center") {
       yPos = targetRect.y - modalHeight;
     }
-    if (orient === 'center-left' || orient === 'center-right') {
+    if (orient === "center-left" || orient === "center-right") {
       yPos = targetRect.y + targetRect.height / 2 - modalHeight / 2;
     }
     const clampedXPos = Math.max(inset, Math.min(xPos, window.innerWidth - modalWidth - inset));
     const clampedYPos = Math.max(inset, Math.min(yPos, window.innerHeight - modalHeight - inset));
-    this.#$dialog.style.setProperty('left', `${clampedXPos}px`);
-    this.#$dialog.style.setProperty('top', `${clampedYPos}px`);
+    this.#$dialog.style.setProperty("left", `${clampedXPos}px`);
+    this.#$dialog.style.setProperty("top", `${clampedYPos}px`);
     if (!this.modal) {
       const targetLeftPos = targetRect.x - clampedXPos;
       const targetTopPos = targetRect.y - clampedYPos;
-      this.#$targetOpenWrapper.style.setProperty('left', `${targetLeftPos}px`);
-      this.#$targetOpenWrapper.style.setProperty('top', `${targetTopPos}px`);
+      this.#$targetOpenWrapper.style.setProperty("left", `${targetLeftPos}px`);
+      this.#$targetOpenWrapper.style.setProperty("top", `${targetTopPos}px`);
     }
   };
   #updateOrientation = () => {
-    this.#$dialog.style.setProperty('width', 'max-content');
+    this.#$dialog.style.setProperty("width", "max-content");
     const targetRect = this.#getTargetRect();
     const modalRect = this.#$dialog.getBoundingClientRect();
     const orient = this.orientation;
-    const shouldSetWidthToTarget = orient === 'top-stretch' || orient === 'bottom-stretch';
+    const shouldSetWidthToTarget = orient === "top-stretch" || orient === "bottom-stretch";
     const modalHeight = modalRect.height;
     const modalWidth = shouldSetWidthToTarget ? targetRect.width : modalRect.width;
     const inset = this.inset;
@@ -332,43 +326,43 @@ export class Pop extends NectaryElement {
     let yPos = 0;
     this.#modalHeight = modalHeight;
     this.#modalWidth = modalWidth;
-    if (orient === 'bottom-right' || orient === 'top-right' || orient === 'top-stretch' || orient === 'bottom-stretch') {
+    if (orient === "bottom-right" || orient === "top-right" || orient === "top-stretch" || orient === "bottom-stretch") {
       xPos = targetRect.x;
     }
-    if (orient === 'bottom-left' || orient === 'top-left') {
+    if (orient === "bottom-left" || orient === "top-left") {
       xPos = targetRect.x + targetRect.width - modalWidth;
     }
-    if (orient === 'bottom-center' || orient === 'top-center') {
+    if (orient === "bottom-center" || orient === "top-center") {
       xPos = targetRect.x + targetRect.width / 2 - modalWidth / 2;
     }
-    if (orient === 'center-right') {
+    if (orient === "center-right") {
       xPos = targetRect.x + targetRect.width;
     }
-    if (orient === 'center-left') {
+    if (orient === "center-left") {
       xPos = targetRect.x - modalWidth;
     }
-    if (orient === 'bottom-left' || orient === 'bottom-right' || orient === 'bottom-stretch' || orient === 'bottom-center') {
+    if (orient === "bottom-left" || orient === "bottom-right" || orient === "bottom-stretch" || orient === "bottom-center") {
       yPos = targetRect.y + targetRect.height;
     }
-    if (orient === 'top-left' || orient === 'top-right' || orient === 'top-stretch' || orient === 'top-center') {
+    if (orient === "top-left" || orient === "top-right" || orient === "top-stretch" || orient === "top-center") {
       yPos = targetRect.y - modalHeight;
     }
-    if (orient === 'center-left' || orient === 'center-right') {
+    if (orient === "center-left" || orient === "center-right") {
       yPos = targetRect.y + targetRect.height / 2 - modalHeight / 2;
     }
     xPos = Math.round(Math.max(inset, Math.min(xPos, window.innerWidth - modalWidth - inset)));
     yPos = Math.round(Math.max(inset, Math.min(yPos, window.innerHeight - modalHeight - inset)));
-    this.#$dialog.style.setProperty('left', `${xPos}px`);
-    this.#$dialog.style.setProperty('top', `${yPos}px`);
-    this.#$dialog.style.setProperty('width', `${modalWidth}px`);
+    this.#$dialog.style.setProperty("left", `${xPos}px`);
+    this.#$dialog.style.setProperty("top", `${yPos}px`);
+    this.#$dialog.style.setProperty("width", `${modalWidth}px`);
     if (!this.modal) {
       const targetLeftPos = targetRect.x - xPos;
       const targetTopPos = targetRect.y - yPos;
-      this.#$targetOpenWrapper.style.setProperty('left', `${targetLeftPos}px`);
-      this.#$targetOpenWrapper.style.setProperty('top', `${targetTopPos}px`);
+      this.#$targetOpenWrapper.style.setProperty("left", `${targetLeftPos}px`);
+      this.#$targetOpenWrapper.style.setProperty("top", `${targetTopPos}px`);
     }
   };
-  #onBackdropMouseDown = e => {
+  #onBackdropMouseDown = (e) => {
     if (isTargetEqual(e, this.#$dialog)) {
       const rect = this.popoverRect;
       const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
@@ -378,32 +372,34 @@ export class Pop extends NectaryElement {
       }
     }
   };
-  #onCancel = e => {
+  #onCancel = (e) => {
     e.preventDefault();
     e.stopPropagation();
     this.#dispatchCloseEvent();
   };
-  #onCloseReactHandler = e => {
-    getReactEventHandler(this, 'on-close')?.(e);
+  #onCloseReactHandler = (e) => {
+    getReactEventHandler(this, "on-close")?.(e);
   };
   #dispatchCloseEvent() {
-    this.dispatchEvent(new CustomEvent('-close'));
+    this.dispatchEvent(
+      new CustomEvent("-close")
+    );
   }
-  #captureRelatedActiveElement = e => {
+  #captureRelatedActiveElement = (e) => {
     e.stopPropagation();
     this.#targetActiveElement = e.relatedTarget;
   };
-  #captureActiveElement = e => {
+  #captureActiveElement = (e) => {
     e.stopPropagation();
     this.#targetActiveElement = e.target;
   };
-  #stopEventPropagation = e => {
+  #stopEventPropagation = (e) => {
     e.stopPropagation();
   };
   #dispatchContentVisibility(isVisible) {
     this.#visibilityContext.dispatch(isVisible);
   }
-  #onTargetKeydown = e => {
+  #onTargetKeydown = (e) => {
     this.#keydownContext.dispatch({
       code: e.code,
       preventDefault: () => {
@@ -411,16 +407,19 @@ export class Pop extends NectaryElement {
       }
     });
   };
-  #onContextVisibility = e => {
+  #onContextVisibility = (e) => {
     if (!e.detail) {
       this.#dispatchCloseEvent();
     }
   };
-  #onContentSlotChange = e => {
+  #onContentSlotChange = (e) => {
     e.stopPropagation();
     if (this.#$dialog.open) {
       this.#updateOrientation();
     }
   };
 }
-defineCustomElement('sinch-pop', Pop);
+defineCustomElement("sinch-pop", Pop);
+export {
+  Pop
+};

package/pop/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 TSinchPopOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'bottom-stretch' | 'top-center' | 'top-stretch' | 'center-right' | 'center-left';
 export type TSinchPopProps = {
     /** Open/close state */
@@ -23,3 +23,23 @@ export type TSinchPop = {
 };
 export type TSinchPopElement = NectaryComponentVanillaByType<TSinchPop>;
 export type TSinchPopReact = NectaryComponentReactByType<TSinchPop>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-pop': TSinchPop;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-pop': NectaryComponentVanilla<'sinch-pop'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-pop': NectaryComponentReact<'sinch-pop'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-pop': NectaryComponentReact<'sinch-pop'>;
+        }
+    }
+}

package/pop/types.js

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