@nectary/components 0.41.0 → 0.42.0

package/pagination/index.js

@@ -15,7 +15,6 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
   #$right;
   #$buttons;
   #$wrapper;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -25,22 +24,18 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
     this.#$buttons = shadowRoot.querySelectorAll('.page');
     this.#$wrapper = shadowRoot.querySelector('#wrapper');
   }
-
   connectedCallback() {
     this.#onValueChange();
     this.#$wrapper.addEventListener('click', this.#onButtonClick);
     this.addEventListener('-change', this.#onChangeReactHandler);
   }
-
   disconnectedCallback() {
     this.#$wrapper.removeEventListener('click', this.#onButtonClick);
     this.removeEventListener('-change', this.#onChangeReactHandler);
   }
-
   static get observedAttributes() {
     return ['max', 'value'];
   }
-
   attributeChangedCallback(name, _) {
     switch (name) {
       case 'value':
@@ -48,7 +43,6 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
           this.#onValueChange();
           break;
         }
-
       case 'max':
         {
           this.#onValueChange();
@@ -56,35 +50,27 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
         }
     }
   }
-
   get nodeName() {
     return 'select';
   }
-
   set value(val) {
     updateAttribute(this, 'value', val);
   }
-
   get value() {
     return getIntegerAttribute(this, 'value', 0);
   }
-
   set max(val) {
     updateAttribute(this, 'max', val);
   }
-
   get max() {
     return getIntegerAttribute(this, 'value', 0);
   }
-
   #onValueChange() {
     const value = getIntegerAttribute(this, 'value', 0) - 1;
     const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
     const valueOffset = Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS));
-
     for (let i = 0; i < this.#$buttons.length; i++) {
       const $b = this.#$buttons[i];
-
       if (value < 3) {
         setClass($b, 'active', value === i);
       } else if (value >= max - MIDDLE_BTN_INDEX) {
@@ -92,24 +78,19 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
       } else {
         setClass($b, 'active', i === MIDDLE_BTN_INDEX);
       }
-
       if (max > NUM_BUTTONS) {
         setClass($b, 'dots', i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX);
       }
-
       setClass($b, 'hidden', i >= max);
       const btnText = $b.firstElementChild;
-
       if (btnText != null) {
         btnText.textContent = i === FIRST_BTN_INDEX ? '1' : i === LAST_BTN_INDEX ? String(max) : String(i + 1 + valueOffset);
       }
     }
-
     const isValueBad = value < 0 || value >= max;
     this.#$left.disabled = isValueBad || value === 0;
     this.#$right.disabled = isValueBad || value === max - 1;
   }
-
   #onButtonClick = e => {
     e.stopPropagation();
     const value = getIntegerAttribute(this, 'value', 0) - 1;
@@ -122,9 +103,7 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
     if (e.target === this.#$right) {
       return this.#dispatchChangeEvent(value + 1);
     }
-
     const btnIndex = Array.prototype.indexOf.call(this.#$wrapper.children, e.target) - 1;
-
     if (btnIndex >= 0 && btnIndex < this.#$buttons.length) {
       if (btnIndex === FIRST_BTN_INDEX) {
         return this.#dispatchChangeEvent(0);
@@ -145,12 +124,10 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
       return this.#dispatchChangeEvent(btnIndex + Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS)));
     }
   };
-
   #clamp(value) {
     const max = getIntegerAttribute(this, 'max', 0);
     return Math.max(0, Math.min(max - 1, value)) + 1;
   }
-
   #dispatchChangeEvent(value) {
     const detail = this.#clamp(value);
     this.dispatchEvent(new CustomEvent('change', {
@@ -161,36 +138,28 @@ defineCustomElement('sinch-pagination', class extends NectaryElement {
       detail
     }));
   }
-
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
-
   get focusable() {
     return true;
   }
-
   focus() {
     this.#$left.focus();
   }
-
   blur() {
     this.#$left.blur();
     this.#$right.blur();
     this.#$buttons.forEach($b => $b.blur());
   }
-
   get prevButtonRect() {
     return getRect(this.#$left);
   }
-
   get nextButtonRect() {
     return getRect(this.#$right);
   }
-
   nthButtonRect(index) {
     const btn = this.#$buttons[index];
     return btn == null ? null : getRect(btn);
   }
-
 });

package/pop/index.js

@@ -19,7 +19,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   #controller = null;
   #keydownContext;
   #visibilityContext;
-
+  #targetStyleValue = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -39,7 +39,6 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
 
     dialogPolyfill.dm.handleFocus_ = function () {};
   }
