@bit.rhplus/ui.grid 0.0.35 → 0.0.36

package/README-GridLayout.md

@@ -0,0 +1,273 @@
+# 🎛️ Grid Layout Management
+
+Automatické ukládání a načítání rozvržení sloupců gridu pomocí Grid API služby.
+
+## 📋 Funkcionality
+
+- ✅ **Automatické ukládání** rozložení sloupců (šířka, pořadí, viditelnost, připínání)
+- ✅ **Persistence** nastavení napříč relacemi uživatele
+- ✅ **Multi-aplikační podpora** s jasnou separací dat
+- ✅ **Debounced auto-save** pro předcházení častým API voláním
+- ✅ **Error handling** s fallback na default layout
+- ✅ **Manual controls** pro uložení, reset a reload
+
+## 🚀 Použití
+
+### Základní konfigurace
+
+```jsx
+import Grid from '@bit.rhplus/ui.grid';
+
+const MyGridComponent = () => {
+  const { accessToken } = useOidcAccessToken();
+  
+  return (
+    <Grid
+      // Standardní Grid props
+      columnDefs={columnDefs}
+      rowData={rowData}
+      
+      // Grid Layout props
+      layoutEnabled={true}                     // Zapnout layout management
+      gridName="invoices-master"               // Unikátní název gridu
+      applicationName="Portal.App"             // Název aplikace (default)
+      userKey={currentUser.id}                 // ID uživatele
+      filterName="default"                     // Volitelný název filtru
+      autoSave={true}                          // Automatické ukládání (default)
+      autoSaveDelay={2000}                     // Zpoždění auto-save v ms
+      accessToken={accessToken}                // Bearer token
+      
+      // Callback funkce
+      onLayoutLoaded={(fields, columnState) => {
+        console.log('Layout načten:', fields);
+      }}
+      onLayoutSaved={(fields, columnState) => {
+        console.log('Layout uložen:', fields);
+      }}
+      onLayoutError={(error, context) => {
+        console.error('Grid layout chyba:', error, context);
+      }}
+    />
+  );
+};
+```
+
+### Pokročilé použití s manuálními ovládacími prvky
+
+```jsx
+import Grid, { useGridLayout } from '@bit.rhplus/ui.grid';
+
+const AdvancedGridComponent = () => {
+  const { accessToken } = useOidcAccessToken();
+  const [gridApi, setGridApi] = useState(null);
+  
+  // Přímé použití useGridLayout hook
+  // POZOR: columnDefs musí být array! Pokud používáte ColumnBuilder, zavolejte .build()
+  const columnDefsArray = columnDefs.build ? columnDefs.build() : columnDefs;
+  
+  const gridLayout = useGridLayout({
+    userKey: currentUser.id,
+    applicationName: 'Portal.App',
+    gridName: 'advanced-grid',
+    enabled: true,
+    autoSave: false, // Manuální ukládání
+    columnDefs: columnDefsArray,
+    accessToken: accessToken
+  });
+  
+  const handleSaveLayout = async () => {
+    try {
+      await gridLayout.saveLayout();
+      notification.success('Layout uložen');
+    } catch (error) {
+      notification.error('Chyba při ukládání layoutu');
+    }
+  };
+  
+  const handleResetLayout = async () => {
+    try {
+      await gridLayout.resetToDefault();
+      notification.info('Layout resetován na výchozí');
+    } catch (error) {
+      notification.error('Chyba při resetování layoutu');
+    }
+  };
+  
+  return (
+    <div>
+      {/* Ovládací panel */}
+      <div style={{ marginBottom: 16 }}>
+        <Button 
+          onClick={handleSaveLayout}
+          loading={gridLayout.isSaving}
+          disabled={!gridLayout.hasUnsavedChanges}
+        >
+          Uložit layout
+        </Button>
+        <Button onClick={handleResetLayout}>
+          Resetovat layout
+        </Button>
+        {gridLayout.hasUnsavedChanges && (
+          <span style={{ color: 'orange', marginLeft: 8 }}>
+            Neuložené změny
+          </span>
+        )}
+      </div>
+      
+      {/* Grid s manuálním layoutem */}
+      <Grid
+        columnDefs={columnDefs}
+        rowData={rowData}
+        
+        layoutEnabled={true}
+        gridName="advanced-grid"
+        userKey={currentUser.id}
+        autoSave={false}
+        accessToken={accessToken}
+        
+        onGridReady={(params) => {
+          setGridApi(params.api);
+          gridLayout.onGridReady(params);
+        }}
+        onColumnMoved={gridLayout.onColumnMoved}
+        onColumnResized={gridLayout.onColumnResized}
+        onColumnVisible={gridLayout.onColumnVisible}
+        onColumnPinned={gridLayout.onColumnPinned}
+      />
+    </div>
+  );
+};
+```
+
+## ⚙️ Konfigurace Props
+
+| Prop | Type | Default | Popis |
+|------|------|---------|--------|
+| `layoutEnabled` | `boolean` | `false` | Zapnout/vypnout layout management |
+| `gridName` | `string` | **povinné** | Unikátní název gridu pro identifikaci |
+| `applicationName` | `string` | `'Portal.App'` | Název aplikace |
+| `userKey` | `string` | **povinné** | Identifikátor uživatele |
+| `filterName` | `string` | `null` | Volitelný název filtru pro více layoutů |
+| `autoSave` | `boolean` | `true` | Automatické ukládání při změnách |
+| `autoSaveDelay` | `number` | `2000` | Zpoždění auto-save v milisekundách |
+| `accessToken` | `string` | `null` | Bearer token pro API autorizaci |
+
+## 📞 Callback Props
+
+| Callback | Parametry | Popis |
+|----------|-----------|--------|
+| `onLayoutLoaded` | `(fields, columnState)` | Voláno při úspěšném načtení layoutu |
+| `onLayoutSaved` | `(fields, columnState)` | Voláno při úspěšném uložení layoutu |
+| `onLayoutError` | `(error, context)` | Voláno při chybě v layout managementu |
+
+## 🛠️ useGridLayout Hook API
+
+```jsx
+const {
+  // State
+  isLoading,           // boolean - načítání dat
+  isSaving,            // boolean - ukládání layoutu
+  error,               // Error | null - poslední chyba
+  hasUnsavedChanges,   // boolean - neuložené změny
+  isInitialized,       // boolean - layout byl inicializován
+  
+  // AG-Grid event handlers
+  onGridReady,         // function - AG-Grid onGridReady handler
+  onColumnMoved,       // function - AG-Grid onColumnMoved handler
+  onColumnResized,     // function - AG-Grid onColumnResized handler
+  onColumnVisible,     // function - AG-Grid onColumnVisible handler
+  onColumnPinned,      // function - AG-Grid onColumnPinned handler
+  
+  // Manual actions
+  saveLayout,          // function - manuální uložení
+  resetToDefault,      // function - reset na výchozí layout
+  reloadLayout,        // function - znovunačtení z API
+  
+  // Data
+  savedFields,         // Array - uložená pole z API
+  
+  // Utils
+  gridLayoutApi        // Object - Grid Layout API utils
+} = useGridLayout(config);
+```
+
+## 🌍 Grid Context
+
+Když je layout management zapnutý, Grid komponenta poskytuje context s layout informacemi:
+
+```jsx
+// V AG-Grid cell rendereru nebo custom komponentě
+const MyCustomRenderer = (params) => {
+  const { gridLayout } = params.context || {};
+  
+  if (gridLayout) {
+    const { isLoading, isSaving, hasUnsavedChanges, saveLayout } = gridLayout;
+    
+    return (
+      <div>
+        {isSaving && <Spin size="small" />}
+        {hasUnsavedChanges && <Badge status="warning" />}
+        <Button size="small" onClick={saveLayout}>Save</Button>
+      </div>
+    );
+  }
+  
+  return <span>{params.value}</span>;
+};
+```
+
+## 📊 Datový model
+
+### Grid API Field Structure
+```javascript
+{
+  name: "customerName",                    // Název pole
+  displayName: "Název zákazníka",         // Zobrazovaný název
+  dataType: "string",                     // Datový typ
+  isVisible: true,                        // Viditelnost sloupce
+  width: 150,                             // Šířka sloupce
+  order: 0,                               // Pořadí sloupce
+  isPinned: null,                         // Připínání ('left', 'right', null)
+  userField: {                            // Personalizované nastavení
+    isVisible: true,
+    width: 200,
+    order: 1,
+    isPinned: "left"
+  }
+}
+```
+
+## 🎯 Best Practices
+
+1. **Unikátní gridName**: Každý grid musí mít unikátní název v rámci aplikace
+2. **UserKey konzistence**: Používej konzistentní identifikátor uživatele
+3. **Error handling**: Vždy implementuj `onLayoutError` callback
+4. **AccessToken**: Poskytni access token pro autorizaci API volání
+5. **Debouncing**: Pro časté změny používej vyšší `autoSaveDelay`
+6. **Testing**: Testuj s různými kombinacemi column definitions
+
+## 🚨 Troubleshooting
+
+### Layout se nenačítá
+- Zkontroluj, že `layoutEnabled={true}`
+- Ověř, že `userKey`, `gridName` a `accessToken` jsou správně nastaveny
+- Zkontroluj network tab pro API chyby
+
+### Auto-save nefunguje
+- Ověř, že `autoSave={true}` (default)
+- Zkontroluj, že se spouští AG-Grid eventy (onColumnMoved, onColumnResized)
+- Zkontroluj console pro chyby
+
+### Performance problémy
+- Zvyš `autoSaveDelay` pro méně časté ukládání
+- Použij `autoSave={false}` pro manuální kontrolu
+- Implementuj vlastní debouncing v parent komponentě
+
+## 📝 Changelog
+
+### v1.0.0
+- ✅ Základní grid layout management
+- ✅ Auto-save funkcionalita
+- ✅ Integration s Grid API službou
+- ✅ Error handling a recovery
+- ✅ Manual controls (save, reset, reload)

