@nectary/components 0.38.0 → 0.40.0

package/popover/index.js

@@ -1,234 +1,77 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$target, _$dialog, _isConnected, _resizeThrottle, _originalOverflowValue, _$targetSlot, _$targetOpenSlot, _$targetOpenWrapper, _targetActiveElement, _onExpand, _onCollapse, _isOpen, _onResize, _updateOrientation, _onBackdropMouseDown, _onCancel, _onCloseReactHandler, _dispatchCloseEvent, _captureActiveElement, _stopPropagation;
-
-function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
-function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
-
 import dialogPolyfill from 'dialog-polyfill';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{position:fixed;top:0;left: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}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#target{display:flex;flex-direction:column}#content{position:relative;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-2);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-popover-shape-radius,var(--sinch-shape-radius-l));outline:0}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content" tabindex="-1"><slot name="content"></slot></div></dialog></div>';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, Context, getFirstSlotElement, isElementFocused } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{position:fixed;top:0;left: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}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#target{display:flex;flex-direction:column}#content{position:relative;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-2);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-shape-radius-m);outline:0;overflow:hidden}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content"><slot name="content"></slot></div></dialog></div>';
 import { orientationValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 const POPOVER_OFFSET = 4;
-defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _resizeThrottle = new WeakMap(), _originalOverflowValue = new WeakMap(), _$targetSlot = new WeakMap(), _$targetOpenSlot = new WeakMap(), _$targetOpenWrapper = new WeakMap(), _targetActiveElement = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _onResize = new WeakMap(), _updateOrientation = new WeakMap(), _onBackdropMouseDown = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), _captureActiveElement = new WeakMap(), _stopPropagation = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-popover', class extends NectaryElement {
+  #$target;
+  #$dialog;
+  #isConnected;
+  #resizeThrottle;
+  #originalOverflowValue = '';
+  #$targetSlot;
+  #$targetOpenSlot;
+  #$contentSlot;
+  #$targetOpenWrapper;
+  #targetActiveElement = null;
+  #controller = new AbortController();
+  #keydownContext;
+  #visibilityContext;
+
   constructor() {
     super();
-
-    _classPrivateMethodInitSpec(this, _dispatchCloseEvent);
-
-    _classPrivateMethodInitSpec(this, _isOpen);
-
-    _classPrivateMethodInitSpec(this, _onCollapse);
-
-    _classPrivateMethodInitSpec(this, _onExpand);
-
-    _classPrivateFieldInitSpec(this, _$target, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$dialog, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _isConnected, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _resizeThrottle, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _originalOverflowValue, {
-      writable: true,
-      value: ''
-    });
-
-    _classPrivateFieldInitSpec(this, _$targetSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$targetOpenSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$targetOpenWrapper, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _targetActiveElement, {
-      writable: true,
-      value: null
-    });
-
-    _classPrivateFieldInitSpec(this, _onResize, {
-      writable: true,
-      value: () => {
-        _classPrivateFieldGet(this, _resizeThrottle).fn();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _updateOrientation, {
-      writable: true,
-      value: () => {
-        _classPrivateFieldGet(this, _$dialog).style.width = 'max-content';
-
-        const targetRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
-
-        const modalRect = _classPrivateFieldGet(this, _$dialog).getBoundingClientRect();
-
-        let leftPos = 0;
-        let topPos = 0;
-        const orient = this.orientation;
-        const shouldExpandWidthToTarget = orient === 'top' || orient === 'bottom';
-        const resultWidth = shouldExpandWidthToTarget ? Math.max(modalRect.width, targetRect.width) : modalRect.width;
-
-        if (orient === 'bottom-right' || orient === 'top-right' || orient === 'top' || orient === 'bottom') {
-          leftPos = Math.max(POPOVER_OFFSET, Math.min(targetRect.x, window.innerWidth - resultWidth - POPOVER_OFFSET));
-        }
-
-        if (orient === 'bottom-left' || orient === 'top-left') {
-          leftPos = Math.max(POPOVER_OFFSET, targetRect.right - resultWidth);
-        }
-
-        if (orient === 'bottom-left' || orient === 'bottom-right' || orient === 'bottom') {
-          topPos = Math.max(POPOVER_OFFSET, Math.min(targetRect.bottom + POPOVER_OFFSET, window.innerHeight - modalRect.height - POPOVER_OFFSET));
-        }
-
-        if (orient === 'top-left' || orient === 'top-right' || orient === 'top') {
-          topPos = Math.max(POPOVER_OFFSET, targetRect.top - POPOVER_OFFSET - modalRect.height);
-        }
-
-        _classPrivateFieldGet(this, _$dialog).style.left = `${leftPos}px`;
-        _classPrivateFieldGet(this, _$dialog).style.top = `${topPos}px`;
-        _classPrivateFieldGet(this, _$dialog).style.width = `${resultWidth}px`;
-
-        if (!this.modal) {
-          const targetLeftPos = targetRect.left - leftPos;
-          const targetTopPos = targetRect.top - topPos;
-          _classPrivateFieldGet(this, _$targetOpenWrapper).style.left = `${targetLeftPos}px`;
-          _classPrivateFieldGet(this, _$targetOpenWrapper).style.top = `${targetTopPos}px`;
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onBackdropMouseDown, {
-      writable: true,
-      value: e => {
-        if (e.target !== _classPrivateFieldGet(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) {
-          _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onCancel, {
-      writable: true,
-      value: e => {
-        e.preventDefault();
-
-        _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onCloseReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'onClose')?.();
-        getReactEventHandler(this, 'on-close')?.(e);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _captureActiveElement, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-
-        _classPrivateFieldSet(this, _targetActiveElement, e.target);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _stopPropagation, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$target, shadowRoot.querySelector('#target'));
-
-    _classPrivateFieldSet(this, _$dialog, shadowRoot.querySelector('#dialog'));
-
-    _classPrivateFieldSet(this, _$targetSlot, shadowRoot.querySelector('slot[name="target"]'));
-
-    _classPrivateFieldSet(this, _$targetOpenSlot, shadowRoot.querySelector('slot[name="target-open"]'));
-
-    _classPrivateFieldSet(this, _$targetOpenWrapper, shadowRoot.querySelector('#target-open'));
-
-    _classPrivateFieldSet(this, _isConnected, false);
-
-    _classPrivateFieldSet(this, _resizeThrottle, throttleAnimationFrame(_classPrivateFieldGet(this, _updateOrientation)));
-
-    dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$dialog));
+    this.#$target = shadowRoot.querySelector('#target');
+    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.#isConnected = false;
+    this.#resizeThrottle = throttleAnimationFrame(this.#updateOrientation);
+    this.#keydownContext = new Context(this.#$contentSlot, 'keydown');
+    this.#visibilityContext = new Context(this.#$contentSlot, 'visibility');
+    dialogPolyfill.registerDialog(this.#$dialog);
 
     dialogPolyfill.dm.handleFocus_ = function () {};
   }
 
   connectedCallback() {
+    const {
+      signal
+    } = this.#controller;
     this.setAttribute('role', 'dialog');
-
-    _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
-
-    _classPrivateFieldGet(this, _$dialog).addEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropMouseDown));
-
-    this.addEventListener('-close', _classPrivateFieldGet(this, _onCloseReactHandler));
-
-    _classPrivateFieldSet(this, _isConnected, true);
+    this.#$dialog.addEventListener('cancel', this.#onCancel, {
+      signal
+    });
+    this.#$dialog.addEventListener('mousedown', this.#onBackdropMouseDown, {
+      signal
+    });
+    this.addEventListener('-close', this.#onCloseReactHandler, {
+      signal
+    });
+    this.#isConnected = true;
+    this.#keydownContext.subscribe();
+    this.#visibilityContext.subscribe();
 
     if (getBooleanAttribute(this, 'open')) {
-      _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
-    } else {
-      _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+      this.#onExpand();
     }
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
-
-    _classPrivateFieldGet(this, _$dialog).removeEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropMouseDown));
-
-    this.removeEventListener('-close', _classPrivateFieldGet(this, _onCloseReactHandler));
-
-    _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-
-    _classPrivateFieldSet(this, _isConnected, false);
+    this.#controller.abort();
+    this.#onCollapse();
+    this.#isConnected = false;
+    this.#keydownContext.unsubscribe();
+    this.#visibilityContext.unsubscribe();
   }
 
   static get observedAttributes() {
-    return ['modal', 'orientation', 'open'];
+    return ['orientation', 'open'];
   }
 
   set modal(isModal) {
@@ -248,7 +91,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
   }
 
   get orientation() {
-    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom');
+    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom-left');
   }
 
   set orientation(value) {
@@ -256,7 +99,7 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
   }
 
   get popoverRect() {
-    return getRect(_classPrivateFieldGet(this, _$dialog));
+    return getRect(this.#$dialog);
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
@@ -268,9 +111,11 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
       case 'open':
         {
           if (isAttrTrue(newVal)) {
-            _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+            requestAnimationFrame(() => {
+              this.#onExpand();
+            });
           } else {
-            _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+            this.#onCollapse();
           }
 
           updateBooleanAttribute(this, 'open', isAttrTrue(newVal));
@@ -279,115 +124,200 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
 
       case 'orientation':
         {
-          if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-            _classPrivateFieldGet(this, _updateOrientation).call(this);
+          if (this.#isOpen()) {
+            this.#updateOrientation();
           }
 
           break;
         }
-
-      case 'modal':
-        {
-          if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-            _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-
-            _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
-          }
-        }
     }
   }
 