-
   connectedCallback() {
     this.#controller = new AbortController();
     const {
@@ -62,12 +61,10 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     });
     dispatchContextConnectEvent(this, 'visibility');
     this.#isConnected = true;
-
     if (getBooleanAttribute(this, 'open')) {
       this.#onExpand();
     }
   }
-
   disconnectedCallback() {
     this.#controller.abort();
     this.#keydownContext.unsubscribe();
@@ -76,56 +73,43 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     this.#onCollapse();
     this.#isConnected = false;
   }
-
   static get observedAttributes() {
     return ['orientation', 'open'];
   }
-
   set modal(isModal) {
     updateBooleanAttribute(this, 'modal', isModal);
   }
-
   get modal() {
     return getBooleanAttribute(this, 'modal');
   }
-
   set open(isOpen) {
     updateBooleanAttribute(this, 'open', isOpen);
   }
-
   get open() {
     return getBooleanAttribute(this, 'open');
   }
-
   get orientation() {
     return getLiteralAttribute(this, orientationValues, 'orientation');
   }
-
   set orientation(value) {
     updateLiteralAttribute(this, orientationValues, 'orientation', value);
   }
-
   set inset(inset) {
     updateIntegerAttribute(this, 'inset', inset);
   }
-
   get inset() {
     return getIntegerAttribute(this, 'inset', 0);
   }
-
   get footprintRect() {
     return this.#getTargetRect();
   }
-
   get popoverRect() {
     return getRect(this.#$dialog);
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'open':
         {
@@ -136,38 +120,39 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
           } else {
             this.#onCollapse();
           }
-
           updateBooleanAttribute(this, 'open', isAttrTrue(newVal));
           break;
         }
-
       case 'orientation':
         {
           assertOrientation(newVal);
-
           if (this.#isOpen()) {
             this.#updateOrientation();
           }
-
           break;
         }
     }
   }
-
   #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);
     }
-
     if (Reflect.has(item, 'footprintRect')) {
       return item.footprintRect;
     }
-
     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;
@@ -180,50 +165,64 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     this.#$focus.removeEventListener('focus', this.#captureRelatedActiveElement);
     this.#$focus.style.removeProperty('display');
     this.#$targetSlot.removeEventListener('blur', this.#stopEventPropagation, true);
+
     this.#$dialog.showModal();
     this.#$target.setAttribute('aria-expanded', 'true');
     this.#updateOrientation();
-
     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);
 
+      this.#$targetOpenSlot.addEventListener('keydown', this.#onTargetKeydown);
       if (this.#targetActiveElement !== null) {
-        requestAnimationFrame(this.#focusTargetElementOnExpandNonModal);
-        this.#focusTargetElementOnExpandNonModal();
+        this.#$targetOpenSlot.addEventListener('focus', this.#stopEventPropagation, true);
+        this.#targetActiveElement.focus();
+        this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+
+        if (!isElementFocused(this.#targetActiveElement)) {
+          requestAnimationFrame(() => {
+            this.#$targetOpenSlot.addEventListener('focus', this.#stopEventPropagation, true);
+            this.#targetActiveElement.focus();
+            this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+          });
+        }
       }
     }
 
     disableScroll();
     window.addEventListener('resize', this.#onResize);
+
     this.#dispatchContentVisibility(true);
   }
-
-  #focusTargetElementOnExpandNonModal = () => {
-    if (this.#targetActiveElement !== null) {
-      this.#$targetOpenSlot.addEventListener('focus', this.#stopEventPropagation, true);
-      this.#targetActiveElement.focus();
-      this.#$targetOpenSlot.removeEventListener('focus', this.#stopEventPropagation, true);
-    }
-  };
-
   #onCollapse() {
     if (!this.#isOpen()) {
       return;
     }