package/dist/README-GridLayout.md

@@ -0,0 +1,273 @@
+# 🎛️ Grid Layout Management
+
+Automatické ukládání a načítání rozvržení sloupců gridu pomocí Grid API služby.
+
+## 📋 Funkcionality
+
+- ✅ **Automatické ukládání** rozložení sloupců (šířka, pořadí, viditelnost, připínání)
+- ✅ **Persistence** nastavení napříč relacemi uživatele
+- ✅ **Multi-aplikační podpora** s jasnou separací dat
+- ✅ **Debounced auto-save** pro předcházení častým API voláním
+- ✅ **Error handling** s fallback na default layout
+- ✅ **Manual controls** pro uložení, reset a reload
+
+## 🚀 Použití
+
+### Základní konfigurace
+
+```jsx
+import Grid from '@bit.rhplus/ui.grid';
+
+const MyGridComponent = () => {
+  const { accessToken } = useOidcAccessToken();
+  
+  return (
+    <Grid
+      // Standardní Grid props
+      columnDefs={columnDefs}
+      rowData={rowData}
+      
+      // Grid Layout props
+      layoutEnabled={true}                     // Zapnout layout management
+      gridName="invoices-master"               // Unikátní název gridu
+      applicationName="Portal.App"             // Název aplikace (default)
+      userKey={currentUser.id}                 // ID uživatele
+      filterName="default"                     // Volitelný název filtru
+      autoSave={true}                          // Automatické ukládání (default)
+      autoSaveDelay={2000}                     // Zpoždění auto-save v ms
+      accessToken={accessToken}                // Bearer token
+      
+      // Callback funkce
+      onLayoutLoaded={(fields, columnState) => {
+        console.log('Layout načten:', fields);
+      }}
+      onLayoutSaved={(fields, columnState) => {
+        console.log('Layout uložen:', fields);
+      }}
+      onLayoutError={(error, context) => {
+        console.error('Grid layout chyba:', error, context);
+      }}
+    />
+  );
+};
+```
+
+### Pokročilé použití s manuálními ovládacími prvky
+
+```jsx
+import Grid, { useGridLayout } from '@bit.rhplus/ui.grid';
+
+const AdvancedGridComponent = () => {
+  const { accessToken } = useOidcAccessToken();
+  const [gridApi, setGridApi] = useState(null);
+  
+  // Přímé použití useGridLayout hook
+  // POZOR: columnDefs musí být array! Pokud používáte ColumnBuilder, zavolejte .build()
+  const columnDefsArray = columnDefs.build ? columnDefs.build() : columnDefs;
+  
+  const gridLayout = useGridLayout({
+    userKey: currentUser.id,
+    applicationName: 'Portal.App',
+    gridName: 'advanced-grid',
+    enabled: true,
+    autoSave: false, // Manuální ukládání
+    columnDefs: columnDefsArray,
+    accessToken: accessToken
+  });
+  
+  const handleSaveLayout = async () => {
+    try {
+      await gridLayout.saveLayout();
+      notification.success('Layout uložen');
+    } catch (error) {
+      notification.error('Chyba při ukládání layoutu');
+    }
+  };
+  
+  const handleResetLayout = async () => {
+    try {
+      await gridLayout.resetToDefault();
+      notification.info('Layout resetován na výchozí');
+    } catch (error) {
+      notification.error('Chyba při resetování layoutu');
+    }
+  };
+  
+  return (
+    <div>
+      {/* Ovládací panel */}
+      <div style={{ marginBottom: 16 }}>
+        <Button 
+          onClick={handleSaveLayout}
+          loading={gridLayout.isSaving}
+          disabled={!gridLayout.hasUnsavedChanges}
+        >
+          Uložit layout
+        </Button>
+        <Button onClick={handleResetLayout}>
+          Resetovat layout
+        </Button>
+        {gridLayout.hasUnsavedChanges && (
+          <span style={{ color: 'orange', marginLeft: 8 }}>
+            Neuložené změny
+          </span>
+        )}
+      </div>
+      
+      {/* Grid s manuálním layoutem */}
+      <Grid
+        columnDefs={columnDefs}
+        rowData={rowData}
+        
+        layoutEnabled={true}
+        gridName="advanced-grid"
+        userKey={currentUser.id}
+        autoSave={false}
+        accessToken={accessToken}
+        
+        onGridReady={(params) => {
+          setGridApi(params.api);
+          gridLayout.onGridReady(params);
+        }}
+        onColumnMoved={gridLayout.onColumnMoved}
+        onColumnResized={gridLayout.onColumnResized}
+        onColumnVisible={gridLayout.onColumnVisible}
+        onColumnPinned={gridLayout.onColumnPinned}
+      />
+    </div>
+  );
+};
+```
+
+## ⚙️ Konfigurace Props
+
+| Prop | Type | Default | Popis |
+|------|------|---------|--------|
+| `layoutEnabled` | `boolean` | `false` | Zapnout/vypnout layout management |
+| `gridName` | `string` | **povinné** | Unikátní název gridu pro identifikaci |
+| `applicationName` | `string` | `'Portal.App'` | Název aplikace |
+| `userKey` | `string` | **povinné** | Identifikátor uživatele |
+| `filterName` | `string` | `null` | Volitelný název filtru pro více layoutů |
+| `autoSave` | `boolean` | `true` | Automatické ukládání při změnách |
+| `autoSaveDelay` | `number` | `2000` | Zpoždění auto-save v milisekundách |
+| `accessToken` | `string` | `null` | Bearer token pro API autorizaci |
+
+## 📞 Callback Props
+
+| Callback | Parametry | Popis |
+|----------|-----------|--------|
+| `onLayoutLoaded` | `(fields, columnState)` | Voláno při úspěšném načtení layoutu |
+| `onLayoutSaved` | `(fields, columnState)` | Voláno při úspěšném uložení layoutu |
+| `onLayoutError` | `(error, context)` | Voláno při chybě v layout managementu |
+
+## 🛠️ useGridLayout Hook API
+
+```jsx
+const {
+  // State
+  isLoading,           // boolean - načítání dat
+  isSaving,            // boolean - ukládání layoutu
+  error,               // Error | null - poslední chyba
+  hasUnsavedChanges,   // boolean - neuložené změny
+  isInitialized,       // boolean - layout byl inicializován
+  
+  // AG-Grid event handlers
+  onGridReady,         // function - AG-Grid onGridReady handler
+  onColumnMoved,       // function - AG-Grid onColumnMoved handler
+  onColumnResized,     // function - AG-Grid onColumnResized handler
+  onColumnVisible,     // function - AG-Grid onColumnVisible handler
+  onColumnPinned,      // function - AG-Grid onColumnPinned handler
+  
+  // Manual actions
+  saveLayout,          // function - manuální uložení
+  resetToDefault,      // function - reset na výchozí layout
+  reloadLayout,        // function - znovunačtení z API
+  
+  // Data
+  savedFields,         // Array - uložená pole z API
+  
+  // Utils
+  gridLayoutApi        // Object - Grid Layout API utils
+} = useGridLayout(config);
+```
+
+## 🌍 Grid Context
+
+Když je layout management zapnutý, Grid komponenta poskytuje context s layout informacemi:
+
+```jsx
+// V AG-Grid cell rendereru nebo custom komponentě
+const MyCustomRenderer = (params) => {
+  const { gridLayout } = params.context || {};
+  
+  if (gridLayout) {
+    const { isLoading, isSaving, hasUnsavedChanges, saveLayout } = gridLayout;
+    
+    return (
+      <div>
+        {isSaving && <Spin size="small" />}
+        {hasUnsavedChanges && <Badge status="warning" />}
+        <Button size="small" onClick={saveLayout}>Save</Button>
+      </div>
+    );
+  }
+  
+  return <span>{params.value}</span>;
+};
+```
+
+## 📊 Datový model
+
+### Grid API Field Structure
+```javascript
+{
+  name: "customerName",                    // Název pole
+  displayName: "Název zákazníka",         // Zobrazovaný název
+  dataType: "string",                     // Datový typ
+  isVisible: true,                        // Viditelnost sloupce
+  width: 150,                             // Šířka sloupce
+  order: 0,                               // Pořadí sloupce
+  isPinned: null,                         // Připínání ('left', 'right', null)
+  userField: {                            // Personalizované nastavení
+    isVisible: true,
+    width: 200,
+    order: 1,
+    isPinned: "left"
+  }
+}
+```
+
+## 🎯 Best Practices
+
+1. **Unikátní gridName**: Každý grid musí mít unikátní název v rámci aplikace
+2. **UserKey konzistence**: Používej konzistentní identifikátor uživatele
+3. **Error handling**: Vždy implementuj `onLayoutError` callback
+4. **AccessToken**: Poskytni access token pro autorizaci API volání
+5. **Debouncing**: Pro časté změny používej vyšší `autoSaveDelay`
+6. **Testing**: Testuj s různými kombinacemi column definitions
+
+## 🚨 Troubleshooting
+
+### Layout se nenačítá
+- Zkontroluj, že `layoutEnabled={true}`
+- Ověř, že `userKey`, `gridName` a `accessToken` jsou správně nastaveny
+- Zkontroluj network tab pro API chyby
+
+### Auto-save nefunguje
+- Ověř, že `autoSave={true}` (default)
+- Zkontroluj, že se spouští AG-Grid eventy (onColumnMoved, onColumnResized)
+- Zkontroluj console pro chyby
+
+### Performance problémy
+- Zvyš `autoSaveDelay` pro méně časté ukládání
+- Použij `autoSave={false}` pro manuální kontrolu
+- Implementuj vlastní debouncing v parent komponentě
+
+## 📝 Changelog
+
+### v1.0.0
+- ✅ Základní grid layout management
+- ✅ Auto-save funkcionalita
+- ✅ Integration s Grid API službou
+- ✅ Error handling a recovery
+- ✅ Manual controls (save, reset, reload)