-}));
+  #onExpand() {
+    if (!this.#isConnected || this.#isOpen()) {
+      return;
+    }
 
-function _onExpand2() {
-  if (!_classPrivateFieldGet(this, _isConnected) || _classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-    return;
-  }
+    const isNonModal = !this.modal;
+    this.#$targetSlot.addEventListener('blur', this.#captureActiveElement, true);
+
+    if (isNonModal) {
+      this.#$targetOpenSlot.addEventListener('blur', this.#captureActiveElement, true);
+      this.#$targetOpenSlot.addEventListener('focus', this.#stopPropagation, true);
+      const targetRect = this.#$target.getBoundingClientRect();
+      const widthPx = `${targetRect.width}px`;
+      const heightPx = `${targetRect.height}px`;
+      this.#$target.style.width = widthPx;
+      this.#$target.style.height = heightPx;
+      this.#$targetOpenWrapper.style.width = widthPx;
+      this.#$targetOpenWrapper.style.height = heightPx;
+      getFirstSlotElement(this.#$targetSlot)?.setAttribute('slot', 'target-open');
+      this.#$targetOpenSlot.addEventListener('keydown', this.#onTargetKeydown);
+    }
 
-  const isNonModal = !this.modal;
+    this.#$dialog.showModal();
+    this.#updateOrientation();
+    this.#$target.setAttribute('aria-expanded', 'true');
+    this.#$targetSlot.removeEventListener('blur', this.#captureActiveElement, true);
+
+    if (isNonModal) {
+      this.#$targetOpenSlot.removeEventListener('blur', this.#captureActiveElement, true);
+      this.#$targetOpenSlot.removeEventListener('focus', this.#stopPropagation, true);
+
+      if (this.#targetActiveElement !== null) {
+        if (!isElementFocused(this.#targetActiveElement)) {
+          requestAnimationFrame(() => {
+            this.#$targetOpenSlot.addEventListener('focus', this.#stopPropagation, true);
+            this.#targetActiveElement?.focus();
+            this.#$targetOpenSlot.removeEventListener('focus', this.#stopPropagation, true);
+          });
+        }
+      }
+    } else {
+      if (document.activeElement === document.body) {
+        getFirstSlotElement(this.#$contentSlot)?.focus();
+      }
+    }
 
-  _classPrivateFieldGet(this, _$targetSlot).addEventListener('blur', _classPrivateFieldGet(this, _stopPropagation), true);
+    this.#originalOverflowValue = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    window.addEventListener('resize', this.#onResize);
+    this.#dispatchContentVisibility(true);
+  }
 
-  if (isNonModal) {
-    _classPrivateFieldGet(this, _$targetOpenSlot).addEventListener('blur', _classPrivateFieldGet(this, _captureActiveElement), true);
+  #onCollapse() {
+    if (!this.#isOpen()) {
+      return;
+    }
 
-    const targetRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
+    this.#dispatchContentVisibility(false);
+    this.#$targetSlot.addEventListener('focus', this.#stopPropagation, true);
+    getFirstSlotElement(this.#$targetOpenSlot)?.setAttribute('slot', 'target');
+    this.#$target.style.width = 'unset';
+    this.#$target.style.height = 'unset';
+    this.#$dialog.close();
+    this.#$target.setAttribute('aria-expanded', 'false');
+
+    if (this.#targetActiveElement !== null) {
+      if (!isElementFocused(this.#targetActiveElement)) {
+        requestAnimationFrame(() => {
+          this.#$targetSlot.addEventListener('focus', this.#stopPropagation, true);
+          this.#targetActiveElement.focus();
+          this.#targetActiveElement = null;
+          this.#$targetSlot.removeEventListener('focus', this.#stopPropagation, true);
+        });
+      } else {
+        this.#targetActiveElement = null;
+      }
+    }
 
-    const widthPx = `${targetRect.width}px`;
-    const heightPx = `${targetRect.height}px`;
-    _classPrivateFieldGet(this, _$target).style.width = widthPx;
-    _classPrivateFieldGet(this, _$target).style.height = heightPx;
-    _classPrivateFieldGet(this, _$targetOpenWrapper).style.width = widthPx;
-    _classPrivateFieldGet(this, _$targetOpenWrapper).style.height = heightPx;
-    _classPrivateFieldGet(this, _$targetSlot).assignedElements()[0]?.setAttribute('slot', 'target-open');
+    this.#$targetSlot.removeEventListener('focus', this.#stopPropagation, true);
+    this.#$targetOpenSlot.removeEventListener('keydown', this.#onTargetKeydown);
+    document.body.style.overflow = this.#originalOverflowValue;
+    this.#resizeThrottle.cancel();
+    window.removeEventListener('resize', this.#onResize);
   }
 
-  _classPrivateFieldGet(this, _$dialog).showModal();
-
-  _classPrivateFieldGet(this, _updateOrientation).call(this);
+  #isOpen() {
+    return getBooleanAttribute(this.#$dialog, 'open');
+  }
 
-  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
+  #onResize = () => {
+    this.#resizeThrottle.fn();
+  };
+  #updateOrientation = () => {
+    this.#$dialog.style.width = 'max-content';
+    const targetRect = this.#$target.getBoundingClientRect();
+    const modalRect = this.#$dialog.getBoundingClientRect();
+    let leftPos = 0;
+    let topPos = 0;
+    const orient = this.orientation;
+    const shouldSetWidthToTarget = orient === 'top' || orient === 'bottom';
+    const resultWidth = shouldSetWidthToTarget ? targetRect.width : modalRect.width;
+
+    if (orient === 'bottom-right' || orient === 'top-right' || orient === 'top' || orient === 'bottom') {
+      leftPos = Math.max(POPOVER_OFFSET, Math.min(targetRect.x, window.innerWidth - resultWidth - POPOVER_OFFSET));
+    }
 
-  _classPrivateFieldGet(this, _$targetSlot).removeEventListener('blur', _classPrivateFieldGet(this, _stopPropagation), true);
+    if (orient === 'bottom-left' || orient === 'top-left') {
+      leftPos = Math.max(POPOVER_OFFSET, targetRect.right - resultWidth);
+    }
 
-  if (isNonModal) {
-    _classPrivateFieldGet(this, _$targetOpenSlot).removeEventListener('blur', _classPrivateFieldGet(this, _captureActiveElement), true);
+    if (orient === 'bottom-left' || orient === 'bottom-right' || orient === 'bottom') {
+      topPos = Math.max(POPOVER_OFFSET, Math.min(targetRect.bottom + POPOVER_OFFSET, window.innerHeight - modalRect.height - POPOVER_OFFSET));
+    }
 
-    if (_classPrivateFieldGet(this, _targetActiveElement) !== null) {
-      requestAnimationFrame(() => {
-        _classPrivateFieldGet(this, _$targetOpenSlot).addEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
+    if (orient === 'top-left' || orient === 'top-right' || orient === 'top') {
+      topPos = Math.max(POPOVER_OFFSET, targetRect.top - POPOVER_OFFSET - modalRect.height);
+    }
 
-        _classPrivateFieldGet(this, _targetActiveElement)?.focus();
+    this.#$dialog.style.left = `${leftPos}px`;
+    this.#$dialog.style.top = `${topPos}px`;
+    this.#$dialog.style.width = `${resultWidth}px`;
 
-        _classPrivateFieldGet(this, _$targetOpenSlot).removeEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
-      });
+    if (!this.modal) {
+      const targetLeftPos = targetRect.left - leftPos;
+      const targetTopPos = targetRect.top - topPos;
+      this.#$targetOpenWrapper.style.left = `${targetLeftPos}px`;
+      this.#$targetOpenWrapper.style.top = `${targetTopPos}px`;
+    }
+  };
+  #onBackdropMouseDown = e => {
+    if (e.target !== this.#$dialog) {
+      return;
     }
-  }
-
-  _classPrivateFieldSet(this, _originalOverflowValue, document.body.style.overflow);
 
-  document.body.style.overflow = 'hidden';
-  window.addEventListener('resize', _classPrivateFieldGet(this, _onResize));
-}
+    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;
 
-function _onCollapse2() {
-  if (!_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-    return;
+    if (!isInside) {
+      this.#dispatchCloseEvent();
+    }
+  };
+  #onCancel = e => {
+    e.preventDefault();
+    this.#dispatchCloseEvent();
+  };
+  #onCloseReactHandler = e => {
+    getReactEventHandler(this, 'onClose')?.();
+    getReactEventHandler(this, 'on-close')?.(e);
+  };
+
+  #dispatchCloseEvent() {
+    this.dispatchEvent(new CustomEvent('-close'));
   }
 
-  _classPrivateFieldGet(this, _$targetSlot).addEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
-
-  if (_classPrivateFieldGet(this, _targetActiveElement) !== null) {
-    _classPrivateFieldGet(this, _$targetOpenSlot).addEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
-
-    _classPrivateFieldGet(this, _targetActiveElement).focus();
-
-    _classPrivateFieldSet(this, _targetActiveElement, null);
-
-    _classPrivateFieldGet(this, _$targetOpenSlot).removeEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
+  #captureActiveElement = e => {
+    e.stopPropagation();
+    this.#targetActiveElement = e.target;
+  };
+  #stopPropagation = e => {
+    e.stopPropagation();
+  };
+
+  #dispatchContentVisibility(isVisible) {
+    for (const $el of this.#visibilityContext.elements) {
+      $el.dispatchEvent(new CustomEvent('-visibility', {
+        detail: isVisible
+      }));
+    }
   }
 
