@diabolic/hangover 0.1.6 → 0.1.7

package/dist/index.cjs.js

@@ -737,12 +737,16 @@ function DropdownContent({
     if (displayMode !== 'scroll') return;
     const list = contentRef.current;
     if (!list) return;
-    function updateBottomSpace() {
+    let rafId = null;
+    function computeBottomSpace() {
+      rafId = null;
       const sections = list.querySelectorAll('[data-section-for]');
       const lastSection = sections[sections.length - 1];
       if (!lastSection) {
-        list.style.paddingBottom = '';
-        bottomPadRef.current = 0;
+        if (bottomPadRef.current !== 0) {
+          list.style.paddingBottom = '';
+          bottomPadRef.current = 0;
+        }
         return;
       }
 
@@ -755,20 +759,34 @@ function DropdownContent({
       const listTop = list.getBoundingClientRect().top;
       const lastTopWithinContent = lastSection.getBoundingClientRect().top - listTop + list.scrollTop;
       const spaceBelowLastTop = naturalScrollHeight - lastTopWithinContent;
-      const pad = Math.max(0, available - spaceBelowLastTop);
+      const pad = Math.max(0, Math.round(available - spaceBelowLastTop));
+
+      // Only touch the DOM when the reserved space actually changes by a whole
+      // pixel — this ignores sub-pixel/floating jitter from the observer and
+      // keeps the value stable.
+      if (Math.abs(pad - bottomPadRef.current) < 1) return;
       bottomPadRef.current = pad;
       list.style.paddingBottom = `${pad}px`;
     }
-    updateBottomSpace();
+
+    // Coalesce bursts of observer callbacks into a single measurement per frame.
+    function scheduleBottomSpace() {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(computeBottomSpace);
+    }
+    scheduleBottomSpace();
 
     // Observe both the container (viewport resize) and every section (group
     // expand/collapse, late reflows) so the reserved space stays accurate.
-    const observer = new ResizeObserver(updateBottomSpace);
+    const observer = new ResizeObserver(scheduleBottomSpace);
     observer.observe(list);
     list.querySelectorAll('[data-section-for]').forEach(section => {
       observer.observe(section);
     });
-    return () => observer.disconnect();
+    return () => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      observer.disconnect();
+    };
   }, [displayMode, contentRef, children, searchQuery]);
   function handleSearch(e) {
     fireEvent('search', {

package/dist/index.esm.js

@@ -733,12 +733,16 @@ function DropdownContent({
     if (displayMode !== 'scroll') return;
     const list = contentRef.current;
     if (!list) return;
-    function updateBottomSpace() {
+    let rafId = null;
+    function computeBottomSpace() {
+      rafId = null;
       const sections = list.querySelectorAll('[data-section-for]');
       const lastSection = sections[sections.length - 1];
       if (!lastSection) {
-        list.style.paddingBottom = '';
-        bottomPadRef.current = 0;
+        if (bottomPadRef.current !== 0) {
+          list.style.paddingBottom = '';
+          bottomPadRef.current = 0;
+        }
         return;
       }
 
@@ -751,20 +755,34 @@ function DropdownContent({
       const listTop = list.getBoundingClientRect().top;
       const lastTopWithinContent = lastSection.getBoundingClientRect().top - listTop + list.scrollTop;
       const spaceBelowLastTop = naturalScrollHeight - lastTopWithinContent;
-      const pad = Math.max(0, available - spaceBelowLastTop);
+      const pad = Math.max(0, Math.round(available - spaceBelowLastTop));
+
+      // Only touch the DOM when the reserved space actually changes by a whole
+      // pixel — this ignores sub-pixel/floating jitter from the observer and
+      // keeps the value stable.
+      if (Math.abs(pad - bottomPadRef.current) < 1) return;
       bottomPadRef.current = pad;
       list.style.paddingBottom = `${pad}px`;
     }
-    updateBottomSpace();
+
+    // Coalesce bursts of observer callbacks into a single measurement per frame.
+    function scheduleBottomSpace() {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(computeBottomSpace);
+    }
+    scheduleBottomSpace();
 
     // Observe both the container (viewport resize) and every section (group
     // expand/collapse, late reflows) so the reserved space stays accurate.
-    const observer = new ResizeObserver(updateBottomSpace);
+    const observer = new ResizeObserver(scheduleBottomSpace);
     observer.observe(list);
     list.querySelectorAll('[data-section-for]').forEach(section => {
       observer.observe(section);
     });
-    return () => observer.disconnect();
+    return () => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      observer.disconnect();
+    };
   }, [displayMode, contentRef, children, searchQuery]);
   function handleSearch(e) {
     fireEvent('search', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diabolic/hangover",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "A headless-style, compound React dropdown/field-picker component library",
   "license": "MIT",
   "author": "bugrakaan",