package/dist/index.d.ts

@@ -4,4 +4,5 @@ export * from "./tooltips";
 export { default as ColumnBuilder } from "./ColumnBuilder";
 export { default as ContextBuilder } from "./ContextBuilder";
 export * as utils from "./utils";
-declare function Grid(props: any): import("react/jsx-runtime").JSX.Element;
+declare const Grid: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/dist/index.js

@@ -1,23 +1,86 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable */
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useMemo, useImperativeHandle, forwardRef } from 'react';
 import AgGrid from '@bit.rhplus/ag-grid';
 // import { AgGridReact } from 'ag-grid-react';
 import classnames from 'classnames';
 import { OperationType, useSharedGrid } from '@bit.rhplus/shared-grid-form';
 import { AgGridColumns } from './AgGridColumns';
-const Grid = (props) => {
+import { useGridLayout, ColumnEditorModal } from '@bit.rhplus/ui.grid-layout';
+import { useOidcAccessToken } from "@axa-fr/react-oidc";
+const Grid = React.forwardRef((props, ref) => {
     const gridRef = React.useRef(null);
-    const { appearance = 'ag-theme-alpine', columnDefs, height = '100%', defaultColDef, gridOptions, rowClassRules, editableDefault = true, onRowDoubleClicked, } = props;
+    const { appearance = 'ag-theme-alpine', columnDefs, height = '100%', defaultColDef, gridOptions, rowClassRules, editableDefault = true, onRowDoubleClicked, 
+    // Grid Layout props
+    gridName, applicationName = 'Portal.App', userKey, filterName, layoutEnabled = true, autoSave = true, autoSaveDelay = 2000, accessToken, waitForSavedFields = false, // Nový prop pro odložené zobrazení columnDefs
+    onLayoutLoaded, onLayoutSaved, onLayoutError, } = props;
     const { items, onGridReady, addItem, updateItem, deleteItem, pendingChanges = [], isCellEditable, } = useSharedGrid();
     const [gridApi, setGridApi] = useState(null);
+    const [gridLayoutActivated, setGridLayoutActivated] = useState(false);
+    // Konverze columnDefs na array pro Grid Layout - memoizace pro prevenci nekonečné smyčky
+    const columnDefsArray = useMemo(() => {
+        if (Array.isArray(columnDefs)) {
+            return columnDefs;
+        }
+        // Pokud má build() metodu, je to pravděpodobně ColumnBuilder
+        if (columnDefs && typeof columnDefs.build === 'function') {
+            return columnDefs.build();
+        }
+        return [];
+    }, [columnDefs]);
+    // Grid Layout Management
+    const gridLayout = useGridLayout({
+        userKey,
+        applicationName,
+        gridName,
+        filterName,
+        enabled: layoutEnabled && !!userKey && !!gridName,
+        autoSave,
+        autoSaveDelay,
+        columnDefs: columnDefsArray,
+        accessToken,
+        waitForSavedFields, // Nový parametr pro odložené zobrazení
+        onLayoutLoaded,
+        onLayoutSaved,
+        onError: onLayoutError
+    });
     // Handler pro připravení gridu
-    const handleGridReady = useCallback((params) => {
-        setGridApi(params.api);
+    const handleGridReady = useCallback((event, options) => {
+        setGridApi(event.api);
+        // Modern AG-Grid (33+) fix: columnApi was moved to main api object
+        const normalizedEvent = {
+            ...event,
+            api: event.api,
+            columnApi: event.columnApi || event.api // fallback for modern AG-Grid versions
+        };
+        // Grid Layout initialization
+        if (layoutEnabled && gridLayout.onGridReady && !gridLayoutActivated) {
+            gridLayout.onGridReady(normalizedEvent);
+            setGridLayoutActivated(true);
+        }
         if (onGridReady) {
-            onGridReady(params);
+            onGridReady(event);
         }
-    }, [onGridReady]);
+    }, [onGridReady, layoutEnabled, gridLayout, userKey, gridName]);
+    // Effect pro delayed grid layout activation když se layoutEnabled změní na true
+    useEffect(() => {
+        // Pokud se layoutEnabled změnilo na true a máme již gridApi, aktivujeme grid layout
+        if (layoutEnabled && gridApi && gridLayout.onGridReady && !gridLayoutActivated) {
+            // Simulujeme onGridReady event pro grid layout
+            // Modern AG-Grid (33+) fix: columnApi functionality is in main api
+            const mockGridReadyParams = {
+                api: gridApi,
+                columnApi: gridApi.columnApi || gridApi // fallback for modern AG-Grid versions
+            };
+            try {
+                gridLayout.onGridReady(mockGridReadyParams);
+                setGridLayoutActivated(true);
+            }
+            catch (error) {
+                console.error('❌ UI/Grid: Error in delayed grid layout activation:', error);
+            }
+        }
+    }, [layoutEnabled, gridApi, gridLayout, userKey, gridName, gridLayoutActivated]);
     // Handler pro změnu hodnoty buňky
     const handleCellValueChanged = useCallback((params) => {
         const { data, colDef, newValue } = params;
@@ -119,17 +182,49 @@ const Grid = (props) => {
         isEditable: isCellEditable,
         onGridReady: handleGridReady,
         onCellValueChanged: handleCellValueChanged,
+        // Grid Layout event handlers - always attached, but with internal enabled check
+        onColumnMoved: gridLayout.onColumnMoved,
+        onDragStopped: gridLayout.onDragStopped, // Handler pro konec drag operace
+        onColumnResized: gridLayout.onColumnResized,
+        onColumnVisible: gridLayout.onColumnVisible,
+        onColumnPinned: gridLayout.onColumnPinned,
         getRowId: (params) => params.data.id,
+        // Grid Layout: maintain column order for proper column reordering
+        maintainColumnOrder: true,
         ...gridOptions,
         context: {
             componentParent: this,
+            // Grid Layout context
+            ...(layoutEnabled && {
+                gridLayout: {
+                    isLoading: gridLayout.isLoading,
+                    isSaving: gridLayout.isSaving,
+                    hasUnsavedChanges: gridLayout.hasUnsavedChanges,
+                    saveLayout: gridLayout.saveLayout,
+                    resetToDefault: gridLayout.resetToDefault,
+                    reloadLayout: gridLayout.reloadLayout,
+                    openColumnEditor: gridLayout.openColumnEditor // Pro přístup z AG-Grid kontextu
+                }
+            })
         },
         ...props,
         ref: gridRef,
-        columnDefs: AgGridColumns(columnDefs, props),
+        // Použijeme pre-transformované columnDefs pro waitForSavedFields mode
+        columnDefs: AgGridColumns(gridLayout.preTransformedColumnDefs || columnDefs, props),
     };
-    return (_jsx("div", { className: classnames(appearance), style: { height }, children: _jsx(AgGrid, { ...allGridProps }) }));
-};
+    useImperativeHandle(ref, () => ({
+        showColumnEditor: () => {
+            gridLayout.openColumnEditor();
+        }
+    }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: classnames(appearance), style: { height }, children: gridLayout.shouldShowColumns ? (_jsx(AgGrid, { ...allGridProps, onGridReady: handleGridReady })) : (_jsx("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100%',
+                        background: '#f5f5f5'
+                    }, children: _jsx("div", { children: "Na\u010D\u00EDt\u00E1n\u00ED sloupc\u016F..." }) })) }), _jsx(ColumnEditorModal, { open: gridLayout.isColumnEditorOpen, onCancel: gridLayout.closeColumnEditor, onSave: gridLayout.saveColumnEditorChanges, columns: gridLayout.columnDefs })] }));
+});
 export default Grid;
 export * from './enums';
 export { default as ColumnBuilder } from './ColumnBuilder';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":";AAAA,oBAAoB;AACpB,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,+CAA+C;AAC/C,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,EAAE;IACrB,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,EACJ,UAAU,GAAG,iBAAiB,EAC9B,UAAU,EACV,MAAM,GAAG,MAAM,EACf,aAAa,EACb,WAAW,EACX,aAAa,EACb,eAAe,GAAG,IAAI,EACtB,kBAAkB,GACnB,GAAG,KAAK,CAAC;IAGV,MAAM,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,UAAU,EACV,UAAU,EACV,cAAc,GAAG,EAAE,EACnB,cAAc,GACf,GAAG,aAAa,EAAE,CAAC;IAEpB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE7C,+BAA+B;IAC/B,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,MAAM,EAAE,EAAE;QACT,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACvB,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,CAAC,MAAM,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,kCAAkC;IAClC,MAAM,sBAAsB,GAAG,WAAW,CACxC,CAAC,MAAM,EAAE,EAAE;QACT,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;QAC1C,iCAAiC;QACjC,MAAM,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;QAC7C,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IAC/B,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,gCAAgC;IAChC,4DAA4D;IAC5D,+BAA+B;IAE/B,0EAA0E;IAC1E,2BAA2B;IAC3B,iDAAiD;IACjD,4CAA4C;IAC5C,uDAAuD;IACvD,oCAAoC;IACpC,aAAa;IACb,oCAAoC;IACpC,MAAM;IAEN,qFAAqF;IACrF,6CAA6C;IAC7C,+CAA+C;IAC/C,2BAA2B;IAC3B,mBAAmB;IACnB,iFAAiF;IACjF,yBAAyB;IACzB,2BAA2B;IAC3B,mCAAmC;IACnC,2BAA2B;IAC3B,4BAA4B;IAC5B,UAAU;IAEV,+EAA+E;IAC/E,0BAA0B;IAC1B,uCAAuC;IACvC,QAAQ;IACR,MAAM;IACN,6CAA6C;IAE7C,mCAAmC;IACnC,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,OAAO,GAAG,EAAE,EAAE,EAAE;QACf,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;QAEnC,gEAAgE;QAChE,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YAE1B,6CAA6C;YAC7C,UAAU,CAAC,GAAG,EAAE;gBACd,MAAM,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;gBAC9C,IAAI,OAAO,EAAE,CAAC;oBACZ,OAAO,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;gBACrC,CAAC;YACH,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EACD,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,CAC1B,CAAC;IAEF,+BAA+B;IAC/B,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,EAAE,EAAE,EAAE;QACL,UAAU,CAAC,EAAE,CAAC,CAAC;QAEf,qCAAqC;QACrC,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,OAAO,EAAE,KAAK,CAAC,CAC7B,CAAC;IAEF,mDAAmD;IACnD,MAAM,oBAAoB,GAAG;QAC3B,iBAAiB,EAAE,CAAC,MAAM,EAAE,EAAE;YAC5B,OAAO,CACL,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC9B,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,SAAS,KAAK,aAAa,CAAC,GAAG,CAC/D,CAAC;QACJ,CAAC;QACD,oBAAoB,EAAE,CAAC,MAAM,EAAE,EAAE;YAC/B,OAAO,CACL,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC9B,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,SAAS,KAAK,aAAa,CAAC,MAAM,CAClE,CAAC;QACJ,CAAC;QACD,oBAAoB,EAAE,CAAC,MAAM,EAAE,EAAE;YAC/B,OAAO,CACL,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC9B,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,SAAS,KAAK,aAAa,CAAC,MAAM,CAClE,CAAC;QACJ,CAAC;KACF,CAAC;IAEF,4BAA4B;IAC5B,MAAM,qBAAqB,GAAG,EAAE,GAAG,oBAAoB,EAAE,GAAG,aAAa,EAAE,CAAC;IAE5E,iDAAiD;IACjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,CAAC;YACZ,8DAA8D;YAC9D,OAAO,CAAC,MAAM,GAAG,YAAY,CAAC;YAC9B,OAAO,CAAC,SAAS,GAAG,eAAe,CAAC;QACtC,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;IAE7C,MAAM,YAAY,GAAG;QACnB,OAAO,EAAE,KAAK;QACd,aAAa,EAAE;YACb,qBAAqB,EAAE,IAAI;YAC3B,QAAQ,EAAE,eAAe;YACzB,SAAS,EAAE,IAAI;YACf,GAAG,aAAa;SACjB;QACD,eAAe,EAAE,CAAC,MAAM,EAAE,EAAE;YAC1B,OAAO,CACL,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC/B,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,SAAS,KAAK,aAAa,CAAC,MAAM,CAClE,CAAC;QACJ,CAAC;QACD,UAAU,EAAE,cAAc;QAC1B,WAAW,EAAE,eAAe;QAC5B,kBAAkB,EAAE,sBAAsB;QAC1C,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;QACpC,GAAG,WAAW;QACd,OAAO,EAAE;YACP,eAAe,EAAE,IAAI;SACtB;QACD,GAAG,KAAK;QACR,GAAG,EAAE,OAAO;QACZ,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,KAAK,CAAC;KAC7C,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAE,UAAU,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,YACvD,KAAC,MAAM,OAAK,YAAY,GAAI,GACxB,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":"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"}

