@diabolic/hangover 0.1.6 → 0.2.0

package/README.md

@@ -36,7 +36,6 @@ npm install @diabolic/hangover
 
 ```jsx
 import { Dropdown } from '@diabolic/hangover'
-import '@diabolic/hangover/styles'
 
 export default function App() {
   return (
@@ -59,7 +58,8 @@ export default function App() {
 }
 ```
 
-Use the exported styles subpath above. Do not import from `dist/...` directly.
+Styles are imported automatically with the component. Do not import from
+`dist/...` directly.
 
 ---
 

package/dist/index.cjs.js

@@ -1,3 +1,4 @@
+require('./hangover.css');
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -737,12 +738,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 +760,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

@@ -1,3 +1,4 @@
+import './hangover.css';
 import { useContext, createContext, Children, cloneElement, useState, useRef, useCallback, useEffect, isValidElement, createElement, useMemo, forwardRef, useImperativeHandle } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -733,12 +734,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 +756,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.2.0",
   "description": "A headless-style, compound React dropdown/field-picker component library",
   "license": "MIT",
   "author": "bugrakaan",
@@ -26,8 +26,7 @@
     ".": {
       "import": "./dist/index.esm.js",
       "require": "./dist/index.cjs.js"
-    },
-    "./styles": "./dist/hangover.css"
+    }
   },
   "files": [
     "dist"