@bit.rhplus/ui.grid 0.0.52 → 0.0.53

package/ColumnBuilder.jsx

@@ -1,1280 +1,1294 @@
-/* eslint-disable */
-import * as React from 'react';
-import Menu from 'antd/es/menu';
-import Dropdown from 'antd/es/dropdown';
-import Button from 'antd/es/button';
-import Divider from 'antd/es/divider';
-import { prepareCellStyle, prepareColDef, getValueByPath } from './functions';
-import { currencySymbols } from './enums';
-import { ActionIcon } from './Icons';
-import { CircleHelp, Check, X } from 'lucide-react';
-
-/**
- * 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.
- * Tento hook se používá pro akční tlačítka, která se zobrazují pouze při hoveru nad řádkem.
- * @param {Object} params - AG Grid parametry buňky obsahující informace o řádku
- * @returns {Object} Objekt s boolean příznakem isRowHovered
- */
-const useRowHoverActionRenderer = (params) => {
-  const [isRowHovered, setIsRowHovered] = React.useState(false);
-  const rowRef = React.useRef(null);
-
-  React.useEffect(() => {
-    if (!params.node) return undefined;
-
-    // Funkce pro kontrolu, zda je řádek v hover stavu
-    const checkRowHoverState = () => {
-      // Najdeme DOM element řádku pomocí rowIndex
-      const rowElement = document.querySelector(
-        `.ag-row[row-index="${params.rowIndex}"]`
-      );
-      if (rowElement) {
-        rowRef.current = rowElement;
-        // AG-Grid automaticky přidává třídu ag-row-hover k řádku při najetí myší
-        const isHovered = rowElement.classList.contains('ag-row-hover');
-        setIsRowHovered(isHovered);
-      }
-    };
-
-    // Vytvoříme MutationObserver pro sledování změn tříd na řádku
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (
-          mutation.type === 'attributes' &&
-          mutation.attributeName === 'class'
-        ) {
-          checkRowHoverState();
-        }
-      });
-    });
-
-    // Inicializujeme stav
-    checkRowHoverState();
-
-    // Přidáme observer k element řádku, pokud existuje
-    if (rowRef.current) {
-      observer.observe(rowRef.current, { attributes: true });
-    }
-
-    // Přidáme event listeners na grid container pro sledování pohybu myši
-    const gridContainer = document.querySelector('.ag-root-wrapper');
-    if (gridContainer) {
-      gridContainer.addEventListener('mouseover', checkRowHoverState);
-      gridContainer.addEventListener('mouseout', checkRowHoverState);
-    }
-
-    // Cleanup při odmontování komponenty
-    return () => {
-      if (rowRef.current) {
-        observer.disconnect();
-      }
-      if (gridContainer) {
-        gridContainer.removeEventListener('mouseover', checkRowHoverState);
-        gridContainer.removeEventListener('mouseout', checkRowHoverState);
-      }
-    };
-  }, [params.node, params.rowIndex]);
-
-  return {
-    isRowHovered,
-  };
-};
-
-/**
- * ColumnBuilder třída pro builder pattern vytváření sloupců AG Grid.
- * Poskytuje fluent API pro snadné a čitelné definování různých typů sloupců.
- * Podporuje lokalizaci přes react-intl a automatickou konfiguraci sloupců.
- */
-class ColumnBuilder {
-  /**
-   * Privátní metoda pro přidání připraveného sloupce do kolekce.
-   * Aplikuje standardní konfiguraci sloupce včetně lokalizace.
-   * @param {Object} props - Konfigurace sloupce
-   */
-  #addPreparedColumn(props) {
-    this.columns.push(prepareColDef(this.intl, props));
-  }
-
-  /**
-   * Konstruktor ColumnBuilder třídy.
-   * @param {Object} intl - React-intl objekt pro lokalizaci
-   */
-  constructor(intl) {
-    this.columns = [];
-    this.intl = intl;
-  }
-
-  /**
-   * Přidá základní sloupec do AG Grid s podporou barevného pole.
-   * Umožňuje dynamické obarvení textu buňky na základě hodnoty z jiného pole.
-   * @param {Object} config - Konfigurace sloupce
-   * @param {string} config.colorField - Název pole obsahujícího barvu pro text buňky
-   * @param {Object} ...props - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addColumn({ colorField, ...props }) {
-    // Získáme původní cellStyle, pokud existuje
-    const originalCellStyle = props.cellStyle;
-    const { cellAlign, ...restProps } = props;
-
-    // Pokud je zadáno colorField, vytvoříme novou funkci pro cellStyle
-    if (colorField) {
-      const overrideCellStyle = (params) => {
-        // Získáme základní styl
-        let baseStyle = {};
-        if (originalCellStyle) {
-          if (typeof originalCellStyle === 'function') {
-            baseStyle = originalCellStyle(params);
-          } else {
-            baseStyle = originalCellStyle;
-          }
-        }
-
-        // Získáme hodnotu barvy z dat
-        const colorValue =
-          params.data && getValueByPath(params.data, colorField);
-        const restStyle = prepareCellStyle(props);
-        // Vrátíme kombinovaný styl
-        return colorValue
-          ? { ...baseStyle, ...restStyle, color: colorValue }
-          : { ...baseStyle, ...restStyle };
-      };
-
-      // Předáme upravené props do addPreparedColumn
-      this.#addPreparedColumn({ ...restProps, overrideCellStyle });
-    } else {
-      // Pokud není colorField zadán, použijeme původní implementaci
-      this.#addPreparedColumn(props);
-    }
-
-    return this;
-  }
-
-  /**
-   * Přidá sloupec s kartou faktury optimalizovaný pro overview mód.
-   * Zobrazuje fakturační informace v kartovém formátu s podporou checkboxu.
-   * @param {Object} config - Konfigurace sloupce
-   * @param {string} [config.field='invoice'] - Název datového pole
-   * @param {string} [config.headerName=''] - Název hlavičky sloupce
-   * @param {number} [config.width=340] - Šířka sloupce
-   * @param {Function} config.onCheckboxChange - Callback při změně stavu checkboxu
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addInvoiceCardColumn({
-    field = 'invoice',
-    headerName = '',
-    width = 340,
-    onCheckboxChange,
-    ...restProps
-  } = {}) {
-    const cellRenderer = 'invoiceCardRenderer';
-
-    this.#addPreparedColumn({
-      headerName,
-      field,
-      width,
-      cellRenderer,
-      suppressSizeToFit: true,
-      cellRendererParams: {
-        onCheckboxChange:
-          onCheckboxChange ||
-          (() => {
-            // Funkce bez console.log
-          }),
-      },
-      ...restProps,
-    });
-
-    return this;
-  }
-
-  /**
-   * Přidá sloupec pro zobrazení měny s podporou různých formátů a pozicování symbolu.
-   * Automaticky formátuje hodnoty jako měnu s dvěma desetinnými místy.
-   * @param {Object} config - Konfigurace měnového sloupce
-   * @param {string|Function} config.currency - Kód měny nebo funkce vracející kód měny
-   * @param {string} [config.position] - Pozice symbolu měny ('left' nebo 'right')
-   * @param {Object|Function} config.currencyStyle - CSS styl pro symbol měny
-   * @param {string} [config.cellAlign='right'] - Zarovnání obsahu buňky
-   * @param {boolean} config.editable - Zda je sloupec editovatelný
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addCurrencyColumn({
-    currency,
-    position,
-    currencyStyle,
-    cellAlign = 'right',
-    editable,
-    ...restProps
-  }) {
-    const cellRenderer = (params) => {
-      const currencyValue =
-        typeof currency === 'function' ? currency(params) : currency;
-      const symbol = currencySymbols[currencyValue] || currencyValue;
-
-      // Použití Number.isNaN místo globální isNaN
-      const value =
-        params.value != null && !Number.isNaN(Number(params.value))
-          ? params.value.toFixed(2)
-          : '0.00';
-
-      const style =
-        typeof currencyStyle === 'function'
-          ? currencyStyle(params)
-          : currencyStyle;
-
-      return (
-        <span>
-          {position === 'left' ? (
-            <>
-              <span style={style}>{symbol}</span> {value}
-            </>
-          ) : (
-            <>
-              {value} <span style={style}>{symbol}</span>
-            </>
-          )}
-        </span>
-      );
-    };
-
-    this.#addPreparedColumn({
-      cellAlign,
-      cellRenderer,
-      editable: this.#resolveEditable(editable),
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Přidá sloupec pro zobrazení data s možností specifikace formátu.
-   * Používá standardní AG Grid date renderer s českým formátováním.
-   * @param {Object} config - Konfigurace datového sloupce
-   * @param {string} [config.dateFormat='DD.MM.YYYY'] - Formát zobrazení data
-   * @param {boolean} config.editable - Zda je sloupec editovatelný
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addDateColumn({ dateFormat = 'DD.MM.YYYY', editable, ...restProps }) {
-    this.#addPreparedColumn({
-      dateRenderer: dateFormat,
-      editable: this.#resolveEditable(editable),
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Přidá sloupec s klikatelným linkem podporujícím hover efekty.
-   * Link může spouštět akce nebo přepínat overview mód v gridu.
-   * @param {Object} config - Konfigurace linkového sloupce
-   * @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
-   * @param {string} [config.cellAlign='left'] - Zarovnání obsahu buňky
-   * @param {boolean} config.editable - Zda je sloupec editovatelný
-   * @param {boolean} [config.overviewToggle=false] - Zda aktivovat overview toggle
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addLinkColumn({
-    onClick,
-    linkStyle,
-    hoverStyle,
-    cellAlign = 'left',
-    editable,
-    overviewToggle = false, // Přidán výchozí parametr pro overview
-    ...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 (
-        <div
-          className="link-cell-container"
-          style={{
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            alignItems: 'center',
-          }}
-        >
-          <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);
-              }
-            }}
-          >
-            {params.value}
-          </span>
-        </div>
-      );
-    });
-
-    // Používáme funkci, která vrátí React komponentu
-    const cellRenderer = (params) => {
-      return <LinkCellRenderer {...params} />;
-    };
-
-    this.#addPreparedColumn({
-      cellAlign,
-      cellRenderer,
-      editable: this.#resolveEditable(editable),
-      overviewToggle, // Předání příznaku dál
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Helper metoda pro přidání overview link sloupce s přednastavenými hodnotami.
-   * Specializovaný link sloupec pro přepínání overview módu v gridu.
-   * @param {Object} config - Konfigurace overview link sloupce
-   * @param {string} [config.field='documentNumber'] - Název datového pole
-   * @param {string} [config.headerName=''] - Název hlavičky sloupce
-   * @param {number} [config.width=130] - Šířka sloupce
-   * @param {string} [config.cellAlign='left'] - Zarovnání obsahu buňky
-   * @param {Object|Function} config.linkStyle - CSS styl pro link
-   * @param {Object|Function} config.hoverStyle - CSS styl pro hover stav
-   * @param {boolean} [config.editable=false] - Zda je sloupec editovatelný
-   * @param {Object} ...rest - Další AG Grid vlastnosti sloupce včetně intlId
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addOverviewLinkColumn({
-    field = 'documentNumber',
-    headerName = '',
-    width = 130,
-    cellAlign = 'left',
-    linkStyle,
-    hoverStyle,
-    editable = false,
-    ...rest
-  } = {}) {
-    return this.addLinkColumn({
-      field,
-      headerName: this?.intl?.formatMessage({ id: rest?.intlId }) || headerName,
-      width,
-      cellAlign,
-      linkStyle,
-      hoverStyle,
-      editable,
-      overviewToggle: true,
-      ...rest,
-    });
-  }
-
-  /**
-   * Přidá sloupec pro zobrazení objektů s možností editace a tooltip podporou.
-   * Při hoveru zobrazuje edit tlačítko pro editovatelné objekty.
-   * @param {Object} config - Konfigurace objektového sloupce
-   * @param {boolean} config.contentTooltip - Zda zobrazovat tooltip s obsahem
-   * @param {string} config.tooltipField - Pole obsahující text pro tooltip
-   * @param {boolean} config.tooltipInteraction - Zda povolit interakci s tooltipem
-   * @param {number} [config.tooltipShowDelay=100] - Zpoždění zobrazení tooltipu v ms
-   * @param {boolean} config.editable - Zda je objekt editovatelný
-   * @param {Function} config.onEditClick - Callback při kliku na edit tlačítko
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addObjectColumn({
-    contentTooltip,
-    tooltipField,
-    tooltipInteraction,
-    tooltipShowDelay = 100,
-    editable,
-    onEditClick,
-    ...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 (
-        <div
-          className="object-cell-container"
-          style={{
-            position: 'relative',
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            alignItems: 'center',
-          }}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-        >
-          <div style={{ flexGrow: 1 }}>{params.value}</div>
-          {isHovered && editable && (
-            <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"
-            >
-              <span style={{ fontSize: '16px' }}>⋮</span>
-            </button>
-          )}
-        </div>
-      );
-    });
-
-    // Používáme funkci, která vrátí React komponentu
-    const cellRenderer = (params) => {
-      return <ObjectCellRenderer {...params} />;
-    };
-
-    this.#addPreparedColumn({
-      contentTooltip,
-      tooltipField,
-      tooltipInteraction,
-      tooltipShowDelay,
-      cellRenderer,
-      editable: this.#resolveEditable(editable),
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Přidá sloupec pro zobrazení ikon s podporou badge (číselného označení).
-   * Umožňuje podmíněné zobrazování ikon a jejich stylování.
-   * @param {Object} config - Konfigurace ikonového sloupce
-   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost ikony
-   * @param {string} config.cellAlign - Zarovnání ikony v buňce
-   * @param {string|Function} config.icon - Název ikony nebo funkce vracející ikonu
-   * @param {string|Function} [config.iconColor] - Barva ikony nebo funkce vracející barvu podle parametrů
-   * @param {number} [config.size=16] - Velikost ikony v pixelech
-   * @param {boolean} [config.iconLeft=false] - Zda zobrazit ikonu vlevo od textu
-   * @param {boolean} [config.iconRight=false] - Zda zobrazit ikonu vpravo od textu
-   * @param {boolean} [config.showText=true] - Zda zobrazit text (hodnotu pole)
-   * @param {number} [config.textGap=5] - Mezera mezi ikonou a textem v pixelech
-   * @param {boolean} [config.showOnGroup=false] - Zda zobrazit ikonu na skupinových řádcích
-   * @param {string|number|Function} config.badge - Text/číslo badge nebo funkce vracející badge
-   * @param {boolean} config.showZero - Zda zobrazit badge s hodnotou 0
-   * @param {string} [config.badgeColor='#dc3545'] - Barva pozadí badge
-   * @param {string} [config.badgeTextColor='white'] - Barva textu badge
-   * @param {string} [config.badgePosition='top-right'] - Pozice badge ('top-right', 'top-left', 'bottom-right', 'bottom-left')
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addIconColumn({
-    visibleGetter = () => true,
-    cellAlign,
-    icon,
-    iconColor,
-    size = 16,
-    iconLeft = false,
-    iconRight = false,
-    showText = true,
-    textGap = 5,
-    showOnGroup = false,
-    badge,
-    showZero,
-    badgeColor = '#dc3545',
-    badgeTextColor = 'white',
-    badgePosition = 'top-right',
-    ...restProps
-  }) {
-    const iconRendererParams = {
-      cellAlign,
-      visibleGetter,
-      icon,
-      iconColor,
-      size,
-      iconLeft,
-      iconRight,
-      showText,
-      textGap,
-      showOnGroup,
-      badge,
-      showZero,
-      badgeColor,
-      badgeTextColor,
-      badgePosition,
-    };
-    this.#addPreparedColumn({
-      iconRenderer: true,
-      iconRendererParams,
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Přidá sloupec pro zobrazování stavů s kruhovým pozadím.
-   * Zobrazuje text stavu v kruhovém pozadí s definovanou barvou.
-   * @param {Object} config - Konfigurace stavového sloupce
-   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost
-   * @param {string} [config.cellAlign='center'] - Zarovnání v buňce
-   * @param {string|Function} [config.bgColor] - Barva pozadí nebo funkce vracející barvu podle parametrů
-   * @param {string|Function} [config.textColor='white'] - Barva textu nebo funkce vracející barvu
-   * @param {string|Function} [config.displayField] - Pole pro zobrazení textu (pokud se liší od field)
-   * @param {number} [config.minWidth=80] - Minimální šířka kruhového pozadí
-   * @param {number} [config.fontSize=12] - Velikost fontu
-   * @param {boolean} [config.showOnGroup=false] - Zda zobrazit na skupinových řádcích
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addStateColumn({
-    visibleGetter = () => true,
-    cellAlign = 'center',
-    bgColor,
-    textColor = 'white',
-    displayField,
-    minWidth = 80,
-    fontSize = 12,
-    showOnGroup = false,
-    ...restProps
-  }) {
-    const stateRendererParams = {
-      visibleGetter,
-      cellAlign,
-      bgColor,
-      textColor,
-      displayField,
-      minWidth,
-      fontSize,
-      showOnGroup,
-    };
-    this.#addPreparedColumn({
-      stateRenderer: true,
-      stateRendererParams,
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Přidá sloupec pro zobrazení boolean hodnot pomocí ikon (zaškrtnutí/křížek).
-   * Podporuje různé ikony pro true/false stav a podmíněnou viditelnost.
-   * @param {Object} config - Konfigurace boolean sloupce
-   * @param {boolean} [config.visibleFalse=true] - Zda zobrazit ikonu pro false hodnotu
-   * @param {boolean} [config.visibleTrue=true] - Zda zobrazit ikonu pro true hodnotu
-   * @param {string} [config.cellAlign='center'] - Zarovnání ikony v buňce
-   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost ikony
-   * @param {boolean} [config.defaultIcon=true] - Zda zobrazit výchozí ikonu pro undefined hodnoty
-   * @param {string} [config.defaultIconColor='#898989'] - Barva výchozí ikony
-   * @param {number} [config.size=16] - Velikost ikony v pixelech
-   * @param {string} [config.colorTrue='green'] - Barva ikony pro true hodnotu
-   * @param {string} [config.colorFalse='red'] - Barva ikony pro false hodnotu
-   * @param {boolean} [config.showOnGroup=false] - Zda zobrazit ikonu na skupinových řádcích
-   * @param {boolean} config.editable - Zda je sloupec editovatelný
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @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,
-    ...restProps
-  }) {
-    // 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 ||
-          (!visibleFalse && !innerValue) ||
-          (!visibleTrue && innerValue)
-        ) {
-          if (defaultIcon)
-            return <CircleHelp size={size} color={defaultIconColor} {...iconProps} />;
-          return <div />;
-        }
-
-        if (innerValue)
-          return <Check size={size} color={colorTrue} {...iconProps} />;
-        return <X size={size} color={colorFalse} {...iconProps} />;
-      };
-
-      const showCondition = () => {
-        const newItem = (data && data._rh_plus_ag_grid_new_item) || false;
-        return !newItem && (showOnGroup || !!data) && visibleResult;
-      };
-
-      if (!showCondition()) return null;
-
-      return (
-        <span
-          style={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: cellAlign,
-            alignItems: 'center',
-            height: '100%',
-          }}
-        >
-          <Icon
-            style={{
-              display: 'inline-block',
-              height: '100%',
-            }}
-            innerValue={value}
-            visibleTrue={visibleTrue}
-            visibleFalse={visibleFalse}
-          />
-        </span>
-      );
-    });
-
-    // Use the function that returns React component
-    const cellRenderer = (params) => {
-      return <BooleanCellRenderer {...params} />;
-    };
-
-    this.#addPreparedColumn({
-      cellRenderer,
-      editable: this.#resolveEditable(editable),
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Přidá připnutý akční sloupec s dropdown menu, který se zobrazuje pouze při hoveru nad řádkem.
-   * Používa pokročilou detekci hover stavu s MutationObserver pro každou instanci gridu zvlášť.
-   * Sloupec je automaticky připnut vpravo a obsahuje akční tlačítko s kontextovým menu.
-   * @param {Object} config - Konfigurace akčního sloupce
-   * @param {Array} [config.menuItems=[]] - Array položek menu s key, label, disable vlastnostmi
-   * @param {Function} config.onActionClick - Callback při kliku na položku menu (key, params, item)
-   * @param {Function} config.onBeforeShow - Async callback před zobrazením menu pro dynamické položky
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addPinnedActionButton({
-    menuItems = [],
-    onActionClick,
-    onBeforeShow,
-    ...restProps
-  } = {}) {
-    const ActionDropdownRenderer = (params) => {
-      const [isRowHovered, setIsRowHovered] = React.useState(false);
-      const [isDropdownVisible, setIsDropdownVisible] = React.useState(false);
-      const [currentMenuItems, setCurrentMenuItems] = React.useState(menuItems);
-
-      const isMountedRef = React.useRef(true);
-      const rowIndexRef = React.useRef(null);
-      const observerRef = React.useRef(null);
-      const gridContainerRef = React.useRef(null);
-      const currentHoveredRowRef = React.useRef(null);
-      const mouseListenersSetupRef = React.useRef(false);
-
-      React.useEffect(() => {
-        return () => {
-          isMountedRef.current = false;
-          cleanup();
-        };
-      }, []);
-
-      // Cleanup funkce
-      const cleanup = () => {
-        if (observerRef.current) {
-          observerRef.current.disconnect();
-          observerRef.current = null;
-        }
-
-        if (gridContainerRef.current && mouseListenersSetupRef.current) {
-          gridContainerRef.current.removeEventListener(
-            'mousemove',
-            handleMouseMove
-          );
-          gridContainerRef.current.removeEventListener(
-            'mouseleave',
-            handleMouseLeave
-          );
-          // gridContainerRef.current.removeEventListener(
-          //   'mouseenter',
-          //   handleMouseEnter
-          // );
-          mouseListenersSetupRef.current = false;
-        }
-      };
-
-      // Získáme row index z params
-      React.useEffect(() => {
-        if (params.node && params.node.rowIndex !== undefined) {
-          rowIndexRef.current = params.node.rowIndex.toString();
-        } else if (params.rowIndex !== undefined) {
-          rowIndexRef.current = params.rowIndex.toString();
-        }
-      }, [params.node, params.rowIndex]);
-
-      // Mouse event handlers
-      const handleMouseMove = React.useCallback((event) => {
-        if (!isMountedRef.current) return;
-
-        const target = event.target;
-        if (!target) return;
-
-        // Najdeme nejbližší AG-Grid row element
-        let rowElement = target.closest('.ag-row');
-
-        if (rowElement) {
-          // Získáme row index z AG-Grid attributů
-          const rowIndex =
-            rowElement.getAttribute('row-index') ||
-            rowElement.getAttribute('aria-rowindex') ||
-            rowElement.dataset.rowIndex ||
-            rowElement.getAttribute('data-ag-row-index');
-
-          if (rowIndex !== null) {
-            const normalizedRowIndex = rowIndex.toString();
-
-            // KLÍČOVÁ ZMĚNA: Explicitně resetujeme předchozí řádek při změně
-            if (normalizedRowIndex !== currentHoveredRowRef.current) {
-              // Pokud jsme měli předchozí řádek, nastavíme mu hover false
-              if (currentHoveredRowRef.current !== null) {
-                notifyRowHoverChange(currentHoveredRowRef.current, false);
-              }
-
-              // Nastavíme nový řádek jako hovered
-              currentHoveredRowRef.current = normalizedRowIndex;
-              notifyRowHoverChange(normalizedRowIndex, true);
-            }
-          }
-        } else {
-          // Myš není nad žádným řádkem - resetujeme všechny
-          if (currentHoveredRowRef.current !== null) {
-            notifyRowHoverChange(currentHoveredRowRef.current, false);
-            currentHoveredRowRef.current = null;
-          }
-        }
-      }, []);
-
-      const handleMouseLeave = React.useCallback((event) => {
-        if (!isMountedRef.current) return;
-
-        // Lepší detekce opuštění gridu
-        const relatedTarget = event.relatedTarget;
-
-        // Pokud myš opustí celý grid container NEBO jde mimo dokument
-        if (
-          gridContainerRef.current &&
-          (!relatedTarget || !gridContainerRef.current.contains(relatedTarget))
-        ) {
-          if (currentHoveredRowRef.current !== null) {
-            notifyRowHoverChange(currentHoveredRowRef.current, false);
-            currentHoveredRowRef.current = null;
-          }
-        }
-      }, []);
-
-      // Notifikace o změně hover stavu pro tento specifický grid
-      const notifyRowHoverChange = (rowIndex, isHovered) => {
-        if (!isMountedRef.current) return;
-
-        // EXPLICITNÍ ŘÍZENÍ: Pokud nastavujeme hover false, resetujeme stav pro všechny řádky
-        if (!isHovered && rowIndexRef.current) {
-          setIsRowHovered(false);
-        }
-
-        // Pokud je toto náš řádek a nastavujeme hover true, aktualizujeme stav
-        if (isHovered && rowIndexRef.current === rowIndex) {
-          setIsRowHovered(true);
-        }
-      };
-
-      // Nastavení observer pro tento konkrétní grid
-      const setupGridObserver = React.useCallback(() => {
-        if (!params.api || observerRef.current || !isMountedRef.current) return;
-
-        // Najdeme grid container pro tento konkrétní grid instance
-        const findThisGridContainer = () => {
-          if (params.eGridCell) {
-            let current = params.eGridCell;
-            while (current && current !== document.body) {
-              if (
-                current.classList &&
-                (current.classList.contains('ag-root-wrapper') ||
-                  current.classList.contains('ag-theme-alpine') ||
-                  current.classList.contains('ag-theme-balham') ||
-                  current.classList.contains('ag-theme-material') ||
-                  current.classList.contains('ag-theme-fresh') ||
-                  current.classList.contains('ag-theme-dark') ||
-                  current.classList.contains('ag-theme-blue') ||
-                  current.classList.contains('ag-theme-bootstrap'))
-              ) {
-                return current;
-              }
-              current = current.parentElement;
-            }
-          }
-          return null;
-        };
-
-        const gridContainer = findThisGridContainer();
-        if (!gridContainer) {
-          // Zkusíme znovu za chvíli
-          setTimeout(setupGridObserver, 100);
-          return;
-        }
-
-        gridContainerRef.current = gridContainer;
-
-        // Přidáme mouse event listenery pouze pokud ještě nejsou
-        if (!mouseListenersSetupRef.current) {
-          gridContainer.addEventListener('mousemove', handleMouseMove, {
-            passive: true,
-          });
-          gridContainer.addEventListener('mouseleave', handleMouseLeave, {
-            passive: true,
-          });
-
-          // DŮLEŽITÉ: Přidáme také mouseenter pro reset při vstupu do gridu
-          const handleMouseEnter = () => {
-            if (isMountedRef.current) {
-              // Reset stavu při vstupu do gridu
-              currentHoveredRowRef.current = null;
-              setIsRowHovered(false);
-            }
-          };
-          gridContainer.addEventListener('mouseenter', handleMouseEnter, {
-            passive: true,
-          });
-
-          mouseListenersSetupRef.current = true;
-        }
-
-        // Nastavíme MutationObserver pro tento grid
-        observerRef.current = new MutationObserver((mutations) => {
-          if (!isMountedRef.current) return;
-
-          let shouldRecalculate = false;
-
-          mutations.forEach((mutation) => {
-            if (mutation.type === 'childList') {
-              const addedRows = Array.from(mutation.addedNodes).some(
-                (node) =>
-                  node.nodeType === Node.ELEMENT_NODE &&
-                  (node.classList?.contains('ag-row') ||
-                    node.querySelector?.('.ag-row'))
-              );
-
-              const removedRows = Array.from(mutation.removedNodes).some(
-                (node) =>
-                  node.nodeType === Node.ELEMENT_NODE &&
-                  (node.classList?.contains('ag-row') ||
-                    node.querySelector?.('.ag-row'))
-              );
-
-              if (addedRows || removedRows) {
-                shouldRecalculate = true;
-              }
-            }
-          });
-
-          if (shouldRecalculate) {
-            // Reset hover stavu
-            currentHoveredRowRef.current = null;
-            setIsRowHovered(false);
-
-            // Znovu detekujeme aktuální pozici myši po krátké době
-            setTimeout(() => {
-              if (isMountedRef.current && gridContainerRef.current) {
-                const rect = gridContainerRef.current.getBoundingClientRect();
-                const mouseEvent = new MouseEvent('mousemove', {
-                  clientX: window.lastMouseX || rect.left + rect.width / 2,
-                  clientY: window.lastMouseY || rect.top + rect.height / 2,
-                  bubbles: true,
-                });
-                gridContainerRef.current.dispatchEvent(mouseEvent);
-              }
-            }, 100);
-          }
-        });
-
-        // Spustíme observer na grid container
-        observerRef.current.observe(gridContainer, {
-          childList: true,
-          subtree: true,
-          attributes: false,
-        });
-
-        // Sledujeme pozici myši globálně pro tento observer
-        const trackMouse = (e) => {
-          window.lastMouseX = e.clientX;
-          window.lastMouseY = e.clientY;
-        };
-
-        document.addEventListener('mousemove', trackMouse, { passive: true });
-
-        // Cleanup tracking při unmount
-        return () => {
-          document.removeEventListener('mousemove', trackMouse);
-        };
-      }, [params.api, params.eGridCell, handleMouseMove, handleMouseLeave]);
-
-      // Spustíme setup při mount a při změně params
-      React.useEffect(() => {
-        setupGridObserver();
-      }, [setupGridObserver]);
-
-      const handleVisibleChange = React.useCallback(
-        async (visible) => {
-          if (!isMountedRef.current) return;
-
-          if (visible && onBeforeShow) {
-            try {
-              const updatedMenuItems = await onBeforeShow(params, menuItems);
-              if (
-                updatedMenuItems &&
-                Array.isArray(updatedMenuItems) &&
-                isMountedRef.current
-              ) {
-                setCurrentMenuItems(updatedMenuItems);
-              }
-            } catch (error) {
-              // Removed console.error for production
-              if (isMountedRef.current) {
-                setCurrentMenuItems(menuItems);
-              }
-            }
-          }
-
-          if (isMountedRef.current) {
-            setIsDropdownVisible(visible);
-          }
-        },
-        [params, menuItems, onBeforeShow]
-      );
-
-      React.useEffect(() => {
-        if (isMountedRef.current) {
-          setCurrentMenuItems(menuItems);
-        }
-      }, [menuItems]);
-
-      const menu = React.useMemo(
-        () => (
-          <Menu
-            onClick={(e) => {
-              if (onActionClick) {
-                const item = currentMenuItems.filter(f => f.key === e.key)[0];
-                onActionClick(e.key, params, item);
-              }
-              setIsDropdownVisible(false);
-            }}
-          >
-            {currentMenuItems.map((item) => {
-              if (item.type === 'divider') {
-                return <Divider key={item.key} style={{ margin: '4px 0' }} />;
-              }
-
-              let isDisabled = false;
-              if (typeof item.disable === 'function') {
-                isDisabled = item.disable(params);
-              } else if (typeof item.disable === 'boolean') {
-                isDisabled = item.disable;
-              } else if (item.disabled !== undefined) {
-                isDisabled = item.disabled;
-              }
-
-              return (
-                <Menu.Item key={item.key} disabled={isDisabled}>
-                  {item.label}
-                </Menu.Item>
-              );
-            })}
-          </Menu>
-        ),
-        [currentMenuItems, onActionClick, params]
-      );
-
-      const containerStyle = {
-        width: '32px',
-        height: '32px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        position: 'relative',
-      };
-
-      const buttonStyle = {
-        minWidth: 'auto',
-        width: '32px',
-        height: '32px',
-        padding: '0',
-        background: 'transparent',
-        border: 'none',
-        cursor: 'pointer',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        opacity: isRowHovered || isDropdownVisible ? 1 : 0,
-        visibility: isRowHovered || isDropdownVisible ? 'visible' : 'hidden',
-        transition: 'opacity 0.15s ease-in-out, visibility 0.15s ease-in-out',
-        pointerEvents: isRowHovered || isDropdownVisible ? 'auto' : 'none',
-      };
-
-      return (
-        <div style={containerStyle}>
-          <Dropdown
-            overlayStyle={{ zIndex: 5000 }}
-            overlay={menu}
-            trigger={['click']}
-            visible={isDropdownVisible}
-            onVisibleChange={handleVisibleChange}
-            getPopupContainer={() => document.body}
-          >
-            <div
-              style={buttonStyle}
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-            >
-              <ActionIcon />
-            </div>
-          </Dropdown>
-        </div>
-      );
-    };
-
-    this.#addPreparedColumn({
-      headerName: '',
-      pinned: 'right',
-      maxWidth: 40,
-      minWidth: 40,
-      suppressSizeToFit: true,
-      suppressMenu: true,
-      sortable: false,
-      filter: false,
-      resizable: false,
-      cellRenderer: ActionDropdownRenderer,
-      cellClass: 'action-button-cell-observer',
-      ...restProps,
-    });
-
-    return this;
-  }
-
-  /**
-   * Přidá sloupec s custom tlačítky s podmíněnou viditelností.
-   * Každé tlačítko může mít vlastní styl, akci a podmínku viditelnosti.
-   * @param {Object} config - Konfigurace tlačítkového sloupce
-   * @param {Array} config.buttons - Array definic tlačítek s vlastnostmi jako text, onClick, style
-   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost tlačítek
-   * @param {boolean} config.editable - Zda je sloupec editovatelný
-   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
-   * @returns {ColumnBuilder} Instance pro chaining
-   */
-  addButtonColumn({
-    buttons,
-    visibleGetter = () => true,
-    editable,
-    ...restProps
-  }) {
-    const buttonRendererParams = {
-      buttons,
-      visibleGetter,
-    };
-    this.#addPreparedColumn({
-      buttonRenderer: true,
-      buttonRendererParams,
-      editable: this.#resolveEditable(editable),
-      ...restProps,
-    });
-    return this;
-  }
-
-  /**
-   * Privátní pomocná metoda pro správné nastavení editable vlastnosti sloupce.
-   * Zajišťuje konzistentní zpracování boolean hodnot pro editovatelnost.
-   * @param {boolean|Function} editable - Editovatelnost sloupce nebo funkce vracející boolean
-   * @returns {boolean|Function} Upravená hodnota editovatelnosti
-   */
-  #resolveEditable(editable) {
-    if (!editable) return false;
-    return editable;
-  }
-
-  /**
-   * Finální metoda pro sestavení pole sloupců AG Grid.
-   * Vrací kompletní konfiguraci všech přidaných sloupců připravených pro AG Grid.
-   * @returns {Array} Array připravených definic sloupců pro AG Grid
-   */
-  build() {
-    return this.columns;
-  }
-}
-
-export default ColumnBuilder;
+/* eslint-disable */
+import * as React from 'react';
+import Menu from 'antd/es/menu';
+import Dropdown from 'antd/es/dropdown';
+import Button from 'antd/es/button';
+import Divider from 'antd/es/divider';
+import { prepareCellStyle, prepareColDef, getValueByPath } from './functions';
+import { currencySymbols } from './enums';
+import { ActionIcon } from './Icons';
+import { CircleHelp, Check, X } from 'lucide-react';
+
+/**
+ * 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.
+ * Tento hook se používá pro akční tlačítka, která se zobrazují pouze při hoveru nad řádkem.
+ * @param {Object} params - AG Grid parametry buňky obsahující informace o řádku
+ * @returns {Object} Objekt s boolean příznakem isRowHovered
+ */
+const useRowHoverActionRenderer = (params) => {
+  const [isRowHovered, setIsRowHovered] = React.useState(false);
+  const rowRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (!params.node) return undefined;
+
+    // Funkce pro kontrolu, zda je řádek v hover stavu
+    const checkRowHoverState = () => {
+      // Najdeme DOM element řádku pomocí rowIndex
+      const rowElement = document.querySelector(
+        `.ag-row[row-index="${params.rowIndex}"]`
+      );
+      if (rowElement) {
+        rowRef.current = rowElement;
+        // AG-Grid automaticky přidává třídu ag-row-hover k řádku při najetí myší
+        const isHovered = rowElement.classList.contains('ag-row-hover');
+        setIsRowHovered(isHovered);
+      }
+    };
+
+    // Vytvoříme MutationObserver pro sledování změn tříd na řádku
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.attributeName === 'class'
+        ) {
+          checkRowHoverState();
+        }
+      });
+    });
+
+    // Inicializujeme stav
+    checkRowHoverState();
+
+    // Přidáme observer k element řádku, pokud existuje
+    if (rowRef.current) {
+      observer.observe(rowRef.current, { attributes: true });
+    }
+
+    // Přidáme event listeners na grid container pro sledování pohybu myši
+    const gridContainer = document.querySelector('.ag-root-wrapper');
+    if (gridContainer) {
+      gridContainer.addEventListener('mouseover', checkRowHoverState);
+      gridContainer.addEventListener('mouseout', checkRowHoverState);
+    }
+
+    // Cleanup při odmontování komponenty
+    return () => {
+      if (rowRef.current) {
+        observer.disconnect();
+      }
+      if (gridContainer) {
+        gridContainer.removeEventListener('mouseover', checkRowHoverState);
+        gridContainer.removeEventListener('mouseout', checkRowHoverState);
+      }
+    };
+  }, [params.node, params.rowIndex]);
+
+  return {
+    isRowHovered,
+  };
+};
+
+/**
+ * ColumnBuilder třída pro builder pattern vytváření sloupců AG Grid.
+ * Poskytuje fluent API pro snadné a čitelné definování různých typů sloupců.
+ * Podporuje lokalizaci přes react-intl a automatickou konfiguraci sloupců.
+ */
+class ColumnBuilder {
+  /**
+   * Privátní metoda pro přidání připraveného sloupce do kolekce.
+   * Aplikuje standardní konfiguraci sloupce včetně lokalizace.
+   * @param {Object} props - Konfigurace sloupce
+   */
+  #addPreparedColumn(props) {
+    this.columns.push(prepareColDef(this.intl, props));
+  }
+
+  /**
+   * Konstruktor ColumnBuilder třídy.
+   * @param {Object} intl - React-intl objekt pro lokalizaci
+   */
+  constructor(intl) {
+    this.columns = [];
+    this.intl = intl;
+  }
+
+  /**
+   * Přidá základní sloupec do AG Grid s podporou barevného pole.
+   * Umožňuje dynamické obarvení textu buňky na základě hodnoty z jiného pole.
+   * @param {Object} config - Konfigurace sloupce
+   * @param {string} config.colorField - Název pole obsahujícího barvu pro text buňky
+   * @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí buňky
+   * @param {Object} ...props - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addColumn({ colorField, bgColorField, ...props }) {
+    // Získáme původní cellStyle, pokud existuje
+    const originalCellStyle = props.cellStyle;
+    const { cellAlign, ...restProps } = props;
+
+    // Pokud je zadáno colorField nebo bgColorField, vytvoříme novou funkci pro cellStyle
+    if (colorField || bgColorField) {
+      const overrideCellStyle = (params) => {
+        // Získáme základní styl
+        let baseStyle = {};
+        if (originalCellStyle) {
+          if (typeof originalCellStyle === 'function') {
+            baseStyle = originalCellStyle(params);
+          } else {
+            baseStyle = originalCellStyle;
+          }
+        }
+
+        // Získáme hodnotu barvy textu z dat
+        const colorValue =
+          colorField && params.data ? getValueByPath(params.data, colorField) : null;
+        
+        // Získáme hodnotu barvy pozadí z dat
+        const bgColorValue =
+          bgColorField && params.data ? getValueByPath(params.data, bgColorField) : null;
+        
+        const restStyle = prepareCellStyle(props);
+        
+        // Vrátíme kombinovaný styl s barvou textu i pozadí
+        const newStyle = { ...baseStyle, ...restStyle };
+        if (colorValue) {
+          newStyle.color = colorValue;
+        }
+        if (bgColorValue) {
+          newStyle.backgroundColor = bgColorValue;
+        }
+        
+        return newStyle;
+      };
+
+      // Předáme upravené props do addPreparedColumn
+      this.#addPreparedColumn({ ...restProps, overrideCellStyle });
+    } else {
+      // Pokud není colorField ani bgColorField zadán, použijeme původní implementaci
+      this.#addPreparedColumn(props);
+    }
+
+    return this;
+  }
+
+  /**
+   * Přidá sloupec s kartou faktury optimalizovaný pro overview mód.
+   * Zobrazuje fakturační informace v kartovém formátu s podporou checkboxu.
+   * @param {Object} config - Konfigurace sloupce
+   * @param {string} [config.field='invoice'] - Název datového pole
+   * @param {string} [config.headerName=''] - Název hlavičky sloupce
+   * @param {number} [config.width=340] - Šířka sloupce
+   * @param {Function} config.onCheckboxChange - Callback při změně stavu checkboxu
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addInvoiceCardColumn({
+    field = 'invoice',
+    headerName = '',
+    width = 340,
+    onCheckboxChange,
+    ...restProps
+  } = {}) {
+    const cellRenderer = 'invoiceCardRenderer';
+
+    this.#addPreparedColumn({
+      headerName,
+      field,
+      width,
+      cellRenderer,
+      suppressSizeToFit: true,
+      cellRendererParams: {
+        onCheckboxChange:
+          onCheckboxChange ||
+          (() => {
+            // Funkce bez console.log
+          }),
+      },
+      ...restProps,
+    });
+
+    return this;
+  }
+
+  /**
+   * Přidá sloupec pro zobrazení měny s podporou různých formátů a pozicování symbolu.
+   * Automaticky formátuje hodnoty jako měnu s dvěma desetinnými místy.
+   * @param {Object} config - Konfigurace měnového sloupce
+   * @param {string|Function} config.currency - Kód měny nebo funkce vracející kód měny
+   * @param {string} [config.position] - Pozice symbolu měny ('left' nebo 'right')
+   * @param {Object|Function} config.currencyStyle - CSS styl pro symbol měny
+   * @param {string} [config.cellAlign='right'] - Zarovnání obsahu buňky
+   * @param {boolean} config.editable - Zda je sloupec editovatelný
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addCurrencyColumn({
+    currency,
+    position,
+    currencyStyle,
+    cellAlign = 'right',
+    editable,
+    ...restProps
+  }) {
+    const cellRenderer = (params) => {
+      const currencyValue =
+        typeof currency === 'function' ? currency(params) : currency;
+      const symbol = currencySymbols[currencyValue] || currencyValue;
+
+      // Použití Number.isNaN místo globální isNaN
+      const value =
+        params.value != null && !Number.isNaN(Number(params.value))
+          ? params.value.toFixed(2)
+          : '0.00';
+
+      const style =
+        typeof currencyStyle === 'function'
+          ? currencyStyle(params)
+          : currencyStyle;
+
+      return (
+        <span>
+          {position === 'left' ? (
+            <>
+              <span style={style}>{symbol}</span> {value}
+            </>
+          ) : (
+            <>
+              {value} <span style={style}>{symbol}</span>
+            </>
+          )}
+        </span>
+      );
+    };
+
+    this.#addPreparedColumn({
+      cellAlign,
+      cellRenderer,
+      currency,
+      editable: this.#resolveEditable(editable),
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Přidá sloupec pro zobrazení data s možností specifikace formátu.
+   * Používá standardní AG Grid date renderer s českým formátováním.
+   * @param {Object} config - Konfigurace datového sloupce
+   * @param {string} [config.dateFormat='DD.MM.YYYY'] - Formát zobrazení data
+   * @param {boolean} config.editable - Zda je sloupec editovatelný
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addDateColumn({ dateFormat = 'DD.MM.YYYY', editable, ...restProps }) {
+    this.#addPreparedColumn({
+      dateRenderer: dateFormat,
+      editable: this.#resolveEditable(editable),
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Přidá sloupec s klikatelným linkem podporujícím hover efekty.
+   * Link může spouštět akce nebo přepínat overview mód v gridu.
+   * @param {Object} config - Konfigurace linkového sloupce
+   * @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
+   * @param {string} [config.cellAlign='left'] - Zarovnání obsahu buňky
+   * @param {boolean} config.editable - Zda je sloupec editovatelný
+   * @param {boolean} [config.overviewToggle=false] - Zda aktivovat overview toggle
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addLinkColumn({
+    onClick,
+    linkStyle,
+    hoverStyle,
+    cellAlign = 'left',
+    editable,
+    overviewToggle = false, // Přidán výchozí parametr pro overview
+    ...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 (
+        <div
+          className="link-cell-container"
+          style={{
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <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);
+              }
+            }}
+          >
+            {params.value}
+          </span>
+        </div>
+      );
+    });
+
+    // Používáme funkci, která vrátí React komponentu
+    const cellRenderer = (params) => {
+      return <LinkCellRenderer {...params} />;
+    };
+
+    this.#addPreparedColumn({
+      cellAlign,
+      cellRenderer,
+      editable: this.#resolveEditable(editable),
+      overviewToggle, // Předání příznaku dál
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Helper metoda pro přidání overview link sloupce s přednastavenými hodnotami.
+   * Specializovaný link sloupec pro přepínání overview módu v gridu.
+   * @param {Object} config - Konfigurace overview link sloupce
+   * @param {string} [config.field='documentNumber'] - Název datového pole
+   * @param {string} [config.headerName=''] - Název hlavičky sloupce
+   * @param {number} [config.width=130] - Šířka sloupce
+   * @param {string} [config.cellAlign='left'] - Zarovnání obsahu buňky
+   * @param {Object|Function} config.linkStyle - CSS styl pro link
+   * @param {Object|Function} config.hoverStyle - CSS styl pro hover stav
+   * @param {boolean} [config.editable=false] - Zda je sloupec editovatelný
+   * @param {Object} ...rest - Další AG Grid vlastnosti sloupce včetně intlId
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addOverviewLinkColumn({
+    field = 'documentNumber',
+    headerName = '',
+    width = 130,
+    cellAlign = 'left',
+    linkStyle,
+    hoverStyle,
+    editable = false,
+    ...rest
+  } = {}) {
+    return this.addLinkColumn({
+      field,
+      headerName: this?.intl?.formatMessage({ id: rest?.intlId }) || headerName,
+      width,
+      cellAlign,
+      linkStyle,
+      hoverStyle,
+      editable,
+      overviewToggle: true,
+      ...rest,
+    });
+  }
+
+  /**
+   * Přidá sloupec pro zobrazení objektů s možností editace a tooltip podporou.
+   * Při hoveru zobrazuje edit tlačítko pro editovatelné objekty.
+   * @param {Object} config - Konfigurace objektového sloupce
+   * @param {boolean} config.contentTooltip - Zda zobrazovat tooltip s obsahem
+   * @param {string} config.tooltipField - Pole obsahující text pro tooltip
+   * @param {boolean} config.tooltipInteraction - Zda povolit interakci s tooltipem
+   * @param {number} [config.tooltipShowDelay=100] - Zpoždění zobrazení tooltipu v ms
+   * @param {boolean} config.editable - Zda je objekt editovatelný
+   * @param {Function} config.onEditClick - Callback při kliku na edit tlačítko
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addObjectColumn({
+    contentTooltip,
+    tooltipField,
+    tooltipInteraction,
+    tooltipShowDelay = 100,
+    editable,
+    onEditClick,
+    ...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 (
+        <div
+          className="object-cell-container"
+          style={{
+            position: 'relative',
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+          }}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          <div style={{ flexGrow: 1 }}>{params.value}</div>
+          {isHovered && editable && (
+            <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"
+            >
+              <span style={{ fontSize: '16px' }}>⋮</span>
+            </button>
+          )}
+        </div>
+      );
+    });
+
+    // Používáme funkci, která vrátí React komponentu
+    const cellRenderer = (params) => {
+      return <ObjectCellRenderer {...params} />;
+    };
+
+    this.#addPreparedColumn({
+      contentTooltip,
+      tooltipField,
+      tooltipInteraction,
+      tooltipShowDelay,
+      cellRenderer,
+      editable: this.#resolveEditable(editable),
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Přidá sloupec pro zobrazení ikon s podporou badge (číselného označení).
+   * Umožňuje podmíněné zobrazování ikon a jejich stylování.
+   * @param {Object} config - Konfigurace ikonového sloupce
+   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost ikony
+   * @param {string} config.cellAlign - Zarovnání ikony v buňce
+   * @param {string|Function} config.icon - Název ikony nebo funkce vracející ikonu
+   * @param {string|Function} [config.iconColor] - Barva ikony nebo funkce vracející barvu podle parametrů
+   * @param {number} [config.size=16] - Velikost ikony v pixelech
+   * @param {boolean} [config.iconLeft=false] - Zda zobrazit ikonu vlevo od textu
+   * @param {boolean} [config.iconRight=false] - Zda zobrazit ikonu vpravo od textu
+   * @param {boolean} [config.showText=true] - Zda zobrazit text (hodnotu pole)
+   * @param {number} [config.textGap=5] - Mezera mezi ikonou a textem v pixelech
+   * @param {boolean} [config.showOnGroup=false] - Zda zobrazit ikonu na skupinových řádcích
+   * @param {string|number|Function} config.badge - Text/číslo badge nebo funkce vracející badge
+   * @param {boolean} config.showZero - Zda zobrazit badge s hodnotou 0
+   * @param {string} [config.badgeColor='#dc3545'] - Barva pozadí badge
+   * @param {string} [config.badgeTextColor='white'] - Barva textu badge
+   * @param {string} [config.badgePosition='top-right'] - Pozice badge ('top-right', 'top-left', 'bottom-right', 'bottom-left')
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addIconColumn({
+    visibleGetter = () => true,
+    cellAlign,
+    icon,
+    iconColor,
+    size = 16,
+    iconLeft = false,
+    iconRight = false,
+    showText = true,
+    textGap = 5,
+    showOnGroup = false,
+    badge,
+    showZero,
+    badgeColor = '#dc3545',
+    badgeTextColor = 'white',
+    badgePosition = 'top-right',
+    ...restProps
+  }) {
+    const iconRendererParams = {
+      cellAlign,
+      visibleGetter,
+      icon,
+      iconColor,
+      size,
+      iconLeft,
+      iconRight,
+      showText,
+      textGap,
+      showOnGroup,
+      badge,
+      showZero,
+      badgeColor,
+      badgeTextColor,
+      badgePosition,
+    };
+    this.#addPreparedColumn({
+      iconRenderer: true,
+      iconRendererParams,
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Přidá sloupec pro zobrazování stavů s kruhovým pozadím.
+   * Zobrazuje text stavu v kruhovém pozadí s definovanou barvou.
+   * @param {Object} config - Konfigurace stavového sloupce
+   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost
+   * @param {string} [config.cellAlign='center'] - Zarovnání v buňce
+   * @param {string|Function} [config.bgColor] - Barva pozadí nebo funkce vracející barvu podle parametrů
+   * @param {string|Function} [config.textColor='white'] - Barva textu nebo funkce vracející barvu
+   * @param {string|Function} [config.displayField] - Pole pro zobrazení textu (pokud se liší od field)
+   * @param {number} [config.minWidth=80] - Minimální šířka kruhového pozadí
+   * @param {number} [config.fontSize=12] - Velikost fontu
+   * @param {boolean} [config.showOnGroup=false] - Zda zobrazit na skupinových řádcích
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addStateColumn({
+    visibleGetter = () => true,
+    cellAlign = 'center',
+    bgColor,
+    textColor = 'white',
+    displayField,
+    minWidth = 80,
+    fontSize = 12,
+    showOnGroup = false,
+    ...restProps
+  }) {
+    const stateRendererParams = {
+      visibleGetter,
+      cellAlign,
+      bgColor,
+      textColor,
+      displayField,
+      minWidth,
+      fontSize,
+      showOnGroup,
+    };
+    this.#addPreparedColumn({
+      stateRenderer: true,
+      stateRendererParams,
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Přidá sloupec pro zobrazení boolean hodnot pomocí ikon (zaškrtnutí/křížek).
+   * Podporuje různé ikony pro true/false stav a podmíněnou viditelnost.
+   * @param {Object} config - Konfigurace boolean sloupce
+   * @param {boolean} [config.visibleFalse=true] - Zda zobrazit ikonu pro false hodnotu
+   * @param {boolean} [config.visibleTrue=true] - Zda zobrazit ikonu pro true hodnotu
+   * @param {string} [config.cellAlign='center'] - Zarovnání ikony v buňce
+   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost ikony
+   * @param {boolean} [config.defaultIcon=true] - Zda zobrazit výchozí ikonu pro undefined hodnoty
+   * @param {string} [config.defaultIconColor='#898989'] - Barva výchozí ikony
+   * @param {number} [config.size=16] - Velikost ikony v pixelech
+   * @param {string} [config.colorTrue='green'] - Barva ikony pro true hodnotu
+   * @param {string} [config.colorFalse='red'] - Barva ikony pro false hodnotu
+   * @param {boolean} [config.showOnGroup=false] - Zda zobrazit ikonu na skupinových řádcích
+   * @param {boolean} config.editable - Zda je sloupec editovatelný
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @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,
+    ...restProps
+  }) {
+    // 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 ||
+          (!visibleFalse && !innerValue) ||
+          (!visibleTrue && innerValue)
+        ) {
+          if (defaultIcon)
+            return <CircleHelp size={size} color={defaultIconColor} {...iconProps} />;
+          return <div />;
+        }
+
+        if (innerValue)
+          return <Check size={size} color={colorTrue} {...iconProps} />;
+        return <X size={size} color={colorFalse} {...iconProps} />;
+      };
+
+      const showCondition = () => {
+        const newItem = (data && data._rh_plus_ag_grid_new_item) || false;
+        return !newItem && (showOnGroup || !!data) && visibleResult;
+      };
+
+      if (!showCondition()) return null;
+
+      return (
+        <span
+          style={{
+            width: '100%',
+            display: 'flex',
+            justifyContent: cellAlign,
+            alignItems: 'center',
+            height: '100%',
+          }}
+        >
+          <Icon
+            style={{
+              display: 'inline-block',
+              height: '100%',
+            }}
+            innerValue={value}
+            visibleTrue={visibleTrue}
+            visibleFalse={visibleFalse}
+          />
+        </span>
+      );
+    });
+
+    // Use the function that returns React component
+    const cellRenderer = (params) => {
+      return <BooleanCellRenderer {...params} />;
+    };
+
+    this.#addPreparedColumn({
+      cellRenderer,
+      editable: this.#resolveEditable(editable),
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Přidá připnutý akční sloupec s dropdown menu, který se zobrazuje pouze při hoveru nad řádkem.
+   * Používa pokročilou detekci hover stavu s MutationObserver pro každou instanci gridu zvlášť.
+   * Sloupec je automaticky připnut vpravo a obsahuje akční tlačítko s kontextovým menu.
+   * @param {Object} config - Konfigurace akčního sloupce
+   * @param {Array} [config.menuItems=[]] - Array položek menu s key, label, disable vlastnostmi
+   * @param {Function} config.onActionClick - Callback při kliku na položku menu (key, params, item)
+   * @param {Function} config.onBeforeShow - Async callback před zobrazením menu pro dynamické položky
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addPinnedActionButton({
+    menuItems = [],
+    onActionClick,
+    onBeforeShow,
+    ...restProps
+  } = {}) {
+    const ActionDropdownRenderer = (params) => {
+      const [isRowHovered, setIsRowHovered] = React.useState(false);
+      const [isDropdownVisible, setIsDropdownVisible] = React.useState(false);
+      const [currentMenuItems, setCurrentMenuItems] = React.useState(menuItems);
+
+      const isMountedRef = React.useRef(true);
+      const rowIndexRef = React.useRef(null);
+      const observerRef = React.useRef(null);
+      const gridContainerRef = React.useRef(null);
+      const currentHoveredRowRef = React.useRef(null);
+      const mouseListenersSetupRef = React.useRef(false);
+
+      React.useEffect(() => {
+        return () => {
+          isMountedRef.current = false;
+          cleanup();
+        };
+      }, []);
+
+      // Cleanup funkce
+      const cleanup = () => {
+        if (observerRef.current) {
+          observerRef.current.disconnect();
+          observerRef.current = null;
+        }
+
+        if (gridContainerRef.current && mouseListenersSetupRef.current) {
+          gridContainerRef.current.removeEventListener(
+            'mousemove',
+            handleMouseMove
+          );
+          gridContainerRef.current.removeEventListener(
+            'mouseleave',
+            handleMouseLeave
+          );
+          // gridContainerRef.current.removeEventListener(
+          //   'mouseenter',
+          //   handleMouseEnter
+          // );
+          mouseListenersSetupRef.current = false;
+        }
+      };
+
+      // Získáme row index z params
+      React.useEffect(() => {
+        if (params.node && params.node.rowIndex !== undefined) {
+          rowIndexRef.current = params.node.rowIndex.toString();
+        } else if (params.rowIndex !== undefined) {
+          rowIndexRef.current = params.rowIndex.toString();
+        }
+      }, [params.node, params.rowIndex]);
+
+      // Mouse event handlers
+      const handleMouseMove = React.useCallback((event) => {
+        if (!isMountedRef.current) return;
+
+        const target = event.target;
+        if (!target) return;
+
+        // Najdeme nejbližší AG-Grid row element
+        let rowElement = target.closest('.ag-row');
+
+        if (rowElement) {
+          // Získáme row index z AG-Grid attributů
+          const rowIndex =
+            rowElement.getAttribute('row-index') ||
+            rowElement.getAttribute('aria-rowindex') ||
+            rowElement.dataset.rowIndex ||
+            rowElement.getAttribute('data-ag-row-index');
+
+          if (rowIndex !== null) {
+            const normalizedRowIndex = rowIndex.toString();
+
+            // KLÍČOVÁ ZMĚNA: Explicitně resetujeme předchozí řádek při změně
+            if (normalizedRowIndex !== currentHoveredRowRef.current) {
+              // Pokud jsme měli předchozí řádek, nastavíme mu hover false
+              if (currentHoveredRowRef.current !== null) {
+                notifyRowHoverChange(currentHoveredRowRef.current, false);
+              }
+
+              // Nastavíme nový řádek jako hovered
+              currentHoveredRowRef.current = normalizedRowIndex;
+              notifyRowHoverChange(normalizedRowIndex, true);
+            }
+          }
+        } else {
+          // Myš není nad žádným řádkem - resetujeme všechny
+          if (currentHoveredRowRef.current !== null) {
+            notifyRowHoverChange(currentHoveredRowRef.current, false);
+            currentHoveredRowRef.current = null;
+          }
+        }
+      }, []);
+
+      const handleMouseLeave = React.useCallback((event) => {
+        if (!isMountedRef.current) return;
+
+        // Lepší detekce opuštění gridu
+        const relatedTarget = event.relatedTarget;
+
+        // Pokud myš opustí celý grid container NEBO jde mimo dokument
+        if (
+          gridContainerRef.current &&
+          (!relatedTarget || !gridContainerRef.current.contains(relatedTarget))
+        ) {
+          if (currentHoveredRowRef.current !== null) {
+            notifyRowHoverChange(currentHoveredRowRef.current, false);
+            currentHoveredRowRef.current = null;
+          }
+        }
+      }, []);
+
+      // Notifikace o změně hover stavu pro tento specifický grid
+      const notifyRowHoverChange = (rowIndex, isHovered) => {
+        if (!isMountedRef.current) return;
+
+        // EXPLICITNÍ ŘÍZENÍ: Pokud nastavujeme hover false, resetujeme stav pro všechny řádky
+        if (!isHovered && rowIndexRef.current) {
+          setIsRowHovered(false);
+        }
+
+        // Pokud je toto náš řádek a nastavujeme hover true, aktualizujeme stav
+        if (isHovered && rowIndexRef.current === rowIndex) {
+          setIsRowHovered(true);
+        }
+      };
+
+      // Nastavení observer pro tento konkrétní grid
+      const setupGridObserver = React.useCallback(() => {
+        if (!params.api || observerRef.current || !isMountedRef.current) return;
+
+        // Najdeme grid container pro tento konkrétní grid instance
+        const findThisGridContainer = () => {
+          if (params.eGridCell) {
+            let current = params.eGridCell;
+            while (current && current !== document.body) {
+              if (
+                current.classList &&
+                (current.classList.contains('ag-root-wrapper') ||
+                  current.classList.contains('ag-theme-alpine') ||
+                  current.classList.contains('ag-theme-balham') ||
+                  current.classList.contains('ag-theme-material') ||
+                  current.classList.contains('ag-theme-fresh') ||
+                  current.classList.contains('ag-theme-dark') ||
+                  current.classList.contains('ag-theme-blue') ||
+                  current.classList.contains('ag-theme-bootstrap'))
+              ) {
+                return current;
+              }
+              current = current.parentElement;
+            }
+          }
+          return null;
+        };
+
+        const gridContainer = findThisGridContainer();
+        if (!gridContainer) {
+          // Zkusíme znovu za chvíli
+          setTimeout(setupGridObserver, 100);
+          return;
+        }
+
+        gridContainerRef.current = gridContainer;
+
+        // Přidáme mouse event listenery pouze pokud ještě nejsou
+        if (!mouseListenersSetupRef.current) {
+          gridContainer.addEventListener('mousemove', handleMouseMove, {
+            passive: true,
+          });
+          gridContainer.addEventListener('mouseleave', handleMouseLeave, {
+            passive: true,
+          });
+
+          // DŮLEŽITÉ: Přidáme také mouseenter pro reset při vstupu do gridu
+          const handleMouseEnter = () => {
+            if (isMountedRef.current) {
+              // Reset stavu při vstupu do gridu
+              currentHoveredRowRef.current = null;
+              setIsRowHovered(false);
+            }
+          };
+          gridContainer.addEventListener('mouseenter', handleMouseEnter, {
+            passive: true,
+          });
+
+          mouseListenersSetupRef.current = true;
+        }
+
+        // Nastavíme MutationObserver pro tento grid
+        observerRef.current = new MutationObserver((mutations) => {
+          if (!isMountedRef.current) return;
+
+          let shouldRecalculate = false;
+
+          mutations.forEach((mutation) => {
+            if (mutation.type === 'childList') {
+              const addedRows = Array.from(mutation.addedNodes).some(
+                (node) =>
+                  node.nodeType === Node.ELEMENT_NODE &&
+                  (node.classList?.contains('ag-row') ||
+                    node.querySelector?.('.ag-row'))
+              );
+
+              const removedRows = Array.from(mutation.removedNodes).some(
+                (node) =>
+                  node.nodeType === Node.ELEMENT_NODE &&
+                  (node.classList?.contains('ag-row') ||
+                    node.querySelector?.('.ag-row'))
+              );
+
+              if (addedRows || removedRows) {
+                shouldRecalculate = true;
+              }
+            }
+          });
+
+          if (shouldRecalculate) {
+            // Reset hover stavu
+            currentHoveredRowRef.current = null;
+            setIsRowHovered(false);
+
+            // Znovu detekujeme aktuální pozici myši po krátké době
+            setTimeout(() => {
+              if (isMountedRef.current && gridContainerRef.current) {
+                const rect = gridContainerRef.current.getBoundingClientRect();
+                const mouseEvent = new MouseEvent('mousemove', {
+                  clientX: window.lastMouseX || rect.left + rect.width / 2,
+                  clientY: window.lastMouseY || rect.top + rect.height / 2,
+                  bubbles: true,
+                });
+                gridContainerRef.current.dispatchEvent(mouseEvent);
+              }
+            }, 100);
+          }
+        });
+
+        // Spustíme observer na grid container
+        observerRef.current.observe(gridContainer, {
+          childList: true,
+          subtree: true,
+          attributes: false,
+        });
+
+        // Sledujeme pozici myši globálně pro tento observer
+        const trackMouse = (e) => {
+          window.lastMouseX = e.clientX;
+          window.lastMouseY = e.clientY;
+        };
+
+        document.addEventListener('mousemove', trackMouse, { passive: true });
+
+        // Cleanup tracking při unmount
+        return () => {
+          document.removeEventListener('mousemove', trackMouse);
+        };
+      }, [params.api, params.eGridCell, handleMouseMove, handleMouseLeave]);
+
+      // Spustíme setup při mount a při změně params
+      React.useEffect(() => {
+        setupGridObserver();
+      }, [setupGridObserver]);
+
+      const handleVisibleChange = React.useCallback(
+        async (visible) => {
+          if (!isMountedRef.current) return;
+
+          if (visible && onBeforeShow) {
+            try {
+              const updatedMenuItems = await onBeforeShow(params, menuItems);
+              if (
+                updatedMenuItems &&
+                Array.isArray(updatedMenuItems) &&
+                isMountedRef.current
+              ) {
+                setCurrentMenuItems(updatedMenuItems);
+              }
+            } catch (error) {
+              // Removed console.error for production
+              if (isMountedRef.current) {
+                setCurrentMenuItems(menuItems);
+              }
+            }
+          }
+
+          if (isMountedRef.current) {
+            setIsDropdownVisible(visible);
+          }
+        },
+        [params, menuItems, onBeforeShow]
+      );
+
+      React.useEffect(() => {
+        if (isMountedRef.current) {
+          setCurrentMenuItems(menuItems);
+        }
+      }, [menuItems]);
+
+      const menu = React.useMemo(
+        () => (
+          <Menu
+            onClick={(e) => {
+              if (onActionClick) {
+                const item = currentMenuItems.filter(f => f.key === e.key)[0];
+                onActionClick(e.key, params, item);
+              }
+              setIsDropdownVisible(false);
+            }}
+          >
+            {currentMenuItems.map((item) => {
+              if (item.type === 'divider') {
+                return <Divider key={item.key} style={{ margin: '4px 0' }} />;
+              }
+
+              let isDisabled = false;
+              if (typeof item.disable === 'function') {
+                isDisabled = item.disable(params);
+              } else if (typeof item.disable === 'boolean') {
+                isDisabled = item.disable;
+              } else if (item.disabled !== undefined) {
+                isDisabled = item.disabled;
+              }
+
+              return (
+                <Menu.Item key={item.key} disabled={isDisabled}>
+                  {item.label}
+                </Menu.Item>
+              );
+            })}
+          </Menu>
+        ),
+        [currentMenuItems, onActionClick, params]
+      );
+
+      const containerStyle = {
+        width: '32px',
+        height: '32px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+      };
+
+      const buttonStyle = {
+        minWidth: 'auto',
+        width: '32px',
+        height: '32px',
+        padding: '0',
+        background: 'transparent',
+        border: 'none',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        opacity: isRowHovered || isDropdownVisible ? 1 : 0,
+        visibility: isRowHovered || isDropdownVisible ? 'visible' : 'hidden',
+        transition: 'opacity 0.15s ease-in-out, visibility 0.15s ease-in-out',
+        pointerEvents: isRowHovered || isDropdownVisible ? 'auto' : 'none',
+      };
+
+      return (
+        <div style={containerStyle}>
+          <Dropdown
+            overlayStyle={{ zIndex: 5000 }}
+            overlay={menu}
+            trigger={['click']}
+            visible={isDropdownVisible}
+            onVisibleChange={handleVisibleChange}
+            getPopupContainer={() => document.body}
+          >
+            <div
+              style={buttonStyle}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              <ActionIcon />
+            </div>
+          </Dropdown>
+        </div>
+      );
+    };
+
+    this.#addPreparedColumn({
+      headerName: '',
+      pinned: 'right',
+      maxWidth: 40,
+      minWidth: 40,
+      suppressSizeToFit: true,
+      suppressMenu: true,
+      sortable: false,
+      filter: false,
+      resizable: false,
+      cellRenderer: ActionDropdownRenderer,
+      cellClass: 'action-button-cell-observer',
+      ...restProps,
+    });
+
+    return this;
+  }
+
+  /**
+   * Přidá sloupec s custom tlačítky s podmíněnou viditelností.
+   * Každé tlačítko může mít vlastní styl, akci a podmínku viditelnosti.
+   * @param {Object} config - Konfigurace tlačítkového sloupce
+   * @param {Array} config.buttons - Array definic tlačítek s vlastnostmi jako text, onClick, style
+   * @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost tlačítek
+   * @param {boolean} config.editable - Zda je sloupec editovatelný
+   * @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
+   * @returns {ColumnBuilder} Instance pro chaining
+   */
+  addButtonColumn({
+    buttons,
+    visibleGetter = () => true,
+    editable,
+    ...restProps
+  }) {
+    const buttonRendererParams = {
+      buttons,
+      visibleGetter,
+    };
+    this.#addPreparedColumn({
+      buttonRenderer: true,
+      buttonRendererParams,
+      editable: this.#resolveEditable(editable),
+      ...restProps,
+    });
+    return this;
+  }
+
+  /**
+   * Privátní pomocná metoda pro správné nastavení editable vlastnosti sloupce.
+   * Zajišťuje konzistentní zpracování boolean hodnot pro editovatelnost.
+   * @param {boolean|Function} editable - Editovatelnost sloupce nebo funkce vracející boolean
+   * @returns {boolean|Function} Upravená hodnota editovatelnosti
+   */
+  #resolveEditable(editable) {
+    if (!editable) return false;
+    return editable;
+  }
+
+  /**
+   * Finální metoda pro sestavení pole sloupců AG Grid.
+   * Vrací kompletní konfiguraci všech přidaných sloupců připravených pro AG Grid.
+   * @returns {Array} Array připravených definic sloupců pro AG Grid
+   */
+  build() {
+    return this.columns;
+  }
+}
+
+export default ColumnBuilder;
 /* eslint-enable */