package/index.jsx

@@ -1,202 +1,334 @@
-/* eslint-disable */
-import React, { useCallback, useEffect, useState } from 'react';
-import AgGrid from '@bit.rhplus/ag-grid';
-// import { AgGridReact } from 'ag-grid-react';
-import classnames from 'classnames';
-import { OperationType, useSharedGrid } from '@bit.rhplus/shared-grid-form';
-import { AgGridColumns } from './AgGridColumns';
-
-const Grid = (props) => {
-  const gridRef = React.useRef(null);
-  const {
-    appearance = 'ag-theme-alpine',
-    columnDefs,
-    height = '100%',
-    defaultColDef,
-    gridOptions,
-    rowClassRules,
-    editableDefault = true,
-    onRowDoubleClicked,
-  } = props;
-
-  
-  const {
-    items,
-    onGridReady,
-    addItem,
-    updateItem,
-    deleteItem,
-    pendingChanges = [],
-    isCellEditable,
-  } = useSharedGrid();
-
-  const [gridApi, setGridApi] = useState(null);
-
-  // Handler pro připravení gridu
-  const handleGridReady = useCallback(
-    (params) => {
-      setGridApi(params.api);
-      if (onGridReady) {
-        onGridReady(params);
-      }
-    },
-    [onGridReady]
-  );
-
-  // Handler pro změnu hodnoty buňky
-  const handleCellValueChanged = useCallback(
-    (params) => {
-      const { data, colDef, newValue } = params;
-      // Extrahujeme pouze změněné pole
-      const changes = { [colDef.field]: newValue };
-      updateItem(data.id, changes);
-    },
-    [updateItem]
-  );
-
-  // Handler pro dvojklik na buňku
-  // const handleCellDoubleClicked = useCallback((params) => {
-  //   const { colDef } = params;
-
-  //   // Pokud je buňka needitovatelná, vyvoláme událost onRowDoubleClicked
-  //   let isEditable = true;
-  //   if (typeof colDef.editable === 'function') {
-  //     isEditable = colDef.editable(params);
-  //   } else if (typeof colDef.editable === 'boolean') {
-  //     isEditable = colDef.editable;
-  //   } else {
-  //     isEditable = editableDefault;
-  //   }
-
-  //   // Pokud buňka není editovatelná a máme definován callback pro dvojklik na řádek
-  //   if (!isEditable && onRowDoubleClicked) {
-  //     // Simulujeme událost dvojkliku na řádek
-  //     onRowDoubleClicked({
-  //       ...params,
-  //       // Přidáme data, která by normálně obsahovala událost onRowDoubleClicked
-  //       api: params.api,
-  //       node: params.node,
-  //       rowIndex: params.rowIndex,
-  //       data: params.data,
-  //       event: params.event
-  //     });
-
-  //     // Zastavíme výchozí zpracování událostí, aby se nezobrazil editor buňky
-  //     if (params.event) {
-  //       params.event.preventDefault();
-  //     }
-  //   }
-  // }, [onRowDoubleClicked, editableDefault]);
-
-  // Handler pro přidání nového řádku
-  const handleAddRow = useCallback(
-    (rowData = {}) => {
-      const newItemId = addItem(rowData);
-
-      // Může být potřeba aktualizovat grid pro zobrazení nového řádku
-      if (gridApi) {
-        gridApi.setRowData(items);
-
-        // Volitelně: přejít na nově přidanou položku
-        setTimeout(() => {
-          const rowNode = gridApi.getRowNode(newItemId);
-          if (rowNode) {
-            gridApi.ensureNodeVisible(rowNode);
-          }
-        }, 100);
-      }
-
-      return newItemId;
-    },
-    [addItem, gridApi, items]
-  );
-
-  // Handler pro odstranění řádku
-  const handleDeleteRow = useCallback(
-    (id) => {
-      deleteItem(id);
-
-      // Může být potřeba aktualizovat grid
-      if (gridApi) {
-        gridApi.setRowData(items);
-      }
-    },
-    [deleteItem, gridApi, items]
-  );
-
-  // Vlastní CSS třídy pro řádky s čekajícími změnami
-  const defaultRowClassRules = {
-    'row-pending-add': (params) => {
-      return (
-        pendingChanges[params.data.id] &&
-        pendingChanges[params.data.id].operation === OperationType.ADD
-      );
-    },
-    'row-pending-update': (params) => {
-      return (
-        pendingChanges[params.data.id] &&
-        pendingChanges[params.data.id].operation === OperationType.UPDATE
-      );
-    },
-    'row-pending-delete': (params) => {
-      return (
-        pendingChanges[params.data.id] &&
-        pendingChanges[params.data.id].operation === OperationType.DELETE
-      );
-    },
-  };
-
-  // Kombinované rowClassRules
-  const combinedRowClassRules = { ...defaultRowClassRules, ...rowClassRules };
-
-  // Exportovat metody pro přidání/odstranění řádků
-  useEffect(() => {
-    if (gridApi) {
-      // Metody můžeme přidat přímo do gridApi pro použití z vnějšku
-      gridApi.addRow = handleAddRow;
-      gridApi.deleteRow = handleDeleteRow;
-    }
-  }, [gridApi, handleAddRow, handleDeleteRow]);
-
-  const allGridProps = {
-    rowData: items,
-    defaultColDef: {
-      enableCellChangeFlash: true,
-      editable: editableDefault,
-      resizable: true,
-      ...defaultColDef,
-    },
-    isRowSelectable: (params) => {
-      return (
-        !pendingChanges[params.data.id] ||
-        pendingChanges[params.data.id].operation !== OperationType.DELETE
-      );
-    },
-    isEditable: isCellEditable,
-    onGridReady: handleGridReady,
-    onCellValueChanged: handleCellValueChanged,
-    getRowId: (params) => params.data.id,
-    ...gridOptions,
-    context: {
-      componentParent: this,
-    },
-    ...props,
-    ref: gridRef,
-    columnDefs: AgGridColumns(columnDefs, props),
-  };
-
-  return (
-    <div className={classnames(appearance)} style={{ height }}>
-      <AgGrid {...allGridProps} />
-    </div>
-  );
-};
-
-export default Grid;
-export * from './enums';
-export { default as ColumnBuilder } from './ColumnBuilder';
-export { default as ContextBuilder } from './ContextBuilder';
-export * as utils from './utils';
-export * from './tooltips';
-
-/* eslint-enable */
+/* eslint-disable */
+import React, { useCallback, useEffect, useState, useMemo, useImperativeHandle, forwardRef } from 'react';
+import AgGrid from '@bit.rhplus/ag-grid';
+// import { AgGridReact } from 'ag-grid-react';
+import classnames from 'classnames';
+import { OperationType, useSharedGrid } from '@bit.rhplus/shared-grid-form';
+import { AgGridColumns } from './AgGridColumns';
+import { useGridLayout, ColumnEditorModal } from '@bit.rhplus/ui.grid-layout';
+import { useOidcAccessToken } from "@axa-fr/react-oidc";
+
+const Grid = React.forwardRef((props, ref) => {
+  const gridRef = React.useRef(null);
+  const {
+    appearance = 'ag-theme-alpine',
+    columnDefs,
+    height = '100%',
+    defaultColDef,
+    gridOptions,
+    rowClassRules,
+    editableDefault = true,
+    onRowDoubleClicked,
+    // Grid Layout props
+    gridName,
+    applicationName = 'Portal.App',
+    userKey,
+    filterName,
+    layoutEnabled = true,
+    autoSave = true,
+    autoSaveDelay = 2000,
+    accessToken,
+    waitForSavedFields = false, // Nový prop pro odložené zobrazení columnDefs
+    onLayoutLoaded,
+    onLayoutSaved,
+    onLayoutError,
+  } = props;
+
+  
+  const {
+    items,
+    onGridReady,
+    addItem,
+    updateItem,
+    deleteItem,
+    pendingChanges = [],
+    isCellEditable,
+  } = useSharedGrid();
+
+  const [gridApi, setGridApi] = useState(null);
+  const [gridLayoutActivated, setGridLayoutActivated] = useState(false);
+
+  // Konverze columnDefs na array pro Grid Layout - memoizace pro prevenci nekonečné smyčky
+  const columnDefsArray = useMemo(() => {
+    if (Array.isArray(columnDefs)) {
+      return columnDefs;
+    }
+    // Pokud má build() metodu, je to pravděpodobně ColumnBuilder
+    if (columnDefs && typeof columnDefs.build === 'function') {
+      return columnDefs.build();
+    }
+    return [];
+  }, [columnDefs]);
+
+  // Grid Layout Management
+  const gridLayout = useGridLayout({
+    userKey,
+    applicationName,
+    gridName,
+    filterName,
+    enabled: layoutEnabled && !!userKey && !!gridName,
+    autoSave,
+    autoSaveDelay,
+    columnDefs: columnDefsArray,
+    accessToken,
+    waitForSavedFields, // Nový parametr pro odložené zobrazení
+    onLayoutLoaded,
+    onLayoutSaved,
+    onError: onLayoutError
+  });
+
+  // Handler pro připravení gridu
+  const handleGridReady = useCallback(
+    (event, options) => {
+      setGridApi(event.api);
+      
+      // Modern AG-Grid (33+) fix: columnApi was moved to main api object
+      const normalizedEvent = {
+        ...event,
+        api: event.api,
+        columnApi: event.columnApi || event.api // fallback for modern AG-Grid versions
+      };
+      
+      // Grid Layout initialization
+      if (layoutEnabled && gridLayout.onGridReady && !gridLayoutActivated) {
+        gridLayout.onGridReady(normalizedEvent);
+        setGridLayoutActivated(true);
+      }
+      
+      if (onGridReady) {
+        onGridReady(event);
+      }
+    },
+    [onGridReady, layoutEnabled, gridLayout, userKey, gridName]
+  );
+
+  // Effect pro delayed grid layout activation když se layoutEnabled změní na true
+  useEffect(() => {
+    // Pokud se layoutEnabled změnilo na true a máme již gridApi, aktivujeme grid layout
+    if (layoutEnabled && gridApi && gridLayout.onGridReady && !gridLayoutActivated) {
+      // Simulujeme onGridReady event pro grid layout
+      // Modern AG-Grid (33+) fix: columnApi functionality is in main api
+      const mockGridReadyParams = {
+        api: gridApi,
+        columnApi: gridApi.columnApi || gridApi // fallback for modern AG-Grid versions
+      };
+      
+      try {
+        gridLayout.onGridReady(mockGridReadyParams);
+        setGridLayoutActivated(true);
+      } catch (error) {
+        console.error('❌ UI/Grid: Error in delayed grid layout activation:', error);
+      }
+    }
+  }, [layoutEnabled, gridApi, gridLayout, userKey, gridName, gridLayoutActivated]);
+
+  // Handler pro změnu hodnoty buňky
+  const handleCellValueChanged = useCallback(
+    (params) => {
+      const { data, colDef, newValue } = params;
+      // Extrahujeme pouze změněné pole
+      const changes = { [colDef.field]: newValue };
+      updateItem(data.id, changes);
+    },
+    [updateItem]
+  );
+
+  // Handler pro dvojklik na buňku
+  // const handleCellDoubleClicked = useCallback((params) => {
+  //   const { colDef } = params;
+
+  //   // Pokud je buňka needitovatelná, vyvoláme událost onRowDoubleClicked
+  //   let isEditable = true;
+  //   if (typeof colDef.editable === 'function') {
+  //     isEditable = colDef.editable(params);
+  //   } else if (typeof colDef.editable === 'boolean') {
+  //     isEditable = colDef.editable;
+  //   } else {
+  //     isEditable = editableDefault;
+  //   }
+
+  //   // Pokud buňka není editovatelná a máme definován callback pro dvojklik na řádek
+  //   if (!isEditable && onRowDoubleClicked) {
+  //     // Simulujeme událost dvojkliku na řádek
+  //     onRowDoubleClicked({
+  //       ...params,
+  //       // Přidáme data, která by normálně obsahovala událost onRowDoubleClicked
+  //       api: params.api,
+  //       node: params.node,
+  //       rowIndex: params.rowIndex,
+  //       data: params.data,
+  //       event: params.event
+  //     });
+
+  //     // Zastavíme výchozí zpracování událostí, aby se nezobrazil editor buňky
+  //     if (params.event) {
+  //       params.event.preventDefault();
+  //     }
+  //   }
+  // }, [onRowDoubleClicked, editableDefault]);
+
+  // Handler pro přidání nového řádku
+  const handleAddRow = useCallback(
+    (rowData = {}) => {
+      const newItemId = addItem(rowData);
+
+      // Může být potřeba aktualizovat grid pro zobrazení nového řádku
+      if (gridApi) {
+        gridApi.setRowData(items);
+
+        // Volitelně: přejít na nově přidanou položku
+        setTimeout(() => {
+          const rowNode = gridApi.getRowNode(newItemId);
+          if (rowNode) {
+            gridApi.ensureNodeVisible(rowNode);
+          }
+        }, 100);
+      }
+
+      return newItemId;
+    },
+    [addItem, gridApi, items]
+  );
+
+  // Handler pro odstranění řádku
+  const handleDeleteRow = useCallback(
+    (id) => {
+      deleteItem(id);
+
+      // Může být potřeba aktualizovat grid
+      if (gridApi) {
+        gridApi.setRowData(items);
+      }
+    },
+    [deleteItem, gridApi, items]
+  );
+
+  // Vlastní CSS třídy pro řádky s čekajícími změnami
+  const defaultRowClassRules = {
+    'row-pending-add': (params) => {
+      return (
+        pendingChanges[params.data.id] &&
+        pendingChanges[params.data.id].operation === OperationType.ADD
+      );
+    },
+    'row-pending-update': (params) => {
+      return (
+        pendingChanges[params.data.id] &&
+        pendingChanges[params.data.id].operation === OperationType.UPDATE
+      );
+    },
+    'row-pending-delete': (params) => {
+      return (
+        pendingChanges[params.data.id] &&
+        pendingChanges[params.data.id].operation === OperationType.DELETE
+      );
+    },
+  };
+
+  // Kombinované rowClassRules
+  const combinedRowClassRules = { ...defaultRowClassRules, ...rowClassRules };
+
+  // Exportovat metody pro přidání/odstranění řádků
+  useEffect(() => {
+    if (gridApi) {
+      // Metody můžeme přidat přímo do gridApi pro použití z vnějšku
+      gridApi.addRow = handleAddRow;
+      gridApi.deleteRow = handleDeleteRow;
+    }
+  }, [gridApi, handleAddRow, handleDeleteRow]);
+
+  const allGridProps = {
+    rowData: items,
+    defaultColDef: {
+      enableCellChangeFlash: true,
+      editable: editableDefault,
+      resizable: true,
+      ...defaultColDef,
+    },
+    isRowSelectable: (params) => {
+      return (
+        !pendingChanges[params.data.id] ||
+        pendingChanges[params.data.id].operation !== OperationType.DELETE
+      );
+    },
+    isEditable: isCellEditable,
+    onGridReady: handleGridReady,
+    onCellValueChanged: handleCellValueChanged,
+    // Grid Layout event handlers - always attached, but with internal enabled check
+    onColumnMoved: gridLayout.onColumnMoved,
+    onDragStopped: gridLayout.onDragStopped, // Handler pro konec drag operace
+    onColumnResized: gridLayout.onColumnResized,
+    onColumnVisible: gridLayout.onColumnVisible,
+    onColumnPinned: gridLayout.onColumnPinned,
+    getRowId: (params) => params.data.id,
+    // Grid Layout: maintain column order for proper column reordering
+    maintainColumnOrder: true,
+    ...gridOptions,
+    context: {
+      componentParent: this,
+      // Grid Layout context
+      ...(layoutEnabled && {
+        gridLayout: {
+          isLoading: gridLayout.isLoading,
+          isSaving: gridLayout.isSaving,
+          hasUnsavedChanges: gridLayout.hasUnsavedChanges,
+          saveLayout: gridLayout.saveLayout,
+          resetToDefault: gridLayout.resetToDefault,
+          reloadLayout: gridLayout.reloadLayout,
+          openColumnEditor: gridLayout.openColumnEditor // Pro přístup z AG-Grid kontextu
+        }
+      })
+    },
+    ...props,
+    ref: gridRef,
+    // Použijeme pre-transformované columnDefs pro waitForSavedFields mode
+    columnDefs: AgGridColumns(gridLayout.preTransformedColumnDefs || columnDefs, props),
+  };
+
+  useImperativeHandle(ref, () => ({
+    showColumnEditor: () => {
+      gridLayout.openColumnEditor();
+    }
+  }));
+
+  return (
+    <>
+      <div className={classnames(appearance)} style={{ height }}>
+        {gridLayout.shouldShowColumns ? (
+          <AgGrid 
+            {...allGridProps}
+            onGridReady={handleGridReady}
+          />
+        ) : (
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            alignItems: 'center', 
+            height: '100%',
+            background: '#f5f5f5'
+          }}>
+            <div>Načítání sloupců...</div>
+          </div>
+        )}
+      </div>
+      
+      {/* Column Editor Modal */}
+      <ColumnEditorModal
+        open={gridLayout.isColumnEditorOpen}
+        onCancel={gridLayout.closeColumnEditor}
+        onSave={gridLayout.saveColumnEditorChanges}
+        columns={gridLayout.columnDefs}
+      />
+    </>
+  );
+});
+
+export default Grid;
+export * from './enums';
+export { default as ColumnBuilder } from './ColumnBuilder';
+export { default as ContextBuilder } from './ContextBuilder';
+export * as utils from './utils';
+export * from './tooltips';
+// Grid Layout exports
+
+/* eslint-enable */

package/package.json

@@ -1,19 +1,21 @@
 {
   "name": "@bit.rhplus/ui.grid",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "homepage": "https://bit.cloud/remote-scope/ui/grid",
   "main": "dist/index.js",
   "componentId": {
     "scope": "remote-scope",
     "name": "ui/grid",
-    "version": "0.0.35"
+    "version": "0.0.36"
   },
   "dependencies": {
     "antd": "^5.20.6",
     "lucide-react": "^0.503.0",
+    "@axa-fr/react-oidc": "7.25.13",
     "classnames": "^2.5.1",
-    "@bit.rhplus/ag-grid": "0.0.30",
-    "@bit.rhplus/shared-grid-form": "0.0.7"
+    "@bit.rhplus/ag-grid": "0.0.31",
+    "@bit.rhplus/shared-grid-form": "0.0.7",
+    "@bit.rhplus/ui.grid-layout": "0.0.1"
   },
   "devDependencies": {
     "@teambit/react.react-env": "1.0.132"