-  _classPrivateFieldGet(this, _$targetOpenSlot).assignedElements()[0]?.setAttribute('slot', 'target');
-  _classPrivateFieldGet(this, _$target).style.width = 'unset';
-  _classPrivateFieldGet(this, _$target).style.height = 'unset';
-
-  _classPrivateFieldGet(this, _$dialog).close();
-
-  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'false');
-
-  _classPrivateFieldGet(this, _$targetSlot).removeEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
-
-  document.body.style.overflow = _classPrivateFieldGet(this, _originalOverflowValue);
-
-  _classPrivateFieldGet(this, _resizeThrottle).cancel();
-
-  window.removeEventListener('resize', _classPrivateFieldGet(this, _onResize));
-}
-
-function _isOpen2() {
-  return getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open');
-}
+  #onTargetKeydown = e => {
+    for (const $el of this.#keydownContext.elements) {
+      let isPrevented = false;
+      $el.dispatchEvent(new CustomEvent('-keydown', {
+        detail: {
+          code: e.code,
+          preventDefault: () => {
+            isPrevented = true;
+          }
+        }
+      }));
 
-function _dispatchCloseEvent2() {
-  this.dispatchEvent(new CustomEvent('-close'));
-}
+      if (isPrevented) {
+        e.preventDefault();
+      }
+    }
+  };
+});

