@pictogrammers/components 0.5.26 → 0.5.27

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@pictogrammers/components",
     "type": "module",
-    "version": "0.5.26",
+    "version": "0.5.27",
     "license": "MIT",
     "author": "Austin Andrews",
     "scripts": {

package/pg/overlayMenu/overlayMenu.ts

@@ -63,7 +63,9 @@ export default class PgOverlayMenu extends PgOverlay {
         }
       });
     }, {
+      // @ts-ignore
       trackVisibility: true,
+      delay: 100,
       root: null,      // Defaults to the browser viewport
       threshold: 0     // Triggers as soon as even 1 pixel enters or leaves
     });

package/pg/overlaySelectMenu/overlaySelectMenu.ts

@@ -77,18 +77,26 @@ export default class PgOverlaySelectMenu extends PgOverlay {
     this.$overlay.style.setProperty('--pg-overlay-menu-_y', `${y}px`);
     // Focus
     this.$menu.focus(index);
-    // Overlay
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach(entry => {
-        console.log(entry.intersectionRatio);
-        //this.$overlay.classList.toggle('no-offset', entry.intersectionRatio < 1);
-        // entry.isIntersecting will be false if it is entirely outside the viewport
-        if (!entry.isIntersecting) {
-          console.log('Element is completely outside the viewport');
-        } else {
-          console.log('Element is at least partially inside the viewport');
-        }
-      });
+    // Keep the menu fully within the viewport once its real size is known
+    const observer = new IntersectionObserver(([entry]) => {
+      observer.disconnect();
+      if (entry.intersectionRatio === 1) {
+        return;
+      }
+      const { top, bottom } = entry.boundingClientRect;
+      const viewportHeight = entry.rootBounds?.height ?? window.innerHeight;
+      let offset = 0;
+      if (bottom > viewportHeight) {
+        offset = viewportHeight - bottom;
+      }
+      // Prefer keeping the top edge visible over the bottom if it can't fully fit
+      if (top + offset < 0) {
+        offset = -top;
+      }
+      if (offset !== 0) {
+        y += offset;
+        this.$overlay.style.setProperty('--pg-overlay-menu-_y', `${y}px`);
+      }
     }, {
       root: null,      // Defaults to the browser viewport
       threshold: 1     // Triggers as soon as even 1 pixel enters or leaves