@nectary/components 0.41.0 → 0.41.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.41.0",
+  "version": "0.41.1",
   "files": [
     "theme.css",
     "**/*/*.js",

package/pop/index.js

@@ -19,6 +19,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   #controller = null;
   #keydownContext;
   #visibilityContext;
+  #targetStyleValue = null;
 
   constructor() {
     super();
@@ -155,7 +156,11 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   }
 
   #getTargetRect() {
-    const item = getFirstSlotElement(this.#$targetSlot, true);
+    let item = getFirstSlotElement(this.#$targetSlot, true);
+
+    if (item === null && this.#isOpen()) {
+      item = getFirstSlotElement(this.#$targetOpenSlot, true);
+    }
 
     if (item === null) {
       return getRect(this.#$target);
@@ -168,6 +173,16 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     return getRect(item);
   }
 
+  #getFirstTargetElement(slot) {
+    const item = getFirstSlotElement(slot, true);
+
+    if (item === null) {
+      return this.#$target;
+    }
+
+    return item;
+  }
+
   #onExpand() {
     if (!this.#isConnected || this.#isOpen()) {
       return;
@@ -187,14 +202,27 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     if (this.modal) {
       getFirstFocusableElement(this.#$contentSlot)?.focus();
     } else {
+      const $targetEl = this.#getFirstTargetElement(this.#$targetSlot);
+      const targetElComputedStyle = getComputedStyle($targetEl);
+      const marginLeft = parseInt(targetElComputedStyle.marginLeft);
+      const marginRight = parseInt(targetElComputedStyle.marginRight);
+      const marginTop = parseInt(targetElComputedStyle.marginTop);
+      const marginBottom = parseInt(targetElComputedStyle.marginBottom);
       const targetRect = this.#getTargetRect();
-      const widthPx = `${targetRect.width}px`;
-      const heightPx = `${targetRect.height}px`;
       this.#$target.style.setProperty('display', 'block');
-      this.#$target.style.setProperty('width', widthPx);
-      this.#$target.style.setProperty('height', heightPx);
-      this.#$targetOpenWrapper.style.setProperty('width', widthPx);
-      this.#$targetOpenWrapper.style.setProperty('height', heightPx);
+      this.#$target.style.setProperty('width', `${targetRect.width + marginLeft + marginRight}px`);
+      this.#$target.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());
+      }
+
       getFirstSlotElement(this.#$targetSlot)?.setAttribute('slot', 'target-open');
       this.#$targetOpenSlot.addEventListener('keydown', this.#onTargetKeydown);
 
@@ -238,6 +266,16 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
       this.#$targetOpenSlot.removeEventListener('blur', this.#captureActiveElement, true);
     }
 
+    const targetEl = this.#getFirstTargetElement(this.#$targetOpenSlot);
+    targetEl.style.removeProperty('margin');
+    targetEl.style.removeProperty('position');
+    targetEl.style.removeProperty('transform');
+
+    if (this.#targetStyleValue !== null) {
+      targetEl.setAttribute('style', this.#targetStyleValue);
+      this.#targetStyleValue = null;
+    }
+
     getFirstSlotElement(this.#$targetOpenSlot)?.setAttribute('slot', 'target');
     this.#$target.style.removeProperty('display');
     this.#$target.style.removeProperty('width');