-
     const isNonModal = !this.modal;
+
     this.#dispatchContentVisibility(false);
+
     this.#$targetOpenSlot.removeEventListener('keydown', this.#onTargetKeydown);
 
     if (isNonModal) {
@@ -238,6 +237,14 @@ 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');
@@ -248,20 +255,26 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);
         this.#targetActiveElement.focus();
         this.#$targetSlot.removeEventListener('focus', this.#stopEventPropagation, true);
-      }
 
-      this.#targetActiveElement = null;
+        if (!isElementFocused(this.#targetActiveElement)) {
+          const $targetEl = this.#targetActiveElement;
+          requestAnimationFrame(() => {
+            this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);
+            $targetEl.focus();
+            this.#$targetSlot.removeEventListener('focus', this.#stopEventPropagation, true);
+          });
+        }
+        this.#targetActiveElement = null;
+      }
     }
 
     enableScroll();
     this.#resizeThrottle.cancel();
     window.removeEventListener('resize', this.#onResize);
   }
-
   #isOpen() {
     return getBooleanAttribute(this.#$dialog, 'open');
   }
-
   #onResize = () => {
     this.#resizeThrottle.fn();
   };
@@ -276,45 +289,35 @@ defineCustomElement('sinch-pop', class 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') {
       xPos = targetRect.x;
     }
-
     if (orient === 'bottom-left' || orient === 'top-left') {
       xPos = targetRect.x + targetRect.width - modalWidth;
     }
-
     if (orient === 'bottom-center' || orient === 'top-center') {
       xPos = targetRect.x + targetRect.width / 2 - modalWidth / 2;
     }
-
     if (orient === 'center-right') {
       xPos = targetRect.x + targetRect.width;
     }
-
     if (orient === 'center-left') {
       xPos = targetRect.x - modalWidth;
     }
-
     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') {
       yPos = targetRect.y - modalHeight;
     }
