@bit.rhplus/ag-grid 0.0.122 → 0.0.124

package/Aggregations.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 // ✅ OPTIMALIZACE: Enumerable odstraněn - nahrazen native JS metodami
 import moment from 'moment';
-import { currencySymbols } from '@bit.rhplus/ui.grid/';
+import { currencySymbols } from '@bit.rhplus/ui.grid';
 
 const getColumnOrderDirection = (range) => (range.columns[0].colId === range.startColumn.colId) ? 1 : -1;
 

package/BulkEdit/useBulkCellEdit.js

@@ -17,6 +17,7 @@ export const useBulkCellEdit = (gridRef, options = {}) => {
   const {
     enabled = false,
     minCells = 2,
+    showOnSingleCell = false, // Pokud true, ikona se zobrazí již při výběru 1 buňky (přepíše minCells na 1)
     allowMultiColumn = false,
     buttonPosition = 'bottom-right',
     buttonOffset = { x: 5, y: 5 },
@@ -25,6 +26,8 @@ export const useBulkCellEdit = (gridRef, options = {}) => {
     onBulkEditComplete,
   } = options;
 
+  const effectiveMinCells = showOnSingleCell ? 1 : minCells;
+
   const { fetchDataUIAsync } = useData();
 
   const [floatingButton, setFloatingButton] = useState({
@@ -114,7 +117,7 @@ export const useBulkCellEdit = (gridRef, options = {}) => {
       if (allowMultiColumn || range.columns.length === 1) {
         const cellCount = Math.abs(range.endRow.rowIndex - range.startRow.rowIndex) + 1;
 
-        if (cellCount >= minCells) {
+        if (cellCount >= effectiveMinCells) {
           // Kontrola zda má sloupec bulkEditApi (rychlá kontrola)
           const column = range.columns[0];
           const colDef = column?.getColDef();
@@ -241,7 +244,7 @@ export const useBulkCellEdit = (gridRef, options = {}) => {
         }
       }, 50);
     },
-    [enabled, allowMultiColumn, minCells, calculateButtonPosition]
+    [enabled, allowMultiColumn, effectiveMinCells, calculateButtonPosition]
   );
 
   /**
@@ -277,7 +280,7 @@ export const useBulkCellEdit = (gridRef, options = {}) => {
         Math.abs(range.endRow.rowIndex - range.startRow.rowIndex) + 1;
 
       // Kontrola min počtu buněk
-      if (cellCount < minCells) {
+      if (cellCount < effectiveMinCells) {
         pendingFloatingButtonRef.current = null;
         setFloatingButton({ visible: false });
         return;
@@ -294,7 +297,7 @@ export const useBulkCellEdit = (gridRef, options = {}) => {
       // Jediný setFloatingButton call → eliminuje rerender #2
       setFloatingButton(pendingFloatingButtonRef.current);
     },
-    [minCells, allowMultiColumn, buttonPosition, buttonOffset, calculateButtonPosition, gridRef]
+    [effectiveMinCells, allowMultiColumn, buttonPosition, buttonOffset, calculateButtonPosition, gridRef]
   );
 
   /**

package/Editors/ModuleLookupEditor.jsx

@@ -61,6 +61,8 @@ const ModuleLookupEditor = React.forwardRef(({
   stopEditing,
   moduleDefinition,
   allowFreeText = false,
+  rowHeight = 42,
+  autoOpen = true,
 }, _ref) => {
 
   // ─── Hooks (vždy voláno) ──────────────────────────────────────────────────────
@@ -95,6 +97,8 @@ const ModuleLookupEditor = React.forwardRef(({
 
   // ─── Catalog-only stav ───────────────────────────────────────────────────────
   const [catalogSelected, setCatalogSelected] = useState(allowFreeText ? null : value);
+  // Ref pro synchronní přístup v isCancelAfterEnd (state je stale v closure při stopEditing)
+  const catalogSelectedRef = useRef(allowFreeText ? null : value);
 
   // ─── Free-text stav ──────────────────────────────────────────────────────────
   const initialText = React.useMemo(() => {
@@ -106,6 +110,12 @@ const ModuleLookupEditor = React.forwardRef(({
 
   const [inputText, setInputText] = useState(initialText);
   const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  useEffect(() => {
+    if (autoOpen) {
+      setDropdownOpen(true);
+    }
+  }, [autoOpen]);
   const [multiMatchData, setMultiMatchData] = useState([]);
   const [multiMatchModalOpen, setMultiMatchModalOpen] = useState(false);
   const catalogModalOpenRef = useRef(false);
@@ -114,7 +124,7 @@ const ModuleLookupEditor = React.forwardRef(({
   multiMatchModalOpenRef.current = multiMatchModalOpen;
   const currentTextRef = useRef(initialText);
   const inputTextRef = useRef(initialText);   // vždy aktuální inputText pro native handler
-  const freeTextWrapperRef = useRef(null);    // ref na wrapper div → querySelector('input')
+  const editorWrapperRef = useRef(null);      // ref na wrapper div → querySelector('input')
   const isStoppedRef = useRef(false);
   const justSelectedRef = useRef(false);
   // Nastaven synchronně před každým stopEditing() voláním.
@@ -130,6 +140,7 @@ const ModuleLookupEditor = React.forwardRef(({
   // Ref na suggestions a handleAutoCompleteSelect — přístupné v capture handleru bez stale closure
   const suggestionsRef = useRef([]);
   const handleAutoCompleteSelectRef = useRef(null);
+  const handleCatalogSelectChangeRef = useRef(null);
 
   // ─── Lokální filtrování návrhů (bez API volání) ───────────────────────────────
   const suggestions = React.useMemo(() => {
@@ -140,27 +151,64 @@ const ModuleLookupEditor = React.forwardRef(({
           const label = moduleDefinition?.getDisplayValue?.(item) || item.code || item.name || '';
           return label.toLowerCase().includes(inputText.toLowerCase());
         });
-    return source.slice(0, 15).map(item => ({
-      value: String(item[vf]),
-      label: moduleDefinition?.getDisplayValue?.(item) || item.code || item.name || '',
-      item,
-    }));
-  }, [allItems, inputText, moduleDefinition]);
+    const result = source.map(item => {
+      const displayText = moduleDefinition?.getDisplayValue?.(item) || item.code || item.name || String(item[vf] || '');
+      const originalLabel = moduleDefinition?.renderOption ? moduleDefinition.renderOption(item, displayText) : displayText;
+      return {
+        value: String(item[vf]),
+        label: (
+          <div data-mle-value={String(item[vf])} style={{ display: 'contents' }}>
+            {originalLabel}
+          </div>
+        ),
+        displayText,
+        item,
+      };
+    });
+    return allowFreeText ? result.slice(0, 50) : result;
+  }, [allItems, inputText, moduleDefinition, allowFreeText]);
   suggestionsRef.current = suggestions;
 
-  // ─── AG Grid isCancelAfterEnd ─────────────────────────────────────────────────
-  // Poznámka: AG Grid 35 používá CellEditorCompProxy.getValue() (vrací compProxy.value aktualizované
-  // přes onValueChange prop), nikoli useImperativeHandle ref. useImperativeHandle zde není potřeba.
+  // ─── AG Grid useGridCellEditor ───────────────────────────────────────────────
+  // AG Grid 35 vyžaduje getValue() pro získání výsledné hodnoty při stopEditing().
+  // Bez getValue() může grid ignorovat změnu, i když byl volán onValueChange.
+  const initialValueRef = useRef(value);
+
   useGridCellEditor({
+    getValue: () => {
+      // Pokud máme pendingValue (zrovna vybráno), použijeme ji
+      if (pendingValueRef.current !== null) return pendingValueRef.current;
+      
+      // Catalog-only mód: catalogSelectedRef je vždy aktuální
+      if (!allowFreeText) return catalogSelectedRef.current;
+      
+      // Fallback na aktuální stav textu pro free-text
+      return { id: null, text: currentTextRef.current || '' };
+    },
     isCancelAfterEnd: () => {
+      // Pokud existuje pendingValue, uživatel explicitně něco vybral/potvrdil -> NErušit.
+      if (pendingValueRef.current !== null) {
+        console.log('[MLE] isCancelAfterEnd: false (has pending value)');
+        return false;
+      }
+
       if (!allowFreeText) {
-        return !catalogSelected || catalogSelected === value;
+        // Porovnání pomocí ID proti INITIAL hodnotě (prop value se může v čase měnit)
+        const vf = moduleDefinition?.valueField || 'id';
+        const isSame = catalogSelectedRef.current?.[vf] === initialValueRef.current?.[vf];
+        console.log('[MLE] isCancelAfterEnd (catalog):', isSame, { 
+          new: catalogSelectedRef.current?.[vf], 
+          old: initialValueRef.current?.[vf] 
+        });
+        return isSame;
       }
+
+      // Free-text porovnání proti INITIAL hodnotě
       const currentText = currentTextRef.current ?? '';
-      const originalText = typeof value === 'object' ? (value?.text || '') : (value || '');
-      const result = pendingValueRef.current !== null ? false : currentText === originalText;
-      console.log('[MLE] isCancelAfterEnd', { pendingValue: pendingValueRef.current, currentText, originalText, result });
-      return result;
+      const originalText = typeof initialValueRef.current === 'object' ? (initialValueRef.current?.text || '') : (initialValueRef.current || '');
+      const isSame = currentText === originalText;
+      console.log('[MLE] isCancelAfterEnd (free-text):', isSame);
+      return isSame;
     },
   });
 
@@ -179,10 +227,13 @@ const ModuleLookupEditor = React.forwardRef(({
     const vf = moduleDefinition?.valueField || 'id';
     const item = allItems.find(i => String(i[vf]) === String(selectedId));
     if (!item) return;
+    catalogSelectedRef.current = item;
+    pendingValueRef.current = item; // Synchronní příznak pro isCancelAfterEnd
     setCatalogSelected(item);
     if (onValueChange) onValueChange(item);
     setTimeout(() => stopEditing(), 0);
   }, [allItems, moduleDefinition, onValueChange, stopEditing]);
+  handleCatalogSelectChangeRef.current = handleCatalogSelectChange;
 
   const catalogCurrentId = React.useMemo(() => {
     if (allowFreeText || !value) return null;
@@ -204,6 +255,8 @@ const ModuleLookupEditor = React.forwardRef(({
       pendingValueRef.current = selected;
       if (onValueChange) onValueChange(selected);
     } else {
+      catalogSelectedRef.current = item;
+      pendingValueRef.current = item; // Synchronní příznak pro isCancelAfterEnd
       setCatalogSelected(item);
       if (onValueChange) onValueChange(item);
     }
@@ -324,8 +377,7 @@ const ModuleLookupEditor = React.forwardRef(({
   // rc-select volá stopPropagation() na Enter v bubble fázi → náš React onKeyDown
   // na wrapperu ho nikdy nedostane. Capture-phase native listener se spustí jako první.
   useEffect(() => {
-    if (!allowFreeText) return;
-    const el = freeTextWrapperRef.current;
+    const el = editorWrapperRef.current;
     if (!el) return;
     const input = el.querySelector('input');
     if (!input) return;
@@ -349,17 +401,41 @@ const ModuleLookupEditor = React.forwardRef(({
       if (activeOptionEl) {
         e.stopImmediatePropagation();
         e.preventDefault();
-        const labelText = activeOptionEl.querySelector('.ant-select-item-option-content')?.textContent?.trim();
-        if (labelText) {
-          const matched = suggestionsRef.current.find((s) => s.label === labelText);
-          if (matched) {
-            handleAutoCompleteSelectRef.current?.(matched.value, matched);
-            return;
+        const contentEl = activeOptionEl.querySelector('.ant-select-item-option-content');
+        if (contentEl) {
+          const mleValue = contentEl.querySelector('[data-mle-value]')?.getAttribute('data-mle-value');
+          if (mleValue) {
+            const matched = suggestionsRef.current.find((s) => s.value === mleValue);
+            if (matched) {
+              if (allowFreeText) {
+                handleAutoCompleteSelectRef.current?.(matched.value, matched);
+              } else {
+                handleCatalogSelectChangeRef.current?.(matched.value);
+              }
+              return;
+            }
+          }
+          
+          const spanText = contentEl.querySelector('span')?.textContent?.trim();
+          const fullText = contentEl.textContent?.trim();
+          const labelText = spanText || fullText;
+          if (labelText) {
+            const matched = suggestionsRef.current.find((s) => s.displayText === labelText || String(s.label) === labelText);
+            if (matched) {
+              if (allowFreeText) {
+                handleAutoCompleteSelectRef.current?.(matched.value, matched);
+              } else {
+                handleCatalogSelectChangeRef.current?.(matched.value);
+              }
+              return;
+            }
           }
         }
         return;
       }
 
+      if (!allowFreeText) return;
+
       const text = inputTextRef.current || '';
       // Prázdný input bez předchozí hodnoty → nechat AG Grid zpracovat (cancel)
       if (!text.trim() && pendingValueRef.current === null && !initialText) return;
@@ -408,30 +484,42 @@ const ModuleLookupEditor = React.forwardRef(({
   // ─── Render: catalog-only mód ─────────────────────────────────────────────────
   if (!allowFreeText) {
     const vf = moduleDefinition?.valueField || 'id';
-    const selectOptions = allItems.map(item => ({
-      value: item[vf],
-      label: moduleDefinition?.getDisplayValue?.(item) || item.code || item.name || String(item[vf]),
-    }));
+    const selectOptions = allItems.map(item => {
+      const displayText = moduleDefinition?.getDisplayValue?.(item) || item.code || item.name || String(item[vf] || '');
+      const originalLabel = moduleDefinition?.renderOption ? moduleDefinition.renderOption(item, displayText) : displayText;
+      return {
+        value: item[vf],
+        label: (
+          <div data-mle-value={String(item[vf])} style={{ display: 'contents' }}>
+            {originalLabel}
+          </div>
+        ),
+        displayText,
+      };
+    });
 
     return (
-      <div style={{ width: '100%', minWidth: 250, padding: 4, borderRadius: 0, background: '#fff', boxShadow: '0 2px 8px rgba(0,0,0,0.15)' }}>
-        <div style={{ display: 'flex', gap: 4 }}>
+      <div style={{ width: '100%', minWidth: 250, height: rowHeight, display: 'flex', alignItems: 'stretch' }} ref={editorWrapperRef}>
+        <div style={{ display: 'flex', flex: 1, height: '100%' }}>
           <Select
-            style={{ flex: 1 }}
+            style={{ flex: 1, height: '100%' }}
             value={catalogCurrentId}
             options={selectOptions}
+            optionLabelProp="displayText"
             loading={allItemsLoading}
             showSearch
             filterOption={(input, option) =>
-              String(option?.label || '').toLowerCase().includes(input.toLowerCase())
+              String(option?.displayText || option?.label || '').toLowerCase().includes(input.toLowerCase())
             }
             onChange={handleCatalogSelectChange}
+            onSearch={handleInputChange}
             getPopupContainer={() => document.body}
             dropdownStyle={{ zIndex: 9999 }}
             placeholder={moduleDefinition?.placeholder || 'Vyberte...'}
+            defaultOpen={autoOpen}
             autoFocus
           />
-          <Button icon={<SearchOutlined />} onMouseDown={e => e.preventDefault()} onClick={() => setCatalogModalOpen(true)} type="primary" />
+          <Button icon={<SearchOutlined />} onMouseDown={e => e.preventDefault()} onClick={() => setCatalogModalOpen(true)} type="primary" style={{ height: '100%', borderRadius: 0 }} />
         </div>
         {catalogModalContent}
       </div>
@@ -440,8 +528,8 @@ const ModuleLookupEditor = React.forwardRef(({
 
   // ─── Render: free-text mód ────────────────────────────────────────────────────
   return (
-    <div style={{ width: '100%', minWidth: 250, padding: 4, borderRadius: 0, background: '#fff', boxShadow: '0 2px 8px rgba(0,0,0,0.15)' }}>
-      <div ref={freeTextWrapperRef} style={{ display: 'flex', gap: 4 }}>
+    <div style={{ width: '100%', minWidth: 250, height: rowHeight, display: 'flex', alignItems: 'stretch' }}>
+      <div ref={editorWrapperRef} style={{ display: 'flex', flex: 1, height: '100%' }}>
         <AutoComplete
           style={{ flex: 1 }}
           value={inputText}
@@ -469,6 +557,7 @@ const ModuleLookupEditor = React.forwardRef(({
             setCatalogModalOpen(true);
           }}
           type="primary"
+          style={{ height: '100%', borderRadius: 0 }}
         />
       </div>
 

package/Editors/RouteCellEditor.jsx

@@ -0,0 +1,124 @@
+/* eslint-disable */
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { useGridCellEditor } from 'ag-grid-react';
+import DraggableModal from '@bit.rhplus/draggable-modal';
+import { useSharedGridItems } from '@bit.rhplus/shared-grid-form';
+
+/**
+ * Vnitřní komponenta editoru — přístup k Jotai SharedGridForm kontextu.
+ */
+const RouteEditorInner = ({
+  instanceId,
+  initialData,
+  gridComponent: GridComponent,
+  onCancel,
+  onSave,
+}) => {
+  const { effectiveItems, setItems } = useSharedGridItems(instanceId);
+  const distanceKmRef = useRef(null);
+
+  // Inicializace dat při mountu
+  useEffect(() => {
+    if (Array.isArray(initialData)) {
+      setItems(initialData);
+    }
+  }, []); // Pouze při mountu
+
+  const handleRouteCalculated = useCallback((info) => {
+    if (info?.distance != null && info.distance > 0) {
+      distanceKmRef.current = Math.round(info.distance / 1000);
+    }
+  }, []);
+
+  const handleOk = useCallback(() => {
+    onSave(effectiveItems, distanceKmRef.current);
+  }, [effectiveItems, onSave]);
+
+  return (
+    <DraggableModal
+      title="Editace trasy"
+      open={true}
+      onOk={handleOk}
+      onCancel={onCancel}
+      width={1100}
+      height="80vh"
+      resizable={true}
+      getContainer={() => document.body}
+      destroyOnClose
+      styles={{ body: { height: '100%', overflow: 'hidden', padding: 0 } }}
+      centered
+      maskClosable={false}
+    >
+      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+        <GridComponent instanceId={instanceId} showAddButton={true} onRouteCalculated={handleRouteCalculated} />
+      </div>
+    </DraggableModal>
+  );
+};
+
+/**
+ * RouteCellEditor — AG Grid 35 Cell Editor pro správu tras.
+ *
+ * Používá useGridCellEditor hook (povinné v AG Grid 31+).
+ * Props jsou předány přímo z AG Grid (value, onValueChange, stopEditing + cellEditorParams).
+ */
+/**
+ * RouteCellEditor — AG Grid 35 Cell Editor pro správu tras.
+ *
+ * Používá useGridCellEditor hook (povinné v AG Grid 31+).
+ * Props jsou předány přímo z AG Grid (value, onValueChange, stopEditing + cellEditorParams).
+ *
+ * @param {Function} transformValue - volitelná funkce z cellEditorParams pro transformaci
+ *   effectiveItems před uložením (např. pro převod temp ID na null a type string na transportTypeId).
+ *   Pokud není zadána, data se uloží bez transformace.
+ */
+const RouteCellEditor = ({ value, onValueChange, stopEditing, data, gridComponent: GridComponent, transformValue }) => {
+  const [visible, setVisible] = useState(true);
+
+  // Ref pro synchronní přístup z getValue() — AG Grid 35 volá getValue() při stopEditing()
+  const valueRef = useRef(value);
+
+  // AG Grid 35: useGridCellEditor je povinné pro správné getValue() při stopEditing()
+  useGridCellEditor({
+    getValue: () => valueRef.current,
+  });
+
+  // Stabilní instanceId pro celý editační proces
+  const [instanceId] = useState(() => `route-editor-${data?.id || Date.now()}`);
+
+  const handleSave = useCallback((items, distanceKm) => {
+    // Transformace dat před uložením — připraví formát kompatibilní s backendem
+    const prepared = transformValue ? transformValue(items) : items;
+    const payload = distanceKm != null ? { routes: prepared, destination: distanceKm } : prepared;
+    valueRef.current = payload;
+    if (onValueChange) onValueChange(payload);
+    setVisible(false);
+    stopEditing();
+  }, [transformValue, onValueChange, stopEditing]);
+
+  const handleCancel = useCallback(() => {
+    setVisible(false);
+    setTimeout(() => stopEditing(true), 0); // true = cancel, necommitovat
+  }, [stopEditing]);
+
+  if (!visible) return null;
+
+  if (!GridComponent) {
+    console.error('RouteCellEditor: gridComponent missing in cellEditorParams');
+    return null;
+  }
+
+  return (
+    <RouteEditorInner
+      instanceId={instanceId}
+      initialData={value}
+      gridComponent={GridComponent}
+      onSave={handleSave}
+      onCancel={handleCancel}
+    />
+  );
+};
+
+RouteCellEditor.displayName = 'RouteCellEditor';
+
+export default RouteCellEditor;

package/Editors/index.jsx

@@ -1,3 +1,4 @@
 export {default as DatePickerEditor} from './DatePickerEditor';
 export {default as ModuleLookupEditor} from './ModuleLookupEditor';
 export {default as AddressLookupEditor} from './AddressLookupEditor';
+export {default as RouteCellEditor} from './RouteCellEditor';

package/OnCellValueChanged.js

@@ -1,7 +1,7 @@
-
-/* eslint-disable no-param-reassign */
+/* eslint-disable */
 export const RhPlusOnCellValueChanged = (event, options) => 
 {
+  console.log("onCellValueChanged");
   event.data._rh_plus_ag_grid_new_item = false;
   event.data._rh_plus_ag_grid_row_changed = true;
 

package/Renderers/RouteCellRenderer.jsx

@@ -0,0 +1,76 @@
+/* eslint-disable */
+import React from 'react';
+import { MapPin, Flag, ChevronRight } from 'lucide-react';
+
+/**
+ * RouteCellRenderer — zobrazuje trasu se šipkami a ikonami pro nakládku/vykládku.
+ * Bucovice => slavkov u Brna => brno => praha
+ */
+const RouteCellRenderer = (params) => {
+  const routes = params.value || params.data?.routes || [];
+  if (!Array.isArray(routes) || routes.length === 0) {
+    return <span style={{ color: '#bfbfbf', fontStyle: 'italic' }}>Nezadána</span>;
+  }
+
+
+  return (
+    <div style={{ 
+      display: 'flex', 
+      alignItems: 'center', 
+      gap: '4px', 
+      overflow: 'hidden', 
+      height: '100%',
+      padding: '0 4px'
+    }}>
+      {routes.map((route, index) => {
+        const isLast = index === routes.length - 1;
+        const isFirst = index === 0;
+        
+        // Typ: 1 = loading (nakládka), 2 = unloading (vykládka)
+        const transportTypeId = route.transportTypeId || (route.type === 'loading' ? 1 : 2);
+        
+        const isLoading = transportTypeId === 1;
+        const color = isLoading ? '#1890ff' : '#52c41a';
+        const Icon = isLoading ? MapPin : Flag;
+        
+        const name = route.project?.name || route.name || route.address || '???';
+
+        return (
+          <React.Fragment key={route.id || index}>
+            <div style={{ 
+              display: 'flex', 
+              alignItems: 'center', 
+              gap: '2px', 
+              flexShrink: 0,
+              maxWidth: '120px'
+            }}>
+              <Icon 
+                size={14} 
+                color={color} 
+                fill={isFirst || isLast ? `${color}33` : 'none'} 
+                style={{ flexShrink: 0 }}
+              />
+              <span style={{ 
+                fontSize: '12px', 
+                fontWeight: isFirst || isLast ? '500' : '400',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                color: '#262626'
+              }}>
+                {name}
+              </span>
+            </div>
+            {!isLast && (
+              <ChevronRight size={12} color="#bfbfbf" style={{ flexShrink: 0 }} />
+            )}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};
+
+RouteCellRenderer.displayName = 'RouteCellRenderer';
+
+export default RouteCellRenderer;

package/Renderers/SelectCellRenderer.jsx

@@ -2,16 +2,37 @@
 import React from 'react';
 import * as LucideIcons from 'lucide-react';
 
-export default ({value, displayField = 'name', imageField = null}) => {
+export default (params) => {
+    const { value, data, displayField = 'name', imageField = null, icon, iconColor } = params;
     if (value == null) return null;
+
     const displayText = typeof value === 'object'
         ? (value[displayField] ?? value.name ?? '')
         : String(value);
-    const icon = value?.icon;
+
     const imageUrl = imageField && typeof value === 'object' ? value[imageField] : null;
 
-    // Přímý přístup ke komponentě ikony
-    const Icon = icon && LucideIcons[icon] ? LucideIcons[icon] : null;
+    // Lucide ikona z hodnoty (hodnota má pole icon s názvem Lucide komponenty)
+    const lucideIconName = value?.icon;
+    const LucideIcon = !imageUrl && !icon && lucideIconName && LucideIcons[lucideIconName]
+        ? LucideIcons[lucideIconName]
+        : null;
+
+    // Custom ikona předaná přes cellRendererParams.icon — může být element, funkce nebo komponenta
+    let iconElement = null;
+    if (!imageUrl && icon) {
+        const resolvedColor = typeof iconColor === 'function' ? iconColor({ data, value }) : iconColor;
+        const colorStyle = resolvedColor ? { color: resolvedColor } : {};
+
+        if (React.isValidElement(icon)) {
+            iconElement = React.cloneElement(icon, { style: { ...colorStyle, ...icon.props.style } });
+        } else if (typeof icon === 'function') {
+            const rendered = icon({ data, value });
+            iconElement = resolvedColor && React.isValidElement(rendered)
+                ? React.cloneElement(rendered, { style: { ...colorStyle, ...rendered.props?.style } })
+                : rendered;
+        }
+    }
 
     return (
         <div style={{
@@ -29,14 +50,19 @@ export default ({value, displayField = 'name', imageField = null}) => {
                     onError={(e) => { e.currentTarget.style.display = 'none'; }}
                 />
             )}
-            {!imageUrl && Icon && (
+            {iconElement && (
+                <span style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>
+                    {iconElement}
+                </span>
+            )}
+            {!iconElement && LucideIcon && (
                 <span style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>
-                    <Icon size={16} />
+                    <LucideIcon size={16} />
                 </span>
             )}
             <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
                 {displayText}
             </span>
         </div>
-    )
+    );
 }

package/Renderers/index.jsx

@@ -2,3 +2,4 @@ export {default as SelectCellRenderer} from './SelectCellRenderer';
 export {default as ModuleLookupRenderer} from './ModuleLookupRenderer';
 export {default as AddressLookupRenderer} from './AddressLookupRenderer';
 export {default as NumberedListRenderer} from './NumberedListRenderer';
+export {default as RouteCellRenderer} from './RouteCellRenderer';

package/dist/Aggregations.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 // ✅ OPTIMALIZACE: Enumerable odstraněn - nahrazen native JS metodami
 import moment from 'moment';
-import { currencySymbols } from '@bit.rhplus/ui.grid/';
+import { currencySymbols } from '@bit.rhplus/ui.grid';
 const getColumnOrderDirection = (range) => (range.columns[0].colId === range.startColumn.colId) ? 1 : -1;
 const getColumnOrderIndex = (range, index) => {
     if (getColumnOrderDirection(range) === 1) {