@neovici/cosmoz-bottom-bar 9.2.0 → 9.3.0

package/dist/cosmoz-bottom-bar.js

@@ -133,6 +133,9 @@ const useMenuButtons = (host) => {
         visible: new Set(),
         overflowing: new Set(),
     });
+    useEffect(() => {
+        host.dispatchEvent(new CustomEvent('reflow', { detail: buttonStates }));
+    }, [buttonStates]);
     const allButtons = useMemo(() => [...buttonStates.visible, ...buttonStates.overflowing], [buttonStates]);
     const processedButtons = useMemo(() => allButtons
         .map((btn) => ({

package/dist/overflow.d.ts

@@ -4,6 +4,7 @@ import { DirectiveResult } from 'lit-html/directive.js';
 type OnOverflow = (opts: {
     visible: Set<HTMLElement>;
     overflowing: Set<HTMLElement>;
+    hidden: Set<HTMLElement>;
 }) => void;
 declare class OverflowDirective extends AsyncDirective {
     observer?: IntersectionObserver;

package/dist/overflow.js

@@ -4,14 +4,30 @@ import { directive } from 'lit-html/directive.js';
 function isEntryHidden(el) {
     return el.boundingClientRect.height === 0;
 }
+function isElementHidden(el) {
+    return el.getBoundingClientRect().height === 0;
+}
 const check = (part) => {
     if (part.element.tagName !== 'SLOT') {
         throw new Error('Overflow directive must be used on a slot element');
     }
 };
+function reconcileHiddenElements(hidden, overflowing) {
+    // If a parent element was hidden, all its children were marked as hidden.
+    // When the parent becomes visible, the observer only reports entries for
+    // children that intersect the parent’s content box. Others remain stuck in
+    // `hidden` even if they should be `overflowing`. This pass corrects that.
+    hidden.forEach((el) => {
+        if (isElementHidden(el))
+            return;
+        overflowing.add(el);
+        hidden.delete(el);
+    });
+}
 const setupObserver = (slot, onOverflow) => {
     let visible = new Set();
     let overflowing = new Set();
+    let hidden = new Set();
     const observer = new IntersectionObserver((entries) => {
         entries.forEach((entry) => {
             const el = entry.target;
@@ -19,22 +35,27 @@ const setupObserver = (slot, onOverflow) => {
                 entry.intersectionRect.height !== 0) {
                 visible.add(el);
                 overflowing.delete(el);
+                hidden.delete(el);
             }
             else if (isEntryHidden(entry)) {
                 visible.delete(el);
                 overflowing.delete(el);
+                hidden.add(el);
             }
             else {
                 visible.delete(el);
                 overflowing.add(el);
+                hidden.delete(el);
             }
         });
-        onOverflow({ visible, overflowing });
+        reconcileHiddenElements(hidden, overflowing);
+        onOverflow({ visible, overflowing, hidden });
     }, { root: slot.parentElement, threshold: [0, 0.5, 1] });
     const observe = () => {
         const elements = Array.from(slot.assignedElements({ flatten: true }));
         const newVisible = new Set();
         const newOverflowing = new Set();
+        const newHidden = new Set();
         for (const c of elements) {
             if (visible.has(c)) {
                 newVisible.add(c);
@@ -42,13 +63,17 @@ const setupObserver = (slot, onOverflow) => {
             else if (overflowing.has(c)) {
                 newOverflowing.add(c);
             }
+            else if (hidden.has(c)) {
+                newHidden.add(c);
+            }
             else {
                 observer.observe(c);
             }
         }
         visible = newVisible;
         overflowing = newOverflowing;
-        onOverflow({ visible, overflowing });
+        hidden = newHidden;
+        onOverflow({ visible, overflowing, hidden });
     };
     observe();
     slot.addEventListener('slotchange', observe);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-bottom-bar",
-	"version": "9.2.0",
+	"version": "9.3.0",
 	"description": "A responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.",
 	"keywords": [
 		"polymer",