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

package/useGridLayout.js

@@ -7,6 +7,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
@@ -17,7 +19,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
@@ -33,7 +35,7 @@ export const useGridLayout = ({
   filterName,
   enabled = true,
   autoSave = true,
-  autoSaveDelay = 2000,
+  autoSaveDelay = 500,
   columnDefs = [],
   accessToken,
   waitForSavedFields = false, // Nový prop pro odložené zobrazení columnDefs
@@ -59,17 +61,22 @@ export const useGridLayout = ({
   // 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({
@@ -109,123 +116,6 @@ export const useGridLayout = ({
     }
   );
 
-  // // 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
    */
@@ -248,42 +138,39 @@ export const useGridLayout = ({
   // 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;
-      });
+    // Při změně columnDefs vyčistíme columnWidthRefsMap a přeneseme existující šířky
+    if (columnDefs !== stableColumnDefsRef.current) {
+      const newWidthMap = new Map();
       
-      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;
+      // 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(() => {
@@ -299,8 +186,6 @@ export const useGridLayout = ({
    * Uloží současný stav sloupců do API
    */
   const saveCurrentLayout = useCallback(async () => {
-
-
     if (!enabled || !gridApiRef.current) {
       return;
     }
@@ -598,8 +483,9 @@ export const useGridLayout = ({
       }
 
       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;
@@ -609,6 +495,16 @@ export const useGridLayout = ({
         );
 
         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 = () => {
@@ -618,27 +514,30 @@ export const useGridLayout = ({
               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
@@ -650,6 +549,8 @@ export const useGridLayout = ({
                   },
                 });
 
+                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 (
@@ -715,14 +616,23 @@ export const useGridLayout = ({
                         // Pro jistotu zkontrolujeme, zda byly změny aplikovány
                         setTimeout(() => {
                           try {
-                            const afterUpdateColDefs =
-                              gridApiRef.current.getColumnDefs();
-                           
+                            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);
                       } else {
@@ -770,11 +680,16 @@ export const useGridLayout = ({
                                 );
                               }
                             });
+                            
+                            // 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);
                       }
@@ -796,6 +711,11 @@ export const useGridLayout = ({
             } catch (delayedError) {
               // 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);
             }
           };
 
@@ -813,6 +733,7 @@ export const useGridLayout = ({
         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í
       }
     },
     [
@@ -869,39 +790,25 @@ export const useGridLayout = ({
 
     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
@@ -913,50 +820,66 @@ export const useGridLayout = ({
       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) {
@@ -996,179 +919,32 @@ export const useGridLayout = ({
       // 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
    */
@@ -1547,133 +1323,132 @@ export const useGridLayout = ({
   }, [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;
+    const columnDefsToUse = stableColumnDefsRef.current; // || columnDefs; //HLO
     
+    let baseColumnDefs = columnDefsToUse;
+
+    // Pro waitForSavedFields aplikujeme grid layout transformace
     if (
-      !waitForSavedFields ||
-      !savedFields?.records ||
-      !Array.isArray(columnDefsToUse)
+      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
+      );
 
-    // 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);
+          }
+        });
 
-    if (!columnState || columnState.length === 0) {
-      return columnDefsToUse; // Pokud není co transformovat, vrátíme aktualizované
+        // 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 });
-    });
+    // 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();
+      } else {
+        return [];
+      }
+    }
 
-    // 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);
+    // 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;
     });
 
-    // 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) => {
-        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)) {
-          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 }),
-          };
-        }
-        return colDef;
-      });
+    return finalColumnDefs;
 
-    return sortedColumnDefs;
-  }, [waitForSavedFields, savedFields?.records, columnDefs, gridLayoutApi, columnDefsVersion]);
+    // // 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 };
 
-  /**
-   * 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]
-  );
+    //   // 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}`);
+    //     }
+    //   }
+
+    //   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,
@@ -1685,10 +1460,11 @@ export const useGridLayout = ({
     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,