-
     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`);
-
     if (!this.modal) {
       const targetLeftPos = targetRect.x - xPos;
       const targetTopPos = targetRect.y - yPos;
@@ -326,10 +329,8 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     if (e.target !== this.#$dialog) {
       return;
     }
-
     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;
-
     if (!isInside) {
       this.#dispatchCloseEvent();
     }
@@ -341,11 +342,9 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   #onCloseReactHandler = e => {
     getReactEventHandler(this, 'on-close')?.(e);
   };
-
   #dispatchCloseEvent() {
     this.dispatchEvent(new CustomEvent('-close'));
   }
-
   #captureRelatedActiveElement = e => {
     e.stopPropagation();
     this.#targetActiveElement = e.relatedTarget;
@@ -357,7 +356,6 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   #stopEventPropagation = e => {
     e.stopPropagation();
   };
-
   #dispatchContentVisibility(isVisible) {
     for (const $el of this.#visibilityContext.elements) {
       $el.dispatchEvent(new CustomEvent('-visibility', {
@@ -365,7 +363,6 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
       }));
     }
   }
-
   #onTargetKeydown = e => {
     for (const $el of this.#keydownContext.elements) {
       let isPrevented = false;
@@ -377,7 +374,6 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
           }
         }
       }));
-
       if (isPrevented) {
         e.preventDefault();
       }

package/pop/utils.js

@@ -11,7 +11,6 @@ export const disableScroll = () => {
 };
 export const enableScroll = () => {
   bodyEl.__pop_counter__ = Math.max(0, (bodyEl.__pop_counter__ ?? 0) - 1);
-
   if (bodyEl.__pop_counter__ === 0) {
     document.body.style.overflow = '';
   }

package/popover/index.js

@@ -11,7 +11,6 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
   #$content;
   #$tip;
   #controller = null;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -20,7 +19,6 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
     this.#$content = shadowRoot.querySelector('#content');
     this.#$tip = shadowRoot.querySelector('#tip');
   }
-
   connectedCallback() {
     this.#controller = new AbortController();
     const {
@@ -38,12 +36,10 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
     dispatchContextConnectEvent(this.#$content, 'visibility');
     updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
   }
-
   disconnectedCallback() {
     dispatchContextDisconnectEvent(this.#$content, 'visibility');
     this.#controller.abort();
   }
-
   #onPopClose = () => {
     this.#dispatchCloseEvent();
   };
@@ -51,84 +47,64 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
     getReactEventHandler(this, 'onClose')?.();
     getReactEventHandler(this, 'on-close')?.(e);
   };
-
   #dispatchCloseEvent() {
     this.dispatchEvent(new CustomEvent('-close'));
   }
-
   static get observedAttributes() {
     return ['orientation', 'open', 'modal', 'tip'];
   }
-
   set modal(isModal) {
     updateBooleanAttribute(this, 'modal', isModal);
   }
-
   get modal() {
     return getBooleanAttribute(this, 'modal');
   }
-
   set open(isOpen) {
     updateBooleanAttribute(this, 'open', isOpen);
   }
-
   get open() {
     return getBooleanAttribute(this, 'open');
   }
-
   set tip(hasTip) {
     updateBooleanAttribute(this, 'tip', hasTip);
   }
-
   get tip() {
     return getBooleanAttribute(this, 'tip');
   }
-
   get orientation() {
     return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom-left');
   }
-
   set orientation(value) {
     updateLiteralAttribute(this, orientationValues, 'orientation', value);
   }
-
   get footprintRect() {
     return this.#$pop.footprintRect;
   }
-
   get popoverRect() {
     return this.#$pop.popoverRect;
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'orientation':
         {
           assertOrientation(newVal);
           updateAttribute(this.#$pop, 'orientation', getPopOrientation(newVal));
-
           if (this.#isOpen()) {
             this.#updateTipOrientation();
           }
-
           break;
         }
-
       case 'tip':
         {
           updateBooleanAttribute(this, 'tip', isAttrTrue(newVal));
-
           if (newVal === '' && this.#isOpen()) {
             this.#updateTipOrientation();
           }
-
           break;
         }
-
       case 'open':
         {
           const isOpen = isAttrTrue(newVal);
@@ -136,14 +112,12 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
           updateBooleanAttribute(this, name, isOpen);
           break;
         }
-
       default:
         {
           updateAttribute(this.#$pop, name, newVal);
         }
     }
   }
-
   #onContextVisibility = e => {
     if (e.detail) {
       this.#updateTipOrientation();
@@ -151,34 +125,27 @@ defineCustomElement('sinch-popover', class extends NectaryElement {
       this.#resetTipOrientation();
     }
   };
-
   #resetTipOrientation() {
     this.#$tip.style.top = '';
     this.#$tip.style.left = '';
   }
-
   #updateTipOrientation = () => {
     const orientation = this.orientation;
     const targetRect = this.#$pop.footprintRect;
     const contentRect = this.#$content.getBoundingClientRect();
     const diffX = targetRect.x - contentRect.x;
     let desiredX = diffX + targetRect.width / 2;
-
     if (orientation === 'bottom-left' || orientation === 'top-left') {
       desiredX = Math.max(desiredX, contentRect.width * 0.75);
     }
-
     if (orientation === 'bottom-right' || orientation === 'top-right') {
       desiredX = Math.min(desiredX, contentRect.width * 0.25);
     }
-
     const xPos = Math.max(TIP_SIZE, Math.min(desiredX, contentRect.width - TIP_SIZE));
     this.#$tip.style.left = `${xPos}px`;
     setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
   };
-
   #isOpen() {
     return this.#$pop.open;
   }
-
 });

package/popover/utils.js

@@ -3,11 +3,9 @@ export const getPopOrientation = orientation => {
   if (orientation === 'top') {
     return 'top-stretch';
   }
-
   if (orientation === 'bottom') {
     return 'bottom-stretch';
   }
-
   return orientation;
 };
 export const assertOrientation = value => {