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

package/dist/useGridLayout.js

@@ -6,6 +6,8 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { useGridLayoutApi } from './useGridLayoutApi';
 import { debounce } from 'lodash';
+// Import tooltip komponent pro eliminaci circular dependency
+// import * as Tooltip from '../grid/tooltips';
 /**
  * Hook pro správu grid layout s automatickým ukládáním
  * @param {Object} config - Konfigurace grid layout
@@ -15,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
@@ -24,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 &&
@@ -36,16 +38,19 @@ 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);
     const [isLoading, setIsLoading] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
+    const [isApplyingLayout, setIsApplyingLayout] = useState(false);
     const [error, setError] = useState(null);
     const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
     const [isColumnEditorOpen, setIsColumnEditorOpen] = useState(false);
     const [lastKnownColumnState, setLastKnownColumnState] = useState(null);
-    const [columnDefsVersion, setColumnDefsVersion] = useState(0); // Pro tracking změn v stableColumnDefsRef
+    const [columnWidthsVersion, setColumnWidthsVersion] = useState(0); // Pro trigger preTransformedColumnDefs
     // Grid Layout API hook
     const gridLayoutApi = useGridLayoutApi({
         userKey,
@@ -72,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
      */
@@ -193,40 +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(() => {
-        // 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
-            const mergedColumnDefs = columnDefs.map(colDef => {
-                const fieldId = colDef.field || colDef.colId;
-                if (fieldId && existingWidthsMap.has(fieldId)) {
-                    return {
-                        ...colDef,
-                        width: existingWidthsMap.get(fieldId)
-                    };
-                }
-                return colDef;
-            });
-            stableColumnDefsRef.current = mergedColumnDefs;
-            setColumnDefsVersion(prev => prev + 1); // Trigger useMemo přepočet
-        }
-        else {
-            // První nastavení nebo pokud nejsou dostupné předchozí data
-            stableColumnDefsRef.current = columnDefs;
+        // 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) {
@@ -477,11 +375,21 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
         }
         try {
             setIsLoading(true);
+            setIsApplyingLayout(true);
             // Transformujeme Grid API fields na AG-Grid column state
             // Použijeme stableColumnDefsRef.current místo columnDefs pro zachování aktuálních šířek
             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 = () => {
@@ -490,25 +398,28 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
                         let result;
                         try {
                             const applyOrderEnabled = !waitForSavedFields; // Při waitForSavedFields už je pořadí v columnDefs
-                            // Získáme aktuální stav sloupců před aplikováním
-                            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í
-                            const adjustedColumnState = columnState.map(colState => {
-                                const currentWidth = currentWidthMap.get(colState.colId);
-                                if (currentWidth && currentWidth !== colState.width) {
+                            // 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: currentWidth
+                                        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
@@ -519,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 &&
@@ -573,9 +485,18 @@ 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);
                                                 }
                                                 catch (checkError) {
                                                     console.error('[GridLayout] Error checking updated columns:', checkError);
+                                                    // I při chybě ukončíme loading
+                                                    setIsApplyingLayout(false);
                                                 }
                                             }, 100);
                                         }
@@ -611,9 +532,13 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
                                                             console.error('[GridLayout] Error updating header cell:', cellError);
                                                         }
                                                     });
+                                                    // DOM manipulace dokončena, ukončíme loading
+                                                    setIsApplyingLayout(false);
                                                 }
                                                 catch (domError) {
                                                     console.error('[GridLayout] Error in DOM manipulation:', domError);
+                                                    // I při chybě ukončíme loading
+                                                    setIsApplyingLayout(false);
                                                 }
                                             }, 200);
                                         }
@@ -635,6 +560,12 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
                         // Removed console.error for production
                         handleError(delayedError, 'při delayed aplikování layoutu');
                     }
+                    finally {
+                        // Bezpečnostní ukončení loading pokud se nedokončilo jinde
+                        setTimeout(() => {
+                            setIsApplyingLayout(false);
+                        }, 300);
+                    }
                 };
                 // Pro waitForSavedFields aplikujeme okamžitě (pořadí je už v columnDefs)
                 // Pro normální režim použijeme delay
@@ -653,6 +584,7 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
             setIsInitialized(true);
             setIsGridReady(true); // Obnovíme také isGridReady pro event handlery
             setIsLoading(false);
