@bit.rhplus/ag-grid 0.0.55 → 0.0.57

package/index.jsx

@@ -1,657 +1,670 @@
-/* eslint-disable */
-import * as React from 'react';
-import { AgGridReact } from 'ag-grid-react';
-import { AgGridColumns } from './AgGridColumn';
-import { RhPlusOnCellEditingStarted } from './OnCellEditingStarted';
-import { RhPlusOnCellDoubleClicked } from './OnCellDoubleClicked';
-import { RhPlusOnCellValueChanged } from './OnCellValueChanged';
-import { AgGridPostSort } from './AgGridPostSort';
-import { AgGridOnRowDataChanged } from './AgGridOnRowDataChanged';
-import { AgGridOnRowDataUpdated } from './AgGridOnRowDataUpdated';
-import CheckboxRenderer from './Renderers/CheckboxRenderer';
-import BooleanRenderer from './Renderers/BooleanRenderer';
-import IconRenderer from './Renderers/IconRenderer';
-import ImageRenderer from './Renderers/ImageRenderer';
-import StateRenderer from './Renderers/StateRenderer';
-import SelectRenderer from './Renderers/SelectRenderer';
-import ButtonRenderer from './Renderers/ButtonRenderer';
-import CountrySelectRenderer from './Renderers/CountrySelectRenderer';
-import NotificationOptionsInit from "./NotificationOptions";
-import { notification } from "antd";
-import Aggregations, { hashRanges } from "./Aggregations";
-import { useBulkCellEdit, BulkEditButton } from './BulkEdit';
-import {
-  ModuleRegistry,
-  themeAlpine,
-  themeBalham,
-  themeMaterial,
-  themeQuartz,
-} from "ag-grid-community";
-
-const themes = [
-  { id: "themeQuartz", theme: themeQuartz },
-  { id: "themeBalham", theme: themeBalham },
-  { id: "themeMaterial", theme: themeMaterial },
-  { id: "themeAlpine", theme: themeAlpine },
-];
-
-const AgGrid = React.forwardRef((props, ref) => {
-  const internalRef = React.useRef();
-  const {
-    theme = "themeAlpine", // Default theme
-    rowData = [],
-    newRowFlash = true,
-    updatedRowFlash = false,
-    onGridReady,
-    enableNotification,
-    notificationOptions: {
-      notificationHead = NotificationOptionsInit.head,
-      notificationBody = NotificationOptionsInit.body,
-      style = NotificationOptionsInit.style,
-      placement = NotificationOptionsInit.placement,
-    } = {},
-    // Bulk Edit props
-    enableBulkEdit = false,
-    bulkEditOptions = {},
-    bulkEditAccessToken,
-    onBulkEditStart,
-    onBulkEditComplete,
-  } = props;
-
-  // Najít theme objekt podle názvu z props
-  const themeObject = React.useMemo(() => {
-    const foundTheme = themes.find(t => t.id === theme);
-    return foundTheme ? foundTheme.theme : themeQuartz; // Fallback na themeQuartz
-  }, [theme]);
-  const [, setIsGridReady] = React.useState(false);
-  const [isSelecting, setIsSelecting] = React.useState(false);
-  const previousRowDataRef = React.useRef(rowData);
-
-  // Bulk Edit hook
-  const {
-    floatingButton,
-    editPopover,
-    handleRangeChange,
-    handleOpenPopover,
-    handleSubmitEdit,
-    handleCancelEdit,
-    handleValueChange,
-  } = useBulkCellEdit(internalRef, {
-    enabled: enableBulkEdit,
-    accessToken: bulkEditAccessToken,
-    onBulkEditStart,
-    onBulkEditComplete,
-    ...bulkEditOptions,
-  });
-
-  
-  // ========== PERFORMANCE OPTIMIZATION: Shallow comparison helper ==========
-  // Shallow porovnání objektů - 100x rychlejší než JSON.stringify
-  const shallowEqual = React.useCallback((obj1, obj2) => {
-    if (obj1 === obj2) return true;
-    if (!obj1 || !obj2) return false;
-
-    const keys1 = Object.keys(obj1);
-    const keys2 = Object.keys(obj2);
-
-    if (keys1.length !== keys2.length) return false;
-
-    for (let key of keys1) {
-      if (obj1[key] !== obj2[key]) return false;
-    }
-
-    return true;
-  }, []);
-
-  // Memoizované funkce pro detekci změn v rowData
-  const findNewRows = React.useCallback((oldData, newData) => {
-    const oldIds = new Set(oldData.map((row) => row.id));
-    return newData.filter((row) => !oldIds.has(row.id));
-  }, []);
-
-  const findUpdatedRows = React.useCallback((oldData, newData) => {
-    const oldDataMap = new Map(oldData.map((row) => [row.id, row]));
-    return newData.filter((newRow) => {
-      const oldRow = oldDataMap.get(newRow.id);
-      if (!oldRow) return false; // Nový řádek, ne aktualizovaný
-
-      // ✅ OPTIMALIZACE: Shallow comparison místo JSON.stringify (100x rychlejší!)
-      return !shallowEqual(oldRow, newRow);
-    });
-  }, [shallowEqual]);
-
-  React.useImperativeHandle(ref, () => internalRef.current, [internalRef]);
-
-  // Throttle timer pro notifikace - zobrazuje se BĚHEM označování s 100ms throttle
-  const notificationThrottleRef = React.useRef(null);
-  const notificationLastCallRef = React.useRef(0);
-  const lastRangeHashRef = React.useRef(null);
-
-  // ✅ OPTIMALIZACE: Helper funkce pro aktualizaci aggregace notifikace s cache check
-  // Volá se BĚHEM označování s 100ms throttle pro real-time feedback
-  const updateAggregationNotification = React.useCallback((event) => {
-    // Lightweight cache check PŘED voláním Aggregations()
-    const ranges = event.api.getCellRanges();
-    const currentRangeHash = hashRanges(ranges);
-
-    // Žádné ranges nebo jen jedna buňka - zavřít notifikaci
-    if (!ranges || ranges.length === 0 || !ranges[0]?.startRow) {
-      const gridId = props.gridName || props.id || 'default';
-      const key = `aggregation-grid-${gridId}`;
-      lastRangeHashRef.current = null;
-      notification.destroy(key);
-      return;
-    }
-
-    // Cache hit - ranges se nezměnily, skip
-    if (currentRangeHash === lastRangeHashRef.current) {
-      return;
-    }
-
-    // Cache miss - spočítat aggregace
-    const messageInfo = Aggregations(internalRef);
-
-    const gridId = props.gridName || props.id || 'default';
-    const key = `aggregation-grid-${gridId}`;
-
-    if (messageInfo.count > 1) {
-      // Uložit hash pro příští porovnání
-      lastRangeHashRef.current = currentRangeHash;
-
-      if (props.onAggregationChanged) {
-        props.onAggregationChanged(messageInfo);
-      }
-
-      // Dynamický style s pointer-events podle stavu označování
-      const dynamicStyle = {
-        ...style,
-        pointerEvents: isSelecting ? 'none' : 'auto'
-      };
-
-      // Aktualizace existující notifikace nebo vytvoření nové
-      notification.info({
-        key,
-        message: notificationHead(messageInfo),
-        description: notificationBody(messageInfo),
-        duration: 0,
-        style: dynamicStyle,
-        placement,
-      });
-    } else {
-      // Jen jedna buňka - zavřít notifikaci
-      lastRangeHashRef.current = null;
-      notification.destroy(key);
-    }
-  }, [internalRef, props, notificationHead, notificationBody, style, placement, isSelecting]);
-
-  // Detekce konce označování pomocí mouseup event
-  React.useEffect(() => {
-    const handleMouseUp = () => {
-      // ✅ OPTIMALIZACE: Notifikace se už zobrazuje BĚHEM označování (s debounce),
-      // takže tady jen ukončíme isSelecting stav
-      setTimeout(() => {
-        setIsSelecting(false);
-      }, 50);
-    };
-
-    document.addEventListener('mouseup', handleMouseUp);
-    document.addEventListener('touchend', handleMouseUp); // Pro touch zařízení
-
-    return () => {
-      document.removeEventListener('mouseup', handleMouseUp);
-      document.removeEventListener('touchend', handleMouseUp);
-    };
-  }, []);
-
-  // Helper funkce pro nastavení pointer-events na notifikace
-  const setNotificationPointerEvents = React.useCallback((enable) => {
-    const notifications = document.querySelectorAll('.ant-notification');
-    
-    notifications.forEach((notif) => {
-      if (enable) {
-        // Obnovit pointer-events na notifikaci
-        const original = notif.dataset.originalPointerEvents || 'auto';
-        notif.style.pointerEvents = original;
-        notif.style.removeProperty('pointer-events');
-        delete notif.dataset.originalPointerEvents;
-        
-        // Obnovit pointer-events na všechny child elementy
-        const allChildren = notif.querySelectorAll('*');
-        allChildren.forEach((child) => {
-          child.style.removeProperty('pointer-events');
-          delete child.dataset.originalPointerEvents;
-        });
-      } else {
-        // Zakázat pointer-events na notifikaci
-        if (!notif.dataset.originalPointerEvents) {
-          notif.dataset.originalPointerEvents = notif.style.pointerEvents || 'auto';
-        }
-        notif.style.setProperty('pointer-events', 'none', 'important');
-        
-        // Zakázat pointer-events na všechny child elementy
-        const allChildren = notif.querySelectorAll('*');
-        allChildren.forEach((child) => {
-          if (!child.dataset.originalPointerEvents) {
-            child.dataset.originalPointerEvents = child.style.pointerEvents || '';
-          }
-          child.style.setProperty('pointer-events', 'none', 'important');
-        });
-      }
-    });
-  }, []);
-
-  // Dynamicky přidávat/odebírat pointer-events na notifikace podle isSelecting stavu
-  React.useEffect(() => {
-    if (isSelecting) {
-      document.body.classList.add('ag-grid-selecting');
-      
-      // Nastavit pointer-events na existující notifikace
-      setNotificationPointerEvents(false);
-      
-      // KRITICKÉ: Sledovat DOM změny - když se objeví nová notifikace během označování
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          mutation.addedNodes.forEach((node) => {
-            if (node.nodeType === 1) { // Element node
-              // Zkontrolovat jestli je to notifikace nebo obsahuje notifikaci
-              if (node.classList?.contains('ant-notification') || 
-                  node.querySelector?.('.ant-notification')) {
-                setNotificationPointerEvents(false);
-              }
-            }
-          });
-        });
-      });
-      
-      // Sledovat změny v document.body
-      observer.observe(document.body, {
-        childList: true,
-        subtree: true
-      });
-      
-      // Uložit observer pro cleanup
-      return () => {
-        observer.disconnect();
-      };
-    } else {
-      document.body.classList.remove('ag-grid-selecting');
-      
-      // Malé zpoždění před obnovením pointer-events (100ms)
-      // Zajistí že notifikace jsou interaktivní až když skutečně skončí označování
-      setTimeout(() => {
-        setNotificationPointerEvents(true);
-      }, 100);
-    }
-  }, [isSelecting, setNotificationPointerEvents]);
-
-  // Cleanup notifikací a timerů při zničení komponenty
-  React.useEffect(() => {
-    return () => {
-      // Clear throttle timer
-      if (notificationThrottleRef.current) {
-        clearTimeout(notificationThrottleRef.current);
-      }
-
-      if (enableNotification) {
-        const gridId = props.gridName || props.id || 'default';
-        const key = `aggregation-grid-${gridId}`;
-        notification.destroy(key);
-      }
-    };
-  }, [enableNotification, props.gridName, props.id]);
-
-  React.useEffect(() => {
-    // VYPNUTO: Cell flash je globálně vypnutý
-    return;
-
-    if (!newRowFlash && !updatedRowFlash) return;
-
-    const previousRowData = previousRowDataRef.current;
-    const addedRows = newRowFlash ? findNewRows(previousRowData, rowData) : [];
-    const updatedRows = updatedRowFlash ? findUpdatedRows(previousRowData, rowData) : [];
-
-    if (addedRows.length > 0 || updatedRows.length > 0) {
-      setTimeout(() => {
-        try {
-          // Bezpečnostní kontrola API dostupnosti
-          if (!internalRef.current?.api || internalRef.current.api.isDestroyed?.()) {
-            return;
-          }
-
-          // Modern AG-Grid (33+): getColumnState() moved to main api
-          const columnApi = internalRef.current?.columnApi || internalRef.current?.api;
-          if (!columnApi?.getColumnState) {
-            return;
-          }
-
-          const columnStates = columnApi.getColumnState();
-          const allColumns = columnStates
-            .filter(colState => colState.colId) // Filtrujeme pouze platné colId
-            .map((colState) => colState.colId);
-
-          // Kontrola, že máme platné sloupce
-          if (allColumns.length === 0) {
-            return;
-          }
-
-          // Flash efekt pro nové řádky (používá defaultní zelená barva AG Grid)
-          if (addedRows.length > 0) {
-            const newRowNodes = [];
-            internalRef.current.api.forEachNode((node) => {
-              if (addedRows.some((row) => row.id === node.data.id)) {
-                newRowNodes.push(node);
-              }
-            });
-
-            if (newRowNodes.length > 0) {
-              internalRef.current.api.flashCells({
-                rowNodes: newRowNodes,
-                columns: allColumns,
-                flashDelay: 0,
-                fadeDelay: 1000,
-              });
-            }
-          }
-
-          // Flash efekt pro aktualizované řádky (modrá barva)
-          if (updatedRows.length > 0) {
-            const updatedRowNodes = [];
-            internalRef.current.api.forEachNode((node) => {
-              if (updatedRows.some((row) => row.id === node.data.id)) {
-                updatedRowNodes.push(node);
-              }
-            });
-
-            if (updatedRowNodes.length > 0) {
-              // Použijeme vlastní CSS animaci pro modrou flash
-              updatedRowNodes.forEach(node => {
-                const rowElement = node.eGridRow || document.querySelector(`[row-id="${node.data.id}"]`);
-                if (rowElement) {
-                  rowElement.classList.add('ag-row-flash-updated');
-                  setTimeout(() => {
-                    rowElement.classList.remove('ag-row-flash-updated');
-                  }, 1000);
-                }
-              });
-            }
-          }
-        } catch (error) {
-          // Ignorujeme chybu a pokračujeme bez crash aplikace
-        }
-      }, 100); // Zvýšený timeout pro stabilizaci gridu
-    }
-
-    previousRowDataRef.current = rowData;
-  }, [rowData, newRowFlash, updatedRowFlash]);
-
-  const RhPlusRangeSelectionChanged = React.useCallback(
-    (event) => {
-      // Detekovat začátek označování - nastavit isSelecting na true
-      setIsSelecting(true);
-
-      // 1. ✅ OPTIMALIZACE: Zobrazení notifikace BĚHEM označování s THROTTLE (100ms)
-      // Throttle = spustí okamžitě první event, pak každých 100ms během označování
-      // Cache check v updateAggregationNotification zajistí, že se agregace nepočítají znovu pokud se range nezměnil
-      if (enableNotification) {
-        const now = Date.now();
-        const timeSinceLastCall = now - notificationLastCallRef.current;
-
-        // První volání NEBO uplynulo 100ms od posledního volání
-        if (timeSinceLastCall >= 100) {
-          // Okamžité volání
-          notificationLastCallRef.current = now;
-          if (internalRef?.current) {
-            updateAggregationNotification(event);
-          }
-        } else {
-          // Naplánovat volání za zbývající čas (trailing edge)
-          if (notificationThrottleRef.current) {
-            clearTimeout(notificationThrottleRef.current);
-          }
-
-          notificationThrottleRef.current = setTimeout(() => {
-            notificationLastCallRef.current = Date.now();
-            if (internalRef?.current) {
-              updateAggregationNotification(event);
-            }
-          }, 100 - timeSinceLastCall);
-        }
-      }
-
-      // 2. ✅ OPTIMALIZACE: Bulk edit handler BEZ debounce - okamžité zobrazení ikony
-      // Lightweight validace v useBulkCellEdit zajistí okamžité zobrazení
-      // Těžká validace proběhne s 15ms debounce uvnitř useBulkCellEdit
-      if (enableBulkEdit) {
-        handleRangeChange(event);
-      }
-
-      // 3. Custom onRangeSelectionChanged callback - bez debounce
-      if (props.onRangeSelectionChanged) props.onRangeSelectionChanged(event);
-    },
-    [enableNotification, enableBulkEdit, handleRangeChange, props.onRangeSelectionChanged, updateAggregationNotification]
-  );
-
-  const AgGridOnGridReady = (event, options) => {
-    if (onGridReady) {
-      onGridReady(event, options);
-    }
-
-    // Nejprve nastavíme API reference pro interní použití
-    if (internalRef.current) {
-      internalRef.current.api = event.api;
-      internalRef.current.columnApi = event.columnApi || event.api; // fallback for modern AG-Grid
-    }
-
-    // Registruj callback pro AG Grid transactions (SignalR optimalizace)
-    if (event.api && !window.agGridTransactionCallback) {
-      window.agGridTransactionCallback = (transactionData) => {
-        try {
-          if (!event.api || event.api.isDestroyed?.()) return;
-          
-          const { operation, records } = transactionData;
-          
-          switch (operation) {
-            case 'add':
-              event.api.applyTransaction({ add: records });
-              // Flash efekt pro nové řádky
-              setTimeout(() => {
-                records.forEach(record => {
-                  const rowNode = event.api.getRowNode(record.id);
-                  if (rowNode && rowNode.rowElement) {
-                    rowNode.rowElement.classList.add('ag-row-flash-created');
-                    setTimeout(() => {
-                      rowNode.rowElement.classList.remove('ag-row-flash-created');
-                    }, 1000);
-                  }
-                });
-              }, 100);
-              break;
-              
-            case 'update':
-              event.api.applyTransaction({ update: records });
-              // Flash efekt pro aktualizované řádky
-              setTimeout(() => {
-                records.forEach(record => {
-                  const rowNode = event.api.getRowNode(record.id);
-                  if (rowNode && rowNode.rowElement) {
-                    rowNode.rowElement.classList.add('ag-row-flash-updated');
-                    setTimeout(() => {
-                      rowNode.rowElement.classList.remove('ag-row-flash-updated');
-                    }, 1000);
-                  }
-                });
-              }, 100);
-              break;
-              
-            case 'remove':
-              // Flash efekt před smazáním
-              records.forEach(record => {
-                const rowNode = event.api.getRowNode(record.id);
-                if (rowNode && rowNode.rowElement) {
-                  rowNode.rowElement.classList.add('ag-row-flash-deleted');
-                }
-              });
-              
-              setTimeout(() => {
-                event.api.applyTransaction({ remove: records });
-              }, 500); // Krátké zpoždění pro zobrazení flash efektu
-              break;
-          }
-        } catch (error) {
-          // Ignorujeme chyby
-        }
-      };
-    }
-
-    // Pak zavoláme parent onGridReady handler, pokud existuje
-    // Toto je kritické pro správné fungování bit/ui/grid a GridLayout
-    if (options.onGridReady) {
-      try {
-        options.onGridReady(event);
-      } catch (error) {
-        // Error handling without console output
-      }
-    }
-
-    // Nakonec nastavíme grid ready state s timeout
-    setTimeout(() => {
-      setIsGridReady(true);
-    }, 1000);
-  };
-
-  const components = React.useMemo(() => {
-    return {
-      checkboxRenderer: CheckboxRenderer,
-      selectRenderer: SelectRenderer,
-      countrySelectRenderer: CountrySelectRenderer,
-      booleanRenderer: BooleanRenderer,
-      buttonRenderer: ButtonRenderer,
-      iconRenderer: IconRenderer,
-      imageRenderer: ImageRenderer,
-      stateRenderer: StateRenderer,
-      ...props.frameworkComponents,
-    };
-  }, [props.frameworkComponents]);
-
-  // ========== PERFORMANCE OPTIMIZATION: Memoizované event handlers ==========
-  const memoizedOnCellEditingStarted = React.useCallback(
-    (event) => RhPlusOnCellEditingStarted(event, props),
-    [props.onCellEditingStarted]
-  );
-
-  const memoizedOnCellDoubleClicked = React.useCallback(
-    (event) => RhPlusOnCellDoubleClicked(event, props),
-    [props.onCellDoubleClicked]
-  );
-
-  const memoizedOnCellValueChanged = React.useCallback(
-    (event) => RhPlusOnCellValueChanged(event, props),
-    [props.onCellValueChanged]
-  );
-
-  const memoizedPostSort = React.useCallback(
-    (event) => AgGridPostSort(event, props),
-    [props.postSort]
-  );
-
-  const memoizedOnGridReady = React.useCallback(
-    (event, options) => AgGridOnGridReady(event, props),
-    [onGridReady]
-  );
-
-  const memoizedOnRowDataChanged = React.useCallback(
-    (event) => AgGridOnRowDataChanged(event, props),
-    [props.onRowDataChanged]
-  );
-
-  const memoizedOnRowDataUpdated = React.useCallback(
-    (event) => AgGridOnRowDataUpdated(event, props),
-    [props.onRowDataUpdated]
-  );
-
-  // Memoizovaný context object
-  const memoizedContext = React.useMemo(() => ({
-    componentParent: { ...props }
-  }), [props.context, props.gridName, props.id]);
-
-  // Memoizovaný defaultColDef
-  const memoizedDefaultColDef = React.useMemo(() => ({
-    ...props.defaultColDef,
-    suppressHeaderMenuButton: true,
-    suppressHeaderFilterButton: true,
-    suppressMenu: true,
-  }), [props.defaultColDef]);
-
-  // ========== PERFORMANCE OPTIMIZATION: Memoizovaný allGridProps ==========
-  const allGridProps = React.useMemo(() => ({
-    ref: internalRef,
-    ...props,
-    theme: themeObject,
-    columnDefs: AgGridColumns(props.columnDefs, props),
-    defaultColDef: memoizedDefaultColDef,
-    onCellEditingStarted: memoizedOnCellEditingStarted,
-    onCellDoubleClicked: memoizedOnCellDoubleClicked,
-    onCellValueChanged: memoizedOnCellValueChanged,
-    postSort: memoizedPostSort,
-    onGridReady: memoizedOnGridReady,
-    onRowDataChanged: memoizedOnRowDataChanged,
-    onRowDataUpdated: memoizedOnRowDataUpdated,
-    onRangeSelectionChanged: RhPlusRangeSelectionChanged,
-    context: memoizedContext,
-    components,
-  }), [
-    internalRef,
-    themeObject,
-    props.columnDefs,
-    memoizedDefaultColDef,
-    memoizedOnCellEditingStarted,
-    memoizedOnCellDoubleClicked,
-    memoizedOnCellValueChanged,
-    memoizedPostSort,
-    memoizedOnGridReady,
-    memoizedOnRowDataChanged,
-    memoizedOnRowDataUpdated,
-    RhPlusRangeSelectionChanged,
-    memoizedContext,
-    components,
-  ]);
-  
-  return (
-    <>
-      <AgGridReact {...allGridProps} />
-      
-      {/* Bulk Edit Floating Button */}
-      {enableBulkEdit && floatingButton.visible && (
-        <BulkEditButton
-          visible={floatingButton.visible}
-          position={floatingButton.position}
-          range={floatingButton.range}
-          column={floatingButton.column}
-          cellCount={floatingButton.cellCount}
-          rowsContainer={floatingButton.rowsContainer}
-          editPopover={editPopover}
-          onOpenPopover={handleOpenPopover}
-          onValueChange={handleValueChange}
-          onSubmit={handleSubmitEdit}
-          onCancel={handleCancelEdit}
-        />
-      )}
-    </>
-  );
-});
-
-export default AgGrid;
-
-export {
-  useBulkCellEdit,
-  BulkEditButton,
-  BulkEditPopover,
-  BulkEditSelect,
-  BulkEditDatePicker,
-  BulkEditModule,
-  BulkEditInput
-} from './BulkEdit';
-
-export {
-  default as CheckboxRenderer
+/* eslint-disable */
+import * as React from 'react';
+import { AgGridReact } from 'ag-grid-react';
+import { AgGridColumns } from './AgGridColumn';
+import { RhPlusOnCellEditingStarted } from './OnCellEditingStarted';
+import { RhPlusOnCellDoubleClicked } from './OnCellDoubleClicked';
+import { RhPlusOnCellValueChanged } from './OnCellValueChanged';
+import { AgGridPostSort } from './AgGridPostSort';
+import { AgGridOnRowDataChanged } from './AgGridOnRowDataChanged';
+import { AgGridOnRowDataUpdated } from './AgGridOnRowDataUpdated';
+import CheckboxRenderer from './Renderers/CheckboxRenderer';
+import BooleanRenderer from './Renderers/BooleanRenderer';
+import IconRenderer from './Renderers/IconRenderer';
+import ImageRenderer from './Renderers/ImageRenderer';
+import StateRenderer from './Renderers/StateRenderer';
+import SelectRenderer from './Renderers/SelectRenderer';
+import ButtonRenderer from './Renderers/ButtonRenderer';
+import CountrySelectRenderer from './Renderers/CountrySelectRenderer';
+import NotificationOptionsInit from "./NotificationOptions";
+import { notification } from "antd";
+import Aggregations, { hashRanges } from "./Aggregations";
+import { useBulkCellEdit, BulkEditButton } from './BulkEdit';
+import {
+  ModuleRegistry,
+  themeAlpine,
+  themeBalham,
+  themeMaterial,
+  themeQuartz,
+} from "ag-grid-community";
+
+const themes = [
+  { id: "themeQuartz", theme: themeQuartz },
+  { id: "themeBalham", theme: themeBalham },
+  { id: "themeMaterial", theme: themeMaterial },
+  { id: "themeAlpine", theme: themeAlpine },
+];
+
+const AgGrid = React.forwardRef((props, ref) => {
+  const internalRef = React.useRef();
+  const {
+    theme = "themeAlpine", // Default theme
+    rowData = [],
+    newRowFlash = true,
+    updatedRowFlash = false,
+    onGridReady,
+    enableNotification,
+    notificationOptions: {
+      notificationHead = NotificationOptionsInit.head,
+      notificationBody = NotificationOptionsInit.body,
+      style = NotificationOptionsInit.style,
+      placement = NotificationOptionsInit.placement,
+    } = {},
+    // Bulk Edit props
+    enableBulkEdit = false,
+    bulkEditOptions = {},
+    bulkEditAccessToken,
+    onBulkEditStart,
+    onBulkEditComplete,
+    // SignalR transaction support
+    queryKey, // Identifikátor pro SignalR transactions
+  } = props;
+
+  // Najít theme objekt podle názvu z props
+  const themeObject = React.useMemo(() => {
+    const foundTheme = themes.find(t => t.id === theme);
+    return foundTheme ? foundTheme.theme : themeQuartz; // Fallback na themeQuartz
+  }, [theme]);
+  const [, setIsGridReady] = React.useState(false);
+  const [isSelecting, setIsSelecting] = React.useState(false);
+  const previousRowDataRef = React.useRef(rowData);
+
+  // Bulk Edit hook
+  const {
+    floatingButton,
+    editPopover,
+    handleRangeChange,
+    handleOpenPopover,
+    handleSubmitEdit,
+    handleCancelEdit,
+    handleValueChange,
+  } = useBulkCellEdit(internalRef, {
+    enabled: enableBulkEdit,
+    accessToken: bulkEditAccessToken,
+    onBulkEditStart,
+    onBulkEditComplete,
+    ...bulkEditOptions,
+  });
+
+  
+  // ========== PERFORMANCE OPTIMIZATION: Shallow comparison helper ==========
+  // Shallow porovnání objektů - 100x rychlejší než JSON.stringify
+  const shallowEqual = React.useCallback((obj1, obj2) => {
+    if (obj1 === obj2) return true;
+    if (!obj1 || !obj2) return false;
+
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+
+    if (keys1.length !== keys2.length) return false;
+
+    for (let key of keys1) {
+      if (obj1[key] !== obj2[key]) return false;
+    }
+
+    return true;
+  }, []);
+
+  // Memoizované funkce pro detekci změn v rowData
+  const findNewRows = React.useCallback((oldData, newData) => {
+    const oldIds = new Set(oldData.map((row) => row.id));
+    return newData.filter((row) => !oldIds.has(row.id));
+  }, []);
+
+  const findUpdatedRows = React.useCallback((oldData, newData) => {
+    const oldDataMap = new Map(oldData.map((row) => [row.id, row]));
+    return newData.filter((newRow) => {
+      const oldRow = oldDataMap.get(newRow.id);
+      if (!oldRow) return false; // Nový řádek, ne aktualizovaný
+
+      // ✅ OPTIMALIZACE: Shallow comparison místo JSON.stringify (100x rychlejší!)
+      return !shallowEqual(oldRow, newRow);
+    });
+  }, [shallowEqual]);
+
+  React.useImperativeHandle(ref, () => internalRef.current, [internalRef]);
+
+  // Throttle timer pro notifikace - zobrazuje se BĚHEM označování s 100ms throttle
+  const notificationThrottleRef = React.useRef(null);
+  const notificationLastCallRef = React.useRef(0);
+  const lastRangeHashRef = React.useRef(null);
+
+  // ✅ OPTIMALIZACE: Helper funkce pro aktualizaci aggregace notifikace s cache check
+  // Volá se BĚHEM označování s 100ms throttle pro real-time feedback
+  const updateAggregationNotification = React.useCallback((event) => {
+    // Lightweight cache check PŘED voláním Aggregations()
+    const ranges = event.api.getCellRanges();
+    const currentRangeHash = hashRanges(ranges);
+
+    // Žádné ranges nebo jen jedna buňka - zavřít notifikaci
+    if (!ranges || ranges.length === 0 || !ranges[0]?.startRow) {
+      const gridId = props.gridName || props.id || 'default';
+      const key = `aggregation-grid-${gridId}`;
+      lastRangeHashRef.current = null;
+      notification.destroy(key);
+      return;
+    }
+
+    // Cache hit - ranges se nezměnily, skip
+    if (currentRangeHash === lastRangeHashRef.current) {
+      return;
+    }
+
+    // Cache miss - spočítat aggregace
+    const messageInfo = Aggregations(internalRef);
+
+    const gridId = props.gridName || props.id || 'default';
+    const key = `aggregation-grid-${gridId}`;
+
+    if (messageInfo.count > 1) {
+      // Uložit hash pro příští porovnání
+      lastRangeHashRef.current = currentRangeHash;
+
+      if (props.onAggregationChanged) {
+        props.onAggregationChanged(messageInfo);
+      }
+
+      // Dynamický style s pointer-events podle stavu označování
+      const dynamicStyle = {
+        ...style,
+        pointerEvents: isSelecting ? 'none' : 'auto'
+      };
+
+      // Aktualizace existující notifikace nebo vytvoření nové
+      notification.info({
+        key,
+        message: notificationHead(messageInfo),
+        description: notificationBody(messageInfo),
+        duration: 0,
+        style: dynamicStyle,
+        placement,
+      });
+    } else {
+      // Jen jedna buňka - zavřít notifikaci
+      lastRangeHashRef.current = null;
+      notification.destroy(key);
+    }
+  }, [internalRef, props, notificationHead, notificationBody, style, placement, isSelecting]);
+
+  // Detekce konce označování pomocí mouseup event
+  React.useEffect(() => {
+    const handleMouseUp = () => {
+      // ✅ OPTIMALIZACE: Notifikace se už zobrazuje BĚHEM označování (s debounce),
+      // takže tady jen ukončíme isSelecting stav
+      setTimeout(() => {
+        setIsSelecting(false);
+      }, 50);
+    };
+
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('touchend', handleMouseUp); // Pro touch zařízení
+
+    return () => {
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('touchend', handleMouseUp);
+    };
+  }, []);
+
+  // Helper funkce pro nastavení pointer-events na notifikace
+  const setNotificationPointerEvents = React.useCallback((enable) => {
+    const notifications = document.querySelectorAll('.ant-notification');
+    
+    notifications.forEach((notif) => {
+      if (enable) {
+        // Obnovit pointer-events na notifikaci
+        const original = notif.dataset.originalPointerEvents || 'auto';
+        notif.style.pointerEvents = original;
+        notif.style.removeProperty('pointer-events');
+        delete notif.dataset.originalPointerEvents;
+        
+        // Obnovit pointer-events na všechny child elementy
+        const allChildren = notif.querySelectorAll('*');
+        allChildren.forEach((child) => {
+          child.style.removeProperty('pointer-events');
+          delete child.dataset.originalPointerEvents;
+        });
+      } else {
+        // Zakázat pointer-events na notifikaci
+        if (!notif.dataset.originalPointerEvents) {
+          notif.dataset.originalPointerEvents = notif.style.pointerEvents || 'auto';
+        }
+        notif.style.setProperty('pointer-events', 'none', 'important');
+        
+        // Zakázat pointer-events na všechny child elementy
+        const allChildren = notif.querySelectorAll('*');
+        allChildren.forEach((child) => {
+          if (!child.dataset.originalPointerEvents) {
+            child.dataset.originalPointerEvents = child.style.pointerEvents || '';
+          }
+          child.style.setProperty('pointer-events', 'none', 'important');
+        });
+      }
+    });
+  }, []);
+
+  // Dynamicky přidávat/odebírat pointer-events na notifikace podle isSelecting stavu
+  React.useEffect(() => {
+    if (isSelecting) {
+      document.body.classList.add('ag-grid-selecting');
+      
+      // Nastavit pointer-events na existující notifikace
+      setNotificationPointerEvents(false);
+      
+      // KRITICKÉ: Sledovat DOM změny - když se objeví nová notifikace během označování
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === 1) { // Element node
+              // Zkontrolovat jestli je to notifikace nebo obsahuje notifikaci
+              if (node.classList?.contains('ant-notification') || 
+                  node.querySelector?.('.ant-notification')) {
+                setNotificationPointerEvents(false);
+              }
+            }
+          });
+        });
+      });
+      
+      // Sledovat změny v document.body
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+      
+      // Uložit observer pro cleanup
+      return () => {
+        observer.disconnect();
+      };
+    } else {
+      document.body.classList.remove('ag-grid-selecting');
+      
+      // Malé zpoždění před obnovením pointer-events (100ms)
+      // Zajistí že notifikace jsou interaktivní až když skutečně skončí označování
+      setTimeout(() => {
+        setNotificationPointerEvents(true);
+      }, 100);
+    }
+  }, [isSelecting, setNotificationPointerEvents]);
+
+  // Cleanup notifikací a timerů při zničení komponenty
+  React.useEffect(() => {
+    return () => {
+      // Clear throttle timer
+      if (notificationThrottleRef.current) {
+        clearTimeout(notificationThrottleRef.current);
+      }
+
+      if (enableNotification) {
+        const gridId = props.gridName || props.id || 'default';
+        const key = `aggregation-grid-${gridId}`;
+        notification.destroy(key);
+      }
+
+      // Cleanup SignalR transaction callback při unmount
+      if (queryKey && window.agGridTransactionCallbacks) {
+        delete window.agGridTransactionCallbacks[queryKey];
+      }
+    };
+  }, [enableNotification, props.gridName, props.id, queryKey]);
+
+  React.useEffect(() => {
+    // VYPNUTO: Cell flash je globálně vypnutý
+    return;
+
+    if (!newRowFlash && !updatedRowFlash) return;
+
+    const previousRowData = previousRowDataRef.current;
+    const addedRows = newRowFlash ? findNewRows(previousRowData, rowData) : [];
+    const updatedRows = updatedRowFlash ? findUpdatedRows(previousRowData, rowData) : [];
+
+    if (addedRows.length > 0 || updatedRows.length > 0) {
+      setTimeout(() => {
+        try {
+          // Bezpečnostní kontrola API dostupnosti
+          if (!internalRef.current?.api || internalRef.current.api.isDestroyed?.()) {
+            return;
+          }
+
+          // Modern AG-Grid (33+): getColumnState() moved to main api
+          const columnApi = internalRef.current?.columnApi || internalRef.current?.api;
+          if (!columnApi?.getColumnState) {
+            return;
+          }
+
+          const columnStates = columnApi.getColumnState();
+          const allColumns = columnStates
+            .filter(colState => colState.colId) // Filtrujeme pouze platné colId
+            .map((colState) => colState.colId);
+
+          // Kontrola, že máme platné sloupce
+          if (allColumns.length === 0) {
+            return;
+          }
+
+          // Flash efekt pro nové řádky (používá defaultní zelená barva AG Grid)
+          if (addedRows.length > 0) {
+            const newRowNodes = [];
+            internalRef.current.api.forEachNode((node) => {
+              if (addedRows.some((row) => row.id === node.data.id)) {
+                newRowNodes.push(node);
+              }
+            });
+
+            if (newRowNodes.length > 0) {
+              internalRef.current.api.flashCells({
+                rowNodes: newRowNodes,
+                columns: allColumns,
+                flashDelay: 0,
+                fadeDelay: 1000,
+              });
+            }
+          }
+
+          // Flash efekt pro aktualizované řádky (modrá barva)
+          if (updatedRows.length > 0) {
+            const updatedRowNodes = [];
+            internalRef.current.api.forEachNode((node) => {
+              if (updatedRows.some((row) => row.id === node.data.id)) {
+                updatedRowNodes.push(node);
+              }
+            });
+
+            if (updatedRowNodes.length > 0) {
+              // Použijeme vlastní CSS animaci pro modrou flash
+              updatedRowNodes.forEach(node => {
+                const rowElement = node.eGridRow || document.querySelector(`[row-id="${node.data.id}"]`);
+                if (rowElement) {
+                  rowElement.classList.add('ag-row-flash-updated');
+                  setTimeout(() => {
+                    rowElement.classList.remove('ag-row-flash-updated');
+                  }, 1000);
+                }
+              });
+            }
+          }
+        } catch (error) {
+          // Ignorujeme chybu a pokračujeme bez crash aplikace
+        }
+      }, 100); // Zvýšený timeout pro stabilizaci gridu
+    }
+
+    previousRowDataRef.current = rowData;
+  }, [rowData, newRowFlash, updatedRowFlash]);
+
+  const RhPlusRangeSelectionChanged = React.useCallback(
+    (event) => {
+      // Detekovat začátek označování - nastavit isSelecting na true
+      setIsSelecting(true);
+
+      // 1. ✅ OPTIMALIZACE: Zobrazení notifikace BĚHEM označování s THROTTLE (100ms)
+      // Throttle = spustí okamžitě první event, pak každých 100ms během označování
+      // Cache check v updateAggregationNotification zajistí, že se agregace nepočítají znovu pokud se range nezměnil
+      if (enableNotification) {
+        const now = Date.now();
+        const timeSinceLastCall = now - notificationLastCallRef.current;
+
+        // První volání NEBO uplynulo 100ms od posledního volání
+        if (timeSinceLastCall >= 100) {
+          // Okamžité volání
+          notificationLastCallRef.current = now;
+          if (internalRef?.current) {
+            updateAggregationNotification(event);
+          }
+        } else {
+          // Naplánovat volání za zbývající čas (trailing edge)
+          if (notificationThrottleRef.current) {
+            clearTimeout(notificationThrottleRef.current);
+          }
+
+          notificationThrottleRef.current = setTimeout(() => {
+            notificationLastCallRef.current = Date.now();
+            if (internalRef?.current) {
+              updateAggregationNotification(event);
+            }
+          }, 100 - timeSinceLastCall);
+        }
+      }
+
+      // 2. ✅ OPTIMALIZACE: Bulk edit handler BEZ debounce - okamžité zobrazení ikony
+      // Lightweight validace v useBulkCellEdit zajistí okamžité zobrazení
+      // Těžká validace proběhne s 15ms debounce uvnitř useBulkCellEdit
+      if (enableBulkEdit) {
+        handleRangeChange(event);
+      }
+
+      // 3. Custom onRangeSelectionChanged callback - bez debounce
+      if (props.onRangeSelectionChanged) props.onRangeSelectionChanged(event);
+    },
+    [enableNotification, enableBulkEdit, handleRangeChange, props.onRangeSelectionChanged, updateAggregationNotification]
+  );
+
+  const AgGridOnGridReady = (event, options) => {
+    if (onGridReady) {
+      onGridReady(event, options);
+    }
+
+    // Nejprve nastavíme API reference pro interní použití
+    if (internalRef.current) {
+      internalRef.current.api = event.api;
+      internalRef.current.columnApi = event.columnApi || event.api; // fallback for modern AG-Grid
+    }
+
+    // Registruj callback pro AG Grid transactions (SignalR optimalizace)
+    // Inicializace globálního registru pro více AG-Grid instancí
+    if (!window.agGridTransactionCallbacks) {
+      window.agGridTransactionCallbacks = {};
+    }
+
+    // Registrace callbacku pro tuto konkrétní AG-Grid instanci (podle queryKey)
+    if (event.api && queryKey) {
+      window.agGridTransactionCallbacks[queryKey] = (transactionData) => {
+        try {
+          if (!event.api || event.api.isDestroyed?.()) return;
+
+          const { operation, records } = transactionData;
+
+          switch (operation) {
+            case 'add':
+              event.api.applyTransaction({ add: records });
+              // Flash efekt pro nové řádky
+              setTimeout(() => {
+                records.forEach(record => {
+                  const rowNode = event.api.getRowNode(record.id);
+                  if (rowNode && rowNode.rowElement) {
+                    rowNode.rowElement.classList.add('ag-row-flash-created');
+                    setTimeout(() => {
+                      rowNode.rowElement.classList.remove('ag-row-flash-created');
+                    }, 1000);
+                  }
+                });
+              }, 100);
+              break;
+
+            case 'update':
+              event.api.applyTransaction({ update: records });
+              // Flash efekt pro aktualizované řádky
+              setTimeout(() => {
+                records.forEach(record => {
+                  const rowNode = event.api.getRowNode(record.id);
+                  if (rowNode && rowNode.rowElement) {
+                    rowNode.rowElement.classList.add('ag-row-flash-updated');
+                    setTimeout(() => {
+                      rowNode.rowElement.classList.remove('ag-row-flash-updated');
+                    }, 1000);
+                  }
+                });
+              }, 100);
+              break;
+
+            case 'remove':
+              // Flash efekt před smazáním
+              records.forEach(record => {
+                const rowNode = event.api.getRowNode(record.id);
+                if (rowNode && rowNode.rowElement) {
+                  rowNode.rowElement.classList.add('ag-row-flash-deleted');
+                }
+              });
+
+              setTimeout(() => {
+                event.api.applyTransaction({ remove: records });
+              }, 500); // Krátké zpoždění pro zobrazení flash efektu
+              break;
+          }
+        } catch (error) {
+          // Ignorujeme chyby
+        }
+      };
+    }
+
+    // Pak zavoláme parent onGridReady handler, pokud existuje
+    // Toto je kritické pro správné fungování bit/ui/grid a GridLayout
+    if (options.onGridReady) {
+      try {
+        options.onGridReady(event);
+      } catch (error) {
+        // Error handling without console output
+      }
+    }
+
+    // Nakonec nastavíme grid ready state s timeout
+    setTimeout(() => {
+      setIsGridReady(true);
+    }, 1000);
+  };
+
+  const components = React.useMemo(() => {
+    return {
+      checkboxRenderer: CheckboxRenderer,
+      selectRenderer: SelectRenderer,
+      countrySelectRenderer: CountrySelectRenderer,
+      booleanRenderer: BooleanRenderer,
+      buttonRenderer: ButtonRenderer,
+      iconRenderer: IconRenderer,
+      imageRenderer: ImageRenderer,
+      stateRenderer: StateRenderer,
+      ...props.frameworkComponents,
+    };
+  }, [props.frameworkComponents]);
+
+  // ========== PERFORMANCE OPTIMIZATION: Memoizované event handlers ==========
+  const memoizedOnCellEditingStarted = React.useCallback(
+    (event) => RhPlusOnCellEditingStarted(event, props),
+    [props.onCellEditingStarted]
+  );
+
+  const memoizedOnCellDoubleClicked = React.useCallback(
+    (event) => RhPlusOnCellDoubleClicked(event, props),
+    [props.onCellDoubleClicked]
+  );
+
+  const memoizedOnCellValueChanged = React.useCallback(
+    (event) => RhPlusOnCellValueChanged(event, props),
+    [props.onCellValueChanged]
+  );
+
+  const memoizedPostSort = React.useCallback(
+    (event) => AgGridPostSort(event, props),
+    [props.postSort]
+  );
+
+  const memoizedOnGridReady = React.useCallback(
+    (event, options) => AgGridOnGridReady(event, props),
+    [onGridReady]
+  );
+
+  const memoizedOnRowDataChanged = React.useCallback(
+    (event) => AgGridOnRowDataChanged(event, props),
+    [props.onRowDataChanged]
+  );
+
+  const memoizedOnRowDataUpdated = React.useCallback(
+    (event) => AgGridOnRowDataUpdated(event, props),
+    [props.onRowDataUpdated]
+  );
+
+  // Memoizovaný context object
+  const memoizedContext = React.useMemo(() => ({
+    componentParent: { ...props }
+  }), [props.context, props.gridName, props.id]);
+
+  // Memoizovaný defaultColDef
+  const memoizedDefaultColDef = React.useMemo(() => ({
+    ...props.defaultColDef,
+    suppressHeaderMenuButton: true,
+    suppressHeaderFilterButton: true,
+    suppressMenu: true,
+  }), [props.defaultColDef]);
+
+  // ========== PERFORMANCE OPTIMIZATION: Memoizovaný allGridProps ==========
+  const allGridProps = React.useMemo(() => ({
+    ref: internalRef,
+    ...props,
+    theme: themeObject,
+    columnDefs: AgGridColumns(props.columnDefs, props),
+    defaultColDef: memoizedDefaultColDef,
+    onCellEditingStarted: memoizedOnCellEditingStarted,
+    onCellDoubleClicked: memoizedOnCellDoubleClicked,
+    onCellValueChanged: memoizedOnCellValueChanged,
+    postSort: memoizedPostSort,
+    onGridReady: memoizedOnGridReady,
+    onRowDataChanged: memoizedOnRowDataChanged,
+    onRowDataUpdated: memoizedOnRowDataUpdated,
+    onRangeSelectionChanged: RhPlusRangeSelectionChanged,
+    context: memoizedContext,
+    components,
+  }), [
+    internalRef,
+    themeObject,
+    props.columnDefs,
+    memoizedDefaultColDef,
+    memoizedOnCellEditingStarted,
+    memoizedOnCellDoubleClicked,
+    memoizedOnCellValueChanged,
+    memoizedPostSort,
+    memoizedOnGridReady,
+    memoizedOnRowDataChanged,
+    memoizedOnRowDataUpdated,
+    RhPlusRangeSelectionChanged,
+    memoizedContext,
+    components,
+  ]);
+  
+  return (
+    <>
+      <AgGridReact {...allGridProps} />
+      
+      {/* Bulk Edit Floating Button */}
+      {enableBulkEdit && floatingButton.visible && (
+        <BulkEditButton
+          visible={floatingButton.visible}
+          position={floatingButton.position}
+          range={floatingButton.range}
+          column={floatingButton.column}
+          cellCount={floatingButton.cellCount}
+          rowsContainer={floatingButton.rowsContainer}
+          editPopover={editPopover}
+          onOpenPopover={handleOpenPopover}
+          onValueChange={handleValueChange}
+          onSubmit={handleSubmitEdit}
+          onCancel={handleCancelEdit}
+        />
+      )}
+    </>
+  );
+});
+
+export default AgGrid;
+
+export {
+  useBulkCellEdit,
+  BulkEditButton,
+  BulkEditPopover,
+  BulkEditSelect,
+  BulkEditDatePicker,
+  BulkEditModule,
+  BulkEditInput
+} from './BulkEdit';
+
+export {
+  default as CheckboxRenderer
 } from './Renderers/CheckboxRenderer'