@bit.rhplus/ui.grid 0.0.94 → 0.0.95

package/dist/ColumnBuilder.d.ts

@@ -119,17 +119,31 @@ declare class ColumnBuilder {
      * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
      * @returns {ColumnBuilder} Instance pro chaining
      */
-    addLinkColumn({ onClick, linkStyle, hoverStyle, cellAlign, editable, overviewToggle, color, bgColor, colorField, bgColorField, ...restProps }: {
-        onClick: Function;
-        linkStyle: Object | Function;
-        hoverStyle: Object | Function;
+    /**
+     * Přidá sloupec s odkazem (link) - Používá extrahovaný LinkRenderer.
+     * Optimalizovaná implementace s extrahovaným rendererem pro lepší výkon.
+     * @param {Object} config - Konfigurace link sloupce
+     * @param {string} [config.cellAlign='left'] - Horizontální zarovnání obsahu ('left', 'center', 'right')
+     * @param {Function} [config.onClick] - Callback funkce při kliku na link
+     * @param {Object|Function} [config.linkStyle] - CSS styl pro link nebo funkce vracející styl
+     * @param {Object|Function} [config.hoverStyle] - CSS styl pro hover stav nebo funkce vracející styl
+     * @param {boolean} [config.overviewToggle=false] - Příznak zda aktivovat overview toggle funkčnost
+     * @param {boolean} [config.editable=false] - Editovatelnost buňky
+     * @param {Function} [config.visibleGetter] - Funkce určující viditelnost linku
+     * @param {boolean} [config.showOnGroup=false] - Zobrazit link i v group řádcích
+     * @param {Object} config.restProps - Další AG-Grid colDef parametry
+     * @returns {ColumnBuilder} Instance pro fluent API
+     */
+    addLinkColumn({ cellAlign, onClick, linkStyle, hoverStyle, overviewToggle, editable, visibleGetter, showOnGroup, contentTooltip, tooltipField, tooltipInteraction, tooltipShowDelay, color, bgColor, colorField, bgColorField, ...restProps }: {
         cellAlign?: string | undefined;
-        editable: boolean;
+        onClick?: Function | undefined;
+        linkStyle?: Object | Function | undefined;
+        hoverStyle?: Object | Function | undefined;
         overviewToggle?: boolean | undefined;
-        color: string | Function;
-        bgColor: string | Function;
-        colorField: string;
-        bgColorField: string;
+        editable?: boolean | undefined;
+        visibleGetter?: Function | undefined;
+        showOnGroup?: boolean | undefined;
+        restProps: Object;
     }): ColumnBuilder;
     /**
      * Helper metoda pro přidání overview link sloupce s přednastavenými hodnotami.
@@ -171,17 +185,25 @@ declare class ColumnBuilder {
      * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
      * @returns {ColumnBuilder} Instance pro chaining
      */
-    addObjectColumn({ contentTooltip, tooltipField, tooltipInteraction, tooltipShowDelay, editable, onEditClick, color, bgColor, colorField, bgColorField, ...restProps }: {
-        contentTooltip: boolean;
-        tooltipField: string;
-        tooltipInteraction: boolean;
-        tooltipShowDelay?: number | undefined;
-        editable: boolean;
-        onEditClick: Function;
-        color: string | Function;
-        bgColor: string | Function;
-        colorField: string;
-        bgColorField: string;
+    /**
+     * Přidá sloupec pro zobrazení objektů - Používá extrahovaný ObjectRenderer.
+     * Optimalizovaná implementace s extrahovaným rendererem pro lepší výkon.
+     * @param {Object} config - Konfigurace object sloupce
+     * @param {boolean} [config.editable=false] - Příznak zda je buňka editovatelná s edit tlačítkem
+     * @param {Function} [config.onEditClick] - Callback funkce při kliku na edit tlačítko
+     * @param {Function} [config.visibleGetter] - Funkce určující viditelnost objektu
+     * @param {boolean} [config.showOnGroup=false] - Zobrazit objekt i v group řádcích
+     * @param {string|Function} [config.displayField] - Název pole nebo funkce pro získání zobrazované hodnoty
+     * @param {Object} config.restProps - Další AG-Grid colDef parametry
+     * @returns {ColumnBuilder} Instance pro fluent API
+     */
+    addObjectColumn({ editable, onEditClick, visibleGetter, showOnGroup, displayField, contentTooltip, tooltipField, tooltipInteraction, tooltipShowDelay, color, bgColor, colorField, bgColorField, ...restProps }: {
+        editable?: boolean | undefined;
+        onEditClick?: Function | undefined;
+        visibleGetter?: Function | undefined;
+        showOnGroup?: boolean | undefined;
+        displayField?: string | Function | undefined;
+        restProps: Object;
     }): ColumnBuilder;
     /**
      * Přidá sloupec pro zobrazení ikon s podporou badge (číselného označení).

package/dist/ColumnBuilder.js

@@ -17,99 +17,6 @@ import { ActionIcon } from './Icons';
 import { CircleHelp, Check, X } from 'lucide-react';
 // Globální cache pro názvy zemí (sdílená napříč všemi instancemi ColumnBuilder)
 const COUNTRY_NAMES_CACHE = {};
-/**
- * Custom React hook pro zpracování interakcí s link buňkou v AG Grid.
- * Obsluhuje hover efekty, kliky a přepínání overview módu.
- * @param {Object} params - AG Grid parametry buňky
- * @param {Function} onClick - Callback funkce při kliku na link
- * @param {Object|Function} linkStyle - CSS styl pro link nebo funkce vracející styl
- * @param {Object|Function} hoverStyle - CSS styl pro hover stav nebo funkce vracející styl
- * @param {boolean} overviewToggle - Příznak zda aktivovat overview toggle funkčnost
- * @returns {Object} Objekt s handlry a styly pro link buňku
- */
-const useLinkCellRenderer = (params, onClick, linkStyle, hoverStyle, overviewToggle) => {
-    const [isHovered, setIsHovered] = React.useState(false);
-    const handleMouseEnter = React.useCallback(() => {
-        setIsHovered(true);
-    }, []);
-    const handleMouseLeave = React.useCallback(() => {
-        setIsHovered(false);
-    }, []);
-    const handleClick = React.useCallback((event) => {
-        event.stopPropagation();
-        if (overviewToggle && params.api) {
-            params.api.dispatchEvent({
-                type: 'overviewToggle',
-                data: params.data,
-                params,
-            });
-        }
-        if (onClick) {
-            onClick(params);
-        }
-    }, [onClick, overviewToggle, params]);
-    // Přesunuto do useMemo, aby se vytvořilo pouze jednou
-    const defaultLinkStyle = React.useMemo(() => ({
-        color: '#1a73e8',
-        textDecoration: 'none',
-        cursor: 'pointer',
-    }), []);
-    // Přesunuto do useMemo, aby se vytvořilo pouze jednou
-    const defaultHoverStyle = React.useMemo(() => ({
-        textDecoration: 'underline',
-    }), []);
-    const computedLinkStyle = React.useMemo(() => ({
-        ...defaultLinkStyle,
-        ...(typeof linkStyle === 'function'
-            ? linkStyle(params)
-            : linkStyle || {}),
-    }), [linkStyle, params, defaultLinkStyle]);
-    const computedHoverStyle = React.useMemo(() => ({
-        ...defaultLinkStyle,
-        ...computedLinkStyle,
-        ...defaultHoverStyle,
-        ...(typeof hoverStyle === 'function'
-            ? hoverStyle(params)
-            : hoverStyle || {}),
-    }), [computedLinkStyle, hoverStyle, params, defaultLinkStyle, defaultHoverStyle]);
-    return {
-        isHovered,
-        handleMouseEnter,
-        handleMouseLeave,
-        handleClick,
-        computedLinkStyle,
-        computedHoverStyle,
-    };
-};
-/**
- * Custom React hook pro zpracování interakcí s object buňkou v AG Grid.
- * Poskytuje funkcionalitu pro editovatelné objekty s hover efekty a edit tlačítkem.
- * @param {Object} params - AG Grid parametry buňky
- * @param {boolean} editable - Příznak zda je buňka editovatelná
- * @param {Function} onEditClick - Callback funkce při kliku na edit tlačítko
- * @returns {Object} Objekt s handlry pro object buňku
- */
-const useObjectCellRenderer = (params, editable, onEditClick) => {
-    const [isHovered, setIsHovered] = React.useState(false);
-    const handleMouseEnter = React.useCallback(() => {
-        setIsHovered(true);
-    }, []);
-    const handleMouseLeave = React.useCallback(() => {
-        setIsHovered(false);
-    }, []);
-    const handleEditClick = React.useCallback((event) => {
-        event.stopPropagation();
-        if (onEditClick) {
-            onEditClick(params);
-        }
-    }, [onEditClick, params]);
-    return {
-        isHovered,
-        handleMouseEnter,
-        handleMouseLeave,
-        handleEditClick,
-    };
-};
 /**
  * Custom React hook pro detekci hover stavu řádku v AG Grid.
  * Používá MutationObserver pro sledování CSS tříd řádků a detekci hover stavu.
@@ -327,28 +234,37 @@ class ColumnBuilder {
      * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
      * @returns {ColumnBuilder} Instance pro chaining
      */
-    addLinkColumn({ onClick, linkStyle, hoverStyle, cellAlign = 'left', editable, overviewToggle = false, color, bgColor, colorField, bgColorField, ...restProps }) {
-        // Vytvořím komponentu pro cell renderer, která používá hook
-        const LinkCellRenderer = React.memo((params) => {
-            const { isHovered, handleMouseEnter, handleMouseLeave, handleClick, computedLinkStyle, computedHoverStyle, } = useLinkCellRenderer(params, onClick, linkStyle, hoverStyle, overviewToggle);
-            return (_jsx("div", { className: "link-cell-container", style: {
-                    width: '100%',
-                    height: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                }, children: _jsx("span", { onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: isHovered ? computedHoverStyle : computedLinkStyle, role: "button", tabIndex: 0, onKeyPress: (event) => {
-                        if (event.key === 'Enter' || event.key === ' ') {
-                            handleClick(event);
-                        }
-                    }, children: params.value }) }));
-        });
-        // Používáme funkci, která vrátí React komponentu
-        const cellRenderer = (params) => {
-            return _jsx(LinkCellRenderer, { ...params });
-        };
+    /**
+     * Přidá sloupec s odkazem (link) - Používá extrahovaný LinkRenderer.
+     * Optimalizovaná implementace s extrahovaným rendererem pro lepší výkon.
+     * @param {Object} config - Konfigurace link sloupce
+     * @param {string} [config.cellAlign='left'] - Horizontální zarovnání obsahu ('left', 'center', 'right')
+     * @param {Function} [config.onClick] - Callback funkce při kliku na link
+     * @param {Object|Function} [config.linkStyle] - CSS styl pro link nebo funkce vracející styl
+     * @param {Object|Function} [config.hoverStyle] - CSS styl pro hover stav nebo funkce vracející styl
+     * @param {boolean} [config.overviewToggle=false] - Příznak zda aktivovat overview toggle funkčnost
+     * @param {boolean} [config.editable=false] - Editovatelnost buňky
+     * @param {Function} [config.visibleGetter] - Funkce určující viditelnost linku
+     * @param {boolean} [config.showOnGroup=false] - Zobrazit link i v group řádcích
+     * @param {Object} config.restProps - Další AG-Grid colDef parametry
+     * @returns {ColumnBuilder} Instance pro fluent API
+     */
+    addLinkColumn({ cellAlign = 'left', onClick, linkStyle, hoverStyle, overviewToggle = false, editable = false, visibleGetter, showOnGroup = false, contentTooltip, tooltipField, tooltipInteraction, tooltipShowDelay, color, bgColor, colorField, bgColorField, ...restProps }) {
         __classPrivateFieldGet(this, _ColumnBuilder_instances, "m", _ColumnBuilder_addPreparedColumn).call(this, {
             cellAlign,
-            cellRenderer,
+            cellRenderer: 'linkRenderer',
+            cellRendererParams: {
+                onClick,
+                linkStyle,
+                hoverStyle,
+                overviewToggle,
+                visibleGetter,
+                showOnGroup,
+            },
+            contentTooltip,
+            tooltipField,
+            tooltipInteraction,
+            tooltipShowDelay,
             editable: __classPrivateFieldGet(this, _ColumnBuilder_instances, "m", _ColumnBuilder_resolveEditable).call(this, editable),
             overviewToggle,
             color,
@@ -403,38 +319,32 @@ class ColumnBuilder {
      * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
      * @returns {ColumnBuilder} Instance pro chaining
      */
-    addObjectColumn({ contentTooltip, tooltipField, tooltipInteraction, tooltipShowDelay = 100, editable, onEditClick, color, bgColor, colorField, bgColorField, ...restProps }) {
-        // Vytvořím komponentu pro cell renderer, která používá hook
-        const ObjectCellRenderer = React.memo((params) => {
-            const { isHovered, handleMouseEnter, handleMouseLeave, handleEditClick } = useObjectCellRenderer(params, editable, onEditClick);
-            return (_jsxs("div", { className: "object-cell-container", style: {
-                    position: 'relative',
-                    width: '100%',
-                    height: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsx("div", { style: { flexGrow: 1 }, children: params.value }), isHovered && editable && (_jsx("button", { className: "edit-object-button", style: {
-                            position: 'absolute',
-                            right: '4px',
-                            background: 'transparent',
-                            border: 'none',
-                            cursor: 'pointer',
-                            padding: '4px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        }, onClick: handleEditClick, title: "Upravit", children: _jsx("span", { style: { fontSize: '16px' }, children: "\u22EE" }) }))] }));
-        });
-        // Používáme funkci, která vrátí React komponentu
-        const cellRenderer = (params) => {
-            return _jsx(ObjectCellRenderer, { ...params });
-        };
+    /**
+     * Přidá sloupec pro zobrazení objektů - Používá extrahovaný ObjectRenderer.
+     * Optimalizovaná implementace s extrahovaným rendererem pro lepší výkon.
+     * @param {Object} config - Konfigurace object sloupce
+     * @param {boolean} [config.editable=false] - Příznak zda je buňka editovatelná s edit tlačítkem
+     * @param {Function} [config.onEditClick] - Callback funkce při kliku na edit tlačítko
+     * @param {Function} [config.visibleGetter] - Funkce určující viditelnost objektu
+     * @param {boolean} [config.showOnGroup=false] - Zobrazit objekt i v group řádcích
+     * @param {string|Function} [config.displayField] - Název pole nebo funkce pro získání zobrazované hodnoty
+     * @param {Object} config.restProps - Další AG-Grid colDef parametry
+     * @returns {ColumnBuilder} Instance pro fluent API
+     */
+    addObjectColumn({ editable = false, onEditClick, visibleGetter, showOnGroup = false, displayField, contentTooltip, tooltipField, tooltipInteraction, tooltipShowDelay, color, bgColor, colorField, bgColorField, ...restProps }) {
         __classPrivateFieldGet(this, _ColumnBuilder_instances, "m", _ColumnBuilder_addPreparedColumn).call(this, {
+            cellRenderer: 'objectRenderer',
+            cellRendererParams: {
+                editable,
+                onEditClick,
+                visibleGetter,
+                showOnGroup,
+                displayField,
+            },
             contentTooltip,
             tooltipField,
             tooltipInteraction,
             tooltipShowDelay,
-            cellRenderer,
             editable: __classPrivateFieldGet(this, _ColumnBuilder_instances, "m", _ColumnBuilder_resolveEditable).call(this, editable),
             color,
             bgColor,
@@ -602,19 +512,47 @@ class ColumnBuilder {
      * @returns {ColumnBuilder} Instance pro chaining
      */
     addCountryColumn({ countryCode, countryCodeField, displayType = 'name', language = 'cs', flagPosition = 'left', flagSize = 24, textGap = 8, cellAlign = 'left', getCountryName, color, bgColor, colorField, bgColorField, ...restProps }) {
+        // Memoizovaná CountryFlag sub-komponenta s lazy loading a error handling
+        const CountryFlag = React.memo(({ code, size }) => {
+            const [hasError, setHasError] = React.useState(false);
+            const flagUrl = React.useMemo(() => {
+                if (!code)
+                    return null;
+                return `https://flagcdn.com/w40/${code.toLowerCase()}.png`;
+            }, [code]);
+            const handleError = React.useCallback(() => {
+                setHasError(true);
+            }, []);
+            React.useEffect(() => {
+                setHasError(false);
+            }, [flagUrl]);
+            const flagStyle = React.useMemo(() => ({
+                width: `${size}px`,
+                height: `${size}px`,
+                borderRadius: '50%',
+                objectFit: 'cover',
+                flexShrink: 0,
+            }), [size]);
+            if (hasError || !flagUrl)
+                return null;
+            return (_jsx("img", { src: flagUrl, alt: `${code} flag`, style: flagStyle, loading: "lazy", onError: handleError }));
+        });
+        CountryFlag.displayName = 'CountryFlag';
         const CountryCellRenderer = React.memo((params) => {
             const [countryName, setCountryName] = React.useState(null);
             const [isLoading, setIsLoading] = React.useState(false);
             // Získání kódu země
-            const code = countryCodeField
-                ? getValueByPath(params.data, countryCodeField)
-                : (typeof countryCode === 'function' ? countryCode(params) : countryCode);
-            if (!code)
-                return null;
-            const upperCode = code.toUpperCase();
-            const cacheKey = `${upperCode}_${language}`;
+            const code = React.useMemo(() => {
+                return countryCodeField
+                    ? getValueByPath(params.data, countryCodeField)
+                    : (typeof countryCode === 'function' ? countryCode(params) : countryCode);
+            }, [params.data, params.value]);
+            const upperCode = React.useMemo(() => code ? code.toUpperCase() : null, [code]);
+            const cacheKey = React.useMemo(() => upperCode ? `${upperCode}_${language}` : null, [upperCode, language]);
             // Načtení názvu země z REST Countries API
             React.useEffect(() => {
+                if (!upperCode || !cacheKey)
+                    return;
                 if (displayType !== 'name')
                     return;
                 if (getCountryName)
@@ -625,14 +563,14 @@ class ColumnBuilder {
                     return;
                 }
                 setIsLoading(true);
-                // REST Countries API: https://restcountries.com/v3.1/alpha/{code}
+                // REST Countries API
                 fetch(`https://restcountries.com/v3.1/alpha/${upperCode}`)
                     .then(response => response.json())
                     .then(data => {
                     if (data && data[0]) {
                         // Získání překladu podle jazyka
                         const translations = data[0].translations;
-                        let name = data[0].name.common; // fallback na anglický název
+                        let name = data[0].name.common;
                         if (language === 'cs' && translations?.ces) {
                             name = translations.ces.common;
                         }
@@ -647,58 +585,59 @@ class ColumnBuilder {
                         setCountryName(name);
                     }
                 })
-                    .catch((error) => {
-                    console.error('Error fetching country:', error);
+                    .catch(() => {
                     // V případě chyby použijeme kód země
                     setCountryName(upperCode);
                 })
                     .finally(() => {
                     setIsLoading(false);
                 });
-            }, [upperCode, cacheKey, displayType, getCountryName, params.value, language]);
-            // Získání názvu země
-            let displayText = upperCode;
-            if (displayType === 'name') {
-                if (getCountryName) {
-                    displayText = getCountryName(code, params);
-                }
-                else if (countryName) {
-                    displayText = countryName;
-                }
-                else if (isLoading) {
-                    displayText = '...';
-                }
-                else if (params.value) {
-                    displayText = params.value;
+            }, [upperCode, cacheKey, displayType, getCountryName]);
+            // Memoizovaný displayText
+            const displayText = React.useMemo(() => {
+                if (!upperCode)
+                    return '';
+                if (displayType === 'name') {
+                    if (getCountryName) {
+                        return getCountryName(code, params);
+                    }
+                    if (countryName) {
+                        return countryName;
+                    }
+                    if (isLoading) {
+                        return '...';
+                    }
+                    if (params.value) {
+                        return params.value;
+                    }
                 }
-            }
-            // URL veřejného API pro vlajky (flagcdn.com)
-            const flagUrl = `https://flagcdn.com/w40/${upperCode.toLowerCase()}.png`;
-            const flagStyle = {
-                width: `${flagSize}px`,
-                height: `${flagSize}px`,
-                borderRadius: '50%',
-                objectFit: 'cover',
-                flexShrink: 0,
-            };
-            const containerStyle = {
+                return upperCode;
+            }, [upperCode, displayType, getCountryName, code, params, countryName, isLoading]);
+            // Memoizovaný containerStyle
+            const containerStyle = React.useMemo(() => ({
                 display: 'flex',
                 alignItems: 'center',
-                justifyContent: cellAlign === 'center' ? 'center' : cellAlign === 'right' ? 'flex-end' : 'flex-start',
+                justifyContent: cellAlign === 'center' ? 'center' :
+                    cellAlign === 'right' ? 'flex-end' :
+                        'flex-start',
                 width: '100%',
                 height: '100%',
                 gap: `${textGap}px`,
                 flexDirection: flagPosition === 'right' ? 'row-reverse' : 'row',
-            };
-            return (_jsxs("div", { style: containerStyle, children: [_jsx("img", { src: flagUrl, alt: `${upperCode} flag`, style: flagStyle, onError: (e) => {
-                            e.target.style.display = 'none';
-                        } }), _jsx("span", { children: displayText })] }));
+            }), [cellAlign, textGap, flagPosition]);
+            if (!code)
+                return null;
+            return (_jsxs("div", { style: containerStyle, children: [_jsx(CountryFlag, { code: upperCode, size: flagSize }), _jsx("span", { children: displayText })] }));
         });
+        CountryCellRenderer.displayName = 'CountryCellRenderer';
         const cellRenderer = (params) => {
             return _jsx(CountryCellRenderer, { ...params });
         };
         __classPrivateFieldGet(this, _ColumnBuilder_instances, "m", _ColumnBuilder_addPreparedColumn).call(this, {
             cellRenderer,
+            cellRendererParams: {
+                deferRender: true, // AG-Grid deferred rendering pro optimalizaci výkonu při scrollování
+            },
             color,
             bgColor,
             colorField,
@@ -730,46 +669,57 @@ class ColumnBuilder {
      * @returns {ColumnBuilder} Instance pro chaining
      */
     addBooleanColumn({ visibleFalse = true, visibleTrue = true, cellAlign = 'center', visibleGetter = () => true, defaultIcon = true, defaultIconColor = '#898989', size = 16, colorTrue = 'green', colorFalse = 'red', showOnGroup = false, editable, color, bgColor, colorField, bgColorField, ...restProps }) {
+        // Konstanty mimo komponentu pro lepší výkon
+        const ICON_STYLE = {
+            display: 'inline-block',
+            height: '100%',
+        };
+        // Memoizovaná Icon sub-komponenta
+        const Icon = React.memo(({ innerValue, size, colorTrue, colorFalse, visibleTrue, visibleFalse, defaultIcon, defaultIconColor }) => {
+            if (innerValue === undefined || innerValue === null) {
+                if (defaultIcon) {
+                    return _jsx(CircleHelp, { size: size, color: defaultIconColor, style: ICON_STYLE });
+                }
+                return null;
+            }
+            if ((!visibleFalse && !innerValue) || (!visibleTrue && innerValue)) {
+                return null;
+            }
+            if (innerValue) {
+                return _jsx(Check, { size: size, color: colorTrue, style: ICON_STYLE });
+            }
+            return _jsx(X, { size: size, color: colorFalse, style: ICON_STYLE });
+        });
+        Icon.displayName = 'BooleanIcon';
         // Create a React component for boolean cell renderer
         const BooleanCellRenderer = React.memo((params) => {
             const { data, value } = params;
-            const visibleResult = visibleGetter ? visibleGetter(data) : true;
-            const Icon = ({ innerValue, ...iconProps }) => {
-                if (innerValue === undefined || innerValue === null) {
-                    if (defaultIcon)
-                        return _jsx(CircleHelp, { size: size, color: defaultIconColor, ...iconProps });
-                }
-                if ((!visibleFalse && !innerValue) ||
-                    (!visibleTrue && (innerValue))) {
-                    return _jsx("div", {});
-                }
-                if (innerValue)
-                    return _jsx(Check, { size: size, color: colorTrue, ...iconProps });
-                return _jsx(X, { size: size, color: colorFalse, ...iconProps });
-            };
-            const showCondition = () => {
+            const visibleResult = React.useMemo(() => visibleGetter ? visibleGetter(data) : true, [data]);
+            const showCondition = React.useMemo(() => {
                 const newItem = (data && data._rh_plus_ag_grid_new_item) || false;
                 return !newItem && (showOnGroup || !!data) && visibleResult;
-            };
-            if (!showCondition())
+            }, [data, visibleResult]);
+            const containerStyle = React.useMemo(() => ({
+                width: '100%',
+                display: 'flex',
+                justifyContent: cellAlign ?? 'center',
+                alignItems: 'center',
+                height: '100%',
+            }), [cellAlign]);
+            if (!showCondition)
                 return null;
-            return (_jsx("span", { style: {
-                    width: '100%',
-                    display: 'flex',
-                    justifyContent: cellAlign,
-                    alignItems: 'center',
-                    height: '100%',
-                }, children: _jsx(Icon, { style: {
-                        display: 'inline-block',
-                        height: '100%',
-                    }, innerValue: value, visibleTrue: visibleTrue, visibleFalse: visibleFalse }) }));
+            return (_jsx("span", { style: containerStyle, children: _jsx(Icon, { innerValue: value, size: size, colorTrue: colorTrue, colorFalse: colorFalse, visibleTrue: visibleTrue, visibleFalse: visibleFalse, defaultIcon: defaultIcon, defaultIconColor: defaultIconColor }) }));
         });
+        BooleanCellRenderer.displayName = 'BooleanCellRenderer';
         // Use the function that returns React component
         const cellRenderer = (params) => {
             return _jsx(BooleanCellRenderer, { ...params });
         };
         __classPrivateFieldGet(this, _ColumnBuilder_instances, "m", _ColumnBuilder_addPreparedColumn).call(this, {
             cellRenderer,
+            cellRendererParams: {
+                deferRender: true, // AG-Grid deferred rendering pro optimalizaci výkonu při scrollování
+            },
             editable: __classPrivateFieldGet(this, _ColumnBuilder_instances, "m", _ColumnBuilder_resolveEditable).call(this, editable),
             color,
             bgColor,
@@ -1095,6 +1045,9 @@ class ColumnBuilder {
             filter: false,
             resizable: false,
             cellRenderer: ActionDropdownRenderer,
+            cellRendererParams: {
+                deferRender: true, // AG-Grid deferred rendering pro optimalizaci výkonu při scrollování
+            },
             cellClass: 'action-button-cell-observer',
             ...restProps,
         });