+            // setIsApplyingLayout(false) se nastaví až po dokončení všech DOM operací
         }
     }, [
         savedFields,
@@ -700,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;
-                        setColumnDefsVersion(prev => prev + 1); // Trigger useMemo přepočet
-                    }
+                    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) {
@@ -741,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;
-                        setColumnDefsVersion(prev => prev + 1); // Trigger useMemo přepočet
-                    }
+                    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();
@@ -818,161 +748,28 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
         columnApiRef.current = params.columnApi || params.api;
         // Okamžitě označíme grid jako připravený pro event handlery
         setIsGridReady(true);
-        // Po reloadLayout() NEPOTŘEBUJEME znovu aplikovat layout - už je v DB a grid ho má správně
-        // Jen nastavíme isInitialized na true
-        if (isInitialized === false) {
-            setIsInitialized(true);
-        }
+        // POZOR: Nenastavujeme isInitialized zde, protože by to zabránilo aplikování layoutu!
+        // isInitialized se nastaví až po aplikování layoutu v applySavedLayout
     }, [enabled, savedFields, isInitialized, applySavedLayout]);
     /**
-     * Effect pro aplikování layoutu když se načtou data po reloadLayout
-     * ODSTRANĚNO - způsobovalo předčasné volání applySavedLayout() před grid ready
+     * Effect pro aplikování layoutu při prvotním načtení savedFields
      */
-    // useEffect(() => {
-    //   // Po refetchFields() (z reloadLayout) potřebujeme aplikovat layout a obnovit isGridReady
-    //   if (savedFields?.records && !isInitialized && gridApiRef.current) {
-    //     console.log('[GridLayout] Effect: Applying layout after refetch and setting isGridReady=true');
-    //     applySavedLayout();
-    //   }
-    // }, [savedFields, 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]);
+    useEffect(() => {
+        // Aplikujeme layout pokud:
+        // 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 !== 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]);
     /**
      * Effect pro error handling
      */
@@ -1298,113 +1095,111 @@ onLayoutLoaded, onLayoutSaved, onError, }) => {
         return !isFieldsLoading && !isLoading;
     }, [waitForSavedFields, isFieldsLoading, isLoading]);
     // Pre-transformované columnDefs podle savedFields pro waitForSavedFields mode
+    // 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;
-        if (!waitForSavedFields ||
-            !savedFields?.records ||
-            !Array.isArray(columnDefsToUse)) {
-            return columnDefsToUse; // Aktualizované columnDefs
-        }
-        // Transformujeme columnDefs podle savedFields PŘED zobrazením gridu
-        const columnState = gridLayoutApi.transformFieldsToColumnState(savedFields.records, columnDefsToUse);
-        if (!columnState || columnState.length === 0) {
-            return columnDefsToUse; // Pokud není co transformovat, vrátíme aktualizované
+        const columnDefsToUse = stableColumnDefsRef.current; // || columnDefs; //HLO
+        let baseColumnDefs = columnDefsToUse;
+        // Pro waitForSavedFields aplikujeme grid layout transformace
+        if (waitForSavedFields &&
+            savedFields?.records &&
+            Array.isArray(columnDefsToUse)) {
+            // Transformujeme columnDefs podle savedFields PŘED zobrazením gridu
+            const columnState = gridLayoutApi.transformFieldsToColumnState(savedFields.records, columnDefsToUse);
+            if (columnState && columnState.length > 0) {
+                // Vytvoříme mapu pro rychlé vyhledávání
+                const columnStateMap = new Map();
+                columnState.forEach((colState, index) => {
+                    columnStateMap.set(colState.colId, { ...colState, __order: index });
+                });
+                // 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);
+                    }
+                });
+                // Seřadíme columnDefs podle pořadí z columnState a upravíme headerName podle savedFields
+                baseColumnDefs = [...columnDefsToUse]
+                    .sort((a, b) => {
+                    const fieldA = a.field || a.colId;
+                    const fieldB = b.field || b.colId;
+                    const aState = columnStateMap.get(fieldA);
+                    const bState = columnStateMap.get(fieldB);
+                    const aOrder = aState?.__order ?? 999;
+                    const bOrder = bState?.__order ?? 999;
+                    return aOrder - bOrder;
+                })
+                    .map((colDef) => {
+                    const fieldId = colDef.field || colDef.colId;
+                    const columnStateItem = columnStateMap.get(fieldId);
+                    // Aplikujeme headerName, hide i width z API pro waitForSavedFields režim
+                    if (fieldId && (headerNameMap.has(fieldId) || columnStateItem)) {
+                        return {
+                            ...colDef,
+                            // Aplikujeme headerName z savedFields
+                            ...(headerNameMap.has(fieldId) && { headerName: headerNameMap.get(fieldId) }),
+                            // Aplikujeme hide hodnotu z columnState (z API show hodnoty)
+                            ...(columnStateItem && { hide: columnStateItem.hide }),
+                            // Aplikujeme také width pro konzistentní zobrazení
+                            ...(columnStateItem && columnStateItem.width && { width: columnStateItem.width }),
+                        };
+                    }
+                    return colDef;
+                });
+            }
         }
