@bit.rhplus/ag-grid 0.0.49 → 0.0.51

package/Renderers/IconRenderer.jsx

@@ -1,10 +1,50 @@
 /* eslint-disable */
 import * as React from 'react';
 import { CircleHelp } from 'lucide-react';
+import * as LucideIcons from 'lucide-react';
 
-export default function IconRenderer(props) {
-  const { data, value, colDef: { iconRendererParams = {} } = {} } = props;
+// Helper funkce pro získání hodnoty z nested path (např. 'accountingType.icon')
+const getValueByPath = (obj, path) => {
+  if (!path || !obj) return undefined;
+  return path.split('.').reduce((acc, part) => acc?.[part], obj);
+};
+
+// Style constants
+const ICON_WRAPPER_STYLE = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  height: '100%',
+  flexShrink: 0,
+};
+
+const TEXT_WRAPPER_STYLE = {
+  flexShrink: 1,
+  minWidth: 0,
+};
+
+const BADGE_CONTAINER_BASE_STYLE = {
+  position: 'relative',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+const BADGE_BASE_STYLE = {
+  position: 'absolute',
+  borderRadius: '50%',
+  minWidth: '16px',
+  height: '16px',
+  fontSize: '10px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontWeight: 'bold',
+  lineHeight: 1,
+  zIndex: 1
+};
 
+function IconRenderer(props) {
+  const { data, value, colDef: { iconRendererParams = {} } = {} } = props;
 
   if (!iconRendererParams) return null;
 
@@ -13,40 +53,38 @@ export default function IconRenderer(props) {
     visibleGetter,
     showOnGroup,
     icon, // Komponenta nebo funkce pro ikonu
+    iconField, // Cesta k poli s názvem ikony (např. 'accountingType.icon')
     iconColor, // Barva ikony nebo funkce vracející barvu
     badge, // Číslo nebo funkce pro badge
     showZero = false, // Zda zobrazit badge když je hodnota 0
     size = 16,
-    // Nové props
-    iconLeft = false, // Zda zobrazit ikonu vlevo
-    iconRight = false, // Zda zobrazit ikonu vpravo
-    showText = true, // Zda zobrazit text (default true pro zpětnou kompatibilitu)
-    textGap = 5, // Mezera mezi ikonou a textem
-    // Badge styling props
-    badgeColor = '#dc3545', // Barva pozadí badge
-    badgeTextColor = 'white', // Barva textu badge
-    badgePosition = 'top-right', // Pozice badge
+    iconLeft = false,
+    iconRight = false,
+    showText = true,
+    textGap = 5,
+    badgeColor = '#dc3545',
+    badgeTextColor = 'white',
+    badgePosition = 'top-right',
   } = iconRendererParams;
 
-  const visibleResult = visibleGetter ? visibleGetter(data) : true;
+  const visibleResult = React.useMemo(() =>
+    visibleGetter ? visibleGetter(data) : true,
+    [visibleGetter, data]
+  );
 
-  const getIconColor = () => {
+  const getIconColor = React.useCallback(() => {
     if (!iconColor) return undefined;
-    
-    // Pokud je iconColor funkce, zavolej ji s daty
+
     if (typeof iconColor === 'function') {
       return iconColor({ data, value, props });
     }
-    
-    // Pokud je iconColor string/hodnota
+
     return iconColor;
-  };
+  }, [iconColor, data, value, props]);
 
-  const renderIcon = (IconComponent, iconProps = {}) => {
+  const renderIcon = React.useCallback((IconComponent, iconProps = {}) => {
     const computedIconColor = getIconColor();
-    
-    
-    // Vytvoř finální style objekt s !important pro override
+
     const finalStyle = {
       fontSize: size,
       ...(iconProps.style || {}),
@@ -56,25 +94,21 @@ export default function IconRenderer(props) {
     const finalIconProps = {
       size,
       style: finalStyle,
-      ...(computedIconColor && { color: computedIconColor }), // Pro Lucide ikony
+      ...(computedIconColor && { color: computedIconColor }),
       ...iconProps
     };
 
     let iconElement;
-    
-    // Pokud je IconComponent funkce, zavoláme ji s daty
+
     if (typeof IconComponent === 'function') {
       iconElement = IconComponent({ data, value, ...finalIconProps });
     }
-    // Pokud je IconComponent React komponenta
     else if (React.isValidElement(IconComponent)) {
       iconElement = React.cloneElement(IconComponent, finalIconProps);
     }
-    // Pokud je IconComponent konstruktor komponenty
     else if (IconComponent && typeof IconComponent === 'object' && IconComponent.$$typeof) {
       iconElement = <IconComponent {...finalIconProps} />;
     }
-    // Pokud je IconComponent string (pro emoji nebo text)
     else if (typeof IconComponent === 'string') {
       iconElement = <span style={finalStyle}>{IconComponent}</span>;
     }
@@ -82,123 +116,118 @@ export default function IconRenderer(props) {
       return null;
     }
 
-    // Pokud máme barvu, wrap ikonu ve vlastním spanu pro lepší kontrolu barvy
     if (computedIconColor) {
       return (
-        <span style={{ color: computedIconColor, display: 'inline-flex', alignItems: 'center' }}>
+        <span style={{
+          color: computedIconColor,
+          display: 'inline-flex',
+          alignItems: 'center',
+          height: '100%'
+        }}>
           {iconElement}
         </span>
       );
     }
 
     return iconElement;
-  };
+  }, [size, getIconColor, data, value]);
 
-  const getBadgeValue = () => {
+  const badgeValue = React.useMemo(() => {
     if (!badge) return null;
-    
-    // Pokud je badge funkce, zavolej ji s daty
+
     if (typeof badge === 'function') {
       return badge({ data, value });
     }
-    
-    // Pokud je badge číslo nebo string
+
     return badge;
-  };
+  }, [badge, data, value]);
+
+  const badgePositionStyle = React.useMemo(() => {
+    const positions = {
+      'top-right': { top: '2px', right: '-2px' },
+      'top-left': { top: '2px', left: '-2px' },
+      'bottom-right': { bottom: '2px', right: '-2px' },
+      'bottom-left': { bottom: '2px', left: '-2px' }
+    };
+    return positions[badgePosition] || positions['top-right'];
+  }, [badgePosition]);
+
+  const badgeStyle = React.useMemo(() => ({
+    ...BADGE_BASE_STYLE,
+    ...badgePositionStyle,
+    backgroundColor: badgeColor,
+    color: badgeTextColor,
+    border: `1px solid ${badgeTextColor}`,
+  }), [badgePositionStyle, badgeColor, badgeTextColor]);
 
-  const Icon = ({ ...restProps }) => {
-    const badgeValue = getBadgeValue();
+  const Icon = React.useMemo(() => {
     const iconElement = (() => {
-      // Pokud je definována icon funkce/komponenta, použij ji
+      // Priorita 1: Pokud je definován iconField, získej název ikony z dat a načti z Lucide
+      if (iconField) {
+        const iconName = getValueByPath(data, iconField);
+        console.log('🎨 IconRenderer - iconField:', {
+          iconField,
+          iconName,
+          data,
+          hasLucideIcon: iconName ? !!LucideIcons[iconName] : false
+        });
+        if (iconName) {
+          const LucideIcon = LucideIcons[iconName];
+          if (LucideIcon) {
+            return <LucideIcon size={size} />;
+          }
+        }
+        // Pokud ikona z iconField neexistuje, vrať null (nic nezobrazit)
+        return null;
+      }
+
+      // Priorita 2: Použij icon prop (funkce nebo komponenta)
       if (icon) {
-        return renderIcon(icon, { ...restProps });
+        return renderIcon(icon, {});
       }
 
-      // Fallback na CircleHelp
-      return <CircleHelp size={size} {...restProps} />;
+      // Priorita 3: Default - nic nezobrazit pokud není ani iconField ani icon
+      return null;
     })();
 
-    // Pokud není badge, vrať jen ikonu
     if (!badgeValue && (badgeValue !== 0 || !showZero)) {
       return iconElement;
     }
 
-    // Vrať ikonu s badge
     return (
-      <div 
-        style={{ 
-          position: 'relative', 
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '100%'
-        }}
-      >
+      <div style={BADGE_CONTAINER_BASE_STYLE}>
         {iconElement}
-        <span
-          style={{
-            position: 'absolute',
-            ...(badgePosition === 'top-right' && { top: '2px', right: '-2px' }),
-            ...(badgePosition === 'top-left' && { top: '2px', left: '-2px' }),
-            ...(badgePosition === 'bottom-right' && { bottom: '2px', right: '-2px' }),
-            ...(badgePosition === 'bottom-left' && { bottom: '2px', left: '-2px' }),
-            backgroundColor: badgeColor,
-            color: badgeTextColor,
-            borderRadius: '50%',
-            minWidth: '16px',
-            height: '16px',
-            fontSize: '10px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontWeight: 'bold',
-            border: `1px solid ${badgeTextColor}`,
-            lineHeight: 1,
-            zIndex: 1
-          }}
-        >
+        <span style={badgeStyle}>
           {badgeValue > 99 ? '99+' : badgeValue}
         </span>
       </div>
     );
-  };
+  }, [icon, iconField, renderIcon, badgeValue, showZero, badgeStyle, size, data]);
 
-  const showCondition = () => {
+  const showCondition = React.useMemo(() => {
     const newItem = (data && data._rh_plus_ag_grid_new_item) || false;
     return !newItem && (showOnGroup || !!data) && visibleResult;
-  };
+  }, [data, showOnGroup, visibleResult]);
 
-  if (!showCondition()) return null;
+  if (!showCondition) return null;
 
-  // Určíme, jestli máme zobrazit ikonu a text
-  const hasIcon = iconLeft || iconRight || (!iconLeft && !iconRight); // Pokud není specifikováno, zobrazí se ikona (zpětná kompatibilita)
+  const hasIcon = iconLeft || iconRight || (!iconLeft && !iconRight);
   const hasText = showText && value != null && value !== '';
 
-  // Pokud nemáme ani ikonu ani text, nevrací nic
   if (!hasIcon && !hasText) return null;
 
-  // Určíme pořadí elementů
-  const renderContent = () => {
+  const content = React.useMemo(() => {
     const iconElement = hasIcon ? (
-      <Icon
-        style={{
-          display: 'inline-block',
-          flexShrink: 0,
-        }}
-      />
+      <div style={ICON_WRAPPER_STYLE}>{Icon}</div>
     ) : null;
 
     const textElement = hasText ? (
-      <span style={{ flexShrink: 1, minWidth: 0 }}>
-        {value}
-      </span>
+      <span style={TEXT_WRAPPER_STYLE}>{value}</span>
     ) : null;
 
-    // Pokud máme jen ikonu nebo jen text
     if (!hasIcon) return textElement;
     if (!hasText) return iconElement;
 
-    // Pokud máme obojí, určíme pořadí
     if (iconRight) {
       return (
         <>
@@ -206,29 +235,30 @@ export default function IconRenderer(props) {
           {iconElement}
         </>
       );
-    } else {
-      // iconLeft nebo default (vlevo)
-      return (
-        <>
-          {iconElement}
-          {textElement}
-        </>
-      );
     }
-  };
+
+    return (
+      <>
+        {iconElement}
+        {textElement}
+      </>
+    );
+  }, [hasIcon, hasText, Icon, value, iconRight]);
+
+  const containerStyle = React.useMemo(() => ({
+    width: '100%',
+    display: 'flex',
+    justifyContent: cellAlign ?? (hasText ? 'flex-start' : 'center'),
+    alignItems: 'center',
+    height: '100%',
+    gap: hasIcon && hasText ? `${textGap}px` : '0',
+  }), [cellAlign, hasText, hasIcon, textGap]);
 
   return (
-    <span
-      style={{
-        width: '100%',
-        display: 'flex',
-        justifyContent: cellAlign ?? (hasText ? 'flex-start' : 'center'), // Pokud má text, defaultně vlevo
-        alignItems: 'center',
-        height: '100%',
-        gap: hasIcon && hasText ? `${textGap}px` : '0',
-      }}
-    >
-      {renderContent()}
+    <span style={containerStyle}>
+      {content}
     </span>
   );
-}
+}
+
+export default React.memo(IconRenderer);

package/Renderers/ImageRenderer.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import * as React from 'react';
 
-export default function ImageRenderer(props) {
+function ImageRenderer(props) {
   const { data, value, colDef: { imageRendererParams = {} } = {} } = props;
 
   if (!imageRendererParams) return null;
@@ -19,17 +19,20 @@ export default function ImageRenderer(props) {
 
   const [hasError, setHasError] = React.useState(false);
 
-  const visibleResult = visibleGetter ? visibleGetter(data) : true;
+  const visibleResult = React.useMemo(() =>
+    visibleGetter ? visibleGetter(data) : true,
+    [visibleGetter, data]
+  );
 
-  const getImageUrl = () => {
+  const computedImageUrl = React.useMemo(() => {
     if (!imageUrl) return null;
-    
+
     if (typeof imageUrl === 'function') {
       return imageUrl({ data, value, props });
     }
-    
+
     return imageUrl;
-  };
+  }, [imageUrl, data, value, props]);
 
   const handleImageError = React.useCallback(() => {
     setHasError(true);
@@ -37,29 +40,34 @@ export default function ImageRenderer(props) {
 
   React.useEffect(() => {
     setHasError(false);
-  }, [getImageUrl()]);
+  }, [computedImageUrl]);
 
-  const showCondition = () => {
+  const showCondition = React.useMemo(() => {
     const newItem = (data && data._rh_plus_ag_grid_new_item) || false;
     return !newItem && (showOnGroup || !!data) && visibleResult;
-  };
+  }, [data, showOnGroup, visibleResult]);
+
+  const containerStyle = React.useMemo(() => ({
+    width: '100%',
+    display: 'flex',
+    justifyContent: cellAlign || 'center',
+    alignItems: 'center',
+    height: '100%',
+  }), [cellAlign]);
 
-  if (!showCondition()) return null;
+  const finalImageStyle = React.useMemo(() => ({
+    width: imageSize,
+    height: imageSize,
+    objectFit: 'contain',
+    ...(typeof imageStyle === 'function' ? imageStyle({ data, value, props }) : imageStyle || {}),
+  }), [imageSize, imageStyle, data, value, props]);
 
-  const computedImageUrl = getImageUrl();
+  if (!showCondition) return null;
 
   if (hasError || !computedImageUrl) {
     if (fallbackText && value) {
       return (
-        <span
-          style={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: cellAlign || 'center',
-            alignItems: 'center',
-            height: '100%',
-          }}
-        >
+        <span style={containerStyle}>
           {value}
         </span>
       );
@@ -67,27 +75,8 @@ export default function ImageRenderer(props) {
     return null;
   }
 
-  const defaultImageStyle = {
-    width: imageSize,
-    height: imageSize,
-    objectFit: 'contain',
-  };
-
-  const finalImageStyle = {
-    ...defaultImageStyle,
-    ...(typeof imageStyle === 'function' ? imageStyle({ data, value, props }) : imageStyle || {}),
-  };
-
   return (
-    <span
-      style={{
-        width: '100%',
-        display: 'flex',
-        justifyContent: cellAlign || 'center',
-        alignItems: 'center',
-        height: '100%',
-      }}
-    >
+    <span style={containerStyle}>
       <img
         src={computedImageUrl}
         alt={alt || value || 'Image'}
@@ -98,3 +87,5 @@ export default function ImageRenderer(props) {
     </span>
   );
 }
+
+export default React.memo(ImageRenderer);

package/Renderers/SelectRenderer.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export default function SelectRenderer(params) {
+function SelectRenderer(params) {
   const {value, value: {name} = {}} = params;
 
   if (!value)
@@ -12,4 +12,6 @@ export default function SelectRenderer(params) {
   //   imageUrl = `https://rhplus.blob.core.windows.net/countries/${params.value.toUpperCase()}.png`;
 
   return <div>{name}</div>;
-}
+}
+
+export default React.memo(SelectRenderer);

package/Renderers/StateRenderer.jsx

@@ -1,12 +1,13 @@
 /* eslint-disable */
 import * as React from 'react';
 
+// Helper function moved outside component
 function getValueByPath(obj, path) {
   if (!obj || !path) return null;
   return path.split('.').reduce((o, k) => (o && o[k] !== undefined) ? o[k] : null, obj);
 }
 
-export default function StateRenderer(props) {
+function StateRenderer(props) {
   const { data, value, colDef: { stateRendererParams = {} } = {} } = props;
 
 
@@ -31,106 +32,107 @@ export default function StateRenderer(props) {
   const finalColor = color || textColor || 'white';
   const finalColorField = colorField || textColorField;
 
-  const visibleResult = visibleGetter ? visibleGetter(data) : true;
+  const visibleResult = React.useMemo(() =>
+    visibleGetter ? visibleGetter(data) : true,
+    [visibleGetter, data]
+  );
 
-  const getBgColor = () => {
+  const computedBgColor = React.useMemo(() => {
     // Priorita: bgColorField (hodnota z dat) -> bgColor (funkce nebo string)
     if (bgColorField && data) {
       const fieldValue = getValueByPath(data, bgColorField);
       if (fieldValue) return fieldValue;
     }
-    
+
     if (!bgColor) return '#666'; // default barva
-    
+
     // Pokud je bgColor funkce, zavolej ji s daty
     if (typeof bgColor === 'function') {
       return bgColor({ data, value, props });
     }
-    
+
     // Pokud je bgColor string/hodnota
     return bgColor;
-  };
+  }, [bgColor, bgColorField, data, value, props]);
 
-  const getTextColor = () => {
+  const computedTextColor = React.useMemo(() => {
     // Priorita: colorField/textColorField (hodnota z dat) -> color/textColor (funkce nebo string)
     if (finalColorField && data) {
       const fieldValue = getValueByPath(data, finalColorField);
       if (fieldValue) return fieldValue;
     }
-    
+
     if (!finalColor) return 'white'; // default barva
-    
+
     // Pokud je finalColor funkce, zavolej ji s daty
     if (typeof finalColor === 'function') {
       return finalColor({ data, value, props });
     }
-    
+
     // Pokud je finalColor string/hodnota
     return finalColor;
-  };
+  }, [finalColor, finalColorField, data, value, props]);
 
-  const getDisplayText = () => {
+  const displayText = React.useMemo(() => {
     if (displayField) {
       // Pokud je displayField funkce
       if (typeof displayField === 'function') {
         return displayField({ data, value, props });
       }
-      
+
       // Pokud je displayField string (název pole)
       if (typeof displayField === 'string') {
         return data?.[displayField] || value;
       }
     }
-    
+
     // Fallback na value
     return value || '';
-  };
+  }, [displayField, data, value, props]);
 
-  const showCondition = () => {
+  const showCondition = React.useMemo(() => {
     const newItem = (data && data._rh_plus_ag_grid_new_item) || false;
     return !newItem && (showOnGroup || !!data) && visibleResult;
-  };
+  }, [data, showOnGroup, visibleResult]);
 
-  if (!showCondition()) return null;
-
-  const computedBgColor = getBgColor();
-  const computedTextColor = getTextColor();
-  const displayText = getDisplayText();
+  if (!showCondition) return null;
 
   // Pokud nemáme text k zobrazení, nevrací nic
   if (!displayText) return null;
 
+  const containerStyle = React.useMemo(() => ({
+    width: '100%',
+    display: 'flex',
+    justifyContent: cellAlign === 'center' ? 'center' : cellAlign === 'right' ? 'flex-end' : 'flex-start',
+    alignItems: 'center',
+    height: '100%',
+  }), [cellAlign]);
+
+  const badgeStyle = React.useMemo(() => ({
+    backgroundColor: computedBgColor,
+    color: computedTextColor,
+    borderRadius: '20px',
+    padding: '2px 8px',
+    minWidth: `${minWidth}px`,
+    fontSize: `${fontSize}px`,
+    fontWeight: '500',
+    textAlign: 'center',
+    display: 'inline-block',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
+    lineHeight: '1.2',
+    height: 'auto',
+  }), [computedBgColor, computedTextColor, minWidth, fontSize]);
+
   return (
-    <div
-      style={{
-        width: '100%',
-        display: 'flex',
-        justifyContent: cellAlign === 'center' ? 'center' : cellAlign === 'right' ? 'flex-end' : 'flex-start',
-        alignItems: 'center',
-        height: '100%',
-      }}
-    >
-      <span
-        style={{
-          backgroundColor: computedBgColor,
-          color: computedTextColor,
-          borderRadius: '20px',
-          padding: '2px 8px',
-          minWidth: `${minWidth}px`,
-          fontSize: `${fontSize}px`,
-          fontWeight: '500',
-          textAlign: 'center',
-          display: 'inline-block',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
-          lineHeight: '1.2',
-          height: 'auto',
-        }}
-      >
+    <div style={containerStyle}>
+      <span style={badgeStyle}>
         {displayText}
       </span>
     </div>
   );
-}
+}
+
+export default React.memo(StateRenderer);

package/dist/BulkEdit/BulkEditButton.d.ts

@@ -13,7 +13,7 @@ export default BulkEditButton;
  * @param {Function} props.onSubmit - Handler pro submit
  * @param {Function} props.onCancel - Handler pro cancel
  */
-declare function BulkEditButton({ visible, position, range, column, cellCount, editPopover, onOpenPopover, onValueChange, onSubmit, onCancel, }: {
+declare function BulkEditButton({ visible, position, range, column, cellCount, rowsContainer, editPopover, onOpenPopover, onValueChange, onSubmit, onCancel, }: {
     visible: boolean;
     position: Object;
     range: Object;