@wallarm-org/design-system 0.53.0 → 0.53.1

package/dist/hooks/useOverflowItems.d.ts

@@ -1,10 +1,8 @@
 import { type ReactElement, type RefObject } from 'react';
 export interface UseOverflowItemsOptions<T> {
     /**
-     * Invariant: a given `items` array identity must always render to the same
-     * widths. Measurements are cached by array identity regardless of the
-     * renderers/reserveSpace, so changing those to alter widths needs a fresh
-     * array.
+     * Invariant: measurements are cached by array identity, so changing the
+     * renderers/reserveSpace to alter widths needs a fresh array.
      */
     items: T[];
     renderItem: (item: T) => ReactElement;

package/dist/hooks/useOverflowItems.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { calculateVisibleCount } from "./useOverflowItems.helpers.js";
+import { observeOverflowResize } from "./useOverflowItems.observer.js";
 import { scheduleOverflowMeasurement } from "./useOverflowItems.scheduler.js";
 const crossMountCache = new WeakMap();
 function useOverflowItems({ items, renderItem, renderMeasurementItem, overflowRenderer, reserveSpace = 60 }) {
@@ -18,87 +19,104 @@ function useOverflowItems({ items, renderItem, renderMeasurementItem, overflowRe
     const cacheRef = useRef({
         widths: [],
         gap: 0,
-        indicatorWidth: reserveSpace
+        indicatorWidth: reserveSpace,
+        lastCount: 0
     });
     const recompute = useCallback((availableWidth)=>{
         const container = containerRef.current;
         if (!container) return;
+        const width = availableWidth ?? container.offsetWidth;
+        if (0 === width) return;
         const { widths, gap, indicatorWidth } = cacheRef.current;
         if (0 === widths.length) return;
         const next = calculateVisibleCount({
             itemWidths: widths,
             gap,
-            availableWidth: availableWidth ?? container.offsetWidth,
+            availableWidth: width,
             indicatorWidth
         });
         const entry = crossMountCache.get(itemsRef.current);
         if (entry) entry.lastCount = next;
         setVisibleCount((prev)=>prev === next ? prev : next);
     }, []);
+    const pendingMeasureRef = useRef(false);
+    const measure = useCallback(()=>{
+        const container = containerRef.current;
+        if (container && 0 === container.offsetWidth) return ()=>{
+            pendingMeasureRef.current = true;
+        };
+        const gap = container ? Number.parseFloat(getComputedStyle(container).gap || '0') || 0 : 0;
+        const widths = measurementRefs.current.slice(0, items.length).map((ref)=>ref?.offsetWidth ?? 0);
+        const indicatorWidth = indicatorRef.current?.offsetWidth || reserveSpace;
+        const availableWidth = container?.offsetWidth ?? 0;
+        return ()=>{
+            pendingMeasureRef.current = false;
+            const entry = {
+                widths,
+                gap,
+                indicatorWidth,
+                lastCount: items.length
+            };
+            cacheRef.current = entry;
+            crossMountCache.set(items, entry);
+            recompute(availableWidth);
+            measurementLayerRef.current?.style.setProperty('display', 'none');
+        };
+    }, [
+        items,
+        reserveSpace,
+        recompute
+    ]);
+    const measureRef = useRef(measure);
+    measureRef.current = measure;
+    const recomputeRead = useCallback(()=>{
+        const availableWidth = containerRef.current?.offsetWidth ?? 0;
+        return ()=>recompute(availableWidth);
+    }, [
+        recompute
+    ]);
     useLayoutEffect(()=>{
         if (0 === items.length) {
             cacheRef.current = {
                 widths: [],
                 gap: 0,
-                indicatorWidth: reserveSpace
+                indicatorWidth: reserveSpace,
+                lastCount: 0
             };
             setVisibleCount(0);
+            pendingMeasureRef.current = false;
             return;
         }
         const cached = crossMountCache.get(items);
         if (cached) {
             cacheRef.current = cached;
-            return scheduleOverflowMeasurement(()=>{
-                const availableWidth = containerRef.current?.offsetWidth ?? 0;
-                return ()=>recompute(availableWidth);
-            });
+            pendingMeasureRef.current = false;
+            return scheduleOverflowMeasurement(recomputeRead);
         }
         measurementLayerRef.current?.style.removeProperty('display');
-        return scheduleOverflowMeasurement(()=>{
-            const container = containerRef.current;
-            const gap = container ? Number.parseFloat(getComputedStyle(container).gap || '0') || 0 : 0;
-            const widths = measurementRefs.current.slice(0, items.length).map((ref)=>ref?.offsetWidth ?? 0);
-            const indicatorWidth = indicatorRef.current?.offsetWidth || reserveSpace;
-            const availableWidth = container?.offsetWidth ?? 0;
-            return ()=>{
-                const entry = {
-                    widths,
-                    gap,
-                    indicatorWidth,
-                    lastCount: items.length
-                };
-                cacheRef.current = entry;
-                crossMountCache.set(items, entry);
-                recompute(availableWidth);
-                measurementLayerRef.current?.style.setProperty('display', 'none');
-            };
-        });
+        return scheduleOverflowMeasurement(measure);
     }, [
         items,
         renderItem,
         renderMeasurementItem,
         overflowRenderer,
         reserveSpace,
-        recompute
+        recomputeRead,
+        measure
     ]);
     useLayoutEffect(()=>{
         const container = containerRef.current;
         if (!container) return;
-        let frame = 0;
-        const observer = new ResizeObserver(()=>{
-            if (frame) return;
-            frame = requestAnimationFrame(()=>{
-                frame = 0;
-                recompute();
-            });
+        let cancelScheduled;
+        const unobserve = observeOverflowResize(container, ()=>{
+            cancelScheduled = pendingMeasureRef.current ? scheduleOverflowMeasurement(measureRef.current) : scheduleOverflowMeasurement(recomputeRead);
         });
-        observer.observe(container);
         return ()=>{
-            if (frame) cancelAnimationFrame(frame);
-            observer.disconnect();
+            cancelScheduled?.();
+            unobserve();
         };
     }, [
-        recompute
+        recomputeRead
     ]);
     const visibleItems = items.slice(0, visibleCount);
     const hiddenItems = items.slice(visibleCount);

package/dist/hooks/useOverflowItems.observer.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Single shared ResizeObserver for all overflow lists. The browser drains
+ * microtasks between separate observer callbacks, so per-instance observers
+ * cannot share one read/write batch — one observer delivers every entry in a
+ * single callback, letting all instances enqueue into the same flush. It also
+ * fires pre-paint: a measurement scheduled here lands before the frame paints.
+ */
+/** Called when the observed element resizes (including display:none toggles). */
+export interface OverflowResizeHandler {
+    (): void;
+}
+export declare const observeOverflowResize: (element: Element, handler: OverflowResizeHandler) => (() => void);

package/dist/hooks/useOverflowItems.observer.js

@@ -0,0 +1,14 @@
+const handlers = new Map();
+let observer = null;
+const observeOverflowResize = (element, handler)=>{
+    observer ??= new ResizeObserver((entries)=>{
+        for (const entry of entries)handlers.get(entry.target)?.();
+    });
+    handlers.set(element, handler);
+    observer.observe(element);
+    return ()=>{
+        handlers.delete(element);
+        observer?.unobserve(element);
+    };
+};
+export { observeOverflowResize };

package/dist/hooks/useOverflowItems.scheduler.d.ts

@@ -5,12 +5,17 @@
  * the next reads `offsetWidth`. One pre-paint microtask runs all reads against
  * clean layout, then all writes — React batches them, no interleaving.
  */
-type WritePhase = () => void;
-type ReadPhase = () => WritePhase;
+/** Write phase of a batched measurement: state + style writes, no DOM reads. */
+export interface WritePhase {
+    (): void;
+}
+/** Read phase: DOM reads only; returns the write to run after all reads. */
+export interface ReadPhase {
+    (): WritePhase;
+}
 /**
  * Queue a measurement for the next pre-paint flush. Returns a cancel
  * function — call it on effect cleanup so unmounted or re-rendered
  * instances never measure stale refs.
  */
 export declare const scheduleOverflowMeasurement: (read: ReadPhase) => (() => void);
-export {};

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.52.0",
-  "generatedAt": "2026-06-03T13:59:51.393Z",
+  "version": "0.53.0",
+  "generatedAt": "2026-06-03T14:42:12.339Z",
   "components": [
     {
       "name": "Accordion",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.53.0",
+  "version": "0.53.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",