@nectary/components 2.1.2 → 2.1.3

package/dialog/index.js

@@ -2,9 +2,9 @@ import '../icon-button';
 import '../icon';
 import '../stop-events';
 import '../title';
-import { disableScroll, enableScroll } from '../pop/utils';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, setClass, isTargetEqual } from '../utils';
 const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:50vh}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-comp-dialog-max-width);max-height:unset;border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;max-height:var(--sinch-comp-dialog-max-height);padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{position:relative;left:4px;top:-4px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}</style><dialog id="dialog"><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s"><sinch-icon id="icon-close" slot="icon" name="close"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
+import { disableScroll, enableScroll } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-dialog', class extends NectaryElement {

package/dialog/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const disableScroll: () => void;
+export declare const enableScroll: () => void;

package/dialog/utils.js

@@ -0,0 +1,18 @@
+const bodyEl = document.body;
+export const disableScroll = () => {
+  bodyEl.__dialog_counter__ = (bodyEl.__dialog_counter__ ?? 0) + 1;
+  if (bodyEl.__dialog_counter__ === 1) {
+    const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
+    bodyEl.style.overflow = 'hidden';
+    if (scrollWidth > 0) {
+      bodyEl.style.setProperty('padding-right', `${scrollWidth}px`);
+    }
+  }
+};
+export const enableScroll = () => {
+  bodyEl.__dialog_counter__ = Math.max(0, (bodyEl.__dialog_counter__ ?? 0) - 1);
+  if (bodyEl.__dialog_counter__ === 0) {
+    bodyEl.style.overflow = '';
+    bodyEl.style.removeProperty('padding-right');
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/pop/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement, Context, subscribeContext, isTargetEqual } 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 { disableScroll, enableScroll, orientationValues } from './utils';
+import { disableOverscroll, enableOverscroll, orientationValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-pop', class extends NectaryElement {
@@ -17,6 +17,8 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   #keydownContext;
   #visibilityContext;
   #targetStyleValue = null;
+  #modalWidth = 0;
+  #modalHeight = 0;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -201,7 +203,10 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         }
       }
     }
-    disableScroll();
+    disableOverscroll();
+    window.addEventListener('scroll', this.#updatePosition, {
+      passive: false
+    });
     window.addEventListener('resize', this.#onResize);
     requestAnimationFrame(() => {
       if (this.isConnected && this.#$dialog.open) {
@@ -242,14 +247,18 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     if (this.#targetActiveElement !== null) {
       if (!isElementFocused(this.#targetActiveElement)) {
         this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);
-        this.#targetActiveElement.focus();
+        this.#targetActiveElement.focus({
+          preventScroll: true
+        });
         this.#$targetSlot.removeEventListener('focus', this.#stopEventPropagation, true);
         if (!isElementFocused(this.#targetActiveElement)) {
           const $targetEl = this.#targetActiveElement;
           requestAnimationFrame(() => {
             if (this.isConnected && !this.#$dialog.open) {
               this.#$targetSlot.addEventListener('focus', this.#stopEventPropagation, true);
-              $targetEl.focus();
+              $targetEl.focus({
+                preventScroll: true
+              });
               this.#$targetSlot.removeEventListener('focus', this.#stopEventPropagation, true);
             }
           });
@@ -257,14 +266,58 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
         this.#targetActiveElement = null;
       }
     }
-    enableScroll();
+    enableOverscroll();
     this.#resizeThrottle.cancel();
     window.removeEventListener('resize', this.#onResize);
+    window.removeEventListener('scroll', this.#updatePosition);
     this.#$contentSlot.removeEventListener('slotchange', this.#onContentSlotChange);
   }
   #onResize = () => {
     this.#resizeThrottle.fn();
   };
+  #updatePosition = () => {
+    const targetRect = this.modal ? this.#getTargetRect() : this.#$targetWrapper.getBoundingClientRect();
+    const orient = this.orientation;
+    const modalWidth = this.#modalWidth;
+    const modalHeight = this.#modalHeight;
+    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;
+    }
+    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`);
+    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`);
+    }
+  };
   #updateOrientation = () => {
     this.#$dialog.style.setProperty('width', 'max-content');
     const targetRect = this.#getTargetRect();
@@ -276,6 +329,8 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     const inset = this.inset;
     let xPos = 0;
     let yPos = 0;
+    this.#modalHeight = modalHeight;
+    this.#modalWidth = modalWidth;
     if (orient === 'bottom-right' || orient === 'top-right' || orient === 'top-stretch' || orient === 'bottom-stretch') {
       xPos = targetRect.x;
     }

package/pop/utils.d.ts

@@ -1,4 +1,4 @@
 import type { TSinchPopOrientation } from './types';
 export declare const orientationValues: readonly TSinchPopOrientation[];
-export declare const disableScroll: () => void;
-export declare const enableScroll: () => void;
+export declare const disableOverscroll: () => void;
+export declare const enableOverscroll: () => void;

package/pop/utils.js

@@ -1,12 +1,16 @@
 export const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'bottom-stretch', 'bottom-center', 'top-stretch', 'top-center', 'center-left', 'center-right'];
 const bodyEl = document.body;
-export const disableScroll = () => {
-  bodyEl.style.overflow = 'hidden';
+export const disableOverscroll = () => {
   bodyEl.__pop_counter__ = (bodyEl.__pop_counter__ ?? 0) + 1;
+  if (bodyEl.__pop_counter__ === 1) {
+    bodyEl.style.setProperty('overscroll-behavior', 'none');
+    document.documentElement.style.setProperty('overscroll-behavior', 'none');
+  }
 };
-export const enableScroll = () => {
+export const enableOverscroll = () => {
   bodyEl.__pop_counter__ = Math.max(0, (bodyEl.__pop_counter__ ?? 0) - 1);
   if (bodyEl.__pop_counter__ === 0) {
-    document.body.style.overflow = '';
+    bodyEl.style.removeProperty('overscroll-behavior');
+    document.documentElement.style.removeProperty('overscroll-behavior');
   }
 };