@morze/ui 0.2.0 → 0.2.1

package/dist/index.js

@@ -2398,20 +2398,27 @@ function useColumnLayout({
     () => controlled ? merge(baseline, controlled, baseline) : internal,
     [controlled, internal, baseline]
   );
+  const onLayoutChangeRef = React39.useRef(onLayoutChange);
+  React39.useEffect(() => {
+    onLayoutChangeRef.current = onLayoutChange;
+  });
+  const internalRef = React39.useRef(internal);
+  React39.useEffect(() => {
+    internalRef.current = internal;
+  }, [internal]);
   const update = React39.useCallback(
     (patch, options) => {
-      setInternal((current) => {
-        const base = controlled ? merge(baseline, controlled, baseline) : current;
-        const next = patch(base);
-        if (next === base) return current;
-        if (options?.persist !== false) {
-          writeStored2(persistKey, next);
-          onLayoutChange?.(next);
-        }
-        return next;
-      });
+      const base = controlled ? merge(baseline, controlled, baseline) : internalRef.current;
+      const next = patch(base);
+      if (next === base) return;
+      internalRef.current = next;
+      setInternal(next);
+      if (options?.persist !== false) {
+        writeStored2(persistKey, next);
+        onLayoutChangeRef.current?.(next);
+      }
     },
-    [controlled, baseline, persistKey, onLayoutChange]
+    [controlled, baseline, persistKey]
   );
   const byId = React39.useMemo(
     () => new Map(columns.map((c) => [c.id, c])),
@@ -2595,6 +2602,7 @@ function useRowSelection(options) {
 }
 var SELECT_WIDTH = 44;
 var EXPAND_WIDTH = 40;
+var FIT_CYCLE_MS = 250;
 function DataTable({
   columns,
   data,
@@ -2658,22 +2666,28 @@ function DataTable({
     }),
     pageKeys
   });
-  const lastFitWidth = React39.useRef(0);
+  const recentFits = React39.useRef([]);
+  const hiddenKey = layout.hidden.join("\0");
+  const orderKey = layout.order.join("\0");
   React39.useEffect(() => {
     const scroller = scrollerRef.current;
     if (!scroller || !autoFit) return;
     const controls = (selectable ? SELECT_WIDTH : 0) + (renderExpanded ? EXPAND_WIDTH : 0);
+    recentFits.current = [];
     const run = () => {
       const available = scroller.clientWidth - controls - 2;
-      if (Math.abs(available - lastFitWidth.current) < 1) return;
-      lastFitWidth.current = available;
+      const now = Date.now();
+      const recent = recentFits.current.filter((entry) => now - entry.at < FIT_CYCLE_MS);
+      recentFits.current = recent;
+      if (recent.some((entry) => Math.abs(available - entry.width) < 1)) return;
+      recent.push({ width: available, at: now });
       fitTo(available);
     };
     run();
     const observer = new ResizeObserver(run);
     observer.observe(scroller);
     return () => observer.disconnect();
-  }, [autoFit, fitTo, selectable, renderExpanded, layout.hidden, layout.order]);
+  }, [autoFit, fitTo, selectable, renderExpanded, hiddenKey, orderKey]);
   React39.useEffect(() => {
     const scroller = scrollerRef.current;
     if (!scroller) return;