@bit.rhplus/ui.grid-layout 0.0.5 → 0.0.6

package/dist/useGridLayout.js

@@ -17,7 +17,7 @@ import { debounce } from 'lodash';
  * @param {string} [config.filterName] - Název filtru (volitelné)
  * @param {boolean} [config.enabled=true] - Zapnout/vypnout layout management
  * @param {boolean} [config.autoSave=true] - Automatické ukládání při změnách
- * @param {number} [config.autoSaveDelay=2000] - Zpoždění auto-save v ms
+ * @param {number} [config.autoSaveDelay=500] - Zpoždění auto-save v ms
  * @param {Array} config.columnDefs - AG-Grid column definitions
  * @param {string} [config.accessToken] - Přístupový token
  * @param {boolean} [config.waitForSavedFields=false] - Skrýt columnDefs dokud nejsou načtena savedFields
@@ -26,7 +26,7 @@ import { debounce } from 'lodash';
  * @param {Function} [config.onError] - Callback při chybě
  * @returns {Object} Grid layout management interface
  */
-export const useGridLayout = ({ userKey, applicationName, gridName, filterName, enabled = true, autoSave = true, autoSaveDelay = 2000, columnDefs = [], accessToken, waitForSavedFields = false, // Nový prop pro odložené zobrazení columnDefs
+export const useGridLayout = ({ userKey, applicationName, gridName, filterName, enabled = true, autoSave = true, autoSaveDelay = 500, columnDefs = [], accessToken, waitForSavedFields = false, // Nový prop pro odložené zobrazení columnDefs
 onLayoutLoaded, onLayoutSaved, onError, }) => {
     // Validace columnDefs - musí být array
     if (columnDefs !== undefined &&
@@ -38,6 +38,8 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
     // Refs pro AG-Grid API
     const gridApiRef = useRef(null);
     const columnApiRef = useRef(null);
+    // Ref mapa pro ukládání aktuálních šířek sloupců (fieldId -> šířka)
+    const columnWidthRefsMap = useRef(new Map());
     // State
     const [isInitialized, setIsInitialized] = useState(false);
     const [isGridReady, setIsGridReady] = useState(false);
@@ -48,15 +50,7 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
     const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
     const [isColumnEditorOpen, setIsColumnEditorOpen] = useState(false);
     const [lastKnownColumnState, setLastKnownColumnState] = useState(null);
-    // Místo version counter použijeme stabilnější mechanismus pro tracking změn
-    const [lastColumnDefsHash, setLastColumnDefsHash] = useState('');
-    // Utility funkce pro generování hash z columnDefs
-    const generateColumnDefsHash = useCallback((colDefs) => {
-        if (!Array.isArray(colDefs))
-            return '';
-        // Vytvoříme hash z klíčových vlastností které ovlivňují rendering
-        return colDefs.map(col => `${col.field || col.colId}:${col.width || 'auto'}:${col.hide ? 'hidden' : 'visible'}:${col.headerName || ''}`).join('|');
-    }, []);
+    const [columnWidthsVersion, setColumnWidthsVersion] = useState(0); // Pro trigger preTransformedColumnDefs
     // Grid Layout API hook
     const gridLayoutApi = useGridLayoutApi({
         userKey,
@@ -83,110 +77,6 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
             Array.isArray(columnDefs) &&
             columnDefs.length > 0,
     });
-    // // Bezpečné aktualizování lastKnownColumnState při otevření editoru
-    // useEffect(() => {
-    //   if (isColumnEditorOpen && columnApiRef.current && typeof columnApiRef.current.getColumnState === 'function') {
-    //     try {
-    //       const currentState = columnApiRef.current.getColumnState();
-    //       if (Array.isArray(currentState) && currentState.length > 0) {
-    //         // Aktualizujeme lastKnownColumnState po otevření editoru
-    //         const validColumnDefs = Array.isArray(columnDefs) ? columnDefs : [];
-    //         const formattedState = currentState.map((columnStateItem, index) => {
-    //           const colDef = validColumnDefs.find(cd => cd.field === columnStateItem.colId) || {};
-    //           const savedField = savedFields?.records?.find(sf => sf.fieldName === columnStateItem.colId);
-    //           return {
-    //             id: columnStateItem.colId,
-    //             field: columnStateItem.colId,
-    //             headerName: savedField?.headerName || colDef.headerName || columnStateItem.colId,
-    //             originalHeaderName: colDef.headerName || columnStateItem.colId,
-    //             width: columnStateItem.width || colDef.width || 100,
-    //             originalWidth: colDef.width || 100,
-    //             visible: !columnStateItem.hide,
-    //             order: index
-    //           };
-    //         });
-    //         setLastKnownColumnState(formattedState);
-    //         console.log('[GridLayout] Updated lastKnownColumnState after opening editor');
-    //       }
-    //     } catch (error) {
-    //       console.error('[GridLayout] Error updating column state after opening editor:', error);
-    //     }
-    //   }
-    // }, [isColumnEditorOpen, columnDefs, savedFields, columnApiRef]);
-    // MutationObserver pro sledování změn v DOM a okamžitou aktualizaci headerName
-    // useEffect(() => {
-    //   if (!savedFields?.records || !isInitialized || !enabled) return;
-    //   // Reference na observer pro cleanup
-    //   let observer = null;
-    //   try {
-    //     console.log('[GridLayout] Setting up MutationObserver for header changes');
-    //     // Funkce pro aktualizaci headerName
-    //     const updateHeaderNames = () => {
-    //       try {
-    //         // Vytvoříme mapu fieldName -> headerName z API dat
-    //         const headerNameMap = new Map();
-    //         savedFields.records.forEach(field => {
-    //           if (field.fieldName && field.headerName) {
-    //             headerNameMap.set(field.fieldName, field.headerName);
-    //           }
-    //         });
-    //         // Najdeme všechny hlavičky sloupců v DOM
-    //         const headerCells = document.querySelectorAll('.ag-header-cell');
-    //         // Aktualizujeme texty hlaviček
-    //         headerCells.forEach(headerCell => {
-    //           try {
-    //             // Získáme ID sloupce z DOM atributů
-    //             const colId = headerCell.getAttribute('col-id');
-    //             if (colId && headerNameMap.has(colId)) {
-    //               // Najdeme element s textem hlavičky
-    //               const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
-    //               if (headerTextEl) {
-    //                 const newHeaderName = headerNameMap.get(colId);
-    //                 const currentText = headerTextEl.textContent;
-    //                 if (currentText !== newHeaderName) {
-    //                   console.log(`[GridLayout] MutationObserver update: Column '${colId}' header from '${currentText}' to '${newHeaderName}'`);
-    //                   headerTextEl.textContent = newHeaderName;
-    //                 }
-    //               }
-    //             }
-    //           } catch (cellError) {
-    //             // Tiché selhání - nechceme, aby MutationObserver padal
-    //           }
-    //         });
-    //       } catch (error) {
-    //         // Tiché selhání - nechceme, aby MutationObserver padal
-    //       }
-    //     };
-    //     // Najdeme element hlavičky
-    //     const headerElement = document.querySelector('.ag-header');
-    //     if (headerElement) {
-    //       // Vytvoříme observer, který bude sledovat změny v hlavičce
-    //       observer = new MutationObserver((mutations) => {
-    //         // Detekovali jsme změnu v DOM hlavičky, aktualizujeme headerName
-    //         updateHeaderNames();
-    //       });
-    //       // Začneme sledovat změny v hlavičce
-    //       observer.observe(headerElement, {
-    //         childList: true, // sledujeme přidání/odebírání elementů
-    //         subtree: true,    // sledujeme změny i v potomcích
-    //         characterData: true, // sledujeme změny textu
-    //         attributeFilter: ['col-id', 'class'] // sledujeme změny těchto atributů
-    //       });
-    //       console.log('[GridLayout] MutationObserver set up successfully');
-    //     } else {
-    //       console.log('[GridLayout] Header element not found for MutationObserver');
-    //     }
-    //   } catch (error) {
-    //     console.error('[GridLayout] Error setting up MutationObserver:', error);
-    //   }
-    //   // Cleanup - odpojit observer při unmount
-    //   return () => {
-    //     if (observer) {
-    //       observer.disconnect();
-    //       console.log('[GridLayout] MutationObserver disconnected');
-    //     }
-    //   };
-    // }, [savedFields, isInitialized, enabled]);
     /**
      * Error handler
      */
@@ -204,41 +94,37 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
     const stableHandleErrorRef = useRef(handleError);
     // Reference pro ukládání stavu sloupců bez state update v render cyklu
     const stableCurrentColumnsRef = useRef(null);
-    // Aktualizujeme ref hodnoty
+    // Jednoduchá aktualizace ref hodnot - BEZ aktualizace columnDefs
     useEffect(() => {
-        let updatedColumnDefs = columnDefs;
-        // Pro columnDefs zachováváme aktualizované šířky pokud už existují
-        if (stableColumnDefsRef.current && Array.isArray(stableColumnDefsRef.current) && Array.isArray(columnDefs)) {
-            // Vytvoříme mapu existujících šířek
-            const existingWidthsMap = new Map();
-            stableColumnDefsRef.current.forEach(colDef => {
-                const fieldId = colDef.field || colDef.colId;
-                if (fieldId && colDef.width) {
-                    existingWidthsMap.set(fieldId, colDef.width);
-                }
-            });
-            // Aktualizujeme columnDefs s existujícími šířkami
-            updatedColumnDefs = columnDefs.map(colDef => {
-                const fieldId = colDef.field || colDef.colId;
-                if (fieldId && existingWidthsMap.has(fieldId)) {
-                    return {
-                        ...colDef,
-                        width: existingWidthsMap.get(fieldId)
-                    };
-                }
-                return colDef;
-            });
-        }
-        // Zkontrolujeme zda se columnDefs skutečně změnily pomocí hash
-        const newHash = generateColumnDefsHash(updatedColumnDefs);
-        if (newHash !== lastColumnDefsHash) {
-            stableColumnDefsRef.current = updatedColumnDefs;
-            setLastColumnDefsHash(newHash);
+        // Při změně columnDefs vyčistíme columnWidthRefsMap a přeneseme existující šířky
+        if (columnDefs !== stableColumnDefsRef.current) {
+            const newWidthMap = new Map();
+            // Zachováme šířky pro sloupce, které stále existují
+            if (Array.isArray(columnDefs)) {
+                columnDefs.forEach(colDef => {
+                    const fieldId = colDef.field || colDef.colId;
+                    if (fieldId) {
+                        // Zkusíme najít existující šířku v ref map
+                        const existingWidth = columnWidthRefsMap.current.get(fieldId);
+                        if (existingWidth !== undefined) {
+                            newWidthMap.set(fieldId, existingWidth);
+                        }
+                        else if (colDef.width) {
+                            // Použijeme šířku z nového columnDef
+                            newWidthMap.set(fieldId, colDef.width);
+                        }
+                    }
+                });
+            }
+            columnWidthRefsMap.current = newWidthMap;
+            console.log('[GridLayout] Cleanup columnWidthRefsMap při změně columnDefs:', Object.fromEntries(newWidthMap));
+            setColumnWidthsVersion(prev => prev + 1); // Trigger preTransformedColumnDefs přepočet
         }
+        stableColumnDefsRef.current = columnDefs;
         stableGridLayoutApiRef.current = gridLayoutApi;
         stableOnLayoutSavedRef.current = onLayoutSaved;
         stableHandleErrorRef.current = handleError;
-    });
+    }, [columnDefs, gridLayoutApi, onLayoutSaved, handleError]);
     // Efekt pro bezpečnou aktualizaci lastKnownColumnState z ref
     // useEffect(() => {
     //   if (stableCurrentColumnsRef.current) {
@@ -495,6 +381,15 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
             const columnDefsToUse = stableColumnDefsRef.current || columnDefs;
             const columnState = gridLayoutApi.transformFieldsToColumnState(savedFields.records, columnDefsToUse);
             if (columnState && columnState.length > 0) {
+                // Při prvotním načítání inicializujeme ref mapu s API šířkami
+                if (!isInitialized) {
+                    columnState.forEach(colState => {
+                        if (colState.colId && colState.width) {
+                            columnWidthRefsMap.current.set(colState.colId, colState.width);
+                        }
+                    });
+                    console.log('[GridLayout] Inicializace columnWidthRefsMap z API:', Object.fromEntries(columnWidthRefsMap.current));
+                }
                 // Pokud je waitForSavedFields true, columnDefs jsou už pre-transformované,
                 // takže aplikujeme jen width a hide vlastnosti bez delay pro pořadí
                 const applyFunction = () => {
@@ -503,30 +398,28 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
                         let result;
                         try {
                             const applyOrderEnabled = !waitForSavedFields; // Při waitForSavedFields už je pořadí v columnDefs
-                            // Při prvotním načtení (isInitialized=false) používáme přímo columnState z API
-                            // Při následných aplikováních zachováváme aktuální šířky z gridu
-                            let adjustedColumnState = columnState;
-                            if (isInitialized) {
-                                // Pouze pokud už je grid inicializován, zachováváme současné šířky
-                                const currentColumnState = gridApiRef.current?.getColumnState?.() || [];
-                                const currentWidthMap = new Map();
-                                currentColumnState.forEach(colState => {
-                                    if (colState.colId && colState.width) {
-                                        currentWidthMap.set(colState.colId, colState.width);
-                                    }
-                                });
-                                // Upravíme columnState tak, aby zachoval aktuální šířky pokud existují
-                                adjustedColumnState = columnState.map(colState => {
-                                    const currentWidth = currentWidthMap.get(colState.colId);
-                                    if (currentWidth && currentWidth !== colState.width) {
-                                        return {
-                                            ...colState,
-                                            width: currentWidth
-                                        };
-                                    }
-                                    return colState;
-                                });
-                            }
+                            // Upravíme columnState s aktuálními šířkami z ref map
+                            // POUZE pokud ref mapa obsahuje hodnoty (tj. uživatel už manipuloval s šířkami)
+                            // Při prvotním načítání z API zachováme API šířky
+                            let adjustedColumnState = columnState.map(colState => {
+                                // Zkontrolujeme, zda máme ref hodnotu pro tento sloupec
+                                const refWidth = columnWidthRefsMap.current.get(colState.colId);
+                                // Použijeme ref hodnotu POUZE pokud existuje A není to prvotní načítání
+                                if (refWidth !== undefined && isInitialized) {
+                                    return {
+                                        ...colState,
+                                        width: refWidth
+                                    };
+                                }
+                                // Při prvotním načítání nebo pokud nemáme ref hodnotu, zachováme API šířku
+                                return colState;
+                            });
+                            console.log('[GridLayout] Aplikování column state s ref šířkami:', {
+                                columnStateLength: adjustedColumnState?.length,
+                                applyOrderEnabled,
+                                firstColumnWidth: adjustedColumnState?.[0]?.width,
+                                refWidthsCount: columnWidthRefsMap.current.size
+                            });
                             result = applyColumnStateApi.applyColumnState({
                                 state: adjustedColumnState,
                                 applyOrder: applyOrderEnabled, // Pořadí jen když není waitForSavedFields
@@ -537,6 +430,7 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
                                     rowGroup: null, // Reset row grouping
                                 },
                             });
+                            console.log('[GridLayout] Column state aplikován úspěšně');
                             // Explicitně aktualizujeme headerName pro každý sloupec, protože AG-Grid
                             // nepodporuje nastavení headerName přes applyColumnState
                             if (savedFields.records &&
@@ -591,6 +485,11 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
                                             setTimeout(() => {
                                                 try {
                                                     const afterUpdateColDefs = gridApiRef.current.getColumnDefs();
+                                                    const afterUpdateColumnState = gridApiRef.current.getColumnState?.() || [];
+                                                    console.log('[GridLayout] Po aplikování - kontrola šířek:', {
+                                                        columnCount: afterUpdateColumnState.length,
+                                                        widths: afterUpdateColumnState.map(col => ({ field: col.colId, width: col.width }))
+                                                    });
                                                     // DOM operace dokončeny, můžeme ukončit loading
                                                     setIsApplyingLayout(false);
                                                 }
@@ -733,38 +632,24 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
             return;
         }
         setHasUnsavedChanges(true);
-        // Aktualizujeme šířky sloupců v columnDefs před uložením
+        // Okamžitě uložit aktuální šířky sloupců do ref map (podobně jako v handleColumnResized)
         try {
             if (gridApiRef.current && typeof gridApiRef.current.getColumnState === 'function') {
                 const currentColumnState = gridApiRef.current.getColumnState();
                 if (currentColumnState && Array.isArray(currentColumnState)) {
-                    // Aktualizujeme šířky v původních columnDefs
-                    const widthUpdatesMap = new Map();
+                    // Uložit šířky do ref map pro každý sloupec
                     currentColumnState.forEach(colState => {
                         if (colState.colId && colState.width) {
-                            widthUpdatesMap.set(colState.colId, colState.width);
+                            columnWidthRefsMap.current.set(colState.colId, colState.width);
                         }
                     });
-                    // Aktualizujeme stableColumnDefsRef s novými šířkami
-                    if (stableColumnDefsRef.current && Array.isArray(stableColumnDefsRef.current)) {
-                        const updatedColumnDefs = stableColumnDefsRef.current.map(colDef => {
-                            const fieldId = colDef.field || colDef.colId;
-                            if (fieldId && widthUpdatesMap.has(fieldId)) {
-                                return {
-                                    ...colDef,
-                                    width: widthUpdatesMap.get(fieldId)
-                                };
-                            }
-                            return colDef;
-                        });
-                        stableColumnDefsRef.current = updatedColumnDefs;
-                        // Hash se aktualizuje automaticky v hlavním useEffect
-                    }
+                    console.log('[GridLayout] Updated columnWidthRefsMap in dragStopped:', Object.fromEntries(columnWidthRefsMap.current));
+                    setColumnWidthsVersion(prev => prev + 1); // Trigger preTransformedColumnDefs přepočet
                 }
             }
         }
         catch (error) {
-            console.error('[GridLayout] Error updating columnDefs widths in handleDragStopped:', error);
+            console.error('[GridLayout] Error updating columnWidthRefsMap in handleDragStopped:', error);
         }
         // Pokud ještě není inicializované, přidáme akci do pending
         if (!isInitialized && autoSave) {
@@ -774,49 +659,61 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
             ]);
             return;
         }
-        // Normální proces pokud je vše inicializované
         if (autoSave && debouncedSave) {
             debouncedSave();
         }
-        else {
-        }
     }, [enabled, isGridReady, isInitialized, autoSave, debouncedSave]);
+    // Handler pro PRŮBĚŽNÉ resize - ukládá šířky během resize operace
+    const handleColumnResizing = useCallback(() => {
+        if (!enabled || !isGridReady)
+            return;
+        // Okamžitě uložit aktuální šířky sloupců do ref map BĚHEM resize operace
+        try {
+            if (gridApiRef.current && typeof gridApiRef.current.getColumnState === 'function') {
+                const currentColumnState = gridApiRef.current.getColumnState();
+                if (currentColumnState && Array.isArray(currentColumnState)) {
+                    // Uložit šířky do ref map pro každý sloupec
+                    currentColumnState.forEach(colState => {
+                        if (colState.colId && colState.width) {
+                            columnWidthRefsMap.current.set(colState.colId, colState.width);
+                        }
+                    });
+                    // Log pouze při výrazných změnách pro omezení logů
+                    if (Math.random() < 0.1) { // 10% šance na log
+                        console.log('[GridLayout] Updating columnWidthRefsMap during resize:', Object.fromEntries(columnWidthRefsMap.current));
+                    }
+                    setColumnWidthsVersion(prev => prev + 1); // Trigger preTransformedColumnDefs přepočet
+                }
+            }
+        }
+        catch (error) {
+            console.error('[GridLayout] Error updating columnWidthRefsMap in handleColumnResizing:', error);
+        }
+        // NEPOUŽÍVÁME setHasUnsavedChanges zde - to až v handleColumnResized
+    }, [enabled, isGridReady]);
+    // Handler pro DOKONČENÍ resize - spouští auto-save
     const handleColumnResized = useCallback(() => {
         if (!enabled || !isGridReady)
             return;
         setHasUnsavedChanges(true);
-        // Aktualizujeme šířky sloupců v columnDefs při resize
+        // Ještě jednou uložit aktuální šířky sloupců do ref map (pro jistotu)
         try {
             if (gridApiRef.current && typeof gridApiRef.current.getColumnState === 'function') {
                 const currentColumnState = gridApiRef.current.getColumnState();
                 if (currentColumnState && Array.isArray(currentColumnState)) {
-                    // Aktualizujeme šířky v původních columnDefs
-                    const widthUpdatesMap = new Map();
+                    // Uložit šířky do ref map pro každý sloupec
                     currentColumnState.forEach(colState => {
                         if (colState.colId && colState.width) {
-                            widthUpdatesMap.set(colState.colId, colState.width);
+                            columnWidthRefsMap.current.set(colState.colId, colState.width);
                         }
                     });
-                    // Aktualizujeme stableColumnDefsRef s novými šířkami
-                    if (stableColumnDefsRef.current && Array.isArray(stableColumnDefsRef.current)) {
-                        const updatedColumnDefs = stableColumnDefsRef.current.map(colDef => {
-                            const fieldId = colDef.field || colDef.colId;
-                            if (fieldId && widthUpdatesMap.has(fieldId)) {
-                                return {
-                                    ...colDef,
-                                    width: widthUpdatesMap.get(fieldId)
-                                };
-                            }
-                            return colDef;
-                        });
-                        stableColumnDefsRef.current = updatedColumnDefs;
-                        // Hash se aktualizuje automaticky v hlavním useEffect
-                    }
+                    console.log('[GridLayout] Final columnWidthRefsMap after resize:', Object.fromEntries(columnWidthRefsMap.current));
+                    setColumnWidthsVersion(prev => prev + 1); // Trigger preTransformedColumnDefs přepočet
                 }
             }
         }
         catch (error) {
-            console.error('[GridLayout] Error updating columnDefs widths in handleColumnResized:', error);
+            console.error('[GridLayout] Error updating columnWidthRefsMap in handleColumnResized:', error);
         }
         if (autoSave && isInitialized && debouncedSave) {
             debouncedSave();
@@ -859,151 +756,20 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
      */
     useEffect(() => {
         // Aplikujeme layout pokud:
-        // 1. Máme savedFields z API
-        // 2. Grid je ready (má API reference)  
+        // 1. Máme savedFields z API (i když prázdné - první zobrazení modulu)
+        // 2. Grid je ready (má API references)  
         // 3. Ještě jsme neinicializovali layout
-        if (savedFields?.records && savedFields.records.length > 0 && gridApiRef.current && !isInitialized) {
-            applySavedLayout();
+        if (savedFields?.records !== undefined && gridApiRef.current && !isInitialized) {
+            if (savedFields.records.length > 0) {
+                applySavedLayout();
+            }
+            else {
+                // Pro prázdné savedFields jen nastavíme inicializaci
+                setIsInitialized(true);
+                setIsGridReady(true);
+            }
         }
     }, [savedFields?.records, isInitialized, applySavedLayout]);
-    /**
-     * Původní zakomentovaný effect pro aplikování layoutu když se načtou data
-     */
-    // useEffect(() => {
-    //   if (savedFields?.records && columnApiRef.current && !isInitialized) {
-    //     console.log('[GridLayout] Layout will be applied from effect');
-    //     applySavedLayout();
-    //   } else if (savedFields?.records && columnApiRef.current && isInitialized) {
-    //     // Pokud je již inicializován, ale přišla nová data, aktualizujeme jen DOM (ne celý layout)
-    //     console.log('[GridLayout] Already initialized, but received new data - updating headers directly');
-    //     // Počkáme moment, než se nová data zpracují, a pak aktualizujeme headerName
-    //     setTimeout(() => {
-    //       try {
-    //         // Vytvoříme mapu fieldName -> headerName z API dat
-    //         const headerNameMap = new Map();
-    //         savedFields.records.forEach(field => {
-    //           if (field.fieldName && field.headerName) {
-    //             headerNameMap.set(field.fieldName, field.headerName);
-    //             console.log(`[GridLayout] Update after reload: '${field.fieldName}' -> '${field.headerName}'`);
-    //           }
-    //         });
-    //         // Najdeme všechny hlavičky sloupců v DOM
-    //         const headerCells = document.querySelectorAll('.ag-header-cell');
-    //         console.log('[GridLayout] Found header cells after reload:', headerCells.length);
-    //         // Aktualizujeme texty hlaviček
-    //         headerCells.forEach(headerCell => {
-    //           try {
-    //             // Získáme ID sloupce z DOM atributů
-    //             const colId = headerCell.getAttribute('col-id');
-    //             if (colId && headerNameMap.has(colId)) {
-    //               // Najdeme element s textem hlavičky
-    //               const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
-    //               if (headerTextEl) {
-    //                 const newHeaderName = headerNameMap.get(colId);
-    //                 const currentText = headerTextEl.textContent;
-    //                 console.log(`[GridLayout] DOM update after reload: Column '${colId}' header from '${currentText}' to '${newHeaderName}'`);
-    //                 headerTextEl.textContent = newHeaderName;
-    //               }
-    //             }
-    //           } catch (cellError) {
-    //             console.error('[GridLayout] Error updating header cell after reload:', cellError);
-    //           }
-    //         });
-    //         // Zkusíme vynutit překreslení hlavičky
-    //         if (typeof gridApiRef.current.refreshHeader === 'function') {
-    //           console.log('[GridLayout] Forcing header refresh after reload');
-    //           gridApiRef.current.refreshHeader();
-    //         }
-    //       } catch (error) {
-    //         console.error('[GridLayout] Error updating headers after reload:', error);
-    //       }
-    //     }, 200);
-    //   }
-    // }, [savedFields, applySavedLayout, isInitialized, columnApiRef]);
-    /**
-     * Alternativní metoda pro aktualizaci headerName po inicializaci gridu
-     */
-    // useEffect(() => {
-    //   // Pokud již proběhla inicializace a máme uložená data z API
-    //   if (isInitialized && savedFields?.records && gridApiRef.current) {
-    //     console.log('[GridLayout] Attempting alternative header update after initialization');
-    //     // Zkusíme použít metodu columnDefHeaderNameChanged, pokud je dostupná
-    //     try {
-    //       if (typeof gridApiRef.current.columnDefHeaderNameChanged === 'function') {
-    //         console.log('[GridLayout] Trying columnDefHeaderNameChanged method');
-    //         // Vytvoříme mapu fieldName -> headerName z API dat
-    //         const headerNameMap = new Map();
-    //         savedFields.records.forEach(field => {
-    //           if (field.fieldName && field.headerName) {
-    //             headerNameMap.set(field.fieldName, field.headerName);
-    //           }
-    //         });
-    //         // Získáme aktuální definice sloupců
-    //         const currentColumnDefs = gridApiRef.current.getColumnDefs();
-    //         if (currentColumnDefs && Array.isArray(currentColumnDefs)) {
-    //           currentColumnDefs.forEach(colDef => {
-    //             if (colDef.field && headerNameMap.has(colDef.field)) {
-    //               const newHeaderName = headerNameMap.get(colDef.field);
-    //               if (colDef.headerName !== newHeaderName) {
-    //                 console.log(`[GridLayout] Using columnDefHeaderNameChanged for '${colDef.field}': '${colDef.headerName}' -> '${newHeaderName}'`);
-    //                 colDef.headerName = newHeaderName;
-    //                 gridApiRef.current.columnDefHeaderNameChanged(colDef);
-    //               }
-    //             }
-    //           });
-    //         }
-    //       }
-    //     } catch (error) {
-    //       console.error('[GridLayout] Error using columnDefHeaderNameChanged:', error);
-    //     }
-    //     // Počkáme chvíli, aby se grid stihl plně vyrenderovat
-    //     setTimeout(() => {
-    //       try {
-    //         // Získáme aktuální definice sloupců z gridu
-    //         const currentColDefs = gridApiRef.current.getColumnDefs ? gridApiRef.current.getColumnDefs() : null;
-    //         if (currentColDefs && Array.isArray(currentColDefs)) {
-    //           // Vytvoříme mapu fieldName -> headerName z API dat
-    //           const headerNameMap = new Map();
-    //           savedFields.records.forEach(field => {
-    //             if (field.fieldName && field.headerName) {
-    //               headerNameMap.set(field.fieldName, field.headerName);
-    //             }
-    //           });
-    //           // Zkontrolujeme, zda je třeba aktualizovat nějaké headery
-    //           let needsUpdate = false;
-    //           const updatedColDefs = currentColDefs.map(colDef => {
-    //             const fieldName = colDef.field;
-    //             if (fieldName && headerNameMap.has(fieldName)) {
-    //               const newHeaderName = headerNameMap.get(fieldName);
-    //               if (colDef.headerName !== newHeaderName) {
-    //                 needsUpdate = true;
-    //                 console.log(`[GridLayout] Alternative update: Column '${fieldName}' header from '${colDef.headerName}' to '${newHeaderName}'`);
-    //                 return {
-    //                   ...colDef,
-    //                   headerName: newHeaderName
-    //                 };
-    //               }
-    //             }
-    //             return colDef;
-    //           });
-    //           if (needsUpdate && typeof gridApiRef.current.setColumnDefs === 'function') {
-    //             console.log('[GridLayout] Applying alternative column header update');
-    //             gridApiRef.current.setColumnDefs(updatedColDefs);
-    //             // Zkusíme vynutit překreslení hlavičky
-    //             setTimeout(() => {
-    //               if (typeof gridApiRef.current.refreshHeader === 'function') {
-    //                 console.log('[GridLayout] Forcing header refresh');
-    //                 gridApiRef.current.refreshHeader();
-    //               }
-    //             }, 50);
-    //           }
-    //         }
-    //       } catch (error) {
-    //         console.error('[GridLayout] Error in alternative header update:', error);
-    //       }
-    //     }, 300);
-    //   }
-    // }, [isInitialized, savedFields, gridApiRef]);
     /**
      * Effect pro error handling
      */
@@ -1332,7 +1098,7 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
     // DŮLEŽITÉ: Toto useMemo nyní obsahuje i AgGridColumns transformaci pro eliminaci circular dependency
     const preTransformedColumnDefs = useMemo(() => {
         // Použijeme aktualizované columnDefs ze stableColumnDefsRef pokud existují
-        const columnDefsToUse = stableColumnDefsRef.current || columnDefs;
+        const columnDefsToUse = stableColumnDefsRef.current; // || columnDefs; //HLO
         let baseColumnDefs = columnDefsToUse;
         // Pro waitForSavedFields aplikujeme grid layout transformace
         if (waitForSavedFields &&
@@ -1367,7 +1133,7 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
                     .map((colDef) => {
                     const fieldId = colDef.field || colDef.colId;
                     const columnStateItem = columnStateMap.get(fieldId);
-                    // Aplikujeme pouze headerName a hide z API (width se aplikuje až v applySavedLayout)
+                    // Aplikujeme headerName, hide i width z API pro waitForSavedFields režim
                     if (fieldId && (headerNameMap.has(fieldId) || columnStateItem)) {
                         return {
                             ...colDef,
@@ -1375,7 +1141,8 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
                             ...(headerNameMap.has(fieldId) && { headerName: headerNameMap.get(fieldId) }),
                             // Aplikujeme hide hodnotu z columnState (z API show hodnoty)
                             ...(columnStateItem && { hide: columnStateItem.hide }),
-                            // Width se neaplikuje zde - aplikuje se až v applySavedLayout pro eliminaci konfliktu s resize
+                            // Aplikujeme také width pro konzistentní zobrazení
+                            ...(columnStateItem && columnStateItem.width && { width: columnStateItem.width }),
                         };
                     }
                     return colDef;
@@ -1393,7 +1160,21 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
                 return [];
             }
         }
-        return baseColumnDefs;
+        // Aplikujeme ref šířky jako poslední krok POUZE pokud už byla provedena inicializace
+        // Při prvotním načítání zachováváme API šířky (které jsou už v baseColumnDefs pro waitForSavedFields)
+        const finalColumnDefs = baseColumnDefs.map(colDef => {
+            const fieldId = colDef.field || colDef.colId;
+            const refWidth = columnWidthRefsMap.current.get(fieldId);
+            // Použijeme ref šířku POUZE pokud už je grid inicializovaný (uživatel manipuloval s šířkami)
+            if (refWidth !== undefined && isInitialized) {
+                return {
+                    ...colDef,
+                    width: refWidth
+                };
+            }
+            return colDef;
+        });
+        return finalColumnDefs;
         // // Replikujeme AgGridColumns logiku pro všechny column definitions:
         // const processedColumns = baseColumnDefs?.map((column) => {
         //   // Zkopírujeme column aby se předešlo mutacím
@@ -1412,57 +1193,8 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
         //   return processedColumn;
         // }) || [];
         // return processedColumns;
-    }, [waitForSavedFields, savedFields?.records, columnDefs, gridLayoutApi, lastColumnDefsHash]);
-    /**
-     * Handler pro změnu zobrazených dat - aktualizace headerName
-     */
-    const handleRowDataChanged = useCallback((params) => {
-        // if (!enabled || !savedFields?.records || !isInitialized) return;
-        // console.log('[GridLayout] Row data changed - ensuring header names stay updated');
-        // // Počkáme chvíli, až se vše vyrenderuje, a pak aktualizujeme headerName
-        // setTimeout(() => {
-        //   try {
-        //     // Vytvoříme mapu fieldName -> headerName z API dat
-        //     const headerNameMap = new Map();
-        //     savedFields.records.forEach(field => {
-        //       if (field.fieldName && field.headerName) {
-        //         headerNameMap.set(field.fieldName, field.headerName);
-        //       }
-        //     });
-        //     // Najdeme všechny hlavičky sloupců v DOM
-        //     const headerCells = document.querySelectorAll('.ag-header-cell');
-        //     console.log('[GridLayout] Found header cells after data change:', headerCells.length);
-        //     // Aktualizujeme texty hlaviček
-        //     headerCells.forEach(headerCell => {
-        //       try {
-        //         // Získáme ID sloupce z DOM atributů
-        //         const colId = headerCell.getAttribute('col-id');
-        //         if (colId && headerNameMap.has(colId)) {
-        //           // Najdeme element s textem hlavičky
-        //           const headerTextEl = headerCell.querySelector('.ag-header-cell-text');
-        //           if (headerTextEl) {
-        //             const newHeaderName = headerNameMap.get(colId);
-        //             const currentText = headerTextEl.textContent;
-        //             if (currentText !== newHeaderName) {
-        //               console.log(`[GridLayout] Data change update: Column '${colId}' header from '${currentText}' to '${newHeaderName}'`);
-        //               headerTextEl.textContent = newHeaderName;
-        //             }
-        //           }
-        //         }
-        //       } catch (cellError) {
-        //         console.error('[GridLayout] Error updating header cell after data change:', cellError);
-        //       }
-        //     });
-        //     // Zkusíme vynutit překreslení hlavičky
-        //     if (typeof gridApiRef.current.refreshHeader === 'function') {
-        //       console.log('[GridLayout] Forcing header refresh after data change');
-        //       gridApiRef.current.refreshHeader();
-        //     }
-        //   } catch (error) {
-        //     console.error('[GridLayout] Error updating headers after data change:', error);
-        //   }
-        // }, 100);
-    }, [enabled, savedFields, isInitialized]);
+    }, [waitForSavedFields, savedFields?.records, columnDefs, gridLayoutApi, columnWidthsVersion, isInitialized]);
+    console.log("rerender");
     return {
         // State
         isLoading: isLoading || isFieldsLoading,
@@ -1478,10 +1210,11 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
         onGridReady: handleGridReady,
         onColumnMoved: handleColumnMoved,
         onDragStopped: handleDragStopped, // Nový handler pro konec drag operace
+        onColumnResizing: handleColumnResizing, // NOVÝ handler pro průběžné resize
         onColumnResized: handleColumnResized,
         onColumnVisible: handleColumnVisible,
         onColumnPinned: handleColumnPinned,
-        onRowDataChanged: handleRowDataChanged, // Nový handler pro změnu dat
+        // onRowDataChanged: handleRowDataChanged, // Nový handler pro změnu dat
         // Manual actions
         saveLayout,
         resetToDefault,