package/progress/index.js

@@ -1,12 +1,3 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$bar, _$text;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import '../spinner';
 import '../icons/check-circle';
 import '../icons/report';
@@ -17,26 +8,16 @@ import { defineCustomElement, updateAttribute, NectaryElement, updateBooleanAttr
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;align-items:center;height:24px}#bar,#progress{height:8px;border-radius:4px}#progress{background-color:var(--sinch-color-tropical-100);flex:1;min-width:0}#bar{background-color:var(--sinch-color-tropical-500);width:0}#text{display:none;width:46px}:host([detailed]:not([detailed=false])) #text{display:block}</style><div id="wrapper"><sinch-text id="text" type="m"></sinch-text><div id="progress"><div id="bar"></div></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-progress', (_$bar = new WeakMap(), _$text = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-progress', class extends NectaryElement {
+  #$bar;
+  #$text;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$bar, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$bar, shadowRoot.querySelector('#bar'));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+    this.#$bar = shadowRoot.querySelector('#bar');
+    this.#$text = shadowRoot.querySelector('#text');
   }
 
   connectedCallback() {
@@ -76,12 +57,12 @@ defineCustomElement('sinch-progress', (_$bar = new WeakMap(), _$text = new WeakM
             max: 100
           });
           const intCss = int === null ? '0%' : `${int}%`;
-          _classPrivateFieldGet(this, _$bar).style.width = intCss;
-          _classPrivateFieldGet(this, _$text).textContent = intCss;
+          this.#$bar.style.width = intCss;
+          this.#$text.textContent = intCss;
           this.setAttribute('valuenow', int !== null ? String(int) : '0');
           break;
         }
     }
   }
 
-}));
+});