-        // Vytvoříme mapu pro rychlé vyhledávání
-        const columnStateMap = new Map();
-        columnState.forEach((colState, index) => {
-            columnStateMap.set(colState.colId, { ...colState, __order: index });
-        });
-        // 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);
+        // Nyní VŽDY aplikujeme AgGridColumns transformaci PŘÍMO zde místo v props
+        // Tím eliminujeme circular dependency pro všechny případy použití
+        if (!Array.isArray(baseColumnDefs)) {
+            // Pokud baseColumnDefs není array, mohlo by to být ColumnBuilder
+            if (baseColumnDefs && typeof baseColumnDefs.build === 'function') {
+                baseColumnDefs = baseColumnDefs.build();
             }
-        });
-        // Seřadíme columnDefs podle pořadí z columnState a upravíme headerName podle savedFields
-        const sortedColumnDefs = [...columnDefsToUse]
-            .sort((a, b) => {
-            const fieldA = a.field || a.colId;
-            const fieldB = b.field || b.colId;
-            const aState = columnStateMap.get(fieldA);
-            const bState = columnStateMap.get(fieldB);
-            const aOrder = aState?.__order ?? 999;
-            const bOrder = bState?.__order ?? 999;
-            return aOrder - bOrder;
-        })
-            .map((colDef) => {
+            else {
+                return [];
+            }
+        }
+        // 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 columnStateItem = columnStateMap.get(fieldId);
-            // Aplikujeme jak headerName tak hide hodnotu z API
-            if (fieldId && (headerNameMap.has(fieldId) || columnStateItem)) {
+            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,
-                    // Aplikujeme headerName z savedFields
-                    ...(headerNameMap.has(fieldId) && { headerName: headerNameMap.get(fieldId) }),
-                    // Aplikujeme hide hodnotu z columnState (z API show hodnoty)
-                    ...(columnStateItem && { hide: columnStateItem.hide }),
+                    width: refWidth
                 };
             }
             return colDef;
         });
-        return sortedColumnDefs;
-    }, [waitForSavedFields, savedFields?.records, columnDefs, gridLayoutApi, columnDefsVersion]);
-    /**
-     * 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();
+        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
+        //   const processedColumn = { ...column };
+        //   // Aplikujeme tooltip logiku pokud je potřeba
+        //   if (processedColumn.contentTooltip) {
+        //     // Statické mapování tooltipů pro lepší performance a eliminaci circular dependency
+        //     switch (processedColumn.contentTooltip) {
+        //       case 'User':
+        //         processedColumn.tooltipComponent = Tooltip.User;
+        //         break;
+        //       default:
+        //         console.warn(`[GridLayout] Unknown tooltip component: ${processedColumn.contentTooltip}`);
         //     }
-        //   } catch (error) {
-        //     console.error('[GridLayout] Error updating headers after data change:', error);
         //   }
-        // }, 100);
-    }, [enabled, savedFields, isInitialized]);
+        //   return processedColumn;
+        // }) || [];
+        // return processedColumns;
+    }, [waitForSavedFields, savedFields?.records, columnDefs, gridLayoutApi, columnWidthsVersion, isInitialized]);
+    console.log("rerender");
     return {
         // State
         isLoading: isLoading || isFieldsLoading,
         isSaving,
+        isApplyingLayout, // Nový specifický state pro aplikování layoutu
         error,
         hasUnsavedChanges,
         isInitialized,
@@ -1415,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,