@optilogic/core 1.3.1 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optilogic/core",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Core UI components for Optilogic - A professional React component library",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/data-grid/DataGrid.tsx

@@ -166,16 +166,30 @@ export function DataGrid<T = Record<string, CellValue>>({
 
   // Measure container width for fillWidth mode
   const [containerWidth, setContainerWidth] = React.useState(0);
+  const fillWidthObserverRef = React.useRef<ResizeObserver | null>(null);
 
-  React.useLayoutEffect(() => {
-    if (!fillWidth || !parentRef.current) return;
-    const observer = new ResizeObserver((entries) => {
-      const w = entries[0]?.contentRect.width;
-      if (w && w > 0) setContainerWidth(w);
-    });
-    observer.observe(parentRef.current);
-    return () => observer.disconnect();
-  }, [fillWidth]);
+  const parentCallbackRef = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      fillWidthObserverRef.current?.disconnect();
+      fillWidthObserverRef.current = null;
+
+      (parentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+
+      if (!fillWidth || !node) return;
+
+      const observer = new ResizeObserver((entries) => {
+        const w = entries[0]?.contentRect.width;
+        if (w && w > 0) setContainerWidth(w);
+      });
+      observer.observe(node);
+      fillWidthObserverRef.current = observer;
+    },
+    [fillWidth],
+  );
+
+  React.useEffect(() => {
+    return () => fillWidthObserverRef.current?.disconnect();
+  }, []);
 
   // Filter visible columns
   const visibleColumns = React.useMemo(
@@ -589,7 +603,7 @@ export function DataGrid<T = Record<string, CellValue>>({
         )}
 
         <div
-          ref={parentRef}
+          ref={parentCallbackRef}
           className="flex-1 overflow-auto bg-background relative w-full min-h-0 max-h-full"
           style={{ contain: "strict" }}
         >
@@ -839,7 +853,7 @@ export function DataGrid<T = Record<string, CellValue>>({
         </div>
       )}
 
-      <div ref={parentRef} className="flex-1 overflow-auto min-h-0">
+      <div ref={parentCallbackRef} className="flex-1 overflow-auto min-h-0">
         {/* Header row using HeaderCell for consistent features */}
         <div
           className={cn(