@sveltia/ui 0.13.1 → 0.13.2

package/package/components/util/modal.svelte

@@ -228,6 +228,9 @@ dialog:not(.open) {
   transition-duration: 400ms;
   opacity: 0;
 }
+dialog[hidden] {
+  transition-duration: 1ms !important;
+}
 dialog:not(.active) {
   pointer-events: none !important;
 }

package/package/services/popup.d.ts

@@ -48,5 +48,9 @@ declare class Popup {
      * Check the position of the anchor element.
      */
     checkPosition(): void;
+    /**
+     * Hide the popup immediately (when the anchor is being hidden).
+     */
+    hideImmediately(): Promise<void>;
 }
 export {};

package/package/services/popup.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-nested-ternary */
 
 import { generateElementId } from '@sveltia/utils/element';
+import { sleep } from '@sveltia/utils/misc';
 import { get, writable } from 'svelte/store';
 
 /**
@@ -127,6 +128,18 @@ class Popup {
       }
     });
 
+    this.anchorElement.addEventListener('transitionstart', () => {
+      if (this.anchorElement.closest('.hiding, .hidden, [hidden]')) {
+        this.hideImmediately();
+      }
+    });
+
+    new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting && get(this.open)) {
+        this.hideImmediately();
+      }
+    }).observe(this.anchorElement);
+
     // Close the popup when the backdrop, a menu item or an option is clicked
     this.popupElement.addEventListener('click', (event) => {
       event.stopPropagation();
@@ -188,6 +201,16 @@ class Popup {
     this.observer.unobserve(this.positionBaseElement);
     this.observer.observe(this.positionBaseElement);
   }
+
+  /**
+   * Hide the popup immediately (when the anchor is being hidden).
+   */
+  async hideImmediately() {
+    this.popupElement.hidden = true;
+    this.open.set(false);
+    await sleep(50);
+    this.popupElement.hidden = false;
+  }
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "license": "MIT",
   "type": "module",
   "publishConfig": {