@bit.rhplus/ag-grid 0.0.77 → 0.0.79

package/index.jsx

@@ -10,6 +10,7 @@ import { AgGridOnRowDataChanged } from './AgGridOnRowDataChanged';
 import { AgGridOnRowDataUpdated } from './AgGridOnRowDataUpdated';
 import CheckboxRenderer from './Renderers/CheckboxRenderer';
 import BooleanRenderer from './Renderers/BooleanRenderer';
+import { createGridComparison } from '@bit.rhplus/react-memo';
 
 import IconRenderer from './Renderers/IconRenderer';
 import ImageRenderer from './Renderers/ImageRenderer';
@@ -51,6 +52,19 @@ const themes = [
 ];
 
 const AgGrid = React.forwardRef((props, ref) => {
+  // ========== DIAGNOSTIC LOGGING ==========
+  const renderCountRef = React.useRef(0);
+  renderCountRef.current++;
+
+  if (process.env.NODE_ENV !== 'production') {
+    console.log(`🔄 [AG Grid ${props.gridName || 'unknown'}] Render #${renderCountRef.current}`, {
+      rowDataLength: props.rowData?.length,
+      columnDefsLength: props.columnDefs?.length,
+      quickFilterText: props.quickFilterText,
+    });
+  }
+  // ==========================================
+
   const internalRef = React.useRef();
   const {
     theme = "themeAlpine", // Default theme
@@ -237,11 +251,49 @@ const AgGrid = React.forwardRef((props, ref) => {
     setActiveNotificationMode('full');
   }, [aggregationData, props, notificationHead, createNotificationDescription, style, placement]);
 
+  // ========== PERFORMANCE FIX: Stabilní refs pro updateAggregationNotification ==========
+  const activeNotificationModeRef = React.useRef(activeNotificationMode);
+  const isSelectingRef = React.useRef(isSelecting);
+  const notificationHeadRef = React.useRef(notificationHead);
+  const createNotificationDescriptionRef = React.useRef(createNotificationDescription);
+  const styleRef = React.useRef(style);
+  const placementRef = React.useRef(placement);
+  const propsRef = React.useRef(props);
+
+  React.useEffect(() => {
+    activeNotificationModeRef.current = activeNotificationMode;
+  }, [activeNotificationMode]);
+
+  React.useEffect(() => {
+    isSelectingRef.current = isSelecting;
+  }, [isSelecting]);
+
+  React.useEffect(() => {
+    notificationHeadRef.current = notificationHead;
+  }, [notificationHead]);
+
+  React.useEffect(() => {
+    createNotificationDescriptionRef.current = createNotificationDescription;
+  }, [createNotificationDescription]);
+
+  React.useEffect(() => {
+    styleRef.current = style;
+  }, [style]);
+
+  React.useEffect(() => {
+    placementRef.current = placement;
+  }, [placement]);
+
+  React.useEffect(() => {
+    propsRef.current = props;
+  }, [props]);
+
   // ✅ OPTIMALIZACE: Helper funkce pro aktualizaci aggregace notifikace s cache check
   // Volá se BĚHEM označování s 100ms throttle pro real-time feedback
+  // STABILNÍ callback - používá pouze refs!
   const updateAggregationNotification = React.useCallback((event) => {
     // Pokud je notificationMode 'none', nedělat nic
-    if (notificationMode === 'none') {
+    if (notificationModeRef.current === 'none') {
       return;
     }
 
@@ -254,14 +306,14 @@ const AgGrid = React.forwardRef((props, ref) => {
       lastRangeHashRef.current = null;
 
       // V 'full' módu zavřít notifikaci
-      if (activeNotificationMode === 'full') {
-        const gridId = props.gridName || props.id || 'default';
+      if (activeNotificationModeRef.current === 'full') {
+        const gridId = propsRef.current.gridName || propsRef.current.id || 'default';
         const key = `aggregation-grid-${gridId}`;
         notification.destroy(key);
       }
 
       // V 'simple' módu vyčistit aggregationData
-      if (activeNotificationMode === 'simple') {
+      if (activeNotificationModeRef.current === 'simple') {
         setAggregationData(null);
       }
 
@@ -281,30 +333,30 @@ const AgGrid = React.forwardRef((props, ref) => {
       lastRangeHashRef.current = currentRangeHash;
 
       // Zavolat onAggregationChanged callback pokud existuje
-      if (props.onAggregationChanged) {
-        props.onAggregationChanged(messageInfo);
+      if (propsRef.current.onAggregationChanged) {
+        propsRef.current.onAggregationChanged(messageInfo);
       }
 
       // Podle aktivního módu zobrazit buď notifikaci nebo aktualizovat status bar
-      if (activeNotificationMode === 'full') {
+      if (activeNotificationModeRef.current === 'full') {
         // FULL mód - zobrazit plovoucí notifikaci s tlačítkem pro přepnutí na simple
-        const gridId = props.gridName || props.id || 'default';
+        const gridId = propsRef.current.gridName || propsRef.current.id || 'default';
         const key = `aggregation-grid-${gridId}`;
 
         const dynamicStyle = {
-          ...style,
-          pointerEvents: isSelecting ? 'none' : 'auto'
+          ...styleRef.current,
+          pointerEvents: isSelectingRef.current ? 'none' : 'auto'
         };
 
         notification.info({
           key,
-          message: notificationHead(messageInfo),
-          description: createNotificationDescription(messageInfo, true),
+          message: notificationHeadRef.current(messageInfo),
+          description: createNotificationDescriptionRef.current(messageInfo, true),
           duration: 0,
           style: dynamicStyle,
-          placement,
+          placement: placementRef.current,
         });
-      } else if (activeNotificationMode === 'simple') {
+      } else if (activeNotificationModeRef.current === 'simple') {
         // SIMPLE mód - aktualizovat state pro status bar
         setAggregationData(messageInfo);
       }
@@ -312,17 +364,17 @@ const AgGrid = React.forwardRef((props, ref) => {
       // Jen jedna buňka - zavřít/vyčistit vše
       lastRangeHashRef.current = null;
 
-      if (activeNotificationMode === 'full') {
-        const gridId = props.gridName || props.id || 'default';
+      if (activeNotificationModeRef.current === 'full') {
+        const gridId = propsRef.current.gridName || propsRef.current.id || 'default';
         const key = `aggregation-grid-${gridId}`;
         notification.destroy(key);
       }
 
-      if (activeNotificationMode === 'simple') {
+      if (activeNotificationModeRef.current === 'simple') {
         setAggregationData(null);
       }
     }
-  }, [notificationMode, activeNotificationMode, internalRef, props, notificationHead, createNotificationDescription, style, placement, isSelecting]);
+  }, [internalRef]); // ✅ Pouze internalRef v dependencies!
 
   // Detekce konce označování pomocí mouseup event
   React.useEffect(() => {
@@ -539,6 +591,36 @@ const AgGrid = React.forwardRef((props, ref) => {
     previousRowDataRef.current = rowData;
   }, [rowData, newRowFlash, updatedRowFlash]);
 
+  // ========== PERFORMANCE FIX: Stabilní ref pattern pro callbacks ==========
+  // Refs pro aktuální hodnoty - zabraňuje re-creation RhPlusRangeSelectionChanged při změně stavu
+  const notificationModeRef = React.useRef(notificationMode);
+  const enableBulkEditRef = React.useRef(enableBulkEdit);
+  const handleRangeChangeRef = React.useRef(handleRangeChange);
+  const onRangeSelectionChangedRef = React.useRef(props.onRangeSelectionChanged);
+  const updateAggregationNotificationRef = React.useRef(updateAggregationNotification);
+
+  // Aktualizovat refs při změně hodnot
+  React.useEffect(() => {
+    notificationModeRef.current = notificationMode;
+  }, [notificationMode]);
+
+  React.useEffect(() => {
+    enableBulkEditRef.current = enableBulkEdit;
+  }, [enableBulkEdit]);
+
+  React.useEffect(() => {
+    handleRangeChangeRef.current = handleRangeChange;
+  }, [handleRangeChange]);
+
+  React.useEffect(() => {
+    onRangeSelectionChangedRef.current = props.onRangeSelectionChanged;
+  }, [props.onRangeSelectionChanged]);
+
+  React.useEffect(() => {
+    updateAggregationNotificationRef.current = updateAggregationNotification;
+  }, [updateAggregationNotification]);
+
+  // Stabilní callback s prázdnými dependencies - používá pouze refs
   const RhPlusRangeSelectionChanged = React.useCallback(
     (event) => {
       // Detekovat začátek označování - nastavit isSelecting na true
@@ -547,8 +629,8 @@ const AgGrid = React.forwardRef((props, ref) => {
       // 1. ✅ OPTIMALIZACE: Zobrazení notifikace BĚHEM označování s THROTTLE
       // Simple mode: 300ms throttle (méně častá aktualizace, lepší výkon)
       // Full mode: 100ms throttle (rychlejší feedback, plovoucí notifikace je levná)
-      if (notificationMode !== 'none') {
-        const throttleInterval = notificationMode === 'simple' ? 300 : 100;
+      if (notificationModeRef.current !== 'none') {
+        const throttleInterval = notificationModeRef.current === 'simple' ? 300 : 100;
         const now = Date.now();
         const timeSinceLastCall = now - notificationLastCallRef.current;
 
@@ -557,7 +639,7 @@ const AgGrid = React.forwardRef((props, ref) => {
           // Okamžité volání
           notificationLastCallRef.current = now;
           if (internalRef?.current) {
-            updateAggregationNotification(event);
+            updateAggregationNotificationRef.current(event);
           }
         } else {
           // Naplánovat volání za zbývající čas (trailing edge)
@@ -568,7 +650,7 @@ const AgGrid = React.forwardRef((props, ref) => {
           notificationThrottleRef.current = setTimeout(() => {
             notificationLastCallRef.current = Date.now();
             if (internalRef?.current) {
-              updateAggregationNotification(event);
+              updateAggregationNotificationRef.current(event);
             }
           }, throttleInterval - timeSinceLastCall);
         }
@@ -577,14 +659,16 @@ const AgGrid = React.forwardRef((props, ref) => {
       // 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);
+      if (enableBulkEditRef.current) {
+        handleRangeChangeRef.current(event);
       }
 
       // 3. Custom onRangeSelectionChanged callback - bez debounce
-      if (props.onRangeSelectionChanged) props.onRangeSelectionChanged(event);
+      if (onRangeSelectionChangedRef.current) {
+        onRangeSelectionChangedRef.current(event);
+      }
     },
-    [notificationMode, enableBulkEdit, handleRangeChange, props.onRangeSelectionChanged, updateAggregationNotification]
+    [] // ✅ PRÁZDNÉ dependencies - stabilní reference!
   );
 
   const AgGridOnGridReady = (event, options) => {
@@ -737,8 +821,9 @@ const AgGrid = React.forwardRef((props, ref) => {
   );
 
   // Memoizovaný context object
+  // ✅ OPTIMALIZACE: Použít pouze relevantní props pro context - neměnit při změně props
   const memoizedContext = React.useMemo(() => ({
-    componentParent: { ...props }
+    componentParent: props
   }), [props.context, props.gridName, props.id]);
 
   // Memoizovaný defaultColDef
@@ -747,44 +832,111 @@ const AgGrid = React.forwardRef((props, ref) => {
     suppressHeaderMenuButton: true,
     suppressHeaderFilterButton: true,
     suppressMenu: true,
+    // ✅ FIX AG-Grid v35: Bezpečné zpracování null hodnot v Quick Filter
+    // AG-Grid v35 změnil implementaci Quick Filter - nyní volá .toString() na hodnotách buněk bez null check
+    // Tento callback zajistí že nikdy nedojde k chybě "Cannot read properties of null (reading 'toString')"
+    getQuickFilterText: (params) => {
+      const value = params.value;
+      // Null/undefined → prázdný string (bez chyby)
+      if (value == null) return '';
+      // Objekty a pole → JSON string
+      if (typeof value === 'object') {
+        try {
+          return JSON.stringify(value);
+        } catch {
+          // Cirkulární reference nebo jiná chyba při serializaci → prázdný string
+          return '';
+        }
+      }
+      // Primitivní typy → toString
+      return value.toString();
+    },
   }), [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,
-    // Explicitně zajistit že enableRangeSelection je propagováno
-    enableRangeSelection: props.enableRangeSelection,
-  }), [
-    internalRef,
-    themeObject,
-    props.columnDefs,
-    props.enableRangeSelection,
-    memoizedDefaultColDef,
-    memoizedOnCellEditingStarted,
-    memoizedOnCellDoubleClicked,
-    memoizedOnCellValueChanged,
-    memoizedPostSort,
-    memoizedOnGridReady,
-    memoizedOnRowDataChanged,
-    memoizedOnRowDataUpdated,
-    RhPlusRangeSelectionChanged,
-    memoizedContext,
-    components,
-  ]);
+  // ========== PERFORMANCE FIX: Memoizovat columnDefs ==========
+  // AgGridColumns vrací nový array při každém volání, i když jsou vstupy stejné
+  const memoizedColumnDefs = React.useMemo(() => {
+    return AgGridColumns(props.columnDefs, props);
+  }, [props.columnDefs, props.getRowId, props.frameworkComponents]);
+
+  // ========== CRITICAL FIX: Stabilní allGridProps objekt pomocí ref a forceUpdate ==========
+  // Problém: Jakékoli použití useMemo vytváří nový objekt při změně dependencies
+  // Řešení: Použít ref pro VŽDY stejný objekt a forceUpdate pro kontrolované re-rendery
+
+  const allGridPropsRef = React.useRef(null);
+  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
+
+  // Sledovat klíčové props pro detekci kdy je potřeba forceUpdate
+  const prevRowDataRef = React.useRef(props.rowData);
+  const prevColumnDefsRef = React.useRef(memoizedColumnDefs);
+
+  // Inicializace objektu
+  if (!allGridPropsRef.current) {
+    allGridPropsRef.current = {};
+  }
+
+  // ✅ Aktualizovat props v EXISTUJÍCÍM objektu (mutace)
+  // AG Grid interně detekuje změny props, nepotřebuje nový objekt
+  allGridPropsRef.current.ref = internalRef;
+  allGridPropsRef.current.rowData = props.rowData;
+  allGridPropsRef.current.getRowId = props.getRowId;
+  allGridPropsRef.current.theme = themeObject;
+  allGridPropsRef.current.columnDefs = memoizedColumnDefs;
+  allGridPropsRef.current.defaultColDef = memoizedDefaultColDef;
+  allGridPropsRef.current.onCellEditingStarted = memoizedOnCellEditingStarted;
+  allGridPropsRef.current.onCellDoubleClicked = memoizedOnCellDoubleClicked;
+  // allGridPropsRef.current.onCellValueChanged = memoizedOnCellValueChanged;
+  allGridPropsRef.current.postSort = memoizedPostSort;
+  allGridPropsRef.current.onGridReady = memoizedOnGridReady;
+  allGridPropsRef.current.onRowDataChanged = memoizedOnRowDataChanged;
+  allGridPropsRef.current.onRowDataUpdated = memoizedOnRowDataUpdated;
+  allGridPropsRef.current.onRangeSelectionChanged = RhPlusRangeSelectionChanged;
+  allGridPropsRef.current.context = memoizedContext;
+  allGridPropsRef.current.components = components;
+
+  // Další AG Grid props
+  allGridPropsRef.current.rowModelType = props.rowModelType;
+  allGridPropsRef.current.rowSelection = props.rowSelection;
+  allGridPropsRef.current.enableRangeSelection = props.enableRangeSelection;
+  allGridPropsRef.current.enableRangeHandle = props.enableRangeHandle;
+  allGridPropsRef.current.enableFillHandle = props.enableFillHandle;
+  allGridPropsRef.current.suppressRowClickSelection = props.suppressRowClickSelection;
+  allGridPropsRef.current.singleClickEdit = props.singleClickEdit;
+  allGridPropsRef.current.stopEditingWhenCellsLoseFocus = props.stopEditingWhenCellsLoseFocus;
+  allGridPropsRef.current.rowClass = props.rowClass;
+  allGridPropsRef.current.rowStyle = props.rowStyle;
+  allGridPropsRef.current.getRowClass = props.getRowClass;
+  allGridPropsRef.current.getRowStyle = props.getRowStyle;
+  allGridPropsRef.current.animateRows = props.animateRows;
+  allGridPropsRef.current.suppressCellFocus = props.suppressCellFocus;
+  allGridPropsRef.current.suppressMenuHide = props.suppressMenuHide;
+  allGridPropsRef.current.enableCellTextSelection = props.enableCellTextSelection;
+  allGridPropsRef.current.ensureDomOrder = props.ensureDomOrder;
+  allGridPropsRef.current.suppressRowTransform = props.suppressRowTransform;
+  allGridPropsRef.current.suppressColumnVirtualisation = props.suppressColumnVirtualisation;
+  allGridPropsRef.current.suppressRowVirtualisation = props.suppressRowVirtualisation;
+  allGridPropsRef.current.tooltipShowDelay = props.tooltipShowDelay;
+  allGridPropsRef.current.tooltipHideDelay = props.tooltipHideDelay;
+  allGridPropsRef.current.tooltipMouseTrack = props.tooltipMouseTrack;
+  allGridPropsRef.current.gridId = props.gridId;
+  allGridPropsRef.current.id = props.id;
+  allGridPropsRef.current.gridName = props.gridName;
+
+  // ✅ Detekovat změny které VYŽADUJÍ re-render AG Gridu
+  React.useEffect(() => {
+    const rowDataChanged = prevRowDataRef.current !== props.rowData;
+    const columnDefsChanged = prevColumnDefsRef.current !== memoizedColumnDefs;
+
+    if (rowDataChanged || columnDefsChanged) {
+      prevRowDataRef.current = props.rowData;
+      prevColumnDefsRef.current = memoizedColumnDefs;
+      // Vynutit re-render pouze když se data nebo sloupce změní
+      forceUpdate();
+    }
+  }, [props.rowData, memoizedColumnDefs]);
+
+  // ✅ Vracíme VŽDY stejný objekt (stabilní reference)
+  const allGridProps = allGridPropsRef.current;
 
   // State pro sledování, kdy je API ready
   const [isApiReady, setIsApiReady] = React.useState(false);
@@ -793,7 +945,10 @@ const AgGrid = React.forwardRef((props, ref) => {
   // Tento useEffect se volá při změně quickFilterText NEBO když API je ready
   React.useEffect(() => {
     if (internalRef.current?.api && !internalRef.current.api.isDestroyed?.()) {
-      internalRef.current.api.setGridOption("quickFilterText", quickFilterText);
+      // ✅ FIX AG-Grid v35: Zajistit že quickFilterText není null/undefined
+      // AG-Grid v35 interně volá .toString() na této hodnotě bez null checku
+      const safeQuickFilterText = quickFilterText ?? '';
+      internalRef.current.api.setGridOption("quickFilterText", safeQuickFilterText);
     }
   }, [quickFilterText, isApiReady]);
 
@@ -859,7 +1014,13 @@ const AgGrid = React.forwardRef((props, ref) => {
   );
 });
 
-export default AgGrid;
+// ========== PERFORMANCE OPTIMIZATION: React.memo ==========
+// Refactored: Používá createGridComparison utility místo manuálního deep comparison
+// Eliminováno ~120 řádků duplicitního kódu, zachována stejná funkcionalita
+// Diagnostic mode: zapnutý pouze ve development módu
+export default React.memo(AgGrid, createGridComparison(
+  process.env.NODE_ENV !== 'production' // Diagnostic mode pouze ve development
+));
 
 export {
   useBulkCellEdit,
@@ -873,4 +1034,4 @@ export {
 
 export {
   default as CheckboxRenderer
-} from './Renderers/CheckboxRenderer'
+} from './Renderers/CheckboxRenderer';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@bit.rhplus/ag-grid",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "homepage": "https://bit.cloud/remote-scope/ag-grid",
   "main": "dist/index.js",
   "componentId": {
     "scope": "remote-scope",
     "name": "ag-grid",
-    "version": "0.0.77"
+    "version": "0.0.79"
   },
   "dependencies": {
     "moment": "^2.30.1",
@@ -20,10 +20,11 @@
     "styled-components": "^6.1.19",
     "lucide-react": "^0.503.0",
     "linq": "^4.0.3",
-    "@bit.rhplus/ui.grid": "0.0.95",
+    "@bit.rhplus/ui.grid": "0.0.97",
+    "@bit.rhplus/react-memo": "0.0.2",
     "@bit.rhplus/linq": "0.0.8",
-    "@bit.rhplus/ui2.module-dropdown-list": "0.1.71",
-    "@bit.rhplus/data": "0.0.73"
+    "@bit.rhplus/ui2.module-dropdown-list": "0.1.73",
+    "@bit.rhplus/data": "0.0.75"
   },
   "devDependencies": {
     "@teambit/react.react-env": "1.0.132"